@kahwee/sf-map-svg 5.1.3 → 6.0.0

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';

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,10 +1,10 @@
 import { copyAppearance } from './appearance.js';
 import { validateCameraOptions } from './camera.js';
 import { configurationPatch, expandMapOptions, prepareConfiguration } from './configuration.js';
-import { createConfigurationController } from './configuration-controller.js';
-import { createNeighborhoodExplorerCore } from './explorer-core.js';
-import { createMapShell } from './explorer-shell.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 = {}) {
@@ -15,7 +15,7 @@ export function createMap(data, options = {}) {
         controls: options.controls,
         appearance: options.appearance,
     });
-    const element = createNeighborhoodExplorerCore({
+    const element = createMapEngine({
         mode: 'basemap',
         ...expanded,
         interface: 'map',

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/palettes.d.ts

@@ -1,7 +1,7 @@
-import type { SFMapOptions } from './types.js';
+import type { SvgRenderOptions } from './types.js';
 /** Shared tokens for static SVGs, interactive maps, and consumer-owned place cards. */
 export interface MapPalette {
-    readonly colors: NonNullable<SFMapOptions['colors']>;
+    readonly colors: NonNullable<SvgRenderOptions['colors']>;
     readonly haloColor: string;
     readonly markerColor: string;
     readonly selectedMarkerColor: string;

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

@@ -1,15 +1,15 @@
-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, SvgRenderOptions } from '../types.js';
 interface LayerContext {
     labels: boolean;
     /** Animated static maps index items for staggering and measure lines for drawing. */
     animated?: boolean;
-    theme: NonNullable<SFMapOptions['theme']>;
+    theme: NonNullable<SvgRenderOptions['theme']>;
     idPrefix: string;
-    colors: Required<NonNullable<SFMapOptions['colors']>>;
+    colors: Required<NonNullable<SvgRenderOptions['colors']>>;
     project: Project;
     path: (geometry: Geometry | null | undefined) => string;
 }

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))

package/dist/src/{map-core.d.ts → rendering/svg-map-renderer.d.ts}

@@ -1,7 +1,7 @@
-import type { Geometry, Position } from '../data/types.js';
-import type { DistrictYear, SFMapOptions } from './types.js';
-export type { DistrictYear, MapMarker, MapOverlay, SFMapOptions } from './types.js';
-import { type Project } from './geometry.js';
+import type { Geometry, Position } from '../../data/types.js';
+import type { DistrictYear, SvgRenderOptions } from '../types.js';
+export type { DistrictYear, MapMarker, MapOverlay, SvgRenderOptions } from '../types.js';
+import { type Project } from '../geometry.js';
 export interface SFMapData {
     coast: Geometry;
     districts?: Readonly<Partial<Record<DistrictYear, readonly DistrictRowData[]>>>;
@@ -50,7 +50,7 @@ export interface BartStationData {
 export declare const districtYears: readonly DistrictYear[];
 export declare const districtColors: readonly string[];
 /** Canonical geometry in the same fitted coordinate space used by renderMap. */
-export declare function getLayerPathsWithData(options: SFMapOptions, data: SFMapData, complete?: boolean): {
+export declare function getLayerPathsWithData(options: SvgRenderOptions, data: SFMapData, complete?: boolean): {
     year: DistrictYear;
     viewBox: [number, number, number, number];
     project: (coordinates: Position) => [number, number];
@@ -82,7 +82,7 @@ export declare function getLayerPathsWithData(options: SFMapOptions, data: SFMap
         point: [number, number];
     }[];
 };
-export declare function resolveMapColors(theme: SFMapOptions['theme'], colors?: SFMapOptions['colors']): {
+export declare function resolveMapColors(theme: SvgRenderOptions['theme'], colors?: SvgRenderOptions['colors']): {
     water: string;
     land: string;
     district: string;
@@ -97,7 +97,7 @@ export declare function resolveMapColors(theme: SFMapOptions['theme'], colors?:
     selected: string;
 };
 /** Make an offline SVG and the matching longitude/latitude projection. */
-export declare function createSFMapWithData(options: SFMapOptions, data: SFMapData, renderLabels?: (project: Project) => string): {
+export declare function createSFMapWithData(options: SvgRenderOptions, data: SFMapData, renderLabels?: (project: Project) => string): {
     svg: string;
     project: (coordinates: Position) => [number, number];
     viewBox: [number, number, number, number];

package/dist/src/{map-core.js → rendering/svg-map-renderer.js}

@@ -1,9 +1,9 @@
-import { validateMarkers, validateOverlays } from './validation.js';
-import { prepareDistrictStyles } from './district-style.js';
-import { geometryPath, positions, rawProject } from './geometry.js';
-import * as layers from './layers.js';
-import { normalizeStaticAnimation, staticAnimationStyle } from './static-animation.js';
-import { escapeXml, stroke } from './svg.js';
+import { validateMarkers, validateOverlays } from '../validation.js';
+import { prepareDistrictStyles } from '../district-style.js';
+import { geometryPath, positions, rawProject } from '../geometry.js';
+import { normalizeStaticAnimation, staticAnimationStyle } from '../static-animation.js';
+import * as layers from './svg-layers.js';
+import { escapeXml, stroke } from './svg-primitives.js';
 export const districtYears = Object.freeze([2002, 2012, 2022]);
 export const districtColors = Object.freeze([
     '#c8dce5',

package/dist/src/static-animation.d.ts

@@ -1,10 +1,10 @@
-import type { SFMapOptions } from './types.js';
+import type { SvgRenderOptions } from './types.js';
 export interface StaticAnimation {
     duration: number;
     delay: number;
 }
 /** Validate `animation` and return timings, or null when animation is off. */
-export declare function normalizeStaticAnimation(value: SFMapOptions['animation']): StaticAnimation | null;
+export declare function normalizeStaticAnimation(value: SvgRenderOptions['animation']): StaticAnimation | null;
 /**
  * Scoped, self-contained CSS for an animated static map. It runs when the SVG is
  * inserted into a page or loaded as an image, and stays still under reduced motion.

package/dist/src/static-labels.d.ts

@@ -1,7 +1,7 @@
 import type { Project } from './geometry.js';
-import type { SFMapData } from './map-core.js';
-import type { SFMapOptions } from './types.js';
+import type { SFMapData } from './rendering/svg-map-renderer.js';
+import type { SvgRenderOptions } from './types.js';
 /** Conservative portable metrics; the browser refines these with its actual font. */
 export declare function estimateLabelWidth(text: string, fontSize: number): number;
 /** Interactive overview rules, expressed entirely in screen pixels before serialization. */
-export declare function staticLabels(data: SFMapData, options: SFMapOptions, project: Project): string;
+export declare function staticLabels(data: SFMapData, options: SvgRenderOptions, project: Project): string;

package/dist/src/static-labels.js

@@ -1,7 +1,7 @@
 import { interiorAnchor, layoutLabels, projectedBounds } from './explorer-layout.js';
 import { labelCandidates, styleLabels } from './label-candidates.js';
 import { spreadLabels } from './label-spread.js';
-import { escapeXml, number } from './svg.js';
+import { escapeXml, number } from './rendering/svg-primitives.js';
 /** Conservative portable metrics; the browser refines these with its actual font. */
 export function estimateLabelWidth(text, fontSize) {
     return Array.from(text).reduce((width, char) => width +
@@ -97,7 +97,7 @@ export function staticLabels(data, options, project) {
             : []),
         ...markers.map((item) => {
             const [x, y] = point(item.position);
-            // Also cover the legacy SVG marker when it is larger than its interactive counterpart.
+            // Also cover the static SVG marker when it is larger than its interactive counterpart.
             const radius = Math.max(item.radius ?? 6, (item.radius ?? (item.selected ? 8 : 5)) / unit) + 3;
             return [x - radius, y - radius, x + radius, y + radius];
         }),

package/dist/src/static.d.ts

@@ -1,18 +1,18 @@
 import type { InteractiveSFMapData } from './explorer-data.js';
-import { type SFMapData } from './map-core.js';
-import type { SFMapOptions } from './types.js';
+import { type SFMapData } from './rendering/svg-map-renderer.js';
+import type { StaticMapOptions } from './types.js';
 /** Either compact static geography or the same source-aware geography used by createMap. */
 export type StaticMapInput = SFMapData | InteractiveSFMapData;
-export type { DistrictRowData, SFMapData as StaticMapData } from './map-core.js';
-export type { DistrictStyle, DistrictYear, SFMapOptions as StaticMapOptions, StaticMapAppearance, StaticMapLayers, } from './types.js';
+export type { DistrictRowData, SFMapData as StaticMapData } from './rendering/svg-map-renderer.js';
+export type { DistrictStyle, DistrictYear, StaticMapAppearance, StaticMapLayers, StaticMapOptions, } from './types.js';
 /** Server-safe SVG rendering with explicit data; returns SVG plus projection helpers. */
-export declare function renderMap(data: StaticMapInput, options?: SFMapOptions): {
+export declare function renderMap(data: StaticMapInput, options?: StaticMapOptions): {
     svg: string;
     project: (coordinates: import("./geometry.js").Position) => [number, number];
     viewBox: [number, number, number, number];
 };
 /** Project canonical layer geometry without constructing an SVG string. */
-export declare function getLayerPaths(data: StaticMapInput, options?: SFMapOptions): {
+export declare function getLayerPaths(data: StaticMapInput, options?: StaticMapOptions): {
     year: import("./types.js").DistrictYear;
     viewBox: [number, number, number, number];
     project: (coordinates: import("./geometry.js").Position) => [number, number];

package/dist/src/static.js

@@ -1,6 +1,6 @@
 import { prepareAppearance } from './appearance.js';
 import { validateSwitchPatch } from './features.js';
-import { createSFMapWithData, getLayerPathsWithData } from './map-core.js';
+import { createSFMapWithData, getLayerPathsWithData, } from './rendering/svg-map-renderer.js';
 import { normalizeStaticAnimation } from './static-animation.js';
 import { staticLabels } from './static-labels.js';
 import { assertOptions, validateMarkers, validateOverlays } from './validation.js';
@@ -55,15 +55,11 @@ const staticLayerKeys = [
     'keyRoads',
     'roadLabels',
 ];
-/** Grouped keys override flat compatibility keys; omitted keys preserve renderer defaults. */
+/** Validate the public grouped contract before preparing internal renderer options. */
 function expandStaticOptions(options) {
     assertOptions(options, 'static map', [
-        ...staticLayerKeys,
         'layers',
         'appearance',
-        'theme',
-        'colors',
-        'districtStyle',
         'width',
         'height',
         'padding',
@@ -77,7 +73,7 @@ function expandStaticOptions(options) {
         'idPrefix',
         'animation',
     ]);
-    for (const key of [...staticLayerKeys, 'labels'])
+    for (const key of ['labels'])
         if (options[key] !== undefined && typeof options[key] !== 'boolean')
             throw new TypeError(`${key} must be boolean.`);
     for (const key of ['title', 'idPrefix'])
@@ -117,11 +113,10 @@ function expandStaticOptions(options) {
     if (options.appearance !== undefined) {
         assertOptions(options.appearance, 'static appearance', ['theme', 'colors', 'districtStyle']);
     }
-    const { layers, appearance, theme, colors, districtStyle, ...flat } = options;
+    const { layers, appearance, ...flat } = options;
     const supplied = (group = {}) => Object.fromEntries(Object.entries(group).filter(([, value]) => value !== undefined));
     return {
         ...flat,
-        ...prepareAppearance({}, { theme, colors, districtStyle }),
         ...supplied(layers),
         ...supplied(appearance === undefined ? undefined : prepareAppearance({}, appearance)),
     };

package/dist/src/transit.js

@@ -2,7 +2,7 @@ import stations from '../data/bart-stations.json' with { type: 'json' };
 import coast from '../data/coast.json' with { type: 'json' };
 import districts from '../data/districts-2022.json' with { type: 'json' };
 import parks from '../data/landmarks.json' with { type: 'json' };
-import { createSFMapWithData } from './map-core.js';
+import { createSFMapWithData } from './rendering/svg-map-renderer.js';
 const districtData = districts;
 const parkData = parks;
 const stationData = stations;

package/dist/src/types.d.ts

@@ -11,7 +11,7 @@ export type DistrictYear = 2002 | 2012 | 2022;
 export interface DistrictSelection {
     id: number;
     year: DistrictYear;
-    district: import('./map-core.js').DistrictRowData;
+    district: import('./rendering/svg-map-renderer.js').DistrictRowData;
 }
 export interface DistrictStyle {
     fill?: string;
@@ -39,10 +39,7 @@ export interface MapOverlay {
     visible?: boolean;
     label?: string;
 }
-export interface SFMapOptions {
-    /** Grouped presentation; supplied keys take precedence over flat compatibility options. */
-    layers?: StaticMapLayers;
-    appearance?: StaticMapAppearance;
+export interface SvgRenderOptions {
     theme?: 'districts' | 'transit';
     width?: number;
     height?: number;
@@ -56,7 +53,7 @@ export interface SFMapOptions {
     neighborhoodLabels?: boolean;
     districtFills?: boolean;
     /** Evaluated once per district at construction/style/year updates; call setDistrictStyle again when external data changes. */
-    districtStyle?: (district: import('./map-core.js').DistrictRowData) => DistrictStyle;
+    districtStyle?: (district: import('./rendering/svg-map-renderer.js').DistrictRowData) => DistrictStyle;
     districtLabels?: boolean;
     /** Hide all visible text labels while retaining geographic symbols and accessible titles. */
     labels?: boolean;
@@ -96,7 +93,12 @@ export interface SFMapOptions {
 }
 /** Presentation supported by both the static and interactive renderers. */
 export type StaticMapLayers = InteractiveLayers;
-export type StaticMapAppearance = Pick<SFMapOptions, 'theme' | 'colors' | 'districtStyle'>;
+export type StaticMapAppearance = Pick<SvgRenderOptions, 'theme' | 'colors' | 'districtStyle'>;
+/** Public static presentation uses the same grouped vocabulary as the map controller. */
+export type StaticMapOptions = Omit<SvgRenderOptions, keyof StaticMapLayers | keyof StaticMapAppearance> & {
+    layers?: StaticMapLayers;
+    appearance?: StaticMapAppearance;
+};
 /** Serializable viewport in the interactive map's fixed 800 × 800 projected space. */
 export type MapViewport = readonly [x: number, y: number, size: number];
 export type ExplorerMode = 'neighborhoods' | 'districts' | 'basemap';
@@ -166,8 +168,8 @@ export interface NeighborhoodExplorerOptions extends MapFeatures {
     source?: NeighborhoodSource;
     neighborhood?: string;
     year?: DistrictYear;
-    theme?: SFMapOptions['theme'];
-    colors?: SFMapOptions['colors'];
+    theme?: SvgRenderOptions['theme'];
+    colors?: SvgRenderOptions['colors'];
     labelStyle?: {
         fontFamily?: string;
         fontWeight?: number;
@@ -179,7 +181,7 @@ export interface NeighborhoodExplorerOptions extends MapFeatures {
         hoverFill?: string;
         hoverStroke?: string;
     };
-    districtStyle?: SFMapOptions['districtStyle'];
+    districtStyle?: SvgRenderOptions['districtStyle'];
     legend?: {
         builtins?: boolean;
         hidden?: readonly ('bart' | 'park' | 'highway' | 'road')[];
@@ -245,7 +247,7 @@ export interface NeighborhoodExplorerElement extends HTMLElement {
     } & CameraOptions): boolean;
     getSelectedDistrict(): DistrictSelection | null;
     setDistrictYear(year: DistrictYear, options?: CameraOptions): void;
-    setDistrictStyle(style: SFMapOptions['districtStyle']): void;
+    setDistrictStyle(style: SvgRenderOptions['districtStyle']): void;
     setSource(source: NeighborhoodSource): void;
     setMode(mode: ExplorerMode): void;
     setLabels(visible: boolean): void;