check:library-index was FAILING: the derived menu was 70,718 seconds — about
19.6 hours — older than library/composables/useMapFly.js, which this flight
edited to give fitBounds an explicit duration. The file's own header says
"DERIVED — cannot drift from the code", which is only true of a file that gets
regenerated, and nothing had regenerated it.
The regeneration added one entry, and it is not cosmetic: viewportScrim.js was
missing from the index entirely while being imported by six files —
PosterDialog, SemanticTreeLegend, PosterWall, DataTable, LegendTools and
my-upg-100-list/poster-wall. A real, widely-used utility that an inheritor
reading the library menu could not discover. 85 reusable items now catalogued.
Measured the wider hygiene question while here, since the standing work list
asks for non-reusable components to be demoted out of the shared zone: of the 82
items the index advertises, exactly ONE has zero code importers —
useMapSelection.js. The other 81 are live. So the shared library is in good
shape and there is no demotion sweep to run.
The first measurement said fifteen components were unused, and it was wrong in a
way worth recording. It counted importers among BUNDLES only, so anything
imported by a sibling library component read as dead — PosterPreview.vue has
five importers and would have been demoted. Counting importers anywhere, not
just in plugin-designs/, is what reduced fifteen candidates to one.
useMapSelection is left in place deliberately, because removing a file from the
shared zone is a different kind of change from regenerating a derived doc and
deserves its own commit. It is carded instead. Worth knowing before that
decision: it is 192 lines, unchanged since the initial commit d5ba21f, so it was
never adopted rather than orphaned by a refactor; its one dependency
(getCircleRadiusInterpolation) still resolves, so it is dead rather than broken;
and it appears in zero of the nineteen built bundles, which is the decisive
evidence since Vite would tree-shake exactly this.
14 KiB
REFERENCE-library-index — reusable pieces you can import into an app-profile
DERIVED FILE — do not hand-edit. Regenerate:
node internal/generate-library-index.mjsGenerated: runnode internal/generate-library-index.mjsto refresh
You are a programmer (or an agent) building a map. This is the menu of REUSABLE,
parameterized pieces the shared library/ offers. Import what you need with the @map/…
alias; build your own custom code in your app-profile's src/ folder. Do NOT edit
anything listed here unless you know what you're doing — these are shared across every map,
and a change here can break other maps.
- Three zones:
library/(this menu — reuse, don't edit) ·plugin-designs/<map>/(your sandbox — build anything) ·internal/(the build machine — never touch). - To make a new map: copy
plugin-designs/template-bundle/, read its README, list your requirements, pick from below.
Components (reusable UI)
- PeopleGroupDetail — (no description)
import … from '@map/components/PeopleGroupDetail.vue' - ResearchMapFilterPanel — ResearchMapFilterPanel.vue — Multi-field filter UI for the research-map.
import … from '@map/components/ResearchMapFilterPanel.vue' - ResearchMapSideMenu — ResearchMapSideMenu.vue — Side drawer specific to the research-map profile.
import … from '@map/components/ResearchMapSideMenu.vue' - SideMenuDrawer — SideMenuDrawer.vue — Slide-in side panel for the map application.
import … from '@map/components/SideMenuDrawer.vue' - BarChart — BarChart.vue — THE SHARED HORIZONTAL BAR CHART (hand-rolled SVG, zero dependencies).
import … from '@map/components/charts/BarChart.vue' - PinHint — PinHint.vue — the conversion coach-mark (bottom-center of any map).
import … from '@map/components/hints/PinHint.vue' - LegendDesktop — Async-import the heavier branches so the boot bundle stays lean.
import … from '@map/components/legends/LegendDesktop.vue' - LegendMobile — useShadowStyles(
import … from '@map/components/legends/LegendMobile.vue' - LegendProgressBar — LegendProgressBar — the prayer legend's header progress bar.
import … from '@map/components/legends/LegendProgressBar.vue' - LegendRows — (no description)
import … from '@map/components/legends/LegendRows.vue' - LegendTools — LegendTools.vue — Fly + Clusters floating toolbar
import … from '@map/components/legends/LegendTools.vue' - SemanticTreeLegend — SemanticTreeLegend — reusable hierarchical legend for any one-to-many semantic tree.
import … from '@map/components/legends/SemanticTreeLegend.vue' - FullscreenButton — FullscreenButton.vue — Toggles fullscreen for the map host element.
import … from '@map/components/map-controls/FullscreenButton.vue' - GeocoderComponent — GeocoderComponent.vue — Mapbox Geocoder search bar as a self-contained Vue component.
import … from '@map/components/map-controls/GeocoderComponent.vue' - HamburgerButton — HamburgerButton.vue — Toggle button for the side menu drawer.
import … from '@map/components/map-controls/HamburgerButton.vue' - HelpButton — HelpButton.vue — Opens the "About this map" help modal.
import … from '@map/components/map-controls/HelpButton.vue' - LocationButton — LocationButton.vue — Flies the map to the user's current location via the
import … from '@map/components/map-controls/LocationButton.vue' - MapControlButton — MapControlButton.vue — Shared base button for all map toolbar controls.
import … from '@map/components/map-controls/MapControlButton.vue' - MapControlMenu — MapControlMenu.vue — the ONE menu every map control opens.
import … from '@map/components/map-controls/MapControlMenu.vue' - MapToolbar — MapToolbar.vue — Positioned layout shell for map control buttons.
import … from '@map/components/map-controls/MapToolbar.vue' - ShareButton — ShareButton.vue — Non-technical share modal for the map toolbar.
import … from '@map/components/map-controls/ShareButton.vue' - ThemeToggleButton — ThemeToggleButton.vue — Switches the app between light and dark mode.
import … from '@map/components/map-controls/ThemeToggleButton.vue' - ZoomInButton — ZoomInButton.vue — Increments the map zoom level by one step.
import … from '@map/components/map-controls/ZoomInButton.vue' - ZoomOutButton — ZoomOutButton.vue — Decrements the map zoom level by one step.
import … from '@map/components/map-controls/ZoomOutButton.vue' - PosterDialog — PosterDialog.vue — modal for previewing + rendering a poster export.
import … from '@map/components/poster/PosterDialog.vue' - PosterPreview — PosterPreview.vue — scaled live preview of the poster composition.
import … from '@map/components/poster/PosterPreview.vue' - PosterWall — PosterWall.vue — THE SHARED POSTER WALL.
import … from '@map/components/poster/PosterWall.vue' - FooterSlot — FooterSlot.vue — STUB. Poster-rendering slot for FooterSlot.
import … from '@map/components/poster/slots/FooterSlot.vue' - LegendSlot — LegendSlot.vue — STUB. Poster-rendering slot for LegendSlot.
import … from '@map/components/poster/slots/LegendSlot.vue' - NorthArrowSlot — NorthArrowSlot.vue — STUB. Poster-rendering slot for NorthArrowSlot.
import … from '@map/components/poster/slots/NorthArrowSlot.vue' - ScaleBarSlot — ScaleBarSlot.vue — STUB. Poster-rendering slot for ScaleBarSlot.
import … from '@map/components/poster/slots/ScaleBarSlot.vue' - TitleSlot — TitleSlot.vue — renders the poster title strip.
import … from '@map/components/poster/slots/TitleSlot.vue' - QaCorner — QaCorner.vue — the embeddable QA corner widget (bottom-right of any map).
import … from '@map/components/qa/QaCorner.vue' - FilterDropdown — FilterDropdown.vue — SHARED (@map/components/search/FilterDropdown.vue).
import … from '@map/components/search/FilterDropdown.vue' - SearchBar — SearchBar.vue — SHARED (@map/components/search/SearchBar.vue).
import … from '@map/components/search/SearchBar.vue' - SearchFilterHeader — SearchFilterHeader.vue — SHARED (@map/components/search/SearchFilterHeader.vue).
import … from '@map/components/search/SearchFilterHeader.vue' - DataTable — DataTable.vue — THE SHARED TABULATOR LIST VIEW.
import … from '@map/components/tables/DataTable.vue'
Composables (reusable logic — Vue Composition API)
- researchLegendOptions — researchLegendOptions.js — research-mfe-only options passed to the shared
import … from '@map/composables/legends/researchLegendOptions.js' - useAffinityBlockLegendData — useAffinityBlockLegendData — 4-tier affinity-block legend data for SemanticTreeLegend.
import … from '@map/composables/legends/useAffinityBlockLegendData.js' - useLanguageFamilyLegendData — useLanguageFamilyLegendData — language-family legend rows with
import … from '@map/composables/legends/useLanguageFamilyLegendData.js' - useLegendData — useLegendData — builds a unified, data-driven legend item tree
import … from '@map/composables/legends/useLegendData.js' - useWagfRegionsLegendData — useWagfRegionsLegendData — 3-tier WAGF Regions legend for SemanticTreeLegend.
import … from '@map/composables/legends/useWagfRegionsLegendData.js' - useMapPoster — useMapPoster — render a Mapbox GL map to a poster-grade PNG or PDF blob.
import … from '@map/composables/poster/useMapPoster.js' - usePosterLayout — usePosterLayout — slot positioning math for poster compositions.
import … from '@map/composables/poster/usePosterLayout.js' - useAvatarGenerator — Avatar Generator Composable
import … from '@map/composables/useAvatarGenerator.js' - useCountryOutline — useCountryOutline.js — country boundary OUTLINE overlay on country search.
import … from '@map/composables/useCountryOutline.js' - useEdgeScrollAffordance — useEdgeScrollAffordance — the gray "you can scroll past this" edge strips.
import … from '@map/composables/useEdgeScrollAffordance.js' - useGeocoderSearch — Shared geocoder→map search logic (kind-switch + Mapbox filter builder + the
import … from '@map/composables/useGeocoderSearch.js' - useMapAttribution — useMapAttribution.js — the data-credit line every map MUST carry.
import … from '@map/composables/useMapAttribution.js' - useMapClustering — useMapClustering.js — Map Clustering Composable
import … from '@map/composables/useMapClustering.js' - useMapData — useMapData.js - Map Data Loading Composable
import … from '@map/composables/useMapData.js' - useMapEvents — useMapEvents.js - Map Event Handlers Composable
import … from '@map/composables/useMapEvents.js' - useMapFly — useMapFly.js - Map Navigation/Fly Composable
import … from '@map/composables/useMapFly.js' - useMapInstance — useMapInstance.js — Map Initialization Composable
import … from '@map/composables/useMapInstance.js' - useMapLayers — useMapLayers.js - Map Layers Composable
import … from '@map/composables/useMapLayers.js' - useMapPacket — useMapPacket — render a multi-page "prayer packet" PDF for a map selection.
import … from '@map/composables/useMapPacket.js' - useMapProvider — useMapProvider.js — resolve the active map engine ("provider").
import … from '@map/composables/useMapProvider.js' - useMapSelection — useMapSelection.js - Map Selection Composable
import … from '@map/composables/useMapSelection.js' - useMapTheme — useMapTheme.js — shared light/dark theme for every map profile.
import … from '@map/composables/useMapTheme.js' - usePplrInstance — usePplrInstance.js — per-map "instance store" mediator.
import … from '@map/composables/usePplrInstance.js' - usePrayedLocally — usePrayedLocally.js — the "my dot glows" encouragement loop.
import … from '@map/composables/usePrayedLocally.js' - usePrayerStatistics — usePrayerStatistics.js — the ONE authoritative prayer-coverage source of truth.
import … from '@map/composables/usePrayerStatistics.js' - useSearch — useSearch.js — Local geocoder search composable
import … from '@map/composables/useSearch.js' - useSelectedPin — useSelectedPin.js - Selected Pin Highlight + Animated GO Marker
import … from '@map/composables/useSelectedPin.js' - useShadowStyles — useShadowStyles.js — Shadow DOM Style Injection
import … from '@map/composables/useShadowStyles.js'
Utilities (pure helper functions)
- ClusterHelpers — ClusterHelpers.js — Pure helpers shared across clustering modes.
import … from '@map/utils/ClusterHelpers.js' - DataSourceManager — Back-compat shim. The real DataSourceManager.js lives in the api/ seam
import … from '@map/utils/DataSourceManager.js' - MSTClusteringUtil — MSTClusteringUtil.js
import … from '@map/utils/MSTClusteringUtil.js' - NetworkClusteringUtil — NetworkClusteringUtil.js
import … from '@map/utils/NetworkClusteringUtil.js' - apiBaseUrl — Back-compat shim. The real apiBaseUrl.js lives in the api/ seam folder.
import … from '@map/utils/apiBaseUrl.js' - embedBase — embedBase.js — Where THIS bundle's built tree is served from, resolved at runtime.
import … from '@map/utils/embedBase.js' - geoUtils — geoUtils.js — Geographic / GeoJSON Utility Functions
import … from '@map/utils/geoUtils.js' - viewportScrim — viewportScrim.js — make a position:fixed full-screen SCRIM actually cover the VIEWPORT,
import … from '@map/utils/viewportScrim.js'
Stores (Pinia — shared state)
- dataStore — dataStore.js — Centralized data cache
import … from '@map/stores/dataStore.js' - mapStore — Map Store - Centralized state management for all map instances
import … from '@map/stores/mapStore.js' - uiStore — UI Store - Centralized UI state management
import … from '@map/stores/uiStore.js'
Constants (never-change values)
- mapDefaults — mapDefaults.js — Default map initialization settings
import … from '@map/constants/mapDefaults.js' - posterDefaults — posterDefaults.js — default margins, bleed, slot sizes, and typography
import … from '@map/constants/posterDefaults.js' - posterSizes — posterSizes.js — preset poster dimensions (US + ISO).
import … from '@map/constants/posterSizes.js' - zoom — zoom.js - Centralized Zoom Configuration
import … from '@map/constants/zoom.js'
Data (static reference tables)
- iso-numeric-to-alpha2 — "4":"AF","8":"AL","12":"DZ","24":"AO","32":"AR","36":"AU","40":"AT","50":"BD",
import … from '@map/data/iso-numeric-to-alpha2.json' - langFamilyByIso — "aar": "Afro-Asiatic",
import … from '@map/data/langFamilyByIso.json' - langFamilyByLanguage — {"Chamacoco":"Zamucoan","Ninam":"Yanomaman","Yagua":"Yaguan","Muinane":"Witotoan","Finnish":"Uralic","Hill Mar
import … from '@map/data/langFamilyByLanguage.json'
API / data sources (@map/api)
The library provides the data-source mechanism; you declare WHICH sources your map uses
in your own src/api/sources.json. Add a REST API, CSV, or MCP source by adding one entry —
no code. Mechanism (do not edit): @map/api/_registry.js, @map/api/DataSourceManager.js.
Colors (@map/colors)
The library provides the color-strategy registry (the mechanism). Shared color taxonomies
(religion, adoption, engagement, language-family) live here. Your map's OWN colors live in your
app-profile's src/colors/ folder — strategy .js files auto-merge OVER the shared set
for your map only, so editing them can't break other maps. Mechanism (do not edit): @map/colors/_registry.js.