@smartnet360/svelte-components 0.0.54 → 0.0.56

package/dist/map/layers/SitesLayer.svelte

@@ -1,282 +0,0 @@
-<script lang="ts">
-	/**
-	 * SitesLayer - Visualizes cellular sites as points on the map
-	 *
-	 * Consumes:
-	 * - Map instance from MapboxProvider
-	 * - Sites data from CellDataProvider
-	 *
-	 * Features:
-	 * - Displays sites as circles
-	 * - Supports selection and hover states
-	 * - Click to select a site
-	 */
-	import { onMount, onDestroy } from 'svelte';
-	import mapboxgl from 'mapbox-gl';
-	import { useMapbox } from '../hooks/useMapbox';
-	import { useCellData } from '../hooks/useCellData';
-	import { sitesToGeoJSON } from '../utils/geojson';
-	import { LayerBase } from './LayerBase';
-	import type { Site } from '../types';
-
-	interface Props {
-		/** Namespace for layer IDs (default: 'cellular') */
-		namespace?: string;
-		/** Enable click to select sites (default: true) */
-		clickable?: boolean;
-		/** Show popup on click (default: true) */
-		showPopup?: boolean;
-		/** Site circle radius (default: 8) */
-		circleRadius?: number;
-		/** Site circle color (default: '#3b82f6') */
-		circleColor?: string;
-		/** Selected site color (default: '#ef4444') */
-		selectedColor?: string;
-		/** Hovered site color (default: '#8b5cf6') */
-		hoverColor?: string;
-	}
-
-	let {
-		namespace = 'cellular',
-		clickable = true,
-		showPopup = true,
-		circleRadius = 8,
-		circleColor = '#3b82f6',
-		selectedColor = '#ef4444',
-		hoverColor = '#8b5cf6'
-	}: Props = $props();
-
-	const mapStore = useMapbox();
-	const cellDataContext = useCellData();
-
-	let map: mapboxgl.Map | null = null;
-	let layerManager: LayerBase | null = null;
-	let popup: mapboxgl.Popup | 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 sites data
-		const sitesUnsub = cellDataContext.sites.subscribe((sites) => {
-			if (map && layerManager) {
-				updateLayerData(sites);
-			}
-		});
-		unsubscribers.push(sitesUnsub);
-
-		// Subscribe to selection state
-		const selectionUnsub = cellDataContext.selectedSiteId.subscribe(() => {
-			if (map) {
-				updateLayerStyle();
-			}
-		});
-		unsubscribers.push(selectionUnsub);
-
-		// Subscribe to hover state
-		const hoverUnsub = cellDataContext.hoveredSiteId.subscribe(() => {
-			if (map) {
-				updateLayerStyle();
-			}
-		});
-		unsubscribers.push(hoverUnsub);
-	});
-
-	onDestroy(() => {
-		cleanup();
-		unsubscribers.forEach((unsub) => unsub());
-	});
-
-	function initializeLayer(): void {
-		if (!map) return;
-
-		layerManager = new LayerBase(map, {
-			namespace,
-			layerName: 'sites',
-			sourceName: 'sites'
-		});
-
-		// Add empty GeoJSON source
-		layerManager['addGeoJSONSource']({
-			type: 'FeatureCollection',
-			features: []
-		});
-
-		// Add circle layer
-		layerManager['addLayer']({
-			id: layerManager.getLayerId(),
-			type: 'circle',
-			source: layerManager.getSourceId(),
-			paint: {
-				'circle-radius': circleRadius,
-				'circle-color': [
-					'case',
-					['boolean', ['feature-state', 'selected'], false],
-					selectedColor,
-					['boolean', ['feature-state', 'hovered'], false],
-					hoverColor,
-					circleColor
-				],
-				'circle-stroke-width': 2,
-				'circle-stroke-color': '#ffffff'
-			}
-		});
-
-		// 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
-		const sites = cellDataContext.sites;
-		let currentSites: Site[] = [];
-		sites.subscribe((s) => {
-			currentSites = s;
-		})();
-		updateLayerData(currentSites);
-	}
-
-	function updateLayerData(sites: Site[]): void {
-		if (!layerManager) return;
-		const geojson = sitesToGeoJSON(sites);
-		layerManager['updateSource'](geojson);
-		updateLayerStyle();
-	}
-
-	function updateLayerStyle(): void {
-		if (!map || !layerManager) return;
-
-		const selectedId = cellDataContext.selectedSiteId;
-		const hoveredId = cellDataContext.hoveredSiteId;
-
-		let currentSelectedId: string | null = null;
-		let currentHoveredId: string | null = null;
-
-		selectedId.subscribe((id) => {
-			currentSelectedId = id;
-		})();
-		hoveredId.subscribe((id) => {
-			currentHoveredId = id;
-		})();
-
-		// Update feature states
-		const sites = cellDataContext.sites;
-		let currentSites: Site[] = [];
-		sites.subscribe((s) => {
-			currentSites = s;
-		})();
-
-		currentSites.forEach((site) => {
-			if (map) {
-				map.setFeatureState(
-					{
-						source: layerManager!.getSourceId(),
-						id: site.id
-					},
-					{
-						selected: site.id === currentSelectedId,
-						hovered: site.id === currentHoveredId
-					}
-				);
-			}
-		});
-	}
-
-	function handleClick(e: mapboxgl.MapLayerMouseEvent): void {
-		if (!e.features || e.features.length === 0) return;
-		const feature = e.features[0];
-		const siteId = feature.properties?.id;
-		if (siteId) {
-			cellDataContext.selectedSiteId.set(siteId);
-			cellDataContext.selectedCellId.set(null);
-
-			// Show popup if enabled
-			if (showPopup && map && e.lngLat) {
-				createSitePopup(feature.properties, e.lngLat);
-			}
-		}
-	}
-
-	function createSitePopup(siteProps: any, lngLat: mapboxgl.LngLat): void {
-		if (!map) return;
-
-		// Remove existing popup
-		if (popup) {
-			popup.remove();
-		}
-
-		// Build popup HTML
-		const fbands = siteProps.fbands ? JSON.parse(siteProps.fbands) : [];
-		const fbandsHtml = fbands.length > 0 
-			? `<div><strong>Bands:</strong> ${fbands.join(', ')} MHz</div>`
-			: '';
-
-		const html = `
-			<div style="font-family: system-ui, -apple-system, sans-serif; font-size: 13px;">
-				<h6 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">${siteProps.name}</h6>
-				<div style="color: #666; line-height: 1.6;">
-					<div><strong>ID:</strong> ${siteProps.id}</div>
-					<div><strong>Technology:</strong> <span class="badge bg-primary">${siteProps.technology}</span></div>
-					${fbandsHtml}
-					<div><strong>Provider:</strong> ${siteProps.provider}</div>
-					<div><strong>Group:</strong> ${siteProps.featureGroup}</div>
-					<div><strong>Cells:</strong> ${siteProps.cellNames ? JSON.parse(siteProps.cellNames).length : 0}</div>
-					<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; font-size: 11px;">
-						<strong>Coordinates:</strong><br/>
-						${siteProps.latitude.toFixed(6)}, ${siteProps.longitude.toFixed(6)}
-					</div>
-				</div>
-			</div>
-		`;
-
-		// Create and add popup
-		popup = new mapboxgl.Popup({
-			closeButton: true,
-			closeOnClick: false,
-			maxWidth: '300px'
-		})
-			.setLngLat(lngLat)
-			.setHTML(html)
-			.addTo(map);
-	}
-
-	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 siteId = feature.properties?.id;
-		if (siteId) {
-			cellDataContext.hoveredSiteId.set(siteId);
-		}
-	}
-
-	function handleMouseLeave(): void {
-		if (!map) return;
-		map.getCanvas().style.cursor = '';
-		cellDataContext.hoveredSiteId.set(null);
-	}
-
-	function cleanup(): void {
-		if (popup) {
-			popup.remove();
-			popup = null;
-		}
-		if (map && layerManager) {
-			if (clickable) {
-				map.off('click', layerManager.getLayerId(), handleClick);
-				map.off('mouseenter', layerManager.getLayerId(), handleMouseEnter);
-				map.off('mouseleave', layerManager.getLayerId(), handleMouseLeave);
-			}
-			layerManager.cleanup();
-		}
-	}
-</script>

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

@@ -1,19 +0,0 @@
-interface Props {
-    /** Namespace for layer IDs (default: 'cellular') */
-    namespace?: string;
-    /** Enable click to select sites (default: true) */
-    clickable?: boolean;
-    /** Show popup on click (default: true) */
-    showPopup?: boolean;
-    /** Site circle radius (default: 8) */
-    circleRadius?: number;
-    /** Site circle color (default: '#3b82f6') */
-    circleColor?: string;
-    /** Selected site color (default: '#ef4444') */
-    selectedColor?: string;
-    /** Hovered site color (default: '#8b5cf6') */
-    hoverColor?: string;
-}
-declare const SitesLayer: import("svelte").Component<Props, {}, "">;
-type SitesLayer = ReturnType<typeof SitesLayer>;
-export default SitesLayer;

package/dist/map/providers/CellDataProvider.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-	/**
-	 * CellDataProvider - Provides cellular data (sites, cells) and interaction state to child components
-	 *
-	 * Usage:
-	 * <CellDataProvider {sites} {cells}>
-	 *   <SitesLayer />
-	 *   <CellsLayer />
-	 * </CellDataProvider>
-	 */
-	import { setContext } from 'svelte';
-	import type { Site, Cell } from '../types';
-	import { CELL_DATA_CONTEXT_KEY } from '../types';
-	import { createCellDataStores } from '../stores/cellDataStore';
-
-	interface Props {
-		/** Array of cellular sites */
-		sites?: Site[];
-		/** Array of cellular cells/sectors */
-		cells?: Cell[];
-		/** Optional child content */
-		children?: import('svelte').Snippet;
-	}
-
-	let { sites = [], cells = [], children }: Props = $props();
-
-	// Create and set the cell data context in context
-	const cellDataContext = createCellDataStores(sites, cells);
-	setContext(CELL_DATA_CONTEXT_KEY, cellDataContext);
-
-	// Update stores when props change
-	$effect(() => {
-		cellDataContext.sites.set(sites);
-	});
-
-	$effect(() => {
-		cellDataContext.cells.set(cells);
-	});
-</script>
-
-{#if children}
-	{@render children()}
-{/if}

package/dist/map/providers/CellDataProvider.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Site, Cell } from '../types';
-interface Props {
-    /** Array of cellular sites */
-    sites?: Site[];
-    /** Array of cellular cells/sectors */
-    cells?: Cell[];
-    /** Optional child content */
-    children?: import('svelte').Snippet;
-}
-declare const CellDataProvider: import("svelte").Component<Props, {}, "">;
-type CellDataProvider = ReturnType<typeof CellDataProvider>;
-export default CellDataProvider;

package/dist/map/providers/MapboxProvider.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	/**
-	 * MapboxProvider - Provides Mapbox GL JS map instance to child components via context
-	 *
-	 * Usage:
-	 * <MapboxProvider {mapInstance}>
-	 *   <SitesLayer />
-	 *   <CellsLayer />
-	 * </MapboxProvider>
-	 */
-	import { setContext } from 'svelte';
-	import type mapboxgl from 'mapbox-gl';
-	import { MAP_CONTEXT_KEY } from '../types';
-	import { createMapStore } from '../stores/mapStore';
-
-	interface Props {
-		/** The Mapbox GL JS map instance */
-		mapInstance: mapboxgl.Map;
-		/** Optional child content */
-		children?: import('svelte').Snippet;
-	}
-
-	let { mapInstance, children }: Props = $props();
-
-	// Create and set the map store in context
-	const mapStore = createMapStore();
-	setContext(MAP_CONTEXT_KEY, mapStore);
-
-	// Update the store whenever the map instance changes
-	$effect(() => {
-		console.log('MapboxProvider: Setting map instance', mapInstance);
-		mapStore.set(mapInstance);
-	});
-</script>
-
-{#if children}
-	{@render children()}
-{/if}

package/dist/map/providers/MapboxProvider.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    /** The Mapbox GL JS map instance */
-    mapInstance: mapboxgl.Map;
-    /** Optional child content */
-    children?: import('svelte').Snippet;
-}
-declare const MapboxProvider: import("svelte").Component<Props, {}, "">;
-type MapboxProvider = ReturnType<typeof MapboxProvider>;
-export default MapboxProvider;

package/dist/map/providers/providerHelpers.d.ts

@@ -1,17 +0,0 @@
-/**
- * Provider helper utilities
- */
-import type { MapStore } from '../types';
-import type { Site, Cell, CellDataContext } from '../types';
-/**
- * Creates a new map store instance
- */
-export declare function createMap(): MapStore;
-/**
- * Creates a new cell data context
- */
-export declare function createCellContext(sites?: Site[], cells?: Cell[]): CellDataContext;
-/**
- * Validates that a map instance is ready for use
- */
-export declare function isMapReady(map: unknown): boolean;

package/dist/map/providers/providerHelpers.js

@@ -1,26 +0,0 @@
-/**
- * Provider helper utilities
- */
-import { createMapStore } from '../stores/mapStore';
-import { createCellDataStores } from '../stores/cellDataStore';
-/**
- * Creates a new map store instance
- */
-export function createMap() {
-    return createMapStore();
-}
-/**
- * Creates a new cell data context
- */
-export function createCellContext(sites = [], cells = []) {
-    return createCellDataStores(sites, cells);
-}
-/**
- * Validates that a map instance is ready for use
- */
-export function isMapReady(map) {
-    if (!map)
-        return false;
-    // Check if it has the basic Mapbox GL Map interface
-    return typeof map.getStyle === 'function';
-}

package/dist/map/stores/cellDataStore.d.ts

@@ -1,21 +0,0 @@
-/**
- * Store factory and utilities for cellular data
- */
-import type { Writable, Readable } from 'svelte/store';
-import type { Site, Cell, CellDataContext } from '../types';
-/**
- * Creates a complete cell data context with all required stores
- */
-export declare function createCellDataStores(initialSites?: Site[], initialCells?: Cell[]): CellDataContext;
-/**
- * Creates a derived store that filters cells by site ID
- */
-export declare function createCellsBySiteStore(cells: Writable<Cell[]>, siteId: Writable<string | null>): Readable<Cell[]>;
-/**
- * Creates a derived store for the currently selected site
- */
-export declare function createSelectedSiteStore(sites: Writable<Site[]>, selectedSiteId: Writable<string | null>): Readable<Site | null>;
-/**
- * Creates a derived store for the currently selected cell
- */
-export declare function createSelectedCellStore(cells: Writable<Cell[]>, selectedCellId: Writable<string | null>): Readable<Cell | null>;

package/dist/map/stores/cellDataStore.js

@@ -1,53 +0,0 @@
-/**
- * Store factory and utilities for cellular data
- */
-import { writable, derived } from 'svelte/store';
-/**
- * Creates a complete cell data context with all required stores
- */
-export function createCellDataStores(initialSites = [], initialCells = []) {
-    const sites = writable(initialSites);
-    const cells = writable(initialCells);
-    const selectedSiteId = writable(null);
-    const selectedCellId = writable(null);
-    const hoveredSiteId = writable(null);
-    const hoveredCellId = writable(null);
-    return {
-        sites,
-        cells,
-        selectedSiteId,
-        selectedCellId,
-        hoveredSiteId,
-        hoveredCellId
-    };
-}
-/**
- * Creates a derived store that filters cells by site ID
- */
-export function createCellsBySiteStore(cells, siteId) {
-    return derived([cells, siteId], ([$cells, $siteId]) => {
-        if (!$siteId)
-            return [];
-        return $cells.filter((cell) => cell.siteId === $siteId);
-    });
-}
-/**
- * Creates a derived store for the currently selected site
- */
-export function createSelectedSiteStore(sites, selectedSiteId) {
-    return derived([sites, selectedSiteId], ([$sites, $selectedSiteId]) => {
-        if (!$selectedSiteId)
-            return null;
-        return $sites.find((site) => site.id === $selectedSiteId) ?? null;
-    });
-}
-/**
- * Creates a derived store for the currently selected cell
- */
-export function createSelectedCellStore(cells, selectedCellId) {
-    return derived([cells, selectedCellId], ([$cells, $selectedCellId]) => {
-        if (!$selectedCellId)
-            return null;
-        return $cells.find((cell) => cell.id === $selectedCellId) ?? null;
-    });
-}

package/dist/map/stores/interactions.d.ts

@@ -1,20 +0,0 @@
-/**
- * Interaction state utilities and helpers
- */
-import type { Writable } from 'svelte/store';
-/**
- * Helper to clear all selections
- */
-export declare function clearSelections(selectedSiteId: Writable<string | null>, selectedCellId: Writable<string | null>): void;
-/**
- * Helper to clear all hover states
- */
-export declare function clearHovers(hoveredSiteId: Writable<string | null>, hoveredCellId: Writable<string | null>): void;
-/**
- * Helper to select a site and clear cell selection
- */
-export declare function selectSite(siteId: string | null, selectedSiteId: Writable<string | null>, selectedCellId: Writable<string | null>): void;
-/**
- * Helper to select a cell (and optionally its parent site)
- */
-export declare function selectCell(cellId: string | null, selectedCellId: Writable<string | null>, parentSiteId?: string | null, selectedSiteId?: Writable<string | null>): void;

package/dist/map/stores/interactions.js

@@ -1,33 +0,0 @@
-/**
- * Interaction state utilities and helpers
- */
-/**
- * Helper to clear all selections
- */
-export function clearSelections(selectedSiteId, selectedCellId) {
-    selectedSiteId.set(null);
-    selectedCellId.set(null);
-}
-/**
- * Helper to clear all hover states
- */
-export function clearHovers(hoveredSiteId, hoveredCellId) {
-    hoveredSiteId.set(null);
-    hoveredCellId.set(null);
-}
-/**
- * Helper to select a site and clear cell selection
- */
-export function selectSite(siteId, selectedSiteId, selectedCellId) {
-    selectedSiteId.set(siteId);
-    selectedCellId.set(null);
-}
-/**
- * Helper to select a cell (and optionally its parent site)
- */
-export function selectCell(cellId, selectedCellId, parentSiteId, selectedSiteId) {
-    selectedCellId.set(cellId);
-    if (selectedSiteId && parentSiteId !== undefined) {
-        selectedSiteId.set(parentSiteId);
-    }
-}