documentation/how-to-build-mobile-apps-from-plugins/README.md explains why Deep Research
(doxa-maps-spa, its app preset) is the plugin to wrap first: the seven production maps in one
phone-ready shell, token-free on MapLibre. It then walks the whole path: tools, the wiring check,
one command, what each step does, another plugin as the app, making it your own, and fixes.
The one command needed two small changes; the default app is unchanged:
- internal/set-app-start-page.mjs takes APP_START=<plugin>/<screen>[/<preset>] and opens that page
instead of the UPG-100 list. Unset, it behaves and marks the page exactly as before. A malformed
value, a page missing from the build, or links that would not resolve are refused, as before.
- package.json: phone:from-tree is sync, start page, verify, assemble, install from the committed
tree, with no full rebuild (bun run build refuses without BUILD_ALLOW=1).
phone:deep-research is phone:from-tree with Deep Research as the start page.
how-to.md links the guide, and two of its lines are corrected: webDir is public/dx-maps/, and
apk:debug's first step is the full build, which asks for BUILD_ALLOW=1.
Checked, with no Android tools: the start page written for doxa-maps-spa/doxa-maps-spa/app, then
the app root served and loaded in the shared browser at 390 and 1280. It showed the gallery
element, 15 tabs (the seven maps and the experimental ones) and a drawn map, with 0 console errors
and 0 failed requests. --check passed for APP_START and failed for the default until it was
restored; the default run still writes the UPG-100 page with its original marker. The Gradle and
adb steps are those bun run phone already uses; they were not run here.
The host page of every full-page map (and the Plugin Studio) sized the
element to the viewport in a way that tracks the phone's address bar:
- the built fixed-viewport leaf used position:fixed with inset:0, which
follows the DYNAMIC viewport, so the map and its legend sheet resized
on every scroll that moved the bar;
- the Plugin Studio page and the dev server's leaf and studio pages used
100vh, the LARGE viewport, taller than the view while the bar shows, so
the page itself scrolled by the bar's height and the app seemed to
resize.
All four now use height:100svh (100% first as the fallback where svh is
unknown), anchored top-left, and set --profile-min-h:0 so ProfileLoader's
100dvh floor cannot grow the element when the bar hides. On a desktop svh
equals the viewport, so nothing moves there. Scroll-page leaves (the
cap-4 stacks) are unchanged.
Regenerated the tree: 51 leaf pages and the Plugin Studio page change
only this rule and its comment; no bundle changes.
At the top of every "What can this map do?" panel: a "Short description" header and the map's
intro, on a pale band with the Rudder blue as its accent bar and the text in a darker shade of that
blue (5.6:1), so the eye finds it first. Below it, the strategy is a collapsed "Strategy ▾" disclosure
(a native details element, collapsed again on every open) instead of a tab; the examples follow
wherever a map has them. The tab machinery goes. New label mapInfo.shortDescription in all 11
locales.
The pair (a80f4fd6e) changed library/scripts/posters/packet-strings.json
(point 4's reading list) without re-running the pin script, so the served
copy (assets/lib/packet-strings.json) no longer matched
PACKET_STRINGS_SHA384. The print then refused it and fell back to the
bundled English block: every non-English packet printed in English.
check:poster-render-pinned has failed on development since.
Re-pinned (library/packet/poster-render.integrity.js, packet-strings only;
the generator and places pins are unchanged), and rebuilt the five bundles
that compile the pin in: country-posters, doxa-research-map,
my-upg-100-list, regions-dashboard, upg-neighbor. The tree and SRI
regenerated. check:poster-render-pinned: FAIL (2) on 7744a8418, PASS here.
The open phone drawer was z-index 1000, the same as the phone legend
sheet (LegendMobile), so where the two share a stacking context DOM
order decided which one is drawn on top. It is now 100000: above every
plugin layer, still below a modal's scrim (MapInfo, 2147483000), which
must cover the drawer. Both CSS copies change identically.
"Posters per row" offered 2-5 at every width, and the grid clamps a count
to what the viewport holds, so on a phone "3" and "4" still showed two.
The choices are now Auto plus every count up to what fits, capped at 5:
Auto / 1 / 2 on a 390px phone, up to 5 on a desktop. A stored preference
above the fit is shown as what is rendered and stays stored, so the
desktop keeps its choice. 1 joins the counts for the phone.
After "Show on map" isolated a zone, the only way back was re-tapping the
same legend row, inside a collapsed sheet on a phone. While a zone is
isolated (batch mode off), a chip above the map's floor names it with an
x that shows every zone again, through the wall's own deselect path
(applySelectZone(null)). Its label is the existing buttons.clearSelection.
Rebuilt: my-upg-100-list, country-posters, regions-dashboard; the tree and
SRI regenerated.
On the all-regions map a pin tap jumped to the country's dashboard; a pin tap now opens the people
group's popup everywhere, and a tap on a country with no pin under it picks that country. The
invisible tap target is at least 7 px at every zoom, so pins answer a finger. On phones the maps are
half again as tall as they are wide (the square was too small for a popup), the left scroll-past
strip is off, and the popup is compact and lets a pinch through to the map. Desktop is unchanged.
On a map with the legend sheet the engine's credit keeps its top-start
corner, now above the scroll-edge strips, and folds to its (i) 3 s after it
first shows expanded. The full-width sheet, the 'dxmaps:legend-sheet' event
and the hidden MapLibre logo control stay.
A map's phone legend (LegendMobile) announces its sheet with the composed
'dxmaps:legend-sheet' event, dispatched from the sheet element. The layout
measures that element itself and lifts the circle to 8px above the sheet's
top edge: collapsed or open, wherever the map ends (Simple Research's map
stops 102px above the viewport, with its grid below), so the two never
overlap. It re-measures on each event, on the sheet's own resize (a
ResizeObserver, so the box is read after layout), on the pane's scroll
and on window resize, coalesced to a frame with a 100ms backup for a page
that gets no frames. Only a sheet on screen counts: another tab's pane
(hidden or inert), a scrolled-away map, or state 'gone' leave the circle
where it is today. With no event at all the placement is unchanged.
--map-fab-clearance rises with the circle, and --map-fab-sheet-inset:0
is published only while a sheet lifts it, so that sheet can take the
full width. The circle moves by transform (no layout property). Both CSS
copies change identically.
Measured with a stand-in sheet planted in a plugin's shadow root (it
announces after its box is laid out, as the real sheet does), at 390 in
en and ar, twice each: collapsed, open, after a scroll, another tab's
sheet ignored, gone back to today. All pass.
The engine's credit moves from the top corner to the end side just above the
sheet, and folds to its (i) four seconds after it first shows expanded. The
logo corner sits beside the menu button, and MapLibre's optional logo control
is hidden. The sheet announces itself with a 'dxmaps:legend-sheet' event
(bubbling, composed), so the layout can lift its round menu button above it.
The sheet takes the full width while the layout says it lifts the button
(--map-fab-sheet-inset); otherwise it stays beside the button. The older
corner rules are scoped to .lm-on, so they end with the last sheet.
The all-regions map drew its pins at their zoom-2 size below zoom 2, which is where a phone's globe
sits, so they read far too large. They now shrink below zoom 2 (unchanged from zoom 2 up, so desktop
keeps them), and an invisible hit twin with the old radii takes the click and the cursor, so a tap
selects exactly what it did before.
The poster dialog's default is 24x36 in at 300 dpi, a 78-megapixel render: minutes on a desktop, and
beyond a phone's canvas limit, so "Export poster" appeared to do nothing on a phone. On a phone it now
opens on Letter at 150 dpi, and sizes or resolutions over the phone canvas limit are disabled with the
reason shown, in every locale. Desktop is unchanged.
