@d34dman/flowdrop 0.0.60 → 0.0.62

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

@@ -1,5 +1,5 @@
 /**
- * Port Coordinate Store
+ * Port Coordinate Store (Svelte 5 Runes)
  *
  * General-purpose store that maintains absolute canvas-space coordinates
  * for all port handles in the workflow. Built from SvelteFlow's internal
@@ -12,10 +12,10 @@
  * which SvelteFlow already maintains for all node types. This avoids replicating
  * CSS positioning logic and stays automatically accurate.
  */
-import { writable, get } from 'svelte/store';
+import { SvelteMap } from 'svelte/reactivity';
 import { ProximityConnectHelper } from '../helpers/proximityConnect.js';
-/** Store holding all port absolute coordinates, keyed by handleId */
-export const portCoordinateStore = writable(new Map());
+/** Reactive state holding all port absolute coordinates, keyed by handleId */
+let coordinates = $state(new SvelteMap());
 /**
  * Parse a handle ID to extract nodeId, direction, and portId.
  * Handle ID format: ${nodeId}-${direction}-${portId}
@@ -37,7 +37,7 @@ function parseHandleId(handleId) {
 }
 /**
  * Build a dataType lookup map from a node's ports.
- * Maps portId → dataType for quick lookup when processing handle bounds.
+ * Maps portId -> dataType for quick lookup when processing handle bounds.
  */
 function buildPortDataTypeLookup(node) {
     const lookup = new Map();
@@ -64,7 +64,7 @@ function computeNodePortCoordinates(node, internalNode) {
         return [];
     const posAbs = internalNode.internals.positionAbsolute;
     const dataTypeLookup = buildPortDataTypeLookup(node);
-    const coordinates = [];
+    const result = [];
     const allHandles = [...(handleBounds.source ?? []), ...(handleBounds.target ?? [])];
     for (const handle of allHandles) {
         if (!handle.id)
@@ -76,7 +76,7 @@ function computeNodePortCoordinates(node, internalNode) {
         const dataType = dataTypeLookup.get(lookupKey);
         if (!dataType)
             continue;
-        coordinates.push({
+        result.push({
             x: posAbs.x + handle.x + handle.width / 2,
             y: posAbs.y + handle.y + handle.height / 2,
             handleId: handle.id,
@@ -85,7 +85,7 @@ function computeNodePortCoordinates(node, internalNode) {
             dataType
         });
     }
-    return coordinates;
+    return result;
 }
 /**
  * Rebuild coordinates for ALL nodes from SvelteFlow internals.
@@ -95,7 +95,7 @@ function computeNodePortCoordinates(node, internalNode) {
  * @param getInternalNode - SvelteFlow's getInternalNode function
  */
 export function rebuildAllPortCoordinates(nodes, getInternalNode) {
-    const map = new Map();
+    const map = new SvelteMap();
     for (const node of nodes) {
         const internalNode = getInternalNode(node.id);
         if (!internalNode)
@@ -105,7 +105,7 @@ export function rebuildAllPortCoordinates(nodes, getInternalNode) {
             map.set(coord.handleId, coord);
         }
     }
-    portCoordinateStore.set(map);
+    coordinates = map;
 }
 /**
  * Update coordinates for a single node (efficient for drag updates).
@@ -118,21 +118,17 @@ export function updateNodePortCoordinates(node, getInternalNode) {
     const internalNode = getInternalNode(node.id);
     if (!internalNode)
         return;
-    portCoordinateStore.update((map) => {
-        // Remove old entries for this node
-        for (const [key, coord] of map) {
-            if (coord.nodeId === node.id) {
-                map.delete(key);
-            }
+    // Remove old entries for this node
+    for (const [key, coord] of coordinates) {
+        if (coord.nodeId === node.id) {
+            coordinates.delete(key);
         }
-        // Add new entries
-        const coords = computeNodePortCoordinates(node, internalNode);
-        for (const coord of coords) {
-            map.set(coord.handleId, coord);
-        }
-        // Return new reference for reactivity
-        return new Map(map);
-    });
+    }
+    // Add new entries
+    const coords = computeNodePortCoordinates(node, internalNode);
+    for (const coord of coords) {
+        coordinates.set(coord.handleId, coord);
+    }
 }
 /**
  * Remove all coordinates for a node (on node delete).
@@ -140,14 +136,11 @@ export function updateNodePortCoordinates(node, getInternalNode) {
  * @param nodeId - ID of the node to remove
  */
 export function removeNodePortCoordinates(nodeId) {
-    portCoordinateStore.update((map) => {
-        for (const [key, coord] of map) {
-            if (coord.nodeId === nodeId) {
-                map.delete(key);
-            }
+    for (const [key, coord] of coordinates) {
+        if (coord.nodeId === nodeId) {
+            coordinates.delete(key);
         }
-        return new Map(map);
-    });
+    }
 }
 /**
  * Get coordinates for a specific handle.
@@ -156,7 +149,7 @@ export function removeNodePortCoordinates(nodeId) {
  * @returns The port coordinate or undefined if not found
  */
 export function getPortCoordinate(handleId) {
-    return get(portCoordinateStore).get(handleId);
+    return coordinates.get(handleId);
 }
 /**
  * Get all coordinates for a specific node.
@@ -166,7 +159,7 @@ export function getPortCoordinate(handleId) {
  */
 export function getNodePortCoordinates(nodeId) {
     const result = [];
-    for (const coord of get(portCoordinateStore).values()) {
+    for (const coord of coordinates.values()) {
         if (coord.nodeId === nodeId) {
             result.push(coord);
         }
@@ -174,10 +167,20 @@ export function getNodePortCoordinates(nodeId) {
     return result;
 }
 /**
- * Get the current snapshot of all port coordinates (non-reactive).
+ * Get the current snapshot of all port coordinates.
+ * Returns the reactive SvelteMap directly.
  *
  * @returns Current port coordinate map
  */
 export function getPortCoordinateSnapshot() {
-    return get(portCoordinateStore);
+    return coordinates;
+}
+/**
+ * Get the reactive port coordinates state.
+ * Useful for components that need to reactively read the coordinates.
+ *
+ * @returns The reactive port coordinate map
+ */
+export function getPortCoordinates() {
+    return coordinates;
 }

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;
 /**