@smartnet360/svelte-components 0.0.51 → 0.0.54

package/dist/map/demo/demo-data.js

@@ -0,0 +1,220 @@
+/**
+ * Demo cellular data for testing and examples
+ */
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export const demoSites = [
+    {
+        id: 'site-001',
+        name: 'Downtown Tower',
+        longitude: -122.4194,
+        latitude: 37.7749,
+        fbands: ['2100', '1800'],
+        technology: '5G',
+        properties: {
+            height: 45,
+            type: 'macro'
+        },
+        cellNames: ['cell-001-1', 'cell-001-2', 'cell-001-3'],
+        provider: 'Verizon',
+        featureGroup: 'Urban Macro'
+    },
+    {
+        id: 'site-002',
+        name: 'Financial District',
+        longitude: -122.4008,
+        latitude: 37.7946,
+        fbands: ['1800', '850'],
+        technology: 'LTE',
+        properties: {
+            height: 60,
+            type: 'macro'
+        },
+        cellNames: ['cell-002-1', 'cell-002-2', 'cell-002-3'],
+        provider: 'AT&T',
+        featureGroup: 'Urban Macro'
+    },
+    {
+        id: 'site-003',
+        name: 'Mission Bay',
+        longitude: -122.3912,
+        latitude: 37.7699,
+        fbands: ['2600'],
+        technology: '5G',
+        properties: {
+            height: 30,
+            type: 'micro'
+        },
+        cellNames: ['cell-003-1', 'cell-003-2'],
+        provider: 'T-Mobile',
+        featureGroup: 'Small Cell'
+    },
+    {
+        id: 'site-004',
+        name: 'Golden Gate Park',
+        longitude: -122.4862,
+        latitude: 37.7694,
+        fbands: ['850', '700'],
+        technology: 'LTE',
+        properties: {
+            height: 40,
+            type: 'macro'
+        },
+        cellNames: ['cell-004-1', 'cell-004-2', 'cell-004-3'],
+        provider: 'Verizon',
+        featureGroup: 'Rural Macro'
+    }
+];
+/**
+ * Sample cellular cells/sectors
+ */
+export const demoCells = [
+    // Site 001 - Downtown Tower (3 sectors)
+    {
+        id: 'cell-001-1',
+        siteId: 'site-001',
+        sector: 1,
+        azimuth: 0,
+        beamwidth: 65,
+        radius: 800,
+        properties: {
+            band: '2100MHz',
+            technology: '5G',
+            power: 40
+        }
+    },
+    {
+        id: 'cell-001-2',
+        siteId: 'site-001',
+        sector: 2,
+        azimuth: 120,
+        beamwidth: 65,
+        radius: 800,
+        properties: {
+            band: '2100MHz',
+            technology: '5G',
+            power: 40
+        }
+    },
+    {
+        id: 'cell-001-3',
+        siteId: 'site-001',
+        sector: 3,
+        azimuth: 240,
+        beamwidth: 65,
+        radius: 800,
+        properties: {
+            band: '2100MHz',
+            technology: '5G',
+            power: 40
+        }
+    },
+    // Site 002 - Financial District (3 sectors)
+    {
+        id: 'cell-002-1',
+        siteId: 'site-002',
+        sector: 1,
+        azimuth: 30,
+        beamwidth: 65,
+        radius: 700,
+        properties: {
+            band: '1800MHz',
+            technology: 'LTE',
+            power: 38
+        }
+    },
+    {
+        id: 'cell-002-2',
+        siteId: 'site-002',
+        sector: 2,
+        azimuth: 150,
+        beamwidth: 65,
+        radius: 700,
+        properties: {
+            band: '1800MHz',
+            technology: 'LTE',
+            power: 38
+        }
+    },
+    {
+        id: 'cell-002-3',
+        siteId: 'site-002',
+        sector: 3,
+        azimuth: 270,
+        beamwidth: 65,
+        radius: 700,
+        properties: {
+            band: '1800MHz',
+            technology: 'LTE',
+            power: 38
+        }
+    },
+    // Site 003 - Mission Bay (2 sectors, smaller coverage)
+    {
+        id: 'cell-003-1',
+        siteId: 'site-003',
+        sector: 1,
+        azimuth: 90,
+        beamwidth: 90,
+        radius: 400,
+        properties: {
+            band: '2600MHz',
+            technology: '5G',
+            power: 30
+        }
+    },
+    {
+        id: 'cell-003-2',
+        siteId: 'site-003',
+        sector: 2,
+        azimuth: 270,
+        beamwidth: 90,
+        radius: 400,
+        properties: {
+            band: '2600MHz',
+            technology: '5G',
+            power: 30
+        }
+    },
+    // Site 004 - Golden Gate Park (3 sectors)
+    {
+        id: 'cell-004-1',
+        siteId: 'site-004',
+        sector: 1,
+        azimuth: 0,
+        beamwidth: 120,
+        radius: 900,
+        properties: {
+            band: '850MHz',
+            technology: 'LTE',
+            power: 43
+        }
+    },
+    {
+        id: 'cell-004-2',
+        siteId: 'site-004',
+        sector: 2,
+        azimuth: 120,
+        beamwidth: 120,
+        radius: 900,
+        properties: {
+            band: '850MHz',
+            technology: 'LTE',
+            power: 43
+        }
+    },
+    {
+        id: 'cell-004-3',
+        siteId: 'site-004',
+        sector: 3,
+        azimuth: 240,
+        beamwidth: 120,
+        radius: 900,
+        properties: {
+            band: '850MHz',
+            technology: 'LTE',
+            power: 43
+        }
+    }
+];

package/dist/map/hooks/useCellData.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook to safely access cell data stores from context
+ */
+import type { CellDataContext } from '../types';
+/**
+ * Retrieves the cell data context stores
+ * @throws Error if called outside of CellDataProvider
+ */
+export declare function useCellData(): CellDataContext;
+/**
+ * Tries to retrieve the cell data context stores
+ * Returns null if not available (safe version)
+ */
+export declare function tryUseCellData(): CellDataContext | null;

package/dist/map/hooks/useCellData.js

@@ -0,0 +1,29 @@
+/**
+ * Hook to safely access cell data stores from context
+ */
+import { getContext } from 'svelte';
+import { CELL_DATA_CONTEXT_KEY } from '../types';
+/**
+ * Retrieves the cell data context stores
+ * @throws Error if called outside of CellDataProvider
+ */
+export function useCellData() {
+    const cellDataContext = getContext(CELL_DATA_CONTEXT_KEY);
+    if (!cellDataContext) {
+        throw new Error('useCellData() must be called within a <CellDataProvider> component. ' +
+            'Make sure your component is wrapped in <CellDataProvider>.');
+    }
+    return cellDataContext;
+}
+/**
+ * Tries to retrieve the cell data context stores
+ * Returns null if not available (safe version)
+ */
+export function tryUseCellData() {
+    try {
+        return getContext(CELL_DATA_CONTEXT_KEY);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/map/hooks/useMapbox.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook to safely access the Mapbox instance from context
+ */
+import type { MapStore } from '../types';
+/**
+ * Retrieves the Mapbox instance store from context
+ * @throws Error if called outside of MapboxProvider
+ */
+export declare function useMapbox(): MapStore;
+/**
+ * Tries to retrieve the Mapbox instance store from context
+ * Returns null if not available (safe version)
+ */
+export declare function tryUseMapbox(): MapStore | null;

package/dist/map/hooks/useMapbox.js

@@ -0,0 +1,29 @@
+/**
+ * Hook to safely access the Mapbox instance from context
+ */
+import { getContext } from 'svelte';
+import { MAP_CONTEXT_KEY } from '../types';
+/**
+ * Retrieves the Mapbox instance store from context
+ * @throws Error if called outside of MapboxProvider
+ */
+export function useMapbox() {
+    const mapStore = getContext(MAP_CONTEXT_KEY);
+    if (!mapStore) {
+        throw new Error('useMapbox() must be called within a <MapboxProvider> component. ' +
+            'Make sure your component is wrapped in <MapboxProvider>.');
+    }
+    return mapStore;
+}
+/**
+ * Tries to retrieve the Mapbox instance store from context
+ * Returns null if not available (safe version)
+ */
+export function tryUseMapbox() {
+    try {
+        return getContext(MAP_CONTEXT_KEY);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/map/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Map module - Mapbox-based cellular visualization library
+ *
+ * @module map
+ */
+export type { Site, Cell, InteractionState, MapStore, CellDataContext, SiteFeature, CellFeature, FeatureCollection } from './types';
+export { MAP_CONTEXT_KEY, CELL_DATA_CONTEXT_KEY } from './types';
+export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+export { default as CellDataProvider } from './providers/CellDataProvider.svelte';
+export * from './providers/providerHelpers';
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CoverageLayer } from './layers/CoverageLayer.svelte';
+export { LayerBase } from './layers/LayerBase';
+export { default as MapControl } from './controls/MapControl.svelte';
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+export { useMapbox, tryUseMapbox } from './hooks/useMapbox';
+export { useCellData, tryUseCellData } from './hooks/useCellData';
+export { createMapStore } from './stores/mapStore';
+export { createCellDataStores, createCellsBySiteStore, createSelectedSiteStore, createSelectedCellStore } from './stores/cellDataStore';
+export * from './stores/interactions';
+export { sitesToGeoJSON, cellsToGeoJSON, siteToFeature, cellToFeature } from './utils/geojson';
+export { createSectorPolygon, createCirclePolygon, destinationPoint, normalizeAzimuth } from './utils/math';
+export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';
+export { buildSiteTree, getFilteredSites, saveTreeState, loadTreeState, clearTreeState } from './utils/siteTreeUtils';
+export { demoSites, demoCells } from './demo/demo-data';
+export { default as DemoMap } from './demo/DemoMap.svelte';

package/dist/map/index.js

@@ -0,0 +1,47 @@
+/**
+ * Map module - Mapbox-based cellular visualization library
+ *
+ * @module map
+ */
+export { MAP_CONTEXT_KEY, CELL_DATA_CONTEXT_KEY } from './types';
+// ============================================================================
+// Providers
+// ============================================================================
+export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+export { default as CellDataProvider } from './providers/CellDataProvider.svelte';
+export * from './providers/providerHelpers';
+// ============================================================================
+// Layers
+// ============================================================================
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CoverageLayer } from './layers/CoverageLayer.svelte';
+export { LayerBase } from './layers/LayerBase';
+// ============================================================================
+// Controls
+// ============================================================================
+export { default as MapControl } from './controls/MapControl.svelte';
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+// ============================================================================
+// Hooks
+// ============================================================================
+export { useMapbox, tryUseMapbox } from './hooks/useMapbox';
+export { useCellData, tryUseCellData } from './hooks/useCellData';
+// ============================================================================
+// Stores
+// ============================================================================
+export { createMapStore } from './stores/mapStore';
+export { createCellDataStores, createCellsBySiteStore, createSelectedSiteStore, createSelectedCellStore } from './stores/cellDataStore';
+export * from './stores/interactions';
+// ============================================================================
+// Utilities
+// ============================================================================
+export { sitesToGeoJSON, cellsToGeoJSON, siteToFeature, cellToFeature } from './utils/geojson';
+export { createSectorPolygon, createCirclePolygon, destinationPoint, normalizeAzimuth } from './utils/math';
+export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';
+export { buildSiteTree, getFilteredSites, saveTreeState, loadTreeState, clearTreeState } from './utils/siteTreeUtils';
+// ============================================================================
+// Demo
+// ============================================================================
+export { demoSites, demoCells } from './demo/demo-data';
+export { default as DemoMap } from './demo/DemoMap.svelte';

package/dist/map/layers/CellsLayer.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	/**
+	 * CellsLayer - Visualizes cellular sectors/cells as polygons on the map
+	 *
+	 * Consumes:
+	 * - Map instance from MapboxProvider
+	 * - Cells and sites data from CellDataProvider
+	 *
+	 * Features:
+	 * - Displays cell coverage as sector polygons
+	 * - Supports selection and hover states
+	 * - Click to select a cell
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import type mapboxgl from 'mapbox-gl';
+	import { useMapbox } from '../hooks/useMapbox';
+	import { useCellData } from '../hooks/useCellData';
+	import { cellsToGeoJSON } from '../utils/geojson';
+	import { LayerBase } from './LayerBase';
+	import type { Cell, Site } from '../types';
+
+	interface Props {
+		/** Namespace for layer IDs (default: 'cellular') */
+		namespace?: string;
+		/** Enable click to select cells (default: true) */
+		clickable?: boolean;
+		/** Default cell radius in meters (default: 500) */
+		defaultRadius?: number;
+		/** Cell fill color (default: '#3b82f6') */
+		fillColor?: string;
+		/** Cell fill opacity (default: 0.3) */
+		fillOpacity?: number;
+		/** Selected cell fill color (default: '#ef4444') */
+		selectedFillColor?: string;
+		/** Cell outline color (default: '#1e40af') */
+		outlineColor?: string;
+		/** Cell outline width (default: 2) */
+		outlineWidth?: number;
+	}
+
+	let {
+		namespace = 'cellular',
+		clickable = true,
+		defaultRadius = 500,
+		fillColor = '#3b82f6',
+		fillOpacity = 0.3,
+		selectedFillColor = '#ef4444',
+		outlineColor = '#1e40af',
+		outlineWidth = 2
+	}: Props = $props();
+
+	const mapStore = useMapbox();
+	const cellDataContext = useCellData();
+
+	let map: mapboxgl.Map | null = null;
+	let layerManager: LayerBase | null = null;
+	let unsubscribers: (() => void)[] = [];
+
+	onMount(() => {
+		// Subscribe to map store
+		const mapUnsub = mapStore.subscribe((m) => {
+			if (!m) return;
+			map = m;
+			initializeLayer();
+		});
+		unsubscribers.push(mapUnsub);
+
+		// Subscribe to cells data
+		const cellsUnsub = cellDataContext.cells.subscribe(() => {
+			if (map && layerManager) {
+				updateLayerData();
+			}
+		});
+		unsubscribers.push(cellsUnsub);
+
+		// Subscribe to sites data (cells need site locations)
+		const sitesUnsub = cellDataContext.sites.subscribe(() => {
+			if (map && layerManager) {
+				updateLayerData();
+			}
+		});
+		unsubscribers.push(sitesUnsub);
+
+		// Subscribe to selection state
+		const selectionUnsub = cellDataContext.selectedCellId.subscribe(() => {
+			if (map) {
+				updateLayerStyle();
+			}
+		});
+		unsubscribers.push(selectionUnsub);
+	});
+
+	onDestroy(() => {
+		cleanup();
+		unsubscribers.forEach((unsub) => unsub());
+	});
+
+	function initializeLayer(): void {
+		if (!map) return;
+
+		layerManager = new LayerBase(map, {
+			namespace,
+			layerName: 'cells',
+			sourceName: 'cells'
+		});
+
+		// Add empty GeoJSON source
+		layerManager['addGeoJSONSource']({
+			type: 'FeatureCollection',
+			features: []
+		});
+
+		// Add fill layer
+		layerManager['addLayer']({
+			id: layerManager.getLayerId(),
+			type: 'fill',
+			source: layerManager.getSourceId(),
+			paint: {
+				'fill-color': [
+					'case',
+					['boolean', ['feature-state', 'selected'], false],
+					selectedFillColor,
+					fillColor
+				],
+				'fill-opacity': fillOpacity
+			}
+		});
+
+		// Add outline layer
+		layerManager['addLayer']({
+			id: `${layerManager.getLayerId()}-outline`,
+			type: 'line',
+			source: layerManager.getSourceId(),
+			paint: {
+				'line-color': outlineColor,
+				'line-width': outlineWidth
+			}
+		});
+
+		// Add click handler
+		if (clickable) {
+			map.on('click', layerManager.getLayerId(), handleClick);
+			map.on('mouseenter', layerManager.getLayerId(), handleMouseEnter);
+			map.on('mouseleave', layerManager.getLayerId(), handleMouseLeave);
+		}
+
+		// Initial data load
+		updateLayerData();
+	}
+
+	function updateLayerData(): void {
+		if (!layerManager) return;
+
+		let currentCells: Cell[] = [];
+		let currentSites: Site[] = [];
+
+		cellDataContext.cells.subscribe((c) => {
+			currentCells = c;
+		})();
+		cellDataContext.sites.subscribe((s) => {
+			currentSites = s;
+		})();
+
+		const geojson = cellsToGeoJSON(currentCells, currentSites, defaultRadius);
+		layerManager['updateSource'](geojson);
+		updateLayerStyle();
+	}
+
+	function updateLayerStyle(): void {
+		if (!map || !layerManager) return;
+
+		let currentSelectedId: string | null = null;
+		cellDataContext.selectedCellId.subscribe((id) => {
+			currentSelectedId = id;
+		})();
+
+		// Update feature states
+		let currentCells: Cell[] = [];
+		cellDataContext.cells.subscribe((c) => {
+			currentCells = c;
+		})();
+
+		currentCells.forEach((cell) => {
+			if (map) {
+				map.setFeatureState(
+					{
+						source: layerManager!.getSourceId(),
+						id: cell.id
+					},
+					{
+						selected: cell.id === currentSelectedId
+					}
+				);
+			}
+		});
+	}
+
+	function handleClick(e: mapboxgl.MapLayerMouseEvent): void {
+		if (!e.features || e.features.length === 0) return;
+		const feature = e.features[0];
+		const cellId = feature.properties?.id;
+		const siteId = feature.properties?.siteId;
+		if (cellId) {
+			cellDataContext.selectedCellId.set(cellId);
+			if (siteId) {
+				cellDataContext.selectedSiteId.set(siteId);
+			}
+		}
+	}
+
+	function handleMouseEnter(e: mapboxgl.MapLayerMouseEvent): void {
+		if (!map) return;
+		map.getCanvas().style.cursor = 'pointer';
+		if (!e.features || e.features.length === 0) return;
+		const feature = e.features[0];
+		const cellId = feature.properties?.id;
+		if (cellId) {
+			cellDataContext.hoveredCellId.set(cellId);
+		}
+	}
+
+	function handleMouseLeave(): void {
+		if (!map) return;
+		map.getCanvas().style.cursor = '';
+		cellDataContext.hoveredCellId.set(null);
+	}
+
+	function cleanup(): void {
+		if (map && layerManager) {
+			if (clickable) {
+				map.off('click', layerManager.getLayerId(), handleClick);
+				map.off('mouseenter', layerManager.getLayerId(), handleMouseEnter);
+				map.off('mouseleave', layerManager.getLayerId(), handleMouseLeave);
+			}
+			// Remove outline layer as well
+			if (map.getLayer(`${layerManager.getLayerId()}-outline`)) {
+				map.removeLayer(`${layerManager.getLayerId()}-outline`);
+			}
+			layerManager.cleanup();
+		}
+	}
+</script>

package/dist/map/layers/CellsLayer.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    /** Namespace for layer IDs (default: 'cellular') */
+    namespace?: string;
+    /** Enable click to select cells (default: true) */
+    clickable?: boolean;
+    /** Default cell radius in meters (default: 500) */
+    defaultRadius?: number;
+    /** Cell fill color (default: '#3b82f6') */
+    fillColor?: string;
+    /** Cell fill opacity (default: 0.3) */
+    fillOpacity?: number;
+    /** Selected cell fill color (default: '#ef4444') */
+    selectedFillColor?: string;
+    /** Cell outline color (default: '#1e40af') */
+    outlineColor?: string;
+    /** Cell outline width (default: 2) */
+    outlineWidth?: number;
+}
+declare const CellsLayer: import("svelte").Component<Props, {}, "">;
+type CellsLayer = ReturnType<typeof CellsLayer>;
+export default CellsLayer;

package/dist/map/layers/CoverageLayer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	/**
+	 * CoverageLayer - Optional aggregated coverage visualization
+	 *
+	 * This is a placeholder for future coverage/heatmap features
+	 * Can be extended to show:
+	 * - Signal strength heatmaps
+	 * - Coverage overlays
+	 * - Interference zones
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import { useMapbox } from '../hooks/useMapbox';
+	import { useCellData } from '../hooks/useCellData';
+
+	interface Props {
+		/** Namespace for layer IDs (default: 'cellular') */
+		namespace?: string;
+		/** Coverage visualization type */
+		type?: 'heatmap' | 'overlay' | 'none';
+	}
+
+	let { namespace = 'cellular', type = 'none' }: Props = $props();
+
+	const mapStore = useMapbox();
+	const cellDataContext = useCellData();
+
+	onMount(() => {
+		// Placeholder for future implementation
+		console.log('CoverageLayer mounted with type:', type);
+	});
+
+	onDestroy(() => {
+		// Cleanup logic here
+	});
+</script>
+
+<!-- Placeholder component - no visual output yet -->

package/dist/map/layers/CoverageLayer.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Namespace for layer IDs (default: 'cellular') */
+    namespace?: string;
+    /** Coverage visualization type */
+    type?: 'heatmap' | 'overlay' | 'none';
+}
+declare const CoverageLayer: import("svelte").Component<Props, {}, "">;
+type CoverageLayer = ReturnType<typeof CoverageLayer>;
+export default CoverageLayer;