@kahwee/sf-map-svg 5.1.2 → 5.1.4

package/dist/src/{explorer-core.js → interactive/map-engine.js}

@@ -1,28 +1,28 @@
-import { copyAppearance } from './appearance.js';
-import { createCamera, validateCameraOptions } from './camera.js';
-import { createClusterLayer } from './cluster-layer.js';
-import { clusterPoints } from './clusters.js';
+import { copyAppearance } from '../appearance.js';
+import { createCamera, validateCameraOptions } from '../camera.js';
+import { createClusterLayer } from '../cluster-layer.js';
+import { clusterPoints } from '../clusters.js';
+import { prepareDistrictStyles } from '../district-style.js';
+import { element, svgElement } from '../dom.js';
+import { fitBounds, projectedBounds } from '../explorer-layout.js';
+import { controlKeys, layerKeys, normalizeFeatures, validateSwitchPatch } from '../features.js';
+import { createFrameScheduler } from '../frame-scheduler.js';
+import { createLayerTransitions } from '../layer-transition.js';
+import { createMarkerCatalog } from '../marker-catalog.js';
+import { createMarkerChooser } from '../marker-chooser.js';
+import { createMarkerNavigation } from '../marker-navigation.js';
+import { createNeighborhoodLayer, createNeighborhoodLookup, formatSourceLabel, } from '../neighborhood-layer.js';
+import { createOverlayLayer } from '../overlay-layer.js';
+import { createSFMapWithData, districtColors, getLayerPathsWithData, resolveMapColors, } from '../rendering/svg-map-renderer.js';
+import { validateExplorerOptions } from '../validation.js';
+import { fitViewport, validateViewport } from '../viewport.js';
 import { createDistrictController } from './district-controller.js';
-import { prepareDistrictStyles } from './district-style.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 { 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 { createMapControls } from './map-controls.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';
-import { createOverlayLayer } from './overlay-layer.js';
-import { validateExplorerOptions } from './validation.js';
-import { fitViewport, validateViewport } from './viewport.js';
+import { createMarkerRenderer } from './marker-renderer.js';
 /** Create an offline, browser-only neighborhood explorer. Call destroy() before disposal. */
-export function createNeighborhoodExplorerCore(options = {}, data, ui) {
+export function createMapEngine(options = {}, data, ui) {
     validateExplorerOptions(options);
     let { source = 'realtor', mode = 'neighborhoods', labels = true, neighborhood, year = 2022, theme = 'transit', colors = {}, labelStyle = {}, areaStyle = {}, districtStyle: initialDistrictStyle, motion = false, markerEntrance = false, selectedMarkerRing, clustering = false, legend: legendOptions = {}, attribution: attributionMode = 'full', northArrow = false, scaleBar = false, layerTransitions = false, districtMorph: districtMorphOption = false, interface: chrome = 'explorer', layers = {}, selectableNeighborhoods = true, labelSize = {}, fitPadding = 24, markers: initialMarkers = [], markerRadius = 6, markerHitSize = 44, markerColor = colors.marker ?? '#245b61', selectedMarkerColor = colors.selected ?? '#f04f32', onMarkerActivate, overlays: initialOverlays = [], onOverlayActivate, style: styleOptions = {}, strings = {}, controls = {}, } = options;
     if (!['neighborhoods', 'districts', 'basemap'].includes(mode))
@@ -188,7 +188,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         reducedMotion,
         enabled,
         fitGeometry,
-        updateComposition,
+        syncLayerComposition,
         scheduleLabels,
         get year() {
             return year;
@@ -229,7 +229,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         cancel: (id) => cancelAnimationFrame(id),
         render: drawLabels,
     });
-    const markerRenderer = createMarkerLayer();
+    const markerRenderer = createMarkerRenderer();
     const cancelEntrances = markerRenderer.cancelEntrances;
     const camera = createCamera({
         read: getViewport,
@@ -271,13 +271,13 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         refresh: {
             selection() {
                 scheduleLabels();
-                updateResults();
-                updateDetail();
+                updateNeighborhoodResults();
+                updateSelectionDetail();
             },
             source() {
-                updateResults();
-                updateDetail();
-                updateComposition();
+                updateNeighborhoodResults();
+                updateSelectionDetail();
+                syncLayerComposition();
             },
         },
         moveView,
@@ -466,7 +466,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         isDestroyed: () => destroyed,
     });
     const setOverlays = overlays.set;
-    const mapControls = createExplorerControls(shell, {
+    const mapControls = createMapControls(shell, {
         svg,
         signal: controller.signal,
         strings,
@@ -483,7 +483,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         setSource,
         selectNeighborhood,
         selectMarker,
-        updateResults,
+        updateNeighborhoodResults,
         search(query) {
             const exact = getNeighborhood(query, neighborhoods.source);
             const matches = searchNeighborhoods(query, neighborhoods.source);
@@ -604,16 +604,16 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         labelCoordinator.draw();
     }
     const sidebar = ui.createSidebar?.(shell, data, chrome, strings.emptyResults, searchNeighborhoods);
-    function updateDetail() {
-        sidebar?.updateDetail({
+    function updateSelectionDetail() {
+        sidebar?.updateSelectionDetail({
             mode,
             year,
             source: neighborhoods.source,
             selected: neighborhoods.selected,
         });
     }
-    function updateResults() {
-        sidebar?.updateResults({
+    function updateNeighborhoodResults() {
+        sidebar?.updateNeighborhoodResults({
             mode,
             year,
             source: neighborhoods.source,
@@ -629,9 +629,9 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         validateSwitchPatch(patch, layerKeys);
         const next = { ...layers, ...patch };
         layers = next;
-        updateComposition();
+        syncLayerComposition();
     }
-    function updateComposition() {
+    function syncLayerComposition() {
         for (const [name, key] of [
             ['landmarks', 'landmarks'],
             ['highways', 'highways'],
@@ -715,7 +715,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         controls = next;
         mapControls.update(controls);
         markerLabel.hidden = !markerCatalog.items.length || controls.markerPicker === false;
-        updateComposition();
+        syncLayerComposition();
     }
     function setMode(next, reset = true) {
         if (destroyed)
@@ -734,8 +734,8 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         const districts = mode !== 'neighborhoods';
         for (const node of [sourceLabel, searchLabel, count, results])
             node.hidden = districts;
-        updateComposition();
-        updateDetail();
+        syncLayerComposition();
+        updateSelectionDetail();
         status.textContent =
             mode === 'basemap'
                 ? 'San Francisco basemap.'
@@ -755,7 +755,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         labels = visible;
         mapControls.updateLabels(labels);
         root.dataset.labels = String(labels);
-        updateComposition();
+        syncLayerComposition();
         if (!labels) {
             labelLayer.replaceChildren();
             root.dataset.visibleLabels = '0';
@@ -860,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;
@@ -880,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);
@@ -892,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');
-            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]);
+        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 === markers.selected
-                    ? 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,

package/dist/src/{explorer-shell.d.ts → interactive/map-shell.d.ts}

@@ -1,5 +1,5 @@
-import type { NeighborhoodSource } from '../data/types.js';
-import type { NeighborhoodExplorerOptions } from './types.js';
+import type { NeighborhoodSource } from '../../data/types.js';
+import type { NeighborhoodExplorerOptions } from '../types.js';
 /** Construct shared map chrome; optional explorer content has its own factory below. */
 export declare function createMapShell({ chrome, styleOptions, strings, legendOptions, colors, attributionMode, }: {
     source: NeighborhoodSource;

package/dist/src/{explorer-shell.js → interactive/map-shell.js}

@@ -1,5 +1,5 @@
-import { element } from './dom.js';
-import { sourceNames } from './neighborhood-layer.js';
+import { element } from '../dom.js';
+import { sourceNames } from '../neighborhood-layer.js';
 let explorerCount = 0;
 /** Construct shared map chrome; optional explorer content has its own factory below. */
 export function createMapShell({ chrome, styleOptions, strings, legendOptions, colors, attributionMode, }) {

package/dist/src/{marker-controller.d.ts → interactive/marker-controller.d.ts}

@@ -1,11 +1,11 @@
-import type { Position } from '../data/types.js';
-import { type View } from './explorer-layout.js';
-import type { normalizeFeatures } from './features.js';
-import type { createMarkerCatalog } from './marker-catalog.js';
-import type { createMarkerChooser } from './marker-chooser.js';
-import type { MarkerItem, MarkerVisual } from './marker-layer.js';
-import type { createMarkerNavigation } from './marker-navigation.js';
-import type { CameraOptions, MapMarker, NeighborhoodExplorerOptions } from './types.js';
+import type { Position } from '../../data/types.js';
+import { type View } from '../explorer-layout.js';
+import type { normalizeFeatures } from '../features.js';
+import type { createMarkerCatalog } from '../marker-catalog.js';
+import type { createMarkerChooser } from '../marker-chooser.js';
+import type { createMarkerNavigation } from '../marker-navigation.js';
+import type { CameraOptions, MapMarker, NeighborhoodExplorerOptions } from '../types.js';
+import type { MarkerItem, MarkerVisual } from './marker-renderer.js';
 interface MarkerHost {
     root: HTMLElement;
     canvas: HTMLElement;

package/dist/src/{marker-controller.js → interactive/marker-controller.js}

@@ -1,6 +1,6 @@
-import { validateCameraOptions } from './camera.js';
-import { fitBounds } from './explorer-layout.js';
-import { fitViewport } from './viewport.js';
+import { validateCameraOptions } from '../camera.js';
+import { fitBounds } from '../explorer-layout.js';
+import { fitViewport } from '../viewport.js';
 /** Own selection revisions, activation and focus recovery independently of marker rendering. */
 export function createMarkerController(host) {
     const { root, canvas, svg, markerLayer, markerSelect, markerLabel, markerCatalog, markerNavigation, strings, fitPadding, onMarkerActivate, invalidateClusters, drawClusters, materializeMarker, scheduleLabels, syncFeatureControls, moveView, } = host;

package/dist/src/{marker-layer.d.ts → interactive/marker-renderer.d.ts}

@@ -1,5 +1,5 @@
-import type { normalizeFeatures } from './features.js';
-import type { MapMarker } from './types.js';
+import type { normalizeFeatures } from '../features.js';
+import type { MapMarker } from '../types.js';
 export interface MarkerVisual {
     node: SVGGElement;
     dot: SVGCircleElement;
@@ -15,7 +15,7 @@ export interface MarkerItem {
     visual: MarkerVisual | undefined;
 }
 /** Own marker visuals and entrances; selection/events remain with the controller. */
-export declare function createMarkerLayer(): {
+export declare function createMarkerRenderer(): {
     cancelEntrances: () => void;
     remove(item: MarkerItem): void;
     update(item: MarkerItem, marker: MapMarker, point: [number, number], index: number): void;

package/dist/src/{marker-layer.js → interactive/marker-renderer.js}

@@ -1,6 +1,6 @@
-import { svgElement } from './dom.js';
+import { svgElement } from '../dom.js';
 /** Own marker visuals and entrances; selection/events remain with the controller. */
-export function createMarkerLayer() {
+export function createMarkerRenderer() {
     const records = new Set();
     const animations = new Map();
     function cancelEntrances() {

package/dist/src/map.js

@@ -1,27 +1,29 @@
 import { copyAppearance } from './appearance.js';
 import { validateCameraOptions } from './camera.js';
 import { configurationPatch, expandMapOptions, prepareConfiguration } from './configuration.js';
-import { createNeighborhoodExplorerCore } from './explorer-core.js';
-import { createMapShell } from './explorer-shell.js';
-import { controlKeys, layerKeys } from './features.js';
+import { layerKeys } from './features.js';
+import { createConfigurationController } from './interactive/configuration-controller.js';
+import { createMapEngine } from './interactive/map-engine.js';
+import { createMapShell } from './interactive/map-shell.js';
 import { assertOptions } from './validation.js';
 /** No geography is imported. Supply a preset or your own immutable data. */
 export function createMap(data, options = {}) {
     const expanded = expandMapOptions(options);
-    let config = prepareConfiguration({ features: {}, layers: {}, controls: {}, appearance: {} }, {
+    const initialConfiguration = prepareConfiguration({ features: {}, layers: {}, controls: {}, appearance: {} }, {
         features: options.features,
         layers: options.layers,
         controls: options.controls,
         appearance: options.appearance,
     });
-    const element = createNeighborhoodExplorerCore({
+    const element = createMapEngine({
         mode: 'basemap',
         ...expanded,
         interface: 'map',
         onOverlayActivate: () => { },
     }, data, { createShell: createMapShell });
     const subscriptions = new Set();
-    let configurationRevision = 0;
+    const configuration = createConfigurationController(initialConfiguration, element, () => destroyed);
+    const configure = configuration.configure;
     const sourceList = ['realtor', 'sf-find', 'analysis'].filter((source) => !!data.neighborhoods[source]);
     const yearList = [2002, 2012, 2022].filter((year) => !!data.map.districts?.[year] && !!data.districts?.[year]);
     const capabilities = () => ({
@@ -42,11 +44,11 @@ export function createMap(data, options = {}) {
     const snapshot = () => ({
         ...element.getMapState(),
         ...structuredClone({
-            features: config.features,
-            layers: config.layers,
-            controls: config.controls,
+            features: configuration.current.features,
+            layers: configuration.current.layers,
+            controls: configuration.current.controls,
         }),
-        appearance: copyAppearance(config.appearance),
+        appearance: copyAppearance(configuration.current.appearance),
     });
     const resolved = () => {
         const state = element.getMapState();
@@ -58,7 +60,7 @@ export function createMap(data, options = {}) {
                 key,
                 supplied[key] &&
                     (!key.endsWith('Labels') || state.labels) &&
-                    (config.layers[key] ??
+                    (configuration.current.layers[key] ??
                         (key.startsWith('district')
                             ? state.mode === 'districts'
                             : key.startsWith('neighborhood')
@@ -119,31 +121,6 @@ export function createMap(data, options = {}) {
             element.fitGeometry(geometry, padding, motion);
         }),
     });
-    function configure(patch) {
-        const revision = ++configurationRevision;
-        const next = prepareConfiguration(config, patch);
-        const hasFeatures = 'features' in patch, hasLayers = 'layers' in patch, hasControls = 'controls' in patch;
-        const layers = Object.fromEntries(layerKeys.map((key) => [key, next.layers[key]]));
-        const controls = Object.fromEntries(controlKeys.map((key) => [key, next.controls[key]]));
-        const features = patch.features === undefined
-            ? next.features
-            : Object.fromEntries(Object.keys(patch.features).map((key) => [
-                key,
-                next.features[key],
-            ]));
-        let committed = false;
-        element.applyPresentation({ ...patch, ...('appearance' in patch ? { appearance: next.appearance } : {}) }, () => {
-            committed = true;
-            config = next;
-            if (hasFeatures)
-                element.setFeatures(features);
-            if (hasLayers)
-                element.setLayers(layers);
-            if (hasControls)
-                element.setControls(controls);
-        }, () => !destroyed && revision === configurationRevision);
-        return committed && !destroyed && revision === configurationRevision;
-    }
     return Object.freeze({
         element,
         overlayElement: element.overlayElement,
@@ -152,7 +129,7 @@ export function createMap(data, options = {}) {
             return destroyed;
         },
         configure: use((patch) => {
-            configure(configurationPatch(patch, config));
+            configure(configurationPatch(patch, configuration.current));
         }),
         resetConfiguration: use((groups = ['features', 'layers', 'controls', 'appearance']) => {
             if (!Array.isArray(groups) ||
@@ -242,7 +219,7 @@ export function createMap(data, options = {}) {
         selectDistrict: use(element.selectDistrict),
         getSelectedDistrict: use(element.getSelectedDistrict),
         setDistrictYear: use((...args) => {
-            configurationRevision++;
+            configuration.invalidate();
             element.setDistrictYear(...args);
         }),
         setDistrictStyle: use((style) => {

package/dist/src/marker-catalog.d.ts

@@ -1,7 +1,7 @@
-import type { createMarkerLayer, MarkerItem } from './marker-layer.js';
+import type { createMarkerRenderer, MarkerItem } from './interactive/marker-renderer.js';
 import type { MapMarker } from './types.js';
 /** Own ordered records and picker reconciliation; prepare before committing DOM changes. */
-export declare function createMarkerCatalog(renderer: ReturnType<typeof createMarkerLayer>, picker: HTMLSelectElement, project: (point: import('../data/types.js').Position) => [number, number]): {
+export declare function createMarkerCatalog(renderer: ReturnType<typeof createMarkerRenderer>, picker: HTMLSelectElement, project: (point: import('../data/types.js').Position) => [number, number]): {
     readonly items: MarkerItem[];
     prepare(markers: readonly MapMarker[], selected: string | null): {
         selection: string | null;

package/dist/src/{layers.d.ts → rendering/svg-layers.d.ts}

@@ -1,8 +1,8 @@
-import type { Geometry } from '../data/types.js';
-import type { DistrictRow } from './data.js';
-import type { Project } from './geometry.js';
-import type { BartStation, KeyRoad, Landmark } from './overlays.js';
-import type { MapMarker, SFMapOptions } from './types.js';
+import type { Geometry } from '../../data/types.js';
+import type { DistrictRow } from '../data.js';
+import type { Project } from '../geometry.js';
+import type { BartStation, KeyRoad, Landmark } from '../overlays.js';
+import type { MapMarker, SFMapOptions } from '../types.js';
 interface LayerContext {
     labels: boolean;
     /** Animated static maps index items for staggering and measure lines for drawing. */

package/dist/src/{layers.js → rendering/svg-layers.js}

@@ -1,4 +1,4 @@
-import { escapeXml, number, overlayLabel, stroke } from './svg.js';
+import { escapeXml, number, overlayLabel, stroke } from './svg-primitives.js';
 /** Custom JavaScript/JSON rows must not introduce markup or CSS through numeric IDs. */
 function districtId(id) {
     if (!Number.isFinite(id))