@theseam/ui-common 2.0.1-beta.109 → 2.0.1-beta.111

package/fesm2022/theseam-ui-common-google-maps.mjs

@@ -1,17 +1,17 @@
 import { __decorate } from 'tslib';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Injector, inject, ChangeDetectionStrategy, Component, HostListener, Input, Optional, Inject, ChangeDetectorRef, EventEmitter, forwardRef, ViewChild, Output, HostBinding, Directive, NgModule, LOCALE_ID } from '@angular/core';
+import { InjectionToken, Injectable, Injector, inject, computed, ChangeDetectionStrategy, Component, HostListener, Input, Optional, Inject, ChangeDetectorRef, EventEmitter, forwardRef, ViewChild, Output, HostBinding, Directive, NgModule, LOCALE_ID } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Observable, Subject, fromEvent, BehaviorSubject, from, of, interval, defer, throwError } from 'rxjs';
-import { takeUntil, switchMap, tap, map, catchError, startWith, filter, take, mapTo } from 'rxjs/operators';
+import { Observable, Subject, fromEvent, BehaviorSubject, from, combineLatest, of, interval, defer, throwError } from 'rxjs';
+import { takeUntil, distinctUntilChanged, switchMap, tap, skip, map, catchError, startWith, filter, take, mapTo } from 'rxjs/operators';
 import { faDrawPolygon, faFileImport, faCrosshairs, faSearchLocation } from '@fortawesome/free-solid-svg-icons';
 import { mixinDisabled, InputBoolean, InputNumber } from '@theseam/ui-common/core';
 import * as i6 from '@theseam/ui-common/menu';
 import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
 import { TerraDraw, TerraDrawPolyLineMode } from 'terra-draw';
 import { TerraDrawGoogleMapsAdapter } from 'terra-draw-google-maps-adapter';
-import { notNullOrUndefined, closePolygons, polygonHasMinDistinctVertices, addHoleToPolygon, polygonContains, readGeoFile } from '@theseam/ui-common/utils';
+import { notNullOrUndefined, closePolygons, polygonContains, addHoleToPolygon, polygonHasMinDistinctVertices, readGeoFile } from '@theseam/ui-common/utils';
 import { ESCAPE } from '@angular/cdk/keycodes';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@theseam/ui-common/icon';
@@ -32,6 +32,7 @@ const MAP_CONTROL_DATA = new InjectionToken('MAP_CONTROL_DATA');
 var AppFeaturePropertyName;
 (function (AppFeaturePropertyName) {
     AppFeaturePropertyName["IsSelected"] = "__app__isSelected";
+    AppFeaturePropertyName["GroupKey"] = "__app__groupKey";
 })(AppFeaturePropertyName || (AppFeaturePropertyName = {}));
 function isAppFeatureProperty(propertyName) {
     return (Object.values(AppFeaturePropertyName).findIndex((value) => value === propertyName) !== -1);
@@ -127,6 +128,97 @@ function geoJsonPolygonFromDataFeature(feature) {
     closePolygons(polygon);
     return polygon;
 }
+/** Build a google.maps.Data.MultiPolygon from a GeoJSON MultiPolygon. */
+function dataMultiPolygonFromGeoJson(multiPolygon) {
+    return new google.maps.Data.MultiPolygon(multiPolygon.coordinates.map((rings) => dataPolygonFromGeoJson({ type: 'Polygon', coordinates: rings })));
+}
+/**
+ * Every Polygon part of a feature, as closed GeoJSON. A Polygon feature yields
+ * one; a MultiPolygon yields one per part; anything else yields none.
+ *
+ * Callers that need to match a drawn shape against existing geometry must use
+ * this rather than `geoJsonPolygonFromDataFeature`, which sees only Polygons
+ * and silently ignores MultiPolygon features.
+ */
+function polygonsFromDataFeature(feature) {
+    const geometry = feature.getGeometry();
+    if (geometry === null) {
+        return [];
+    }
+    if (geometry.getType() === 'Polygon') {
+        const polygon = {
+            type: 'Polygon',
+            coordinates: polygonCoordinates(geometry),
+        };
+        closePolygons(polygon);
+        return [polygon];
+    }
+    if (geometry.getType() === 'MultiPolygon') {
+        return geometry
+            .getArray()
+            .map((part) => {
+            const polygon = {
+                type: 'Polygon',
+                coordinates: polygonCoordinates(part),
+            };
+            closePolygons(polygon);
+            return polygon;
+        });
+    }
+    return [];
+}
+/**
+ * Cut `hole` into whichever part of `feature`'s geometry fully contains it.
+ *
+ * Mutates the EXISTING feature (via `setGeometry`) rather than replacing it,
+ * so its identity and properties survive. A single-part Polygon feature stays
+ * a Polygon; a MultiPolygon feature stays a MultiPolygon with only the
+ * containing part modified. Returns whether a containing part was found —
+ * when none is, the feature is left untouched.
+ */
+function applyHoleToFeature(feature, hole) {
+    const parts = polygonsFromDataFeature(feature);
+    const containingIndex = parts.findIndex((part) => polygonContains(part, hole));
+    if (containingIndex === -1) {
+        return false;
+    }
+    parts[containingIndex] = addHoleToPolygon(parts[containingIndex], hole);
+    feature.setGeometry(parts.length === 1
+        ? dataPolygonFromGeoJson(parts[0])
+        : dataMultiPolygonFromGeoJson({
+            type: 'MultiPolygon',
+            coordinates: parts.map((p) => p.coordinates),
+        }));
+    return true;
+}
+/**
+ * Read a feature as a GeoJSON Feature, geometry and properties together.
+ *
+ * `excludeProperty` filters properties out by name — used to keep internal
+ * `__app__` bookkeeping out of anything handed to a consumer.
+ */
+function geoJsonFeatureFromDataFeature(feature, excludeProperty) {
+    const parts = polygonsFromDataFeature(feature);
+    if (parts.length === 0) {
+        return undefined;
+    }
+    const geometry = feature.getGeometry()?.getType() === 'MultiPolygon'
+        ? { type: 'MultiPolygon', coordinates: parts.map((p) => p.coordinates) }
+        : parts[0];
+    const properties = {};
+    feature.forEachProperty((value, name) => {
+        if (!excludeProperty?.(name)) {
+            properties[name] = value;
+        }
+    });
+    const id = feature.getId();
+    return {
+        type: 'Feature',
+        ...(id === undefined ? {} : { id }),
+        geometry,
+        properties,
+    };
+}
 function getBoundsWithAllFeatures(data) {
     const bounds = new google.maps.LatLngBounds();
     data.forEach((feature) => {
@@ -205,6 +297,301 @@ function createFeatureChangeObservable(data, ngZone) {
     });
 }
 
+const isDevMode = () => typeof ngDevMode === 'undefined' || !!ngDevMode;
+/**
+ * Resolves which group each feature on the data layer belongs to, and assigns
+ * keys to features the map itself creates.
+ *
+ * Keys resolve from `properties[groupProperty]` when present, and otherwise
+ * from an internal `__app__groupKey`, which is stripped from serialized output
+ * and does not trigger value changes.
+ */
+class FeatureGroupRegistry {
+    _data;
+    _options;
+    _assignedSeq = 0;
+    _warnedAboutMissingGroupValues = false;
+    _warnedAboutUnsupportedGeometry = false;
+    constructor(_data, _options = {}) {
+        this._data = _data;
+        this._options = _options;
+    }
+    setOptions(options) {
+        this._options = options;
+    }
+    /**
+     * The group key for a feature, assigning an internal one if it has neither a
+     * group property value nor a previously assigned key.
+     *
+     * Assigning here mutates the feature, but only via an `__app__` property,
+     * which neither serializes nor raises a value change.
+     */
+    keyOf(feature) {
+        const declared = this._declaredKey(feature);
+        if (declared !== undefined) {
+            return declared;
+        }
+        const assigned = feature.getProperty(AppFeaturePropertyName.GroupKey);
+        if (typeof assigned === 'string' && assigned.length > 0) {
+            return assigned;
+        }
+        this._warnAboutMissingGroupValue();
+        const key = `__assigned__${this._assignedSeq++}`;
+        feature.setProperty(AppFeaturePropertyName.GroupKey, key);
+        return key;
+    }
+    /** Every feature on the data layer belonging to `key`. */
+    featuresIn(key) {
+        const features = [];
+        this._data.forEach((feature) => {
+            if (this.keyOf(feature) === key) {
+                features.push(feature);
+            }
+        });
+        return features;
+    }
+    /** The group a feature belongs to, as emittable GeoJSON. */
+    groupOf(feature) {
+        return this.group(this.keyOf(feature));
+    }
+    /** The group for a key, or undefined when no feature carries it. */
+    group(key) {
+        return this.groupWithSources(key)?.group;
+    }
+    /**
+     * A group alongside the `Data.Feature` each emitted GeoJSON feature came
+     * from, index-aligned.
+     *
+     * Callers that need to map a `Data.Feature` back to its emitted counterpart
+     * must use this rather than indexing `group.features` against
+     * `featuresIn(key)` — a feature with unsupported geometry is dropped from
+     * the emitted list, which would shift every index after it.
+     */
+    groupWithSources(key) {
+        const candidates = this.featuresIn(key);
+        if (candidates.length === 0) {
+            return undefined;
+        }
+        const sources = [];
+        const features = [];
+        for (const candidate of candidates) {
+            const geoJson = geoJsonFeatureFromDataFeature(candidate, isAppFeatureProperty);
+            if (geoJson === undefined) {
+                this._warnAboutUnsupportedGeometry();
+                continue;
+            }
+            sources.push(candidate);
+            features.push(geoJson);
+        }
+        return { group: { key, features }, sources };
+    }
+    /** Every group currently on the data layer. */
+    groups() {
+        const keys = new Set();
+        this._data.forEach((feature) => keys.add(this.keyOf(feature)));
+        return [...keys]
+            .map((key) => this.group(key))
+            .filter((g) => g !== undefined);
+    }
+    /**
+     * Start a new group on a feature the map created, writing a real group
+     * property when one is configured so the grouping survives serialization.
+     */
+    assignNewKey(feature) {
+        const key = this._options.newGroupKeyFactory?.() ?? defaultGroupKey();
+        if (isDevMode() && this.featuresIn(key).length > 0) {
+            console.warn(`[seam-google-maps] newGroupKeyFactory produced the key "${key}", ` +
+                `which is already in use. The drawn feature joins that group. ` +
+                `The factory is responsible for producing unique keys.`);
+        }
+        this.assignKey(feature, key);
+        return key;
+    }
+    /** Put a feature into an existing group. */
+    assignKey(feature, key) {
+        const groupProperty = this._options.groupProperty;
+        if (groupProperty) {
+            feature.setProperty(groupProperty, key);
+            feature.removeProperty(AppFeaturePropertyName.GroupKey);
+            return;
+        }
+        feature.setProperty(AppFeaturePropertyName.GroupKey, key);
+    }
+    _declaredKey(feature) {
+        const groupProperty = this._options.groupProperty;
+        if (!groupProperty) {
+            return undefined;
+        }
+        const value = feature.getProperty(groupProperty);
+        if (value === null || value === undefined || value === '') {
+            return undefined;
+        }
+        return String(value);
+    }
+    _warnAboutUnsupportedGeometry() {
+        if (!isDevMode() || this._warnedAboutUnsupportedGeometry) {
+            return;
+        }
+        this._warnedAboutUnsupportedGeometry = true;
+        console.warn(`[seam-google-maps] a feature's geometry is neither Polygon nor ` +
+            `MultiPolygon. It still renders, but is excluded from groups, ` +
+            `outputs, and labels.`);
+    }
+    _warnAboutMissingGroupValue() {
+        if (!isDevMode() ||
+            !this._options.groupProperty ||
+            this._warnedAboutMissingGroupValues) {
+            return;
+        }
+        this._warnedAboutMissingGroupValues = true;
+        console.warn(`[seam-google-maps] featureGroupProperty is ` +
+            `"${this._options.groupProperty}", but at least one feature has no ` +
+            `value for it. Each becomes its own group under a session-scoped key ` +
+            `that is not serialized. Assign the property during import.`);
+    }
+}
+function defaultGroupKey() {
+    return (globalThis.crypto?.randomUUID?.() ?? `group-${Date.now()}-${Math.random()}`);
+}
+
+const FEATURE_STYLE_OPTIONS_DEFAULT = () => ({
+    clickable: true,
+    visible: true,
+    draggable: false,
+    editable: false,
+    fillColor: 'teal',
+    fillOpacity: 0.3,
+    strokeColor: 'blue',
+    strokeOpacity: 1,
+    strokeWeight: 2,
+});
+const FEATURE_STYLE_OPTIONS_SELECTED = () => ({
+    fillColor: 'green',
+    fillOpacity: 0.7,
+    strokeColor: 'limegreen',
+    strokeOpacity: 1,
+    strokeWeight: 2,
+});
+const FEATURE_STYLE_OVERRIDE_OPTIONS_HOVERED = () => ({
+    strokeColor: 'black',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+});
+/**
+ * Style options a feature may set through its GeoJSON properties.
+ *
+ * `editable`, `draggable`, and `clickable` are here so a feature can opt OUT —
+ * a retired field stays unreshapeable while its neighbours do not. They cannot
+ * opt in: the clamp in `computeFeatureStyle` runs last and only ever narrows.
+ */
+const SUPPORTED_PROPERTY_STYLE_OPTIONS = [
+    'fillColor',
+    'fillOpacity',
+    'strokeColor',
+    'strokeOpacity',
+    'strokeWeight',
+    'label',
+    'opacity',
+    'icon',
+    'clickable',
+    'visible',
+    'editable',
+    'draggable',
+];
+/** Merge only the supported subset of one options object into another. */
+function mergeStyleOptions(target, source) {
+    if (!source || Object.keys(source).length === 0) {
+        return target;
+    }
+    for (const option of SUPPORTED_PROPERTY_STYLE_OPTIONS) {
+        if (Object.prototype.hasOwnProperty.call(source, option)) {
+            target[option] = source[option];
+        }
+    }
+    return target;
+}
+/**
+ * The style for a feature, in a fixed precedence order:
+ *
+ *   defaults
+ *     -> properties.styleOptions
+ *     -> selected defaults          (when selected)
+ *     -> properties.styleOptionsSelected  (when selected)
+ *     -> interaction clamp          (always last)
+ *
+ * That chain governs the *visual* options (colours, etc.) only. The opt-out
+ * flags (`editable`/`draggable`/`clickable`) resolve separately, per key: a
+ * selected feature consults `styleOptionsSelected` first and falls back to
+ * `styleOptions` only for a key `styleOptionsSelected` doesn't itself
+ * mention — never a whole-object fallback. Otherwise a feature that declares
+ * `styleOptionsSelected` for an unrelated reason, such as a different
+ * selected fill colour, would silently lose an unrelated `editable: false`
+ * from `styleOptions` the moment it's selected.
+ *
+ * The clamp is one-directional. A feature can only narrow what the context
+ * permits, never widen it, so no property in an uploaded file can arm editing
+ * when the mode says no.
+ *
+ * A declared `editable: false` also implies `draggable: false`: moving a
+ * polygon changes the map's value exactly as much as reshaping it does, so a
+ * feature that opts out of one opts out of the other. This implication runs
+ * only one way — `draggable: false` alone does not imply `editable: false`, so
+ * a feature may still opt out of dragging while remaining reshapeable via its
+ * vertex handles. Resolved through the same per-key `wants()` lookup as
+ * `editable` itself, so a feature that locks `editable: false` in
+ * `styleOptions` cannot be dragged even if `styleOptionsSelected` declares
+ * `draggable` for an unrelated reason (or not at all).
+ */
+function computeFeatureStyle(feature, context) {
+    const selected = isFeatureSelected(feature);
+    const baseDeclared = getStyleOptionsDefinedByFeature(feature);
+    const selectedDeclared = selected
+        ? getSelectedStyleOptionsDefinedByFeature(feature)
+        : undefined;
+    const options = FEATURE_STYLE_OPTIONS_DEFAULT();
+    mergeStyleOptions(options, getStyleOptionsDefinedByFeature(feature));
+    if (selected) {
+        mergeStyleOptions(options, FEATURE_STYLE_OPTIONS_SELECTED());
+        mergeStyleOptions(options, getSelectedStyleOptionsDefinedByFeature(feature));
+    }
+    // Resolved per key, not per object. A feature that opts out in
+    // `styleOptions` must stay opted out even when it also declares a
+    // `styleOptionsSelected` for unrelated reasons such as colour — otherwise
+    // the clamp stops being one-directional and a retired field becomes
+    // editable the moment it is selected.
+    const wants = (option) => (selectedDeclared?.[option] ?? baseDeclared?.[option]) !== false;
+    const editingArmed = context.editingEnabled && context.geometryEditingArmed && selected;
+    const wantsEditable = wants('editable');
+    options.editable = wantsEditable && editingArmed;
+    // editable: false implies draggable: false (see the doc comment above) —
+    // the reverse does not hold, so wants('draggable') is still consulted on
+    // its own for a feature that opts out of dragging alone.
+    options.draggable = wants('draggable') && wantsEditable && editingArmed;
+    options.clickable = wants('clickable') && context.clicksAllowed;
+    return options;
+}
+/**
+ * The hover override, merged with anything the feature declares for hover.
+ *
+ * `mergeStyleOptions` is shared with `computeFeatureStyle`, and
+ * `SUPPORTED_PROPERTY_STYLE_OPTIONS` includes `editable`/`draggable` so a
+ * feature can opt OUT of them via `styleOptions`/`styleOptionsSelected`. But
+ * this override is applied via `overrideStyle`, with no clamp downstream at
+ * all — unlike `computeFeatureStyle`, where the interaction clamp runs last
+ * and narrows whatever came before it. So if a consumer's
+ * `styleOptionsHovered` declared `editable` or `draggable`, it would apply
+ * unclamped: the one path where the "clamp is one-directional and always
+ * runs last" guarantee would not hold. A hover override has no business
+ * touching either, so both are stripped unconditionally, regardless of what
+ * `styleOptionsHovered` declares.
+ */
+function computeFeatureHoverStyle(feature) {
+    const options = mergeStyleOptions(FEATURE_STYLE_OVERRIDE_OPTIONS_HOVERED(), getHoveredStyleOptionsDefinedByFeature(feature));
+    delete options.editable;
+    delete options.draggable;
+    return options;
+}
+
 // TODO: Close on map losing focus.
 class GoogleMapsContextMenu {
     _map;
@@ -339,6 +726,284 @@ class GoogleMapsContextMenu {
     }
 }
 
+/**
+ * Multi-field behaviour, where selection and geometry editing are separate
+ * concerns.
+ *
+ * Clicking a polygon selects its whole group and mutates nothing, whether
+ * edit mode is on or off — the point being that a stray click can never nudge
+ * a vertex on an imported boundary, which is close to unrecoverable without
+ * an undo feature. With edit mode on, the selected group's own geometry also
+ * goes to Google's vertex/midpoint editor, and a click on open map starts a
+ * new drawing.
+ *
+ * A click on a polygon is suppressed only while a draw is actually in
+ * progress — that is the one moment a click is genuinely ambiguous between
+ * "select this" and "place a vertex". Between draws there is no ambiguity at
+ * all, since Terra Draw is not capturing pointer input, so every polygon
+ * stays clickable and selecting a different field never requires leaving
+ * edit mode first.
+ */
+class GroupedInteractionModel {
+    id = 'grouped';
+    onFeatureClick(feature, context) {
+        // While a draw is in progress, a click on a polygon is placing a vertex,
+        // not a selection. Defensive: the service's data `click` listener already
+        // guards on `isDrawing()` before calling in here (see onMapClick's
+        // identical defence below), but this model does not rely solely on that
+        // guard.
+        if (context.isDrawing) {
+            return;
+        }
+        // Selecting mutates nothing, so it is safe on any group regardless of
+        // edit mode — including a group other than the one currently selected.
+        // Note which polygon was touched, since `Delete` acts on that one alone.
+        // Google's vertex editor still receives the click for the selected
+        // group's own geometry.
+        context.selectGroup(context.groups.keyOf(feature), feature);
+    }
+    onMapClick(context) {
+        // A click while a draw is already in progress is placing a vertex, not a
+        // map click. Defensive: the service's map `click` listener already guards
+        // on `isDrawing()` before calling in here, but `startDrawing()` calling
+        // `setMode('polyline')` again would reset the in-progress path, so this
+        // model does not rely solely on the caller's guard.
+        if (context.isDrawing) {
+            return;
+        }
+        if (context.editMode) {
+            context.startDrawing();
+            return;
+        }
+        context.selectGroup(null, null);
+    }
+    onDrawFinished(polygon, context) {
+        const selectedKey = context.getSelectedKey();
+        if (selectedKey === null) {
+            // No selection means no field to cut into. Skipping the containment
+            // search entirely is what stops a polygon drawn over an unrelated field
+            // from punching a hole in it.
+            return { kind: 'newFeature', groupKey: null };
+        }
+        if (context.allowHoles) {
+            const target = context.findContainingFeature(polygon, selectedKey);
+            if (target) {
+                return { kind: 'hole', target };
+            }
+        }
+        return { kind: 'newFeature', groupKey: selectedKey };
+    }
+    featureFlags(feature, context) {
+        if (!context.editMode) {
+            return { geometryEditingArmed: false, clicksAllowed: true };
+        }
+        const selectedKey = context.getSelectedKey();
+        const isSelectedGroup = selectedKey !== null && context.groups.keyOf(feature) === selectedKey;
+        return {
+            // The group stays visibly selected while a draw is in progress (F3) —
+            // it is the target the drawn polygon will join — but its vertex/midpoint
+            // handles are disarmed for the duration, since Google's edit handles are
+            // separate interactive elements that would otherwise compete with Terra
+            // Draw for pointer events near the polygon. Only the selected group is
+            // ever reshapeable; every group, selected or not, is merely selectable.
+            geometryEditingArmed: isSelectedGroup && !context.isDrawing,
+            // Suppressed only while Terra Draw is actually capturing pointer input
+            // — the one window in which a click is ambiguous between selecting and
+            // placing a vertex. Between draws every polygon stays clickable
+            // regardless of selection, so a click can switch the selection to a
+            // different field without leaving edit mode.
+            clicksAllowed: !context.isDrawing,
+        };
+    }
+    allowsContextMenu(feature, context) {
+        // Every item this menu offers is a destructive edit (Delete Polygon,
+        // Delete Field), so it must not be reachable outside edit mode, and —
+        // matching legacy's `isFeatureSelected(feature)` — not for a feature the
+        // user has not selected. clicksAllowed above stays gated on drawing alone
+        // (a non-selected group must remain clickable so it can BECOME the
+        // selection), but offering destructive actions for a field the user has
+        // not selected is more surprising than useful, so the menu is narrower
+        // than what is merely clickable.
+        const selectedKey = context.getSelectedKey();
+        return (context.editMode &&
+            selectedKey !== null &&
+            context.groups.keyOf(feature) === selectedKey);
+    }
+}
+
+/**
+ * The behaviour this module has always had: one boundary, clicking a feature
+ * selects it and arms its handles, and the draw button toggles drawing.
+ *
+ * Two applications depend on this and are not being updated, so it must not
+ * drift. Every decision here mirrors the pre-strategy service exactly.
+ */
+class LegacyInteractionModel {
+    id = 'legacy';
+    onFeatureClick(feature, context) {
+        context.selectGroup(context.groups.keyOf(feature), feature);
+    }
+    onMapClick(context) {
+        context.selectGroup(null, null);
+    }
+    onDrawFinished(polygon, context) {
+        // Legacy parity: the pre-strategy service found the exterior feature with
+        // geoJsonPolygonFromDataFeature, which returns undefined for MultiPolygon
+        // geometry, and that function's caller SKIPPED such a candidate and kept
+        // iterating rather than giving up — so a Polygon further along could still
+        // match. The shared search is now MultiPolygon-aware for grouped mode;
+        // narrow it back here with an accept predicate, filtered DURING the
+        // search, so a MultiPolygon candidate is skipped rather than aborting the
+        // whole search the way discarding the result afterward would. Two apps
+        // depend on this behaviour and are not being updated.
+        const target = context.allowHoles
+            ? context.findContainingFeature(polygon, undefined, (feature) => feature.getGeometry()?.getType() === 'Polygon')
+            : undefined;
+        return target
+            ? { kind: 'hole', target }
+            : { kind: 'newFeature', groupKey: null };
+    }
+    featureFlags(feature, context) {
+        // Selection alone arms handles here; `editingEnabled` is the only gate,
+        // and `computeFeatureStyle` applies it.
+        return { geometryEditingArmed: true, clicksAllowed: true };
+    }
+    allowsContextMenu(feature, context) {
+        return isFeatureSelected(feature);
+    }
+}
+
+/** Below this projected diagonal, a shape is too small to label. */
+const DEFAULT_LABEL_MIN_DIAGONAL_PX = 48;
+/**
+ * Whether a group is large enough on screen to carry a label.
+ *
+ * Uses the diagonal rather than width and height separately, so a long thin
+ * field — which has plenty of room for a label — is not hidden for being
+ * narrow. This self-tunes as the map zooms out, which is why there is no
+ * `minZoom` input.
+ */
+function isLabelVisibleAtSize(widthPx, heightPx, minDiagonalPx = DEFAULT_LABEL_MIN_DIAGONAL_PX) {
+    return Math.hypot(widthPx, heightPx) >= minDiagonalPx;
+}
+
+const MAP_FEATURE_LABEL_CLASS = 'seam-map-feature-label';
+/**
+ * Renders one label per feature group.
+ *
+ * The `google.maps.OverlayView` subclass is declared INSIDE the constructor
+ * rather than at module scope. This codebase's Google Maps API loader is
+ * lazy (see `TheSeamLazyMapsApiLoader`), so `google.maps` is not guaranteed
+ * to exist when this module is first imported — a top-level
+ * `class X extends google.maps.OverlayView` evaluates that reference at
+ * import time and throws `ReferenceError: google is not defined` before the
+ * API script has loaded. `GoogleMapsContextMenuOverlayView` in
+ * `google-maps-contextmenu.ts` is declared locally for the same reason.
+ * `MapFeatureLabelsOverlay` itself is only ever constructed once the map
+ * (and therefore the API) is ready, via `GoogleMapsService`, so deferring the
+ * subclass to construction time is safe.
+ *
+ * Internally it is a single OverlayView holding one child div per group,
+ * rather than one overlay each: with many fields that is one `draw()` per
+ * frame updating N child positions instead of N overlays each doing
+ * projection work.
+ *
+ * Labels live in the `markerLayer` pane, which sits above the `overlayLayer`
+ * pane the Data layer renders polygons into (so labels are not decided by DOM
+ * insertion order) and below the `floatPane` `GoogleMapsContextMenu` uses (so
+ * the context menu still stays on top). `pointer-events: none` means labels
+ * never take part in hit testing and cannot interfere with clicks, drawing, or
+ * the context-menu overlay.
+ *
+ * Known limitation: no collision de-confliction. Labels of nearby groups will
+ * overlap at low zoom. The size threshold reduces but does not eliminate this.
+ */
+class MapFeatureLabelsOverlay {
+    _overlay;
+    constructor(getLabels) {
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.left = '0';
+        container.style.top = '0';
+        container.style.pointerEvents = 'none';
+        const elements = new Map();
+        let labels = [];
+        const elementFor = (label) => {
+            let element = elements.get(label.key);
+            if (!element) {
+                element = document.createElement('div');
+                element.className = MAP_FEATURE_LABEL_CLASS;
+                element.style.position = 'absolute';
+                element.style.transform = 'translate(-50%, -50%)';
+                element.style.pointerEvents = 'none';
+                element.style.whiteSpace = 'nowrap';
+                container.appendChild(element);
+                elements.set(label.key, element);
+            }
+            if (element.textContent !== label.text) {
+                element.textContent = label.text;
+            }
+            return element;
+        };
+        class Overlay extends google.maps.OverlayView {
+            onAdd() {
+                this.getPanes()?.markerLayer.appendChild(container);
+            }
+            onRemove() {
+                container.parentElement?.removeChild(container);
+                elements.clear();
+            }
+            /** Re-read the labels and repaint. Call when the value or grouping changes. */
+            refresh() {
+                labels = getLabels();
+                this.draw();
+            }
+            draw() {
+                const projection = this.getProjection();
+                if (!projection) {
+                    return;
+                }
+                const seen = new Set();
+                for (const label of labels) {
+                    seen.add(label.key);
+                    const element = elementFor(label);
+                    const ne = projection.fromLatLngToDivPixel(label.bounds.getNorthEast());
+                    const sw = projection.fromLatLngToDivPixel(label.bounds.getSouthWest());
+                    const centre = projection.fromLatLngToDivPixel(label.bounds.getCenter());
+                    if (!ne || !sw || !centre) {
+                        element.hidden = true;
+                        continue;
+                    }
+                    const visible = isLabelVisibleAtSize(Math.abs(ne.x - sw.x), Math.abs(ne.y - sw.y));
+                    element.hidden = !visible;
+                    if (visible) {
+                        element.style.left = `${centre.x}px`;
+                        element.style.top = `${centre.y}px`;
+                    }
+                }
+                for (const [key, element] of elements) {
+                    if (!seen.has(key)) {
+                        element.parentElement?.removeChild(element);
+                        elements.delete(key);
+                    }
+                }
+            }
+        }
+        this._overlay = new Overlay();
+    }
+    /** Attach to (or detach from, with `null`) a map. */
+    setMap(map) {
+        this._overlay.setMap(map);
+    }
+    /** Re-read the labels and repaint. Call when the value or grouping changes. */
+    refresh() {
+        this._overlay.refresh();
+    }
+    destroy() {
+        this._overlay.setMap(null);
+    }
+}
+
 var MapValueSource;
 (function (MapValueSource) {
     MapValueSource["Input"] = "input";
@@ -386,47 +1051,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
-const FEATURE_STYLE_OPTIONS_DEFAULT = (editingEnabled) => ({
-    clickable: true,
-    // clickable: editingEnabled,
-    visible: true,
-    // zIndex?: number;
-    // cursor?: string;
-    draggable: false,
-    editable: false,
-    fillColor: 'teal',
-    fillOpacity: 0.3,
-    strokeColor: 'blue',
-    strokeOpacity: 1,
-    strokeWeight: 2,
-});
-const FEATURE_STYLE_OPTIONS_SELECTED = (editingEnabled) => ({
-    ...FEATURE_STYLE_OPTIONS_DEFAULT(editingEnabled),
-    draggable: editingEnabled,
-    editable: editingEnabled,
-    fillColor: 'green',
-    fillOpacity: 0.7,
-    strokeColor: 'limegreen',
-    strokeOpacity: 1,
-    strokeWeight: 2,
-});
-const FEATURE_STYLE_OVERRIDE_OPTIONS_HOVERED = (editingEnabled) => ({
-    strokeColor: 'black',
-    strokeOpacity: 1,
-    strokeWeight: 4,
-});
-const SUPPORTED_PROPERTY_STYLE_OPTIONS = [
-    'fillColor',
-    'fillOpacity',
-    'strokeColor',
-    'strokeOpacity',
-    'strokeWeight',
-    'label',
-    'opacity',
-    'icon',
-    'clickable',
-    'visible',
-];
 class GoogleMapsService {
     _mapValueManager;
     _ngZone;
@@ -436,6 +1060,46 @@ class GoogleMapsService {
     _editingEnabledSubject = new BehaviorSubject(true);
     _terraDraw;
     _terraDrawReady = false;
+    // Terra Draw's Google Maps adapter can lose pointer capture at the adapter
+    // level after a completed draw session (terra-draw#710): every click after
+    // that lands on nothing, and a drag pans the map instead of editing.
+    // Recreating the whole `TerraDraw` instance (and its adapter) is the only
+    // thing that restores it. `stopDrawing()` triggers this — EAGERLY, right
+    // when the session ends, not lazily on the next `startDrawing()` — but
+    // only for a session that actually placed a coordinate (see
+    // `_hasPlacedVertex()`): that is the only kind that ever touched the
+    // adapter's pointer capture, so an armed-but-empty session (armed, then
+    // cancelled with zero vertices placed — e.g. by `Escape`, or by
+    // `setEditMode(true)`'s auto-arm getting turned straight back off) does
+    // not need it and does not pay for it.
+    //
+    // Recreating eagerly (rather than deferring to the next `startDrawing()`)
+    // means the new instance's `ready` has every chance to have already fired
+    // by the time the user's NEXT click asks to start a second draw, so that
+    // click is not the one racing the async gap. A `startDrawing()` call that
+    // still arrives before `ready` fires — instance rebuild is fast but not
+    // free — queues itself via `_pendingStartDrawing` below rather than being
+    // dropped, so nothing is lost even in that case.
+    _pendingStartDrawing = false;
+    /**
+     * One-shot suppression for the map `click` listener, armed the instant a
+     * draw finishes (see `_armMapClickSuppression()` for why, and its call
+     * site in `_onDrawFinished()`).
+     *
+     * `domEvent.timeStamp` was tried first, since it is a `DOMHighResTimeStamp`
+     * on the same origin as `performance.now()` and looks like a clean,
+     * delay-free discriminator: a stale click's timestamp should predate the
+     * moment the draw finished. It does not hold up empirically. Driving real
+     * mouse draws against the live Storybook and logging both the map `click`
+     * listener and `stopDrawing()` (see .superpowers/closing-click-report.md)
+     * caught the echo repeatedly, and every single time its `domEvent.timeStamp`
+     * was a few milliseconds AFTER `stopDrawing()`'s own timestamp, not before
+     * — indistinguishable from a genuinely fresh click by timestamp alone.
+     * Google appears to stamp its own synthetic `click` at the moment IT
+     * dispatches, not at the original pointer event's time, so there is no
+     * "stale-looking" timestamp to compare against.
+     */
+    _suppressNextMapClick = false;
     _drawingSubject = new BehaviorSubject(false);
     drawing$ = this._drawingSubject.asObservable();
     _featureContextMenu = null;
@@ -443,6 +1107,47 @@ class GoogleMapsService {
     _baseLatLng;
     _padding;
     _allowDrawingHoleInPolygon = false;
+    _model = new LegacyInteractionModel();
+    _interactionModeSubject = new BehaviorSubject('legacy');
+    interactionMode$ = this._interactionModeSubject.asObservable();
+    _groups;
+    _groupOptions = {};
+    _focusedFeature = null;
+    _styleFn;
+    _labelProperty;
+    _labelsOverlay;
+    _warnedAboutLabelDisagreement = false;
+    _selectionSubject = new BehaviorSubject(null);
+    /**
+     * `distinctUntilChanged` collapses repeated `null`s. Several paths clear the
+     * selection defensively — `setData`, `clearSelection`, the declarative
+     * `selectedGroupKey` application on map-ready — and each would otherwise
+     * emit its own `null` to consumers before the user has touched anything.
+     *
+     * Non-null targets are rebuilt on every change, so reference equality never
+     * suppresses a real one, including re-selecting the same group with a
+     * different focused polygon.
+     */
+    selection$ = this._selectionSubject.pipe(distinctUntilChanged());
+    _hoverSubject = new BehaviorSubject(null);
+    /** Same reasoning as `selection$`; `mouseout` repeats `null` freely. */
+    hover$ = this._hoverSubject.pipe(distinctUntilChanged());
+    /**
+     * The group of the feature a `contextmenu` event last landed on. Kept
+     * distinct from `selection$` even though `allowsContextMenu()` now requires
+     * the right-clicked feature's group to already be the selection — so, for
+     * as long as the menu stays open, the two are provably the same group.
+     * Collapsing onto `selection$` would re-couple "what the menu acts on" to
+     * "whatever is currently selected", which is exactly the coupling this
+     * subject was introduced to break when the menu could still open for a
+     * non-selected group. That rule has already moved twice; keeping this
+     * separate means a future loosening of `allowsContextMenu()` does not have
+     * to re-invent it.
+     */
+    _contextMenuTargetSubject = new BehaviorSubject(null);
+    contextMenuTarget$ = this._contextMenuTargetSubject.asObservable();
+    _editModeSubject = new BehaviorSubject(false);
+    editMode$ = this._editModeSubject.asObservable();
     // TODO: Move to a better place than the map wrapper service.
     _fileInputHandler;
     googleMap;
@@ -459,11 +1164,16 @@ class GoogleMapsService {
         this.mapReady$ = this._mapReadySubject.asObservable();
     }
     ngOnDestroy() {
-        if (this._terraDraw?.enabled) {
-            this._terraDraw.stop();
-        }
-        this._terraDraw = undefined;
+        this._disposeTerraDraw();
         this._drawingSubject.complete();
+        this._selectionSubject.complete();
+        this._hoverSubject.complete();
+        this._contextMenuTargetSubject.complete();
+        this._editModeSubject.complete();
+        this._interactionModeSubject.complete();
+        this._groups = undefined;
+        this._labelsOverlay?.destroy();
+        this._labelsOverlay = undefined;
         this._ngUnsubscribe.next();
         this._ngUnsubscribe.complete();
     }
@@ -497,11 +1207,8 @@ class GoogleMapsService {
             this.googleMap.data.revertStyle();
             if (!enabled) {
                 this.stopDrawing();
-                this.googleMap.data.forEach((f) => {
-                    if (isFeatureSelected(f)) {
-                        setFeatureSelected(f, false);
-                    }
-                });
+                this.setEditMode(false);
+                this.clearSelection();
             }
         }
     }
@@ -527,27 +1234,120 @@ class GoogleMapsService {
                 mapData.remove(f);
             }
         });
+        // Every deleted feature was selected, so nothing should still read as
+        // selected afterward. Re-sync `selection$` and `_focusedFeature` the same
+        // way `deleteFocusedFeature()` and `setData()` already do, rather than
+        // leaving them pointing at a group that no longer exists. In 'legacy'
+        // mode nothing consumes selection$ today, and no remaining feature's raw
+        // selected flag changes here (they were already false), so this is inert
+        // there.
+        this.clearSelection();
     }
-    /** Whether polygon drawing mode is currently active. */
+    /**
+     * Delete every feature in `key`'s group. Backs the grouped "Delete Field"
+     * context-menu item.
+     *
+     * `allowsContextMenu()` now requires the right-clicked feature's group to
+     * already be the selection, so `key` here is always the selected group's
+     * key by the time this runs — making this call equivalent in practice to
+     * `deleteSelection()`. Kept as its own method anyway: it names the thing
+     * the menu item actually acts on (the group the menu opened for) rather
+     * than relying on the coincidence that it currently matches whatever is
+     * selected, a coincidence this design has already stopped being true once
+     * before and could again.
+     */
+    deleteGroup(key) {
+        this._assertInitialized();
+        const mapData = this.googleMap.data;
+        const wasSelected = this._selectionSubject.value?.group.key === key;
+        const focusedInGroup = this._focusedFeature !== null &&
+            this._registry.keyOf(this._focusedFeature) === key;
+        const contextMenuTargetInGroup = this._contextMenuTargetSubject.value?.group.key === key;
+        this._registry.featuresIn(key).forEach((f) => mapData.remove(f));
+        if (wasSelected) {
+            this._applySelection(null, null);
+        }
+        else if (focusedInGroup) {
+            this._focusedFeature = null;
+        }
+        // The whole group is gone, so a context-menu target pointing at it — set
+        // by whichever interaction opened the menu, not necessarily this one — is
+        // now a dangling reference. Only clear it when it actually named this
+        // group; an unrelated still-open menu's target must survive.
+        if (contextMenuTargetInGroup) {
+            this._contextMenuTargetSubject.next(null);
+        }
+    }
+    /**
+     * Whether polygon drawing mode is currently active.
+     *
+     * Reads `_drawingSubject` — set by `startDrawing()`/`stopDrawing()`, which
+     * this service fully controls — rather than asking Terra Draw's own
+     * `getMode()`. The two are kept in lockstep by every call to those two
+     * methods, so this is not a behaviour change; it exists so a stuck Terra
+     * Draw mode can never silently disagree with, and disarm, the rest of this
+     * service's drawing-state bookkeeping (F3's `geometryEditingArmed`
+     * included). `stopDrawing()` still always calls `_terraDraw.setMode('static')`
+     * to make Terra Draw itself release its cursor override and any
+     * in-progress geometry, regardless of which source `isDrawing()` reads.
+     */
     isDrawing() {
-        return this._terraDraw?.getMode() === 'polyline';
+        return this._drawingSubject.value;
     }
     /** Enter polygon drawing mode. */
     startDrawing() {
-        if (!this._terraDraw || !this._terraDrawReady || !this.isEditingEnabled()) {
+        if (!this._terraDraw ||
+            !this.isEditingEnabled() ||
+            // Already drawing: `setMode('polyline')` resets the in-progress path,
+            // so a click that lands here mid-draw (F4) must not re-enter drawing
+            // mode. `onMapClick` already guards on `context.isDrawing` before
+            // calling in, and the map `click` listener guards on `isDrawing()`
+            // before calling the model at all — this is the last line of defence.
+            this.isDrawing()) {
             return;
         }
-        // Clear any selection when entering drawing mode. Otherwise a selected
-        // feature and the shape being drawn both appear selected, reading as one
-        // shape even though they are unrelated.
+        if (!this._terraDrawReady) {
+            // A `TerraDraw` recreate is in flight — either the eager rebuild
+            // `stopDrawing()` kicks off after a real draw session ends (see
+            // `_hasPlacedVertex()`), or, rarely, first-ever init hasn't reported
+            // `ready` yet. Recreation itself is synchronous, but the new
+            // instance's `ready` event is not (see `_createTerraDraw()`), so queue
+            // this call rather than silently dropping the click that made it —
+            // the `ready` handler below finishes entering drawing mode once the
+            // new instance is actually usable.
+            this._pendingStartDrawing = true;
+            return;
+        }
+        this._enterDrawingMode();
+    }
+    /**
+     * Clear any selection when entering drawing mode, but only in 'legacy'
+     * mode. There, a selected feature and the shape being drawn are unrelated,
+     * so leaving the old one visibly selected would read as one shape. In
+     * 'grouped' mode they are related: the selected group is exactly the
+     * target the drawn polygon will join, so it keeps its selected styling —
+     * `GroupedInteractionModel.featureFlags()` disarms its edit handles for
+     * the duration instead (F3), so they don't compete with Terra Draw for
+     * pointer events.
+     *
+     * Split out of `startDrawing()` so a recreate-in-flight (see
+     * `_pendingStartDrawing`) can defer this until the new instance's `ready`
+     * event actually fires, instead of entering drawing mode against an
+     * instance that isn't ready yet.
+     */
+    _enterDrawingMode() {
         this._assertInitialized();
-        this.googleMap.data.forEach((f) => {
-            if (isFeatureSelected(f)) {
-                setFeatureSelected(f, false);
-            }
-        });
-        this._terraDraw.setMode('polyline');
+        if (this._model.id === 'legacy') {
+            this.googleMap.data.forEach((f) => {
+                if (isFeatureSelected(f)) {
+                    setFeatureSelected(f, false);
+                }
+            });
+        }
+        this._terraDraw?.setMode('polyline');
         this._drawingSubject.next(true);
+        this._refreshStyles();
+        this._labelsOverlay?.refresh();
     }
     /**
      * Cancel any in-progress drawing and leave drawing mode. Switching to the
@@ -557,13 +1357,93 @@ class GoogleMapsService {
         if (!this._terraDraw || !this._terraDrawReady) {
             return;
         }
+        const wasDrawing = this.isDrawing();
+        // Read BEFORE setMode('static') below — switching the active mode away
+        // stops it, which resets its own state, so this only means anything
+        // while the polyline mode is still the one active.
+        const placedVertex = wasDrawing && this._hasPlacedVertex();
         this._terraDraw.setMode('static');
         this._drawingSubject.next(false);
+        if (placedVertex) {
+            // A real draw session — one that actually placed a coordinate, and so
+            // actually engaged the adapter's pointer capture — just ended
+            // (finished OR cancelled). That capture is what terra-draw#710 can
+            // leave broken. An armed-but-empty session (armed via a click, or via
+            // setEditMode(true)'s auto-arm, then cancelled — e.g. by Escape —
+            // with zero vertices placed) never touched it and does not need this.
+            //
+            // Recreate EAGERLY, right now, rather than deferring to the next
+            // startDrawing() call: the new instance then has the rest of this
+            // moment, plus however long the user takes to look at what they just
+            // did, to finish coming up — so the click that starts the NEXT draw
+            // does not itself race the async `ready` gap. `startDrawing()`'s own
+            // `!_terraDrawReady` branch (queuing via `_pendingStartDrawing`) is
+            // the safety net for a start that still arrives before `ready` fires.
+            this._recreateTerraDraw();
+        }
+        // Re-arms the selected group's edit handles in 'grouped' mode: nothing
+        // else changes a feature's own properties here, so nothing else would
+        // make Data re-evaluate the style function and pick up
+        // `featureFlags().geometryEditingArmed` no longer being disarmed by
+        // `isDrawing` (F3).
+        this._refreshStyles();
+        this._labelsOverlay?.refresh();
+    }
+    /**
+     * Whether the active Terra Draw mode has actually placed a coordinate.
+     * Terra Draw's own mode state machine transitions from `'started'`
+     * (armed, no coordinate committed yet) to `'drawing'` the instant the
+     * first vertex lands (`TerraDrawPolyLineMode`'s internal `setDrawing()`,
+     * confirmed against `terra-draw`'s own source). Read directly from Terra
+     * Draw's state rather than inferred from this service's own flags, so it
+     * reflects whether the adapter's pointer capture was actually
+     * engaged — the thing terra-draw#710 is actually about — rather than
+     * merely whether this service thought a draw was armed.
+     */
+    _hasPlacedVertex() {
+        return this._terraDraw?.getModeState() === 'drawing';
+    }
+    /**
+     * Stop (if running) and drop the current `TerraDraw` instance. `TerraDraw#
+     * stop()` deregisters its adapter, which for the Google Maps adapter's
+     * `isolatedData: true` mode calls `this._data.setMap(null)` and drops the
+     * reference — so this never leaves an orphaned or duplicate Data layer
+     * behind, across any number of calls.
+     */
+    _disposeTerraDraw() {
+        if (this._terraDraw?.enabled) {
+            this._terraDraw.stop();
+        }
+        this._terraDraw = undefined;
+        this._terraDrawReady = false;
+    }
+    /**
+     * Dispose the current `TerraDraw` instance (and its adapter) and build a
+     * fresh one in its place. This is the terra-draw#710 recovery: the old
+     * instance's listeners die with it (its adapter is deregistered by
+     * `stop()`, so nothing further reaches it), and `_createTerraDraw()` wires
+     * up brand new `ready`/`finish` listeners on the new instance — never the
+     * stale closures from a previous instance.
+     */
+    _recreateTerraDraw() {
+        this._disposeTerraDraw();
+        this._terraDraw = this._createTerraDraw();
     }
     _initTerraDraw() {
         if (notNullOrUndefined(this._terraDraw)) {
             throw Error(`Terra Draw is already initialized.`);
         }
+        this._terraDraw = this._createTerraDraw();
+    }
+    /**
+     * Build and start a new `TerraDraw` instance with its Google Maps adapter,
+     * wiring up this instance's own `ready`/`finish` listeners. Called both by
+     * `_initTerraDraw()` (first-ever init, guarded against running twice) and
+     * by `_recreateTerraDraw()` (every terra-draw#710 recovery afterward) —
+     * the guard against accidental double-init only lives in `_initTerraDraw()`
+     * itself, so recreation is free to call this as many times as needed.
+     */
+    _createTerraDraw() {
         this._assertInitialized();
         // The Google Maps adapter creates an OverlayView on the map; ensure the map
         // element has an id (harmless if one is already present).
@@ -651,6 +1531,25 @@ class GoogleMapsService {
             this._terraDrawReady = true;
             // Start in the resting (non-drawing) mode.
             draw.setMode('static');
+            // A `startDrawing()` call arrived while THIS instance was still
+            // starting up (terra-draw#710 recovery, or plain first-time init) and
+            // queued itself rather than being dropped — finish the job now, but
+            // only if nothing since then made drawing invalid: editing disabled,
+            // somehow already drawing, or — grouped mode only, where edit mode is
+            // its own on/off concept `startDrawing()` itself never re-checks —
+            // edit mode having been turned off while this was in flight. Mirrors
+            // exactly the check `GroupedInteractionModel.onMapClick()` made before
+            // calling in, just re-run after the async gap instead of trusting it
+            // still holds.
+            if (this._pendingStartDrawing) {
+                this._pendingStartDrawing = false;
+                const stillValid = this.isEditingEnabled() &&
+                    !this.isDrawing() &&
+                    (this._model.id !== 'grouped' || this.isEditMode());
+                if (stillValid) {
+                    this._enterDrawingMode();
+                }
+            }
         });
         draw.on('finish', (id, context) => {
             if (context.action !== 'draw') {
@@ -659,7 +1558,7 @@ class GoogleMapsService {
             this._ngZone.run(() => this._onDrawFinished(id));
         });
         draw.start();
-        this._terraDraw = draw;
+        return draw;
     }
     addControl(element, position) {
         this._assertInitialized();
@@ -668,8 +1567,15 @@ class GoogleMapsService {
     async setData(data) {
         this._assertInitialized();
         removeAllFeatures(this.googleMap.data);
+        // Every prior feature is gone, so nothing selected or hovered survives it —
+        // clear both rather than leaving selection$/hover$ referencing removed
+        // features.
+        this.clearSelection();
+        this._hoverSubject.next(null);
+        this._contextMenuTargetSubject.next(null);
         this.googleMap.data.addGeoJson(data);
         this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data), this._padding);
+        this._labelsOverlay?.refresh();
     }
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     reCenterOnFeatures() {
@@ -695,88 +1601,442 @@ class GoogleMapsService {
     getFileInputHandler() {
         return this._fileInputHandler;
     }
-    _initFeatureStyling() {
+    setInteractionMode(mode) {
+        this._model =
+            mode === 'grouped'
+                ? new GroupedInteractionModel()
+                : new LegacyInteractionModel();
+        if (mode !== 'grouped') {
+            this._editModeSubject.next(false);
+        }
+        this._interactionModeSubject.next(mode);
+        this._refreshStyles();
+    }
+    setGroupOptions(options) {
+        this._groupOptions = options;
+        this._groups?.setOptions(options);
+        this._refreshStyles();
+    }
+    /**
+     * Name of the GeoJSON property to render as a per-group label. `undefined`
+     * removes labels entirely (and, until now set, means the overlay is never
+     * even constructed).
+     */
+    setLabelProperty(property) {
+        this._labelProperty = property;
+        if (!this.mapReady) {
+            return;
+        }
+        if (!property) {
+            this._labelsOverlay?.destroy();
+            this._labelsOverlay = undefined;
+            return;
+        }
+        this._ensureLabelsOverlay();
+        this._labelsOverlay?.refresh();
+    }
+    _ensureLabelsOverlay() {
+        this._assertInitialized();
+        if (this._labelsOverlay) {
+            return;
+        }
+        this._labelsOverlay = new MapFeatureLabelsOverlay(() => this._buildLabels());
+        this._labelsOverlay.setMap(this.googleMap);
+    }
+    _buildLabels() {
+        if (this.isDrawing()) {
+            return [];
+        }
+        const property = this._labelProperty;
+        if (!property) {
+            return [];
+        }
         this._assertInitialized();
-        // Disable any selection when clicking the map.
+        const byKey = new Map();
+        this.googleMap.data.forEach((feature) => {
+            const key = this._registry.keyOf(feature);
+            const raw = feature.getProperty(property);
+            const text = raw === null || raw === undefined || raw === '' ? '' : String(raw);
+            const existing = byKey.get(key);
+            const bounds = existing?.bounds ?? new google.maps.LatLngBounds();
+            feature.getGeometry()?.forEachLatLng((latLng) => bounds.extend(latLng));
+            if (!existing) {
+                byKey.set(key, { text, bounds, others: new Set(text ? [text] : []) });
+                return;
+            }
+            if (text) {
+                existing.others.add(text);
+                if (!existing.text) {
+                    existing.text = text;
+                }
+            }
+        });
+        const labels = [];
+        for (const [key, entry] of byKey) {
+            if (entry.others.size > 1) {
+                this._warnAboutLabelDisagreement(key);
+            }
+            if (entry.text) {
+                labels.push({ key, text: entry.text, bounds: entry.bounds });
+            }
+        }
+        return labels;
+    }
+    _warnAboutLabelDisagreement(key) {
+        if (this._warnedAboutLabelDisagreement ||
+            (typeof ngDevMode !== 'undefined' && !ngDevMode)) {
+            return;
+        }
+        this._warnedAboutLabelDisagreement = true;
+        console.warn(`[seam-google-maps] features in group "${key}" carry different ` +
+            `"${this._labelProperty}" values. One is rendered; which is ` +
+            `unspecified. Keeping them consistent is the consumer's business.`);
+    }
+    isEditMode() {
+        return this._editModeSubject.value;
+    }
+    setEditMode(enabled) {
+        if (this._model.id !== 'grouped' || enabled === this.isEditMode()) {
+            return;
+        }
+        if (!enabled) {
+            const wasDrawing = this.isDrawing();
+            this.stopDrawing();
+            if (wasDrawing) {
+                this._reapplyCurrentSelection();
+            }
+        }
+        this._editModeSubject.next(enabled);
+        this._refreshStyles();
+        // Arm drawing immediately when edit mode is turned on with nothing
+        // selected, so the button press itself is what puts Terra Draw in
+        // crosshair mode — matching legacy's button, which calls startDrawing()
+        // directly. Without this, the very next click only arms Terra Draw
+        // (switching the cursor) without placing a vertex, and a SECOND click is
+        // what actually starts the polygon.
         //
-        // TODO: There may be a better way to do this that would be more accurate or
-        // additional events that should be listened to, such as the disabling
-        // selection when the map looses focus.
-        this.googleMap.addListener('click', (even) => {
-            this._assertInitialized();
-            this.googleMap.data.forEach((f) => setFeatureSelected(f, false));
+        // Not when a group is already selected: the user is there to reshape that
+        // group by clicking its vertex/midpoint handles, and arming would make
+        // every click place a vertex instead — including the clicks on OTHER
+        // groups that let the user switch which one is selected. Also not on the
+        // selection merely being CLEARED while already in edit mode (e.g. via
+        // Escape, in handleEscape()): that path never calls setEditMode(), so it
+        // never reaches this arm — deliberately, since that state has to stay
+        // clickable or Escape becomes a trap with no way back to selecting.
+        //
+        // Goes through startDrawing(), the same path a click on open map already
+        // uses, so a Terra Draw recreate still in flight from the PREVIOUS
+        // session (stopDrawing() now kicks it off eagerly — see
+        // _hasPlacedVertex()) is honoured rather than bypassed — a call that
+        // arrives before the new instance's `ready` fires queues itself via
+        // _pendingStartDrawing exactly as it would from that click.
+        if (enabled && this._selectionSubject.value === null) {
+            this.startDrawing();
+        }
+    }
+    /**
+     * Re-run the style callback for every feature.
+     *
+     * Google re-evaluates the callback whenever the style is set, so handing
+     * back the same stored function is enough to repaint after a mode change.
+     */
+    _refreshStyles() {
+        if (!this.mapReady || !this._styleFn) {
+            return;
+        }
+        this._assertInitialized();
+        this.googleMap.data.setStyle(this._styleFn);
+    }
+    get _registry() {
+        this._assertInitialized();
+        if (!this._groups) {
+            this._groups = new FeatureGroupRegistry(this.googleMap.data, this._groupOptions);
+        }
+        return this._groups;
+    }
+    _interactionContext() {
+        return {
+            groups: this._registry,
+            editingEnabled: this.isEditingEnabled(),
+            allowHoles: this._allowDrawingHoleInPolygon,
+            editMode: this.isEditMode(),
+            isDrawing: this.isDrawing(),
+            getSelectedKey: () => this._selectionSubject.value?.group.key ?? null,
+            selectGroup: (key, feature) => this._applySelection(key, feature),
+            startDrawing: () => this.startDrawing(),
+            findContainingFeature: (polygon, groupKey, accept) => this._findContainingFeature(polygon, groupKey, accept),
+        };
+    }
+    /**
+     * Find an existing feature that fully contains `polygon`, restricted to a
+     * group when `groupKey` is given and to features `accept` returns true for
+     * when given. Matches any part of a MultiPolygon.
+     *
+     * `accept` is applied DURING iteration — a rejected candidate is skipped,
+     * not treated as ending the search — so legacy mode's Polygon-only filter
+     * can let a later Polygon candidate still match.
+     */
+    _findContainingFeature(polygon, groupKey, accept) {
+        this._assertInitialized();
+        let match;
+        this.googleMap.data.forEach((feature) => {
+            if (match) {
+                return;
+            }
+            if (groupKey !== undefined &&
+                this._registry.keyOf(feature) !== groupKey) {
+                return;
+            }
+            if (accept && !accept(feature)) {
+                return;
+            }
+            const contains = polygonsFromDataFeature(feature).some((part) => polygonContains(part, polygon));
+            if (contains) {
+                match = feature;
+            }
         });
-        // Determine what the style of the features are.
-        this.googleMap.data.setStyle((feature) => {
-            let opts = FEATURE_STYLE_OPTIONS_DEFAULT(this.isEditingEnabled());
-            const options = getStyleOptionsDefinedByFeature(feature);
-            this._mergeStyleOptions(opts, options ?? {});
-            if (isFeatureSelected(feature)) {
-                const hoverOptions = getHoveredStyleOptionsDefinedByFeature(feature);
-                opts = FEATURE_STYLE_OPTIONS_SELECTED(this.isEditingEnabled());
-                this._mergeStyleOptions(opts, hoverOptions ?? {});
+        return match;
+    }
+    _applySelection(key, feature) {
+        this._assertInitialized();
+        this._focusedFeature = feature;
+        const selectedFeatures = key === null ? [] : this._registry.featuresIn(key);
+        this.googleMap.data.forEach((f) => {
+            const shouldSelect = selectedFeatures.indexOf(f) !== -1;
+            if (isFeatureSelected(f) !== shouldSelect) {
+                setFeatureSelected(f, shouldSelect);
+            }
+        });
+        if (key === null) {
+            this._selectionSubject.next(null);
+            return;
+        }
+        const resolved = this._registry.groupWithSources(key);
+        if (!resolved) {
+            this._selectionSubject.next(null);
+            return;
+        }
+        this._selectionSubject.next(this._targetFor(resolved, feature));
+    }
+    /**
+     * Pair a group with the emitted GeoJSON for one of its `Data.Feature`s.
+     *
+     * Indexes into the returned source array rather than `featuresIn()`, because
+     * a feature with unsupported geometry is dropped from the emitted list and
+     * would shift every index after it.
+     */
+    _targetFor(resolved, feature) {
+        const index = feature ? resolved.sources.indexOf(feature) : -1;
+        return {
+            group: resolved.group,
+            feature: index === -1 ? null : resolved.group.features[index],
+        };
+    }
+    selectGroup(key) {
+        this._assertInitialized();
+        if (key === null) {
+            this._applySelection(null, null);
+            return true;
+        }
+        const features = this._registry.featuresIn(key);
+        if (features.length === 0) {
+            return false;
+        }
+        this._applySelection(key, features[0]);
+        return true;
+    }
+    clearSelection() {
+        this._applySelection(null, null);
+    }
+    getGroups() {
+        return this._registry.groups();
+    }
+    _boundsForGroup(key) {
+        const features = this._registry.featuresIn(key);
+        if (features.length === 0) {
+            return undefined;
+        }
+        const bounds = new google.maps.LatLngBounds();
+        features.forEach((f) => f.getGeometry()?.forEachLatLng((latLng) => bounds.extend(latLng)));
+        return bounds;
+    }
+    fitGroup(key, padding) {
+        this._assertInitialized();
+        const bounds = this._boundsForGroup(key);
+        if (!bounds) {
+            return false;
+        }
+        this.googleMap.fitBounds(bounds, padding ?? this._padding);
+        return true;
+    }
+    panToGroup(key) {
+        this._assertInitialized();
+        const bounds = this._boundsForGroup(key);
+        if (!bounds) {
+            return false;
+        }
+        this.googleMap.panTo(bounds.getCenter());
+        return true;
+    }
+    /**
+     * Delete only the polygon the last interaction landed on.
+     *
+     * Re-applies the selection's group key afterward (with no focused feature)
+     * rather than leaving `selection$` holding a `TheSeamMapGroupTarget` whose
+     * `feature` no longer exists — `_applySelection` naturally clears to null
+     * when the group is now empty, via `groupWithSources`.
+     */
+    deleteFocusedFeature() {
+        this._assertInitialized();
+        const key = this._focusedFeature
+            ? this._registry.keyOf(this._focusedFeature)
+            : (this._selectionSubject.value?.group.key ?? null);
+        const contextMenuTargetInGroup = key !== null && this._contextMenuTargetSubject.value?.group.key === key;
+        if (this._focusedFeature) {
+            this.googleMap.data.remove(this._focusedFeature);
+            this._focusedFeature = null;
+        }
+        else {
+            this.deleteSelection();
+        }
+        this._applySelection(key, null);
+        // Same reasoning as deleteGroup(): a context-menu target naming this
+        // group may now reference a removed feature (or a stale feature count),
+        // so clear it — but only when it actually named this group.
+        if (contextMenuTargetInGroup) {
+            this._contextMenuTargetSubject.next(null);
+        }
+    }
+    /** Escape cascades: cancel a draw, then clear selection, then leave edit mode. */
+    handleEscape() {
+        if (this.isDrawing()) {
+            this.stopDrawing();
+            this._reapplyCurrentSelection();
+            return;
+        }
+        if (this._selectionSubject.value !== null) {
+            this.clearSelection();
+            return;
+        }
+        if (this.isEditMode()) {
+            this.setEditMode(false);
+        }
+    }
+    /**
+     * `startDrawing()` raw-deselects every feature (via `setFeatureSelected`)
+     * without touching `_selectionSubject`, so that `onDrawFinished` can still
+     * read `getSelectedKey()` for the group being drawn into. When a draw ends
+     * WITHOUT producing a finished feature — cancelled by `Escape` or
+     * `setEditMode(false)`, or a `finish` event with no valid geometry — nothing
+     * else re-applies those raw flags, so the map renders the selection as gone
+     * while `selection$`/`getSelectedKey()` still report it. Call this at every
+     * such stopping point to bring the two back in sync.
+     *
+     * Not called from the successful-finish path in `_onDrawFinished`: that
+     * path calls `_applySelection` itself with the new/joined selection, and
+     * doing it here first would only add a redundant, momentarily-stale
+     * `selectionChange` emission ahead of the real one.
+     */
+    _reapplyCurrentSelection() {
+        if (this._model.id !== 'grouped') {
+            return;
+        }
+        const currentKey = this._selectionSubject.value?.group.key ?? null;
+        this._applySelection(currentKey, this._focusedFeature);
+    }
+    _initFeatureStyling() {
+        this._assertInitialized();
+        this.googleMap.addListener('click', () => {
+            // The physical click that closes a polygon can reach this listener
+            // TWICE: once (fast) via Terra Draw's own pointer-driven close
+            // detection — which is what runs `_onDrawFinished()` / `stopDrawing()`
+            // and flips `isDrawing()` false — and, separately, via Google's own
+            // `click` recognition on this map, which this listener is bound to
+            // directly. By the time that second delivery arrives (confirmed
+            // against the live Storybook: consistently a few milliseconds later,
+            // comfortably within one animation frame — see
+            // .superpowers/closing-click-report.md), `isDrawing()` already reads
+            // false, so the guard just below cannot tell it apart from a fresh
+            // click on open map. `_suppressNextMapClick` exists to catch exactly
+            // that echo; see its doc comment for why a `domEvent.timeStamp`
+            // comparison does NOT work here.
+            if (this._suppressNextMapClick) {
+                this._suppressNextMapClick = false;
+                return;
             }
-            return opts;
+            // While drawing, a click on open map is placing a vertex, not a map
+            // click — mirrors the data 'click' listener's guard just below. Without
+            // this, `onMapClick` in 'grouped' mode calls `startDrawing()`, which
+            // calls `setMode('polyline')` again and resets the in-progress path.
+            if (this.isDrawing()) {
+                return;
+            }
+            this._model.onMapClick(this._interactionContext());
+        });
+        this._styleFn = (feature) => computeFeatureStyle(feature, {
+            editingEnabled: this.isEditingEnabled(),
+            ...this._model.featureFlags(feature, this._interactionContext()),
         });
-        // Select a feature when clicked.
+        this.googleMap.data.setStyle(this._styleFn);
         this.googleMap.data.addListener('click', (event) => {
-            this._assertInitialized();
-            // While drawing, a click on an existing polygon is placing a vertex,
-            // not selecting a feature. Selecting here would both steal the click
-            // and leave a misleading selection (see startDrawing's deselect).
+            // While drawing, a click on a polygon is placing a vertex.
             if (this.isDrawing()) {
                 return;
             }
-            setFeatureSelected(event.feature, true);
-            this.googleMap.data.forEach((f) => {
-                if (f !== event.feature && isFeatureSelected(f)) {
-                    setFeatureSelected(f, false);
-                }
-            });
+            this._model.onFeatureClick(event.feature, this._interactionContext());
         });
-        // Set a style on hovered features that can be selected.
         this.googleMap.data.addListener('mouseover', (event) => {
             this._assertInitialized();
             this.googleMap.data.revertStyle();
             if (!this.isDrawing() && !isFeatureSelected(event.feature)) {
                 this.setFeatureHoveredStyleOverride(event.feature);
             }
+            const resolved = this._registry.groupWithSources(this._registry.keyOf(event.feature));
+            this._hoverSubject.next(resolved ? this._targetFor(resolved, event.feature) : null);
         });
-        // Remove any hover styles when mouse moves away.
-        this.googleMap.data.addListener('mouseout', (event) => {
+        this.googleMap.data.addListener('mouseout', () => {
             this._assertInitialized();
             this.googleMap.data.revertStyle();
+            this._hoverSubject.next(null);
         });
     }
     setFeatureHoveredStyleOverride(feature) {
         this._assertInitialized();
-        const overrideOpts = FEATURE_STYLE_OVERRIDE_OPTIONS_HOVERED(this.isEditingEnabled());
-        const hoverOptions = getHoveredStyleOptionsDefinedByFeature(feature);
-        this._mergeStyleOptions(overrideOpts, hoverOptions ?? {});
-        this.googleMap.data.overrideStyle(feature, overrideOpts);
-    }
-    _mergeStyleOptions(options, propertiesStyleOptions) {
-        if (Object.keys(propertiesStyleOptions).length === 0) {
-            return;
-        }
-        for (const opt of SUPPORTED_PROPERTY_STYLE_OPTIONS) {
-            if (Object.prototype.hasOwnProperty.call(propertiesStyleOptions, opt)) {
-                options[opt] = propertiesStyleOptions[opt];
-            }
-        }
+        this.googleMap.data.overrideStyle(feature, computeFeatureHoverStyle(feature));
     }
     _initFeatureChangeListeners() {
         this._assertInitialized();
         createFeatureChangeObservable(this.googleMap.data, this._ngZone)
-            .pipe(switchMap(() => from(this.getGeoJson()).pipe(tap((geoJson) => this._mapValueManager.setValue(geoJson, MapValueSource.FeatureChange)))), takeUntil(this._ngUnsubscribe))
+            .pipe(switchMap(() => from(this.getGeoJson()).pipe(tap((geoJson) => {
+            this._mapValueManager.setValue(geoJson, MapValueSource.FeatureChange);
+            this._labelsOverlay?.refresh();
+        }))), takeUntil(this._ngUnsubscribe))
             .subscribe();
         this.googleMap.data.addListener('contextmenu', (event) => {
-            if (!isFeatureSelected(event.feature)) {
+            if (!this._model.allowsContextMenu(event.feature, this._interactionContext())) {
                 return;
             }
+            this._setContextMenuTarget(event.feature);
             this._openContextMenuForFeature(event.feature, event.latLng ?? undefined);
         });
     }
+    /**
+     * Establish `feature` as what the context menu is about to open for:
+     * `_focusedFeature` (what "Delete Polygon" acts on) and
+     * `contextMenuTarget$` (what "Delete Field" is gated on and acts on) both
+     * follow it. Shared by the `contextmenu` mouse listener and
+     * `openContextMenu()`'s keyboard path so the two establish the target
+     * identically — the menu's target must always be the feature the menu was
+     * opened for, on either path. Before this, only the mouse listener set
+     * `contextMenuTarget$`, so pressing the `ContextMenu` key could open a menu
+     * over whatever was CURRENTLY selected while still offering "Delete Field"
+     * for whatever a PRIOR right-click had targeted.
+     */
+    _setContextMenuTarget(feature) {
+        this._focusedFeature = feature;
+        const resolved = this._registry.groupWithSources(this._registry.keyOf(feature));
+        this._contextMenuTargetSubject.next(resolved ? this._targetFor(resolved, feature) : null);
+    }
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     hasSelectedFeature() {
         this._assertInitialized();
@@ -802,7 +2062,9 @@ class GoogleMapsService {
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     openContextMenu() {
         const feature = this.getSelectedFeature();
-        if (feature) {
+        if (feature &&
+            this._model.allowsContextMenu(feature, this._interactionContext())) {
+            this._setContextMenuTarget(feature);
             this._openContextMenuForFeature(feature);
         }
     }
@@ -843,34 +2105,62 @@ class GoogleMapsService {
                 'Please wait for the API to load before trying to interact with it.');
         }
     }
+    /**
+     * Arm `_suppressNextMapClick`, and guarantee it cannot linger forever if
+     * the echo it exists for never arrives — confirmed to be the normal case
+     * for most real closes, and true of every synthetic/`play()`-driven draw,
+     * per .superpowers/closing-click-report.md. A `setTimeout` would "solve"
+     * this by guessing a safe wall-clock delay, which is exactly the kind of
+     * timing window this fix is trying to avoid introducing. Two
+     * `requestAnimationFrame` callbacks bound the window instead: the observed
+     * echo arrives a few milliseconds after `stopDrawing()`, comfortably
+     * inside a single frame, so two frames is generous headroom without
+     * guessing at a duration — and two real user actions (even fast automated
+     * ones) are never going to land within two animation frames of each other,
+     * so an unrelated later click is never at risk of being swallowed.
+     */
+    _armMapClickSuppression() {
+        this._suppressNextMapClick = true;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this._suppressNextMapClick = false;
+            });
+        });
+    }
     _onDrawFinished(id) {
+        // Armed first, before any other work below — including the early return
+        // for a draw that produced no usable geometry — since the closing
+        // click's late echo (see `_suppressNextMapClick`'s doc comment) can
+        // follow either outcome.
+        this._armMapClickSuppression();
         const feature = this._terraDraw?.getSnapshotFeature(id);
         this._terraDraw?.removeFeatures([id]);
         this.stopDrawing();
         const drawn = feature ? this._toDrawnPolygon(feature.geometry) : undefined;
         if (!drawn || !polygonHasMinDistinctVertices(drawn, 3)) {
+            // A 'finish' event that produced no usable geometry is, for selection
+            // purposes, a cancelled draw — see _reapplyCurrentSelection().
+            this._reapplyCurrentSelection();
             return;
         }
         this._assertInitialized();
-        const exteriorFeature = this._allowDrawingHoleInPolygon
-            ? this._getPossibleExteriorFeature(drawn)
-            : undefined;
-        if (exteriorFeature) {
-            const exteriorPolygon = geoJsonPolygonFromDataFeature(exteriorFeature);
-            if (exteriorPolygon) {
-                const merged = addHoleToPolygon(exteriorPolygon, drawn);
-                // Mutate the EXISTING feature instance to preserve its identity and
-                // properties (see design constraints).
-                exteriorFeature.setGeometry(dataPolygonFromGeoJson(merged));
-                setFeatureSelected(exteriorFeature, true);
-                return;
-            }
+        const context = this._interactionContext();
+        const outcome = this._model.onDrawFinished(drawn, context);
+        if (outcome.kind === 'hole' && applyHoleToFeature(outcome.target, drawn)) {
+            this._applySelection(this._registry.keyOf(outcome.target), outcome.target);
+            this._labelsOverlay?.refresh();
+            return;
         }
         const newFeature = new google.maps.Data.Feature({
             geometry: dataPolygonFromGeoJson(drawn),
         });
         this.googleMap.data.add(newFeature);
-        setFeatureSelected(newFeature, true);
+        const key = outcome.kind === 'newFeature' && outcome.groupKey !== null
+            ? (this._registry.assignKey(newFeature, outcome.groupKey),
+                outcome.groupKey)
+            : this._registry.assignNewKey(newFeature);
+        this._applySelection(key, newFeature);
+        this._labelsOverlay?.refresh();
     }
     /**
      * Normalize a finished Terra Draw geometry into a Polygon. A Polygon (the
@@ -892,25 +2182,6 @@ class GoogleMapsService {
         }
         return undefined;
     }
-    /**
-     * Find an existing Polygon feature that fully contains the drawn polygon, so
-     * the drawing can be applied as a cutout. Returns the existing feature
-     * instance (never a copy).
-     */
-    _getPossibleExteriorFeature(drawn) {
-        this._assertInitialized();
-        let match;
-        this.googleMap.data.forEach((f) => {
-            if (match) {
-                return;
-            }
-            const candidate = geoJsonPolygonFromDataFeature(f);
-            if (candidate && polygonContains(candidate, drawn)) {
-                match = f;
-            }
-        });
-        return match;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GoogleMapsService, deps: [{ token: MapValueManagerService }, { token: i0.NgZone }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GoogleMapsService });
 }
@@ -997,12 +2268,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class TheSeamGoogleMapsDrawButtonControlComponent {
     _googleMaps = inject(GoogleMapsService);
     _data = inject(MAP_CONTROL_DATA, { optional: true });
-    _active = toSignal(this._googleMaps.drawing$, {
+    _mode = toSignal(this._googleMaps.interactionMode$, {
+        initialValue: 'legacy',
+    });
+    _drawing = toSignal(this._googleMaps.drawing$, {
         initialValue: false,
     });
-    label = this._data?.label ?? 'Draw Field';
+    _editMode = toSignal(this._googleMaps.editMode$, {
+        initialValue: false,
+    });
+    /**
+     * In 'legacy' the button toggles drawing directly. In 'grouped' it toggles
+     * edit mode, which is what makes a click on open map begin a drawing.
+     */
+    _active = computed(() => this._mode() === 'grouped' ? this._editMode() : this._drawing(), ...(ngDevMode ? [{ debugName: "_active" }] : []));
+    _label = computed(() => this._data?.label ??
+        (this._mode() === 'grouped' ? 'Edit Fields' : 'Draw Field'), ...(ngDevMode ? [{ debugName: "_label" }] : []));
+    get label() {
+        return this._label();
+    }
     icon = this._data?.icon ?? faDrawPolygon;
     _onClick() {
+        if (this._mode() === 'grouped') {
+            this._googleMaps.setEditMode(!this._googleMaps.isEditMode());
+            return;
+        }
         if (this._googleMaps.isDrawing()) {
             this._googleMaps.stopDrawing();
         }
@@ -1423,6 +2713,7 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
     static ngAcceptInputType_streetViewControlEnabled;
     static ngAcceptInputType_allowDrawingHoleInPolygon;
     static ngAcceptInputType_editingEnabled;
+    static ngAcceptInputType_selectedGroupKey;
     _changeDetectorRef = inject(ChangeDetectorRef);
     _ngUnsubscribe = new Subject();
     _gmApiLoaded;
@@ -1482,7 +2773,32 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
     longitude = -98.570209;
     latitude = 37.633814;
     padding = 0;
+    /**
+     * Which interaction model the map uses.
+     *
+     * `'legacy'` is the single-boundary behaviour this component has always had
+     * and is the default, so existing consumers are unaffected. `'grouped'`
+     * separates selection from geometry editing; see the design doc.
+     */
+    interactionMode = 'legacy';
+    /**
+     * Name of the GeoJSON property that groups features into one logical thing,
+     * such as a field. Features sharing a value select, style, and edit together.
+     * Unset means every feature is its own group.
+     */
+    featureGroupProperty;
+    /** Name of the GeoJSON property holding a group's label text. */
+    featureLabelProperty;
+    /**
+     * Generates the key written to `featureGroupProperty` for a newly drawn
+     * group. Consumer-supplied so the format is one the app recognises.
+     */
+    newGroupKeyFactory;
+    /** Preselect a group. Applied on map-ready and after each external value write. */
+    selectedGroupKey = null;
     mapReady = new EventEmitter();
+    selectionChange = new EventEmitter();
+    featureHoverChange = new EventEmitter();
     featureContextMenu;
     _options = {
         mapTypeControl: true,
@@ -1517,17 +2833,55 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
             if (this._googleMaps.mapReady &&
                 changed.source !== MapValueSource.FeatureChange) {
                 this._googleMaps.setData(changed.value);
+                this._applySelectedGroupKey();
             }
         }), takeUntil(this._ngUnsubscribe))
             .subscribe();
-        this._contextMenuItems$ = this._googleMaps.editingEnabled$.pipe(map((enabled) => {
+        // `skip(1)` drops the value these BehaviorSubject-backed streams replay on
+        // subscribe. An Angular `@Output` should fire when something changes, not
+        // when someone starts listening — without this, a consumer binding
+        // `(selectionChange)` receives a `null` before the user has interacted at
+        // all, which reads as "the selection was cleared" and can wrongly reset a
+        // panel or dirty a form on open. The subscription happens in the
+        // constructor, when the replayed value is always the initial `null`, so
+        // nothing real is ever skipped.
+        this._googleMaps.selection$
+            .pipe(skip(1), tap((selection) => this.selectionChange.emit(selection)), takeUntil(this._ngUnsubscribe))
+            .subscribe();
+        this._googleMaps.hover$
+            .pipe(skip(1), tap((hover) => this.featureHoverChange.emit(hover)), takeUntil(this._ngUnsubscribe))
+            .subscribe();
+        this._contextMenuItems$ = combineLatest([
+            this._googleMaps.editingEnabled$,
+            // The RIGHT-CLICKED feature's group. In 'grouped' mode the menu now
+            // only opens when that group is already the selection (see
+            // `GroupedInteractionModel.allowsContextMenu()`), so this and
+            // `selection$` always agree here — but this is still the one that
+            // names what "Delete Field" is conceptually acting on, independent of
+            // that coincidence. See `contextMenuTarget$`'s doc comment.
+            this._googleMaps.contextMenuTarget$,
+        ]).pipe(map(([enabled, target]) => {
             const items = [];
-            if (enabled) {
+            if (!enabled) {
+                return items;
+            }
+            if (this.interactionMode === 'grouped') {
                 items.push({
-                    label: 'Delete',
-                    action: () => this._onClickDeleteFeature(),
+                    label: 'Delete Polygon',
+                    action: () => this._googleMaps.deleteFocusedFeature(),
                 });
+                if (target && target.group.features.length > 1) {
+                    items.push({
+                        label: 'Delete Field',
+                        action: () => this._googleMaps.deleteGroup(target.group.key),
+                    });
+                }
+                return items;
             }
+            items.push({
+                label: 'Delete',
+                action: () => this._onClickDeleteFeature(),
+            });
             return items;
         }), tap((items) => {
             if (items.length === 0) {
@@ -1547,13 +2901,29 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
             switch (event.code) {
                 case 'Delete':
                     if (this._googleMaps.isEditingEnabled()) {
-                        this._googleMaps.deleteSelection();
+                        if (this.interactionMode === 'grouped') {
+                            this._googleMaps.deleteFocusedFeature();
+                        }
+                        else {
+                            this._googleMaps.deleteSelection();
+                        }
                         event.preventDefault();
                         event.stopPropagation();
                     }
                     break;
                 case 'Escape':
-                    this._googleMaps.stopDrawing();
+                    if (this.interactionMode === 'grouped') {
+                        this._googleMaps.handleEscape();
+                    }
+                    else {
+                        // Legacy parity: `handleEscape()`'s cascade also clears a
+                        // selection, but in legacy mode clicking a feature populates
+                        // the selection, so that would newly deselect it (and drop
+                        // its vertex handles) on a key that previously only cancelled
+                        // a draw. Two apps depend on legacy behaviour unchanged, so
+                        // keep the narrower pre-existing call here.
+                        this._googleMaps.stopDrawing();
+                    }
                     event.preventDefault();
                     event.stopPropagation();
                     break;
@@ -1602,6 +2972,40 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
         if (Object.prototype.hasOwnProperty.call(changes, 'padding')) {
             this._googleMaps.setPadding(this.padding);
         }
+        if (Object.prototype.hasOwnProperty.call(changes, 'interactionMode')) {
+            this._googleMaps.setInteractionMode(this.interactionMode);
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'featureGroupProperty') ||
+            Object.prototype.hasOwnProperty.call(changes, 'newGroupKeyFactory')) {
+            this._googleMaps.setGroupOptions({
+                groupProperty: this.featureGroupProperty,
+                newGroupKeyFactory: this.newGroupKeyFactory,
+            });
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'selectedGroupKey')) {
+            this._applySelectedGroupKey();
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'featureLabelProperty')) {
+            this._googleMaps.setLabelProperty(this.featureLabelProperty);
+        }
+    }
+    _applySelectedGroupKey() {
+        if (!this._googleMaps.mapReady) {
+            return;
+        }
+        if (this.selectedGroupKey === null) {
+            this._googleMaps.clearSelection();
+            return;
+        }
+        if (!this._googleMaps.selectGroup(this.selectedGroupKey)) {
+            // The named group is not in the current value. Clearing keeps the map
+            // and the consumer's expectation from silently diverging.
+            this._googleMaps.clearSelection();
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                console.warn(`[seam-google-maps] selectedGroupKey "${this.selectedGroupKey}" ` +
+                    `matches no group in the current value.`);
+            }
+        }
     }
     writeValue(value) {
         this.value = value;
@@ -1643,6 +3047,13 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
         this.idleListener = this._googleMaps.googleMap?.addListener('idle', () => {
             this._googleMaps.googleMap?.setZoom(this.zoom);
             this._googleMaps.reCenterOnFeatures();
+            this._googleMaps.setInteractionMode(this.interactionMode);
+            this._googleMaps.setGroupOptions({
+                groupProperty: this.featureGroupProperty,
+                newGroupKeyFactory: this.newGroupKeyFactory,
+            });
+            this._googleMaps.setLabelProperty(this.featureLabelProperty);
+            this._applySelectedGroupKey();
             this.mapReady.emit(this._googleMaps.googleMap);
             this.idleListener?.remove();
         });
@@ -1650,8 +3061,54 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
     _onClickDeleteFeature() {
         this._googleMaps.deleteSelection();
     }
+    // The service delegates below guard on `mapReady` themselves, the same way
+    // `_applySelectedGroupKey()` already does for the declarative
+    // `selectedGroupKey` input. Their service-side counterparts call
+    // `_assertInitialized()` and throw when the map hasn't finished loading;
+    // this component's public surface is documented as non-throwing (an
+    // unknown key returns `false` and changes nothing), so "not ready yet"
+    // must behave the same way, not worse.
+    /** Select a group by key. Returns false when no such group exists. */
+    selectGroup(key) {
+        if (!this._googleMaps.mapReady) {
+            return false;
+        }
+        return this._googleMaps.selectGroup(key);
+    }
+    clearSelection() {
+        if (!this._googleMaps.mapReady) {
+            return;
+        }
+        this._googleMaps.clearSelection();
+    }
+    /** Fit the viewport to a group. Returns false when no such group exists. */
+    fitGroup(key, padding) {
+        if (!this._googleMaps.mapReady) {
+            return false;
+        }
+        return this._googleMaps.fitGroup(key, padding);
+    }
+    /** Pan to a group's centre. Returns false when no such group exists. */
+    panToGroup(key) {
+        if (!this._googleMaps.mapReady) {
+            return false;
+        }
+        return this._googleMaps.panToGroup(key);
+    }
+    getGroups() {
+        if (!this._googleMaps.mapReady) {
+            return [];
+        }
+        return this._googleMaps.getGroups();
+    }
+    setEditMode(enabled) {
+        this._googleMaps.setEditMode(enabled);
+    }
+    isEditMode() {
+        return this._googleMaps.isEditMode();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamGoogleMapsComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: GoogleMapsService }, { token: MapValueManagerService }, { token: TheSeamGoogleMapsApiLoader }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamGoogleMapsComponent, isStandalone: false, selector: "seam-google-maps", inputs: { disabled: "disabled", value: "value", tabIndex: "tabIndex", fileDropEnabled: "fileDropEnabled", fileUploadControlEnabled: "fileUploadControlEnabled", fullscreenControlEnabled: "fullscreenControlEnabled", reCenterControlEnabled: "reCenterControlEnabled", mapTypeControlEnabled: "mapTypeControlEnabled", streetViewControlEnabled: "streetViewControlEnabled", allowDrawingHoleInPolygon: "allowDrawingHoleInPolygon", editingEnabled: "editingEnabled", fileImportHandler: "fileImportHandler", zoom: "zoom", longitude: "longitude", latitude: "latitude", padding: "padding" }, outputs: { mapReady: "mapReady" }, host: { properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamGoogleMapsComponent, isStandalone: false, selector: "seam-google-maps", inputs: { disabled: "disabled", value: "value", tabIndex: "tabIndex", fileDropEnabled: "fileDropEnabled", fileUploadControlEnabled: "fileUploadControlEnabled", fullscreenControlEnabled: "fullscreenControlEnabled", reCenterControlEnabled: "reCenterControlEnabled", mapTypeControlEnabled: "mapTypeControlEnabled", streetViewControlEnabled: "streetViewControlEnabled", allowDrawingHoleInPolygon: "allowDrawingHoleInPolygon", editingEnabled: "editingEnabled", fileImportHandler: "fileImportHandler", zoom: "zoom", longitude: "longitude", latitude: "latitude", padding: "padding", interactionMode: "interactionMode", featureGroupProperty: "featureGroupProperty", featureLabelProperty: "featureLabelProperty", newGroupKeyFactory: "newGroupKeyFactory", selectedGroupKey: "selectedGroupKey" }, outputs: { mapReady: "mapReady", selectionChange: "selectionChange", featureHoverChange: "featureHoverChange" }, host: { properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [
             MapValueManagerService,
             GoogleMapsService,
             { provide: MAP_CONTROLS_SERVICE, useClass: GoogleMapsControlsService },
@@ -1660,7 +3117,7 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
                 useExisting: forwardRef(() => TheSeamGoogleMapsComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "featureContextMenu", first: true, predicate: ["featureContextMenu"], descendants: true, read: MenuComponent, static: true }], exportAs: ["seamGoogleMaps"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"editingEnabled\"\n  [def]=\"_drawControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i7.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: TheSeamMapFileDropComponent, selector: "seam-map-file-drop" }, { kind: "component", type: TheSeamMapsControlComponent, selector: "seam-map-control", inputs: ["def"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "featureContextMenu", first: true, predicate: ["featureContextMenu"], descendants: true, read: MenuComponent, static: true }], exportAs: ["seamGoogleMaps"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"editingEnabled\"\n  [def]=\"_drawControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}:host ::ng-deep .seam-map-feature-label{color:#fff;font-size:.75rem;font-weight:600;text-shadow:0 0 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i7.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: TheSeamMapFileDropComponent, selector: "seam-map-file-drop" }, { kind: "component", type: TheSeamMapsControlComponent, selector: "seam-map-control", inputs: ["def"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     InputBoolean()
@@ -1706,7 +3163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => TheSeamGoogleMapsComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMaps', standalone: false, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"editingEnabled\"\n  [def]=\"_drawControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMaps', standalone: false, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n  >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button\n    seamMenuItem\n    *ngFor=\"let item of _contextMenuItems$ | async\"\n    (click)=\"item.action(item)\"\n  >\n    {{ item.label }}\n  </button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control\n  *ngIf=\"fileUploadControlEnabled\"\n  [def]=\"_fileUploadControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"reCenterControlEnabled\"\n  [def]=\"_reCenterControlDef\"\n></seam-map-control>\n<seam-map-control\n  *ngIf=\"editingEnabled\"\n  [def]=\"_drawControlDef\"\n></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}:host ::ng-deep .seam-map-feature-label{color:#fff;font-size:.75rem;font-weight:600;text-shadow:0 0 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7);-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: GoogleMapsService }, { type: MapValueManagerService }, { type: TheSeamGoogleMapsApiLoader }], propDecorators: { value: [{
                 type: Input
             }], tabIndex: [{
@@ -1743,8 +3200,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], padding: [{
                 type: Input
+            }], interactionMode: [{
+                type: Input
+            }], featureGroupProperty: [{
+                type: Input
+            }], featureLabelProperty: [{
+                type: Input
+            }], newGroupKeyFactory: [{
+                type: Input
+            }], selectedGroupKey: [{
+                type: Input
             }], mapReady: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
+            }], featureHoverChange: [{
+                type: Output
             }], featureContextMenu: [{
                 type: ViewChild,
                 args: ['featureContextMenu', { static: true, read: MenuComponent }]
@@ -2325,5 +3796,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppFeaturePropertyName, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, MAP_CONTROLS_SERVICE, MAP_CONTROL_DATA, MapControlRef, MapValueManagerService, MapValueSource, SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS, THESEAM_LAZY_MAPS_API_CONFIG, TheSeamGoogleMapsApiLoader, TheSeamGoogleMapsComponent, TheSeamGoogleMapsModule, TheSeamGoogleMapsPlacesAutoCompleteComponent, TheSeamGoogleMapsPlacesAutocompleteDirective, TheSeamGoogleMapsRecenterButtonControlComponent, TheSeamGoogleMapsUploadButtonControlComponent, TheSeamLazyMapsApiLoader, TheSeamMapFileDropComponent, TheSeamMapsControlComponent, TheSeamNoopGoogleMapsAPILoader, createFeatureChangeObservable, dataPolygonFromGeoJson, geoJsonPolygonFromDataFeature, getBoundsWithAllFeatures, getFeatureBounds, getFeatureCenter, getFeaturesCount, getHoveredStyleOptionsDefinedByFeature, getSelectedStyleOptionsDefinedByFeature, getStyleOptionsDefinedByFeature, isAppFeatureProperty, isFeatureSelected, polygonCoordinates, polygonHasValidPathsLengths, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson };
+export { AppFeaturePropertyName, FEATURE_STYLE_OPTIONS_DEFAULT, FEATURE_STYLE_OPTIONS_SELECTED, FEATURE_STYLE_OVERRIDE_OPTIONS_HOVERED, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, MAP_CONTROLS_SERVICE, MAP_CONTROL_DATA, MapControlRef, MapValueManagerService, MapValueSource, SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS, SUPPORTED_PROPERTY_STYLE_OPTIONS, THESEAM_LAZY_MAPS_API_CONFIG, TheSeamGoogleMapsApiLoader, TheSeamGoogleMapsComponent, TheSeamGoogleMapsModule, TheSeamGoogleMapsPlacesAutoCompleteComponent, TheSeamGoogleMapsPlacesAutocompleteDirective, TheSeamGoogleMapsRecenterButtonControlComponent, TheSeamGoogleMapsUploadButtonControlComponent, TheSeamLazyMapsApiLoader, TheSeamMapFileDropComponent, TheSeamMapsControlComponent, TheSeamNoopGoogleMapsAPILoader, applyHoleToFeature, computeFeatureHoverStyle, computeFeatureStyle, createFeatureChangeObservable, dataMultiPolygonFromGeoJson, dataPolygonFromGeoJson, geoJsonFeatureFromDataFeature, geoJsonPolygonFromDataFeature, getBoundsWithAllFeatures, getFeatureBounds, getFeatureCenter, getFeaturesCount, getHoveredStyleOptionsDefinedByFeature, getSelectedStyleOptionsDefinedByFeature, getStyleOptionsDefinedByFeature, isAppFeatureProperty, isFeatureSelected, mergeStyleOptions, polygonCoordinates, polygonHasValidPathsLengths, polygonsFromDataFeature, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson };
 //# sourceMappingURL=theseam-ui-common-google-maps.mjs.map