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

package/CHANGELOG.md

@@ -7,6 +7,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.0-beta.3] - 2026-06-12
+
+Third 2.0 beta, published under the npm `beta` dist-tag (`npm install @flowdrop/flowdrop@beta`). `latest` remains 1.15.0 until 2.0.0 GA. This release finishes the navbar/theme defaults pass started in beta.2 (navbar opt-in everywhere, light as the default theme, the FlowDrop wordmark in the header), adds the **Drafter** blueprint theme with per-theme canvas grids, and lands a keyboard-navigation and focus-ring overhaul alongside the 20px node-grid alignment.
+
+### Breaking Changes
+
+- **`mountPlaygroundApp` / `<PlaygroundApp>` no longer render the navbar by default.** `showNavbar` now defaults to `false`, matching `mountFlowDropApp` / `<App>` — so every mount path is navbar-off by default and embedding FlowDrop into a page that already has its own header never double-stacks a header. Pass `showNavbar: true` to opt back into the FlowDrop navbar (logo, branding, settings modal) when FlowDrop owns the whole page.
+
+### Added
+
+- **Drafter blueprint theme.** A third built-in editor theme (`'drafter'`), shipping light + dark variants: a blueprint aesthetic with a soft mint canvas, a subtle emerald line grid, and translucent green-tinted flat nodes. Data-type port colors and category icon colors are left untouched so they keep popping against the muted draft surface. Selectable from the Settings → UI Theme picker; the `FlowDropSkinName` / theme / skin name unions gain `'drafter'`.
+- **Per-theme canvas grid.** A new `FlowDropGridVariant` type (`'dots' | 'lines' | 'cross'`) and `themeConfig.canvas.grid` config let any theme drive the editor's background grid (previously hardcoded to dots). The grid pattern color is the `--fd-grid-pattern-color` token, whose default matches xyflow's dot color, so the default/minimal themes render unchanged. `resolveTheme` now merges `config.canvas` alongside `config.sidebar`.
+- **`features.builtinEditors` opt-out.** The built-in markdown/code/template editors are batteries-included in the full editor by default. Pass `features: { builtinEditors: false }` to `mountFlowDropApp` (or `builtinEditors: false` to `mountWorkflowEditor` / `<WorkflowEditor>`) to skip registering them — keeping the textarea fallback or leaving room to register your own field components via `instance.fields.register(...)`. The corrected fallback hint now points at the registry-scoped API (`registerMarkdownEditorField(instance.fields)`).
+- **FlowDrop wordmark logo in the navbar.** The header now renders the FlowDrop wordmark in place of the plain text title.
+
+### Changed
+
+- **The default theme preference is now `'light'` (was `'dark'`).** `DEFAULT_THEME_SETTINGS.preference` was hardcoded to `'dark'`, so any embed with no persisted theme choice rendered dark. Embeds now default to light; hosts that want dark by default should set the preference explicitly.
+- **Editor / node / chrome surface tokens are scoped per surface,** refining how themes (including Drafter) tint the canvas, nodes, and surrounding chrome independently.
+
+### Fixed
+
+- **Nodes are a single tab stop again.** The node config (gear) button sat in the tab order, so leaving a node required a second `Tab` press. The gear button is removed from the tab order (it stays mouse/Enter-activatable), and node focus defers to xyflow's own node focus — Tab now moves one node per press. `nodesFocusable` redundancy was removed to eliminate the duplicate stop.
+- **The full editor renders markdown/code/config editors out of the box again.** The beta.2 light-entry split made the heavy form editors opt-in everywhere, which inadvertently left `<WorkflowEditor>` / `<App>` / the playground showing the "Editor component not registered" textarea fallback for node config fields with `format: 'markdown' | 'code' | 'template'`. The full editor now registers the built-in editors on its own instance's field registry on mount. Registration uses a dynamic `import()`, so the chunks stay code-split (loaded lazily) and the light `/editor` static bundle is unaffected — the bundle guard still passes. The standalone `@flowdrop/flowdrop/form` primitive is unchanged and remains opt-in.
+- **`<App navbarActions>` accepts the full `NavbarAction` shape.** The component prop was typed with an inline subset that silently dropped `external` and `group`, even though the underlying `<Navbar>` (and the `mountFlowDropApp` option) already supported them. It now uses the canonical `NavbarAction` type, so external-link and grouped actions type-check through the component as they always did through the mount API.
+- **The node header no longer shows a top-accent line.**
+
+### Changed (internal — no API change)
+
+- **One centralized focus ring across the whole component library.** New `--fd-ring-width` / `--fd-ring-offset` tokens and a single `.flowdrop-root :focus-visible` rule in `base.css` replace ~200 lines of component-local focus CSS (mismatched outlines, hardcoded `rgba(59,130,246)` box-shadow glows, `color-mix` rings) removed across 41 files. CodeMirror editors in `overflow:hidden` containers use a `:focus-within` ring (outline paints outside the box and would clip); range-input thumbs ring on the parent.
+- **Extracted shared `NodeConfigButton` and `CanvasIconButton` components,** replacing per-node config-button and per-canvas floating-button duplication (including an inline-SVG cog) with one keyboard-correct implementation each.
+- **Node geometry converted from `rem` to `px` and snapped to a 20px grid** across all eight node types — header, port rows (fixed 60px), icon sizes, paddings, gaps, and font sizes — so nodes stay aligned to the canvas coordinate grid regardless of the host's root font-size.
+- **The code / markdown / template editors now rest on the shared input surface** instead of carrying their own background.
+
 ## [2.0.0-beta.2] - 2026-06-09
 
 Second 2.0 beta, published under the npm `beta` dist-tag (`npm install @flowdrop/flowdrop@beta`). This release tightens the 2.0 package boundaries, finishes `AuthProvider` propagation across the editor and playground runtime surfaces, and adds a regression guard for light-entry bundle size.

package/MIGRATION-2.0.md

@@ -295,6 +295,19 @@ import { getInstance } from '@flowdrop/flowdrop/editor';
 registerCodeEditorField(getInstance().fields);
 ```
 
+**You only need this for the standalone `@flowdrop/flowdrop/form` primitive.**
+The full editor is batteries-included: `<WorkflowEditor>` / `<App>` and the
+playground register the built-in markdown, code, and template editors on their
+own instance's `fields` registry on mount, so node config fields with
+`format: 'markdown' | 'code' | 'template'` render real editors out of the box —
+no host call required. Registration is a dynamic `import()`, so the CodeMirror /
+`marked` chunks stay code-split (the light `/editor` static bundle is
+unaffected) and load lazily on first use. To strip them, pass
+`features: { builtinEditors: false }` to `mountFlowDropApp` (or
+`builtinEditors: false` to `mountWorkflowEditor` / `<WorkflowEditor>`) and either
+accept the textarea fallback or register your own field components via
+`instance.fields.register(...)`.
+
 Category color/icon helpers likewise take a `CategoriesStore` as an explicit
 parameter — the last global-instance fallback in `utils` is gone.
 

package/dist/components/App.svelte

@@ -9,7 +9,9 @@
   import MainLayout from './layouts/MainLayout.svelte';
   import WorkflowEditor from './WorkflowEditor.svelte';
   import NodeSidebar from './NodeSidebar.svelte';
-  import Icon from '@iconify/svelte';
+  import CanvasIconButton from './CanvasIconButton.svelte';
+  import MenuIcon from './icons/MenuIcon.svelte';
+  import MenuOpenIcon from './icons/MenuOpenIcon.svelte';
   import ConfigForm from './ConfigForm.svelte';
   import ConfigPanel from './ConfigPanel.svelte';
   import CommandConsole from './console/CommandConsole.svelte';
@@ -18,6 +20,7 @@
   import NodeSwapPicker from './NodeSwapPicker.svelte';
   import SwapMappingEditor from './SwapMappingEditor.svelte';
   import Navbar from './Navbar.svelte';
+  import type { NavbarAction } from '../types/navbar.js';
   import type { NodeMetadata, Workflow, WorkflowNode, ConfigSchema } from '../types/index.js';
   import type { InteractiveSwapState, SwapEventContext } from '../utils/nodeSwap.js';
   import {
@@ -98,13 +101,7 @@
     /** Custom navbar title */
     navbarTitle?: string;
     /** Custom navbar actions */
-    navbarActions?: Array<{
-      label: string;
-      href: string;
-      icon?: string;
-      variant?: 'primary' | 'secondary' | 'outline';
-      onclick?: (event: Event) => void;
-    }>;
+    navbarActions?: NavbarAction[];
     /** Show settings gear icon in navbar */
     showSettings?: boolean;
     /** Show the "Connected" status indicator in the navbar (default: true) */
@@ -1278,18 +1275,22 @@
     >
       <!-- Floating sidebar toggle — always visible on the canvas top-left -->
       {#if !disableSidebar}
-        <button
+        <CanvasIconButton
           class="flowdrop-sidebar-fab"
-          onclick={toggleSidebar}
-          aria-label={isSidebarCollapsed
-            ? mergedMessages.layout.expandSidebar
-            : mergedMessages.layout.collapseSidebar}
-          title={isSidebarCollapsed
+          label={isSidebarCollapsed
             ? mergedMessages.layout.expandSidebar
             : mergedMessages.layout.collapseSidebar}
+          active={!isSidebarCollapsed}
+          onclick={toggleSidebar}
         >
-          <Icon icon={isSidebarCollapsed ? 'mdi:menu' : 'mdi:menu-open'} />
-        </button>
+          {#snippet icon()}
+            {#if isSidebarCollapsed}
+              <MenuIcon />
+            {:else}
+              <MenuOpenIcon />
+            {/if}
+          {/snippet}
+        </CanvasIconButton>
       {/if}
 
       <WorkflowEditor
@@ -1300,6 +1301,8 @@
         {mode}
         {pipelineId}
         {refreshTrigger}
+        builtinEditors={features.builtinEditors}
+        gridVariant={themeConfig?.canvas?.grid ?? 'dots'}
         consoleOpen={getUiSettings().consoleOpen}
         onToggleConsole={toggleConsole}
       />
@@ -1412,38 +1415,11 @@
     font-weight: 500;
   }
 
-  /* Floating sidebar toggle button */
-  .flowdrop-sidebar-fab {
-    position: absolute;
+  /* Floating sidebar toggle button — placement only; visuals live in CanvasIconButton */
+  :global(.flowdrop-sidebar-fab) {
     top: 12px;
     left: 12px;
     z-index: 50;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    background-color: var(--fd-background);
-    color: var(--fd-muted-foreground);
-    cursor: pointer;
-    box-shadow: var(--fd-shadow-md);
-    transition:
-      color var(--fd-transition-fast),
-      background-color var(--fd-transition-fast),
-      box-shadow var(--fd-transition-fast);
-  }
-
-  .flowdrop-sidebar-fab:hover {
-    color: var(--fd-foreground);
-    background-color: var(--fd-subtle);
-    box-shadow: var(--fd-shadow-lg);
-  }
-
-  .flowdrop-sidebar-fab:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
   }
 
   /* Main editor area */

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

@@ -1,3 +1,4 @@
+import type { NavbarAction } from '../types/navbar.js';
 import type { NodeMetadata, Workflow, ConfigSchema } from '../types/index.js';
 import type { SwapStrategy } from '../utils/nodeSwap.js';
 import type { EndpointConfig } from '../config/endpoints.js';
@@ -53,13 +54,7 @@ interface Props {
     /** Custom navbar title */
     navbarTitle?: string;
     /** Custom navbar actions */
-    navbarActions?: Array<{
-        label: string;
-        href: string;
-        icon?: string;
-        variant?: 'primary' | 'secondary' | 'outline';
-        onclick?: (event: Event) => void;
-    }>;
+    navbarActions?: NavbarAction[];
     /** Show settings gear icon in navbar */
     showSettings?: boolean;
     /** Show the "Connected" status indicator in the navbar (default: true) */

package/dist/components/CanvasIconButton.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * The icon to render — an inline-SVG snippet (offline-safe). Pass a local
+     * icon component from `$lib/components/icons/`, not a network-fetched one.
+     */
+    icon: Snippet;
+    /** Accessible label — drives both aria-label and the hover title. */
+    label: string;
+    /** Renders the active/toggled-on visual state (e.g. the panel it controls is open). */
+    active?: boolean;
+    onclick: () => void;
+    /** Caller-supplied class for positioning (top/left/bottom/z-index). */
+    class?: string;
+  }
+
+  let { icon, label, active = false, onclick, class: klass = '' }: Props = $props();
+</script>
+
+<button
+  class="flowdrop-canvas-btn {klass}"
+  class:flowdrop-canvas-btn--active={active}
+  {onclick}
+  aria-label={label}
+  title={label}
+  type="button"
+>
+  {@render icon()}
+</button>
+
+<style>
+  .flowdrop-canvas-btn {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background-color: var(--fd-background);
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    box-shadow: var(--fd-shadow-md);
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast),
+      box-shadow var(--fd-transition-fast),
+      border-color var(--fd-transition-fast);
+  }
+
+  /* Size whatever inline SVG the caller renders. */
+  .flowdrop-canvas-btn :global(svg) {
+    width: 18px;
+    height: 18px;
+  }
+
+  .flowdrop-canvas-btn:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+    box-shadow: var(--fd-shadow-lg);
+  }
+
+  .flowdrop-canvas-btn--active {
+    color: var(--fd-primary);
+    background-color: var(--fd-primary-muted);
+    border-color: var(--fd-primary);
+  }
+
+  .flowdrop-canvas-btn--active:hover {
+    color: var(--fd-primary);
+    background-color: var(--fd-primary-muted);
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * The icon to render — an inline-SVG snippet (offline-safe). Pass a local
+     * icon component from `$lib/components/icons/`, not a network-fetched one.
+     */
+    icon: Snippet;
+    /** Accessible label — drives both aria-label and the hover title. */
+    label: string;
+    /** Renders the active/toggled-on visual state (e.g. the panel it controls is open). */
+    active?: boolean;
+    onclick: () => void;
+    /** Caller-supplied class for positioning (top/left/bottom/z-index). */
+    class?: string;
+}
+declare const CanvasIconButton: import("svelte").Component<Props, {}, "">;
+type CanvasIconButton = ReturnType<typeof CanvasIconButton>;
+export default CanvasIconButton;

package/dist/components/ConfigForm.svelte

@@ -1073,11 +1073,6 @@
     color: var(--fd-foreground);
   }
 
-  .config-form__button--secondary:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .config-form__button--primary {
     background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
     color: var(--fd-primary-foreground);
@@ -1098,13 +1093,6 @@
     transform: translateY(0);
   }
 
-  .config-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);
-  }
-
   /* ============================================
 	   UI EXTENSIONS SECTION
 	   ============================================ */
@@ -1559,11 +1547,4 @@
   .config-form__button--external:active {
     transform: translateY(0);
   }
-
-  .config-form__button--external:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 3px rgba(99, 102, 241, 0.4),
-      0 4px 12px rgba(99, 102, 241, 0.35);
-  }
 </style>

package/dist/components/ConfigPanel.svelte

@@ -110,7 +110,8 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background-color: var(--fd-background);
+    background-color: var(--fd-panel-bg);
+    backdrop-filter: var(--fd-panel-backdrop-filter);
   }
 
   .config-panel__header {
@@ -119,7 +120,7 @@
     align-items: center;
     padding: 0.875rem 1rem;
     border-bottom: 1px solid var(--fd-border);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-card);
     flex-shrink: 0;
   }
 
@@ -180,7 +181,7 @@
   .config-panel__details {
     padding: 0.75rem 1rem;
     border-bottom: 1px solid var(--fd-border-muted);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-card);
     flex-shrink: 0;
   }
 

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 */