@smartnet360/svelte-components 0.0.85 → 0.0.87

package/dist/map-v3/features/sites/stores/site.display.svelte.d.ts

@@ -0,0 +1,20 @@
+export declare class SiteDisplayStore {
+    key: string;
+    radius: number;
+    color: string;
+    opacity: number;
+    strokeColor: string;
+    strokeWidth: number;
+    showLabels: boolean;
+    labelPixelDistance: number;
+    labelFontSize: number;
+    labelColor: string;
+    labelHaloColor: string;
+    labelHaloWidth: number;
+    labels: {
+        primary: string;
+        secondary: string;
+    };
+    constructor();
+}
+export declare function createSiteDisplayStore(): SiteDisplayStore;

package/dist/map-v3/features/sites/stores/site.display.svelte.js

@@ -0,0 +1,63 @@
+import { browser } from '$app/environment';
+export class SiteDisplayStore {
+    key = 'map-v3-site-display';
+    // Circle Appearance
+    radius = $state(6);
+    color = $state('#808080'); // Default gray for sites
+    opacity = $state(0.8);
+    strokeColor = $state('#ffffff');
+    strokeWidth = $state(1);
+    // Label Settings
+    showLabels = $state(false);
+    labelPixelDistance = $state(15);
+    labelFontSize = $state(12);
+    labelColor = $state('#333333');
+    labelHaloColor = $state('#ffffff');
+    labelHaloWidth = $state(1);
+    // Label Fields
+    labels = $state({ primary: 'siteId', secondary: 'none' });
+    constructor() {
+        if (browser) {
+            const saved = localStorage.getItem(this.key);
+            if (saved) {
+                try {
+                    const parsed = JSON.parse(saved);
+                    this.radius = parsed.radius ?? 6;
+                    this.color = parsed.color ?? '#808080';
+                    this.opacity = parsed.opacity ?? 0.8;
+                    this.strokeColor = parsed.strokeColor ?? '#ffffff';
+                    this.strokeWidth = parsed.strokeWidth ?? 1;
+                    this.showLabels = parsed.showLabels ?? false;
+                    this.labelPixelDistance = parsed.labelPixelDistance ?? 15;
+                    this.labelFontSize = parsed.labelFontSize ?? 12;
+                    this.labelColor = parsed.labelColor ?? '#333333';
+                    this.labelHaloColor = parsed.labelHaloColor ?? '#ffffff';
+                    this.labelHaloWidth = parsed.labelHaloWidth ?? 1;
+                    this.labels = parsed.labels ?? { primary: 'siteId', secondary: 'none' };
+                }
+                catch (e) {
+                    console.error('Failed to load site display settings', e);
+                }
+            }
+            $effect(() => {
+                localStorage.setItem(this.key, JSON.stringify({
+                    radius: this.radius,
+                    color: this.color,
+                    opacity: this.opacity,
+                    strokeColor: this.strokeColor,
+                    strokeWidth: this.strokeWidth,
+                    showLabels: this.showLabels,
+                    labelPixelDistance: this.labelPixelDistance,
+                    labelFontSize: this.labelFontSize,
+                    labelColor: this.labelColor,
+                    labelHaloColor: this.labelHaloColor,
+                    labelHaloWidth: this.labelHaloWidth,
+                    labels: this.labels
+                }));
+            });
+        }
+    }
+}
+export function createSiteDisplayStore() {
+    return new SiteDisplayStore();
+}

package/dist/map-v3/features/sites/stores/site.registry.svelte.d.ts

@@ -0,0 +1,13 @@
+export declare class SiteRegistry {
+    namespace: string;
+    hiddenSites: Set<string>;
+    groupColors: Map<string, string>;
+    version: number;
+    constructor(namespace: string);
+    isVisible(siteId: string): boolean;
+    getColor(level1: string, level2: string, defaultColor?: string): string;
+    setGroupColor(level1: string, level2: string, color: string): void;
+    toggleVisibility(siteId: string, visible?: boolean): void;
+    setVisible(siteIds: string[], visible: boolean): void;
+}
+export declare function createSiteRegistry(namespace: string): SiteRegistry;

package/dist/map-v3/features/sites/stores/site.registry.svelte.js

@@ -0,0 +1,83 @@
+import { browser } from '$app/environment';
+export class SiteRegistry {
+    namespace;
+    // Map of siteId -> visible (boolean)
+    // If a siteId is NOT in the map, it is assumed visible (default true)
+    hiddenSites = $state(new Set());
+    // Map of Group ID (e.g. "L1:L2") -> Color
+    groupColors = $state(new Map());
+    // Version counter to trigger reactivity in layers
+    version = $state(0);
+    constructor(namespace) {
+        this.namespace = namespace;
+        if (browser) {
+            // Load state
+            const savedColors = localStorage.getItem(`${this.namespace}:site-colors`);
+            if (savedColors) {
+                try {
+                    const parsed = JSON.parse(savedColors);
+                    this.groupColors = new Map(parsed);
+                }
+                catch (e) {
+                    console.warn('Failed to load site colors', e);
+                }
+            }
+        }
+        $effect(() => {
+            if (browser) {
+                localStorage.setItem(`${this.namespace}:site-colors`, JSON.stringify(Array.from(this.groupColors.entries())));
+            }
+        });
+    }
+    isVisible(siteId) {
+        return !this.hiddenSites.has(siteId);
+    }
+    getColor(level1, level2, defaultColor = '#3388ff') {
+        const key = `${level1}:${level2}`;
+        return this.groupColors.get(key) || defaultColor;
+    }
+    setGroupColor(level1, level2, color) {
+        const key = `${level1}:${level2}`;
+        this.groupColors.set(key, color);
+        // Force reactivity
+        this.groupColors = new Map(this.groupColors);
+        this.version++;
+    }
+    toggleVisibility(siteId, visible) {
+        const isHidden = this.hiddenSites.has(siteId);
+        const shouldBeVisible = visible !== undefined ? visible : isHidden;
+        if (shouldBeVisible) {
+            this.hiddenSites.delete(siteId);
+        }
+        else {
+            this.hiddenSites.add(siteId);
+        }
+        // Force reactivity
+        this.hiddenSites = new Set(this.hiddenSites);
+        this.version++;
+    }
+    setVisible(siteIds, visible) {
+        let changed = false;
+        for (const id of siteIds) {
+            if (visible) {
+                if (this.hiddenSites.has(id)) {
+                    this.hiddenSites.delete(id);
+                    changed = true;
+                }
+            }
+            else {
+                if (!this.hiddenSites.has(id)) {
+                    this.hiddenSites.add(id);
+                    changed = true;
+                }
+            }
+        }
+        if (changed) {
+            this.hiddenSites = new Set(this.hiddenSites);
+            this.version++;
+        }
+    }
+}
+export function createSiteRegistry(namespace) {
+    return new SiteRegistry(namespace);
+}

package/dist/map-v3/features/sites/types.d.ts

@@ -0,0 +1,12 @@
+export interface Site {
+    siteId: string;
+    siteName: string;
+    latitude: number;
+    longitude: number;
+    techs: string[];
+    fbands: string[];
+    provider: string;
+    level1: string;
+    level2: string;
+    cellCount: number;
+}

package/dist/map-v3/features/sites/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,30 @@
+export * from './core';
+export * from './shared';
+export * from './features/cells/types';
+export { default as CellsLayer } from './features/cells/layers/CellsLayer.svelte';
+export { default as CellLabelsLayer } from './features/cells/layers/CellLabelsLayer.svelte';
+export { default as CellFilterControl } from './features/cells/components/CellFilterControl.svelte';
+export { default as CellSettingsPanel } from './features/cells/components/CellSettingsPanel.svelte';
+export * from './features/cells/stores/cell.data.svelte';
+export * from './features/cells/stores/cell.display.svelte';
+export * from './features/cells/stores/cell.registry.svelte';
+export * from './features/repeaters/types';
+export { default as RepeatersLayer } from './features/repeaters/layers/RepeatersLayer.svelte';
+export { default as RepeaterLabelsLayer } from './features/repeaters/layers/RepeaterLabelsLayer.svelte';
+export { default as RepeaterFilterControl } from './features/repeaters/components/RepeaterFilterControl.svelte';
+export { default as RepeaterSettingsPanel } from './features/repeaters/components/RepeaterSettingsPanel.svelte';
+export * from './features/repeaters/stores/repeater.data.svelte';
+export * from './features/repeaters/stores/repeater.display.svelte';
+export * from './features/repeaters/stores/repeater.registry.svelte';
+export * from './features/sites/types';
+export { default as SitesLayer } from './features/sites/layers/SitesLayer.svelte';
+export { default as SiteLabelsLayer } from './features/sites/layers/SiteLabelsLayer.svelte';
+export { default as SiteFilterControl } from './features/sites/components/SiteFilterControl.svelte';
+export { default as SiteSettingsPanel } from './features/sites/components/SiteSettingsPanel.svelte';
+export * from './features/sites/stores/site.data.svelte';
+export * from './features/sites/stores/site.display.svelte';
+export * from './features/sites/stores/site.registry.svelte';
+export { default as DemoMap } from './demo/DemoMap.svelte';
+export { demoCells } from './demo/demo-cells';
+export { demoRepeaters } from './demo/demo-repeaters';
+export { demoSites } from './demo/demo-data';

package/dist/map-v3/index.js

@@ -0,0 +1,36 @@
+// Core
+export * from './core';
+// Shared
+export * from './shared';
+// Features - Cells
+export * from './features/cells/types';
+export { default as CellsLayer } from './features/cells/layers/CellsLayer.svelte';
+export { default as CellLabelsLayer } from './features/cells/layers/CellLabelsLayer.svelte';
+export { default as CellFilterControl } from './features/cells/components/CellFilterControl.svelte';
+export { default as CellSettingsPanel } from './features/cells/components/CellSettingsPanel.svelte';
+export * from './features/cells/stores/cell.data.svelte';
+export * from './features/cells/stores/cell.display.svelte';
+export * from './features/cells/stores/cell.registry.svelte';
+// Features - Repeaters
+export * from './features/repeaters/types';
+export { default as RepeatersLayer } from './features/repeaters/layers/RepeatersLayer.svelte';
+export { default as RepeaterLabelsLayer } from './features/repeaters/layers/RepeaterLabelsLayer.svelte';
+export { default as RepeaterFilterControl } from './features/repeaters/components/RepeaterFilterControl.svelte';
+export { default as RepeaterSettingsPanel } from './features/repeaters/components/RepeaterSettingsPanel.svelte';
+export * from './features/repeaters/stores/repeater.data.svelte';
+export * from './features/repeaters/stores/repeater.display.svelte';
+export * from './features/repeaters/stores/repeater.registry.svelte';
+// Features - Sites
+export * from './features/sites/types';
+export { default as SitesLayer } from './features/sites/layers/SitesLayer.svelte';
+export { default as SiteLabelsLayer } from './features/sites/layers/SiteLabelsLayer.svelte';
+export { default as SiteFilterControl } from './features/sites/components/SiteFilterControl.svelte';
+export { default as SiteSettingsPanel } from './features/sites/components/SiteSettingsPanel.svelte';
+export * from './features/sites/stores/site.data.svelte';
+export * from './features/sites/stores/site.display.svelte';
+export * from './features/sites/stores/site.registry.svelte';
+// Demo
+export { default as DemoMap } from './demo/DemoMap.svelte';
+export { demoCells } from './demo/demo-cells';
+export { demoRepeaters } from './demo/demo-repeaters';
+export { demoSites } from './demo/demo-data';

package/dist/map-v3/shared/controls/MapControl.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	/**
+	 * MapControl - Reusable wrapper for Mapbox custom controls
+	 *
+	 * Creates a custom control that can be positioned anywhere on the map
+	 * and contain any content via slots.
+	 */
+	import { onDestroy, getContext } from 'svelte';
+	import type { IControl, Map as MapboxMap } from 'mapbox-gl';
+	import type { MapStore } from '../../core/stores/map.store.svelte';
+
+	interface Props {
+		/** Position on the map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title (shown in header) */
+		title?: string;
+		/** Optional Bootstrap icon name to render when collapsed */
+		icon?: string;
+		/** When collapsed, should we show only the icon (if provided)? */
+		iconOnlyWhenCollapsed?: boolean;
+		/** Is the control collapsible? */
+		collapsible?: boolean;
+		/** Initial collapsed state */
+		initiallyCollapsed?: boolean;
+		/** Optional callback when collapse state changes */
+		onCollapseToggle?: (collapsed: boolean) => void;
+		/** Custom CSS class for the container */
+		class?: string;
+		/** Child content */
+		children?: import('svelte').Snippet;
+		/** Optional offset from map edge (e.g., '12px') */
+		edgeOffset?: string;
+		/** Width of the map control (e.g., '360px') */
+		controlWidth?: string;
+	}
+
+	let {
+		position = 'top-left',
+		title,
+		icon,
+		iconOnlyWhenCollapsed = true,
+		collapsible = true,
+		initiallyCollapsed = true,
+		onCollapseToggle,
+		class: className = '',
+		children,
+		edgeOffset = '12px',
+		controlWidth = '420px'
+	}: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	
+	if (!mapStore) {
+		console.error('MapControl: No map context available. Make sure MapControl is used inside Map.');
+	}
+
+	let controlElement: HTMLDivElement;
+	let collapsed = $state(initiallyCollapsed);
+	let control: IControl | null = null;
+
+	// Reactively add/remove control when map becomes available/unavailable
+	$effect(() => {
+		const map = mapStore.map;
+		if (map && controlElement) {
+			addControl(map);
+			return () => {
+				removeControl(map);
+			};
+		}
+	});
+
+	function addControl(map: MapboxMap) {
+		if (control) return;
+
+		// Create a custom Mapbox control
+		control = {
+			onAdd: () => {
+				return controlElement;
+			},
+			onRemove: () => {
+				// Cleanup handled in onDestroy/effect cleanup
+			}
+		};
+
+		map.addControl(control, position);
+	}
+
+	function removeControl(map: MapboxMap) {
+		if (control) {
+			try {
+				map.removeControl(control);
+			} catch (e) {
+				// Control may already be removed or map destroyed
+			}
+			control = null;
+		}
+	}
+
+	function toggleCollapse() {
+		collapsed = !collapsed;
+		// Call the callback if provided
+		if (onCollapseToggle) {
+			onCollapseToggle(collapsed);
+		}
+	}
+</script>
+
+<div
+	bind:this={controlElement}
+	class="mapboxgl-ctrl mapboxgl-ctrl-group map-control-container {className}"
+	style="--edge-offset: {edgeOffset}; --map-control-width: {controlWidth};"
+	data-edge-offset={edgeOffset}
+>
+	{#if title || icon}
+		<div class="map-control-header" title={title}>
+			<span class="map-control-title">
+				{#if collapsed && iconOnlyWhenCollapsed && icon}
+					<i class="bi bi-{icon}" aria-hidden="true"></i>
+					{#if title}
+						<span class="visually-hidden">{title}</span>
+					{/if}
+				{:else}
+					{#if title}
+						{title}
+					{:else if icon}
+						<i class="bi bi-{icon}" aria-hidden="true"></i>
+					{/if}
+				{/if}
+			</span>
+			{#if collapsible}
+				<button
+					class="map-control-toggle"
+					onclick={toggleCollapse}
+					aria-label={collapsed ? 'Expand' : 'Collapse'}
+					title={collapsed ? 'Expand' : 'Collapse'}
+				>
+					<i class="bi bi-chevron-{collapsed ? 'down' : 'up'}"></i>
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	{#if !collapsed}
+		<div class="map-control-content">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.map-control-container {
+		background: white;
+		border-radius: 0.6rem; /* modern, slightly larger radius */
+		box-shadow: 0 6px 18px rgba(14, 30, 37, 0.08);
+		overflow: hidden;
+		max-width: var(--map-control-width, 420px);
+		margin: var(--edge-offset, 12px); /* this ensures a default offset from the map edge */
+		font-family: system-ui, -apple-system, sans-serif;
+		/* Ensure it sits above map */
+		pointer-events: auto; 
+	}
+
+	.map-control-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 14px;
+		background: #f8f9fa;
+		border-bottom: 1px solid #dee2e6;
+		font-weight: 600;
+		font-size: 13px;
+		color: #212529;
+	}
+
+	.map-control-title {
+		flex: 1;
+		user-select: none;
+	}
+
+	.map-control-title i {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.1rem;
+	}
+
+	.map-control-toggle {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		color: #6c757d;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 3px;
+		transition: all 0.2s;
+	}
+
+	.map-control-toggle:hover {
+		background: rgba(0, 0, 0, 0.05);
+		color: #212529;
+	}
+
+	.map-control-content {
+		padding: 12px;
+		max-height: var(--map-control-max-height, 420px);
+		overflow-y: auto;
+		font-size: 13px;
+	}
+
+	/* Custom scrollbar */
+	.map-control-content::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.map-control-content::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	.map-control-content::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 4px;
+	}
+
+	.map-control-content::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+
+	.visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>

package/dist/map-v3/shared/controls/MapControl.svelte.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    /** Position on the map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title (shown in header) */
+    title?: string;
+    /** Optional Bootstrap icon name to render when collapsed */
+    icon?: string;
+    /** When collapsed, should we show only the icon (if provided)? */
+    iconOnlyWhenCollapsed?: boolean;
+    /** Is the control collapsible? */
+    collapsible?: boolean;
+    /** Initial collapsed state */
+    initiallyCollapsed?: boolean;
+    /** Optional callback when collapse state changes */
+    onCollapseToggle?: (collapsed: boolean) => void;
+    /** Custom CSS class for the container */
+    class?: string;
+    /** Child content */
+    children?: import('svelte').Snippet;
+    /** Optional offset from map edge (e.g., '12px') */
+    edgeOffset?: string;
+    /** Width of the map control (e.g., '360px') */
+    controlWidth?: string;
+}
+declare const MapControl: import("svelte").Component<Props, {}, "">;
+type MapControl = ReturnType<typeof MapControl>;
+export default MapControl;

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

@@ -0,0 +1 @@
+export { default as MapControl } from './controls/MapControl.svelte';

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

@@ -0,0 +1 @@
+export { default as MapControl } from './controls/MapControl.svelte';

package/package.json

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