@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.1

package/dist/components/nodes/GatewayNode.svelte

@@ -18,7 +18,7 @@
     getCategoryColorToken,
     getPortBackgroundColor
   } from '../../utils/colors.js';
-  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { m } from '../../messages/index.js';
 
   interface Props {
@@ -31,6 +31,9 @@
 
   let props: Props = $props();
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   // Hoist the graph branch — three reads in the template, two inside
   // {#each port} / {#each branch} loops. One getter walk per render.
   const graph = $derived(m().nodes.graph);
@@ -80,7 +83,7 @@
 
     // Check if port is connected
     const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-    return getConnectedHandles().has(handleId);
+    return fd.workflow.connectedHandles.has(handleId);
   }
 
   /**
@@ -103,7 +106,7 @@
 
     // Check if branch output is connected
     const handleId = `${props.data.nodeId}-output-${branchName}`;
-    return getConnectedHandles().has(handleId);
+    return fd.workflow.connectedHandles.has(handleId);
   }
 
   // Gateway-specific data - branches are calculated at runtime from config
@@ -173,10 +176,10 @@
       <!-- Node Icon with Squircle Background -->
       <div
         class="flowdrop-workflow-node__icon-wrapper"
-        style="--_icon-color: {getCategoryColorToken(props.data.metadata.category)}"
+        style="--_icon-color: {getCategoryColorToken(fd.categories, props.data.metadata.category)}"
       >
         <Icon
-          icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)}
+          icon={getNodeIcon(fd.categories, props.data.metadata.icon, props.data.metadata.category)}
           class="flowdrop-workflow-node__icon"
         />
       </div>
@@ -208,6 +211,7 @@
               id={`${props.data.nodeId}-input-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
+                checker,
                 port.dataType
               )}; --fd-handle-border-color: var(--fd-handle-border);"
               tabindex={-1}
@@ -220,11 +224,13 @@
                 <span
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
+                    checker,
                     port.dataType,
                     15
                   )}; color: {getDataTypeColorToken(
+                    checker,
                     port.dataType
-                  )}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
+                  )}; border: 1px solid {getPortBackgroundColor(checker, port.dataType, 30)};"
                 >
                   {port.dataType}
                 </span>
@@ -250,7 +256,7 @@
   {#if visibleBranches.length > 0}
     <div class="flowdrop-workflow-node__ports">
       <div class="flowdrop-workflow-node__ports-list">
-        {#each visibleBranches as branch, branchIndex (branch.name)}
+        {#each visibleBranches as branch (branch.name)}
           {@const isActive = isBranchActive(branch.name)}
           <div class="flowdrop-workflow-node__port">
             <!-- Port Info: padding lives here so handle position is simple -->
@@ -261,7 +267,7 @@
                 class="flowdrop-flex flowdrop-gap--2 flowdrop-justify--end flowdrop-items--center"
               >
                 {#if isActive}
-                  <span style="color: {getDataTypeColorToken('trigger')};">
+                  <span style="color: {getDataTypeColorToken(checker, 'trigger')};">
                     <Icon icon="mdi:check-circle" />
                   </span>
                 {/if}
@@ -274,11 +280,13 @@
                 <span
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
+                    checker,
                     'trigger',
                     15
                   )}; color: {getDataTypeColorToken(
+                    checker,
                     'trigger'
-                  )}; border: 1px solid {getPortBackgroundColor('trigger', 30)};"
+                  )}; border: 1px solid {getPortBackgroundColor(checker, 'trigger', 30)};"
                 >
                   trigger
                 </span>
@@ -292,8 +300,9 @@
               id={`${props.data.nodeId}-output-${branch.name}`}
               class={`flowdrop-workflow-node__handle ${isActive ? 'flowdrop-workflow-node__handle--active' : ''}`}
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {isActive
-                ? getDataTypeColorToken('trigger')
+                ? getDataTypeColorToken(checker, 'trigger')
                 : getDataTypeColorToken(
+                    checker,
                     'trigger'
                   )}; --fd-handle-border-color: var(--fd-handle-border);"
               tabindex={-1}

package/dist/components/nodes/IdeaNode.svelte

@@ -11,6 +11,7 @@
   import type { ConfigValues, NodeMetadata } from '../../types/index.js';
   import Icon from '@iconify/svelte';
   import { getDataTypeColor } from '../../utils/colors.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { m } from '../../messages/index.js';
 
   /**
@@ -34,6 +35,8 @@
     isError?: boolean;
   }>();
 
+  const checker = getInstance().portCompatibility;
+
   /**
    * Instance-specific title override from config.
    * Falls back to the original label if not set.
@@ -151,6 +154,7 @@
       type="target"
       position={Position.Left}
       style="--fd-handle-fill: {getDataTypeColor(
+        checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
       id={`${props.data.nodeId}-input-left`}
@@ -163,6 +167,7 @@
       type="target"
       position={Position.Top}
       style="--fd-handle-fill: {getDataTypeColor(
+        checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); z-index: 30;"
       id={`${props.data.nodeId}-input-top`}
@@ -215,6 +220,7 @@
       type="source"
       position={Position.Right}
       style="--fd-handle-fill: {getDataTypeColor(
+        checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
       id={`${props.data.nodeId}-output-right`}
@@ -227,6 +233,7 @@
       type="source"
       position={Position.Bottom}
       style="--fd-handle-fill: {getDataTypeColor(
+        checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); z-index: 30;"
       id={`${props.data.nodeId}-output-bottom`}

package/dist/components/nodes/SimpleNode.svelte

@@ -21,7 +21,7 @@
   import { dynamicPortToNodePort } from '../../types/index.js';
   import Icon from '@iconify/svelte';
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
-  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { applyPortOrder, getPortTop, isPortVisible } from '../../utils/portUtils.js';
   import CogIcon from '../icons/CogIcon.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
@@ -44,6 +44,9 @@
     isError?: boolean;
   }>();
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   /**
    * Get UI extension settings from extensions, merging node type defaults with instance overrides.
    */
@@ -141,7 +144,7 @@
         'input',
         hiddenPorts,
         hideUnconnectedHandles,
-        getConnectedHandles(),
+        fd.workflow.connectedHandles,
         props.data.nodeId
       )
     )
@@ -160,7 +163,7 @@
         'output',
         hiddenPorts,
         hideUnconnectedHandles,
-        getConnectedHandles(),
+        fd.workflow.connectedHandles,
         props.data.nodeId
       )
     )
@@ -178,11 +181,12 @@
 </script>
 
 <!-- Input Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
-{#each visibleInputPorts as port, index}
+{#each visibleInputPorts as port, index (port.id)}
   <Handle
     type="target"
     position={Position.Left}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       port.dataType
     )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
       index,
@@ -214,7 +218,7 @@
       <!-- Node Icon (circle dot) — visibility controlled by --fd-node-circle-display -->
       <span
         class="flowdrop-simple-node__color-dot"
-        style="background: {getCategoryColorToken(props.data.metadata?.category)}"
+        style="background: {getCategoryColorToken(fd.categories, props.data.metadata?.category)}"
       ></span>
 
       <!-- Node Title -->
@@ -256,11 +260,12 @@
 </div>
 
 <!-- Output Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
-{#each visibleOutputPorts as port, index}
+{#each visibleOutputPorts as port, index (port.id)}
   <Handle
     type="source"
     position={Position.Right}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       port.dataType
     )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
       index,

package/dist/components/nodes/SquareNode.svelte

@@ -22,7 +22,7 @@
   import Icon from '@iconify/svelte';
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
   import { getNodeIcon } from '../../utils/icons.js';
-  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { applyPortOrder, getPortTop, isPortVisible } from '../../utils/portUtils.js';
   import CogIcon from '../icons/CogIcon.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
@@ -45,6 +45,9 @@
     isError?: boolean;
   }>();
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   /**
    * Get UI extension settings from extensions, merging node type defaults with instance overrides.
    */
@@ -66,13 +69,15 @@
    * Get icon using the same resolution as WorkflowNode
    * Uses getNodeIcon utility with category fallback
    */
-  let squareIcon = $derived(getNodeIcon(props.data.metadata?.icon, props.data.metadata?.category));
+  let squareIcon = $derived(
+    getNodeIcon(fd.categories, props.data.metadata?.icon, props.data.metadata?.category)
+  );
 
   /**
    * Get icon color using category-based color tokens for consistency
    * Falls back to primary color if category not available
    */
-  let squareColor = $derived(getCategoryColorToken(props.data.metadata?.category));
+  let squareColor = $derived(getCategoryColorToken(fd.categories, props.data.metadata?.category));
 
   // Handle configuration sidebar - now using global ConfigSidebar
   function openConfigSidebar(): void {
@@ -129,7 +134,7 @@
         'input',
         hiddenPorts,
         hideUnconnectedHandles,
-        getConnectedHandles(),
+        fd.workflow.connectedHandles,
         props.data.nodeId
       )
     )
@@ -148,7 +153,7 @@
         'output',
         hiddenPorts,
         hideUnconnectedHandles,
-        getConnectedHandles(),
+        fd.workflow.connectedHandles,
         props.data.nodeId
       )
     )
@@ -167,11 +172,12 @@
 </script>
 
 <!-- Input Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
-{#each visibleInputPorts as port, index}
+{#each visibleInputPorts as port, index (port.id)}
   <Handle
     type="target"
     position={Position.Left}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       port.dataType
     )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
       index,
@@ -203,7 +209,7 @@
     <!-- Circle dot — visibility controlled by --fd-node-circle-display -->
     <span
       class="flowdrop-square-node__color-dot"
-      style="background: {getCategoryColorToken(props.data.metadata?.category)}"
+      style="background: {getCategoryColorToken(fd.categories, props.data.metadata?.category)}"
     ></span>
   </div>
 
@@ -232,11 +238,12 @@
 </div>
 
 <!-- Output Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
-{#each visibleOutputPorts as port, index}
+{#each visibleOutputPorts as port, index (port.id)}
   <Handle
     type="source"
     position={Position.Right}
     style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       port.dataType
     )}); --fd-handle-border-color: var(--fd-handle-border); top: {getPortTop(
       index,

package/dist/components/nodes/TerminalNode.svelte

@@ -15,7 +15,7 @@
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
   import { getNodeIcon } from '../../utils/icons.js';
   import { getCircleHandlePosition } from '../../utils/handlePositioning.js';
-  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
 
   /**
    * Terminal node variant types
@@ -83,6 +83,9 @@
     isError?: boolean;
   }>();
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   /**
    * Determine terminal variant from config or metadata
    * Priority: config.variant > metadata tag detection > default to "start"
@@ -156,7 +159,7 @@
       return true;
     }
     const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-    return getConnectedHandles().has(handleId);
+    return fd.workflow.connectedHandles.has(handleId);
   }
 
   /**
@@ -165,7 +168,7 @@
    */
   let terminalIcon = $derived(
     props.data.metadata?.icon
-      ? getNodeIcon(props.data.metadata.icon, props.data.metadata?.category)
+      ? getNodeIcon(fd.categories, props.data.metadata.icon, props.data.metadata?.category)
       : variantConfig.icon
   );
 
@@ -175,7 +178,7 @@
    */
   let terminalColor = $derived(
     props.data.metadata?.category
-      ? getCategoryColorToken(props.data.metadata.category)
+      ? getCategoryColorToken(fd.categories, props.data.metadata.category)
       : variantConfig.color
   );
 
@@ -363,6 +366,7 @@
           type="target"
           position={Position.Left}
           style="--fd-handle-fill: {getDataTypeColor(
+            checker,
             port.dataType
           )}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
           id={`${props.data.nodeId}-input-${port.id}`}
@@ -386,6 +390,7 @@
           position={Position.Right}
           id={`${props.data.nodeId}-output-${port.id}`}
           style="--fd-handle-fill: {getDataTypeColor(
+            checker,
             port.dataType
           )}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
         />

package/dist/components/nodes/ToolNode.svelte

@@ -8,6 +8,7 @@
   import { Position, Handle } from '@xyflow/svelte';
   import Icon from '@iconify/svelte';
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import type { NodeMetadata, NodePort } from '../../types/index.js';
   import CogIcon from '../icons/CogIcon.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
@@ -46,6 +47,9 @@
     isError?: boolean;
   }>();
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   // Prioritize metadata over config for tool nodes (metadata is the node definition)
   let toolIcon = $derived(
     (props.data.metadata?.icon as string) || (props.data.config?.icon as string) || 'mdi:tools'
@@ -171,6 +175,7 @@
     position={Position.Left}
     id={`${props.data.nodeId}-input-${toolInputPort.id}`}
     style="top: 40px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       portDataType
     )}); --fd-handle-border-color: var(--fd-handle-border);"
   />
@@ -199,7 +204,7 @@
       <!-- Circle dot — visibility controlled by --fd-node-circle-display -->
       <span
         class="flowdrop-tool-node__color-dot"
-        style="background: {getCategoryColorToken(props.data.metadata?.category)}"
+        style="background: {getCategoryColorToken(fd.categories, props.data.metadata?.category)}"
       ></span>
 
       <!-- Tool Info -->
@@ -249,6 +254,7 @@
     position={Position.Right}
     id={`${props.data.nodeId}-output-${toolOutputPort.id}`}
     style="top: 40px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
       portDataType
     )}); --fd-handle-border-color: var(--fd-handle-border);"
   />

package/dist/components/nodes/WorkflowNode.svelte

@@ -22,7 +22,7 @@
     getCategoryColorToken,
     getPortBackgroundColor
   } from '../../utils/colors.js';
-  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { applyPortOrder } from '../../utils/portUtils.js';
   import { m } from '../../messages/index.js';
 
@@ -37,6 +37,9 @@
   let props: Props = $props();
   let isHandleInteraction = $state(false);
 
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
   // Hoist the graph branch — three reads in the template, two of them inside
   // {#each port} loops where N×M reads add up. One getter walk per render.
   const graph = $derived(m().nodes.graph);
@@ -145,7 +148,7 @@
 
     // Check if port is connected
     const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-    return getConnectedHandles().has(handleId);
+    return fd.workflow.connectedHandles.has(handleId);
   }
 
   /**
@@ -219,17 +222,17 @@
       <!-- Squircle icon — visibility controlled by --fd-node-icon-display -->
       <div
         class="flowdrop-workflow-node__icon-wrapper"
-        style="--_icon-color: {getCategoryColorToken(props.data.metadata.category)}"
+        style="--_icon-color: {getCategoryColorToken(fd.categories, props.data.metadata.category)}"
       >
         <Icon
-          icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)}
+          icon={getNodeIcon(fd.categories, props.data.metadata.icon, props.data.metadata.category)}
           class="flowdrop-workflow-node__icon"
         />
       </div>
       <!-- Circle dot — visibility controlled by --fd-node-circle-display -->
       <span
         class="flowdrop-workflow-node__color-dot"
-        style="background: {getCategoryColorToken(props.data.metadata.category)}"
+        style="background: {getCategoryColorToken(fd.categories, props.data.metadata.category)}"
       ></span>
 
       <!-- Node Title - Icon and Title on same line -->
@@ -262,6 +265,7 @@
               id={`${props.data.nodeId}-input-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
+                checker,
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
               tabindex={-1}
@@ -274,11 +278,13 @@
                 <span
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
+                    checker,
                     port.dataType,
                     15
                   )}; color: {getDataTypeColorToken(
+                    checker,
                     port.dataType
-                  )}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
+                  )}; border: 1px solid {getPortBackgroundColor(checker, port.dataType, 30)};"
                 >
                   {port.dataType}
                 </span>
@@ -315,11 +321,13 @@
                 <span
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
+                    checker,
                     port.dataType,
                     15
                   )}; color: {getDataTypeColorToken(
+                    checker,
                     port.dataType
-                  )}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
+                  )}; border: 1px solid {getPortBackgroundColor(checker, port.dataType, 30)};"
                 >
                   {port.dataType}
                 </span>
@@ -338,6 +346,7 @@
               id={`${props.data.nodeId}-output-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
+                checker,
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
               tabindex={-1}

package/dist/components/playground/ChatInput.svelte

@@ -12,14 +12,11 @@
   import Icon from '@iconify/svelte';
   import { tick, untrack } from 'svelte';
   import { hasEnableRunFlag } from '../../types/playground.js';
-  import {
-    getMessages,
-    getIsExecuting,
-    getCanSendMessage,
-    getCurrentSession
-  } from '../../stores/playgroundStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { m } from '../../messages/index.js';
 
+  const fd = getInstance();
+
   interface Props {
     placeholder?: string;
     /** Show the textarea (default: true). When false, only the Run button is shown. */
@@ -65,7 +62,7 @@
   let seenEnableRunCount = 0;
 
   $effect(() => {
-    const count = getMessages().filter((m) => hasEnableRunFlag(m.metadata)).length;
+    const count = fd.playground.messages.filter((m) => hasEnableRunFlag(m.metadata)).length;
     if (count > seenEnableRunCount) {
       untrack(() => {
         seenEnableRunCount = count;
@@ -75,7 +72,7 @@
   });
 
   $effect(() => {
-    if (getCurrentSession()?.id) {
+    if (fd.playground.currentSession?.id) {
       untrack(() => {
         seenEnableRunCount = 0;
       });
@@ -87,7 +84,7 @@
 
   /** Auto-focus input when execution completes */
   $effect(() => {
-    const nowExecuting = getIsExecuting();
+    const nowExecuting = fd.playground.isExecuting;
     if (wasExecuting && !nowExecuting && inputField) {
       tick().then(() => inputField?.focus({ preventScroll: true }));
     }
@@ -98,7 +95,7 @@
 
   function handleSend(): void {
     const trimmedValue = inputValue.trim();
-    if (!trimmedValue || !getCanSendMessage()) return;
+    if (!trimmedValue || !fd.playground.canSendMessage) return;
 
     onSendMessage?.(trimmedValue);
     inputValue = '';
@@ -124,7 +121,7 @@
   }
 
   function handleRun(): void {
-    if (getIsExecuting() || !runEnabled) return;
+    if (fd.playground.isExecuting || !runEnabled) return;
     runEnabled = false;
     onSendMessage?.(resolvedPredefinedMessage);
   }
@@ -153,14 +150,14 @@
             class="chat-input__textarea"
             placeholder={resolvedPlaceholder}
             rows="1"
-            disabled={getIsExecuting() || !getCurrentSession()}
+            disabled={fd.playground.isExecuting || !fd.playground.currentSession}
             onkeydown={handleKeydown}
             oninput={handleInput}
           ></textarea>
         </div>
       {/if}
 
-      {#if getIsExecuting()}
+      {#if fd.playground.isExecuting}
         <button
           type="button"
           class="chat-input__stop-btn"
@@ -176,7 +173,7 @@
           type="button"
           class="chat-input__send-btn"
           onclick={handleSend}
-          disabled={!inputValue.trim() || !getCanSendMessage()}
+          disabled={!inputValue.trim() || !fd.playground.canSendMessage}
           title={actions.sendTitle}
           aria-label={actions.sendTitle}
         >