@smartnet360/svelte-components 0.0.39 → 0.0.41

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.39",
+	"version": "0.0.41",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -32,22 +32,27 @@
 		}
 	},
 	"peerDependencies": {
-		"plotly.js-dist-min": "^3.1.0",
-		"svelte": "^5.0.0",
 		"bootstrap": "^5.2.3",
-		"dexie": "^4.0.11"
+		"dexie": "^4.0.11",
+		"plotly.js-dist-min": "^3.1.0",
+		"svelte": "^5.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,15 +61,14 @@
 		"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"
 	],
-	"dependencies": {}
+	"dependencies": {
+		"@turf/turf": "^7.2.0",
+		"deck.gl": "^9.2.2",
+		"mapbox-gl": "^3.15.0"
+	}
 }