@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/StatusLabel.stories.svelte

@@ -1,17 +1,17 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import StatusLabel from "./StatusLabel.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import StatusLabel from './StatusLabel.svelte';
 
   const { Story } = defineMeta({
-    title: "Display/StatusLabel",
+    title: 'Display/StatusLabel',
     component: StatusLabel,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
-      label: { control: "text" },
-    },
+      label: { control: 'text' }
+    }
   });
 </script>
 
-<Story name="Default" args={{ label: "Ready" }} />
+<Story name="Default" args={{ label: 'Ready' }} />
 
-<Story name="Long Text" args={{ label: "Processing workflow execution..." }} />
+<Story name="Long Text" args={{ label: 'Processing workflow execution...' }} />

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

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

@@ -6,14 +6,14 @@
 -->
 
 <script lang="ts">
-  import { untrack } from "svelte";
-  import type { InteractiveSwapState } from "../utils/nodeSwap.js";
-  import type { PortCompatibilityChecker } from "../utils/connections.js";
-  import Icon from "@iconify/svelte";
-  import { getNodeIcon } from "../utils/icons.js";
-  import { getCategoryColorToken } from "../utils/colors.js";
-  import PortMappingRow from "./PortMappingRow.svelte";
-  import ConfigMappingRow from "./ConfigMappingRow.svelte";
+  import { untrack } from 'svelte';
+  import type { InteractiveSwapState } from '../utils/nodeSwap.js';
+  import type { PortCompatibilityChecker } from '../utils/connections.js';
+  import Icon from '@iconify/svelte';
+  import { getNodeIcon } from '../utils/icons.js';
+  import { getCategoryColorToken } from '../utils/colors.js';
+  import PortMappingRow from './PortMappingRow.svelte';
+  import ConfigMappingRow from './ConfigMappingRow.svelte';
 
   interface Props {
     interactiveState: InteractiveSwapState;
@@ -23,13 +23,12 @@
     onBack: () => void;
   }
 
-  const { interactiveState, checker, onConfirm, onCancel, onBack }: Props =
-    $props();
+  const { interactiveState, checker, onConfirm, onCancel, onBack }: Props = $props();
 
   // Local mutable copy of the interactive state
   // JSON round-trip is intentional: structuredClone fails on Svelte 5 proxies
   let localState = $state<InteractiveSwapState>(
-    untrack(() => JSON.parse(JSON.stringify(interactiveState))),
+    untrack(() => JSON.parse(JSON.stringify(interactiveState)))
   );
 
   // Reinit when interactiveState changes
@@ -38,15 +37,9 @@
   });
 
   // Derived counts
-  let inputMappings = $derived(
-    localState.portMappings.filter((m) => m.direction === "input"),
-  );
-  let outputMappings = $derived(
-    localState.portMappings.filter((m) => m.direction === "output"),
-  );
-  let droppedCount = $derived(
-    localState.portMappings.filter((m) => !m.selectedNewPortId).length,
-  );
+  let inputMappings = $derived(localState.portMappings.filter((m) => m.direction === 'input'));
+  let outputMappings = $derived(localState.portMappings.filter((m) => m.direction === 'output'));
+  let droppedCount = $derived(localState.portMappings.filter((m) => !m.selectedNewPortId).length);
   let connectionCount = $derived(localState.portMappings.length);
   let hasDataLoss = $derived(droppedCount > 0);
 
@@ -54,7 +47,7 @@
   let usedInputPortIds = $derived.by(() => {
     const set = new Set<string>();
     for (const m of localState.portMappings) {
-      if (m.direction === "input" && m.selectedNewPortId) {
+      if (m.direction === 'input' && m.selectedNewPortId) {
         set.add(m.selectedNewPortId);
       }
     }
@@ -64,7 +57,7 @@
   let usedOutputPortIds = $derived.by(() => {
     const set = new Set<string>();
     for (const m of localState.portMappings) {
-      if (m.direction === "output" && m.selectedNewPortId) {
+      if (m.direction === 'output' && m.selectedNewPortId) {
         set.add(m.selectedNewPortId);
       }
     }
@@ -72,25 +65,23 @@
   });
 
   // Trivial swap: no connections and no config
-  let isTrivial = $derived(
-    connectionCount === 0 && localState.configMappings.length === 0,
-  );
+  let isTrivial = $derived(connectionCount === 0 && localState.configMappings.length === 0);
 
   function handlePortUpdate(index: number, newPortId: string | null): void {
     const mapping = localState.portMappings[index];
     if (!mapping) return;
 
     // For input ports: if this port is already used by another mapping, unmap the other
-    if (newPortId && mapping.direction === "input") {
+    if (newPortId && mapping.direction === 'input') {
       for (let i = 0; i < localState.portMappings.length; i++) {
         if (i === index) continue;
         const other = localState.portMappings[i];
-        if (other.direction === "input" && other.selectedNewPortId === newPortId) {
+        if (other.direction === 'input' && other.selectedNewPortId === newPortId) {
           localState.portMappings[i] = {
             ...other,
             selectedNewPortId: null,
-            matchQuality: "unmapped",
-            isOverridden: true,
+            matchQuality: 'unmapped',
+            isOverridden: true
           };
         }
       }
@@ -99,8 +90,8 @@
     localState.portMappings[index] = {
       ...mapping,
       selectedNewPortId: newPortId,
-      matchQuality: newPortId ? "manual" : "unmapped",
-      isOverridden: true,
+      matchQuality: newPortId ? 'manual' : 'unmapped',
+      isOverridden: true
     };
   }
 
@@ -112,9 +103,9 @@
       ...mapping,
       selectedNewPortId: mapping.autoSuggestedPortId,
       matchQuality: mapping.autoSuggestedPortId
-        ? (interactiveState.portMappings[index]?.matchQuality ?? "type")
-        : "unmapped",
-      isOverridden: false,
+        ? (interactiveState.portMappings[index]?.matchQuality ?? 'type')
+        : 'unmapped',
+      isOverridden: false
     };
   }
 
@@ -126,7 +117,7 @@
 
     localState.configMappings[idx] = {
       ...mapping,
-      carryOver: !mapping.carryOver,
+      carryOver: !mapping.carryOver
     };
   }
 
@@ -138,11 +129,7 @@
 <div class="swap-editor">
   <!-- Header -->
   <div class="swap-editor__header">
-    <button
-      class="swap-editor__back"
-      onclick={onBack}
-      aria-label="Back to node selection"
-    >
+    <button class="swap-editor__back" onclick={onBack} aria-label="Back to node selection">
       <Icon icon="heroicons:arrow-left" />
     </button>
     <h2 class="swap-editor__title">Swap Mapping</h2>
@@ -230,9 +217,7 @@
         {/each}
 
         {#if localState.configMappings.some((m) => !m.isFlat)}
-          <div class="swap-editor__info-row">
-            Dynamic port config will not be carried over.
-          </div>
+          <div class="swap-editor__info-row">Dynamic port config will not be carried over.</div>
         {/if}
       {/if}
     </div>
@@ -242,7 +227,7 @@
   {#if hasDataLoss}
     <div class="swap-editor__warning" role="alert">
       <Icon icon="heroicons:exclamation-triangle" />
-      <span>{droppedCount} connection{droppedCount !== 1 ? "s" : ""} will be lost</span>
+      <span>{droppedCount} connection{droppedCount !== 1 ? 's' : ''} will be lost</span>
     </div>
   {/if}
 
@@ -256,9 +241,11 @@
       class:swap-editor__btn--danger={hasDataLoss}
       onclick={handleConfirm}
       type="button"
-      aria-label={hasDataLoss ? `Swap anyway — ${droppedCount} connections will be lost` : "Confirm swap"}
+      aria-label={hasDataLoss
+        ? `Swap anyway — ${droppedCount} connections will be lost`
+        : 'Confirm swap'}
     >
-      {hasDataLoss ? "Swap Anyway" : "Confirm Swap"}
+      {hasDataLoss ? 'Swap Anyway' : 'Confirm Swap'}
     </button>
   </div>
 </div>
@@ -498,11 +485,7 @@
   }
 
   .swap-editor__btn--confirm {
-    background: linear-gradient(
-      135deg,
-      var(--fd-primary) 0%,
-      var(--fd-primary-hover) 100%
-    );
+    background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
     color: var(--fd-primary-foreground);
     box-shadow:
       0 2px 8px rgba(59, 130, 246, 0.25),
@@ -510,11 +493,7 @@
   }
 
   .swap-editor__btn--confirm:hover {
-    background: linear-gradient(
-      135deg,
-      var(--fd-primary-hover) 0%,
-      var(--fd-primary) 100%
-    );
+    background: linear-gradient(135deg, var(--fd-primary-hover) 0%, var(--fd-primary) 100%);
     box-shadow:
       0 4px 12px rgba(59, 130, 246, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.15);

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

@@ -1,5 +1,5 @@
-import type { InteractiveSwapState } from "../utils/nodeSwap.js";
-import type { PortCompatibilityChecker } from "../utils/connections.js";
+import type { InteractiveSwapState } from '../utils/nodeSwap.js';
+import type { PortCompatibilityChecker } from '../utils/connections.js';
 interface Props {
     interactiveState: InteractiveSwapState;
     checker: PortCompatibilityChecker | null;

package/dist/components/ThemeToggle.stories.svelte

@@ -1,25 +1,25 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ThemeToggle from "./ThemeToggle.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ThemeToggle from './ThemeToggle.svelte';
 
   const { Story } = defineMeta({
-    title: "Display/ThemeToggle",
+    title: 'Display/ThemeToggle',
     component: ThemeToggle,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
       size: {
-        control: { type: "select" },
-        options: ["sm", "md", "lg"],
+        control: { type: 'select' },
+        options: ['sm', 'md', 'lg']
       },
-      showLabel: { control: "boolean" },
-    },
+      showLabel: { control: 'boolean' }
+    }
   });
 </script>
 
 <Story name="Default" />
 
-<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="With Label" args={{ showLabel: true }} />

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

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

@@ -6,31 +6,23 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import {
-    getTheme,
-    getResolvedTheme,
-    cycleTheme,
-  } from "../stores/settingsStore.svelte.js";
-  import type { ThemePreference } from "../types/settings.js";
+  import Icon from '@iconify/svelte';
+  import { getTheme, getResolvedTheme, cycleTheme } from '../stores/settingsStore.svelte.js';
+  import type { ThemePreference } from '../types/settings.js';
 
   /**
    * Props interface for ThemeToggle component
    */
   interface Props {
     /** Size variant of the toggle button */
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
     /** Whether to show the theme label text */
     showLabel?: boolean;
     /** Custom class name for styling */
     class?: string;
   }
 
-  const {
-    size = "md",
-    showLabel = false,
-    class: className = "",
-  }: Props = $props();
+  const { size = 'md', showLabel = false, class: className = '' }: Props = $props();
 
   /**
    * Get the icon for the current theme
@@ -45,12 +37,12 @@
    */
   function getThemeIcon(currentTheme: ThemePreference): string {
     switch (currentTheme) {
-      case "light":
-        return "mdi:white-balance-sunny";
-      case "dark":
-        return "mdi:moon-waning-crescent";
-      case "auto":
-        return "mdi:desktop-mac";
+      case 'light':
+        return 'mdi:white-balance-sunny';
+      case 'dark':
+        return 'mdi:moon-waning-crescent';
+      case 'auto':
+        return 'mdi:desktop-mac';
     }
   }
 
@@ -64,12 +56,12 @@
    */
   function getThemeLabel(currentTheme: ThemePreference): string {
     switch (currentTheme) {
-      case "light":
-        return "Light";
-      case "dark":
-        return "Dark";
-      case "auto":
-        return "Auto";
+      case 'light':
+        return 'Light';
+      case 'dark':
+        return 'Dark';
+      case 'auto':
+        return 'Auto';
     }
   }
 
@@ -81,15 +73,12 @@
   /**
    * Get tooltip text based on theme preference
    */
-  function getTooltipText(
-    currentTheme: ThemePreference,
-    resolved: "light" | "dark",
-  ): string {
-    if (currentTheme === "auto") {
+  function getTooltipText(currentTheme: ThemePreference, resolved: 'light' | 'dark'): string {
+    if (currentTheme === 'auto') {
       return `Theme: Auto (${resolved}). Click to switch to Light`;
     }
-    const next = currentTheme === "light" ? "Dark" : "Auto";
-    return `Theme: ${currentTheme === "light" ? "Light" : "Dark"}. Click to switch to ${next}`;
+    const next = currentTheme === 'light' ? 'Dark' : 'Auto';
+    return `Theme: ${currentTheme === 'light' ? 'Light' : 'Dark'}. Click to switch to ${next}`;
   }
 
   /**
@@ -103,7 +92,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();
       cycleTheme();
     }

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

@@ -3,7 +3,7 @@
  */
 interface Props {
     /** Size variant of the toggle button */
-    size?: "sm" | "md" | "lg";
+    size?: 'sm' | 'md' | 'lg';
     /** Whether to show the theme label text */
     showLabel?: boolean;
     /** Custom class name for styling */

package/dist/components/UniversalNode.svelte

@@ -8,24 +8,20 @@
 -->
 
 <script lang="ts">
-  import type { WorkflowNode } from "../types/index.js";
-  import { nodeComponentRegistry } from "../registry/nodeComponentRegistry.js";
-  import { resolveBuiltinAlias } from "../registry/builtinNodes.js";
-  import NodeStatusOverlay from "./NodeStatusOverlay.svelte";
-  import { shouldShowNodeStatus } from "../utils/nodeWrapper.js";
-  import { resolveComponentName } from "../utils/nodeTypes.js";
+  import type { WorkflowNode } from '../types/index.js';
+  import { nodeComponentRegistry } from '../registry/nodeComponentRegistry.js';
+  import { resolveBuiltinAlias } from '../registry/builtinNodes.js';
+  import NodeStatusOverlay from './NodeStatusOverlay.svelte';
+  import { shouldShowNodeStatus } from '../utils/nodeWrapper.js';
+  import { resolveComponentName } from '../utils/nodeTypes.js';
 
   let {
     data,
-    selected = false,
+    selected = false
   }: {
-    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;
   } = $props();
@@ -42,9 +38,7 @@
    * This handles the logic of choosing between config.nodeType and metadata.type.
    */
   let resolvedComponentName = $derived(
-    data.metadata
-      ? resolveComponentName(data.metadata, configNodeType)
-      : "workflowNode",
+    data.metadata ? resolveComponentName(data.metadata, configNodeType) : 'workflowNode'
   );
 
   /**
@@ -62,7 +56,7 @@
    * Hide for note nodes as they have their own styling.
    */
   let shouldShowStatus = $derived(
-    shouldShowNodeStatus(executionInfo) && resolvedComponentName !== "note",
+    shouldShowNodeStatus(executionInfo) && resolvedComponentName !== 'note'
   );
 
   /**
@@ -82,36 +76,30 @@
     }
 
     // Return the default component from registry
-    return nodeComponentRegistry.getComponent("workflowNode");
+    return nodeComponentRegistry.getComponent('workflowNode');
   }
 
   /**
    * Get optimal status position for this node type.
    * Uses registry if available, otherwise falls back to defaults.
    */
-  function getStatusPosition():
-    | "top-left"
-    | "top-right"
-    | "bottom-left"
-    | "bottom-right" {
+  function getStatusPosition(): 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' {
     // Try registry first
-    const position = nodeComponentRegistry.getStatusPosition(
-      resolvedComponentName,
-    );
+    const position = nodeComponentRegistry.getStatusPosition(resolvedComponentName);
     if (position) {
       return position;
     }
 
     // Fallback based on node type
     switch (resolvedComponentName) {
-      case "tool":
-        return "top-left";
-      case "note":
-        return "bottom-right";
-      case "simple":
-      case "square":
+      case 'tool':
+        return 'top-left';
+      case 'note':
+        return 'bottom-right';
+      case 'simple':
+      case 'square':
       default:
-        return "top-right";
+        return 'top-right';
     }
   }
 
@@ -119,7 +107,7 @@
    * Get optimal status size for this node type.
    * Uses registry if available, otherwise falls back to defaults.
    */
-  function getStatusSize(): "sm" | "md" | "lg" {
+  function getStatusSize(): 'sm' | 'md' | 'lg' {
     // Try registry first
     const size = nodeComponentRegistry.getStatusSize(resolvedComponentName);
     if (size) {
@@ -128,13 +116,13 @@
 
     // Fallback based on node type
     switch (resolvedComponentName) {
-      case "tool":
-      case "note":
-      case "square":
-        return "sm";
-      case "simple":
+      case 'tool':
+      case 'note':
+      case 'square':
+        return 'sm';
+      case 'simple':
       default:
-        return "md";
+        return 'md';
     }
   }
 </script>
@@ -150,7 +138,7 @@
   <!-- Status overlay - only show if there's meaningful status information -->
   {#if shouldShowStatus}
     <NodeStatusOverlay
-      nodeId={data.nodeId ?? "unknown"}
+      nodeId={data.nodeId ?? 'unknown'}
       {executionInfo}
       position={getStatusPosition()}
       size={getStatusSize()}

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

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