@smartnet360/svelte-components 0.0.54 → 0.0.55

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export * from './core/index.js';
-export * from './map/index.js';
+export * from './map-v2/index.js';
 export * from './apps/index.js';

package/dist/index.js

@@ -2,7 +2,7 @@
 // This approach keeps the main index clean and allows for easy expansion
 // Core components (Desktop orchestration + Charts + TreeView)
 export * from './core/index.js';
-// Map components (Mapbox cellular visualization)
-export * from './map/index.js';
+// Map components (Mapbox cellular visualization - v2)
+export * from './map-v2/index.js';
 // Complete applications
 export * from './apps/index.js';

package/dist/map-v2/core/controls/MapStyleControl.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+	/**
+	 * MapStyleControl - Control for switching map styles
+	 * 
+	 * Self-contained control that displays available map styles and allows switching.
+	 * Persists selection to localStorage.
+	 * 
+	 * Usage:
+	 * <MapStyleControl position="top-right" namespace="my-app" />
+	 */
+	import { onMount } from 'svelte';
+	import type mapboxgl from 'mapbox-gl';
+	import MapControl from '../../shared/controls/MapControl.svelte';
+	import { useMapbox } from '../hooks/useMapbox';
+
+	interface MapStyle {
+		id: string;
+		name: string;
+		url: string;
+		description?: string;
+		icon?: string;
+	}
+
+	const DEFAULT_STYLES: MapStyle[] = [
+		{
+			id: 'streets',
+			name: 'Streets',
+			url: 'mapbox://styles/mapbox/streets-v12',
+			description: 'General purpose street map',
+			icon: 'map'
+		},
+		{
+			id: 'outdoors',
+			name: 'Outdoors',
+			url: 'mapbox://styles/mapbox/outdoors-v12',
+			description: 'Hiking, biking, and terrain',
+			icon: 'tree'
+		},
+		{
+			id: 'light',
+			name: 'Light',
+			url: 'mapbox://styles/mapbox/light-v11',
+			description: 'Minimal light background',
+			icon: 'sun'
+		},
+		{
+			id: 'dark',
+			name: 'Dark',
+			url: 'mapbox://styles/mapbox/dark-v11',
+			description: 'Minimal dark background',
+			icon: 'moon-stars'
+		},
+		{
+			id: 'satellite',
+			name: 'Satellite',
+			url: 'mapbox://styles/mapbox/satellite-v9',
+			description: 'Satellite imagery',
+			icon: 'globe'
+		},
+		{
+			id: 'satellite-streets',
+			name: 'Satellite Streets',
+			url: 'mapbox://styles/mapbox/satellite-streets-v12',
+			description: 'Satellite with street overlay',
+			icon: 'globe-americas'
+		},
+		// {
+		// 	id: 'navigation-day',
+		// 	name: 'Navigation Day',
+		// 	url: 'mapbox://styles/mapbox/navigation-day-v1',
+		// 	description: 'Optimized for navigation',
+		// 	icon: 'compass'
+		// },
+		// {
+		// 	id: 'navigation-night',
+		// 	name: 'Navigation Night',
+		// 	url: 'mapbox://styles/mapbox/navigation-night-v1',
+		// 	description: 'Night mode navigation',
+		// 	icon: 'moon'
+		// }
+	];
+
+	interface Props {
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+		/** Storage namespace for persistence */
+		namespace?: string;
+		/** Custom available styles (default: built-in Mapbox styles) */
+		availableStyles?: MapStyle[];
+		/** Default style ID */
+		defaultStyleId?: string;
+	}
+
+	let {
+		position = 'top-right',
+		title = 'Map Style',
+		initiallyCollapsed = false,
+		namespace = 'map',
+		availableStyles = DEFAULT_STYLES,
+		defaultStyleId = 'streets'
+	}: Props = $props();
+
+	const mapStore = useMapbox();
+	let map: mapboxgl.Map | null = null;
+	const storageKey = `${namespace}:mapStyle`;
+
+	// Load persisted style or use default
+	const loadPersistedStyle = (): MapStyle => {
+		if (typeof window === 'undefined') {
+			return availableStyles.find(s => s.id === defaultStyleId) || availableStyles[0];
+		}
+
+		try {
+			const stored = localStorage.getItem(storageKey);
+			if (stored) {
+				const styleId = JSON.parse(stored);
+				const style = availableStyles.find(s => s.id === styleId);
+				if (style) return style;
+			}
+		} catch (e) {
+			console.warn('Failed to load persisted map style:', e);
+		}
+
+		return availableStyles.find(s => s.id === defaultStyleId) || availableStyles[0];
+	};
+
+	let currentStyle = $state<MapStyle>(loadPersistedStyle());
+
+	onMount(() => {
+		const unsub = mapStore.subscribe((m: mapboxgl.Map | null) => {
+			if (!m) return;
+			map = m;
+			
+			// Apply persisted style when map becomes available if it differs
+			// Check if current map style URL matches our persisted style
+			if (currentStyle) {
+				const mapStyle = map.getStyle();
+				// Compare the style URL/source, not the name
+				// mapStyle.sprite contains the base URL we can check against
+				const currentMapStyleUrl = mapStyle?.sprite || '';
+				const needsStyleChange = !currentMapStyleUrl.includes(currentStyle.id);
+				
+				if (needsStyleChange) {
+					console.log('Applying persisted style:', currentStyle.id);
+					map.setStyle(currentStyle.url);
+				}
+			}
+		});
+		return unsub;
+	});
+
+	function handleStyleChange(styleId: string): void {
+		const style = availableStyles.find(s => s.id === styleId);
+		if (!style) {
+			console.warn(`Style with id "${styleId}" not found`);
+			return;
+		}
+
+		// Update local state
+		currentStyle = style;
+
+		// Persist to localStorage
+		if (typeof window !== 'undefined') {
+			try {
+				localStorage.setItem(storageKey, JSON.stringify(styleId));
+			} catch (e) {
+				console.warn('Failed to persist map style:', e);
+			}
+		}
+
+		// Update map directly
+		if (map) {
+			map.setStyle(style.url);
+		}
+	}
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	<div class="map-style-controls">
+		<div class="style-grid">
+			{#each availableStyles as style (style.id)}
+				<button
+					class="style-option"
+					class:active={currentStyle.id === style.id}
+					onclick={() => handleStyleChange(style.id)}
+					title={style.description}
+				>
+					<i class="bi bi-{style.icon || 'map'}"></i>
+					<!-- {#if currentStyle.id === style.id}
+						<div class="style-checkmark">
+							<i class="bi bi-check-circle-fill"></i>
+						</div>
+					{/if} -->
+				</button>
+			{/each}
+		</div>
+		
+		{#if currentStyle.description}
+			<div class="current-style-info">
+				<small class="text-muted">
+					<i class="bi bi-info-circle"></i>
+					{currentStyle.description}
+				</small>
+			</div>
+		{/if}
+	</div>
+</MapControl>
+
+<style>
+	.map-style-controls {
+		min-width: 240px;
+	}
+
+	.style-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 4px;
+		margin-bottom: 8px;
+	}
+
+	.style-option {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 8px;
+		border: 2px solid #ddd;
+		border-radius: 6px;
+		background: white;
+		cursor: pointer;
+		transition: all 0.2s;
+		font-size: 24px;
+		color: #6c757d;
+	}
+
+	.style-option:hover {
+		border-color: #0d6efd;
+		box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
+		transform: translateY(-1px);
+	}
+
+	.style-option.active {
+		border-color: #0d6efd;
+		background: #e7f1ff;
+		color: #0d6efd;
+	}
+
+	.style-name {
+		font-size: 12px;
+		font-weight: 500;
+		text-align: center;
+		color: #333;
+	}
+
+	.style-option.active .style-name {
+		color: #0d6efd;
+		font-weight: 600;
+	}
+
+	.style-checkmark {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		color: #0d6efd;
+		font-size: 18px;
+		background: white;
+		border-radius: 50%;
+		line-height: 1;
+	}
+
+	.current-style-info {
+		padding: 8px;
+		background: #f8f9fa;
+		border-radius: 4px;
+		text-align: center;
+	}
+
+	.current-style-info small {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		font-size: 11px;
+	}
+</style>

package/dist/map-v2/core/controls/MapStyleControl.svelte.d.ts

@@ -0,0 +1,24 @@
+interface MapStyle {
+    id: string;
+    name: string;
+    url: string;
+    description?: string;
+    icon?: string;
+}
+interface Props {
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+    /** Storage namespace for persistence */
+    namespace?: string;
+    /** Custom available styles (default: built-in Mapbox styles) */
+    availableStyles?: MapStyle[];
+    /** Default style ID */
+    defaultStyleId?: string;
+}
+declare const MapStyleControl: import("svelte").Component<Props, {}, "">;
+type MapStyleControl = ReturnType<typeof MapStyleControl>;
+export default MapStyleControl;

package/dist/{map → map-v2/core}/hooks/useMapbox.d.ts

@@ -1,5 +1,5 @@
 /**
- * Hook to safely access the Mapbox instance from context
+ * Hook to access the Mapbox instance from context
  */
 import type { MapStore } from '../types';
 /**

package/dist/{map → map-v2/core}/hooks/useMapbox.js

@@ -1,5 +1,5 @@
 /**
- * Hook to safely access the Mapbox instance from context
+ * Hook to access the Mapbox instance from context
  */
 import { getContext } from 'svelte';
 import { MAP_CONTEXT_KEY } from '../types';

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

@@ -0,0 +1,11 @@
+/**
+ * Core Infrastructure - Public API
+ *
+ * Exports core map types, providers, stores, and hooks
+ */
+export type { MapStore } from './types';
+export { MAP_CONTEXT_KEY } from './types';
+export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
+export { createMapStore } from './stores/mapStore';
+export { useMapbox, tryUseMapbox } from './hooks/useMapbox';

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

@@ -0,0 +1,14 @@
+/**
+ * Core Infrastructure - Public API
+ *
+ * Exports core map types, providers, stores, and hooks
+ */
+export { MAP_CONTEXT_KEY } from './types';
+// Providers
+export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+// Controls
+export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
+// Stores
+export { createMapStore } from './stores/mapStore';
+// Hooks
+export { useMapbox, tryUseMapbox } from './hooks/useMapbox';

package/dist/map-v2/core/providers/MapboxProvider.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	/**
+	 * MapboxProvider - Initializes and provides Mapbox GL JS map instance to child components
+	 * 
+	 * Handles complete map lifecycle:
+	 * - Map initialization with configuration
+	 * - Style loading
+	 * - Optional built-in controls (navigation, scale, etc.)
+	 * - Context distribution to child components
+	 * - Cleanup on unmount
+	 */
+	import { setContext, onMount, onDestroy } from 'svelte';
+	import mapboxgl, { type Map as MapboxMap, type StyleSpecification } from 'mapbox-gl';
+	import { MAP_CONTEXT_KEY } from '../types';
+	import { createMapStore } from '../stores/mapStore';
+	import 'mapbox-gl/dist/mapbox-gl.css';
+
+	interface Props {
+		/** Mapbox access token */
+		accessToken: string;
+		/** Map style URL or style object (default: streets-v12) */
+		style?: string | StyleSpecification;
+		/** Initial map center [lng, lat] */
+		center?: [number, number];
+		/** Initial zoom level */
+		zoom?: number;
+		/** Initial bearing (rotation) */
+		bearing?: number;
+		/** Initial pitch (tilt) */
+		pitch?: number;
+		/** Minimum zoom level */
+		minZoom?: number;
+		/** Maximum zoom level */
+		maxZoom?: number;
+		/** Built-in controls to add */
+		controls?: Array<'navigation' | 'scale' | 'fullscreen' | 'geolocate'>;
+		/** Position for navigation control */
+		navigationPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Position for scale control */
+		scalePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Custom CSS class for container */
+		class?: string;
+		/** Optional child content (layers, controls, etc.) */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		accessToken,
+		style = 'mapbox://styles/mapbox/streets-v12',
+		center = [0, 0],
+		zoom = 2,
+		bearing = 0,
+		pitch = 0,
+		minZoom,
+		maxZoom,
+		controls = [],
+		navigationPosition = 'top-right',
+		scalePosition = 'bottom-left',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Create and set the map store in context
+	const mapStore = createMapStore();
+	setContext(MAP_CONTEXT_KEY, mapStore);
+
+	let mapContainer: HTMLDivElement;
+	let map: MapboxMap | null = null;
+
+	onMount(() => {
+		// Set access token
+		mapboxgl.accessToken = accessToken;
+
+		// Initialize map
+		map = new mapboxgl.Map({
+			container: mapContainer,
+			style,
+			center,
+			zoom,
+			bearing,
+			pitch,
+			minZoom,
+			maxZoom
+		});
+
+		// Add built-in controls
+		if (controls.includes('navigation')) {
+			map.addControl(new mapboxgl.NavigationControl(), navigationPosition);
+		}
+		if (controls.includes('scale')) {
+			map.addControl(new mapboxgl.ScaleControl(), scalePosition);
+		}
+		if (controls.includes('fullscreen')) {
+			map.addControl(new mapboxgl.FullscreenControl());
+		}
+		if (controls.includes('geolocate')) {
+			map.addControl(
+				new mapboxgl.GeolocateControl({
+					positionOptions: {
+						enableHighAccuracy: true
+					},
+					trackUserLocation: true
+				})
+			);
+		}
+
+		// Wait for style to load before distributing map
+		const onStyleLoad = () => {
+			mapStore.set(map);
+		};
+
+		if (map.isStyleLoaded()) {
+			mapStore.set(map);
+		} else {
+			map.once('style.load', onStyleLoad);
+		}
+	});
+
+	onDestroy(() => {
+		if (map) {
+			map.remove();
+			map = null;
+		}
+		mapStore.set(null);
+	});
+</script>
+
+<div bind:this={mapContainer} class="mapbox-container {className}"></div>
+
+{#if children}
+	{@render children()}
+{/if}
+
+<style>
+	.mapbox-container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>

package/dist/map-v2/core/providers/MapboxProvider.svelte.d.ts

@@ -0,0 +1,33 @@
+import { type StyleSpecification } from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+interface Props {
+    /** Mapbox access token */
+    accessToken: string;
+    /** Map style URL or style object (default: streets-v12) */
+    style?: string | StyleSpecification;
+    /** Initial map center [lng, lat] */
+    center?: [number, number];
+    /** Initial zoom level */
+    zoom?: number;
+    /** Initial bearing (rotation) */
+    bearing?: number;
+    /** Initial pitch (tilt) */
+    pitch?: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Built-in controls to add */
+    controls?: Array<'navigation' | 'scale' | 'fullscreen' | 'geolocate'>;
+    /** Position for navigation control */
+    navigationPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Position for scale control */
+    scalePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Custom CSS class for container */
+    class?: string;
+    /** Optional child content (layers, controls, etc.) */
+    children?: import('svelte').Snippet;
+}
+declare const MapboxProvider: import("svelte").Component<Props, {}, "">;
+type MapboxProvider = ReturnType<typeof MapboxProvider>;
+export default MapboxProvider;

package/dist/{map → map-v2/core}/stores/mapStore.d.ts

@@ -1,8 +1,8 @@
 /**
- * Store factory and utilities for Mapbox instance
+ * Map store - Writable store for Mapbox map instance
  */
 import type { MapStore } from '../types';
 /**
- * Creates a writable store for the Mapbox instance
+ * Creates a writable store for the Mapbox map instance
  */
 export declare function createMapStore(): MapStore;

package/dist/{map → map-v2/core}/stores/mapStore.js

@@ -1,9 +1,9 @@
 /**
- * Store factory and utilities for Mapbox instance
+ * Map store - Writable store for Mapbox map instance
  */
 import { writable } from 'svelte/store';
 /**
- * Creates a writable store for the Mapbox instance
+ * Creates a writable store for the Mapbox map instance
  */
 export function createMapStore() {
     return writable(null);

package/dist/map-v2/core/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Core map types
+ */
+import type { Map as MapboxMap } from 'mapbox-gl';
+import type { Writable } from 'svelte/store';
+/**
+ * Map store type - writable store containing the Mapbox instance
+ */
+export type MapStore = Writable<MapboxMap | null>;
+/**
+ * Context key for MapboxProvider
+ */
+export declare const MAP_CONTEXT_KEY: unique symbol;

package/dist/map-v2/core/types.js

@@ -0,0 +1,7 @@
+/**
+ * Core map types
+ */
+/**
+ * Context key for MapboxProvider
+ */
+export const MAP_CONTEXT_KEY = Symbol('mapbox-context');

package/dist/map-v2/demo/DemoMap.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	/**
+	 * DemoMap - Complete demo of map-v2 site feature
+	 *
+	 * Demonstrates:
+	 * - Simplified MapboxProvider with automatic initialization
+	 * - Dynamic map style switching with persistence
+	 * - SitesLayer rendering sites from store
+	 * - SiteFilterControl for hierarchical filtering
+	 * - SiteSizeSlider for visual property adjustment
+	 */
+	import MapboxProvider from '../core/providers/MapboxProvider.svelte';
+	import MapStyleControl from '../core/controls/MapStyleControl.svelte';
+	import SitesLayer from '../features/sites/layers/SitesLayer.svelte';
+	import SiteFilterControl from '../features/sites/controls/SiteFilterControl.svelte';
+	import SiteSizeSlider from '../features/sites/controls/SiteSizeSlider.svelte';
+	import { createSiteStoreContext } from '../features/sites/stores/siteStoreContext.svelte';
+	import { demoSites } from './demo-data';
+
+	interface Props {
+		/** Mapbox access token */
+		accessToken: string;
+		/** Initial map center [lng, lat] (default: San Francisco) */
+		center?: [number, number];
+		/** Initial zoom level (default: 12) */
+		zoom?: number;
+	}
+
+	let {
+		accessToken,
+		center = [-122.4194, 37.7749],
+		zoom = 12
+	}: Props = $props();
+
+	// Create site store with demo data
+	const siteStore = createSiteStoreContext(demoSites);
+
+</script>
+
+<!-- //		controls={['navigation', 'scale']} -->
+<div class="demo-map-container">
+	<MapboxProvider {accessToken} {center} {zoom}>
+		<!-- Site layer - renders circles from store -->
+		<SitesLayer store={siteStore} namespace="demo-sites" />
+
+		<!-- Map style control - switch between map styles -->
+		<MapStyleControl position="top-right" initiallyCollapsed={true} namespace="demo-map" />
+
+		<!-- Site filter control - updates store.filteredSites -->
+		<SiteFilterControl store={siteStore} position="top-left" title="Site Filter" />
+
+		<!-- Site size control - updates store visual properties -->
+		<SiteSizeSlider store={siteStore} position="bottom-right" title="Site Display" />
+	</MapboxProvider>
+</div>
+
+<style>
+	.demo-map-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/{map → map-v2}/demo/DemoMap.svelte.d.ts

@@ -1,10 +1,9 @@
-import 'mapbox-gl/dist/mapbox-gl.css';
 interface Props {
     /** Mapbox access token */
-    accessToken?: string;
-    /** Initial center coordinates [lng, lat] */
+    accessToken: string;
+    /** Initial map center [lng, lat] (default: San Francisco) */
     center?: [number, number];
-    /** Initial zoom level */
+    /** Initial zoom level (default: 12) */
     zoom?: number;
 }
 declare const DemoMap: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +1,8 @@
+/**
+ * Demo cellular data for testing map-v2 site feature
+ */
+import type { Site } from '../features/sites/types';
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export declare const demoSites: Site[];