@d34dman/flowdrop 0.0.42 → 0.0.44

package/dist/helpers/workflowEditorHelper.js

@@ -153,20 +153,32 @@ export class EdgeStylingHelper {
             : null;
         // Determine edge category (loopback takes precedence)
         const edgeCategory = this.getEdgeCategoryWithLoopback(edge, sourcePortDataType);
-        // Edge color constants (matching CSS tokens in base.css)
-        const EDGE_COLORS = {
-            trigger: '#111827', // --color-ref-gray-900
-            tool: '#f59e0b', // --color-ref-amber-500
-            loopback: '#6b7280', // --color-ref-gray-500
-            data: '#9ca3af' // --color-ref-gray-400
-        };
+        // Detect current theme for marker colors
+        // Marker colors are baked in at creation time, so we check the theme here
+        const isDarkMode = typeof document !== 'undefined' &&
+            document.documentElement.getAttribute('data-theme') === 'dark';
+        // Edge color constants for marker arrows - matched to CSS token values
+        // These match the --fd-edge-* tokens in tokens.css for consistency
+        const EDGE_COLORS = isDarkMode
+            ? {
+                trigger: '#eaeaef', // --_gray-3 (light for dark mode visibility)
+                tool: '#fbbf24', // Brighter amber for dark mode
+                loopback: '#a3a3ad', // --_gray-5
+                data: '#a3a3ad' // --_gray-5
+            }
+            : {
+                trigger: '#18181c', // --_gray-9 (dark for light mode)
+                tool: '#f59e0b', // --_amber-2
+                loopback: '#71717b', // --_gray-6
+                data: '#a3a3ad' // --_gray-5
+            };
         // Apply styling based on edge category
         // CSS classes handle styling via tokens; inline styles are fallback
         switch (edgeCategory) {
             case 'loopback':
                 // Loopback edges: dashed gray line for loop iteration
                 edge.style =
-                    'stroke: var(--flowdrop-edge-loopback-color); stroke-dasharray: 5 5; stroke-width: var(--flowdrop-edge-loopback-width);';
+                    '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,
@@ -178,7 +190,7 @@ export class EdgeStylingHelper {
             case 'trigger':
                 // Trigger edges: solid dark line for control flow
                 edge.style =
-                    'stroke: var(--flowdrop-edge-trigger-color); stroke-width: var(--flowdrop-edge-trigger-width);';
+                    'stroke: var(--fd-edge-trigger); stroke-width: var(--fd-edge-trigger-width);';
                 edge.class = 'flowdrop--edge--trigger';
                 edge.markerEnd = {
                     type: MarkerType.ArrowClosed,
@@ -189,7 +201,7 @@ export class EdgeStylingHelper {
                 break;
             case 'tool':
                 // Tool edges: dashed amber line
-                edge.style = 'stroke: var(--flowdrop-edge-tool-color); stroke-dasharray: 5 3;';
+                edge.style = 'stroke: var(--fd-edge-tool); stroke-dasharray: 5 3;';
                 edge.class = 'flowdrop--edge--tool';
                 edge.markerEnd = {
                     type: MarkerType.ArrowClosed,
@@ -201,7 +213,7 @@ export class EdgeStylingHelper {
             case 'data':
             default:
                 // Data edges: normal gray line
-                edge.style = 'stroke: var(--flowdrop-edge-data-color);';
+                edge.style = 'stroke: var(--fd-edge-data);';
                 edge.class = 'flowdrop--edge--data';
                 edge.markerEnd = {
                     type: MarkerType.ArrowClosed,

package/dist/index.d.ts

@@ -34,3 +34,8 @@ export * from './form/index.js';
 export * from './display/index.js';
 export * from './playground/index.js';
 export * from './editor/index.js';
+export { default as ThemeToggle } from './components/ThemeToggle.svelte';
+export { default as SettingsPanel } from './components/SettingsPanel.svelte';
+export { default as SettingsModal } from './components/SettingsModal.svelte';
+export { settingsStore, themeSettings, editorSettings, uiSettings, behaviorSettings, apiSettings, syncStatusStore, theme, resolvedTheme, updateSettings, resetSettings, getSettings, setTheme, toggleTheme, cycleTheme, initializeTheme, initializeSettings, setSettingsService, syncSettingsToApi, loadSettingsFromApi, onSettingsChange } from './stores/settingsStore.js';
+export { settingsApi, SettingsService, createSettingsService, setSettingsEndpointConfig, getSettingsEndpointConfig } from './services/settingsService.js';

package/dist/index.js

@@ -55,3 +55,16 @@ export * from './playground/index.js';
 // Editor Exports (includes @xyflow/svelte and auto-registers builtin nodes)
 // ============================================================================
 export * from './editor/index.js';
+// ============================================================================
+// Theme Component Export
+// ============================================================================
+export { default as ThemeToggle } from './components/ThemeToggle.svelte';
+// ============================================================================
+// Settings Component & Store Exports
+// ============================================================================
+export { default as SettingsPanel } from './components/SettingsPanel.svelte';
+export { default as SettingsModal } from './components/SettingsModal.svelte';
+// Settings store exports
+export { settingsStore, themeSettings, editorSettings, uiSettings, behaviorSettings, apiSettings, syncStatusStore, theme, resolvedTheme, updateSettings, resetSettings, getSettings, setTheme, toggleTheme, cycleTheme, initializeTheme, initializeSettings, setSettingsService, syncSettingsToApi, loadSettingsFromApi, onSettingsChange } from './stores/settingsStore.js';
+// Settings service exports
+export { settingsApi, SettingsService, createSettingsService, setSettingsEndpointConfig, getSettingsEndpointConfig } from './services/settingsService.js';

package/dist/services/autoSaveService.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Auto-save Service for FlowDrop
+ *
+ * Handles automatic saving of workflows based on user settings.
+ * Uses behaviorSettings for auto-save configuration.
+ *
+ * @module services/autoSaveService
+ */
+/**
+ * Auto-save configuration options
+ */
+interface AutoSaveOptions {
+    /**
+     * Callback function to save the workflow
+     * Should return a promise that resolves when save is complete
+     */
+    onSave: () => Promise<void>;
+    /**
+     * Optional callback for save errors
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Optional callback for successful saves
+     */
+    onSuccess?: () => void;
+}
+/**
+ * Initialize auto-save functionality based on user settings
+ *
+ * Creates an interval-based auto-save mechanism that:
+ * - Subscribes to behaviorSettings for auto-save configuration
+ * - Monitors the isDirtyStore to check for unsaved changes
+ * - Calls the provided save callback when dirty and auto-save is enabled
+ *
+ * @param options - Auto-save configuration options
+ * @returns Cleanup function to stop auto-save and unsubscribe from stores
+ *
+ * @example
+ * ```typescript
+ * // In App.svelte onMount
+ * const cleanupAutoSave = initAutoSave({
+ *   onSave: async () => {
+ *     await saveWorkflow();
+ *   },
+ *   onError: (error) => {
+ *     console.error("Auto-save failed:", error);
+ *   },
+ *   onSuccess: () => {
+ *     console.log("Auto-saved workflow");
+ *   }
+ * });
+ *
+ * // In onDestroy
+ * cleanupAutoSave();
+ * ```
+ */
+export declare function initAutoSave(options: AutoSaveOptions): () => void;
+/**
+ * Create an auto-save manager with more control
+ *
+ * This is a class-based alternative to initAutoSave for cases where
+ * you need more fine-grained control over the auto-save behavior.
+ */
+export declare class AutoSaveManager {
+    private intervalId;
+    private isSaving;
+    private settingsUnsubscriber;
+    private onSave;
+    private onError?;
+    private onSuccess?;
+    /**
+     * Create a new AutoSaveManager
+     *
+     * @param options - Auto-save configuration options
+     */
+    constructor(options: AutoSaveOptions);
+    /**
+     * Start the auto-save manager
+     *
+     * Subscribes to settings changes and starts the auto-save interval.
+     */
+    start(): void;
+    /**
+     * Stop the auto-save manager
+     *
+     * Clears the interval and unsubscribes from settings.
+     */
+    stop(): void;
+    /**
+     * Force an immediate save (if dirty)
+     *
+     * @returns Promise that resolves when save is complete
+     */
+    saveNow(): Promise<void>;
+    /**
+     * Check if auto-save is currently enabled
+     */
+    isEnabled(): boolean;
+    /**
+     * Check if auto-save is currently running
+     */
+    isRunning(): boolean;
+    /**
+     * Update the interval based on current settings
+     */
+    private updateInterval;
+    /**
+     * Perform the save operation
+     */
+    private performSave;
+}
+export {};

package/dist/services/autoSaveService.js

@@ -0,0 +1,223 @@
+/**
+ * Auto-save Service for FlowDrop
+ *
+ * Handles automatic saving of workflows based on user settings.
+ * Uses behaviorSettings for auto-save configuration.
+ *
+ * @module services/autoSaveService
+ */
+import { get } from "svelte/store";
+import { behaviorSettings } from "../stores/settingsStore.js";
+import { isDirtyStore, isDirty } from "../stores/workflowStore.js";
+/**
+ * Initialize auto-save functionality based on user settings
+ *
+ * Creates an interval-based auto-save mechanism that:
+ * - Subscribes to behaviorSettings for auto-save configuration
+ * - Monitors the isDirtyStore to check for unsaved changes
+ * - Calls the provided save callback when dirty and auto-save is enabled
+ *
+ * @param options - Auto-save configuration options
+ * @returns Cleanup function to stop auto-save and unsubscribe from stores
+ *
+ * @example
+ * ```typescript
+ * // In App.svelte onMount
+ * const cleanupAutoSave = initAutoSave({
+ *   onSave: async () => {
+ *     await saveWorkflow();
+ *   },
+ *   onError: (error) => {
+ *     console.error("Auto-save failed:", error);
+ *   },
+ *   onSuccess: () => {
+ *     console.log("Auto-saved workflow");
+ *   }
+ * });
+ *
+ * // In onDestroy
+ * cleanupAutoSave();
+ * ```
+ */
+export function initAutoSave(options) {
+    const { onSave, onError, onSuccess } = options;
+    const state = {
+        intervalId: null,
+        isSaving: false,
+        settingsUnsubscriber: null,
+        dirtyUnsubscriber: null
+    };
+    /**
+     * Perform auto-save if conditions are met
+     */
+    async function performAutoSave() {
+        // Skip if already saving or not dirty
+        if (state.isSaving || !isDirty()) {
+            return;
+        }
+        state.isSaving = true;
+        try {
+            await onSave();
+            onSuccess?.();
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            console.error("Auto-save failed:", err);
+            onError?.(err);
+        }
+        finally {
+            state.isSaving = false;
+        }
+    }
+    /**
+     * Start or restart the auto-save interval based on current settings
+     */
+    function updateAutoSaveInterval() {
+        // Clear existing interval
+        if (state.intervalId) {
+            clearInterval(state.intervalId);
+            state.intervalId = null;
+        }
+        const settings = get(behaviorSettings);
+        // Start new interval if auto-save is enabled
+        if (settings.autoSave) {
+            state.intervalId = setInterval(() => {
+                performAutoSave();
+            }, settings.autoSaveInterval);
+        }
+    }
+    // Subscribe to settings changes to react to auto-save toggle/interval changes
+    state.settingsUnsubscriber = behaviorSettings.subscribe(() => {
+        updateAutoSaveInterval();
+    });
+    // Initial setup
+    updateAutoSaveInterval();
+    /**
+     * Cleanup function to stop auto-save and unsubscribe from stores
+     */
+    return function cleanup() {
+        // Clear the interval
+        if (state.intervalId) {
+            clearInterval(state.intervalId);
+            state.intervalId = null;
+        }
+        // Unsubscribe from stores
+        if (state.settingsUnsubscriber) {
+            state.settingsUnsubscriber();
+            state.settingsUnsubscriber = null;
+        }
+        if (state.dirtyUnsubscriber) {
+            state.dirtyUnsubscriber();
+            state.dirtyUnsubscriber = null;
+        }
+    };
+}
+/**
+ * Create an auto-save manager with more control
+ *
+ * This is a class-based alternative to initAutoSave for cases where
+ * you need more fine-grained control over the auto-save behavior.
+ */
+export class AutoSaveManager {
+    intervalId = null;
+    isSaving = false;
+    settingsUnsubscriber = null;
+    onSave;
+    onError;
+    onSuccess;
+    /**
+     * Create a new AutoSaveManager
+     *
+     * @param options - Auto-save configuration options
+     */
+    constructor(options) {
+        this.onSave = options.onSave;
+        this.onError = options.onError;
+        this.onSuccess = options.onSuccess;
+    }
+    /**
+     * Start the auto-save manager
+     *
+     * Subscribes to settings changes and starts the auto-save interval.
+     */
+    start() {
+        if (this.settingsUnsubscriber) {
+            return; // Already started
+        }
+        this.settingsUnsubscriber = behaviorSettings.subscribe(() => {
+            this.updateInterval();
+        });
+        this.updateInterval();
+    }
+    /**
+     * Stop the auto-save manager
+     *
+     * Clears the interval and unsubscribes from settings.
+     */
+    stop() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        if (this.settingsUnsubscriber) {
+            this.settingsUnsubscriber();
+            this.settingsUnsubscriber = null;
+        }
+    }
+    /**
+     * Force an immediate save (if dirty)
+     *
+     * @returns Promise that resolves when save is complete
+     */
+    async saveNow() {
+        await this.performSave();
+    }
+    /**
+     * Check if auto-save is currently enabled
+     */
+    isEnabled() {
+        return get(behaviorSettings).autoSave;
+    }
+    /**
+     * Check if auto-save is currently running
+     */
+    isRunning() {
+        return this.intervalId !== null;
+    }
+    /**
+     * Update the interval based on current settings
+     */
+    updateInterval() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        const settings = get(behaviorSettings);
+        if (settings.autoSave) {
+            this.intervalId = setInterval(() => {
+                this.performSave();
+            }, settings.autoSaveInterval);
+        }
+    }
+    /**
+     * Perform the save operation
+     */
+    async performSave() {
+        if (this.isSaving || !isDirty()) {
+            return;
+        }
+        this.isSaving = true;
+        try {
+            await this.onSave();
+            this.onSuccess?.();
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            console.error("Auto-save failed:", err);
+            this.onError?.(err);
+        }
+        finally {
+            this.isSaving = false;
+        }
+    }
+}

package/dist/services/settingsService.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Settings Service for FlowDrop
+ *
+ * Provides API operations for user preferences/settings using the
+ * configurable endpoint system. Integrates with settingsStore for
+ * hybrid localStorage + API persistence.
+ *
+ * @module services/settingsService
+ */
+import type { FlowDropSettings, PartialSettings } from "../types/settings.js";
+import type { EndpointConfig } from "../config/endpoints.js";
+/**
+ * Set the endpoint configuration for settings API calls
+ *
+ * @param config - Endpoint configuration
+ */
+export declare function setSettingsEndpointConfig(config: EndpointConfig): void;
+/**
+ * Get the current endpoint configuration
+ *
+ * @returns Current endpoint configuration or null
+ */
+export declare function getSettingsEndpointConfig(): EndpointConfig | null;
+/**
+ * Settings API namespace
+ */
+export declare const settingsApi: {
+    /**
+     * Get user preferences from the backend
+     *
+     * @returns User's saved preferences
+     */
+    getPreferences(): Promise<FlowDropSettings>;
+    /**
+     * Save user preferences to the backend
+     *
+     * @param settings - Complete settings to save
+     */
+    savePreferences(settings: FlowDropSettings): Promise<void>;
+    /**
+     * Partially update user preferences
+     *
+     * @param partial - Partial settings to merge
+     */
+    patchPreferences(partial: PartialSettings): Promise<FlowDropSettings>;
+};
+/**
+ * Settings service class for integration with settingsStore
+ *
+ * @example
+ * ```typescript
+ * import { SettingsService } from "@d34dman/flowdrop";
+ * import { setSettingsService } from "@d34dman/flowdrop";
+ *
+ * const service = new SettingsService(endpointConfig);
+ * setSettingsService(service);
+ * ```
+ */
+export declare class SettingsService {
+    private config;
+    /**
+     * Create a new settings service instance
+     *
+     * @param config - Endpoint configuration
+     */
+    constructor(config: EndpointConfig);
+    /**
+     * Get user preferences from the backend
+     *
+     * @returns User's saved preferences
+     */
+    getPreferences(): Promise<FlowDropSettings>;
+    /**
+     * Save user preferences to the backend
+     *
+     * @param settings - Complete settings to save
+     */
+    savePreferences(settings: FlowDropSettings): Promise<void>;
+    /**
+     * Partially update user preferences
+     *
+     * @param partial - Partial settings to merge
+     */
+    patchPreferences(partial: PartialSettings): Promise<FlowDropSettings>;
+}
+/**
+ * Create a settings service instance
+ *
+ * @param config - Endpoint configuration
+ * @returns SettingsService instance
+ */
+export declare function createSettingsService(config: EndpointConfig): SettingsService;