@smartnet360/svelte-components 0.0.68 → 0.0.70

package/dist/map-v2/demo/DemoMap.svelte

@@ -17,12 +17,11 @@
 	import ViewportSync from '../core/components/ViewportSync.svelte';
 	import SitesLayer from '../features/sites/layers/SitesLayer.svelte';
 	import SiteFilterControl from '../features/sites/controls/SiteFilterControl.svelte';
-	import SiteSizeSlider from '../features/sites/controls/SiteSizeSlider.svelte';
 	import SiteSelectionControl from '../features/sites/controls/SiteSelectionControl.svelte';
 	import CellsLayer from '../features/cells/layers/CellsLayer.svelte';
 	import CellLabelsLayer from '../features/cells/layers/CellLabelsLayer.svelte';
 	import CellFilterControl from '../features/cells/controls/CellFilterControl.svelte';
-	import CellStyleControl from '../features/cells/controls/CellStyleControl.svelte';
+	import FeatureSettingsControl from '../shared/controls/FeatureSettingsControl.svelte';
 	import { createSiteStoreContext } from '../features/sites/stores/siteStoreContext.svelte';
 	import { createCellStoreContext } from '../features/cells/stores/cellStoreContext.svelte';
 	import { createViewportStore } from '../core/stores/viewportStore.svelte';
@@ -196,11 +195,12 @@
 			actionButtonLabel="Open Cluster KPIs"
 		/>
 
-		<!-- Cell style control - visual settings for cells -->
-		<CellStyleControl
-			store={cellStore}
+		<!-- Unified feature settings control - Sites, Cells, and Repeaters -->
+		<FeatureSettingsControl
+			siteStore={siteStore}
+			cellStore={cellStore}
 			position="top-right"
-			title="Cell Settings"
+			title="Feature Settings"
 			initiallyCollapsed={true}
 			icon={controlIcons.cellStyle}
 			iconOnlyWhenCollapsed={useIconHeaders}
@@ -208,15 +208,6 @@
 			labelFieldOptions2G={labelFieldOptions2G}
 		/>
 
-		<!-- Site size control - updates store visual properties -->
-		<SiteSizeSlider
-			store={siteStore}
-			position="top-right"
-			title="Site Settings"
-			icon={controlIcons.siteSize}
-			iconOnlyWhenCollapsed={useIconHeaders}
-		/>
-
 
 	</MapboxProvider>
 </div>

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

@@ -317,7 +317,7 @@
 					type="range"
 					class="form-range"
 					min="1"
-					max="15"
+					max="45"
 					step="1"
 					value={store.azimuthTolerance}
 					oninput={(e) => store.setAzimuthTolerance(Number(e.currentTarget.value))}

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

@@ -15,6 +15,8 @@
 	import { waitForStyleLoad, generateLayerId, generateSourceId } from '../../../shared/utils/mapboxHelpers';
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
 	import type { Cell } from '../types';
+	import { parseTechBand } from '../utils/techBandParser';
+	import { calculateRadius } from '../utils/zoomScaling';
 	import * as turf from '@turf/turf';
 	
 	interface Props {
@@ -32,6 +34,23 @@
 	
 	let map = $state<mapboxgl.Map | null>(null);
 	let unsubscribe: (() => void) | null = null;
+	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
+	let viewportVersion = $state(0); // Increment to force $effect re-run on viewport changes
+	
+	// Viewport change handler (pan/zoom/move) with debouncing
+	function handleViewportChange() {
+		if (!map) return;
+		
+		// Debounce viewport updates to avoid excessive re-renders
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		// Wait 150ms after last pan/zoom before updating
+		viewportUpdateTimer = setTimeout(() => {
+			viewportVersion++;
+		}, 150);
+	}
 	
 	/**
 	 * Get label text for a cell based on tech and selected field
@@ -75,17 +94,35 @@
 	function buildLabelFeatures(): GeoJSON.FeatureCollection {
 		const features: GeoJSON.Feature[] = [];
 		
-		if (!store.showLabels || store.filteredCells.length === 0) {
+		if (!store.showLabels || store.filteredCells.length === 0 || !map) {
+			return { type: 'FeatureCollection', features: [] };
+		}
+		
+		// Get current zoom level
+		const currentZoom = map.getZoom();
+		
+		// Filter cells by viewport bounds (only render labels for visible cells)
+		const bounds = map.getBounds();
+		if (!bounds) {
 			return { type: 'FeatureCollection', features: [] };
 		}
 		
-		// Group cells by site + azimuth
-		const cellGroups = groupCellsByAzimuth(store.filteredCells, store.azimuthTolerance);
+		const visibleCells = store.filteredCells.filter(cell => 
+			bounds.contains([cell.longitude, cell.latitude])
+		);
+		
+		// Group visible cells by site + azimuth
+		const cellGroups = groupCellsByAzimuth(visibleCells, store.azimuthTolerance);
 		
 		cellGroups.forEach((cells, groupKey) => {
 			// Sort cells within group for consistent stacking
 			cells.sort((a, b) => a.id.localeCompare(b.id));
 			
+			// Calculate total height of all labels in this group
+			const totalGroupHeight = cells.length * store.labelSize * 1.5;
+			// Center offset: shift entire group up by half its height
+			const groupCenterOffset = -totalGroupHeight / 2;
+			
 			cells.forEach((cell, index) => {
 				// Determine which fields to use based on tech
 				const is2G = cell.tech === '2G';
@@ -104,17 +141,28 @@
 				
 				if (!labelText.trim()) return; // Skip if no text
 				
-				// Project label position along azimuth
-				const origin = turf.point([cell.siteLongitude, cell.siteLatitude]);
+				// Calculate zoom-aware radius for this cell
+				const techBandParsed = parseTechBand(cell.fband);
+				const techBandKey = techBandParsed?.key || '4G_1800'; // Fallback to default
+				const cellRadius = calculateRadius(store.baseRadius, techBandKey, currentZoom);
+				
+				// Position label at a percentage of the arc radius (configurable via labelOffset)
+				// labelOffset is treated as a percentage (e.g., 300 = 300% = beyond arc, 70 = 70% = inside arc)
+				const labelDistance = (cellRadius * store.labelOffset) / 100;
+				
+				// Project label position along azimuth from the CELL'S location (not site)
+				// This allows labels to follow cells that may be offset from the site center
+				const origin = turf.point([cell.longitude, cell.latitude]);
 				const labelPosition = turf.destination(
 					origin,
-					store.labelOffset / 1000, // Convert meters to kilometers
+					labelDistance / 1000, // Convert meters to kilometers
 					cell.azimuth,
 					{ units: 'kilometers' }
 				);
 				
 				// Calculate vertical offset for stacking (pixels)
-				const stackOffset = index * (store.labelSize + 4);
+				// Position within the centered group
+				const stackOffset = groupCenterOffset + (index * store.labelSize * 1.5) + (store.labelSize * 0.75);
 				
 				features.push({
 					type: 'Feature',
@@ -140,6 +188,74 @@
 		const geojson = buildLabelFeatures();
 		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
 		source.setData(geojson);
+		
+		// Also update paint/layout properties when labels are refreshed
+		if (map.getLayer(layerId)) {
+			map.setLayoutProperty(layerId, 'text-size', store.labelSize);
+			map.setPaintProperty(layerId, 'text-color', store.labelColor);
+			map.setPaintProperty(layerId, 'text-halo-color', store.labelHaloColor);
+			map.setPaintProperty(layerId, 'text-halo-width', store.labelHaloWidth);
+			map.setLayerZoomRange(layerId, store.minLabelZoom, 24);
+		}
+	}
+	
+	/**
+	 * Initialize or reinitialize the label layer
+	 * Called on mount and when map style changes
+	 */
+	async function initializeLayer() {
+		if (!map) return;
+		
+		// Wait for style to load
+		await waitForStyleLoad(map);
+		
+		// Add source if missing
+		if (!map.getSource(sourceId)) {
+			map.addSource(sourceId, {
+				type: 'geojson',
+				data: { type: 'FeatureCollection', features: [] }
+			});
+		}
+		
+		// Add label layer if missing
+		if (!map.getLayer(layerId)) {
+			map.addLayer({
+				id: layerId,
+				type: 'symbol',
+				source: sourceId,
+				minzoom: store.minLabelZoom,
+				layout: {
+					'text-field': ['get', 'text'],
+					'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+					'text-size': store.labelSize,
+					'text-anchor': 'center',
+					'text-offset': [
+						0,
+						['/', ['get', 'stackOffset'], store.labelSize]
+					],
+					'text-allow-overlap': true,
+					'text-ignore-placement': false,
+					'text-max-width': 999,
+					'text-justify': 'center'
+				},
+				paint: {
+					'text-color': store.labelColor,
+					'text-halo-color': store.labelHaloColor,
+					'text-halo-width': store.labelHaloWidth
+				}
+			});
+		}
+		
+		// Initial render
+		updateLabels();
+		
+		// Add event listeners (only once)
+		// Note: These will persist across style changes, but the layer needs reinit
+		if (!map.listens('zoom')) {
+			map.on('zoom', updateLabels);
+			map.on('moveend', handleViewportChange);
+			map.on('zoomend', handleViewportChange);
+		}
 	}
 	
 	onMount(async () => {
@@ -151,53 +267,20 @@
 			
 			map = m;
 			
-			// Wait for style to load
-			await waitForStyleLoad(map);
-			
-			// Add source
-			if (!map.getSource(sourceId)) {
-				map.addSource(sourceId, {
-					type: 'geojson',
-					data: { type: 'FeatureCollection', features: [] }
-				});
-			}
-			
-			// Add label layer
-			if (!map.getLayer(layerId)) {
-				map.addLayer({
-					id: layerId,
-					type: 'symbol',
-					source: sourceId,
-					minzoom: store.minLabelZoom,
-					layout: {
-						'text-field': ['get', 'text'],
-						'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
-						'text-size': store.labelSize,
-						'text-anchor': 'center',
-						'text-offset': [
-							0,
-							['/', ['get', 'stackOffset'], store.labelSize] // Dynamic vertical offset
-						],
-						'text-allow-overlap': true,
-						'text-ignore-placement': false,
-						'text-max-width': 999, // Essentially disable wrapping
-						'text-justify': 'center' // Center multi-line text
-					},
-					paint: {
-						'text-color': store.labelColor,
-						'text-halo-color': store.labelHaloColor,
-						'text-halo-width': store.labelHaloWidth
-					}
-				});
-			}
+			// Initial layer setup
+			await initializeLayer();
 			
-			// Initial render
-			updateLabels();
+			// Re-initialize layer when map style changes
+			// Mapbox removes all custom layers/sources when setStyle() is called
+			map.on('style.load', initializeLayer);
 		});
 	});
 	
 	// Watch for changes in store properties and update labels
 	$effect(() => {
+		// Track viewportVersion to force re-run on pan (even without zoom change)
+		viewportVersion;
+		
 		// Dependencies that should trigger label refresh
 		store.filteredCells;
 		store.showLabels;
@@ -207,25 +290,36 @@
 		store.secondaryLabelField2G;
 		store.labelOffset;
 		store.azimuthTolerance;
+		store.baseRadius; // Zoom-based radius calculation depends on baseRadius
 		
-		updateLabels();
-	});
-	
-	// Watch for style changes and update layer paint/layout properties
-	$effect(() => {
-		if (!map || !map.getLayer(layerId)) return;
+		// Also watch style properties - when they change, updateLabels() will
+		// rebuild the GeoJSON which forces Mapbox to re-read paint properties from store
+		store.labelSize;
+		store.labelColor;
+		store.labelHaloColor;
+		store.labelHaloWidth;
+		store.minLabelZoom;
 		
-		map.setLayoutProperty(layerId, 'text-size', store.labelSize);
-		map.setPaintProperty(layerId, 'text-color', store.labelColor);
-		map.setPaintProperty(layerId, 'text-halo-color', store.labelHaloColor);
-		map.setPaintProperty(layerId, 'text-halo-width', store.labelHaloWidth);
-		map.setLayerZoomRange(layerId, store.minLabelZoom, 24);
+		updateLabels();
 	});
 	
 	onDestroy(() => {
 		unsubscribe?.();
 		
+		// Clear any pending viewport update timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
 		if (map) {
+			// Remove style.load listener
+			map.off('style.load', initializeLayer);
+			
+			// Remove all event listeners
+			map.off('zoom', updateLabels);
+			map.off('moveend', handleViewportChange);
+			map.off('zoomend', handleViewportChange);
+			
 			if (map.getLayer(layerId)) {
 				map.removeLayer(layerId);
 			}

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

@@ -58,6 +58,32 @@
 		}, 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
+		
+		// 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...');
 		
@@ -66,13 +92,13 @@
 			if (mapInstance && !map) {
 				console.log('CellsLayer: Map available, initializing...');
 				map = mapInstance;
-				mounted = true;
 				
-				// Set initial zoom
-				store.setCurrentZoom(mapInstance.getZoom());
+				// Initial layer setup
+				initializeLayer();
 				
-				// Listen to viewport changes (pan + zoom, debounced)
-				mapInstance.on('moveend', handleMoveEnd);
+				// Re-initialize layer when map style changes
+				// Mapbox removes all custom layers/sources when setStyle() is called
+				map.on('style.load', initializeLayer);
 			}
 		});
 		
@@ -89,6 +115,9 @@
 			clearTimeout(viewportUpdateTimer);
 		}
 		
+		// Remove style.load listener
+		map.off('style.load', initializeLayer);
+		
 		map.off('moveend', handleMoveEnd);
 		
 		// Clean up layers and source

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.js

@@ -70,7 +70,7 @@ export function createCellStoreContext(cells) {
         labelHaloColor: persistedSettings.labelHaloColor ?? '#ffffff',
         labelHaloWidth: persistedSettings.labelHaloWidth ?? 1,
         minLabelZoom: persistedSettings.minLabelZoom ?? 14,
-        azimuthTolerance: persistedSettings.azimuthTolerance ?? 5
+        azimuthTolerance: persistedSettings.azimuthTolerance ?? 25
     });
     // Derived: Filter cells by status based on includePlannedCells flag
     // IMPORTANT: This is a pure $derived - it only READS from state, never writes

package/dist/map-v2/features/sites/stores/siteStore.js

@@ -15,7 +15,14 @@ export function createSiteStore(initialSites = []) {
         showLabels: false,
         showOnHover: true,
         strokeWidth: 2,
-        strokeColor: '#ffffff'
+        strokeColor: '#ffffff',
+        labelSize: 12,
+        labelColor: '#000000',
+        labelOffset: 0,
+        labelProperty: 'name',
+        groupColorMap: new Map(),
+        selectionMode: false,
+        selectedSiteIds: new Set()
     };
     const { subscribe, update, set } = writable(defaultState);
     return {

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

@@ -5,7 +5,7 @@
  * Each feature (sites, cells) is completely independent with its own store, layers, and controls.
  */
 export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStoreBridge, MapStyleControl, createMapStore, createViewportStore, type ViewportStore, type ViewportState, useMapbox, tryUseMapbox } from './core';
-export { MapControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
+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 { DemoMap, demoSites, demoCells } from './demo';

package/dist/map-v2/index.js

@@ -11,7 +11,7 @@ export { MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStoreBridge, MapStyle
 // ============================================================================
 // SHARED UTILITIES
 // ============================================================================
-export { MapControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
+export { MapControl, FeatureSettingsControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
 // ============================================================================
 // SITE FEATURE
 // ============================================================================

package/dist/map-v2/shared/controls/FeatureSettingsControl.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	/**
+	 * FeatureSettingsControl - Unified settings control for Sites, Cells, and Repeaters
+	 * 
+	 * Uses Bootstrap accordion to organize settings by feature type.
+	 * Consolidates SiteSizeSlider and CellStyleControl into a single UI.
+	 */
+
+	import MapControl from './MapControl.svelte';
+	import SiteSettingsPanel from './panels/SiteSettingsPanel.svelte';
+	import CellSettingsPanel from './panels/CellSettingsPanel.svelte';
+	import RepeaterSettingsPanel from './panels/RepeaterSettingsPanel.svelte';
+	import type { SiteStoreContext } from '../../features/sites/stores/siteStoreContext.svelte';
+	import type { CellStoreContext } from '../../features/cells/stores/cellStoreContext.svelte';
+	import type { Cell, CellGroupingLabels } from '../../features/cells/types';
+
+	interface Props {
+		/** Site store context */
+		siteStore: SiteStoreContext;
+		/** Cell store context */
+		cellStore: CellStoreContext;
+		/** Available label field options for 4G/5G cells */
+		labelFieldOptions4G5G: Array<keyof Cell>;
+		/** Available label field options for 2G cells */
+		labelFieldOptions2G: Array<keyof Cell>;
+		/** Optional label map for human-readable field names */
+		fieldLabels?: CellGroupingLabels;
+		/** Control position */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Optional header icon */
+		icon?: string;
+		/** Show icon when collapsed (default: true) */
+		iconOnlyWhenCollapsed?: boolean;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		siteStore,
+		cellStore,
+		labelFieldOptions4G5G,
+		labelFieldOptions2G,
+		fieldLabels,
+		position = 'top-right',
+		title = 'Feature Settings',
+		icon = 'sliders',
+		iconOnlyWhenCollapsed = true,
+		initiallyCollapsed = true
+	}: Props = $props();
+	
+	// Generate unique IDs for accordion items
+	const accordionId = `settings-accordion-${Math.random().toString(36).substring(7)}`;
+</script>
+
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
+	<div class="accordion" id={accordionId}>
+		<!-- Site Settings Accordion Item -->
+		<div class="accordion-item">
+			<h2 class="accordion-header" id="heading-sites">
+				<button 
+					class="accordion-button collapsed" 
+					type="button" 
+					data-bs-toggle="collapse" 
+					data-bs-target="#collapse-sites" 
+					aria-expanded="false" 
+					aria-controls="collapse-sites"
+				>
+					Site Settings
+				</button>
+			</h2>
+			<div 
+				id="collapse-sites" 
+				class="accordion-collapse collapse" 
+				aria-labelledby="heading-sites"
+			>
+				<div class="accordion-body">
+					<SiteSettingsPanel store={siteStore} />
+				</div>
+			</div>
+		</div>
+
+		<!-- Cell Settings Accordion Item -->
+		<div class="accordion-item">
+			<h2 class="accordion-header" id="heading-cells">
+				<button 
+					class="accordion-button collapsed" 
+					type="button" 
+					data-bs-toggle="collapse" 
+					data-bs-target="#collapse-cells" 
+					aria-expanded="false" 
+					aria-controls="collapse-cells"
+				>
+					Cell Settings
+				</button>
+			</h2>
+			<div 
+				id="collapse-cells" 
+				class="accordion-collapse collapse" 
+				aria-labelledby="heading-cells"
+			>
+				<div class="accordion-body">
+					<CellSettingsPanel 
+						store={cellStore}
+						{labelFieldOptions4G5G}
+						{labelFieldOptions2G}
+						{fieldLabels}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<!-- Repeater Settings Accordion Item (Placeholder) -->
+		<div class="accordion-item">
+			<h2 class="accordion-header" id="heading-repeaters">
+				<button 
+					class="accordion-button collapsed" 
+					type="button" 
+					data-bs-toggle="collapse" 
+					data-bs-target="#collapse-repeaters" 
+					aria-expanded="false" 
+					aria-controls="collapse-repeaters"
+				>
+					Repeater Settings
+				</button>
+			</h2>
+			<div 
+				id="collapse-repeaters" 
+				class="accordion-collapse collapse" 
+				aria-labelledby="heading-repeaters"
+			>
+				<div class="accordion-body">
+					<RepeaterSettingsPanel />
+				</div>
+			</div>
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	.accordion {
+		--bs-accordion-border-width: 0;
+		/* Fixed width to prevent resizing when sections expand/collapse */
+		width: 320px;
+		min-width: 320px;
+		max-width: 320px;
+	}
+	
+	.accordion-item {
+		background-color: transparent;
+		border: none;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	}
+	
+	.accordion-item:last-child {
+		border-bottom: none;
+	}
+	
+	.accordion-button {
+		font-size: 0.875rem;
+		font-weight: 600;
+		padding: 0.75rem 1rem;
+		background-color: transparent;
+		color: var(--bs-body-color);
+		/* Ensure chevron is visible and properly positioned */
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		text-align: left;
+	}
+	
+	/* Preserve Bootstrap's chevron */
+	.accordion-button::after {
+		flex-shrink: 0;
+		width: 1.25rem;
+		height: 1.25rem;
+		margin-left: auto;
+		content: "";
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+		background-repeat: no-repeat;
+		background-size: 1.25rem;
+		transition: transform 0.2s ease-in-out;
+	}
+	
+	/* Rotate chevron when expanded */
+	.accordion-button:not(.collapsed)::after {
+		transform: rotate(-180deg);
+	}
+	
+	.accordion-button:not(.collapsed) {
+		background-color: rgba(13, 110, 253, 0.05);
+		color: #0d6efd;
+	}
+	
+	.accordion-button:focus {
+		box-shadow: none;
+		border-color: rgba(0, 0, 0, 0.125);
+	}
+	
+	.accordion-body {
+		padding: 1rem;
+		padding-top: 0.5rem;
+	}
+</style>

package/dist/map-v2/shared/controls/FeatureSettingsControl.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { SiteStoreContext } from '../../features/sites/stores/siteStoreContext.svelte';
+import type { CellStoreContext } from '../../features/cells/stores/cellStoreContext.svelte';
+import type { Cell, CellGroupingLabels } from '../../features/cells/types';
+interface Props {
+    /** Site store context */
+    siteStore: SiteStoreContext;
+    /** Cell store context */
+    cellStore: CellStoreContext;
+    /** Available label field options for 4G/5G cells */
+    labelFieldOptions4G5G: Array<keyof Cell>;
+    /** Available label field options for 2G cells */
+    labelFieldOptions2G: Array<keyof Cell>;
+    /** Optional label map for human-readable field names */
+    fieldLabels?: CellGroupingLabels;
+    /** Control position */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Optional header icon */
+    icon?: string;
+    /** Show icon when collapsed (default: true) */
+    iconOnlyWhenCollapsed?: boolean;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+}
+declare const FeatureSettingsControl: import("svelte").Component<Props, {}, "">;
+type FeatureSettingsControl = ReturnType<typeof FeatureSettingsControl>;
+export default FeatureSettingsControl;

package/dist/map-v2/shared/controls/MapControl.svelte

@@ -157,7 +157,7 @@
 		border-radius: 4px;
 		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 		overflow: hidden;
-		max-width: 300px;
+		max-width: 400px;
 		font-family: system-ui, -apple-system, sans-serif;
 	}
 

package/dist/map-v2/shared/controls/panels/CellSettingsPanel.svelte

@@ -0,0 +1,342 @@
+<script lang="ts">
+	/**
+	 * CellSettingsPanel - Cell visualization and label settings
+	 * Reusable panel component for cell display configuration
+	 */
+	import type { CellStoreContext } from '../../../features/cells/stores/cellStoreContext.svelte';
+	import type { Cell, CellGroupingLabels } from '../../../features/cells/types';
+
+	interface Props {
+		store: CellStoreContext;
+		labelFieldOptions4G5G: Array<keyof Cell>;
+		labelFieldOptions2G: Array<keyof Cell>;
+		fieldLabels?: CellGroupingLabels;
+	}
+
+	let { store, labelFieldOptions4G5G, labelFieldOptions2G, fieldLabels }: Props = $props();
+	
+	// Get label for a field from the fieldLabels map or fallback to field name
+	function getFieldLabel(field: keyof Cell | 'none'): string {
+		if (field === 'none') return 'None';
+		return fieldLabels?.[field] || String(field);
+	}
+</script>
+
+<div class="settings-panel">
+
+	<!-- Base radius slider -->
+	<div class="control-row">
+		<label for="cell-radius-slider" class="control-label">
+			Base Radius: <strong>{store.baseRadius}m</strong>
+		</label>
+		<input
+			id="cell-radius-slider"
+			type="range"
+			class="form-range"
+			min="100"
+			max="2000"
+			step="50"
+			bind:value={store.baseRadius}
+		/>
+	</div>
+
+	<!-- Line width slider -->
+	<div class="control-row">
+		<label for="cell-line-width-slider" class="control-label">
+			Line Width: <strong>{store.lineWidth}px</strong>
+		</label>
+		<input
+			id="cell-line-width-slider"
+			type="range"
+			class="form-range"
+			min="1"
+			max="5"
+			step="0.5"
+			bind:value={store.lineWidth}
+		/>
+	</div>
+
+	<!-- Fill opacity slider -->
+	<div class="control-row">
+		<label for="cell-opacity-slider" class="control-label">
+			Fill Opacity: <strong>{Math.round(store.fillOpacity * 100)}%</strong>
+		</label>
+		<input
+			id="cell-opacity-slider"
+			type="range"
+			class="form-range"
+			min="0"
+			max="1"
+			step="0.1"
+			bind:value={store.fillOpacity}
+		/>
+	</div>
+	
+	<!-- Cell Labels Section -->
+	<hr class="section-divider" />
+
+	
+	<!-- Show labels toggle -->
+	<div class="control-row">
+		<label for="cell-labels-toggle" class="control-label">
+			Show Cell Labels
+		</label>
+		<div class="form-check form-switch">
+			<input
+				id="cell-labels-toggle"
+				type="checkbox"
+				class="form-check-input"
+				role="switch"
+				checked={store.showLabels}
+				onchange={(e) => store.setShowLabels(e.currentTarget.checked)}
+			/>
+		</div>
+	</div>
+	
+	{#if store.showLabels}
+		<!-- 4G/5G Primary Label Field -->
+		<div class="control-row">
+			<label for="label-primary-4g5g" class="control-label">
+				4G/5G Primary
+			</label>
+			<select
+				id="label-primary-4g5g"
+				class="form-select form-select-sm"
+				value={store.primaryLabelField4G5G}
+				onchange={(e) => store.setPrimaryLabelField4G5G(e.currentTarget.value as keyof Cell)}
+			>
+				{#each labelFieldOptions4G5G as field}
+					<option value={field}>{getFieldLabel(field)}</option>
+				{/each}
+			</select>
+		</div>
+		
+		<!-- 4G/5G Secondary Label Field -->
+		<div class="control-row">
+			<label for="label-secondary-4g5g" class="control-label">
+				4G/5G Secondary
+			</label>
+			<select
+				id="label-secondary-4g5g"
+				class="form-select form-select-sm"
+				value={store.secondaryLabelField4G5G}
+				onchange={(e) => store.setSecondaryLabelField4G5G(e.currentTarget.value as keyof Cell | 'none')}
+			>
+				<option value="none">None</option>
+				{#each labelFieldOptions4G5G as field}
+					<option value={field}>{getFieldLabel(field)}</option>
+				{/each}
+			</select>
+		</div>
+		
+		<!-- 2G Primary Label Field -->
+		<div class="control-row">
+			<label for="label-primary-2g" class="control-label">
+				2G Primary
+			</label>
+			<select
+				id="label-primary-2g"
+				class="form-select form-select-sm"
+				value={store.primaryLabelField2G}
+				onchange={(e) => store.setPrimaryLabelField2G(e.currentTarget.value as keyof Cell)}
+			>
+				{#each labelFieldOptions2G as field}
+					<option value={field}>{getFieldLabel(field)}</option>
+				{/each}
+			</select>
+		</div>
+		
+		<!-- 2G Secondary Label Field -->
+		<div class="control-row">
+			<label for="label-secondary-2g" class="control-label">
+				2G Secondary
+			</label>
+			<select
+				id="label-secondary-2g"
+				class="form-select form-select-sm"
+				value={store.secondaryLabelField2G}
+				onchange={(e) => store.setSecondaryLabelField2G(e.currentTarget.value as keyof Cell | 'none')}
+			>
+				<option value="none">None</option>
+				{#each labelFieldOptions2G as field}
+					<option value={field}>{getFieldLabel(field)}</option>
+				{/each}
+			</select>
+		</div>
+		
+		<!-- Label Size -->
+		<div class="control-row">
+			<label for="label-size-slider" class="control-label">
+				Label Size: <strong>{store.labelSize}px</strong>
+			</label>
+			<input
+				id="label-size-slider"
+				type="range"
+				class="form-range"
+				min="8"
+				max="20"
+				step="1"
+				value={store.labelSize}
+				oninput={(e) => store.setLabelSize(Number(e.currentTarget.value))}
+			/>
+		</div>
+		
+		<!-- Label Color -->
+		<div class="control-row">
+			<label for="label-color-picker" class="control-label">
+				Label Color
+			</label>
+			<input
+				id="label-color-picker"
+				type="color"
+				class="form-control form-control-color"
+				value={store.labelColor}
+				oninput={(e) => store.setLabelColor(e.currentTarget.value)}
+			/>
+		</div>
+		
+		<!-- Label Offset -->
+		<div class="control-row">
+			<label for="label-offset-slider" class="control-label">
+				Label Offset: <strong>{store.labelOffset}%</strong>
+			</label>
+			<input
+				id="label-offset-slider"
+				type="range"
+				class="form-range"
+				min="100"
+				max="1000"
+				step="50"
+				value={store.labelOffset}
+				oninput={(e) => store.setLabelOffset(Number(e.currentTarget.value))}
+			/>
+		</div>
+		
+		<!-- Label Halo Color -->
+		<div class="control-row">
+			<label for="label-halo-color-picker" class="control-label">
+				Halo Color
+			</label>
+			<input
+				id="label-halo-color-picker"
+				type="color"
+				class="form-control form-control-color"
+				value={store.labelHaloColor}
+				oninput={(e) => store.setLabelHaloColor(e.currentTarget.value)}
+			/>
+		</div>
+		
+		<!-- Label Halo Width -->
+		<div class="control-row">
+			<label for="label-halo-width-slider" class="control-label">
+				Halo Width: <strong>{store.labelHaloWidth}px</strong>
+			</label>
+			<input
+				id="label-halo-width-slider"
+				type="range"
+				class="form-range"
+				min="0"
+				max="3"
+				step="0.5"
+				value={store.labelHaloWidth}
+				oninput={(e) => store.setLabelHaloWidth(Number(e.currentTarget.value))}
+			/>
+		</div>
+		
+		<!-- Min Label Zoom -->
+		<div class="control-row">
+			<label for="min-label-zoom-slider" class="control-label">
+				Min Zoom: <strong>{store.minLabelZoom}</strong>
+			</label>
+			<input
+				id="min-label-zoom-slider"
+				type="range"
+				class="form-range"
+				min="10"
+				max="18"
+				step="1"
+				value={store.minLabelZoom}
+				oninput={(e) => store.setMinLabelZoom(Number(e.currentTarget.value))}
+			/>
+		</div>
+		
+		<!-- Azimuth Tolerance -->
+		<!-- <div class="control-row">
+			<label for="azimuth-tolerance-slider" class="control-label">
+				Azimuth Tolerance: <strong>±{store.azimuthTolerance}°</strong>
+			</label>
+			<input
+				id="azimuth-tolerance-slider"
+				type="range"
+				class="form-range"
+				min="1"
+				max="45"
+				step="1"
+				value={store.azimuthTolerance}
+				oninput={(e) => store.setAzimuthTolerance(Number(e.currentTarget.value))}
+			/>
+		</div> -->
+	{/if}
+</div>
+
+<style>
+	.settings-panel {
+		width: 100%;
+		padding: 0.75rem;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 0.375rem;
+		background-color: rgba(255, 255, 255, 0.02);
+	}
+	
+	.section-divider {
+		margin: 1rem 0;
+		opacity: 0.3;
+	}
+
+	.control-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-bottom: 0.875rem;
+	}
+
+	.control-row:last-child {
+		margin-bottom: 0;
+	}
+
+	.control-label {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		margin: 0;
+		white-space: nowrap;
+		flex-shrink: 0;
+		min-width: 110px;
+	}
+
+	.form-range,
+	.form-select {
+		width: 140px;
+		min-width: 140px;
+		max-width: 140px;
+		flex: 0 0 140px;
+	}
+	
+	.form-control-color {
+		width: 45px;
+		height: 28px;
+		padding: 2px;
+		border-radius: 4px;
+		flex-shrink: 0;
+		margin-right: auto;
+	}
+
+	.form-check {
+		margin: 0;
+		margin-right: auto;
+	}
+
+	.form-switch .form-check-input {
+		cursor: pointer;
+	}
+</style>

package/dist/map-v2/shared/controls/panels/CellSettingsPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+     * CellSettingsPanel - Cell visualization and label settings
+     * Reusable panel component for cell display configuration
+     */
+import type { CellStoreContext } from '../../../features/cells/stores/cellStoreContext.svelte';
+import type { Cell, CellGroupingLabels } from '../../../features/cells/types';
+interface Props {
+    store: CellStoreContext;
+    labelFieldOptions4G5G: Array<keyof Cell>;
+    labelFieldOptions2G: Array<keyof Cell>;
+    fieldLabels?: CellGroupingLabels;
+}
+declare const CellSettingsPanel: import("svelte").Component<Props, {}, "">;
+type CellSettingsPanel = ReturnType<typeof CellSettingsPanel>;
+export default CellSettingsPanel;

package/dist/map-v2/shared/controls/panels/RepeaterSettingsPanel.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	/**
+	 * RepeaterSettingsPanel - Repeater visualization settings
+	 * Placeholder component for future repeater functionality
+	 */
+</script>
+
+<div class="settings-panel">
+	<p class="text-muted text-center mb-0" style="font-size: 0.875rem;">
+		Coming soon...
+	</p>
+</div>
+
+<style>
+	.settings-panel {
+		width: 100%;
+		padding: 1rem 0;
+	}
+</style>

package/dist/map-v2/shared/controls/panels/RepeaterSettingsPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RepeaterSettingsPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RepeaterSettingsPanel = InstanceType<typeof RepeaterSettingsPanel>;
+export default RepeaterSettingsPanel;

package/dist/map-v2/shared/controls/panels/SiteSettingsPanel.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	/**
+	 * SiteSettingsPanel - Site visualization settings
+	 * Reusable panel component for site display configuration
+	 */
+	import type { SiteStoreContext } from '../../../features/sites/stores/siteStoreContext.svelte';
+
+	interface Props {
+		store: SiteStoreContext;
+	}
+
+	let { store }: Props = $props();
+</script>
+
+<div class="settings-panel">
+	<!-- Site Size slider -->
+	<div class="control-row">
+		<label for="site-size-slider" class="control-label">
+			Radius: <strong>{store.size}px</strong>
+		</label>
+		<input
+			id="site-size-slider"
+			type="range"
+			class="form-range"
+			min="2"
+			max="20"
+			step="1"
+			bind:value={store.size}
+		/>
+	</div>
+
+	<!-- Site Opacity slider -->
+	<div class="control-row">
+		<label for="site-opacity-slider" class="control-label">
+			Opacity: <strong>{Math.round(store.opacity * 100)}%</strong>
+		</label>
+		<input
+			id="site-opacity-slider"
+			type="range"
+			class="form-range"
+			min="0"
+			max="1"
+			step="0.1"
+			bind:value={store.opacity}
+		/>
+	</div>
+
+	<!-- Site Circle Color -->
+	<!-- <div class="control-row">
+		<label for="site-color-picker" class="control-label">
+			Base Color
+		</label>
+		<input
+			id="site-color-picker"
+			type="color"
+			class="form-control form-control-color"
+			bind:value={store.color}
+		/>
+	</div> -->
+	<!-- Cell Labels Section -->
+	<hr class="section-divider" />
+	<!-- Show site labels checkbox -->
+	<div class="control-row">
+		<label for="site-show-labels" class="control-label">
+			Show Site Labels
+		</label>
+		<div class="form-check form-switch">
+			<input
+				id="site-show-labels"
+				type="checkbox"
+				class="form-check-input"
+				role="switch"
+				bind:checked={store.showLabels}
+			/>
+		</div>
+	</div>
+
+	{#if store.showLabels}
+		<!-- Site Label size slider -->
+		<div class="control-row">
+			<label for="site-label-size-slider" class="control-label">
+				Label Size: <strong>{store.labelSize}px</strong>
+			</label>
+			<input
+				id="site-label-size-slider"
+				type="range"
+				class="form-range"
+				min="8"
+				max="20"
+				step="1"
+				bind:value={store.labelSize}
+			/>
+		</div>
+
+		<!-- Site Label color picker -->
+		<div class="control-row">
+			<label for="site-label-color-picker" class="control-label">
+				Label Color
+			</label>
+			<input
+				id="site-label-color-picker"
+				type="color"
+				class="form-control form-control-color"
+				bind:value={store.labelColor}
+			/>
+		</div>
+
+		<!-- Site Label offset slider -->
+		<div class="control-row">
+			<label for="site-label-offset-slider" class="control-label">
+				Label Offset: <strong>{store.labelOffset.toFixed(1)}</strong>
+			</label>
+			<input
+				id="site-label-offset-slider"
+				type="range"
+				class="form-range"
+				min="-3"
+				max="3"
+				step="0.1"
+				bind:value={store.labelOffset}
+			/>
+		</div>
+
+		<!-- Site Label property dropdown -->
+		<div class="control-row">
+			<label for="site-label-property-select" class="control-label">
+				Label Field
+			</label>
+			<select
+				id="site-label-property-select"
+				class="form-select form-select-sm"
+				bind:value={store.labelProperty}
+			>
+				<option value="name">Name</option>
+				<option value="id">ID</option>
+				<option value="provider">Provider</option>
+				<option value="technology">Technology</option>
+				<option value="featureGroup">Feature Group</option>
+			</select>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.settings-panel {
+		width: 100%;
+		padding: 0.75rem;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 0.375rem;
+		background-color: rgba(255, 255, 255, 0.02);
+	}
+
+	.control-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-bottom: 0.875rem;
+	}
+
+	.control-row:last-child {
+		margin-bottom: 0;
+	}
+
+	.control-label {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		margin: 0;
+		white-space: nowrap;
+		flex-shrink: 0;
+		min-width: 110px;
+	}
+
+	.form-range,
+	.form-select {
+		width: 140px;
+		min-width: 140px;
+		max-width: 140px;
+		flex: 0 0 140px;
+	}
+	
+	.form-control-color {
+		width: 45px;
+		height: 28px;
+		padding: 2px;
+		border-radius: 4px;
+		flex-shrink: 0;
+		margin-right: auto;
+	}
+
+	.form-check {
+		margin: 0;
+		margin-right: auto;
+	}
+
+	.form-switch .form-check-input {
+		cursor: pointer;
+	}
+</style>

package/dist/map-v2/shared/controls/panels/SiteSettingsPanel.svelte.d.ts

@@ -0,0 +1,11 @@
+/**
+     * SiteSettingsPanel - Site visualization settings
+     * Reusable panel component for site display configuration
+     */
+import type { SiteStoreContext } from '../../../features/sites/stores/siteStoreContext.svelte';
+interface Props {
+    store: SiteStoreContext;
+}
+declare const SiteSettingsPanel: import("svelte").Component<Props, {}, "">;
+type SiteSettingsPanel = ReturnType<typeof SiteSettingsPanel>;
+export default SiteSettingsPanel;

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

@@ -4,4 +4,5 @@
  * Exports shared controls and utilities used across features
  */
 export { default as MapControl } from './controls/MapControl.svelte';
+export { default as FeatureSettingsControl } from './controls/FeatureSettingsControl.svelte';
 export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';

package/dist/map-v2/shared/index.js

@@ -5,5 +5,6 @@
  */
 // Controls
 export { default as MapControl } from './controls/MapControl.svelte';
+export { default as FeatureSettingsControl } from './controls/FeatureSettingsControl.svelte';
 // Mapbox Helpers
 export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';

package/package.json

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