@smartnet360/svelte-components 0.0.40 → 0.0.42

package/dist/core/Map/mapStore.js

@@ -0,0 +1,136 @@
+/**
+ * Map Store
+ *
+ * Centralized store for map instance and state management.
+ * Allows components to access map instance and react to state changes.
+ */
+import { writable, derived, get } from 'svelte/store';
+/**
+ * Create a map store instance
+ * Each map component should create its own store instance
+ */
+export function createMapStore() {
+    const initialState = {
+        map: null,
+        overlay: null,
+        layers: [],
+        isLoaded: false,
+        center: [-74.5, 40],
+        zoom: 9,
+        pitch: 0,
+        bearing: 0
+    };
+    const store = writable(initialState);
+    return {
+        subscribe: store.subscribe,
+        /**
+         * Set the map instance after initialization
+         */
+        setMap(map) {
+            store.update(state => ({ ...state, map }));
+        },
+        /**
+         * Set the Deck.GL overlay instance
+         */
+        setOverlay(overlay) {
+            store.update(state => ({ ...state, overlay }));
+        },
+        /**
+         * Update Deck.GL layers
+         */
+        setLayers(layers) {
+            const state = get(store);
+            if (state.overlay) {
+                state.overlay.setProps({ layers });
+            }
+            store.update(s => ({ ...s, layers }));
+        },
+        /**
+         * Add a layer to the existing layers
+         */
+        addLayer(layer) {
+            const state = get(store);
+            const newLayers = [...state.layers, layer];
+            if (state.overlay) {
+                state.overlay.setProps({ layers: newLayers });
+            }
+            store.update(s => ({ ...s, layers: newLayers }));
+        },
+        /**
+         * Remove a layer by id
+         */
+        removeLayer(layerId) {
+            const state = get(store);
+            const newLayers = state.layers.filter(l => l.id !== layerId);
+            if (state.overlay) {
+                state.overlay.setProps({ layers: newLayers });
+            }
+            store.update(s => ({ ...s, layers: newLayers }));
+        },
+        /**
+         * Mark map as loaded
+         */
+        setLoaded(isLoaded) {
+            store.update(state => ({ ...state, isLoaded }));
+        },
+        /**
+         * Update map view state
+         */
+        updateViewState(updates) {
+            store.update(state => ({ ...state, ...updates }));
+        },
+        /**
+         * Fly to a location
+         */
+        flyTo(center, zoom, options) {
+            const state = get(store);
+            if (state.map) {
+                state.map.flyTo({
+                    center,
+                    zoom: zoom ?? state.zoom,
+                    duration: options?.duration ?? 1000
+                });
+            }
+        },
+        /**
+         * Fit map to bounds
+         */
+        fitBounds(bounds, padding) {
+            const state = get(store);
+            if (state.map) {
+                state.map.fitBounds(bounds, {
+                    padding: padding ?? 50,
+                    duration: 1000
+                });
+            }
+        },
+        /**
+         * Reset to initial state
+         */
+        reset() {
+            store.set(initialState);
+        },
+        /**
+         * Clean up map resources
+         */
+        destroy() {
+            const state = get(store);
+            if (state.map) {
+                state.map.remove();
+            }
+            this.reset();
+        }
+    };
+}
+/**
+ * Derived store: Check if map is ready to use
+ */
+export function isMapReady(mapStore) {
+    return derived(mapStore, $store => $store.map !== null && $store.overlay !== null && $store.isLoaded);
+}
+/**
+ * Derived store: Get current map instance (null-safe)
+ */
+export function getMapInstance(mapStore) {
+    return derived(mapStore, $store => $store.map);
+}

package/dist/core/Map/types.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Map Component Type Definitions
+ *
+ * Defines types for Mapbox GL + Deck.GL integration
+ */
+import type { Map as MapboxMap } from 'mapbox-gl';
+import type { MapboxOverlay } from '@deck.gl/mapbox';
+import type { Layer } from '@deck.gl/core';
+/**
+ * Map initialization options
+ */
+export interface MapOptions {
+    /** Mapbox access token (required) */
+    accessToken: string;
+    /** Initial map style */
+    style?: string;
+    /** Initial center coordinates [lng, lat] */
+    center?: [number, number];
+    /** Initial zoom level */
+    zoom?: number;
+    /** Initial pitch (tilt) in degrees */
+    pitch?: number;
+    /** Initial bearing (rotation) in degrees */
+    bearing?: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Whether to show navigation controls */
+    showControls?: boolean;
+    /** Whether to show scale control */
+    showScale?: boolean;
+}
+/**
+ * Map state (stored in mapStore)
+ */
+export interface MapState {
+    /** The Mapbox GL instance */
+    map: MapboxMap | null;
+    /** The Deck.GL overlay instance */
+    overlay: MapboxOverlay | null;
+    /** Current Deck.GL layers */
+    layers: Layer[];
+    /** Whether the map is loaded and ready */
+    isLoaded: boolean;
+    /** Current map center */
+    center: [number, number];
+    /** Current zoom level */
+    zoom: number;
+    /** Current pitch */
+    pitch: number;
+    /** Current bearing */
+    bearing: number;
+}
+/**
+ * Map style presets
+ */
+export declare const MAP_STYLES: {
+    readonly streets: "mapbox://styles/mapbox/streets-v12";
+    readonly satellite: "mapbox://styles/mapbox/satellite-v9";
+    readonly satelliteStreets: "mapbox://styles/mapbox/satellite-streets-v12";
+    readonly light: "mapbox://styles/mapbox/light-v11";
+    readonly dark: "mapbox://styles/mapbox/dark-v11";
+    readonly outdoors: "mapbox://styles/mapbox/outdoors-v12";
+    readonly navigationDay: "mapbox://styles/mapbox/navigation-day-v1";
+    readonly navigationNight: "mapbox://styles/mapbox/navigation-night-v1";
+};
+export type MapStyleName = keyof typeof MAP_STYLES;
+/**
+ * Default map options
+ */
+export declare const DEFAULT_MAP_OPTIONS: Partial<MapOptions>;

package/dist/core/Map/types.js

@@ -0,0 +1,32 @@
+/**
+ * Map Component Type Definitions
+ *
+ * Defines types for Mapbox GL + Deck.GL integration
+ */
+/**
+ * Map style presets
+ */
+export const MAP_STYLES = {
+    streets: 'mapbox://styles/mapbox/streets-v12',
+    satellite: 'mapbox://styles/mapbox/satellite-v9',
+    satelliteStreets: 'mapbox://styles/mapbox/satellite-streets-v12',
+    light: 'mapbox://styles/mapbox/light-v11',
+    dark: 'mapbox://styles/mapbox/dark-v11',
+    outdoors: 'mapbox://styles/mapbox/outdoors-v12',
+    navigationDay: 'mapbox://styles/mapbox/navigation-day-v1',
+    navigationNight: 'mapbox://styles/mapbox/navigation-night-v1'
+};
+/**
+ * Default map options
+ */
+export const DEFAULT_MAP_OPTIONS = {
+    style: MAP_STYLES.streets,
+    center: [-74.5, 40],
+    zoom: 9,
+    pitch: 0,
+    bearing: 0,
+    minZoom: 0,
+    maxZoom: 22,
+    showControls: true,
+    showScale: true
+};

package/dist/core/Settings/FieldRenderer.svelte

@@ -9,10 +9,14 @@
 	 * Works with hierarchical store structure.
 	 */
 	
-	export let field: FieldDefinition;
-	export let segmentId: string;
-	export let store: any; // The hierarchical settings store
-	export let value: any;
+	interface Props {
+		field: FieldDefinition;
+		segmentId: string;
+		store: any; // The hierarchical settings store
+		value: any;
+	}
+	
+	let { field, segmentId, store, value }: Props = $props();
 	
 	// Generate unique ID for form elements
 	const inputId = `field-${segmentId}-${field.id}`;
@@ -32,7 +36,7 @@
 				class="form-check-input"
 				checked={value}
 				disabled={field.disabled}
-				on:change={(e) => handleChange(e.currentTarget.checked)}
+				onchange={(e) => handleChange(e.currentTarget.checked)}
 			/>
 			<label class="form-check-label" for={inputId}>
 				{field.label}
@@ -57,7 +61,7 @@
 			maxlength={field.maxLength}
 			pattern={field.pattern}
 			disabled={field.disabled}
-			on:input={(e) => handleChange(e.currentTarget.value)}
+			oninput={(e) => handleChange(e.currentTarget.value)}
 		/>
 		{#if field.description}
 			<div class="form-text">{field.description}</div>
@@ -79,7 +83,7 @@
 				max={field.max}
 				step={field.step}
 				disabled={field.disabled}
-				on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+				oninput={(e) => handleChange(parseFloat(e.currentTarget.value))}
 			/>
 			{#if field.unit}
 				<span class="input-group-text">{field.unit}</span>
@@ -107,7 +111,7 @@
 			max={field.max}
 			step={field.step || 1}
 			disabled={field.disabled}
-			on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+			oninput={(e) => handleChange(parseFloat(e.currentTarget.value))}
 		/>
 		{#if field.description}
 			<div class="form-text">{field.description}</div>
@@ -126,14 +130,14 @@
 				class="form-control form-control-color"
 				value={value}
 				disabled={field.disabled}
-				on:input={(e) => handleChange(e.currentTarget.value)}
+				oninput={(e) => handleChange(e.currentTarget.value)}
 			/>
 			<input
 				type="text"
 				class="form-control"
 				value={value}
 				disabled={field.disabled}
-				on:input={(e) => handleChange(e.currentTarget.value)}
+				oninput={(e) => handleChange(e.currentTarget.value)}
 			/>
 		</div>
 		{#if field.description}
@@ -151,7 +155,7 @@
 			class="form-select"
 			value={value}
 			disabled={field.disabled}
-			on:change={(e) => handleChange(e.currentTarget.value)}
+			onchange={(e) => handleChange(e.currentTarget.value)}
 		>
 			{#each field.options as option}
 				<option value={option.value}>
@@ -179,7 +183,7 @@
 					value={option.value}
 					checked={value === option.value}
 					disabled={field.disabled}
-					on:change={() => handleChange(option.value)}
+					onchange={() => handleChange(option.value)}
 				/>
 				<label class="form-check-label" for={`${inputId}-${index}`}>
 					{option.label}
@@ -199,11 +203,11 @@
 				<span class="text-muted" title={field.tooltip}>ⓘ</span>
 			{/if}
 		</label>
-		<svelte:component
-			this={field.component}
+		{@const Component = field.component}
+		<Component
 			{value}
 			disabled={field.disabled}
-			on:change={(e: CustomEvent) => handleChange(e.detail)}
+			onchange={(e: CustomEvent) => handleChange(e.detail)}
 			{...field.componentProps}
 		/>
 		{#if field.description}

package/dist/core/Settings/FieldRenderer.svelte.d.ts

@@ -1,30 +1,17 @@
 import type { FieldDefinition } from './types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FieldRenderer: $$__sveltets_2_IsomorphicComponent<{
-    /**
-         * Generic Field Renderer
-         *
-         * Renders a form field based on its type definition.
-         * Uses Bootstrap form components for styling.
-         * Works with hierarchical store structure.
-         */ field: FieldDefinition;
+/**
+ * Generic Field Renderer
+ *
+ * Renders a form field based on its type definition.
+ * Uses Bootstrap form components for styling.
+ * Works with hierarchical store structure.
+ */
+interface Props {
+    field: FieldDefinition;
     segmentId: string;
     store: any;
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FieldRenderer = InstanceType<typeof FieldRenderer>;
+}
+declare const FieldRenderer: import("svelte").Component<Props, {}, "">;
+type FieldRenderer = ReturnType<typeof FieldRenderer>;
 export default FieldRenderer;

package/dist/core/Settings/Settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { untrack } from 'svelte';
 	import type { SettingsSchema } from './types';
 	import { createSettingsStore } from './store';
 	import FieldRenderer from './FieldRenderer.svelte';
@@ -22,42 +22,61 @@
 	 * ```
 	 */
 	
-	/** The settings schema defining all segments and fields */
-	export let schema: SettingsSchema;
-	
-	/** The settings store instance (create externally for access in parent) */
-	export let settings: ReturnType<typeof createSettingsStore>;
+	interface Props {
+		/** The settings schema defining all segments and fields */
+		schema: SettingsSchema;
+		/** The settings store instance (create externally for access in parent) */
+		settings: ReturnType<typeof createSettingsStore>;
+		/** Optional: Callback when settings change */
+		onChange?: ((values: any) => void) | undefined;
+	}
 	
-	/** Optional: Callback when settings change */
-	export let onChange: ((values: any) => void) | undefined = undefined;
+	let { schema, settings, onChange }: Props = $props();
 	
 	// Current values (hierarchical structure: { segment: { field: value } })
-	let currentValues: Record<string, Record<string, any>> = {};
+	let currentValues = $state<Record<string, Record<string, any>>>({});
 	
-	// Track collapsed state of segments
-	let collapsedSegments = new Map<string, boolean>();
+	// Track collapsed state of segments - using a plain object for better reactivity
+	let collapsedSegments = $state<Record<string, boolean>>({});
 	
-	onMount(() => {
-		// Initialize collapsed states from schema
+	// Initialize collapsed states from schema (derived, not in effect)
+	let initialCollapsedStates = $derived.by(() => {
+		const states: Record<string, boolean> = {};
 		schema.segments.forEach((segment) => {
-			collapsedSegments.set(segment.id, segment.collapsed || false);
+			states[segment.id] = segment.collapsed || false;
 		});
-		
-		// Subscribe to store changes
-		const unsubscribe = settings.subscribe((values) => {
-			currentValues = values;
-			if (onChange) {
-				onChange(values);
+		return states;
+	});
+	
+	// One-time initialization of collapsed segments
+	$effect(() => {
+		// Use untrack to prevent this from re-running when collapsedSegments changes
+		untrack(() => {
+			if (Object.keys(collapsedSegments).length === 0) {
+				collapsedSegments = { ...initialCollapsedStates };
 			}
 		});
+	});
+	
+	// Subscribe to store changes - this is necessary for external store integration
+	$effect(() => {
+		const unsubscribe = settings.subscribe((values) => {
+			// Using untrack to avoid circular dependencies
+			untrack(() => {
+				currentValues = values;
+			});
+			// Call onChange outside untrack so it can access reactive state if needed
+			onChange?.(values);
+		});
 		
 		return unsubscribe;
 	});
 	
 	function toggleSegment(segmentId: string) {
-		const current = collapsedSegments.get(segmentId) || false;
-		collapsedSegments.set(segmentId, !current);
-		collapsedSegments = collapsedSegments; // Trigger reactivity
+		collapsedSegments = {
+			...collapsedSegments,
+			[segmentId]: !collapsedSegments[segmentId]
+		};
 	}
 	
 	function resetSegmentHandler(segmentId: string) {
@@ -90,7 +109,7 @@
 					<small class="text-muted">Schema v{schema.version}</small>
 				{/if}
 			</div>
-			<button class="btn btn-outline-secondary btn-sm" on:click={resetAll}>
+			<button class="btn btn-outline-secondary btn-sm" onclick={resetAll}>
 				Reset All
 			</button>
 		</div>
@@ -117,24 +136,24 @@
 						<div class="d-flex gap-2">
 							<button
 								class="btn btn-sm btn-link text-decoration-none p-0"
-								on:click={() => resetSegmentHandler(segment.id)}
+								onclick={() => resetSegmentHandler(segment.id)}
 								title="Reset to defaults"
 							>
 								↺
 							</button>
 							<button
 								class="btn btn-sm btn-link text-decoration-none p-0"
-								on:click={() => toggleSegment(segment.id)}
-								title={collapsedSegments.get(segment.id) ? 'Expand' : 'Collapse'}
+								onclick={() => toggleSegment(segment.id)}
+								title={collapsedSegments[segment.id] ? 'Expand' : 'Collapse'}
 							>
-								{collapsedSegments.get(segment.id) ? '▶' : '▼'}
+								{collapsedSegments[segment.id] ? '▶' : '▼'}
 							</button>
 						</div>
 					</div>
 				</div>
 				
 				<!-- Card Body -->
-				{#if !collapsedSegments.get(segment.id)}
+				{#if !collapsedSegments[segment.id]}
 					<div class="card-body">
 						{#each segment.fields as field (field.id)}
 							{#if isFieldVisible(field, segment.id)}

package/dist/core/Settings/Settings.svelte.d.ts

@@ -1,24 +1,30 @@
 import type { SettingsSchema } from './types';
 import { createSettingsStore } from './store';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+/**
+ * Settings Component
+ *
+ * Reusable settings panel that accepts a schema and renders
+ * a data-driven UI with automatic persistence.
+ * Provides hierarchical access: $settings.segment.field
+ *
+ * @example
+ * ```svelte
+ * const settings = createSettingsStore(mySchema, 'myApp');
+ * <Settings schema={mySchema} {settings} />
+ *
+ * // Access settings in parent:
+ * $settings.appearance.theme
+ * $settings.editor.fontSize
+ * ```
+ */
+interface Props {
+    /** The settings schema defining all segments and fields */
+    schema: SettingsSchema;
+    /** The settings store instance (create externally for access in parent) */
+    settings: ReturnType<typeof createSettingsStore>;
+    /** Optional: Callback when settings change */
+    onChange?: ((values: any) => void) | undefined;
 }
-declare const Settings: $$__sveltets_2_IsomorphicComponent<{
-    /** The settings schema defining all segments and fields */ schema: SettingsSchema;
-    /** The settings store instance (create externally for access in parent) */ settings: ReturnType<typeof createSettingsStore>;
-    /** Optional: Callback when settings change */ onChange?: ((values: any) => void) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Settings = InstanceType<typeof Settings>;
+declare const Settings: import("svelte").Component<Props, {}, "">;
+type Settings = ReturnType<typeof Settings>;
 export default Settings;

package/dist/core/index.d.ts

@@ -3,3 +3,4 @@ export * from './Charts/index.js';
 export * from './TreeView/index.js';
 export * from './Settings/index.js';
 export * from './logger/index.js';
+export * from './Map/index.js';

package/dist/core/index.js

@@ -10,3 +10,5 @@ export * from './TreeView/index.js';
 export * from './Settings/index.js';
 // Logger utility for debugging and monitoring
 export * from './logger/index.js';
+// Map component - Mapbox GL + Deck.GL integration
+export * from './Map/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.40",
+	"version": "0.0.42",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -32,22 +32,30 @@
 		}
 	},
 	"peerDependencies": {
+		"bootstrap": "^5.2.3",
+		"dexie": "^4.0.11",
 		"plotly.js-dist-min": "^3.1.0",
 		"svelte": "^5.0.0",
-		"bootstrap": "^5.2.3",
-		"dexie": "^4.0.11"
+		"@turf/turf": "^7.2.0",
+		"deck.gl": "^9.1.0",
+		"mapbox-gl": "^3.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/adapter-static": "^3.0.9",
 		"@sveltejs/kit": "^2.22.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"bootstrap": "^5.2.3",
+		"bootstrap-icons": "^1.13.1",
+		"dexie": "^4.0.11",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
+		"plotly.js-dist-min": "^3.1.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"publint": "^0.3.2",
@@ -56,12 +64,7 @@
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
-		"vite": "^7.0.4",
-		"@sveltejs/adapter-static": "^3.0.9",
-		"bootstrap": "^5.2.3",
-		"bootstrap-icons": "^1.13.1",
-		"dexie": "^4.0.11",
-		"plotly.js-dist-min": "^3.1.0"
+		"vite": "^7.0.4"
 	},
 	"keywords": [
 		"svelte"