@flowdrop/flowdrop 1.5.0 → 1.7.0

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

@@ -1,5 +1,5 @@
-import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions, AuthProvider } from "../types/index.js";
-import type { UISchemaElement } from "../types/uischema.js";
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions, AuthProvider } from '../types/index.js';
+import type { UISchemaElement } from '../types/uischema.js';
 interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
     node?: WorkflowNode;

package/dist/components/ConfigMappingRow.svelte

@@ -5,7 +5,7 @@
 -->
 
 <script lang="ts">
-  import type { EditableConfigMapping } from "../utils/nodeSwap.js";
+  import type { EditableConfigMapping } from '../utils/nodeSwap.js';
 
   interface Props {
     mapping: EditableConfigMapping;
@@ -15,10 +15,10 @@
   const { mapping, onToggle }: Props = $props();
 
   function formatValue(value: unknown): string {
-    if (value === null || value === undefined) return "—";
-    if (typeof value === "string") return value || '""';
-    if (typeof value === "boolean") return value ? "true" : "false";
-    if (typeof value === "number") return String(value);
+    if (value === null || value === undefined) return '—';
+    if (typeof value === 'string') return value || '""';
+    if (typeof value === 'boolean') return value ? 'true' : 'false';
+    if (typeof value === 'number') return String(value);
     return JSON.stringify(value);
   }
 </script>
@@ -29,9 +29,7 @@
   </div>
 
   {#if !mapping.isFlat}
-    <div class="config-mapping-row__complex">
-      Complex value — will use default
-    </div>
+    <div class="config-mapping-row__complex">Complex value — will use default</div>
   {:else}
     <div class="config-mapping-row__values">
       {#if mapping.carryOver}
@@ -51,7 +49,7 @@
       onclick={() => onToggle(mapping.key)}
       type="button"
     >
-      {mapping.carryOver ? "Carry over" : "Use default"}
+      {mapping.carryOver ? 'Carry over' : 'Use default'}
     </button>
   {/if}
 </div>

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

@@ -1,4 +1,4 @@
-import type { EditableConfigMapping } from "../utils/nodeSwap.js";
+import type { EditableConfigMapping } from '../utils/nodeSwap.js';
 interface Props {
     mapping: EditableConfigMapping;
     onToggle: (key: string) => void;

package/dist/components/ConfigModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { ConfigSchema, ConfigValues } from "../types";
-  import ConfigForm from "./ConfigForm.svelte";
+  import type { ConfigSchema, ConfigValues } from '../types';
+  import ConfigForm from './ConfigForm.svelte';
 
   interface Props {
     isOpen: boolean;
@@ -25,7 +25,7 @@
 
   // Close modal on escape key
   function handleKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
       handleClose();
     }
   }

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

@@ -1,4 +1,4 @@
-import type { ConfigSchema, ConfigValues } from "../types";
+import type { ConfigSchema, ConfigValues } from '../types';
 interface Props {
     isOpen: boolean;
     nodeLabel: string;

package/dist/components/ConfigPanel.stories.svelte

@@ -1,47 +1,47 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ConfigPanel from "./ConfigPanel.svelte";
-  import { fn } from "storybook/test";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ConfigPanel from './ConfigPanel.svelte';
+  import { fn } from 'storybook/test';
 
   const { Story } = defineMeta({
-    title: "Editor/ConfigPanel",
+    title: 'Editor/ConfigPanel',
     component: ConfigPanel,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     parameters: {
-      layout: "padded",
+      layout: 'padded'
     },
     args: {
-      onClose: fn(),
-    },
+      onClose: fn()
+    }
   });
 </script>
 
 <Story
   name="Default"
   args={{
-    title: "HTTP Request",
-    id: "node-abc-123",
-    description: "Send HTTP requests to external APIs",
-    configTitle: "Configuration",
+    title: 'HTTP Request',
+    id: 'node-abc-123',
+    description: 'Send HTTP requests to external APIs',
+    configTitle: 'Configuration'
   }}
 />
 
 <Story
   name="With Details"
   args={{
-    title: "OpenAI Chat",
-    id: "node-def-456",
-    description: "Chat completion using OpenAI models",
+    title: 'OpenAI Chat',
+    id: 'node-def-456',
+    description: 'Chat completion using OpenAI models',
     details: [
-      { label: "Category", value: "AI" },
-      { label: "Version", value: "1.2.0" },
-    ],
+      { label: 'Category', value: 'AI' },
+      { label: 'Version', value: '1.2.0' }
+    ]
   }}
 />
 
 <Story
   name="Minimal"
   args={{
-    title: "Start Node",
+    title: 'Start Node'
   }}
 />

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

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

@@ -7,10 +7,10 @@
 -->
 
 <script lang="ts">
-  import type { Snippet } from "svelte";
-  import Icon from "@iconify/svelte";
-  import ReadOnlyDetails from "./ReadOnlyDetails.svelte";
-  import { getUiSettings } from "../stores/settingsStore.svelte.js";
+  import type { Snippet } from 'svelte';
+  import Icon from '@iconify/svelte';
+  import ReadOnlyDetails from './ReadOnlyDetails.svelte';
+  import { getUiSettings } from '../stores/settingsStore.svelte.js';
 
   /**
    * A single detail item with label and value
@@ -49,24 +49,19 @@
     id,
     description,
     details = [],
-    configTitle = "Configuration",
+    configTitle = 'Configuration',
     onClose,
     onSwap,
-    children,
+    children
   }: Props = $props();
 
   /**
    * Check if details section should be shown
    */
-  const hasDetails = $derived(
-    id !== undefined || details.length > 0 || description !== undefined,
-  );
+  const hasDetails = $derived(id !== undefined || details.length > 0 || description !== undefined);
 </script>
 
-<div
-  class="config-panel"
-  class:config-panel--compact={getUiSettings().compactMode}
->
+<div class="config-panel" class:config-panel--compact={getUiSettings().compactMode}>
   <!-- Header -->
   <div class="config-panel__header">
     <h2 class="config-panel__title">{title}</h2>
@@ -81,13 +76,7 @@
           <Icon icon="heroicons:arrows-right-left" />
         </button>
       {/if}
-      <button
-        class="config-panel__close"
-        onclick={onClose}
-        aria-label="Close panel"
-      >
-        ×
-      </button>
+      <button class="config-panel__close" onclick={onClose} aria-label="Close panel"> × </button>
     </div>
   </div>
 

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

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 /**
  * A single detail item with label and value
  */

package/dist/components/ConnectionLine.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getDataTypeColor } from "../utils/colors";
-  import { useConnection } from "@xyflow/svelte";
+  import { getDataTypeColor } from '../utils/colors';
+  import { useConnection } from '@xyflow/svelte';
 
   const connection = useConnection();
 
@@ -18,7 +18,7 @@
     fill="none"
     stroke-width={1.5}
     class="animated"
-    stroke={getDataTypeColor(connection.current.fromHandle.id ?? "")}
+    stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
     d={path}
   />
   <circle
@@ -26,7 +26,7 @@
     cy={connection.current.to.y}
     fill="#fff"
     r={3}
-    stroke={getDataTypeColor(connection.current.fromHandle.id ?? "")}
+    stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
     stroke-width={1.5}
   />
 {/if}

package/dist/components/EdgeRefresher.svelte

@@ -5,7 +5,7 @@
 -->
 
 <script lang="ts">
-  import { useUpdateNodeInternals } from "@xyflow/svelte";
+  import { useUpdateNodeInternals } from '@xyflow/svelte';
 
   interface Props {
     /** Node ID to refresh - when this changes, edges are recalculated */

package/dist/components/FlowDropEdge.stories.svelte

@@ -1,159 +1,159 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import EdgeDecorator from "../../lib/stories/EdgeDecorator.svelte";
-  import { createSampleNodeData } from "../../lib/stories/utils.js";
-  import { EDGE_MARKER_SIZES } from "../../lib/config/constants.js";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import EdgeDecorator from '../../lib/stories/EdgeDecorator.svelte';
+  import { createSampleNodeData } from '../../lib/stories/utils.js';
+  import { EDGE_MARKER_SIZES } from '../../lib/config/constants.js';
 
   const { Story } = defineMeta({
-    title: "Edges/FlowDropEdge",
-    tags: ["autodocs"],
+    title: 'Edges/FlowDropEdge',
+    tags: ['autodocs'],
     parameters: {
-      layout: "centered",
-    },
+      layout: 'centered'
+    }
   });
 
   const sourceNode = createSampleNodeData({
-    label: "Text Input",
+    label: 'Text Input',
     metadata: {
-      id: "text_input",
-      name: "Text Input",
-      description: "Simple text input",
-      category: "inputs",
-      version: "1.0.0",
-      type: "simple",
-      icon: "mdi:text",
-      color: "#22c55e",
+      id: 'text_input',
+      name: 'Text Input',
+      description: 'Simple text input',
+      category: 'inputs',
+      version: '1.0.0',
+      type: 'simple',
+      icon: 'mdi:text',
+      color: '#22c55e',
       inputs: [],
       outputs: [
         {
-          id: "output",
-          name: "Output",
-          type: "output",
-          dataType: "string",
-          required: false,
-        },
-      ],
-    },
+          id: 'output',
+          name: 'Output',
+          type: 'output',
+          dataType: 'string',
+          required: false
+        }
+      ]
+    }
   });
 
   const targetNode = createSampleNodeData({
-    label: "Text Output",
+    label: 'Text Output',
     metadata: {
-      id: "text_output",
-      name: "Text Output",
-      description: "Display text output",
-      category: "outputs",
-      version: "1.0.0",
-      type: "simple",
-      icon: "mdi:text-box",
-      color: "#ef4444",
+      id: 'text_output',
+      name: 'Text Output',
+      description: 'Display text output',
+      category: 'outputs',
+      version: '1.0.0',
+      type: 'simple',
+      icon: 'mdi:text-box',
+      color: '#ef4444',
       inputs: [
         {
-          id: "input",
-          name: "Input",
-          type: "input",
-          dataType: "string",
-          required: false,
-        },
+          id: 'input',
+          name: 'Input',
+          type: 'input',
+          dataType: 'string',
+          required: false
+        }
       ],
-      outputs: [],
-    },
+      outputs: []
+    }
   });
 
   const triggerSource = createSampleNodeData({
-    label: "Trigger Source",
+    label: 'Trigger Source',
     metadata: {
-      id: "trigger_source",
-      name: "Trigger Source",
-      description: "Emits a trigger signal",
-      category: "processing",
-      version: "1.0.0",
-      type: "simple",
-      icon: "mdi:play",
-      color: "#3b82f6",
+      id: 'trigger_source',
+      name: 'Trigger Source',
+      description: 'Emits a trigger signal',
+      category: 'processing',
+      version: '1.0.0',
+      type: 'simple',
+      icon: 'mdi:play',
+      color: '#3b82f6',
       inputs: [],
       outputs: [
         {
-          id: "trigger",
-          name: "Trigger",
-          type: "output",
-          dataType: "trigger",
-          required: false,
-        },
-      ],
-    },
+          id: 'trigger',
+          name: 'Trigger',
+          type: 'output',
+          dataType: 'trigger',
+          required: false
+        }
+      ]
+    }
   });
 
   const triggerTarget = createSampleNodeData({
-    label: "Trigger Target",
+    label: 'Trigger Target',
     metadata: {
-      id: "trigger_target",
-      name: "Trigger Target",
-      description: "Receives a trigger signal",
-      category: "processing",
-      version: "1.0.0",
-      type: "simple",
-      icon: "mdi:lightning-bolt",
-      color: "#8b5cf6",
+      id: 'trigger_target',
+      name: 'Trigger Target',
+      description: 'Receives a trigger signal',
+      category: 'processing',
+      version: '1.0.0',
+      type: 'simple',
+      icon: 'mdi:lightning-bolt',
+      color: '#8b5cf6',
       inputs: [
         {
-          id: "trigger",
-          name: "Trigger",
-          type: "input",
-          dataType: "trigger",
-          required: false,
-        },
+          id: 'trigger',
+          name: 'Trigger',
+          type: 'input',
+          dataType: 'trigger',
+          required: false
+        }
       ],
-      outputs: [],
-    },
+      outputs: []
+    }
   });
 
   const toolSource = createSampleNodeData({
-    label: "Tool Provider",
+    label: 'Tool Provider',
     metadata: {
-      id: "tool_provider",
-      name: "Tool Provider",
-      description: "Provides a tool",
-      category: "processing",
-      version: "1.0.0",
-      type: "simple",
-      icon: "mdi:wrench",
-      color: "#f59e0b",
+      id: 'tool_provider',
+      name: 'Tool Provider',
+      description: 'Provides a tool',
+      category: 'processing',
+      version: '1.0.0',
+      type: 'simple',
+      icon: 'mdi:wrench',
+      color: '#f59e0b',
       inputs: [],
       outputs: [
         {
-          id: "tool",
-          name: "Tool",
-          type: "output",
-          dataType: "tool",
-          required: false,
-        },
-      ],
-    },
+          id: 'tool',
+          name: 'Tool',
+          type: 'output',
+          dataType: 'tool',
+          required: false
+        }
+      ]
+    }
   });
 
   const toolTarget = createSampleNodeData({
-    label: "Tool Consumer",
+    label: 'Tool Consumer',
     metadata: {
-      id: "tool_consumer",
-      name: "Tool Consumer",
-      description: "Consumes a tool",
-      category: "processing",
-      version: "1.0.0",
-      type: "simple",
-      icon: "mdi:cog",
-      color: "#f59e0b",
+      id: 'tool_consumer',
+      name: 'Tool Consumer',
+      description: 'Consumes a tool',
+      category: 'processing',
+      version: '1.0.0',
+      type: 'simple',
+      icon: 'mdi:cog',
+      color: '#f59e0b',
       inputs: [
         {
-          id: "tool",
-          name: "Tool",
-          type: "input",
-          dataType: "tool",
-          required: false,
-        },
+          id: 'tool',
+          name: 'Tool',
+          type: 'input',
+          dataType: 'tool',
+          required: false
+        }
       ],
-      outputs: [],
-    },
+      outputs: []
+    }
   });
 </script>
 

package/dist/components/FlowDropEdge.svelte

@@ -11,10 +11,10 @@
 -->
 
 <script lang="ts">
-  import { getBezierPath } from "@xyflow/svelte";
-  import { BaseEdge } from "@xyflow/svelte";
-  import type { BezierEdgeProps } from "@xyflow/svelte";
-  import { ARROW_LENGTH_PX, ARROW_HALF_WIDTH_PX } from "../config/constants.js";
+  import { getBezierPath } from '@xyflow/svelte';
+  import { BaseEdge } from '@xyflow/svelte';
+  import type { BezierEdgeProps } from '@xyflow/svelte';
+  import { ARROW_LENGTH_PX, ARROW_HALF_WIDTH_PX } from '../config/constants.js';
 
   let {
     id,
@@ -30,16 +30,16 @@
     style,
     targetPosition,
     targetX,
-    targetY,
+    targetY
   }: BezierEdgeProps = $props();
 
   /**
    * Extract stroke color from the edge's inline style for the arrowhead fill.
    */
   let strokeColor = $derived.by(() => {
-    if (!style) return "var(--fd-edge-data, #64748b)";
+    if (!style) return 'var(--fd-edge-data, #64748b)';
     const match = style.match(/stroke:\s*([^;]+)/);
-    return match ? match[1].trim() : "var(--fd-edge-data, #64748b)";
+    return match ? match[1].trim() : 'var(--fd-edge-data, #64748b)';
   });
 
   /**
@@ -57,7 +57,7 @@
       p2x: nums[4],
       p2y: nums[5],
       p3x: nums[6],
-      p3y: nums[7],
+      p3y: nums[7]
     };
   }
 
@@ -70,7 +70,7 @@
       targetY,
       sourcePosition,
       targetPosition,
-      curvature: pathOptions?.curvature,
+      curvature: pathOptions?.curvature
     });
 
     // 2. Parse control points from SVG path

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

@@ -1,4 +1,4 @@
-import type { BezierEdgeProps } from "@xyflow/svelte";
+import type { BezierEdgeProps } from '@xyflow/svelte';
 declare const FlowDropEdge: import("svelte").Component<BezierEdgeProps, {}, "">;
 type FlowDropEdge = ReturnType<typeof FlowDropEdge>;
 export default FlowDropEdge;

package/dist/components/FlowDropZone.svelte

@@ -5,8 +5,8 @@
 -->
 
 <script lang="ts">
-  import { useSvelteFlow } from "@xyflow/svelte";
-  import type { Snippet } from "svelte";
+  import { useSvelteFlow } from '@xyflow/svelte';
+  import type { Snippet } from 'svelte';
 
   interface Props {
     ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
@@ -26,7 +26,7 @@
   function handleDragOver(e: DragEvent): void {
     e.preventDefault();
     if (e.dataTransfer) {
-      e.dataTransfer.dropEffect = "copy";
+      e.dataTransfer.dropEffect = 'copy';
     }
   }
 
@@ -44,22 +44,19 @@
     const files = e.dataTransfer?.files;
     if (files && files.length > 0) {
       const file = files[0];
-      if (
-        props.onfiledrop &&
-        (file.type === "application/json" || file.name.endsWith(".json"))
-      ) {
+      if (props.onfiledrop && (file.type === 'application/json' || file.name.endsWith('.json'))) {
         props.onfiledrop(file);
       }
       return;
     }
 
     // Get the data from the drag event (node type dropped from sidebar)
-    const nodeTypeData = e.dataTransfer?.getData("application/json");
+    const nodeTypeData = e.dataTransfer?.getData('application/json');
     if (nodeTypeData) {
       // Convert screen coordinates to flow coordinates (accounts for zoom and pan)
       const position = screenToFlowPosition({
         x: e.clientX,
-        y: e.clientY,
+        y: e.clientY
       });
 
       // Call the parent handler with the converted position

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

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 interface Props {
     ondrop: (nodeTypeData: string, position: {
         x: number;