@flowdrop/flowdrop 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/components/nodes/ToolNode.svelte

@@ -10,7 +10,7 @@
   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 NodeConfigButton from './NodeConfigButton.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
 
   interface ToolNodeParameter {
@@ -128,6 +128,13 @@
     props.data.metadata?.outputs?.find((port: NodePort) => port.dataType === portDataType)
   );
 
+  /**
+   * Vertical center of the first port handle (px). Single source of truth shared
+   * by the input/output handles and the badge overlay, so the badge stays level
+   * with the first port.
+   */
+  const firstPortTop = 40;
+
   /**
    * Handle configuration sidebar - using global ConfigSidebar
    */
@@ -149,23 +156,6 @@
   function handleDoubleClick(): void {
     openConfigSidebar();
   }
-
-  /**
-   * Handle click events
-   */
-  function handleClick(): void {
-    // Node selection is handled by Svelte Flow
-  }
-
-  /**
-   * Handle keyboard events for accessibility
-   */
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleDoubleClick();
-    }
-  }
 </script>
 
 <!-- Tool Input Handle (optional): center at 40px (multiple of 10), 20px connection area -->
@@ -174,7 +164,7 @@
     type="target"
     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(
+    style="top: {firstPortTop}px; 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);"
@@ -182,17 +172,16 @@
 {/if}
 
 <!-- Tool Node -->
+<!-- Presentational: focus, keyboard and selection live on xyflow's node
+     wrapper (see UniversalNode). double-click is a mouse convenience. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="flowdrop-tool-node"
   class:flowdrop-tool-node--selected={props.selected}
   class:flowdrop-tool-node--processing={props.isProcessing}
   class:flowdrop-tool-node--error={props.isError}
   style={nodeStyle}
-  onclick={handleClick}
   ondblclick={handleDoubleClick}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
 >
   <!-- Node Header -->
   <div class="flowdrop-tool-node__header">
@@ -217,8 +206,8 @@
         </div>
       </div>
 
-      <!-- Tool Badge - tinted style matching icon wrappers -->
-      <div class="flowdrop-tool-node__badge">{displayBadge}</div>
+      <!-- Tool Badge - overlay aligned to the first port's vertical center -->
+      <div class="flowdrop-tool-node__badge" style="top: {firstPortTop}px">{displayBadge}</div>
     </div>
 
     <!-- Tool Description - uses instanceDescription override if set -->
@@ -242,9 +231,7 @@
   {/if}
 
   <!-- Config button -->
-  <button class="flowdrop-tool-node__config-btn" onclick={openConfigSidebar} title="Configure tool">
-    <CogIcon />
-  </button>
+  <NodeConfigButton onclick={openConfigSidebar} title="Configure tool" />
 </div>
 
 <!-- Tool Output Handle (optional): center at 40px (multiple of 10), 20px connection area -->
@@ -253,7 +240,7 @@
     type="source"
     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(
+    style="top: {firstPortTop}px; 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);"
@@ -263,44 +250,46 @@
 <style>
   .flowdrop-tool-node {
     position: relative;
-    background-color: var(--fd-card);
-    border: 1.5px solid var(--fd-tool-node-color);
-    border-radius: var(--fd-radius-xl);
+    box-sizing: border-box;
+    background-color: var(--fd-node-bg);
+    backdrop-filter: var(--fd-node-backdrop-filter);
+    border: var(--fd-node-border-width) solid var(--fd-tool-node-color);
+    border-radius: var(--fd-node-radius);
     width: var(--fd-node-default-width);
-    min-height: var(--fd-node-tool-min-height);
+    /* A tool has at most 2 ports on a side (handles at 40px & 80px), so 100px
+       is the fixed floor; the grid-aligned header keeps it a 20px multiple. */
+    min-height: 100px;
     display: flex;
     flex-direction: column;
     cursor: pointer;
     transition: all var(--fd-transition-fast);
-    box-shadow: var(--fd-shadow-md);
+    box-shadow: var(--fd-node-shadow);
     overflow: visible;
     z-index: 10;
     color: var(--fd-foreground);
   }
 
   .flowdrop-tool-node:hover {
-    box-shadow: var(--fd-shadow-lg);
+    box-shadow: var(--fd-node-shadow-hover);
     border-color: var(--fd-tool-node-color);
   }
 
   .flowdrop-tool-node--selected {
     box-shadow:
       0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent),
-      var(--fd-shadow-lg);
+      var(--fd-node-shadow-hover);
     border-color: var(--fd-tool-node-color);
   }
 
   .flowdrop-tool-node--selected:hover {
     box-shadow:
       0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent),
-      var(--fd-shadow-lg);
+      var(--fd-node-shadow-hover);
     border-color: var(--fd-tool-node-color);
   }
 
-  .flowdrop-tool-node:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
+  /* Focus ring is centralized in base.css (drawn on the .svelte-flow__node
+     wrapper, which is the focusable element). */
 
   .flowdrop-tool-node--processing {
     opacity: 0.7;
@@ -312,10 +301,18 @@
   }
 
   .flowdrop-tool-node__header {
-    padding: 1rem;
+    box-sizing: border-box;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    /* px on the 20px grid. Bottom padding absorbs BOTH node borders (top + bottom)
+       so the OUTER node height lands on a 20px multiple: with a 40px title row and
+       a 20px-per-line description, outer = 60 + 20·lines (80, 100, 120…). */
+    padding: var(--fd-node-header-gap) 20px
+      calc(var(--fd-node-header-gap) - var(--fd-node-border-width) * 2);
     /* Light mode: mix tool color with white (95%) for subtle tint */
     background-color: color-mix(in srgb, var(--fd-tool-node-color) 5%, white);
-    border-radius: var(--fd-radius-xl);
+    border-radius: var(--fd-node-radius);
     border: none;
   }
 
@@ -329,8 +326,10 @@
   .flowdrop-tool-node__header-content {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 0.5rem;
+    gap: 12px;
+    /* Two grid rows (title + version), so the icon + text block is exactly 40px;
+       the description stacks flush below and each wrapped line adds one 20px row. */
+    min-height: var(--fd-node-header-title-height);
   }
 
   /* Squircle icon wrapper - Apple-style rounded square background */
@@ -338,9 +337,10 @@
     display: var(--fd-node-icon-display, flex);
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 0.625rem;
+    /* px (not rem) so the icon stays grid-locked regardless of root font-size */
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
     background: color-mix(
       in srgb,
       var(--fd-tool-node-color) var(--fd-node-icon-bg-opacity),
@@ -365,41 +365,64 @@
   }
 
   .flowdrop-tool-node__title {
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 600;
     color: var(--fd-foreground);
     margin: 0;
-    line-height: 1.4;
+    /* one 20px grid row */
+    line-height: var(--fd-node-port-row-height);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .flowdrop-tool-node__version {
     font-size: var(--fd-text-xs);
     color: var(--fd-muted-foreground);
     font-weight: 500;
-    margin-top: 0.125rem;
+    /* one 20px grid row */
+    line-height: var(--fd-node-port-row-height);
   }
 
   .flowdrop-tool-node__badge {
+    /* Overlay so it takes no row space — the title gets the full width. The
+       inline `top` is set to the first port's center; translateY keeps the
+       badge vertically aligned with that port. */
+    position: absolute;
+    right: 20px;
+    transform: translateY(-50%);
+    z-index: 12;
     background-color: color-mix(in srgb, var(--fd-tool-node-color) 15%, transparent);
     color: var(--fd-tool-node-color);
     border: 1px solid color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent);
-    font-size: 0.625rem;
+    font-size: 10px;
     font-weight: 700;
-    padding: 0.25rem 0.5rem;
+    padding: 4px 8px;
     border-radius: var(--fd-radius-sm);
     letter-spacing: 0.05em;
+    /* Lay flat: sit back at reduced opacity so it reads as a subtle marker and
+       any title underneath stays legible. */
+    opacity: 0.4;
   }
 
   .flowdrop-tool-node__description {
     font-size: var(--fd-text-xs);
     color: var(--fd-muted-foreground);
     margin: 0;
-    line-height: 1.3;
+    /* each line is one 20px grid row; clamp so the node grows in clean 20px steps */
+    line-height: var(--fd-node-port-row-height);
+    min-height: var(--fd-node-port-row-height);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
   }
 
   .flowdrop-tool-node__icon-wrapper :global(.flowdrop-tool-node__icon) {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 20px;
+    height: 20px;
     color: var(--fd-node-icon);
   }
 
@@ -430,40 +453,9 @@
     height: 12px;
   }
 
-  .flowdrop-tool-node__config-btn :global(svg) {
-    width: 14px;
-    height: 14px;
-  }
-
-  .flowdrop-tool-node__config-btn {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: var(--fd-backdrop);
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-sm);
-    color: var(--fd-muted-foreground);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: all var(--fd-transition-normal);
-    backdrop-filter: blur(4px);
-    z-index: 15;
-    font-size: var(--fd-text-sm);
-  }
-
-  .flowdrop-tool-node:hover .flowdrop-tool-node__config-btn {
-    opacity: 1;
-  }
-
-  .flowdrop-tool-node__config-btn:hover {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-strong);
-    color: var(--fd-foreground);
+  /* Reveal the NodeConfigButton (gear) when the node is hovered. */
+  .flowdrop-tool-node:hover {
+    --fd-config-btn-opacity: 1;
   }
 
   @keyframes spin {
@@ -486,11 +478,6 @@
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent) !important;
   }
 
-  :global(.svelte-flow__node-tool .svelte-flow__handle:focus) {
-    outline: 2px solid var(--fd-tool-node-color) !important;
-    outline-offset: 2px !important;
-  }
-
   /* Circle dot icon — shown in minimal skin via --fd-node-circle-display */
   .flowdrop-tool-node__color-dot {
     width: 10px;

package/dist/components/nodes/WorkflowNode.svelte

@@ -16,7 +16,7 @@
   import { dynamicPortToNodePort } from '../../types/index.js';
   import Icon from '@iconify/svelte';
   import { getNodeIcon } from '../../utils/icons.js';
-  import CogIcon from '../icons/CogIcon.svelte';
+  import NodeConfigButton from './NodeConfigButton.svelte';
   import {
     getDataTypeColorToken,
     getCategoryColorToken,
@@ -165,13 +165,6 @@
     allOutputPorts.filter((port) => isPortVisible(port, 'output'))
   );
 
-  /**
-   * Handle node click - only handle selection, no config opening
-   */
-  function handleNodeClick(): void {
-    // Node selection is handled by Svelte Flow
-  }
-
   /**
    * Handle double-click to open config
    */
@@ -196,23 +189,17 @@
 </script>
 
 <!-- Node Container -->
+<!-- Presentational: focus, keyboard and selection live on xyflow's node
+     wrapper (see UniversalNode). double-click is a mouse convenience. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="flowdrop-workflow-node"
   class:flowdrop-workflow-node--selected={props.selected}
-  onclick={handleNodeClick}
   ondblclick={handleDoubleClick}
   onmouseup={() => {
     isHandleInteraction = false;
   }}
   data-handle-interaction={isHandleInteraction}
-  role="button"
-  tabindex="0"
-  onkeydown={(e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleDoubleClick();
-    }
-  }}
   aria-label={graph.workflowNode({ name: props.data.metadata.name })}
   aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
 >
@@ -236,7 +223,7 @@
       ></span>
 
       <!-- Node Title - Icon and Title on same line -->
-      <h3 class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1">
+      <h3 class="flowdrop-text--sm flowdrop-font--medium flowdrop-flex--1">
         {displayTitle}
       </h3>
 
@@ -258,13 +245,13 @@
       <div class="flowdrop-workflow-node__ports-list">
         {#each visibleInputPorts as port (port.id)}
           <div class="flowdrop-workflow-node__port">
-            <!-- Input Handle: centered in row, at node edge (ports have no padding) -->
+            <!-- Input Handle: one grid row (20px) from the top so it aligns with the label, at node edge -->
             <Handle
               type="target"
               position={Position.Left}
               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(
+              style="top: var(--fd-node-port-row-height); transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 checker,
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
@@ -339,13 +326,13 @@
               {/if}
             </div>
 
-            <!-- Output Handle: centered in row, at node edge (ports have no padding) -->
+            <!-- Output Handle: one grid row (20px) from the top so it aligns with the label, at node edge -->
             <Handle
               type="source"
               position={Position.Right}
               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(
+              style="top: var(--fd-node-port-row-height); transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 checker,
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
@@ -358,22 +345,17 @@
   {/if}
 
   <!-- Config button -->
-  <button
-    class="flowdrop-workflow-node__config-btn"
-    onclick={openConfigSidebar}
-    title="Configure node"
-  >
-    <CogIcon />
-  </button>
+  <NodeConfigButton onclick={openConfigSidebar} title="Configure node" />
 </div>
 
 <style>
   .flowdrop-workflow-node {
     position: relative;
-    background-color: var(--fd-card);
-    border: 1.5px solid var(--fd-node-border);
-    border-radius: var(--fd-radius-xl);
-    box-shadow: var(--fd-shadow-md);
+    background-color: var(--fd-node-bg);
+    backdrop-filter: var(--fd-node-backdrop-filter);
+    border: var(--fd-node-border-width) solid var(--fd-node-border);
+    border-radius: var(--fd-node-radius);
+    box-shadow: var(--fd-node-shadow);
     width: var(--fd-node-default-width);
     z-index: 10;
     color: var(--fd-foreground);
@@ -381,42 +363,49 @@
   }
 
   .flowdrop-workflow-node:hover {
-    box-shadow: var(--fd-shadow-lg);
+    box-shadow: var(--fd-node-shadow-hover);
     border-color: var(--fd-node-border-hover);
   }
 
   .flowdrop-workflow-node--selected {
     box-shadow:
       0 0 0 2px var(--fd-primary-muted),
-      var(--fd-shadow-lg);
+      var(--fd-node-shadow-hover);
     border-color: var(--fd-primary);
   }
 
   .flowdrop-workflow-node--selected:hover {
     box-shadow:
       0 0 0 2px var(--fd-primary-muted),
-      var(--fd-shadow-lg);
+      var(--fd-node-shadow-hover);
     border-color: var(--fd-primary);
   }
 
-  .flowdrop-workflow-node:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
+  /* Focus ring is centralized in base.css (drawn on the .svelte-flow__node
+     wrapper, which is the focusable element). */
 
   .flowdrop-workflow-node__header {
     box-sizing: border-box;
-    padding: var(--fd-node-header-gap) var(--fd-space-xl);
-    border-bottom: 1px solid var(--fd-border-muted);
-    background: var(--fd-header);
-    border-top-left-radius: var(--fd-radius-xl);
-    border-top-right-radius: var(--fd-radius-xl);
+    /* Bottom padding absorbs BOTH the node's own top border and the header
+       divider, so the body below the header lands on the 20px grid measured
+       from the node's outer top edge: node-border + header = 100/120/140. */
+    padding: var(--fd-node-header-gap) var(--fd-space-xl)
+      calc(
+        var(--fd-node-header-gap) - var(--fd-node-border-width) -
+          var(--fd-node-header-divider-width)
+      );
+    border-bottom: var(--fd-node-header-divider-width) solid var(--fd-node-header-divider-color);
+    background: var(--fd-node-header-bg);
+    border-top-left-radius: var(--fd-node-radius);
+    border-top-right-radius: var(--fd-node-radius);
     display: flex;
     flex-direction: column;
-    gap: var(--fd-node-header-gap);
+    gap: calc(var(--fd-node-header-gap) * 2);
+    /* node-border (1.5) + header = 100/120/140. Header itself is
+       4*gap + title + desc-line - node-border; each extra desc line adds 20. */
     min-height: calc(
-      var(--fd-node-header-gap) * 2 + var(--fd-node-header-title-height) +
-        var(--fd-node-header-desc-line)
+      var(--fd-node-header-gap) * 4 + var(--fd-node-header-title-height) +
+        var(--fd-node-header-desc-line) - var(--fd-node-border-width)
     );
   }
 
@@ -447,9 +436,10 @@
     display: var(--fd-node-icon-display, flex);
     align-items: center;
     justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 0.5rem;
+    /* px (not rem) so the icon stays grid-locked regardless of root font-size */
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
     background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
     flex-shrink: 0;
     transition: all var(--fd-transition-normal);
@@ -465,8 +455,8 @@
   }
 
   .flowdrop-workflow-node__icon-wrapper :global(.flowdrop-workflow-node__icon) {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 20px;
+    height: 20px;
     color: var(--fd-node-icon);
   }
 
@@ -481,7 +471,14 @@
 
   .flowdrop-workflow-node__header-title h3 {
     margin: 0;
-    line-height: 1;
+    /* half the title block so two lines fill it exactly on the 20px grid */
+    line-height: calc(var(--fd-node-header-title-height) / 2);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    min-width: 0;
   }
 
   @keyframes pulse {
@@ -501,27 +498,52 @@
   .flowdrop-workflow-node__ports-list {
     display: flex;
     flex-direction: column;
-    gap: var(--fd-node-header-gap);
-    padding: var(--fd-node-header-gap) 0;
+    gap: 0;
+    /* No vertical padding: sections stack flush and node height stays a
+       multiple of 20. The one exception is the clearance below the header
+       divider, applied to the first section only (below). */
+    padding: 0;
+  }
+
+  /* The first port section sits directly below the header divider; give it a
+     full 20px grid row of clearance so the first port lands on the grid. */
+  .flowdrop-workflow-node__header
+    + .flowdrop-workflow-node__ports
+    .flowdrop-workflow-node__ports-list {
+    padding-top: calc(var(--fd-node-header-gap) * 2);
   }
 
   .flowdrop-workflow-node__port {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 0;
-    min-height: var(--fd-node-port-row-height);
-    padding: var(--fd-space-3xs) 0;
+    /* Fixed three-row (60px) height for every port — node height stays
+       predictable whether or not a port carries a description. */
+    height: calc(var(--fd-node-port-row-height) * 3);
+    padding: 0;
     position: relative;
   }
 
   .flowdrop-workflow-node__port-content {
-    padding: 0 var(--fd-space-xl);
+    padding: var(--fd-node-header-gap) var(--fd-space-xl) 0;
+  }
+
+  /* Each line in a port occupies one 20px grid row: a label-only port
+     centers its single row, a label + description fills both. */
+  .flowdrop-workflow-node__port-content > div {
+    min-height: var(--fd-node-port-row-height);
+    align-items: center;
+  }
+
+  .flowdrop-workflow-node__port-content > p {
+    min-height: var(--fd-node-port-row-height);
+    line-height: var(--fd-node-port-row-height);
   }
 
   .flowdrop-badge {
-    padding: 0.125rem var(--fd-space-3xs);
+    padding: 2px 4px;
     border-radius: var(--fd-radius-sm);
-    font-size: 0.625rem;
+    font-size: 10px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -533,8 +555,8 @@
   }
 
   .flowdrop-badge--sm {
-    font-size: 0.625rem;
-    padding: 0.125rem var(--fd-space-3xs);
+    font-size: 10px;
+    padding: 2px 4px;
   }
 
   /* Handle overrides: hover scale (base 20px/12px from base.css) */
@@ -569,12 +591,12 @@
 
   .flowdrop-text--xs {
     font-size: var(--fd-text-xs);
-    line-height: 1rem;
+    line-height: 16px;
   }
 
   .flowdrop-text--sm {
     font-size: var(--fd-text-sm);
-    line-height: 1.25rem;
+    line-height: 20px;
   }
 
   .flowdrop-text--gray {
@@ -595,39 +617,8 @@
     text-align: right;
   }
 
-  .flowdrop-workflow-node__config-btn :global(svg) {
-    width: 14px;
-    height: 14px;
-  }
-
-  .flowdrop-workflow-node__config-btn {
-    position: absolute;
-    top: var(--fd-space-xs);
-    right: var(--fd-space-xs);
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: var(--fd-backdrop);
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-sm);
-    color: var(--fd-muted-foreground);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: all var(--fd-transition-normal);
-    backdrop-filter: var(--fd-backdrop-blur);
-    z-index: 15;
-    font-size: var(--fd-text-sm);
-  }
-
-  .flowdrop-workflow-node:hover .flowdrop-workflow-node__config-btn {
-    opacity: 1;
-  }
-
-  .flowdrop-workflow-node__config-btn:hover {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-strong);
-    color: var(--fd-foreground);
+  /* Reveal the NodeConfigButton (gear) when the node is hovered. */
+  .flowdrop-workflow-node:hover {
+    --fd-config-btn-opacity: 1;
   }
 </style>