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

package/dist/components/nodes/NotesNode.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ConfigValues, NodeMetadata } from '../../types/index.js';
   import Icon from '@iconify/svelte';
+  import NodeConfigButton from './NodeConfigButton.svelte';
   import MarkdownDisplay from '../MarkdownDisplay.svelte';
   import { m } from '../../messages/index.js';
 
@@ -88,28 +89,17 @@
   function handleDoubleClick(): void {
     openConfigSidebar();
   }
-
-  /**
-   * 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>
 
+<!-- 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-notes-node {currentType.typeClass}"
   class:flowdrop-notes-node--selected={props.selected}
   class:flowdrop-notes-node--processing={props.isProcessing}
   class:flowdrop-notes-node--has-error={props.isError}
   ondblclick={handleDoubleClick}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
 >
   <!-- Display Mode -->
   <div class="flowdrop-notes-node__content">
@@ -146,35 +136,34 @@
   </div>
 
   <!-- Config button -->
-  <button
-    class="flowdrop-notes-node__config-btn"
-    onclick={openConfigSidebar}
-    title={notes.configure}
-  >
-    <Icon icon="mdi:cog" />
-  </button>
+  <NodeConfigButton onclick={openConfigSidebar} title={notes.configure} />
 </div>
 
 <style>
   .flowdrop-notes-node {
+    box-sizing: border-box;
     min-width: var(--fd-notes-node-min-width);
     max-width: var(--fd-notes-node-max-width);
     width: var(--fd-notes-node-width);
-    border-radius: var(--fd-radius-xl);
-    border: 1.5px solid var(--fd-node-border);
-    background: var(--fd-card);
+    /* Grid-aligned floor; grows in 20px steps via the chrome + body below. */
+    min-height: var(--fd-notes-node-min-height);
+    border-radius: var(--fd-node-radius);
+    border: var(--fd-node-border-width) solid var(--fd-note-border);
+    background: var(--fd-node-bg);
     backdrop-filter: var(--fd-notes-node-backdrop-filter);
-    box-shadow: var(--fd-shadow-md);
+    box-shadow: var(--fd-node-shadow);
     color: var(--fd-foreground);
     transition: all var(--fd-transition-fast);
     overflow: hidden;
     z-index: 5;
   }
 
-  /* Note type: Info (blue) - subtle background tint, neutral border */
+  /* Note type: Info (blue) - subtle background tint, neutral border.
+     Uses the info accent (not primary) so an info note never reads as a
+     primary/success action — primary stays reserved for interactive intent. */
   .flowdrop-notes-node--info {
     background-color: var(--fd-info-muted);
-    --_notes-icon: var(--fd-primary);
+    --_notes-icon: var(--fd-info);
   }
 
   /* Note type: Warning (yellow/amber) - subtle background tint */
@@ -202,29 +191,27 @@
   }
 
   .flowdrop-notes-node:hover {
-    box-shadow: var(--fd-shadow-lg);
-    border-color: var(--fd-node-border-hover);
+    box-shadow: var(--fd-node-shadow-hover);
+    border-color: var(--fd-note-border-hover);
   }
 
   /* Selected state - matches other node components */
   .flowdrop-notes-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-notes-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-notes-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-notes-node--processing {
     opacity: 0.7;
@@ -237,7 +224,11 @@
 
   /* Display Mode Styles */
   .flowdrop-notes-node__content {
-    padding: var(--fd-space-xl);
+    box-sizing: border-box;
+    /* px on the 20px grid; bottom padding absorbs both node borders so the
+       chrome (padding + 40px header + 20px gap) sums to 100px and the outer
+       node height stays a 20px multiple as the body grows. */
+    padding: 20px 20px calc(20px - var(--fd-node-border-width) * 2);
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -247,14 +238,16 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 0.75rem;
+    /* one 40px grid block for the icon row + a 20px gap before the body */
+    min-height: 40px;
+    margin-bottom: 20px;
     flex-shrink: 0;
   }
 
   .flowdrop-notes-node__header-left {
     display: flex;
     align-items: center;
-    gap: var(--fd-space-md);
+    gap: 12px;
   }
 
   /* Squircle icon wrapper - Apple-style rounded square background */
@@ -262,9 +255,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(--_notes-icon) var(--fd-node-icon-bg-opacity), transparent);
     flex-shrink: 0;
     transition: all var(--fd-transition-normal);
@@ -280,8 +274,8 @@
   }
 
   .flowdrop-notes-node__icon-wrapper :global(.flowdrop-notes-node__icon) {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 20px;
+    height: 20px;
     color: var(--fd-node-icon);
   }
 
@@ -292,10 +286,12 @@
   }
 
   .flowdrop-notes-node__body {
-    margin-bottom: var(--fd-space-xs);
     flex: 1;
     overflow-y: auto;
     color: var(--fd-muted-foreground);
+    /* 20px line rows so plain-text notes grow on the grid (rich markdown with
+       headings/lists may not snap exactly) */
+    line-height: 20px;
   }
 
   /* Markdown content inherits foreground color for better readability */
@@ -303,17 +299,36 @@
     color: var(--fd-foreground);
   }
 
+  /* Put markdown blocks on a 20px baseline so the note grows in clean 20px steps:
+     each block bottom-margins one grid row (browser em-margins would land off-grid),
+     and every line is a 20px row. */
+  .flowdrop-notes-node__body
+    :global(:is(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table)) {
+    margin: 0 0 20px;
+    line-height: 20px;
+  }
+
+  .flowdrop-notes-node__body
+    :global(:is(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table):last-child) {
+    margin-bottom: 0;
+  }
+
+  .flowdrop-notes-node__body :global(li) {
+    margin: 0;
+    line-height: 20px;
+  }
+
   .flowdrop-notes-node__processing {
     display: flex;
     align-items: center;
-    gap: var(--fd-space-xs);
+    gap: 8px;
     font-size: var(--fd-text-xs);
     color: var(--fd-muted-foreground);
   }
 
   .flowdrop-notes-node__spinner {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 12px;
+    height: 12px;
     border: 1px solid color-mix(in srgb, var(--fd-foreground) 30%, transparent);
     border-top-color: var(--fd-foreground);
     border-radius: 50%;
@@ -323,14 +338,14 @@
   .flowdrop-notes-node__error-indicator {
     display: flex;
     align-items: center;
-    gap: var(--fd-space-xs);
+    gap: 8px;
     font-size: var(--fd-text-xs);
     color: var(--fd-error);
   }
 
   :global(.flowdrop-notes-node__error-icon) {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 12px;
+    height: 12px;
   }
 
   @keyframes spin {
@@ -339,46 +354,20 @@
     }
   }
 
-  .flowdrop-notes-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-notes-node:hover .flowdrop-notes-node__config-btn {
-    opacity: 1;
-  }
-
-  .flowdrop-notes-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-notes-node:hover {
+    --fd-config-btn-opacity: 1;
   }
 
   /* Responsive design */
   @media (max-width: 640px) {
     .flowdrop-notes-node {
       min-width: 200px;
-      max-width: 350px;
+      max-width: 360px;
     }
 
     .flowdrop-notes-node__content {
-      padding: var(--fd-space-md);
+      padding: 12px;
     }
   }
 </style>

package/dist/components/nodes/SimpleNode.svelte

@@ -23,7 +23,7 @@
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.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<{
@@ -106,19 +106,6 @@
     openConfigSidebar();
   }
 
-  // Handle single click - only handle selection, no config opening
-  function handleClick(): void {
-    // Node selection is handled by Svelte Flow
-  }
-
-  // Handle keyboard events
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleDoubleClick();
-    }
-  }
-
   const dynamicInputs = $derived(
     ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
       dynamicPortToNodePort(port, 'input')
@@ -175,7 +162,7 @@
   const nodeMinHeight = $derived(
     (() => {
       const maxPorts = Math.max(visibleInputPorts.length, visibleOutputPorts.length, 1);
-      return maxPorts <= 1 ? 80 : 20 + maxPorts * 40;
+      return maxPorts <= 1 ? 80 : maxPorts * 40;
     })()
   );
 </script>
@@ -197,17 +184,16 @@
 {/each}
 
 <!-- Simple 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-simple-node flowdrop-simple-node--normal"
   class:flowdrop-simple-node--selected={props.selected}
   class:flowdrop-simple-node--processing={props.isProcessing}
   class:flowdrop-simple-node--error={props.isError}
   style="min-height: {nodeMinHeight}px"
-  onclick={handleClick}
   ondblclick={handleDoubleClick}
-  onkeydown={handleKeydown}
-  role="button"
-  tabindex="0"
 >
   <div class="flowdrop-simple-node__header">
     <div class="flowdrop-simple-node__header-content">
@@ -250,13 +236,7 @@
   {/if}
 
   <!-- Config button -->
-  <button
-    class="flowdrop-simple-node__config-btn"
-    onclick={openConfigSidebar}
-    title="Configure node"
-  >
-    <CogIcon />
-  </button>
+  <NodeConfigButton onclick={openConfigSidebar} title="Configure node" />
 </div>
 
 <!-- Output Handles: 1 port centered at 40px; N ports at 20px start, 40px gap -->
@@ -278,14 +258,15 @@
 <style>
   .flowdrop-simple-node {
     position: relative;
-    background-color: var(--fd-card);
-    border: 1.5px solid var(--fd-node-border);
-    border-radius: var(--fd-radius-xl);
+    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);
     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: hidden;
     z-index: 10;
     color: var(--fd-foreground);
@@ -298,28 +279,26 @@
   }
 
   .flowdrop-simple-node:hover {
-    box-shadow: var(--fd-shadow-lg);
+    box-shadow: var(--fd-node-shadow-hover);
     border-color: var(--fd-node-border-hover);
   }
 
   .flowdrop-simple-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-simple-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-simple-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-simple-node--processing {
     opacity: 0.7;
@@ -331,8 +310,9 @@
   }
 
   .flowdrop-simple-node__header {
-    padding: var(--fd-space-xl);
-    background: var(--fd-header);
+    /* px (not rem) on the 20px grid: 10px vertical, 20px horizontal. */
+    padding: 10px 20px;
+    background: var(--fd-node-header-bg);
     flex: 1;
   }
 
@@ -347,9 +327,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);
@@ -382,8 +363,8 @@
   }
 
   .flowdrop-simple-node__icon-wrapper :global(.flowdrop-simple-node__icon) {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 20px;
+    height: 20px;
     color: var(--fd-node-icon);
   }
 
@@ -414,40 +395,9 @@
     height: 12px;
   }
 
-  .flowdrop-simple-node__config-btn :global(svg) {
-    width: 14px;
-    height: 14px;
-  }
-
-  .flowdrop-simple-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-simple-node:hover .flowdrop-simple-node__config-btn {
-    opacity: 1;
-  }
-
-  .flowdrop-simple-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-simple-node:hover {
+    --fd-config-btn-opacity: 1;
   }
 
   @keyframes spin {