@smartnet360/svelte-components 0.0.142 → 0.0.144

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

@@ -67,6 +67,10 @@
     // Avoid overwriting user selections
     if (selectedAntenna !== internalSelectedAntenna) {
       internalSelectedAntenna = selectedAntenna;
+      // Also sync frequency when antenna is set externally
+      if (selectedAntenna && selectedAntenna.frequency) {
+        selectedFrequency = selectedAntenna.frequency;
+      }
     }
   });
 
@@ -76,12 +80,13 @@
     let newTilts: string[] = ['0'];
 
     if (internalSelectedAntenna) {
-      // Find ALL antennas with the same name and frequency to collect all electrical tilts
+      // Find antennas with the same name
       let sameName = antennas.filter(a => a.name === internalSelectedAntenna!.name);
       
-      // If frequency is selected, filter by it
-      if (selectedFrequency) {
-        sameName = sameName.filter(a => a.frequency === selectedFrequency);
+      // Always filter by frequency - use selectedFrequency or fall back to antenna's frequency
+      const freqToUse = selectedFrequency ?? internalSelectedAntenna.frequency;
+      if (freqToUse) {
+        sameName = sameName.filter(a => a.frequency === freqToUse);
       }
       
       const allTilts = new Set<string>();
@@ -114,12 +119,15 @@
     // Handle case where availableElectricalTilts might not be populated yet
     const targetTilt = availableElectricalTilts[tiltIndex] || '0';
     
+    // Always use frequency filter - selectedFrequency or the current antenna's frequency
+    const freqToUse = selectedFrequency ?? internalSelectedAntenna?.frequency;
+    
     // Find antenna with matching name, frequency, and electrical tilt
     return antennas.find(antenna => {
       if (antenna.name !== antennaName) return false;
       
-      // If frequency is selected, must match
-      if (selectedFrequency && antenna.frequency !== selectedFrequency) return false;
+      // Must match frequency
+      if (freqToUse && antenna.frequency !== freqToUse) return false;
       
       if (antenna.tilt) {
         const tiltString = antenna.tilt.toString();

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

@@ -197,10 +197,10 @@
 
   // === Helpers ===
   function updateAvailableTilts(antenna: Antenna) {
-    // Collect ALL available tilts from all antennas with the same name
-    const sameName = antennas.filter(a => a.name === antenna.name);
+    // Collect available tilts from antennas with the same name AND frequency
+    const sameNameAndFreq = antennas.filter(a => a.name === antenna.name && a.frequency === antenna.frequency);
     const allTilts = new Set<string>();
-    sameName.forEach(a => {
+    sameNameAndFreq.forEach(a => {
       if (a.tilt) {
         const tiltStr = a.tilt.toString();
         if (tiltStr.includes(',')) {
@@ -214,9 +214,10 @@
   }
 
   function getAvailableTiltsForAntenna(antenna: Antenna): string[] {
-    const sameName = antennas.filter(a => a.name === antenna.name);
+    // Collect available tilts from antennas with the same name AND frequency
+    const sameNameAndFreq = antennas.filter(a => a.name === antenna.name && a.frequency === antenna.frequency);
     const allTilts = new Set<string>();
-    sameName.forEach(a => {
+    sameNameAndFreq.forEach(a => {
       if (a.tilt) {
         const tiltStr = a.tilt.toString();
         if (tiltStr.includes(',')) {

package/dist/core/Auth/auth.svelte.js

@@ -2,30 +2,61 @@
 import { browser } from '$app/environment';
 // Demo mode - enabled via PUBLIC_DEMO_MODE env var (GitHub Pages)
 const DEMO_MODE = import.meta.env.PUBLIC_DEMO_MODE === 'true';
-const DEMO_USERNAME = 'demo';
-const DEMO_PASSWORD = 'demo123';
-// Demo user session (client-side only, no server needed)
-const DEMO_SESSION = {
-    user: {
-        id: 'demo-user',
-        username: 'demo',
-        displayName: 'Demo User',
-        email: 'demo@example.com',
-        groups: ['demo'],
-        loginTime: Date.now()
+// Test users configuration (no backend required)
+const TEST_USERS = {
+    // Demo user (view-only permissions)
+    demo: {
+        password: 'demo123',
+        session: {
+            user: {
+                id: 'demo-user',
+                username: 'demo',
+                displayName: 'Demo User',
+                email: 'demo@example.com',
+                groups: ['demo'],
+                loginTime: Date.now()
+            },
+            permissions: [
+                { featureId: 'map-view', canView: true, canEdit: false, canAdmin: false },
+                { featureId: 'coverage-view', canView: true, canEdit: false, canAdmin: false },
+                { featureId: 'charts-view', canView: true, canEdit: false, canAdmin: false },
+                { featureId: 'desktop-view', canView: true, canEdit: false, canAdmin: false },
+                { featureId: 'table-view', canView: true, canEdit: false, canAdmin: false },
+                { featureId: 'antenna-view', canView: true, canEdit: false, canAdmin: false },
+                { featureId: 'site-check', canView: true, canEdit: false, canAdmin: false },
+                { featureId: 'settings-view', canView: true, canEdit: false, canAdmin: false }
+            ],
+            token: 'demo-token',
+            expiresAt: Date.now() + (24 * 60 * 60 * 1000) // 24 hours
+        }
     },
-    permissions: [
-        { featureId: 'map-view', canView: true, canEdit: false, canAdmin: false },
-        { featureId: 'coverage-view', canView: true, canEdit: false, canAdmin: false },
-        { featureId: 'charts-view', canView: true, canEdit: false, canAdmin: false },
-        { featureId: 'desktop-view', canView: true, canEdit: false, canAdmin: false },
-        { featureId: 'table-view', canView: true, canEdit: false, canAdmin: false },
-        { featureId: 'antenna-view', canView: true, canEdit: false, canAdmin: false },
-        { featureId: 'site-check', canView: true, canEdit: false, canAdmin: false },
-        { featureId: 'settings-view', canView: true, canEdit: false, canAdmin: false }
-    ],
-    token: 'demo-token',
-    expiresAt: Date.now() + (24 * 60 * 60 * 1000) // 24 hours for demo
+    // Test user (full permissions, for testing without backend)
+    test: {
+        password: 'test',
+        session: {
+            user: {
+                id: 'test-user',
+                username: 'test',
+                displayName: 'Test User',
+                email: 'test@localhost',
+                groups: ['testers', 'admins'],
+                loginTime: Date.now()
+            },
+            permissions: [
+                { featureId: 'map-view', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'coverage-view', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'charts-view', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'desktop-view', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'table-view', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'antenna-view', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'site-check', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'settings-view', canView: true, canEdit: true, canAdmin: true },
+                { featureId: 'admin', canView: true, canEdit: true, canAdmin: true }
+            ],
+            token: 'test-token',
+            expiresAt: Date.now() + (24 * 60 * 60 * 1000) // 24 hours
+        }
+    }
 };
 // Default configuration
 const defaultConfig = {
@@ -107,22 +138,22 @@ export function createAuthState(config = {}) {
         isLoading = true;
         error = null;
         try {
-            // Demo mode: handle authentication client-side (no server needed)
+            // Check for test users (works in demo mode or as fallback)
+            const testUser = TEST_USERS[username.toLowerCase()];
+            if (testUser && password === testUser.password) {
+                // Create fresh session with updated timestamp
+                const testSession = {
+                    ...testUser.session,
+                    user: { ...testUser.session.user, loginTime: Date.now() },
+                    expiresAt: Date.now() + (24 * 60 * 60 * 1000)
+                };
+                saveSession(testSession);
+                return true;
+            }
+            // In demo mode, only allow test users
             if (DEMO_MODE) {
-                if (username === DEMO_USERNAME && password === DEMO_PASSWORD) {
-                    // Create fresh demo session with updated timestamp
-                    const demoSession = {
-                        ...DEMO_SESSION,
-                        user: { ...DEMO_SESSION.user, loginTime: Date.now() },
-                        expiresAt: Date.now() + (24 * 60 * 60 * 1000)
-                    };
-                    saveSession(demoSession);
-                    return true;
-                }
-                else {
-                    error = 'Demo mode: Use username "demo" and password "demo123"';
-                    return false;
-                }
+                error = 'Demo mode: Use "demo/demo123" or "test/test" to login';
+                return false;
             }
             // Normal mode: call server API
             const response = await fetch(`${cfg.apiEndpoint}/login`, {
@@ -141,7 +172,9 @@ export function createAuthState(config = {}) {
             }
         }
         catch (e) {
-            error = e instanceof Error ? e.message : 'Network error';
+            // If server is unavailable, show helpful message about test users
+            const networkError = e instanceof Error ? e.message : 'Network error';
+            error = `${networkError}. Try "test/test" for testing without a backend.`;
             return false;
         }
         finally {

package/dist/core/Auth/config.d.ts

@@ -21,5 +21,6 @@ export declare const DEFAULT_DEV_PERMISSIONS: FeatureAccess[];
 export declare function getDevConfig(): DevConfig;
 /**
  * Check if we're in development mode
+ * Currently disabled - authentication is always required
  */
 export declare function isDevMode(): boolean;

package/dist/core/Auth/config.js

@@ -246,11 +246,10 @@ export function getDevConfig() {
 }
 /**
  * Check if we're in development mode
+ * Currently disabled - authentication is always required
  */
 export function isDevMode() {
-    // Check environment - in dev server or explicit flag
-    if (typeof import.meta !== 'undefined' && import.meta.env?.DEV) {
-        return true;
-    }
+    // Auto-login disabled - always require authentication
+    // Use test/test or demo/demo123 for testing without a backend
     return false;
 }

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

@@ -24,7 +24,8 @@
 	import { 
 		CustomCellsLayer, 
 		CustomCellSetManager, 
-		createCustomCellSetsStore 
+		createCustomCellSetsStore,
+		createCustomSetsApi
 	} from '../features/custom';
 	// Custom Sites Feature
 	import {
@@ -103,6 +104,7 @@
 		<CustomCellSetManager 
 			position="top-left" 
 			setsStore={customCellSets}
+			apiClient={createCustomSetsApi('/api/custom-sets')}
 		/>
 
 

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

@@ -7,6 +7,7 @@
 	 * - Quick Add (paste cell names)
 	 * - Global size/opacity sliders
 	 * - Collapsible set sections with TreeView + color pickers
+	 * - Server sharing (optional, when apiClient provided)
 	 */
 	import { untrack } from 'svelte';
 	import { MapControl } from '../../../shared';
@@ -14,17 +15,30 @@
 	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
 	import type { CustomCellImportResult, CustomCellSet } from '../types';
 	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 */
 		setsStore: CustomCellSetsStore;
 		/** Control position on map */
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Optional API client for server sharing */
+		apiClient?: CustomSetsApiClient;
 	}
 
 	let { 
 		setsStore, 
-		position = 'top-left' 
+		position = 'top-left',
+		apiClient
 	}: Props = $props();
 
 	// Global display settings - initialized from first set if available
@@ -51,12 +65,24 @@
 	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');
+	
 	// Quick Add state
 	let showQuickAdd = $state(false);
 	let quickAddText = $state('');
 	let quickAddName = $state('Quick Selection');
 	let quickAddResult = $state<CustomCellImportResult | null>(null);
 	
+	// Server sharing state
+	let showServerBrowser = $state(false);
+	let savingSetId = $state<string | null>(null);
+	let saveError = $state('');
+	
 	// Track expanded sets
 	let expandedSets = $state<Set<string>>(new Set());
 
@@ -143,8 +169,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;
@@ -157,6 +198,28 @@
 		reader.readAsText(file);
 		input.value = '';
 	}
+	
+	function confirmMapping() {
+		if (!pendingCsvContent) return;
+		
+		try {
+			importResult = setsStore.importFromCsv(pendingCsvContent, importFileName, columnMapping);
+			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';
+	}
 
 	function confirmImport() {
 		if (!importResult) return;
@@ -223,6 +286,26 @@
 		}
 	}
 
+	// Server sharing functions
+	async function saveSetToServer(set: CustomCellSet) {
+		if (!apiClient) return;
+		
+		savingSetId = set.id;
+		saveError = '';
+		
+		try {
+			const result = await apiClient.saveSet(set);
+			
+			if (!result.success) {
+				saveError = result.error || 'Failed to save to server';
+			}
+		} catch (err) {
+			saveError = err instanceof Error ? err.message : 'Failed to save';
+		} finally {
+			savingSetId = null;
+		}
+	}
+
 	function toggleExpanded(setId: string) {
 		if (expandedSets.has(setId)) {
 			expandedSets.delete(setId);
@@ -252,9 +335,20 @@
 
 <MapControl {position} title="Custom Layers" icon="layers" controlWidth="320px">
 	{#snippet actions()}
+		{#if apiClient}
+			<button
+				class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
+				title="Load from Server"
+				aria-label="Load from Server"
+				onclick={() => showServerBrowser = true}
+			>
+				<i class="bi bi-cloud-download"></i>
+			</button>
+		{/if}
 		<button
 			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
 			title="Quick Add (paste cell names)"
+			aria-label="Quick Add"
 			onclick={() => showQuickAdd = true}
 		>
 			<i class="bi bi-pencil-square"></i>
@@ -262,6 +356,7 @@
 		<button
 			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
 			title="Import CSV"
+			aria-label="Import CSV"
 			onclick={triggerFileInput}
 		>
 			<i class="bi bi-upload"></i>
@@ -290,6 +385,22 @@
 			</div>
 		{/if}
 
+		<!-- Server save error -->
+		{#if saveError}
+			<div class="alert alert-warning py-1 px-2 mb-2 small d-flex justify-content-between align-items-center">
+				<span>
+					<i class="bi bi-cloud-slash me-1"></i>
+					{saveError}
+				</span>
+				<button 
+					type="button" 
+					class="btn-close btn-sm" 
+					aria-label="Dismiss"
+					onclick={() => saveError = ''}
+				></button>
+			</div>
+		{/if}
+
 		<!-- Empty state -->
 		{#if setsStore.sets.length === 0}
 			<div class="text-center p-3">
@@ -297,7 +408,15 @@
 				<p class="text-muted small mt-2 mb-0">
 					No custom layers loaded.
 				</p>
-				<div class="d-flex gap-2 justify-content-center mt-2">
+				<!-- <div class="d-flex gap-2 justify-content-center mt-2 flex-wrap">
+					{#if apiClient}
+						<button 
+							class="btn btn-sm btn-outline-success"
+							onclick={() => showServerBrowser = true}
+						>
+							<i class="bi bi-cloud-download me-1"></i> Load from Server
+						</button>
+					{/if}
 					<button 
 						class="btn btn-sm btn-outline-primary"
 						onclick={() => showQuickAdd = true}
@@ -310,7 +429,7 @@
 					>
 						<i class="bi bi-upload me-1"></i> Import CSV
 					</button>
-				</div>
+				</div> -->
 			</div>
 		{:else}
 			<!-- Global Controls -->
@@ -323,8 +442,8 @@
 					<input
 						type="range"
 						class="form-range"
-						min="10"
-						max="200"
+						min="5"
+						max="100"
 						step="5"
 						value={globalSectorSize}
 						oninput={handleGlobalSectorSizeChange}
@@ -390,13 +509,31 @@
 									<small class="text-muted">{getSetItemCounts(set)} · {set.groups.length} groups</small>
 								</div>
 							</div>
-							<button
-								class="btn btn-sm btn-outline-danger border-0 p-1 ms-2"
-								title="Remove"
-								onclick={() => removeSet(set.id)}
-							>
-								<i class="bi bi-trash"></i>
-							</button>
+							<div class="d-flex gap-1">
+								{#if apiClient}
+									<button
+										class="btn btn-sm btn-outline-primary border-0 p-1"
+										title="Share to Server"
+										aria-label="Share to Server"
+										onclick={() => saveSetToServer(set)}
+										disabled={savingSetId === set.id}
+									>
+										{#if savingSetId === set.id}
+											<span class="spinner-border spinner-border-sm" role="status"></span>
+										{:else}
+											<i class="bi bi-cloud-upload"></i>
+										{/if}
+									</button>
+								{/if}
+								<button
+									class="btn btn-sm btn-outline-danger border-0 p-1"
+									title="Remove"
+									aria-label="Remove set"
+									onclick={() => removeSet(set.id)}
+								>
+									<i class="bi bi-trash"></i>
+								</button>
+							</div>
 						</div>
 
 						<!-- Set Content (TreeView) -->
@@ -438,6 +575,50 @@
 	</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}
+						onmodechange={(m) => importMode = m}
+						onchange={(m) => columnMapping = m}
+					/>
+				</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);">
@@ -635,6 +816,16 @@
 	</div>
 {/if}
 
+<!-- Server Set Browser Modal -->
+{#if apiClient}
+	<ServerSetBrowser 
+		{apiClient}
+		{setsStore}
+		show={showServerBrowser}
+		onclose={() => showServerBrowser = false}
+	/>
+{/if}
+
 <style>
 	.custom-layers-manager {
 		font-size: 0.875rem;

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

@@ -1,9 +1,12 @@
 import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+import type { CustomSetsApiClient } from '../db/custom-sets-api';
 interface Props {
     /** The custom cell sets store */
     setsStore: CustomCellSetsStore;
     /** Control position on map */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Optional API client for server sharing */
+    apiClient?: CustomSetsApiClient;
 }
 declare const CustomCellSetManager: import("svelte").Component<Props, {}, "">;
 type CustomCellSetManager = ReturnType<typeof CustomCellSetManager>;