@smartnet360/svelte-components 0.0.67 → 0.0.68

package/dist/map-v2/core/components/MapStoreBridge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import type { Map as MapboxMap } from 'mapbox-gl';
+	import { useMapbox } from '../hooks/useMapbox';
+
+	interface Props {
+		onMapChange?: (map: MapboxMap | null) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let { onMapChange, children }: Props = $props();
+
+	const providerStore = useMapbox();
+	let ready = $state(false);
+
+	const unsubscribe = providerStore.subscribe((map) => {
+		onMapChange?.(map);
+		ready = map !== null;
+	});
+
+	onDestroy(unsubscribe);
+</script>
+
+{#if ready && children}
+	{@render children()}
+{/if}

package/dist/map-v2/core/components/MapStoreBridge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Map as MapboxMap } from 'mapbox-gl';
+interface Props {
+    onMapChange?: (map: MapboxMap | null) => void;
+    children?: import('svelte').Snippet;
+}
+declare const MapStoreBridge: import("svelte").Component<Props, {}, "">;
+type MapStoreBridge = ReturnType<typeof MapStoreBridge>;
+export default MapStoreBridge;

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

@@ -7,6 +7,7 @@ export type { MapStore } from './types';
 export { MAP_CONTEXT_KEY } from './types';
 export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
 export { default as ViewportSync } from './components/ViewportSync.svelte';
+export { default as MapStoreBridge } from './components/MapStoreBridge.svelte';
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 export { createMapStore } from './stores/mapStore';
 export { createViewportStore, type ViewportStore, type ViewportState } from './stores/viewportStore.svelte';

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

@@ -8,6 +8,7 @@ export { MAP_CONTEXT_KEY } from './types';
 export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
 // Components
 export { default as ViewportSync } from './components/ViewportSync.svelte';
+export { default as MapStoreBridge } from './components/MapStoreBridge.svelte';
 // Controls
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 // Stores

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

@@ -20,13 +20,16 @@
 	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 { createSiteStoreContext } from '../features/sites/stores/siteStoreContext.svelte';
 	import { createCellStoreContext } from '../features/cells/stores/cellStoreContext.svelte';
 	import { createViewportStore } from '../core/stores/viewportStore.svelte';
+	import type { CellGroupingField, CellGroupingLabels } from '../features/cells/types';
 	import { demoSites } from './demo-data';
 	import { demoCells } from './demo-cells';
+	import { writable } from 'svelte/store';
 
 	interface Props {
 		/** Mapbox access token */
@@ -58,8 +61,8 @@
 	// Bootstrap icon names for each control header
 	const controlIcons = {
 		mapStyle: 'layers',
-		cellFilter: 'diagram-3',
-		siteFilter: 'funnel',
+		cellFilter: 'radioactive',
+		siteFilter: 'broadcast-pin',
 		siteSelection: 'check2-square',
 		cellStyle: 'palette',
 		siteSize: 'sliders'
@@ -73,7 +76,67 @@
 		// Or use SvelteKit navigate, or open modal, etc.
 		alert(`Selected ${siteIds.length} sites:\n${siteIds.join(', ')}`);
 	}
-
+	
+	// Cell filter grouping configuration
+	const cellLevel1Options: Array<Exclude<CellGroupingField, 'none'>> = [
+		'tech',
+		'frq',
+		'status',
+		'siteId',
+		'customSubgroup',
+		'type',
+		'planner'
+	];
+	
+	const cellLevel2Options: CellGroupingField[] = [
+		'none',
+		'tech',
+		'frq',
+		'status',
+		'siteId',
+		'customSubgroup',
+		'type',
+		'planner'
+	];
+	
+	const cellFieldLabels: CellGroupingLabels = {
+		tech: 'Technology',
+		frq: 'Frequency Band',
+		status: 'Status',
+		siteId: 'Site ID',
+		customSubgroup: 'Custom Subgroup',
+		type: 'Type',
+		planner: 'Planner',
+		none: 'None (Flat Tree)'
+	};
+	
+	// Cell label field options (for CellStyleControl)
+	// 4G/5G cells have different available fields than 2G
+	const labelFieldOptions4G5G: Array<keyof typeof demoCells[0]> = [
+		'cellID',
+		'cellName',
+		'azimuth',
+		'fband',
+		'frq',
+		'dlEarfn',
+		'tech',
+		'status',
+		'pci1'
+	];
+	
+	const labelFieldOptions2G: Array<keyof typeof demoCells[0]> = [
+		'cellID',
+		'cellName',
+		'azimuth',
+		'bcch',
+		'ctrlid',
+		'fband',
+		'frq',
+		'tech',
+		'status'
+	];
+	
+	let mapStore = writable()
 </script>
 
 <!-- //		controls={['navigation', 'scale']} -->
@@ -88,6 +151,9 @@
 		<!-- Cell layer - renders arc sectors from store -->
 		<CellsLayer store={cellStore} namespace="demo-cells" />
 
+		<!-- Cell labels layer - renders tech-aware labels positioned along azimuth -->
+		<CellLabelsLayer store={cellStore} namespace="demo-cells" />
+
 		<!-- Map style control - switch between map styles -->
 		<MapStyleControl
 			position="top-right"
@@ -100,6 +166,9 @@
 		<!-- Cell filter control - dynamic hierarchical filtering -->
 		<CellFilterControl
 			store={cellStore}
+			level1Options={cellLevel1Options}
+			level2Options={cellLevel2Options}
+			fieldLabels={cellFieldLabels}
 			position="top-left"
 			title="Cell Filter"
 			initiallyCollapsed={true}
@@ -135,6 +204,8 @@
 			initiallyCollapsed={true}
 			icon={controlIcons.cellStyle}
 			iconOnlyWhenCollapsed={useIconHeaders}
+			labelFieldOptions4G5G={labelFieldOptions4G5G}
+			labelFieldOptions2G={labelFieldOptions2G}
 		/>
 
 		<!-- Site size control - updates store visual properties -->

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

@@ -17,12 +17,18 @@
 	import { createTreeStore } from '../../../../core/TreeView/tree.store';
 	import { buildCellTree, getFilteredCells } from '../utils/cellTree';
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
-	import type { CellGroupingField } from '../types';
+	import type { CellGroupingField, CellGroupingLabels } from '../types';
 	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
 
 	interface Props {
 		/** Cell store context */
 		store: CellStoreContext;
+		/** Available options for level 1 grouping (mandatory) */
+		level1Options: Array<Exclude<CellGroupingField, 'none'>>;
+		/** Available options for level 2 grouping (mandatory, can include 'none') */
+		level2Options: CellGroupingField[];
+		/** Optional label map for human-readable field names */
+		fieldLabels?: CellGroupingLabels;
 		/** Control position */
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Control title */
@@ -37,6 +43,9 @@
 
 	let {
 		store,
+		level1Options,
+		level2Options,
+		fieldLabels,
 		position = 'top-left',
 		title = 'Cell Filter',
 		icon = 'diagram-3',
@@ -44,20 +53,6 @@
 		initiallyCollapsed = true
 	}: Props = $props();
 	
-	// Grouping options (excluding 'none' from level1)
-	const GROUPING_OPTIONS: Exclude<CellGroupingField, 'none'>[] = [
-		'tech',
-		'band',
-		'status',
-		'siteId',
-		'customSubgroup',
-		'type',
-		'planner'
-	];
-	
-	// Level2 options include 'none' for flat tree
-	const LEVEL2_OPTIONS: CellGroupingField[] = ['none', ...GROUPING_OPTIONS];
-	
 	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
 	let level1 = $state<Exclude<CellGroupingField, 'none'>>(store.groupingConfig.level1);
 	let level2 = $state<CellGroupingField>(store.groupingConfig.level2);
@@ -91,7 +86,8 @@
 		const { tree: treeNodes, cellGroupMap } = buildCellTree(
 			store.cellsFilteredByStatus, // Use filtered cells, not all cells
 			{ level1, level2 },
-			store.groupColorMap
+			store.groupColorMap,
+			fieldLabels
 		);
 		
 		// Update the cell-to-group lookup map in the store
@@ -161,17 +157,10 @@
 		store.setGroupColor(groupKey, color);
 	}
 	
-	// Label mappings for display
-	const FIELD_LABELS: Record<CellGroupingField | 'none', string> = {
-		tech: 'Technology',
-		band: 'Frequency Band',
-		status: 'Status',
-		siteId: 'Site ID',
-		customSubgroup: 'Custom Subgroup',
-		type: 'Type',
-		planner: 'Planner',
-		none: 'None (2-Level Tree)'
-	};
+	// Get label for a field from the fieldLabels map or fallback to field name
+	function getFieldLabel(field: CellGroupingField): string {
+		return fieldLabels?.[field] || String(field);
+	}
 </script>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
@@ -207,8 +196,8 @@
 						value={level1}
 						onchange={handleLevel1Change}
 					>
-						{#each GROUPING_OPTIONS as option}
-							<option value={option}>{FIELD_LABELS[option]}</option>
+						{#each level1Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
 						{/each}
 					</select>
 				</div>
@@ -222,8 +211,8 @@
 						value={level2}
 						onchange={handleLevel2Change}
 					>
-						{#each LEVEL2_OPTIONS as option}
-							<option value={option}>{FIELD_LABELS[option]}</option>
+						{#each level2Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
 						{/each}
 					</select>
 				</div>

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

@@ -1,7 +1,14 @@
 import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+import type { CellGroupingField, CellGroupingLabels } from '../types';
 interface Props {
     /** Cell store context */
     store: CellStoreContext;
+    /** Available options for level 1 grouping (mandatory) */
+    level1Options: Array<Exclude<CellGroupingField, 'none'>>;
+    /** Available options for level 2 grouping (mandatory, can include 'none') */
+    level2Options: CellGroupingField[];
+    /** Optional label map for human-readable field names */
+    fieldLabels?: CellGroupingLabels;
     /** Control position */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Control title */

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

@@ -11,10 +11,17 @@
 
 	import MapControl from '../../../shared/controls/MapControl.svelte';
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+	import type { Cell, CellGroupingLabels } from '../types';
 
 	interface Props {
 		/** Cell store context */
 		store: 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 */
@@ -29,12 +36,21 @@
 
 	let {
 		store,
+		labelFieldOptions4G5G,
+		labelFieldOptions2G,
+		fieldLabels,
 		position = 'bottom-left',
 		title = 'Cell Display',
 		icon = 'palette',
 		iconOnlyWhenCollapsed = true,
 		initiallyCollapsed = true
 	}: 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>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
@@ -102,6 +118,212 @@
 				bind:value={store.fillOpacity}
 			/>
 		</div>
+		
+		<!-- Cell Labels Section -->
+		<hr class="section-divider" />
+		<h6 class="section-title">Cell Labels</h6>
+		
+		<!-- Show labels toggle -->
+		<div class="control-row">
+			<label for="cell-labels-toggle" class="control-label">
+				Show 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}m</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="15"
+					step="1"
+					value={store.azimuthTolerance}
+					oninput={(e) => store.setAzimuthTolerance(Number(e.currentTarget.value))}
+				/>
+			</div>
+		{/if}
 	</div>
 </MapControl>
 
@@ -110,6 +332,18 @@
 		min-width: 250px;
 		padding: 0.5rem 0;
 	}
+	
+	.section-divider {
+		margin: 1rem 0;
+		opacity: 0.3;
+	}
+	
+	.section-title {
+		font-size: 0.875rem;
+		font-weight: 600;
+		margin-bottom: 0.75rem;
+		color: var(--bs-body-color);
+	}
 
 	.control-row {
 		display: flex;
@@ -134,6 +368,18 @@
 		flex: 1;
 		min-width: 120px;
 	}
+	
+	.form-select {
+		flex: 1;
+		min-width: 120px;
+	}
+	
+	.form-control-color {
+		width: 50px;
+		height: 30px;
+		padding: 2px;
+		border-radius: 4px;
+	}
 
 	.form-check {
 		margin: 0;

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

@@ -1,7 +1,14 @@
 import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+import type { Cell, CellGroupingLabels } from '../types';
 interface Props {
     /** Cell store context */
     store: 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 */

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

@@ -3,7 +3,7 @@
  *
  * Exports all cell-related types, components, utilities, and constants
  */
-export type { Cell, CellStatus, CellStatusStyle, TechnologyBandKey, ParsedTechBand, CellGroupingField, CellTreeConfig } from './types';
+export type { Cell, CellStatus, CellStatusStyle, TechnologyBandKey, ParsedTechBand, CellGroupingField, CellGroupingLabels, CellTreeConfig } from './types';
 export { DEFAULT_CELL_TREE_CONFIG } from './types';
 export { TECHNOLOGY_BAND_COLORS } from './constants/colors';
 export { RADIUS_MULTIPLIER } from './constants/radiusMultipliers';
@@ -11,6 +11,7 @@ export { Z_INDEX_BY_BAND, CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX } from './constan
 export { DEFAULT_STATUS_STYLES } from './constants/statusStyles';
 export { createCellStoreContext, type CellStoreContext, type CellStoreValue } from './stores/cellStoreContext.svelte';
 export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CellLabelsLayer } from './layers/CellLabelsLayer.svelte';
 export { default as CellFilterControl } from './controls/CellFilterControl.svelte';
 export { default as CellStyleControl } from './controls/CellStyleControl.svelte';
 export { parseTechBand } from './utils/techBandParser';

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

@@ -13,6 +13,7 @@ export { DEFAULT_STATUS_STYLES } from './constants/statusStyles';
 export { createCellStoreContext } from './stores/cellStoreContext.svelte';
 // Layers
 export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CellLabelsLayer } from './layers/CellLabelsLayer.svelte';
 // Controls
 export { default as CellFilterControl } from './controls/CellFilterControl.svelte';
 export { default as CellStyleControl } from './controls/CellStyleControl.svelte';

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

@@ -0,0 +1,237 @@
+<script lang="ts">
+	/**
+	 * CellLabelsLayer - Renders tech-aware cell labels positioned along azimuth
+	 * 
+	 * Features:
+	 * - Groups cells by site + azimuth (with configurable tolerance)
+	 * - Projects labels along bearing from site center
+	 * - Stacks multiple labels vertically when cells share direction
+	 * - Tech-specific field selection (2G vs 4G/5G)
+	 * - Configurable styling (size, color, halo, zoom)
+	 */
+	
+	import { onMount, onDestroy } from 'svelte';
+	import { useMapbox } from '../../../core/hooks/useMapbox';
+	import { waitForStyleLoad, generateLayerId, generateSourceId } from '../../../shared/utils/mapboxHelpers';
+	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+	import type { Cell } from '../types';
+	import * as turf from '@turf/turf';
+	
+	interface Props {
+		/** Cell store context */
+		store: CellStoreContext;
+		/** Unique namespace for layer/source IDs */
+		namespace: string;
+	}
+	
+	let { store, namespace }: Props = $props();
+	
+	const mapStore = useMapbox();
+	const sourceId = generateSourceId(namespace, 'cell-labels');
+	const layerId = generateLayerId(namespace, 'cell-labels');
+	
+	let map = $state<mapboxgl.Map | null>(null);
+	let unsubscribe: (() => void) | null = null;
+	
+	/**
+	 * Get label text for a cell based on tech and selected field
+	 */
+	function getCellLabelText(cell: Cell, field: keyof Cell | 'none'): string {
+		if (field === 'none') return '';
+		
+		const value = cell[field];
+		return value == null ? '' : String(value);
+	}
+	
+	/**
+	 * Round azimuth to nearest tolerance value
+	 */
+	function roundAzimuth(azimuth: number, tolerance: number): number {
+		return Math.round(azimuth / tolerance) * tolerance;
+	}
+	
+	/**
+	 * Group cells by site + rounded azimuth
+	 */
+	function groupCellsByAzimuth(cells: Cell[], tolerance: number): Map<string, Cell[]> {
+		const groups = new Map<string, Cell[]>();
+		
+		cells.forEach(cell => {
+			const roundedAzimuth = roundAzimuth(cell.azimuth, tolerance);
+			const groupKey = `${cell.siteId}:${roundedAzimuth}`;
+			
+			if (!groups.has(groupKey)) {
+				groups.set(groupKey, []);
+			}
+			groups.get(groupKey)!.push(cell);
+		});
+		
+		return groups;
+	}
+	
+	/**
+	 * Build GeoJSON features for cell labels
+	 */
+	function buildLabelFeatures(): GeoJSON.FeatureCollection {
+		const features: GeoJSON.Feature[] = [];
+		
+		if (!store.showLabels || store.filteredCells.length === 0) {
+			return { type: 'FeatureCollection', features: [] };
+		}
+		
+		// Group cells by site + azimuth
+		const cellGroups = groupCellsByAzimuth(store.filteredCells, store.azimuthTolerance);
+		
+		cellGroups.forEach((cells, groupKey) => {
+			// Sort cells within group for consistent stacking
+			cells.sort((a, b) => a.id.localeCompare(b.id));
+			
+			cells.forEach((cell, index) => {
+				// Determine which fields to use based on tech
+				const is2G = cell.tech === '2G';
+				const primaryField = is2G ? store.primaryLabelField2G : store.primaryLabelField4G5G;
+				const secondaryField = is2G ? store.secondaryLabelField2G : store.secondaryLabelField4G5G;
+				
+				// Get label text
+				const primaryText = getCellLabelText(cell, primaryField);
+				const secondaryText = getCellLabelText(cell, secondaryField);
+				
+				// Build combined label (on single line with separator)
+				let labelText = primaryText;
+				if (secondaryText) {
+					labelText += ` | ${secondaryText}`;
+				}
+				
+				if (!labelText.trim()) return; // Skip if no text
+				
+				// Project label position along azimuth
+				const origin = turf.point([cell.siteLongitude, cell.siteLatitude]);
+				const labelPosition = turf.destination(
+					origin,
+					store.labelOffset / 1000, // Convert meters to kilometers
+					cell.azimuth,
+					{ units: 'kilometers' }
+				);
+				
+				// Calculate vertical offset for stacking (pixels)
+				const stackOffset = index * (store.labelSize + 4);
+				
+				features.push({
+					type: 'Feature',
+					geometry: labelPosition.geometry,
+					properties: {
+						text: labelText,
+						stackOffset,
+						cellId: cell.id
+					}
+				});
+			});
+		});
+		
+		return { type: 'FeatureCollection', features };
+	}
+	
+	/**
+	 * Update label layer on map
+	 */
+	function updateLabels() {
+		if (!map || !map.getSource(sourceId)) return;
+		
+		const geojson = buildLabelFeatures();
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		source.setData(geojson);
+	}
+	
+	onMount(async () => {
+		unsubscribe = mapStore.subscribe(async (m) => {
+			if (!m) {
+				map = null;
+				return;
+			}
+			
+			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 render
+			updateLabels();
+		});
+	});
+	
+	// Watch for changes in store properties and update labels
+	$effect(() => {
+		// Dependencies that should trigger label refresh
+		store.filteredCells;
+		store.showLabels;
+		store.primaryLabelField4G5G;
+		store.secondaryLabelField4G5G;
+		store.primaryLabelField2G;
+		store.secondaryLabelField2G;
+		store.labelOffset;
+		store.azimuthTolerance;
+		
+		updateLabels();
+	});
+	
+	// Watch for style changes and update layer paint/layout properties
+	$effect(() => {
+		if (!map || !map.getLayer(layerId)) return;
+		
+		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);
+	});
+	
+	onDestroy(() => {
+		unsubscribe?.();
+		
+		if (map) {
+			if (map.getLayer(layerId)) {
+				map.removeLayer(layerId);
+			}
+			if (map.getSource(sourceId)) {
+				map.removeSource(sourceId);
+			}
+		}
+	});
+</script>

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

@@ -0,0 +1,10 @@
+import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+interface Props {
+    /** Cell store context */
+    store: CellStoreContext;
+    /** Unique namespace for layer/source IDs */
+    namespace: string;
+}
+declare const CellLabelsLayer: import("svelte").Component<Props, {}, "">;
+type CellLabelsLayer = ReturnType<typeof CellLabelsLayer>;
+export default CellLabelsLayer;

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

@@ -13,6 +13,18 @@ export interface CellStoreValue {
     lineWidth: number;
     fillOpacity: number;
     baseRadius: number;
+    showLabels: boolean;
+    primaryLabelField4G5G: keyof Cell;
+    secondaryLabelField4G5G: keyof Cell | 'none';
+    primaryLabelField2G: keyof Cell;
+    secondaryLabelField2G: keyof Cell | 'none';
+    labelSize: number;
+    labelColor: string;
+    labelOffset: number;
+    labelHaloColor: string;
+    labelHaloWidth: number;
+    minLabelZoom: number;
+    azimuthTolerance: number;
     statusStyles: Map<CellStatus, CellStatusStyle>;
     groupingConfig: CellTreeConfig;
     groupColorMap: Map<string, string>;
@@ -32,6 +44,18 @@ export interface CellStoreContext {
     readonly groupingConfig: CellTreeConfig;
     readonly groupColorMap: Map<string, string>;
     readonly cellGroupMap: Map<string, string>;
+    readonly showLabels: boolean;
+    readonly primaryLabelField4G5G: keyof Cell;
+    readonly secondaryLabelField4G5G: keyof Cell | 'none';
+    readonly primaryLabelField2G: keyof Cell;
+    readonly secondaryLabelField2G: keyof Cell | 'none';
+    readonly labelSize: number;
+    readonly labelColor: string;
+    readonly labelOffset: number;
+    readonly labelHaloColor: string;
+    readonly labelHaloWidth: number;
+    readonly minLabelZoom: number;
+    readonly azimuthTolerance: number;
     setFilteredCells(cells: Cell[]): void;
     setIncludePlannedCells(value: boolean): void;
     setShowCells(value: boolean): void;
@@ -46,6 +70,18 @@ export interface CellStoreContext {
     getGroupColor(groupKey: string): string | undefined;
     setGroupColor(groupKey: string, color: string): void;
     clearGroupColor(groupKey: string): void;
+    setShowLabels(value: boolean): void;
+    setPrimaryLabelField4G5G(field: keyof Cell): void;
+    setSecondaryLabelField4G5G(field: keyof Cell | 'none'): void;
+    setPrimaryLabelField2G(field: keyof Cell): void;
+    setSecondaryLabelField2G(field: keyof Cell | 'none'): void;
+    setLabelSize(value: number): void;
+    setLabelColor(value: string): void;
+    setLabelOffset(value: number): void;
+    setLabelHaloColor(value: string): void;
+    setLabelHaloWidth(value: number): void;
+    setMinLabelZoom(value: number): void;
+    setAzimuthTolerance(value: number): void;
 }
 /**
  * Create a cell store context with reactive state

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

@@ -57,7 +57,20 @@ export function createCellStoreContext(cells) {
         groupingConfig: persistedSettings.groupingConfig ?? DEFAULT_CELL_TREE_CONFIG,
         groupColorMap: initialColorMap,
         cellGroupMap: new Map(), // Will be populated when tree is built
-        currentZoom: 12 // Default zoom
+        currentZoom: 12, // Default zoom
+        // Label settings with defaults
+        showLabels: persistedSettings.showLabels ?? false,
+        primaryLabelField4G5G: (persistedSettings.primaryLabelField4G5G ?? 'fband'),
+        secondaryLabelField4G5G: (persistedSettings.secondaryLabelField4G5G ?? 'none'),
+        primaryLabelField2G: (persistedSettings.primaryLabelField2G ?? 'bcch'),
+        secondaryLabelField2G: (persistedSettings.secondaryLabelField2G ?? 'none'),
+        labelSize: persistedSettings.labelSize ?? 12,
+        labelColor: persistedSettings.labelColor ?? '#000000',
+        labelOffset: persistedSettings.labelOffset ?? 300,
+        labelHaloColor: persistedSettings.labelHaloColor ?? '#ffffff',
+        labelHaloWidth: persistedSettings.labelHaloWidth ?? 1,
+        minLabelZoom: persistedSettings.minLabelZoom ?? 14,
+        azimuthTolerance: persistedSettings.azimuthTolerance ?? 5
     });
     // Derived: Filter cells by status based on includePlannedCells flag
     // IMPORTANT: This is a pure $derived - it only READS from state, never writes
@@ -79,7 +92,20 @@ export function createCellStoreContext(cells) {
             fillOpacity: state.fillOpacity,
             baseRadius: state.baseRadius,
             groupingConfig: state.groupingConfig,
-            groupColors: groupColorsObj
+            groupColors: groupColorsObj,
+            // Label settings
+            showLabels: state.showLabels,
+            primaryLabelField4G5G: state.primaryLabelField4G5G,
+            secondaryLabelField4G5G: state.secondaryLabelField4G5G,
+            primaryLabelField2G: state.primaryLabelField2G,
+            secondaryLabelField2G: state.secondaryLabelField2G,
+            labelSize: state.labelSize,
+            labelColor: state.labelColor,
+            labelOffset: state.labelOffset,
+            labelHaloColor: state.labelHaloColor,
+            labelHaloWidth: state.labelHaloWidth,
+            minLabelZoom: state.minLabelZoom,
+            azimuthTolerance: state.azimuthTolerance
         };
         saveSettings(settings);
     });
@@ -107,6 +133,19 @@ export function createCellStoreContext(cells) {
         get groupingConfig() { return state.groupingConfig; },
         get groupColorMap() { return state.groupColorMap; },
         get cellGroupMap() { return state.cellGroupMap; },
+        // Label getters
+        get showLabels() { return state.showLabels; },
+        get primaryLabelField4G5G() { return state.primaryLabelField4G5G; },
+        get secondaryLabelField4G5G() { return state.secondaryLabelField4G5G; },
+        get primaryLabelField2G() { return state.primaryLabelField2G; },
+        get secondaryLabelField2G() { return state.secondaryLabelField2G; },
+        get labelSize() { return state.labelSize; },
+        get labelColor() { return state.labelColor; },
+        get labelOffset() { return state.labelOffset; },
+        get labelHaloColor() { return state.labelHaloColor; },
+        get labelHaloWidth() { return state.labelHaloWidth; },
+        get minLabelZoom() { return state.minLabelZoom; },
+        get azimuthTolerance() { return state.azimuthTolerance; },
         // Methods
         setFilteredCells(cells) {
             state.filteredCells = cells;
@@ -152,6 +191,43 @@ export function createCellStoreContext(cells) {
         clearGroupColor(groupKey) {
             state.groupColorMap.delete(groupKey);
             state.groupColorMap = new Map(state.groupColorMap);
+        },
+        // Label setters
+        setShowLabels(value) {
+            state.showLabels = value;
+        },
+        setPrimaryLabelField4G5G(field) {
+            state.primaryLabelField4G5G = field;
+        },
+        setSecondaryLabelField4G5G(field) {
+            state.secondaryLabelField4G5G = field;
+        },
+        setPrimaryLabelField2G(field) {
+            state.primaryLabelField2G = field;
+        },
+        setSecondaryLabelField2G(field) {
+            state.secondaryLabelField2G = field;
+        },
+        setLabelSize(value) {
+            state.labelSize = value;
+        },
+        setLabelColor(value) {
+            state.labelColor = value;
+        },
+        setLabelOffset(value) {
+            state.labelOffset = value;
+        },
+        setLabelHaloColor(value) {
+            state.labelHaloColor = value;
+        },
+        setLabelHaloWidth(value) {
+            state.labelHaloWidth = value;
+        },
+        setMinLabelZoom(value) {
+            state.minLabelZoom = value;
+        },
+        setAzimuthTolerance(value) {
+            state.azimuthTolerance = value;
         }
     };
 }

package/dist/map-v2/features/cells/types.d.ts

@@ -82,13 +82,19 @@ export interface ParsedTechBand {
 }
 /**
  * Available fields for grouping cells in the filter tree
+ * Now accepts any property key from Cell interface
  */
-export type CellGroupingField = 'tech' | 'band' | 'status' | 'siteId' | 'customSubgroup' | 'type' | 'planner' | 'none';
+export type CellGroupingField = keyof Cell | 'none';
+/**
+ * Optional label map for human-readable field names
+ * Maps field keys to display labels
+ */
+export type CellGroupingLabels = Partial<Record<CellGroupingField, string>>;
 /**
  * Configuration for dynamic tree grouping
  */
 export interface CellTreeConfig {
-    /** Primary grouping field (required) */
+    /** Primary grouping field (required, cannot be 'none') */
     level1: Exclude<CellGroupingField, 'none'>;
     /** Secondary grouping field (optional, can be 'none') */
     level2: CellGroupingField;

package/dist/map-v2/features/cells/types.js

@@ -8,5 +8,5 @@
  */
 export const DEFAULT_CELL_TREE_CONFIG = {
     level1: 'tech',
-    level2: 'band'
+    level2: 'frq'
 };

package/dist/map-v2/features/cells/utils/cellTree.d.ts

@@ -2,9 +2,9 @@
  * Cell Tree Builder
  *
  * Build hierarchical tree structure for cell filtering
- * Structure: Tech → Band → Status → Individual Cells (configurable)
+ * Structure: Configurable hierarchy with any Cell properties
  */
-import type { Cell, CellTreeConfig } from '../types';
+import type { Cell, CellTreeConfig, CellGroupingLabels } from '../types';
 import type { TreeNode } from '../../../../core/TreeView/tree.model';
 /**
  * Build hierarchical tree from flat cell array with dynamic grouping
@@ -12,9 +12,10 @@ import type { TreeNode } from '../../../../core/TreeView/tree.model';
  * @param cells - Array of cells to build tree from
  * @param config - Grouping configuration (level1, level2)
  * @param colorMap - Optional map of leaf group IDs to custom colors
+ * @param labelMap - Optional map of field keys to human-readable labels
  * @returns Object with tree and cell-to-group lookup map
  */
-export declare function buildCellTree(cells: Cell[], config: CellTreeConfig, colorMap?: Map<string, string>): {
+export declare function buildCellTree(cells: Cell[], config: CellTreeConfig, colorMap?: Map<string, string>, labelMap?: CellGroupingLabels): {
     tree: TreeNode;
     cellGroupMap: Map<string, string>;
 };

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

@@ -2,55 +2,54 @@
  * Cell Tree Builder
  *
  * Build hierarchical tree structure for cell filtering
- * Structure: Tech → Band → Status → Individual Cells (configurable)
+ * Structure: Configurable hierarchy with any Cell properties
  */
+/**
+ * Smart sort comparator that handles numeric suffixes
+ *
+ * Examples:
+ *   "700", "1800" → sorted as 700, 1800 (numeric)
+ *   "LTE700", "LTE1800" → sorted as 700, 1800 (numeric suffix)
+ *   "On_Air", "Planned" → sorted alphabetically
+ *
+ * @param a - First value to compare
+ * @param b - Second value to compare
+ * @returns Sort order (-1, 0, 1)
+ */
+function smartSort(a, b) {
+    // Extract trailing 3-4 digits
+    const numRegex = /(\d{3,4})$/;
+    const matchA = a.match(numRegex);
+    const matchB = b.match(numRegex);
+    // If both have numeric suffixes, compare numerically
+    if (matchA && matchB) {
+        const numA = parseInt(matchA[1], 10);
+        const numB = parseInt(matchB[1], 10);
+        return numA - numB;
+    }
+    // Otherwise alphabetical
+    return a.localeCompare(b);
+}
 /**
  * Get the value of a grouping field from a cell
  */
 function getGroupingValue(cell, field) {
-    switch (field) {
-        case 'tech':
-            return cell.tech;
-        case 'band':
-            return cell.frq; // Use numeric band from 'frq' field
-        case 'status':
-            return cell.status;
-        case 'siteId':
-            return cell.siteId;
-        case 'customSubgroup':
-            return cell.customSubgroup || 'Ungrouped';
-        case 'type':
-            return cell.type;
-        case 'planner':
-            return cell.planner || 'Unassigned';
-        case 'none':
-            return '';
-        default:
-            return 'Unknown';
-    }
+    if (field === 'none')
+        return '';
+    const value = cell[field];
+    // Handle null/undefined
+    if (value == null)
+        return 'Unassigned';
+    // Convert to string
+    return String(value);
 }
 /**
  * Get a human-readable label for a grouping field value
  */
-function getGroupLabel(field, value, count) {
-    switch (field) {
-        case 'tech':
-            return `${value} (${count})`;
-        case 'band':
-            return `${value} MHz (${count})`;
-        case 'status':
-            return `${value} (${count})`;
-        case 'siteId':
-            return `${value} (${count})`;
-        case 'customSubgroup':
-            return `${value} (${count})`;
-        case 'type':
-            return `${value} (${count})`;
-        case 'planner':
-            return `${value} (${count})`;
-        default:
-            return `${value} (${count})`;
-    }
+function getGroupLabel(field, value, count, labelMap) {
+    // Use custom label if provided
+    const fieldLabel = labelMap?.[field] || String(field);
+    return `${value} (${count})`;
 }
 /**
  * Generate a unique node ID based on grouping path
@@ -67,21 +66,22 @@ function generateNodeId(field, value, parentId) {
  * @param cells - Array of cells to build tree from
  * @param config - Grouping configuration (level1, level2)
  * @param colorMap - Optional map of leaf group IDs to custom colors
+ * @param labelMap - Optional map of field keys to human-readable labels
  * @returns Object with tree and cell-to-group lookup map
  */
-export function buildCellTree(cells, config, colorMap) {
+export function buildCellTree(cells, config, colorMap, labelMap) {
     const { level1, level2 } = config;
     // If level2 is 'none', create flat 2-level tree
     if (level2 === 'none') {
-        return buildFlatTree(cells, level1, colorMap);
+        return buildFlatTree(cells, level1, colorMap, labelMap);
     }
     // Otherwise, create nested 3-level tree
-    return buildNestedTree(cells, level1, level2, colorMap);
+    return buildNestedTree(cells, level1, level2, colorMap, labelMap);
 }
 /**
  * Build flat 2-level tree (Root → Level1 groups)
  */
-function buildFlatTree(cells, level1, colorMap) {
+function buildFlatTree(cells, level1, colorMap, labelMap) {
     // Group cells by level1 field
     const groups = new Map();
     const cellGroupMap = new Map();
@@ -92,8 +92,8 @@ function buildFlatTree(cells, level1, colorMap) {
         }
         groups.get(value).push(cell);
     });
-    // Sort groups alphabetically
-    const sortedGroups = Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+    // Sort groups with smart numeric/alphabetical sorting
+    const sortedGroups = Array.from(groups.entries()).sort(([a], [b]) => smartSort(a, b));
     // Build tree nodes and populate cellGroupMap
     const children = sortedGroups.map(([value, groupCells]) => {
         const nodeId = generateNodeId(level1, value);
@@ -105,7 +105,7 @@ function buildFlatTree(cells, level1, colorMap) {
         });
         return {
             id: nodeId,
-            label: getGroupLabel(level1, value, groupCells.length),
+            label: getGroupLabel(level1, value, groupCells.length, labelMap),
             defaultChecked: true,
             children: [],
             metadata: {
@@ -131,7 +131,7 @@ function buildFlatTree(cells, level1, colorMap) {
 /**
  * Build nested 3-level tree (Root → Level1 → Level2 groups)
  */
-function buildNestedTree(cells, level1, level2, colorMap) {
+function buildNestedTree(cells, level1, level2, colorMap, labelMap) {
     // Group cells by level1, then by level2
     const level1Groups = new Map();
     const cellGroupMap = new Map();
@@ -147,13 +147,13 @@ function buildNestedTree(cells, level1, level2, colorMap) {
         }
         level2Groups.get(value2).push(cell);
     });
-    // Sort level1 groups
-    const sortedLevel1 = Array.from(level1Groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+    // Sort level1 groups with smart numeric/alphabetical sorting
+    const sortedLevel1 = Array.from(level1Groups.entries()).sort(([a], [b]) => smartSort(a, b));
     // Build tree nodes and populate cellGroupMap
     const children = sortedLevel1.map(([value1, level2Groups]) => {
         const parentId = generateNodeId(level1, value1);
-        // Sort level2 groups
-        const sortedLevel2 = Array.from(level2Groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+        // Sort level2 groups with smart numeric/alphabetical sorting
+        const sortedLevel2 = Array.from(level2Groups.entries()).sort(([a], [b]) => smartSort(a, b));
         const level2Children = sortedLevel2.map(([value2, groupCells]) => {
             const nodeId = generateNodeId(level2, value2, parentId);
             const color = colorMap?.get(nodeId);
@@ -164,7 +164,7 @@ function buildNestedTree(cells, level1, level2, colorMap) {
             });
             return {
                 id: nodeId,
-                label: getGroupLabel(level2, value2, groupCells.length),
+                label: getGroupLabel(level2, value2, groupCells.length, labelMap),
                 defaultChecked: true,
                 children: [],
                 metadata: {
@@ -182,7 +182,7 @@ function buildNestedTree(cells, level1, level2, colorMap) {
         const totalCells = Array.from(level2Groups.values()).flat().length;
         return {
             id: parentId,
-            label: getGroupLabel(level1, value1, totalCells),
+            label: getGroupLabel(level1, value1, totalCells, labelMap),
             defaultChecked: true,
             children: level2Children,
             metadata: {

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

@@ -4,8 +4,8 @@
  * A decoupled, feature-based architecture for Mapbox cellular network visualization.
  * Each feature (sites, cells) is completely independent with its own store, layers, and controls.
  */
-export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStyleControl, createMapStore, createViewportStore, type ViewportStore, type ViewportState, useMapbox, tryUseMapbox } from './core';
+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 { 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 CellTreeConfig, type TechnologyBandKey, type CellStoreValue, type CellStoreContext, createCellStoreContext, CellsLayer, 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 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

@@ -7,7 +7,7 @@
 // ============================================================================
 // CORE INFRASTRUCTURE
 // ============================================================================
-export { MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStyleControl, createMapStore, createViewportStore, useMapbox, tryUseMapbox } from './core';
+export { MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStoreBridge, MapStyleControl, createMapStore, createViewportStore, useMapbox, tryUseMapbox } from './core';
 // ============================================================================
 // SHARED UTILITIES
 // ============================================================================
@@ -19,7 +19,7 @@ export { createSiteStore, createSiteStoreContext, SitesLayer, SiteFilterControl,
 // ============================================================================
 // CELL FEATURE
 // ============================================================================
-export { createCellStoreContext, CellsLayer, CellFilterControl, CellStyleControl, cellsToGeoJSON, buildCellTree, getFilteredCells, calculateRadius, getZoomFactor, createArcPolygon, DEFAULT_CELL_TREE_CONFIG, TECHNOLOGY_BAND_COLORS, DEFAULT_STATUS_STYLES, RADIUS_MULTIPLIER } from './features/cells';
+export { 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';
 // ============================================================================
 // DEMO
 // ============================================================================

package/package.json

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