@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/stores/portCoordinateStore.svelte.d.ts

@@ -11,60 +11,66 @@
  * Coordinates are derived from SvelteFlow's InternalNode.internals.handleBounds
  * which SvelteFlow already maintains for all node types. This avoids replicating
  * CSS positioning logic and stays automatically accurate.
- */
-import type { WorkflowNode as WorkflowNodeType, PortCoordinate, PortCoordinateMap } from '../types/index.js';
-import type { InternalNode } from '@xyflow/svelte';
-/**
- * Rebuild coordinates for ALL nodes from SvelteFlow internals.
- * Call on initial workflow load (after render) and after bulk changes.
- *
- * @param nodes - All workflow nodes
- * @param getInternalNode - SvelteFlow's getInternalNode function
- */
-export declare function rebuildAllPortCoordinates(nodes: WorkflowNodeType[], getInternalNode: (id: string) => InternalNode | undefined): void;
-/**
- * Update coordinates for a single node (efficient for drag updates).
- * Only recomputes ports for the specified node.
- *
- * @param node - The workflow node to update
- * @param getInternalNode - SvelteFlow's getInternalNode function
- */
-export declare function updateNodePortCoordinates(node: WorkflowNodeType, getInternalNode: (id: string) => InternalNode | undefined): void;
-/**
- * Remove all coordinates for a node (on node delete).
- *
- * @param nodeId - ID of the node to remove
- */
-export declare function removeNodePortCoordinates(nodeId: string): void;
-/**
- * Clear all port coordinates (lifecycle cleanup).
- */
-export declare function clearPortCoordinates(): void;
-/**
- * Get coordinates for a specific handle.
  *
- * @param handleId - The handle ID to look up
- * @returns The port coordinate or undefined if not found
- */
-export declare function getPortCoordinate(handleId: string): PortCoordinate | undefined;
-/**
- * Get all coordinates for a specific node.
+ * The reactive state lives in the {@link PortCoordinateStore} class — one per
+ * FlowDrop instance, resolved in components via `getInstance().portCoordinates`.
  *
- * @param nodeId - The node ID to look up
- * @returns Array of port coordinates for the node
+ * @module stores/portCoordinateStore
  */
-export declare function getNodePortCoordinates(nodeId: string): PortCoordinate[];
-/**
- * Get the current snapshot of all port coordinates.
- * Returns the reactive SvelteMap directly.
- *
- * @returns Current port coordinate map
- */
-export declare function getPortCoordinateSnapshot(): PortCoordinateMap;
+import type { WorkflowNode as WorkflowNodeType, PortCoordinate, PortCoordinateMap } from '../types/index.js';
+import type { InternalNode } from '@xyflow/svelte';
 /**
- * Get the reactive port coordinates state.
- * Useful for components that need to reactively read the coordinates.
+ * Per-instance absolute port coordinates, keyed by handleId.
  *
- * @returns The reactive port coordinate map
+ * A single SvelteMap mutated in place: per-key reads (getPortCoordinate)
+ * only react to the keys they touch, and Svelte coalesces synchronous
+ * mutations into one flush, so bulk updates stay cheap.
  */
-export declare function getPortCoordinates(): PortCoordinateMap;
+export declare class PortCoordinateStore {
+    #private;
+    /**
+     * Rebuild coordinates for ALL nodes from SvelteFlow internals.
+     * Call on initial workflow load (after render) and after bulk changes.
+     *
+     * @param nodes - All workflow nodes
+     * @param getInternalNode - SvelteFlow's getInternalNode function
+     */
+    rebuildAll(nodes: WorkflowNodeType[], getInternalNode: (id: string) => InternalNode | undefined): void;
+    /**
+     * Update coordinates for a single node (efficient for drag updates).
+     * Only recomputes ports for the specified node.
+     *
+     * @param node - The workflow node to update
+     * @param getInternalNode - SvelteFlow's getInternalNode function
+     */
+    updateNode(node: WorkflowNodeType, getInternalNode: (id: string) => InternalNode | undefined): void;
+    /**
+     * Remove all coordinates for a node (on node delete).
+     *
+     * @param nodeId - ID of the node to remove
+     */
+    removeNode(nodeId: string): void;
+    /**
+     * Clear all port coordinates (lifecycle cleanup).
+     */
+    clear(): void;
+    /**
+     * Get coordinates for a specific handle.
+     *
+     * @param handleId - The handle ID to look up
+     * @returns The port coordinate or undefined if not found
+     */
+    get(handleId: string): PortCoordinate | undefined;
+    /**
+     * Get all coordinates for a specific node.
+     *
+     * @param nodeId - The node ID to look up
+     * @returns Array of port coordinates for the node
+     */
+    getForNode(nodeId: string): PortCoordinate[];
+    /**
+     * The reactive port coordinate map.
+     * Returns the reactive SvelteMap directly.
+     */
+    get coordinates(): PortCoordinateMap;
+}

package/dist/stores/portCoordinateStore.svelte.js

@@ -11,12 +11,15 @@
  * Coordinates are derived from SvelteFlow's InternalNode.internals.handleBounds
  * which SvelteFlow already maintains for all node types. This avoids replicating
  * CSS positioning logic and stays automatically accurate.
+ *
+ * The reactive state lives in the {@link PortCoordinateStore} class — one per
+ * FlowDrop instance, resolved in components via `getInstance().portCoordinates`.
+ *
+ * @module stores/portCoordinateStore
  */
 import { SvelteMap } from 'svelte/reactivity';
 import { untrack } from 'svelte';
 import { ProximityConnectHelper } from '../helpers/proximityConnect.js';
-/** 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}
@@ -92,111 +95,119 @@ function computeNodePortCoordinates(node, internalNode) {
     }
     return result;
 }
+// =========================================================================
+// PortCoordinateStore (per-instance reactive state)
+// =========================================================================
 /**
- * Rebuild coordinates for ALL nodes from SvelteFlow internals.
- * Call on initial workflow load (after render) and after bulk changes.
+ * Per-instance absolute port coordinates, keyed by handleId.
  *
- * @param nodes - All workflow nodes
- * @param getInternalNode - SvelteFlow's getInternalNode function
+ * A single SvelteMap mutated in place: per-key reads (getPortCoordinate)
+ * only react to the keys they touch, and Svelte coalesces synchronous
+ * mutations into one flush, so bulk updates stay cheap.
  */
-export function rebuildAllPortCoordinates(nodes, getInternalNode) {
-    const map = new SvelteMap();
-    for (const node of nodes) {
+export class PortCoordinateStore {
+    /**
+     * Reactive state holding all port absolute coordinates, keyed by handleId.
+     */
+    #coordinates = new SvelteMap();
+    /**
+     * Rebuild coordinates for ALL nodes from SvelteFlow internals.
+     * Call on initial workflow load (after render) and after bulk changes.
+     *
+     * @param nodes - All workflow nodes
+     * @param getInternalNode - SvelteFlow's getInternalNode function
+     */
+    rebuildAll(nodes, getInternalNode) {
+        this.#coordinates.clear();
+        for (const node of nodes) {
+            const internalNode = getInternalNode(node.id);
+            if (!internalNode)
+                continue;
+            const coords = computeNodePortCoordinates(node, internalNode);
+            for (const coord of coords) {
+                this.#coordinates.set(coord.handleId, coord);
+            }
+        }
+    }
+    /**
+     * Update coordinates for a single node (efficient for drag updates).
+     * Only recomputes ports for the specified node.
+     *
+     * @param node - The workflow node to update
+     * @param getInternalNode - SvelteFlow's getInternalNode function
+     */
+    updateNode(node, getInternalNode) {
         const internalNode = getInternalNode(node.id);
         if (!internalNode)
-            continue;
-        const coords = computeNodePortCoordinates(node, internalNode);
-        for (const coord of coords) {
-            map.set(coord.handleId, coord);
+            return;
+        // Collect this node's stale keys without tracking the read (callers run
+        // inside $effect), then mutate in place — only the touched keys notify.
+        const stale = [];
+        untrack(() => {
+            for (const [key, coord] of this.#coordinates) {
+                if (coord.nodeId === node.id)
+                    stale.push(key);
+            }
+        });
+        for (const key of stale) {
+            this.#coordinates.delete(key);
         }
-    }
-    coordinates = map;
-}
-/**
- * Update coordinates for a single node (efficient for drag updates).
- * Only recomputes ports for the specified node.
- *
- * @param node - The workflow node to update
- * @param getInternalNode - SvelteFlow's getInternalNode function
- */
-export function updateNodePortCoordinates(node, getInternalNode) {
-    const internalNode = getInternalNode(node.id);
-    if (!internalNode)
-        return;
-    // Build a new map with all entries except this node's, then add recomputed entries.
-    // Single assignment fires one reactive notification instead of N deletes + M sets.
-    const newMap = new SvelteMap();
-    untrack(() => {
-        for (const [key, coord] of coordinates) {
-            if (coord.nodeId !== node.id)
-                newMap.set(key, coord);
+        for (const coord of computeNodePortCoordinates(node, internalNode)) {
+            this.#coordinates.set(coord.handleId, coord);
         }
-    });
-    for (const coord of computeNodePortCoordinates(node, internalNode)) {
-        newMap.set(coord.handleId, coord);
     }
-    coordinates = newMap;
-}
-/**
- * Remove all coordinates for a node (on node delete).
- *
- * @param nodeId - ID of the node to remove
- */
-export function removeNodePortCoordinates(nodeId) {
-    const newMap = new SvelteMap();
-    untrack(() => {
-        for (const [key, coord] of coordinates) {
-            if (coord.nodeId !== nodeId)
-                newMap.set(key, coord);
+    /**
+     * Remove all coordinates for a node (on node delete).
+     *
+     * @param nodeId - ID of the node to remove
+     */
+    removeNode(nodeId) {
+        const stale = [];
+        untrack(() => {
+            for (const [key, coord] of this.#coordinates) {
+                if (coord.nodeId === nodeId)
+                    stale.push(key);
+            }
+        });
+        for (const key of stale) {
+            this.#coordinates.delete(key);
         }
-    });
-    coordinates = newMap;
-}
-/**
- * Clear all port coordinates (lifecycle cleanup).
- */
-export function clearPortCoordinates() {
-    coordinates = new SvelteMap();
-}
-/**
- * Get coordinates for a specific handle.
- *
- * @param handleId - The handle ID to look up
- * @returns The port coordinate or undefined if not found
- */
-export function getPortCoordinate(handleId) {
-    return coordinates.get(handleId);
-}
-/**
- * Get all coordinates for a specific node.
- *
- * @param nodeId - The node ID to look up
- * @returns Array of port coordinates for the node
- */
-export function getNodePortCoordinates(nodeId) {
-    const result = [];
-    for (const coord of coordinates.values()) {
-        if (coord.nodeId === nodeId) {
-            result.push(coord);
+    }
+    /**
+     * Clear all port coordinates (lifecycle cleanup).
+     */
+    clear() {
+        this.#coordinates.clear();
+    }
+    /**
+     * Get coordinates for a specific handle.
+     *
+     * @param handleId - The handle ID to look up
+     * @returns The port coordinate or undefined if not found
+     */
+    get(handleId) {
+        return this.#coordinates.get(handleId);
+    }
+    /**
+     * Get all coordinates for a specific node.
+     *
+     * @param nodeId - The node ID to look up
+     * @returns Array of port coordinates for the node
+     */
+    getForNode(nodeId) {
+        const result = [];
+        for (const coord of this.#coordinates.values()) {
+            if (coord.nodeId === nodeId) {
+                result.push(coord);
+            }
         }
+        return result;
+    }
+    /**
+     * The reactive port coordinate map.
+     * Returns the reactive SvelteMap directly.
+     */
+    get coordinates() {
+        return this.#coordinates;
     }
-    return result;
-}
-/**
- * Get the current snapshot of all port coordinates.
- * Returns the reactive SvelteMap directly.
- *
- * @returns Current port coordinate map
- */
-export function getPortCoordinateSnapshot() {
-    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.svelte.d.ts

@@ -99,11 +99,14 @@ export declare function cycleTheme(): void;
 export declare function cleanupThemeSubscription(): void;
 /**
  * Initialize the theme system
- * Should be called once on app startup
+ * Called on app startup; safe to call more than once (idempotent) — the
+ * mount functions call it before mounting and <App> calls it on mount so
+ * direct component embeds get the persisted theme applied too.
  *
  * This function:
  * 1. Applies the current resolved theme to the document
  * 2. Sets up reactivity to apply theme changes
+ * 3. Subscribes to the system color-scheme so 'auto' tracks it live
  *
  * 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

package/dist/stores/settingsStore.svelte.js

@@ -27,20 +27,18 @@ const changeListeners = new Set();
 // localStorage Persistence
 // =========================================================================
 /**
- * Load settings from localStorage
+ * Load the raw persisted settings snapshot from localStorage
  *
- * @returns Saved settings or null if not found/invalid
+ * @returns The parsed partial snapshot, or null if not found/invalid
  */
-function loadFromStorage() {
+function loadRawFromStorage() {
     if (typeof window === 'undefined') {
         return null;
     }
     try {
         const saved = localStorage.getItem(SETTINGS_STORAGE_KEY);
         if (saved) {
-            const parsed = JSON.parse(saved);
-            // Deep merge with defaults to handle missing properties
-            return deepMergeSettings(DEFAULT_SETTINGS, parsed);
+            return JSON.parse(saved);
         }
     }
     catch (error) {
@@ -48,6 +46,19 @@ function loadFromStorage() {
     }
     return null;
 }
+/**
+ * Load settings from localStorage
+ *
+ * @returns Saved settings merged over defaults, or null if not found/invalid
+ */
+function loadFromStorage() {
+    const raw = loadRawFromStorage();
+    if (!raw) {
+        return null;
+    }
+    // Deep merge with defaults to handle missing properties
+    return deepMergeSettings(DEFAULT_SETTINGS, raw);
+}
 /**
  * Save settings to localStorage
  *
@@ -377,11 +388,14 @@ export function cleanupThemeSubscription() {
 }
 /**
  * Initialize the theme system
- * Should be called once on app startup
+ * Called on app startup; safe to call more than once (idempotent) — the
+ * mount functions call it before mounting and <App> calls it on mount so
+ * direct component embeds get the persisted theme applied too.
  *
  * This function:
  * 1. Applies the current resolved theme to the document
  * 2. Sets up reactivity to apply theme changes
+ * 3. Subscribes to the system color-scheme so 'auto' tracks it live
  *
  * 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
@@ -390,14 +404,25 @@ export function cleanupThemeSubscription() {
 export function initializeTheme() {
     const resolved = getResolvedTheme();
     applyTheme(resolved);
+    // Already wired (theme is page-global) — don't stack effect roots or
+    // media-query listeners on repeated mounts.
+    if (themeEffectCleanup) {
+        return;
+    }
+    // Track the system preference so 'auto' reacts to OS theme changes.
+    const stopThemeListener = initThemeListener();
     // Create a standalone reactive root to watch for theme changes.
     // $effect.root returns a cleanup function.
-    themeEffectCleanup = $effect.root(() => {
+    const stopEffectRoot = $effect.root(() => {
         $effect(() => {
             const currentResolved = getResolvedTheme();
             applyTheme(currentResolved);
         });
     });
+    themeEffectCleanup = () => {
+        stopThemeListener();
+        stopEffectRoot();
+    };
 }
 /**
  * Check if theme system is initialized
@@ -519,15 +544,25 @@ export function onSettingsChange(callback) {
  * @param options - Initialization options
  */
 export async function initializeSettings(options) {
-    // Apply custom defaults if provided
+    // Apply custom defaults if provided.
+    //
+    // Precedence (lowest to highest): library DEFAULT_SETTINGS < host
+    // `defaults` < the user's persisted snapshot. Host defaults SEED values
+    // the user has never saved — they must not override a returning user's
+    // persisted choices, and they are not eagerly written to storage
+    // (storage stays user-driven, written by updateSettings on real
+    // changes). Before 2.0.0 this merged host defaults OVER the persisted
+    // snapshot and re-saved it, which reset e.g. the user's dark-mode
+    // preference on every page load for hosts passing a `settings` mount
+    // option.
     if (options?.defaults) {
-        const currentSettings = getSettings();
-        const withDefaults = deepMergeSettings(currentSettings, options.defaults);
+        const seeded = deepMergeSettings(DEFAULT_SETTINGS, options.defaults);
+        const raw = loadRawFromStorage();
+        const withDefaults = raw ? deepMergeSettings(seeded, raw) : seeded;
         storeState = {
             ...storeState,
             settings: withDefaults
         };
-        saveToStorage(withDefaults);
     }
     // Initialize theme system
     initializeTheme();