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

package/CHANGELOG.md

@@ -5,6 +5,39 @@ 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.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
@@ -206,16 +311,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 +389,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

@@ -1295,6 +1295,7 @@
       <WorkflowEditor
         bind:this={workflowEditorRef}
         endpointConfig={endpointConfig ?? undefined}
+        {authProvider}
         {openConfigSidebar}
         {mode}
         {pipelineId}

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,

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/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';
 

package/dist/components/WorkflowEditor.svelte

@@ -28,6 +28,7 @@
   import EdgeRefresher from './EdgeRefresher.svelte';
   import { tick, untrack } from 'svelte';
   import type { EndpointConfig } from '../config/endpoints.js';
+  import type { AuthProvider } from '../types/auth.js';
   import ConnectionLine from './ConnectionLine.svelte';
   import FlowDropEdge from './FlowDropEdge.svelte';
   import { m } from '../messages/index.js';
@@ -60,6 +61,8 @@
 
   interface Props {
     endpointConfig?: EndpointConfig;
+    /** Auth provider applied to this instance's API requests. */
+    authProvider?: AuthProvider;
     openConfigSidebar?: (node: WorkflowNodeType) => void;
     /**
      * Editor interaction mode. `'edit'` allows node drag/connect/select and
@@ -596,7 +599,7 @@
   // Configure endpoints when props change
   $effect(() => {
     if (props.endpointConfig) {
-      ConfigurationHelper.configureEndpoints(fd.api, props.endpointConfig);
+      ConfigurationHelper.configureEndpoints(fd.api, props.endpointConfig, props.authProvider);
     }
   });
 

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

@@ -1,9 +1,12 @@
 import '@xyflow/svelte/dist/style.css';
 import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
 interface Props {
     endpointConfig?: EndpointConfig;
+    /** Auth provider applied to this instance's API requests. */
+    authProvider?: AuthProvider;
     openConfigSidebar?: (node: WorkflowNodeType) => void;
     /**
      * Editor interaction mode. `'edit'` allows node drag/connect/select and

package/dist/components/chat/AIChatPanel.svelte

@@ -369,7 +369,12 @@
         history: history.slice(0, -1) // all except current message
       };
 
-      const response = await chatService.sendMessage(fd.api.config, workflowId, request);
+      const response = await chatService.sendMessage(
+        fd.api.config,
+        workflowId,
+        request,
+        fd.api.authProvider
+      );
       const displayMsg = processResponse(response.content);
       displayMessages.push(displayMsg);
     } catch (err) {

package/dist/components/form/FormAutocomplete.svelte

@@ -25,7 +25,7 @@
   import Icon from '@iconify/svelte';
   import type { AutocompleteConfig, AuthProvider } from '../../types/index.js';
   import type { FieldOption } from './types.js';
-  import { buildFetchHeaders } from '../../utils/fetchWithAuth.js';
+  import { authenticatedFetch } from '../../utils/fetchWithAuth.js';
   import { logger } from '../../utils/logger.js';
   import { m } from '../../messages/index.js';
 
@@ -245,16 +245,15 @@
 
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
     try {
-      // Build headers with authentication (call getter to get current value)
-      const headers = await buildFetchHeaders(getAuthProvider?.());
-
       timeoutId = setTimeout(() => controller.abort(), 5000);
 
-      const response = await fetch(buildUrl(query), {
-        method: 'GET',
-        headers,
-        signal: controller.signal
-      });
+      // authenticatedFetch merges auth headers (call getter for current value)
+      // and applies the 401/403 lifecycle consistently with the rest of the lib.
+      const response = await authenticatedFetch(
+        buildUrl(query),
+        { method: 'GET', signal: controller.signal },
+        { authProvider: getAuthProvider?.() }
+      );
 
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);

package/dist/components/form/FormFieldLight.svelte

@@ -48,6 +48,8 @@
   const fd = getInstance();
   import type { FieldSchema } from './types.js';
   import { getSchemaOptions } from './types.js';
+  import type { WorkflowNode, WorkflowEdge } from '../../types/index.js';
+  import type { AuthProvider } from '../../types/auth.js';
 
   interface Props {
     /** Unique key/id for the field */
@@ -60,11 +62,33 @@
     required?: boolean;
     /** Animation delay index for staggered animations */
     animationIndex?: number;
+    /** Current workflow node (optional, forwarded to registered editors for template variable API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, forwarded to registered editors for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, forwarded to registered editors for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, forwarded to registered editors for template variable API mode) */
+    workflowId?: string;
+    /** Auth provider (optional, forwarded to registered editors for API requests) */
+    authProvider?: AuthProvider;
     /** Callback when the field value changes */
     onChange: (value: unknown) => void;
   }
 
-  let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
+  let {
+    fieldKey,
+    schema,
+    value,
+    required = false,
+    animationIndex = 0,
+    node,
+    nodes,
+    edges,
+    workflowId,
+    authProvider,
+    onChange
+  }: Props = $props();
 
   /**
    * Computed description ID for ARIA association
@@ -246,6 +270,11 @@
         variables={schema.variables}
         placeholderExample={schema.placeholderExample as string | undefined}
         autocomplete={schema.autocomplete}
+        {node}
+        {nodes}
+        {edges}
+        {workflowId}
+        {authProvider}
         onChange={(val: unknown) => onChange(val)}
       />
     {:else if fieldType === 'checkbox-group'}

package/dist/components/form/FormFieldLight.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { FieldSchema } from './types.js';
+import type { WorkflowNode, WorkflowEdge } from '../../types/index.js';
+import type { AuthProvider } from '../../types/auth.js';
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;
@@ -10,6 +12,16 @@ interface Props {
     required?: boolean;
     /** Animation delay index for staggered animations */
     animationIndex?: number;
+    /** Current workflow node (optional, forwarded to registered editors for template variable API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, forwarded to registered editors for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, forwarded to registered editors for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, forwarded to registered editors for template variable API mode) */
+    workflowId?: string;
+    /** Auth provider (optional, forwarded to registered editors for API requests) */
+    authProvider?: AuthProvider;
     /** Callback when the field value changes */
     onChange: (value: unknown) => void;
 }

package/dist/components/form/FormUISchemaRenderer.svelte

@@ -16,7 +16,9 @@
   import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
   import type { FieldSchema } from './types.js';
   import { resolveScopeToKey } from '../../utils/uischema.js';
-  import FormField from './FormField.svelte';
+  // Use the registry-based light field factory so the UISchema renderer (and
+  // SchemaForm/ConfigForm above it) never statically pull in CodeMirror.
+  import FormField from './FormFieldLight.svelte';
   import FormFieldset from './FormFieldset.svelte';
   import Self from './FormUISchemaRenderer.svelte';
 

package/dist/components/interrupt/InterruptBubble.svelte

@@ -199,7 +199,12 @@
     try {
       // Call API if service is configured
       if (interruptService.isConfigured(fd.api.config)) {
-        await interruptService.resolveInterrupt(fd.api.config, currentInterrupt.id, value);
+        await interruptService.resolveInterrupt(
+          fd.api.config,
+          currentInterrupt.id,
+          value,
+          fd.api.authProvider
+        );
       }
 
       // Mark as successful - transitions to resolved state
@@ -229,7 +234,11 @@
     try {
       // Call API if service is configured
       if (interruptService.isConfigured(fd.api.config)) {
-        await interruptService.cancelInterrupt(fd.api.config, currentInterrupt.id);
+        await interruptService.cancelInterrupt(
+          fd.api.config,
+          currentInterrupt.id,
+          fd.api.authProvider
+        );
       }
 
       // Mark as successful - transitions to cancelled state

package/dist/components/playground/PipelineKanbanView.svelte

@@ -46,19 +46,21 @@
   import type { NodeStatus } from './pipelineViewUtils.svelte.js';
   import type { Workflow, WorkflowNode } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
+  import type { AuthProvider } from '../../types/auth.js';
 
   interface Props {
     pipelineId: string;
     workflow: Workflow;
     endpointConfig: EndpointConfig;
+    authProvider?: AuthProvider;
     refreshTrigger?: number;
   }
 
-  let { pipelineId, workflow, endpointConfig, refreshTrigger = 0 }: Props = $props();
+  let { pipelineId, workflow, endpointConfig, authProvider, refreshTrigger = 0 }: Props = $props();
 
   // endpointConfig is consumed once to build the API client; it must be stable
   // svelte-ignore state_referenced_locally
-  const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
+  const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig, authProvider);
 
   $effect(() => {
     if (refreshTrigger <= 0) return;

package/dist/components/playground/PipelineKanbanView.svelte.d.ts

@@ -1,9 +1,11 @@
 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;
     endpointConfig: EndpointConfig;
+    authProvider?: AuthProvider;
     refreshTrigger?: number;
 }
 declare const PipelineKanbanView: import("svelte").Component<Props, {}, "">;