@d34dman/flowdrop 0.0.61 → 0.0.62

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

@@ -1,9 +1,9 @@
 /**
- * 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
  *
@@ -12,47 +12,58 @@
 import type { FlowDropSettings, ThemeSettings, EditorSettings, UISettings, BehaviorSettings, ApiSettings, PartialSettings, SyncStatus, ResolvedTheme, ThemePreference, SettingsChangeCallback, SettingsCategory } from '../types/settings.js';
 export type { ThemePreference, ResolvedTheme } from '../types/settings.js';
 /**
- * Main settings store (read-only access to current settings)
+ * Get current settings (replaces settingsStore derived store)
  */
-export declare const settingsStore: import("svelte/store").Readable<FlowDropSettings>;
+export declare function getSettings(): FlowDropSettings;
 /**
- * Sync status store for UI indicators
+ * Get sync status (replaces syncStatusStore derived store)
  */
-export declare const syncStatusStore: import("svelte/store").Readable<{
+export declare function getSyncStatus(): {
     status: SyncStatus;
-    lastSyncedAt: number;
-    error: string;
-}>;
+    lastSyncedAt: number | null;
+    error: string | null;
+};
 /**
- * Theme settings store
+ * Get theme settings (replaces themeSettings derived store)
  */
-export declare const themeSettings: import("svelte/store").Readable<ThemeSettings>;
+export declare function getThemeSettings(): ThemeSettings;
 /**
- * Editor settings store
+ * Get editor settings (replaces editorSettings derived store)
  */
-export declare const editorSettings: import("svelte/store").Readable<EditorSettings>;
+export declare function getEditorSettings(): EditorSettings;
 /**
- * UI settings store
+ * Get UI settings (replaces uiSettings derived store)
  */
-export declare const uiSettings: import("svelte/store").Readable<UISettings>;
+export declare function getUiSettings(): UISettings;
 /**
- * Behavior settings store
+ * Get behavior settings (replaces behaviorSettings derived store)
  */
-export declare const behaviorSettings: import("svelte/store").Readable<BehaviorSettings>;
+export declare function getBehaviorSettings(): BehaviorSettings;
 /**
- * API settings store
+ * Get API settings (replaces apiSettings derived store)
  */
-export declare const apiSettings: import("svelte/store").Readable<ApiSettings>;
+export declare function getApiSettings(): ApiSettings;
 /**
- * Theme preference store
- * Derived from themeSettings for convenient access
+ * Get theme preference (replaces theme derived store)
  */
-export declare const theme: import("svelte/store").Readable<ThemePreference>;
+export declare function getTheme(): ThemePreference;
 /**
- * Resolved theme - the actual theme applied ('light' or 'dark')
+ * Get resolved theme - the actual theme applied ('light' or 'dark')
  * When preference is 'auto', resolves based on system preference
+ * (replaces resolvedTheme derived store)
+ */
+export declare function getResolvedTheme(): ResolvedTheme;
+/**
+ * Get system theme state (for internal use)
+ */
+export declare function getSystemThemeState(): ResolvedTheme;
+/**
+ * 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 declare const resolvedTheme: import("svelte/store").Readable<ResolvedTheme>;
+export declare function initThemeListener(): () => void;
 /**
  * Update settings with partial values
  *
@@ -65,10 +76,6 @@ export declare function updateSettings(partial: PartialSettings): void;
  * @param categories - Optional categories to reset (all if not specified)
  */
 export declare function resetSettings(categories?: SettingsCategory[]): void;
-/**
- * Get current settings synchronously
- */
-export declare function getSettings(): FlowDropSettings;
 /**
  * Set the theme preference
  *
@@ -84,6 +91,12 @@ export declare function toggleTheme(): void;
  * Cycle through theme options: light -> dark -> auto -> light
  */
 export declare function cycleTheme(): void;
+/**
+ * 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 declare function cleanupThemeSubscription(): void;
 /**
  * Initialize the theme system
  * Should be called once on app startup
@@ -91,6 +104,10 @@ export declare function cycleTheme(): void;
  * 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 declare function initializeTheme(): void;
 /**

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');
         }
     }
 }