@smartnet360/svelte-components 0.0.99 → 0.0.101

package/dist/apps/site-check/SiteCheck.svelte

@@ -7,7 +7,9 @@
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
     import type {ChartMarker, Mode } from '../../index.js';
-	import { checkHealth, getMessage } from '../../core/FeatureRegistry';
+	import { checkHealth } from '../../core/FeatureRegistry';
+	import SiteCheckControls from './SiteCheckControls.svelte';
+	import ResizableSplitPanel from '../../shared/ResizableSplitPanel.svelte';
 
 	interface Props {
 		rawData: CellTrafficRecord[];
@@ -31,28 +33,6 @@
 		cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, 
 		showGroupingSelector = true, useSectorLineStyles = false, onSearch, searchPlaceholder = "Search...", plotlyLayout }: Props = $props();
 
-	// Search state
-	let searchTerm = $state('');
-	
-	// Controls visibility state (starts expanded)
-	let controlsExpanded = $state(true);
-
-	// Handlers
-	function handleSearch() {
-		if (onSearch) {
-			onSearch(searchTerm);
-			log('🔍 Search triggered:', searchTerm);
-		}
-	}
-
-	function handleClearSearch() {
-		searchTerm = '';
-		if (onSearch) {
-			onSearch('');
-			log('🧹 Search cleared');
-		}
-	}
-
 	// Check feature health
 	let isHealthy = $state(checkHealth('sitecheck'));
 
@@ -68,37 +48,7 @@
 	// Single Level 1 select mode - only one Level 1 node per parent at a time (radio behavior)
 	let singleLevel1Select = $state(false);
 
-	// Available field options for grouping levels
-	const fieldOptions: { value: TreeGroupField; label: string }[] = [
-		{ value: 'site', label: 'Site' },
-		{ value: 'band', label: 'Band' },
-		{ value: 'azimuth', label: 'Azimuth' },
-		{ value: 'sector', label: 'Sector' },
-		{ value: 'cellName', label: 'Cell Name' }
-	];
-
-	// Handlers for level changes
-	function handleLevel0Change(value: TreeGroupField) {
-		// Clear level1 if it conflicts with new level0
-		const newLevel1 = treeGrouping.level1 === value ? null : treeGrouping.level1;
-		treeGrouping = {
-			level0: value,
-			level1: newLevel1
-		};
-	}
-
-	function handleLevel1Change(value: TreeGroupField | 'none') {
-		const newLevel1 = value === 'none' ? null : value;
-		treeGrouping = {
-			level0: treeGrouping.level0,
-			level1: newLevel1
-		};
-	}
-
-	// Get available options for level1 (exclude level0)
-	let availableLevel1Options = $derived.by(() => {
-		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
-	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
+	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
 	// Rebuild tree whenever treeGrouping, singleRootSelect, or singleLevel1Select changes
 	$effect(() => {
@@ -106,10 +56,11 @@
 		log('🔄 Rebuilding tree with grouping', { treeGrouping, singleRootSelect, singleLevel1Select });
 
 		// Clear any existing localStorage data to prevent stale state
-		const storageKey = 'site-check:treeState';
+		// This includes both tree state AND chart settings to avoid cell mismatches
 		if (typeof window !== 'undefined') {
-			localStorage.removeItem(storageKey);
-			log('🧹 Cleared localStorage:', storageKey);
+			localStorage.removeItem('site-check:treeState');
+			localStorage.removeItem('charts:globalControls');
+			log('🧹 Cleared localStorage: tree state and chart settings');
 		}
 
 		// Build tree nodes from raw data with custom grouping
@@ -250,227 +201,58 @@
 </script>
 
 <div class="container-fluid vh-100 d-flex flex-column">
-	<!-- Main Content -->
-	<div class="row flex-grow-1" style="min-height: 0;">
-		<!-- Left: Tree View -->
-		<div class="col-lg-3 col-md-4 border-end bg-white d-flex flex-column" style="min-height: 0; height: 100%;">
-			<!-- Collapsible Controls Toggle -->
-			{#if onSearch || showGroupingSelector}
-				<button 
-					class="controls-toggle w-100 text-start p-2 bg-light border-bottom d-flex align-items-center flex-shrink-0"
-					onclick={() => controlsExpanded = !controlsExpanded}
-					aria-expanded={controlsExpanded}
-					aria-label="Toggle controls"
-				>
-					<i class="bi bi-sliders me-2"></i>
-					<span class="fw-semibold small">Controls</span>
-					<i class="bi ms-auto" 
-					   class:bi-chevron-down={controlsExpanded} 
-					   class:bi-chevron-right={!controlsExpanded}>
-					</i>
-				</button>
-			{/if}
-
-			<!-- Collapsible Controls Content -->
-			{#if controlsExpanded}
-				<!-- Search Box -->
-				{#if onSearch}
-					<div class="p-3 border-bottom flex-shrink-0">
-						<label for="searchInput" class="form-label small fw-semibold mb-2">
-							Search
-						</label>
-						<div class="input-group input-group-sm">
-							<input 
-								type="text" 
-								id="searchInput"
-								class="form-control" 
-								placeholder={searchPlaceholder}
-								bind:value={searchTerm}
-								onkeydown={(e) => {
-									if (e.key === 'Enter') {
-										handleSearch();
-									}
-								}}
-							/>
-							{#if searchTerm}
-								<button 
-									class="btn btn-outline-secondary" 
-									type="button"
-									onclick={handleClearSearch}
-									title="Clear search"
-									aria-label="Clear search"
-								>
-									<i class="bi bi-x-lg"></i>
-								</button>
-							{/if}
-							<button 
-								class="btn btn-primary" 
-								type="button"
-								onclick={handleSearch}
-								title="Search"
-								aria-label="Search"
-							>
-								<i class="bi bi-search"></i>
-							</button>
-						</div>
-			</div>
-		{/if}
+	<ResizableSplitPanel namespace="site-check" defaultLeftWidth={25}>
+		{#snippet left()}
+			<div class="bg-white d-flex flex-column" style="height: 100%;">
+				<!-- Controls -->
+				<SiteCheckControls
+					{treeGrouping}
+					{colorDimension}
+					{singleRootSelect}
+					{singleLevel1Select}
+					treeStore={$treeStore}
+					{showGroupingSelector}
+					{onSearch}
+					{searchPlaceholder}
+					onGroupingChange={(g) => (treeGrouping = g)}
+					onColorDimensionChange={(d) => (colorDimension = d)}
+					onSingleRootSelectChange={(e) => (singleRootSelect = e)}
+					onSingleLevel1SelectChange={(e) => (singleLevel1Select = e)}
+				/>
 
-		<!-- Grouping Selector -->
-		{#if showGroupingSelector}
-			<div class="p-3 border-bottom flex-shrink-0">
-				<div class="small fw-semibold mb-2">Tree Grouping</div>
-				
-				<div class="row g-2 mb-2">
-					<!-- Level 0 (Mandatory) -->
-					<div class="col-4">
-						<label for="level0Select" class="form-label small mb-1">Level 0</label>
-						<select 
-							id="level0Select"
-							class="form-select form-select-sm"
-							value={treeGrouping.level0}
-							onchange={(e) => handleLevel0Change(e.currentTarget.value as TreeGroupField)}
-						>
-							{#each fieldOptions as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-					
-					<!-- Level 1 (Optional) -->
-					<div class="col-4">
-						<label for="level1Select" class="form-label small mb-1">Level 1</label>
-						<select 
-							id="level1Select"
-							class="form-select form-select-sm"
-							value={treeGrouping.level1 ?? 'none'}
-							onchange={(e) => handleLevel1Change(e.currentTarget.value as TreeGroupField | 'none')}
-						>
-							<option value="none">None</option>
-							{#each availableLevel1Options as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-					
-					<!-- Color By -->
-					<div class="col-4">
-						<label for="colorDimensionSelect" class="form-label small mb-1">Color By</label>
-						<select 
-							id="colorDimensionSelect"
-							class="form-select form-select-sm"
-							value={colorDimension}
-							onchange={(e) => {
-								colorDimension = e.currentTarget.value as ColorDimension;
-								log('🎨 Color dimension changed:', colorDimension);
-							}}
-						>
-							<option value="band">Band</option>
-							<option value="site">Site</option>
-							<option value="sector">Sector</option>
-							<option value="cellName">Cell Name</option>
-						</select>
-					</div>
-				</div>
-				
-				<!-- Single Root Select Toggle -->
-				<div class="form-check mt-2">
-					<input 
-						class="form-check-input" 
-						type="checkbox" 
-						id="singleRootSelectCheck"
-						checked={singleRootSelect}
-						onchange={(e) => {
-							singleRootSelect = e.currentTarget.checked;
-							log('🔘 Single root select mode:', singleRootSelect);
-							
-							// When enabling single root mode, uncheck all roots except the first one
-							if (singleRootSelect && treeStore) {
-								const store = $treeStore;
-								if (store) {
-									const checkedRoots = store.state.rootPaths.filter(path => 
-										store.state.checkedPaths.has(path)
-									);
-									if (checkedRoots.length > 1) {
-										log('🔘 Multiple roots selected, keeping only first one:', checkedRoots[0]);
-										// Uncheck all except the first
-										for (let i = 1; i < checkedRoots.length; i++) {
-											store.toggle(checkedRoots[i]);
-										}
-									}
-								}
-							}
-						}}
-					/>
-					<label class="form-check-label small" for="singleRootSelectCheck">
-						Single selection on level 0
-					</label>
-				</div>
-				
-				<!-- Single Level 1 Select Toggle -->
-				<div class="form-check mt-2">
-					<input 
-						class="form-check-input" 
-						type="checkbox" 
-						id="singleLevel1SelectCheck"
-						checked={singleLevel1Select}
-						onchange={(e) => {
-							singleLevel1Select = e.currentTarget.checked;
-							log('🔘 Single Level 1 select mode:', singleLevel1Select);
-						}}
-					/>
-					<label class="form-check-label small" for="singleLevel1SelectCheck">
-						Single selection on level 1 
-					</label>
+				<!-- Tree View -->
+				<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
+					{#if treeStore}
+						<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />
+					{/if}
 				</div>
 			</div>
-		{/if}
-	{/if}			<!-- Tree View -->
-			<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
-				{#if treeStore}
-					<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />
+		{/snippet}
+
+		{#snippet right()}
+			<div class="bg-light d-flex flex-column" style="height: 100%;">
+				{#if chartData.length > 0}
+					<ChartComponent
+						layout={chartLayout}
+						data={chartData}
+						{mode}
+						{markers}
+						showGlobalControls={true}
+						enableAdaptation={true}
+						{plotlyLayout}
+						persistSettings={true}
+					/>
+				{:else}
+					<div class="d-flex align-items-center justify-content-center h-100">
+						<div class="text-center text-muted">
+							<h5>No Data Selected</h5>
+						</div>
+					</div>
 				{/if}
 			</div>
-		</div>
-
-		<!-- Right: Charts -->
-		<div class="col-lg-9 col-md-8 bg-light overflow-auto">
-			{#if chartData.length > 0}
-				<ChartComponent
-					layout={chartLayout}
-					data={chartData}
-					mode={mode}
-					markers={markers}
-					showGlobalControls={true}
-					enableAdaptation={true}
-					plotlyLayout={plotlyLayout}
-					persistSettings={true}
-				/>
-			{:else}
-				<div class="d-flex align-items-center justify-content-center h-100">
-					<div class="text-center text-muted">
-						<h5>No Data Selected</h5>
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
+		{/snippet}
+	</ResizableSplitPanel>
 </div>
 
-<style>
-	.controls-toggle {
-		cursor: pointer;
-		border: none;
-		transition: background-color 0.2s;
-	}
-
-	.controls-toggle:hover {
-		background-color: #e9ecef !important;
-	}
 
-	.controls-toggle:focus {
-		outline: 2px solid #0d6efd;
-		outline-offset: -2px;
-	}
-</style>
 

package/dist/apps/site-check/SiteCheckControls.svelte

@@ -0,0 +1,294 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { log } from '../../core/logger';
+	import type { TreeGroupingConfig, TreeGroupField, ColorDimension } from './index';
+
+	interface Props {
+		/** Current tree grouping configuration */
+		treeGrouping: TreeGroupingConfig;
+		/** Current color dimension */
+		colorDimension: ColorDimension;
+		/** Single root select mode */
+		singleRootSelect: boolean;
+		/** Single level 1 select mode */
+		singleLevel1Select: boolean;
+		/** Tree store for enforcing single root selection */
+		treeStore?: any;
+		/** Show grouping selector controls */
+		showGroupingSelector?: boolean;
+		/** Optional search callback */
+		onSearch?: (searchTerm: string) => void;
+		/** Search placeholder text */
+		searchPlaceholder?: string;
+		/** Callback when grouping changes */
+		onGroupingChange?: (grouping: TreeGroupingConfig) => void;
+		/** Callback when color dimension changes */
+		onColorDimensionChange?: (dimension: ColorDimension) => void;
+		/** Callback when single root select changes */
+		onSingleRootSelectChange?: (enabled: boolean) => void;
+		/** Callback when single level 1 select changes */
+		onSingleLevel1SelectChange?: (enabled: boolean) => void;
+	}
+
+	let {
+		treeGrouping,
+		colorDimension,
+		singleRootSelect,
+		singleLevel1Select,
+		treeStore,
+		showGroupingSelector = true,
+		onSearch,
+		searchPlaceholder = 'Search...',
+		onGroupingChange,
+		onColorDimensionChange,
+		onSingleRootSelectChange,
+		onSingleLevel1SelectChange
+	}: Props = $props();
+
+	// Local state
+	let searchTerm = $state('');
+	let controlsExpanded = $state(true);
+
+	// Available field options for grouping levels
+	const fieldOptions: { value: TreeGroupField; label: string }[] = [
+		{ value: 'site', label: 'Site' },
+		{ value: 'band', label: 'Band' },
+		{ value: 'azimuth', label: 'Azimuth' },
+		{ value: 'sector', label: 'Sector' },
+		{ value: 'cellName', label: 'Cell Name' }
+	];
+
+	// Get available options for level1 (exclude level0)
+	let availableLevel1Options = $derived.by(() => {
+		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
+	});
+
+	// Handlers
+	function handleSearch() {
+		if (onSearch) {
+			onSearch(searchTerm);
+			log('🔍 Search triggered:', searchTerm);
+		}
+	}
+
+	function handleClearSearch() {
+		searchTerm = '';
+		if (onSearch) {
+			onSearch('');
+			log('🧹 Search cleared');
+		}
+	}
+
+	function handleLevel0Change(value: TreeGroupField) {
+		const newLevel1 = treeGrouping.level1 === value ? null : treeGrouping.level1;
+		const newGrouping = {
+			level0: value,
+			level1: newLevel1
+		};
+		onGroupingChange?.(newGrouping);
+	}
+
+	function handleLevel1Change(value: TreeGroupField | 'none') {
+		const newLevel1 = value === 'none' ? null : value;
+		const newGrouping = {
+			level0: treeGrouping.level0,
+			level1: newLevel1
+		};
+		onGroupingChange?.(newGrouping);
+	}
+
+	function handleColorDimensionChange(dimension: ColorDimension) {
+		onColorDimensionChange?.(dimension);
+		log('🎨 Color dimension changed:', dimension);
+	}
+
+	function handleSingleRootSelectChange(enabled: boolean) {
+		onSingleRootSelectChange?.(enabled);
+		log('🔘 Single root select mode:', enabled);
+
+		// When enabling single root mode, uncheck all roots except the first one
+		if (enabled && treeStore) {
+			const store = treeStore;
+			if (store) {
+				const checkedRoots = store.state.rootPaths.filter((path: string) =>
+					store.state.checkedPaths.has(path)
+				);
+				if (checkedRoots.length > 1) {
+					log('🔘 Multiple roots selected, keeping only first one:', checkedRoots[0]);
+					for (let i = 1; i < checkedRoots.length; i++) {
+						store.toggle(checkedRoots[i]);
+					}
+				}
+			}
+		}
+	}
+
+	function handleSingleLevel1SelectChange(enabled: boolean) {
+		onSingleLevel1SelectChange?.(enabled);
+		log('🔘 Single Level 1 select mode:', enabled);
+	}
+</script>
+
+{#if onSearch || showGroupingSelector}
+	<!-- Collapsible Controls Toggle -->
+	<button
+		class="controls-toggle w-100 text-start p-2 bg-light border-bottom d-flex align-items-center flex-shrink-0"
+		onclick={() => (controlsExpanded = !controlsExpanded)}
+		aria-expanded={controlsExpanded}
+		aria-label="Toggle controls"
+	>
+		<i class="bi bi-sliders me-2"></i>
+		<span class="fw-semibold small">Controls</span>
+		<i
+			class="bi ms-auto"
+			class:bi-chevron-down={controlsExpanded}
+			class:bi-chevron-right={!controlsExpanded}
+		></i>
+	</button>
+
+	<!-- Collapsible Controls Content -->
+	{#if controlsExpanded}
+		<!-- Search Box -->
+		{#if onSearch}
+			<div class="p-3 border-bottom flex-shrink-0">
+				<label for="searchInput" class="form-label small fw-semibold mb-2"> Search </label>
+				<div class="input-group input-group-sm">
+					<input
+						type="text"
+						id="searchInput"
+						class="form-control"
+						placeholder={searchPlaceholder}
+						bind:value={searchTerm}
+						onkeydown={(e) => {
+							if (e.key === 'Enter') {
+								handleSearch();
+							}
+						}}
+					/>
+					{#if searchTerm}
+						<button
+							class="btn btn-outline-secondary"
+							type="button"
+							onclick={handleClearSearch}
+							title="Clear search"
+							aria-label="Clear search"
+						>
+							<i class="bi bi-x-lg"></i>
+						</button>
+					{/if}
+					<button
+						class="btn btn-primary"
+						type="button"
+						onclick={handleSearch}
+						title="Search"
+						aria-label="Search"
+					>
+						<i class="bi bi-search"></i>
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Grouping Selector -->
+		{#if showGroupingSelector}
+			<div class="p-3 border-bottom flex-shrink-0">
+				<div class="small fw-semibold mb-2">Tree Grouping</div>
+
+				<div class="row g-2 mb-2">
+					<!-- Level 0 (Mandatory) -->
+					<div class="col-4">
+						<label for="level0Select" class="form-label small mb-1">Level 0</label>
+						<select
+							id="level0Select"
+							class="form-select form-select-sm"
+							value={treeGrouping.level0}
+							onchange={(e) => handleLevel0Change(e.currentTarget.value as TreeGroupField)}
+						>
+							{#each fieldOptions as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Level 1 (Optional) -->
+					<div class="col-4">
+						<label for="level1Select" class="form-label small mb-1">Level 1</label>
+						<select
+							id="level1Select"
+							class="form-select form-select-sm"
+							value={treeGrouping.level1 ?? 'none'}
+							onchange={(e) => handleLevel1Change(e.currentTarget.value as TreeGroupField | 'none')}
+						>
+							<option value="none">None</option>
+							{#each availableLevel1Options as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Color By -->
+					<div class="col-4">
+						<label for="colorDimensionSelect" class="form-label small mb-1">Color By</label>
+						<select
+							id="colorDimensionSelect"
+							class="form-select form-select-sm"
+							value={colorDimension}
+							onchange={(e) => handleColorDimensionChange(e.currentTarget.value as ColorDimension)}
+						>
+							<option value="band">Band</option>
+							<option value="site">Site</option>
+							<option value="sector">Sector</option>
+							<option value="cellName">Cell Name</option>
+						</select>
+					</div>
+				</div>
+
+				<!-- Single Root Select Toggle -->
+				<div class="form-check mt-2">
+					<input
+						class="form-check-input"
+						type="checkbox"
+						id="singleRootSelectCheck"
+						checked={singleRootSelect}
+						onchange={(e) => handleSingleRootSelectChange(e.currentTarget.checked)}
+					/>
+					<label class="form-check-label small" for="singleRootSelectCheck">
+						Single selection on level 0
+					</label>
+				</div>
+
+				<!-- Single Level 1 Select Toggle -->
+				<div class="form-check mt-2">
+					<input
+						class="form-check-input"
+						type="checkbox"
+						id="singleLevel1SelectCheck"
+						checked={singleLevel1Select}
+						onchange={(e) => handleSingleLevel1SelectChange(e.currentTarget.checked)}
+					/>
+					<label class="form-check-label small" for="singleLevel1SelectCheck">
+						Single selection on level 1
+					</label>
+				</div>
+			</div>
+		{/if}
+	{/if}
+{/if}
+
+<style>
+	.controls-toggle {
+		cursor: pointer;
+		border: none;
+		transition: background-color 0.2s;
+	}
+
+	.controls-toggle:hover {
+		background-color: #e9ecef !important;
+	}
+
+	.controls-toggle:focus {
+		outline: 2px solid #0d6efd;
+		outline-offset: -2px;
+	}
+</style>

package/dist/apps/site-check/SiteCheckControls.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { TreeGroupingConfig, ColorDimension } from './index';
+interface Props {
+    /** Current tree grouping configuration */
+    treeGrouping: TreeGroupingConfig;
+    /** Current color dimension */
+    colorDimension: ColorDimension;
+    /** Single root select mode */
+    singleRootSelect: boolean;
+    /** Single level 1 select mode */
+    singleLevel1Select: boolean;
+    /** Tree store for enforcing single root selection */
+    treeStore?: any;
+    /** Show grouping selector controls */
+    showGroupingSelector?: boolean;
+    /** Optional search callback */
+    onSearch?: (searchTerm: string) => void;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Callback when grouping changes */
+    onGroupingChange?: (grouping: TreeGroupingConfig) => void;
+    /** Callback when color dimension changes */
+    onColorDimensionChange?: (dimension: ColorDimension) => void;
+    /** Callback when single root select changes */
+    onSingleRootSelectChange?: (enabled: boolean) => void;
+    /** Callback when single level 1 select changes */
+    onSingleLevel1SelectChange?: (enabled: boolean) => void;
+}
+declare const SiteCheckControls: import("svelte").Component<Props, {}, "">;
+type SiteCheckControls = ReturnType<typeof SiteCheckControls>;
+export default SiteCheckControls;

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

@@ -87,9 +87,19 @@
 		alert(`Selected ${siteIds.length} sites:\n${siteIds.join(', ')}`);
 	}
 	
-	// Handler for generic feature selection action button
-	function handleProcessFeatures(featureIds: string[]) {
-		alert(`Selected ${featureIds.length} features:\n${featureIds.join(', ')}`);
+	// Handler for cluster processing
+	function handleProcessCluster(featureIds: string[]) {
+		alert(`Processing cluster with ${featureIds.length} features:\n${featureIds.join(', ')}`);
+	}
+	
+	// Handler for data export
+	function handleExportData(featureIds: string[]) {
+		alert(`Exporting ${featureIds.length} features:\n${featureIds.join(', ')}`);
+	}
+	
+	// Handler for feature analysis
+	function handleAnalyzeFeatures(featureIds: string[]) {
+		alert(`Analyzing ${featureIds.length} features:\n${featureIds.join(', ')}`);
 	}
 	
 	// Cell filter grouping configuration
@@ -231,12 +241,34 @@
 		<FeatureSelectionControl
 			position="bottom-left"
 			title="Cluster Tool"
-			icon="speedometer2"
+			icon="bi bi-graph-up"
 			iconOnlyWhenCollapsed={useIconHeaders}
-			onAction={handleProcessFeatures}
-			actionButtonLabel="Process Cluster"
 			featureIcon="pin-map-fill"
-		/>
+		>
+			{#snippet children(selectedIds)}
+				<button 
+					class="btn btn-primary"
+					disabled={selectedIds.length === 0}
+					onclick={() => handleProcessCluster(selectedIds)}
+				>
+					<i class="bi bi-lightning-charge-fill"></i> Process Cluster
+				</button>
+				<button 
+					class="btn btn-success"
+					disabled={selectedIds.length === 0}
+					onclick={() => handleExportData(selectedIds)}
+				>
+					<i class="bi bi-download"></i> Export Data
+				</button>
+				<button 
+					class="btn btn-info"
+					disabled={selectedIds.length === 0}
+					onclick={() => handleAnalyzeFeatures(selectedIds)}
+				>
+					<i class="bi bi-graph-up"></i> Analyze
+				</button>
+			{/snippet}
+		</FeatureSelectionControl>
 
 		<!-- Unified feature settings control - Sites, Cells, and Repeaters -->
 		<FeatureSettingsControl

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte

@@ -28,16 +28,14 @@
 		icon?: string;
 		/** Show icon when collapsed (default: true) */
 		iconOnlyWhenCollapsed?: boolean;
-		/** Callback when action button clicked */
-		onAction?: (featureIds: string[]) => void;
-		/** Action button label */
-		actionButtonLabel?: string;
 		/** Feature icon (default: geo-alt-fill) */
 		featureIcon?: string;
 		/** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
 		idPropertyOptions?: string[];
 		/** Default property to use as ID (default: 'id') */
 		defaultIdProperty?: string;
+		/** Slot for custom action buttons that receive selected feature IDs */
+		children?: import('svelte').Snippet<[string[]]>;
 	}
 	
 	let {
@@ -45,11 +43,10 @@
 		title = 'Cluster Tool',
 		icon = 'speedometer2',
 		iconOnlyWhenCollapsed = true,
-		onAction,
-		actionButtonLabel = 'Process Cluster',
 		featureIcon = 'geo-alt-fill',
 		idPropertyOptions = ['none','siteId','sectorId', 'cellName','id'],
-		defaultIdProperty = 'none'
+		defaultIdProperty = 'none',
+		children
 	}: Props = $props();
 	
 	// Get map from context
@@ -228,13 +225,6 @@
 			console.error('Failed to copy:', err);
 		}
 	}
-	
-	function handleAction() {
-		if (onAction && hasSelection) {
-			const ids = store.getSelectedIds();
-			onAction(ids);
-		}
-	}
 </script>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} onCollapseToggle={handleCollapseToggle}>
@@ -316,17 +306,10 @@
 			</div>
 		{/if}
 		
-		<!-- Action Button -->
-		{#if onAction}
-			<div class="mt-3">
-				<button
-					type="button"
-					class="btn btn-primary w-100"
-					disabled={!hasSelection}
-					onclick={handleAction}
-				>
-					<i class="bi bi-lightning-charge-fill"></i> {actionButtonLabel}
-				</button>
+		<!-- Custom Action Buttons Slot -->
+		{#if children}
+			<div class="mt-3 action-slot">
+				{@render children(store.getSelectedIds())}
 			</div>
 		{/if}
 	</div>
@@ -435,6 +418,18 @@
 		background-color: #ffcccc;
 	}
 
+	/* Action slot styles */
+	.action-slot {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	/* Ensure action slot buttons maintain Bootstrap styling */
+	.action-slot :global(.btn) {
+		width: 100%;
+	}
+
 	/* Ensure primary action button keeps Bootstrap styling inside Mapbox control */
 	.feature-selection-control .btn-primary {
 		background-color: var(--bs-btn-bg, var(--bs-primary));

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte.d.ts

@@ -7,16 +7,14 @@ interface Props {
     icon?: string;
     /** Show icon when collapsed (default: true) */
     iconOnlyWhenCollapsed?: boolean;
-    /** Callback when action button clicked */
-    onAction?: (featureIds: string[]) => void;
-    /** Action button label */
-    actionButtonLabel?: string;
     /** Feature icon (default: geo-alt-fill) */
     featureIcon?: string;
     /** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
     idPropertyOptions?: string[];
     /** Default property to use as ID (default: 'id') */
     defaultIdProperty?: string;
+    /** Slot for custom action buttons that receive selected feature IDs */
+    children?: import('svelte').Snippet<[string[]]>;
 }
 declare const FeatureSelectionControl: import("svelte").Component<Props, {}, "">;
 type FeatureSelectionControl = ReturnType<typeof FeatureSelectionControl>;

package/dist/shared/ResizableSplitPanel.svelte

@@ -0,0 +1,175 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		/** Namespace for localStorage persistence */
+		namespace?: string;
+		/** Initial left panel width percentage (default: 25) */
+		defaultLeftWidth?: number;
+		/** Minimum left panel width percentage (default: 15) */
+		minLeftWidth?: number;
+		/** Maximum left panel width percentage (default: 60) */
+		maxLeftWidth?: number;
+		/** Left panel content */
+		left: import('svelte').Snippet;
+		/** Right panel content */
+		right: import('svelte').Snippet;
+	}
+
+	let {
+		namespace = 'split-panel',
+		defaultLeftWidth = 25,
+		minLeftWidth = 15,
+		maxLeftWidth = 60,
+		left,
+		right
+	}: Props = $props();
+
+	// State
+	let leftWidth = $state(defaultLeftWidth);
+	let isDragging = $state(false);
+	let containerRef: HTMLDivElement;
+
+	// Load saved split position from localStorage
+	onMount(() => {
+		const storageKey = `${namespace}:splitPosition`;
+		const saved = localStorage.getItem(storageKey);
+		if (saved) {
+			const parsed = parseFloat(saved);
+			if (!isNaN(parsed) && parsed >= minLeftWidth && parsed <= maxLeftWidth) {
+				leftWidth = parsed;
+			}
+		}
+	});
+
+	// Handle resize drag
+	function handleResizeStart(e: MouseEvent) {
+		isDragging = true;
+		e.preventDefault();
+
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!isDragging || !containerRef) return;
+
+			const rect = containerRef.getBoundingClientRect();
+			const newWidth = ((e.clientX - rect.left) / rect.width) * 100;
+
+			// Clamp between min and max
+			leftWidth = Math.max(minLeftWidth, Math.min(maxLeftWidth, newWidth));
+		};
+
+		const handleMouseUp = () => {
+			isDragging = false;
+			// Save to localStorage
+			const storageKey = `${namespace}:splitPosition`;
+			localStorage.setItem(storageKey, leftWidth.toString());
+			document.removeEventListener('mousemove', handleMouseMove);
+			document.removeEventListener('mouseup', handleMouseUp);
+		};
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+	}
+</script>
+
+<div class="resizable-container" bind:this={containerRef} class:dragging={isDragging}>
+	<!-- Left Panel -->
+	<div class="left-panel" style="width: {leftWidth}%;">
+		{@render left()}
+	</div>
+
+	<!-- Vertical Resize Handle -->
+	<button
+		class="resize-handle"
+		class:dragging={isDragging}
+		onmousedown={handleResizeStart}
+		aria-label="Resize split between panels"
+		type="button"
+	>
+		<div class="resize-handle-indicator"></div>
+	</button>
+
+	<!-- Right Panel -->
+	<div class="right-panel" style="width: {100 - leftWidth}%;">
+		{@render right()}
+	</div>
+</div>
+
+<style>
+	.resizable-container {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.left-panel {
+		position: relative;
+		border-right: 1px solid #dee2e6;
+		min-width: 200px;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.right-panel {
+		position: relative;
+		flex: 1;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	/* Vertical Resize Handle */
+	.resize-handle {
+		position: relative;
+		width: 8px;
+		cursor: col-resize;
+		z-index: 100;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s;
+		flex-shrink: 0;
+		border: none;
+		padding: 0;
+		background-color: transparent;
+		height: 100%;
+	}
+
+	.resize-handle:hover {
+		background-color: rgba(13, 110, 253, 0.1);
+	}
+
+	.resize-handle.dragging {
+		background-color: rgba(13, 110, 253, 0.2);
+	}
+
+	.resize-handle-indicator {
+		width: 2px;
+		height: 40px;
+		background-color: #dee2e6;
+		border-radius: 1px;
+		transition: all 0.2s;
+	}
+
+	.resize-handle:hover .resize-handle-indicator {
+		background-color: #0d6efd;
+		height: 60px;
+		width: 3px;
+	}
+
+	.resize-handle.dragging .resize-handle-indicator {
+		background-color: #0d6efd;
+		height: 80px;
+		width: 4px;
+	}
+
+	/* Prevent text selection during drag */
+	.resizable-container.dragging,
+	.resizable-container.dragging * {
+		user-select: none !important;
+		-webkit-user-select: none !important;
+	}
+</style>

package/dist/shared/ResizableSplitPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Namespace for localStorage persistence */
+    namespace?: string;
+    /** Initial left panel width percentage (default: 25) */
+    defaultLeftWidth?: number;
+    /** Minimum left panel width percentage (default: 15) */
+    minLeftWidth?: number;
+    /** Maximum left panel width percentage (default: 60) */
+    maxLeftWidth?: number;
+    /** Left panel content */
+    left: import('svelte').Snippet;
+    /** Right panel content */
+    right: import('svelte').Snippet;
+}
+declare const ResizableSplitPanel: import("svelte").Component<Props, {}, "">;
+type ResizableSplitPanel = ReturnType<typeof ResizableSplitPanel>;
+export default ResizableSplitPanel;

package/package.json

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