@smartnet360/svelte-components 0.0.54 → 0.0.55

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

@@ -0,0 +1,128 @@
+/**
+ * Demo cellular data for testing map-v2 site feature
+ */
+/**
+ * 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'
+    },
+    {
+        id: 'site-005',
+        name: 'Presidio Heights',
+        longitude: -122.4545,
+        latitude: 37.7881,
+        fbands: ['2100', '850'],
+        technology: '5G',
+        properties: {
+            height: 35,
+            type: 'macro'
+        },
+        cellNames: ['cell-005-1', 'cell-005-2', 'cell-005-3'],
+        provider: 'AT&T',
+        featureGroup: 'Suburban Macro'
+    },
+    {
+        id: 'site-006',
+        name: 'Castro District',
+        longitude: -122.4352,
+        latitude: 37.7609,
+        fbands: ['1800'],
+        technology: 'LTE',
+        properties: {
+            height: 25,
+            type: 'micro'
+        },
+        cellNames: ['cell-006-1', 'cell-006-2'],
+        provider: 'T-Mobile',
+        featureGroup: 'Small Cell'
+    },
+    {
+        id: 'site-007',
+        name: 'Embarcadero',
+        longitude: -122.3959,
+        latitude: 37.7956,
+        fbands: ['2600', '2100'],
+        technology: '5G',
+        properties: {
+            height: 50,
+            type: 'macro'
+        },
+        cellNames: ['cell-007-1', 'cell-007-2', 'cell-007-3'],
+        provider: 'Verizon',
+        featureGroup: 'Urban Macro'
+    },
+    {
+        id: 'site-008',
+        name: 'Sunset District',
+        longitude: -122.4944,
+        latitude: 37.7599,
+        fbands: ['850', '700'],
+        technology: 'LTE',
+        properties: {
+            height: 38,
+            type: 'macro'
+        },
+        cellNames: ['cell-008-1', 'cell-008-2', 'cell-008-3'],
+        provider: 'AT&T',
+        featureGroup: 'Suburban Macro'
+    }
+];

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

@@ -0,0 +1,7 @@
+/**
+ * Demo Components - Public API
+ *
+ * Exports demo components and data for testing
+ */
+export { default as DemoMap } from './DemoMap.svelte';
+export { demoSites } from './demo-data';

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

@@ -0,0 +1,9 @@
+/**
+ * Demo Components - Public API
+ *
+ * Exports demo components and data for testing
+ */
+// Demo component
+export { default as DemoMap } from './DemoMap.svelte';
+// Demo data
+export { demoSites } from './demo-data';

package/dist/{map → map-v2/features/sites}/controls/SiteFilterControl.svelte

@@ -1,31 +1,26 @@
 <script lang="ts">
 	/**
-	 * SiteFilterControl - TreeView-based site filtering control for Mapbox
+	 * SiteFilterControl - TreeView-based site filtering control
 	 *
 	 * Displays a hierarchical tree: All Sites -> Provider -> Feature Group
-	 * Filters sites based on checked state and persists to localStorage
+	 * Updates siteStore.filteredSites based on checked state
+	 * Persists state to localStorage
 	 *
 	 * Usage:
-	 * <SiteFilterControl 
-	 *   {sites} 
-	 *   bind:filteredSites 
-	 *   position="top-left"
-	 * />
+	 * <SiteFilterControl {store} 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';
+	import MapControl from '../../../shared/controls/MapControl.svelte';
+	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import { buildSiteTree, getFilteredSites } from '../utils/siteTreeUtils';
+	import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
 
 	interface Props {
-		/** All sites to filter */
-		sites: Site[];
-		/** Filtered sites output */
-		filteredSites?: Site[];
+		/** Site store instance */
+		store: SiteStoreContext;
 		/** Control position on map */
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Control title */
@@ -35,27 +30,20 @@
 	}
 
 	let {
-		sites,
-		filteredSites = $bindable([]),
+		store,
 		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');
+		console.log('SiteFilterControl: Mounted with', store.allSites.length, 'sites');
 		
-		if (sites.length > 0) {
+		if (store.allSites.length > 0) {
 			console.log('SiteFilterControl: Building tree...');
-			const treeNodes = buildSiteTree(sites);
+			const treeNodes = buildSiteTree(store.allSites);
 
 			treeStore = createTreeStore({
 				nodes: [treeNodes],
@@ -66,19 +54,17 @@
 			
 			console.log('SiteFilterControl: Tree store created');
 
-			// Subscribe to tree changes and update filtered sites
+			// Subscribe to tree changes and update siteStore
 			if (treeStore) {
-				const unsub = treeStore.subscribe((store: TreeStoreValue) => {
-					const checkedPaths = store.getCheckedPaths();
+				const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
+					const checkedPaths = treeValue.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;
+					const newFilteredSites = getFilteredSites(checkedPaths, store.allSites);
+					console.log('Filtered sites count:', newFilteredSites.length, 'of', store.allSites.length);
 					
-					// Save state to our custom storage
-					saveTreeState(checkedPaths);
+					// Update the site store directly
+					store.filteredSites = newFilteredSites;
 				});
 
 				return () => unsub();
@@ -92,11 +78,11 @@
 		<div class="site-filter-tree">
 			<TreeView store={$treeStore} showControls={false} />
 			
-			<!-- <div class="site-filter-stats">
+			<div class="site-filter-stats">
 				<small class="text-muted">
-					Showing {filteredSites.length} of {sites.length} sites
+					Showing {store.filteredSites.length} of {store.allSites.length} sites
 				</small>
-			</div> -->
+			</div>
 		</div>
 	{:else}
 		<div class="text-muted small">Loading sites...</div>

package/dist/{map → map-v2/features/sites}/controls/SiteFilterControl.svelte.d.ts

@@ -1,9 +1,7 @@
-import type { Site } from '../types';
+import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
 interface Props {
-    /** All sites to filter */
-    sites: Site[];
-    /** Filtered sites output */
-    filteredSites?: Site[];
+    /** Site store instance */
+    store: SiteStoreContext;
     /** Control position on map */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Control title */
@@ -11,6 +9,6 @@ interface Props {
     /** Initially collapsed? */
     initiallyCollapsed?: boolean;
 }
-declare const SiteFilterControl: import("svelte").Component<Props, {}, "filteredSites">;
+declare const SiteFilterControl: import("svelte").Component<Props, {}, "">;
 type SiteFilterControl = ReturnType<typeof SiteFilterControl>;
 export default SiteFilterControl;

package/dist/map-v2/features/sites/controls/SiteSizeSlider.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	/**
+	 * SiteSizeSlider - Control for adjusting site circle size
+	 *
+	 * Updates siteStore properties to control the display of site circles
+	 *
+	 * Usage:
+	 * <SiteSizeSlider {store} position="top-right" />
+	 */
+	import MapControl from '../../../shared/controls/MapControl.svelte';
+	import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+
+	interface Props {
+		/** Site store instance */
+		store: SiteStoreContext;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+		/** Minimum size (default: 2) */
+		min?: number;
+		/** Maximum size (default: 20) */
+		max?: number;
+		/** Step increment (default: 1) */
+		step?: number;
+	}
+
+	let {
+		store,
+		position = 'top-right',
+		title = 'Site Size',
+		initiallyCollapsed = false,
+		min = 2,
+		max = 20,
+		step = 1
+	}: Props = $props();
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	<div class="site-size-controls">
+		<!-- Size slider -->
+		<div class="control-row">
+			<label for="site-size-slider" class="control-label">
+				Circle Radius: <strong>{store.size}px</strong>
+			</label>
+			<input
+				id="site-size-slider"
+				type="range"
+				class="form-range"
+				{min}
+				{max}
+				{step}
+				bind:value={store.size}
+			/>
+		</div>
+
+		<!-- Opacity slider -->
+		<div class="control-row">
+			<label for="site-opacity-slider" class="control-label">
+				Opacity: <strong>{Math.round(store.opacity * 100)}%</strong>
+			</label>
+			<input
+				id="site-opacity-slider"
+				type="range"
+				class="form-range"
+				min="0"
+				max="1"
+				step="0.1"
+				bind:value={store.opacity}
+			/>
+		</div>
+
+		<!-- Circle Color -->
+		<div class="control-row">
+			<label for="site-color-picker" class="control-label">
+				Circle Color
+			</label>
+			<input
+				id="site-color-picker"
+				type="color"
+				class="form-control-color"
+				bind:value={store.color}
+			/>
+		</div>
+
+		<!-- Show labels checkbox -->
+		<div class="control-row">
+			<label for="site-show-labels" class="control-label">
+				Show Labels
+			</label>
+			<div class="form-check">
+				<input
+					id="site-show-labels"
+					type="checkbox"
+					class="form-check-input"
+					bind:checked={store.showLabels}
+				/>
+			</div>
+		</div>
+
+		<!-- Label size slider (only visible when labels are shown) -->
+		{#if store.showLabels}
+			<div class="control-row">
+				<label for="label-size-slider" class="control-label">
+					Label Size: <strong>{store.labelSize}px</strong>
+				</label>
+				<input
+					id="label-size-slider"
+					type="range"
+					class="form-range"
+					min="8"
+					max="20"
+					step="1"
+					bind:value={store.labelSize}
+				/>
+			</div>
+
+			<!-- Label color picker -->
+			<div class="control-row">
+				<label for="label-color-picker" class="control-label">
+					Label Color
+				</label>
+				<input
+					id="label-color-picker"
+					type="color"
+					class="form-control-color"
+					bind:value={store.labelColor}
+				/>
+			</div>
+		{/if}
+	</div>
+</MapControl>
+
+<style>
+	.site-size-controls {
+		width: 100%;
+	}
+
+	.control-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-bottom: 12px;
+	}
+
+	.control-row:last-child {
+		margin-bottom: 0;
+	}
+
+	.control-label {
+		width: 110px;
+		flex-shrink: 0;
+		font-size: 12px;
+		color: #555;
+		margin: 0;
+	}
+
+	.form-range {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.form-check {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.form-check-input {
+		cursor: pointer;
+		margin: 0;
+	}
+
+	.form-control-color {
+		flex: 1;
+		min-width: 0;
+		height: 32px;
+		padding: 2px;
+		border: 1px solid #dee2e6;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+</style>

package/dist/map-v2/features/sites/controls/SiteSizeSlider.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+interface Props {
+    /** Site store instance */
+    store: SiteStoreContext;
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+    /** Minimum size (default: 2) */
+    min?: number;
+    /** Maximum size (default: 20) */
+    max?: number;
+    /** Step increment (default: 1) */
+    step?: number;
+}
+declare const SiteSizeSlider: import("svelte").Component<Props, {}, "">;
+type SiteSizeSlider = ReturnType<typeof SiteSizeSlider>;
+export default SiteSizeSlider;

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

@@ -0,0 +1,14 @@
+/**
+ * Site Feature - Public API
+ *
+ * Exports all site-related types, stores, components, and utilities
+ */
+export type { Site, SiteStoreValue } from './types';
+export type { SiteStoreContext } from './stores/siteStoreContext.svelte';
+export { createSiteStore } from './stores/siteStore';
+export { createSiteStoreContext } from './stores/siteStoreContext.svelte';
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+export { default as SiteSizeSlider } from './controls/SiteSizeSlider.svelte';
+export { sitesToGeoJSON, siteToFeature } from './utils/siteGeoJSON';
+export { buildSiteTree, getFilteredSites } from './utils/siteTreeUtils';

package/dist/map-v2/features/sites/index.js

@@ -0,0 +1,16 @@
+/**
+ * Site Feature - Public API
+ *
+ * Exports all site-related types, stores, components, and utilities
+ */
+// Store
+export { createSiteStore } from './stores/siteStore';
+export { createSiteStoreContext } from './stores/siteStoreContext.svelte';
+// Layers
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+// Controls
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+export { default as SiteSizeSlider } from './controls/SiteSizeSlider.svelte';
+// Utils
+export { sitesToGeoJSON, siteToFeature } from './utils/siteGeoJSON';
+export { buildSiteTree, getFilteredSites } from './utils/siteTreeUtils';