@smartnet360/svelte-components 0.0.75 → 0.0.77

package/dist/map-v2/demo/demo-cells.js

@@ -10,7 +10,7 @@
 const BASE_LAT = 37.7749;
 const BASE_LNG = -122.4194;
 // Grid parameters for distributing sites
-const NUM_SITES = 10;
+const NUM_SITES = 1700;
 const GRID_SIZE = 10; // 10×10 grid
 const LAT_SPACING = 0.01; // ~1.1 km spacing
 const LNG_SPACING = 0.015; // ~1.1 km spacing (adjusted for longitude)

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

@@ -56,7 +56,16 @@
 	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
 	let level1 = $state<Exclude<CellGroupingField, 'none'>>(store.groupingConfig.level1);
 	let level2 = $state<CellGroupingField>(store.groupingConfig.level2);
-	
+
+	// Track checked paths separately to avoid re-filtering on expand/collapse
+	let checkedPaths = $state<Set<string>>(new Set());
+
+	// When checkedPaths change, re-run the filter
+	$effect(() => {
+		const newFilteredCells = getFilteredCells(checkedPaths, store.cellsFilteredByStatus);
+		store.setFilteredCells(newFilteredCells);
+	});
+
 	// Track config for localStorage invalidation
 	const STORAGE_CONFIG_KEY = 'cellular-cell-filter:config';
 	
@@ -100,24 +109,30 @@
 			persistState: true,
 			defaultExpandAll: false
 		});
-		
+
 		// Subscribe to tree changes and update filtered cells
 		if (treeStore) {
+			// This subscription now only syncs the checkedPaths state
+			// The $effect above will handle the actual filtering
 			const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
-				const checkedPaths = treeValue.getCheckedPaths();
-				
-				// Convert string[] to Set<string>
-				const checkedPathsSet = new Set(checkedPaths);
-				const newFilteredCells = getFilteredCells(checkedPathsSet, store.cellsFilteredByStatus); // Use filtered cells
-				
-				// Update the cell store directly
-				store.setFilteredCells(newFilteredCells);
+				// 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();
 		}
 	}
-	
+
 	onMount(() => {
 		rebuildTree();
 	});

package/dist/map-v2/features/cells/layers/CellsLayer.svelte

@@ -14,7 +14,7 @@
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
 	import { useMapbox } from '../../../core/hooks/useMapbox';
 	import { cellsToGeoJSON } from '../utils/cellGeoJSON';
-	import { CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX } from '../constants/zIndex';
+	import { CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX, Z_INDEX_BY_BAND } from '../constants/zIndex';
 
 	interface Props {
 		/** Cell store context */
@@ -24,28 +24,34 @@
 	}
 
 	let { store, namespace }: Props = $props();
-	
-	const FILL_LAYER_ID = `${namespace}-cells-fill`;
-	const LINE_LAYER_ID = `${namespace}-cells-line`;
+
 	const SOURCE_ID = `${namespace}-cells`;
-	
+
 	// Get map from mapbox hook
 	const mapStore = useMapbox();
-	
+
 	let map = $state<MapboxMap | null>(null);
 	let mounted = $state(false);
 	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
 	let viewportVersion = $state(0); // Increment this to force $effect re-run on viewport changes
-	
+
+	// Get all unique z-index values and sort them
+	const sortedZIndexes = [...new Set(Object.values(Z_INDEX_BY_BAND))].sort((a, b) => a - b);
+
+	// Create layer IDs for each z-index
+	const fillLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-cells-fill-${zIndex}`);
+	const lineLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-cells-line-${zIndex}`);
+	const allLayerIds = [...fillLayerIds, ...lineLayerIds];
+
 	// Viewport change handler (pan/zoom/move) with debouncing
 	function handleMoveEnd() {
 		if (!map) return;
-		
+
 		// Clear any existing timer
 		if (viewportUpdateTimer) {
 			clearTimeout(viewportUpdateTimer);
 		}
-		
+
 		// Debounce: wait 200ms after last move event before re-rendering
 		viewportUpdateTimer = setTimeout(() => {
 			if (!map) return;
@@ -57,86 +63,85 @@
 			viewportVersion++;
 		}, 200);
 	}
-	
+
 	/**
 	 * Initialize or reinitialize the cell layers
 	 * Called on mount and when map style changes
 	 */
 	function initializeLayer() {
 		if (!map) return;
-		
+
 		console.log('CellsLayer: initializeLayer called');
-		
+
 		// Set initial zoom
 		store.setCurrentZoom(map.getZoom());
-		
+
 		// Add moveend listener if not already added
 		// Note: We need to be careful not to duplicate listeners
 		map.off('moveend', handleMoveEnd); // Remove if exists
-		map.on('moveend', handleMoveEnd);  // Add it back
-		
+		map.on('moveend', handleMoveEnd); // Add it back
+
 		// Mark as mounted to trigger $effect
 		mounted = true;
-		
+
 		// Force $effect to re-run by incrementing viewportVersion
 		// This is critical after style.load when layers need to be recreated
 		// but mounted/map haven't changed (they're already true/set)
 		viewportVersion++;
 	}
-	
+
 	onMount(() => {
 		console.log('CellsLayer: onMount, waiting for map...');
-		
+
 		// Subscribe to map store
 		const unsubscribe = mapStore.subscribe((mapInstance) => {
 			if (mapInstance && !map) {
 				console.log('CellsLayer: Map available, initializing...');
 				map = mapInstance;
-				
+
 				// Initial layer setup
 				initializeLayer();
-				
+
 				// Re-initialize layer when map style changes
 				// Mapbox removes all custom layers/sources when setStyle() is called
 				map.on('style.load', initializeLayer);
 			}
 		});
-		
+
 		return () => {
 			unsubscribe();
 		};
 	});
-	
+
 	onDestroy(() => {
 		if (!map) return;
-		
+
 		// Clean up timer
 		if (viewportUpdateTimer) {
 			clearTimeout(viewportUpdateTimer);
 		}
-		
+
 		// Remove style.load listener
 		map.off('style.load', initializeLayer);
-		
+
 		map.off('moveend', handleMoveEnd);
-		
+
 		// Clean up layers and source
-		if (map.getLayer(LINE_LAYER_ID)) {
-			map.removeLayer(LINE_LAYER_ID);
-		}
-		if (map.getLayer(FILL_LAYER_ID)) {
-			map.removeLayer(FILL_LAYER_ID);
-		}
+		allLayerIds.forEach((id) => {
+			if (map.getLayer(id)) {
+				map.removeLayer(id);
+			}
+		});
 		if (map.getSource(SOURCE_ID)) {
 			map.removeSource(SOURCE_ID);
 		}
 	});
-	
+
 	// Reactive: Update GeoJSON when cells/zoom/filters/settings change
 	$effect(() => {
 		// Track viewportVersion to force re-run on pan (even without zoom change)
 		viewportVersion;
-		
+
 		console.log('CellsLayer $effect triggered:', {
 			mounted,
 			hasMap: !!map,
@@ -146,35 +151,35 @@
 			baseRadius: store.baseRadius,
 			viewportVersion
 		});
-		
-		if (!mounted || !map || !store.showCells) {
+
+		if (!mounted || !map) {
+			return;
+		}
+
+		if (!store.showCells) {
 			// Remove layers if showCells is false
-			if (mounted && map) {
-				console.log('CellsLayer: Removing layers (showCells=false or not mounted)');
-				if (map.getLayer(LINE_LAYER_ID)) {
-					map.removeLayer(LINE_LAYER_ID);
-				}
-				if (map.getLayer(FILL_LAYER_ID)) {
-					map.removeLayer(FILL_LAYER_ID);
-				}
-				if (map.getSource(SOURCE_ID)) {
-					map.removeSource(SOURCE_ID);
+			allLayerIds.forEach((id) => {
+				if (map.getLayer(id)) {
+					map.removeLayer(id);
 				}
+			});
+			if (map.getSource(SOURCE_ID)) {
+				map.removeSource(SOURCE_ID);
 			}
 			return;
 		}
-		
+
 		// Filter cells by viewport bounds (only render visible cells)
 		const bounds = map.getBounds();
 		if (!bounds) {
 			console.warn('CellsLayer: Cannot get map bounds, skipping viewport filter');
 			return;
 		}
-		
-		const visibleCells = store.filteredCells.filter(cell => 
+
+		const visibleCells = store.filteredCells.filter((cell) =>
 			bounds.contains([cell.longitude, cell.latitude])
 		);
-		
+
 		console.log('CellsLayer: Viewport filtering:', {
 			totalFiltered: store.filteredCells.length,
 			visibleInViewport: visibleCells.length,
@@ -185,7 +190,7 @@
 				west: bounds.getWest()
 			}
 		});
-		
+
 		// Generate GeoJSON from visible cells only
 		const geoJSON = cellsToGeoJSON(
 			visibleCells,
@@ -194,12 +199,12 @@
 			store.groupColorMap,
 			store.cellGroupMap // Pass lookup map for O(1) color lookup
 		);
-		
+
 		console.log('CellsLayer: Generated GeoJSON:', {
 			featureCount: geoJSON.features.length,
 			firstFeature: geoJSON.features[0]
 		});
-		
+
 		// Update or create source
 		const source = map.getSource(SOURCE_ID);
 		if (source && source.type === 'geojson') {
@@ -212,60 +217,76 @@
 				data: geoJSON
 			});
 		}
-		
-		// Add fill layer if not exists
-		if (!map.getLayer(FILL_LAYER_ID)) {
-			console.log('CellsLayer: Creating fill layer');
-			map.addLayer({
-				id: FILL_LAYER_ID,
-				type: 'fill',
-				source: SOURCE_ID,
-				paint: {
-					'fill-color': [
-						'coalesce',
-						['get', 'groupColor'],
-						['get', 'techBandColor'],
-						'#888888' // Fallback
-					],
-					'fill-opacity': store.fillOpacity
-				},
-				metadata: {
-					zIndex: CELL_FILL_Z_INDEX
-				}
-			});
-		} else {
-			// Update fill opacity
-			console.log('CellsLayer: Updating fill opacity:', store.fillOpacity);
-			map.setPaintProperty(FILL_LAYER_ID, 'fill-opacity', store.fillOpacity);
-		}
-		
-		// Add line layer if not exists
-		if (!map.getLayer(LINE_LAYER_ID)) {
-			console.log('CellsLayer: Creating line layer');
-			map.addLayer({
-				id: LINE_LAYER_ID,
-				type: 'line',
-				source: SOURCE_ID,
-				paint: {
-					'line-color': ['get', 'lineColor'],
-					'line-width': store.lineWidth,
-					'line-opacity': ['get', 'lineOpacity'],
-					'line-dasharray': [
-						'case',
-						['has', 'dashArray'],
-						['get', 'dashArray'],
-						['literal', [1, 0]] // Solid line default
-					]
-				},
-				metadata: {
-					zIndex: CELL_LINE_Z_INDEX
-				}
-			});
-		} else {
-			// Update line width
-			console.log('CellsLayer: Updating line width:', store.lineWidth);
-			map.setPaintProperty(LINE_LAYER_ID, 'line-width', store.lineWidth);
+
+		// Get all unique bands for the current z-index
+		const bandsByZIndex = new Map<number, string[]>();
+		for (const [band, zIndex] of Object.entries(Z_INDEX_BY_BAND)) {
+			if (!bandsByZIndex.has(zIndex)) {
+				bandsByZIndex.set(zIndex, []);
+			}
+			bandsByZIndex.get(zIndex)?.push(band);
 		}
+
+		// Add/update layers for each z-index level
+		sortedZIndexes.forEach((zIndex) => {
+			const fillLayerId = `${namespace}-cells-fill-${zIndex}`;
+			const lineLayerId = `${namespace}-cells-line-${zIndex}`;
+			const bands = bandsByZIndex.get(zIndex) || [];
+
+			// Add fill layer if not exists
+			if (!map.getLayer(fillLayerId)) {
+				console.log(`CellsLayer: Creating fill layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: fillLayerId,
+					type: 'fill',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'fill-color': [
+							'coalesce',
+							['get', 'groupColor'],
+							['get', 'techBandColor'],
+							'#888888' // Fallback
+						],
+						'fill-opacity': store.fillOpacity
+					},
+					metadata: {
+						zIndex: CELL_FILL_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update fill opacity
+				map.setPaintProperty(fillLayerId, 'fill-opacity', store.fillOpacity);
+			}
+
+			// Add line layer if not exists
+			if (!map.getLayer(lineLayerId)) {
+				console.log(`CellsLayer: Creating line layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: lineLayerId,
+					type: 'line',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'line-color': ['get', 'lineColor'],
+						'line-width': store.lineWidth,
+						'line-opacity': ['get', 'lineOpacity'],
+						'line-dasharray': [
+							'case',
+							['has', 'dashArray'],
+							['get', 'dashArray'],
+							['literal', [1, 0]] // Solid line default
+						]
+					},
+					metadata: {
+						zIndex: CELL_LINE_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update line width
+				map.setPaintProperty(lineLayerId, 'line-width', store.lineWidth);
+			}
+		});
 	});
 </script>
 

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

@@ -5,6 +5,7 @@
  */
 import { TECHNOLOGY_BAND_COLORS } from '../constants/colors';
 import { DEFAULT_STATUS_STYLES } from '../constants/statusStyles';
+import { Z_INDEX_BY_BAND } from '../constants/zIndex';
 import { calculateRadius } from './zoomScaling';
 import { createArcPolygon } from './arcGeometry';
 /**
@@ -61,6 +62,7 @@ export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorM
                 techBandKey,
                 techBandColor: defaultColor, // Default color from constants
                 groupColor: groupColor, // Custom color (if set)
+                zIndex: Z_INDEX_BY_BAND[techBandKey] || 0, // Z-index for layer ordering
                 // Line (border) styling from status
                 lineColor: statusStyle.lineColor,
                 lineWidth: statusStyle.lineWidth,

package/dist/map-v2/features/repeaters/constants/techBandZOrder.d.ts

@@ -1,25 +1,12 @@
 /**
  * Z-Index ordering for repeater tech-band combinations
  *
+ * This uses the same Z_INDEX_BY_BAND constant as cells for consistency.
  * Higher frequency bands are rendered on top when repeaters overlap.
- * This follows the same pattern as cells.
  */
+import type { TechnologyBandKey } from '../../cells/types';
 /**
- * Z-index ordering for tech:fband combinations
+ * Shared z-index ordering by technology-band key
  * Higher number = rendered on top
- *
- * Organized by frequency (low to high):
- * - Lower frequencies (700-900) at bottom
- * - Mid frequencies (1800-2100) in middle
- * - Higher frequencies (2600-3500) on top
- */
-export declare const REPEATER_TECH_BAND_Z_ORDER: Record<string, number>;
-/**
- * Get z-order index for a tech:fband combination
- * Used to set the sort key for layering overlapping repeaters
- *
- * @param tech - Technology (2G, 4G, 5G)
- * @param fband - Frequency band (e.g., "LTE1800", "GSM900")
- * @returns Z-order index (defaults to 0 if not found)
  */
-export declare function getRepeaterZOrder(tech: string, fband: string): number;
+export declare const Z_INDEX_BY_BAND: Record<TechnologyBandKey, number>;

package/dist/map-v2/features/repeaters/constants/techBandZOrder.js

@@ -1,43 +1,26 @@
 /**
  * Z-Index ordering for repeater tech-band combinations
  *
+ * This uses the same Z_INDEX_BY_BAND constant as cells for consistency.
  * Higher frequency bands are rendered on top when repeaters overlap.
- * This follows the same pattern as cells.
  */
 /**
- * Z-index ordering for tech:fband combinations
+ * Shared z-index ordering by technology-band key
  * Higher number = rendered on top
- *
- * Organized by frequency (low to high):
- * - Lower frequencies (700-900) at bottom
- * - Mid frequencies (1800-2100) in middle
- * - Higher frequencies (2600-3500) on top
  */
-export const REPEATER_TECH_BAND_Z_ORDER = {
-    // 2G bands (lowest)
-    '2G:GSM900': 1,
-    '2G:GSM1800': 2,
-    // 4G bands (medium)
-    '4G:LTE700': 3,
-    '4G:LTE800': 4,
-    '4G:LTE900': 5,
-    '4G:LTE1800': 6,
-    '4G:LTE2100': 7,
-    '4G:LTE2600': 8,
-    // 5G bands (highest)
-    '5G:5G-700': 9,
-    '5G:5G-2100': 10,
-    '5G:5G-3500': 11,
+export const Z_INDEX_BY_BAND = {
+    // 2G bands
+    '2G_900': 5,
+    '2G_1800': 4,
+    // 4G bands
+    '4G_700': 2,
+    '4G_800': 3,
+    '4G_900': 4,
+    '4G_1800': 8,
+    '4G_2100': 9,
+    '4G_2600': 11,
+    // 5G bands
+    '5G_700': 9,
+    '5G_2100': 10,
+    '5G_3500': 12
 };
-/**
- * Get z-order index for a tech:fband combination
- * Used to set the sort key for layering overlapping repeaters
- *
- * @param tech - Technology (2G, 4G, 5G)
- * @param fband - Frequency band (e.g., "LTE1800", "GSM900")
- * @returns Z-order index (defaults to 0 if not found)
- */
-export function getRepeaterZOrder(tech, fband) {
-    const key = `${tech}:${fband}`;
-    return REPEATER_TECH_BAND_Z_ORDER[key] ?? 0;
-}

package/dist/map-v2/features/repeaters/index.d.ts

@@ -13,4 +13,4 @@ export { repeatersToGeoJSON } from './utils/repeaterGeoJSON';
 export { buildRepeaterTree, getFilteredRepeaters } from './utils/repeaterTree';
 export { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX } from './constants/zIndex';
 export { REPEATER_RADIUS_MULTIPLIER, getRepeaterRadiusMultiplier } from './constants/radiusMultipliers';
-export { REPEATER_TECH_BAND_Z_ORDER, getRepeaterZOrder } from './constants/techBandZOrder';
+export { Z_INDEX_BY_BAND } from './constants/techBandZOrder';

package/dist/map-v2/features/repeaters/index.js

@@ -16,4 +16,4 @@ export { buildRepeaterTree, getFilteredRepeaters } from './utils/repeaterTree';
 // Constants
 export { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX } from './constants/zIndex';
 export { REPEATER_RADIUS_MULTIPLIER, getRepeaterRadiusMultiplier } from './constants/radiusMultipliers';
-export { REPEATER_TECH_BAND_Z_ORDER, getRepeaterZOrder } from './constants/techBandZOrder';
+export { Z_INDEX_BY_BAND } from './constants/techBandZOrder';

package/dist/map-v2/features/repeaters/layers/RepeatersLayer.svelte

@@ -17,6 +17,7 @@
 	import { useMapbox } from '../../../core/hooks/useMapbox';
 	import { repeatersToGeoJSON } from '../utils/repeaterGeoJSON';
 	import { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX } from '../constants/zIndex';
+	import { Z_INDEX_BY_BAND } from '../constants/techBandZOrder';
 
 	interface Props {
 		/** Repeater store context */
@@ -26,28 +27,34 @@
 	}
 
 	let { store, namespace }: Props = $props();
-	
-	const FILL_LAYER_ID = `${namespace}-repeaters-fill`;
-	const LINE_LAYER_ID = `${namespace}-repeaters-line`;
+
 	const SOURCE_ID = `${namespace}-repeaters`;
-	
+
 	// Get map from mapbox hook
 	const mapStore = useMapbox();
-	
+
 	let map = $state<MapboxMap | null>(null);
 	let mounted = $state(false);
 	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
 	let viewportVersion = $state(0); // Increment to force $effect re-run on viewport changes
-	
+
+	// Get all unique z-index values and sort them
+	const sortedZIndexes = [...new Set(Object.values(Z_INDEX_BY_BAND))].sort((a, b) => a - b);
+
+	// Create layer IDs for each z-index
+	const fillLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-repeaters-fill-${zIndex}`);
+	const lineLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-repeaters-line-${zIndex}`);
+	const allLayerIds = [...fillLayerIds, ...lineLayerIds];
+
 	// Viewport change handler with debouncing
 	function handleMoveEnd() {
 		if (!map) return;
-		
+
 		// Clear any existing timer
 		if (viewportUpdateTimer) {
 			clearTimeout(viewportUpdateTimer);
 		}
-		
+
 		// Debounce: wait 200ms after last move event before re-rendering
 		viewportUpdateTimer = setTimeout(() => {
 			if (!map) return;
@@ -59,73 +66,72 @@
 			viewportVersion++;
 		}, 200);
 	}
-	
+
 	/**
 	 * Initialize or reinitialize the repeater layers
 	 * Called on mount and when map style changes
 	 */
 	function initializeLayer() {
 		if (!map) return;
-		
+
 		console.log('RepeatersLayer: initializeLayer called');
-		
+
 		// Set initial zoom
 		store.setCurrentZoom(map.getZoom());
-		
+
 		// Add moveend listener (remove first to avoid duplicates)
 		map.off('moveend', handleMoveEnd);
 		map.on('moveend', handleMoveEnd);
-		
+
 		// Mark as mounted to trigger $effect
 		mounted = true;
-		
+
 		// Force $effect to re-run
 		viewportVersion++;
 	}
-	
+
 	onMount(() => {
 		console.log('RepeatersLayer: onMount, waiting for map...');
-		
+
 		// Subscribe to map store
 		const unsubscribe = mapStore.subscribe((mapInstance) => {
 			if (mapInstance && !map) {
 				console.log('RepeatersLayer: Map available, initializing...');
 				map = mapInstance;
-				
+
 				// Initial layer setup
 				initializeLayer();
-				
+
 				// Re-initialize layer when map style changes
 				// Mapbox removes all custom layers/sources when setStyle() is called
 				map.on('style.load', initializeLayer);
 			}
 		});
-		
+
 		return () => {
 			unsubscribe();
 		};
 	});
-	
+
 	onDestroy(() => {
 		if (!map) return;
-		
+
 		// Clean up timer
 		if (viewportUpdateTimer) {
 			clearTimeout(viewportUpdateTimer);
 		}
-		
+
 		// Remove style.load listener
 		map.off('style.load', initializeLayer);
-		
+
 		map.off('moveend', handleMoveEnd);
-		
+
 		// Clean up layers and source
-		if (map.getLayer(LINE_LAYER_ID)) {
-			map.removeLayer(LINE_LAYER_ID);
-		}
-		if (map.getLayer(FILL_LAYER_ID)) {
-			map.removeLayer(FILL_LAYER_ID);
-		}
+		allLayerIds.forEach((id) => {
+			if (map.getLayer(id)) {
+				map.removeLayer(id);
+			}
+		});
 		if (map.getSource(SOURCE_ID)) {
 			map.removeSource(SOURCE_ID);
 		}
@@ -135,7 +141,7 @@
 	$effect(() => {
 		// Track viewportVersion to force re-run on pan
 		viewportVersion;
-		
+
 		console.log('RepeatersLayer $effect triggered:', {
 			mounted,
 			hasMap: !!map,
@@ -145,40 +151,40 @@
 			baseRadius: store.baseRadius,
 			viewportVersion
 		});
-		
-		if (!mounted || !map || !store.showRepeaters) {
+
+		if (!mounted || !map) {
+			return;
+		}
+
+		if (!store.showRepeaters) {
 			// Remove layers if showRepeaters is false
-			if (mounted && map) {
-				console.log('RepeatersLayer: Removing layers (showRepeaters=false or not mounted)');
-				if (map.getLayer(LINE_LAYER_ID)) {
-					map.removeLayer(LINE_LAYER_ID);
-				}
-				if (map.getLayer(FILL_LAYER_ID)) {
-					map.removeLayer(FILL_LAYER_ID);
-				}
-				if (map.getSource(SOURCE_ID)) {
-					map.removeSource(SOURCE_ID);
+			allLayerIds.forEach((id) => {
+				if (map.getLayer(id)) {
+					map.removeLayer(id);
 				}
+			});
+			if (map.getSource(SOURCE_ID)) {
+				map.removeSource(SOURCE_ID);
 			}
 			return;
 		}
-		
+
 		// Filter repeaters by viewport bounds (only render visible repeaters)
 		const bounds = map.getBounds();
 		if (!bounds) {
 			console.warn('RepeatersLayer: Cannot get map bounds, skipping viewport filter');
 			return;
 		}
-		
-		const visibleRepeaters = store.filteredRepeaters.filter(repeater => 
+
+		const visibleRepeaters = store.filteredRepeaters.filter((repeater) =>
 			bounds.contains([repeater.longitude, repeater.latitude])
 		);
-		
+
 		console.log('RepeatersLayer: Viewport filtering:', {
 			totalFiltered: store.filteredRepeaters.length,
 			visibleInViewport: visibleRepeaters.length
 		});
-		
+
 		// Generate GeoJSON from visible repeaters only
 		const geoJSON = repeatersToGeoJSON(
 			visibleRepeaters,
@@ -186,12 +192,12 @@
 			store.baseRadius,
 			store.techBandColorMap
 		);
-		
+
 		console.log('RepeatersLayer: Generated GeoJSON:', {
 			featureCount: geoJSON.features.length,
 			firstFeature: geoJSON.features[0]
 		});
-		
+
 		// Update or create source
 		const source = map.getSource(SOURCE_ID);
 		if (source && source.type === 'geojson') {
@@ -204,55 +210,65 @@
 				data: geoJSON
 			});
 		}
-		
-		// Add fill layer if not exists
-		if (!map.getLayer(FILL_LAYER_ID)) {
-			console.log('RepeatersLayer: Creating fill layer');
-			map.addLayer({
-				id: FILL_LAYER_ID,
-				type: 'fill',
-				source: SOURCE_ID,
-				layout: {
-					'fill-sort-key': ['get', 'sortKey'] // Use sortKey for z-ordering
-				},
-				paint: {
-					'fill-color': ['get', 'techBandColor'],
-					'fill-opacity': store.fillOpacity
-				},
-				metadata: {
-					zIndex: REPEATER_FILL_Z_INDEX
-				}
-			});
-		} else {
-			// Update fill opacity
-			console.log('RepeatersLayer: Updating fill opacity:', store.fillOpacity);
-			map.setPaintProperty(FILL_LAYER_ID, 'fill-opacity', store.fillOpacity);
-		}
-		
-		// Add line layer if not exists
-		if (!map.getLayer(LINE_LAYER_ID)) {
-			console.log('RepeatersLayer: Creating line layer');
-			map.addLayer({
-				id: LINE_LAYER_ID,
-				type: 'line',
-				source: SOURCE_ID,
-				layout: {
-					'line-sort-key': ['get', 'sortKey'] // Use sortKey for z-ordering
-				},
-				paint: {
-					'line-color': ['get', 'lineColor'],
-					'line-width': store.lineWidth,
-					'line-opacity': ['get', 'lineOpacity']
-				},
-				metadata: {
-					zIndex: REPEATER_LINE_Z_INDEX
-				}
-			});
-		} else {
-			// Update line width
-			console.log('RepeatersLayer: Updating line width:', store.lineWidth);
-			map.setPaintProperty(LINE_LAYER_ID, 'line-width', store.lineWidth);
+
+		// Get all unique bands for the current z-index
+		const bandsByZIndex = new Map<number, string[]>();
+		for (const [band, zIndex] of Object.entries(Z_INDEX_BY_BAND)) {
+			if (!bandsByZIndex.has(zIndex)) {
+				bandsByZIndex.set(zIndex, []);
+			}
+			bandsByZIndex.get(zIndex)?.push(band);
 		}
+
+		// Add/update layers for each z-index level
+		sortedZIndexes.forEach((zIndex) => {
+			const fillLayerId = `${namespace}-repeaters-fill-${zIndex}`;
+			const lineLayerId = `${namespace}-repeaters-line-${zIndex}`;
+			const bands = bandsByZIndex.get(zIndex) || [];
+
+			// Add fill layer if not exists
+			if (!map.getLayer(fillLayerId)) {
+				console.log(`RepeatersLayer: Creating fill layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: fillLayerId,
+					type: 'fill',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'fill-color': ['get', 'techBandColor'],
+						'fill-opacity': store.fillOpacity
+					},
+					metadata: {
+						zIndex: REPEATER_FILL_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update fill opacity
+				map.setPaintProperty(fillLayerId, 'fill-opacity', store.fillOpacity);
+			}
+
+			// Add line layer if not exists
+			if (!map.getLayer(lineLayerId)) {
+				console.log(`RepeatersLayer: Creating line layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: lineLayerId,
+					type: 'line',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'line-color': ['get', 'lineColor'],
+						'line-width': store.lineWidth,
+						'line-opacity': ['get', 'lineOpacity']
+					},
+					metadata: {
+						zIndex: REPEATER_LINE_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update line width
+				map.setPaintProperty(lineLayerId, 'line-width', store.lineWidth);
+			}
+		});
 	});
 </script>
 

package/dist/map-v2/features/repeaters/utils/repeaterGeoJSON.js

@@ -8,7 +8,7 @@
  */
 import { createArcPolygon } from '../../cells/utils/arcGeometry';
 import { getRepeaterRadiusMultiplier } from '../constants/radiusMultipliers';
-import { getRepeaterZOrder } from '../constants/techBandZOrder';
+import { Z_INDEX_BY_BAND } from '../constants/techBandZOrder';
 /** Fixed beamwidth for all repeaters */
 const REPEATER_BEAMWIDTH = 30;
 /** Reference zoom level where base radius is used as-is */
@@ -26,6 +26,18 @@ const REFERENCE_ZOOM = 12;
 function getZoomFactor(currentZoom) {
     return Math.pow(2, (REFERENCE_ZOOM - currentZoom) / 2);
 }
+/**
+ * Parse repeater tech and fband into a TechnologyBandKey
+ * Repeaters use format like tech="4G", fband="LTE1800" or "1800"
+ * We need to convert to "4G_1800" format
+ */
+function parseTechBand(tech, fband) {
+    // Extract numeric band from fband (handles "LTE1800", "1800", "GSM900", "900", etc.)
+    const bandMatch = fband.match(/(\d+)/);
+    const band = bandMatch ? bandMatch[1] : fband;
+    // Build TechnologyBandKey
+    return `${tech}_${band}`;
+}
 /**
  * Convert repeaters to GeoJSON FeatureCollection with arc geometries
  *
@@ -37,16 +49,18 @@ function getZoomFactor(currentZoom) {
  */
 export function repeatersToGeoJSON(repeaters, currentZoom, baseRadius = 500, techBandColorMap) {
     const features = repeaters.map((repeater) => {
-        // Get color for this tech:fband combination
-        const key = `${repeater.tech}:${repeater.fband}`;
-        const color = techBandColorMap.get(key) || '#888888'; // Fallback gray
+        // Get color for this tech:fband combination (old format for color map)
+        const colorKey = `${repeater.tech}:${repeater.fband}`;
+        const color = techBandColorMap.get(colorKey) || '#888888'; // Fallback gray
+        // Parse to TechnologyBandKey for z-index lookup
+        const techBandKey = parseTechBand(repeater.tech, repeater.fband);
         // Calculate zoom-reactive radius with inverse scaling (like cells)
         const zoomFactor = getZoomFactor(currentZoom);
         // Apply tech-band specific radius multiplier
         const techBandMultiplier = getRepeaterRadiusMultiplier(repeater.tech, repeater.fband);
         const radius = baseRadius * zoomFactor * techBandMultiplier;
-        // Get z-order for layering (higher frequency = higher z-order = on top)
-        const zOrder = getRepeaterZOrder(repeater.tech, repeater.fband);
+        // Get z-order for layering using shared constant
+        const zIndex = Z_INDEX_BY_BAND[techBandKey] || 0;
         // Create arc polygon geometry with fixed 30° beamwidth
         const center = [repeater.longitude, repeater.latitude];
         const arc = createArcPolygon(center, repeater.azimuth, REPEATER_BEAMWIDTH, radius);
@@ -73,13 +87,13 @@ export function repeatersToGeoJSON(repeaters, currentZoom, baseRadius = 500, tec
                 featureGroup: repeater.featureGroup || '',
                 status: repeater.status || 'active',
                 // Styling properties for Mapbox
-                techBandKey: key,
+                techBandKey: techBandKey, // TechnologyBandKey format for consistency
                 techBandColor: color,
                 lineColor: color,
                 lineOpacity: 0.8,
-                // Z-order for layering (higher frequency on top)
-                zOrder: zOrder,
-                sortKey: zOrder // Used by Mapbox for layer ordering
+                // Z-index for layering (higher frequency on top)
+                zIndex: zIndex,
+                sortKey: zIndex // Used by Mapbox for layer ordering
             }
         };
     });

package/dist/map-v2/index.d.ts

@@ -8,5 +8,5 @@ export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStoreB
 export { MapControl, FeatureSettingsControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
 export { type Site, type SiteStoreValue, type SiteStoreContext, createSiteStore, createSiteStoreContext, SitesLayer, SiteFilterControl, SiteSelectionControl, SiteSizeSlider, sitesToGeoJSON, siteToFeature, buildSiteTree, getFilteredSites } from './features/sites';
 export { type Cell, type CellStatus, type CellStatusStyle, type CellGroupingField, type CellGroupingLabels, type CellTreeConfig, type TechnologyBandKey, type CellStoreValue, type CellStoreContext, createCellStoreContext, CellsLayer, CellLabelsLayer, CellFilterControl, CellStyleControl, cellsToGeoJSON, buildCellTree, getFilteredCells, calculateRadius, getZoomFactor, createArcPolygon, DEFAULT_CELL_TREE_CONFIG, TECHNOLOGY_BAND_COLORS, DEFAULT_STATUS_STYLES, RADIUS_MULTIPLIER } from './features/cells';
-export { type Repeater, type RepeaterTreeNode, type RepeaterStoreValue, type RepeaterStoreContext, createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, getRepeaterZOrder, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER, REPEATER_TECH_BAND_Z_ORDER } from './features/repeaters';
+export { type Repeater, type RepeaterTreeNode, type RepeaterStoreValue, type RepeaterStoreContext, createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER } from './features/repeaters';
 export { DemoMap, demoSites, demoCells, demoRepeaters } from './demo';

package/dist/map-v2/index.js

@@ -23,7 +23,7 @@ export { createCellStoreContext, CellsLayer, CellLabelsLayer, CellFilterControl,
 // ============================================================================
 // REPEATER FEATURE
 // ============================================================================
-export { createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, getRepeaterZOrder, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER, REPEATER_TECH_BAND_Z_ORDER } from './features/repeaters';
+export { createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER } from './features/repeaters';
 // ============================================================================
 // DEMO
 // ============================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.75",
+	"version": "0.0.77",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -32,13 +32,14 @@
 		}
 	},
 	"peerDependencies": {
+		"@turf/turf": "^7.2.0",
 		"bootstrap": "^5.2.3",
+		"deck.gl": "^9.1.0",
+		"@deck.gl/mapbox": "^9.2.2",
 		"dexie": "^4.0.11",
+		"mapbox-gl": "^3.0.0",
 		"plotly.js-dist-min": "^3.1.0",
-		"svelte": "^5.0.0",
-		"@turf/turf": "^7.2.0",
-		"deck.gl": "^9.1.0",
-		"mapbox-gl": "^3.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
@@ -68,6 +69,5 @@
 	},
 	"keywords": [
 		"svelte"
-	],
-	"dependencies": {}
+	]
 }