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

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

@@ -8,7 +8,7 @@
 
 <script lang="ts">
   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';
@@ -97,16 +97,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>
@@ -331,10 +325,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 {
@@ -724,11 +718,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 +742,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 +791,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/NodeSidebar.svelte

@@ -408,7 +408,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 +461,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 +486,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 */
   }
 
@@ -610,9 +611,7 @@
   }
 
   .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 {
@@ -648,11 +647,6 @@
     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);
@@ -693,7 +687,6 @@
 
   .flowdrop-join:focus-within {
     border-color: var(--fd-ring);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
   }
 
   /* Utility classes */

package/dist/components/NodeSwapPicker.svelte

@@ -313,9 +313,7 @@
   }
 
   .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 {

package/dist/components/PipelineStatus.svelte

@@ -12,6 +12,7 @@
   import { createEndpointConfig } from '../config/endpoints.js';
   import type { Workflow } from '../types/index.js';
   import type { EndpointConfig } from '../config/endpoints.js';
+  import type { AuthProvider } from '../types/auth.js';
   import { logger } from '../utils/logger.js';
   import { m } from '../messages/index.js';
 
@@ -21,6 +22,8 @@
     apiClient?: EnhancedFlowDropApiClient;
     baseUrl?: string;
     endpointConfig?: EndpointConfig;
+    /** Auth provider used when this component builds its own API client from endpointConfig/baseUrl. */
+    authProvider?: AuthProvider;
     runLabel?: string;
     /** When true, suppresses breadcrumb and layout events (used inside playground panel) */
     isEmbedded?: boolean;
@@ -43,6 +46,7 @@
     apiClient,
     baseUrl,
     endpointConfig,
+    authProvider,
     onActionsReady,
     runLabel,
     isEmbedded = false,
@@ -59,7 +63,8 @@
   const client =
     apiClient ||
     new EnhancedFlowDropApiClient(
-      endpointConfig ?? createEndpointConfig(baseUrl || '/api/flowdrop')
+      endpointConfig ?? createEndpointConfig(baseUrl || '/api/flowdrop'),
+      authProvider
     );
 
   // Pipeline status — drives breadcrumb label and the 5s poll while running

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

@@ -1,12 +1,15 @@
 import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
 import type { Workflow } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 interface Props {
     pipelineId: string;
     workflow: Workflow;
     apiClient?: EnhancedFlowDropApiClient;
     baseUrl?: string;
     endpointConfig?: EndpointConfig;
+    /** Auth provider used when this component builds its own API client from endpointConfig/baseUrl. */
+    authProvider?: AuthProvider;
     runLabel?: string;
     /** When true, suppresses breadcrumb and layout events (used inside playground panel) */
     isEmbedded?: boolean;

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

@@ -59,9 +59,11 @@
   import type { ConfigSchema, AuthProvider } from '../types/index.js';
   import type { UISchemaElement } from '../types/uischema.js';
   import { provideInstance } from '../stores/getInstance.svelte.js';
-  import { FormField } from './form/index.js';
+  // Registry-based light field factory — heavy editors (CodeMirror) are resolved
+  // at runtime via fd.fields, so importing SchemaForm never statically pulls them.
+  import FormField from './form/FormFieldLight.svelte';
   import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
-  import type { FieldSchema } from './form/index.js';
+  import type { FieldSchema } from './form/types.js';
   import { m } from '../messages/index.js';
   import { mergeWithDefaults, cascadeClearAutocompleteDependents } from '../utils/formMerge.js';
 
@@ -471,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);
@@ -496,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/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;

package/dist/components/SettingsPanel.svelte

@@ -198,7 +198,8 @@
           description: 'Visual style and layout of the editor',
           oneOf: [
             { const: 'default', title: 'Default' },
-            { const: 'minimal', title: 'Minimal' }
+            { const: 'minimal', title: 'Minimal' },
+            { const: 'drafter', title: 'Drafter' }
           ],
           default: 'default'
         }
@@ -538,11 +539,6 @@
     color: var(--fd-primary-foreground);
   }
 
-  .flowdrop-settings-panel__tab:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   :global(.flowdrop-settings-panel__tab-icon) {
     font-size: var(--fd-text-base);
   }

package/dist/components/ThemeToggle.svelte

@@ -135,11 +135,6 @@
     border-color: var(--fd-border-strong);
   }
 
-  .flowdrop-theme-toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   .flowdrop-theme-toggle:active {
     transform: scale(0.98);
   }

package/dist/components/UniversalNode.svelte

@@ -17,6 +17,9 @@
 
   const fd = getInstance();
 
+  // Element ref used only to reach xyflow's node wrapper (our ancestor).
+  let universalNodeEl: HTMLDivElement;
+
   let {
     data,
     selected = false
@@ -61,6 +64,34 @@
     shouldShowNodeStatus(executionInfo) && resolvedComponentName !== 'note'
   );
 
+  // Keyboard activation lives on xyflow's node wrapper — the single focusable,
+  // arrow-movable element SvelteFlow manages. Because the wrapper is our
+  // ancestor, its keydown events never bubble down into our markup, so we bind
+  // directly to it. Enter/Space opens the node's config, mirroring the
+  // double-click (and single-click for square/atom) mouse paths. Node selection
+  // and arrow-key movement remain SvelteFlow's job.
+  $effect(() => {
+    const wrapper = universalNodeEl?.closest<HTMLElement>('.svelte-flow__node');
+    if (!wrapper) return;
+
+    function onWrapperKeydown(event: KeyboardEvent): void {
+      // Only when the node itself is focused — not an inner field (e.g. an
+      // editable note) — so we don't hijack typing.
+      if (event.target !== wrapper) return;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        data.onConfigOpen?.({
+          id: data.nodeId ?? 'unknown',
+          type: resolvedComponentName,
+          data
+        });
+      }
+    }
+
+    wrapper.addEventListener('keydown', onWrapperKeydown);
+    return () => wrapper.removeEventListener('keydown', onWrapperKeydown);
+  });
+
   /**
    * Get the node component for the given type from the registry.
    *
@@ -129,7 +160,7 @@
   }
 </script>
 
-<div class="universal-node">
+<div class="universal-node" bind:this={universalNodeEl}>
   <!-- Render the node component dynamically (Svelte 5 dynamic component syntax) -->
   {#if nodeComponent}
     <!-- Svelte 5 dynamic component limitation; reactivity maintained via $derived -->