@fieldia/map 0.14.1 → 0.15.0

package/src/lib/pins.mjs

@@ -0,0 +1,154 @@
+import { compileModifier, expressionContext } from '@fieldia/core';
+import { currencyOf, displayValue, drawIcon } from '@fieldia/widgets';
+import { MAP_ICONS } from './map-icons.mjs';
+/** The icons drawn as seen from above, facing north: they turn whole with a record's heading. */
+const FROM_ABOVE = new Set(['car', 'arrow']);
+const PIN = `<svg viewBox="0 0 30 40" aria-hidden="true" focusable="false"><path class="fd-map-face-body" d="M15 1C7.3 1 1 7.1 1 14.7 1 25.3 15 39 15 39s14-13.7 14-24.3C29 7.1 22.7 1 15 1z"/></svg>`;
+export function makePins(options) {
+    const { document: doc, page, locale, pin } = options;
+    const icons = { ...MAP_ICONS, ...options.icons };
+    const look = pin.widget ? 'own' : (pin.look ?? (pin.label ? 'label' : pin.image ? 'photo' : pin.icon || pin.iconField ? 'icon' : 'pin'));
+    const drawer = pin.widget ? options.drawers?.[pin.widget] : undefined;
+    const tones = (pin.tones ?? []).map(({ tone, when }) => ({ tone, when: compileModifier(when) }));
+    const fields = [
+        ...new Set([options.title, pin.label, pin.iconField, pin.image, pin.turn, ...tones.flatMap((t) => t.when.fields)]
+            .filter((name) => !!name && name in page.fields)
+            .flatMap((name) => withCurrency(page, name))),
+    ];
+    const toneOf = (values) => {
+        if (!tones.length)
+            return undefined;
+        const context = expressionContext(values, page.fields);
+        return tones.find((t) => t.when.evaluate(context))?.tone;
+    };
+    const icon = (values) => {
+        const named = pin.iconField ? values[pin.iconField] : undefined;
+        const name = typeof named === 'string' && named ? named : pin.icon;
+        return drawIcon(doc, name, icons) ?? drawIcon(doc, pin.icon ?? 'pin', icons);
+    };
+    const span = (className, ...children) => {
+        const element = doc.createElement('span');
+        element.className = className;
+        element.append(...children);
+        return element;
+    };
+    function face(record) {
+        const { values } = record;
+        const element = doc.createElement('div');
+        element.className = 'fd-map-face';
+        element.dataset['look'] = look;
+        const tone = toneOf(values);
+        if (tone)
+            element.dataset['tone'] = tone;
+        const said = pin.label ? pinText(page, pin.label, values, locale) : '';
+        if (look === 'own') {
+            if (drawer)
+                element.append(drawer(record, { document: doc, locale, page }));
+            element.dataset['stands'] = 'middle';
+            return { element, stands: 'middle', height: 32 };
+        }
+        if (look === 'label' && said) {
+            element.append(span('fd-map-face-text', said));
+            element.dataset['stands'] = 'foot';
+            return { element, stands: 'foot', height: 34 };
+        }
+        if (look === 'pin') {
+            element.innerHTML = PIN;
+            const inside = pin.icon || pin.iconField ? icon(values) : null;
+            element.append(span('fd-map-face-icon', ...(inside ? [inside] : [])));
+            element.dataset['stands'] = 'foot';
+            return { element, stands: 'foot', height: 40 };
+        }
+        if (look === 'icon') {
+            const drawn = icon(values);
+            const glyph = span('fd-map-face-icon', ...(drawn ? [drawn] : []));
+            element.append(glyph);
+            const turn = pin.turn ? values[pin.turn] : null;
+            if (typeof turn === 'number' && Number.isFinite(turn)) {
+                // A car seen from above turns itself; a scooter seen from its side stays upright, a pointer on its edge showing the way.
+                if (FROM_ABOVE.has(drawn?.dataset['icon'] ?? ''))
+                    glyph.style.transform = `rotate(${turn}deg)`;
+                else {
+                    const pointer = span('fd-map-face-turn');
+                    pointer.style.transform = `rotate(${turn}deg)`;
+                    element.append(pointer);
+                }
+            }
+            element.dataset['stands'] = 'middle';
+            return { element, stands: 'middle', height: 34 };
+        }
+        if (look === 'photo') {
+            const source = pin.image ? imageSource(values[pin.image]) : '';
+            if (source) {
+                const img = doc.createElement('img');
+                img.className = 'fd-map-face-photo';
+                img.alt = '';
+                img.decoding = 'async';
+                img.src = source;
+                element.append(img);
+            }
+            else
+                element.append(span('fd-map-face-photo', ...[drawIcon(doc, 'user', icons)].filter((n) => !!n)));
+            if (said)
+                element.append(span('fd-map-face-text', said));
+            element.dataset['stands'] = 'middle';
+            return { element, stands: 'middle', height: 42 };
+        }
+        // A dot; and a label with nothing to say.
+        element.dataset['look'] = 'dot';
+        element.dataset['stands'] = 'middle';
+        return { element, stands: 'middle', height: 16 };
+    }
+    function name(record) {
+        const title = shown(page, options.title, record.values, locale);
+        const said = pin.label && pin.label !== options.title ? shown(page, pin.label, record.values, locale) : '';
+        return [title, said].filter(Boolean).join(', ') || String(record.id);
+    }
+    return { face, name, fields };
+}
+/** A field, and the field its amount's currency is in. */
+export function withCurrency(page, name) {
+    const def = page.fields[name];
+    return def?.type === 'monetary' && def.currencyField && !def.currencyField.startsWith('parent.') ? [name, def.currencyField] : [name];
+}
+/** A value as a person reads it in full: a card's line, a pin's name. */
+export function shown(page, name, values, locale) {
+    const def = page.fields[name];
+    const value = values[name];
+    if (value === null || value === undefined || value === '')
+        return '';
+    return def ? displayValue(def, value, values, locale) : String(value);
+}
+/**
+ * What a pin says, short enough for a pin: an amount or a number in the
+ * page's language, compact ("E£9.5M", "12K", "4.6"); anything else as a
+ * card would show it.
+ */
+export function pinText(page, name, values, locale) {
+    const def = page.fields[name];
+    const value = values[name];
+    if (def && typeof value === 'number' && Number.isFinite(value) && (def.type === 'monetary' || def.type === 'integer' || def.type === 'float')) {
+        const currency = currencyOf(def, values);
+        const plain = { notation: 'compact', numberingSystem: 'latn', maximumFractionDigits: 1 };
+        try {
+            if (currency)
+                return new Intl.NumberFormat(locale, { ...plain, style: 'currency', currency, currencyDisplay: 'narrowSymbol' }).format(value);
+        }
+        catch {
+            // A currency named by words that are no code: written before the amount, as it is.
+            return `${currency} ${new Intl.NumberFormat(locale, plain).format(value)}`;
+        }
+        return new Intl.NumberFormat(locale, plain).format(value);
+    }
+    return shown(page, name, values, locale);
+}
+/** An image field's picture as an address: its first file's data, or where it is kept. */
+export function imageSource(value) {
+    const file = (Array.isArray(value) ? value[0] : value);
+    if (!file)
+        return '';
+    if (typeof file === 'string')
+        return file;
+    return file.data ? `data:${file.type};base64,${file.data}` : (file.url ?? '');
+}
+//# sourceMappingURL=pins.mjs.map

package/src/lib/pins.mjs.map

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

package/src/lib/settings.d.mts

@@ -1,6 +1,7 @@
 import type { Locale } from '@fieldia/core';
 import type { LatLng } from './geo.mjs';
-import type { MapLabels } from './labels.mjs';
+import type { ListMapLabels, MapLabels } from './labels.mjs';
+import type { PinDrawer } from './pins.mjs';
 import type { AddressSearch, MapProvider, ReverseSearch } from './providers.mjs';
 /** What every map of an app shares: given once to `mapWidgets`. */
 export interface MapSettings {
@@ -14,6 +15,8 @@ export interface MapSettings {
     /** Where an empty map opens, and how close. */
     center?: LatLng;
     zoom?: number;
+    /** The app's own pins for a list's map, by the name a page's `pin.widget` gives. */
+    pins?: Record<string, PinDrawer>;
     /** The app's own words over the maps', by language. */
-    labels?: Partial<Record<Locale, Partial<MapLabels>>>;
+    labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels>>>;
 }

package/src/lib/settings.d.ts

@@ -1,6 +1,7 @@
 import type { Locale } from '@fieldia/core';
 import type { LatLng } from './geo';
-import type { MapLabels } from './labels';
+import type { ListMapLabels, MapLabels } from './labels';
+import type { PinDrawer } from './pins';
 import type { AddressSearch, MapProvider, ReverseSearch } from './providers';
 /** What every map of an app shares: given once to `mapWidgets`. */
 export interface MapSettings {
@@ -14,6 +15,8 @@ export interface MapSettings {
     /** Where an empty map opens, and how close. */
     center?: LatLng;
     zoom?: number;
+    /** The app's own pins for a list's map, by the name a page's `pin.widget` gives. */
+    pins?: Record<string, PinDrawer>;
     /** The app's own words over the maps', by language. */
-    labels?: Partial<Record<Locale, Partial<MapLabels>>>;
+    labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels>>>;
 }

package/src/lib/styles.d.mts

@@ -9,3 +9,11 @@ export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-w
 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;
+/**
+ * A list's map, on top of the maps' own: each record's pin in its look and
+ * 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: space-between; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }\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; }\n.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\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";
+/** The list map's stylesheet, once per document, after the maps' own. */
+export declare function installListMapStyles(doc: Document): void;

package/src/lib/styles.d.ts

@@ -9,3 +9,11 @@ export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-w
 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;
+/**
+ * A list's map, on top of the maps' own: each record's pin in its look and
+ * 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: space-between; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }\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; }\n.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\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";
+/** The list map's stylesheet, once per document, after the maps' own. */
+export declare function installListMapStyles(doc: Document): void;

package/src/lib/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAP_CSS = void 0;
+exports.LIST_MAP_CSS = exports.MAP_CSS = void 0;
 exports.installMapStyles = installMapStyles;
 exports.installLeafletStyles = installLeafletStyles;
+exports.installListMapStyles = installListMapStyles;
 /**
  * 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
@@ -127,4 +128,144 @@ function installLeafletStyles(doc, css) {
     else
         doc.head.prepend(leaflet);
 }
+/**
+ * A list's map, on top of the maps' own: each record's pin in its look and
+ * 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.
+ */
+exports.LIST_MAP_CSS = `
+.fd-map-list { min-width: 0; }
+.fd-map-mark { overflow: visible; }
+.fd-map-mark:focus { outline: none; }
+/* 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. */
+.fd-map-mark.fd-map-foot { translate: -50% -100%; }
+.fd-map-mark.fd-map-middle { translate: -50% -50%; }
+.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }
+.fd-map-face {
+  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);
+  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;
+}
+.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }
+.fd-map-face[data-tone="info"] { --fd-map-tone: var(--fd-info); }
+.fd-map-face[data-tone="success"] { --fd-map-tone: var(--fd-success); }
+.fd-map-face[data-tone="warning"] { --fd-map-tone: var(--fd-warning); }
+.fd-map-face[data-tone="danger"] { --fd-map-tone: var(--fd-error); }
+.fd-map-face[data-tone="muted"] { --fd-map-tone: var(--fd-muted); }
+.fd-map-face[data-stands="foot"] { transform-origin: 50% 100%; }
+.fd-map-face[data-stands="middle"] { transform-origin: 50% 50%; }
+.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; }
+.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; }
+.fd-map-face-icon { display: block; }
+.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }
+.fd-map-face[data-look="label"] {
+  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;
+  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);
+}
+.fd-map-face[data-look="label"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }
+.fd-map-face[data-look="label"]::after {
+  content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
+  background: inherit; border: inherit; border-top: 0; border-left: 0;
+}
+.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); }
+.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-map-face[data-look="pin"] { width: 30px; height: 40px; }
+.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)); }
+.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }
+.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); }
+.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); }
+.fd-map-face[data-look="icon"] {
+  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
+  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);
+}
+.fd-map-face[data-look="icon"] .fd-map-face-icon { width: 20px; height: 20px; }
+.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }
+.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); }
+.fd-map-face-photo {
+  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;
+  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);
+}
+span.fd-map-face-photo svg { width: 22px; height: 22px; }
+.fd-map-face[data-look="photo"] .fd-map-face-text {
+  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;
+  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);
+}
+.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); }
+.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); }
+.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {
+  content: "✓"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
+  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);
+}
+.fd-map-bubble {
+  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
+  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;
+  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.fd-map-bubble[data-size="m"] { width: 40px; height: 40px; }
+.fd-map-bubble[data-size="l"] { width: 48px; height: 48px; }
+.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); }
+.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }
+.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }
+.fd-map-card { display: grid; }
+.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }
+.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }
+.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }
+.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
+.fd-map-card-close {
+  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
+  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;
+}
+.fd-map-card[dir="rtl"] .fd-map-card-close { margin: -4px 0 -4px -6px; }
+.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }
+.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }
+.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; }
+.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
+.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
+.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }
+.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
+.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; }
+.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
+.fd-map-here {
+  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
+  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);
+}
+.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-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; }
+.fd-map-box[data-side="left"] .fd-map-draw { left: auto; right: 8px; }
+.fd-map-draw button {
+  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
+  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-draw button svg { width: 18px; height: 18px; }
+.fd-map-draw button:hover, .fd-map-draw button[aria-pressed="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
+.fd-map-draw button[aria-pressed="true"] { background: var(--fd-accent-soft); }
+.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+/* While an area is drawn, the pins let every press through to the map. */
+.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }
+/* The drawing's bar starts after the tools. */
+.fd-map-list .fd-map-hint { left: 48px; }
+.fd-map-list .fd-map-box[data-side="left"] .fd-map-hint { left: 52px; right: 48px; }
+.fd-map-list-note {
+  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);
+}
+`;
+/** The list map's stylesheet, once per document, after the maps' own. */
+function installListMapStyles(doc) {
+    installMapStyles(doc);
+    if (doc.getElementById('fieldia-list-map-styles'))
+        return;
+    const own = doc.createElement('style');
+    own.id = 'fieldia-list-map-styles';
+    own.textContent = exports.LIST_MAP_CSS;
+    doc.getElementById('fieldia-map-styles')?.after(own);
+}
 //# sourceMappingURL=styles.js.map

package/src/lib/styles.js.map

@@ -1 +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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":";;;AAuGA,4CAOC;AAGD,oDAQC;AAsID,oDAOC;AAtQD;;;;;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;AAED;;;;GAIG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H3B,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"}

package/src/lib/styles.mjs

@@ -122,4 +122,144 @@ export function installLeafletStyles(doc, css) {
     else
         doc.head.prepend(leaflet);
 }
+/**
+ * A list's map, on top of the maps' own: each record's pin in its look and
+ * 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 const LIST_MAP_CSS = `
+.fd-map-list { min-width: 0; }
+.fd-map-mark { overflow: visible; }
+.fd-map-mark:focus { outline: none; }
+/* 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. */
+.fd-map-mark.fd-map-foot { translate: -50% -100%; }
+.fd-map-mark.fd-map-middle { translate: -50% -50%; }
+.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }
+.fd-map-face {
+  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);
+  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;
+}
+.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }
+.fd-map-face[data-tone="info"] { --fd-map-tone: var(--fd-info); }
+.fd-map-face[data-tone="success"] { --fd-map-tone: var(--fd-success); }
+.fd-map-face[data-tone="warning"] { --fd-map-tone: var(--fd-warning); }
+.fd-map-face[data-tone="danger"] { --fd-map-tone: var(--fd-error); }
+.fd-map-face[data-tone="muted"] { --fd-map-tone: var(--fd-muted); }
+.fd-map-face[data-stands="foot"] { transform-origin: 50% 100%; }
+.fd-map-face[data-stands="middle"] { transform-origin: 50% 50%; }
+.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; }
+.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; }
+.fd-map-face-icon { display: block; }
+.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }
+.fd-map-face[data-look="label"] {
+  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;
+  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);
+}
+.fd-map-face[data-look="label"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }
+.fd-map-face[data-look="label"]::after {
+  content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
+  background: inherit; border: inherit; border-top: 0; border-left: 0;
+}
+.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); }
+.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-map-face[data-look="pin"] { width: 30px; height: 40px; }
+.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)); }
+.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }
+.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); }
+.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); }
+.fd-map-face[data-look="icon"] {
+  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
+  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);
+}
+.fd-map-face[data-look="icon"] .fd-map-face-icon { width: 20px; height: 20px; }
+.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }
+.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); }
+.fd-map-face-photo {
+  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;
+  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);
+}
+span.fd-map-face-photo svg { width: 22px; height: 22px; }
+.fd-map-face[data-look="photo"] .fd-map-face-text {
+  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;
+  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);
+}
+.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); }
+.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); }
+.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {
+  content: "✓"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
+  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);
+}
+.fd-map-bubble {
+  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
+  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;
+  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.fd-map-bubble[data-size="m"] { width: 40px; height: 40px; }
+.fd-map-bubble[data-size="l"] { width: 48px; height: 48px; }
+.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); }
+.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }
+.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }
+.fd-map-card { display: grid; }
+.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }
+.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }
+.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }
+.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
+.fd-map-card-close {
+  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
+  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;
+}
+.fd-map-card[dir="rtl"] .fd-map-card-close { margin: -4px 0 -4px -6px; }
+.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }
+.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }
+.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; }
+.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
+.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
+.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }
+.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
+.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; }
+.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
+.fd-map-here {
+  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
+  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);
+}
+.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-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; }
+.fd-map-box[data-side="left"] .fd-map-draw { left: auto; right: 8px; }
+.fd-map-draw button {
+  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
+  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-draw button svg { width: 18px; height: 18px; }
+.fd-map-draw button:hover, .fd-map-draw button[aria-pressed="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
+.fd-map-draw button[aria-pressed="true"] { background: var(--fd-accent-soft); }
+.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+/* While an area is drawn, the pins let every press through to the map. */
+.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }
+/* The drawing's bar starts after the tools. */
+.fd-map-list .fd-map-hint { left: 48px; }
+.fd-map-list .fd-map-box[data-side="left"] .fd-map-hint { left: 52px; right: 48px; }
+.fd-map-list-note {
+  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);
+}
+`;
+/** The list map's stylesheet, once per document, after the maps' own. */
+export function installListMapStyles(doc) {
+    installMapStyles(doc);
+    if (doc.getElementById('fieldia-list-map-styles'))
+        return;
+    const own = doc.createElement('style');
+    own.id = 'fieldia-list-map-styles';
+    own.textContent = LIST_MAP_CSS;
+    doc.getElementById('fieldia-map-styles')?.after(own);
+}
 //# sourceMappingURL=styles.mjs.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FtB,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"}
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FtB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H3B,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"}