@smartnet360/svelte-components 0.0.54 → 0.0.56

package/dist/{map → map-v2/features/sites}/utils/siteTreeUtils.js

@@ -1,12 +1,13 @@
 /**
  * Utilities for building and managing site filter tree
  */
-const STORAGE_PREFIX = 'cellular:siteFilter';
 /**
  * Builds a hierarchical tree from flat site array
  * Structure: All Sites -> Provider -> Feature Group
+ * @param sites - Array of sites to build tree from
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
  */
-export function buildSiteTree(sites) {
+export function buildSiteTree(sites, colorMap) {
     // Group sites by provider, then by feature group
     const providerGroups = new Map();
     sites.forEach((site) => {
@@ -19,8 +20,6 @@ export function buildSiteTree(sites) {
         }
         featureGroups.get(site.featureGroup).push(site);
     });
-    // Load saved state from localStorage
-    const savedState = loadTreeState();
     // Build tree structure
     const children = [];
     // Sort providers alphabetically
@@ -33,16 +32,18 @@ export function buildSiteTree(sites) {
         sortedFeatureGroups.forEach((featureGroup) => {
             const groupSites = featureGroups.get(featureGroup);
             const nodeId = `${provider}:${featureGroup}`;
+            const groupKey = nodeId; // Use same key format for color lookup
             providerChildren.push({
                 id: nodeId,
                 label: `${featureGroup} (${groupSites.length})`,
-                defaultChecked: savedState[nodeId] ?? true, // Default checked
+                defaultChecked: true,
                 children: [],
                 metadata: {
                     type: 'featureGroup',
                     provider,
                     featureGroup,
-                    siteIds: groupSites.map((s) => s.id)
+                    siteIds: groupSites.map((s) => s.id),
+                    color: colorMap?.get(groupKey) // Add color from map if available
                 }
             });
         });
@@ -50,7 +51,7 @@ export function buildSiteTree(sites) {
         children.push({
             id: providerId,
             label: `${provider} (${Array.from(featureGroups.values()).flat().length})`,
-            defaultChecked: savedState[providerId] ?? true, // Default checked
+            defaultChecked: true,
             children: providerChildren,
             metadata: {
                 type: 'provider',
@@ -62,7 +63,7 @@ export function buildSiteTree(sites) {
     return {
         id: 'all-sites',
         label: `All Sites (${sites.length})`,
-        defaultChecked: savedState['all-sites'] ?? true, // Default checked
+        defaultChecked: true,
         children,
         metadata: {
             type: 'root'
@@ -118,47 +119,3 @@ export function getFilteredSites(checkedPaths, allSites) {
     console.log('Filtered:', filtered.length, 'of', allSites.length, 'sites');
     return filtered;
 }
-/**
- * Saves tree checked paths to localStorage
- */
-export function saveTreeState(checkedPaths) {
-    try {
-        localStorage.setItem(STORAGE_PREFIX, JSON.stringify(checkedPaths));
-    }
-    catch (error) {
-        console.warn('Failed to save tree state to localStorage:', error);
-    }
-}
-/**
- * Loads tree state from localStorage
- * Returns map of node IDs to checked state
- */
-export function loadTreeState() {
-    try {
-        const saved = localStorage.getItem(STORAGE_PREFIX);
-        if (saved) {
-            const paths = JSON.parse(saved);
-            // Convert paths to map for easier lookup during tree building
-            const stateMap = {};
-            paths.forEach((path) => {
-                stateMap[path] = true;
-            });
-            return stateMap;
-        }
-    }
-    catch (error) {
-        console.warn('Failed to load tree state from localStorage:', error);
-    }
-    return {};
-}
-/**
- * Clears saved tree state
- */
-export function clearTreeState() {
-    try {
-        localStorage.removeItem(STORAGE_PREFIX);
-    }
-    catch (error) {
-        console.warn('Failed to clear tree state from localStorage:', error);
-    }
-}

package/dist/map-v2/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Map V2 - Feature-Based Cellular Visualization Library
+ *
+ * A decoupled, feature-based architecture for Mapbox cellular network visualization.
+ * Each feature (sites, cells) is completely independent with its own store, layers, and controls.
+ */
+export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, MapStyleControl, createMapStore, useMapbox, tryUseMapbox } from './core';
+export { MapControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
+export { type Site, type SiteStoreValue, createSiteStore, SitesLayer, SiteFilterControl, SiteSizeSlider, sitesToGeoJSON, siteToFeature, buildSiteTree, getFilteredSites } from './features/sites';
+export { DemoMap, demoSites } from './demo';

package/dist/map-v2/index.js

@@ -0,0 +1,22 @@
+/**
+ * Map V2 - Feature-Based Cellular Visualization Library
+ *
+ * A decoupled, feature-based architecture for Mapbox cellular network visualization.
+ * Each feature (sites, cells) is completely independent with its own store, layers, and controls.
+ */
+// ============================================================================
+// CORE INFRASTRUCTURE
+// ============================================================================
+export { MAP_CONTEXT_KEY, MapboxProvider, MapStyleControl, createMapStore, useMapbox, tryUseMapbox } from './core';
+// ============================================================================
+// SHARED UTILITIES
+// ============================================================================
+export { MapControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
+// ============================================================================
+// SITE FEATURE
+// ============================================================================
+export { createSiteStore, SitesLayer, SiteFilterControl, SiteSizeSlider, sitesToGeoJSON, siteToFeature, buildSiteTree, getFilteredSites } from './features/sites';
+// ============================================================================
+// DEMO
+// ============================================================================
+export { DemoMap, demoSites } from './demo';

package/dist/{map → map-v2/shared}/controls/MapControl.svelte

@@ -12,7 +12,7 @@
 	 */
 	import { onMount, onDestroy } from 'svelte';
 	import mapboxgl from 'mapbox-gl';
-	import { tryUseMapbox } from '../hooks/useMapbox';
+	import { tryUseMapbox } from '../../core/hooks/useMapbox';
 
 	interface Props {
 		/** Position on the map */

package/dist/map-v2/shared/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared Utilities - Public API
+ *
+ * Exports shared controls and utilities used across features
+ */
+export { default as MapControl } from './controls/MapControl.svelte';
+export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';

package/dist/map-v2/shared/index.js

@@ -0,0 +1,9 @@
+/**
+ * Shared Utilities - Public API
+ *
+ * Exports shared controls and utilities used across features
+ */
+// Controls
+export { default as MapControl } from './controls/MapControl.svelte';
+// Mapbox Helpers
+export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';

package/package.json

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

package/dist/map/controls/SiteFilterControl.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-	/**
-	 * SiteFilterControl - TreeView-based site filtering control for Mapbox
-	 *
-	 * Displays a hierarchical tree: All Sites -> Provider -> Feature Group
-	 * Filters sites based on checked state and persists to localStorage
-	 *
-	 * Usage:
-	 * <SiteFilterControl 
-	 *   {sites} 
-	 *   bind:filteredSites 
-	 *   position="top-left"
-	 * />
-	 */
-	import { onMount } from 'svelte';
-	import type { Writable } from 'svelte/store';
-	import MapControl from './MapControl.svelte';
-	import TreeView from '../../core/TreeView/TreeView.svelte';
-	import { createTreeStore } from '../../core/TreeView/tree.store';
-	import { buildSiteTree, getFilteredSites, saveTreeState } from '../utils/siteTreeUtils';
-	import type { Site } from '../types';
-	import type { TreeStoreValue } from '../../core/TreeView/tree.model';
-
-	interface Props {
-		/** All sites to filter */
-		sites: Site[];
-		/** Filtered sites output */
-		filteredSites?: Site[];
-		/** Control position on map */
-		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-		/** Control title */
-		title?: string;
-		/** Initially collapsed? */
-		initiallyCollapsed?: boolean;
-	}
-
-	let {
-		sites,
-		filteredSites = $bindable([]),
-		position = 'top-left',
-		title = 'Site Filter',
-		initiallyCollapsed = false
-	}: Props = $props();
-
-	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
-	
-	// Initialize filteredSites with all sites immediately
-	if (filteredSites.length === 0 && sites.length > 0) {
-		filteredSites = [...sites];
-	}
-
-	// Build tree and create store when sites change (run only once on mount)
-	onMount(() => {
-		console.log('SiteFilterControl: Mounted with', sites.length, 'sites');
-		
-		if (sites.length > 0) {
-			console.log('SiteFilterControl: Building tree...');
-			const treeNodes = buildSiteTree(sites);
-
-			treeStore = createTreeStore({
-				nodes: [treeNodes],
-				namespace: 'cellular-site-filter',
-				persistState: true,
-				defaultExpandAll: false
-			});
-			
-			console.log('SiteFilterControl: Tree store created');
-
-			// Subscribe to tree changes and update filtered sites
-			if (treeStore) {
-				const unsub = treeStore.subscribe((store: TreeStoreValue) => {
-					const checkedPaths = store.getCheckedPaths();
-					console.log('TreeStore updated, checked paths:', checkedPaths);
-					
-					const newFilteredSites = getFilteredSites(checkedPaths, sites);
-					console.log('Filtered sites count:', newFilteredSites.length, 'of', sites.length);
-					
-					filteredSites = newFilteredSites;
-					
-					// Save state to our custom storage
-					saveTreeState(checkedPaths);
-				});
-
-				return () => unsub();
-			}
-		}
-	});
-</script>
-
-<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
-	{#if treeStore && $treeStore}
-		<div class="site-filter-tree">
-			<TreeView store={$treeStore} showControls={false} />
-			
-			<!-- <div class="site-filter-stats">
-				<small class="text-muted">
-					Showing {filteredSites.length} of {sites.length} sites
-				</small>
-			</div> -->
-		</div>
-	{:else}
-		<div class="text-muted small">Loading sites...</div>
-	{/if}
-</MapControl>
-
-<style>
-	.site-filter-tree {
-		min-width: 250px;
-		max-width: 300px;
-	}
-
-	.site-filter-stats {
-		margin-top: 8px;
-		padding-top: 8px;
-		border-top: 1px solid #dee2e6;
-		text-align: center;
-	}
-
-	:global(.site-filter-tree .tree-node-label) {
-		font-size: 13px;
-	}
-
-	:global(.site-filter-tree .tree-node-checkbox) {
-		margin-right: 6px;
-	}
-</style>

package/dist/map/demo/DemoMap.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	/**
-	 * DemoMap - Complete demo component with map initialization and sample data
-	 */
-	import { onMount } from 'svelte';
-	import mapboxgl from 'mapbox-gl';
-	import 'mapbox-gl/dist/mapbox-gl.css';
-	
-	import MapboxProvider from '../providers/MapboxProvider.svelte';
-	import CellDataProvider from '../providers/CellDataProvider.svelte';
-	import SitesLayer from '../layers/SitesLayer.svelte';
-	import CellsLayer from '../layers/CellsLayer.svelte';
-	import SiteFilterControl from '../controls/SiteFilterControl.svelte';
-	import { demoSites, demoCells } from './demo-data';
-	import type { Site, Cell } from '../types';
-
-	interface Props {
-		/** Mapbox access token */
-		accessToken?: string;
-		/** Initial center coordinates [lng, lat] */
-		center?: [number, number];
-		/** Initial zoom level */
-		zoom?: number;
-	}
-
-	let { 
-		accessToken = '',
-		center = [-122.4194, 37.7749], // San Francisco
-		zoom = 12
-	}: Props = $props();
-
-	let mapContainer: HTMLDivElement;
-	let map = $state<mapboxgl.Map | null>(null);
-	let mapReady = $state(false);
-	
-	// Data
-	let sites = $state<Site[]>(demoSites);
-	let cells = $state<Cell[]>(demoCells);
-	let filteredSites = $state<Site[]>(sites);
-
-	onMount(() => {
-		// Initialize Mapbox map
-		map = new mapboxgl.Map({
-			container: mapContainer,
-			style: 'mapbox://styles/mapbox/streets-v12',
-			center,
-			zoom,
-			accessToken
-		});
-
-		// Add navigation controls
-		map.addControl(new mapboxgl.NavigationControl(), 'top-right');
-
-		// Wait for map to load
-		map.on('load', () => {
-			mapReady = true;
-		});
-
-		return () => {
-			map?.remove();
-		};
-	});
-</script>
-
-<div class="demo-map-container">
-	<div bind:this={mapContainer} class="w-100 h-100"></div>
-
-	{#if !mapReady}
-		<div class="position-absolute top-50 start-50 translate-middle bg-white p-4 rounded shadow">
-			<div class="spinner-border text-primary me-2" role="status">
-				<span class="visually-hidden">Loading...</span>
-			</div>
-			<span>Loading map...</span>
-		</div>
-	{/if}
-
-	{#if mapReady && map}
-		<MapboxProvider mapInstance={map}>
-			<CellDataProvider sites={filteredSites} {cells}>
-				<SitesLayer />
-				<!-- <CellsLayer /> -->
-				<SiteFilterControl {sites} bind:filteredSites position="top-left" />
-			</CellDataProvider>
-		</MapboxProvider>
-	{/if}
-</div>
-
-<style>
-	.demo-map-container {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		width: 100%;
-		height: 100%;
-	}
-</style>

package/dist/map/demo/demo-data.d.ts

@@ -1,12 +0,0 @@
-/**
- * Demo cellular data for testing and examples
- */
-import type { Site, Cell } from '../types';
-/**
- * Sample cellular sites (San Francisco area)
- */
-export declare const demoSites: Site[];
-/**
- * Sample cellular cells/sectors
- */
-export declare const demoCells: Cell[];

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

@@ -1,220 +0,0 @@
-/**
- * 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

@@ -1,14 +0,0 @@
-/**
- * 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

@@ -1,29 +0,0 @@
-/**
- * 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;
-    }
-}