@smartnet360/svelte-components 0.0.84 → 0.0.86

package/dist/map-v3/features/repeaters/layers/RepeaterLabelsLayer.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { MapStore } from '../../../core/stores/map.store.svelte';
+	import type { RepeaterDataStore } from '../stores/repeater.data.svelte';
+	import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+	import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
+	import { groupRepeaters, getColorForGroup } from '../logic/grouping';
+	import type { Repeater } from '../types';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		dataStore: RepeaterDataStore;
+		displayStore: RepeaterDisplayStore;
+		registry: RepeaterRegistry;
+	}
+
+	let { dataStore, displayStore, registry }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	let sourceId = 'repeater-labels-source';
+	let layerId = 'repeater-labels-layer';
+	let updateTimeout: any;
+
+	// Helper to get label text
+	function getLabelText(repeater: Repeater, config: { primary: string, secondary: string }): string {
+		const pVal = repeater[config.primary as keyof Repeater];
+		const sVal = config.secondary !== 'none' ? repeater[config.secondary as keyof Repeater] : null;
+		
+		let text = pVal != null ? String(pVal) : '';
+		if (sVal != null) {
+			text += ` | ${sVal}`;
+		}
+		return text;
+	}
+
+	// React to changes
+	$effect(() => {
+		// Read dependencies
+		const _repeaters = dataStore.filteredRepeaters;
+		const _show = displayStore.showLabels;
+		const _dist = displayStore.labelPixelDistance;
+		const _size = displayStore.labelFontSize;
+		const _tol = displayStore.labelAzimuthTolerance;
+		// Track specific label properties for reactivity
+		const _lPrim = displayStore.labels.primary;
+		const _lSec = displayStore.labels.secondary;
+		const _color = displayStore.labelColor;
+		const _haloColor = displayStore.labelHaloColor;
+		const _haloWidth = displayStore.labelHaloWidth;
+		const _registryVersion = registry.version;
+		
+		const map = mapStore.map;
+		if (map && map.getLayer(layerId)) {
+			map.setPaintProperty(layerId, 'text-color', displayStore.labelColor);
+			map.setPaintProperty(layerId, 'text-halo-color', displayStore.labelHaloColor);
+			map.setPaintProperty(layerId, 'text-halo-width', displayStore.labelHaloWidth);
+		}
+
+		updateLayer();
+	});
+
+	function updateLayer() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		clearTimeout(updateTimeout);
+		updateTimeout = setTimeout(() => {
+			renderLabels(map);
+		}, 150);
+	}
+
+	function renderLabels(map: mapboxgl.Map) {
+		if (!displayStore.showLabels) {
+			if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'none');
+			return;
+		}
+
+		if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'visible');
+		
+		// Update text size if changed
+		if (map.getLayer(layerId)) {
+			map.setLayoutProperty(layerId, 'text-size', displayStore.labelFontSize);
+		}
+
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
+		// 1. Filter visible repeaters (Bounds + Registry Visibility)
+		const visibleRepeaters: Repeater[] = [];
+		
+		// Group repeaters using the same logic as RepeatersLayer to determine visibility
+		const repeaterGroups = groupRepeaters(dataStore.filteredRepeaters, displayStore.level1, displayStore.level2);
+		let groupIndex = 0;
+
+		for (const [groupId, repeaters] of repeaterGroups) {
+			const defaultColor = getColorForGroup(groupIndex++);
+			const style = registry.getStyle(groupId, defaultColor);
+			
+			if (style.visible) {
+				// Check bounds
+				for (const r of repeaters) {
+					if (bounds.contains([r.longitude, r.latitude])) {
+						visibleRepeaters.push(r);
+					}
+				}
+			}
+		}
+
+		// 2. Generate Label Features
+		const features: GeoJSON.Feature[] = [];
+		
+		// Convert pixel distance to ems (approx 1em = 16px or labelFontSize)
+		const distEm = displayStore.labelPixelDistance / displayStore.labelFontSize;
+
+		for (const r of visibleRepeaters) {
+			const labelText = getLabelText(r, displayStore.labels);
+			if (!labelText) continue;
+
+			// Calculate offset based on azimuth
+			// Mapbox text-offset: [x, y]
+			// x = sin(az) * dist
+			// y = -cos(az) * dist (negative because y is down)
+			const az = r.azimuth ?? 0;
+			const azRad = (az * Math.PI) / 180;
+			const offsetX = Math.sin(azRad) * distEm;
+			const offsetY = -Math.cos(azRad) * distEm;
+
+			features.push({
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: [r.longitude, r.latitude]
+				},
+				properties: {
+					label: labelText,
+					offset: [offsetX, offsetY]
+				}
+			});
+		}
+
+		const geojson: GeoJSON.FeatureCollection = {
+			type: 'FeatureCollection',
+			features
+		};
+
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData(geojson);
+		} else {
+			map.addSource(sourceId, {
+				type: 'geojson',
+				data: geojson
+			});
+
+			map.addLayer({
+				id: layerId,
+				type: 'symbol',
+				source: sourceId,
+				layout: {
+					'text-field': ['get', 'label'],
+					'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+					'text-size': displayStore.labelFontSize,
+					'text-offset': ['get', 'offset'],
+					'text-anchor': 'center',
+					'text-justify': 'auto',
+					'text-allow-overlap': false,
+					'text-ignore-placement': false
+				},
+				paint: {
+					'text-color': displayStore.labelColor,
+					'text-halo-color': displayStore.labelHaloColor,
+					'text-halo-width': displayStore.labelHaloWidth
+				}
+			});
+		}
+	}
+</script>

package/dist/map-v3/features/repeaters/layers/RepeaterLabelsLayer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RepeaterDataStore } from '../stores/repeater.data.svelte';
+import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
+interface Props {
+    dataStore: RepeaterDataStore;
+    displayStore: RepeaterDisplayStore;
+    registry: RepeaterRegistry;
+}
+declare const RepeaterLabelsLayer: import("svelte").Component<Props, {}, "">;
+type RepeaterLabelsLayer = ReturnType<typeof RepeaterLabelsLayer>;
+export default RepeaterLabelsLayer;

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

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { MapStore } from '../../../core/stores/map.store.svelte';
+	import type { RepeaterDataStore } from '../stores/repeater.data.svelte';
+	import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
+	import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+	import { groupRepeaters, getColorForGroup } from '../logic/grouping';
+	import { generateRepeaterArc, calculateRadiusInMeters } from '../logic/geometry';
+	import { Z_INDEX_BY_BAND } from '../../cells/constants';
+	import type { TechnologyBandKey } from '../../cells/types';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		dataStore: RepeaterDataStore;
+		registry: RepeaterRegistry;
+		displayStore: RepeaterDisplayStore;
+	}
+
+	let { dataStore, registry, displayStore }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	let sourceId = 'repeaters-source';
+	let layerId = 'repeaters-layer';
+	let lineLayerId = 'repeaters-line-layer';
+
+	let updateTimeout: any;
+
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		if (map.getLayer(layerId)) {
+			map.setPaintProperty(layerId, 'fill-opacity', displayStore.fillOpacity);
+		}
+		if (map.getLayer(lineLayerId)) {
+			map.setPaintProperty(lineLayerId, 'line-width', displayStore.lineWidth);
+		}
+	});
+
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const addLayers = () => {
+			if (!map.getSource(sourceId)) {
+				map.addSource(sourceId, {
+					type: 'geojson',
+					data: { type: 'FeatureCollection', features: [] }
+				});
+			}
+
+			if (!map.getLayer(layerId)) {
+				map.addLayer({
+					id: layerId,
+					type: 'fill',
+					source: sourceId,
+					paint: {
+						'fill-color': ['get', 'color'],
+						'fill-opacity': displayStore.fillOpacity
+					},
+					layout: {
+						'fill-sort-key': ['get', 'zIndex']
+					}
+				});
+			}
+
+			if (!map.getLayer(lineLayerId)) {
+				map.addLayer({
+					id: lineLayerId,
+					type: 'line',
+					source: sourceId,
+					paint: {
+						'line-color': '#000',
+						'line-width': displayStore.lineWidth,
+						'line-opacity': 0.5,
+						'line-dasharray': [2, 1]
+					}
+				});
+			}
+			
+			updateLayer();
+		};
+
+		addLayers();
+		map.on('style.load', addLayers);
+		map.on('moveend', updateLayer);
+		map.on('zoomend', updateLayer);
+
+		return () => {
+			map.off('style.load', addLayers);
+			map.off('moveend', updateLayer);
+			map.off('zoomend', updateLayer);
+
+			if (map.getLayer(lineLayerId)) map.removeLayer(lineLayerId);
+			if (map.getLayer(layerId)) map.removeLayer(layerId);
+			if (map.getSource(sourceId)) map.removeSource(sourceId);
+		};
+	});
+
+	$effect(() => {
+		const _repeaters = dataStore.filteredRepeaters;
+		const _pixelSize = displayStore.targetPixelSize;
+		const _registryVersion = registry.version;
+		const _l1 = displayStore.level1;
+		const _l2 = displayStore.level2;
+		
+		updateLayer();
+	});
+
+	function updateLayer() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		clearTimeout(updateTimeout);
+		updateTimeout = setTimeout(() => {
+			renderRepeaters(map);
+		}, 100);
+	}
+
+	function renderRepeaters(map: mapboxgl.Map) {
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
+		const zoom = map.getZoom();
+		const centerLat = map.getCenter().lat;
+		
+		const radiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
+
+		const groups = groupRepeaters(dataStore.filteredRepeaters, displayStore.level1, displayStore.level2);
+		
+		const features: GeoJSON.Feature[] = [];
+		let groupIndex = 0;
+
+		for (const [groupId, repeaters] of groups) {
+			const defaultColor = getColorForGroup(groupIndex++);
+			const style = registry.getStyle(groupId, defaultColor);
+
+			if (!style.visible) continue;
+
+			for (const repeater of repeaters) {
+				if (bounds.contains([repeater.longitude, repeater.latitude])) {
+					const zIndexKey = `${repeater.tech}_${repeater.fband}` as TechnologyBandKey;
+					const zIndex = Z_INDEX_BY_BAND[zIndexKey] || 10;
+
+					const MAX_Z = 15;
+					const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
+					const effectiveRadius = radiusMeters * scaleFactor;
+
+					const feature = generateRepeaterArc(repeater, effectiveRadius, zIndex, style.color);
+					features.push(feature);
+				}
+			}
+		}
+
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData({
+				type: 'FeatureCollection',
+				features: features as any
+			});
+		}
+	}
+</script>

package/dist/map-v3/features/repeaters/layers/RepeatersLayer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RepeaterDataStore } from '../stores/repeater.data.svelte';
+import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
+import type { RepeaterDisplayStore } from '../stores/repeater.display.svelte';
+interface Props {
+    dataStore: RepeaterDataStore;
+    registry: RepeaterRegistry;
+    displayStore: RepeaterDisplayStore;
+}
+declare const RepeatersLayer: import("svelte").Component<Props, {}, "">;
+type RepeatersLayer = ReturnType<typeof RepeatersLayer>;
+export default RepeatersLayer;

package/dist/map-v3/features/repeaters/logic/geometry.d.ts

@@ -0,0 +1,3 @@
+import type { Repeater } from '../types';
+export declare function calculateRadiusInMeters(latitude: number, zoom: number, targetPixelSize: number): number;
+export declare function generateRepeaterArc(repeater: Repeater, radiusMeters: number, zIndex: number, color: string): GeoJSON.Feature<GeoJSON.Polygon>;

package/dist/map-v3/features/repeaters/logic/geometry.js

@@ -0,0 +1,23 @@
+import * as turf from '@turf/turf';
+export function calculateRadiusInMeters(latitude, zoom, targetPixelSize) {
+    const metersPerPixel = (156543.03392 * Math.cos((latitude * Math.PI) / 180)) / Math.pow(2, zoom);
+    return targetPixelSize * metersPerPixel;
+}
+export function generateRepeaterArc(repeater, radiusMeters, zIndex, color) {
+    const center = [repeater.longitude, repeater.latitude];
+    const bearing1 = repeater.azimuth - (repeater.beamwidth / 2);
+    const bearing2 = repeater.azimuth + (repeater.beamwidth / 2);
+    const sector = turf.sector(center, radiusMeters / 1000, bearing1, bearing2, {
+        steps: 10
+    });
+    sector.properties = {
+        id: repeater.repeaterId,
+        name: repeater.donorCellName,
+        tech: repeater.tech,
+        fband: repeater.fband,
+        zIndex: zIndex,
+        color: color,
+        type: 'repeater'
+    };
+    return sector;
+}

package/dist/map-v3/features/repeaters/logic/grouping.d.ts

@@ -0,0 +1,8 @@
+import type { Repeater, RepeaterGroupingField } from '../types';
+export interface TreeData {
+    nodes: Map<string, any>;
+    rootPaths: string[];
+}
+export declare function generateLeafId(level1: string, level2: string): string;
+export declare function getColorForGroup(index: number): string;
+export declare function groupRepeaters(repeaters: Repeater[], level1Field: RepeaterGroupingField, level2Field: RepeaterGroupingField): Map<string, Repeater[]>;

package/dist/map-v3/features/repeaters/logic/grouping.js

@@ -0,0 +1,20 @@
+import { DEFAULT_PALETTE } from '../../cells/constants';
+export function generateLeafId(level1, level2) {
+    return `${level1}__${level2}`;
+}
+export function getColorForGroup(index) {
+    return DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
+}
+export function groupRepeaters(repeaters, level1Field, level2Field) {
+    const groups = new Map();
+    for (const repeater of repeaters) {
+        const l1 = repeater[level1Field] || 'Unknown';
+        const l2 = repeater[level2Field] || 'Unknown';
+        const key = generateLeafId(String(l1), String(l2));
+        if (!groups.has(key)) {
+            groups.set(key, []);
+        }
+        groups.get(key)?.push(repeater);
+    }
+    return groups;
+}

package/dist/map-v3/features/repeaters/logic/tree-adapter.d.ts

@@ -0,0 +1,8 @@
+import type { TreeNode } from '../../../../core/TreeView/tree.model';
+import type { Repeater, RepeaterGroupingField } from '../types';
+import type { RepeaterRegistry } from '../stores/repeater.registry.svelte';
+export declare function buildRepeaterTree(repeaters: Repeater[], registry: RepeaterRegistry, level1?: RepeaterGroupingField, level2?: RepeaterGroupingField): TreeNode<{
+    color: string;
+    count: number;
+    groupId: string;
+}>[];

package/dist/map-v3/features/repeaters/logic/tree-adapter.js

@@ -0,0 +1,43 @@
+import { groupRepeaters, generateLeafId, getColorForGroup } from './grouping';
+export function buildRepeaterTree(repeaters, registry, level1 = 'tech', level2 = 'fband') {
+    const groups = groupRepeaters(repeaters, level1, level2);
+    const level1Nodes = new Map();
+    let groupIndex = 0;
+    for (const [groupId, groupRepeaters] of groups) {
+        if (groupRepeaters.length === 0)
+            continue;
+        const sample = groupRepeaters[0];
+        const l1Value = String(sample[level1] || 'Unknown');
+        const l2Value = String(sample[level2] || 'Unknown');
+        if (!level1Nodes.has(l1Value)) {
+            level1Nodes.set(l1Value, {
+                id: l1Value,
+                label: l1Value,
+                children: [],
+                defaultExpanded: true,
+            });
+        }
+        const defaultColor = getColorForGroup(groupIndex++);
+        const style = registry.getStyle(groupId, defaultColor);
+        const leafNode = {
+            id: groupId,
+            label: `${l2Value} (${groupRepeaters.length})`,
+            metadata: {
+                color: style.color,
+                count: groupRepeaters.length,
+                groupId: groupId
+            },
+            defaultChecked: style.visible,
+        };
+        level1Nodes.get(l1Value)?.children?.push(leafNode);
+    }
+    const sortedNodes = Array.from(level1Nodes.values()).sort((a, b) => a.label.localeCompare(b.label));
+    const rootNode = {
+        id: 'root-repeaters',
+        label: `Repeaters (${repeaters.length})`,
+        children: sortedNodes,
+        defaultExpanded: true,
+        defaultChecked: true,
+    };
+    return [rootNode];
+}

package/dist/map-v3/features/repeaters/stores/repeater.data.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Repeater } from '../types';
+export declare class RepeaterDataStore {
+    rawRepeaters: Repeater[];
+    constructor();
+    setRepeaters(repeaters: Repeater[]): void;
+    get filteredRepeaters(): Repeater[];
+}
+export declare function createRepeaterDataStore(): RepeaterDataStore;

package/dist/map-v3/features/repeaters/stores/repeater.data.svelte.js

@@ -0,0 +1,13 @@
+export class RepeaterDataStore {
+    rawRepeaters = $state([]);
+    constructor() { }
+    setRepeaters(repeaters) {
+        this.rawRepeaters = repeaters;
+    }
+    get filteredRepeaters() {
+        return this.rawRepeaters;
+    }
+}
+export function createRepeaterDataStore() {
+    return new RepeaterDataStore();
+}

package/dist/map-v3/features/repeaters/stores/repeater.display.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { RepeaterGroupingField } from '../types';
+export declare class RepeaterDisplayStore {
+    key: string;
+    targetPixelSize: number;
+    fillOpacity: number;
+    lineWidth: number;
+    level1: RepeaterGroupingField;
+    level2: RepeaterGroupingField;
+    showLabels: boolean;
+    labelPixelDistance: number;
+    labelFontSize: number;
+    labelAzimuthTolerance: number;
+    labelColor: string;
+    labelHaloColor: string;
+    labelHaloWidth: number;
+    labels: {
+        primary: string;
+        secondary: string;
+    };
+    constructor();
+}

package/dist/map-v3/features/repeaters/stores/repeater.display.svelte.js

@@ -0,0 +1,64 @@
+import { browser } from '$app/environment';
+export class RepeaterDisplayStore {
+    key = 'map-v3-repeater-display';
+    // State
+    targetPixelSize = $state(40); // Slightly smaller default than cells
+    fillOpacity = $state(0.6);
+    lineWidth = $state(1);
+    // Grouping
+    level1 = $state('tech');
+    level2 = $state('fband');
+    // Label Settings
+    showLabels = $state(false);
+    labelPixelDistance = $state(60);
+    labelFontSize = $state(12);
+    labelAzimuthTolerance = $state(10);
+    labelColor = $state('#333333');
+    labelHaloColor = $state('#ffffff');
+    labelHaloWidth = $state(1);
+    // Unified label config
+    labels = $state({ primary: 'repeaterId', secondary: 'none' });
+    constructor() {
+        if (browser) {
+            const saved = localStorage.getItem(this.key);
+            if (saved) {
+                try {
+                    const parsed = JSON.parse(saved);
+                    this.targetPixelSize = parsed.targetPixelSize ?? 40;
+                    this.fillOpacity = parsed.fillOpacity ?? 0.6;
+                    this.lineWidth = parsed.lineWidth ?? 1;
+                    this.level1 = parsed.level1 ?? 'tech';
+                    this.level2 = parsed.level2 ?? 'fband';
+                    this.showLabels = parsed.showLabels ?? false;
+                    this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
+                    this.labelFontSize = parsed.labelFontSize ?? 12;
+                    this.labelAzimuthTolerance = parsed.labelAzimuthTolerance ?? 10;
+                    this.labelColor = parsed.labelColor ?? '#333333';
+                    this.labelHaloColor = parsed.labelHaloColor ?? '#ffffff';
+                    this.labelHaloWidth = parsed.labelHaloWidth ?? 1;
+                    this.labels = parsed.labels ?? { primary: 'repeaterId', secondary: 'none' };
+                }
+                catch (e) {
+                    console.error('Failed to load repeater display settings', e);
+                }
+            }
+            $effect(() => {
+                localStorage.setItem(this.key, JSON.stringify({
+                    targetPixelSize: this.targetPixelSize,
+                    fillOpacity: this.fillOpacity,
+                    lineWidth: this.lineWidth,
+                    level1: this.level1,
+                    level2: this.level2,
+                    showLabels: this.showLabels,
+                    labelPixelDistance: this.labelPixelDistance,
+                    labelFontSize: this.labelFontSize,
+                    labelAzimuthTolerance: this.labelAzimuthTolerance,
+                    labelColor: this.labelColor,
+                    labelHaloColor: this.labelHaloColor,
+                    labelHaloWidth: this.labelHaloWidth,
+                    labels: this.labels
+                }));
+            });
+        }
+    }
+}

package/dist/map-v3/features/repeaters/stores/repeater.registry.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Persistent store for repeater styling (colors, visibility)
+ * Key: Stable Group ID (e.g. "4G__LTE700")
+ * Value: { color: string, visible: boolean }
+ */
+export declare class RepeaterRegistry {
+    state: Record<string, {
+        color: string;
+        visible: boolean;
+    }>;
+    version: number;
+    namespace: string;
+    constructor(namespace?: string);
+    load(): void;
+    save(): void;
+    getStyle(id: string, defaultColor: string): {
+        color: string;
+        visible: boolean;
+    };
+    toggleVisibility(id: string): void;
+    setColor(id: string, color: string): void;
+}
+export declare function createRepeaterRegistry(namespace: string): RepeaterRegistry;

package/dist/map-v3/features/repeaters/stores/repeater.registry.svelte.js

@@ -0,0 +1,68 @@
+import { writable } from 'svelte/store';
+/**
+ * Persistent store for repeater styling (colors, visibility)
+ * Key: Stable Group ID (e.g. "4G__LTE700")
+ * Value: { color: string, visible: boolean }
+ */
+export class RepeaterRegistry {
+    state = $state({});
+    version = $state(0); // Signal for reactivity
+    namespace;
+    constructor(namespace = 'default') {
+        this.namespace = namespace;
+        this.load();
+        $effect(() => {
+            this.save();
+        });
+    }
+    load() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const stored = localStorage.getItem(`${this.namespace}:repeater-registry`);
+            if (stored) {
+                this.state = JSON.parse(stored);
+                this.version++;
+            }
+        }
+        catch (e) {
+            console.warn('Failed to load repeater registry', e);
+        }
+    }
+    save() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            localStorage.setItem(`${this.namespace}:repeater-registry`, JSON.stringify(this.state));
+        }
+        catch (e) {
+            console.warn('Failed to save repeater registry', e);
+        }
+    }
+    getStyle(id, defaultColor) {
+        if (!this.state[id]) {
+            // Initialize if missing
+            this.state[id] = { color: defaultColor, visible: true };
+            // No version bump here to avoid loops during render
+        }
+        return this.state[id];
+    }
+    toggleVisibility(id) {
+        if (this.state[id]) {
+            this.state[id].visible = !this.state[id].visible;
+            this.version++;
+        }
+        else {
+            console.warn(`[RepeaterRegistry] Tried to toggle missing ID: ${id}`);
+        }
+    }
+    setColor(id, color) {
+        if (this.state[id]) {
+            this.state[id].color = color;
+            this.version++;
+        }
+    }
+}
+export function createRepeaterRegistry(namespace) {
+    return new RepeaterRegistry(namespace);
+}