@kahwee/sf-map-svg 5.1.1 → 5.1.3

package/dist/src/explorer-core.js

@@ -4,17 +4,17 @@ import { createClusterLayer } from './cluster-layer.js';
 import { clusterPoints } from './clusters.js';
 import { createDistrictController } from './district-controller.js';
 import { prepareDistrictStyles } from './district-style.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';
@@ -177,7 +177,6 @@ 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];
     const districts = createDistrictController({
@@ -313,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));
         }
@@ -348,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),
@@ -356,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) {
@@ -377,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,
             }),
         });
     }
@@ -411,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,
@@ -501,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() {
@@ -741,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;
@@ -924,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)
@@ -994,7 +860,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         root.dispatchEvent(new CustomEvent('mapresize', { bubbles: true }));
     };
     let presentationRevision = 0;
-    function applyPresentation(patch, onCommit, isCurrent = () => true) {
+    function preparePresentation(patch) {
         const revision = ++presentationRevision;
         const nextYear = patch.year ?? year;
         const nextMode = patch.mode ?? mode;
@@ -1014,11 +880,8 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         const prepared = appearance || nextYear !== year
             ? prepareDistrictStyles(data.map.districts?.[nextYear] ?? [], nextStyle)
             : districts.styles;
-        if (destroyed ||
-            !isCurrent() ||
-            revision !== presentationRevision ||
-            districtVersion !== districts.revision)
-            return false;
+        if (destroyed || revision !== presentationRevision || districtVersion !== districts.revision)
+            return undefined;
         if (nextYear !== year) {
             // Validate target paths and label coordinates before any presentation group commits.
             getLayerPathsWithData({ year: nextYear }, data.map, false);
@@ -1026,103 +889,120 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
                 for (const point of feature.properties.labelPoints)
                     map.project(point);
         }
-        onCommit?.();
-        if (appearance) {
-            districts.invalidate();
-            const next = copyAppearance(appearance);
-            theme = next.theme ?? 'transit';
-            colors = next.colors ?? {};
-            labelStyle = next.labelStyle ?? {};
-            areaStyle = next.areaStyle ?? {};
-            styleOptions = next.style ?? {};
-            minLabelSize = next.labelSize?.min ?? 11;
-            maxLabelSize = next.labelSize?.max ?? 12;
-            markerRadius = next.markerRadius ?? 6;
-            markerHitSize = next.markerHitSize ?? 44;
-            markerColor = next.markerColor ?? colors.marker ?? '#245b61';
-            selectedMarkerColor = next.selectedMarkerColor ?? colors.selected ?? '#f04f32';
-            districtTransition.cancel();
-            const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
-            const fade = layerFades.duration();
-            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);
-            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);
-            svg.querySelector('[data-layer="coastline"]')?.setAttribute('stroke', palette.district);
-            for (const [layer, color] of [
-                ['landmarks', palette.park],
-                ['highways', palette.highway],
-                ['key-roads', palette.road],
-            ])
-                for (const node of svg.querySelectorAll(`[data-layer="${layer}"] path`)) {
-                    node.setAttribute(layer === 'landmarks' ? 'fill' : 'stroke', color);
-                    if (layer === 'highways')
-                        node.setAttribute('stroke-width', theme === 'transit' ? '2' : '1.4');
-                }
-            for (const [token, fallback, name] of [
-                ['ink', '#18364f', 'ink'],
-                ['surface', '#fff', 'surface'],
-                ['accent', '#163d61', 'accent'],
-                ['border', '#cedae3', 'border'],
-                ['focus', '#1676b8', 'focus'],
-                ['controlGap', '6px', 'control-gap'],
-                ['font', 'system-ui,sans-serif', 'font'],
-            ])
-                root.style.setProperty(`--sf-map-${name}`, styleOptions[token] ?? fallback);
-            labelLayer.setAttribute('font-family', labelStyle.fontFamily ?? styleOptions.font ?? 'system-ui,sans-serif');
-            labelRenderer.invalidateMetrics();
-            for (const station of stationItems)
-                station.node.setAttribute('stroke', colors.bart ?? '#0073ae');
-            for (const kind of ['bart', 'park', 'highway', 'road']) {
-                const symbol = legend.querySelector(`.sf-explorer-legend-${kind}`);
-                if (symbol) {
-                    symbol.style.removeProperty(kind === 'bart' ? 'border-color' : 'background-color');
-                    if (colors[kind])
-                        symbol.style.setProperty(kind === 'bart' ? 'border-color' : 'background-color', colors[kind]);
+        let consumed = false;
+        return {
+            commit(onCommit, isCurrent) {
+                if (consumed ||
+                    destroyed ||
+                    !isCurrent() ||
+                    revision !== presentationRevision ||
+                    districtVersion !== districts.revision)
+                    return false;
+                consumed = true;
+                onCommit();
+                if (destroyed ||
+                    !isCurrent() ||
+                    revision !== presentationRevision ||
+                    districtVersion !== districts.revision)
+                    return false;
+                if (appearance) {
+                    districts.invalidate();
+                    const next = copyAppearance(appearance);
+                    theme = next.theme ?? 'transit';
+                    colors = next.colors ?? {};
+                    labelStyle = next.labelStyle ?? {};
+                    areaStyle = next.areaStyle ?? {};
+                    styleOptions = next.style ?? {};
+                    minLabelSize = next.labelSize?.min ?? 11;
+                    maxLabelSize = next.labelSize?.max ?? 12;
+                    markerRadius = next.markerRadius ?? 6;
+                    markerHitSize = next.markerHitSize ?? 44;
+                    markerColor = next.markerColor ?? colors.marker ?? '#245b61';
+                    selectedMarkerColor = next.selectedMarkerColor ?? colors.selected ?? '#f04f32';
+                    districtTransition.cancel();
+                    const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
+                    const fade = layerFades.duration();
+                    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);
+                    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);
+                    svg.querySelector('[data-layer="coastline"]')?.setAttribute('stroke', palette.district);
+                    for (const [layer, color] of [
+                        ['landmarks', palette.park],
+                        ['highways', palette.highway],
+                        ['key-roads', palette.road],
+                    ])
+                        for (const node of svg.querySelectorAll(`[data-layer="${layer}"] path`)) {
+                            node.setAttribute(layer === 'landmarks' ? 'fill' : 'stroke', color);
+                            if (layer === 'highways')
+                                node.setAttribute('stroke-width', theme === 'transit' ? '2' : '1.4');
+                        }
+                    for (const [token, fallback, name] of [
+                        ['ink', '#18364f', 'ink'],
+                        ['surface', '#fff', 'surface'],
+                        ['accent', '#163d61', 'accent'],
+                        ['border', '#cedae3', 'border'],
+                        ['focus', '#1676b8', 'focus'],
+                        ['controlGap', '6px', 'control-gap'],
+                        ['font', 'system-ui,sans-serif', 'font'],
+                    ])
+                        root.style.setProperty(`--sf-map-${name}`, styleOptions[token] ?? fallback);
+                    labelLayer.setAttribute('font-family', labelStyle.fontFamily ?? styleOptions.font ?? 'system-ui,sans-serif');
+                    labelCoordinator.invalidateMetrics();
+                    for (const station of stationItems)
+                        station.node.setAttribute('stroke', colors.bart ?? '#0073ae');
+                    for (const kind of ['bart', 'park', 'highway', 'road']) {
+                        const symbol = legend.querySelector(`.sf-explorer-legend-${kind}`);
+                        if (symbol) {
+                            symbol.style.removeProperty(kind === 'bart' ? 'border-color' : 'background-color');
+                            if (colors[kind])
+                                symbol.style.setProperty(kind === 'bart' ? 'border-color' : 'background-color', colors[kind]);
+                        }
+                    }
+                    for (const item of neighborhoods.items) {
+                        const active = item.feature === neighborhoods.selected;
+                        item.node.setAttribute('fill', active ? (areaStyle.selectedFill ?? '#408dbe') : 'transparent');
+                        item.node.setAttribute('stroke', active ? (areaStyle.selectedStroke ?? '#176ba2') : (colors.neighborhood ?? '#9caebc'));
+                    }
+                    for (const item of markerCatalog.items) {
+                        const visual = item.visual;
+                        if (!visual)
+                            continue;
+                        visual.dot.setAttribute('fill', item.marker.id === markers.selected
+                            ? selectedMarkerColor
+                            : (item.marker.color ?? markerColor));
+                        visual.ring.setAttribute('stroke', features.selectedMarkerRing
+                            ? (features.selectedMarkerRing.color ?? selectedMarkerColor)
+                            : selectedMarkerColor);
+                    }
+                    invalidateClusters();
+                    updateDistrictAppearance();
                 }
-            }
-            for (const item of neighborhoods.items) {
-                const active = item.feature === neighborhoods.selected;
-                item.node.setAttribute('fill', active ? (areaStyle.selectedFill ?? '#408dbe') : 'transparent');
-                item.node.setAttribute('stroke', active ? (areaStyle.selectedStroke ?? '#176ba2') : (colors.neighborhood ?? '#9caebc'));
-            }
-            for (const item of markerCatalog.items) {
-                const visual = item.visual;
-                if (!visual)
-                    continue;
-                visual.dot.setAttribute('fill', item.marker.id === selectedMarker
-                    ? selectedMarkerColor
-                    : (item.marker.color ?? markerColor));
-                visual.ring.setAttribute('stroke', features.selectedMarkerRing
-                    ? (features.selectedMarkerRing.color ?? selectedMarkerColor)
-                    : selectedMarkerColor);
-            }
-            invalidateClusters();
-            updateDistrictAppearance();
-        }
-        if (nextYear !== year)
-            setDistrictYear(nextYear, {}, prepared);
-        if (destroyed || revision !== presentationRevision || !isCurrent())
-            return false;
-        commitSource?.();
-        if (destroyed || revision !== presentationRevision || !isCurrent())
-            return false;
-        if (commitSource && appearance)
-            for (const item of neighborhoods.items)
-                item.node.setAttribute('stroke', colors.neighborhood ?? '#9caebc');
-        if (patch.mode !== undefined)
-            setMode(patch.mode, false);
-        if (patch.labels !== undefined)
-            setLabels(patch.labels);
-        scheduleLabels();
-        return true;
+                if (nextYear !== year)
+                    setDistrictYear(nextYear, {}, prepared);
+                if (destroyed || revision !== presentationRevision || !isCurrent())
+                    return false;
+                commitSource?.();
+                if (destroyed || revision !== presentationRevision || !isCurrent())
+                    return false;
+                if (commitSource && appearance)
+                    for (const item of neighborhoods.items)
+                        item.node.setAttribute('stroke', colors.neighborhood ?? '#9caebc');
+                if (patch.mode !== undefined)
+                    setMode(patch.mode, false);
+                if (patch.labels !== undefined)
+                    setLabels(patch.labels);
+                scheduleLabels();
+                return true;
+            },
+        };
     }
     const explorer = Object.assign(root, {
-        applyPresentation,
+        preparePresentation,
         getMapState: () => ({ mode, source: neighborhoods.source, year, labels }),
         selectNeighborhood,
         getSelection,
@@ -1165,7 +1045,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();
         },
@@ -1174,7 +1054,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', () => {