@smartnet360/svelte-components 0.0.97 → 0.0.98

package/dist/apps/site-check/SiteCheck.svelte

@@ -17,18 +17,19 @@
 		baseMetrics: string[];
         mode: Mode;
 		markers?: ChartMarker[];
-		cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
-		initialGrouping?: TreeGroupingConfig; // Optional initial tree grouping (defaults to Site → Azimuth → Cell)
-		showGroupingSelector?: boolean; // Show/hide the grouping dropdown (default: true)
-		onSearch?: (searchTerm: string) => void; // Optional: Search callback (if provided, shows search box)
-		searchPlaceholder?: string;      // Optional: Search box placeholder text (default: "Search...")
-		plotlyLayout?: Record<string, any>; // Optional Plotly layout configuration
+	cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
+	initialGrouping?: TreeGroupingConfig; // Optional initial tree grouping (defaults to Site → Azimuth → Cell)
+	showGroupingSelector?: boolean; // Show/hide the grouping dropdown (default: true)
+	useSectorLineStyles?: boolean; // Enable sector-based line style differentiation (default: false)
+	onSearch?: (searchTerm: string) => void; // Optional: Search callback (if provided, shows search box)
+	searchPlaceholder?: string;      // Optional: Search box placeholder text (default: "Search...")
+	plotlyLayout?: Record<string, any>; // Optional Plotly layout configuration
 	}
 
 	let { rawData, multiCellLayout, singleLteLayout, 
 		singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], 
 		cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, 
-		showGroupingSelector = true, onSearch, searchPlaceholder = "Search...", plotlyLayout }: Props = $props();
+		showGroupingSelector = true, useSectorLineStyles = false, onSearch, searchPlaceholder = "Search...", plotlyLayout }: Props = $props();
 
 	// Search state
 	let searchTerm = $state('');
@@ -61,6 +62,9 @@
 	// Color dimension state (defaults to 'band' for semantic RF characteristics)
 	let colorDimension = $state<ColorDimension>('band');
 
+	// Single root select mode - only one Level 0 node at a time (radio behavior)
+	let singleRootSelect = $state(false);
+
 	// Available field options for grouping levels
 	const fieldOptions: { value: TreeGroupField; label: string }[] = [
 		{ value: 'site', label: 'Site' },
@@ -92,10 +96,10 @@
 		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
 	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
-	// Rebuild tree whenever treeGrouping changes
+	// Rebuild tree whenever treeGrouping or singleRootSelect changes
 	$effect(() => {
 
-		log('� Rebuilding tree with grouping', { treeGrouping });
+		log('🔄 Rebuilding tree with grouping', { treeGrouping, singleRootSelect });
 
 		// Clear any existing localStorage data to prevent stale state
 		const storageKey = 'site-check:treeState';
@@ -119,11 +123,13 @@
 			nodes: treeNodes,
 			namespace: 'site-check',
 			persistState: false,  // Don't persist when grouping changes dynamically
-			defaultExpandAll: false
+			defaultExpandAll: false,
+			singleRootSelect // Pass single root select mode
 		});
 		log('✅ Tree Store Created', { 
 			namespace: 'site-check',
-			grouping: treeGrouping 
+			grouping: treeGrouping,
+			singleRootSelect
 		});
 	});
 
@@ -157,9 +163,9 @@
 
 	// Expand layout based on selected cells and chosen base layout
 	let chartLayout = $derived.by(() => {
-		// Pass cellStyling, treeGrouping, and colorDimension - helper will decide per-section whether to use styling,
-		// and generate appropriate labels based on grouping and colors based on colorDimension
-		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, treeGrouping, colorDimension, cellStyling);
+		// Pass cellStyling, treeGrouping, colorDimension, and useSectorLineStyles - helper will decide per-section whether to use styling,
+		// and generate appropriate labels based on grouping, colors based on colorDimension, and line styles based on useSectorLineStyles
+		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, treeGrouping, colorDimension, useSectorLineStyles, cellStyling);
 		log('📐 Chart Layout:', {
 			layoutName: selectedBaseLayout.layoutName,
 			layoutDefaultColors: selectedBaseLayout.useDefaultChartColors ?? false,
@@ -359,6 +365,39 @@
 					</div>
 				</div>
 				
+				<!-- Single Root Select Toggle -->
+				<div class="form-check mt-2">
+					<input 
+						class="form-check-input" 
+						type="checkbox" 
+						id="singleRootSelectCheck"
+						checked={singleRootSelect}
+						onchange={(e) => {
+							singleRootSelect = e.currentTarget.checked;
+							log('🔘 Single root select mode:', singleRootSelect);
+							
+							// When enabling single root mode, uncheck all roots except the first one
+							if (singleRootSelect && treeStore) {
+								const store = $treeStore;
+								if (store) {
+									const checkedRoots = store.state.rootPaths.filter(path => 
+										store.state.checkedPaths.has(path)
+									);
+									if (checkedRoots.length > 1) {
+										log('🔘 Multiple roots selected, keeping only first one:', checkedRoots[0]);
+										// Uncheck all except the first
+										for (let i = 1; i < checkedRoots.length; i++) {
+											store.toggle(checkedRoots[i]);
+										}
+									}
+								}
+							}
+						}}
+					/>
+					<label class="form-check-label small" for="singleRootSelectCheck">
+						Single selection on level 0
+					</label>
+				</div>
 			</div>
 		{/if}
 	{/if}			<!-- Tree View -->

package/dist/apps/site-check/SiteCheck.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props {
     cellStyling?: CellStylingConfig;
     initialGrouping?: TreeGroupingConfig;
     showGroupingSelector?: boolean;
+    useSectorLineStyles?: boolean;
     onSearch?: (searchTerm: string) => void;
     searchPlaceholder?: string;
     plotlyLayout?: Record<string, any>;

package/dist/apps/site-check/helper.d.ts

@@ -13,7 +13,7 @@ import { type StackGroupMode } from './transforms.js';
  * @param stackGroupMode - Optional stackgroup strategy for stacked charts (default: 'none' = single stack)
  * @returns Expanded layout with cell-specific KPIs
  */
-export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], grouping: TreeGroupingConfig, colorDimension: ColorDimension, stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): Layout;
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], grouping: TreeGroupingConfig, colorDimension: ColorDimension, useSectorLineStyles: boolean, stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): Layout;
 /**
  * Extract base metric names from a layout configuration
  * Returns unique metric rawNames that need to be pivoted

package/dist/apps/site-check/helper.js

@@ -11,7 +11,7 @@ import { createStyledKPI, sortCellsByBandFrequency, assignStackGroups } from './
  * @param stackGroupMode - Optional stackgroup strategy for stacked charts (default: 'none' = single stack)
  * @returns Expanded layout with cell-specific KPIs
  */
-export function expandLayoutForCells(baseLayout, data, grouping, colorDimension, stylingConfig, stackGroupMode = 'none') {
+export function expandLayoutForCells(baseLayout, data, grouping, colorDimension, useSectorLineStyles, stylingConfig, stackGroupMode = 'none') {
     // Get unique cells and their metadata, sorted by band frequency
     const cellMap = new Map();
     data.forEach((record) => {
@@ -39,8 +39,8 @@ export function expandLayoutForCells(baseLayout, data, grouping, colorDimension,
                 ...section,
                 charts: section.charts.map((chart) => ({
                     ...chart,
-                    yLeft: expandKPIs(chart.yLeft, cells, grouping, colorDimension, effectiveStyling, stackGroupMode),
-                    yRight: expandKPIs(chart.yRight, cells, grouping, colorDimension, effectiveStyling, stackGroupMode)
+                    yLeft: expandKPIs(chart.yLeft, cells, grouping, colorDimension, useSectorLineStyles, effectiveStyling, stackGroupMode),
+                    yRight: expandKPIs(chart.yRight, cells, grouping, colorDimension, useSectorLineStyles, effectiveStyling, stackGroupMode)
                 }))
             };
         })
@@ -60,13 +60,13 @@ export function expandLayoutForCells(baseLayout, data, grouping, colorDimension,
  * @param stackGroupMode - Stackgroup strategy for this set of KPIs
  * @returns Expanded array of KPIs (styled or default, with stackgroups assigned)
  */
-function expandKPIs(baseKPIs, cells, grouping, colorDimension, stylingConfig, stackGroupMode = 'none') {
+function expandKPIs(baseKPIs, cells, grouping, colorDimension, useSectorLineStyles, stylingConfig, stackGroupMode = 'none') {
     let expandedKPIs = [];
     baseKPIs.forEach((baseKPI) => {
         cells.forEach(([cellName, record]) => {
             if (stylingConfig) {
                 // Apply custom styling (band colors, sector line styles)
-                const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, grouping, colorDimension, stylingConfig);
+                const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, grouping, colorDimension, useSectorLineStyles, stylingConfig);
                 expandedKPIs.push({
                     ...styledKPI,
                     stackGroup: undefined // Initialize for treeshake-safe property assignment

package/dist/apps/site-check/transforms.d.ts

@@ -84,4 +84,4 @@ export declare function transformChartData(data: CellTrafficRecord[], baseMetric
  * @param stylingConfig - Optional styling configuration
  * @returns KPI with cell-specific styling applied
  */
-export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, grouping: TreeGroupingConfig, colorDimension: ColorDimension, stylingConfig?: CellStylingConfig): KPI;
+export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, grouping: TreeGroupingConfig, colorDimension: ColorDimension, useSectorLineStyles: boolean, stylingConfig?: CellStylingConfig): KPI;

package/dist/apps/site-check/transforms.js

@@ -483,7 +483,7 @@ function generateSiteColor(siteName) {
  * @param stylingConfig - Optional styling configuration
  * @returns KPI with cell-specific styling applied
  */
-export function createStyledKPI(metricName, cellRecord, unit, grouping, colorDimension, stylingConfig) {
+export function createStyledKPI(metricName, cellRecord, unit, grouping, colorDimension, useSectorLineStyles, stylingConfig) {
     const { band, sector, azimuth, cellName, siteName } = cellRecord;
     // Determine color based on colorDimension
     let color;
@@ -495,8 +495,8 @@ export function createStyledKPI(metricName, cellRecord, unit, grouping, colorDim
         // Generate consistent color for site
         color = generateSiteColor(siteName);
     }
-    // Get line style from sector (if config provided)
-    const lineStyle = stylingConfig?.sectorLineStyles?.[sector.toString()];
+    // Get line style from sector only if explicitly enabled
+    const lineStyle = useSectorLineStyles ? stylingConfig?.sectorLineStyles?.[sector.toString()] : undefined;
     // Generate label based on tree grouping configuration
     const displayName = generateAdaptiveLabel(cellRecord, grouping);
     // Build KPI with cell-specific styling

package/dist/core/TreeView/tree.model.d.ts

@@ -74,6 +74,8 @@ export interface TreeConfig<T = any> {
     persistState?: boolean;
     /** Show indeterminate checkbox states */
     showIndeterminate?: boolean;
+    /** Single root selection mode - only one root node can be checked at a time (radio behavior) */
+    singleRootSelect?: boolean;
 }
 /**
  * Store value exposed to consumers

package/dist/core/TreeView/tree.store.js

@@ -87,6 +87,21 @@ export function createTreeStore(config) {
             const newChecked = !state.checkedPaths.has(path);
             const newCheckedPaths = new Set(state.checkedPaths);
             log('📌 Toggle action', { path, newChecked });
+            // STEP 0: If singleRootSelect mode and this is a root node being checked, uncheck all other roots
+            if (config.singleRootSelect && newChecked && nodeState.level === 0) {
+                log('🔘 Single root select mode: unchecking other roots', { path });
+                // Uncheck all root nodes and their descendants
+                state.rootPaths.forEach(rootPath => {
+                    if (rootPath !== path) {
+                        newCheckedPaths.delete(rootPath);
+                        // Also uncheck all descendants of this root
+                        const rootDescendants = getDescendantPaths(rootPath, state.nodes, separator);
+                        rootDescendants.forEach(descendantPath => {
+                            newCheckedPaths.delete(descendantPath);
+                        });
+                    }
+                });
+            }
             // STEP 1: Update this node
             if (newChecked) {
                 newCheckedPaths.add(path);

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

@@ -84,47 +84,63 @@
 
 		<!-- 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 class="col-4 text-secondary fw-semibold small text-uppercase">Density Caps</div>
+			<div class="col-8">
+				<div class="d-flex gap-3">
+					<div class="form-check form-switch m-0">
+						<input
+							id="cell-mincap-toggle"
+							type="checkbox"
+							class="form-check-input"
+							role="switch"
+							bind:checked={displayStore.useMinCap}
+						/>
+						<label class="form-check-label small text-secondary" for="cell-mincap-toggle">
+							Min
+						</label>
+					</div>
+					<div class="form-check form-switch m-0">
+						<input
+							id="cell-maxcap-toggle"
+							type="checkbox"
+							class="form-check-input"
+							role="switch"
+							bind:checked={displayStore.useMaxCap}
+						/>
+						<label class="form-check-label small text-secondary" for="cell-maxcap-toggle">
+							Max
+						</label>
+					</div>
 				</div>
 			</div>
 		</div>
 
-		{#if displayStore.useAutoSize}
-			<!-- Auto Size Mode -->
+		{#if displayStore.useMinCap || displayStore.useMaxCap}
+			<!-- Cap 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-4 text-secondary small">Cap 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>
-						<option value="hybrid">Hybrid (stepped proportional)</option>
+						<option value="logarithmic">Logarithmic</option>
+						<option value="percentage">Proportional</option>
+						<option value="tiered">Tiered</option>
+						<option value="hybrid">Hybrid</option>
 					</select>
 				</div>
 			</div>
 
-			<!-- Auto Size Base Multiplier -->
+			<!-- Cap Base -->
 			<div class="row align-items-center g-2 mb-3 ps-3">
-				<div class="col-4 text-secondary small">Base Size</div>
+				<div class="col-4 text-secondary small">Cap Base</div>
 				<div class="col-3 text-end">
 					<span class="badge bg-white text-muted border">{displayStore.autoSizeBase.toFixed(1)}x</span>
 				</div>
 				<div class="col-5">
 					<input
-						id="cell-autosize-base-slider"
+						id="cell-cap-base-slider"
 						type="range"
 						class="form-range w-100"
 						min="0.5"
@@ -134,78 +150,6 @@
 					/>
 				</div>
 			</div>
-		{:else}
-			<!-- Density-Based Caps (Manual Mode Only) -->
-			<div class="ps-3 border-start border-2 mb-3">
-				<!-- Min Cap -->
-				<div class="row align-items-center g-2 mb-2">
-					<div class="col-7 text-secondary small">Min Size Cap (Density)</div>
-					<div class="col-5">
-						<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
-							<input
-								id="cell-mincap-toggle"
-								type="checkbox"
-								class="form-check-input"
-								role="switch"
-								bind:checked={displayStore.useMinCap}
-							/>
-						</div>
-					</div>
-				</div>
-
-				<!-- Max Cap -->
-				<div class="row align-items-center g-2 mb-2">
-					<div class="col-7 text-secondary small">Max Size Cap (Density)</div>
-					<div class="col-5">
-						<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
-							<input
-								id="cell-maxcap-toggle"
-								type="checkbox"
-								class="form-check-input"
-								role="switch"
-								bind:checked={displayStore.useMaxCap}
-							/>
-						</div>
-					</div>
-				</div>
-
-				{#if displayStore.useMinCap || displayStore.useMaxCap}
-					<!-- Cap Mode (shares auto-size settings) -->
-					<div class="row align-items-center g-2 mb-2 mt-2">
-						<div class="col-4 text-secondary small">Cap Mode</div>
-						<div class="col-8">
-							<select 
-								class="form-select form-select-sm" 
-								bind:value={displayStore.autoSizeMode}
-							>
-								<option value="logarithmic">Logarithmic</option>
-								<option value="percentage">Proportional</option>
-								<option value="tiered">Tiered</option>
-								<option value="hybrid">Hybrid</option>
-							</select>
-						</div>
-					</div>
-
-					<!-- Cap Base -->
-					<div class="row align-items-center g-2 mb-2">
-						<div class="col-4 text-secondary small">Cap Base</div>
-						<div class="col-3 text-end">
-							<span class="badge bg-white text-muted border">{displayStore.autoSizeBase.toFixed(1)}x</span>
-						</div>
-						<div class="col-5">
-							<input
-								id="cell-cap-base-slider"
-								type="range"
-								class="form-range w-100"
-								min="0.5"
-								max="3.0"
-								step="0.1"
-								bind:value={displayStore.autoSizeBase}
-							/>
-						</div>
-					</div>
-				{/if}
-			</div>
 		{/if}		<div class="border-top my-3"></div>
 
 		<!-- Show Labels -->

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

@@ -100,14 +100,10 @@
 		// Initial setup
 		addLayers();
 
-		// Events for updating - conditional based on auto-size
+		// Events for updating - always listen to zoom/move
 		map.on('style.load', addLayers);
-		
-		// Only listen to zoom/move events if NOT using auto-size
-		if (!displayStore.useAutoSize) {
-			map.on('moveend', updateLayer);
-			map.on('zoomend', updateLayer);
-		}
+		map.on('moveend', updateLayer);
+		map.on('zoomend', updateLayer);
 
 		// Cleanup
 		return () => {
@@ -131,7 +127,6 @@
 		const _l1 = displayStore.level1;
 		const _l2 = displayStore.level2;
 		const _layerGrouping = displayStore.layerGrouping;
-		const _useAutoSize = displayStore.useAutoSize;
 		const _autoSizeMode = displayStore.autoSizeMode;
 		const _autoSizeBase = displayStore.autoSizeBase;
 		const _useMinCap = displayStore.useMinCap;
@@ -151,101 +146,79 @@
 	}
 
 	function renderCells(map: mapboxgl.Map) {
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
 		const zoom = map.getZoom();
 		const centerLat = map.getCenter().lat;
 		
 		console.log(`[CellsLayer] Rendering.. Zoom: ${zoom.toFixed(2)}, Cells: ${dataStore.filteredCells.length}`);
 
-		// 1. Calculate base radius (only used in manual mode)
+		// Calculate base radius from pixel size
 		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
-		
-		if (!displayStore.useAutoSize) {
-			console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
-		}
+		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
+		// Group cells
 		const groups = groupCells(dataStore.filteredCells, displayStore.level1, displayStore.level2);
 		console.log(`[CellsLayer] Groups: ${groups.size}`);
 		
 		const features: GeoJSON.Feature[] = [];
 		let groupIndex = 0;
 
-		// 3. Iterate groups and generate features
+		// Iterate groups and generate features
 		for (const [groupId, cells] of groups) {
-			// Get style from registry
 			const defaultColor = getColorForGroup(groupIndex++);
 			const style = registry.getStyle(groupId, defaultColor);
 
 			if (!style.visible) continue;
 
 			for (const cell of cells) {
-				// 4. BBox Filter - SKIP if auto-size is enabled
-				if (!displayStore.useAutoSize) {
-					const bounds = map.getBounds();
-					if (!bounds || !bounds.contains([cell.longitude, cell.latitude])) {
-						continue;
-					}
+				// Viewport filter
+				if (!bounds.contains([cell.longitude, cell.latitude])) {
+					continue;
 				}
 				
-				// 5. Z-Index Lookup
+				// Z-Index Lookup
 				const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey;
 				const zIndex = displayStore.currentZIndex[zIndexKey] ?? 10;
 
-				// 6. Calculate radius with z-index scaling
+				// Calculate radius with z-index scaling
 				const MAX_Z = 35;
-				let radiusMeters: number;
+				const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
+				let radiusMeters = baseRadiusMeters * scaleFactor;
 				
-				if (displayStore.useAutoSize) {
-					// Auto-size mode: get target radius for this site
+				// Apply density-based caps if enabled
+				if (displayStore.useMinCap || displayStore.useMaxCap) {
 					const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
 					const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
-					
-					// Apply base size multiplier
 					const baseAdjusted = autoRadius * displayStore.autoSizeBase;
+					const scaledAuto = baseAdjusted * scaleFactor;
 					
-					// 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 = baseAdjusted * 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;
+					// Apply caps: min = 60% of auto-size, max = 140% of auto-size
+					const minCap = scaledAuto * 0.6;
+					const maxCap = scaledAuto * 1.4;
 					
-					// Apply density-based caps if enabled
-					if (displayStore.useMinCap || displayStore.useMaxCap) {
-						const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
-						const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
-						const baseAdjusted = autoRadius * displayStore.autoSizeBase;
-						const scaledAuto = baseAdjusted * scaleFactor;
-						
-						// Apply caps: min = 60% of auto-size, max = 140% of auto-size
-						const minCap = scaledAuto * 0.6;
-						const maxCap = scaledAuto * 1.4;
-						
-						if (displayStore.useMinCap && radiusMeters < minCap) {
-							radiusMeters = minCap;
-						}
-						if (displayStore.useMaxCap && radiusMeters > maxCap) {
-							radiusMeters = maxCap;
-						}
+					if (displayStore.useMinCap && radiusMeters < minCap) {
+						radiusMeters = minCap;
+					}
+					if (displayStore.useMaxCap && radiusMeters > maxCap) {
+						radiusMeters = maxCap;
 					}
 				}
 
-				// 7. Apply beamwidth boost from displayStore preset
+				// Apply beamwidth boost
 				const beamwidthBoost = displayStore.currentBeamwidthBoost[zIndexKey] || 0;
 				const adjustedBeamwidth = cell.beamwidth + beamwidthBoost;
 
-				// 8. Generate Arc
+				// Generate Arc
 				const feature = generateCellArc(cell, radiusMeters, zIndex, style.color, adjustedBeamwidth);
 				features.push(feature);
 			}
 		}
 
-		console.log(`[CellsLayer] Generated ${features.length} features ${displayStore.useAutoSize ? '(all cells)' : 'in view'}`);
+		console.log(`[CellsLayer] Generated ${features.length} features in view`);
 
-		// 8. Update Source
+		// Update Source
 		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
 		if (source) {
 			source.setData({

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

@@ -7,7 +7,6 @@ export declare class CellDisplayStore {
     lineWidth: number;
     showLabels: boolean;
     layerGrouping: LayerGroupingPreset;
-    useAutoSize: boolean;
     autoSizeMode: AutoSizeMode;
     autoSizeBase: number;
     useMinCap: boolean;

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

@@ -8,11 +8,10 @@ export class CellDisplayStore {
     lineWidth = $state(1);
     showLabels = $state(false);
     layerGrouping = $state('frequency');
-    // Auto-size settings
-    useAutoSize = $state(false);
+    // Auto-size settings (used by density caps)
     autoSizeMode = $state('logarithmic');
     autoSizeBase = $state(1.0);
-    // Density-based caps (for manual mode)
+    // Density-based caps
     useMinCap = $state(false);
     useMaxCap = $state(false);
     // Grouping
@@ -42,7 +41,6 @@ export class CellDisplayStore {
                     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.autoSizeBase = parsed.autoSizeBase ?? 1.0;
                     this.useMinCap = parsed.useMinCap ?? false;
@@ -69,7 +67,6 @@ export class CellDisplayStore {
                     lineWidth: this.lineWidth,
                     showLabels: this.showLabels,
                     layerGrouping: this.layerGrouping,
-                    useAutoSize: this.useAutoSize,
                     autoSizeMode: this.autoSizeMode,
                     autoSizeBase: this.autoSizeBase,
                     useMinCap: this.useMinCap,

package/package.json

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