@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/nodes/AtomNode.svelte

@@ -0,0 +1,292 @@
+<!--
+  Atom Node Component
+  Minimalist, label-only node for "supplies a value" atoms (Constant now, Cast later).
+  Renders as a pill that hugs its content with handles driven by the node's ports.
+
+  The body text and the output port's dataType are both driven by config via
+  `extensions.ui.atom` (see AtomUIConfig). This component owns no domain semantics —
+  meaning comes entirely from the node's NodeMetadata.
+-->
+
+<script lang="ts">
+  import { Position, Handle } from '@xyflow/svelte';
+  import type {
+    ConfigValues,
+    ConfigSchema,
+    NodeMetadata,
+    NodeExtensions,
+    NodePort,
+    AtomUIConfig,
+    WorkflowNode as WorkflowNodeType
+  } from '../../types/index.js';
+  import { getDataTypeColor } from '../../utils/colors.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
+  import { applyPortOrder, isPortVisible } from '../../utils/portUtils.js';
+  import { ProximityConnectHelper } from '../../helpers/proximityConnect.js';
+
+  interface AtomNodeData {
+    label: string;
+    config: ConfigValues;
+    metadata: NodeMetadata;
+    nodeId?: string;
+    extensions?: NodeExtensions;
+    onConfigOpen?: (node: {
+      id: string;
+      type: string;
+      data: { label: string; config: ConfigValues; metadata: NodeMetadata };
+    }) => void;
+  }
+
+  interface Props {
+    data: AtomNodeData;
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+  }
+
+  let { data, selected, isProcessing, isError }: Props = $props();
+
+  const fd = getInstance();
+  const checker = fd.portCompatibility;
+
+  const nodeId = $derived(data.nodeId ?? 'unknown');
+  const nodeType = $derived(data.metadata?.type ?? 'atom');
+
+  // Instance extensions override node-type defaults.
+  const atomCfg = $derived<AtomUIConfig>(
+    data.extensions?.ui?.atom ?? data.metadata?.extensions?.ui?.atom ?? {}
+  );
+  const hideUnconnectedHandles = $derived(
+    data.extensions?.ui?.hideUnconnectedHandles ??
+      data.metadata?.extensions?.ui?.hideUnconnectedHandles ??
+      false
+  );
+  const hiddenPorts = $derived(
+    data.extensions?.ui?.hiddenPorts ?? data.metadata?.extensions?.ui?.hiddenPorts ?? {}
+  );
+  const portOrder = $derived(
+    data.extensions?.ui?.portOrder ?? data.metadata?.extensions?.ui?.portOrder ?? {}
+  );
+
+  // Optional, server-driven accent. When unset the inline custom property is
+  // omitted, so CSS falls back to the neutral border — uncolored atoms are
+  // unchanged. Mirrors ToolNode: node definition (metadata) wins over instance.
+  const atomColor = $derived(data.metadata?.color ?? (data.config?.color as string | undefined));
+  const isRect = $derived(atomCfg.shape === 'rectangle');
+
+  // Only the dynamic bits live inline; max-width and accent both optional.
+  const nodeStyle = $derived(
+    [
+      atomCfg.maxWidth ? `max-width: ${atomCfg.maxWidth}px` : '',
+      atomColor ? `--fd-atom-node-color: ${atomColor}` : ''
+    ]
+      .filter(Boolean)
+      .join('; ')
+  );
+
+  // The node slice getAllPorts needs — keeps port resolution in one place,
+  // shared with proximity-connect and coordinate/validation logic. No cast: the
+  // helper's signature documents that `type` + `data` are all it reads.
+  const nodeLike = $derived<Pick<WorkflowNodeType, 'type' | 'data'>>({ type: nodeType, data });
+
+  const inPorts = $derived(
+    applyPortOrder(ProximityConnectHelper.getAllPorts(nodeLike, 'input'), portOrder.inputs).filter(
+      (p: NodePort) =>
+        isPortVisible(
+          p,
+          'input',
+          hiddenPorts,
+          hideUnconnectedHandles,
+          fd.workflow.connectedHandles,
+          nodeId
+        )
+    )
+  );
+  const outPorts = $derived(
+    applyPortOrder(
+      ProximityConnectHelper.getAllPorts(nodeLike, 'output'),
+      portOrder.outputs
+    ).filter((p: NodePort) =>
+      isPortVisible(
+        p,
+        'output',
+        hiddenPorts,
+        hideUnconnectedHandles,
+        fd.workflow.connectedHandles,
+        nodeId
+      )
+    )
+  );
+
+  /** Friendly label for a value, using the field's oneOf titles when present. */
+  function resolveDisplay(schema: ConfigSchema | undefined, key: string, raw: unknown): string {
+    const prop = schema?.properties?.[key] as
+      | { oneOf?: Array<{ const: unknown; title?: string }> }
+      | undefined;
+    const match = prop?.oneOf?.find((o) => o.const === raw);
+    if (match?.title) return match.title;
+    if (typeof raw === 'boolean') return raw ? 'true' : 'false';
+    return String(raw);
+  }
+
+  // Body text: config[valueKey] (label-resolved), else node label. When neither
+  // resolves, fall back to the placeholder and render it dimmed.
+  const display = $derived.by(() => {
+    const key = atomCfg.valueKey;
+    const raw = key ? data.config?.[key] : undefined;
+    if (key && raw !== undefined && raw !== null && raw !== '') {
+      return { text: resolveDisplay(data.metadata?.configSchema, key, raw), empty: false };
+    }
+    if (data.label) return { text: data.label, empty: false };
+    return { text: atomCfg.placeholder ?? '', empty: true };
+  });
+
+  // Pill height is content-driven (~28px), so fixed px offsets don't fit.
+  // Distribute handles as a % of node height: 50% for one port, evenly otherwise.
+  function portTopPct(index: number, count: number): number {
+    return ((index + 1) / (count + 1)) * 100;
+  }
+
+  function openConfig(): void {
+    data.onConfigOpen?.({ id: nodeId, type: nodeType, data });
+  }
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openConfig();
+    }
+  }
+</script>
+
+{#each inPorts as port, index (port.id)}
+  <Handle
+    type="target"
+    position={Position.Left}
+    id={`${nodeId}-input-${port.id}`}
+    style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
+      port.dataType
+    )}); top: {portTopPct(index, inPorts.length)}%;"
+  />
+{/each}
+
+<div
+  class="flowdrop-atom-node"
+  class:flowdrop-atom-node--selected={selected}
+  class:flowdrop-atom-node--processing={isProcessing}
+  class:flowdrop-atom-node--error={isError}
+  class:flowdrop-atom-node--empty={display.empty}
+  class:flowdrop-atom-node--rect={isRect}
+  style={nodeStyle}
+  onclick={openConfig}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex="0"
+>
+  {#if atomCfg.prefix && !display.empty}
+    <span class="flowdrop-atom-node__prefix" aria-hidden="true">{atomCfg.prefix}</span>
+  {/if}
+  <span class="flowdrop-atom-node__body" title={display.text}>{display.text}</span>
+</div>
+
+{#each outPorts as port, index (port.id)}
+  <Handle
+    type="source"
+    position={Position.Right}
+    id={`${nodeId}-output-${port.id}`}
+    style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      checker,
+      port.dataType
+    )}); top: {portTopPct(index, outPorts.length)}%;"
+  />
+{/each}
+
+<style>
+  .flowdrop-atom-node {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    min-width: 2rem;
+    min-height: 28px;
+    padding: 2px var(--fd-space-sm);
+    background-color: var(--fd-card);
+    /* --fd-atom-node-color is set inline only when the server provides a color;
+       otherwise it falls back to the neutral border token. */
+    border: 1.5px solid var(--fd-atom-node-color, var(--fd-node-border));
+    border-radius: 999px;
+    box-shadow: var(--fd-shadow-sm);
+    color: var(--fd-foreground);
+    cursor: pointer;
+    transition:
+      box-shadow var(--fd-transition-fast),
+      border-color var(--fd-transition-fast);
+    z-index: 10;
+  }
+
+  .flowdrop-atom-node--rect {
+    border-radius: var(--fd-radius-md);
+  }
+
+  .flowdrop-atom-node:hover {
+    box-shadow: var(--fd-shadow-md);
+    border-color: var(--fd-atom-node-color, var(--fd-node-border-hover));
+  }
+
+  .flowdrop-atom-node--selected {
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--fd-atom-node-color, var(--fd-primary)) 30%, transparent),
+      var(--fd-shadow-md);
+    border-color: var(--fd-atom-node-color, var(--fd-primary));
+  }
+
+  .flowdrop-atom-node:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
+  .flowdrop-atom-node--processing {
+    opacity: 0.7;
+  }
+
+  .flowdrop-atom-node--error {
+    border-color: var(--fd-error) !important;
+    background-color: var(--fd-error-muted) !important;
+  }
+
+  .flowdrop-atom-node--empty .flowdrop-atom-node__body {
+    color: var(--fd-muted-foreground);
+    font-style: italic;
+  }
+
+  .flowdrop-atom-node__prefix {
+    flex-shrink: 0;
+    margin-right: 2px;
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-sm);
+    line-height: 1.2;
+  }
+
+  .flowdrop-atom-node__body {
+    /* min-width:0 lets the body ellipsize as a flex sibling of the prefix */
+    min-width: 0;
+    font-size: var(--fd-text-sm);
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* `top` is set inline (dynamic, must beat svelte-flow defaults); transform and
+     stacking live here so the hover rule can compose instead of fighting !important. */
+  :global(.svelte-flow__node-atom .svelte-flow__handle) {
+    --fd-handle-border-color: var(--fd-handle-border);
+    transform: translateY(-50%);
+    z-index: 20 !important;
+    pointer-events: auto !important;
+  }
+
+  :global(.svelte-flow__node-atom .svelte-flow__handle:hover) {
+    transform: translateY(-50%) scale(1.2);
+  }
+</style>

package/dist/components/nodes/AtomNode.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
+interface AtomNodeData {
+    label: string;
+    config: ConfigValues;
+    metadata: NodeMetadata;
+    nodeId?: string;
+    extensions?: NodeExtensions;
+    onConfigOpen?: (node: {
+        id: string;
+        type: string;
+        data: {
+            label: string;
+            config: ConfigValues;
+            metadata: NodeMetadata;
+        };
+    }) => void;
+}
+interface Props {
+    data: AtomNodeData;
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+}
+declare const AtomNode: import("svelte").Component<Props, {}, "">;
+type AtomNode = ReturnType<typeof AtomNode>;
+export default AtomNode;

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,