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

package/dist/services/playgroundService.js

@@ -7,7 +7,8 @@
  * @module services/playgroundService
  */
 import { defaultShouldStopPolling } from '../types/playground.js';
-import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
+import { buildEndpointUrl } from '../config/endpoints.js';
+import { authenticatedFetch } from '../utils/fetchWithAuth.js';
 import { logger } from '../utils/logger.js';
 /**
  * Default polling interval in milliseconds
@@ -64,14 +65,11 @@ export class PlaygroundService {
      * @param options - Fetch options
      * @returns The parsed JSON response
      */
-    async request(config, url, options = {}) {
-        const headers = getEndpointHeaders(config, 'playground');
-        const response = await fetch(url, {
-            ...options,
-            headers: {
-                ...headers,
-                ...options.headers
-            }
+    async request(config, url, options = {}, authProvider) {
+        const response = await authenticatedFetch(url, options, {
+            config,
+            endpointKey: 'playground',
+            authProvider
         });
         if (!response.ok) {
             const errorData = await response.json().catch(() => ({}));
@@ -92,7 +90,7 @@ export class PlaygroundService {
      * @param options - Optional pagination parameters
      * @returns Array of playground sessions
      */
-    async listSessions(endpointConfig, workflowId, options) {
+    async listSessions(endpointConfig, workflowId, options, authProvider) {
         const config = this.getConfig(endpointConfig);
         let url = buildEndpointUrl(config, config.endpoints.playground.listSessions, {
             id: workflowId
@@ -109,7 +107,7 @@ export class PlaygroundService {
         if (queryString) {
             url = `${url}?${queryString}`;
         }
-        const response = await this.request(config, url);
+        const response = await this.request(config, url, {}, authProvider);
         return response.data ?? [];
     }
     /**
@@ -120,7 +118,7 @@ export class PlaygroundService {
      * @param metadata - Optional session metadata
      * @returns The created session
      */
-    async createSession(endpointConfig, workflowId, name, metadata) {
+    async createSession(endpointConfig, workflowId, name, metadata, authProvider) {
         const config = this.getConfig(endpointConfig);
         const url = buildEndpointUrl(config, config.endpoints.playground.createSession, {
             id: workflowId
@@ -128,7 +126,7 @@ export class PlaygroundService {
         const response = await this.request(config, url, {
             method: 'POST',
             body: JSON.stringify({ name, metadata })
-        });
+        }, authProvider);
         if (!response.data) {
             throw new Error('Failed to create session: No data returned');
         }
@@ -140,12 +138,12 @@ export class PlaygroundService {
      * @param sessionId - The session UUID
      * @returns The session details
      */
-    async getSession(endpointConfig, sessionId) {
+    async getSession(endpointConfig, sessionId, authProvider) {
         const config = this.getConfig(endpointConfig);
         const url = buildEndpointUrl(config, config.endpoints.playground.getSession, {
             sessionId
         });
-        const response = await this.request(config, url);
+        const response = await this.request(config, url, {}, authProvider);
         if (!response.data) {
             throw new Error('Session not found');
         }
@@ -156,14 +154,14 @@ export class PlaygroundService {
      *
      * @param sessionId - The session UUID
      */
-    async deleteSession(endpointConfig, sessionId) {
+    async deleteSession(endpointConfig, sessionId, authProvider) {
         const config = this.getConfig(endpointConfig);
         const url = buildEndpointUrl(config, config.endpoints.playground.deleteSession, {
             sessionId
         });
         await this.request(config, url, {
             method: 'DELETE'
-        });
+        }, authProvider);
     }
     // =========================================================================
     // Message Handling
@@ -181,7 +179,7 @@ export class PlaygroundService {
      * @param options - Pagination options
      * @returns Messages and session status
      */
-    async getMessages(endpointConfig, sessionId, options = {}) {
+    async getMessages(endpointConfig, sessionId, options = {}, authProvider) {
         const config = this.getConfig(endpointConfig);
         let url = buildEndpointUrl(config, config.endpoints.playground.getMessages, {
             sessionId
@@ -203,7 +201,7 @@ export class PlaygroundService {
         if (queryString) {
             url = `${url}?${queryString}`;
         }
-        return this.request(config, url);
+        return this.request(config, url, {}, authProvider);
     }
     /**
      * Send a message to a playground session
@@ -213,7 +211,7 @@ export class PlaygroundService {
      * @param inputs - Optional additional inputs for workflow nodes
      * @returns The created message
      */
-    async sendMessage(endpointConfig, sessionId, content, inputs) {
+    async sendMessage(endpointConfig, sessionId, content, inputs, authProvider) {
         const config = this.getConfig(endpointConfig);
         const url = buildEndpointUrl(config, config.endpoints.playground.sendMessage, {
             sessionId
@@ -225,7 +223,7 @@ export class PlaygroundService {
         const response = await this.request(config, url, {
             method: 'POST',
             body: JSON.stringify(requestBody)
-        });
+        }, authProvider);
         if (!response.data) {
             throw new Error('Failed to send message: No data returned');
         }
@@ -236,14 +234,14 @@ export class PlaygroundService {
      *
      * @param sessionId - The session UUID
      */
-    async stopExecution(endpointConfig, sessionId) {
+    async stopExecution(endpointConfig, sessionId, authProvider) {
         const config = this.getConfig(endpointConfig);
         const url = buildEndpointUrl(config, config.endpoints.playground.stopExecution, {
             sessionId
         });
         await this.request(config, url, {
             method: 'POST'
-        });
+        }, authProvider);
     }
     // =========================================================================
     // Polling
@@ -257,7 +255,7 @@ export class PlaygroundService {
      * @param shouldStopPolling - Optional override for stop conditions (default: defaultShouldStopPolling)
      * @param initialSequenceNumber - Optional sequence number to seed polling from (avoids re-fetching already loaded messages)
      */
-    startPolling(endpointConfig, sessionId, callback, interval = DEFAULT_POLLING_INTERVAL, shouldStopPolling, initialSequenceNumber) {
+    startPolling(endpointConfig, sessionId, callback, interval = DEFAULT_POLLING_INTERVAL, shouldStopPolling, initialSequenceNumber, authProvider) {
         // Stop any existing polling
         this.stopPolling();
         this.pollingSessionId = sessionId;
@@ -271,7 +269,7 @@ export class PlaygroundService {
             try {
                 const response = await this.getMessages(endpointConfig, sessionId, {
                     since: this.lastSequenceNumber ?? undefined
-                });
+                }, authProvider);
                 // Update last sequence number cursor
                 if (response.data && response.data.length > 0) {
                     const lastMessage = response.data[response.data.length - 1];

package/dist/services/portConfigApi.js

@@ -2,7 +2,8 @@
  * Port Configuration API Service
  * Handles fetching port configuration from the backend
  */
-import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
+import { buildEndpointUrl } from '../config/endpoints.js';
+import { authenticatedFetch } from '../utils/fetchWithAuth.js';
 import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
 import { logger } from '../utils/logger.js';
 /**
@@ -11,11 +12,7 @@ import { logger } from '../utils/logger.js';
 export async function fetchPortConfig(endpointConfig, authProvider) {
     try {
         const url = buildEndpointUrl(endpointConfig, endpointConfig.endpoints.portConfig);
-        const configHeaders = getEndpointHeaders(endpointConfig, 'portConfig');
-        const authHeaders = authProvider ? await authProvider.getAuthHeaders() : {};
-        const response = await fetch(url, {
-            headers: { ...configHeaders, ...authHeaders }
-        });
+        const response = await authenticatedFetch(url, {}, { config: endpointConfig, endpointKey: 'portConfig', authProvider });
         if (!response.ok) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         }

package/dist/services/settingsService.d.ts

@@ -9,12 +9,15 @@
  */
 import type { FlowDropSettings, PartialSettings } from '../types/settings.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 /**
- * Set the endpoint configuration for settings API calls
+ * Set the endpoint configuration (and optional auth provider) for settings API
+ * calls.
  *
  * @param config - Endpoint configuration
+ * @param provider - Optional auth provider supplying request auth headers
  */
-export declare function setSettingsEndpointConfig(config: EndpointConfig): void;
+export declare function setSettingsEndpointConfig(config: EndpointConfig, provider?: AuthProvider): void;
 /**
  * Get the current endpoint configuration
  *
@@ -62,8 +65,9 @@ export declare class SettingsService {
      * Create a new settings service instance
      *
      * @param config - Endpoint configuration
+     * @param authProvider - Optional auth provider applied to settings requests
      */
-    constructor(config: EndpointConfig);
+    constructor(config: EndpointConfig, authProvider?: AuthProvider);
     /**
      * Get user preferences from the backend
      *
@@ -87,6 +91,7 @@ export declare class SettingsService {
  * Create a settings service instance
  *
  * @param config - Endpoint configuration
+ * @param authProvider - Optional auth provider applied to settings requests
  * @returns SettingsService instance
  */
-export declare function createSettingsService(config: EndpointConfig): SettingsService;
+export declare function createSettingsService(config: EndpointConfig, authProvider?: AuthProvider): SettingsService;

package/dist/services/settingsService.js

@@ -7,7 +7,8 @@
  *
  * @module services/settingsService
  */
-import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
+import { buildEndpointUrl } from '../config/endpoints.js';
+import { authenticatedFetch } from '../utils/fetchWithAuth.js';
 // =========================================================================
 // Configuration
 // =========================================================================
@@ -16,12 +17,20 @@ import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
  */
 let endpointConfig = null;
 /**
- * Set the endpoint configuration for settings API calls
+ * Auth provider reference, applied to every settings request so the backend
+ * sync path authenticates consistently with the rest of the library.
+ */
+let authProvider;
+/**
+ * Set the endpoint configuration (and optional auth provider) for settings API
+ * calls.
  *
  * @param config - Endpoint configuration
+ * @param provider - Optional auth provider supplying request auth headers
  */
-export function setSettingsEndpointConfig(config) {
+export function setSettingsEndpointConfig(config, provider) {
     endpointConfig = config;
+    authProvider = provider;
 }
 /**
  * Get the current endpoint configuration
@@ -47,10 +56,10 @@ async function settingsRequest(endpointKey, endpointPath, options = {}) {
         throw new Error('Endpoint configuration not set. Call setSettingsEndpointConfig() first.');
     }
     const url = buildEndpointUrl(endpointConfig, endpointPath);
-    const headers = getEndpointHeaders(endpointConfig, endpointKey);
-    const response = await fetch(url, {
-        headers,
-        ...options
+    const response = await authenticatedFetch(url, options, {
+        config: endpointConfig,
+        endpointKey,
+        authProvider
     });
     // Check if response is JSON
     const contentType = response.headers.get('content-type');
@@ -151,11 +160,12 @@ export class SettingsService {
      * Create a new settings service instance
      *
      * @param config - Endpoint configuration
+     * @param authProvider - Optional auth provider applied to settings requests
      */
-    constructor(config) {
+    constructor(config, authProvider) {
         this.config = config;
-        // Also set the module-level config
-        setSettingsEndpointConfig(config);
+        // Also set the module-level config + auth provider
+        setSettingsEndpointConfig(config, authProvider);
     }
     /**
      * Get user preferences from the backend
@@ -189,8 +199,9 @@ export class SettingsService {
  * Create a settings service instance
  *
  * @param config - Endpoint configuration
+ * @param authProvider - Optional auth provider applied to settings requests
  * @returns SettingsService instance
  */
-export function createSettingsService(config) {
-    return new SettingsService(config);
+export function createSettingsService(config, authProvider) {
+    return new SettingsService(config, authProvider);
 }

package/dist/skins/drafter.d.ts

@@ -0,0 +1,30 @@
+import type { FlowDropSkin } from '../types/skin';
+/**
+ * Drafter — a fresh, modern "drafting workspace" skin for the whole editor
+ * environment (see ref-image.png): a fresh white shell around a mint/aqua
+ * canvas with soft cyan/teal technical grid lines, crisp engineering geometry
+ * and clean teal-ink text — not a neutral admin UI and not an all-cyan shell.
+ *
+ * Unlike a canvas-only skin, Drafter themes the entire shell so it reads as one
+ * designed environment:
+ *  - App chrome (navbar, sidebars, inspector, status bars, form fields) stays
+ *    white/near-white for a clean fresh product feel.
+ *  - The mint/aqua personality lives in the canvas, node glass, focus rings,
+ *    selected states and small technical accents.
+ *  - Disabled/read-only surfaces use quiet light grey so state remains obvious.
+ *  - Borders are mostly neutral hairlines; strong/focus borders + node outlines
+ *    are teal/cyan ink (--fd-ring / --fd-border-strong / --fd-node-border).
+ *  - Focus rings are cyan (--fd-ring), not the default blue.
+ *  - Nodes are frosted glass with a faint inner highlight; the minimap + zoom
+ *    controls share the same vocabulary.
+ *  - Note/instruction cards read as cool annotations (translucent tint + slate
+ *    ink border), never as a filled "success" card.
+ *  - Emerald/green is reserved for primary actions, selection and live edges
+ *    (--fd-primary) — it is not used for every outline.
+ *
+ * Data-type port colors and category icon colors are left untouched so they keep
+ * their full color against the draft surface. The square grid is rendered by
+ * WorkflowEditor via config.canvas.grid = 'lines'; --fd-grid-pattern-color
+ * colors it. Ships light + dark variants.
+ */
+export declare const drafterSkin: FlowDropSkin;

package/dist/skins/drafter.js

@@ -0,0 +1,185 @@
+/**
+ * Drafter — a fresh, modern "drafting workspace" skin for the whole editor
+ * environment (see ref-image.png): a fresh white shell around a mint/aqua
+ * canvas with soft cyan/teal technical grid lines, crisp engineering geometry
+ * and clean teal-ink text — not a neutral admin UI and not an all-cyan shell.
+ *
+ * Unlike a canvas-only skin, Drafter themes the entire shell so it reads as one
+ * designed environment:
+ *  - App chrome (navbar, sidebars, inspector, status bars, form fields) stays
+ *    white/near-white for a clean fresh product feel.
+ *  - The mint/aqua personality lives in the canvas, node glass, focus rings,
+ *    selected states and small technical accents.
+ *  - Disabled/read-only surfaces use quiet light grey so state remains obvious.
+ *  - Borders are mostly neutral hairlines; strong/focus borders + node outlines
+ *    are teal/cyan ink (--fd-ring / --fd-border-strong / --fd-node-border).
+ *  - Focus rings are cyan (--fd-ring), not the default blue.
+ *  - Nodes are frosted glass with a faint inner highlight; the minimap + zoom
+ *    controls share the same vocabulary.
+ *  - Note/instruction cards read as cool annotations (translucent tint + slate
+ *    ink border), never as a filled "success" card.
+ *  - Emerald/green is reserved for primary actions, selection and live edges
+ *    (--fd-primary) — it is not used for every outline.
+ *
+ * Data-type port colors and category icon colors are left untouched so they keep
+ * their full color against the draft surface. The square grid is rendered by
+ * WorkflowEditor via config.canvas.grid = 'lines'; --fd-grid-pattern-color
+ * colors it. Ships light + dark variants.
+ */
+export const drafterSkin = {
+    tokens: {
+        /* ----- Shell surfaces: fresh white chrome, not all-cyan ----- */
+        background: '#ffffff',
+        foreground: '#10201c',
+        muted: '#f4f6f7',
+        'muted-foreground': '#5f6f6b',
+        subtle: '#eef3f2',
+        card: '#ffffff',
+        'card-foreground': '#10201c',
+        header: '#ffffff',
+        'header-foreground': '#10201c',
+        'header-gradient': 'linear-gradient(180deg, #ffffff 0%, #fbfefd 100%)',
+        'surface-tint': 'rgba(20, 184, 166, 0.015)',
+        /* White sidebars/inspector with only a whisper of technical glass */
+        'panel-bg': 'rgba(255, 255, 255, 0.94)',
+        'panel-backdrop-filter': 'blur(10px) saturate(1.04)',
+        backdrop: 'rgba(255, 255, 255, 0.92)',
+        /* ----- Borders: neutral chrome; strong/focus = teal-cyan accent ----- */
+        border: '#e3e8e7',
+        'border-muted': '#eef2f2',
+        'border-strong': 'rgba(15, 118, 110, 0.42)',
+        ring: '#06b6d4',
+        /* ----- Canvas: fresh aqua-mint, soft cyan/teal square grid ----- */
+        'canvas-bg': '#fbfefd',
+        'grid-pattern-color': 'rgba(20, 184, 166, 0.08)',
+        /* ----- Nodes: frosted glass, faint inner highlight ----- */
+        'node-bg': 'rgba(247, 252, 250, 0.7)',
+        'node-header-bg': 'rgba(214, 245, 236, 0.6)',
+        'node-backdrop-filter': 'blur(10px) saturate(1.15)',
+        'node-radius': '2px',
+        'node-shadow': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.6)',
+        'node-shadow-hover': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.85)',
+        'node-border': '#0f766e',
+        'node-border-hover': '#0c5f59',
+        'node-border-width': '1.25px',
+        /* Header divider matches the node outline ink (tracks light/dark node-border) */
+        'node-header-divider-color': 'var(--fd-node-border)',
+        'handle-border': '#ffffff',
+        /* Notes read as cool annotations, not filled success cards */
+        'note-border': '#5b7891',
+        'note-border-hover': '#48617a',
+        /* Translucent status tints so note/instruction cards stay light + glassy */
+        /* Status hues tuned to the cool palette: danger = rose (teal's warm
+           complement, not a generic red), warning = golden amber. Success/info stay
+           on the emerald/cyan family so they read as part of the theme. */
+        success: '#0d9488',
+        'success-hover': '#0f766e',
+        info: '#0891b2',
+        'info-hover': '#0e7490',
+        warning: '#d97706',
+        'warning-hover': '#b45309',
+        error: '#e11d48',
+        'error-hover': '#be123c',
+        'info-muted': 'rgba(8, 145, 178, 0.1)',
+        'success-muted': 'rgba(13, 148, 136, 0.1)',
+        'warning-muted': 'rgba(217, 119, 6, 0.12)',
+        'error-muted': 'rgba(225, 29, 72, 0.1)',
+        /* ----- Crisp drafting geometry + flat chrome (2–6px radius, no soft shadow) ----- */
+        'radius-sm': '2px',
+        'radius-md': '3px',
+        'radius-lg': '4px',
+        'radius-xl': '6px',
+        'scrollbar-radius': '0',
+        'shadow-sm': 'none',
+        'shadow-md': 'none',
+        /* ----- Canvas overlays: light, instrument-like ----- */
+        'minimap-bg': 'rgba(255, 255, 255, 0.72)',
+        'minimap-mask-bg': 'rgba(15, 118, 110, 0.08)',
+        'minimap-mask-stroke': 'rgba(15, 118, 110, 0.35)',
+        'minimap-node-bg': 'rgba(15, 118, 110, 0.3)',
+        'minimap-node-stroke': 'rgba(15, 118, 110, 0.45)',
+        'controls-button-bg': 'rgba(255, 255, 255, 0.86)',
+        'controls-button-bg-hover': 'rgba(204, 251, 241, 0.9)',
+        'controls-button-color': '#0f766e',
+        'controls-button-color-hover': '#0c5f59',
+        'controls-button-border': 'rgba(15, 118, 110, 0.25)',
+        /* ----- Secondary = mint, accent = cyan, primary = the one allowed green ----- */
+        secondary: 'rgba(206, 230, 223, 0.55)',
+        'secondary-hover': 'rgba(186, 219, 210, 0.7)',
+        'secondary-foreground': '#0f3d36',
+        accent: '#06b6d4',
+        'accent-hover': '#0891b2',
+        'accent-foreground': '#ffffff',
+        'accent-muted': 'rgba(6, 182, 212, 0.12)',
+        primary: '#10b981',
+        'primary-hover': '#059669',
+        'primary-foreground': '#ffffff',
+        'primary-muted': 'rgba(16, 185, 129, 0.14)'
+    },
+    darkTokens: {
+        /* ----- Shell surfaces: deep teal-slate glass ----- */
+        background: '#0e2421',
+        foreground: '#d8f0ea',
+        muted: 'rgba(20, 60, 54, 0.6)',
+        'muted-foreground': '#8fb3aa',
+        subtle: 'rgba(13, 47, 44, 0.7)',
+        card: 'rgba(18, 42, 38, 0.96)',
+        'card-foreground': '#d8f0ea',
+        header: 'rgba(13, 40, 37, 0.7)',
+        'header-foreground': '#d8f0ea',
+        'header-gradient': 'linear-gradient(180deg, rgba(17, 42, 38, 0.9) 0%, rgba(12, 33, 30, 0.9) 100%)',
+        'surface-tint': 'rgba(45, 212, 191, 0.04)',
+        'panel-bg': 'rgba(14, 36, 33, 0.8)',
+        'panel-backdrop-filter': 'blur(14px) saturate(1.2)',
+        backdrop: 'rgba(11, 31, 28, 0.8)',
+        border: 'rgba(45, 212, 191, 0.22)',
+        'border-muted': 'rgba(45, 212, 191, 0.12)',
+        'border-strong': 'rgba(45, 212, 191, 0.4)',
+        ring: '#22d3ee',
+        'canvas-bg': '#0b1f1c',
+        'grid-pattern-color': 'rgba(45, 212, 191, 0.16)',
+        'node-bg': 'rgba(17, 38, 35, 0.62)',
+        'node-header-bg': 'rgba(13, 47, 44, 0.6)',
+        'node-backdrop-filter': 'blur(10px) saturate(1.2)',
+        'node-shadow': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.08)',
+        'node-shadow-hover': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.14)',
+        'node-border': '#0d9488',
+        'node-border-hover': '#2dd4bf',
+        'handle-border': '#0b1f1c',
+        'note-border': '#7d96b0',
+        'note-border-hover': '#9fb4cb',
+        success: '#2dd4bf',
+        'success-hover': '#5eead4',
+        info: '#22d3ee',
+        'info-hover': '#67e8f9',
+        warning: '#fbbf24',
+        'warning-hover': '#fcd34d',
+        error: '#fb7185',
+        'error-hover': '#fda4af',
+        'info-muted': 'rgba(34, 211, 238, 0.12)',
+        'success-muted': 'rgba(45, 212, 191, 0.12)',
+        'warning-muted': 'rgba(251, 191, 36, 0.14)',
+        'error-muted': 'rgba(251, 113, 133, 0.12)',
+        'minimap-bg': 'rgba(11, 31, 28, 0.7)',
+        'minimap-mask-bg': 'rgba(45, 212, 191, 0.06)',
+        'minimap-mask-stroke': 'rgba(45, 212, 191, 0.3)',
+        'minimap-node-bg': 'rgba(45, 212, 191, 0.28)',
+        'minimap-node-stroke': 'rgba(45, 212, 191, 0.45)',
+        'controls-button-bg': 'rgba(17, 38, 35, 0.8)',
+        'controls-button-bg-hover': 'rgba(13, 47, 44, 0.9)',
+        'controls-button-color': '#2dd4bf',
+        'controls-button-color-hover': '#5eead4',
+        'controls-button-border': 'rgba(45, 212, 191, 0.3)',
+        secondary: 'rgba(13, 47, 44, 0.8)',
+        'secondary-hover': 'rgba(20, 60, 54, 0.9)',
+        'secondary-foreground': '#d8f0ea',
+        accent: '#22d3ee',
+        'accent-hover': '#67e8f9',
+        'accent-foreground': '#03291c',
+        'accent-muted': 'rgba(34, 211, 238, 0.14)',
+        primary: '#34d399',
+        'primary-hover': '#6ee7b7',
+        'primary-foreground': '#03291c',
+        'primary-muted': 'rgba(52, 211, 153, 0.16)'
+    }
+};

package/dist/skins/index.d.ts

@@ -1,6 +1,7 @@
 import type { FlowDropSkin, FlowDropSkinName } from '../types/skin';
 import { defaultSkin } from './default';
 import { slateSkin } from './slate';
+import { drafterSkin } from './drafter';
 /**
  * Resolve a skin prop to a complete FlowDropSkin object.
  *
@@ -10,4 +11,4 @@ import { slateSkin } from './slate';
  *   → minimal skin tokens + { primary: '#e11d48' }
  */
 export declare function resolveSkin(skin: FlowDropSkin | FlowDropSkinName | undefined): FlowDropSkin;
-export { defaultSkin, slateSkin };
+export { defaultSkin, slateSkin, drafterSkin };

package/dist/skins/index.js

@@ -1,8 +1,10 @@
 import { defaultSkin } from './default';
 import { slateSkin } from './slate';
+import { drafterSkin } from './drafter';
 const builtinSkins = {
     default: defaultSkin,
-    slate: slateSkin
+    slate: slateSkin,
+    drafter: drafterSkin
 };
 /**
  * Resolve a skin prop to a complete FlowDropSkin object.
@@ -27,4 +29,4 @@ export function resolveSkin(skin) {
     }
     return skin;
 }
-export { defaultSkin, slateSkin };
+export { defaultSkin, slateSkin, drafterSkin };

package/dist/stores/apiContext.d.ts

@@ -40,6 +40,17 @@ export declare class ApiContext {
      * Discards any previously built client so the next access rebuilds it.
      */
     configure(config: EndpointConfig, authProvider?: AuthProvider): void;
+    /**
+     * Swap the auth provider at runtime — e.g. on login or logout — without
+     * reconfiguring endpoints or remounting. Propagates to the live client so
+     * in-flight components keep working against the same instance.
+     *
+     * Per-instance services read `fd.api.authProvider` per request, so they pick
+     * up the new provider on their next call automatically.
+     *
+     * @param authProvider - The new authentication provider
+     */
+    setAuthProvider(authProvider: AuthProvider): void;
     /** Whether {@link configure} has been called with a usable config. */
     isConfigured(): boolean;
 }

package/dist/stores/apiContext.js

@@ -58,6 +58,21 @@ export class ApiContext {
         // Drop the cached client so it picks up the new config/auth on next access.
         this.#client = null;
     }
+    /**
+     * Swap the auth provider at runtime — e.g. on login or logout — without
+     * reconfiguring endpoints or remounting. Propagates to the live client so
+     * in-flight components keep working against the same instance.
+     *
+     * Per-instance services read `fd.api.authProvider` per request, so they pick
+     * up the new provider on their next call automatically.
+     *
+     * @param authProvider - The new authentication provider
+     */
+    setAuthProvider(authProvider) {
+        this.#authProvider = authProvider;
+        // Keep the cached client (and its in-flight consumers) in sync.
+        this.#client?.setAuthProvider(authProvider);
+    }
     /** Whether {@link configure} has been called with a usable config. */
     isConfigured() {
         return Boolean(this.#config);

package/dist/stores/categoriesStore.svelte.js

@@ -28,7 +28,6 @@ export class CategoriesStore {
     #categories = $state([...DEFAULT_CATEGORIES]);
     /** Derived lookup map: category name → CategoryDefinition. */
     #categoryMap = $derived((() => {
-        // eslint-disable-next-line svelte/prefer-svelte-reactivity -- rebuilt whole inside $derived, never mutated afterwards
         const map = new Map();
         for (const cat of this.#categories) {
             map.set(cat.name, cat);

package/dist/stores/playgroundStore.svelte.js

@@ -109,7 +109,6 @@ export class PlaygroundStore {
     // acknowledged optimistic write, overwritten by the next server response.
     #isExecuting = $derived(this.#currentSession?.status === 'running');
     /** Cleanups for active subscribeToSessionStatus effect roots. */
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- non-reactive bookkeeping registry; nothing renders from it
     #statusSubscriptions = new Set();
     /** Bound mutation facade — see {@link PlaygroundStoreActions}. */
     actions;
@@ -354,7 +353,6 @@ export class PlaygroundStore {
         if (!this.#currentSession)
             return;
         const executions = [...(this.#currentSession.executions ?? [])];
-        // eslint-disable-next-line svelte/prefer-svelte-reactivity -- transient local for dedup within this call
         const seenIds = new Set(executions.map((e) => e.id));
         let added = false;
         let gainedMainRun = false;