@flowdrop/flowdrop 1.5.0 → 1.7.0

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

@@ -1,6 +1,6 @@
-import { EnhancedFlowDropApiClient } from "../api/enhanced-client.js";
-import type { Workflow } from "../types/index.js";
-import type { EndpointConfig } from "../config/endpoints.js";
+import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
+import type { Workflow } from '../types/index.js';
+import type { EndpointConfig } from '../config/endpoints.js';
 interface Props {
     pipelineId: string;
     workflow: Workflow;
@@ -11,7 +11,7 @@ interface Props {
         label: string;
         href: string;
         icon?: string;
-        variant?: "primary" | "secondary" | "outline";
+        variant?: 'primary' | 'secondary' | 'outline';
         onclick?: (event: Event) => void;
     }>) => void;
 }

package/dist/components/PortCoordinateTracker.svelte

@@ -8,12 +8,12 @@
 -->
 
 <script lang="ts">
-  import { useSvelteFlow, type InternalNode } from "@xyflow/svelte";
-  import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
+  import { useSvelteFlow, type InternalNode } from '@xyflow/svelte';
+  import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
   import {
     rebuildAllPortCoordinates,
-    updateNodePortCoordinates,
-  } from "../stores/portCoordinateStore.svelte.js";
+    updateNodePortCoordinates
+  } from '../stores/portCoordinateStore.svelte.js';
 
   interface Props {
     /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
@@ -29,9 +29,7 @@
   const { getInternalNode } = useSvelteFlow();
 
   // Cast the getInternalNode function for our use
-  const getInternal = getInternalNode as (
-    id: string,
-  ) => InternalNode | undefined;
+  const getInternal = getInternalNode as (id: string) => InternalNode | undefined;
 
   /**
    * Rebuild all port coordinates when rebuildTrigger changes.

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

@@ -1,4 +1,4 @@
-import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
+import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 interface Props {
     /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
     nodeToUpdate: WorkflowNodeType | null;

package/dist/components/PortMappingRow.svelte

@@ -5,8 +5,8 @@
 -->
 
 <script lang="ts">
-  import type { NodePort } from "../types/index.js";
-  import type { EditablePortMapping, MatchQuality } from "../utils/nodeSwap.js";
+  import type { NodePort } from '../types/index.js';
+  import type { EditablePortMapping, MatchQuality } from '../utils/nodeSwap.js';
 
   interface Props {
     mapping: EditablePortMapping;
@@ -16,29 +16,28 @@
     onReset: () => void;
   }
 
-  const { mapping, availablePorts, usedPortIds, onUpdate, onReset }: Props =
-    $props();
+  const { mapping, availablePorts, usedPortIds, onUpdate, onReset }: Props = $props();
 
   const QUALITY_LABELS: Record<MatchQuality, string> = {
-    id: "ID match",
-    name: "Name match",
-    type: "Type match",
-    manual: "Manual",
-    unmapped: "No match",
+    id: 'ID match',
+    name: 'Name match',
+    type: 'Type match',
+    manual: 'Manual',
+    unmapped: 'No match'
   };
 
   const QUALITY_CLASSES: Record<MatchQuality, string> = {
-    id: "port-mapping-row__badge--id",
-    name: "port-mapping-row__badge--name",
-    type: "port-mapping-row__badge--type",
-    manual: "port-mapping-row__badge--manual",
-    unmapped: "port-mapping-row__badge--unmapped",
+    id: 'port-mapping-row__badge--id',
+    name: 'port-mapping-row__badge--name',
+    type: 'port-mapping-row__badge--type',
+    manual: 'port-mapping-row__badge--manual',
+    unmapped: 'port-mapping-row__badge--unmapped'
   };
 
   function handleChange(event: Event): void {
     const select = event.target as HTMLSelectElement;
     const value = select.value;
-    onUpdate(value === "__drop__" ? null : value);
+    onUpdate(value === '__drop__' ? null : value);
   }
 </script>
 
@@ -54,7 +53,7 @@
     <select
       class="port-mapping-row__select"
       class:port-mapping-row__select--dropped={!mapping.selectedNewPortId}
-      value={mapping.selectedNewPortId ?? "__drop__"}
+      value={mapping.selectedNewPortId ?? '__drop__'}
       onchange={handleChange}
     >
       <option value="__drop__">(Drop connection)</option>
@@ -63,7 +62,10 @@
           value={port.id}
           disabled={usedPortIds.has(port.id) && port.id !== mapping.selectedNewPortId}
         >
-          {port.name} ({port.dataType}){usedPortIds.has(port.id) && port.id !== mapping.selectedNewPortId ? " (in use)" : ""}
+          {port.name} ({port.dataType}){usedPortIds.has(port.id) &&
+          port.id !== mapping.selectedNewPortId
+            ? ' (in use)'
+            : ''}
         </option>
       {/each}
     </select>
@@ -74,13 +76,7 @@
       {QUALITY_LABELS[mapping.matchQuality]}
     </span>
     {#if mapping.isOverridden}
-      <button
-        class="port-mapping-row__reset"
-        onclick={onReset}
-        type="button"
-      >
-        reset
-      </button>
+      <button class="port-mapping-row__reset" onclick={onReset} type="button"> reset </button>
     {/if}
   </div>
 </div>

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

@@ -1,5 +1,5 @@
-import type { NodePort } from "../types/index.js";
-import type { EditablePortMapping } from "../utils/nodeSwap.js";
+import type { NodePort } from '../types/index.js';
+import type { EditablePortMapping } from '../utils/nodeSwap.js';
 interface Props {
     mapping: EditablePortMapping;
     availablePorts: NodePort[];

package/dist/components/ReadOnlyDetails.svelte

@@ -129,7 +129,7 @@
 
   .readonly-details__id {
     font-size: 0.75rem;
-    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
     color: var(--fd-muted-foreground);
     background-color: var(--fd-subtle);
     padding: 0.125rem 0.375rem;

package/dist/components/SchemaForm.stories.svelte

@@ -1,17 +1,17 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import SchemaForm from "./SchemaForm.svelte";
-  import { fn } from "storybook/test";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SchemaForm from './SchemaForm.svelte';
+  import { fn } from 'storybook/test';
 
   const { Story } = defineMeta({
-    title: "Form/SchemaForm",
+    title: 'Form/SchemaForm',
     component: SchemaForm,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     args: {
       onChange: fn(),
       onSave: fn(),
-      onCancel: fn(),
-    },
+      onCancel: fn()
+    }
   });
 </script>
 
@@ -19,19 +19,19 @@
   name="Simple Form"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
         name: {
-          type: "string",
-          title: "Name",
-          description: "Enter your full name",
+          type: 'string',
+          title: 'Name',
+          description: 'Enter your full name'
         },
-        age: { type: "number", title: "Age", minimum: 0, maximum: 120 },
-        active: { type: "boolean", title: "Active", default: true },
+        age: { type: 'number', title: 'Age', minimum: 0, maximum: 120 },
+        active: { type: 'boolean', title: 'Active', default: true }
       },
-      required: ["name"],
+      required: ['name']
     },
-    values: { name: "Alice", age: 30, active: true },
+    values: { name: 'Alice', age: 30, active: true }
   }}
 />
 
@@ -39,39 +39,39 @@
   name="Select Fields"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
         model: {
-          type: "string",
-          title: "AI Model",
+          type: 'string',
+          title: 'AI Model',
           oneOf: [
-            { const: "gpt-4", title: "GPT-4" },
-            { const: "gpt-3.5", title: "GPT-3.5 Turbo" },
-            { const: "claude-3", title: "Claude 3" },
-          ],
+            { const: 'gpt-4', title: 'GPT-4' },
+            { const: 'gpt-3.5', title: 'GPT-3.5 Turbo' },
+            { const: 'claude-3', title: 'Claude 3' }
+          ]
         },
         temperature: {
-          type: "number",
-          title: "Temperature",
-          format: "range",
+          type: 'number',
+          title: 'Temperature',
+          format: 'range',
           minimum: 0,
           maximum: 2,
           step: 0.1,
-          default: 0.7,
+          default: 0.7
         },
         prompt: {
-          type: "string",
-          title: "System Prompt",
-          format: "multiline",
-          description: "The system prompt for the AI model",
-        },
-      },
+          type: 'string',
+          title: 'System Prompt',
+          format: 'multiline',
+          description: 'The system prompt for the AI model'
+        }
+      }
     },
     values: {
-      model: "gpt-4",
+      model: 'gpt-4',
       temperature: 0.7,
-      prompt: "You are a helpful assistant.",
-    },
+      prompt: 'You are a helpful assistant.'
+    }
   }}
 />
 
@@ -79,17 +79,17 @@
   name="With Actions"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
-        email: { type: "string", title: "Email" },
-        notifications: { type: "boolean", title: "Enable Notifications" },
+        email: { type: 'string', title: 'Email' },
+        notifications: { type: 'boolean', title: 'Enable Notifications' }
       },
-      required: ["email"],
+      required: ['email']
     },
-    values: { email: "", notifications: true },
+    values: { email: '', notifications: true },
     showActions: true,
-    saveLabel: "Save Settings",
-    cancelLabel: "Reset",
+    saveLabel: 'Save Settings',
+    cancelLabel: 'Reset'
   }}
 />
 
@@ -97,14 +97,14 @@
   name="Loading"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
-        name: { type: "string", title: "Name" },
-      },
+        name: { type: 'string', title: 'Name' }
+      }
     },
-    values: { name: "Test" },
+    values: { name: 'Test' },
     showActions: true,
-    loading: true,
+    loading: true
   }}
 />
 
@@ -112,13 +112,13 @@
   name="Disabled"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
-        name: { type: "string", title: "Name" },
-        role: { type: "string", title: "Role" },
-      },
+        name: { type: 'string', title: 'Name' },
+        role: { type: 'string', title: 'Role' }
+      }
     },
-    values: { name: "Admin", role: "Super User" },
-    disabled: true,
+    values: { name: 'Admin', role: 'Super User' },
+    disabled: true
   }}
 />

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

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

@@ -54,13 +54,13 @@
 -->
 
 <script lang="ts">
-  import { setContext } from "svelte";
-  import Icon from "@iconify/svelte";
-  import type { ConfigSchema, AuthProvider } from "../types/index.js";
-  import type { UISchemaElement } from "../types/uischema.js";
-  import { FormField } from "./form/index.js";
-  import FormUISchemaRenderer from "./form/FormUISchemaRenderer.svelte";
-  import type { FieldSchema } from "./form/index.js";
+  import { setContext } from 'svelte';
+  import Icon from '@iconify/svelte';
+  import type { ConfigSchema, AuthProvider } from '../types/index.js';
+  import type { UISchemaElement } from '../types/uischema.js';
+  import { FormField } from './form/index.js';
+  import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
+  import type { FieldSchema } from './form/index.js';
 
   /**
    * Props interface for SchemaForm component
@@ -160,25 +160,22 @@
     values = {},
     onChange,
     showActions = false,
-    saveLabel = "Save",
-    cancelLabel = "Cancel",
+    saveLabel = 'Save',
+    cancelLabel = 'Cancel',
     onSave,
     onCancel,
     loading = false,
     disabled = false,
-    class: className = "",
+    class: className = '',
     authProvider,
-    baseUrl = "",
+    baseUrl = ''
   }: Props = $props();
 
   // Set context for child components (e.g., FormAutocomplete)
   // Use getter functions to ensure child components always get the current prop value,
   // even if the prop changes after initial mount
-  setContext<() => AuthProvider | undefined>(
-    "flowdrop:getAuthProvider",
-    () => authProvider,
-  );
-  setContext<() => string>("flowdrop:getBaseUrl", () => baseUrl);
+  setContext<() => AuthProvider | undefined>('flowdrop:getAuthProvider', () => authProvider);
+  setContext<() => string>('flowdrop:getBaseUrl', () => baseUrl);
 
   /**
    * Reference to this component's form element
@@ -200,8 +197,7 @@
       Object.entries(schema.properties).forEach(([key, field]) => {
         const fieldConfig = field as Record<string, unknown>;
         // Use provided value if available, otherwise use schema default
-        mergedValues[key] =
-          values[key] !== undefined ? values[key] : fieldConfig.default;
+        mergedValues[key] = values[key] !== undefined ? values[key] : fieldConfig.default;
       });
       formValues = mergedValues;
     }
@@ -247,29 +243,18 @@
     const updatedValues: Record<string, unknown> = { ...formValues };
 
     if (formRef) {
-      const inputs = formRef.querySelectorAll("input, select, textarea");
+      const inputs = formRef.querySelectorAll('input, select, textarea');
       inputs.forEach((input: Element) => {
-        const inputEl = input as
-          | HTMLInputElement
-          | HTMLSelectElement
-          | HTMLTextAreaElement;
+        const inputEl = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
         if (inputEl.id) {
-          if (
-            inputEl instanceof HTMLInputElement &&
-            inputEl.type === "checkbox"
-          ) {
+          if (inputEl instanceof HTMLInputElement && inputEl.type === 'checkbox') {
             updatedValues[inputEl.id] = inputEl.checked;
           } else if (
             inputEl instanceof HTMLInputElement &&
-            (inputEl.type === "number" || inputEl.type === "range")
-          ) {
-            updatedValues[inputEl.id] = inputEl.value
-              ? Number(inputEl.value)
-              : inputEl.value;
-          } else if (
-            inputEl instanceof HTMLInputElement &&
-            inputEl.type === "hidden"
+            (inputEl.type === 'number' || inputEl.type === 'range')
           ) {
+            updatedValues[inputEl.id] = inputEl.value ? Number(inputEl.value) : inputEl.value;
+          } else if (inputEl instanceof HTMLInputElement && inputEl.type === 'hidden') {
             // Parse hidden field values that might be JSON
             try {
               const parsed = JSON.parse(inputEl.value);
@@ -289,14 +274,10 @@
     if (values && schema?.properties) {
       Object.entries(schema.properties).forEach(
         ([key, property]: [string, Record<string, unknown>]) => {
-          if (
-            property.format === "hidden" &&
-            !(key in updatedValues) &&
-            key in values
-          ) {
+          if (property.format === 'hidden' && !(key in updatedValues) && key in values) {
             updatedValues[key] = values[key];
           }
-        },
+        }
       );
     }
 
@@ -479,11 +460,7 @@
   }
 
   .schema-form__button--primary {
-    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 1px 3px rgba(59, 130, 246, 0.3),
@@ -491,11 +468,7 @@
   }
 
   .schema-form__button--primary:hover:not(:disabled) {
-    background: linear-gradient(
-      135deg,
-      var(--fd-primary-hover) 0%,
-      var(--fd-primary-hover) 100%
-    );
+    background: linear-gradient(135deg, var(--fd-primary-hover) 0%, var(--fd-primary-hover) 100%);
     box-shadow:
       0 4px 12px rgba(59, 130, 246, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);

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

@@ -1,5 +1,5 @@
-import type { ConfigSchema, AuthProvider } from "../types/index.js";
-import type { UISchemaElement } from "../types/uischema.js";
+import type { ConfigSchema, AuthProvider } from '../types/index.js';
+import type { UISchemaElement } from '../types/uischema.js';
 /**
  * Props interface for SchemaForm component
  */

package/dist/components/SettingsModal.svelte

@@ -24,9 +24,9 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import SettingsPanel from "./SettingsPanel.svelte";
-  import type { SettingsCategory } from "../types/settings.js";
+  import Icon from '@iconify/svelte';
+  import SettingsPanel from './SettingsPanel.svelte';
+  import type { SettingsCategory } from '../types/settings.js';
 
   /**
    * Props interface for SettingsModal component
@@ -43,10 +43,7 @@
     /** Callback when modal is closed */
     onClose?: () => void;
     /** Callback when settings change */
-    onSettingsChange?: (
-      category: SettingsCategory,
-      values: Record<string, unknown>,
-    ) => void;
+    onSettingsChange?: (category: SettingsCategory, values: Record<string, unknown>) => void;
     /** Custom CSS class for the modal */
     class?: string;
   }
@@ -58,7 +55,7 @@
     showResetButton = true,
     onClose,
     onSettingsChange,
-    class: className = "",
+    class: className = ''
   }: Props = $props();
 
   /**
@@ -103,7 +100,7 @@
    * Handle keyboard events
    */
   function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
       event.preventDefault();
       closeModal();
     }

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

@@ -1,4 +1,4 @@
-import type { SettingsCategory } from "../types/settings.js";
+import type { SettingsCategory } from '../types/settings.js';
 /**
  * Props interface for SettingsModal component
  */