@smartnet360/svelte-components 0.0.101 → 0.0.103

package/dist/core/TreeView/tree.store.svelte.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Tree Store - Svelte 5 Runes Implementation
+ * Reactive state management for tree with persistence
+ *
+ * This is a modernized implementation using Svelte 5 runes ($state, $derived)
+ * with SvelteMap and SvelteSet for reactive collections.
+ *
+ * BREAKING CHANGE from previous version:
+ * - createTreeStore() now returns TreeStoreValue directly (not a Svelte store)
+ * - Use `treeStore` directly instead of `$treeStore`
+ * - Pass `store={treeStore}` instead of `store={$treeStore}`
+ */
+import type { TreeConfig, TreeState, TreeStoreValue } from './tree.model';
+/**
+ * TreeStore class using Svelte 5 runes for reactive state management
+ */
+declare class TreeStore<T = any> {
+    #private;
+    constructor(config: TreeConfig<T>);
+    /** Get current tree state (reactive) */
+    get state(): TreeState;
+    /** Get config */
+    get config(): TreeConfig<T>;
+    /**
+     * Toggle a node's checked state (with cascading)
+     *
+     * Logic:
+     * 1. Toggle the clicked node
+     * 2. Cascade DOWN to all descendants (check/uncheck all children)
+     * 3. Propagate UP to all ancestors (update based on their children's states)
+     */
+    toggle: (path: string) => void;
+    /**
+     * Toggle expanded/collapsed state
+     */
+    toggleExpand: (path: string) => void;
+    /**
+     * Expand all nodes
+     */
+    expandAll: () => void;
+    /**
+     * Collapse all nodes
+     */
+    collapseAll: () => void;
+    /**
+     * Check all nodes
+     */
+    checkAll: () => void;
+    /**
+     * Uncheck all nodes
+     */
+    uncheckAll: () => void;
+    /**
+     * Get all checked paths
+     */
+    getCheckedPaths: () => string[];
+    /**
+     * Get only checked leaf paths (nodes without children)
+     */
+    getCheckedLeafPaths: () => string[];
+    /**
+     * Clear localStorage
+     */
+    clearStorage: () => void;
+    /**
+     * Convert to TreeStoreValue for backward compatibility
+     * This allows the store to work with existing components expecting the old interface
+     */
+    toStoreValue(): TreeStoreValue;
+}
+/**
+ * Create a tree store with state management and persistence
+ *
+ * This function maintains backward compatibility with the original API.
+ * It returns an object that behaves like the old Svelte store but uses
+ * Svelte 5 runes internally for reactivity.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createTreeStore } from './';
+ *
+ *   const treeStore = createTreeStore({
+ *     nodes: [...],
+ *     namespace: 'my-app',
+ *     persistState: true
+ *   });
+ * </script>
+ *
+ * <TreeView store={treeStore} />
+ * ```
+ */
+export declare function createTreeStore<T = any>(config: TreeConfig<T>): TreeStoreValue;
+export { TreeStore };

package/dist/core/TreeView/tree.store.svelte.js

@@ -0,0 +1,274 @@
+/**
+ * Tree Store - Svelte 5 Runes Implementation
+ * Reactive state management for tree with persistence
+ *
+ * This is a modernized implementation using Svelte 5 runes ($state, $derived)
+ * with SvelteMap and SvelteSet for reactive collections.
+ *
+ * BREAKING CHANGE from previous version:
+ * - createTreeStore() now returns TreeStoreValue directly (not a Svelte store)
+ * - Use `treeStore` directly instead of `$treeStore`
+ * - Pass `store={treeStore}` instead of `store={$treeStore}`
+ */
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { flattenTreeToSvelteMap, buildInitialState, calculateIndeterminateStates, getDescendantPaths, getAncestorPaths, saveStateToStorage, loadStateFromStorage, clearStorageForNamespace } from './tree-utils';
+/**
+ * TreeStore class using Svelte 5 runes for reactive state management
+ */
+class TreeStore {
+    // Reactive state using $state
+    #state = $state({
+        nodes: new SvelteMap(),
+        checkedPaths: new SvelteSet(),
+        expandedPaths: new SvelteSet(),
+        indeterminatePaths: new SvelteSet(),
+        rootPaths: []
+    });
+    #config;
+    #separator;
+    constructor(config) {
+        this.#config = config;
+        this.#separator = config.pathSeparator || ':';
+        // Flatten tree structure using SvelteMap
+        const nodesMap = flattenTreeToSvelteMap(config.nodes, config);
+        // Build initial state
+        const initialState = buildInitialState(nodesMap, config);
+        // Set initial state
+        this.#state = initialState;
+        // Load persisted state if enabled
+        if (config.persistState && config.namespace) {
+            const persistedState = loadStateFromStorage(config.namespace, this.#state);
+            if (persistedState.checkedPaths) {
+                this.#state.checkedPaths = persistedState.checkedPaths;
+            }
+            if (persistedState.expandedPaths) {
+                this.#state.expandedPaths = persistedState.expandedPaths;
+            }
+            if (persistedState.indeterminatePaths) {
+                this.#state.indeterminatePaths = persistedState.indeterminatePaths;
+            }
+        }
+    }
+    /** Get current tree state (reactive) */
+    get state() {
+        return this.#state;
+    }
+    /** Get config */
+    get config() {
+        return this.#config;
+    }
+    /**
+     * Persist state to localStorage if enabled
+     */
+    #persistState() {
+        if (this.#config.persistState && this.#config.namespace) {
+            saveStateToStorage(this.#config.namespace, this.#state);
+        }
+    }
+    /**
+     * Toggle a node's checked state (with cascading)
+     *
+     * Logic:
+     * 1. Toggle the clicked node
+     * 2. Cascade DOWN to all descendants (check/uncheck all children)
+     * 3. Propagate UP to all ancestors (update based on their children's states)
+     */
+    toggle = (path) => {
+        const nodeState = this.#state.nodes.get(path);
+        if (!nodeState) {
+            return;
+        }
+        const newChecked = !this.#state.checkedPaths.has(path);
+        // STEP 0: If singleRootSelect mode and this is a root node being checked, uncheck all other roots
+        if (this.#config.singleRootSelect && newChecked && nodeState.level === 0) {
+            // Uncheck all root nodes and their descendants
+            this.#state.rootPaths.forEach(rootPath => {
+                if (rootPath !== path) {
+                    this.#state.checkedPaths.delete(rootPath);
+                    // Also uncheck all descendants of this root
+                    const rootDescendants = getDescendantPaths(rootPath, this.#state.nodes, this.#separator);
+                    rootDescendants.forEach(descendantPath => {
+                        this.#state.checkedPaths.delete(descendantPath);
+                    });
+                }
+            });
+        }
+        // STEP 0.5: If singleLevel1Select mode and this is a Level 1 node being checked, uncheck sibling Level 1 nodes
+        if (this.#config.singleLevel1Select && newChecked && nodeState.level === 1) {
+            const parentPath = nodeState.parentPath;
+            // Find and uncheck all Level 1 siblings (same parent, same level, different path)
+            this.#state.nodes.forEach((node, nodePath) => {
+                if (node.level === 1 &&
+                    node.parentPath === parentPath &&
+                    nodePath !== path) {
+                    this.#state.checkedPaths.delete(nodePath);
+                    // Also uncheck all descendants of this sibling
+                    const siblingDescendants = getDescendantPaths(nodePath, this.#state.nodes, this.#separator);
+                    siblingDescendants.forEach(descendantPath => {
+                        this.#state.checkedPaths.delete(descendantPath);
+                    });
+                }
+            });
+        }
+        // STEP 1: Update this node
+        if (newChecked) {
+            this.#state.checkedPaths.add(path);
+        }
+        else {
+            this.#state.checkedPaths.delete(path);
+        }
+        // STEP 2: CASCADE DOWN - Update all descendants to match
+        const descendants = getDescendantPaths(path, this.#state.nodes, this.#separator);
+        descendants.forEach(descendantPath => {
+            if (newChecked) {
+                this.#state.checkedPaths.add(descendantPath);
+            }
+            else {
+                this.#state.checkedPaths.delete(descendantPath);
+            }
+        });
+        // STEP 3: PROPAGATE UP - Update all ancestors based on their children
+        const ancestorPaths = getAncestorPaths(path, this.#separator);
+        // Process ancestors from deepest to shallowest (reverse order)
+        for (let i = ancestorPaths.length - 1; i >= 0; i--) {
+            const ancestorPath = ancestorPaths[i];
+            const ancestor = this.#state.nodes.get(ancestorPath);
+            if (!ancestor)
+                continue;
+            // Count how many direct children are checked
+            const checkedChildrenCount = ancestor.childPaths.filter(childPath => this.#state.checkedPaths.has(childPath)).length;
+            const totalChildren = ancestor.childPaths.length;
+            // Update ancestor based on children states
+            if (checkedChildrenCount === totalChildren) {
+                this.#state.checkedPaths.add(ancestorPath);
+            }
+            else {
+                this.#state.checkedPaths.delete(ancestorPath);
+            }
+        }
+        // STEP 4: Recalculate indeterminate states
+        const newIndeterminatePaths = calculateIndeterminateStates(this.#state.nodes, this.#state.checkedPaths);
+        this.#state.indeterminatePaths.clear();
+        newIndeterminatePaths.forEach(p => this.#state.indeterminatePaths.add(p));
+        this.#persistState();
+    };
+    /**
+     * Toggle expanded/collapsed state
+     */
+    toggleExpand = (path) => {
+        if (this.#state.expandedPaths.has(path)) {
+            this.#state.expandedPaths.delete(path);
+        }
+        else {
+            this.#state.expandedPaths.add(path);
+        }
+        this.#persistState();
+    };
+    /**
+     * Expand all nodes
+     */
+    expandAll = () => {
+        this.#state.nodes.forEach((nodeState, path) => {
+            if (nodeState.childPaths.length > 0) {
+                this.#state.expandedPaths.add(path);
+            }
+        });
+        this.#persistState();
+    };
+    /**
+     * Collapse all nodes
+     */
+    collapseAll = () => {
+        this.#state.expandedPaths.clear();
+        this.#persistState();
+    };
+    /**
+     * Check all nodes
+     */
+    checkAll = () => {
+        this.#state.nodes.forEach((_, path) => {
+            this.#state.checkedPaths.add(path);
+        });
+        // Clear indeterminate states when all checked
+        this.#state.indeterminatePaths.clear();
+        this.#persistState();
+    };
+    /**
+     * Uncheck all nodes
+     */
+    uncheckAll = () => {
+        this.#state.checkedPaths.clear();
+        this.#state.indeterminatePaths.clear();
+        this.#persistState();
+    };
+    /**
+     * Get all checked paths
+     */
+    getCheckedPaths = () => {
+        return Array.from(this.#state.checkedPaths);
+    };
+    /**
+     * Get only checked leaf paths (nodes without children)
+     */
+    getCheckedLeafPaths = () => {
+        return Array.from(this.#state.checkedPaths).filter(path => {
+            const node = this.#state.nodes.get(path);
+            return node && node.childPaths.length === 0;
+        });
+    };
+    /**
+     * Clear localStorage
+     */
+    clearStorage = () => {
+        if (this.#config.namespace) {
+            clearStorageForNamespace(this.#config.namespace);
+        }
+    };
+    /**
+     * Convert to TreeStoreValue for backward compatibility
+     * This allows the store to work with existing components expecting the old interface
+     */
+    toStoreValue() {
+        return {
+            state: this.#state,
+            config: this.#config,
+            toggle: this.toggle,
+            toggleExpand: this.toggleExpand,
+            expandAll: this.expandAll,
+            collapseAll: this.collapseAll,
+            checkAll: this.checkAll,
+            uncheckAll: this.uncheckAll,
+            getCheckedPaths: this.getCheckedPaths,
+            getCheckedLeafPaths: this.getCheckedLeafPaths,
+            clearStorage: this.clearStorage
+        };
+    }
+}
+/**
+ * Create a tree store with state management and persistence
+ *
+ * This function maintains backward compatibility with the original API.
+ * It returns an object that behaves like the old Svelte store but uses
+ * Svelte 5 runes internally for reactivity.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createTreeStore } from './';
+ *
+ *   const treeStore = createTreeStore({
+ *     nodes: [...],
+ *     namespace: 'my-app',
+ *     persistState: true
+ *   });
+ * </script>
+ *
+ * <TreeView store={treeStore} />
+ * ```
+ */
+export function createTreeStore(config) {
+    const store = new TreeStore(config);
+    return store.toStoreValue();
+}
+// Also export the class for advanced usage
+export { TreeStore };

package/dist/map-v2/features/cells/controls/CellFilterControl.svelte

@@ -11,14 +11,11 @@
 	 */
 	
 	import { onMount } from 'svelte';
-	import type { Writable } from 'svelte/store';
 	import MapControl from '../../../shared/controls/MapControl.svelte';
-	import TreeView from '../../../../core/TreeView/TreeView.svelte';
-	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import { TreeView, createTreeStore, type TreeStoreValue } from '../../../../core/TreeView';
 	import { buildCellTree, getFilteredCells } from '../utils/cellTree';
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
 	import type { CellGroupingField, CellGroupingLabels } from '../types';
-	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
 
 	interface Props {
 		/** Cell store context */
@@ -53,7 +50,7 @@
 		initiallyCollapsed = true
 	}: Props = $props();
 	
-	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
+	let treeStore = $state<TreeStoreValue | null>(null);
 	let level1 = $state<Exclude<CellGroupingField, 'none'>>(store.groupingConfig.level1);
 	let level2 = $state<CellGroupingField>(store.groupingConfig.level2);
 
@@ -109,29 +106,21 @@
 			persistState: true,
 			defaultExpandAll: false
 		});
+	}
 
-		// Subscribe to tree changes and update filtered cells
+	// Sync tree selection with cell store (reactive via $effect)
+	$effect(() => {
 		if (treeStore) {
-			// This subscription now only syncs the checkedPaths state
-			// The $effect above will handle the actual filtering
-			const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
-				// getCheckedPaths() is expensive, so check if tree is initializing
-				if (treeValue.isInitializing) return;
-
-				const newCheckedPaths = new Set(treeValue.getCheckedPaths());
-
-				// Avoid unnecessary updates if the set hasn't changed
-				if (
-					newCheckedPaths.size !== checkedPaths.size ||
-					![...newCheckedPaths].every((path) => checkedPaths.has(path))
-				) {
-					checkedPaths = newCheckedPaths;
-				}
-			});
-
-			return () => unsub();
+			const newCheckedPaths = new Set(treeStore.getCheckedPaths());
+			// Only update if changed to avoid infinite loops
+			if (
+				newCheckedPaths.size !== checkedPaths.size ||
+				![...newCheckedPaths].every((path) => checkedPaths.has(path))
+			) {
+				checkedPaths = newCheckedPaths;
+			}
 		}
-	}
+	});
 
 	onMount(() => {
 		rebuildTree();
@@ -235,9 +224,9 @@
 		</div>
 		
 		<!-- Tree View -->
-		{#if treeStore && $treeStore}
+		{#if treeStore}
 			<div class="cell-filter-tree">
-				<TreeView store={$treeStore} showControls={false}>
+				<TreeView store={treeStore} showControls={false}>
 					{#snippet children({ node, state })}
 						<!-- Color picker for all leaf nodes (nodes with cells) -->
 						{#if node.metadata?.type === 'leafGroup'}

package/dist/map-v2/features/cells/utils/cellGeoJSON.js

@@ -42,6 +42,7 @@ export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorM
         // Build feature with styling properties
         return {
             type: 'Feature',
+            id: Number(cell.cellName), // Numeric ID for feature-state (cellName is numeric string)
             geometry: arc.geometry,
             properties: {
                 // Cell identification

package/dist/map-v2/features/repeaters/controls/RepeaterFilterControl.svelte

@@ -10,13 +10,10 @@
 	 */
 	
 	import { onMount } from 'svelte';
-	import type { Writable } from 'svelte/store';
 	import MapControl from '../../../shared/controls/MapControl.svelte';
-	import TreeView from '../../../../core/TreeView/TreeView.svelte';
-	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import { TreeView, createTreeStore, type TreeStoreValue } from '../../../../core/TreeView';
 	import { buildRepeaterTree, getFilteredRepeaters } from '../utils/repeaterTree';
 	import type { RepeaterStoreContext } from '../stores/repeaterStoreContext.svelte';
-	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
 
 	interface Props {
 		/** Repeater store context */
@@ -42,7 +39,7 @@
 		initiallyCollapsed = true
 	}: Props = $props();
 	
-	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
+	let treeStore = $state<TreeStoreValue | null>(null);
 	
 	// Rebuild tree when repeaters change
 	function rebuildTree() {
@@ -56,45 +53,39 @@
 			persistState: true,
 			defaultExpandAll: false
 		});
-		
-		// Subscribe to tree changes and update filtered repeaters
+	}
+
+	// Sync tree selection with repeater store (reactive via $effect)
+	$effect(() => {
 		if (treeStore) {
-			const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
-				const checkedPaths = treeValue.getCheckedPaths();
-				
-				// Convert string[] to Set<string>
-				const checkedPathsSet = new Set(checkedPaths);
-				const selectedTechBands = getFilteredRepeaters(checkedPathsSet);
-				
-				// Update visibility for each tech:fband combination
-				// First, get all tech:fband combinations from repeaters
-				const allTechBands = new Set<string>();
-				for (const repeater of store.repeaters) {
-					const key = `${repeater.tech}:${repeater.fband}`;
-					allTechBands.add(key);
-				}
-				
-				// If only root checked, show all
-				if (selectedTechBands.size === 0 && checkedPathsSet.has('root')) {
-					// All visible - no toggle needed
-				} else {
-					// Toggle visibility based on selection
-					for (const techBand of allTechBands) {
-						const [tech, fband] = techBand.split(':');
-						const shouldBeVisible = selectedTechBands.has(techBand);
-						const isVisible = store.isTechBandVisible(tech, fband);
-						
-						// Only toggle if state needs to change
-						if (shouldBeVisible !== isVisible) {
-							store.toggleTechBand(tech, fband);
-						}
+			const checkedPaths = treeStore.getCheckedPaths();
+			const checkedPathsSet = new Set(checkedPaths);
+			const selectedTechBands = getFilteredRepeaters(checkedPathsSet);
+			
+			// Get all tech:fband combinations from repeaters
+			const allTechBands = new Set<string>();
+			for (const repeater of store.repeaters) {
+				const key = `${repeater.tech}:${repeater.fband}`;
+				allTechBands.add(key);
+			}
+			
+			// If only root checked, show all
+			if (selectedTechBands.size === 0 && checkedPathsSet.has('root')) {
+				// All visible - no toggle needed
+			} else {
+				// Toggle visibility based on selection
+				for (const techBand of allTechBands) {
+					const [tech, fband] = techBand.split(':');
+					const shouldBeVisible = selectedTechBands.has(techBand);
+					const isVisible = store.isTechBandVisible(tech, fband);
+					
+					if (shouldBeVisible !== isVisible) {
+						store.toggleTechBand(tech, fband);
 					}
 				}
-			});
-			
-			return () => unsub();
+			}
 		}
-	}
+	});
 	
 	// Handle color changes from tree
 	function handleColorChange(nodeId: string, color: string) {
@@ -117,9 +108,9 @@
 </script>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
-	{#if treeStore && $treeStore}
+	{#if treeStore}
 		<div class="repeater-filter-tree">
-			<TreeView store={$treeStore!} showControls={false}>
+			<TreeView store={treeStore} showControls={false}>
 				{#snippet children({ node, state })}
 					<!-- Color picker for leaf nodes (tech:fband combinations) -->
 					{#if node.metadata?.color}

package/dist/map-v2/features/sites/controls/SiteFilterControl.svelte

@@ -10,13 +10,10 @@
 	 * <SiteFilterControl {store} position="top-left" />
 	 */
 	import { onMount } from 'svelte';
-	import type { Writable } from 'svelte/store';
 	import MapControl from '../../../shared/controls/MapControl.svelte';
-	import TreeView from '../../../../core/TreeView/TreeView.svelte';
-	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import { TreeView, createTreeStore, type TreeStoreValue } from '../../../../core/TreeView';
 	import { buildSiteTree, getFilteredSites } from '../utils/siteTreeUtils';
 	import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
-	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
 
 	interface Props {
 		/** Site store instance */
@@ -42,7 +39,7 @@
 		initiallyCollapsed = true
 	}: Props = $props();
 
-	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
+	let treeStore = $state<TreeStoreValue | null>(null);
 
 	onMount(() => {
 		if (store.allSites.length > 0) {
@@ -54,19 +51,15 @@
 				persistState: true,
 				defaultExpandAll: false
 			});
+		}
+	});
 
-			// Subscribe to tree changes and update siteStore
-			if (treeStore) {
-				const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
-					const checkedPaths = treeValue.getCheckedPaths();
-					const newFilteredSites = getFilteredSites(checkedPaths, store.allSites);
-					
-					// Update the site store directly
-					store.filteredSites = newFilteredSites;
-				});
-
-				return () => unsub();
-			}
+	// Sync tree selection with site store (reactive via $effect)
+	$effect(() => {
+		if (treeStore) {
+			const checkedPaths = treeStore.getCheckedPaths();
+			const newFilteredSites = getFilteredSites(checkedPaths, store.allSites);
+			store.filteredSites = newFilteredSites;
 		}
 	});
 
@@ -76,9 +69,9 @@
 </script>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
-	{#if treeStore && $treeStore}
+	{#if treeStore}
 		<div class="site-filter-tree">
-			<TreeView store={$treeStore} showControls={false}>
+			<TreeView store={treeStore} showControls={false}>
 				{#snippet children({ node, state })}
 					<!-- Custom node rendering with color picker for leaf nodes -->
 					{#if node.metadata?.type === 'featureGroup'}

package/dist/map-v3/core/components/Map.svelte

@@ -73,6 +73,10 @@
 	<div bind:this={mapContainer} class="map-instance"></div>
 	{#if mapStore.loaded}
 		{@render children?.()}
+	{:else}
+		<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+			Loading map...
+		</div>
 	{/if}
 </div>
 

package/dist/map-v3/core/stores/map.store.svelte.js

@@ -8,11 +8,13 @@ export class MapStore {
     init(container, options) {
         if (this.map)
             return;
+        console.log('[MapStore] Initializing map with options:', options);
         this.map = new mapboxgl.Map({
             container,
             ...options
         });
         this.map.on('load', () => {
+            console.log('[MapStore] Map loaded!');
             this.loaded = true;
         });
     }