@smartnet360/svelte-components 0.0.102 → 0.0.104

package/dist/core/CoverageMap/visualization/ColorSchemes.js

@@ -0,0 +1,377 @@
+/**
+ * Color Schemes
+ *
+ * This module defines color schemes for coverage visualization.
+ * Supports multiple visualization styles:
+ * - Heatmap: Gradient from strong to weak signal
+ * - Categorical: Discrete quality levels
+ * - Single color: Opacity-based (for sector identification)
+ *
+ * All colors designed to be:
+ * - Colorblind-friendly (where possible)
+ * - Print-friendly
+ * - Intuitive (red = strong, blue = weak for heatmap)
+ */
+// ============================================================================
+// PREDEFINED COLOR SCHEMES
+// ============================================================================
+/**
+ * Heatmap - Red to Blue gradient
+ *
+ * Classic heatmap where:
+ * - Red = Excellent signal (hot)
+ * - Orange/Yellow = Good signal (warm)
+ * - Green = Fair signal (cool)
+ * - Blue = Poor signal (cold)
+ * - Gray = No signal
+ *
+ * This is intuitive for most users.
+ */
+export const HEATMAP_RED_BLUE = {
+    name: 'Heatmap (Red → Blue)',
+    description: 'Classic heatmap gradient from strong (red) to weak (blue)',
+    stops: [
+        { value: -60, color: '#FF0000' }, // Excellent (bright red)
+        { value: -70, color: '#FF4500' }, // Excellent/Good transition (orange-red)
+        { value: -80, color: '#FFA500' }, // Good (orange)
+        { value: -90, color: '#FFFF00' }, // Fair (yellow)
+        { value: -100, color: '#00FF00' }, // Poor (green)
+        { value: -110, color: '#0000FF' } // Edge (blue)
+    ],
+    noSignalColor: '#CCCCCC' // Gray
+};
+/**
+ * Heatmap - Green to Red (inverted)
+ *
+ * Alternative where:
+ * - Green = Excellent (good status)
+ * - Yellow = Fair (warning)
+ * - Red = Poor (problem)
+ *
+ * More intuitive for traffic light metaphor.
+ */
+export const HEATMAP_GREEN_RED = {
+    name: 'Heatmap (Green → Red)',
+    description: 'Traffic light style: green (good) to red (bad)',
+    stops: [
+        { value: -60, color: '#00FF00' }, // Excellent (green)
+        { value: -70, color: '#7FFF00' }, // Good (yellow-green)
+        { value: -80, color: '#FFFF00' }, // Good/Fair (yellow)
+        { value: -90, color: '#FFA500' }, // Fair (orange)
+        { value: -100, color: '#FF4500' }, // Poor (orange-red)
+        { value: -110, color: '#FF0000' } // Edge (red)
+    ],
+    noSignalColor: '#CCCCCC'
+};
+/**
+ * Categorical - Discrete quality levels
+ *
+ * Uses distinct colors for each quality level.
+ * No gradients - clear boundaries.
+ * Good for presentations and reports.
+ */
+export const CATEGORICAL = {
+    name: 'Categorical',
+    description: 'Discrete colors for each quality level',
+    stops: [
+        { value: -70, color: '#2ECC40' }, // Excellent (green)
+        { value: -85, color: '#FFDC00' }, // Good (yellow)
+        { value: -95, color: '#FF851B' }, // Fair (orange)
+        { value: -105, color: '#FF4136' } // Poor (red)
+    ],
+    noSignalColor: '#AAAAAA'
+};
+/**
+ * Viridis-inspired (colorblind-friendly)
+ *
+ * Based on matplotlib's viridis colormap.
+ * Optimized for colorblind users and grayscale printing.
+ */
+export const VIRIDIS = {
+    name: 'Viridis (Colorblind-friendly)',
+    description: 'Perceptually uniform, colorblind-safe gradient',
+    stops: [
+        { value: -60, color: '#FDE724' }, // Excellent (yellow)
+        { value: -70, color: '#B8DE29' }, // Good (yellow-green)
+        { value: -80, color: '#73D055' }, // Good/Fair (green)
+        { value: -90, color: '#3CBB75' }, // Fair (teal)
+        { value: -100, color: '#20A387' }, // Poor (cyan)
+        { value: -110, color: '#287D8E' } // Edge (blue-cyan)
+    ],
+    noSignalColor: '#CCCCCC'
+};
+/**
+ * Plasma-inspired (high contrast)
+ *
+ * High contrast colormap for visibility.
+ */
+export const PLASMA = {
+    name: 'Plasma (High Contrast)',
+    description: 'High contrast gradient for visibility',
+    stops: [
+        { value: -60, color: '#F0F921' }, // Excellent (yellow)
+        { value: -70, color: '#FCA636' }, // Good (orange)
+        { value: -80, color: '#E16462' }, // Good/Fair (salmon)
+        { value: -90, color: '#B12A90' }, // Fair (magenta)
+        { value: -100, color: '#6A00A8' }, // Poor (purple)
+        { value: -110, color: '#0D0887' } // Edge (dark blue)
+    ],
+    noSignalColor: '#CCCCCC'
+};
+// ============================================================================
+// COLOR SCHEME REGISTRY
+// ============================================================================
+/**
+ * All available color schemes
+ */
+export const COLOR_SCHEMES = {
+    'heatmap-red-blue': HEATMAP_RED_BLUE,
+    'heatmap-green-red': HEATMAP_GREEN_RED,
+    categorical: CATEGORICAL,
+    viridis: VIRIDIS,
+    plasma: PLASMA
+};
+/**
+ * Default color scheme
+ */
+export const DEFAULT_COLOR_SCHEME = HEATMAP_RED_BLUE;
+// ============================================================================
+// COLOR INTERPOLATION
+// ============================================================================
+/**
+ * Interpolate color for a specific signal strength
+ *
+ * Uses linear interpolation between color stops to create
+ * smooth gradients.
+ *
+ * Process:
+ * 1. Find two nearest color stops
+ * 2. Calculate interpolation factor
+ * 3. Interpolate RGB components
+ * 4. Convert back to hex
+ *
+ * @param signalDbm - Signal strength in dBm
+ * @param scheme - Color scheme to use
+ * @returns Hex color string
+ *
+ * @example
+ * const color = interpolateColor(-75, HEATMAP_RED_BLUE);
+ * // Returns color between -70 (orange-red) and -80 (orange)
+ * // e.g., "#FF7400"
+ */
+export function interpolateColor(signalDbm, scheme) {
+    const stops = scheme.stops;
+    // Handle out-of-range values
+    if (signalDbm >= stops[0].value) {
+        return stops[0].color; // Strongest signal color
+    }
+    if (signalDbm <= stops[stops.length - 1].value) {
+        return stops[stops.length - 1].color; // Weakest signal color
+    }
+    // Handle no signal
+    if (signalDbm < -120) {
+        return scheme.noSignalColor;
+    }
+    // Find surrounding color stops
+    for (let i = 0; i < stops.length - 1; i++) {
+        const stop1 = stops[i];
+        const stop2 = stops[i + 1];
+        if (signalDbm >= stop2.value && signalDbm <= stop1.value) {
+            // Calculate interpolation factor (0 to 1)
+            const factor = (signalDbm - stop2.value) / (stop1.value - stop2.value);
+            // Interpolate between colors
+            return interpolateHexColors(stop2.color, stop1.color, factor);
+        }
+    }
+    // Fallback (shouldn't reach here)
+    return scheme.noSignalColor;
+}
+/**
+ * Get color for categorical quality level
+ *
+ * Returns discrete color based on quality level without interpolation.
+ *
+ * @param quality - Signal quality level
+ * @param scheme - Color scheme (optional, defaults to categorical)
+ * @returns Hex color string
+ */
+export function getCategoricalColor(quality, scheme = CATEGORICAL) {
+    switch (quality) {
+        case 'excellent':
+            return scheme.stops[0]?.color || '#00FF00';
+        case 'good':
+            return scheme.stops[1]?.color || '#FFFF00';
+        case 'fair':
+            return scheme.stops[2]?.color || '#FFA500';
+        case 'poor':
+            return scheme.stops[3]?.color || '#FF0000';
+        case 'no-signal':
+        default:
+            return scheme.noSignalColor;
+    }
+}
+/**
+ * Get color based on signal thresholds
+ *
+ * Convenience function that combines threshold checking and coloring.
+ *
+ * @param signalDbm - Signal strength in dBm
+ * @param thresholds - Signal quality thresholds
+ * @param scheme - Color scheme to use
+ * @returns Hex color string
+ */
+export function getColorForSignal(signalDbm, thresholds, scheme = DEFAULT_COLOR_SCHEME) {
+    // Determine quality
+    let quality;
+    if (signalDbm >= thresholds.excellent) {
+        quality = 'excellent';
+    }
+    else if (signalDbm >= thresholds.good) {
+        quality = 'good';
+    }
+    else if (signalDbm >= thresholds.fair) {
+        quality = 'fair';
+    }
+    else if (signalDbm >= thresholds.edge) {
+        quality = 'poor';
+    }
+    else {
+        quality = 'no-signal';
+    }
+    // Use interpolation for smooth gradients or categorical for discrete
+    if (scheme.name.includes('Heatmap') || scheme.name.includes('friendly')) {
+        return interpolateColor(signalDbm, scheme);
+    }
+    else {
+        return getCategoricalColor(quality, scheme);
+    }
+}
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+/**
+ * Interpolate between two hex colors
+ *
+ * Converts hex to RGB, interpolates, converts back.
+ *
+ * @param color1 - Start color (hex)
+ * @param color2 - End color (hex)
+ * @param factor - Interpolation factor (0 to 1)
+ * @returns Interpolated color (hex)
+ */
+function interpolateHexColors(color1, color2, factor) {
+    // Parse hex colors
+    const rgb1 = hexToRgb(color1);
+    const rgb2 = hexToRgb(color2);
+    if (!rgb1 || !rgb2) {
+        return color1; // Fallback
+    }
+    // Interpolate each component
+    const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * factor);
+    const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * factor);
+    const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * factor);
+    // Convert back to hex
+    return rgbToHex(r, g, b);
+}
+/**
+ * Convert hex color to RGB
+ *
+ * @param hex - Hex color string (e.g., "#FF0000" or "FF0000")
+ * @returns RGB object or null
+ */
+function hexToRgb(hex) {
+    // Remove # if present
+    hex = hex.replace(/^#/, '');
+    // Parse hex digits
+    if (hex.length === 3) {
+        // Short form: #RGB → #RRGGBB
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    if (hex.length !== 6) {
+        return null;
+    }
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) {
+        return null;
+    }
+    return { r, g, b };
+}
+/**
+ * Convert RGB to hex color
+ *
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns Hex color string
+ */
+function rgbToHex(r, g, b) {
+    // Clamp values to 0-255
+    r = Math.max(0, Math.min(255, r));
+    g = Math.max(0, Math.min(255, g));
+    b = Math.max(0, Math.min(255, b));
+    // Convert to hex
+    const rHex = r.toString(16).padStart(2, '0');
+    const gHex = g.toString(16).padStart(2, '0');
+    const bHex = b.toString(16).padStart(2, '0');
+    return `#${rHex}${gHex}${bHex}`.toUpperCase();
+}
+/**
+ * Add opacity to hex color
+ *
+ * Converts hex to rgba with specified opacity.
+ *
+ * @param hex - Hex color
+ * @param opacity - Opacity (0-1)
+ * @returns RGBA color string
+ *
+ * @example
+ * const semi = addOpacity("#FF0000", 0.5);
+ * // Returns: "rgba(255, 0, 0, 0.5)"
+ */
+export function addOpacity(hex, opacity) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return `rgba(0, 0, 0, ${opacity})`;
+    }
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
+/**
+ * Create legend entries for a color scheme
+ *
+ * Generates legend data for UI display.
+ *
+ * @param scheme - Color scheme
+ * @param thresholds - Signal thresholds
+ * @returns Array of legend entries
+ */
+export function createLegend(scheme, thresholds) {
+    return [
+        {
+            label: 'Excellent',
+            color: getColorForSignal(thresholds.excellent, thresholds, scheme),
+            range: `≥ ${thresholds.excellent} dBm`
+        },
+        {
+            label: 'Good',
+            color: getColorForSignal((thresholds.excellent + thresholds.good) / 2, thresholds, scheme),
+            range: `${thresholds.good} to ${thresholds.excellent} dBm`
+        },
+        {
+            label: 'Fair',
+            color: getColorForSignal((thresholds.good + thresholds.fair) / 2, thresholds, scheme),
+            range: `${thresholds.fair} to ${thresholds.good} dBm`
+        },
+        {
+            label: 'Poor',
+            color: getColorForSignal((thresholds.fair + thresholds.edge) / 2, thresholds, scheme),
+            range: `${thresholds.edge} to ${thresholds.fair} dBm`
+        },
+        {
+            label: 'No Signal',
+            color: scheme.noSignalColor,
+            range: `< ${thresholds.edge} dBm`
+        }
+    ];
+}

package/dist/core/TreeView/index.d.ts

@@ -8,7 +8,7 @@
  * - Indeterminate states for partial selection
  * - Expand/collapse functionality
  * - LocalStorage persistence
- * - Svelte store for reactive state
+ * - Svelte 5 runes for reactive state ($state, SvelteMap, SvelteSet)
  * - Bootstrap styling
  *
  * @example
@@ -34,7 +34,7 @@
  *   const treeStore = createTreeStore(config);
  *
  *   $effect(() => {
- *     console.log('Checked paths:', $treeStore.state.checkedPaths);
+ *     console.log('Checked paths:', treeStore.state.checkedPaths);
  *   });
  * </script>
  *
@@ -43,6 +43,6 @@
  */
 export { default as TreeView } from './TreeView.svelte';
 export { default as TreeNodeComponent } from './TreeNode.svelte';
-export { createTreeStore } from './tree.store';
+export { createTreeStore, TreeStore } from './tree.store.svelte';
 export type { TreeNode, TreeConfig, TreeState, NodeState, TreeStoreValue } from './tree.model';
-export { getParentPath, getAncestorPaths, isAncestor, getPathLevel, flattenTree, calculateIndeterminateStates, getDescendantPaths, buildInitialState } from './tree-utils';
+export { getParentPath, getAncestorPaths, isAncestor, getPathLevel, flattenTree, flattenTreeToSvelteMap, calculateIndeterminateStates, calculateIndeterminateStatesAsSvelteSet, getDescendantPaths, buildInitialState } from './tree-utils';

package/dist/core/TreeView/index.js

@@ -8,7 +8,7 @@
  * - Indeterminate states for partial selection
  * - Expand/collapse functionality
  * - LocalStorage persistence
- * - Svelte store for reactive state
+ * - Svelte 5 runes for reactive state ($state, SvelteMap, SvelteSet)
  * - Bootstrap styling
  *
  * @example
@@ -34,7 +34,7 @@
  *   const treeStore = createTreeStore(config);
  *
  *   $effect(() => {
- *     console.log('Checked paths:', $treeStore.state.checkedPaths);
+ *     console.log('Checked paths:', treeStore.state.checkedPaths);
  *   });
  * </script>
  *
@@ -44,7 +44,7 @@
 // Components
 export { default as TreeView } from './TreeView.svelte';
 export { default as TreeNodeComponent } from './TreeNode.svelte';
-// Store
-export { createTreeStore } from './tree.store';
+// Store (Svelte 5 runes-based implementation)
+export { createTreeStore, TreeStore } from './tree.store.svelte';
 // Utilities (for advanced usage)
-export { getParentPath, getAncestorPaths, isAncestor, getPathLevel, flattenTree, calculateIndeterminateStates, getDescendantPaths, buildInitialState } from './tree-utils';
+export { getParentPath, getAncestorPaths, isAncestor, getPathLevel, flattenTree, flattenTreeToSvelteMap, calculateIndeterminateStates, calculateIndeterminateStatesAsSvelteSet, getDescendantPaths, buildInitialState } from './tree-utils';

package/dist/core/TreeView/tree-utils.d.ts

@@ -2,6 +2,7 @@
  * Tree utility functions
  * Helper functions for path manipulation, tree flattening, and state management
  */
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import type { TreeNode, NodeState, TreeState, TreeConfig } from './tree.model';
 /**
  * Get parent path from a node path
@@ -26,6 +27,10 @@ export declare function getPathLevel(path: string, separator?: string): number;
  * Flatten tree structure into map of NodeState
  */
 export declare function flattenTree<T = any>(nodes: TreeNode<T>[], config: TreeConfig<T>, parentPath?: string, level?: number): Map<string, NodeState>;
+/**
+ * Flatten tree structure into SvelteMap for reactive state management (Svelte 5)
+ */
+export declare function flattenTreeToSvelteMap<T = any>(nodes: TreeNode<T>[], config: TreeConfig<T>, parentPath?: string, level?: number): SvelteMap<string, NodeState>;
 /**
  * Calculate which nodes should be indeterminate
  * A node is indeterminate if:
@@ -33,12 +38,18 @@ export declare function flattenTree<T = any>(nodes: TreeNode<T>[], config: TreeC
  * - Some (but not all) of its direct children are checked OR indeterminate
  */
 export declare function calculateIndeterminateStates(nodes: Map<string, NodeState>, checkedPaths: Set<string>): Set<string>;
+/**
+ * Calculate indeterminate states returning SvelteSet for reactive state management
+ * Same logic as calculateIndeterminateStates but returns SvelteSet
+ */
+export declare function calculateIndeterminateStatesAsSvelteSet(nodes: Map<string, NodeState>, checkedPaths: Set<string>): SvelteSet<string>;
 /**
  * Get all descendant paths of a node
  */
 export declare function getDescendantPaths(path: string, nodes: Map<string, NodeState>, separator?: string): string[];
 /**
  * Build initial TreeState from flattened nodes
+ * Works with both regular Map/Set and SvelteMap/SvelteSet
  */
 export declare function buildInitialState(nodes: Map<string, NodeState>, config: TreeConfig): TreeState;
 /**
@@ -51,6 +62,7 @@ export declare function getStorageKey(namespace: string, key: string): string;
 export declare function saveStateToStorage(namespace: string, state: TreeState): void;
 /**
  * Load state from localStorage
+ * Returns SvelteSet for reactive state management
  */
 export declare function loadStateFromStorage(namespace: string, state: TreeState): Partial<TreeState>;
 /**

package/dist/core/TreeView/tree-utils.js

@@ -2,6 +2,7 @@
  * Tree utility functions
  * Helper functions for path manipulation, tree flattening, and state management
  */
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { log } from '../logger';
 /**
  * Get parent path from a node path
@@ -74,6 +75,70 @@ export function flattenTree(nodes, config, parentPath = '', level = 0) {
     }
     return map;
 }
+/**
+ * Flatten tree structure into SvelteMap for reactive state management (Svelte 5)
+ */
+export function flattenTreeToSvelteMap(nodes, config, parentPath = '', level = 0) {
+    const map = new SvelteMap();
+    const separator = config.pathSeparator || ':';
+    for (const node of nodes) {
+        const path = parentPath ? `${parentPath}${separator}${node.id}` : node.id;
+        // Collect child paths
+        const childPaths = [];
+        if (node.children && node.children.length > 0) {
+            for (const child of node.children) {
+                childPaths.push(parentPath ? `${path}${separator}${child.id}` : `${path}${separator}${child.id}`);
+            }
+        }
+        const nodeState = {
+            path,
+            checked: node.defaultChecked ?? true,
+            indeterminate: false,
+            expanded: node.defaultExpanded ?? (config.defaultExpandAll || false),
+            node,
+            parentPath,
+            childPaths,
+            level
+        };
+        map.set(path, nodeState);
+        // Recursively flatten children
+        if (node.children && node.children.length > 0) {
+            flattenTreeToSvelteMapRecursive(node.children, config, path, level + 1, map);
+        }
+    }
+    return map;
+}
+/**
+ * Helper for recursive flattening into existing SvelteMap
+ */
+function flattenTreeToSvelteMapRecursive(nodes, config, parentPath, level, map) {
+    const separator = config.pathSeparator || ':';
+    for (const node of nodes) {
+        const path = `${parentPath}${separator}${node.id}`;
+        // Collect child paths
+        const childPaths = [];
+        if (node.children && node.children.length > 0) {
+            for (const child of node.children) {
+                childPaths.push(`${path}${separator}${child.id}`);
+            }
+        }
+        const nodeState = {
+            path,
+            checked: node.defaultChecked ?? true,
+            indeterminate: false,
+            expanded: node.defaultExpanded ?? (config.defaultExpandAll || false),
+            node,
+            parentPath,
+            childPaths,
+            level
+        };
+        map.set(path, nodeState);
+        // Recursively flatten children
+        if (node.children && node.children.length > 0) {
+            flattenTreeToSvelteMapRecursive(node.children, config, path, level + 1, map);
+        }
+    }
+}
 /**
  * Calculate which nodes should be indeterminate
  * A node is indeterminate if:
@@ -117,6 +182,47 @@ export function calculateIndeterminateStates(nodes, checkedPaths) {
     }
     return indeterminate;
 }
+/**
+ * Calculate indeterminate states returning SvelteSet for reactive state management
+ * Same logic as calculateIndeterminateStates but returns SvelteSet
+ */
+export function calculateIndeterminateStatesAsSvelteSet(nodes, checkedPaths) {
+    const indeterminate = new SvelteSet();
+    // For each node with children, check from deepest to shallowest
+    // This ensures we calculate indeterminate state correctly
+    const nodesArray = Array.from(nodes.entries());
+    // Sort by level (deepest first) to ensure we process children before parents
+    nodesArray.sort((a, b) => b[1].level - a[1].level);
+    for (const [path, nodeState] of nodesArray) {
+        // Skip leaf nodes - they can't be indeterminate
+        if (nodeState.childPaths.length === 0)
+            continue;
+        // Count direct children that are either checked or indeterminate
+        let checkedCount = 0;
+        let indeterminateCount = 0;
+        for (const childPath of nodeState.childPaths) {
+            if (checkedPaths.has(childPath)) {
+                checkedCount++;
+            }
+            else if (indeterminate.has(childPath)) {
+                indeterminateCount++;
+            }
+        }
+        const totalChildren = nodeState.childPaths.length;
+        const affectedChildren = checkedCount + indeterminateCount;
+        // Node is indeterminate if:
+        // 1. Some children are checked/indeterminate, but not all
+        // 2. At least one child is indeterminate (even if all are checked/indeterminate)
+        if (affectedChildren > 0 && affectedChildren < totalChildren) {
+            indeterminate.add(path);
+        }
+        else if (indeterminateCount > 0) {
+            // If any child is indeterminate, parent is indeterminate
+            indeterminate.add(path);
+        }
+    }
+    return indeterminate;
+}
 /**
  * Get all descendant paths of a node
  */
@@ -131,10 +237,12 @@ export function getDescendantPaths(path, nodes, separator = ':') {
 }
 /**
  * Build initial TreeState from flattened nodes
+ * Works with both regular Map/Set and SvelteMap/SvelteSet
  */
 export function buildInitialState(nodes, config) {
-    const checkedPaths = new Set();
-    const expandedPaths = new Set();
+    // Use SvelteSet for reactive collections
+    const checkedPaths = new SvelteSet();
+    const expandedPaths = new SvelteSet();
     const rootPaths = [];
     nodes.forEach((nodeState, path) => {
         if (nodeState.checked) {
@@ -147,7 +255,7 @@ export function buildInitialState(nodes, config) {
             rootPaths.push(path);
         }
     });
-    const indeterminatePaths = calculateIndeterminateStates(nodes, checkedPaths);
+    const indeterminatePaths = calculateIndeterminateStatesAsSvelteSet(nodes, checkedPaths);
     return {
         nodes,
         checkedPaths,
@@ -186,6 +294,7 @@ export function saveStateToStorage(namespace, state) {
 }
 /**
  * Load state from localStorage
+ * Returns SvelteSet for reactive state management
  */
 export function loadStateFromStorage(namespace, state) {
     if (!namespace)
@@ -196,9 +305,9 @@ export function loadStateFromStorage(namespace, state) {
         const updates = {};
         if (checkedJson) {
             const checkedArray = JSON.parse(checkedJson);
-            updates.checkedPaths = new Set(checkedArray);
+            updates.checkedPaths = new SvelteSet(checkedArray);
             // Recalculate indeterminate states
-            updates.indeterminatePaths = calculateIndeterminateStates(state.nodes, updates.checkedPaths);
+            updates.indeterminatePaths = calculateIndeterminateStatesAsSvelteSet(state.nodes, updates.checkedPaths);
             log('📂 Loaded checked paths from localStorage', {
                 namespace,
                 checkedCount: checkedArray.length
@@ -206,7 +315,7 @@ export function loadStateFromStorage(namespace, state) {
         }
         if (expandedJson) {
             const expandedArray = JSON.parse(expandedJson);
-            updates.expandedPaths = new Set(expandedArray);
+            updates.expandedPaths = new SvelteSet(expandedArray);
             log('📂 Loaded expanded paths from localStorage', {
                 namespace,
                 expandedCount: expandedArray.length