@kahwee/sf-map-svg 5.1.0 → 5.1.2

package/dist/src/explorer-core.js

@@ -2,21 +2,19 @@ import { copyAppearance } from './appearance.js';
 import { createCamera, validateCameraOptions } from './camera.js';
 import { createClusterLayer } from './cluster-layer.js';
 import { clusterPoints } from './clusters.js';
-import { renderDistrictAppearance } from './district-layer.js';
-import { createDistrictMorph } from './district-morph.js';
+import { createDistrictController } from './district-controller.js';
 import { prepareDistrictStyles } from './district-style.js';
-import { createDistrictTransition } from './district-transition.js';
-import { element, setAttributeIfChanged, svgElement } from './dom.js';
+import { element, svgElement } from './dom.js';
 import { createExplorerControls } from './explorer-controls.js';
 import { fitBounds, projectedBounds } from './explorer-layout.js';
 import { controlKeys, layerKeys, normalizeFeatures, validateSwitchPatch } from './features.js';
 import { createFrameScheduler } from './frame-scheduler.js';
-import { labelCandidates, styleLabels, } from './label-candidates.js';
-import { createLabelRenderer } from './label-renderer.js';
+import { createLabelCoordinator } from './label-coordinator.js';
 import { createLayerTransitions } from './layer-transition.js';
 import { createSFMapWithData, districtColors, getLayerPathsWithData, resolveMapColors, } from './map-core.js';
 import { createMarkerCatalog } from './marker-catalog.js';
 import { createMarkerChooser } from './marker-chooser.js';
+import { createMarkerController } from './marker-controller.js';
 import { createMarkerLayer } from './marker-layer.js';
 import { createMarkerNavigation } from './marker-navigation.js';
 import { createNeighborhoodLayer, createNeighborhoodLookup, formatSourceLabel, } from './neighborhood-layer.js';
@@ -179,180 +177,53 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         'aria-hidden': 'true',
         'font-family': labelStyle.fontFamily ?? styleOptions.font ?? 'system-ui,sans-serif',
     });
-    const labelRenderer = createLabelRenderer(labelLayer);
     geography.append(areas, stations, labelLayer, overlayLayer, markerLayer);
     let view = [0, 0, 800];
-    let selectedDistrict = null;
-    let hoveredDistrict = null;
-    let districtStyle = initialDistrictStyle;
-    let districtStyles = prepareDistrictStyles(data.map.districts?.[year] ?? [], districtStyle);
-    const districtTransition = createDistrictTransition();
-    let districtRevision = 0;
-    root.dataset.year = String(year);
-    function districtRow(id) {
-        return data.map.districts?.[year]?.find((district) => district.id === id);
-    }
-    function districtSelection(id) {
-        const district = id === null ? undefined : districtRow(id);
-        return district
-            ? { id: district.id, year, district: structuredClone(district) }
-            : { id: null, year, district: null };
-    }
-    function getSelectedDistrict() {
-        return selectedDistrict === null
-            ? null
-            : districtSelection(selectedDistrict);
-    }
-    function updateDistrictAppearance() {
-        renderDistrictAppearance({
-            svg,
-            rows: data.map.districts?.[year] ?? [],
-            styles: districtStyles,
-            selectedDistrict,
-            hoveredDistrict,
-            year,
-            theme,
-            colors,
-            fills: enabled('districtFills'),
-            lines: enabled('districtLines'),
-        });
-    }
-    function selectDistrict(id, options = {}) {
-        if (destroyed)
-            return false;
-        validateCameraOptions(options);
-        if (id !== null && (!Number.isInteger(id) || !districtRow(id)))
-            return false;
-        const changed = selectedDistrict !== id;
-        const revision = ++districtRevision;
-        selectedDistrict = id;
-        if (id === null)
-            delete root.dataset.selectedDistrict;
-        else
-            root.dataset.selectedDistrict = String(id);
-        updateDistrictAppearance();
-        const selectedRow = id === null ? undefined : districtRow(id);
-        if (selectedRow && options.fit)
-            fitGeometry(selectedRow.geometry, undefined, options);
-        if (destroyed || revision !== districtRevision)
-            return true;
-        status.textContent =
-            id === null ? 'District selection cleared.' : `District ${id} selected, ${year} boundaries.`;
-        if (changed)
-            root.dispatchEvent(new CustomEvent('districtchange', { bubbles: true, detail: districtSelection(id) }));
-        return true;
-    }
-    function activateDistrict(id) {
-        const revision = districtRevision + 1;
-        if (!selectDistrict(id) || destroyed || revision !== districtRevision)
-            return false;
-        root.dispatchEvent(new CustomEvent('districtactivate', { bubbles: true, detail: districtSelection(id) }));
-        return !destroyed && revision === districtRevision;
-    }
-    function setDistrictStyle(style) {
-        if (destroyed)
-            return;
-        const revision = districtRevision;
-        const prepared = prepareDistrictStyles(data.map.districts?.[year] ?? [], style);
-        if (destroyed || revision !== districtRevision)
-            return;
-        districtRevision++;
-        districtStyle = style;
-        districtStyles = prepared;
-        const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
-        const fade = layerFades.duration();
-        // A new style settles any fill crossfade still running from an earlier change.
-        districtTransition.cancel();
-        if (fills && fade && enabled('districtFills'))
-            districtTransition.fade(fills, fade);
-        updateDistrictAppearance();
-    }
-    function setDistrictYear(next, options = {}, preparedStyles) {
-        if (destroyed)
-            return;
-        validateCameraOptions(options);
-        if (![2002, 2012, 2022].includes(next))
-            throw new RangeError('District year must be 2002, 2012, or 2022.');
-        if (!data.map.districts?.[next] || !data.districts?.[next])
-            throw new RangeError(`No ${next} district dataset was supplied.`);
-        if (next === year)
-            return;
-        const revision = districtRevision;
-        const prepared = preparedStyles ?? prepareDistrictStyles(data.map.districts[next], districtStyle);
-        if (destroyed || revision !== districtRevision)
-            return;
-        const committedRevision = ++districtRevision;
-        const geometry = getLayerPathsWithData({ year: next }, data.map, false);
-        const previousYear = year;
-        districtTransition.cancel();
-        districtMorph.stop();
-        const lineLayer = districtLayers.find((layer) => layer.dataset.layer === 'district-lines');
-        const morph = features.districtMorph &&
-            options.animate !== false &&
-            initialized &&
-            !reducedMotion.matches &&
-            (enabled('districtLines') || enabled('districtFills'))
-            ? features.districtMorph
-            : false;
-        const previousOutlines = morph && lineLayer
-            ? new Map([...lineLayer.querySelectorAll('path[data-district]')].map((path) => [
-                path.dataset.district ?? '',
-                path.getAttribute('d') ?? '',
-            ]))
-            : undefined;
-        for (const layer of districtLayers) {
-            if (morph) {
-                // The morph replaces the line crossfade; fills fade across the whole morph.
-                if (layer !== lineLayer)
-                    districtTransition.fade(layer, morph.duration);
-            }
-            else if (options.animate && !reducedMotion.matches)
-                districtTransition.fade(layer, options.duration ?? 280);
-            layer.replaceChildren(...geometry.districts.map((district) => svgElement('path', {
-                'data-district': district.id,
-                d: district.path,
-                ...(layer.dataset.layer === 'district-fills'
-                    ? { 'fill-rule': 'evenodd' }
-                    : { fill: 'none', 'stroke-width': 1.1 }),
-            })));
-        }
-        year = next;
-        districtStyles = prepared;
-        hoveredDistrict = null;
-        root.dataset.year = String(year);
-        svg.dataset.year = String(year);
-        districtItems = (data.districts[next]?.features ?? []).flatMap((feature) => feature.properties.labelPoints.map((point) => ({
-            point: map.project(point),
-            name: String(feature.properties.district),
-            kind: 'district',
-        })));
-        if (selectedDistrict !== null && !districtRow(selectedDistrict))
-            selectedDistrict = null;
-        if (selectedDistrict === null)
-            delete root.dataset.selectedDistrict;
-        updateDistrictAppearance();
-        updateComposition();
-        if (morph && lineLayer && previousOutlines)
-            districtMorph.start(lineLayer, previousOutlines, {
-                duration: morph.duration,
-                stroke: colors.district ?? '#71838a',
-            });
-        scheduleLabels();
-        status.textContent = `${year} supervisorial districts.`;
-        root.dispatchEvent(new CustomEvent('districtyearchange', { bubbles: true, detail: { year, previousYear } }));
-        if (!destroyed && committedRevision === districtRevision && selectedDistrict !== null)
-            root.dispatchEvent(new CustomEvent('districtchange', {
-                bubbles: true,
-                detail: districtSelection(selectedDistrict),
-            }));
-    }
+    const districts = createDistrictController({
+        root,
+        svg,
+        status,
+        data,
+        districtLayers,
+        reducedMotion,
+        enabled,
+        fitGeometry,
+        updateComposition,
+        scheduleLabels,
+        get year() {
+            return year;
+        },
+        set year(value) {
+            year = value;
+        },
+        get theme() {
+            return theme;
+        },
+        get colors() {
+            return colors;
+        },
+        get features() {
+            return features;
+        },
+        get destroyed() {
+            return destroyed;
+        },
+        get initialized() {
+            return initialized;
+        },
+        fadeDuration: () => layerFades.duration(),
+        project: map.project,
+        setLabels: (items) => {
+            districtItems = items;
+        },
+    }, initialDistrictStyle);
+    const { districtRow, districtSelection, getSelectedDistrict, updateDistrictAppearance, selectDistrict, activateDistrict, setDistrictStyle, setDistrictYear, transition: districtTransition, morph: districtMorph, } = districts;
     updateDistrictAppearance();
     let destroyed = false;
     let initialized = false;
     const layerFades = createLayerTransitions(() => initialized && features.layerTransitions && !reducedMotion.matches
         ? features.layerTransitions.duration
         : 0);
-    const districtMorph = createDistrictMorph();
     const frames = createFrameScheduler({
         request: (callback) => requestAnimationFrame(callback),
         cancel: (id) => cancelAnimationFrame(id),
@@ -441,7 +312,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             if (!visual)
                 continue;
             const ring = features.selectedMarkerRing;
-            visual.ring.setAttribute('display', ring && marker.id === selectedMarker ? 'inline' : 'none');
+            visual.ring.setAttribute('display', ring && marker.id === markers.selected ? 'inline' : 'none');
             visual.ring.setAttribute('stroke', ring ? (ring.color ?? selectedMarkerColor) : selectedMarkerColor);
             visual.ring.setAttribute('stroke-width', String(ring ? ring.width : 2));
         }
@@ -476,7 +347,6 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         kind: 'road',
     }));
     const secondaryRoads = svg.querySelectorAll('[data-key-road-level="secondary"]');
-    let secondaryRoadsVisible;
     const scaleUnitsPerMeter = Math.abs(map.project([-122.44, 37.76])[0] - map.project([-122.45, 37.76])[0]) / 879;
     const parkItems = (data.map.landmarks ?? []).map((feature) => ({
         point: map.project(feature.label),
@@ -484,18 +354,57 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         kind: 'park',
     }));
     const markerCatalog = createMarkerCatalog(markerRenderer, markerSelect, map.project);
-    let selectedMarker = null;
     const markerNavigation = createMarkerNavigation(svg, controller.signal);
+    const markers = createMarkerController({
+        root,
+        canvas,
+        svg,
+        markerLayer,
+        markerSelect,
+        markerLabel,
+        markerCatalog,
+        markerNavigation,
+        strings,
+        fitPadding,
+        onMarkerActivate,
+        invalidateClusters,
+        drawClusters,
+        materializeMarker,
+        scheduleLabels,
+        syncFeatureControls,
+        moveView,
+        get markerChooser() {
+            return markerChooser;
+        },
+        get destroyed() {
+            return destroyed;
+        },
+        get view() {
+            return view;
+        },
+        get features() {
+            return features;
+        },
+        get markerColor() {
+            return markerColor;
+        },
+        get selectedMarkerColor() {
+            return selectedMarkerColor;
+        },
+        get controls() {
+            return controls;
+        },
+    });
+    const { getSelectedMarker, selectMarker, setMarkers, activateMarker } = markers;
     const markerChooser = createMarkerChooser(canvas, svg, (id) => {
         if (destroyed)
             return;
         selectMarker(id);
-        if (!destroyed && selectedMarker === id)
+        if (!destroyed && markers.selected === id)
             markerCatalog.items
                 .find((item) => item.marker.id === id)
                 ?.visual?.node.focus({ preventScroll: true });
     });
-    let markerRevision = 0;
     const clusterLayer = svgElement('g', { 'data-layer': 'marker-clusters' });
     geography.insertBefore(clusterLayer, markerLayer);
     function materializeMarker(item) {
@@ -505,7 +414,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
                 markerColor,
                 selectedMarkerColor,
                 reducedMotion: reducedMotion.matches,
-                selected: item.marker.id === selectedMarker,
+                selected: item.marker.id === markers.selected,
             }),
         });
     }
@@ -539,8 +448,8 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             unit,
             view,
             items: markerCatalog.items,
-            revision: markerRevision,
-            selected: selectedMarker,
+            revision: markers.revision,
+            selected: markers.selected,
             features,
             markerColor,
             markerRadius,
@@ -629,141 +538,70 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         moveView([0, 0, 800], options);
     }
     function scheduleLabels() {
-        if (destroyed)
-            return;
-        frames.invalidate();
-    }
-    let labelInputs = [];
-    let preparedLabels = [];
-    function prepareLabels(width, zoom) {
-        // Only screen-space positioning changes during pan or within these zoom/width bands.
-        const inputs = [
-            neighborhoods.items,
-            neighborhoods.selected,
-            districtItems,
-            markerRevision,
-            layers,
-            mode,
-            labelStyle,
-            colors,
-            minLabelSize,
-            maxLabelSize,
-            markerRadius,
-            zoom >= 1.8,
-            width >= 550,
-        ];
-        if (inputs.every((value, index) => value === labelInputs[index]))
-            return preparedLabels;
-        labelInputs = inputs;
-        const selectedItem = neighborhoods.items.find((item) => item.feature === neighborhoods.selected);
-        const candidates = [];
-        const marker = markerCatalog.items.find((item) => item.marker.id === selectedMarker);
-        if (marker)
-            candidates.push({
-                point: marker.point,
-                name: marker.marker.label ?? marker.marker.id,
-                kind: 'selected-marker',
-            });
-        if (selectedItem?.point && enabled('neighborhoodLabels'))
-            candidates.push({
-                point: selectedItem.point,
-                name: selectedItem.feature.properties.canonicalName,
-                kind: 'selected',
-            });
-        preparedLabels = styleLabels(labelCandidates({
-            selected: candidates,
-            districts: enabled('districtLabels') ? districtItems : [],
-            stations: enabled('bartStations') ? stationItems : [],
-            parks: enabled('landmarks') ? parkItems : [],
-            roads: enabled('roadLabels') ? roadItems : [],
-            neighborhoods: enabled('neighborhoodLabels')
-                ? neighborhoods.items
-                    .filter((item) => item.point !== undefined)
-                    .sort((a, b) => b.area - a.area || a.feature.id.localeCompare(b.feature.id))
-                    .flatMap((item) => item.feature !== neighborhoods.selected && item.point
-                    ? [
-                        {
-                            point: item.point,
-                            name: item.feature.properties.canonicalName,
-                            kind: 'neighborhood',
-                        },
-                    ]
-                    : [])
-                : [],
-        }, width, zoom), {
-            colors,
-            labelStyle,
-            labelSize: { min: minLabelSize, max: maxLabelSize },
-            markerRadius: marker?.marker.radius ?? markerRadius,
-        });
-        return preparedLabels;
+        labelCoordinator.schedule();
     }
+    const labelCoordinator = createLabelCoordinator({
+        root,
+        canvas,
+        scale,
+        overlayElement,
+        secondaryRoads,
+        stationItems,
+        roadItems,
+        parkItems,
+        scaleUnitsPerMeter,
+        neighborhoods,
+        markerCatalog,
+        markers,
+        enabled,
+        drawClusters,
+        labelLayer,
+        invalidateFrame: frames.invalidate,
+        get districtItems() {
+            return districtItems;
+        },
+        get layers() {
+            return layers;
+        },
+        get mode() {
+            return mode;
+        },
+        get labelStyle() {
+            return labelStyle;
+        },
+        get colors() {
+            return colors;
+        },
+        get minLabelSize() {
+            return minLabelSize;
+        },
+        get maxLabelSize() {
+            return maxLabelSize;
+        },
+        get markerRadius() {
+            return markerRadius;
+        },
+        get view() {
+            return view;
+        },
+        get destroyed() {
+            return destroyed;
+        },
+        get features() {
+            return features;
+        },
+        get labels() {
+            return labels;
+        },
+        get renderedMarkers() {
+            return renderedMarkers;
+        },
+        get renderedClusters() {
+            return renderedClusters;
+        },
+    });
     function drawLabels() {
-        if (destroyed)
-            return;
-        const canvasBox = canvas.getBoundingClientRect();
-        const width = canvasBox.width;
-        if (!width)
-            return;
-        const unit = view[2] / width, zoom = 800 / view[2];
-        if (features.scaleBar) {
-            const pixelsPerMeter = scaleUnitsPerMeter / unit;
-            const base = 10 ** Math.floor(Math.log10(100 / pixelsPerMeter));
-            const meters = [5, 2, 1].map((factor) => factor * base).find((value) => value * pixelsPerMeter <= 100) ??
-                base;
-            const scaleWidth = `${meters * pixelsPerMeter}px`;
-            const scaleText = meters >= 1000 ? `${meters / 1000} km` : `${meters} m`;
-            if (scale.style.width !== scaleWidth)
-                scale.style.width = scaleWidth;
-            if (scale.textContent !== scaleText)
-                scale.textContent = scaleText;
-        }
-        // Read overlay bounds before SVG writes; scale furniture above must have its current width.
-        const furnitureBounds = [...overlayElement.children]
-            .filter((node) => node.getClientRects().length > 0)
-            .map((node) => {
-            const box = node.getBoundingClientRect();
-            return [
-                box.left - canvasBox.left - 3,
-                box.top - canvasBox.top - 3,
-                box.right - canvasBox.left + 3,
-                box.bottom - canvasBox.top + 3,
-            ];
-        });
-        const showSecondaryRoads = zoom >= 1.8;
-        if (showSecondaryRoads !== secondaryRoadsVisible) {
-            for (const road of secondaryRoads)
-                road.style.display = showSecondaryRoads ? '' : 'none';
-            secondaryRoadsVisible = showSecondaryRoads;
-        }
-        for (const station of stationItems)
-            setAttributeIfChanged(station.node, 'r', 4.5 * unit);
-        drawClusters(unit);
-        if (!labels) {
-            labelRenderer.clear();
-            root.dataset.visibleLabels = '0';
-            return;
-        }
-        const labelCandidates = prepareLabels(width, zoom);
-        const stationBounds = (enabled('bartStations') ? stationItems : []).map(({ point }) => {
-            const x = (point[0] - view[0]) / unit;
-            const y = (point[1] - view[1]) / unit;
-            return [x - 6, y - 6, x + 6, y + 6];
-        });
-        const markerBounds = renderedMarkers.map(({ point, marker }) => {
-            const radius = marker.radius ?? markerRadius;
-            const x = (point[0] - view[0]) / unit, y = (point[1] - view[1]) / unit;
-            return [x - radius - 3, y - radius - 3, x + radius + 3, y + radius + 3];
-        });
-        root.dataset.visibleLabels = String(labelRenderer.draw(labelCandidates, view, width, [
-            ...stationBounds,
-            ...markerBounds,
-            ...furnitureBounds,
-            ...renderedClusters.map(({ point }) => {
-                const x = (point[0] - view[0]) / unit, y = (point[1] - view[1]) / unit;
-                return [x - 26, y - 26, x + 26, y + 26];
-            }),
-        ]));
+        labelCoordinator.draw();
     }
     const sidebar = ui.createSidebar?.(shell, data, chrome, strings.emptyResults, searchNeighborhoods);
     function updateDetail() {
@@ -869,91 +707,6 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         attribution.textContent = description;
         scheduleLabels();
     }
-    function getSelectedMarker() {
-        const marker = markerCatalog.items.find((item) => item.marker.id === selectedMarker)?.marker;
-        return marker ? { ...marker, position: [...marker.position] } : null;
-    }
-    function selectMarker(id, options = {}) {
-        if (destroyed)
-            return false;
-        const item = markerCatalog.items.find((item) => item.marker.id === id);
-        if (id !== null && !item)
-            return false;
-        validateCameraOptions(options);
-        const width = canvas.getBoundingClientRect().width;
-        const target = item && options.fit !== false
-            ? width
-                ? fitViewport([...item.point, ...item.point], width, fitPadding)
-                : fitBounds([...item.point, ...item.point])
-            : null;
-        const revision = ++markerRevision;
-        const changed = selectedMarker !== id;
-        selectedMarker = id;
-        if (changed)
-            invalidateClusters();
-        markerSelect.value = id ?? '';
-        for (const entry of markerCatalog.items) {
-            const active = entry.marker.id === id;
-            const visual = active ? materializeMarker(entry).visual : entry.visual;
-            if (!visual)
-                continue;
-            const pressed = String(active);
-            const ring = active && features.selectedMarkerRing ? 'inline' : 'none';
-            const fill = active ? selectedMarkerColor : (entry.marker.color ?? markerColor);
-            if (visual.node.getAttribute('aria-pressed') !== pressed)
-                visual.node.setAttribute('aria-pressed', pressed);
-            if (visual.ring.getAttribute('display') !== ring)
-                visual.ring.setAttribute('display', ring);
-            if (visual.dot.getAttribute('fill') !== fill)
-                visual.dot.setAttribute('fill', fill);
-            if (active && markerLayer.lastChild !== visual.node)
-                markerLayer.append(visual.node);
-        }
-        scheduleLabels();
-        if (width || !features.clustering)
-            drawClusters(width ? view[2] / width : 1);
-        const marker = getSelectedMarker();
-        if (changed)
-            root.dispatchEvent(new CustomEvent('markerchange', { bubbles: true, detail: { id, marker } }));
-        if (!destroyed && changed && marker && markerRevision === revision && selectedMarker === id)
-            onMarkerActivate?.({ ...marker });
-        if (!destroyed && markerRevision === revision && target)
-            moveView(target, options);
-        return true;
-    }
-    function setMarkers(markers) {
-        if (destroyed)
-            return;
-        const prepared = markerCatalog.prepare(markers, selectedMarker);
-        if (!prepared)
-            return;
-        const { selection: nextSelection, focused: focusedMarker } = prepared;
-        invalidateClusters();
-        prepared.commit();
-        markerLabel.hidden = !markerCatalog.items.length || controls.markerPicker === false;
-        if (markerLabel.firstChild)
-            markerLabel.firstChild.textContent = `${strings.chooseMarker ?? 'Choose marker'} (${markerCatalog.items.length})`;
-        syncFeatureControls();
-        const revision = markerRevision + 1;
-        selectMarker(nextSelection, { fit: false });
-        if (!destroyed && markerRevision === revision && focusedMarker) {
-            markerNavigation.sync(markerCatalog.items.flatMap((item) => (item.visual ? [item.visual.node] : [])));
-            if (!markerNavigation.recover()) {
-                const recovery = markerCatalog.items.find((item) => item.marker.id === focusedMarker) ??
-                    markerCatalog.items[0];
-                if (recovery) {
-                    const { node } = materializeMarker(recovery).visual;
-                    markerLayer.append(node);
-                    node.focus({ preventScroll: true });
-                    const width = canvas.getBoundingClientRect().width;
-                    if (width)
-                        drawClusters(view[2] / width);
-                }
-                else
-                    svg.focus({ preventScroll: true });
-            }
-        }
-    }
     function setControls(patch) {
         if (destroyed)
             return;
@@ -1052,21 +805,6 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
     });
     listen(markerLayer, 'focusout', scheduleLabels);
     listen(markerLayer, 'focusin', scheduleLabels);
-    function activateMarker(id, node) {
-        const item = markerCatalog.items.find((item) => item.marker.id === id);
-        if (!item)
-            return;
-        const coincident = markerCatalog.items.filter((other) => other.point[0] === item.point[0] && other.point[1] === item.point[1]);
-        if (coincident.length > 1)
-            markerChooser.open(coincident.map((other) => other.marker), node);
-        else {
-            selectMarker(id);
-            if (!destroyed && selectedMarker === id)
-                markerCatalog.items
-                    .find((other) => other.marker.id === id)
-                    ?.visual?.node.focus({ preventScroll: true });
-        }
-    }
     listen(markerLayer, 'click', (event) => {
         const node = event.target instanceof Element ? event.target.closest('[data-marker-id]') : null;
         if (node?.dataset.markerId)
@@ -1098,9 +836,9 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             ? event.target.closest('[data-layer="district-fills"] [data-district], [data-layer="district-lines"] [data-district]')
             : null;
         const id = district?.dataset.district ? Number(district.dataset.district) : null;
-        if (id === hoveredDistrict)
+        if (id === districts.hovered)
             return;
-        hoveredDistrict = id;
+        districts.hovered = id;
         updateDistrictAppearance();
         root.dispatchEvent(new CustomEvent('districthover', { bubbles: true, detail: districtSelection(id) }));
     });
@@ -1108,9 +846,9 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         if (event.relatedTarget instanceof Element &&
             event.relatedTarget.closest('[data-layer="district-fills"] [data-district], [data-layer="district-lines"] [data-district]'))
             return;
-        if (hoveredDistrict === null)
+        if (districts.hovered === null)
             return;
-        hoveredDistrict = null;
+        districts.hovered = null;
         updateDistrictAppearance();
         root.dispatchEvent(new CustomEvent('districthover', { bubbles: true, detail: districtSelection(null) }));
     });
@@ -1137,15 +875,15 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             ? prepareSource(patch.source, false)
             : undefined;
         const appearance = patch.appearance;
-        const nextStyle = appearance ? appearance.districtStyle : districtStyle;
-        const districtVersion = districtRevision;
+        const nextStyle = appearance ? appearance.districtStyle : districts.style;
+        const districtVersion = districts.revision;
         const prepared = appearance || nextYear !== year
             ? prepareDistrictStyles(data.map.districts?.[nextYear] ?? [], nextStyle)
-            : districtStyles;
+            : districts.styles;
         if (destroyed ||
             !isCurrent() ||
             revision !== presentationRevision ||
-            districtVersion !== districtRevision)
+            districtVersion !== districts.revision)
             return false;
         if (nextYear !== year) {
             // Validate target paths and label coordinates before any presentation group commits.
@@ -1156,7 +894,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         }
         onCommit?.();
         if (appearance) {
-            districtRevision++;
+            districts.invalidate();
             const next = copyAppearance(appearance);
             theme = next.theme ?? 'transit';
             colors = next.colors ?? {};
@@ -1172,12 +910,11 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             districtTransition.cancel();
             const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
             const fade = layerFades.duration();
-            const stylesChanged = nextStyle !== districtStyle ||
-                [...prepared].some(([id, value]) => ['fill', 'stroke', 'opacity'].some((key) => value[key] !== districtStyles.get(id)?.[key]));
+            const stylesChanged = nextStyle !== districts.style ||
+                [...prepared].some(([id, value]) => ['fill', 'stroke', 'opacity'].some((key) => value[key] !== districts.styles.get(id)?.[key]));
             if (fills && fade && enabled('districtFills') && nextYear === year && stylesChanged)
                 districtTransition.fade(fills, fade);
-            districtStyle = nextStyle;
-            districtStyles = prepared;
+            districts.commitStyles(nextStyle, prepared);
             const palette = resolveMapColors(theme, colors);
             svg.querySelector('rect')?.setAttribute('fill', palette.water);
             svg.querySelector('[data-layer="coast"]')?.setAttribute('fill', palette.land);
@@ -1203,7 +940,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             ])
                 root.style.setProperty(`--sf-map-${name}`, styleOptions[token] ?? fallback);
             labelLayer.setAttribute('font-family', labelStyle.fontFamily ?? styleOptions.font ?? 'system-ui,sans-serif');
-            labelRenderer.invalidateMetrics();
+            labelCoordinator.invalidateMetrics();
             for (const station of stationItems)
                 station.node.setAttribute('stroke', colors.bart ?? '#0073ae');
             for (const kind of ['bart', 'park', 'highway', 'road']) {
@@ -1223,7 +960,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
                 const visual = item.visual;
                 if (!visual)
                     continue;
-                visual.dot.setAttribute('fill', item.marker.id === selectedMarker
+                visual.dot.setAttribute('fill', item.marker.id === markers.selected
                     ? selectedMarkerColor
                     : (item.marker.color ?? markerColor));
                 visual.ring.setAttribute('stroke', features.selectedMarkerRing
@@ -1294,7 +1031,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             canvas.style.touchAction = 'pan-y pinch-zoom';
             observer?.disconnect();
             frames.destroy();
-            labelRenderer.clear();
+            labelCoordinator.clear();
             sidebar?.destroy();
             neighborhoods.destroy();
         },
@@ -1303,7 +1040,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         observer = new ResizeObserver(onResize);
         observer.observe(canvas);
         document.fonts?.addEventListener('loadingdone', () => {
-            labelRenderer.invalidateMetrics();
+            labelCoordinator.invalidateMetrics();
             scheduleLabels();
         }, { signal: controller.signal });
         reducedMotion.addEventListener('change', () => {