@smartnet360/svelte-components 0.0.101 → 0.0.103

package/dist/map-v3/features/coverage/layers/CoverageLayer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CoverageDataStore } from '../stores/coverage.data.svelte';
+import type { CoverageDisplayStore } from '../stores/coverage.display.svelte';
+interface Props {
+    dataStore: CoverageDataStore;
+    displayStore: CoverageDisplayStore;
+    autoFitBounds?: boolean;
+}
+declare const CoverageLayer: import("svelte").Component<Props, {}, "">;
+type CoverageLayer = ReturnType<typeof CoverageLayer>;
+export default CoverageLayer;

package/dist/map-v3/features/coverage/logic/coloring.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Color Scheme Utilities
+ *
+ * Wraps CoverageMap color scheme functions for coverage layer use.
+ */
+import type { SignalThresholds } from '../../../../core/CoverageMap';
+import type { CoverageColorScheme } from '../types';
+/**
+ * Get color for signal strength using specified color scheme
+ *
+ * @param signalDbm - Signal strength in dBm
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Optional signal thresholds
+ * @returns Hex color string
+ */
+export declare function getColorForSignal(signalDbm: number, colorScheme: CoverageColorScheme, thresholds?: SignalThresholds): string;
+/**
+ * Get legend items for a color scheme
+ *
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Signal thresholds
+ * @returns Array of legend items with color and label
+ */
+export declare function getLegendItems(colorScheme: CoverageColorScheme, thresholds?: SignalThresholds): Array<{
+    color: string;
+    label: string;
+    range: string;
+}>;

package/dist/map-v3/features/coverage/logic/coloring.js

@@ -0,0 +1,77 @@
+/**
+ * Color Scheme Utilities
+ *
+ * Wraps CoverageMap color scheme functions for coverage layer use.
+ */
+import { getColorForSignal as getCoverageColor, HEATMAP_RED_BLUE, VIRIDIS, PLASMA, CATEGORICAL } from '../../../../core/CoverageMap';
+/**
+ * Default signal thresholds for coloring
+ */
+const DEFAULT_THRESHOLDS = {
+    excellent: -70,
+    good: -85,
+    fair: -95,
+    edge: -105
+};
+/**
+ * Map coverage color scheme names to CoverageMap ColorScheme objects
+ */
+const SCHEME_MAP = {
+    'heatmap': HEATMAP_RED_BLUE,
+    'quality': CATEGORICAL,
+    'viridis': VIRIDIS,
+    'plasma': PLASMA,
+    'categorical': CATEGORICAL
+};
+/**
+ * Get color for signal strength using specified color scheme
+ *
+ * @param signalDbm - Signal strength in dBm
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Optional signal thresholds
+ * @returns Hex color string
+ */
+export function getColorForSignal(signalDbm, colorScheme, thresholds = DEFAULT_THRESHOLDS) {
+    const scheme = SCHEME_MAP[colorScheme];
+    if (!scheme) {
+        console.warn(`[ColorSchemes] Unknown scheme: ${colorScheme}, using heatmap`);
+        return getCoverageColor(signalDbm, thresholds, HEATMAP_RED_BLUE);
+    }
+    return getCoverageColor(signalDbm, thresholds, scheme);
+}
+/**
+ * Get legend items for a color scheme
+ *
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Signal thresholds
+ * @returns Array of legend items with color and label
+ */
+export function getLegendItems(colorScheme, thresholds = DEFAULT_THRESHOLDS) {
+    return [
+        {
+            color: getColorForSignal(thresholds.excellent, colorScheme, thresholds),
+            label: 'Excellent',
+            range: `> ${thresholds.excellent} dBm`
+        },
+        {
+            color: getColorForSignal((thresholds.excellent + thresholds.good) / 2, colorScheme, thresholds),
+            label: 'Good',
+            range: `${thresholds.good} to ${thresholds.excellent} dBm`
+        },
+        {
+            color: getColorForSignal((thresholds.good + thresholds.fair) / 2, colorScheme, thresholds),
+            label: 'Fair',
+            range: `${thresholds.fair} to ${thresholds.good} dBm`
+        },
+        {
+            color: getColorForSignal((thresholds.fair + thresholds.edge) / 2, colorScheme, thresholds),
+            label: 'Poor',
+            range: `${thresholds.edge} to ${thresholds.fair} dBm`
+        },
+        {
+            color: getColorForSignal(thresholds.edge - 5, colorScheme, thresholds),
+            label: 'Edge',
+            range: `< ${thresholds.edge} dBm`
+        }
+    ];
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Grid Geometry Utilities
+ *
+ * Convert coverage grid cells to GeoJSON for Mapbox rendering.
+ * Applies color schemes and filtering.
+ */
+import type { CoverageGrid, SignalThresholds } from '../types';
+import type { CoverageColorScheme } from '../types';
+import type { FeatureCollection, Polygon } from 'geojson';
+/**
+ * Convert coverage grid to GeoJSON FeatureCollection
+ *
+ * @param grid - Coverage grid from calculation
+ * @param colorScheme - Color scheme to apply
+ * @param minSignal - Minimum signal threshold (dBm)
+ * @param maxSignal - Maximum signal threshold (dBm)
+ * @returns GeoJSON FeatureCollection ready for Mapbox
+ */
+export declare function gridToGeoJSON(grid: CoverageGrid, colorScheme: CoverageColorScheme, minSignal?: number, maxSignal?: number, thresholds?: SignalThresholds): FeatureCollection<Polygon>;
+/**
+ * Calculate grid bounds for initial map view
+ *
+ * @param grid - Coverage grid
+ * @returns Mapbox-compatible bounds [[west, south], [east, north]]
+ */
+export declare function getGridBounds(grid: CoverageGrid): [[number, number], [number, number]];
+/**
+ * Get signal strength range from grid
+ *
+ * @param grid - Coverage grid
+ * @returns [min, max] signal strength in dBm
+ */
+export declare function getSignalRange(grid: CoverageGrid): [number, number];

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

@@ -0,0 +1,112 @@
+/**
+ * Grid Geometry Utilities
+ *
+ * Convert coverage grid cells to GeoJSON for Mapbox rendering.
+ * Applies color schemes and filtering.
+ */
+import { getColorForSignal } from './coloring';
+/**
+ * Convert coverage grid to GeoJSON FeatureCollection
+ *
+ * @param grid - Coverage grid from calculation
+ * @param colorScheme - Color scheme to apply
+ * @param minSignal - Minimum signal threshold (dBm)
+ * @param maxSignal - Maximum signal threshold (dBm)
+ * @returns GeoJSON FeatureCollection ready for Mapbox
+ */
+export function gridToGeoJSON(grid, colorScheme, minSignal = -115, maxSignal = -40, thresholds) {
+    const features = [];
+    const cellSizeMeters = grid.cellSizeMeters;
+    // Flatten 2D grid to 1D for processing
+    for (const row of grid.cells) {
+        for (const cell of row) {
+            // Filter by signal strength
+            if (cell.signalStrength < minSignal || cell.signalStrength > maxSignal) {
+                continue;
+            }
+            // Skip no-signal cells
+            if (cell.quality === 'no-signal') {
+                continue;
+            }
+            // Get color for this cell
+            const color = getColorForSignal(cell.signalStrength, colorScheme, thresholds);
+            // Create polygon feature
+            const feature = createCellPolygon(cell, cellSizeMeters, color);
+            features.push(feature);
+        }
+    }
+    return {
+        type: 'FeatureCollection',
+        features
+    };
+}
+/**
+ * Create a GeoJSON polygon for a single grid cell
+ *
+ * @param cell - Grid cell data
+ * @param cellSizeMeters - Size of cell in meters
+ * @param color - Hex color for this cell
+ * @returns GeoJSON Feature
+ */
+function createCellPolygon(cell, cellSizeMeters, color) {
+    // Calculate cell corners (approximate, good enough for visualization)
+    const latOffset = (cellSizeMeters / 111320); // ~111,320 meters per degree lat
+    const lngOffset = (cellSizeMeters / (111320 * Math.cos(cell.position.lat * Math.PI / 180)));
+    const lat = cell.position.lat;
+    const lng = cell.position.lng;
+    // Cell corners (clockwise from bottom-left)
+    const coordinates = [[
+            [lng - lngOffset / 2, lat - latOffset / 2], // SW
+            [lng + lngOffset / 2, lat - latOffset / 2], // SE
+            [lng + lngOffset / 2, lat + latOffset / 2], // NE
+            [lng - lngOffset / 2, lat + latOffset / 2], // NW
+            [lng - lngOffset / 2, lat - latOffset / 2] // Close polygon
+        ]];
+    return {
+        type: 'Feature',
+        geometry: {
+            type: 'Polygon',
+            coordinates
+        },
+        properties: {
+            signal: cell.signalStrength,
+            quality: cell.quality,
+            color: color,
+            lat: cell.position.lat,
+            lon: cell.position.lng,
+            dominantSector: cell.dominantSector
+        }
+    };
+}
+/**
+ * Calculate grid bounds for initial map view
+ *
+ * @param grid - Coverage grid
+ * @returns Mapbox-compatible bounds [[west, south], [east, north]]
+ */
+export function getGridBounds(grid) {
+    const bounds = grid.bounds;
+    return [
+        [bounds.west, bounds.south],
+        [bounds.east, bounds.north]
+    ];
+}
+/**
+ * Get signal strength range from grid
+ *
+ * @param grid - Coverage grid
+ * @returns [min, max] signal strength in dBm
+ */
+export function getSignalRange(grid) {
+    let min = 0;
+    let max = -120;
+    for (const row of grid.cells) {
+        for (const cell of row) {
+            if (cell.quality !== 'no-signal') {
+                min = Math.min(min, cell.signalStrength);
+                max = Math.max(max, cell.signalStrength);
+            }
+        }
+    }
+    return [min, max];
+}

package/dist/map-v3/features/coverage/stores/coverage.data.svelte.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Coverage Data Store
+ *
+ * Self-contained store for coverage calculation data and state.
+ * Zero dependencies on cells/sites features - fully encapsulated.
+ */
+import type { CoverageResult, CoverageConfig } from '../types';
+export declare class CoverageDataStore {
+    result: CoverageResult | null;
+    calculating: boolean;
+    progress: number;
+    progressStage: string;
+    error: string | null;
+    private calculator;
+    constructor();
+    /**
+     * Calculate coverage prediction
+     * @param config - Complete RF configuration
+     */
+    calculateCoverage(config: CoverageConfig): Promise<void>;
+    /**
+     * Clear current coverage data
+     */
+    clearCoverage(): void;
+    /**
+     * Get grid cells for rendering
+     * Returns null if no result available
+     */
+    get gridCells(): import("../../../../core/CoverageMap").GridCell[][] | null;
+    /**
+     * Get coverage statistics
+     */
+    get stats(): import("../../../../core/CoverageMap").CoverageStats | null;
+    /**
+     * Get coverage configuration used
+     */
+    get config(): CoverageConfig | null;
+    /**
+     * Check if results are available
+     */
+    get hasResults(): boolean;
+}
+/**
+ * Factory function to create coverage data store
+ */
+export declare function createCoverageDataStore(): CoverageDataStore;

package/dist/map-v3/features/coverage/stores/coverage.data.svelte.js

@@ -0,0 +1,95 @@
+/**
+ * Coverage Data Store
+ *
+ * Self-contained store for coverage calculation data and state.
+ * Zero dependencies on cells/sites features - fully encapsulated.
+ */
+import { CoverageCalculator } from '../../../../core/CoverageMap';
+export class CoverageDataStore {
+    // State
+    result = $state(null);
+    calculating = $state(false);
+    progress = $state(0);
+    progressStage = $state('');
+    error = $state(null);
+    // Calculator instance (reusable)
+    calculator;
+    constructor() {
+        this.calculator = new CoverageCalculator();
+    }
+    /**
+     * Calculate coverage prediction
+     * @param config - Complete RF configuration
+     */
+    async calculateCoverage(config) {
+        this.calculating = true;
+        this.progress = 0;
+        this.progressStage = 'Initializing';
+        this.error = null;
+        this.result = null;
+        try {
+            // Progress callback to update UI
+            const progressCallback = (update) => {
+                const cellsProcessed = update.cellsProcessed ?? 0;
+                const totalCells = update.totalCells ?? 1;
+                this.progress = Math.round((cellsProcessed / totalCells) * 100);
+                this.progressStage = update.stage;
+                console.log(`[CoverageDataStore] ${update.stage}: ${this.progress}%`);
+            };
+            // Calculate
+            console.log('[CoverageDataStore] Starting calculation with config:', config);
+            this.result = await this.calculator.calculate(config, progressCallback);
+            console.log('[CoverageDataStore] Calculation complete:', this.result);
+            this.progress = 100;
+            this.progressStage = 'Complete';
+        }
+        catch (err) {
+            console.error('[CoverageDataStore] Calculation failed:', err);
+            this.error = err instanceof Error ? err.message : 'Unknown calculation error';
+            this.result = null;
+        }
+        finally {
+            this.calculating = false;
+        }
+    }
+    /**
+     * Clear current coverage data
+     */
+    clearCoverage() {
+        this.result = null;
+        this.progress = 0;
+        this.progressStage = '';
+        this.error = null;
+    }
+    /**
+     * Get grid cells for rendering
+     * Returns null if no result available
+     */
+    get gridCells() {
+        return this.result?.grid.cells ?? null;
+    }
+    /**
+     * Get coverage statistics
+     */
+    get stats() {
+        return this.result?.grid.stats ?? null;
+    }
+    /**
+     * Get coverage configuration used
+     */
+    get config() {
+        return this.result?.config ?? null;
+    }
+    /**
+     * Check if results are available
+     */
+    get hasResults() {
+        return this.result !== null && this.result.grid.cells.length > 0;
+    }
+}
+/**
+ * Factory function to create coverage data store
+ */
+export function createCoverageDataStore() {
+    return new CoverageDataStore();
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Coverage Display Store
+ *
+ * Controls visualization settings for coverage layer.
+ * Follows Map V3 pattern with localStorage persistence.
+ */
+import type { CoverageColorScheme } from '../types';
+export declare class CoverageDisplayStore {
+    key: string;
+    visible: boolean;
+    opacity: number;
+    colorScheme: CoverageColorScheme;
+    showLegend: boolean;
+    showLabels: boolean;
+    minSignalThreshold: number;
+    maxSignalThreshold: number;
+    zIndex: number;
+    constructor();
+    private loadFromStorage;
+    private saveToStorage;
+    /**
+     * Reset to defaults
+     */
+    reset(): void;
+    /**
+     * Toggle visibility
+     */
+    toggle(): void;
+}
+/**
+ * Factory function to create coverage display store
+ */
+export declare function createCoverageDisplayStore(): CoverageDisplayStore;

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

@@ -0,0 +1,90 @@
+/**
+ * Coverage Display Store
+ *
+ * Controls visualization settings for coverage layer.
+ * Follows Map V3 pattern with localStorage persistence.
+ */
+import { browser } from '$app/environment';
+export class CoverageDisplayStore {
+    key = 'map-v3-coverage-display';
+    // Visibility
+    visible = $state(true);
+    // Visual styling
+    opacity = $state(0.6);
+    colorScheme = $state('heatmap');
+    showLegend = $state(true);
+    showLabels = $state(false);
+    // Signal filtering (dBm)
+    minSignalThreshold = $state(-115); // Don't render below this
+    maxSignalThreshold = $state(-40); // Cap display at this
+    // Layer order
+    zIndex = $state(100); // Below cells/sites typically
+    constructor() {
+        if (browser) {
+            this.loadFromStorage();
+            // Auto-save on changes
+            $effect(() => {
+                this.saveToStorage();
+            });
+        }
+    }
+    loadFromStorage() {
+        const saved = localStorage.getItem(this.key);
+        if (saved) {
+            try {
+                const parsed = JSON.parse(saved);
+                this.visible = parsed.visible ?? true;
+                this.opacity = parsed.opacity ?? 0.6;
+                this.colorScheme = parsed.colorScheme ?? 'heatmap';
+                this.showLegend = parsed.showLegend ?? true;
+                this.showLabels = parsed.showLabels ?? false;
+                this.minSignalThreshold = parsed.minSignalThreshold ?? -115;
+                this.maxSignalThreshold = parsed.maxSignalThreshold ?? -40;
+                this.zIndex = parsed.zIndex ?? 100;
+            }
+            catch (e) {
+                console.error('[CoverageDisplayStore] Failed to load settings', e);
+            }
+        }
+    }
+    saveToStorage() {
+        if (!browser)
+            return;
+        const data = {
+            visible: this.visible,
+            opacity: this.opacity,
+            colorScheme: this.colorScheme,
+            showLegend: this.showLegend,
+            showLabels: this.showLabels,
+            minSignalThreshold: this.minSignalThreshold,
+            maxSignalThreshold: this.maxSignalThreshold,
+            zIndex: this.zIndex
+        };
+        localStorage.setItem(this.key, JSON.stringify(data));
+    }
+    /**
+     * Reset to defaults
+     */
+    reset() {
+        this.visible = true;
+        this.opacity = 0.6;
+        this.colorScheme = 'heatmap';
+        this.showLegend = true;
+        this.showLabels = false;
+        this.minSignalThreshold = -115;
+        this.maxSignalThreshold = -40;
+        this.zIndex = 100;
+    }
+    /**
+     * Toggle visibility
+     */
+    toggle() {
+        this.visible = !this.visible;
+    }
+}
+/**
+ * Factory function to create coverage display store
+ */
+export function createCoverageDisplayStore() {
+    return new CoverageDisplayStore();
+}

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

@@ -0,0 +1,52 @@
+/**
+ * Coverage Feature - Type Definitions
+ *
+ * Fully encapsulated coverage prediction and visualization types.
+ * Zero dependencies on cells/sites features - works standalone.
+ */
+export type { CoverageResult, GridCell, CoverageGrid, CoverageStats, SignalQuality, SiteConfiguration, SectorConfig, PathLossModel, ProgressCallback, CoverageConfig, RFParameters, GridSettings, SignalThresholds, AntennaPattern } from '../../../core/CoverageMap';
+/**
+ * Color scheme options for coverage visualization
+ */
+export type CoverageColorScheme = 'heatmap' | 'quality' | 'viridis' | 'plasma' | 'categorical';
+/**
+ * Signal strength range for filtering/coloring
+ */
+export interface SignalRange {
+    min: number;
+    max: number;
+    label: string;
+    color: string;
+}
+/**
+ * Coverage layer display configuration
+ */
+export interface CoverageDisplayConfig {
+    visible: boolean;
+    opacity: number;
+    colorScheme: CoverageColorScheme;
+    showLegend: boolean;
+    showLabels: boolean;
+    minSignalThreshold: number;
+    maxSignalThreshold: number;
+}
+/**
+ * GeoJSON feature properties for grid cells
+ */
+export interface CoverageFeatureProperties {
+    signal: number;
+    quality: string;
+    color: string;
+    lat: number;
+    lon: number;
+    distance: number;
+}
+/**
+ * Optional helper to convert Cell to RFConfiguration
+ * Only needed if integrating with cells feature
+ */
+export interface CellToRFConfigOptions {
+    defaultTxPower?: number;
+    defaultFrequency?: number;
+    defaultHeight?: number;
+}

package/dist/map-v3/features/coverage/types.js

@@ -0,0 +1,7 @@
+/**
+ * Coverage Feature - Type Definitions
+ *
+ * Fully encapsulated coverage prediction and visualization types.
+ * Zero dependencies on cells/sites features - works standalone.
+ */
+export {};

package/dist/map-v3/features/repeaters/components/RepeaterFilterControl.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { onDestroy, untrack } from 'svelte';
 	import { MapControl } from '../../../shared';
-	import { createTreeStore } from '../../../../core/TreeView/tree.store';
-	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import { createTreeStore, TreeView } from '../../../../core/TreeView';
 	import type { RepeaterDataStore } from '../stores/repeater.data.svelte';
 	import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
 	import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
@@ -38,25 +37,20 @@
 	});
 
 	$effect(() => {
-		const unsubscribe = treeStore.subscribe((val) => {
-			let changes = 0;
-			val.state.nodes.forEach((nodeState) => {
-				if (nodeState.node.children && nodeState.node.children.length > 0) return;
+		const val = treeStore;
+		let changes = 0;
+		val.state.nodes.forEach((nodeState) => {
+			if (nodeState.node.children && nodeState.node.children.length > 0) return;
 
-				const groupId = nodeState.node.id;
-				const isVisible = val.state.checkedPaths.has(nodeState.path);
-				
-				const currentStyle = registry.getStyle(groupId, '#000');
-				if (currentStyle.visible !== isVisible) {
-					registry.toggleVisibility(groupId);
-					changes++;
-				}
-			});
+			const groupId = nodeState.node.id;
+			const isVisible = val.state.checkedPaths.has(nodeState.path);
+			
+			const currentStyle = registry.getStyle(groupId, '#000');
+			if (currentStyle.visible !== isVisible) {
+				registry.toggleVisibility(groupId);
+				changes++;
+			}
 		});
-
-		return () => {
-			unsubscribe();
-		};
 	});
 
 	function handleColorChange(groupId: string, event: Event) {
@@ -124,7 +118,7 @@
 
 		<div class="card-body p-0 overflow-auto" style="max-height: 400px;">
 			<div class="p-2">
-				<TreeView showControls={false} store={$treeStore}>
+				<TreeView showControls={false} store={treeStore}>
 					{#snippet children({ node })}
 						<div class="d-flex align-items-center justify-content-between w-100">