@flowdrop/flowdrop 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/components/nodes/GatewayNode.svelte

@@ -12,6 +12,7 @@
   import { Position, Handle } from '@xyflow/svelte';
   import type { WorkflowNode, NodePort, Branch } from '../../types/index.js';
   import Icon from '@iconify/svelte';
+  import NodeConfigButton from './NodeConfigButton.svelte';
   import { getNodeIcon } from '../../utils/icons.js';
   import {
     getDataTypeColorToken,
@@ -120,13 +121,6 @@
    */
   const visibleBranches = $derived(branches.filter((branch) => isBranchVisible(branch.name)));
 
-  /**
-   * 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
    */
@@ -140,16 +134,6 @@
     }
   }
 
-  /**
-   * Handle keyboard events for accessibility
-   */
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleNodeClick();
-    }
-  }
-
   /**
    * Check if a branch is active
    */
@@ -159,14 +143,13 @@
 </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 flowdrop-workflow-node--gateway"
   class:flowdrop-workflow-node--selected={props.selected}
-  onclick={handleNodeClick}
   ondblclick={handleNodeDoubleClick}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
   aria-label={graph.gatewayNode({ title: displayTitle })}
   aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
 >
@@ -185,7 +168,7 @@
       </div>
 
       <!-- Node Title - uses instanceTitle override if set -->
-      <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>
     </div>
@@ -204,13 +187,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: {getDataTypeColorToken(
+              style="top: var(--fd-node-port-row-height); transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
                 checker,
                 port.dataType
               )}; --fd-handle-border-color: var(--fd-handle-border);"
@@ -293,13 +276,13 @@
               </div>
             </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-${branch.name}`}
               class={`flowdrop-workflow-node__handle ${isActive ? 'flowdrop-workflow-node__handle--active' : ''}`}
-              style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {isActive
+              style="top: var(--fd-node-port-row-height); transform: translateY(-50%); --fd-handle-fill: {isActive
                 ? getDataTypeColorToken(checker, 'trigger')
                 : getDataTypeColorToken(
                     checker,
@@ -323,22 +306,17 @@
   <!-- Note: When all branches are hidden due to hideUnconnectedHandles, we don't show anything -->
 
   <!-- Config button -->
-  <button
-    class="flowdrop-workflow-node__config-btn"
-    onclick={handleNodeDoubleClick}
-    title="Configure node"
-  >
-    <Icon icon="mdi:cog" />
-  </button>
+  <NodeConfigButton onclick={handleNodeDoubleClick} 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);
@@ -350,42 +328,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)
     );
   }
 
@@ -416,9 +401,10 @@
     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);
@@ -434,15 +420,22 @@
   }
 
   .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);
   }
 
   .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);
     color: var(--fd-foreground);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    min-width: 0;
   }
 
   .flowdrop-workflow-node__ports {
@@ -452,27 +445,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;
@@ -484,8 +502,8 @@
   }
 
   .flowdrop-badge--sm {
-    font-size: 0.625rem;
-    padding: 0.125rem var(--fd-space-3xs);
+    font-size: 10px;
+    padding: 2px 4px;
   }
 
   .workflow-node__no-branches {
@@ -537,12 +555,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 {
@@ -568,34 +586,8 @@
     text-align: right;
   }
 
-  .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: blur(4px);
-    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>

package/dist/components/nodes/IdeaNode.svelte

@@ -10,6 +10,7 @@
   import { Position, Handle } from '@xyflow/svelte';
   import type { ConfigValues, NodeMetadata } from '../../types/index.js';
   import Icon from '@iconify/svelte';
+  import NodeConfigButton from './NodeConfigButton.svelte';
   import { getDataTypeColor } from '../../utils/colors.js';
   import { getInstance } from '../../stores/getInstance.svelte.js';
   import { m } from '../../messages/index.js';
@@ -114,38 +115,19 @@
   function handleDoubleClick(): void {
     openConfigSidebar();
   }
-
-  /**
-   * Handle single click - selection handled by SvelteFlow
-   */
-  function handleClick(): void {
-    // Node selection is handled by Svelte Flow
-  }
-
-  /**
-   * Handles keyboard events for accessibility
-   * @param event - The keyboard event
-   */
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleDoubleClick();
-    }
-  }
 </script>
 
 <!-- Idea 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-idea-node"
   class:flowdrop-idea-node--selected={props.selected}
   class:flowdrop-idea-node--processing={props.isProcessing}
   class:flowdrop-idea-node--error={props.isError}
   style="--idea-accent-color: {ideaColor};"
-  onclick={handleClick}
   ondblclick={handleDoubleClick}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
   aria-label={m().nodes.graph.ideaNode({ title: displayTitle })}
 >
   <!-- Left Port (Target/Input): center at top 40px (multiple of 10), 20px connection area -->
@@ -161,7 +143,7 @@
     />
   {/if}
 
-  <!-- Top Port (Target/Input): center at left 150px (multiple of 10), 20px connection area -->
+  <!-- Top Port (Target/Input): center at left 140px (node midpoint, 20px grid), 20px connection area -->
   {#if enableTopPort}
     <Handle
       type="target"
@@ -169,7 +151,7 @@
       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;"
+      )}; --fd-handle-border-color: var(--fd-handle-border); left: 140px; transform: translateX(-50%); z-index: 30;"
       id={`${props.data.nodeId}-input-top`}
     />
   {/if}
@@ -210,9 +192,7 @@
   </div>
 
   <!-- Config button -->
-  <button class="flowdrop-idea-node__config-btn" onclick={openConfigSidebar} title="Configure idea">
-    <Icon icon="mdi:cog" />
-  </button>
+  <NodeConfigButton onclick={openConfigSidebar} title="Configure idea" />
 
   <!-- Right Port (Source/Output): center at top 40px (multiple of 10), 20px connection area -->
   {#if enableRightPort}
@@ -227,7 +207,7 @@
     />
   {/if}
 
-  <!-- Bottom Port (Source/Output): center at left 150px (multiple of 10), 20px connection area -->
+  <!-- Bottom Port (Source/Output): center at left 140px (node midpoint, 20px grid), 20px connection area -->
   {#if enableBottomPort}
     <Handle
       type="source"
@@ -235,7 +215,7 @@
       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;"
+      )}; --fd-handle-border-color: var(--fd-handle-border); left: 140px; transform: translateX(-50%); z-index: 30;"
       id={`${props.data.nodeId}-output-bottom`}
     />
   {/if}
@@ -245,7 +225,11 @@
   .flowdrop-idea-node {
     position: relative;
     width: var(--fd-node-default-width);
-    min-height: var(--fd-node-simple-height);
+    /* Floor at 80px, then grow in 20px steps. Fixed chrome = accent 4px +
+       header 48px + body bottom 6px = 58px, plus the card's 1px×2 border = 60px;
+       each description line adds 20px (line-height), so the card lands on
+       80 / 100 / 120px gridlines. */
+    min-height: 80px;
     cursor: pointer;
     transition: all var(--fd-transition-normal);
     z-index: 10;
@@ -254,22 +238,21 @@
 
   .flowdrop-idea-node__card {
     background-color: var(--fd-background);
-    border-radius: var(--fd-radius-xl);
+    border-radius: var(--fd-node-radius);
     border: 1px solid var(--fd-border);
-    box-shadow: var(--fd-shadow-md);
+    box-shadow: var(--fd-node-shadow);
     overflow: hidden;
     transition: all var(--fd-transition-normal);
   }
 
   .flowdrop-idea-node:hover .flowdrop-idea-node__card {
-    box-shadow: var(--fd-shadow-lg);
-    transform: translateY(-1px);
+    box-shadow: var(--fd-node-shadow-hover);
   }
 
   .flowdrop-idea-node--selected .flowdrop-idea-node__card {
     border-color: var(--fd-primary);
     box-shadow:
-      var(--fd-shadow-lg),
+      var(--fd-node-shadow-hover),
       0 0 0 3px color-mix(in srgb, var(--fd-primary) 30%, transparent);
   }
 
@@ -293,52 +276,69 @@
   .flowdrop-idea-node__header {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
-    padding: var(--fd-space-md) var(--fd-space-xl) var(--fd-space-xs);
+    /* px (not rem) on the 20px grid; 8px top/bottom + 32px icon = 48px header */
+    gap: 10px;
+    padding: 8px 16px;
   }
 
+  /* Squircle icon wrapper - px (not rem) so the icon stays grid-locked
+     regardless of root font-size */
   .flowdrop-idea-node__icon-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    width: 32px;
+    height: 32px;
     background-color: color-mix(
       in srgb,
       var(--idea-accent-color, var(--fd-accent)) var(--fd-node-icon-bg-opacity),
       transparent
     );
-    border-radius: var(--fd-radius-lg);
+    border-radius: 8px;
     flex-shrink: 0;
+    transition: all var(--fd-transition-normal);
+  }
+
+  /* Icon hover effect — matches SimpleNode/ToolNode/NotesNode */
+  .flowdrop-idea-node:hover .flowdrop-idea-node__icon-wrapper {
+    background-color: color-mix(
+      in srgb,
+      var(--idea-accent-color, var(--fd-accent)) var(--fd-node-icon-bg-opacity-hover),
+      transparent
+    );
+    transform: scale(1.05);
   }
 
   :global(.flowdrop-idea-node__icon) {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 20px;
+    height: 20px;
     color: var(--fd-node-icon);
   }
 
   .flowdrop-idea-node__title {
-    font-size: 0.9375rem;
+    font-size: 15px;
     font-weight: 600;
     color: var(--fd-foreground);
     margin: 0;
-    line-height: 1.3;
+    /* px line-height so multi-line text stays on the 20px grid */
+    line-height: 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  /* Body section */
+  /* Body section: 6px bottom (not 8px) compensates the card's 1px×2 border
+     so the card height stays a multiple of 20px. */
   .flowdrop-idea-node__body {
-    padding: 0 var(--fd-space-xl) var(--fd-space-md);
+    padding: 0 16px 6px;
   }
 
   .flowdrop-idea-node__description {
-    font-size: 0.8125rem;
+    font-size: 13px;
     color: var(--fd-muted-foreground);
     margin: 0;
-    line-height: 1.5;
+    /* px line-height so the 3-line clamp lands on the 20px grid (3 × 20px) */
+    line-height: 20px;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     line-clamp: 3;
@@ -350,16 +350,16 @@
   .flowdrop-idea-node__processing {
     display: flex;
     align-items: center;
-    gap: var(--fd-space-xs);
-    padding: var(--fd-space-xs) var(--fd-space-xl);
+    gap: 8px;
+    padding: 8px 16px;
     font-size: var(--fd-text-xs);
     color: var(--fd-muted-foreground);
     border-top: 1px solid var(--fd-border-muted);
   }
 
   .flowdrop-idea-node__spinner {
-    width: 0.875rem;
-    height: 0.875rem;
+    width: 14px;
+    height: 14px;
     border: 2px solid var(--fd-border);
     border-top-color: var(--idea-accent-color, var(--fd-accent));
     border-radius: 50%;
@@ -370,8 +370,8 @@
   .flowdrop-idea-node__error {
     display: flex;
     align-items: center;
-    gap: var(--fd-space-xs);
-    padding: var(--fd-space-xs) var(--fd-space-xl);
+    gap: 8px;
+    padding: 8px 16px;
     font-size: var(--fd-text-xs);
     color: var(--fd-error);
     border-top: 1px solid color-mix(in srgb, var(--fd-error) 30%, transparent);
@@ -379,8 +379,8 @@
   }
 
   :global(.flowdrop-idea-node__error-icon) {
-    width: 0.875rem;
-    height: 0.875rem;
+    width: 14px;
+    height: 14px;
   }
 
   @keyframes idea-spin {
@@ -389,37 +389,9 @@
     }
   }
 
-  /* Config button */
-  .flowdrop-idea-node__config-btn {
-    position: absolute;
-    top: 0.625rem;
-    right: 0.625rem;
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: var(--fd-backdrop);
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    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-idea-node:hover .flowdrop-idea-node__config-btn {
-    opacity: 1;
-  }
-
-  .flowdrop-idea-node__config-btn:hover {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-strong);
-    color: var(--fd-foreground);
-    transform: scale(1.05);
+  /* Reveal the NodeConfigButton (gear) when the node is hovered. */
+  .flowdrop-idea-node:hover {
+    --fd-config-btn-opacity: 1;
   }
 
   /* Handle: 20px/12px from base.css; position offsets for 20px handle */
@@ -441,15 +413,15 @@
   /* Responsive design */
   @media (max-width: 640px) {
     .flowdrop-idea-node {
-      width: 16rem;
+      width: 256px;
     }
 
     .flowdrop-idea-node__header {
-      padding: 0.625rem 0.75rem 0.375rem;
+      padding: 8px 12px;
     }
 
     .flowdrop-idea-node__body {
-      padding: 0 0.75rem 0.625rem;
+      padding: 0 12px 6px;
     }
 
     .flowdrop-idea-node__title {