@smartnet360/svelte-components 0.0.143 → 0.0.145

package/dist/apps/antenna-tools/components/AntennaTools.svelte

@@ -110,11 +110,14 @@
       if (externalAntenna1) {
         const found = findAntennaBySpec(antennas, externalAntenna1);
         if (found) {
+          // Compute available tilts INLINE to avoid stale state issue
+          const tiltsForAntenna1 = getAvailableTiltsForAntenna(found);
+          
           // Use untrack to prevent infinite loop from state updates
           untrack(() => {
             selectedAntenna = found;
-            updateAvailableTilts(found);
-            ant1ElectricalTilt = findTiltIndex(availableElectricalTilts, externalAntenna1.electricalTilt ?? 0);
+            availableElectricalTilts = tiltsForAntenna1;
+            ant1ElectricalTilt = findTiltIndex(tiltsForAntenna1, externalAntenna1.electricalTilt ?? 0);
             ant1MechanicalTilt = externalAntenna1.mechanicalTilt ?? 0;
           });
         } else {
@@ -126,9 +129,10 @@
       if (externalAntenna2) {
         const found2 = findAntennaBySpec(antennas, externalAntenna2);
         if (found2) {
+          const tiltsForAntenna2 = getAvailableTiltsForAntenna(found2);
           untrack(() => {
             selectedAntenna2 = found2;
-            ant2ElectricalTilt = findTiltIndex(getAvailableTiltsForAntenna(found2), externalAntenna2.electricalTilt ?? 0);
+            ant2ElectricalTilt = findTiltIndex(tiltsForAntenna2, externalAntenna2.electricalTilt ?? 0);
             ant2MechanicalTilt = externalAntenna2.mechanicalTilt ?? 0;
             if (viewMode === 'single') {
               viewMode = 'compare';

package/dist/map-v3/features/custom/components/CustomCellSetManager.svelte

@@ -17,6 +17,14 @@
 	import { buildCustomCellTree } from '../logic/tree-adapter';
 	import type { CustomSetsApiClient } from '../db/custom-sets-api';
 	import ServerSetBrowser from './ServerSetBrowser.svelte';
+	import { extractCsvHeaders } from '../logic/csv-parser';
+	import { 
+		ColumnMapper, 
+		autoDetectImport,
+		getFieldsForMode,
+		type ColumnMapping,
+		type ImportMode
+	} from '../../../../shared/csv-import';
 
 	interface Props {
 		/** The custom cell sets store */
@@ -57,6 +65,15 @@
 	let importError = $state('');
 	let fileInput: HTMLInputElement;
 	
+	// Column mapping state
+	let showMappingModal = $state(false);
+	let pendingCsvContent = $state<string | null>(null);
+	let csvHeaders = $state<string[]>([]);
+	let columnMapping = $state<ColumnMapping>({});
+	let importMode = $state<ImportMode>('cell');
+	let includeAllExtras = $state(true);
+	let selectedExtras = $state<number[]>([]);
+	
 	// Quick Add state
 	let showQuickAdd = $state(false);
 	let quickAddText = $state('');
@@ -154,8 +171,23 @@
 		reader.onload = (e) => {
 			try {
 				const content = e.target?.result as string;
-				importResult = setsStore.importFromCsv(content, file.name);
-				showImportModal = true;
+				// Extract headers and show mapping modal
+				const headers = extractCsvHeaders(content);
+				if (headers.length === 0) {
+					throw new Error('CSV file appears to be empty');
+				}
+				
+				// Store content for later parsing
+				pendingCsvContent = content;
+				csvHeaders = headers;
+				
+				// Auto-detect import mode and column mapping
+				const detected = autoDetectImport(headers);
+				importMode = detected.mode;
+				columnMapping = detected.mapping;
+				
+				// Show mapping modal
+				showMappingModal = true;
 			} catch (err) {
 				importError = err instanceof Error ? err.message : 'Failed to parse CSV';
 				importResult = null;
@@ -168,6 +200,34 @@
 		reader.readAsText(file);
 		input.value = '';
 	}
+	
+	function confirmMapping() {
+		if (!pendingCsvContent) return;
+		
+		try {
+			importResult = setsStore.importFromCsv(pendingCsvContent, importFileName, {
+				columnMapping,
+				includeAllExtras,
+				selectedExtraIndices: selectedExtras
+			});
+			showMappingModal = false;
+			showImportModal = true;
+		} catch (err) {
+			importError = err instanceof Error ? err.message : 'Failed to parse CSV';
+			showMappingModal = false;
+			importResult = null;
+		}
+	}
+	
+	function closeMappingModal() {
+		showMappingModal = false;
+		pendingCsvContent = null;
+		csvHeaders = [];
+		columnMapping = {};
+		importMode = 'cell';
+		includeAllExtras = true;
+		selectedExtras = [];
+	}
 
 	function confirmImport() {
 		if (!importResult) return;
@@ -390,8 +450,8 @@
 					<input
 						type="range"
 						class="form-range"
-						min="10"
-						max="200"
+						min="5"
+						max="100"
 						step="5"
 						value={globalSectorSize}
 						oninput={handleGlobalSectorSizeChange}
@@ -523,6 +583,56 @@
 	</div>
 </MapControl>
 
+<!-- Column Mapping Modal -->
+{#if showMappingModal && csvHeaders.length > 0}
+	{@const fieldsConfig = getFieldsForMode(importMode)}
+	{@const isValid = fieldsConfig.required.every(f => 
+		columnMapping[f.type] !== null && columnMapping[f.type] !== undefined
+	)}
+	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+			<div class="modal-content">
+				<div class="modal-header py-2">
+					<h6 class="modal-title">
+						<i class="bi bi-grid-3x3 me-2"></i>
+						Import: {importFileName}
+					</h6>
+					<button type="button" class="btn-close" aria-label="Close" onclick={closeMappingModal}></button>
+				</div>
+				<div class="modal-body py-2">
+					<ColumnMapper
+						headers={csvHeaders}
+						mode={importMode}
+						mapping={columnMapping}
+						{includeAllExtras}
+						{selectedExtras}
+						onmodechange={(m) => importMode = m}
+						onchange={(m) => columnMapping = m}
+						onextraschange={(all, selected) => {
+							includeAllExtras = all;
+							selectedExtras = selected;
+						}}
+					/>
+				</div>
+				<div class="modal-footer py-2">
+					<button type="button" class="btn btn-secondary btn-sm" onclick={closeMappingModal}>
+						Cancel
+					</button>
+					<button 
+						type="button" 
+						class="btn btn-primary btn-sm"
+						onclick={confirmMapping}
+						disabled={!isValid}
+					>
+						<i class="bi bi-arrow-right me-1"></i>
+						Continue
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <!-- Import Result Modal -->
 {#if showImportModal && importResult}
 	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">

package/dist/map-v3/features/custom/layers/CustomCellsLayer.svelte

@@ -203,9 +203,7 @@
 						customGroup: item.customGroup,
 						sizeFactor: item.sizeFactor,
 						setName: set.name,
-						...Object.fromEntries(
-							Object.entries(item.extraFields).map(([k, v]) => [`extra_${k}`, v])
-						)
+						popupInfo: { ...item.extraFields }
 					}
 				});
 			} else if (item.geometry === 'cell' && item.resolvedCell) {
@@ -226,11 +224,7 @@
 					feature.properties.customGroup = item.customGroup;
 					feature.properties.sizeFactor = item.sizeFactor;
 					feature.properties.setName = set.name;
-					
-					// Add extra fields
-					for (const [key, value] of Object.entries(item.extraFields)) {
-						feature.properties[`extra_${key}`] = value;
-					}
+					feature.properties.popupInfo = { ...item.extraFields };
 				}
 
 				cellFeatures.push(feature);

package/dist/map-v3/features/custom/logic/csv-parser.d.ts

@@ -9,21 +9,44 @@
  * Required column: id (or cellName/txId for backwards compat)
  * Optional columns: customGroup, sizeFactor, lat, lon, + any extras for tooltips
  * Supports both comma (,) and semicolon (;) delimiters
+ *
+ * Supports user-defined column mapping via ColumnMapping from csv-import module.
  */
 import type { CustomCellImportResult } from '../types';
 import type { Cell } from '../../../../shared/demo';
+import type { ColumnMapping } from '../../../../shared/csv-import';
 /**
  * Supported delimiters
  */
 export type CsvDelimiter = ',' | ';' | 'auto';
+/**
+ * Extract headers from CSV content
+ * @param csvContent Raw CSV content
+ * @param delimiter Delimiter to use: ',' (comma), ';' (semicolon), or 'auto' (detect)
+ * @returns Array of header strings
+ */
+export declare function extractCsvHeaders(csvContent: string, delimiter?: CsvDelimiter): string[];
+/**
+ * Options for CSV parsing
+ */
+export interface CsvParseOptions {
+    /** Delimiter to use: ',' (comma), ';' (semicolon), or 'auto' (detect) */
+    delimiter?: CsvDelimiter;
+    /** User-defined column mapping (overrides auto-detection) */
+    columnMapping?: ColumnMapping;
+    /** Whether to include all extra columns (default: true) */
+    includeAllExtras?: boolean;
+    /** Specific extra column indices to include (when includeAllExtras is false) */
+    selectedExtraIndices?: number[];
+}
 /**
  * Parse a CSV string into custom items (cells or points)
  * @param csvContent Raw CSV content
  * @param cellLookup Map of cellName -> Cell for resolving cell data
- * @param delimiter Delimiter to use: ',' (comma), ';' (semicolon), or 'auto' (detect)
+ * @param options Parsing options
  * @returns Import result with items, unmatched IDs, groups, and extra columns
  */
-export declare function parseCustomCellsCsv(csvContent: string, cellLookup: Map<string, Cell>, delimiter?: CsvDelimiter): CustomCellImportResult;
+export declare function parseCustomCellsCsv(csvContent: string, cellLookup: Map<string, Cell>, options?: CsvParseOptions): CustomCellImportResult;
 /**
  * Build a cell lookup map from an array of cells
  * Creates lookups for both cellName and txId for flexible matching

package/dist/map-v3/features/custom/logic/csv-parser.js

@@ -9,6 +9,8 @@
  * Required column: id (or cellName/txId for backwards compat)
  * Optional columns: customGroup, sizeFactor, lat, lon, + any extras for tooltips
  * Supports both comma (,) and semicolon (;) delimiters
+ *
+ * Supports user-defined column mapping via ColumnMapping from csv-import module.
  */
 /**
  * Known/reserved column names
@@ -29,14 +31,29 @@ function detectDelimiter(headerLine) {
     const semicolonCount = (headerLine.match(/;/g) || []).length;
     return semicolonCount > commaCount ? ';' : ',';
 }
+/**
+ * Extract headers from CSV content
+ * @param csvContent Raw CSV content
+ * @param delimiter Delimiter to use: ',' (comma), ';' (semicolon), or 'auto' (detect)
+ * @returns Array of header strings
+ */
+export function extractCsvHeaders(csvContent, delimiter = 'auto') {
+    const lines = csvContent.trim().split('\n');
+    if (lines.length === 0)
+        return [];
+    const headerLine = lines[0];
+    const actualDelimiter = delimiter === 'auto' ? detectDelimiter(headerLine) : delimiter;
+    return parseCSVLine(headerLine, actualDelimiter);
+}
 /**
  * Parse a CSV string into custom items (cells or points)
  * @param csvContent Raw CSV content
  * @param cellLookup Map of cellName -> Cell for resolving cell data
- * @param delimiter Delimiter to use: ',' (comma), ';' (semicolon), or 'auto' (detect)
+ * @param options Parsing options
  * @returns Import result with items, unmatched IDs, groups, and extra columns
  */
-export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto') {
+export function parseCustomCellsCsv(csvContent, cellLookup, options = {}) {
+    const { delimiter = 'auto', columnMapping, includeAllExtras = true, selectedExtraIndices = [] } = options;
     const lines = csvContent.trim().split('\n');
     if (lines.length < 2) {
         return {
@@ -55,34 +72,66 @@ export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto')
     // Parse header
     const headers = parseCSVLine(headerLine, actualDelimiter);
     const normalizedHeaders = headers.map(normalizeColumnName);
-    // Find ID column - prefer 'id', then 'cellname', then 'txid'
-    let idIndex = normalizedHeaders.findIndex(h => h === 'id');
-    if (idIndex === -1) {
-        idIndex = normalizedHeaders.findIndex(h => h === 'cellname');
+    // Use column mapping if provided, otherwise auto-detect
+    let idIndex;
+    let groupIndex;
+    let sizeFactorIndex;
+    let latIndex;
+    let lonIndex;
+    if (columnMapping) {
+        // Use user-defined mapping
+        idIndex = columnMapping.id ?? -1;
+        groupIndex = columnMapping.group ?? -1;
+        sizeFactorIndex = columnMapping.sizeFactor ?? -1;
+        latIndex = columnMapping.lat ?? -1;
+        lonIndex = columnMapping.lon ?? -1;
     }
-    if (idIndex === -1) {
-        idIndex = normalizedHeaders.findIndex(h => h === 'txid');
+    else {
+        // Auto-detect: Find ID column - prefer 'id', then 'cellname', then 'txid'
+        idIndex = normalizedHeaders.findIndex(h => h === 'id');
+        if (idIndex === -1) {
+            idIndex = normalizedHeaders.findIndex(h => h === 'cellname');
+        }
+        if (idIndex === -1) {
+            idIndex = normalizedHeaders.findIndex(h => h === 'txid');
+        }
+        // Find optional columns
+        groupIndex = normalizedHeaders.findIndex(h => h === 'customgroup');
+        sizeFactorIndex = normalizedHeaders.findIndex(h => h === 'sizefactor');
+        // Find lat/lon columns for point geometry
+        latIndex = normalizedHeaders.findIndex(h => h === 'lat' || h === 'latitude');
+        lonIndex = normalizedHeaders.findIndex(h => h === 'lon' || h === 'lng' || h === 'longitude');
     }
     if (idIndex === -1) {
         throw new Error('CSV must contain an "id", "cellName", or "txId" column');
     }
-    // Find optional columns
-    const groupIndex = normalizedHeaders.findIndex(h => h === 'customgroup');
-    const sizeFactorIndex = normalizedHeaders.findIndex(h => h === 'sizefactor');
-    // Find lat/lon columns for point geometry
-    let latIndex = normalizedHeaders.findIndex(h => h === 'lat' || h === 'latitude');
-    let lonIndex = normalizedHeaders.findIndex(h => h === 'lon' || h === 'lng' || h === 'longitude');
     const hasLatLon = latIndex !== -1 && lonIndex !== -1;
-    // Find extra columns (not reserved)
+    // Find extra columns based on user selection
     const extraColumns = [];
     const extraIndices = [];
-    headers.forEach((header, idx) => {
-        const normalized = normalizeColumnName(header);
-        if (!RESERVED_COLUMNS.includes(normalized)) {
-            extraColumns.push(header.trim());
-            extraIndices.push(idx);
+    // Get indices that are already mapped to known fields
+    const mappedIndices = new Set([idIndex, groupIndex, sizeFactorIndex, latIndex, lonIndex].filter(i => i >= 0));
+    if (includeAllExtras) {
+        // Include all non-reserved, non-mapped columns
+        headers.forEach((header, idx) => {
+            if (mappedIndices.has(idx))
+                return;
+            const normalized = normalizeColumnName(header);
+            if (!RESERVED_COLUMNS.includes(normalized)) {
+                extraColumns.push(header.trim());
+                extraIndices.push(idx);
+            }
+        });
+    }
+    else {
+        // Include only specifically selected columns
+        for (const idx of selectedExtraIndices) {
+            if (idx >= 0 && idx < headers.length && !mappedIndices.has(idx)) {
+                extraColumns.push(headers[idx].trim());
+                extraIndices.push(idx);
+            }
         }
-    });
+    }
     // Parse data rows
     const cells = [];
     const unmatchedTxIds = [];

package/dist/map-v3/features/custom/logic/tree-adapter.js

@@ -10,8 +10,9 @@ export function buildCustomCellTree(set) {
     // Group cells by customGroup
     const groupMap = new Map();
     for (const cell of set.cells) {
-        if (!cell.resolvedCell)
-            continue; // Skip unresolved cells
+        // Skip cells that failed to resolve, but always include points
+        if (!cell.resolvedCell && cell.geometry !== 'point')
+            continue;
         if (!groupMap.has(cell.customGroup)) {
             groupMap.set(cell.customGroup, []);
         }
@@ -58,7 +59,8 @@ export function buildCustomCellTree(set) {
 export function getGroupCounts(set) {
     const counts = new Map();
     for (const cell of set.cells) {
-        if (!cell.resolvedCell)
+        // Skip cells that failed to resolve, but always include points
+        if (!cell.resolvedCell && cell.geometry !== 'point')
             continue;
         const current = counts.get(cell.customGroup) || 0;
         counts.set(cell.customGroup, current + 1);

package/dist/map-v3/features/custom/stores/custom-cell-sets.svelte.d.ts

@@ -7,6 +7,7 @@
 import type { Cell } from '../../../../shared/demo';
 import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
 import type { CustomCellSet, CustomCellImportResult } from '../types';
+import { type CsvParseOptions } from '../logic/csv-parser';
 /** Function that returns the current cells array */
 type CellsGetter = () => Cell[];
 /**
@@ -29,8 +30,11 @@ export declare class CustomCellSetsStore {
     constructor(cells: Cell[] | CellsGetter, namespace?: string);
     /**
      * Import a CSV file and create a new custom cell set
+     * @param csvContent Raw CSV content
+     * @param fileName Name of the file being imported
+     * @param options Parsing options (column mapping, extra fields selection)
      */
-    importFromCsv(csvContent: string, fileName: string): CustomCellImportResult;
+    importFromCsv(csvContent: string, fileName: string, options?: CsvParseOptions): CustomCellImportResult;
     /**
      * Create a new set from import result
      */

package/dist/map-v3/features/custom/stores/custom-cell-sets.svelte.js

@@ -67,12 +67,15 @@ export class CustomCellSetsStore {
     }
     /**
      * Import a CSV file and create a new custom cell set
+     * @param csvContent Raw CSV content
+     * @param fileName Name of the file being imported
+     * @param options Parsing options (column mapping, extra fields selection)
      */
-    importFromCsv(csvContent, fileName) {
+    importFromCsv(csvContent, fileName, options) {
         // Build lookup from all cells
         const cellLookup = buildCellLookup(this.getCells());
-        // Parse CSV
-        const result = parseCustomCellsCsv(csvContent, cellLookup);
+        // Parse CSV with options
+        const result = parseCustomCellsCsv(csvContent, cellLookup, options || {});
         return result;
     }
     /**

package/dist/shared/csv-import/ColumnMapper.svelte

@@ -0,0 +1,288 @@
+<script lang="ts">
+	/**
+	 * Column Mapper Component
+	 * 
+	 * Compact UI for mapping CSV columns to expected fields.
+	 * Includes import mode selection (Cell/Point/Site) with auto-detection.
+	 * Supports extra field selection for tooltips.
+	 */
+	import type { ColumnMapping, ImportFieldsConfig, ImportMode } from './types';
+	import { getFieldsForMode } from './types';
+	import { detectColumnMapping } from './column-detector';
+	
+	interface Props {
+		/** CSV column headers */
+		headers: string[];
+		/** Current import mode */
+		mode: ImportMode;
+		/** Current mapping (can be auto-detected or user-modified) */
+		mapping: ColumnMapping;
+		/** Whether to include all extra columns */
+		includeAllExtras?: boolean;
+		/** Selected extra column indices (when not including all) */
+		selectedExtras?: number[];
+		/** Called when mode changes */
+		onmodechange?: (mode: ImportMode) => void;
+		/** Called when mapping changes */
+		onchange?: (mapping: ColumnMapping) => void;
+		/** Called when extra fields settings change */
+		onextraschange?: (includeAll: boolean, selected: number[]) => void;
+	}
+	
+	let { 
+		headers,
+		mode,
+		mapping,
+		includeAllExtras = true,
+		selectedExtras = [],
+		onmodechange,
+		onchange,
+		onextraschange
+	}: Props = $props();
+	
+	// Get fields config based on current mode
+	let fieldsConfig = $derived(getFieldsForMode(mode));
+	
+	// All fields to display
+	let allFields = $derived([...fieldsConfig.required, ...fieldsConfig.optional]);
+	
+	// Get mapped column indices (to exclude from extra fields options)
+	let mappedIndices = $derived(new Set(
+		Object.values(mapping).filter((v): v is number => v !== null && v !== undefined)
+	));
+	
+	// Available columns for extra fields (not already mapped)
+	let availableExtras = $derived(
+		headers
+			.map((header, idx) => ({ header, idx }))
+			.filter(({ idx }) => !mappedIndices.has(idx))
+	);
+	
+	// Validation state
+	let missingRequired = $derived(
+		fieldsConfig.required.filter(f => 
+			mapping[f.type] === null || mapping[f.type] === undefined
+		)
+	);
+	
+	function handleModeChange(newMode: ImportMode) {
+		if (newMode === mode) return;
+		
+		// Re-detect mapping for new mode
+		const newFieldsConfig = getFieldsForMode(newMode);
+		const newMapping = detectColumnMapping(headers, newFieldsConfig);
+		
+		onmodechange?.(newMode);
+		onchange?.(newMapping);
+	}
+	
+	function handleFieldChange(fieldType: string, event: Event) {
+		const select = event.target as HTMLSelectElement;
+		const value = select.value;
+		
+		const newMapping = { ...mapping };
+		
+		if (value === '') {
+			newMapping[fieldType] = null;
+		} else {
+			newMapping[fieldType] = parseInt(value, 10);
+		}
+		
+		onchange?.(newMapping);
+	}
+	
+	function getFieldValue(fieldType: string): string {
+		const value = mapping[fieldType];
+		return value === null || value === undefined ? '' : String(value);
+	}
+	
+	function getMappedHeader(fieldType: string): string | null {
+		const idx = mapping[fieldType];
+		return idx !== null && idx !== undefined ? headers[idx] : null;
+	}
+	
+	// Extra fields handlers
+	function handleIncludeAllChange(event: Event) {
+		const checked = (event.target as HTMLInputElement).checked;
+		onextraschange?.(checked, selectedExtras);
+	}
+	
+	function handleExtraFieldChange(slotIndex: number, event: Event) {
+		const select = event.target as HTMLSelectElement;
+		const value = select.value;
+		
+		const newSelected = [...selectedExtras];
+		
+		if (value === '') {
+			// Remove this slot
+			newSelected[slotIndex] = -1;
+		} else {
+			newSelected[slotIndex] = parseInt(value, 10);
+		}
+		
+		// Filter out -1 values and duplicates
+		const filtered = newSelected.filter((v, i) => v >= 0 && newSelected.indexOf(v) === i);
+		onextraschange?.(includeAllExtras, filtered);
+	}
+	
+	function getExtraSlotValue(slotIndex: number): string {
+		const value = selectedExtras[slotIndex];
+		return value === undefined || value < 0 ? '' : String(value);
+	}
+</script>
+
+<div class="column-mapper">
+	<!-- Import Mode Selection -->
+	<div class="mode-selection mb-3 pb-2 border-bottom">
+		<div class="d-flex align-items-center gap-3">
+			<span class="small text-muted">Import as:</span>
+			<div class="btn-group btn-group-sm" role="group" aria-label="Import mode">
+				<input 
+					type="radio" 
+					class="btn-check" 
+					name="importMode" 
+					id="mode-cell" 
+					checked={mode === 'cell'}
+					onchange={() => handleModeChange('cell')}
+				/>
+				<label class="btn btn-outline-secondary" for="mode-cell">
+					<i class="bi bi-broadcast me-1"></i>Cells
+				</label>
+				
+				<input 
+					type="radio" 
+					class="btn-check" 
+					name="importMode" 
+					id="mode-point" 
+					checked={mode === 'point'}
+					onchange={() => handleModeChange('point')}
+				/>
+				<label class="btn btn-outline-secondary" for="mode-point">
+					<i class="bi bi-geo-alt me-1"></i>Points
+				</label>
+				
+				<input 
+					type="radio" 
+					class="btn-check" 
+					name="importMode" 
+					id="mode-site" 
+					checked={mode === 'site'}
+					onchange={() => handleModeChange('site')}
+				/>
+				<label class="btn btn-outline-secondary" for="mode-site">
+					<i class="bi bi-pin-map me-1"></i>Sites
+				</label>
+			</div>
+		</div>
+	</div>
+	
+	<!-- Column Mapping Grid -->
+	<div class="mapping-grid">
+		{#each allFields as field (field.type)}
+			{@const isRequired = field.required}
+			{@const isMapped = mapping[field.type] !== null && mapping[field.type] !== undefined}
+			{@const fieldId = `column-map-${field.type}`}
+			
+			<div class="mapping-row d-flex align-items-center gap-2 mb-2">
+				<label 
+					class="field-label mb-0" 
+					for={fieldId}
+					title={field.description || field.label}
+				>
+					{field.label}{#if isRequired}<span class="text-danger">*</span>{/if}
+				</label>
+				<select 
+					id={fieldId}
+					class="form-select form-select-sm flex-grow-1"
+					class:is-invalid={isRequired && !isMapped}
+					class:is-valid={isMapped}
+					value={getFieldValue(field.type)}
+					onchange={(e) => handleFieldChange(field.type, e)}
+				>
+					<option value="">{field.description || '-- Select --'}</option>
+					{#each headers as header, idx}
+						<option value={String(idx)}>{header}</option>
+					{/each}
+				</select>
+			</div>
+		{/each}
+	</div>
+	
+	<!-- Extra Fields Section -->
+	{#if availableExtras.length > 0}
+		<div class="extra-fields mt-3 pt-2 border-top">
+			<div class="d-flex align-items-center justify-content-between mb-2">
+				<span class="small fw-medium">Extra columns for popups</span>
+				<div class="form-check form-check-inline mb-0">
+					<input 
+						class="form-check-input" 
+						type="checkbox" 
+						id="include-all-extras"
+						checked={includeAllExtras}
+						onchange={handleIncludeAllChange}
+					/>
+					<label class="form-check-label small" for="include-all-extras">
+						Include all ({availableExtras.length})
+					</label>
+				</div>
+			</div>
+			
+			{#if !includeAllExtras}
+				<div class="extra-slots">
+					{#each [0, 1, 2] as slotIndex}
+						{@const slotId = `extra-slot-${slotIndex}`}
+						<div class="d-flex align-items-center gap-2 mb-1">
+							<select
+								id={slotId}
+								class="form-select form-select-sm"
+								value={getExtraSlotValue(slotIndex)}
+								onchange={(e) => handleExtraFieldChange(slotIndex, e)}
+								aria-label={`Extra field ${slotIndex + 1}`}
+							>
+								<option value="">-- Extra {slotIndex + 1} --</option>
+								{#each availableExtras as { header, idx }}
+									<option value={String(idx)}>{header}</option>
+								{/each}
+							</select>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+	
+	<!-- Validation Warning -->
+	{#if missingRequired.length > 0}
+		<div class="alert alert-warning py-1 px-2 mt-2 mb-0 small">
+			<i class="bi bi-exclamation-triangle me-1"></i>
+			Required: {missingRequired.map(f => f.label).join(', ')}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.column-mapper {
+		font-size: 0.875rem;
+	}
+	
+	.field-label {
+		min-width: 80px;
+		font-weight: 500;
+		font-size: 0.8125rem;
+	}
+	
+	.form-select-sm {
+		font-size: 0.8125rem;
+		padding: 0.25rem 0.5rem;
+	}
+	
+	.mapping-row .form-select.is-valid {
+		border-color: var(--bs-success);
+		background-image: none; /* Remove check icon */
+	}
+	
+	.btn-group-sm .btn {
+		font-size: 0.75rem;
+		padding: 0.25rem 0.5rem;
+	}
+</style>

package/dist/shared/csv-import/ColumnMapper.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+     * Column Mapper Component
+     *
+     * Compact UI for mapping CSV columns to expected fields.
+     * Includes import mode selection (Cell/Point/Site) with auto-detection.
+     * Supports extra field selection for tooltips.
+     */
+import type { ColumnMapping, ImportMode } from './types';
+interface Props {
+    /** CSV column headers */
+    headers: string[];
+    /** Current import mode */
+    mode: ImportMode;
+    /** Current mapping (can be auto-detected or user-modified) */
+    mapping: ColumnMapping;
+    /** Whether to include all extra columns */
+    includeAllExtras?: boolean;
+    /** Selected extra column indices (when not including all) */
+    selectedExtras?: number[];
+    /** Called when mode changes */
+    onmodechange?: (mode: ImportMode) => void;
+    /** Called when mapping changes */
+    onchange?: (mapping: ColumnMapping) => void;
+    /** Called when extra fields settings change */
+    onextraschange?: (includeAll: boolean, selected: number[]) => void;
+}
+declare const ColumnMapper: import("svelte").Component<Props, {}, "">;
+type ColumnMapper = ReturnType<typeof ColumnMapper>;
+export default ColumnMapper;

package/dist/shared/csv-import/column-detector.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared CSV Import - Column Detector
+ *
+ * Auto-detects column mappings based on header names.
+ * Uses expandable alias maps for flexible matching.
+ */
+import type { ColumnMapping, StandardFieldType, ImportFieldsConfig, ImportMode } from './types';
+/**
+ * Alias map for auto-detecting column types
+ * Add new aliases here to expand recognition
+ */
+export declare const COLUMN_ALIASES: Record<StandardFieldType, string[]>;
+/**
+ * Find the best matching field type for a column header
+ */
+export declare function detectFieldType(header: string): StandardFieldType | null;
+/**
+ * Auto-detect column mapping from headers
+ * Returns suggested mapping based on alias matching
+ */
+export declare function detectColumnMapping(headers: string[], fieldsConfig: ImportFieldsConfig): ColumnMapping;
+/**
+ * Validate that all required fields are mapped
+ */
+export declare function validateMapping(mapping: ColumnMapping, fieldsConfig: ImportFieldsConfig): {
+    valid: boolean;
+    missing: string[];
+};
+/**
+ * Detect the most likely import mode based on headers
+ * Returns 'point' if lat/lon found, 'site' if site-related, otherwise 'cell'
+ */
+export declare function detectImportMode(headers: string[]): ImportMode;
+/**
+ * Auto-detect import mode and get initial mapping
+ */
+export declare function autoDetectImport(headers: string[]): {
+    mode: ImportMode;
+    mapping: ColumnMapping;
+    fieldsConfig: ImportFieldsConfig;
+};
+/**
+ * Detect delimiter from CSV content
+ */
+export declare function detectDelimiter(headerLine: string): ',' | ';';
+/**
+ * Parse CSV header line and return headers array
+ */
+export declare function parseHeaderLine(line: string, delimiter: ',' | ';'): string[];
+/**
+ * Get CSV headers and suggested mapping
+ */
+export declare function analyzeCSVHeaders(csvContent: string, fieldsConfig: ImportFieldsConfig): {
+    headers: string[];
+    delimiter: ',' | ';';
+    suggestedMapping: ColumnMapping;
+    rowCount: number;
+};

package/dist/shared/csv-import/column-detector.js

@@ -0,0 +1,228 @@
+/**
+ * Shared CSV Import - Column Detector
+ *
+ * Auto-detects column mappings based on header names.
+ * Uses expandable alias maps for flexible matching.
+ */
+import { getFieldsForMode } from './types';
+/**
+ * Alias map for auto-detecting column types
+ * Add new aliases here to expand recognition
+ */
+export const COLUMN_ALIASES = {
+    // Universal identifiers
+    id: [
+        'id', 'cellname', 'cell_name', 'txid', 'tx_id',
+        'site_id', 'siteid', 'site_code', 'sitecode',
+        'name', 'code', 'identifier', 'key', 'cell_id', 'cellid'
+    ],
+    // Coordinates
+    lat: [
+        'lat', 'latitude', 'y', 'y_coord', 'ycoord',
+        'northing', 'north', 'lat_deg', 'latitude_deg'
+    ],
+    lon: [
+        'lon', 'lng', 'long', 'longitude', 'x', 'x_coord', 'xcoord',
+        'easting', 'east', 'lon_deg', 'longitude_deg'
+    ],
+    // Grouping
+    group: [
+        'customgroup', 'custom_group', 'group', 'category',
+        'type', 'region', 'area', 'zone', 'cluster', 'segment'
+    ],
+    // Sizing
+    sizeFactor: [
+        'sizefactor', 'size_factor', 'size', 'scale', 'weight', 'factor'
+    ],
+    // Cell-specific
+    tech: [
+        'tech', 'technology', 'rat', 'radio', 'system',
+        'network_type', 'networktype', 'access_technology'
+    ],
+    band: [
+        'band', 'fband', 'frequency_band', 'frequencyband',
+        'freq', 'frequency', 'carrier', 'earfcn', 'arfcn'
+    ],
+    azimuth: [
+        'azimuth', 'az', 'bearing', 'direction', 'heading',
+        'antenna_azimuth', 'ant_azimuth', 'ant_az'
+    ],
+    tilt: [
+        'tilt', 'downtilt', 'etilt', 'mtilt', 'electrical_tilt',
+        'mechanical_tilt', 'antenna_tilt', 'ant_tilt'
+    ],
+    siteId: [
+        'siteid', 'site_id', 'site', 'location_id', 'locationid',
+        'enodeb_id', 'enodebid', 'gnodeb_id', 'gnodebid', 'bts_id'
+    ],
+    siteName: [
+        'sitename', 'site_name', 'location_name', 'locationname',
+        'site_label', 'sitelabel', 'station_name'
+    ],
+    status: [
+        'status', 'state', 'cell_status', 'cellstatus',
+        'operational_status', 'op_status', 'active'
+    ],
+    height: [
+        'height', 'antenna_height', 'ant_height', 'agl',
+        'elevation', 'tower_height', 'mast_height'
+    ],
+    power: [
+        'power', 'tx_power', 'txpower', 'eirp',
+        'transmit_power', 'output_power', 'pwr'
+    ]
+};
+/**
+ * Normalize a column header for comparison
+ */
+function normalizeHeader(header) {
+    return header
+        .trim()
+        .toLowerCase()
+        .replace(/[\s\-\.]/g, '_'); // Normalize separators to underscore
+}
+/**
+ * Find the best matching field type for a column header
+ */
+export function detectFieldType(header) {
+    const normalized = normalizeHeader(header);
+    for (const [fieldType, aliases] of Object.entries(COLUMN_ALIASES)) {
+        if (aliases.some(alias => normalized === alias || normalized.includes(alias))) {
+            return fieldType;
+        }
+    }
+    return null;
+}
+/**
+ * Auto-detect column mapping from headers
+ * Returns suggested mapping based on alias matching
+ */
+export function detectColumnMapping(headers, fieldsConfig) {
+    const mapping = {};
+    const usedIndices = new Set();
+    // Get all field types we're looking for
+    const allFields = [...fieldsConfig.required, ...fieldsConfig.optional];
+    // First pass: exact matches and strong matches
+    for (const field of allFields) {
+        const aliases = COLUMN_ALIASES[field.type] || [];
+        for (let i = 0; i < headers.length; i++) {
+            if (usedIndices.has(i))
+                continue;
+            const normalized = normalizeHeader(headers[i]);
+            // Check for exact match first
+            if (aliases.includes(normalized)) {
+                mapping[field.type] = i;
+                usedIndices.add(i);
+                break;
+            }
+        }
+    }
+    // Second pass: partial matches for unmapped fields
+    for (const field of allFields) {
+        if (mapping[field.type] !== undefined)
+            continue;
+        const aliases = COLUMN_ALIASES[field.type] || [];
+        for (let i = 0; i < headers.length; i++) {
+            if (usedIndices.has(i))
+                continue;
+            const normalized = normalizeHeader(headers[i]);
+            // Check for partial match
+            if (aliases.some(alias => normalized.includes(alias) || alias.includes(normalized))) {
+                mapping[field.type] = i;
+                usedIndices.add(i);
+                break;
+            }
+        }
+    }
+    // Set null for any fields not found
+    for (const field of allFields) {
+        if (mapping[field.type] === undefined) {
+            mapping[field.type] = null;
+        }
+    }
+    return mapping;
+}
+/**
+ * Validate that all required fields are mapped
+ */
+export function validateMapping(mapping, fieldsConfig) {
+    const missing = [];
+    for (const field of fieldsConfig.required) {
+        if (mapping[field.type] === null || mapping[field.type] === undefined) {
+            missing.push(field.label);
+        }
+    }
+    return {
+        valid: missing.length === 0,
+        missing
+    };
+}
+/**
+ * Detect the most likely import mode based on headers
+ * Returns 'point' if lat/lon found, 'site' if site-related, otherwise 'cell'
+ */
+export function detectImportMode(headers) {
+    const normalizedHeaders = headers.map(h => normalizeHeader(h));
+    // Check for lat/lon presence
+    const hasLat = normalizedHeaders.some(h => COLUMN_ALIASES.lat.some(alias => h === alias || h.includes(alias)));
+    const hasLon = normalizedHeaders.some(h => COLUMN_ALIASES.lon.some(alias => h === alias || h.includes(alias)));
+    const hasLatLon = hasLat && hasLon;
+    // Check for site-specific headers
+    const hasSiteId = normalizedHeaders.some(h => COLUMN_ALIASES.siteId.some(alias => h === alias || h.includes(alias)));
+    const hasSiteName = normalizedHeaders.some(h => COLUMN_ALIASES.siteName.some(alias => h === alias || h.includes(alias)));
+    // Check for cell-specific headers
+    const hasCellId = normalizedHeaders.some(h => ['cellname', 'cell_name', 'cellid', 'cell_id', 'txid', 'tx_id'].some(alias => h === alias || h.includes(alias)));
+    // Decision logic:
+    // 1. If has lat/lon AND site-specific headers → site mode
+    // 2. If has lat/lon AND no cell-specific headers → point mode
+    // 3. Otherwise → cell mode (ID resolves against existing cells)
+    if (hasLatLon && (hasSiteId || hasSiteName) && !hasCellId) {
+        return 'site';
+    }
+    if (hasLatLon && !hasCellId) {
+        return 'point';
+    }
+    return 'cell';
+}
+/**
+ * Auto-detect import mode and get initial mapping
+ */
+export function autoDetectImport(headers) {
+    const mode = detectImportMode(headers);
+    const fieldsConfig = getFieldsForMode(mode);
+    const mapping = detectColumnMapping(headers, fieldsConfig);
+    return { mode, mapping, fieldsConfig };
+}
+/**
+ * Detect delimiter from CSV content
+ */
+export function detectDelimiter(headerLine) {
+    const commaCount = (headerLine.match(/,/g) || []).length;
+    const semicolonCount = (headerLine.match(/;/g) || []).length;
+    return semicolonCount > commaCount ? ';' : ',';
+}
+/**
+ * Parse CSV header line and return headers array
+ */
+export function parseHeaderLine(line, delimiter) {
+    // Simple parse (doesn't handle quoted fields with delimiters inside)
+    return line.split(delimiter).map(h => h.trim().replace(/^["']|["']$/g, ''));
+}
+/**
+ * Get CSV headers and suggested mapping
+ */
+export function analyzeCSVHeaders(csvContent, fieldsConfig) {
+    const lines = csvContent.trim().split('\n');
+    if (lines.length === 0) {
+        return { headers: [], delimiter: ',', suggestedMapping: {}, rowCount: 0 };
+    }
+    const delimiter = detectDelimiter(lines[0]);
+    const headers = parseHeaderLine(lines[0], delimiter);
+    const suggestedMapping = detectColumnMapping(headers, fieldsConfig);
+    return {
+        headers,
+        delimiter,
+        suggestedMapping,
+        rowCount: lines.length - 1
+    };
+}

package/dist/shared/csv-import/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CSV Import Module
+ *
+ * Shared utilities for flexible CSV column mapping.
+ * Supports auto-detection of columns via aliases and manual mapping UI.
+ */
+export type { StandardFieldType, FieldDefinition, ColumnMapping, ImportFieldsConfig, ImportMode } from './types';
+export { CUSTOM_POINTS_FIELDS, CELL_IMPORT_FIELDS, CELL_MODE_FIELDS, POINT_MODE_FIELDS, SITE_MODE_FIELDS, getFieldsForMode } from './types';
+export { COLUMN_ALIASES, detectColumnMapping, detectImportMode, autoDetectImport, validateMapping, analyzeCSVHeaders } from './column-detector';
+export { default as ColumnMapper } from './ColumnMapper.svelte';

package/dist/shared/csv-import/index.js

@@ -0,0 +1,12 @@
+/**
+ * CSV Import Module
+ *
+ * Shared utilities for flexible CSV column mapping.
+ * Supports auto-detection of columns via aliases and manual mapping UI.
+ */
+// Field configurations
+export { CUSTOM_POINTS_FIELDS, CELL_IMPORT_FIELDS, CELL_MODE_FIELDS, POINT_MODE_FIELDS, SITE_MODE_FIELDS, getFieldsForMode } from './types';
+// Column detection utilities
+export { COLUMN_ALIASES, detectColumnMapping, detectImportMode, autoDetectImport, validateMapping, analyzeCSVHeaders } from './column-detector';
+// UI Component
+export { default as ColumnMapper } from './ColumnMapper.svelte';

package/dist/shared/csv-import/types.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Shared CSV Import - Types
+ *
+ * Reusable types for CSV column mapping across different import features.
+ */
+/**
+ * Import mode - determines which fields are shown and required
+ */
+export type ImportMode = 'cell' | 'point' | 'site';
+/**
+ * Standard field types that can be mapped
+ */
+export type StandardFieldType = 'id' | 'lat' | 'lon' | 'group' | 'sizeFactor' | 'tech' | 'band' | 'azimuth' | 'tilt' | 'siteId' | 'siteName' | 'status' | 'height' | 'power';
+/**
+ * Definition of a field for mapping
+ */
+export interface FieldDefinition {
+    /** Field type identifier */
+    type: StandardFieldType;
+    /** Display label for UI */
+    label: string;
+    /** Whether this field is required */
+    required: boolean;
+    /** Description/help text */
+    description?: string;
+}
+/**
+ * Mapping of field types to CSV column indices
+ */
+export interface ColumnMapping {
+    [fieldType: string]: number | null;
+}
+/**
+ * Result of parsing CSV headers
+ */
+export interface CsvHeadersResult {
+    /** All column headers from CSV */
+    headers: string[];
+    /** Detected delimiter */
+    delimiter: ',' | ';';
+    /** Auto-detected column mapping (best guesses) */
+    suggestedMapping: ColumnMapping;
+    /** Total row count (excluding header) */
+    rowCount: number;
+}
+/**
+ * Configuration for a specific import context
+ */
+export interface ImportFieldsConfig {
+    /** Fields that must be mapped */
+    required: FieldDefinition[];
+    /** Fields that can optionally be mapped */
+    optional: FieldDefinition[];
+}
+/**
+ * Predefined field configurations for import modes
+ */
+/** Cell mode - ID resolves against existing cell data */
+export declare const CELL_MODE_FIELDS: ImportFieldsConfig;
+/** Point mode - creates markers at lat/lon coordinates */
+export declare const POINT_MODE_FIELDS: ImportFieldsConfig;
+/** Site mode - creates site markers at lat/lon */
+export declare const SITE_MODE_FIELDS: ImportFieldsConfig;
+/** Get field config for a given import mode */
+export declare function getFieldsForMode(mode: ImportMode): ImportFieldsConfig;
+export declare const CUSTOM_POINTS_FIELDS: ImportFieldsConfig;
+export declare const CELL_IMPORT_FIELDS: ImportFieldsConfig;

package/dist/shared/csv-import/types.js

@@ -0,0 +1,70 @@
+/**
+ * Shared CSV Import - Types
+ *
+ * Reusable types for CSV column mapping across different import features.
+ */
+/**
+ * Predefined field configurations for import modes
+ */
+/** Cell mode - ID resolves against existing cell data */
+export const CELL_MODE_FIELDS = {
+    required: [
+        { type: 'id', label: 'Cell ID', required: true, description: 'e.g. cellName, txId' }
+    ],
+    optional: [
+        { type: 'group', label: 'Group', required: false, description: 'e.g. customGroup, category' },
+        { type: 'sizeFactor', label: 'Size', required: false, description: 'e.g. sizeFactor, weight' }
+    ]
+};
+/** Point mode - creates markers at lat/lon coordinates */
+export const POINT_MODE_FIELDS = {
+    required: [
+        { type: 'id', label: 'ID / Name', required: true, description: 'e.g. name, label, id' },
+        { type: 'lat', label: 'Latitude', required: true, description: 'e.g. lat, latitude, y' },
+        { type: 'lon', label: 'Longitude', required: true, description: 'e.g. lon, lng, longitude, x' }
+    ],
+    optional: [
+        { type: 'group', label: 'Group', required: false, description: 'e.g. category, type' },
+        { type: 'sizeFactor', label: 'Size', required: false, description: 'e.g. size, weight' }
+    ]
+};
+/** Site mode - creates site markers at lat/lon */
+export const SITE_MODE_FIELDS = {
+    required: [
+        { type: 'id', label: 'Site ID', required: true, description: 'e.g. siteId, site_id, enodeb_id' },
+        { type: 'lat', label: 'Latitude', required: true, description: 'e.g. lat, latitude' },
+        { type: 'lon', label: 'Longitude', required: true, description: 'e.g. lon, longitude' }
+    ],
+    optional: [
+        { type: 'siteName', label: 'Site Name', required: false, description: 'e.g. site_name, location' },
+        { type: 'group', label: 'Group', required: false, description: 'e.g. region, area' }
+    ]
+};
+/** Get field config for a given import mode */
+export function getFieldsForMode(mode) {
+    switch (mode) {
+        case 'cell': return CELL_MODE_FIELDS;
+        case 'point': return POINT_MODE_FIELDS;
+        case 'site': return SITE_MODE_FIELDS;
+    }
+}
+// Legacy exports for backward compatibility
+export const CUSTOM_POINTS_FIELDS = CELL_MODE_FIELDS;
+export const CELL_IMPORT_FIELDS = {
+    required: [
+        { type: 'id', label: 'Cell ID', required: true, description: 'Unique cell identifier' },
+        { type: 'lat', label: 'Latitude', required: true },
+        { type: 'lon', label: 'Longitude', required: true },
+        { type: 'azimuth', label: 'Azimuth', required: true, description: 'Antenna direction (0-360°)' }
+    ],
+    optional: [
+        { type: 'siteId', label: 'Site ID', required: false },
+        { type: 'siteName', label: 'Site Name', required: false },
+        { type: 'tech', label: 'Technology', required: false, description: 'e.g., LTE, NR, GSM' },
+        { type: 'band', label: 'Band', required: false, description: 'Frequency band' },
+        { type: 'tilt', label: 'Tilt', required: false },
+        { type: 'height', label: 'Height', required: false },
+        { type: 'power', label: 'Power', required: false },
+        { type: 'status', label: 'Status', required: false }
+    ]
+};

package/package.json

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