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

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 {

package/dist/components/nodes/NodeConfigButton.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import CogIcon from '../icons/CogIcon.svelte';
+
+  interface Props {
+    /** Click handler — typically opens the node's config sidebar. */
+    onclick: (event: MouseEvent) => void;
+    /** Accessible label / tooltip. */
+    title?: string;
+    /**
+     * Where the button sits relative to the node.
+     * - `corner` (default): top-right corner, used by most nodes.
+     * - `top-center`: circular badge above the node, used by TerminalNode.
+     */
+    placement?: 'corner' | 'top-center';
+  }
+
+  let { onclick, title = 'Configure node', placement = 'corner' }: Props = $props();
+</script>
+
+<!--
+  tabindex="-1" keeps the gear out of the Tab order: the parent node is already
+  keyboard-focusable and opens config on Enter/Space, so tabbing moves straight
+  from node to node instead of stopping on the gear. The button stays clickable
+  and is revealed on node hover via the --fd-config-btn-opacity custom property
+  the parent sets.
+-->
+<button
+  class="flowdrop-node-config-btn"
+  class:flowdrop-node-config-btn--top-center={placement === 'top-center'}
+  {onclick}
+  {title}
+  tabindex="-1"
+>
+  <CogIcon />
+</button>
+
+<style>
+  .flowdrop-node-config-btn {
+    position: absolute;
+    top: var(--fd-space-xs);
+    right: var(--fd-space-xs);
+    width: 24px;
+    height: 24px;
+    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: var(--fd-config-btn-opacity, 0);
+    transition: all var(--fd-transition-normal);
+    backdrop-filter: var(--fd-backdrop-blur);
+    z-index: 15;
+    font-size: var(--fd-text-sm);
+  }
+
+  .flowdrop-node-config-btn :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  .flowdrop-node-config-btn:hover {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-strong);
+    color: var(--fd-foreground);
+    transform: scale(1.05);
+  }
+
+  /* TerminalNode: circular badge centered above the node. */
+  .flowdrop-node-config-btn--top-center {
+    top: -24px;
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 50%;
+    font-size: var(--fd-text-xs);
+    box-shadow: var(--fd-shadow-sm);
+  }
+
+  /* Keep the centering translate while scaling on hover. */
+  .flowdrop-node-config-btn--top-center:hover {
+    transform: translateX(-50%) scale(1.1);
+  }
+</style>

package/dist/components/nodes/NodeConfigButton.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    /** Click handler — typically opens the node's config sidebar. */
+    onclick: (event: MouseEvent) => void;
+    /** Accessible label / tooltip. */
+    title?: string;
+    /**
+     * Where the button sits relative to the node.
+     * - `corner` (default): top-right corner, used by most nodes.
+     * - `top-center`: circular badge above the node, used by TerminalNode.
+     */
+    placement?: 'corner' | 'top-center';
+}
+declare const NodeConfigButton: import("svelte").Component<Props, {}, "">;
+type NodeConfigButton = ReturnType<typeof NodeConfigButton>;
+export default NodeConfigButton;