@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/SwapMappingEditor.svelte

@@ -6,36 +6,32 @@
 -->
 
 <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 { getInstance } from '../stores/getInstance.svelte.js';
   import { m } from '../messages/index.js';
 
+  const fd = getInstance();
+
   interface Props {
     interactiveState: InteractiveSwapState;
-    checker: PortCompatibilityChecker | null;
     onConfirm: (state: InteractiveSwapState) => void;
     onCancel: () => void;
     onBack: () => void;
   }
 
-  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)))
-  );
+  const { interactiveState, onConfirm, onCancel, onBack }: Props = $props();
 
-  // Reinit when interactiveState changes
-  $effect(() => {
-    localState = JSON.parse(JSON.stringify(interactiveState));
-  });
+  // Local editable copy of the interactive state.
+  // JSON round-trip is intentional: structuredClone fails on Svelte 5 proxies.
+  // Writable derived: reinitializes when interactiveState changes; local edits
+  // reassign the whole object below. NOTE: the derived value is not a deep
+  // $state proxy — update it only by reassignment, never by mutating in place.
+  let localState = $derived<InteractiveSwapState>(JSON.parse(JSON.stringify(interactiveState)));
 
   // Derived counts
   let inputMappings = $derived(localState.portMappings.filter((m) => m.direction === 'input'));
@@ -72,27 +68,33 @@
     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') {
-      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) {
-          localState.portMappings[i] = {
+    localState = {
+      ...localState,
+      portMappings: localState.portMappings.map((other, i) => {
+        if (i === index) {
+          return {
+            ...other,
+            selectedNewPortId: newPortId,
+            matchQuality: newPortId ? ('manual' as const) : ('unmapped' as const),
+            isOverridden: true
+          };
+        }
+        // For input ports: if this port is already used by another mapping, unmap the other
+        if (
+          newPortId &&
+          mapping.direction === 'input' &&
+          other.direction === 'input' &&
+          other.selectedNewPortId === newPortId
+        ) {
+          return {
             ...other,
             selectedNewPortId: null,
-            matchQuality: 'unmapped',
+            matchQuality: 'unmapped' as const,
             isOverridden: true
           };
         }
-      }
-    }
-
-    localState.portMappings[index] = {
-      ...mapping,
-      selectedNewPortId: newPortId,
-      matchQuality: newPortId ? 'manual' : 'unmapped',
-      isOverridden: true
+        return other;
+      })
     };
   }
 
@@ -100,25 +102,32 @@
     const mapping = localState.portMappings[index];
     if (!mapping) return;
 
-    localState.portMappings[index] = {
-      ...mapping,
-      selectedNewPortId: mapping.autoSuggestedPortId,
-      matchQuality: mapping.autoSuggestedPortId
-        ? (interactiveState.portMappings[index]?.matchQuality ?? 'type')
-        : 'unmapped',
-      isOverridden: false
+    localState = {
+      ...localState,
+      portMappings: localState.portMappings.map((other, i) =>
+        i === index
+          ? {
+              ...other,
+              selectedNewPortId: other.autoSuggestedPortId,
+              matchQuality: other.autoSuggestedPortId
+                ? (interactiveState.portMappings[index]?.matchQuality ?? 'type')
+                : 'unmapped',
+              isOverridden: false
+            }
+          : other
+      )
     };
   }
 
   function handleConfigToggle(key: string): void {
-    const idx = localState.configMappings.findIndex((m) => m.key === key);
-    if (idx < 0) return;
-    const mapping = localState.configMappings[idx];
-    if (!mapping.isFlat) return;
-
-    localState.configMappings[idx] = {
-      ...mapping,
-      carryOver: !mapping.carryOver
+    const mapping = localState.configMappings.find((m) => m.key === key);
+    if (!mapping || !mapping.isFlat) return;
+
+    localState = {
+      ...localState,
+      configMappings: localState.configMappings.map((m) =>
+        m.key === key ? { ...m, carryOver: !m.carryOver } : m
+      )
     };
   }
 
@@ -148,9 +157,18 @@
       <div class="swap-editor__node-target">
         <span
           class="swap-editor__node-icon"
-          style="--_icon-color: {getCategoryColorToken(localState.newMetadata.category)}"
+          style="--_icon-color: {getCategoryColorToken(
+            fd.categories,
+            localState.newMetadata.category
+          )}"
         >
-          <Icon icon={getNodeIcon(localState.newMetadata.icon, localState.newMetadata.category)} />
+          <Icon
+            icon={getNodeIcon(
+              fd.categories,
+              localState.newMetadata.icon,
+              localState.newMetadata.category
+            )}
+          />
         </span>
         <span class="swap-editor__node-name">{localState.newMetadata.name}</span>
       </div>
@@ -172,7 +190,7 @@
 
         {#if inputMappings.length > 0}
           <div class="swap-editor__section-label">Inputs</div>
-          {#each inputMappings as mapping, i (mapping.edge.id)}
+          {#each inputMappings as mapping (mapping.edge.id)}
             {@const globalIndex = localState.portMappings.indexOf(mapping)}
             <PortMappingRow
               {mapping}
@@ -186,7 +204,7 @@
 
         {#if outputMappings.length > 0}
           <div class="swap-editor__section-label">Outputs</div>
-          {#each outputMappings as mapping, i (mapping.edge.id)}
+          {#each outputMappings as mapping (mapping.edge.id)}
             {@const globalIndex = localState.portMappings.indexOf(mapping)}
             <PortMappingRow
               {mapping}

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

@@ -1,8 +1,6 @@
 import type { InteractiveSwapState } from '../utils/nodeSwap.js';
-import type { PortCompatibilityChecker } from '../utils/connections.js';
 interface Props {
     interactiveState: InteractiveSwapState;
-    checker: PortCompatibilityChecker | null;
     onConfirm: (state: InteractiveSwapState) => void;
     onCancel: () => void;
     onBack: () => void;

package/dist/components/UniversalNode.svelte

@@ -9,11 +9,13 @@
 
 <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 { getInstance } from '../stores/getInstance.svelte.js';
+
+  const fd = getInstance();
 
   let {
     data,
@@ -38,7 +40,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(fd.nodes, data.metadata, configNodeType) : 'workflowNode'
   );
 
   /**
@@ -70,13 +72,13 @@
     const resolvedType = resolveBuiltinAlias(nodeType);
 
     // Get component from registry (defaults to workflowNode if not found)
-    const component = nodeComponentRegistry.getComponent(resolvedType);
+    const component = fd.nodes.getComponent(resolvedType);
     if (component) {
       return component;
     }
 
     // Return the default component from registry
-    return nodeComponentRegistry.getComponent('workflowNode');
+    return fd.nodes.getComponent('workflowNode');
   }
 
   /**
@@ -85,7 +87,7 @@
    */
   function getStatusPosition(): 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' {
     // Try registry first
-    const position = nodeComponentRegistry.getStatusPosition(resolvedComponentName);
+    const position = fd.nodes.getStatusPosition(resolvedComponentName);
     if (position) {
       return position;
     }
@@ -109,7 +111,7 @@
    */
   function getStatusSize(): 'sm' | 'md' | 'lg' {
     // Try registry first
-    const size = nodeComponentRegistry.getStatusSize(resolvedComponentName);
+    const size = fd.nodes.getStatusSize(resolvedComponentName);
     if (size) {
       return size;
     }
@@ -130,7 +132,7 @@
 <div class="universal-node">
   <!-- Render the node component dynamically (Svelte 5 dynamic component syntax) -->
   {#if nodeComponent}
-    <!-- svelte-ignore binding_property_non_reactive — Svelte 5 dynamic component limitation; reactivity maintained via $derived -->
+    <!-- Svelte 5 dynamic component limitation; reactivity maintained via $derived -->
     {@const NodeComponent = nodeComponent}
     <NodeComponent {data} {selected} />
   {/if}