@smartnet360/svelte-components 0.0.101 → 0.0.102

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-v3/demo/DemoMap.svelte

@@ -102,11 +102,37 @@
 		<FeatureSelectionControl
 			position="bottom-left"
 			cellDataStore={cellData}
-			cellDisplayStore={cellDisplay}
-			title="Feature Selection"
-			actionButtonLabel="Export Selected"
-			onAction={(ids) => console.log('Selected features:', ids)}
-		/>
+			title="Cell Selection"
+			featureIcon="📡"
+			defaultSelectionMode="site"
+		>
+			{#snippet children(selectedIds)}
+				<button
+					type="button"
+					class="btn btn-primary w-100 mb-2"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Process Selected:', selectedIds)}
+				>
+					<i class="bi bi-gear-fill"></i> Process ({selectedIds.length})
+				</button>
+				<button
+					type="button"
+					class="btn btn-outline-primary w-100 mb-2"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Export Selected:', selectedIds)}
+				>
+					<i class="bi bi-download"></i> Export Data
+				</button>
+				<button
+					type="button"
+					class="btn btn-outline-secondary w-100"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Analyze Selected:', selectedIds)}
+				>
+					<i class="bi bi-graph-up"></i> Analyze
+				</button>
+			{/snippet}
+		</FeatureSelectionControl>
 	</Map>
 </div>
 

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

@@ -87,8 +87,13 @@ const TECH_BANDS = [
     { tech: '5G', band: '2100', fband: '5G-2100' },
     { tech: '5G', band: '3500', fband: '5G-3500' }
 ];
-// Three sector azimuths
-const AZIMUTHS = [0, 120, 240];
+// Three sector azimuths with sector numbers
+// Sector 1 = 0°, Sector 2 = 120°, Sector 3 = 240°
+const SECTORS = [
+    { azimuth: 0, sectorNum: 1 },
+    { azimuth: 120, sectorNum: 2 },
+    { azimuth: 240, sectorNum: 3 }
+];
 // Status rotation for variety
 const STATUSES = [
     'On_Air',
@@ -104,6 +109,18 @@ const STATUSES = [
     'On_Air',
     'On_Air'
 ];
+/**
+ * Generate 7-digit cellName from site and sector and band index
+ * Format: SSSS S BB
+ *   SSSS = 4-digit site ID
+ *   S = 1-digit sector number (1, 2, or 3)
+ *   BB = 2-digit band/cell index (41-52 for 11 tech-bands)
+ */
+function generateCellName(siteNum, sectorNum, bandIndex) {
+    const siteId = String(siteNum + 1000).padStart(4, '0'); // Start sites from 1000
+    const cellSuffix = String(41 + bandIndex).padStart(2, '0'); // Bands: 41-52
+    return `${siteId}${sectorNum}${cellSuffix}`;
+}
 /**
  * Generate demo cells with varied density patterns in circular distribution
  * Creates density zones radiating from center with random placement
@@ -144,23 +161,26 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
     const siteLng = addJitter(lng, jitterAmount);
     // Record position
     usedPositions.push({ lat: siteLat, lng: siteLng, minSpacing });
-    const siteId = `DEMO-SITE-${String(actualSiteIndex + 1).padStart(4, '0')}`;
+    // 4-digit site ID (starting from 1000)
+    const siteNum = actualSiteIndex;
+    const siteId = String(siteNum + 1000).padStart(4, '0');
     actualSiteIndex++;
     // Generate 3 sectors per site (with some random 1 or 2 sector sites)
     const numSectors = Math.random() < 0.1 ? (Math.random() < 0.5 ? 1 : 2) : 3; // 10% chance of 1-2 sectors
-    const sectorsToGenerate = AZIMUTHS.slice(0, numSectors);
-    sectorsToGenerate.forEach((azimuth, sectorIndex) => {
-        // Generate 12 tech-bands per sector
-        TECH_BANDS.forEach((techBand, techIndex) => {
-            const cellId = `CELL-${String(cellCounter).padStart(4, '0')}`;
-            const status = STATUSES[techIndex];
+    const sectorsToGenerate = SECTORS.slice(0, numSectors);
+    sectorsToGenerate.forEach((sector) => {
+        // Generate 11 tech-bands per sector (indexes 0-10)
+        TECH_BANDS.forEach((techBand, bandIndex) => {
+            // Generate 7-digit cellName: SSSS + S + BB (e.g., "1000141")
+            const cellName = generateCellName(siteNum, sector.sectorNum, bandIndex);
+            const status = STATUSES[bandIndex];
             demoCells.push({
                 // Core properties
-                id: cellId,
-                txId: `TX-${String(cellCounter).padStart(4, '0')}`,
-                cellID: cellId,
-                cellID2G: techBand.tech === '2G' ? cellId : '',
-                cellName: `${siteId} ${techBand.tech}${techBand.band} S${sectorIndex + 1}`,
+                id: cellName,
+                txId: cellName,
+                cellID: cellName,
+                cellID2G: techBand.tech === '2G' ? cellName : '',
+                cellName: cellName,
                 siteId: siteId,
                 tech: techBand.tech,
                 fband: techBand.fband,
@@ -169,13 +189,13 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 status: status,
                 onAirDate: '2024-01-15',
                 // 2G specific
-                bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
-                ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
+                bcch: techBand.tech === '2G' ? 100 + bandIndex : 0,
+                ctrlid: techBand.tech === '2G' ? `CTRL-${cellName}` : '',
                 // 4G specific
-                dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
+                dlEarfn: techBand.tech === '4G' ? 6200 + bandIndex * 100 : 0,
                 // Physical properties
                 antenna: 'DEMO-ANTENNA-MODEL',
-                azimuth: azimuth,
+                azimuth: sector.azimuth,
                 height: 30, // 30 meters antenna height
                 electricalTilt: '3',
                 beamwidth: BEAMWIDTH,
@@ -186,7 +206,7 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 siteLatitude: siteLat,
                 siteLongitude: siteLng,
                 // Planning
-                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
+                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${sector.azimuth}°`,
                 planner: 'Demo User',
                 // Atoll properties
                 atollETP: 43.0,
@@ -194,7 +214,7 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
                 atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
                 // Network properties
-                cellId3: `${cellId}-3G`,
+                cellId3: `${cellName}-3G`,
                 nwtP1: 20,
                 nwtP2: 40,
                 pci1: (cellCounter % 504), // Physical Cell ID for LTE
@@ -204,14 +224,23 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 other: {
                     demoCell: true,
                     siteNumber: actualSiteIndex,
-                    sector: sectorIndex + 1,
+                    sector: sector.sectorNum,
                     techBandKey: `${techBand.tech}_${techBand.band}`,
                     radius: normalizedRadius,
                     densityZone: zone.name
                 },
-                customSubgroup: `Sector-${sectorIndex + 1}`
+                customSubgroup: `Sector-${sector.sectorNum}`
             });
             cellCounter++;
         });
     });
 }
+// Summary of generated data structure
+console.log(`[Demo Data] Generated ${demoCells.length} cells across ${actualSiteIndex} sites`);
+console.log(`[Demo Data] CellName format: 7-digit numeric (e.g., "1000141")`);
+console.log(`[Demo Data] Structure: SSSS (site) + S (sector 1-3) + BB (band 41-51)`);
+console.log(`[Demo Data] Site ID range: 1000-${1000 + actualSiteIndex - 1}`);
+console.log(`[Demo Data] Example Site 1000:`);
+console.log(`  - Sector 1 (0°):   1000141-1000151 (11 bands)`);
+console.log(`  - Sector 2 (120°): 1000241-1000251 (11 bands)`);
+console.log(`  - Sector 3 (240°): 1000341-1000351 (11 bands)`);

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

@@ -66,24 +66,44 @@
 			}
 
 			if (!map.getLayer(lineLayerId)) {
-				// Line Layer (Border) - Status-based styling
+				// Line Layer (Border) - Status-based styling with feature-state support
 				map.addLayer({
 					id: lineLayerId,
 					type: 'line',
 					source: sourceId,
 					paint: {
-						'line-color': ['get', 'lineColor'],
+						'line-color': [
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							'#FF6B00', // Selected: orange
+							['get', 'lineColor'] // Default: status color
+						],
 						'line-width': [
-							'*',
-							['get', 'lineWidth'],
-							displayStore.lineWidth
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							4, // Selected: thick
+							[
+								'*',
+								['get', 'lineWidth'],
+								displayStore.lineWidth
+							] // Default: scaled by display setting
+						],
+						'line-opacity': [
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							1, // Selected: full opacity
+							['get', 'lineOpacity'] // Default: status opacity
 						],
-						'line-opacity': ['get', 'lineOpacity'],
 						'line-dasharray': [
 							'case',
-							['>', ['length', ['get', 'dashArray']], 0],
-							['get', 'dashArray'],
-							['literal', []]
+							['boolean', ['feature-state', 'selected'], false],
+							['literal', []], // Selected: solid line
+							[
+								'case',
+								['>', ['length', ['get', 'dashArray']], 0],
+								['get', 'dashArray'],
+								['literal', []]
+							] // Default: status dash
 						]
 					},
 					layout: {

package/dist/map-v3/features/cells/logic/geometry.js

@@ -79,6 +79,9 @@ export function generateCellArc(cell, radiusMeters, zIndex, color, beamwidthOver
     const sector = turf.sector(center, radiusMeters / 1000, bearing1, bearing2, {
         steps: 10 // Low steps for performance, increase if jagged
     });
+    // Set numeric ID at feature level for Mapbox feature-state support
+    // cellName is a numeric string (e.g., "4080141"), convert to number
+    sector.id = Number(cell.cellName);
     // Get status style
     const statusStyle = DEFAULT_STATUS_STYLES[cell.status] || DEFAULT_STATUS_STYLES['On_Air'];
     // Attach properties for styling and interaction

package/dist/map-v3/features/cells/stores/cell.data.svelte.d.ts

@@ -4,8 +4,35 @@ export declare class CellDataStore {
     rawCells: Cell[];
     filterOnAir: boolean;
     siteDistanceStore: SiteDistanceStore;
+    private _siteToCellsMap;
+    private _sectorToCellsMap;
+    private _cellNameToIdMap;
     constructor();
     setCells(cells: Cell[]): void;
+    /**
+     * Rebuild lookup maps when cell data changes
+     */
+    private rebuildLookupMaps;
     get filteredCells(): Cell[];
+    /**
+     * Get all cell names belonging to a site (by site ID)
+     */
+    getCellsBySiteId(siteId: string): string[];
+    /**
+     * Get all cell names belonging to a sector (by sector ID)
+     */
+    getCellsBySectorId(sectorId: string): string[];
+    /**
+     * Get numeric ID for a cell name
+     */
+    getNumericId(cellName: string): number | undefined;
+    /**
+     * Extract site ID from cell name (first 4 digits)
+     */
+    getSiteIdFromCellName(cellName: string): string;
+    /**
+     * Extract sector ID from cell name (first 5 digits)
+     */
+    getSectorIdFromCellName(cellName: string): string;
 }
 export declare function createCellDataStore(): CellDataStore;

package/dist/map-v3/features/cells/stores/cell.data.svelte.js

@@ -4,6 +4,10 @@ export class CellDataStore {
     filterOnAir = $state(false);
     // Internal site distance store for auto-sizing
     siteDistanceStore;
+    // Cached lookup maps (rebuilt when cells change)
+    _siteToCellsMap = $state(new Map());
+    _sectorToCellsMap = $state(new Map());
+    _cellNameToIdMap = $state(new Map());
     constructor() {
         this.siteDistanceStore = new SiteDistanceStore();
     }
@@ -11,12 +15,73 @@ export class CellDataStore {
         this.rawCells = cells;
         // Automatically update site distances when cells are loaded
         this.siteDistanceStore.updateDistances(cells);
+        // Rebuild lookup maps
+        this.rebuildLookupMaps();
+    }
+    /**
+     * Rebuild lookup maps when cell data changes
+     */
+    rebuildLookupMaps() {
+        console.log('[CellDataStore] Rebuilding lookup maps for', this.rawCells.length, 'cells');
+        // Clear existing maps
+        this._siteToCellsMap.clear();
+        this._sectorToCellsMap.clear();
+        this._cellNameToIdMap.clear();
+        // Build all maps in one pass
+        for (const cell of this.rawCells) {
+            const siteId = cell.cellName.substring(0, 4);
+            const sectorId = cell.cellName.substring(0, 5);
+            const numericId = Number(cell.cellName);
+            // Site map
+            if (!this._siteToCellsMap.has(siteId)) {
+                this._siteToCellsMap.set(siteId, []);
+            }
+            this._siteToCellsMap.get(siteId).push(cell.cellName);
+            // Sector map
+            if (!this._sectorToCellsMap.has(sectorId)) {
+                this._sectorToCellsMap.set(sectorId, []);
+            }
+            this._sectorToCellsMap.get(sectorId).push(cell.cellName);
+            // Cell name to ID map
+            this._cellNameToIdMap.set(cell.cellName, numericId);
+        }
+        console.log('[CellDataStore] Lookup maps built:', this._siteToCellsMap.size, 'sites,', this._sectorToCellsMap.size, 'sectors,', this._cellNameToIdMap.size, 'cells');
     }
     get filteredCells() {
         if (!this.filterOnAir)
             return this.rawCells;
         return this.rawCells.filter(c => c.status === 'On_Air');
     }
+    /**
+     * Get all cell names belonging to a site (by site ID)
+     */
+    getCellsBySiteId(siteId) {
+        return this._siteToCellsMap.get(siteId) || [];
+    }
+    /**
+     * Get all cell names belonging to a sector (by sector ID)
+     */
+    getCellsBySectorId(sectorId) {
+        return this._sectorToCellsMap.get(sectorId) || [];
+    }
+    /**
+     * Get numeric ID for a cell name
+     */
+    getNumericId(cellName) {
+        return this._cellNameToIdMap.get(cellName);
+    }
+    /**
+     * Extract site ID from cell name (first 4 digits)
+     */
+    getSiteIdFromCellName(cellName) {
+        return cellName.substring(0, 4);
+    }
+    /**
+     * Extract sector ID from cell name (first 5 digits)
+     */
+    getSectorIdFromCellName(cellName) {
+        return cellName.substring(0, 5);
+    }
 }
 export function createCellDataStore() {
     return new CellDataStore();

package/dist/map-v3/features/selection/components/FeatureSelectionControl.svelte

@@ -3,58 +3,58 @@
 	import { MapControl } from '../../../shared';
 	import type { MapStore } from '../../../core/stores/map.store.svelte';
 	import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
-	import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
-	import { createFeatureSelectionStore } from '../stores/selection.store.svelte';
-	import SelectionHighlightLayers from '../layers/SelectionHighlightLayers.svelte';
+	import { createFeatureSelectionStore, type SelectionMode } from '../stores/selection.store.svelte';
 	import type { SelectedFeature } from '../types';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
-		cellDataStore?: CellDataStore;
-		cellDisplayStore?: CellDisplayStore;
+		cellDataStore: CellDataStore;
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		title?: string;
 		icon?: string;
 		iconOnlyWhenCollapsed?: boolean;
-		onAction?: (featureIds: string[]) => void;
-		actionButtonLabel?: string;
 		featureIcon?: string;
-		idPropertyOptions?: string[];
-		defaultIdProperty?: string;
-		highlightColor?: string;
-		highlightWidth?: number;
+		defaultSelectionMode?: SelectionMode;
+		children?: Snippet<[string[]]>;
 	}
 
 	let {
 		cellDataStore,
-		cellDisplayStore,
 		position = 'top-left',
 		title = 'Feature Selection',
 		icon = 'cursor-fill',
 		iconOnlyWhenCollapsed = true,
-		onAction,
-		actionButtonLabel = 'Process Selection',
 		featureIcon = 'geo-alt-fill',
-		idPropertyOptions = ['siteId', 'sectorId', 'cellName'],
-		defaultIdProperty = 'siteId',
-		highlightColor = '#FF6B00',
-		highlightWidth = 4
+		defaultSelectionMode = 'site',
+		children
 	}: Props = $props();
 
 	const mapStore = getContext<MapStore>('MAP_CONTEXT');
 	const store = createFeatureSelectionStore();
 
-	store.setIdProperty(defaultIdProperty);
-
+	// Initialize selection mode
+	store.setIdProperty(defaultSelectionMode);
+	
 	let selectedFeatures = $derived(store.getSelectedFeatures());
 	let selectionCount = $derived(store.count);
+	let cellCount = $derived(store.cellCount);
+	let selectedIds = $derived(store.getSelectedIds());
 	let hasSelection = $derived(selectionCount > 0);
 	let isCollapsed = $state(false);
+	let currentMode = $state<SelectionMode>(defaultSelectionMode);
+	let isInitialized = $state(false);
 
+	// Initialize store with map and cell data (run once)
 	$effect(() => {
+		if (isInitialized) return;
+		
 		const map = mapStore.map;
-		if (map && !store['map']) {
+		if (map) {
+			console.log('[FeatureSelectionControl] Initializing selection store');
 			store.setMap(map);
+			store.setCellDataStore(cellDataStore);
 			store.enableSelectionMode();
+			isInitialized = true;
 		}
 	});
 
@@ -71,9 +71,11 @@
 		}
 	}
 
-	function handleIdPropertyChange(event: Event) {
+	function handleModeChange(event: Event) {
 		const target = event.target as HTMLSelectElement;
-		store.setIdProperty(target.value);
+		const mode = target.value as SelectionMode;
+		currentMode = mode;
+		store.setIdProperty(mode);
 	}
 
 	function handleRemoveFeature(featureId: string) {
@@ -85,7 +87,7 @@
 	}
 
 	async function handleCopy() {
-		const ids = store.getSelectedIds().join(',');
+		const ids = selectedIds.join(',');
 		try {
 			await navigator.clipboard.writeText(ids);
 			console.log('[FeatureSelection] Copied to clipboard:', ids);
@@ -94,14 +96,22 @@
 		}
 	}
 
-	function handleAction() {
-		if (onAction && hasSelection) {
-			const ids = store.getSelectedIds();
-			onAction(ids);
+	// Get display label for selection mode
+	function getModeLabel(mode: SelectionMode): string {
+		switch (mode) {
+			case 'site': return 'Site (all sectors)';
+			case 'sector': return 'Sector (all bands)';
+			case 'cell': return 'Individual Cell';
 		}
 	}
-</script>
 
+	// Get cell count description for a feature
+	function getCellCountText(feature: SelectedFeature): string {
+		const count = feature.cellNames?.length || 0;
+		if (count <= 1) return '';
+		return ` (${count} cells)`;
+	}
+</script>
 <MapControl
 	{position}
 	{title}
@@ -109,28 +119,45 @@
 	{iconOnlyWhenCollapsed}
 	collapsible={true}
 	onCollapseToggle={handleCollapseToggle}
-	controlWidth="300px"
+	controlWidth="320px"
 >
 	<div class="feature-selection-control">
-		<!-- ID Property Selector -->
+		<!-- Selection Mode Selector -->
 		<div class="mb-3">
-			<label for="id-property-select" class="form-label small fw-semibold">Select By</label>
+			<label for="mode-select" class="form-label small fw-semibold">Selection Mode</label>
 			<select
-				id="id-property-select"
+				id="mode-select"
 				class="form-select form-select-sm"
-				value={store.idProperty}
-				onchange={handleIdPropertyChange}
+				value={currentMode}
+				onchange={handleModeChange}
 			>
-				{#each idPropertyOptions as option}
-					<option value={option}>{option}</option>
-				{/each}
+				<option value="site">{getModeLabel('site')}</option>
+				<option value="sector">{getModeLabel('sector')}</option>
+				<option value="cell">{getModeLabel('cell')}</option>
 			</select>
+			<div class="form-text small mt-1">
+				{#if currentMode === 'site'}
+					Click any cell to select all cells at that site
+				{:else if currentMode === 'sector'}
+					Click any cell to select all cells in that sector
+				{:else}
+					Click to select individual cells
+				{/if}
+			</div>
 		</div>
 
 		<!-- Selection Stats -->
-		<div class="selection-stats mb-2 text-secondary">
-			<strong>{selectionCount}</strong>
-			{selectionCount === 1 ? 'item' : 'items'} selected
+		<div class="selection-stats mb-2">
+			<div class="d-flex justify-content-between align-items-center">
+				<span class="text-secondary">
+					<strong>{selectionCount}</strong> {selectionCount === 1 ? 'group' : 'groups'}
+				</span>
+				{#if cellCount > selectionCount}
+					<span class="badge bg-secondary">
+						{cellCount} {cellCount === 1 ? 'cell' : 'cells'} total
+					</span>
+				{/if}
+			</div>
 		</div>
 
 		<!-- Action Buttons -->
@@ -162,11 +189,17 @@
 			<div class="feature-list">
 				{#each selectedFeatures as feature (feature.id)}
 					<div class="feature-item">
-						<i class="bi bi-{featureIcon} feature-icon"></i>
+						<i class="bi bi-grid-3x3-gap-fill feature-icon"></i>
 						<div class="feature-info">
-							<span class="feature-id">{feature.id}</span>
-							{#if feature.layerId}
-								<small class="feature-layer text-muted">{feature.layerId}</small>
+							<span class="feature-id">
+								{feature.id}{getCellCountText(feature)}
+							</span>
+							{#if currentMode === 'site'}
+								<small class="feature-layer text-muted">Site</small>
+							{:else if currentMode === 'sector'}
+								<small class="feature-layer text-muted">Sector</small>
+							{:else}
+								<small class="feature-layer text-muted">Cell</small>
 							{/if}
 						</div>
 						<button
@@ -185,35 +218,19 @@
 			<div class="text-muted small text-center py-3">
 				<i class="bi bi-inbox" style="font-size: 2rem; opacity: 0.3;"></i>
 				<div class="mt-2">No items selected</div>
-				<div class="mt-1">Click on features to select</div>
+				<div class="mt-1">Click on map to select</div>
 			</div>
 		{/if}
 
-		<!-- Action Button -->
-		{#if onAction}
+		<!-- Custom Action Buttons (snippet) -->
+		{#if children}
 			<div class="mt-3">
-				<button
-					type="button"
-					class="btn btn-primary w-100"
-					disabled={!hasSelection}
-					onclick={handleAction}
-				>
-					<i class="bi bi-lightning-charge-fill"></i> {actionButtonLabel}
-				</button>
+				{@render children(selectedIds)}
 			</div>
 		{/if}
 	</div>
 </MapControl>
 
-<!-- Highlight Layers -->
-<SelectionHighlightLayers
-	{selectedFeatures}
-	{cellDataStore}
-	{cellDisplayStore}
-	{highlightColor}
-	{highlightWidth}
-/>
-
 <style>
 	.feature-selection-control {
 		width: 100%;

package/dist/map-v3/features/selection/components/FeatureSelectionControl.svelte.d.ts

@@ -1,19 +1,15 @@
 import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
-import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
+import { type SelectionMode } from '../stores/selection.store.svelte';
+import type { Snippet } from 'svelte';
 interface Props {
-    cellDataStore?: CellDataStore;
-    cellDisplayStore?: CellDisplayStore;
+    cellDataStore: CellDataStore;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     title?: string;
     icon?: string;
     iconOnlyWhenCollapsed?: boolean;
-    onAction?: (featureIds: string[]) => void;
-    actionButtonLabel?: string;
     featureIcon?: string;
-    idPropertyOptions?: string[];
-    defaultIdProperty?: string;
-    highlightColor?: string;
-    highlightWidth?: number;
+    defaultSelectionMode?: SelectionMode;
+    children?: Snippet<[string[]]>;
 }
 declare const FeatureSelectionControl: import("svelte").Component<Props, {}, "">;
 type FeatureSelectionControl = ReturnType<typeof FeatureSelectionControl>;

package/dist/map-v3/features/selection/index.d.ts

@@ -4,6 +4,5 @@
  * Exports all selection-related components, stores, and types.
  */
 export type { SelectedFeature, SelectionStoreState } from './types';
-export { createFeatureSelectionStore, FeatureSelectionStore } from './stores/selection.store.svelte';
+export { createFeatureSelectionStore, FeatureSelectionStore, type SelectionMode } from './stores/selection.store.svelte';
 export { default as FeatureSelectionControl } from './components/FeatureSelectionControl.svelte';
-export { default as SelectionHighlightLayers } from './layers/SelectionHighlightLayers.svelte';

package/dist/map-v3/features/selection/index.js

@@ -7,4 +7,3 @@
 export { createFeatureSelectionStore, FeatureSelectionStore } from './stores/selection.store.svelte';
 // Components
 export { default as FeatureSelectionControl } from './components/FeatureSelectionControl.svelte';
-export { default as SelectionHighlightLayers } from './layers/SelectionHighlightLayers.svelte';

package/dist/map-v3/features/selection/stores/selection.store.svelte.d.ts

@@ -2,14 +2,19 @@
  * Feature Selection Store - Svelte 5 Runes Implementation
  *
  * Manages selection of map features (cells, sites) with click detection.
+ * Supports multi-cell selection based on site/sector hierarchy.
  */
 import type { Map as MapboxMap } from 'mapbox-gl';
 import type { SelectedFeature } from '../types';
+import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
+export type SelectionMode = 'cell' | 'sector' | 'site';
 export declare class FeatureSelectionStore {
     private selectedFeatures;
+    private selectedCellNames;
     private map;
+    private cellDataStore;
     selectionMode: boolean;
-    idProperty: string;
+    idProperty: SelectionMode;
     queryLayers: string[];
     private clickHandler;
     private onSelectionChange?;
@@ -18,9 +23,13 @@ export declare class FeatureSelectionStore {
      */
     setMap(mapInstance: MapboxMap): void;
     /**
-     * Set which property to use as the ID
+     * Set the cell data store for lookup maps
      */
-    setIdProperty(property: string): void;
+    setCellDataStore(dataStore: CellDataStore): void;
+    /**
+     * Set which property to use as the ID (selection mode)
+     */
+    setIdProperty(property: SelectionMode): void;
     /**
      * Set which layers to query for features
      */
@@ -34,45 +43,65 @@ export declare class FeatureSelectionStore {
      */
     private setupClickHandler;
     /**
-     * Enable selection mode
+     * Handle click on a cell - expand to site/sector based on mode
      */
-    enableSelectionMode(): void;
+    private handleCellClick;
     /**
-     * Disable selection mode
+     * Handle click on a site marker (if sites layer exists)
      */
-    disableSelectionMode(): void;
+    private handleSiteClick;
     /**
-     * Toggle a feature in the selection
+     * Toggle a group of cells (site or sector)
      */
-    toggleFeatureSelection(id: string, layerId?: string, properties?: Record<string, any>, siteId?: string, cellName?: string): void;
+    private toggleGroupSelection;
     /**
-     * Add a feature to the selection
+     * Update Mapbox feature-state for cells
      */
-    addFeatureSelection(id: string, layerId?: string, properties?: Record<string, any>, siteId?: string, cellName?: string): void;
+    private updateFeatureStates;
     /**
-     * Remove a feature from the selection
+     * Enable selection mode
      */
-    removeFeatureSelection(id: string): void;
+    enableSelectionMode(): void;
+    /**
+     * Disable selection mode
+     */
+    disableSelectionMode(): void;
     /**
      * Clear all selections
      */
     clearSelection(): void;
+    /**
+     * Remove a selection group by ID
+     */
+    removeFeatureSelection(id: string): void;
     /**
      * Get all selected features
      */
     getSelectedFeatures(): SelectedFeature[];
     /**
-     * Get selected feature IDs only
+     * Get selected group IDs (site/sector/cell IDs)
      */
     getSelectedIds(): string[];
+    /**
+     * Get all selected cell names (flattened from all groups)
+     */
+    getSelectedCellNames(): string[];
     /**
      * Check if a feature is selected
      */
     isFeatureSelected(id: string): boolean;
     /**
-     * Get selection count
+     * Check if a specific cell is selected
+     */
+    isCellSelected(cellName: string): boolean;
+    /**
+     * Get selection count (number of groups, not individual cells)
      */
     get count(): number;
+    /**
+     * Get total number of selected cells
+     */
+    get cellCount(): number;
     /**
      * Cleanup - remove event handlers
      */

package/dist/map-v3/features/selection/stores/selection.store.svelte.js

@@ -2,12 +2,15 @@
  * Feature Selection Store - Svelte 5 Runes Implementation
  *
  * Manages selection of map features (cells, sites) with click detection.
+ * Supports multi-cell selection based on site/sector hierarchy.
  */
 export class FeatureSelectionStore {
     selectedFeatures = $state([]);
+    selectedCellNames = $state(new Set()); // Track all selected cell names
     map = $state(null);
+    cellDataStore = null;
     selectionMode = $state(false);
-    idProperty = $state('siteId');
+    idProperty = $state('site'); // 'cell', 'sector', or 'site'
     queryLayers = $state([
         'cells-layer',
         'sites-layer'
@@ -22,7 +25,13 @@ export class FeatureSelectionStore {
         this.setupClickHandler();
     }
     /**
-     * Set which property to use as the ID
+     * Set the cell data store for lookup maps
+     */
+    setCellDataStore(dataStore) {
+        this.cellDataStore = dataStore;
+    }
+    /**
+     * Set which property to use as the ID (selection mode)
      */
     setIdProperty(property) {
         this.idProperty = property;
@@ -55,13 +64,16 @@ export class FeatureSelectionStore {
             if (features && features.length > 0) {
                 // Get the topmost feature with an id
                 for (const feature of features) {
-                    // Use the configured property as the ID
-                    const featureId = feature.properties?.[this.idProperty] || feature.id;
-                    const siteId = feature.properties?.siteId;
                     const cellName = feature.properties?.cellName;
-                    if (featureId) {
-                        this.toggleFeatureSelection(String(featureId), feature.layer?.id, feature.properties || undefined, siteId, cellName);
-                        break; // Only select the topmost feature
+                    const siteId = feature.properties?.siteId;
+                    if (cellName && this.cellDataStore) {
+                        this.handleCellClick(cellName, feature.layer?.id, feature.properties || undefined);
+                        break;
+                    }
+                    else if (siteId) {
+                        // Fallback for site clicks (if sites layer exists)
+                        this.handleSiteClick(siteId, feature.layer?.id, feature.properties || undefined);
+                        break;
                     }
                 }
             }
@@ -69,64 +81,156 @@ export class FeatureSelectionStore {
         this.map.on('click', this.clickHandler);
     }
     /**
-     * Enable selection mode
+     * Handle click on a cell - expand to site/sector based on mode
      */
-    enableSelectionMode() {
-        this.selectionMode = true;
+    handleCellClick(cellName, layerId, properties) {
+        if (!this.cellDataStore)
+            return;
+        console.log('[Selection] Clicked cell:', cellName, 'Mode:', this.idProperty);
+        let cellNamesToSelect = [];
+        let selectionId;
+        switch (this.idProperty) {
+            case 'site': {
+                // Select all cells in the site (first 4 digits)
+                const siteId = this.cellDataStore.getSiteIdFromCellName(cellName);
+                cellNamesToSelect = this.cellDataStore.getCellsBySiteId(siteId);
+                selectionId = siteId;
+                console.log('[Selection] Site mode - selecting', cellNamesToSelect.length, 'cells for site', siteId);
+                break;
+            }
+            case 'sector': {
+                // Select all cells in the sector (first 5 digits)
+                const sectorId = this.cellDataStore.getSectorIdFromCellName(cellName);
+                cellNamesToSelect = this.cellDataStore.getCellsBySectorId(sectorId);
+                selectionId = sectorId;
+                console.log('[Selection] Sector mode - selecting', cellNamesToSelect.length, 'cells for sector', sectorId);
+                break;
+            }
+            case 'cell':
+            default: {
+                // Select just this cell
+                cellNamesToSelect = [cellName];
+                selectionId = cellName;
+                console.log('[Selection] Cell mode - selecting 1 cell');
+                break;
+            }
+        }
+        // Toggle the selection group
+        this.toggleGroupSelection(selectionId, cellNamesToSelect, layerId, properties);
     }
     /**
-     * Disable selection mode
+     * Handle click on a site marker (if sites layer exists)
      */
-    disableSelectionMode() {
-        this.selectionMode = false;
+    handleSiteClick(siteId, layerId, properties) {
+        if (!this.cellDataStore)
+            return;
+        // Always select all cells in the site when clicking site marker
+        const cellNamesToSelect = this.cellDataStore.getCellsBySiteId(siteId);
+        this.toggleGroupSelection(siteId, cellNamesToSelect, layerId, properties);
     }
     /**
-     * Toggle a feature in the selection
+     * Toggle a group of cells (site or sector)
      */
-    toggleFeatureSelection(id, layerId, properties, siteId, cellName) {
-        const index = this.selectedFeatures.findIndex(f => f.id === id);
-        if (index >= 0) {
-            // Remove if already selected
-            this.selectedFeatures.splice(index, 1);
+    toggleGroupSelection(groupId, cellNames, layerId, properties) {
+        // Check if this group is already selected
+        const isSelected = this.selectedFeatures.some(f => f.id === groupId);
+        if (isSelected) {
+            // Remove the group
+            this.selectedFeatures = this.selectedFeatures.filter(f => f.id !== groupId);
+            // Remove all cell names from the set
+            cellNames.forEach(name => this.selectedCellNames.delete(name));
         }
         else {
-            // Add if not selected
-            this.selectedFeatures.push({ id, layerId, properties, siteId, cellName });
+            // Add the group
+            this.selectedFeatures.push({
+                id: groupId,
+                layerId,
+                properties,
+                cellNames // Store which cells belong to this group
+            });
+            // Add all cell names to the set
+            cellNames.forEach(name => this.selectedCellNames.add(name));
         }
+        // Update feature-state for all affected cells
+        this.updateFeatureStates(cellNames, !isSelected);
         // Trigger callback
         if (this.onSelectionChange) {
             this.onSelectionChange(this.selectedFeatures);
         }
     }
     /**
-     * Add a feature to the selection
+     * Update Mapbox feature-state for cells
      */
-    addFeatureSelection(id, layerId, properties, siteId, cellName) {
-        const exists = this.selectedFeatures.some(f => f.id === id);
-        if (!exists) {
-            this.selectedFeatures.push({ id, layerId, properties, siteId, cellName });
-            if (this.onSelectionChange) {
-                this.onSelectionChange(this.selectedFeatures);
+    updateFeatureStates(cellNames, selected) {
+        if (!this.map || !this.cellDataStore)
+            return;
+        console.log('[Selection] Updating feature-state for', cellNames.length, 'cells, selected:', selected);
+        const startTime = performance.now();
+        let successCount = 0;
+        let failCount = 0;
+        for (const cellName of cellNames) {
+            const numericId = this.cellDataStore.getNumericId(cellName);
+            if (numericId !== undefined) {
+                try {
+                    this.map.setFeatureState({ source: 'cells-source', id: numericId }, { selected });
+                    successCount++;
+                }
+                catch (error) {
+                    console.error('[Selection] Failed to set feature-state for', cellName, numericId, error);
+                    failCount++;
+                }
+            }
+            else {
+                console.warn('[Selection] No numeric ID found for cell:', cellName);
+                failCount++;
             }
         }
+        const endTime = performance.now();
+        console.log('[Selection] Feature-state update complete:', successCount, 'success,', failCount, 'failed in', (endTime - startTime).toFixed(2), 'ms');
     }
     /**
-     * Remove a feature from the selection
+     * Enable selection mode
      */
-    removeFeatureSelection(id) {
-        const index = this.selectedFeatures.findIndex(f => f.id === id);
-        if (index >= 0) {
-            this.selectedFeatures.splice(index, 1);
-            if (this.onSelectionChange) {
-                this.onSelectionChange(this.selectedFeatures);
-            }
-        }
+    enableSelectionMode() {
+        this.selectionMode = true;
+    }
+    /**
+     * Disable selection mode
+     */
+    disableSelectionMode() {
+        this.selectionMode = false;
     }
     /**
      * Clear all selections
      */
     clearSelection() {
+        // Clear feature-state for all currently selected cells
+        if (this.map && this.cellDataStore) {
+            for (const cellName of this.selectedCellNames) {
+                const numericId = this.cellDataStore.getNumericId(cellName);
+                if (numericId !== undefined) {
+                    this.map.setFeatureState({ source: 'cells-source', id: numericId }, { selected: false });
+                }
+            }
+        }
         this.selectedFeatures = [];
+        this.selectedCellNames.clear();
+        if (this.onSelectionChange) {
+            this.onSelectionChange(this.selectedFeatures);
+        }
+    }
+    /**
+     * Remove a selection group by ID
+     */
+    removeFeatureSelection(id) {
+        const feature = this.selectedFeatures.find(f => f.id === id);
+        if (feature && feature.cellNames) {
+            // Clear feature-state for cells in this group
+            this.updateFeatureStates(feature.cellNames, false);
+            // Remove cell names from set
+            feature.cellNames.forEach(name => this.selectedCellNames.delete(name));
+        }
+        this.selectedFeatures = this.selectedFeatures.filter(f => f.id !== id);
         if (this.onSelectionChange) {
             this.onSelectionChange(this.selectedFeatures);
         }
@@ -138,11 +242,17 @@ export class FeatureSelectionStore {
         return this.selectedFeatures;
     }
     /**
-     * Get selected feature IDs only
+     * Get selected group IDs (site/sector/cell IDs)
      */
     getSelectedIds() {
         return this.selectedFeatures.map(f => f.id);
     }
+    /**
+     * Get all selected cell names (flattened from all groups)
+     */
+    getSelectedCellNames() {
+        return Array.from(this.selectedCellNames);
+    }
     /**
      * Check if a feature is selected
      */
@@ -150,11 +260,23 @@ export class FeatureSelectionStore {
         return this.selectedFeatures.some(f => f.id === id);
     }
     /**
-     * Get selection count
+     * Check if a specific cell is selected
+     */
+    isCellSelected(cellName) {
+        return this.selectedCellNames.has(cellName);
+    }
+    /**
+     * Get selection count (number of groups, not individual cells)
      */
     get count() {
         return this.selectedFeatures.length;
     }
+    /**
+     * Get total number of selected cells
+     */
+    get cellCount() {
+        return this.selectedCellNames.size;
+    }
     /**
      * Cleanup - remove event handlers
      */
@@ -164,6 +286,7 @@ export class FeatureSelectionStore {
         }
         this.clearSelection();
         this.map = null;
+        this.cellDataStore = null;
     }
 }
 /**

package/dist/map-v3/features/selection/types.d.ts

@@ -2,12 +2,14 @@
  * Feature Selection - Type Definitions
  */
 export interface SelectedFeature {
-    /** Feature identifier */
+    /** Feature identifier (can be site ID, sector ID, or cell name) */
     id: string;
     /** Optional site ID */
     siteId?: string;
-    /** Optional cell name */
+    /** Optional cell name (for single cell selections) */
     cellName?: string;
+    /** Array of cell names (for site/sector selections) */
+    cellNames?: string[];
     /** Layer ID where feature was selected from */
     layerId?: string;
     /** Feature properties */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.101",
+	"version": "0.0.102",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/map-v3/features/selection/layers/SelectionHighlightLayers.svelte

@@ -1,209 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import type { MapStore } from '../../../core/stores/map.store.svelte';
-	import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
-	import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
-	import type { SelectedFeature } from '../types';
-	import { generateCellArc, calculateRadiusInMeters } from '../../cells/logic/geometry';
-	import type mapboxgl from 'mapbox-gl';
-
-	interface Props {
-		selectedFeatures: SelectedFeature[];
-		cellDataStore?: CellDataStore;
-		cellDisplayStore?: CellDisplayStore;
-		highlightColor?: string;
-		highlightWidth?: number;
-	}
-
-	let {
-		selectedFeatures,
-		cellDataStore,
-		cellDisplayStore,
-		highlightColor = '#FF6B00',
-		highlightWidth = 4
-	}: Props = $props();
-
-	const mapStore = getContext<MapStore>('MAP_CONTEXT');
-	
-	let cellsSourceId = 'cells-selection-source';
-	let cellsLayerId = 'cells-selection-highlight';
-	let sitesSourceId = 'sites-selection-source';
-	let sitesLayerId = 'sites-selection-highlight';
-
-	// Track current zoom level for radius calculation
-	let currentZoom = $state(13);
-	let centerLat = $state(0);
-
-	// Update zoom level when map changes
-	$effect(() => {
-		const map = mapStore.map;
-		if (!map) return;
-
-		const updateZoom = () => {
-			currentZoom = map.getZoom();
-			centerLat = map.getCenter().lat;
-		};
-
-		updateZoom();
-		map.on('zoom', updateZoom);
-		map.on('move', updateZoom);
-
-		return () => {
-			map.off('zoom', updateZoom);
-			map.off('move', updateZoom);
-		};
-	});
-
-	// Derive highlighted cells based on selected features
-	let highlightedCells = $derived.by(() => {
-		if (!cellDataStore) return [];
-		
-		const cellIds = selectedFeatures
-			.filter(f => f.layerId === 'cells-layer')
-			.map(f => f.id);
-		
-		if (cellIds.length === 0) return [];
-		
-		return cellDataStore.filteredCells.filter(cell => 
-			cellIds.includes(cell.siteId) || 
-			cellIds.includes(cell.cellName) ||
-			cellIds.includes(cell.cellID)
-		);
-	});
-
-	// Derive highlighted sites based on selected features
-	// TODO: Add site highlighting when SiteDataStore is available
-	let highlightedSites = $derived.by(() => {
-		return [];
-	});
-
-	// Generate GeoJSON for cell highlights
-	let cellHighlightGeoJSON = $derived.by(() => {
-		if (!cellDisplayStore || highlightedCells.length === 0) {
-			return { type: 'FeatureCollection', features: [] };
-		}
-		
-		// Calculate radius for current zoom level (same as CellsLayer does)
-		const radiusMeters = calculateRadiusInMeters(centerLat, currentZoom, cellDisplayStore.targetPixelSize);
-		
-		const features = highlightedCells.map(cell =>
-			generateCellArc(cell, radiusMeters, 100, highlightColor)
-		);
-		
-		return {
-			type: 'FeatureCollection' as const,
-			features
-		};
-	});
-
-	// Generate GeoJSON for site highlights
-	let siteHighlightGeoJSON = $derived.by(() => {
-		if (highlightedSites.length === 0) {
-			return { type: 'FeatureCollection', features: [] };
-		}
-		
-		const features = highlightedSites.map((site: any) => ({
-			type: 'Feature' as const,
-			geometry: {
-				type: 'Point' as const,
-				coordinates: [site.longitude, site.latitude]
-			},
-			properties: { siteId: site.siteId }
-		}));
-		
-		return {
-			type: 'FeatureCollection' as const,
-			features
-		};
-	});
-
-	// Initialize and manage layers
-	$effect(() => {
-		const map = mapStore.map;
-		if (!map) return;
-
-		const addLayers = () => {
-			// Cell Selection Highlight Layer
-			if (!map.getSource(cellsSourceId)) {
-				map.addSource(cellsSourceId, {
-					type: 'geojson',
-					data: { type: 'FeatureCollection', features: [] }
-				});
-			}
-
-			if (!map.getLayer(cellsLayerId)) {
-				map.addLayer({
-					id: cellsLayerId,
-					type: 'line',
-					source: cellsSourceId,
-					paint: {
-						'line-color': highlightColor,
-						'line-width': highlightWidth,
-						'line-opacity': 1
-					}
-				});
-			}
-
-			// Site Selection Highlight Layer
-			if (!map.getSource(sitesSourceId)) {
-				map.addSource(sitesSourceId, {
-					type: 'geojson',
-					data: { type: 'FeatureCollection', features: [] }
-				});
-			}
-
-			if (!map.getLayer(sitesLayerId)) {
-				map.addLayer({
-					id: sitesLayerId,
-					type: 'circle',
-					source: sitesSourceId,
-					paint: {
-						'circle-radius': 12,
-						'circle-color': 'transparent',
-						'circle-stroke-color': highlightColor,
-						'circle-stroke-width': highlightWidth,
-						'circle-stroke-opacity': 1
-					}
-				});
-			}
-		};
-
-		// Initial setup
-		addLayers();
-
-		// Events
-		map.on('style.load', addLayers);
-
-		// Cleanup
-		return () => {
-			map.off('style.load', addLayers);
-			
-			if (map.getLayer(cellsLayerId)) map.removeLayer(cellsLayerId);
-			if (map.getLayer(sitesLayerId)) map.removeLayer(sitesLayerId);
-			if (map.getSource(cellsSourceId)) map.removeSource(cellsSourceId);
-			if (map.getSource(sitesSourceId)) map.removeSource(sitesSourceId);
-		};
-	});
-
-	// Update cell highlight source
-	$effect(() => {
-		const map = mapStore.map;
-		if (!map) return;
-
-		const source = map.getSource(cellsSourceId) as mapboxgl.GeoJSONSource;
-		if (source) {
-			source.setData(cellHighlightGeoJSON as any);
-		}
-	});
-
-	// Update site highlight source
-	$effect(() => {
-		const map = mapStore.map;
-		if (!map) return;
-
-		const source = map.getSource(sitesSourceId) as mapboxgl.GeoJSONSource;
-		if (source) {
-			source.setData(siteHighlightGeoJSON as any);
-		}
-	});
-</script>

package/dist/map-v3/features/selection/layers/SelectionHighlightLayers.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
-import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
-import type { SelectedFeature } from '../types';
-interface Props {
-    selectedFeatures: SelectedFeature[];
-    cellDataStore?: CellDataStore;
-    cellDisplayStore?: CellDisplayStore;
-    highlightColor?: string;
-    highlightWidth?: number;
-}
-declare const SelectionHighlightLayers: import("svelte").Component<Props, {}, "">;
-type SelectionHighlightLayers = ReturnType<typeof SelectionHighlightLayers>;
-export default SelectionHighlightLayers;