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

package/dist/components/interrupt/InterruptBubble.svelte

@@ -561,11 +561,6 @@
     background-color: var(--fd-error-hover);
   }
 
-  .interrupt-bubble__retry-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   /* Body - prompt content area, full width */
   .interrupt-bubble__body {
     padding: var(--fd-space-xl);
@@ -648,11 +643,6 @@
     background-color: var(--fd-error-muted);
   }
 
-  .interrupt-bubble__cancel-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .interrupt-bubble__cancel-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/ReviewPrompt.svelte

@@ -540,11 +540,6 @@
     color: var(--fd-error);
   }
 
-  .review-prompt__bulk-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .review-prompt__bulk-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -642,11 +637,6 @@
     color: var(--fd-error-foreground);
   }
 
-  .review-prompt__toggle-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .review-prompt__toggle-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -739,11 +729,6 @@
     border-color: var(--fd-border-strong);
   }
 
-  .review-prompt__html-toggle-btn:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   /* Raw HTML code display */
   .review-prompt__raw-html {
     font-family: var(--fd-review-font-mono);
@@ -842,11 +827,6 @@
     transform: translateY(-1px);
   }
 
-  .review-prompt__submit:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .review-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -254,7 +254,6 @@
   .text-prompt__input:focus,
   .text-prompt__textarea:focus {
     border-color: var(--fd-interrupt-completed-border);
-    box-shadow: 0 0 0 3px var(--fd-interrupt-completed-shadow);
   }
 
   .text-prompt__input:disabled,
@@ -316,11 +315,6 @@
     transform: translateY(-1px);
   }
 
-  .text-prompt__submit:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .text-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/layouts/MainLayout.svelte

@@ -510,12 +510,12 @@
 
   .flowdrop-main-layout__sidebar::-webkit-scrollbar-track {
     background: var(--fd-scrollbar-track);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__sidebar::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__sidebar::-webkit-scrollbar-thumb:hover {
@@ -585,7 +585,6 @@
   }
 
   .flowdrop-main-layout__divider:focus {
-    outline: none;
     background-color: var(--fd-primary-muted);
   }
 
@@ -669,12 +668,12 @@
 
   .flowdrop-main-layout__panel--bottom::-webkit-scrollbar-track {
     background: var(--fd-scrollbar-track);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__panel--bottom::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .flowdrop-main-layout__panel--bottom::-webkit-scrollbar-thumb:hover {

package/dist/components/nodes/AtomNode.svelte

@@ -141,7 +141,7 @@
     return { text: atomCfg.placeholder ?? '', empty: true };
   });
 
-  // Pill height is content-driven (~28px), so fixed px offsets don't fit.
+  // Pill is a fixed 40px tall (20px grid), so a single port centers at 20px.
   // 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;
@@ -150,12 +150,6 @@
   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)}
@@ -170,6 +164,11 @@
   />
 {/each}
 
+<!-- Presentational: focus, keyboard and selection live on xyflow's node wrapper
+     (see UniversalNode, which maps Enter/Space to opening config). click is a
+     mouse convenience. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
   class="flowdrop-atom-node"
   class:flowdrop-atom-node--selected={selected}
@@ -179,14 +178,13 @@
   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 class="flowdrop-atom-node__pill">
+    {#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>
 </div>
 
 {#each outPorts as port, index (port.id)}
@@ -202,54 +200,68 @@
 {/each}
 
 <style>
+  /* Transparent slot: defines the node's bounding box so handles anchor
+     consistently, while the pill sits narrow and vertically centered inside. */
   .flowdrop-atom-node {
     position: relative;
-    display: inline-flex;
+    box-sizing: border-box;
+    display: flex;
     align-items: center;
+    justify-content: center;
     width: fit-content;
-    min-width: 2rem;
-    min-height: 28px;
-    padding: 2px var(--fd-space-sm);
-    background-color: var(--fd-card);
+    /* 40px tall → a single port centers at 20px (50%); capped at 60px / 120px. */
+    min-height: 40px;
+    max-height: 60px;
+    max-width: 120px;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  /* The visible, themed pill — hugs its text and stays compact. */
+  .flowdrop-atom-node__pill {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    min-width: 32px;
+    padding: 4px 10px;
+    background-color: var(--fd-node-bg);
+    backdrop-filter: var(--fd-node-backdrop-filter);
     /* --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: var(--fd-node-border-width) 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 {
+  .flowdrop-atom-node--rect .flowdrop-atom-node__pill {
     border-radius: var(--fd-radius-md);
   }
 
-  .flowdrop-atom-node:hover {
-    box-shadow: var(--fd-shadow-md);
+  .flowdrop-atom-node:hover .flowdrop-atom-node__pill {
+    box-shadow: var(--fd-node-shadow);
     border-color: var(--fd-atom-node-color, var(--fd-node-border-hover));
   }
 
-  .flowdrop-atom-node--selected {
+  .flowdrop-atom-node--selected .flowdrop-atom-node__pill {
     box-shadow:
       0 0 0 2px color-mix(in srgb, var(--fd-atom-node-color, var(--fd-primary)) 30%, transparent),
-      var(--fd-shadow-md);
+      var(--fd-node-shadow);
     border-color: var(--fd-atom-node-color, var(--fd-primary));
   }
 
-  .flowdrop-atom-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-atom-node--processing {
     opacity: 0.7;
   }
 
-  .flowdrop-atom-node--error {
+  .flowdrop-atom-node--error .flowdrop-atom-node__pill {
     border-color: var(--fd-error) !important;
     background-color: var(--fd-error-muted) !important;
   }
@@ -264,14 +276,14 @@
     margin-right: 2px;
     color: var(--fd-muted-foreground);
     font-size: var(--fd-text-sm);
-    line-height: 1.2;
+    line-height: 20px;
   }
 
   .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;
+    line-height: 20px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

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>