@smartnet360/svelte-components 0.0.85 → 0.0.86

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;

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

@@ -0,0 +1,107 @@
+/**
+ * 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
+ */
+const DEFAULT_STATE = {
+    center: [0, 0],
+    zoom: 2,
+    bearing: 0,
+    pitch: 0
+};
+/**
+ * Load viewport state from localStorage
+ */
+function loadViewportState(namespace, defaults) {
+    if (typeof window === 'undefined') {
+        return { ...DEFAULT_STATE, ...defaults };
+    }
+    try {
+        const key = `${namespace}:viewport`;
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            return {
+                center: parsed.center || defaults.center || DEFAULT_STATE.center,
+                zoom: parsed.zoom ?? defaults.zoom ?? DEFAULT_STATE.zoom,
+                bearing: parsed.bearing ?? defaults.bearing ?? DEFAULT_STATE.bearing,
+                pitch: parsed.pitch ?? defaults.pitch ?? DEFAULT_STATE.pitch
+            };
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load viewport state:', error);
+    }
+    return { ...DEFAULT_STATE, ...defaults };
+}
+/**
+ * Save viewport state to localStorage
+ */
+function saveViewportState(namespace, state) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        const key = `${namespace}:viewport`;
+        localStorage.setItem(key, JSON.stringify(state));
+    }
+    catch (error) {
+        console.warn('Failed to save viewport state:', error);
+    }
+}
+/**
+ * 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 function createViewportStore(namespace, defaults = {}) {
+    // Load initial state
+    let state = $state(loadViewportState(namespace, defaults));
+    // Auto-save to localStorage on any change
+    $effect(() => {
+        saveViewportState(namespace, state);
+    });
+    return {
+        // Getters
+        get center() { return state.center; },
+        get zoom() { return state.zoom; },
+        get bearing() { return state.bearing; },
+        get pitch() { return state.pitch; },
+        // Setters
+        setCenter(center) {
+            state.center = center;
+        },
+        setZoom(zoom) {
+            state.zoom = zoom;
+        },
+        setBearing(bearing) {
+            state.bearing = bearing;
+        },
+        setPitch(pitch) {
+            state.pitch = pitch;
+        },
+        // Bulk update (more efficient than individual setters)
+        updateViewport(updates) {
+            if (updates.center !== undefined)
+                state.center = updates.center;
+            if (updates.zoom !== undefined)
+                state.zoom = updates.zoom;
+            if (updates.bearing !== undefined)
+                state.bearing = updates.bearing;
+            if (updates.pitch !== undefined)
+                state.pitch = updates.pitch;
+        },
+        // Reset to defaults
+        reset() {
+            const resetState = { ...DEFAULT_STATE, ...defaults };
+            state.center = resetState.center;
+            state.zoom = resetState.zoom;
+            state.bearing = resetState.bearing;
+            state.pitch = resetState.pitch;
+        }
+    };
+}

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Map, MapStyleControl } from '../core';
+	import { CellsLayer, CellLabelsLayer } from '../features/cells/layers';
+	import { createCellDataStore } from '../features/cells/stores/cell.data.svelte';
+	import { createCellRegistry } from '../features/cells/stores/cell.registry.svelte';
+	import { CellDisplayStore } from '../features/cells/stores/cell.display.svelte';
+	import FeatureSettingsControl from '../core/controls/FeatureSettingsControl.svelte';
+	import CellFilterControl from '../features/cells/components/CellFilterControl.svelte';
+	import { createRepeaterDataStore } from '../features/repeaters/stores/repeater.data.svelte';
+	import { createRepeaterRegistry } from '../features/repeaters/stores/repeater.registry.svelte';
+	import { RepeaterDisplayStore } from '../features/repeaters/stores/repeater.display.svelte';
+	import RepeaterFilterControl from '../features/repeaters/components/RepeaterFilterControl.svelte';
+	import RepeatersLayer from '../features/repeaters/layers/RepeatersLayer.svelte';
+	import RepeaterLabelsLayer from '../features/repeaters/layers/RepeaterLabelsLayer.svelte';
+	import { createSiteDataStore } from '../features/sites/stores/site.data.svelte';
+	import { createSiteDisplayStore } from '../features/sites/stores/site.display.svelte';
+	import SitesLayer from '../features/sites/layers/SitesLayer.svelte';
+	import SiteLabelsLayer from '../features/sites/layers/SiteLabelsLayer.svelte';
+	import SiteFilterControl from '../features/sites/components/SiteFilterControl.svelte';
+	import { createSiteRegistry } from '../features/sites/stores/site.registry.svelte';
+	import { demoCells } from './demo-cells';
+	import { demoRepeaters } from './demo-repeaters';
+
+	interface Props {
+		accessToken: string;
+	}
+
+	let { accessToken }: Props = $props();
+
+	// Initialize stores
+	const cellData = createCellDataStore();
+	const cellRegistry = createCellRegistry('demo-map');
+	const cellDisplay = new CellDisplayStore();
+
+	const siteData = createSiteDataStore(cellData);
+	const siteRegistry = createSiteRegistry('demo-map');
+	const siteDisplay = createSiteDisplayStore();
+
+	const repeaterData = createRepeaterDataStore();
+	const repeaterRegistry = createRepeaterRegistry('demo-map');
+	const repeaterDisplay = new RepeaterDisplayStore();
+
+	onMount(() => {
+		// Load dummy data
+		// Need to cast or map if types slightly differ, but they should match
+		cellData.setCells(demoCells as any);
+		repeaterData.setRepeaters(demoRepeaters);
+	});
+</script>
+
+<div class="map-wrapper">
+	<Map
+
+		{accessToken}
+		center={[19.0402, 47.4979]}
+		zoom={13}
+		namespace="demo-map"
+	>
+		<MapStyleControl position="top-right" namespace="demo-map" />
+		
+		<CellFilterControl 
+			position="top-left" 
+			dataStore={cellData} 
+			registry={cellRegistry} 
+			displayStore={cellDisplay}
+		/>
+
+		<SiteFilterControl 
+			position="top-left" 
+			dataStore={siteData} 
+			registry={siteRegistry} 
+			displayStore={siteDisplay}
+		/>
+
+		<RepeaterFilterControl 
+			position="top-left" 
+			dataStore={repeaterData} 
+			registry={repeaterRegistry} 
+			displayStore={repeaterDisplay}
+		/>
+
+		<FeatureSettingsControl 
+			position="top-right" 
+			cellDisplayStore={cellDisplay} 
+			repeaterDisplayStore={repeaterDisplay}
+			siteDisplayStore={siteDisplay}
+		/>
+		
+		<SitesLayer dataStore={siteData} displayStore={siteDisplay} registry={siteRegistry} />
+		<SiteLabelsLayer dataStore={siteData} displayStore={siteDisplay} registry={siteRegistry} />
+		<CellsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
+		<CellLabelsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
+		<RepeatersLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
+		<RepeaterLabelsLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
+	</Map>
+</div>
+
+<style>
+	.map-wrapper {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/map-v3/demo/DemoMap.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    accessToken: string;
+}
+declare const DemoMap: import("svelte").Component<Props, {}, "">;
+type DemoMap = ReturnType<typeof DemoMap>;
+export default DemoMap;

package/dist/map-v3/demo/demo-cells.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Demo Cell Data
+ *
+ * 100 sites across San Francisco Bay Area
+ * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
+ * Each sector has 12 cells (all tech-band combinations)
+ * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+import type { Cell } from '../features/cells/types';
+/**
+ * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+export declare const demoCells: Cell[];