@kahwee/sf-map-svg 5.1.0 → 5.1.1

package/CHANGELOG.md

@@ -4,6 +4,12 @@ User-visible changes are recorded here. Unreleased entries describe changes on `
 
 ## Unreleased
 
+## 5.1.1 — 2026-11-05
+
+- Reserve precinct report controls and status space during loading to prevent phone layout shifts when multiple reports are available.
+
+- Isolate district selection, style revisions and cancellable motion in an internal controller while preserving public map behavior. Document interactive state ownership and verify district lifecycle callbacks.
+
 ## 5.1.0 — 2026-11-05
 
 - Add official November 2026 precinct aggregates (`data/elections/precincts-<report time>.json` with a time-ordered `precincts-index.json`) and the 2022 precinct boundaries (`data/precincts-2022.json`), reconciled with the department's summary report. Only aggregates are committed, never the ballot-level export. Export the boundaries as `precinctMaps` from `@kahwee/sf-map-svg/data` and `@kahwee/sf-map-svg/data/precincts`; results snapshots stay Pages data.

package/dist/src/district-controller.d.ts

@@ -0,0 +1,64 @@
+import type { Geometry, Position } from '../data/types.js';
+import { prepareDistrictStyles } from './district-style.js';
+import type { InteractiveSFMapData } from './explorer-data.js';
+import type { normalizeFeatures } from './features.js';
+import type { LabelItem } from './label-candidates.js';
+import type { CameraOptions, DistrictSelection, DistrictYear, NeighborhoodExplorerOptions } from './types.js';
+type Host = {
+    root: HTMLElement;
+    svg: SVGSVGElement;
+    status: HTMLElement;
+    data: InteractiveSFMapData;
+    districtLayers: SVGGElement[];
+    get year(): DistrictYear;
+    set year(value: DistrictYear);
+    get theme(): NeighborhoodExplorerOptions['theme'];
+    get colors(): NonNullable<NeighborhoodExplorerOptions['colors']>;
+    get features(): ReturnType<typeof normalizeFeatures>;
+    get destroyed(): boolean;
+    get initialized(): boolean;
+    reducedMotion: MediaQueryList;
+    enabled(layer: 'districtFills' | 'districtLines'): boolean;
+    fadeDuration(): number;
+    fitGeometry(geometry: Geometry, padding: undefined, options: CameraOptions): void;
+    project(point: Position): [number, number];
+    setLabels(items: LabelItem[]): void;
+    updateComposition(): void;
+    scheduleLabels(): void;
+};
+/** Owns district selection, styles, revisions and cancellable motion. */
+export declare function createDistrictController(host: Host, initialDistrictStyle: NeighborhoodExplorerOptions['districtStyle']): {
+    districtRow: (id: number) => import("./map-core.js").DistrictRowData | undefined;
+    districtSelection: (id: number | null) => DistrictSelection | {
+        id: null;
+        year: DistrictYear;
+        district: null;
+    };
+    getSelectedDistrict: () => DistrictSelection | null;
+    updateDistrictAppearance: () => void;
+    selectDistrict: (id: number | null, options?: {
+        fit?: boolean;
+    } & CameraOptions) => boolean;
+    activateDistrict: (id: number) => boolean;
+    setDistrictStyle: (style: ((district: import('./map-core.js').DistrictRowData) => import("./types.js").DistrictStyle) | undefined) => void;
+    setDistrictYear: (next: DistrictYear, options?: CameraOptions, preparedStyles?: ReturnType<typeof prepareDistrictStyles>) => void;
+    transition: {
+        cancel(): void;
+        fade(layer: SVGGElement, duration: number): void;
+    };
+    morph: {
+        stop: () => void;
+        start(layer: SVGGElement, previous: ReadonlyMap<string, string>, { duration, stroke }: {
+            duration: number;
+            stroke: string;
+        }): void;
+        readonly active: boolean;
+    };
+    readonly revision: number;
+    invalidate(): void;
+    readonly style: ((district: import('./map-core.js').DistrictRowData) => import("./types.js").DistrictStyle) | undefined;
+    readonly styles: ReadonlyMap<number, import("./types.js").DistrictStyle>;
+    commitStyles(style: ((district: import('./map-core.js').DistrictRowData) => import("./types.js").DistrictStyle) | undefined, styles: ReadonlyMap<number, import("./types.js").DistrictStyle>): void;
+    hovered: number | null;
+};
+export {};

package/dist/src/district-controller.js

@@ -0,0 +1,215 @@
+import { validateCameraOptions } from './camera.js';
+import { renderDistrictAppearance } from './district-layer.js';
+import { createDistrictMorph } from './district-morph.js';
+import { prepareDistrictStyles } from './district-style.js';
+import { createDistrictTransition } from './district-transition.js';
+import { svgElement } from './dom.js';
+import { getLayerPathsWithData } from './map-core.js';
+/** Owns district selection, styles, revisions and cancellable motion. */
+export function createDistrictController(host, initialDistrictStyle) {
+    const { root, svg, status, data, districtLayers, reducedMotion, enabled, fitGeometry, updateComposition, scheduleLabels, } = host;
+    const districtMorph = createDistrictMorph();
+    let selectedDistrict = null;
+    let hoveredDistrict = null;
+    let districtStyle = initialDistrictStyle;
+    let districtStyles = prepareDistrictStyles(data.map.districts?.[host.year] ?? [], districtStyle);
+    const districtTransition = createDistrictTransition();
+    let districtRevision = 0;
+    root.dataset.year = String(host.year);
+    function districtRow(id) {
+        return data.map.districts?.[host.year]?.find((district) => district.id === id);
+    }
+    function districtSelection(id) {
+        const district = id === null ? undefined : districtRow(id);
+        return district
+            ? { id: district.id, year: host.year, district: structuredClone(district) }
+            : { id: null, year: host.year, district: null };
+    }
+    function getSelectedDistrict() {
+        return selectedDistrict === null
+            ? null
+            : districtSelection(selectedDistrict);
+    }
+    function updateDistrictAppearance() {
+        renderDistrictAppearance({
+            svg,
+            rows: data.map.districts?.[host.year] ?? [],
+            styles: districtStyles,
+            selectedDistrict,
+            hoveredDistrict,
+            year: host.year,
+            theme: host.theme,
+            colors: host.colors,
+            fills: enabled('districtFills'),
+            lines: enabled('districtLines'),
+        });
+    }
+    function selectDistrict(id, options = {}) {
+        if (host.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 (host.destroyed || revision !== districtRevision)
+            return true;
+        status.textContent =
+            id === null
+                ? 'District selection cleared.'
+                : `District ${id} selected, ${host.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) || host.destroyed || revision !== districtRevision)
+            return false;
+        root.dispatchEvent(new CustomEvent('districtactivate', { bubbles: true, detail: districtSelection(id) }));
+        return !host.destroyed && revision === districtRevision;
+    }
+    function setDistrictStyle(style) {
+        if (host.destroyed)
+            return;
+        const revision = districtRevision;
+        const prepared = prepareDistrictStyles(data.map.districts?.[host.year] ?? [], style);
+        if (host.destroyed || revision !== districtRevision)
+            return;
+        districtRevision++;
+        districtStyle = style;
+        districtStyles = prepared;
+        const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
+        const fade = host.fadeDuration();
+        // 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 (host.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 === host.year)
+            return;
+        const revision = districtRevision;
+        const prepared = preparedStyles ?? prepareDistrictStyles(data.map.districts[next], districtStyle);
+        if (host.destroyed || revision !== districtRevision)
+            return;
+        const committedRevision = ++districtRevision;
+        const geometry = getLayerPathsWithData({ year: next }, data.map, false);
+        const previousYear = host.year;
+        districtTransition.cancel();
+        districtMorph.stop();
+        const lineLayer = districtLayers.find((layer) => layer.dataset.layer === 'district-lines');
+        const morph = host.features.districtMorph &&
+            options.animate !== false &&
+            host.initialized &&
+            !reducedMotion.matches &&
+            (enabled('districtLines') || enabled('districtFills'))
+            ? host.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 }),
+            })));
+        }
+        host.year = next;
+        districtStyles = prepared;
+        hoveredDistrict = null;
+        root.dataset.year = String(host.year);
+        svg.dataset.year = String(host.year);
+        host.setLabels((data.districts[next]?.features ?? []).flatMap((feature) => feature.properties.labelPoints.map((point) => ({
+            point: host.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: host.colors.district ?? '#71838a',
+            });
+        scheduleLabels();
+        status.textContent = `${host.year} supervisorial districts.`;
+        root.dispatchEvent(new CustomEvent('districtyearchange', {
+            bubbles: true,
+            detail: { year: host.year, previousYear },
+        }));
+        if (!host.destroyed && committedRevision === districtRevision && selectedDistrict !== null)
+            root.dispatchEvent(new CustomEvent('districtchange', {
+                bubbles: true,
+                detail: districtSelection(selectedDistrict),
+            }));
+    }
+    return {
+        districtRow,
+        districtSelection,
+        getSelectedDistrict,
+        updateDistrictAppearance,
+        selectDistrict,
+        activateDistrict,
+        setDistrictStyle,
+        setDistrictYear,
+        transition: districtTransition,
+        morph: districtMorph,
+        get revision() {
+            return districtRevision;
+        },
+        invalidate() {
+            districtRevision++;
+        },
+        get style() {
+            return districtStyle;
+        },
+        get styles() {
+            return districtStyles;
+        },
+        commitStyles(style, styles) {
+            districtStyle = style;
+            districtStyles = styles;
+        },
+        get hovered() {
+            return hoveredDistrict;
+        },
+        set hovered(id) {
+            hoveredDistrict = id;
+        },
+    };
+}

package/dist/src/explorer-core.js

@@ -2,10 +2,8 @@ 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 { createExplorerControls } from './explorer-controls.js';
 import { fitBounds, projectedBounds } from './explorer-layout.js';
@@ -182,177 +180,51 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
     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),
@@ -1098,9 +970,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 +980,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 +1009,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 +1028,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 +1044,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);

package/llms-full.txt

@@ -2,13 +2,13 @@
 
 > Offline San Francisco SVG maps with explicit geographic imports, no runtime dependencies, static rendering, and a browser controller.
 
-@kahwee/sf-map-svg 5.1.0 · local working tree. Node >=24.0.0 for server rendering; browsers need a DOM and a JSON-capable bundler.
+@kahwee/sf-map-svg 5.1.1 · local working tree. Node >=24.0.0 for server rendering; browsers need a DOM and a JSON-capable bundler.
 
 These are working-tree docs. Unreleased changelog entries may describe APIs absent from npm; verify the installed version before copying them.
 
 Use renderMap(data, options) for SVG strings; createMap(data, options) returns a controller. Mount map.element and destroy it on unmount. Choose mode explicitly: createMap defaults to basemap. Geography is separate; staticMapData and fullMapData have different shapes.
 
-<!-- Generated from README.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from README.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # SF Map SVG
 
@@ -267,7 +267,7 @@ for raw samples, output-equivalence checks, and reproducible commands.
 
 ---
 
-<!-- Generated from docs/developer-guide.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from docs/developer-guide.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Developer guide
 
@@ -433,7 +433,7 @@ See [API options](https://github.com/kahwee/sf-map-svg/blob/main/docs/API.md), [
 
 ---
 
-<!-- Generated from docs/API.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from docs/API.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Map options and lifecycle
 
@@ -619,7 +619,7 @@ Call `binding.setMarkers(next)` after `map.setMarkers(next)` when the catalog ch
 
 ---
 
-<!-- Generated from docs/EXAMPLES.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from docs/EXAMPLES.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Examples
 
@@ -760,7 +760,7 @@ See [query semantics and limitations](https://github.com/kahwee/sf-map-svg/blob/
 
 ---
 
-<!-- Generated from docs/consumer-integration.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from docs/consumer-integration.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Embedding and progressive enhancement
 
@@ -938,7 +938,7 @@ keyboard, focus, and dismissal behavior. See [coordinates and units](https://git
 
 ---
 
-<!-- Generated from docs/migration-v5.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from docs/migration-v5.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Migrating to v5
 
@@ -1043,7 +1043,7 @@ collections. Shared edges can match more than one feature. See the
 
 ---
 
-<!-- Generated from docs/migration-v3.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from docs/migration-v3.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Migrate to version 3
 
@@ -1084,7 +1084,7 @@ District styles are now prepared once per district on construction and style/yea
 
 ---
 
-<!-- Generated from SOURCES.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from SOURCES.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Geometry and provenance
 
@@ -1321,7 +1321,7 @@ Report-history points preserve only actual validated source counts and their dis
 
 ---
 
-<!-- Generated from CHANGELOG.md; @kahwee/sf-map-svg 5.1.0 · local working tree. -->
+<!-- Generated from CHANGELOG.md; @kahwee/sf-map-svg 5.1.1 · local working tree. -->
 
 # Changelog
 
@@ -1329,6 +1329,12 @@ User-visible changes are recorded here. Unreleased entries describe changes on `
 
 ## Unreleased
 
+## 5.1.1 — 2026-11-05
+
+- Reserve precinct report controls and status space during loading to prevent phone layout shifts when multiple reports are available.
+
+- Isolate district selection, style revisions and cancellable motion in an internal controller while preserving public map behavior. Document interactive state ownership and verify district lifecycle callbacks.
+
 ## 5.1.0 — 2026-11-05
 
 - Add official November 2026 precinct aggregates (`data/elections/precincts-<report time>.json` with a time-ordered `precincts-index.json`) and the 2022 precinct boundaries (`data/precincts-2022.json`), reconciled with the department's summary report. Only aggregates are committed, never the ballot-level export. Export the boundaries as `precinctMaps` from `@kahwee/sf-map-svg/data` and `@kahwee/sf-map-svg/data/precincts`; results snapshots stay Pages data.
@@ -1711,7 +1717,7 @@ consistent home, and makes animation and subscription ownership predictable.
 
 # Published type contracts
 
-@kahwee/sf-map-svg 5.1.0 · local working tree. These declarations are generated by TypeScript. Use package export paths, not the internal filenames below. Imported relative contracts are included for context, not as additional public entry points.
+@kahwee/sf-map-svg 5.1.1 · local working tree. These declarations are generated by TypeScript. Use package export paths, not the internal filenames below. Imported relative contracts are included for context, not as additional public entry points.
 
 | Public import | Declaration |
 | --- | --- |

package/llms.txt

@@ -2,7 +2,7 @@
 
 > Offline San Francisco SVG maps with explicit geographic imports, no runtime dependencies, static rendering, and a browser controller.
 
-@kahwee/sf-map-svg 5.1.0 · local working tree. Node >=24.0.0 for server rendering; browsers need a DOM and a JSON-capable bundler.
+@kahwee/sf-map-svg 5.1.1 · local working tree. Node >=24.0.0 for server rendering; browsers need a DOM and a JSON-capable bundler.
 
 These are working-tree docs. Unreleased changelog entries may describe APIs absent from npm; verify the installed version before copying them.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahwee/sf-map-svg",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Offline SVG maps of San Francisco with district boundaries, parks, landmarks, and BART stations.",
   "type": "module",
   "main": "./dist/src/api.js",