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

package/CHANGELOG.md

@@ -5,6 +5,73 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [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.
+
+### Breaking Changes
+
+- **Heavy dependencies no longer leak into the light entries.** Three exports moved so that `@flowdrop/flowdrop/core` and the light `@flowdrop/flowdrop/form` never statically pull CodeMirror, `marked`, DOMPurify, or `@xyflow/svelte` (enforced by a new CI bundle guard, see below):
+  - `sanitizeHtml` moved from `@flowdrop/flowdrop/core` to `@flowdrop/flowdrop/display` (it is DOMPurify-backed; `/core` is the zero-heavy-dep entry).
+  - `FormFieldFull` moved from `@flowdrop/flowdrop/form` to `@flowdrop/flowdrop/form/full` — it statically bundles every editor (CodeMirror), so keeping it in the light `/form` entry pulled CodeMirror into every `SchemaForm` import. The `FormField` exported from `/form` remains the registry-based light factory.
+  - Service singleton _instances_ (`playgroundService`, `interruptService` from `/playground`; `nodeExecutionService` from `/editor`; `agentSpecExecutionService` from `/core`) are no longer exported — they were constructed eagerly at import time, pulling the service and its dependencies into the entry's static graph. The classes (`PlaygroundService`, `InterruptService`, `NodeExecutionService`, `AgentSpecExecutionService`) remain; call `getInstance()` for the shared instance. See [MIGRATION-2.0.md section 4](./MIGRATION-2.0.md#keeping-heavy-dependencies-out-of-the-light-entries).
+
+### Changed (internal — no API change)
+
+- `SchemaForm`, `ConfigForm`, and the UISchema renderer now use the registry-based light `FormFieldLight` internally, so importing `SchemaForm` no longer statically pulls CodeMirror (heavy editors stay opt-in via `/form/code` and `/form/markdown`).
+- Built-in node **type metadata** (aliases, `resolveBuiltinAlias`, `isBuiltinType`) split into a component-free `registry/builtinNodeTypes` module so `/core`'s node-type utilities no longer drag in the node components (and transitively `marked`/DOMPurify).
+- `utils/edgeStyling` and the `ConnectionLineType` reference in `types/index.ts` use type-only imports of `@xyflow/svelte`, removing the runtime `@xyflow/svelte` dependency from the headless command DSL reachable from `/core`.
+
+### Added
+
+- **Bundle-size guard (`pnpm run check:bundle`)** and a CI workflow that walk each published entry's static import graph and fail if a heavy dependency (CodeMirror, `@xyflow/svelte`, `marked`, DOMPurify) becomes statically reachable from a light entry (`/core`, `/form`, `/editor`). Dynamic `import()` — how `/form/code` lazy-loads CodeMirror — is intentionally ignored.
+- **500-node editor render benchmark.** The e2e performance suite now includes a large trigger-chain workflow fixture so regressions in large-canvas rendering show up before release.
+
+### Fixed
+
+- **`AuthProvider` now reaches all documented runtime surfaces.** Playground, chat, interrupt, settings, editor, and pipeline requests now consistently route through the configured provider, including standalone playground mounts and the editor/pipeline views that previously dropped auth headers on secondary requests.
+- **Theme skin tokens clear when switching back to the default skin.** Returning from a custom/base skin to the default theme no longer leaves stale CSS custom properties behind.
+
+### Changed
+
+- **`AuthProvider` request handling is centralized.** Services now share the `fetchWithAuth` path, and the public provider interface is slimmer while preserving bearer, API-key, custom-header, and callback authentication behavior.
+
 ## [2.0.0-beta.1] - 2026-06-07
 
 Pre-release of 2.0.0, published under the npm `beta` dist-tag (`npm install @flowdrop/flowdrop@beta`). `latest` remains 1.15.0 until 2.0.0 GA. See [MIGRATION-2.0.md](./MIGRATION-2.0.md) for the upgrade guide.

package/MIGRATION-2.0.md

@@ -80,6 +80,52 @@ authProvider)` for you. Services that previously read the singleton (playground,
 interrupt, chat, node-execution, dynamic-schema, variable) now take the endpoint
 config as their first argument — pass `fd.api.config`.
 
+These services also accept the instance's `AuthProvider` as an **optional
+trailing argument** so every request they make is authenticated consistently
+with `fd.api.client` (the typed workflow/node API). The built-in components and
+mount helpers pass `fd.api.authProvider` for you — no action is needed for the
+normal mounted flow. Only direct callers of the service singletons need to
+forward it:
+
+```js
+import { playgroundService } from '@flowdrop/flowdrop/playground';
+
+// 2.0 — authenticate playground requests by forwarding the provider
+await playgroundService.listSessions(fd.api.config, workflowId, undefined, fd.api.authProvider);
+await playgroundService.sendMessage(fd.api.config, sessionId, text, undefined, fd.api.authProvider);
+```
+
+The settings-sync entry points gained the same optional provider:
+`setSettingsEndpointConfig(config, authProvider?)` and
+`createSettingsService(config, authProvider?)` — pass an `AuthProvider` if your
+backend's preferences endpoint requires auth.
+
+The standalone playground mounts — `mountPlayground`, `mountPlaygroundStudio`,
+and `mountPlaygroundApp` — accept an `authProvider` option that they wire into
+`fd.api` for you (the editor's built-in playground already inherits the
+provider from `mountFlowDropApp`). Pass it so playground requests (sessions,
+messages, polling, interrupts) carry your auth/CSRF headers:
+
+```js
+mountPlayground(el, {
+  workflowId,
+  endpointConfig: createEndpointConfig('/api/flowdrop'),
+  authProvider: new CallbackAuthProvider({ getToken: () => session.getCsrfToken() })
+});
+```
+
+The same plumbing was extended to the editor and pipeline surfaces, which
+previously built unauthenticated API clients from `endpointConfig` alone:
+
+- The exported `<WorkflowEditor>` component accepts an `authProvider` prop
+  (threaded for you by `mountFlowDropApp` / `mountWorkflowEditor` / `<App>`).
+  Pass it when using `<WorkflowEditor>` directly.
+- `<PipelineStatus>` accepts an `authProvider` prop (used when it builds its own
+  client from `endpointConfig` / `baseUrl`; ignored when you pass `apiClient`).
+- `PipelineViewProps` — the contract for custom pipeline views registered via
+  `pipelineViews` — gained an optional `authProvider`, so custom views can build
+  authenticated clients the same way the built-in graph/kanban/table views do.
+
 ### `EndpointConfig.auth` is removed — use an `AuthProvider`
 
 The `auth` block on `EndpointConfig` (and its header-injection branch) is gone.
@@ -108,6 +154,65 @@ mountFlowDropApp(el, {
 | `{ type: 'api_key', apiKey }` | `new StaticAuthProvider({ type: 'api_key', apiKey })` |
 | `{ type: 'custom', headers }` | `new StaticAuthProvider({ type: 'custom', headers })` |
 
+`StaticAuthProvider`'s `api_key` type now accepts an optional `apiKeyHeader` to
+override the header name (defaults to `X-API-Key`):
+
+```js
+new StaticAuthProvider({ type: 'api_key', apiKey: KEY, apiKeyHeader: 'X-Tenant-Key' });
+```
+
+### `AuthProvider.isAuthenticated()` is removed
+
+The `isAuthenticated()` method has been dropped from the `AuthProvider`
+interface and all built-in providers. It was never consulted by the library —
+request authentication is driven entirely by `getAuthHeaders()` and the optional
+`onUnauthorized()` / `onForbidden()` hooks. If you implemented a **custom**
+`AuthProvider`, you can delete the method; no replacement is needed.
+
+```ts
+// 1.x — required
+const provider: AuthProvider = {
+  getAuthHeaders: async () => ({ Authorization: `Bearer ${token}` }),
+  isAuthenticated: () => Boolean(token) // ← remove this
+};
+
+// 2.0
+const provider: AuthProvider = {
+  getAuthHeaders: async () => ({ Authorization: `Bearer ${token}` })
+};
+```
+
+### Auth refresh (`401`) now applies to every request
+
+Previously only the typed workflow/node API (`fd.api.client`) refreshed and
+retried on `401`. The per-instance services (playground, chat, interrupt,
+settings, port config, categories) and form autocomplete attached auth headers
+but did **not** invoke `onUnauthorized()`. They now all route through one
+authenticated-fetch path, so a configured `onUnauthorized()` fires — and the
+request retries once with a refreshed token — uniformly across the library.
+
+This is not a source change for consumers, but if your `onUnauthorized()` had
+side effects (analytics, redirects) it may now be called from request paths
+where it previously was not. Make it idempotent.
+
+### Swap the auth provider at runtime — `fd.api.setAuthProvider()`
+
+The `AuthProvider` is still supplied at mount time, but you no longer have to
+remount to change it (e.g. on login/logout). `ApiContext` gained
+`setAuthProvider()`, which updates the live client and is picked up by services
+on their next request:
+
+```js
+import { getInstance } from '@flowdrop/flowdrop/editor';
+const fd = getInstance();
+
+// after the user logs in / refreshes their session
+fd.api.setAuthProvider(new StaticAuthProvider({ type: 'bearer', token: newToken }));
+
+// on logout
+fd.api.setAuthProvider(new NoAuthProvider());
+```
+
 ### Instance-scoped port compatibility
 
 `initializePortCompatibility()`, `getPortCompatibilityChecker()`, and
@@ -190,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.
 
@@ -206,16 +324,16 @@ barrel no longer re-exports `marked`.
 
 - **Playground exports** (`Playground`, `PlaygroundModal`, `ChatPanel`,
   `SessionManager`, `InputCollector`, `ExecutionLogs`, `MessageBubble`,
-  `PlaygroundService`, `playgroundService`, `PlaygroundStore`) are removed from
+  `PlaygroundService`, `PlaygroundStore`) are removed from
   `@flowdrop/flowdrop/editor`. Import them from `@flowdrop/flowdrop/playground`
   instead.
 
   ```js
   // 1.x
-  import { Playground, playgroundService } from '@flowdrop/flowdrop/editor';
+  import { Playground, PlaygroundStore } from '@flowdrop/flowdrop/editor';
 
   // 2.0
-  import { Playground, playgroundService } from '@flowdrop/flowdrop/playground';
+  import { Playground, PlaygroundStore } from '@flowdrop/flowdrop/playground';
   ```
 
 - **`marked`** is no longer re-exported from `@flowdrop/flowdrop/display`. If you
@@ -284,6 +402,58 @@ This also tightens tree-shaking: importing `App` and a couple of types from the
 main entry no longer pulls the form, display, playground, and settings barrels
 into your bundle.
 
+### Keeping heavy dependencies out of the light entries
+
+A few more exports moved so that the lightweight entries (`/core`, the light
+`/form`) never statically pull a heavy dependency (CodeMirror, `marked`,
+DOMPurify, `@xyflow/svelte`). These are enforced by a bundle guard in CI, so
+they cannot silently regress.
+
+- **`sanitizeHtml` moved from `@flowdrop/flowdrop/core` to
+  `@flowdrop/flowdrop/display`.** It is DOMPurify-backed, and `/core` is the
+  "zero heavy dependencies" entry, so it now lives alongside `MarkdownDisplay`.
+
+  ```js
+  // before
+  import { sanitizeHtml } from '@flowdrop/flowdrop/core';
+  // 2.0
+  import { sanitizeHtml } from '@flowdrop/flowdrop/display';
+  ```
+
+- **`FormFieldFull` moved from `@flowdrop/flowdrop/form` to
+  `@flowdrop/flowdrop/form/full`.** `FormFieldFull` statically bundles every
+  editor (including CodeMirror); keeping it in the light `/form` entry pulled
+  CodeMirror into every `SchemaForm` import. The default `FormField` exported
+  from `/form` is the registry-based light field factory — register heavy
+  editors via `/form/code` / `/form/markdown` (unchanged). Use `/form/full`
+  only if you specifically want every editor statically bundled.
+
+  ```js
+  // before
+  import { FormFieldFull } from '@flowdrop/flowdrop/form';
+  // 2.0
+  import { FormFieldFull } from '@flowdrop/flowdrop/form/full';
+  ```
+
+- **Service singleton _instances_ are no longer exported.**
+  `playgroundService` and `interruptService` (`@flowdrop/flowdrop/playground`),
+  `nodeExecutionService` (`@flowdrop/flowdrop/editor`), and
+  `agentSpecExecutionService` (`@flowdrop/flowdrop/core`) are removed. They were
+  module-level instances constructed at import time, which forced the service
+  (and its dependencies) to be built the moment the entry was imported. The
+  **classes** remain exported (`PlaygroundService`, `InterruptService`,
+  `NodeExecutionService`, `AgentSpecExecutionService`). Most apps never touched
+  these directly (use `fd.playground` / `fd.interrupts`); if you did, call
+  `getInstance()` to obtain the shared instance:
+
+  ```js
+  // before
+  import { playgroundService } from '@flowdrop/flowdrop/playground';
+  // 2.0
+  import { PlaygroundService } from '@flowdrop/flowdrop/playground';
+  const playgroundService = PlaygroundService.getInstance();
+  ```
+
 ## 5. Workflow `metadata` is required and `version` → `schemaVersion`
 
 The workflow document's `metadata` object is now **required** on the `Workflow`

package/dist/api/enhanced-client.js

@@ -5,7 +5,7 @@
  *
  * @module api/enhanced-client
  */
-import { buildEndpointUrl, getEndpointMethod, getEndpointHeaders } from '../config/endpoints.js';
+import { buildEndpointUrl, getEndpointMethod, getRequestHeaders } from '../config/endpoints.js';
 import { NoAuthProvider } from '../types/auth.js';
 import { getApiSettings } from '../stores/settingsStore.svelte.js';
 import { logger } from '../utils/logger.js';
@@ -56,15 +56,12 @@ export class EnhancedFlowDropApiClient {
     async request(endpointKey, endpointPath, params, options = {}, operation = 'API request') {
         const url = buildEndpointUrl(this.config, endpointPath, params);
         const method = options.method ?? getEndpointMethod(this.config, endpointKey);
-        const configHeaders = getEndpointHeaders(this.config, endpointKey);
         // Get user settings for timeout and retry
         const userApiSettings = getApiSettings();
-        // Get auth headers from provider
-        const authHeaders = await this.authProvider.getAuthHeaders();
-        // Merge headers: config headers < auth headers < request-specific headers
+        // Merge headers via the shared path: static endpoint headers < auth headers
+        // < request-specific headers.
         const headers = {
-            ...configHeaders,
-            ...authHeaders,
+            ...(await getRequestHeaders(this.config, endpointKey, this.authProvider)),
             ...options.headers
         };
         // Create AbortController for timeout
@@ -93,11 +90,9 @@ export class EnhancedFlowDropApiClient {
                     if (this.authProvider.onUnauthorized) {
                         const refreshed = await this.authProvider.onUnauthorized();
                         if (refreshed && attempt < maxAttempts) {
-                            // Get new auth headers and retry
-                            const newAuthHeaders = await this.authProvider.getAuthHeaders();
+                            // Rebuild headers via the shared path to pick up the fresh token.
                             fetchConfig.headers = {
-                                ...configHeaders,
-                                ...newAuthHeaders,
+                                ...(await getRequestHeaders(this.config, endpointKey, this.authProvider)),
                                 ...options.headers
                             };
                             continue; // Retry with new headers

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,27 +1275,34 @@
     >
       <!-- 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
         bind:this={workflowEditorRef}
         endpointConfig={endpointConfig ?? undefined}
+        {authProvider}
         {openConfigSidebar}
         {mode}
         {pipelineId}
         {refreshTrigger}
+        builtinEditors={features.builtinEditors}
+        gridVariant={themeConfig?.canvas?.grid ?? 'dots'}
         consoleOpen={getUiSettings().consoleOpen}
         onToggleConsole={toggleConsole}
       />
@@ -1411,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

@@ -32,9 +32,13 @@
   } from '../types/index.js';
   import { dynamicPortToNodePort } from '../types/index.js';
   import type { UISchemaElement } from '../types/uischema.js';
-  import { FormField, FormFieldWrapper, FormToggle } from './form/index.js';
+  // Import the light, registry-based field factory and light fields directly
+  // (not via the form barrel, which aggregates the heavy CodeMirror editors).
+  import FormField from './form/FormFieldLight.svelte';
+  import FormFieldWrapper from './form/FormFieldWrapper.svelte';
+  import FormToggle from './form/FormToggle.svelte';
   import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
-  import type { FieldSchema } from './form/index.js';
+  import type { FieldSchema } from './form/types.js';
   import {
     getEffectiveConfigEditOptions,
     fetchDynamicSchema,
@@ -1069,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);
@@ -1094,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
 	   ============================================ */
@@ -1555,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;
   }