@smartnet360/svelte-components 0.0.84 → 0.0.86

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

@@ -45,10 +45,7 @@
 	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
 
 	onMount(() => {
-		console.log('SiteFilterControl: Mounted with', store.allSites.length, 'sites');
-		
 		if (store.allSites.length > 0) {
-			console.log('SiteFilterControl: Building tree...');
 			const treeNodes = buildSiteTree(store.allSites, store.groupColorMap);
 
 			treeStore = createTreeStore({
@@ -57,17 +54,12 @@
 				persistState: true,
 				defaultExpandAll: false
 			});
-			
-			console.log('SiteFilterControl: Tree store created');
 
 			// Subscribe to tree changes and update siteStore
 			if (treeStore) {
 				const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
 					const checkedPaths = treeValue.getCheckedPaths();
-					console.log('TreeStore updated, checked paths:', checkedPaths);
-					
 					const newFilteredSites = getFilteredSites(checkedPaths, store.allSites);
-					console.log('Filtered sites count:', newFilteredSites.length, 'of', store.allSites.length);
 					
 					// Update the site store directly
 					store.filteredSites = newFilteredSites;

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

@@ -74,7 +74,6 @@ export function buildSiteTree(sites, colorMap) {
  * Filters sites based on checked tree paths
  */
 export function getFilteredSites(checkedPaths, allSites) {
-    console.log('getFilteredSites called with paths:', checkedPaths);
     const checkedGroups = new Set();
     const checkedProviders = new Set();
     checkedPaths.forEach((path) => {
@@ -97,16 +96,12 @@ export function getFilteredSites(checkedPaths, allSites) {
             checkedProviders.add(filteredParts[0]);
         }
     });
-    console.log('Checked groups:', Array.from(checkedGroups));
-    console.log('Checked providers:', Array.from(checkedProviders));
     // If "all-sites" is checked and it's the only thing, return all
     if (checkedPaths.includes('all-sites') && checkedGroups.size === 0 && checkedProviders.size === 0) {
-        console.log('All sites root checked, returning all');
         return allSites;
     }
     // If nothing is checked, return empty
     if (checkedGroups.size === 0 && checkedProviders.size === 0) {
-        console.log('Nothing checked, returning empty');
         return [];
     }
     // Filter sites based on checked groups or providers
@@ -116,6 +111,5 @@ export function getFilteredSites(checkedPaths, allSites) {
         const included = checkedGroups.has(key) || checkedProviders.has(site.provider);
         return included;
     });
-    console.log('Filtered:', filtered.length, 'of', allSites.length, 'sites');
     return filtered;
 }

package/dist/map-v3/core/components/Map.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { setContext, onMount, onDestroy } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import 'mapbox-gl/dist/mapbox-gl.css';
+	import { createMapStore } from '../stores/map.store.svelte';
+	import { createViewportStore } from '../stores/viewport.store.svelte';
+
+	interface Props {
+		accessToken: string;
+		style?: string;
+		center?: [number, number];
+		zoom?: number;
+		class?: string;
+		children?: import('svelte').Snippet;
+		namespace?: string;
+	}
+
+	let {
+		accessToken,
+		style = 'mapbox://styles/mapbox/streets-v12',
+		center = [0, 0],
+		zoom = 2,
+		class: className = '',
+		children,
+		namespace = 'map'
+	}: Props = $props();
+
+	let mapContainer: HTMLDivElement;
+	const mapStore = createMapStore();
+	
+	// Initialize viewport store with defaults from props
+	const viewportStore = createViewportStore(namespace, { center, zoom });
+
+	setContext('MAP_CONTEXT', mapStore);
+
+	onMount(() => {
+		mapboxgl.accessToken = accessToken;
+
+		// Use viewport store values for initialization
+		mapStore.init(mapContainer, {
+			style,
+			center: viewportStore.center,
+			zoom: viewportStore.zoom,
+			bearing: viewportStore.bearing,
+			pitch: viewportStore.pitch
+		});
+
+		// Sync Map -> Store
+		const map = mapStore.map;
+		if (map) {
+			const updateStore = () => {
+				viewportStore.updateViewport({
+					center: map.getCenter().toArray() as [number, number],
+					zoom: map.getZoom(),
+					bearing: map.getBearing(),
+					pitch: map.getPitch()
+				});
+			};
+
+			map.on('moveend', updateStore);
+			map.on('zoomend', updateStore);
+			map.on('rotateend', updateStore);
+			map.on('pitchend', updateStore);
+		}
+	});
+
+	onDestroy(() => {
+		mapStore.destroy();
+	});
+</script>
+
+<div class="map-wrapper {className}">
+	<div bind:this={mapContainer} class="map-instance"></div>
+	{#if mapStore.loaded}
+		{@render children?.()}
+	{/if}
+</div>
+
+<style>
+	.map-wrapper {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.map-instance {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/map-v3/core/components/Map.svelte.d.ts

@@ -0,0 +1,13 @@
+import 'mapbox-gl/dist/mapbox-gl.css';
+interface Props {
+    accessToken: string;
+    style?: string;
+    center?: [number, number];
+    zoom?: number;
+    class?: string;
+    children?: import('svelte').Snippet;
+    namespace?: string;
+}
+declare const Map: import("svelte").Component<Props, {}, "">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/map-v3/core/controls/FeatureSettingsControl.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { MapControl } from '../../shared';
+	import CellSettingsPanel from '../../features/cells/components/CellSettingsPanel.svelte';
+	import RepeaterSettingsPanel from '../../features/repeaters/components/RepeaterSettingsPanel.svelte';
+	import SiteSettingsPanel from '../../features/sites/components/SiteSettingsPanel.svelte';
+	import type { CellDisplayStore } from '../../features/cells/stores/cell.display.svelte';
+	import type { RepeaterDisplayStore } from '../../features/repeaters/stores/repeater.display.svelte';
+	import type { SiteDisplayStore } from '../../features/sites/stores/site.display.svelte';
+
+	interface Props {
+		cellDisplayStore: CellDisplayStore;
+		repeaterDisplayStore?: RepeaterDisplayStore;
+		siteDisplayStore?: SiteDisplayStore;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		title?: string;
+		icon?: string;
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		cellDisplayStore,
+		repeaterDisplayStore,
+		siteDisplayStore,
+		position = 'top-right',
+		title = 'Feature Settings',
+		icon = 'sliders',
+		initiallyCollapsed = true
+	}: Props = $props();
+</script>
+
+<MapControl {position} {title} {icon} {initiallyCollapsed} controlWidth="380px" edgeOffset="12px">
+	<div class="d-flex flex-column p-0">
+		<ul class="nav nav-tabs" id="settings-tabs" role="tablist">
+			<!-- Cell Tab -->
+			<li class="nav-item" role="presentation">
+				<button class="nav-link active" id="cell-tab" data-bs-toggle="tab" data-bs-target="#cell" type="button" role="tab">Cells</button>
+			</li>
+			<!-- Site Tab -->
+			{#if siteDisplayStore}
+				<li class="nav-item" role="presentation">
+					<button class="nav-link" id="site-tab" data-bs-toggle="tab" data-bs-target="#site" type="button" role="tab">Sites</button>
+				</li>
+			{/if}
+			<!-- Repeater Tab -->
+			{#if repeaterDisplayStore}
+				<li class="nav-item" role="presentation">
+					<button class="nav-link" id="repeater-tab" data-bs-toggle="tab" data-bs-target="#repeater" type="button" role="tab">Repeaters</button>
+				</li>
+			{/if}
+		</ul>
+		
+		<div class="tab-content rounded-2 shadow-sm bg-white border p-2" id="settings-tab-content">
+			<!-- Cell Panel -->
+			<div class="tab-pane show active" id="cell" role="tabpanel">
+				<CellSettingsPanel displayStore={cellDisplayStore} />
+			</div>
+			<!-- Site Panel -->
+			{#if siteDisplayStore}
+				<div class="tab-pane" id="site" role="tabpanel">
+					<SiteSettingsPanel displayStore={siteDisplayStore} />
+				</div>
+			{/if}
+			<!-- Repeater Panel -->
+			{#if repeaterDisplayStore}
+				<div class="tab-pane" id="repeater" role="tabpanel">
+					<RepeaterSettingsPanel displayStore={repeaterDisplayStore} />
+				</div>
+			{/if}
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	:global(.map-control-content) {
+		padding: 0.25rem;
+	}
+
+	.nav-tabs {
+		border-bottom: 1px solid #dee2e6;
+	}
+
+	.nav-link {
+		border: 1px solid transparent;
+		border-top-left-radius: 0.375rem;
+		border-top-right-radius: 0.375rem;
+		font-size: 0.95rem;
+		font-weight: 500;
+		padding: 0.5rem 1rem;
+		color: #6c757d;
+		white-space: nowrap;
+		min-width: fit-content;
+	}
+
+	.nav-link.active {
+		color: #495057;
+		background-color: #fff;
+		border-color: #dee2e6 #dee2e6 #fff;
+	}
+
+	.tab-content {
+		padding: 0;
+	}
+</style>

package/dist/map-v3/core/controls/FeatureSettingsControl.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CellDisplayStore } from '../../features/cells/stores/cell.display.svelte';
+import type { RepeaterDisplayStore } from '../../features/repeaters/stores/repeater.display.svelte';
+import type { SiteDisplayStore } from '../../features/sites/stores/site.display.svelte';
+interface Props {
+    cellDisplayStore: CellDisplayStore;
+    repeaterDisplayStore?: RepeaterDisplayStore;
+    siteDisplayStore?: SiteDisplayStore;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    title?: string;
+    icon?: string;
+    initiallyCollapsed?: boolean;
+}
+declare const FeatureSettingsControl: import("svelte").Component<Props, {}, "">;
+type FeatureSettingsControl = ReturnType<typeof FeatureSettingsControl>;
+export default FeatureSettingsControl;

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

@@ -0,0 +1,271 @@
+<script lang="ts">
+	/**
+	 * MapStyleControl - Control for switching map styles
+	 * 
+	 * Self-contained control that displays available map styles and allows switching.
+	 * Persists selection to localStorage.
+	 */
+	import { getContext } from 'svelte';
+	import { MapControl } from '../../shared';
+	import type { MapStore } from '../stores/map.store.svelte';
+
+	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'
+		}
+	];
+
+	interface Props {
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Optional header icon */
+		icon?: string;
+		/** Show icon when collapsed (default: true) */
+		iconOnlyWhenCollapsed?: boolean;
+		/** 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',
+		icon = 'layers',
+		iconOnlyWhenCollapsed = true,
+		initiallyCollapsed = true,
+		namespace = 'map',
+		availableStyles = DEFAULT_STYLES,
+		defaultStyleId = 'streets'
+	}: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	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());
+
+	// Apply style when map becomes available
+	$effect(() => {
+		const map = mapStore.map;
+		if (map && 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 || '';
+			// Simple check: if the current style ID isn't in the sprite URL (approximate but usually works for Mapbox styles)
+			// Better check: store the last set style URL in a ref if needed, but this logic from V2 is okay for now.
+			// Actually, let's just set it if it's the first load or if we are sure.
+			// To avoid infinite loops or unnecessary sets, we can check if the map is loaded.
+			
+			// For now, let's trust the user interaction to drive changes, 
+			// but on initial load, we want to enforce the persisted style.
+			// We can't easily read the "URL" back from map.getStyle().
+			
+			// Strategy: We just set it once when the map is first loaded if it differs from default?
+			// Or we can just set it. map.setStyle is relatively cheap if it's the same.
+			// However, mapbox might reload tiles.
+			
+			// Let's stick to the V2 logic: check if sprite includes the ID.
+			const needsStyleChange = !currentMapStyleUrl.includes(currentStyle.id);
+			
+			if (needsStyleChange) {
+				// console.log('Applying persisted style:', currentStyle.id);
+				map.setStyle(currentStyle.url);
+			}
+		}
+	});
+
+	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 (mapStore.map) {
+			mapStore.map.setStyle(style.url);
+		}
+	}
+</script>
+
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
+	<div class="map-style-controls">
+		<div class="style-grid">
+			{#each availableStyles as style (style.id)}
+				<button
+					type="button"
+					class="btn style-option"
+					class:btn-primary={currentStyle.id === style.id}
+					class:btn-outline-secondary={currentStyle.id !== style.id}
+					class:active={currentStyle.id === style.id}
+					onclick={() => handleStyleChange(style.id)}
+					title={style.description}
+				>
+					<i class="bi bi-{style.icon || 'map'} style-icon"></i>
+					<span class="style-name">{style.name}</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	.map-style-controls {
+		min-width: 240px;
+	}
+
+	.style-grid {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.style-option {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.4rem;
+		text-align: center;
+		font-weight: 500;
+		border: var(--bs-btn-border-width, 1px) solid var(
+			--bs-btn-border-color,
+			var(--bs-border-color, #dee2e6)
+		);
+		/* Normalise Bootstrap spacing so icons remain centred */
+		--bs-btn-padding-y: 0.75rem;
+		--bs-btn-padding-x: 0.75rem;
+		--bs-btn-line-height: 1.25;
+		width: 100%;
+		height: auto;
+	}
+
+	.style-option .style-icon {
+		display: block;
+		font-size: 1.2rem;
+		line-height: 1;
+		margin-top: 0.15rem;
+	}
+
+	.style-option .style-name {
+		display: block;
+		font-size: 0.5rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	/* Ensure Bootstrap button variables win inside Mapbox control */
+	.map-style-controls .btn {
+		background-color: var(--bs-btn-bg, transparent);
+		border-color: var(--bs-btn-border-color, currentColor);
+		color: var(--bs-btn-color, inherit);
+		transition: var(--bs-btn-transition, all 0.15s ease);
+		border-radius: var(--bs-btn-border-radius, var(--bs-border-radius, 0.375rem));
+	}
+
+	.map-style-controls .btn:hover,
+	.map-style-controls .btn:focus {
+		background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg, transparent));
+		border-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color, currentColor));
+		color: var(--bs-btn-hover-color, var(--bs-btn-color, inherit));
+	}
+
+	.map-style-controls .btn:disabled,
+	.map-style-controls .btn:disabled:hover {
+		background-color: var(--bs-btn-disabled-bg, var(--bs-btn-bg, transparent));
+		border-color: var(--bs-btn-disabled-border-color, var(--bs-btn-border-color, currentColor));
+		color: var(--bs-btn-disabled-color, var(--bs-btn-color, inherit));
+		opacity: var(--bs-btn-disabled-opacity, 0.65);
+	}
+
+	.map-style-controls .btn-primary {
+		box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.18);
+	}
+</style>

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

@@ -0,0 +1,28 @@
+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;
+    /** Optional header icon */
+    icon?: string;
+    /** Show icon when collapsed (default: true) */
+    iconOnlyWhenCollapsed?: boolean;
+    /** 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-v3/core/index.d.ts

@@ -0,0 +1,3 @@
+export { MapStore, createMapStore } from './stores/map.store.svelte';
+export { default as Map } from './components/Map.svelte';
+export { default as MapStyleControl } from './controls/MapStyleControl.svelte';

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

@@ -0,0 +1,3 @@
+export { MapStore, createMapStore } from './stores/map.store.svelte';
+export { default as Map } from './components/Map.svelte';
+export { default as MapStyleControl } from './controls/MapStyleControl.svelte';

package/dist/map-v3/core/stores/map.store.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare class MapStore {
+    map: import("mapbox-gl").Map | null;
+    loaded: boolean;
+    constructor();
+    init(container: HTMLElement, options: Omit<mapboxgl.MapboxOptions, 'container'>): void;
+    destroy(): void;
+}
+export declare function createMapStore(): MapStore;

package/dist/map-v3/core/stores/map.store.svelte.js

@@ -0,0 +1,29 @@
+import mapboxgl from 'mapbox-gl';
+export class MapStore {
+    map = $state(null);
+    loaded = $state(false);
+    constructor() {
+        // No-op
+    }
+    init(container, options) {
+        if (this.map)
+            return;
+        this.map = new mapboxgl.Map({
+            container,
+            ...options
+        });
+        this.map.on('load', () => {
+            this.loaded = true;
+        });
+    }
+    destroy() {
+        if (this.map) {
+            this.map.remove();
+            this.map = null;
+            this.loaded = false;
+        }
+    }
+}
+export function createMapStore() {
+    return new MapStore();
+}

package/dist/map-v3/core/stores/viewport.store.svelte.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Viewport Store - Manages and persists map viewport state (center, zoom, pitch, bearing)
+ *
+ * Features:
+ * - Reactive state using Svelte 5 runes
+ * - Auto-persists to localStorage via $effect
+ * - Namespace isolation for multiple map instances
+ */
+export interface ViewportState {
+    /** Map center [lng, lat] */
+    center: [number, number];
+    /** Zoom level */
+    zoom: number;
+    /** Map bearing (rotation) in degrees */
+    bearing: number;
+    /** Map pitch (tilt) in degrees */
+    pitch: number;
+}
+export interface ViewportStore {
+    readonly center: [number, number];
+    readonly zoom: number;
+    readonly bearing: number;
+    readonly pitch: number;
+    setCenter(center: [number, number]): void;
+    setZoom(zoom: number): void;
+    setBearing(bearing: number): void;
+    setPitch(pitch: number): void;
+    updateViewport(state: Partial<ViewportState>): void;
+    reset(): void;
+}
+/**
+ * Create a viewport store with persistence
+ *
+ * @param namespace - Unique identifier for localStorage key
+ * @param defaults - Default viewport values (used if no saved state exists)
+ * @returns ViewportStore instance
+ */
+export declare function createViewportStore(namespace: string, defaults?: Partial<ViewportState>): ViewportStore;