@flowdrop/flowdrop 1.4.0 → 1.5.0

package/dist/components/ConfigMappingRow.svelte

@@ -0,0 +1,130 @@
+<!--
+  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/ConfigPanel.svelte

@@ -8,6 +8,7 @@
 
 <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";
 
@@ -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;
   }
@@ -48,6 +51,7 @@
     details = [],
     configTitle = "Configuration",
     onClose,
+    onSwap,
     children,
   }: Props = $props();
 
@@ -66,13 +70,25 @@
   <!-- 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 +134,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 +223,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

@@ -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/FlowDropEdge.svelte

@@ -90,16 +90,8 @@
     const adjX = targetX - Math.cos(angleRad) * ARROW_LENGTH_PX;
     const adjY = targetY - Math.sin(angleRad) * ARROW_LENGTH_PX;
 
-    // 5. Recompute the bezier path with the shortened target
-    const [shortenedPath] = getBezierPath({
-      sourceX,
-      sourceY,
-      targetX: adjX,
-      targetY: adjY,
-      sourcePosition,
-      targetPosition,
-      curvature: pathOptions?.curvature,
-    });
+    // 5. Build shortened path from existing control points — no second getBezierPath() call
+    const shortenedPath = `M ${cp.p0x},${cp.p0y} C ${cp.p1x},${cp.p1y} ${cp.p2x},${cp.p2y} ${adjX},${adjY}`;
 
     return { path: shortenedPath, labelX: lx, labelY: ly, angleDeg };
   });

package/dist/components/LogsSidebar.svelte

@@ -114,7 +114,7 @@
   /**
    * Filter logs by selected node
    */
-  let filteredLogs = $derived(() => {
+  let filteredLogs = $derived.by(() => {
     if (props.selectedNode) {
       return props.logs.filter((log) => log.nodeId === props.selectedNode?.id);
     }
@@ -132,7 +132,7 @@
    * Export logs
    */
   function exportLogs(): void {
-    const logText = filteredLogs()
+    const logText = filteredLogs
       .map(
         (log) =>
           `[${formatTimestamp(log.timestamp)}] ${log.level.toUpperCase()}: ${log.message}${log.nodeId ? ` (Node: ${log.nodeId})` : ""}`,
@@ -198,9 +198,9 @@
   <!-- Content -->
   <div class="logs-sidebar__content">
     <!-- Logs List -->
-    {#if filteredLogs().length > 0}
+    {#if filteredLogs.length > 0}
       <div class="logs-sidebar__logs" bind:this={logsContainer}>
-        {#each filteredLogs() as log, index (index)}
+        {#each filteredLogs as log, index (index)}
           <div
             class="logs-sidebar__log-entry"
             class:logs-sidebar__log-entry--error={log.level === "error"}
@@ -276,7 +276,7 @@
 
     {#if props.logs.length > 0}
       <p class="logs-sidebar__info-text">
-        {filteredLogs().length} of {props.logs.length} log entries
+        {filteredLogs.length} of {props.logs.length} log entries
       </p>
     {/if}
   </div>

package/dist/components/NodeSidebar.svelte

@@ -15,8 +15,8 @@
   import { getNodeIcon, getCategoryIcon } from "../utils/icons.js";
   import { getCategoryColorToken } from "../utils/colors.js";
   import { getCategoryLabel } from "../stores/categoriesStore.svelte.js";
-  import { SvelteSet } from "svelte/reactivity";
   import { getUiSettings } from "../stores/settingsStore.svelte.js";
+  import { extractConfigDefaults } from "../utils/nodeIds.js";
 
   interface Props {
     nodes: NodeMetadata[];
@@ -54,6 +54,17 @@
   let filteredNodes = $derived(getFilteredNodes());
   let categories = $derived(getCategories());
 
+  /** Group already-filtered results by category in a single pass */
+  let filteredNodesByCategory = $derived.by(() => {
+    const map = new Map<string, NodeMetadata[]>();
+    for (const node of filteredNodes) {
+      let list = map.get(node.category);
+      if (!list) { list = []; map.set(node.category, list); }
+      list.push(node);
+    }
+    return map;
+  });
+
   /**
    * Get all unique categories from node types, preserving API order
    * Categories appear in the order their first node appears in the API response
@@ -61,7 +72,7 @@
   function getCategories(): NodeCategory[] {
     if (formatCompatibleNodes.length === 0) return [];
     // Use a Set to track uniqueness while preserving insertion order
-    const seen = new SvelteSet<NodeCategory>();
+    const seen = new Set<NodeCategory>();
     const orderedCategories: NodeCategory[] = [];
     for (const node of formatCompatibleNodes) {
       if (!seen.has(node.category)) {
@@ -106,31 +117,13 @@
   function handleNodeDragStart(event: DragEvent, nodeType: NodeMetadata): void {
     if (!event.dataTransfer) return;
 
-    // Extract initial config from configSchema with proper null checks
-    let initialConfig: Record<string, unknown> = {};
-    if (
-      nodeType.configSchema &&
-      typeof nodeType.configSchema === "object" &&
-      nodeType.configSchema.properties &&
-      typeof nodeType.configSchema.properties === "object"
-    ) {
-      // JSON Schema format - extract defaults
-      Object.entries(nodeType.configSchema.properties).forEach(
-        ([key, prop]) => {
-          if (prop && typeof prop === "object" && "default" in prop) {
-            initialConfig[key] = prop.default;
-          }
-        },
-      );
-    }
-
     // Create a new node instance from the node type
     const newNodeData = {
       type: "node",
       nodeType: nodeType.id,
       nodeData: {
         label: nodeType.name,
-        config: initialConfig,
+        config: extractConfigDefaults(nodeType.configSchema),
         metadata: nodeType,
       },
     };
@@ -175,33 +168,6 @@
     return getCategoryLabel(category);
   }
 
-  /**
-   * Get node types for category
-   * Preserves the API order - no client-side sorting applied
-   */
-  function getNodesForCategory(category: NodeCategory): NodeMetadata[] {
-    return formatCompatibleNodes.filter((node) => node.category === category);
-  }
-
-  /**
-   * Get filtered nodes for category
-   */
-  function getFilteredNodesForCategory(category: NodeCategory): NodeMetadata[] {
-    let nodes = getNodesForCategory(category);
-
-    // Filter by search query
-    if (searchInput.trim()) {
-      const query = searchInput.toLowerCase();
-      nodes = nodes.filter(
-        (node) =>
-          node.name.toLowerCase().includes(query) ||
-          node.description.toLowerCase().includes(query) ||
-          node.tags?.some((tag) => tag.toLowerCase().includes(query)),
-      );
-    }
-
-    return nodes;
-  }
 </script>
 
 <!-- Components Sidebar -->
@@ -356,7 +322,7 @@
         <!-- Category-specific details -->
         <div class="flowdrop-category-list">
           {#each categories as category (category)}
-            {@const categoryNodes = getFilteredNodesForCategory(category)}
+            {@const categoryNodes = filteredNodesByCategory.get(category) ?? []}
             {#if categoryNodes.length > 0}
               <!-- Flat style: label + dot+name rows (shown/hidden via CSS token) -->
               <div class="fd-sidebar-flat-section">