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

package/dist/components/nodes/SquareNode.svelte

@@ -24,7 +24,7 @@
   import { getNodeIcon } from '../../utils/icons.js';
   import { getInstance } from '../../stores/getInstance.svelte.js';
   import { applyPortOrder, getPortTop, isPortVisible } from '../../utils/portUtils.js';
-  import CogIcon from '../icons/CogIcon.svelte';
+  import NodeConfigButton from './NodeConfigButton.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
 
   const props = $props<{
@@ -102,13 +102,6 @@
     openConfigSidebar();
   }
 
-  // Handle keyboard events
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      openConfigSidebar();
-    }
-  }
   const dynamicInputs = $derived(
     ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
       dynamicPortToNodePort(port, 'input')
@@ -187,54 +180,54 @@
   />
 {/each}
 
-<!-- Square Node -->
+<!-- Square Node: outer is a transparent bounding box (height grows with ports so
+     handles anchor in-bounds); the visible square inside stays a fixed 80×80. -->
+<!-- Presentational: focus, keyboard and selection live on xyflow's node wrapper
+     (see UniversalNode, which maps Enter/Space to opening config). click/
+     double-click are mouse conveniences. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="flowdrop-square-node flowdrop-square-node--compact"
+  class="flowdrop-square-node"
   class:flowdrop-square-node--selected={props.selected}
   class:flowdrop-square-node--processing={props.isProcessing}
   class:flowdrop-square-node--error={props.isError}
-  style="height: {nodeSize}px; width: {nodeSize}px"
+  style="height: {nodeSize}px"
   onclick={handleClick}
   ondblclick={handleDoubleClick}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
 >
-  <!-- Square Layout: Always compact with centered icon in squircle wrapper -->
-  <div class="flowdrop-square-node__compact-content">
-    <!-- Squircle icon — visibility controlled by --fd-node-icon-display -->
-    <div class="flowdrop-square-node__icon-wrapper" style="--_icon-color: {squareColor}">
-      <Icon icon={squareIcon} class="flowdrop-square-node__icon" />
-    </div>
-    <!-- Circle dot — visibility controlled by --fd-node-circle-display -->
-    <span
-      class="flowdrop-square-node__color-dot"
-      style="background: {getCategoryColorToken(fd.categories, props.data.metadata?.category)}"
-    ></span>
-  </div>
-
-  <!-- Processing indicator -->
-  {#if props.isProcessing}
-    <div class="flowdrop-square-node__processing">
-      <div class="flowdrop-square-node__spinner"></div>
+  <!-- The visible, themed square — fixed 80×80, vertically centered in the slot -->
+  <div class="flowdrop-square-node__square">
+    <!-- Square Layout: Always compact with centered icon in squircle wrapper -->
+    <div class="flowdrop-square-node__compact-content">
+      <!-- Squircle icon — visibility controlled by --fd-node-icon-display -->
+      <div class="flowdrop-square-node__icon-wrapper" style="--_icon-color: {squareColor}">
+        <Icon icon={squareIcon} class="flowdrop-square-node__icon" />
+      </div>
+      <!-- Circle dot — visibility controlled by --fd-node-circle-display -->
+      <span
+        class="flowdrop-square-node__color-dot"
+        style="background: {getCategoryColorToken(fd.categories, props.data.metadata?.category)}"
+      ></span>
     </div>
-  {/if}
 
-  <!-- Error indicator -->
-  {#if props.isError}
-    <div class="flowdrop-square-node__error">
-      <AlertCircleIcon />
-    </div>
-  {/if}
-
-  <!-- Config button -->
-  <button
-    class="flowdrop-square-node__config-btn"
-    onclick={openConfigSidebar}
-    title="Configure node"
-  >
-    <CogIcon />
-  </button>
+    <!-- Processing indicator -->
+    {#if props.isProcessing}
+      <div class="flowdrop-square-node__processing">
+        <div class="flowdrop-square-node__spinner"></div>
+      </div>
+    {/if}
+
+    <!-- Error indicator -->
+    {#if props.isError}
+      <div class="flowdrop-square-node__error">
+        <AlertCircleIcon />
+      </div>
+    {/if}
+
+    <!-- Config button -->
+    <NodeConfigButton onclick={openConfigSidebar} title="Configure node" />
+  </div>
 </div>
 
 <!-- Output Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
@@ -254,58 +247,65 @@
 {/each}
 
 <style>
+  /* Transparent slot: defines the node's bounding box so handles anchor
+     consistently (height grows with port count), while the square sits fixed
+     and vertically centered inside. */
   .flowdrop-square-node {
     position: relative;
-    background-color: var(--fd-card);
-    border: 1.5px solid var(--fd-node-border);
-    border-radius: var(--fd-radius-xl);
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: var(--fd-node-square-size);
     cursor: pointer;
-    transition: all var(--fd-transition-fast);
-    box-shadow: var(--fd-shadow-md);
-    overflow: visible; /* Changed from hidden to visible to allow handles to be properly accessible */
     z-index: 10;
     color: var(--fd-foreground);
   }
 
-  /* Square layout (always compact) */
-  .flowdrop-square-node--compact {
+  /* The visible, themed square — fixed 80×80, never expands. */
+  .flowdrop-square-node__square {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: var(--fd-node-square-size);
     height: var(--fd-node-square-size);
-    justify-content: center;
-    align-items: center;
+    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);
+    transition: all var(--fd-transition-fast);
+    color: var(--fd-foreground);
   }
 
-  .flowdrop-square-node:hover {
-    box-shadow: var(--fd-shadow-lg);
+  .flowdrop-square-node:hover .flowdrop-square-node__square {
+    box-shadow: var(--fd-node-shadow-hover);
     border-color: var(--fd-node-border-hover);
   }
 
-  .flowdrop-square-node--selected {
+  .flowdrop-square-node--selected .flowdrop-square-node__square {
     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-square-node--selected:hover {
+  .flowdrop-square-node--selected:hover .flowdrop-square-node__square {
     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-square-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-square-node--processing {
     opacity: 0.7;
   }
 
-  .flowdrop-square-node--error {
+  .flowdrop-square-node--error .flowdrop-square-node__square {
     border-color: var(--fd-error) !important;
     background-color: var(--fd-error-muted) !important;
   }
@@ -319,14 +319,15 @@
     height: 100%;
   }
 
-  /* Squircle icon wrapper - matching WorkflowNode style */
+  /* Squircle icon wrapper - px (not rem) so the icon stays grid-locked
+     regardless of root font-size */
   .flowdrop-square-node__icon-wrapper {
     display: var(--fd-node-icon-display, flex);
     align-items: center;
     justify-content: center;
-    width: 3rem;
-    height: 3rem;
-    border-radius: 0.625rem;
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
     background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
     flex-shrink: 0;
     transition: all var(--fd-transition-normal);
@@ -342,8 +343,8 @@
   }
 
   .flowdrop-square-node__icon-wrapper :global(.flowdrop-square-node__icon) {
-    width: 1.75rem;
-    height: 1.75rem;
+    width: 28px;
+    height: 28px;
     color: var(--fd-node-icon);
   }
 
@@ -383,40 +384,9 @@
     height: 12px;
   }
 
-  .flowdrop-square-node__config-btn :global(svg) {
-    width: 14px;
-    height: 14px;
-  }
-
-  .flowdrop-square-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-square-node:hover .flowdrop-square-node__config-btn {
-    opacity: 1;
-  }
-
-  .flowdrop-square-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-square-node:hover {
+    --fd-config-btn-opacity: 1;
   }
 
   @keyframes spin {

package/dist/components/nodes/TerminalNode.svelte

@@ -12,6 +12,7 @@
   import { Position, Handle } from '@xyflow/svelte';
   import type { ConfigValues, NodeMetadata, NodeExtensions, NodePort } from '../../types/index.js';
   import Icon from '@iconify/svelte';
+  import NodeConfigButton from './NodeConfigButton.svelte';
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
   import { getNodeIcon } from '../../utils/icons.js';
   import { getCircleHandlePosition } from '../../utils/handlePositioning.js';
@@ -311,26 +312,12 @@
   function handleDoubleClick(): void {
     openConfigSidebar();
   }
-
-  /**
-   * Handle single click - only handle selection
-   */
-  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>
 
 <!-- Terminal 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-terminal-node"
   class:flowdrop-terminal-node--selected={props.selected}
@@ -340,21 +327,11 @@
   class:flowdrop-terminal-node--end={variant === 'end'}
   class:flowdrop-terminal-node--exit={variant === 'exit'}
   style="--terminal-color: {terminalColor};"
-  onclick={handleClick}
   ondblclick={handleDoubleClick}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
   aria-label="{variant} node: {displayTitle}"
 >
   <!-- Config button at top -->
-  <button
-    class="flowdrop-terminal-node__config-btn"
-    onclick={openConfigSidebar}
-    title="Configure node"
-  >
-    <Icon icon="mdi:cog" />
-  </button>
+  <NodeConfigButton onclick={openConfigSidebar} title="Configure node" placement="top-center" />
 
   <!-- Circle wrapper for proper handle positioning -->
   <div class="flowdrop-terminal-node__circle-wrapper">
@@ -431,7 +408,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--fd-space-xs);
+    /* px (not rem) on the 20px grid */
+    gap: 8px;
     cursor: pointer;
     transition: all var(--fd-transition-normal);
     z-index: 10;
@@ -455,34 +433,32 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: var(--fd-shadow-md);
+    box-shadow: var(--fd-node-shadow);
     transition: all var(--fd-transition-normal);
   }
 
   .flowdrop-terminal-node:hover .flowdrop-terminal-node__content {
-    box-shadow: var(--fd-shadow-lg);
+    box-shadow: var(--fd-node-shadow-hover);
     transform: scale(1.05);
   }
 
   .flowdrop-terminal-node--selected .flowdrop-terminal-node__content {
     box-shadow:
-      var(--fd-shadow-lg),
+      var(--fd-node-shadow-hover),
       0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
     border-color: var(--fd-primary);
   }
 
   .flowdrop-terminal-node--selected:hover .flowdrop-terminal-node__content {
     box-shadow:
-      var(--fd-shadow-lg),
+      var(--fd-node-shadow-hover),
       0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
     border-color: var(--fd-primary);
     transform: scale(1.05);
   }
 
-  .flowdrop-terminal-node:focus-visible .flowdrop-terminal-node__content {
-    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-terminal-node--processing .flowdrop-terminal-node__content {
     opacity: 0.7;
@@ -534,14 +510,15 @@
       0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
   }
 
-  /* Squircle icon wrapper - matching WorkflowNode style */
+  /* Squircle icon wrapper - px (not rem) so the icon stays grid-locked
+     regardless of root font-size */
   .flowdrop-terminal-node__icon-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.75rem;
-    height: 2.75rem;
-    border-radius: 0.625rem;
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
     background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
     flex-shrink: 0;
     transition: all var(--fd-transition-normal);
@@ -556,8 +533,8 @@
   }
 
   .flowdrop-terminal-node__icon-wrapper :global(.flowdrop-terminal-node__icon) {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 24px;
+    height: 24px;
     color: var(--fd-node-icon);
   }
 
@@ -565,9 +542,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.125rem;
+    gap: 2px;
     background-color: var(--fd-backdrop);
-    padding: var(--fd-space-3xs) var(--fd-space-xs);
+    padding: 4px 8px;
     border-radius: var(--fd-radius-sm);
     box-shadow: var(--fd-shadow-sm);
     max-width: 140px;
@@ -585,7 +562,7 @@
   }
 
   .flowdrop-terminal-node__description {
-    font-size: 0.625rem;
+    font-size: 10px;
     color: var(--fd-muted-foreground);
     text-align: center;
     overflow: hidden;
@@ -596,7 +573,7 @@
 
   .flowdrop-terminal-node__processing {
     position: absolute;
-    top: 1.5rem;
+    top: 24px;
     right: 0;
   }
 
@@ -611,7 +588,7 @@
 
   .flowdrop-terminal-node__error {
     position: absolute;
-    top: 1.5rem;
+    top: 24px;
     right: 0;
     color: var(--fd-error);
   }
@@ -621,39 +598,9 @@
     height: 14px;
   }
 
-  /* Config button positioned at top center */
-  .flowdrop-terminal-node__config-btn {
-    position: absolute;
-    top: -1.5rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: var(--fd-backdrop);
-    border: 1px solid var(--fd-border);
-    border-radius: 50%;
-    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-xs);
-    box-shadow: var(--fd-shadow-sm);
-  }
-
-  .flowdrop-terminal-node:hover .flowdrop-terminal-node__config-btn {
-    opacity: 1;
-  }
-
-  .flowdrop-terminal-node__config-btn:hover {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-strong);
-    color: var(--fd-foreground);
-    transform: translateX(-50%) scale(1.1);
+  /* Reveal the NodeConfigButton (gear) when the node is hovered. */
+  .flowdrop-terminal-node:hover {
+    --fd-config-btn-opacity: 1;
   }
 
   @keyframes spin {
@@ -678,11 +625,6 @@
     transform: translate(-50%, -50%) scale(1.2) !important;
   }
 
-  :global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle:focus) {
-    outline: 2px solid var(--fd-ring) !important;
-    outline-offset: 2px !important;
-  }
-
   /* Also keep node-level handle styles for fallback */
   :global(.svelte-flow__node-terminal .svelte-flow__handle) {
     z-index: 20 !important;