@smartnet360/svelte-components 0.0.89 → 0.0.91

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

@@ -5,6 +5,7 @@
 	import { createCellDataStore } from '../features/cells/stores/cell.data.svelte';
 	import { createCellRegistry } from '../features/cells/stores/cell.registry.svelte';
 	import { CellDisplayStore } from '../features/cells/stores/cell.display.svelte';
+	import { SiteDistanceStore } from '../features/cells/stores/site.distance.svelte';
 	import FeatureSettingsControl from '../core/controls/FeatureSettingsControl.svelte';
 	import CellFilterControl from '../features/cells/components/CellFilterControl.svelte';
 	import { createRepeaterDataStore } from '../features/repeaters/stores/repeater.data.svelte';
@@ -33,6 +34,7 @@
 	const cellData = createCellDataStore();
 	const cellRegistry = createCellRegistry('demo-map');
 	const cellDisplay = new CellDisplayStore();
+	const siteDistanceStore = new SiteDistanceStore();
 
 	const siteData = createSiteDataStore(cellData);
 	const siteRegistry = createSiteRegistry('demo-map');
@@ -47,6 +49,9 @@
 		// Need to cast or map if types slightly differ, but they should match
 		cellData.setCells(demoCells as any);
 		repeaterData.setRepeaters(demoRepeaters);
+		
+		// Compute site distances
+		siteDistanceStore.updateDistances(demoCells as any);
 	});
 </script>
 
@@ -90,7 +95,12 @@
 		
 		<SitesLayer dataStore={siteData} displayStore={siteDisplay} registry={siteRegistry} />
 		<SiteLabelsLayer dataStore={siteData} displayStore={siteDisplay} registry={siteRegistry} />
-		<CellsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
+		<CellsLayer 
+			dataStore={cellData} 
+			registry={cellRegistry} 
+			displayStore={cellDisplay}
+			siteDistanceStore={siteDistanceStore}
+		/>
 		<CellLabelsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
 		<RepeatersLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
 		<RepeaterLabelsLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />

package/dist/map-v3/features/cells/components/CellSettingsPanel.svelte

@@ -21,9 +21,9 @@
 					id="cell-radius-slider"
 					type="range"
 					class="form-range w-100"
-					min="10"
-					max="200"
-					step="5"
+					min="5"
+					max="50"
+					step="2.5"
 					bind:value={displayStore.targetPixelSize}
 				/>
 			</div>
@@ -40,7 +40,7 @@
 					id="cell-line-width-slider"
 					type="range"
 					class="form-range w-100"
-					min="0.5"
+					min="0"
 					max="5"
 					step="0.5"
 					bind:value={displayStore.lineWidth}
@@ -67,6 +67,56 @@
 			</div>
 		</div>
 
+		<!-- Layer Grouping -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Layer Grouping</div>
+			<div class="col-8">
+				<select 
+					class="form-select form-select-sm" 
+					bind:value={displayStore.layerGrouping}
+				>
+					<option value="frequency">Classic (frequency-priority)</option>
+					<option value="technology">Technology Priority</option>
+					<option value="balanced">Balanced</option>
+					<option value="ltePriority">LTE Priority</option>
+				</select>
+			</div>
+		</div>
+
+		<!-- Auto Size -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Auto Size</div>
+			<div class="col-3"></div>
+			<div class="col-5">
+				<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
+					<input
+						id="cell-autosize-toggle"
+						type="checkbox"
+						class="form-check-input"
+						role="switch"
+						bind:checked={displayStore.useAutoSize}
+					/>
+				</div>
+			</div>
+		</div>
+
+		{#if displayStore.useAutoSize}
+			<!-- Auto Size Mode -->
+			<div class="row align-items-center g-2 mb-3 ps-3">
+				<div class="col-4 text-secondary small">Mode</div>
+				<div class="col-8">
+					<select 
+						class="form-select form-select-sm" 
+						bind:value={displayStore.autoSizeMode}
+					>
+						<option value="logarithmic">Logarithmic (smooth)</option>
+						<option value="percentage">Proportional (40%)</option>
+						<option value="tiered">Tiered (4 levels)</option>
+					</select>
+				</div>
+			</div>
+		{/if}
+
 		<div class="border-top my-3"></div>
 
 		<!-- Show Labels -->

package/dist/map-v3/features/cells/constants.d.ts

@@ -5,6 +5,13 @@
  * Higher frequency bands typically rendered on top
  */
 import type { TechnologyBandKey } from './types';
+/**
+ * Layer Grouping Presets
+ * Controls visual layering strategy for overlapping sectors
+ */
+export type LayerGroupingPreset = 'frequency' | 'technology' | 'balanced' | 'ltePriority';
+export declare const Z_INDEX_PRESETS: Record<LayerGroupingPreset, Record<TechnologyBandKey, number>>;
+export declare const BEAMWIDTH_BOOST_PRESETS: Record<LayerGroupingPreset, Record<TechnologyBandKey, number>>;
 export declare const Z_INDEX_BY_BAND: Record<TechnologyBandKey, number>;
 export declare const BEAMWIDTH_BOOST_BY_BAND: Record<TechnologyBandKey, number>;
 /**

package/dist/map-v3/features/cells/constants.js

@@ -4,6 +4,128 @@
  * Controls which sectors appear on top when overlapping
  * Higher frequency bands typically rendered on top
  */
+export const Z_INDEX_PRESETS = {
+    'frequency': {
+        //low
+        '4G_700': 1,
+        '5G_700': 3,
+        '4G_800': 5,
+        '2G_900': 7,
+        '4G_900': 9,
+        //mid
+        '2G_1800': 11,
+        '4G_1800': 13,
+        '4G_2100': 15,
+        '5G_2100': 17,
+        '4G_2600': 19,
+        '5G_3500': 21,
+    },
+    'ltePriority': {
+        // Low band
+        '4G_700': 1,
+        '5G_700': 0.99,
+        '4G_800': 5,
+        '2G_900': 7,
+        '4G_900': 9,
+        // Mid band
+        '4G_1800': 15,
+        '2G_1800': 14.99,
+        '4G_2100': 19,
+        '5G_2100': 18.99,
+        '4G_2600': 23,
+        // High band
+        '5G_3500': 25,
+    },
+    'technology': {
+        // 5G on top
+        '5G_700': 30,
+        '5G_2100': 32,
+        '5G_3500': 34,
+        // 4G middle
+        '4G_700': 12,
+        '4G_800': 15,
+        '4G_900': 18,
+        '4G_1800': 19,
+        '4G_2100': 23,
+        '4G_2600': 26,
+        // 2G bottom
+        '2G_900': 5,
+        '2G_1800': 8,
+    },
+    'balanced': {
+        // Mix: newer tech gets boost within frequency range
+        '4G_700': 1,
+        '5G_700': 3,
+        '4G_800': 5,
+        '2G_900': 7,
+        '4G_900': 10,
+        // Mid band
+        '2G_1800': 14,
+        '4G_1800': 16,
+        '4G_2100': 19,
+        '5G_2100': 21,
+        '4G_2600': 23,
+        // High band
+        '5G_3500': 27,
+    }
+};
+export const BEAMWIDTH_BOOST_PRESETS = {
+    'frequency': {
+        '4G_700': 0,
+        '5G_700': 0,
+        '4G_800': 0,
+        '2G_900': 0,
+        '4G_900': 0,
+        '2G_1800': 0,
+        '4G_1800': 0,
+        '4G_2100': 0,
+        '5G_2100': 0,
+        '4G_2600': 0,
+        '5G_3500': 0
+    },
+    'ltePriority': {
+        // Boost 5G and 2G for visibility when frequency is priority
+        '4G_700': 0,
+        '5G_700': 15,
+        '4G_800': 0,
+        '2G_900': -15,
+        '4G_900': 0,
+        '2G_1800': 15,
+        '4G_1800': 0,
+        '4G_2100': 0,
+        '5G_2100': 15,
+        '4G_2600': 0,
+        '5G_3500': 15
+    },
+    'technology': {
+        // No boost needed - z-index separates clearly
+        '4G_700': 0,
+        '5G_700': 0,
+        '4G_800': 0,
+        '2G_900': 0,
+        '4G_900': 0,
+        '2G_1800': 0,
+        '4G_1800': 0,
+        '4G_2100': 0,
+        '5G_2100': 0,
+        '4G_2600': 0,
+        '5G_3500': 0
+    },
+    'balanced': {
+        // Moderate boost for 5G only
+        '4G_700': 0,
+        '5G_700': 0,
+        '4G_800': 0,
+        '2G_900': 0,
+        '4G_900': 0,
+        '2G_1800': 0,
+        '4G_1800': 0,
+        '4G_2100': 0,
+        '5G_2100': 0,
+        '4G_2600': 0,
+        '5G_3500': 0
+    }
+};
 export const Z_INDEX_BY_BAND = {
     // '2G_900': 1,
     // '2G_1800': 3,
@@ -59,7 +181,7 @@ export const BEAMWIDTH_BOOST_BY_BAND = {
     '5G_2100': 15,
     '4G_2600': 0,
     // High band
-    '5G_3500': 0
+    '5G_3500': 15
 };
 /**
  * Base Z-Index for Mapbox layer ordering

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

@@ -4,9 +4,9 @@
 	import type { CellDataStore } from '../stores/cell.data.svelte';
 	import type { CellRegistry } from '../stores/cell.registry.svelte';
 	import type { CellDisplayStore } from '../stores/cell.display.svelte';
+	import type { SiteDistanceStore } from '../stores/site.distance.svelte';
 	import { groupCells, getColorForGroup } from '../logic/grouping';
-	import { generateCellArc, calculateRadiusInMeters } from '../logic/geometry';
-	import { Z_INDEX_BY_BAND, BEAMWIDTH_BOOST_BY_BAND } from '../constants';
+	import { generateCellArc, calculateRadiusInMeters, calculateAutoRadius } from '../logic/geometry';
 	import type { TechnologyBandKey } from '../types';
 	import type mapboxgl from 'mapbox-gl';
 
@@ -14,9 +14,10 @@
 		dataStore: CellDataStore;
 		registry: CellRegistry;
 		displayStore: CellDisplayStore;
+		siteDistanceStore: SiteDistanceStore;
 	}
 
-	let { dataStore, registry, displayStore }: Props = $props();
+	let { dataStore, registry, displayStore, siteDistanceStore }: Props = $props();
 
 	const mapStore = getContext<MapStore>('MAP_CONTEXT');
 	let sourceId = 'cells-source';
@@ -127,6 +128,9 @@
 		const _registryVersion = registry.version;
 		const _l1 = displayStore.level1;
 		const _l2 = displayStore.level2;
+		const _layerGrouping = displayStore.layerGrouping;
+		const _useAutoSize = displayStore.useAutoSize;
+		const _autoSizeMode = displayStore.autoSizeMode;
 		
 		updateLayer();
 	});
@@ -150,9 +154,9 @@
 		
 		console.log(`[CellsLayer] Rendering.. Zoom: ${zoom.toFixed(2)}, Cells: ${dataStore.filteredCells.length}`);
 
-		// 1. Calculate Radius for this zoom
-		const radiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
-		console.log(`[CellsLayer] Radius: ${radiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
+		// 1. Calculate base radius
+		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
+		console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
 
 		// 2. Group cells (Level 1=Tech, Level 2=Band for now hardcoded)
 		// In real app, this comes from a store
@@ -175,22 +179,33 @@
 				if (bounds.contains([cell.longitude, cell.latitude])) {
 					// 5. Z-Index Lookup
 					const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey;
-					const zIndex = Z_INDEX_BY_BAND[zIndexKey] || 10;
-
-					// 6. Calculate Scaled Radius based on Z-Index
-					// Higher Z-index (Top layer) = Smaller radius
-					// Lower Z-index (Bottom layer) = Larger radius
-					// This ensures stacked cells are visible
-					const MAX_Z = 30;
-					const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08; // 8% size diff per layer
-					const effectiveRadius = radiusMeters * scaleFactor;
-
-					// 7. Apply beamwidth boost from constants
-					const beamwidthBoost = BEAMWIDTH_BOOST_BY_BAND[zIndexKey] || 0;
+					const zIndex = displayStore.currentZIndex[zIndexKey] ?? 10;
+
+					// 6. Calculate radius with z-index scaling
+					const MAX_Z = 35;
+					let radiusMeters: number;
+					
+					if (displayStore.useAutoSize) {
+						// Auto-size mode: get target radius for this site
+						const siteDistance = siteDistanceStore.getDistance(cell.siteId, 500);
+						const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
+						
+						// Scale based on z-index for stacking visibility
+						// Lower z-index (background) = larger, higher z-index (foreground) = smaller
+						const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08; // 8% per layer
+						radiusMeters = autoRadius * scaleFactor;
+					} else {
+						// Manual mode: base from pixel size, then scale by z-index
+						const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
+						radiusMeters = baseRadiusMeters * scaleFactor;
+					}
+
+					// 7. Apply beamwidth boost from displayStore preset
+					const beamwidthBoost = displayStore.currentBeamwidthBoost[zIndexKey] || 0;
 					const adjustedBeamwidth = cell.beamwidth + beamwidthBoost;
 
 					// 8. Generate Arc
-					const feature = generateCellArc(cell, effectiveRadius, zIndex, style.color, adjustedBeamwidth);
+					const feature = generateCellArc(cell, radiusMeters, zIndex, style.color, adjustedBeamwidth);
 					features.push(feature);
 				}
 			}

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

@@ -1,10 +1,12 @@
 import type { CellDataStore } from '../stores/cell.data.svelte';
 import type { CellRegistry } from '../stores/cell.registry.svelte';
 import type { CellDisplayStore } from '../stores/cell.display.svelte';
+import type { SiteDistanceStore } from '../stores/site.distance.svelte';
 interface Props {
     dataStore: CellDataStore;
     registry: CellRegistry;
     displayStore: CellDisplayStore;
+    siteDistanceStore: SiteDistanceStore;
 }
 declare const CellsLayer: import("svelte").Component<Props, {}, "">;
 type CellsLayer = ReturnType<typeof CellsLayer>;

package/dist/map-v3/features/cells/logic/geometry.d.ts

@@ -1,4 +1,4 @@
-import type { Cell } from '../types';
+import type { Cell, AutoSizeMode } from '../types';
 /**
  * Calculates the radius in meters required to achieve a target pixel size
  * at a specific latitude and zoom level.
@@ -6,6 +6,13 @@ import type { Cell } from '../types';
  * Formula: meters_per_pixel = 156543.03392 * cos(lat * PI / 180) / 2^zoom
  */
 export declare function calculateRadiusInMeters(latitude: number, zoom: number, targetPixelSize: number): number;
+/**
+ * Calculate auto-size radius based on nearest site distance
+ * @param nearestSiteDistance Distance to nearest site in meters
+ * @param mode Sizing algorithm to use
+ * @returns Recommended radius in meters (base radius before z-index scaling)
+ */
+export declare function calculateAutoRadius(nearestSiteDistance: number, mode?: AutoSizeMode): number;
 /**
  * Generates a sector arc GeoJSON feature for a cell
  */

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

@@ -10,6 +10,38 @@ export function calculateRadiusInMeters(latitude, zoom, targetPixelSize) {
     const metersPerPixel = (156543.03392 * Math.cos((latitude * Math.PI) / 180)) / Math.pow(2, zoom);
     return targetPixelSize * metersPerPixel;
 }
+/**
+ * Calculate auto-size radius based on nearest site distance
+ * @param nearestSiteDistance Distance to nearest site in meters
+ * @param mode Sizing algorithm to use
+ * @returns Recommended radius in meters (base radius before z-index scaling)
+ */
+export function calculateAutoRadius(nearestSiteDistance, mode = 'logarithmic') {
+    switch (mode) {
+        case 'logarithmic': {
+            // Logarithmic scale with clamping
+            // Returns BASE radius - z-index scaling will be applied on top
+            const base = Math.log10(Math.max(100, nearestSiteDistance)) * 30;
+            return Math.max(30, Math.min(base, 200));
+        }
+        case 'percentage': {
+            // Simple percentage of distance (20% for base, allows z-index scaling on top)
+            return Math.max(30, Math.min(nearestSiteDistance * 0.2, 250));
+        }
+        case 'tiered': {
+            // Discrete tiers for consistent sizing (base values)
+            if (nearestSiteDistance < 300)
+                return 40;
+            if (nearestSiteDistance < 600)
+                return 80;
+            if (nearestSiteDistance < 1200)
+                return 120;
+            return 180;
+        }
+        default:
+            return 80;
+    }
+}
 /**
  * Generates a sector arc GeoJSON feature for a cell
  */

package/dist/map-v3/features/cells/logic/site-distance.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Site Distance Calculation Logic
+ *
+ * Pure functions for computing inter-site distances
+ * Used for auto-sizing cells based on site density
+ */
+import type { Cell } from '../types';
+/**
+ * Calculate distance between two geographic points using Haversine formula
+ * @param loc1 [longitude, latitude] of first point
+ * @param loc2 [longitude, latitude] of second point
+ * @returns Distance in meters
+ */
+export declare function haversineDistance(loc1: [number, number], loc2: [number, number]): number;
+/**
+ * Group cells by site ID
+ * @param cells Array of cells
+ * @returns Map of siteId -> cells at that site
+ */
+export declare function groupBySite(cells: Cell[]): Map<string, Cell[]>;
+/**
+ * Extract unique site locations from cells
+ * @param cells Array of cells
+ * @returns Map of siteId -> [longitude, latitude]
+ */
+export declare function extractSiteLocations(cells: Cell[]): Map<string, [number, number]>;
+/**
+ * Compute nearest neighbor distance for a single site
+ * @param siteId Site to compute distance for
+ * @param siteLocation Location of the site
+ * @param allSiteLocations Map of all site locations
+ * @returns Distance to nearest neighbor in meters, or Infinity if no neighbors
+ */
+export declare function computeNearestNeighbor(siteId: string, siteLocation: [number, number], allSiteLocations: Map<string, [number, number]>): number;

package/dist/map-v3/features/cells/logic/site-distance.js

@@ -0,0 +1,71 @@
+/**
+ * Site Distance Calculation Logic
+ *
+ * Pure functions for computing inter-site distances
+ * Used for auto-sizing cells based on site density
+ */
+/**
+ * Calculate distance between two geographic points using Haversine formula
+ * @param loc1 [longitude, latitude] of first point
+ * @param loc2 [longitude, latitude] of second point
+ * @returns Distance in meters
+ */
+export function haversineDistance(loc1, loc2) {
+    const [lon1, lat1] = loc1;
+    const [lon2, lat2] = loc2;
+    const R = 6371e3; // Earth radius in meters
+    const φ1 = (lat1 * Math.PI) / 180;
+    const φ2 = (lat2 * Math.PI) / 180;
+    const Δφ = ((lat2 - lat1) * Math.PI) / 180;
+    const Δλ = ((lon2 - lon1) * Math.PI) / 180;
+    const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+        Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return R * c; // meters
+}
+/**
+ * Group cells by site ID
+ * @param cells Array of cells
+ * @returns Map of siteId -> cells at that site
+ */
+export function groupBySite(cells) {
+    const groups = new Map();
+    for (const cell of cells) {
+        if (!groups.has(cell.siteId)) {
+            groups.set(cell.siteId, []);
+        }
+        groups.get(cell.siteId).push(cell);
+    }
+    return groups;
+}
+/**
+ * Extract unique site locations from cells
+ * @param cells Array of cells
+ * @returns Map of siteId -> [longitude, latitude]
+ */
+export function extractSiteLocations(cells) {
+    const sites = groupBySite(cells);
+    const locations = new Map();
+    for (const [siteId, siteCells] of sites) {
+        const first = siteCells[0];
+        locations.set(siteId, [first.longitude, first.latitude]);
+    }
+    return locations;
+}
+/**
+ * Compute nearest neighbor distance for a single site
+ * @param siteId Site to compute distance for
+ * @param siteLocation Location of the site
+ * @param allSiteLocations Map of all site locations
+ * @returns Distance to nearest neighbor in meters, or Infinity if no neighbors
+ */
+export function computeNearestNeighbor(siteId, siteLocation, allSiteLocations) {
+    let minDist = Infinity;
+    for (const [otherId, otherLoc] of allSiteLocations) {
+        if (siteId === otherId)
+            continue;
+        const dist = haversineDistance(siteLocation, otherLoc);
+        minDist = Math.min(minDist, dist);
+    }
+    return minDist;
+}

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

@@ -1,12 +1,18 @@
-import type { CellGroupingField } from '../types';
+import type { CellGroupingField, AutoSizeMode } from '../types';
+import type { LayerGroupingPreset } from '../constants';
 export declare class CellDisplayStore {
     key: string;
     targetPixelSize: number;
     fillOpacity: number;
     lineWidth: number;
     showLabels: boolean;
+    layerGrouping: LayerGroupingPreset;
+    useAutoSize: boolean;
+    autoSizeMode: AutoSizeMode;
     level1: CellGroupingField;
     level2: CellGroupingField;
+    currentZIndex: Record<string, number>;
+    currentBeamwidthBoost: Record<string, number>;
     labelPixelDistance: number;
     labelFontSize: number;
     labelAzimuthTolerance: number;

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

@@ -1,4 +1,5 @@
 import { browser } from '$app/environment';
+import { Z_INDEX_PRESETS, BEAMWIDTH_BOOST_PRESETS } from '../constants';
 export class CellDisplayStore {
     key = 'map-v3-cell-display';
     // State
@@ -6,9 +7,16 @@ export class CellDisplayStore {
     fillOpacity = $state(0.6);
     lineWidth = $state(1);
     showLabels = $state(false);
+    layerGrouping = $state('frequency');
+    // Auto-size settings
+    useAutoSize = $state(false);
+    autoSizeMode = $state('logarithmic');
     // Grouping
     level1 = $state('tech');
     level2 = $state('fband');
+    // Derived preset configurations
+    currentZIndex = $derived.by(() => Z_INDEX_PRESETS[this.layerGrouping]);
+    currentBeamwidthBoost = $derived.by(() => BEAMWIDTH_BOOST_PRESETS[this.layerGrouping]);
     // Label Settings
     labelPixelDistance = $state(60);
     labelFontSize = $state(12);
@@ -29,6 +37,9 @@ export class CellDisplayStore {
                     this.fillOpacity = parsed.fillOpacity ?? 0.6;
                     this.lineWidth = parsed.lineWidth ?? 1;
                     this.showLabels = parsed.showLabels ?? false;
+                    this.layerGrouping = parsed.layerGrouping ?? 'frequency';
+                    this.useAutoSize = parsed.useAutoSize ?? false;
+                    this.autoSizeMode = parsed.autoSizeMode ?? 'logarithmic';
                     this.level1 = parsed.level1 ?? 'tech';
                     this.level2 = parsed.level2 ?? 'fband';
                     this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
@@ -50,6 +61,9 @@ export class CellDisplayStore {
                     fillOpacity: this.fillOpacity,
                     lineWidth: this.lineWidth,
                     showLabels: this.showLabels,
+                    layerGrouping: this.layerGrouping,
+                    useAutoSize: this.useAutoSize,
+                    autoSizeMode: this.autoSizeMode,
                     level1: this.level1,
                     level2: this.level2,
                     labelPixelDistance: this.labelPixelDistance,

package/dist/map-v3/features/cells/stores/site.distance.svelte.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Site Distance Store
+ *
+ * Manages cached distances between sites for auto-sizing
+ * Incrementally updates when new sites are detected
+ */
+import type { Cell } from '../types';
+export declare class SiteDistanceStore {
+    key: string;
+    distances: Map<string, number>;
+    computedSites: Set<string>;
+    lastComputeTime: number;
+    computedCount: number;
+    constructor();
+    /**
+     * Incrementally update distances for new sites
+     * Only computes distances for sites not in cache
+     */
+    updateDistances(cells: Cell[]): void;
+    /**
+     * Update existing sites if needed (when no new sites but data might have changed)
+     */
+    private updateExistingSitesIfNeeded;
+    /**
+     * Get distance for a site, with fallback
+     */
+    getDistance(siteId: string, fallback?: number): number;
+    /**
+     * Clear all cached distances (useful for testing or data refresh)
+     */
+    clear(): void;
+    /**
+     * Persist to localStorage
+     */
+    private persist;
+    /**
+     * Load from localStorage
+     */
+    private load;
+}

package/dist/map-v3/features/cells/stores/site.distance.svelte.js

@@ -0,0 +1,146 @@
+/**
+ * Site Distance Store
+ *
+ * Manages cached distances between sites for auto-sizing
+ * Incrementally updates when new sites are detected
+ */
+import { browser } from '$app/environment';
+import { extractSiteLocations, computeNearestNeighbor, haversineDistance } from '../logic/site-distance';
+export class SiteDistanceStore {
+    key = 'map-v3-site-distances';
+    // Cached nearest neighbor distances
+    distances = $state(new Map());
+    // Track which sites have been computed
+    computedSites = $state(new Set());
+    // Performance tracking
+    lastComputeTime = $state(0);
+    computedCount = $state(0);
+    constructor() {
+        if (browser) {
+            this.load();
+        }
+    }
+    /**
+     * Incrementally update distances for new sites
+     * Only computes distances for sites not in cache
+     */
+    updateDistances(cells) {
+        if (!cells || cells.length === 0)
+            return;
+        const startTime = performance.now();
+        const siteLocations = extractSiteLocations(cells);
+        // Find NEW sites (not in cache)
+        const newSites = [...siteLocations.keys()].filter((id) => !this.computedSites.has(id));
+        if (newSites.length === 0) {
+            // No new sites, but check if we need to update existing sites
+            // (in case a new site is closer than previously computed)
+            this.updateExistingSitesIfNeeded(siteLocations);
+            return;
+        }
+        console.log(`[SiteDistance] Computing distances for ${newSites.length} new sites`);
+        // Compute distances for NEW sites
+        for (const siteId of newSites) {
+            const location = siteLocations.get(siteId);
+            const nearestDist = computeNearestNeighbor(siteId, location, siteLocations);
+            this.distances.set(siteId, nearestDist);
+            this.computedSites.add(siteId);
+        }
+        // Update EXISTING sites if a new site is closer
+        for (const [existingId, existingLoc] of siteLocations) {
+            if (newSites.includes(existingId))
+                continue; // Skip new sites
+            let currentMin = this.distances.get(existingId) || Infinity;
+            for (const newId of newSites) {
+                const newLoc = siteLocations.get(newId);
+                const dist = haversineDistance(existingLoc, newLoc);
+                currentMin = Math.min(currentMin, dist);
+            }
+            if (currentMin < (this.distances.get(existingId) || Infinity)) {
+                this.distances.set(existingId, currentMin);
+            }
+        }
+        const endTime = performance.now();
+        this.lastComputeTime = endTime - startTime;
+        this.computedCount = this.distances.size;
+        console.log(`[SiteDistance] Computed ${newSites.length} new sites in ${this.lastComputeTime.toFixed(1)}ms (total: ${this.computedCount})`);
+        this.persist();
+    }
+    /**
+     * Update existing sites if needed (when no new sites but data might have changed)
+     */
+    updateExistingSitesIfNeeded(siteLocations) {
+        // Check if all computed sites still exist in current data
+        const currentSiteIds = new Set(siteLocations.keys());
+        let removed = 0;
+        for (const computedId of this.computedSites) {
+            if (!currentSiteIds.has(computedId)) {
+                this.distances.delete(computedId);
+                this.computedSites.delete(computedId);
+                removed++;
+            }
+        }
+        if (removed > 0) {
+            console.log(`[SiteDistance] Removed ${removed} stale sites from cache`);
+            this.persist();
+        }
+    }
+    /**
+     * Get distance for a site, with fallback
+     */
+    getDistance(siteId, fallback = 500) {
+        return this.distances.get(siteId) ?? fallback;
+    }
+    /**
+     * Clear all cached distances (useful for testing or data refresh)
+     */
+    clear() {
+        this.distances.clear();
+        this.computedSites.clear();
+        this.lastComputeTime = 0;
+        this.computedCount = 0;
+        if (browser) {
+            localStorage.removeItem(this.key);
+        }
+        console.log('[SiteDistance] Cache cleared');
+    }
+    /**
+     * Persist to localStorage
+     */
+    persist() {
+        if (!browser)
+            return;
+        try {
+            const data = {
+                distances: Array.from(this.distances.entries()),
+                computedSites: Array.from(this.computedSites),
+                lastComputeTime: this.lastComputeTime,
+                computedCount: this.computedCount
+            };
+            localStorage.setItem(this.key, JSON.stringify(data));
+        }
+        catch (e) {
+            console.error('[SiteDistance] Failed to persist cache', e);
+        }
+    }
+    /**
+     * Load from localStorage
+     */
+    load() {
+        if (!browser)
+            return;
+        try {
+            const saved = localStorage.getItem(this.key);
+            if (saved) {
+                const data = JSON.parse(saved);
+                this.distances = new Map(data.distances || []);
+                this.computedSites = new Set(data.computedSites || []);
+                this.lastComputeTime = data.lastComputeTime || 0;
+                this.computedCount = data.computedCount || 0;
+                console.log(`[SiteDistance] Loaded ${this.computedCount} cached distances`);
+            }
+        }
+        catch (e) {
+            console.error('[SiteDistance] Failed to load cache', e);
+        }
+    }
+}

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

@@ -60,3 +60,15 @@ export type TechnologyBandKey = string;
  * Grouping fields for Tree View
  */
 export type CellGroupingField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' | 'none';
+/**
+ * Auto-size calculation modes
+ */
+export type AutoSizeMode = 'logarithmic' | 'percentage' | 'tiered';
+/**
+ * Site distance data for auto-sizing
+ */
+export interface SiteDistanceData {
+    siteId: string;
+    nearestDistance: number;
+    computedAt: number;
+}

package/package.json

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