@fieldia/map 0.0.0-stage → 0.14.1

package/src/lib/search-box.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchBox = searchBox;
+const map_core_1 = require("./map-core");
+function searchBox(options) {
+    const { document: doc, labels } = options;
+    const element = doc.createElement('div');
+    element.className = 'fd-map-search';
+    const input = doc.createElement('input');
+    input.className = 'fd-input';
+    input.id = options.id;
+    input.type = 'text';
+    input.placeholder = labels.search;
+    input.autocomplete = 'off';
+    input.spellcheck = false;
+    input.enterKeyHint = 'search';
+    const listId = `${options.id}-places`;
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-expanded', 'false');
+    input.setAttribute('aria-controls', listId);
+    const list = doc.createElement('ul');
+    list.className = 'fd-map-results';
+    list.id = listId;
+    list.setAttribute('role', 'listbox');
+    list.setAttribute('aria-label', labels.search);
+    list.hidden = true;
+    element.append(input, list);
+    let places = [];
+    let active = -1;
+    let asking = null;
+    let timer;
+    function close() {
+        list.hidden = true;
+        input.setAttribute('aria-expanded', 'false');
+        input.removeAttribute('aria-activedescendant');
+        active = -1;
+    }
+    function mark(index) {
+        active = index;
+        [...list.children].forEach((option, i) => option.setAttribute('aria-selected', String(i === index)));
+        const chosen = list.children[index];
+        if (chosen) {
+            input.setAttribute('aria-activedescendant', chosen.id);
+            chosen.scrollIntoView?.({ block: 'nearest' });
+        }
+        else
+            input.removeAttribute('aria-activedescendant');
+    }
+    function choose(place) {
+        input.value = place.label;
+        close();
+        options.say(null);
+        options.pick(place);
+    }
+    function show(found) {
+        places = found;
+        list.replaceChildren(...found.map((place, i) => {
+            const option = doc.createElement('li');
+            option.id = `${listId}-${i}`;
+            option.setAttribute('role', 'option');
+            option.setAttribute('aria-selected', 'false');
+            // The place on one line, where it is on the next, as a map's own search shows them.
+            const name = doc.createElement('span');
+            name.className = 'fd-map-result-name';
+            name.textContent = place.label;
+            option.append(name);
+            if (place.detail) {
+                const detail = doc.createElement('span');
+                detail.className = 'fd-map-result-detail';
+                detail.textContent = place.detail;
+                option.append(detail);
+            }
+            // Picked on the press, the box keeping its focus.
+            option.addEventListener('mousedown', (event) => event.preventDefault());
+            option.addEventListener('click', () => choose(place));
+            return option;
+        }));
+        const any = found.length > 0;
+        list.hidden = !any;
+        input.setAttribute('aria-expanded', String(any));
+        active = -1;
+        options.say(any ? null : labels.noResults);
+    }
+    function run() {
+        clearTimeout(timer);
+        const text = input.value.trim();
+        asking?.abort();
+        if (text.length < (options.asYouType ? 2 : 1)) {
+            close();
+            options.say(null);
+            return;
+        }
+        const mine = (asking = new AbortController());
+        options.say(labels.searching);
+        options
+            .search({ text, near: options.near(), zoom: options.zoom?.(), locale: options.locale, signal: mine.signal })
+            .then((found) => mine === asking && show(found))
+            .catch((error) => {
+            if (mine !== asking || error.name === 'AbortError')
+                return;
+            close();
+            options.say(labels.searchFailed, 'error');
+            // The reader is told to try again; the developer, why it failed.
+            (0, map_core_1.warnOnce)(`The address search failed: ${error.message}`);
+        });
+    }
+    input.addEventListener('input', () => {
+        if (!options.asYouType) {
+            close();
+            return;
+        }
+        clearTimeout(timer);
+        timer = setTimeout(run, 250);
+    });
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (list.hidden)
+                return;
+            event.preventDefault();
+            const step = event.key === 'ArrowDown' ? 1 : -1;
+            mark((active + step + places.length) % places.length);
+        }
+        else if (event.key === 'Enter') {
+            // Never the form's own Enter.
+            event.preventDefault();
+            // Enter takes the place chosen with the arrows, or the first: the one nearest and likeliest.
+            if (!list.hidden && places.length)
+                choose(places[Math.max(active, 0)]);
+            else
+                run();
+        }
+        else if (event.key === 'Escape') {
+            if (!list.hidden) {
+                event.preventDefault();
+                close();
+            }
+            else if (input.value) {
+                event.preventDefault();
+                input.value = '';
+                options.say(null);
+            }
+        }
+    });
+    input.addEventListener('blur', () => close());
+    return {
+        element,
+        input,
+        destroy() {
+            clearTimeout(timer);
+            asking?.abort();
+        },
+    };
+}
+//# sourceMappingURL=search-box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/search-box.ts"],"names":[],"mappings":"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"}

package/src/lib/search-box.mjs

@@ -0,0 +1,152 @@
+import { warnOnce } from './map-core.mjs';
+export function searchBox(options) {
+    const { document: doc, labels } = options;
+    const element = doc.createElement('div');
+    element.className = 'fd-map-search';
+    const input = doc.createElement('input');
+    input.className = 'fd-input';
+    input.id = options.id;
+    input.type = 'text';
+    input.placeholder = labels.search;
+    input.autocomplete = 'off';
+    input.spellcheck = false;
+    input.enterKeyHint = 'search';
+    const listId = `${options.id}-places`;
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-expanded', 'false');
+    input.setAttribute('aria-controls', listId);
+    const list = doc.createElement('ul');
+    list.className = 'fd-map-results';
+    list.id = listId;
+    list.setAttribute('role', 'listbox');
+    list.setAttribute('aria-label', labels.search);
+    list.hidden = true;
+    element.append(input, list);
+    let places = [];
+    let active = -1;
+    let asking = null;
+    let timer;
+    function close() {
+        list.hidden = true;
+        input.setAttribute('aria-expanded', 'false');
+        input.removeAttribute('aria-activedescendant');
+        active = -1;
+    }
+    function mark(index) {
+        active = index;
+        [...list.children].forEach((option, i) => option.setAttribute('aria-selected', String(i === index)));
+        const chosen = list.children[index];
+        if (chosen) {
+            input.setAttribute('aria-activedescendant', chosen.id);
+            chosen.scrollIntoView?.({ block: 'nearest' });
+        }
+        else
+            input.removeAttribute('aria-activedescendant');
+    }
+    function choose(place) {
+        input.value = place.label;
+        close();
+        options.say(null);
+        options.pick(place);
+    }
+    function show(found) {
+        places = found;
+        list.replaceChildren(...found.map((place, i) => {
+            const option = doc.createElement('li');
+            option.id = `${listId}-${i}`;
+            option.setAttribute('role', 'option');
+            option.setAttribute('aria-selected', 'false');
+            // The place on one line, where it is on the next, as a map's own search shows them.
+            const name = doc.createElement('span');
+            name.className = 'fd-map-result-name';
+            name.textContent = place.label;
+            option.append(name);
+            if (place.detail) {
+                const detail = doc.createElement('span');
+                detail.className = 'fd-map-result-detail';
+                detail.textContent = place.detail;
+                option.append(detail);
+            }
+            // Picked on the press, the box keeping its focus.
+            option.addEventListener('mousedown', (event) => event.preventDefault());
+            option.addEventListener('click', () => choose(place));
+            return option;
+        }));
+        const any = found.length > 0;
+        list.hidden = !any;
+        input.setAttribute('aria-expanded', String(any));
+        active = -1;
+        options.say(any ? null : labels.noResults);
+    }
+    function run() {
+        clearTimeout(timer);
+        const text = input.value.trim();
+        asking?.abort();
+        if (text.length < (options.asYouType ? 2 : 1)) {
+            close();
+            options.say(null);
+            return;
+        }
+        const mine = (asking = new AbortController());
+        options.say(labels.searching);
+        options
+            .search({ text, near: options.near(), zoom: options.zoom?.(), locale: options.locale, signal: mine.signal })
+            .then((found) => mine === asking && show(found))
+            .catch((error) => {
+            if (mine !== asking || error.name === 'AbortError')
+                return;
+            close();
+            options.say(labels.searchFailed, 'error');
+            // The reader is told to try again; the developer, why it failed.
+            warnOnce(`The address search failed: ${error.message}`);
+        });
+    }
+    input.addEventListener('input', () => {
+        if (!options.asYouType) {
+            close();
+            return;
+        }
+        clearTimeout(timer);
+        timer = setTimeout(run, 250);
+    });
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (list.hidden)
+                return;
+            event.preventDefault();
+            const step = event.key === 'ArrowDown' ? 1 : -1;
+            mark((active + step + places.length) % places.length);
+        }
+        else if (event.key === 'Enter') {
+            // Never the form's own Enter.
+            event.preventDefault();
+            // Enter takes the place chosen with the arrows, or the first: the one nearest and likeliest.
+            if (!list.hidden && places.length)
+                choose(places[Math.max(active, 0)]);
+            else
+                run();
+        }
+        else if (event.key === 'Escape') {
+            if (!list.hidden) {
+                event.preventDefault();
+                close();
+            }
+            else if (input.value) {
+                event.preventDefault();
+                input.value = '';
+                options.say(null);
+            }
+        }
+    });
+    input.addEventListener('blur', () => close());
+    return {
+        element,
+        input,
+        destroy() {
+            clearTimeout(timer);
+            asking?.abort();
+        },
+    };
+}
+//# sourceMappingURL=search-box.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/search-box.ts"],"names":[],"mappings":"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"}

package/src/lib/settings.d.mts

@@ -0,0 +1,19 @@
+import type { Locale } from '@fieldia/core';
+import type { LatLng } from './geo.mjs';
+import type { MapLabels } from './labels.mjs';
+import type { AddressSearch, MapProvider, ReverseSearch } from './providers.mjs';
+/** What every map of an app shares: given once to `mapWidgets`. */
+export interface MapSettings {
+    provider: MapProvider;
+    /** The app's own address search, instead of the provider's. */
+    search?: AddressSearch;
+    /** The app's own naming of a point, instead of the provider's. */
+    reverse?: ReverseSearch;
+    /** Whether the app's own search may run for each pause in typing (it may unless false). */
+    searchAsYouType?: boolean;
+    /** Where an empty map opens, and how close. */
+    center?: LatLng;
+    zoom?: number;
+    /** The app's own words over the maps', by language. */
+    labels?: Partial<Record<Locale, Partial<MapLabels>>>;
+}

package/src/lib/settings.d.ts

@@ -0,0 +1,19 @@
+import type { Locale } from '@fieldia/core';
+import type { LatLng } from './geo';
+import type { MapLabels } from './labels';
+import type { AddressSearch, MapProvider, ReverseSearch } from './providers';
+/** What every map of an app shares: given once to `mapWidgets`. */
+export interface MapSettings {
+    provider: MapProvider;
+    /** The app's own address search, instead of the provider's. */
+    search?: AddressSearch;
+    /** The app's own naming of a point, instead of the provider's. */
+    reverse?: ReverseSearch;
+    /** Whether the app's own search may run for each pause in typing (it may unless false). */
+    searchAsYouType?: boolean;
+    /** Where an empty map opens, and how close. */
+    center?: LatLng;
+    zoom?: number;
+    /** The app's own words over the maps', by language. */
+    labels?: Partial<Record<Locale, Partial<MapLabels>>>;
+}

package/src/lib/settings.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=settings.js.map

package/src/lib/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/settings.ts"],"names":[],"mappings":""}

package/src/lib/settings.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=settings.mjs.map

package/src/lib/settings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/settings.ts"],"names":[],"mappings":""}

package/src/lib/styles.d.mts

@@ -0,0 +1,11 @@
+/**
+ * The maps in Fieldia's colours: every colour a token, so a theme, a host's
+ * tokens and the dark scheme reach the map's buttons, search, shapes and
+ * grips. Fixed on purpose: the veil over the map that asks for two fingers
+ * or Ctrl (white words on a dark veil, as an image's caption has them).
+ */
+export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n  position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n  position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 1px 6px; font-size: 11px; line-height: 1.5;\n  background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 4px; z-index: 1000; display: inline-flex; align-items: center; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n  font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n  background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n  position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n  background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n  position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n  padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n  content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n  background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n";
+/** The maps' own stylesheet, once per document: the tools, the search and the box are drawn before Leaflet has loaded. */
+export declare function installMapStyles(doc: Document): void;
+/** Leaflet's stylesheet, once per document, before the maps' own (which add to it): it comes with Leaflet. */
+export declare function installLeafletStyles(doc: Document, css: string): void;

package/src/lib/styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The maps in Fieldia's colours: every colour a token, so a theme, a host's
+ * tokens and the dark scheme reach the map's buttons, search, shapes and
+ * grips. Fixed on purpose: the veil over the map that asks for two fingers
+ * or Ctrl (white words on a dark veil, as an image's caption has them).
+ */
+export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n  position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n  position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 1px 6px; font-size: 11px; line-height: 1.5;\n  background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 4px; z-index: 1000; display: inline-flex; align-items: center; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n  font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n  background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n  position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n  background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n  position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n  padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n  content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n  background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n";
+/** The maps' own stylesheet, once per document: the tools, the search and the box are drawn before Leaflet has loaded. */
+export declare function installMapStyles(doc: Document): void;
+/** Leaflet's stylesheet, once per document, before the maps' own (which add to it): it comes with Leaflet. */
+export declare function installLeafletStyles(doc: Document, css: string): void;

package/src/lib/styles.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_CSS = void 0;
+exports.installMapStyles = installMapStyles;
+exports.installLeafletStyles = installLeafletStyles;
+/**
+ * The maps in Fieldia's colours: every colour a token, so a theme, a host's
+ * tokens and the dark scheme reach the map's buttons, search, shapes and
+ * grips. Fixed on purpose: the veil over the map that asks for two fingers
+ * or Ctrl (white words on a dark veil, as an image's caption has them).
+ */
+exports.MAP_CSS = `
+.fd-map-field { display: grid; gap: 8px; min-width: 0; }
+.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
+.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }
+.fd-map-tools .fd-button[aria-pressed="true"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }
+.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }
+.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }
+.fd-map-results {
+  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;
+  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;
+}
+.fd-map-results [role="option"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }
+.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }
+.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }
+.fd-map-results [role="option"][aria-selected="true"], .fd-map-results [role="option"]:hover { background: var(--fd-accent-soft); }
+.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }
+.fd-map-box {
+  position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);
+}
+.fd-map-box.leaflet-container:focus { outline: none; }
+.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }
+.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }
+.fd-map-zoom[data-side="right"] { right: 8px; }
+.fd-map-zoom[data-side="left"] { left: 8px; }
+.fd-map-zoom button {
+  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;
+  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);
+}
+.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
+.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-map-credits {
+  position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 1px 6px; font-size: 11px; line-height: 1.5;
+  background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;
+}
+.fd-map-credits a { color: inherit; }
+.fd-map-logo { position: absolute; left: 6px; bottom: 4px; z-index: 1000; display: inline-flex; align-items: center; text-decoration: none; }
+.fd-map-logo img { height: 18px; width: auto; display: block; }
+.fd-map-logo span {
+  font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;
+  background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);
+}
+.fd-map-veil {
+  position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;
+  background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;
+}
+.fd-map-veil[data-show] { opacity: 1; }
+.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }
+.fd-map-crosshair::before, .fd-map-crosshair::after { content: ""; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }
+.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }
+.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }
+.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }
+.fd-map-hint {
+  position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
+  padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
+}
+.fd-map-box[data-side="left"] .fd-map-hint { left: 52px; right: 8px; }
+.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }
+.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }
+.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
+.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }
+.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }
+.fd-map-coords .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
+.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }
+.fd-map-note[data-tone="error"] { color: var(--fd-error); }
+.fd-map-pin { width: 28px; height: 40px; }
+.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
+.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }
+.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }
+.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }
+path.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }
+path.fd-map-shape.fd-map-movable { cursor: move; }
+path.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }
+path.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }
+.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }
+.fd-map-grip::after {
+  content: ""; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
+  background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }
+.fd-map-grip:focus-visible { outline: none; }
+.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }
+.fd-map-field select.fd-input { width: auto; max-width: 100%; }
+/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */
+.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }
+.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }
+.fd-map-box .leaflet-marker-draggable { touch-action: none; }
+.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }
+/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */
+.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
+`;
+/** The maps' own stylesheet, once per document: the tools, the search and the box are drawn before Leaflet has loaded. */
+function installMapStyles(doc) {
+    if (doc.getElementById('fieldia-map-styles'))
+        return;
+    const own = doc.createElement('style');
+    own.id = 'fieldia-map-styles';
+    own.textContent = exports.MAP_CSS;
+    // Before the page's own styles, so an app's rule for a map wins over these.
+    doc.head.prepend(own);
+}
+/** Leaflet's stylesheet, once per document, before the maps' own (which add to it): it comes with Leaflet. */
+function installLeafletStyles(doc, css) {
+    if (doc.getElementById('fieldia-leaflet-styles'))
+        return;
+    const leaflet = doc.createElement('style');
+    leaflet.id = 'fieldia-leaflet-styles';
+    leaflet.textContent = css;
+    const own = doc.getElementById('fieldia-map-styles');
+    if (own)
+        own.before(leaflet);
+    else
+        doc.head.prepend(leaflet);
+}
+//# sourceMappingURL=styles.js.map

package/src/lib/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":";;;AAuGA,4CAOC;AAGD,oDAQC;AAzHD;;;;;GAKG;AACU,QAAA,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FtB,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"}