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

package/dist/components/LogoWordmark.svelte

@@ -0,0 +1,113 @@
+<!--
+  FlowDrop horizontal lockup: rocket mark + "FlowDrop" wordmark.
+  Theme-aware via the same --fd-logo-* variables as Logo.svelte, plus
+  --fd-logo-text for the wordmark glyphs.
+-->
+<div class="flowdrop-logo-wordmark">
+  <svg viewBox="0 0 2500 499.99999" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(472.2413,571.30469)">
+      <g transform="matrix(1.2053353,0,0,1.2053353,-1246.7763,-599.46548)">
+        <path
+          style="fill:var(--logo-line-fill);stroke-width:10;stroke-dasharray:none"
+          d="M 850,120 V 310 Z"
+        />
+        <path
+          style="fill:var(--logo-line-fill);stroke:var(--logo-stroke);stroke-width:16.59289328;stroke-dasharray:none;stroke-opacity:1"
+          d="M 850,110 V 310"
+        />
+        <path
+          style="fill:none;stroke:var(--logo-stroke);stroke-width:14.98546028;stroke-dasharray:none;stroke-opacity:1"
+          d="m 850,158.973 v 36.70355 8.15635 c 0,0 1.19184,39.5038 -36.01255,65.25076 -29.46481,20.39086 -52.3819,16.31269 -55.65576,65.25076 v 44.8599"
+        />
+        <path
+          style="fill:none;stroke:var(--logo-stroke);stroke-width:15.05060005;stroke-dasharray:none;stroke-opacity:1"
+          d="m 850,158.973 v 37.02335 8.22741 c 0,0 -1.19184,39.84799 36.01255,65.81929 29.46481,20.56853 52.3819,16.45482 55.65576,65.81929 v 45.25076"
+        />
+        <path
+          d="m 849.41763,64.456369 25.36824,31.087262 c 6.23336,6.364119 10.06921,15.063569 10.06921,24.656839 0,19.50109 -15.85132,35.30988 -35.42373,35.30988 -19.57241,0 -35.43242,-15.80879 -35.43242,-35.30988 0,-9.49405 3.75813,-18.11351 9.87536,-24.458879 z"
+          style="fill:var(--logo-drop);stroke:var(--logo-stroke);stroke-width:16.59289932;stroke-dasharray:none;paint-order:fill"
+        />
+        <circle
+          style="fill:var(--logo-circle);stroke:var(--logo-stroke);stroke-width:16.59289932;stroke-dasharray:none"
+          cx="849.427"
+          cy="326.5929"
+          r="30"
+        />
+        <ellipse
+          style="fill:var(--logo-left);stroke:var(--logo-stroke);stroke-width:16.59289932;stroke-dasharray:none"
+          cx="759.99994"
+          cy="369.44669"
+          rx="29.999952"
+          ry="30.000004"
+        />
+        <ellipse
+          style="fill:var(--logo-right);stroke:var(--logo-stroke);stroke-width:16.59289932;stroke-dasharray:none"
+          cx="939.99963"
+          cy="369.44669"
+          rx="29.999952"
+          ry="30.000004"
+        />
+      </g>
+    </g>
+    <g aria-label="FlowDrop" style="font-size:400.327px;fill:var(--logo-text);stroke-width:10.4252">
+      <path
+        d="M 710.85926,99.779646 V 116.59025 H 584.38877 v 92.65381 h 91.48097 v 16.81061 H 584.38877 V 358.97574 H 540.79848 V 99.779646 Z"
+        style="fill:var(--logo-text)"
+      />
+      <path
+        d="M 788.07077,358.97574 H 748.19445 V 68.113156 L 776.53791,56.77577 h 11.53286 z"
+        style="fill:var(--logo-text)"
+      />
+      <path
+        d="m 950.50815,363.27613 q -23.06571,0 -42.41746,-8.01436 -19.35174,-8.01436 -33.42574,-21.69741 -14.07399,-13.87853 -22.08835,-32.25291 -7.81889,-18.56986 -7.81889,-39.68085 0,-22.08835 7.81889,-41.4401 8.01436,-19.54722 22.08835,-34.01216 14.074,-14.46494 33.42574,-22.67477 19.35175,-8.4053 42.41746,-8.4053 22.87025,0 42.02652,7.62341 19.35173,7.62342 33.42573,20.91553 14.074,13.2921 21.8929,31.27554 8.0144,17.78797 8.0144,38.31255 0,22.67477 -8.0144,42.8084 -7.8189,19.93816 -21.8929,34.98952 -14.074,14.85588 -33.42573,23.65213 -19.15627,8.60078 -42.02652,8.60078 z m 7.62342,-14.66042 q 11.72833,0 21.50194,-6.05963 9.77361,-6.05964 16.8106,-16.22419 7.03699,-10.36003 10.94649,-23.84761 3.9094,-13.48758 3.9094,-28.53893 0,-21.69741 -3.714,-40.65821 -3.7139,-18.9608 -12.11925,-33.0348 -8.4053,-14.074 -21.89288,-22.08835 -13.48758,-8.20984 -32.83932,-8.20984 -9.96908,0 -19.35175,5.86417 -9.38266,5.66869 -16.61513,15.63777 -7.037,9.96908 -11.33739,23.45666 -4.30039,13.29211 -4.30039,28.34347 0,21.89288 4.49586,41.04915 4.69134,19.15627 13.48758,33.42574 8.99172,14.26947 21.69741,22.67477 12.90117,8.20983 29.32083,8.20983 z"
+        style="fill:var(--logo-text)"
+      />
+      <path
+        d="m 1122.7191,158.81224 63.333,146.21318 62.7465,-146.21318 63.1375,146.21318 55.9051,-146.21318 h 19.1563 l -81.7074,202.31369 h -13.4876 l -55.905,-130.77088 -56.1005,130.77088 h -12.3148 l -87.5715,-202.31369 z"
+        style="fill:var(--logo-text)"
+      />
+      <path
+        d="m 1424.9191,99.779646 h 86.3987 q 39.8763,0 68.6107,7.427944 28.7345,7.42794 47.8907,23.8476 21.8929,18.76533 32.8394,43.00388 11.1419,24.23855 11.1419,52.97296 0,27.3661 -9.9691,51.40918 -9.7736,24.04307 -28.9299,42.02651 -18.9608,17.78797 -47.1088,28.14799 -27.9525,10.36003 -64.1149,10.36003 h -96.7587 z m 43.5903,240.235294 h 46.3269 q 21.8929,0 41.2446,-7.23247 19.3518,-7.23247 33.6213,-21.50194 14.4649,-14.26947 22.6747,-34.98952 8.4053,-20.91552 8.4053,-48.28162 0,-24.04308 -7.8189,-43.98124 -7.8188,-20.13363 -21.8928,-34.59857 -14.074,-14.46494 -33.6213,-22.4793 -19.3517,-8.01436 -42.4174,-8.01436 h -46.5224 z"
+        style="fill:var(--logo-text)"
+      />
+      <path
+        d="m 1758.7855,155.09827 h 6.0597 l 5.2777,40.85368 q 4.6914,-8.99172 11.7283,-16.41966 7.037,-7.42794 15.4424,-12.90116 8.6007,-5.47322 17.9834,-8.40531 9.5781,-3.12755 19.3517,-3.12755 8.7963,0 17.2016,2.34567 8.6008,2.34566 16.0287,7.42794 l -12.5102,33.42574 q -3.9095,-4.30039 -8.2098,-6.84153 -4.3004,-2.73661 -8.7963,-4.10491 -4.4959,-1.56378 -9.1872,-1.95472 -4.6913,-0.39095 -9.3827,-0.39095 -7.4279,0 -14.6604,2.15019 -7.037,2.1502 -13.4875,6.45059 -6.4506,4.10491 -11.9238,10.75097 -5.4733,6.45058 -9.5782,15.24682 v 139.37166 h -39.6808 V 166.04471 Z"
+        style="fill:var(--logo-text)"
+      />
+      <path
+        d="m 1995.6979,363.27613 q -23.0658,0 -42.4175,-8.01436 -19.3518,-8.01436 -33.4257,-21.69741 -14.074,-13.87853 -22.0884,-32.25291 -7.8189,-18.56986 -7.8189,-39.68085 0,-22.08835 7.8189,-41.4401 8.0144,-19.54722 22.0884,-34.01216 14.0739,-14.46494 33.4257,-22.67477 19.3517,-8.4053 42.4175,-8.4053 22.8702,0 42.0265,7.62341 19.3517,7.62342 33.4257,20.91553 14.074,13.2921 21.8929,31.27554 8.0143,17.78797 8.0143,38.31255 0,22.67477 -8.0143,42.8084 -7.8189,19.93816 -21.8929,34.98952 -14.074,14.85588 -33.4257,23.65213 -19.1563,8.60078 -42.0265,8.60078 z m 7.6234,-14.66042 q 11.7283,0 21.5019,-6.05963 9.7736,-6.05964 16.8106,-16.22419 7.037,-10.36003 10.9465,-23.84761 3.9094,-13.48758 3.9094,-28.53893 0,-21.69741 -3.714,-40.65821 -3.7139,-18.9608 -12.1192,-33.0348 -8.4054,-14.074 -21.8929,-22.08835 -13.4876,-8.20984 -32.8394,-8.20984 -9.969,0 -19.3517,5.86417 -9.3827,5.66869 -16.6151,15.63777 -7.037,9.96908 -11.3374,23.45666 -4.3004,13.29211 -4.3004,28.34347 0,21.89288 4.4959,41.04915 4.6913,19.15627 13.4875,33.42574 8.9918,14.26947 21.6974,22.67477 12.9012,8.20983 29.3209,8.20983 z"
+        style="fill:var(--logo-text)"
+      />
+      <path
+        d="m 2186.0877,155.09827 h 11.3374 v 44.9586 q 6.0596,-7.62342 13.2921,-15.63778 7.4279,-8.01435 16.2242,-14.46494 8.9917,-6.64605 19.7427,-10.75097 10.7509,-4.10491 23.4566,-4.10491 17.788,0 32.2529,7.42794 14.465,7.42794 24.6295,20.13363 10.3601,12.7057 15.8333,29.90725 5.6687,17.00607 5.6687,36.35782 0,24.82496 -6.8416,45.93596 -6.8415,20.91552 -19.5472,36.16235 -12.7057,15.24683 -30.8846,23.8476 -18.1789,8.40531 -40.6582,8.40531 -8.2098,0 -15.4423,-0.97736 -7.037,-0.78189 -13.4876,-2.54114 -6.2551,-1.75925 -12.3147,-4.49586 -5.8642,-2.73661 -11.9238,-6.64606 v 94.60853 h -39.8763 V 166.24018 Z m 11.3374,149.92715 q 0,8.99172 3.9094,17.00608 3.9095,7.81889 10.9465,13.87852 7.037,5.86417 16.8106,9.38267 9.7736,3.32302 21.5019,3.32302 11.1419,0 20.9155,-5.66869 9.9691,-5.66869 17.2016,-16.02872 7.4279,-10.55549 11.5328,-25.02043 4.3004,-14.46494 4.3004,-32.05744 0,-22.08835 -3.9094,-38.50802 -3.9095,-16.61513 -10.9465,-27.56157 -6.8415,-10.94644 -16.4196,-16.41966 -9.3827,-5.47322 -20.7201,-5.47322 -8.6007,0 -16.6151,2.73661 -7.8189,2.54113 -14.8559,7.03699 -7.037,4.49586 -13.0966,10.36003 -5.8642,5.86416 -10.5555,12.31475 z"
+        style="fill:var(--logo-text)"
+      />
+    </g>
+  </svg>
+</div>
+
+<style>
+  .flowdrop-logo-wordmark {
+    --logo-stroke: var(--fd-logo-stroke, #000000);
+    --logo-text: var(--fd-logo-text, #000000);
+    --logo-line-fill: var(--fd-logo-line-fill, #000000);
+    --logo-drop: var(--fd-logo-drop, #009cde);
+    --logo-circle: var(--fd-logo-circle, #f46351);
+    --logo-left: var(--fd-logo-left, #ccbaf4);
+    --logo-right: var(--fd-logo-right, #ffc423);
+  }
+
+  :global([data-theme='dark']) .flowdrop-logo-wordmark {
+    /* Stroke, wordmark, and the center line go white in dark; the brand-color
+       dots (drop/circle/left/right) keep their fills, same as light mode. */
+    --logo-stroke: var(--fd-logo-stroke, #ffffff);
+    --logo-text: var(--fd-logo-text, #ffffff);
+    --logo-line-fill: var(--fd-logo-line-fill, #ffffff);
+  }
+
+  .flowdrop-logo-wordmark :global(svg) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/dist/components/LogoWordmark.svelte.d.ts

@@ -0,0 +1,26 @@
+export default LogoWordmark;
+type LogoWordmark = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const LogoWordmark: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Navbar.svelte

@@ -7,8 +7,9 @@
 -->
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import Icon from '@iconify/svelte';
-  import Logo from './Logo.svelte';
+  import LogoWordmark from './LogoWordmark.svelte';
   import SettingsModal from './SettingsModal.svelte';
   import type { SettingsCategory } from '../types/settings.js';
   import type { NavbarAction } from '../types/navbar.js';
@@ -37,6 +38,8 @@
     showSettingsSyncButton?: boolean;
     /** Show the reset buttons in the settings modal */
     showSettingsResetButton?: boolean;
+    /** Custom content rendered in the trailing (right) region, before the settings gear */
+    end?: Snippet;
   }
 
   let {
@@ -47,7 +50,8 @@
     showSettings = true,
     settingsCategories,
     showSettingsSyncButton,
-    showSettingsResetButton
+    showSettingsResetButton,
+    end
   }: Props = $props();
 
   // Dropdown state
@@ -97,16 +101,10 @@
 
 <div class="flowdrop-navbar">
   <div class="flowdrop-navbar__start">
-    <!-- Logo and Title -->
+    <!-- Logo (rocket + FlowDrop wordmark) -->
     <div class="flowdrop-logo--container">
-      <div class="flowdrop-flex flowdrop-gap--3">
-        <div class="flowdrop-logo--header">
-          <Logo />
-        </div>
-        <div>
-          <h1 class="flowdrop-text--logo flowdrop-font--bold">{nav.appName}</h1>
-          <p class="flowdrop-text--tagline flowdrop-text--gray">{nav.tagline}</p>
-        </div>
+      <div class="flowdrop-logo--header">
+        <LogoWordmark />
       </div>
     </div>
   </div>
@@ -277,6 +275,7 @@
   </div>
 
   <div class="flowdrop-navbar__end">
+    {@render end?.()}
     {#if showSettings}
       <button
         class="flowdrop-navbar__settings-btn"
@@ -331,10 +330,10 @@
   }
 
   .flowdrop-logo--header {
-    width: 40px;
-    height: 40px;
-    font-size: 1.25rem;
-    padding: 2px;
+    /* Wordmark lockup is 5:1; keep it within the start column. */
+    height: 32px;
+    width: 160px;
+    padding: 2px 0;
   }
 
   .flowdrop-navbar__center {
@@ -525,7 +524,7 @@
     transition: all var(--fd-transition-normal);
     font-weight: 500;
     font-size: var(--fd-text-sm);
-    height: 2.5rem;
+    height: var(--fd-size-btn-min);
     box-sizing: border-box;
     background-color: var(--fd-background);
     color: var(--fd-foreground);
@@ -541,7 +540,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    height: 2.5rem;
+    height: var(--fd-size-btn-min);
   }
 
   .flowdrop-navbar__dropdown-trigger {
@@ -549,7 +548,7 @@
     align-items: center;
     justify-content: center;
     width: 2rem;
-    height: 2.5rem;
+    height: var(--fd-size-btn-min);
     border: 1px solid var(--fd-border-strong);
     border-left: none;
     border-radius: 0 var(--fd-radius-md) var(--fd-radius-md) 0;
@@ -724,11 +723,6 @@
     border-color: var(--fd-border-strong);
   }
 
-  .flowdrop-navbar__settings-btn:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   .flowdrop-navbar__settings-btn:active {
     transform: scale(0.95);
   }
@@ -753,38 +747,6 @@
     background-color: var(--fd-success);
   }
 
-  /* Utility classes */
-  .flowdrop-flex {
-    display: flex;
-  }
-
-  .flowdrop-gap--3 {
-    gap: 0.75rem;
-  }
-
-  .flowdrop-text--logo {
-    font-size: 1.125rem;
-    line-height: 0;
-  }
-
-  .flowdrop-text--tagline {
-    font-size: var(--fd-text-xs);
-    line-height: 0.5rem;
-  }
-
-  .flowdrop-text--xs {
-    font-size: var(--fd-text-xs);
-    line-height: 1rem;
-  }
-
-  .flowdrop-text--gray {
-    color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-font--bold {
-    font-weight: 700;
-  }
-
   /* Responsive design */
   @media (max-width: 768px) {
     .flowdrop-navbar {
@@ -834,14 +796,6 @@
       border-radius: var(--fd-radius-md) 0 0 var(--fd-radius-md);
     }
 
-    .flowdrop-text--logo {
-      display: none;
-    }
-
-    .flowdrop-text--tagline {
-      display: none;
-    }
-
     .flowdrop-navbar__title-text {
       font-size: 0.875rem;
       max-width: 300px;

package/dist/components/Navbar.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { SettingsCategory } from '../types/settings.js';
 import type { NavbarAction } from '../types/navbar.js';
 interface BreadcrumbItem {
@@ -22,6 +23,8 @@ interface Props {
     showSettingsSyncButton?: boolean;
     /** Show the reset buttons in the settings modal */
     showSettingsResetButton?: boolean;
+    /** Custom content rendered in the trailing (right) region, before the settings gear */
+    end?: Snippet;
 }
 declare const Navbar: import("svelte").Component<Props, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;

package/dist/components/NodeSidebar.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
   import LoadingSpinner from './LoadingSpinner.svelte';
+  import Input from './Input.svelte';
   import Icon from '@iconify/svelte';
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
@@ -161,19 +162,17 @@
 >
   <!-- Search Section — visibility controlled by --fd-sidebar-search-display -->
   <div class="flowdrop-sidebar__search">
-    <div class="flowdrop-join flowdrop-w--full">
-      <div class="flowdrop-join__item flowdrop-flex--1">
-        <input
-          type="text"
-          placeholder={m().layout.searchComponents}
-          class="flowdrop-input flowdrop-join__item flowdrop-w--full"
-          bind:value={searchInput}
-        />
-      </div>
-      <button class="flowdrop-btn flowdrop-join__item" aria-label={m().layout.searchComponents}>
-        <Icon icon="mdi:magnify" class="flowdrop-icon" />
-      </button>
-    </div>
+    <Input
+      type="text"
+      placeholder={m().layout.searchComponents}
+      aria-label={m().layout.searchComponents}
+      value={searchInput}
+      oninput={(e) => (searchInput = e.currentTarget.value)}
+    >
+      {#snippet leading()}
+        <Icon icon="mdi:magnify" />
+      {/snippet}
+    </Input>
   </div>
 
   <!-- Node Types List -->
@@ -408,7 +407,8 @@
   /* Components Sidebar - Always Visible */
   .flowdrop-sidebar {
     height: calc(100vh - var(--fd-navbar-height)); /* Account for navbar height */
-    background-color: var(--fd-background);
+    background-color: var(--fd-panel-bg);
+    backdrop-filter: var(--fd-panel-backdrop-filter);
     border-right: 1px solid var(--fd-border);
     display: flex;
     flex-direction: column;
@@ -460,7 +460,7 @@
 
   .flowdrop-sidebar__search {
     padding: 0.75rem 1rem;
-    background-color: var(--fd-background);
+    background-color: transparent;
     border-bottom: 1px solid var(--fd-border);
     display: var(--fd-sidebar-search-display, block);
   }
@@ -485,7 +485,7 @@
 
   .flowdrop-sidebar__content::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
     min-height: 20px; /* Ensure thumb has minimum height for visibility */
   }
 
@@ -593,114 +593,9 @@
     margin-left: 0;
   }
 
-  /* Form Elements - Matching App Design System */
-  .flowdrop-input {
-    padding: 0.625rem 0.75rem;
-    border: 1px solid var(--fd-border-strong);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-    width: 100%;
-    height: 2.5rem;
-    box-sizing: border-box;
-  }
-
-  .flowdrop-input:focus {
-    outline: none;
-    border-color: var(--fd-ring);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
-  }
-
-  .flowdrop-input::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-btn {
-    padding: 0.625rem 0.75rem;
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--fd-transition-normal);
-    border: 1px solid var(--fd-border-strong);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    background-color: var(--fd-muted);
-    color: var(--fd-foreground);
-    height: 2.5rem;
-    min-width: 2.5rem;
-    box-sizing: border-box;
-  }
-
-  .flowdrop-btn:hover {
-    background-color: var(--fd-subtle);
-    border-color: var(--fd-border-strong);
-  }
-
-  .flowdrop-btn:active {
-    background-color: var(--fd-border);
-    border-color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-btn:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
-  }
-
-  .flowdrop-btn:disabled {
-    background-color: var(--fd-muted-foreground);
-    border-color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-
-  /* Join component styles - Seamless integration */
-  .flowdrop-join {
-    display: flex;
-    width: 100%;
-    border-radius: var(--fd-radius-md);
-    overflow: hidden;
-    border: 1px solid var(--fd-border-strong);
-    background-color: var(--fd-background);
-  }
-
-  .flowdrop-join__item {
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-  }
-
-  .flowdrop-join__item:first-child {
-    border-right: 1px solid var(--fd-border-strong);
-    flex: 1;
-  }
-
-  .flowdrop-join__item:last-child {
-    border-left: none;
-    background-color: var(--fd-muted);
-    color: var(--fd-foreground);
-  }
-
-  .flowdrop-join__item:last-child:hover {
-    background-color: var(--fd-subtle);
-  }
-
-  .flowdrop-join:focus-within {
-    border-color: var(--fd-ring);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
-  }
+  /* Search field renders through the shared Input primitive (base.css). */
 
   /* Utility classes */
-  .flowdrop-w--full {
-    width: 100%;
-  }
-
   .flowdrop-flex--1 {
     flex: 1;
   }

package/dist/components/NodeSwapPicker.svelte

@@ -8,6 +8,7 @@
 <script lang="ts">
   import type { NodeMetadata, NodeCategory, WorkflowFormat, WorkflowNode } from '../types/index.js';
   import Icon from '@iconify/svelte';
+  import Input from './Input.svelte';
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
   import { m } from '../messages/index.js';
@@ -115,12 +116,17 @@
 
   <!-- Search (hidden in minimal via --fd-sidebar-search-display) -->
   <div class="swap-picker__search">
-    <input
+    <Input
       type="text"
       placeholder="Search node types..."
-      class="swap-picker__input"
-      bind:value={searchInput}
-    />
+      aria-label="Search node types"
+      value={searchInput}
+      oninput={(e) => (searchInput = e.currentTarget.value)}
+    >
+      {#snippet leading()}
+        <Icon icon="mdi:magnify" />
+      {/snippet}
+    </Input>
   </div>
 
   <!-- Node list -->
@@ -298,30 +304,6 @@
     flex-shrink: 0;
   }
 
-  .swap-picker__input {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--fd-border-strong);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    box-sizing: border-box;
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-  }
-
-  .swap-picker__input:focus {
-    outline: none;
-    border-color: var(--fd-ring);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
-  }
-
-  .swap-picker__input::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
   .swap-picker__list {
     flex: 1;
     overflow-y: auto;

package/dist/components/PortMappingRow.svelte

@@ -136,9 +136,7 @@
   }
 
   .port-mapping-row__select:focus {
-    outline: none;
     border-color: var(--fd-ring);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
   }
 
   .port-mapping-row__select--dropped {

package/dist/components/SchemaForm.svelte

@@ -473,11 +473,6 @@
     color: var(--fd-foreground);
   }
 
-  .schema-form__button--secondary:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .schema-form__button--primary {
     background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
     color: var(--fd-primary-foreground);
@@ -498,13 +493,6 @@
     transform: translateY(0);
   }
 
-  .schema-form__button--primary:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.4),
-      0 4px 12px rgba(59, 130, 246, 0.35);
-  }
-
   .schema-form__button-spinner {
     width: 1rem;
     height: 1rem;

package/dist/components/Select.svelte

@@ -0,0 +1,53 @@
+<!--
+  Select — typed wrapper over the shared `.flowdrop-input` system (base.css).
+
+  Renders the field shell (`.flowdrop-input .flowdrop-input--select`) plus a
+  built-in chevron overlay (`.flowdrop-select-wrap`), so selects match the exact
+  look of Input/Textarea. The native arrow is removed; the chevron tints to
+  --fd-primary on focus. Pass <option>/<optgroup> as children. Native attributes
+  (value, disabled, id, aria-*, onchange…) forward to the underlying <select>.
+
+  Internal for now; see Button.svelte / Input.svelte for the pattern.
+-->
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLSelectAttributes } from 'svelte/elements';
+
+  // Omit native numeric `size` so our design-token size (matching Button) wins.
+  interface Props extends Omit<HTMLSelectAttributes, 'size'> {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the <select> */
+    class?: string;
+    /** The <option>/<optgroup> elements */
+    children: Snippet;
+  }
+
+  let { size = 'md', invalid = false, class: className = '', children, ...rest }: Props = $props();
+
+  const selectClass = $derived(
+    [
+      'flowdrop-input',
+      'flowdrop-input--select',
+      size === 'md' ? '' : `flowdrop-input--${size}`,
+      invalid ? 'flowdrop-input--invalid' : '',
+      className
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class="flowdrop-select-wrap">
+  <select class={selectClass} {...rest}>
+    {@render children()}
+  </select>
+  <span class="flowdrop-select-wrap__icon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+    </svg>
+  </span>
+</div>

package/dist/components/Select.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLSelectAttributes, 'size'> {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the <select> */
+    class?: string;
+    /** The <option>/<optgroup> elements */
+    children: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/SettingsModal.svelte

@@ -259,11 +259,6 @@
     color: var(--fd-foreground);
   }
 
-  .flowdrop-settings-modal__close:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   /* Content */
   .flowdrop-settings-modal__content {
     flex: 1;