@flowdrop/flowdrop 1.4.0 → 1.6.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

@@ -0,0 +1,128 @@
+<!--
+  ConfigMappingRow Component
+  A single row in the config mapping editor showing carry/reset toggle.
+  Styled with BEM syntax.
+-->
+
+<script lang="ts">
+  import type { EditableConfigMapping } from '../utils/nodeSwap.js';
+
+  interface Props {
+    mapping: EditableConfigMapping;
+    onToggle: (key: string) => void;
+  }
+
+  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);
+    return JSON.stringify(value);
+  }
+</script>
+
+<div class="config-mapping-row">
+  <div class="config-mapping-row__info">
+    <span class="config-mapping-row__key">{mapping.title}</span>
+  </div>
+
+  {#if !mapping.isFlat}
+    <div class="config-mapping-row__complex">Complex value — will use default</div>
+  {:else}
+    <div class="config-mapping-row__values">
+      {#if mapping.carryOver}
+        <span class="config-mapping-row__value config-mapping-row__value--carried">
+          {formatValue(mapping.oldValue)}
+        </span>
+      {:else}
+        <span class="config-mapping-row__value config-mapping-row__value--default">
+          {formatValue(mapping.newDefault)}
+        </span>
+      {/if}
+    </div>
+
+    <button
+      class="config-mapping-row__toggle"
+      class:config-mapping-row__toggle--carry={mapping.carryOver}
+      onclick={() => onToggle(mapping.key)}
+      type="button"
+    >
+      {mapping.carryOver ? 'Carry over' : 'Use default'}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .config-mapping-row {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-xs) 0;
+    font-size: var(--fd-text-xs);
+  }
+
+  .config-mapping-row__info {
+    flex: 0 0 auto;
+    min-width: 4rem;
+  }
+
+  .config-mapping-row__key {
+    font-weight: 500;
+    color: var(--fd-foreground);
+  }
+
+  .config-mapping-row__complex {
+    flex: 1;
+    color: var(--fd-muted-foreground);
+    font-style: italic;
+    font-size: var(--fd-text-xs);
+  }
+
+  .config-mapping-row__values {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .config-mapping-row__value {
+    font-family: var(--fd-font-mono, monospace);
+    font-size: var(--fd-text-xs);
+  }
+
+  .config-mapping-row__value--carried {
+    color: var(--fd-success);
+  }
+
+  .config-mapping-row__value--default {
+    color: var(--fd-muted-foreground);
+  }
+
+  .config-mapping-row__toggle {
+    flex-shrink: 0;
+    padding: 0.1875rem 0.5rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    background-color: var(--fd-background);
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-xs);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    white-space: nowrap;
+  }
+
+  .config-mapping-row__toggle:hover {
+    border-color: var(--fd-border-strong);
+    color: var(--fd-foreground);
+  }
+
+  .config-mapping-row__toggle--carry {
+    background-color: color-mix(in srgb, var(--fd-success) 10%, transparent);
+    border-color: color-mix(in srgb, var(--fd-success) 30%, transparent);
+    color: var(--fd-success);
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { EditableConfigMapping } from '../utils/nodeSwap.js';
+interface Props {
+    mapping: EditableConfigMapping;
+    onToggle: (key: string) => void;
+}
+declare const ConfigMappingRow: import("svelte").Component<Props, {}, "">;
+type ConfigMappingRow = ReturnType<typeof ConfigMappingRow>;
+export default ConfigMappingRow;

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,9 +7,10 @@
 -->
 
 <script lang="ts">
-  import type { Snippet } from "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
@@ -37,6 +38,8 @@
     configTitle?: string;
     /** Callback function when the panel is closed */
     onClose: () => void;
+    /** Optional callback to initiate node swap — when provided, shows swap button */
+    onSwap?: () => void;
     /** Slot content for the configuration form */
     children?: Snippet;
   }
@@ -46,33 +49,35 @@
     id,
     description,
     details = [],
-    configTitle = "Configuration",
+    configTitle = 'Configuration',
     onClose,
-    children,
+    onSwap,
+    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>
-    <button
-      class="config-panel__close"
-      onclick={onClose}
-      aria-label="Close panel"
-    >
-      ×
-    </button>
+    <div class="config-panel__actions">
+      {#if onSwap}
+        <button
+          class="config-panel__action-btn"
+          onclick={onSwap}
+          aria-label="Swap node"
+          title="Swap node type"
+        >
+          <Icon icon="heroicons:arrows-right-left" />
+        </button>
+      {/if}
+      <button class="config-panel__close" onclick={onClose} aria-label="Close panel"> × </button>
+    </div>
   </div>
 
   <!-- Details Section (between header and content) -->
@@ -118,6 +123,34 @@
     color: var(--fd-foreground);
   }
 
+  .config-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .config-panel__action-btn {
+    background: none;
+    border: none;
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--fd-muted-foreground);
+    padding: 0.25rem;
+    border-radius: var(--fd-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast);
+  }
+
+  .config-panel__action-btn:hover {
+    color: var(--fd-primary);
+    background-color: var(--fd-subtle);
+  }
+
   .config-panel__close {
     background: none;
     border: none;
@@ -179,6 +212,11 @@
     padding: 0.125rem;
   }
 
+  .config-panel--compact .config-panel__action-btn {
+    font-size: 0.875rem;
+    padding: 0.125rem;
+  }
+
   .config-panel--compact .config-panel__details {
     padding: 0.5rem 0.75rem;
   }

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
  */
@@ -24,6 +24,8 @@ interface Props {
     configTitle?: string;
     /** Callback function when the panel is closed */
     onClose: () => void;
+    /** Optional callback to initiate node swap — when provided, shows swap button */
+    onSwap?: () => void;
     /** Slot content for the configuration form */
     children?: Snippet;
 }

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 */