@smartnet360/svelte-components 0.0.74 → 0.0.76

package/dist/map-v2/features/repeaters/layers/RepeatersLayer.svelte

@@ -17,6 +17,7 @@
 	import { useMapbox } from '../../../core/hooks/useMapbox';
 	import { repeatersToGeoJSON } from '../utils/repeaterGeoJSON';
 	import { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX } from '../constants/zIndex';
+	import { Z_INDEX_BY_BAND } from '../constants/techBandZOrder';
 
 	interface Props {
 		/** Repeater store context */
@@ -26,28 +27,34 @@
 	}
 
 	let { store, namespace }: Props = $props();
-	
-	const FILL_LAYER_ID = `${namespace}-repeaters-fill`;
-	const LINE_LAYER_ID = `${namespace}-repeaters-line`;
+
 	const SOURCE_ID = `${namespace}-repeaters`;
-	
+
 	// Get map from mapbox hook
 	const mapStore = useMapbox();
-	
+
 	let map = $state<MapboxMap | null>(null);
 	let mounted = $state(false);
 	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
 	let viewportVersion = $state(0); // Increment to force $effect re-run on viewport changes
-	
+
+	// Get all unique z-index values and sort them
+	const sortedZIndexes = [...new Set(Object.values(Z_INDEX_BY_BAND))].sort((a, b) => a - b);
+
+	// Create layer IDs for each z-index
+	const fillLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-repeaters-fill-${zIndex}`);
+	const lineLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-repeaters-line-${zIndex}`);
+	const allLayerIds = [...fillLayerIds, ...lineLayerIds];
+
 	// Viewport change handler with debouncing
 	function handleMoveEnd() {
 		if (!map) return;
-		
+
 		// Clear any existing timer
 		if (viewportUpdateTimer) {
 			clearTimeout(viewportUpdateTimer);
 		}
-		
+
 		// Debounce: wait 200ms after last move event before re-rendering
 		viewportUpdateTimer = setTimeout(() => {
 			if (!map) return;
@@ -59,73 +66,72 @@
 			viewportVersion++;
 		}, 200);
 	}
-	
+
 	/**
 	 * Initialize or reinitialize the repeater layers
 	 * Called on mount and when map style changes
 	 */
 	function initializeLayer() {
 		if (!map) return;
-		
+
 		console.log('RepeatersLayer: initializeLayer called');
-		
+
 		// Set initial zoom
 		store.setCurrentZoom(map.getZoom());
-		
+
 		// Add moveend listener (remove first to avoid duplicates)
 		map.off('moveend', handleMoveEnd);
 		map.on('moveend', handleMoveEnd);
-		
+
 		// Mark as mounted to trigger $effect
 		mounted = true;
-		
+
 		// Force $effect to re-run
 		viewportVersion++;
 	}
-	
+
 	onMount(() => {
 		console.log('RepeatersLayer: onMount, waiting for map...');
-		
+
 		// Subscribe to map store
 		const unsubscribe = mapStore.subscribe((mapInstance) => {
 			if (mapInstance && !map) {
 				console.log('RepeatersLayer: Map available, initializing...');
 				map = mapInstance;
-				
+
 				// Initial layer setup
 				initializeLayer();
-				
+
 				// Re-initialize layer when map style changes
 				// Mapbox removes all custom layers/sources when setStyle() is called
 				map.on('style.load', initializeLayer);
 			}
 		});
-		
+
 		return () => {
 			unsubscribe();
 		};
 	});
-	
+
 	onDestroy(() => {
 		if (!map) return;
-		
+
 		// Clean up timer
 		if (viewportUpdateTimer) {
 			clearTimeout(viewportUpdateTimer);
 		}
-		
+
 		// Remove style.load listener
 		map.off('style.load', initializeLayer);
-		
+
 		map.off('moveend', handleMoveEnd);
-		
+
 		// Clean up layers and source
-		if (map.getLayer(LINE_LAYER_ID)) {
-			map.removeLayer(LINE_LAYER_ID);
-		}
-		if (map.getLayer(FILL_LAYER_ID)) {
-			map.removeLayer(FILL_LAYER_ID);
-		}
+		allLayerIds.forEach((id) => {
+			if (map.getLayer(id)) {
+				map.removeLayer(id);
+			}
+		});
 		if (map.getSource(SOURCE_ID)) {
 			map.removeSource(SOURCE_ID);
 		}
@@ -135,7 +141,7 @@
 	$effect(() => {
 		// Track viewportVersion to force re-run on pan
 		viewportVersion;
-		
+
 		console.log('RepeatersLayer $effect triggered:', {
 			mounted,
 			hasMap: !!map,
@@ -145,40 +151,40 @@
 			baseRadius: store.baseRadius,
 			viewportVersion
 		});
-		
-		if (!mounted || !map || !store.showRepeaters) {
+
+		if (!mounted || !map) {
+			return;
+		}
+
+		if (!store.showRepeaters) {
 			// Remove layers if showRepeaters is false
-			if (mounted && map) {
-				console.log('RepeatersLayer: Removing layers (showRepeaters=false or not mounted)');
-				if (map.getLayer(LINE_LAYER_ID)) {
-					map.removeLayer(LINE_LAYER_ID);
-				}
-				if (map.getLayer(FILL_LAYER_ID)) {
-					map.removeLayer(FILL_LAYER_ID);
-				}
-				if (map.getSource(SOURCE_ID)) {
-					map.removeSource(SOURCE_ID);
+			allLayerIds.forEach((id) => {
+				if (map.getLayer(id)) {
+					map.removeLayer(id);
 				}
+			});
+			if (map.getSource(SOURCE_ID)) {
+				map.removeSource(SOURCE_ID);
 			}
 			return;
 		}
-		
+
 		// Filter repeaters by viewport bounds (only render visible repeaters)
 		const bounds = map.getBounds();
 		if (!bounds) {
 			console.warn('RepeatersLayer: Cannot get map bounds, skipping viewport filter');
 			return;
 		}
-		
-		const visibleRepeaters = store.filteredRepeaters.filter(repeater => 
+
+		const visibleRepeaters = store.filteredRepeaters.filter((repeater) =>
 			bounds.contains([repeater.longitude, repeater.latitude])
 		);
-		
+
 		console.log('RepeatersLayer: Viewport filtering:', {
 			totalFiltered: store.filteredRepeaters.length,
 			visibleInViewport: visibleRepeaters.length
 		});
-		
+
 		// Generate GeoJSON from visible repeaters only
 		const geoJSON = repeatersToGeoJSON(
 			visibleRepeaters,
@@ -186,12 +192,12 @@
 			store.baseRadius,
 			store.techBandColorMap
 		);
-		
+
 		console.log('RepeatersLayer: Generated GeoJSON:', {
 			featureCount: geoJSON.features.length,
 			firstFeature: geoJSON.features[0]
 		});
-		
+
 		// Update or create source
 		const source = map.getSource(SOURCE_ID);
 		if (source && source.type === 'geojson') {
@@ -204,55 +210,65 @@
 				data: geoJSON
 			});
 		}
-		
-		// Add fill layer if not exists
-		if (!map.getLayer(FILL_LAYER_ID)) {
-			console.log('RepeatersLayer: Creating fill layer');
-			map.addLayer({
-				id: FILL_LAYER_ID,
-				type: 'fill',
-				source: SOURCE_ID,
-				layout: {
-					'fill-sort-key': ['get', 'sortKey'] // Use sortKey for z-ordering
-				},
-				paint: {
-					'fill-color': ['get', 'techBandColor'],
-					'fill-opacity': store.fillOpacity
-				},
-				metadata: {
-					zIndex: REPEATER_FILL_Z_INDEX
-				}
-			});
-		} else {
-			// Update fill opacity
-			console.log('RepeatersLayer: Updating fill opacity:', store.fillOpacity);
-			map.setPaintProperty(FILL_LAYER_ID, 'fill-opacity', store.fillOpacity);
-		}
-		
-		// Add line layer if not exists
-		if (!map.getLayer(LINE_LAYER_ID)) {
-			console.log('RepeatersLayer: Creating line layer');
-			map.addLayer({
-				id: LINE_LAYER_ID,
-				type: 'line',
-				source: SOURCE_ID,
-				layout: {
-					'line-sort-key': ['get', 'sortKey'] // Use sortKey for z-ordering
-				},
-				paint: {
-					'line-color': ['get', 'lineColor'],
-					'line-width': store.lineWidth,
-					'line-opacity': ['get', 'lineOpacity']
-				},
-				metadata: {
-					zIndex: REPEATER_LINE_Z_INDEX
-				}
-			});
-		} else {
-			// Update line width
-			console.log('RepeatersLayer: Updating line width:', store.lineWidth);
-			map.setPaintProperty(LINE_LAYER_ID, 'line-width', store.lineWidth);
+
+		// Get all unique bands for the current z-index
+		const bandsByZIndex = new Map<number, string[]>();
+		for (const [band, zIndex] of Object.entries(Z_INDEX_BY_BAND)) {
+			if (!bandsByZIndex.has(zIndex)) {
+				bandsByZIndex.set(zIndex, []);
+			}
+			bandsByZIndex.get(zIndex)?.push(band);
 		}
+
+		// Add/update layers for each z-index level
+		sortedZIndexes.forEach((zIndex) => {
+			const fillLayerId = `${namespace}-repeaters-fill-${zIndex}`;
+			const lineLayerId = `${namespace}-repeaters-line-${zIndex}`;
+			const bands = bandsByZIndex.get(zIndex) || [];
+
+			// Add fill layer if not exists
+			if (!map.getLayer(fillLayerId)) {
+				console.log(`RepeatersLayer: Creating fill layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: fillLayerId,
+					type: 'fill',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'fill-color': ['get', 'techBandColor'],
+						'fill-opacity': store.fillOpacity
+					},
+					metadata: {
+						zIndex: REPEATER_FILL_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update fill opacity
+				map.setPaintProperty(fillLayerId, 'fill-opacity', store.fillOpacity);
+			}
+
+			// Add line layer if not exists
+			if (!map.getLayer(lineLayerId)) {
+				console.log(`RepeatersLayer: Creating line layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: lineLayerId,
+					type: 'line',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'line-color': ['get', 'lineColor'],
+						'line-width': store.lineWidth,
+						'line-opacity': ['get', 'lineOpacity']
+					},
+					metadata: {
+						zIndex: REPEATER_LINE_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update line width
+				map.setPaintProperty(lineLayerId, 'line-width', store.lineWidth);
+			}
+		});
 	});
 </script>
 

package/dist/map-v2/features/repeaters/stores/repeaterStoreContext.svelte.js

@@ -90,23 +90,10 @@ export function createRepeaterStoreContext(repeaters) {
         minLabelZoom: persistedSettings.minLabelZoom ?? 10 // Lower default to show labels at more zoom levels
     });
     // Derived: Filter repeaters by visible tech:fband combinations
-    // Memoized to avoid re-filtering when repeaters array or visibleTechBands haven't changed
-    let lastRepeatersRef = null;
-    let lastVisibleTechBands = null;
-    let cachedFilteredRepeaters = [];
-    let filteredRepeaters = $derived.by(() => {
-        // Only recompute if repeaters reference or visible tech bands changed
-        if (state.repeaters === lastRepeatersRef && state.visibleTechBands === lastVisibleTechBands) {
-            return cachedFilteredRepeaters;
-        }
-        lastRepeatersRef = state.repeaters;
-        lastVisibleTechBands = state.visibleTechBands;
-        cachedFilteredRepeaters = state.repeaters.filter(r => {
-            const key = `${r.tech}:${r.fband}`;
-            return state.visibleTechBands.has(key);
-        });
-        return cachedFilteredRepeaters;
-    });
+    let filteredRepeaters = $derived(state.repeaters.filter(r => {
+        const key = `${r.tech}:${r.fband}`;
+        return state.visibleTechBands.has(key);
+    }));
     // Auto-save settings when they change
     $effect(() => {
         // Convert Set to Array and Map to Object for serialization

package/dist/map-v2/features/repeaters/utils/repeaterGeoJSON.js

@@ -8,7 +8,7 @@
  */
 import { createArcPolygon } from '../../cells/utils/arcGeometry';
 import { getRepeaterRadiusMultiplier } from '../constants/radiusMultipliers';
-import { getRepeaterZOrder } from '../constants/techBandZOrder';
+import { Z_INDEX_BY_BAND } from '../constants/techBandZOrder';
 /** Fixed beamwidth for all repeaters */
 const REPEATER_BEAMWIDTH = 30;
 /** Reference zoom level where base radius is used as-is */
@@ -26,6 +26,18 @@ const REFERENCE_ZOOM = 12;
 function getZoomFactor(currentZoom) {
     return Math.pow(2, (REFERENCE_ZOOM - currentZoom) / 2);
 }
+/**
+ * Parse repeater tech and fband into a TechnologyBandKey
+ * Repeaters use format like tech="4G", fband="LTE1800" or "1800"
+ * We need to convert to "4G_1800" format
+ */
+function parseTechBand(tech, fband) {
+    // Extract numeric band from fband (handles "LTE1800", "1800", "GSM900", "900", etc.)
+    const bandMatch = fband.match(/(\d+)/);
+    const band = bandMatch ? bandMatch[1] : fband;
+    // Build TechnologyBandKey
+    return `${tech}_${band}`;
+}
 /**
  * Convert repeaters to GeoJSON FeatureCollection with arc geometries
  *
@@ -37,16 +49,18 @@ function getZoomFactor(currentZoom) {
  */
 export function repeatersToGeoJSON(repeaters, currentZoom, baseRadius = 500, techBandColorMap) {
     const features = repeaters.map((repeater) => {
-        // Get color for this tech:fband combination
-        const key = `${repeater.tech}:${repeater.fband}`;
-        const color = techBandColorMap.get(key) || '#888888'; // Fallback gray
+        // Get color for this tech:fband combination (old format for color map)
+        const colorKey = `${repeater.tech}:${repeater.fband}`;
+        const color = techBandColorMap.get(colorKey) || '#888888'; // Fallback gray
+        // Parse to TechnologyBandKey for z-index lookup
+        const techBandKey = parseTechBand(repeater.tech, repeater.fband);
         // Calculate zoom-reactive radius with inverse scaling (like cells)
         const zoomFactor = getZoomFactor(currentZoom);
         // Apply tech-band specific radius multiplier
         const techBandMultiplier = getRepeaterRadiusMultiplier(repeater.tech, repeater.fband);
         const radius = baseRadius * zoomFactor * techBandMultiplier;
-        // Get z-order for layering (higher frequency = higher z-order = on top)
-        const zOrder = getRepeaterZOrder(repeater.tech, repeater.fband);
+        // Get z-order for layering using shared constant
+        const zIndex = Z_INDEX_BY_BAND[techBandKey] || 0;
         // Create arc polygon geometry with fixed 30° beamwidth
         const center = [repeater.longitude, repeater.latitude];
         const arc = createArcPolygon(center, repeater.azimuth, REPEATER_BEAMWIDTH, radius);
@@ -73,13 +87,13 @@ export function repeatersToGeoJSON(repeaters, currentZoom, baseRadius = 500, tec
                 featureGroup: repeater.featureGroup || '',
                 status: repeater.status || 'active',
                 // Styling properties for Mapbox
-                techBandKey: key,
+                techBandKey: techBandKey, // TechnologyBandKey format for consistency
                 techBandColor: color,
                 lineColor: color,
                 lineOpacity: 0.8,
-                // Z-order for layering (higher frequency on top)
-                zOrder: zOrder,
-                sortKey: zOrder // Used by Mapbox for layer ordering
+                // Z-index for layering (higher frequency on top)
+                zIndex: zIndex,
+                sortKey: zIndex // Used by Mapbox for layer ordering
             }
         };
     });

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

@@ -8,5 +8,5 @@ export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, ViewportSync, MapStoreB
 export { MapControl, FeatureSettingsControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
 export { type Site, type SiteStoreValue, type SiteStoreContext, createSiteStore, createSiteStoreContext, SitesLayer, SiteFilterControl, SiteSelectionControl, SiteSizeSlider, sitesToGeoJSON, siteToFeature, buildSiteTree, getFilteredSites } from './features/sites';
 export { type Cell, type CellStatus, type CellStatusStyle, type CellGroupingField, type CellGroupingLabels, type CellTreeConfig, type TechnologyBandKey, type CellStoreValue, type CellStoreContext, createCellStoreContext, CellsLayer, CellLabelsLayer, CellFilterControl, CellStyleControl, cellsToGeoJSON, buildCellTree, getFilteredCells, calculateRadius, getZoomFactor, createArcPolygon, DEFAULT_CELL_TREE_CONFIG, TECHNOLOGY_BAND_COLORS, DEFAULT_STATUS_STYLES, RADIUS_MULTIPLIER } from './features/cells';
-export { type Repeater, type RepeaterTreeNode, type RepeaterStoreValue, type RepeaterStoreContext, createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, getRepeaterZOrder, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER, REPEATER_TECH_BAND_Z_ORDER } from './features/repeaters';
+export { type Repeater, type RepeaterTreeNode, type RepeaterStoreValue, type RepeaterStoreContext, createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER } from './features/repeaters';
 export { DemoMap, demoSites, demoCells, demoRepeaters } from './demo';

package/dist/map-v2/index.js

@@ -23,7 +23,7 @@ export { createCellStoreContext, CellsLayer, CellLabelsLayer, CellFilterControl,
 // ============================================================================
 // REPEATER FEATURE
 // ============================================================================
-export { createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, getRepeaterZOrder, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER, REPEATER_TECH_BAND_Z_ORDER } from './features/repeaters';
+export { createRepeaterStoreContext, RepeatersLayer, RepeaterLabelsLayer, RepeaterFilterControl, repeatersToGeoJSON, buildRepeaterTree, getFilteredRepeaters, getRepeaterRadiusMultiplier, REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX, REPEATER_RADIUS_MULTIPLIER } from './features/repeaters';
 // ============================================================================
 // DEMO
 // ============================================================================

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

@@ -53,160 +53,73 @@
 		iconOnlyWhenCollapsed = true,
 		initiallyCollapsed = true
 	}: Props = $props();
-	
-	// Generate unique IDs for accordion items
-	const accordionId = `settings-accordion-${Math.random().toString(36).substring(7)}`;
 </script>
 
-<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
-	<div class="accordion" id={accordionId}>
-		<!-- Site Settings Accordion Item -->
-		<div class="accordion-item">
-			<h2 class="accordion-header" id="heading-sites">
-				<button 
-					class="accordion-button collapsed" 
-					type="button" 
-					data-bs-toggle="collapse" 
-					data-bs-target="#collapse-sites" 
-					aria-expanded="false" 
-					aria-controls="collapse-sites"
-				>
-					Site Settings
-				</button>
-			</h2>
-			<div 
-				id="collapse-sites" 
-				class="accordion-collapse collapse" 
-				aria-labelledby="heading-sites"
-			>
-				<div class="accordion-body">
-					<SiteSettingsPanel store={siteStore} />
-				</div>
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed} controlWidth="380px" edgeOffset="12px">
+	<!-- use CSS variables for width & offsets so MapControl can pick these up -->
+	<div class="d-flex flex-column p-0">
+		<ul class="nav nav-tabs" id="settings-tabs" role="tablist">
+			<li class="nav-item" role="presentation">
+				<button class="nav-link active" id="site-tab" data-bs-toggle="tab" data-bs-target="#site" type="button" role="tab" aria-controls="site" aria-selected="true">Site</button>
+			</li>
+			<li class="nav-item" role="presentation">
+				<button class="nav-link" id="cell-tab" data-bs-toggle="tab" data-bs-target="#cell" type="button" role="tab" aria-controls="cell" aria-selected="false">Cell</button>
+			</li>
+			{#if repeaterStore}
+				<li class="nav-item" role="presentation">
+					<button class="nav-link" id="repeater-tab" data-bs-toggle="tab" data-bs-target="#repeater" type="button" role="tab" aria-controls="repeater" aria-selected="false">Repeater</button>
+				</li>
+			{/if}
+		</ul>
+		<div class="tab-content rounded-2 shadow-sm bg-white border p-2" id="settings-tab-content" style="width: 360px;">
+			<div class="tab-pane show active" id="site" role="tabpanel" aria-labelledby="site-tab">
+				<SiteSettingsPanel store={siteStore} />
 			</div>
-		</div>
-
-		<!-- Cell Settings Accordion Item -->
-		<div class="accordion-item">
-			<h2 class="accordion-header" id="heading-cells">
-				<button 
-					class="accordion-button collapsed" 
-					type="button" 
-					data-bs-toggle="collapse" 
-					data-bs-target="#collapse-cells" 
-					aria-expanded="false" 
-					aria-controls="collapse-cells"
-				>
-					Cell Settings
-				</button>
-			</h2>
-			<div 
-				id="collapse-cells" 
-				class="accordion-collapse collapse" 
-				aria-labelledby="heading-cells"
-			>
-				<div class="accordion-body">
-					<CellSettingsPanel 
-						store={cellStore}
-						{labelFieldOptions4G5G}
-						{labelFieldOptions2G}
-						{fieldLabels}
-					/>
-				</div>
+			<div class="tab-pane" id="cell" role="tabpanel" aria-labelledby="cell-tab">
+				<CellSettingsPanel 
+					store={cellStore}
+					{labelFieldOptions4G5G}
+					{labelFieldOptions2G}
+					{fieldLabels}
+				/>
 			</div>
-		</div>
-
-		<!-- Repeater Settings Accordion Item -->
-		{#if repeaterStore}
-			<div class="accordion-item">
-				<h2 class="accordion-header" id="heading-repeaters">
-					<button 
-						class="accordion-button collapsed" 
-						type="button" 
-						data-bs-toggle="collapse" 
-						data-bs-target="#collapse-repeaters" 
-						aria-expanded="false" 
-						aria-controls="collapse-repeaters"
-					>
-						Repeater Settings
-					</button>
-				</h2>
-				<div 
-					id="collapse-repeaters" 
-					class="accordion-collapse collapse" 
-					aria-labelledby="heading-repeaters"
-				>
-					<div class="accordion-body">
-						<RepeaterSettingsPanel store={repeaterStore} />
-					</div>
+			{#if repeaterStore}
+				<div class="tab-pane" id="repeater" role="tabpanel" aria-labelledby="repeater-tab">
+					<RepeaterSettingsPanel store={repeaterStore} />
 				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
 </MapControl>
 
 <style>
-	.accordion {
-		--bs-accordion-border-width: 0;
-		/* Fixed width to prevent resizing when sections expand/collapse */
-		width: 320px;
-		min-width: 320px;
-		max-width: 320px;
+	:global(.map-control-content) {
+		padding: 0.25rem;
 	}
-	
-	.accordion-item {
-		background-color: transparent;
-		border: none;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-	}
-	
-	.accordion-item:last-child {
-		border-bottom: none;
-	}
-	
-	.accordion-button {
-		font-size: 0.875rem;
-		font-weight: 600;
-		padding: 0.75rem 1rem;
-		background-color: transparent;
-		color: var(--bs-body-color);
-		/* Ensure chevron is visible and properly positioned */
-		position: relative;
-		display: flex;
-		align-items: center;
-		width: 100%;
-		text-align: left;
-	}
-	
-	/* Preserve Bootstrap's chevron */
-	.accordion-button::after {
-		flex-shrink: 0;
-		width: 1.25rem;
-		height: 1.25rem;
-		margin-left: auto;
-		content: "";
-		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-		background-repeat: no-repeat;
-		background-size: 1.25rem;
-		transition: transform 0.2s ease-in-out;
-	}
-	
-	/* Rotate chevron when expanded */
-	.accordion-button:not(.collapsed)::after {
-		transform: rotate(-180deg);
+
+	.nav-tabs {
+		border-bottom: 1px solid #dee2e6;
 	}
-	
-	.accordion-button:not(.collapsed) {
-		background-color: rgba(13, 110, 253, 0.05);
-		color: #0d6efd;
+
+	.nav-link {
+		border: 1px solid transparent;
+		border-top-left-radius: 0.375rem;
+		border-top-right-radius: 0.375rem;
+		font-size: 0.95rem;
+		font-weight: 500;
+		padding: 0.5rem 1rem; /* increased horizontal padding to fit text better */
+		color: #6c757d;
+		white-space: nowrap; /* prevent text wrapping */
+		min-width: fit-content; /* ensure tab is at least as wide as content */
 	}
-	
-	.accordion-button:focus {
-		box-shadow: none;
-		border-color: rgba(0, 0, 0, 0.125);
+
+	.nav-link.active {
+		color: #495057;
+		background-color: #fff;
+		border-color: #dee2e6 #dee2e6 #fff;
 	}
-	
-	.accordion-body {
-		padding: 1rem;
-		padding-top: 0.5rem;
+
+	.tab-content {
+		padding: 0;
 	}
 </style>