@fieldia/map 0.18.0 → 0.19.1

package/src/lib/settings.d.mts

@@ -1,5 +1,6 @@
-import type { Locale } from '@fieldia/core';
+import type { Locale, ResolvedFilter } from '@fieldia/core';
 import type { LatLng } from './geo.mjs';
+import type { AddressLabels } from './address-labels.mjs';
 import type { FormMapLabels, ListMapLabels, MapLabels } from './labels.mjs';
 import type { PinDrawer } from './pins.mjs';
 import type { AddressSearch, MapProvider, ReachFinder, ReverseSearch, RouteFinder } from './providers.mjs';
@@ -27,6 +28,22 @@ export interface MapSettings {
     regions?: Record<string, unknown | (() => unknown)>;
     /** The app's own pins for a list's map, by the name a page's `pin.widget` gives. */
     pins?: Record<string, PinDrawer>;
+    /**
+     * The currency the app's amounts are mostly in, by code ("EGP"): a pin
+     * leaves it unsaid ("13.9M") and names any other ("$ 450K"). A page's own
+     * `money.home`, on the pin or its field, wins over it.
+     */
+    homeCurrency?: string;
     /** The app's own words over the maps', by language. */
-    labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels & FormMapLabels>>>;
+    labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels & FormMapLabels & AddressLabels>>>;
+    /**
+     * How a list's map learns how many records its view holds, for "Search
+     * this area (24)", when the records on hand cannot say (more than the map
+     * shows, or a view past the area searched): `true` asks the data source's
+     * `list` for one record and reads its `total`; a function is the app's own
+     * count. Asked a moment after the map stops, aborted when it moves again.
+     * Left out, only the records on hand are counted, and the button says no
+     * number when they cannot tell.
+     */
+    countArea?: boolean | ((filter: ResolvedFilter[], signal: AbortSignal) => Promise<number>);
 }

package/src/lib/settings.d.ts

@@ -1,5 +1,6 @@
-import type { Locale } from '@fieldia/core';
+import type { Locale, ResolvedFilter } from '@fieldia/core';
 import type { LatLng } from './geo';
+import type { AddressLabels } from './address-labels';
 import type { FormMapLabels, ListMapLabels, MapLabels } from './labels';
 import type { PinDrawer } from './pins';
 import type { AddressSearch, MapProvider, ReachFinder, ReverseSearch, RouteFinder } from './providers';
@@ -27,6 +28,22 @@ export interface MapSettings {
     regions?: Record<string, unknown | (() => unknown)>;
     /** The app's own pins for a list's map, by the name a page's `pin.widget` gives. */
     pins?: Record<string, PinDrawer>;
+    /**
+     * The currency the app's amounts are mostly in, by code ("EGP"): a pin
+     * leaves it unsaid ("13.9M") and names any other ("$ 450K"). A page's own
+     * `money.home`, on the pin or its field, wins over it.
+     */
+    homeCurrency?: string;
     /** The app's own words over the maps', by language. */
-    labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels & FormMapLabels>>>;
+    labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels & FormMapLabels & AddressLabels>>>;
+    /**
+     * How a list's map learns how many records its view holds, for "Search
+     * this area (24)", when the records on hand cannot say (more than the map
+     * shows, or a view past the area searched): `true` asks the data source's
+     * `list` for one record and reads its `total`; a function is the app's own
+     * count. Asked a moment after the map stops, aborted when it moves again.
+     * Left out, only the records on hand are counted, and the button says no
+     * number when they cannot tell.
+     */
+    countArea?: boolean | ((filter: ResolvedFilter[], signal: AbortSignal) => Promise<number>);
 }

package/src/lib/styles.d.mts

@@ -14,9 +14,20 @@ export declare function installLeafletStyles(doc: Document, css: string): void;
  * tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
  * Its own stylesheet, so a form with only a place or an area never carries it.
  */
-export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\nbutton.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\nspan.fd-map-crowd-item { display: block; cursor: default; }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n";
+export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */\n.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }\n.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }\n.fd-map-card-picture { display: block; }\n.fd-map-card-fields[data-labels] div { display: block; }\n.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }\n.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }\n.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\nbutton.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\nspan.fd-map-crowd-item { display: block; cursor: default; }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */\n.fd-map-list[data-height=\"fill\"] { height: 100%; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] { height: auto; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] .fd-map-box { height: clamp(320px, 64vh, 640px); }\n/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */\n.fd-map-box.leaflet-container[data-gestures=\"all\"] { touch-action: none; }\n";
 /** The list map's stylesheet, once per document, after the maps' own. */
 export declare function installListMapStyles(doc: Document): void;
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+export declare const EMBED_CSS = "\n@layer fieldia-tokens {\n.fd-map-embed {\n  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);\n  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);\n  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);\n  --fd-control-radius: 6px;\n}\n}\n.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }\n.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }\n.fd-map-embed [hidden] { display: none !important; }\n.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-embed .fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-embed .fd-button[aria-busy=\"true\"] { cursor: progress; opacity: 0.7; }\n";
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+export declare function installEmbedStyles(doc: Document): void;
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,

package/src/lib/styles.d.ts

@@ -14,9 +14,20 @@ export declare function installLeafletStyles(doc: Document, css: string): void;
  * tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
  * Its own stylesheet, so a form with only a place or an area never carries it.
  */
-export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\nbutton.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\nspan.fd-map-crowd-item { display: block; cursor: default; }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n";
+export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */\n.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }\n.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }\n.fd-map-card-picture { display: block; }\n.fd-map-card-fields[data-labels] div { display: block; }\n.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }\n.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }\n.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\nbutton.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\nspan.fd-map-crowd-item { display: block; cursor: default; }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */\n.fd-map-list[data-height=\"fill\"] { height: 100%; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] { height: auto; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] .fd-map-box { height: clamp(320px, 64vh, 640px); }\n/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */\n.fd-map-box.leaflet-container[data-gestures=\"all\"] { touch-action: none; }\n";
 /** The list map's stylesheet, once per document, after the maps' own. */
 export declare function installListMapStyles(doc: Document): void;
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+export declare const EMBED_CSS = "\n@layer fieldia-tokens {\n.fd-map-embed {\n  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);\n  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);\n  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);\n  --fd-control-radius: 6px;\n}\n}\n.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }\n.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }\n.fd-map-embed [hidden] { display: none !important; }\n.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-embed .fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-embed .fd-button[aria-busy=\"true\"] { cursor: progress; opacity: 0.7; }\n";
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+export declare function installEmbedStyles(doc: Document): void;
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,

package/src/lib/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FORM_MAP_CSS = exports.LIST_MAP_CSS = exports.MAP_CSS = void 0;
+exports.FORM_MAP_CSS = exports.EMBED_CSS = exports.LIST_MAP_CSS = exports.MAP_CSS = void 0;
 exports.installMapStyles = installMapStyles;
 exports.installLeafletStyles = installLeafletStyles;
 exports.installListMapStyles = installListMapStyles;
+exports.installEmbedStyles = installEmbedStyles;
 exports.installFormMapStyles = installFormMapStyles;
 /**
  * The maps in Fieldia's colours: every colour a token, so a theme, a host's
@@ -229,6 +230,15 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
 .fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }
 .fd-map-card-fields dt { color: var(--fd-muted); }
 .fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */
+.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }
+.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }
+.fd-map-card-picture { display: block; }
+.fd-map-card-fields[data-labels] div { display: block; }
+.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }
+.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }
+.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }
 .fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }
 .fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
@@ -244,8 +254,9 @@ span.fd-map-crowd-item { display: block; cursor: default; }
 }
 .fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
 .fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
-/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */
-@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }
+.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }
+/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */
+@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }
 .fd-map-ghost .fd-map-face { pointer-events: none; }
 /* The tools that draw an area to search in: at the map's start, the zoom at its end. */
 .fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }
@@ -267,6 +278,12 @@ span.fd-map-crowd-item { display: block; cursor: default; }
   position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
   background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
 }
+/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */
+.fd-map-list[data-height="fill"] { height: 100%; }
+.fd-list-map .fd-map-list[data-height="fill"] { height: auto; }
+.fd-list-map .fd-map-list[data-height="fill"] .fd-map-box { height: clamp(320px, 64vh, 640px); }
+/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */
+.fd-map-box.leaflet-container[data-gestures="all"] { touch-action: none; }
 `;
 /** The list map's stylesheet, once per document, after the maps' own. */
 function installListMapStyles(doc) {
@@ -278,6 +295,47 @@ function installListMapStyles(doc) {
     own.textContent = exports.LIST_MAP_CSS;
     doc.getElementById('fieldia-map-styles')?.after(own);
 }
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+exports.EMBED_CSS = `
+@layer fieldia-tokens {
+.fd-map-embed {
+  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);
+  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);
+  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);
+  --fd-control-radius: 6px;
+}
+}
+.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }
+.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }
+.fd-map-embed [hidden] { display: none !important; }
+.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-embed .fd-button {
+  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);
+}
+.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
+.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }
+.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }
+.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-map-embed .fd-button[aria-busy="true"] { cursor: progress; opacity: 0.7; }
+`;
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+function installEmbedStyles(doc) {
+    installListMapStyles(doc);
+    if (doc.getElementById('fieldia-map-embed-styles'))
+        return;
+    const own = doc.createElement('style');
+    own.id = 'fieldia-map-embed-styles';
+    own.textContent = exports.EMBED_CSS;
+    doc.getElementById('fieldia-list-map-styles')?.after(own);
+}
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,

package/src/lib/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":";;;AA+GA,4CAOC;AAGD,oDAQC;AAuID,oDAOC;AAwCD,oDAOC;AA9TD;;;;;GAKG;AACU,QAAA,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtB,CAAC;AAEF,0HAA0H;AAC1H,SAAgB,gBAAgB,CAAC,GAAa;IAC5C,IAAI,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,oBAAoB,CAAC;IAC9B,GAAG,CAAC,WAAW,GAAG,eAAO,CAAC;IAC1B,4EAA4E;IAC5E,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,8GAA8G;AAC9G,SAAgB,oBAAoB,CAAC,GAAa,EAAE,GAAW;IAC7D,IAAI,GAAG,CAAC,cAAc,CAAC,wBAAwB,CAAC;QAAE,OAAO;IACzD,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,GAAG,wBAAwB,CAAC;IACtC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC;IAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACrD,IAAI,GAAG;QAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;;QACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6H3B,CAAC;AAEF,yEAAyE;AACzE,SAAgB,oBAAoB,CAAC,GAAa;IAChD,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,oBAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACvD,CAAC;AAED;;;;GAIG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B3B,CAAC;AAEF,wEAAwE;AACxE,SAAgB,oBAAoB,CAAC,GAAa;IAChD,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,oBAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"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"}

package/src/lib/styles.mjs

@@ -222,6 +222,15 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
 .fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }
 .fd-map-card-fields dt { color: var(--fd-muted); }
 .fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */
+.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }
+.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }
+.fd-map-card-picture { display: block; }
+.fd-map-card-fields[data-labels] div { display: block; }
+.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }
+.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }
+.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }
 .fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }
 .fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
@@ -237,8 +246,9 @@ span.fd-map-crowd-item { display: block; cursor: default; }
 }
 .fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
 .fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
-/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */
-@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }
+.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }
+/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */
+@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }
 .fd-map-ghost .fd-map-face { pointer-events: none; }
 /* The tools that draw an area to search in: at the map's start, the zoom at its end. */
 .fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }
@@ -260,6 +270,12 @@ span.fd-map-crowd-item { display: block; cursor: default; }
   position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
   background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
 }
+/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */
+.fd-map-list[data-height="fill"] { height: 100%; }
+.fd-list-map .fd-map-list[data-height="fill"] { height: auto; }
+.fd-list-map .fd-map-list[data-height="fill"] .fd-map-box { height: clamp(320px, 64vh, 640px); }
+/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */
+.fd-map-box.leaflet-container[data-gestures="all"] { touch-action: none; }
 `;
 /** The list map's stylesheet, once per document, after the maps' own. */
 export function installListMapStyles(doc) {
@@ -271,6 +287,47 @@ export function installListMapStyles(doc) {
     own.textContent = LIST_MAP_CSS;
     doc.getElementById('fieldia-map-styles')?.after(own);
 }
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+export const EMBED_CSS = `
+@layer fieldia-tokens {
+.fd-map-embed {
+  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);
+  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);
+  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);
+  --fd-control-radius: 6px;
+}
+}
+.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }
+.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }
+.fd-map-embed [hidden] { display: none !important; }
+.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-embed .fd-button {
+  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);
+}
+.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
+.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }
+.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }
+.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-map-embed .fd-button[aria-busy="true"] { cursor: progress; opacity: 0.7; }
+`;
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+export function installEmbedStyles(doc) {
+    installListMapStyles(doc);
+    if (doc.getElementById('fieldia-map-embed-styles'))
+        return;
+    const own = doc.createElement('style');
+    own.id = 'fieldia-map-embed-styles';
+    own.textContent = EMBED_CSS;
+    doc.getElementById('fieldia-list-map-styles')?.after(own);
+}
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,

package/src/lib/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtB,CAAC;AAEF,0HAA0H;AAC1H,MAAM,UAAU,gBAAgB,CAAC,GAAa;IAC5C,IAAI,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,oBAAoB,CAAC;IAC9B,GAAG,CAAC,WAAW,GAAG,OAAO,CAAC;IAC1B,4EAA4E;IAC5E,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,8GAA8G;AAC9G,MAAM,UAAU,oBAAoB,CAAC,GAAa,EAAE,GAAW;IAC7D,IAAI,GAAG,CAAC,cAAc,CAAC,wBAAwB,CAAC;QAAE,OAAO;IACzD,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,GAAG,wBAAwB,CAAC;IACtC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC;IAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACrD,IAAI,GAAG;QAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;;QACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6H3B,CAAC;AAEF,yEAAyE;AACzE,MAAM,UAAU,oBAAoB,CAAC,GAAa;IAChD,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACvD,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B3B,CAAC;AAEF,wEAAwE;AACxE,MAAM,UAAU,oBAAoB,CAAC,GAAa;IAChD,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"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"}

package/src/lib/view-box.d.mts

@@ -0,0 +1,18 @@
+import type { ListMap, ResolvedFilter } from '@fieldia/core';
+/**
+ * A map's view as a search sees it: its edges in degrees, and the
+ * conditions "Search this area" asks for its records with.
+ */
+/** A view's edges: west east of east when it spans the antimeridian, -180 and 180 when it is the whole world round. */
+export interface Box {
+    south: number;
+    west: number;
+    north: number;
+    east: number;
+}
+/** Whether a box is the whole world round. */
+export declare const whole: (box: Box) => boolean;
+/** A view's box from its edges as the map has them: rounded to a millionth, its longitudes brought round into -180…180. */
+export declare function boxOf(south: number, west: number, north: number, east: number): Box;
+/** The conditions that keep a box's records: between a latitude's and a longitude's edges, or within it on a point. */
+export declare function boxFilter(spec: ListMap, box: Box): ResolvedFilter[];

package/src/lib/view-box.d.ts

@@ -0,0 +1,18 @@
+import type { ListMap, ResolvedFilter } from '@fieldia/core';
+/**
+ * A map's view as a search sees it: its edges in degrees, and the
+ * conditions "Search this area" asks for its records with.
+ */
+/** A view's edges: west east of east when it spans the antimeridian, -180 and 180 when it is the whole world round. */
+export interface Box {
+    south: number;
+    west: number;
+    north: number;
+    east: number;
+}
+/** Whether a box is the whole world round. */
+export declare const whole: (box: Box) => boolean;
+/** A view's box from its edges as the map has them: rounded to a millionth, its longitudes brought round into -180…180. */
+export declare function boxOf(south: number, west: number, north: number, east: number): Box;
+/** The conditions that keep a box's records: between a latitude's and a longitude's edges, or within it on a point. */
+export declare function boxFilter(spec: ListMap, box: Box): ResolvedFilter[];

package/src/lib/view-box.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.whole = void 0;
+exports.boxOf = boxOf;
+exports.boxFilter = boxFilter;
+const round = (n) => Math.round(n * 1e6) / 1e6;
+const wrap = (lng) => round(((((lng + 180) % 360) + 360) % 360) - 180);
+/** Whether a box is the whole world round. */
+const whole = (box) => box.east - box.west >= 360;
+exports.whole = whole;
+/** A view's box from its edges as the map has them: rounded to a millionth, its longitudes brought round into -180…180. */
+function boxOf(south, west, north, east) {
+    const all = east - west >= 360;
+    return { south: round(Math.max(-90, south)), west: all ? -180 : wrap(west), north: round(Math.min(90, north)), east: all ? 180 : wrap(east) };
+}
+/** The conditions that keep a box's records: between a latitude's and a longitude's edges, or within it on a point. */
+function boxFilter(spec, box) {
+    if (spec.point)
+        return [{ field: spec.point, op: 'within', value: { ...box } }];
+    const lng = spec.longitude;
+    return [
+        { field: spec.latitude, op: 'between', value: [box.south, box.north] },
+        // Over the antimeridian no one range holds the longitudes: either side of it, then.
+        ...((0, exports.whole)(box)
+            ? []
+            : box.west <= box.east
+                ? [{ field: lng, op: 'between', value: [box.west, box.east] }]
+                : [{ any: [{ field: lng, op: '>=', value: box.west }, { field: lng, op: '<=', value: box.east }] }]),
+    ];
+}
+//# sourceMappingURL=view-box.js.map

package/src/lib/view-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-box.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/view-box.ts"],"names":[],"mappings":";;;AAqBA,sBAGC;AAGD,8BAYC;AAxBD,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AACvD,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;AAC/E,8CAA8C;AACvC,MAAM,KAAK,GAAG,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;AAAjD,QAAA,KAAK,SAA4C;AAE9D,2HAA2H;AAC3H,SAAgB,KAAK,CAAC,KAAa,EAAE,IAAY,EAAE,KAAa,EAAE,IAAY;IAC5E,MAAM,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC;IAC/B,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AAChJ,CAAC;AAED,uHAAuH;AACvH,SAAgB,SAAS,CAAC,IAAa,EAAE,GAAQ;IAC/C,IAAI,IAAI,CAAC,KAAK;QAAE,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,GAAG,EAAE,EAAE,CAAC,CAAC;IAChF,MAAM,GAAG,GAAG,IAAI,CAAC,SAAmB,CAAC;IACrC,OAAO;QACL,EAAE,KAAK,EAAE,IAAI,CAAC,QAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE;QAChF,oFAAoF;QACpF,GAAG,CAAC,IAAA,aAAK,EAAC,GAAG,CAAC;YACZ,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI;gBACpB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,SAAkB,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;gBACvE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,IAAa,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,IAAa,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;KAC3H,CAAC;AACJ,CAAC"}

package/src/lib/view-box.mjs

@@ -0,0 +1,25 @@
+const round = (n) => Math.round(n * 1e6) / 1e6;
+const wrap = (lng) => round(((((lng + 180) % 360) + 360) % 360) - 180);
+/** Whether a box is the whole world round. */
+export const whole = (box) => box.east - box.west >= 360;
+/** A view's box from its edges as the map has them: rounded to a millionth, its longitudes brought round into -180…180. */
+export function boxOf(south, west, north, east) {
+    const all = east - west >= 360;
+    return { south: round(Math.max(-90, south)), west: all ? -180 : wrap(west), north: round(Math.min(90, north)), east: all ? 180 : wrap(east) };
+}
+/** The conditions that keep a box's records: between a latitude's and a longitude's edges, or within it on a point. */
+export function boxFilter(spec, box) {
+    if (spec.point)
+        return [{ field: spec.point, op: 'within', value: { ...box } }];
+    const lng = spec.longitude;
+    return [
+        { field: spec.latitude, op: 'between', value: [box.south, box.north] },
+        // Over the antimeridian no one range holds the longitudes: either side of it, then.
+        ...(whole(box)
+            ? []
+            : box.west <= box.east
+                ? [{ field: lng, op: 'between', value: [box.west, box.east] }]
+                : [{ any: [{ field: lng, op: '>=', value: box.west }, { field: lng, op: '<=', value: box.east }] }]),
+    ];
+}
+//# sourceMappingURL=view-box.mjs.map

package/src/lib/view-box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-box.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/view-box.ts"],"names":[],"mappings":"AAeA,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AACvD,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;AAC/E,8CAA8C;AAC9C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;AAE9D,2HAA2H;AAC3H,MAAM,UAAU,KAAK,CAAC,KAAa,EAAE,IAAY,EAAE,KAAa,EAAE,IAAY;IAC5E,MAAM,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC;IAC/B,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AAChJ,CAAC;AAED,uHAAuH;AACvH,MAAM,UAAU,SAAS,CAAC,IAAa,EAAE,GAAQ;IAC/C,IAAI,IAAI,CAAC,KAAK;QAAE,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,GAAG,EAAE,EAAE,CAAC,CAAC;IAChF,MAAM,GAAG,GAAG,IAAI,CAAC,SAAmB,CAAC;IACrC,OAAO;QACL,EAAE,KAAK,EAAE,IAAI,CAAC,QAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE;QAChF,oFAAoF;QACpF,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;YACZ,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI;gBACpB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,SAAkB,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;gBACvE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,IAAa,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,IAAa,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;KAC3H,CAAC;AACJ,CAAC"}

package/src/lib/widgets.d.mts

@@ -8,6 +8,9 @@ import type { MapSettings } from './settings.mjs';
  *   its longitude.
  * - `"widget": "area"` on a json field keeps a GeoJSON Feature: a polygon,
  *   a box or a circle.
+ * - `"widget": "address-search"` on a char field keeps an address typed on
+ *   one line, the provider's suggestions under it and no map; a suggestion
+ *   picked can fill a place field and an address's parts too.
  *
  * Every map shares the settings given here: its provider above all.
  */

package/src/lib/widgets.d.ts

@@ -8,6 +8,9 @@ import type { MapSettings } from './settings';
  *   its longitude.
  * - `"widget": "area"` on a json field keeps a GeoJSON Feature: a polygon,
  *   a box or a circle.
+ * - `"widget": "address-search"` on a char field keeps an address typed on
+ *   one line, the provider's suggestions under it and no map; a suggestion
+ *   picked can fill a place field and an address's parts too.
  *
  * Every map shares the settings given here: its provider above all.
  */

package/src/lib/widgets.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mapWidgets = mapWidgets;
+const address_search_1 = require("./address-search");
 const area_1 = require("./area");
 const place_1 = require("./place");
 /**
@@ -11,11 +12,19 @@ const place_1 = require("./place");
  *   its longitude.
  * - `"widget": "area"` on a json field keeps a GeoJSON Feature: a polygon,
  *   a box or a circle.
+ * - `"widget": "address-search"` on a char field keeps an address typed on
+ *   one line, the provider's suggestions under it and no map; a suggestion
+ *   picked can fill a place field and an address's parts too.
  *
  * Every map shares the settings given here: its provider above all.
  */
 function mapWidgets(settings) {
     const place = (0, place_1.placeWidget)(settings);
-    return { 'json.place': place, 'float.place': place, 'json.area': (0, area_1.areaWidget)(settings) };
+    return {
+        'json.place': place,
+        'float.place': place,
+        'json.area': (0, area_1.areaWidget)(settings),
+        'char.address-search': (0, address_search_1.addressSearchWidget)(settings),
+    };
 }
 //# sourceMappingURL=widgets.js.map

package/src/lib/widgets.js.map

@@ -1 +1 @@
-{"version":3,"file":"widgets.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/widgets.ts"],"names":[],"mappings":";;AAgBA,gCAGC;AAlBD,iCAAoC;AACpC,mCAAsC;AAGtC;;;;;;;;;;GAUG;AACH,SAAgB,UAAU,CAAC,QAAqB;IAC9C,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,QAAQ,CAAC,CAAC;IACpC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,IAAA,iBAAU,EAAC,QAAQ,CAAC,EAAE,CAAC;AAC1F,CAAC"}
+{"version":3,"file":"widgets.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/widgets.ts"],"names":[],"mappings":";;AAoBA,gCAQC;AA3BD,qDAAuD;AACvD,iCAAoC;AACpC,mCAAsC;AAGtC;;;;;;;;;;;;;GAaG;AACH,SAAgB,UAAU,CAAC,QAAqB;IAC9C,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,QAAQ,CAAC,CAAC;IACpC,OAAO;QACL,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK;QACpB,WAAW,EAAE,IAAA,iBAAU,EAAC,QAAQ,CAAC;QACjC,qBAAqB,EAAE,IAAA,oCAAmB,EAAC,QAAQ,CAAC;KACrD,CAAC;AACJ,CAAC"}