@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/stores/{settingsStore.js → settingsStore.svelte.js}

@@ -1,16 +1,16 @@
 /**
- * Settings Store for FlowDrop
+ * Settings Store for FlowDrop (Svelte 5 Runes)
  *
  * Provides unified state management for all user-configurable settings with:
  * - Hybrid persistence (localStorage primary, optional API sync)
- * - Category-specific derived stores for performance
+ * - Category-specific getter functions for performance
  * - Deep merge support for partial updates
  * - Integrated theme system with system preference detection
  *
  * @module stores/settingsStore
  */
-import { writable, derived, get } from 'svelte/store';
 import { DEFAULT_SETTINGS, SETTINGS_STORAGE_KEY } from '../types/settings.js';
+import { logger } from '../utils/logger.js';
 // =========================================================================
 // Internal State
 // =========================================================================
@@ -44,7 +44,7 @@ function loadFromStorage() {
         }
     }
     catch (error) {
-        console.warn('Failed to load settings from localStorage:', error);
+        logger.warn('Failed to load settings from localStorage:', error);
     }
     return null;
 }
@@ -61,7 +61,7 @@ function saveToStorage(settings) {
         localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
     }
     catch (error) {
-        console.warn('Failed to save settings to localStorage:', error);
+        logger.warn('Failed to save settings to localStorage:', error);
     }
 }
 // =========================================================================
@@ -105,16 +105,16 @@ function deepMergeSettings(target, source) {
     return result;
 }
 // =========================================================================
-// Main Settings Store
+// Main Settings Store (Rune-based)
 // =========================================================================
 /**
  * Initial state loaded from localStorage or defaults
  */
 const initialSettings = loadFromStorage() ?? DEFAULT_SETTINGS;
 /**
- * Main settings store state
+ * Main settings store state using $state rune
  */
-const storeState = writable({
+let storeState = $state({
     settings: initialSettings,
     initialized: true,
     syncStatus: 'idle',
@@ -122,48 +122,85 @@ const storeState = writable({
     syncError: null
 });
 /**
- * Main settings store (read-only access to current settings)
- */
-export const settingsStore = derived(storeState, ($state) => $state.settings);
-/**
- * Sync status store for UI indicators
+ * System theme preference using $state rune
+ * Updates when system preference changes
  */
-export const syncStatusStore = derived(storeState, ($state) => ({
-    status: $state.syncStatus,
-    lastSyncedAt: $state.lastSyncedAt,
-    error: $state.syncError
-}));
+let systemThemeState = $state(typeof window !== 'undefined' ? getSystemTheme() : 'light');
 // =========================================================================
-// Category-Specific Derived Stores
+// Getter Functions (replacing derived stores)
 // =========================================================================
 /**
- * Theme settings store
+ * Get current settings (replaces settingsStore derived store)
+ */
+export function getSettings() {
+    return storeState.settings;
+}
+/**
+ * Get sync status (replaces syncStatusStore derived store)
+ */
+export function getSyncStatus() {
+    return {
+        status: storeState.syncStatus,
+        lastSyncedAt: storeState.lastSyncedAt,
+        error: storeState.syncError
+    };
+}
+/**
+ * Get theme settings (replaces themeSettings derived store)
+ */
+export function getThemeSettings() {
+    return storeState.settings.theme;
+}
+/**
+ * Get editor settings (replaces editorSettings derived store)
+ */
+export function getEditorSettings() {
+    return storeState.settings.editor;
+}
+/**
+ * Get UI settings (replaces uiSettings derived store)
+ */
+export function getUiSettings() {
+    return storeState.settings.ui;
+}
+/**
+ * Get behavior settings (replaces behaviorSettings derived store)
  */
-export const themeSettings = derived(settingsStore, ($settings) => $settings.theme);
+export function getBehaviorSettings() {
+    return storeState.settings.behavior;
+}
 /**
- * Editor settings store
+ * Get API settings (replaces apiSettings derived store)
  */
-export const editorSettings = derived(settingsStore, ($settings) => $settings.editor);
+export function getApiSettings() {
+    return storeState.settings.api;
+}
 /**
- * UI settings store
+ * Get theme preference (replaces theme derived store)
  */
-export const uiSettings = derived(settingsStore, ($settings) => $settings.ui);
+export function getTheme() {
+    return storeState.settings.theme.preference;
+}
 /**
- * Behavior settings store
+ * Get resolved theme - the actual theme applied ('light' or 'dark')
+ * When preference is 'auto', resolves based on system preference
+ * (replaces resolvedTheme derived store)
  */
-export const behaviorSettings = derived(settingsStore, ($settings) => $settings.behavior);
+export function getResolvedTheme() {
+    if (storeState.settings.theme.preference === 'auto') {
+        return systemThemeState;
+    }
+    return storeState.settings.theme.preference;
+}
 /**
- * API settings store
+ * Get system theme state (for internal use)
  */
-export const apiSettings = derived(settingsStore, ($settings) => $settings.api);
+export function getSystemThemeState() {
+    return systemThemeState;
+}
 // =========================================================================
 // Theme System
 // =========================================================================
-/**
- * System theme preference store
- * Updates when system preference changes
- */
-const systemTheme = writable(typeof window !== 'undefined' ? getSystemTheme() : 'light');
 /**
  * Get the system's color scheme preference
  */
@@ -173,35 +210,25 @@ function getSystemTheme() {
     }
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
-// Listen for system theme changes
-if (typeof window !== 'undefined') {
+/**
+ * Initialize the system theme change listener.
+ * Sets up a media query listener for the system color scheme preference.
+ *
+ * @returns Cleanup function that removes the listener
+ */
+export function initThemeListener() {
+    if (typeof window === 'undefined') {
+        return () => { };
+    }
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleSystemThemeChange = (event) => {
-        systemTheme.set(event.matches ? 'dark' : 'light');
+        systemThemeState = event.matches ? 'dark' : 'light';
+    };
+    mediaQuery.addEventListener('change', handleSystemThemeChange);
+    return () => {
+        mediaQuery.removeEventListener('change', handleSystemThemeChange);
     };
-    if (mediaQuery.addEventListener) {
-        mediaQuery.addEventListener('change', handleSystemThemeChange);
-    }
-    else {
-        // Fallback for older browsers
-        mediaQuery.addListener(handleSystemThemeChange);
-    }
 }
-/**
- * Theme preference store
- * Derived from themeSettings for convenient access
- */
-export const theme = derived(themeSettings, ($theme) => $theme.preference);
-/**
- * Resolved theme - the actual theme applied ('light' or 'dark')
- * When preference is 'auto', resolves based on system preference
- */
-export const resolvedTheme = derived([themeSettings, systemTheme], ([$themeSettings, $systemTheme]) => {
-    if ($themeSettings.preference === 'auto') {
-        return $systemTheme;
-    }
-    return $themeSettings.preference;
-});
 // =========================================================================
 // Settings Update Functions
 // =========================================================================
@@ -220,7 +247,7 @@ function notifyChange(category, key, previousValue, newValue) {
             listener(event);
         }
         catch (error) {
-            console.error('Settings change listener error:', error);
+            logger.error('Settings change listener error:', error);
         }
     });
 }
@@ -236,29 +263,27 @@ function getCategoryAsRecord(settings, category) {
  * @param partial - Partial settings to merge
  */
 export function updateSettings(partial) {
-    storeState.update((state) => {
-        const previousSettings = state.settings;
-        const newSettings = deepMergeSettings(state.settings, partial);
-        // Persist to localStorage immediately
-        saveToStorage(newSettings);
-        // Notify listeners for each changed category
-        for (const category of Object.keys(partial)) {
-            const partialCategory = partial[category];
-            if (partialCategory && typeof partialCategory === 'object') {
-                for (const key of Object.keys(partialCategory)) {
-                    const prevCat = getCategoryAsRecord(previousSettings, category);
-                    const newCat = getCategoryAsRecord(newSettings, category);
-                    if (prevCat[key] !== newCat[key]) {
-                        notifyChange(category, key, prevCat[key], newCat[key]);
-                    }
+    const previousSettings = storeState.settings;
+    const newSettings = deepMergeSettings(storeState.settings, partial);
+    // Persist to localStorage immediately
+    saveToStorage(newSettings);
+    // Notify listeners for each changed category
+    for (const category of Object.keys(partial)) {
+        const partialCategory = partial[category];
+        if (partialCategory && typeof partialCategory === 'object') {
+            for (const key of Object.keys(partialCategory)) {
+                const prevCat = getCategoryAsRecord(previousSettings, category);
+                const newCat = getCategoryAsRecord(newSettings, category);
+                if (prevCat[key] !== newCat[key]) {
+                    notifyChange(category, key, prevCat[key], newCat[key]);
                 }
             }
         }
-        return {
-            ...state,
-            settings: newSettings
-        };
-    });
+    }
+    storeState = {
+        ...storeState,
+        settings: newSettings
+    };
 }
 /**
  * Reset settings to defaults
@@ -274,21 +299,13 @@ export function resetSettings(categories) {
         updateSettings(partial);
     }
     else {
-        storeState.update((state) => {
-            saveToStorage(DEFAULT_SETTINGS);
-            return {
-                ...state,
-                settings: DEFAULT_SETTINGS
-            };
-        });
+        saveToStorage(DEFAULT_SETTINGS);
+        storeState = {
+            ...storeState,
+            settings: DEFAULT_SETTINGS
+        };
     }
 }
-/**
- * Get current settings synchronously
- */
-export function getSettings() {
-    return get(settingsStore);
-}
 // =========================================================================
 // Theme Actions
 // =========================================================================
@@ -305,8 +322,8 @@ export function setTheme(newTheme) {
  * If currently 'auto', switches to the opposite of system preference
  */
 export function toggleTheme() {
-    const currentTheme = get(theme);
-    const currentResolved = get(resolvedTheme);
+    const currentTheme = getTheme();
+    const currentResolved = getResolvedTheme();
     if (currentTheme === 'auto') {
         setTheme(currentResolved === 'dark' ? 'light' : 'dark');
     }
@@ -318,7 +335,7 @@ export function toggleTheme() {
  * Cycle through theme options: light -> dark -> auto -> light
  */
 export function cycleTheme() {
-    const currentTheme = get(theme);
+    const currentTheme = getTheme();
     switch (currentTheme) {
         case 'light':
             setTheme('dark');
@@ -342,6 +359,22 @@ function applyTheme(resolved) {
     }
     document.documentElement.setAttribute('data-theme', resolved);
 }
+/**
+ * Stored cleanup function for the theme effect.
+ * Retained so it can be called by cleanupThemeSubscription().
+ */
+let themeEffectCleanup = null;
+/**
+ * Clean up the theme subscription created by initializeTheme().
+ * Call this when tearing down the settings system (e.g., in tests or
+ * component cleanup) to prevent memory leaks.
+ */
+export function cleanupThemeSubscription() {
+    if (themeEffectCleanup) {
+        themeEffectCleanup();
+        themeEffectCleanup = null;
+    }
+}
 /**
  * Initialize the theme system
  * Should be called once on app startup
@@ -349,13 +382,21 @@ function applyTheme(resolved) {
  * This function:
  * 1. Applies the current resolved theme to the document
  * 2. Sets up reactivity to apply theme changes
+ *
+ * Note: In Svelte 5, we use $effect for reactivity. Since $effect can only
+ * be used in component context or $effect.root, we use $effect.root here
+ * to create a standalone reactive scope.
  */
 export function initializeTheme() {
-    const resolved = get(resolvedTheme);
+    const resolved = getResolvedTheme();
     applyTheme(resolved);
-    // Subscribe to resolved theme changes and apply them
-    resolvedTheme.subscribe((theme) => {
-        applyTheme(theme);
+    // Create a standalone reactive root to watch for theme changes.
+    // $effect.root returns a cleanup function.
+    themeEffectCleanup = $effect.root(() => {
+        $effect(() => {
+            const currentResolved = getResolvedTheme();
+            applyTheme(currentResolved);
+        });
     });
 }
 /**
@@ -388,31 +429,31 @@ export function setSettingsService(service) {
  */
 export async function syncSettingsToApi() {
     if (!settingsService) {
-        console.warn('Settings service not configured for API sync');
+        logger.warn('Settings service not configured for API sync');
         return;
     }
-    storeState.update((state) => ({
-        ...state,
+    storeState = {
+        ...storeState,
         syncStatus: 'syncing',
         syncError: null
-    }));
+    };
     try {
-        const currentSettings = get(settingsStore);
+        const currentSettings = getSettings();
         await settingsService.savePreferences(currentSettings);
-        storeState.update((state) => ({
-            ...state,
+        storeState = {
+            ...storeState,
             syncStatus: 'synced',
             lastSyncedAt: Date.now(),
             syncError: null
-        }));
+        };
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : 'Failed to sync settings';
-        storeState.update((state) => ({
-            ...state,
+        storeState = {
+            ...storeState,
             syncStatus: 'error',
             syncError: errorMessage
-        }));
+        };
         throw error;
     }
 }
@@ -423,34 +464,34 @@ export async function syncSettingsToApi() {
  */
 export async function loadSettingsFromApi() {
     if (!settingsService) {
-        console.warn('Settings service not configured for API sync');
+        logger.warn('Settings service not configured for API sync');
         return;
     }
-    storeState.update((state) => ({
-        ...state,
+    storeState = {
+        ...storeState,
         syncStatus: 'syncing',
         syncError: null
-    }));
+    };
     try {
-        const apiSettings = await settingsService.getPreferences();
-        const mergedSettings = deepMergeSettings(DEFAULT_SETTINGS, apiSettings);
-        storeState.update((state) => ({
-            ...state,
+        const apiSettingsData = await settingsService.getPreferences();
+        const mergedSettings = deepMergeSettings(DEFAULT_SETTINGS, apiSettingsData);
+        storeState = {
+            ...storeState,
             settings: mergedSettings,
             syncStatus: 'synced',
             lastSyncedAt: Date.now(),
             syncError: null
-        }));
+        };
         // Also persist to localStorage
         saveToStorage(mergedSettings);
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : 'Failed to load settings from API';
-        storeState.update((state) => ({
-            ...state,
+        storeState = {
+            ...storeState,
             syncStatus: 'error',
             syncError: errorMessage
-        }));
+        };
         throw error;
     }
 }
@@ -480,12 +521,12 @@ export function onSettingsChange(callback) {
 export async function initializeSettings(options) {
     // Apply custom defaults if provided
     if (options?.defaults) {
-        const currentSettings = get(settingsStore);
+        const currentSettings = getSettings();
         const withDefaults = deepMergeSettings(currentSettings, options.defaults);
-        storeState.update((state) => ({
-            ...state,
+        storeState = {
+            ...storeState,
             settings: withDefaults
-        }));
+        };
         saveToStorage(withDefaults);
     }
     // Initialize theme system
@@ -497,7 +538,7 @@ export async function initializeSettings(options) {
         }
         catch {
             // Silently fail - local settings are still available
-            console.warn('Failed to sync settings from API on initialization');
+            logger.warn('Failed to sync settings from API on initialization');
         }
     }
 }

package/dist/stores/{workflowStore.d.ts → workflowStore.svelte.d.ts}

@@ -1,22 +1,113 @@
 /**
- * Workflow Store for FlowDrop
+ * Workflow Store for FlowDrop (Svelte 5 Runes)
  *
  * Provides global state management for workflows with dirty state tracking
  * and undo/redo history integration.
  *
+ * **Important: Single-instance only.** This store uses module-level singletons.
+ * Only one FlowDrop editor instance per page is supported. Mounting multiple
+ * FlowDrop editors on the same page will cause them to share workflow state.
+ *
  * @module stores/workflowStore
  */
 import type { Workflow, WorkflowNode, WorkflowEdge } from '../types';
 import type { WorkflowChangeType } from '../types/events.js';
-/** Global workflow state */
-export declare const workflowStore: import("svelte/store").Writable<Workflow>;
+type WorkflowMetadata = NonNullable<Workflow['metadata']>;
+/**
+ * Get the current workflow store value reactively
+ *
+ * @returns The current workflow or null
+ */
+export declare function getWorkflowStore(): Workflow | null;
+/**
+ * Get the current dirty state reactively
+ *
+ * @returns true if there are unsaved changes
+ */
+export declare function getIsDirty(): boolean;
+/**
+ * Get the workflow ID reactively
+ *
+ * @returns The workflow ID or null
+ */
+export declare function getWorkflowId(): string | null;
+/**
+ * Get the workflow name reactively
+ *
+ * @returns The workflow name or 'Untitled Workflow'
+ */
+export declare function getWorkflowName(): string;
+/**
+ * Get the workflow nodes reactively
+ *
+ * @returns Array of workflow nodes
+ */
+export declare function getWorkflowNodes(): WorkflowNode[];
+/**
+ * Get the workflow edges reactively
+ *
+ * @returns Array of workflow edges
+ */
+export declare function getWorkflowEdges(): WorkflowEdge[];
 /**
- * Store for tracking if there are unsaved changes
+ * Get the workflow metadata reactively
  *
- * This is set to true whenever the workflow changes after initialization.
- * It can be reset to false by calling markAsSaved().
+ * @returns The workflow metadata with defaults
  */
-export declare const isDirtyStore: import("svelte/store").Writable<boolean>;
+export declare function getWorkflowMetadata(): WorkflowMetadata;
+/**
+ * Get the current workflow format reactively
+ *
+ * @returns The workflow format string
+ */
+export declare function getWorkflowFormat(): string;
+/**
+ * Get workflow change summary reactively (useful for triggering saves)
+ *
+ * @returns Object with nodes, edges, and name
+ */
+export declare function getWorkflowChanged(): {
+    nodes: WorkflowNode[];
+    edges: WorkflowEdge[];
+    name: string;
+};
+/**
+ * Get workflow validation state reactively
+ *
+ * @returns Validation info object
+ */
+export declare function getWorkflowValidation(): {
+    hasNodes: boolean;
+    hasEdges: boolean;
+    nodeCount: number;
+    edgeCount: number;
+    isValid: boolean;
+};
+/**
+ * Get workflow metadata change summary reactively
+ *
+ * @returns Metadata change info
+ */
+export declare function getWorkflowMetadataChanged(): {
+    createdAt: string;
+    updatedAt: string;
+    version: string;
+};
+/**
+ * Get connected handles reactively
+ *
+ * Provides a Set of all handle IDs that are currently connected to edges.
+ * Used by node components to implement hideUnconnectedHandles functionality.
+ *
+ * @example
+ * ```typescript
+ * import { getConnectedHandles } from './workflowStore.svelte.js';
+ *
+ * // Check if a specific handle is connected
+ * const isConnected = getConnectedHandles().has('node-1-input-data');
+ * ```
+ */
+export declare function getConnectedHandles(): Set<string>;
 /**
  * Set the dirty state change callback
  *
@@ -36,7 +127,7 @@ export declare function setOnWorkflowChange(callback: ((workflow: Workflow, chan
  */
 export declare function markAsSaved(): void;
 /**
- * Check if there are unsaved changes
+ * Check if there are unsaved changes (non-reactive version for plain TS)
  *
  * @returns true if there are unsaved changes
  */
@@ -64,32 +155,11 @@ export declare function isHistoryEnabled(): boolean;
  */
 export declare function setRestoringFromHistory(restoring: boolean): void;
 /**
- * Get the current workflow
+ * Get the current workflow (non-reactive version for plain TS)
  *
  * @returns The current workflow or null
  */
 export declare function getWorkflow(): Workflow | null;
-/** Derived store for workflow ID */
-export declare const workflowId: import("svelte/store").Readable<string>;
-/** Derived store for workflow name */
-export declare const workflowName: import("svelte/store").Readable<string>;
-/** Derived store for workflow nodes */
-export declare const workflowNodes: import("svelte/store").Readable<WorkflowNode[]>;
-/** Derived store for workflow edges */
-export declare const workflowEdges: import("svelte/store").Readable<WorkflowEdge[]>;
-/** Derived store for workflow metadata */
-export declare const workflowMetadata: import("svelte/store").Readable<{
-    version: string;
-    createdAt: string;
-    updatedAt: string;
-    author?: string;
-    tags?: string[];
-    versionId?: string;
-    updateNumber?: number;
-    format?: import("../types").WorkflowFormat;
-}>;
-/** Derived store for the current workflow format */
-export declare const workflowFormat: import("svelte/store").Readable<import("../types").WorkflowFormat>;
 /**
  * Actions for updating the workflow
  *
@@ -187,38 +257,4 @@ export declare const workflowActions: {
      */
     pushHistory: (description?: string, workflow?: Workflow) => void;
 };
-/** Derived store for workflow changes (useful for triggering saves) */
-export declare const workflowChanged: import("svelte/store").Readable<{
-    nodes: WorkflowNode[];
-    edges: WorkflowEdge[];
-    name: string;
-}>;
-/** Derived store for workflow validation */
-export declare const workflowValidation: import("svelte/store").Readable<{
-    hasNodes: boolean;
-    hasEdges: boolean;
-    nodeCount: number;
-    edgeCount: number;
-    isValid: boolean;
-}>;
-/** Derived store for workflow metadata changes */
-export declare const workflowMetadataChanged: import("svelte/store").Readable<{
-    createdAt: string;
-    updatedAt: string;
-    version: string;
-}>;
-/**
- * Derived store for connected handles
- *
- * Provides a Set of all handle IDs that are currently connected to edges.
- * Used by node components to implement hideUnconnectedHandles functionality.
- *
- * @example
- * ```typescript
- * import { connectedHandles } from './workflowStore.js';
- *
- * // Check if a specific handle is connected
- * const isConnected = $connectedHandles.has('node-1-input-data');
- * ```
- */
-export declare const connectedHandles: import("svelte/store").Readable<Set<string>>;
+export {};