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

package/dist/styles/base.css

@@ -8,6 +8,36 @@
   box-sizing: border-box;
 }
 
+/* Drop the UA default margin on paragraphs so block text sits on the grid;
+   contexts that want spacing (e.g. .markdown-display p) opt back in. */
+p {
+  margin: 0;
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   Standardized focus ring — THE single source of truth.
+
+   The entire library draws ONE focus ring: a solid outline in --fd-ring, sized
+   by --fd-ring-width / --fd-ring-offset. Components must NOT declare their own
+   focus rings (no per-element :focus outline/box-shadow). :focus-visible keeps
+   it to keyboard navigation; browsers still surface it for text fields on
+   click. Scoped to the library roots so it never leaks into the host app.
+   ─────────────────────────────────────────────────────────────────────────── */
+.flowdrop-root :focus-visible,
+.svelte-flow :focus-visible {
+  outline: var(--fd-ring-width) solid var(--fd-ring);
+  outline-offset: var(--fd-ring-offset);
+}
+
+/* xyflow hard-disables the node wrapper outline
+   (.svelte-flow__node.selectable:focus-visible { outline: none }). That wrapper
+   is our single focusable node element, so re-assert the standard ring at
+   matching specificity. */
+.svelte-flow .svelte-flow__node.selectable:focus-visible {
+  outline: var(--fd-ring-width) solid var(--fd-ring);
+  outline-offset: var(--fd-ring-offset);
+}
+
 /* Layout utilities */
 .flowdrop-layout {
   display: flex;
@@ -93,9 +123,11 @@
   background-color: var(--fd-primary);
 }
 
+/* Handles are tabindex="-1" (programmatic focus only, so :focus-visible won't
+   fire) — keep a :focus ring, but draw it from the same tokens. */
 .svelte-flow .svelte-flow__handle:focus {
-  outline: 2px solid var(--fd-ring);
-  outline-offset: 2px;
+  outline: var(--fd-ring-width) solid var(--fd-ring);
+  outline-offset: var(--fd-ring-offset);
 }
 
 /* Centralized handle edge positioning — offset derived from --fd-handle-size */
@@ -135,10 +167,7 @@
   border-color: var(--fd-border);
 }
 
-.flowdrop-btn:focus {
-  outline: 2px solid var(--fd-ring);
-  outline-offset: 2px;
-}
+/* Focus ring is centralized (see top of file). */
 
 .flowdrop-btn--primary {
   background-color: var(--fd-primary);
@@ -211,10 +240,9 @@
     box-shadow var(--fd-transition-normal);
 }
 
+/* Active-field hint only; the focus ring itself is centralized (top of file). */
 .flowdrop-input:focus {
-  outline: none;
-  border-color: var(--fd-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--fd-ring);
 }
 
 .flowdrop-input--sm {
@@ -1092,6 +1120,7 @@
   --fd-notes-node-width: 500px;
   --fd-notes-node-min-width: 250px;
   --fd-notes-node-max-width: 500px;
+  --fd-notes-node-min-height: 200px;
   --fd-notes-node-backdrop-filter: blur(8px);
 }
 

package/dist/styles/tokens.css

@@ -127,6 +127,13 @@
   --fd-card: #ffffff; /* @public */
   --fd-card-foreground: var(--_gray-9); /* @public */
 
+  /* ----- CHROME PANELS (sidebar + config/inspector panel) -----
+     Large editor-shell panels read from these so a theme can make them
+     glassy/translucent without touching every other surface. Default to the
+     opaque app background + no blur, so existing themes are unchanged. */
+  --fd-panel-bg: var(--fd-background); /* @public  sidebar + config panel surface */
+  --fd-panel-backdrop-filter: none; /* @public  glass/frost behind translucent panels; e.g. blur(14px) */
+
   /* ----- HEADER (Distinct header styling) ----- */
   --fd-header: #f5f7fa; /* @public */
   --fd-header-foreground: var(--_gray-8); /* @public */
@@ -140,10 +147,45 @@
   --fd-border-muted: var(--_gray-3); /* @public */
   --fd-border-strong: var(--_gray-5); /* @public */
   --fd-ring: var(--_blue-2); /* @public */
+  /* Focus-ring geometry. The whole library draws ONE focus ring from these
+     (see base.css). Color is theme-aware (--fd-ring); width/offset are not, so
+     they live only here. */
+  --fd-ring-width: 2px; /* @public */
+  --fd-ring-offset: 2px; /* @public */
+
+  /* ----- EDITOR CANVAS & NODE SURFACES -----
+     Scoped surfaces for the graph editor, kept separate from the general app
+     "chrome" (navbar, sidebars, panels) so a theme can restyle the canvas/nodes
+     without tinting the rest of the UI. Each defaults to its chrome equivalent,
+     so overriding the base token (e.g. --fd-card) still cascades here. */
+  --fd-canvas-bg: var(--fd-background); /* @public  editor canvas (grid) background */
+  --fd-node-bg: var(--fd-card); /* @public  node body surface */
+  --fd-node-header-bg: var(--fd-header); /* @public  node header surface */
+  --fd-node-radius: var(
+    --fd-radius-xl
+  ); /* @public  node card corner radius; lower for sharper corners */
+  --fd-node-shadow: var(
+    --fd-shadow-md
+  ); /* @public  node resting elevation; 'none' for a flat look */
+  --fd-node-shadow-hover: var(
+    --fd-shadow-lg
+  ); /* @public  node hover/selected elevation; 'none' for a flat look */
+  --fd-node-backdrop-filter: none; /* @public  glass/frost effect behind translucent node bodies; e.g. blur(10px) */
 
   /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
   --fd-node-border: var(--_gray-5); /* @public */
   --fd-node-border-hover: var(--_gray-6); /* @public */
+  --fd-node-border-width: 1.5px; /* @public  node outline thickness; lower for a thinner look */
+  /* Note nodes can carry their own outline so themes can read them as
+     informational/annotation rather than a process node. Defaults to the
+     shared node border so existing themes are unchanged. */
+  --fd-note-border: var(--fd-node-border); /* @public  notes-node outline */
+  --fd-note-border-hover: var(--fd-node-border-hover); /* @public  notes-node outline (hover) */
+
+  /* ----- CANVAS GRID (pattern color for the editor background grid; any theme
+     can recolor whichever grid variant it picks via config.canvas.grid).
+     Default matches xyflow's dot-grid color so the default theme is unchanged. */
+  --fd-grid-pattern-color: #91919a; /* @public */
 
   /* ----- PRIMARY (Interactive/Brand) ----- */
   --fd-primary: var(--_blue-2); /* @public */
@@ -307,6 +349,7 @@
   --fd-scrollbar-thumb: var(--_gray-4); /* @internal */
   --fd-scrollbar-thumb-hover: var(--_gray-5); /* @internal */
   --fd-scrollbar-track: var(--_gray-2); /* @internal */
+  --fd-scrollbar-radius: 4px; /* @public  scrollbar thumb/track corner radius; 0 for square */
 
   /* ----- BACKDROP/OVERLAY ----- */
   --fd-backdrop: rgba(255, 255, 255, 0.8); /* @internal */
@@ -324,11 +367,17 @@
 
   /* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */
   --fd-node-grid-step: 10; /* @internal — layout algorithm detail */
-  --fd-node-default-width: 290px; /* @public */
+  --fd-node-default-width: 280px; /* @public */
   --fd-node-header-height: 60px; /* @public */
-  --fd-node-header-title-height: 40px; /* @internal */
+  --fd-node-header-title-height: 40px; /* @internal — fits icon + up to 2 text lines */
   --fd-node-header-desc-line: 20px; /* @internal */
   --fd-node-header-gap: 10px; /* @internal */
+  /* Divider absorbed into header bottom padding so header height stays on the
+     20px grid regardless of border thickness. */
+  --fd-node-header-divider-width: 1px; /* @public */
+  --fd-node-header-divider-color: var(
+    --fd-border-muted
+  ); /* @public — header bottom divider color */
   --fd-node-port-row-height: 20px; /* @internal */
   --fd-node-terminal-size: 80px; /* @public */
   --fd-node-square-size: 80px; /* @public */
@@ -395,6 +444,9 @@
   --fd-node-border: #4a4a52;
   --fd-node-border-hover: #5a5a62;
 
+  /* ----- CANVAS GRID (matches xyflow's dark dot-grid color) ----- */
+  --fd-grid-pattern-color: #777;
+
   /* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */
   --fd-node-emerald: #34d399;
   --fd-node-blue: #60a5fa;

package/dist/svelte-app.d.ts

@@ -204,6 +204,12 @@ export declare function mountWorkflowEditor(container: HTMLElement, options?: {
     authProvider?: AuthProvider;
     /** Instance identifier — see {@link FlowDropMountOptions.instanceId}. */
     instanceId?: string;
+    /**
+     * Register the built-in markdown/code/template editors. Batteries-included
+     * by default (chunks load lazily). See {@link FlowDropFeatures.builtinEditors}.
+     * @default true
+     */
+    builtinEditors?: boolean;
 }): Promise<MountedFlowDropApp>;
 /**
  * Unmount a FlowDrop app

package/dist/svelte-app.js

@@ -335,7 +335,7 @@ export async function mountFlowDropApp(container, options = {}) {
  * @returns Promise resolving to a MountedFlowDropApp instance
  */
 export async function mountWorkflowEditor(container, options = {}) {
-    const { workflow, endpointConfig, portConfig, categories, authProvider, instanceId } = options;
+    const { workflow, endpointConfig, portConfig, categories, authProvider, instanceId, builtinEditors } = options;
     // Per-instance state container (see mountFlowDropApp)
     const { fd, isDefault } = acquireInstance(instanceId);
     // Create endpoint configuration
@@ -400,7 +400,9 @@ export async function mountWorkflowEditor(container, options = {}) {
         target: container,
         props: {
             instance: fd,
-            endpointConfig: config
+            endpointConfig: config,
+            authProvider,
+            builtinEditors
         }
     });
     // Create the mounted app interface (simpler version)

package/dist/themes/drafter.d.ts

@@ -0,0 +1,2 @@
+import type { FlowDropTheme } from '../types/theme.js';
+export declare const drafterTheme: FlowDropTheme;

package/dist/themes/drafter.js

@@ -0,0 +1,15 @@
+import { drafterSkin } from '../skins/drafter.js';
+export const drafterTheme = {
+    name: 'drafter',
+    skin: drafterSkin,
+    config: {
+        sidebar: {
+            defaultOpen: true,
+            categoriesDefaultOpen: false
+        },
+        // Blueprint square line grid (any theme can opt into a grid variant here)
+        canvas: {
+            grid: 'lines'
+        }
+    }
+};

package/dist/themes/index.d.ts

@@ -1,6 +1,7 @@
 import type { FlowDropTheme, FlowDropThemeName } from '../types/theme.js';
 import { defaultTheme } from './default.js';
 import { minimalTheme } from './minimal.js';
+import { drafterTheme } from './drafter.js';
 /**
  * Resolve a theme prop to a complete FlowDropTheme object.
  *
@@ -10,4 +11,4 @@ import { minimalTheme } from './minimal.js';
  *   → minimal theme + { skin.tokens.primary: '#e11d48' }
  */
 export declare function resolveTheme(theme: FlowDropTheme | FlowDropThemeName | undefined): FlowDropTheme;
-export { defaultTheme, minimalTheme };
+export { defaultTheme, minimalTheme, drafterTheme };

package/dist/themes/index.js

@@ -1,8 +1,10 @@
 import { defaultTheme } from './default.js';
 import { minimalTheme } from './minimal.js';
+import { drafterTheme } from './drafter.js';
 const builtinThemes = {
     default: defaultTheme,
-    minimal: minimalTheme
+    minimal: minimalTheme,
+    drafter: drafterTheme
 };
 /**
  * Resolve a theme prop to a complete FlowDropTheme object.
@@ -35,10 +37,14 @@ export function resolveTheme(theme) {
                 sidebar: {
                     ...base.config?.sidebar,
                     ...theme.config?.sidebar
+                },
+                canvas: {
+                    ...base.config?.canvas,
+                    ...theme.config?.canvas
                 }
             }
         };
     }
     return theme;
 }
-export { defaultTheme, minimalTheme };
+export { defaultTheme, minimalTheme, drafterTheme };

package/dist/types/auth.d.ts

@@ -2,7 +2,9 @@
  * Authentication Provider Types for FlowDrop
  *
  * Provides interfaces and implementations for authentication in FlowDrop.
- * AuthProvider is passed at mount time and cannot be changed without remounting.
+ * An AuthProvider is supplied at mount time (or via `fd.api.configure`) and can
+ * be swapped at runtime with `fd.api.setAuthProvider(...)` — e.g. on login or
+ * logout — without remounting.
  *
  * @module types/auth
  */
@@ -15,8 +17,7 @@
  * @example
  * ```typescript
  * const authProvider: AuthProvider = {
- *   getAuthHeaders: async () => ({ Authorization: "Bearer token123" }),
- *   isAuthenticated: () => true
+ *   getAuthHeaders: async () => ({ Authorization: "Bearer token123" })
  * };
  * ```
  */
@@ -30,15 +31,6 @@ export interface AuthProvider {
      * @returns Promise resolving to a record of header name-value pairs
      */
     getAuthHeaders(): Promise<Record<string, string>>;
-    /**
-     * Check if currently authenticated
-     *
-     * Used to determine if API requests should be attempted.
-     * Should return synchronously for performance.
-     *
-     * @returns true if authenticated, false otherwise
-     */
-    isAuthenticated(): boolean;
     /**
      * Called when API returns 401 Unauthorized
      *
@@ -68,6 +60,11 @@ export interface StaticAuthConfig {
     token?: string;
     /** API key (used when type is "api_key") */
     apiKey?: string;
+    /**
+     * Header name to carry the API key (used when type is "api_key").
+     * Defaults to `"X-API-Key"`.
+     */
+    apiKeyHeader?: string;
     /** Custom headers (used when type is "custom") */
     headers?: Record<string, string>;
 }
@@ -119,28 +116,6 @@ export declare class StaticAuthProvider implements AuthProvider {
      * @returns Promise resolving to authentication headers
      */
     getAuthHeaders(): Promise<Record<string, string>>;
-    /**
-     * Check if authenticated
-     *
-     * Returns true if any auth headers are configured.
-     *
-     * @returns true if headers are configured
-     */
-    isAuthenticated(): boolean;
-    /**
-     * Handle unauthorized response
-     *
-     * Static provider cannot refresh tokens, so always returns false.
-     *
-     * @returns Promise resolving to false (cannot refresh)
-     */
-    onUnauthorized(): Promise<boolean>;
-    /**
-     * Handle forbidden response
-     *
-     * Static provider has no special handling for 403.
-     */
-    onForbidden(): Promise<void>;
 }
 /**
  * Configuration for callback-based authentication
@@ -213,15 +188,6 @@ export declare class CallbackAuthProvider implements AuthProvider {
      * @returns Promise resolving to authentication headers
      */
     getAuthHeaders(): Promise<Record<string, string>>;
-    /**
-     * Check if authenticated
-     *
-     * For callback-based auth, we assume authenticated if getToken exists.
-     * The actual token validity is checked when making requests.
-     *
-     * @returns true (assumes authenticated, actual check happens on request)
-     */
-    isAuthenticated(): boolean;
     /**
      * Handle unauthorized response
      *
@@ -252,12 +218,4 @@ export declare class NoAuthProvider implements AuthProvider {
      * @returns Promise resolving to empty object
      */
     getAuthHeaders(): Promise<Record<string, string>>;
-    /**
-     * Check if authenticated
-     *
-     * Always returns false (no auth configured).
-     *
-     * @returns false
-     */
-    isAuthenticated(): boolean;
 }

package/dist/types/auth.js

@@ -2,7 +2,9 @@
  * Authentication Provider Types for FlowDrop
  *
  * Provides interfaces and implementations for authentication in FlowDrop.
- * AuthProvider is passed at mount time and cannot be changed without remounting.
+ * An AuthProvider is supplied at mount time (or via `fd.api.configure`) and can
+ * be swapped at runtime with `fd.api.setAuthProvider(...)` — e.g. on login or
+ * logout — without remounting.
  *
  * @module types/auth
  */
@@ -55,7 +57,7 @@ export class StaticAuthProvider {
                 break;
             case 'api_key':
                 if (config.apiKey) {
-                    this.headers['X-API-Key'] = config.apiKey;
+                    this.headers[config.apiKeyHeader ?? 'X-API-Key'] = config.apiKey;
                 }
                 break;
             case 'custom':
@@ -79,35 +81,6 @@ export class StaticAuthProvider {
     async getAuthHeaders() {
         return this.headers;
     }
-    /**
-     * Check if authenticated
-     *
-     * Returns true if any auth headers are configured.
-     *
-     * @returns true if headers are configured
-     */
-    isAuthenticated() {
-        return Object.keys(this.headers).length > 0;
-    }
-    /**
-     * Handle unauthorized response
-     *
-     * Static provider cannot refresh tokens, so always returns false.
-     *
-     * @returns Promise resolving to false (cannot refresh)
-     */
-    async onUnauthorized() {
-        // Static provider cannot refresh tokens
-        return false;
-    }
-    /**
-     * Handle forbidden response
-     *
-     * Static provider has no special handling for 403.
-     */
-    async onForbidden() {
-        // No special handling for static provider
-    }
 }
 /**
  * Callback-based authentication provider
@@ -162,19 +135,6 @@ export class CallbackAuthProvider {
         }
         return {};
     }
-    /**
-     * Check if authenticated
-     *
-     * For callback-based auth, we assume authenticated if getToken exists.
-     * The actual token validity is checked when making requests.
-     *
-     * @returns true (assumes authenticated, actual check happens on request)
-     */
-    isAuthenticated() {
-        // For callback-based auth, we assume authenticated if getToken exists
-        // The actual token validity is checked when making requests
-        return true;
-    }
     /**
      * Handle unauthorized response
      *
@@ -216,14 +176,4 @@ export class NoAuthProvider {
     async getAuthHeaders() {
         return {};
     }
-    /**
-     * Check if authenticated
-     *
-     * Always returns false (no auth configured).
-     *
-     * @returns false
-     */
-    isAuthenticated() {
-        return false;
-    }
 }

package/dist/types/events.d.ts

@@ -203,6 +203,24 @@ export interface FlowDropFeatures {
      * @default true
      */
     enableNodeSwap?: boolean;
+    /**
+     * Register the built-in heavy form editors (markdown / code / template).
+     *
+     * The full editor is batteries-included: node config fields with
+     * `format: 'markdown'` / `'code'` / `'template'` render real CodeMirror
+     * editors out of the box. Their chunks are code-split and load lazily, so
+     * an editor that never opens such a field never downloads CodeMirror/marked.
+     *
+     * Set to `false` only if you want to strip those editors (e.g. to shave the
+     * lazy chunks) and either live with the textarea fallback or register your
+     * own field components via `instance.fields.register(...)`.
+     *
+     * This does not affect the standalone `@flowdrop/flowdrop/form` primitive,
+     * which stays opt-in regardless.
+     *
+     * @default true
+     */
+    builtinEditors?: boolean;
 }
 /**
  * Default feature values

package/dist/types/events.js

@@ -15,7 +15,8 @@ export const DEFAULT_FEATURES = {
     autoSaveDraft: true,
     autoSaveDraftInterval: 30000,
     showToasts: true,
-    enableNodeSwap: true
+    enableNodeSwap: true,
+    builtinEditors: true
 };
 /**
  * Merge user-provided features with defaults

package/dist/types/index.d.ts

@@ -2,9 +2,9 @@
  * Core types for the Workflow Library
  */
 import type { Component } from 'svelte';
-import type { Node, Edge, XYPosition } from '@xyflow/svelte';
-import { ConnectionLineType } from '@xyflow/svelte';
+import type { Node, Edge, XYPosition, ConnectionLineType } from '@xyflow/svelte';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from './auth.js';
 /**
  * Built-in node categories that ship with FlowDrop.
  * These categories have predefined icons, colors, and display names.
@@ -1231,6 +1231,8 @@ export interface PipelineViewProps {
     pipelineId: string | null;
     workflow: Workflow;
     endpointConfig: EndpointConfig;
+    /** Auth provider for building authenticated API clients in custom views. */
+    authProvider?: AuthProvider;
     refreshTrigger?: number;
 }
 /** A custom view injected into the PipelinePanel view switcher. */

package/dist/types/index.js

@@ -1,7 +1,6 @@
 /**
  * Core types for the Workflow Library
  */
-import { ConnectionLineType } from '@xyflow/svelte';
 /**
  * Default workflow format used when none is specified.
  */

package/dist/types/settings.d.ts

@@ -56,7 +56,7 @@ export interface UISettings {
     /** Enable compact mode for denser UI */
     compactMode: boolean;
     /** Active theme name — overridden by the theme prop when explicitly provided */
-    theme: 'default' | 'minimal';
+    theme: 'default' | 'minimal' | 'drafter';
     /** Whether the command console panel is open */
     consoleOpen: boolean;
     /** Height of the command console panel in pixels */

package/dist/types/settings.js

@@ -37,7 +37,7 @@ export const SETTINGS_CATEGORY_ICONS = {
  * Default theme settings
  */
 export const DEFAULT_THEME_SETTINGS = {
-    preference: 'dark'
+    preference: 'light'
 };
 /**
  * Default editor settings

package/dist/types/skin.d.ts

@@ -28,4 +28,4 @@ export interface FlowDropSkin {
     /** CSS token overrides injected as [data-theme='dark'] rules — active in dark mode only */
     darkTokens?: FlowDropSkinTokens;
 }
-export type FlowDropSkinName = 'default' | 'slate';
+export type FlowDropSkinName = 'default' | 'slate' | 'drafter';

package/dist/types/theme.d.ts

@@ -1,4 +1,14 @@
 import type { FlowDropSkin } from './skin.js';
+/**
+ * Canvas background grid pattern. Mirrors xyflow's BackgroundVariant values:
+ *   'dots'  — a square grid of dots (the default)
+ *   'lines' — a square grid of solid lines (a "blueprint" / drafter look)
+ *   'cross' — small plus-marks at each grid intersection
+ *
+ * The grid's color is driven separately by the `--fd-grid-pattern-color` token,
+ * so any skin can recolor whichever variant a theme chooses.
+ */
+export type FlowDropGridVariant = 'dots' | 'lines' | 'cross';
 /**
  * Behavioral configuration bundled with a theme.
  * These are initial-state flags, not CSS — they control runtime defaults.
@@ -10,11 +20,15 @@ export interface FlowDropThemeConfig {
         /** Whether category <details> accordion sections start open in card mode. Defaults to false. */
         categoriesDefaultOpen?: boolean;
     };
+    canvas?: {
+        /** Background grid pattern applied when this theme is selected. Defaults to 'dots'. */
+        grid?: FlowDropGridVariant;
+    };
 }
 /**
  * A FlowDrop theme bundles a visual skin (CSS tokens) with UI config (behavioral defaults).
  *
- * Built-in themes: 'default' | 'minimal'
+ * Built-in themes: 'default' | 'minimal' | 'drafter'
  *
  * @example
  * // Use a built-in theme by name
@@ -32,4 +46,4 @@ export interface FlowDropTheme {
     /** Behavioral configuration defaults */
     config?: FlowDropThemeConfig;
 }
-export type FlowDropThemeName = 'default' | 'minimal';
+export type FlowDropThemeName = 'default' | 'minimal' | 'drafter';

package/dist/utils/edgeStyling.js

@@ -5,10 +5,14 @@
  * visual styling to workflow edges based on source port data types.
  * Used by both the visual editor and the command DSL system.
  */
-import { MarkerType } from '@xyflow/svelte';
 import { extractPortId } from '../utils/handleIds.js';
 import { isLoopbackEdge } from '../utils/connections.js';
 import { EDGE_MARKER_SIZES } from '../config/constants.js';
+// xyflow's `MarkerType.ArrowClosed`, inlined as its literal value. This module
+// is shared with the headless command DSL (reachable from `@flowdrop/flowdrop/core`),
+// so it must NOT carry a runtime import of @xyflow/svelte — a type-only import
+// plus this constant keeps the marker type-safe without the dependency.
+const ARROW_CLOSED_MARKER = 'arrowclosed';
 /**
  * Check if a port ID matches a dynamic branch in a Gateway node.
  * Gateway nodes store branches in config.branches array.
@@ -101,7 +105,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
                 'stroke: var(--fd-edge-loopback); stroke-dasharray: var(--fd-edge-loopback-dasharray); stroke-width: var(--fd-edge-loopback-width); opacity: var(--fd-edge-loopback-opacity);';
             edge.class = 'flowdrop--edge--loopback';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.loopback,
                 color: 'var(--fd-edge-loopback)'
             };
@@ -110,7 +114,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
             edge.style = 'stroke: var(--fd-edge-trigger); stroke-width: var(--fd-edge-trigger-width);';
             edge.class = 'flowdrop--edge--trigger';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.trigger,
                 color: 'var(--fd-edge-trigger)'
             };
@@ -119,7 +123,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
             edge.style = 'stroke: var(--fd-edge-tool); stroke-dasharray: 5 3;';
             edge.class = 'flowdrop--edge--tool';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.tool,
                 color: 'var(--fd-edge-tool)'
             };
@@ -129,7 +133,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
             edge.style = 'stroke: var(--fd-edge-data);';
             edge.class = 'flowdrop--edge--data';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.data,
                 color: 'var(--fd-edge-data)'
             };