@kaufmann-lab/ui 0.1.16 → 0.1.18

package/fesm2022/kaufmann-lab-ui-map.mjs

@@ -0,0 +1,1637 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, output, linkedSignal, Component, signal, computed, booleanAttribute, inject, EnvironmentInjector, DestroyRef, ElementRef, viewChild, afterNextRender, afterRenderEffect, createComponent, ViewEncapsulation } from '@angular/core';
+import { Icon, Button, Dropdown, DropdownPanel, TooltipDirective, Spinner, Text } from '@kaufmann-lab/ui/core';
+import { handleArrowKeyNavigation } from '@kaufmann-lab/ui/shared';
+import { DOCUMENT } from '@angular/common';
+import { Map, AttributionControl, LngLatBounds, Marker } from 'mapbox-gl/esm';
+
+const MAP_CONFIG = new InjectionToken('MAP_CONFIG');
+/**
+ * `provide*` idiomático (mismo patrón que `provideHttpClient`/`provideRouter`)
+ * para inyectar una sola vez en `app.config.ts` de cada app consumidora:
+ *
+ *   providers: [provideMapConfig({ accessToken: 'pk.xxx' })]
+ */
+function provideMapConfig(config) {
+    return { provide: MAP_CONFIG, useValue: config };
+}
+
+const STYLE_BY_THEME = {
+    light: 'mapbox://styles/mapbox/light-v11',
+    dark: 'mapbox://styles/mapbox/dark-v11',
+    streets: 'mapbox://styles/mapbox/streets-v12',
+    satellite: 'mapbox://styles/mapbox/satellite-streets-v12',
+    outdoors: 'mapbox://styles/mapbox/outdoors-v12',
+};
+/** Orden fijo en que `MapThemePicker` lista las 5 opciones — predecible
+ * (siempre el mismo orden en toda pantalla que use el picker), no importa
+ * cuál esté activa. */
+const THEME_ORDER = ['light', 'dark', 'streets', 'satellite', 'outdoors'];
+/** Nombre en español de cada tema, para el `aria-label`/label del control
+ * `mapStyle` y las opciones del picker — anuncia qué tema rige HOY o qué
+ * tema se está por elegir, no solo "otro tema distinto". */
+const THEME_LABEL = {
+    light: 'Claro',
+    dark: 'Oscuro',
+    streets: 'Calles',
+    satellite: 'Satélite',
+    outdoors: 'Relieve',
+};
+
+/**
+ * Contenido del panel flotante que abre el control `mapStyle` de
+ * `kf-map-controls` — vive dentro de un `kf-dropdown-panel` (reusa el
+ * overlay/posicionamiento/click-afuera/Escape de `kf-dropdown`, no
+ * construye ninguno propio). Lista las 5 opciones de `MapTheme` con un
+ * swatch de preview y marca cuál está activa — reemplaza el ciclado de un
+ * solo click que tenía el botón `mapStyle` antes: elegir a la vista es más
+ * predecible que ir adivinando cuántos clicks faltan para el tema que se
+ * quiere.
+ *
+ * Presentacional puro (sin estado propio de NEGOCIO): `MapControls` decide
+ * cuándo mostrarlo y qué hacer con la selección.
+ *
+ *   <kf-map-theme-picker [active]="activeTheme()" (themeSelect)="onSelect($event)" />
+ */
+class MapThemePicker {
+    active = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** No `select` a secas: colisiona con el evento DOM nativo del mismo
+     * nombre (`@angular-eslint/no-output-native`). */
+    themeSelect = output();
+    themes = THEME_ORDER;
+    themeLabel = THEME_LABEL;
+    themeOptions = this.themes.map((theme) => ({ value: theme }));
+    /**
+     * Tema con foco de teclado ROVING (punto 4, a11y) — distinto de `active`
+     * (el tema realmente APLICADO). Arranca en `active()` (mismo criterio de
+     * cualquier roving-tabindex real: el foco inicial cae sobre la opción ya
+     * seleccionada, no siempre la primera) pero navegar con flechas SOLO mueve
+     * este puntero, nunca aplica el tema.
+     *
+     * Por qué no alcanza con pasarle `themeSelect.emit` directo a
+     * `handleArrowKeyNavigation` (como sí hace `kf-tabs`, ver su JSDoc): ahí
+     * "seleccionar" y "mover el foco" son lo mismo (WAI-ARIA Tabs Pattern,
+     * selection-follows-focus). Acá NO — este panel es un menú
+     * (`role="menu"`/`"menuitemradio"`) dentro de un `kf-dropdown` que SE
+     * CIERRA al elegir (ver `onThemeSelect()` en `MapControls`): si cada
+     * flecha emitiera `themeSelect`, la primera flecha cerraría el panel de un
+     * solo golpe y sería imposible recorrer más de una opción por teclado.
+     * Activar sigue siendo Enter/Space/click sobre el `<button>` — nativo del
+     * propio elemento, no necesita wiring propio acá.
+     *
+     * `linkedSignal` (no `signal` a secas): un `input.required()` no tiene
+     * valor todavía en el initializer de un campo de clase — `linkedSignal`
+     * es la forma real de arrancar un signal escribible en el valor de OTRO
+     * signal (acá, `active()`) y a la vez poder pisarlo después a mano (acá,
+     * desde `onKeydown()`) sin que ese valor inicial se pierda ni haga falta
+     * un `effect()` aparte.
+     */
+    focusedTheme = linkedSignal(() => this.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedTheme" }] : /* istanbul ignore next */ []));
+    onKeydown(event) {
+        handleArrowKeyNavigation(event, this.themeOptions, this.focusedTheme(), 'kf-map-theme-picker-item-', (value) => this.focusedTheme.set(value), 'vertical');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapThemePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MapThemePicker, isStandalone: true, selector: "kf-map-theme-picker", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { themeSelect: "themeSelect" }, ngImport: i0, template: "<div class=\"kf-map-theme-picker\" role=\"menu\" aria-label=\"Tema del mapa\">\n  @for (theme of themes; track theme) {\n    <button\n      type=\"button\"\n      class=\"kf-map-theme-picker__item\"\n      [class.kf-map-theme-picker__item--active]=\"theme === active()\"\n      role=\"menuitemradio\"\n      [attr.aria-checked]=\"theme === active()\"\n      [id]=\"'kf-map-theme-picker-item-' + theme\"\n      [attr.tabindex]=\"theme === focusedTheme() ? 0 : -1\"\n      (click)=\"themeSelect.emit(theme)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <span class=\"kf-map-theme-picker__swatch\" [class]=\"'kf-map-theme-picker__swatch--' + theme\">\n        @if (theme === active()) {\n          <span class=\"kf-map-theme-picker__check\">\n            <kf-icon name=\"check\" size=\"sm\" />\n          </span>\n        }\n      </span>\n      <span class=\"kf-map-theme-picker__label\">{{ themeLabel[theme] }}</span>\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.kf-map-theme-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kf-space-sm);padding:var(--kf-space-sm);width:216px}.kf-map-theme-picker__item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;border-radius:var(--kf-radius-sm)}.kf-map-theme-picker__item:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map-theme-picker__label{font-size:.75rem;font-weight:500;color:var(--kf-color-text)}.kf-map-theme-picker__item--active .kf-map-theme-picker__label{font-weight:700;color:var(--kf-color-secondary)}.kf-map-theme-picker__swatch{position:relative;display:block;width:100%;height:64px;border-radius:var(--kf-radius-sm);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--kf-color-border);transition:transform .12s ease,box-shadow .12s ease}.kf-map-theme-picker__item:hover .kf-map-theme-picker__swatch{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--kf-color-border),var(--kf-shadow-sm)}.kf-map-theme-picker__item--active .kf-map-theme-picker__swatch{border-color:var(--kf-color-secondary);box-shadow:none}@media(prefers-reduced-motion:reduce){.kf-map-theme-picker__swatch{transition:none}}.kf-map-theme-picker__check{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--kf-color-secondary);color:var(--kf-color-white);display:flex;align-items:center;justify-content:center;box-shadow:var(--kf-shadow-sm)}.kf-map-theme-picker__swatch--light{background:linear-gradient(90deg,transparent 46%,#cbd5e1 46% 54%,transparent 54%),linear-gradient(#f8fafc,#f8fafc)}.kf-map-theme-picker__swatch--dark{background:linear-gradient(90deg,transparent 46%,#475569 46% 54%,transparent 54%),linear-gradient(#1e293b,#0f172a)}.kf-map-theme-picker__swatch--streets{background:linear-gradient(90deg,transparent 30%,#fca5a5 30% 36%,transparent 36%),linear-gradient(0deg,transparent 60%,#fde68a 60% 68%,transparent 68%),linear-gradient(#fef9ec,#fef3c7)}.kf-map-theme-picker__swatch--satellite{background:radial-gradient(circle at 30% 35%,#4d7c3a 0 22%,transparent 23%),radial-gradient(circle at 70% 65%,#3f6b30 0 18%,transparent 19%),linear-gradient(#2d4a24,#1f3a1a)}.kf-map-theme-picker__swatch--outdoors{background:linear-gradient(90deg,transparent 55%,#86c67c 55% 65%,transparent 65%),linear-gradient(#eafbe7,#cdeec4)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapThemePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-map-theme-picker', imports: [Icon], template: "<div class=\"kf-map-theme-picker\" role=\"menu\" aria-label=\"Tema del mapa\">\n  @for (theme of themes; track theme) {\n    <button\n      type=\"button\"\n      class=\"kf-map-theme-picker__item\"\n      [class.kf-map-theme-picker__item--active]=\"theme === active()\"\n      role=\"menuitemradio\"\n      [attr.aria-checked]=\"theme === active()\"\n      [id]=\"'kf-map-theme-picker-item-' + theme\"\n      [attr.tabindex]=\"theme === focusedTheme() ? 0 : -1\"\n      (click)=\"themeSelect.emit(theme)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <span class=\"kf-map-theme-picker__swatch\" [class]=\"'kf-map-theme-picker__swatch--' + theme\">\n        @if (theme === active()) {\n          <span class=\"kf-map-theme-picker__check\">\n            <kf-icon name=\"check\" size=\"sm\" />\n          </span>\n        }\n      </span>\n      <span class=\"kf-map-theme-picker__label\">{{ themeLabel[theme] }}</span>\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.kf-map-theme-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kf-space-sm);padding:var(--kf-space-sm);width:216px}.kf-map-theme-picker__item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;border-radius:var(--kf-radius-sm)}.kf-map-theme-picker__item:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map-theme-picker__label{font-size:.75rem;font-weight:500;color:var(--kf-color-text)}.kf-map-theme-picker__item--active .kf-map-theme-picker__label{font-weight:700;color:var(--kf-color-secondary)}.kf-map-theme-picker__swatch{position:relative;display:block;width:100%;height:64px;border-radius:var(--kf-radius-sm);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--kf-color-border);transition:transform .12s ease,box-shadow .12s ease}.kf-map-theme-picker__item:hover .kf-map-theme-picker__swatch{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--kf-color-border),var(--kf-shadow-sm)}.kf-map-theme-picker__item--active .kf-map-theme-picker__swatch{border-color:var(--kf-color-secondary);box-shadow:none}@media(prefers-reduced-motion:reduce){.kf-map-theme-picker__swatch{transition:none}}.kf-map-theme-picker__check{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--kf-color-secondary);color:var(--kf-color-white);display:flex;align-items:center;justify-content:center;box-shadow:var(--kf-shadow-sm)}.kf-map-theme-picker__swatch--light{background:linear-gradient(90deg,transparent 46%,#cbd5e1 46% 54%,transparent 54%),linear-gradient(#f8fafc,#f8fafc)}.kf-map-theme-picker__swatch--dark{background:linear-gradient(90deg,transparent 46%,#475569 46% 54%,transparent 54%),linear-gradient(#1e293b,#0f172a)}.kf-map-theme-picker__swatch--streets{background:linear-gradient(90deg,transparent 30%,#fca5a5 30% 36%,transparent 36%),linear-gradient(0deg,transparent 60%,#fde68a 60% 68%,transparent 68%),linear-gradient(#fef9ec,#fef3c7)}.kf-map-theme-picker__swatch--satellite{background:radial-gradient(circle at 30% 35%,#4d7c3a 0 22%,transparent 23%),radial-gradient(circle at 70% 65%,#3f6b30 0 18%,transparent 19%),linear-gradient(#2d4a24,#1f3a1a)}.kf-map-theme-picker__swatch--outdoors{background:linear-gradient(90deg,transparent 55%,#86c67c 55% 65%,transparent 65%),linear-gradient(#eafbe7,#cdeec4)}\n"] }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], themeSelect: [{ type: i0.Output, args: ["themeSelect"] }] } });
+
+/**
+ * Barra de controles flotantes de `kf-map` — pieza puramente presentacional,
+ * sin estado propio: todo lo que sabe se lo pasa `MapView` por input, todo
+ * lo que hace lo reporta por output para que `MapView` (única dueña del
+ * `Map` de Mapbox) decida qué hacer. Vive en la misma carpeta que `MapView`
+ * a propósito (mismo criterio que `DropdownItem`/`DropdownPanel` con
+ * `Dropdown`): el acoplamiento es real, no de nombre — no tiene sentido
+ * fuera de un `kf-map` que la controle.
+ *
+ * Un solo stack vertical, siempre en la esquina superior derecha del mapa
+ * (fijado por `MapView.css`, no acá): es donde ya vivía el `NavigationControl`
+ * de Mapbox que este componente reemplaza, y la atribución obligatoria de
+ * Mapbox (`AttributionControl`, nunca oculta) vive abajo-derecha — un solo
+ * stack evita que dos grupos floten en esquinas distintas y compitan por
+ * espacio en un mapa `size="sm"` de 200px de alto.
+ *
+ * El stack no es una lista continua de botones idénticos: cada grupo lógico
+ * es su propia "card" flotante (`kf-radius-md`+`kf-shadow-md`+fondo blanco,
+ * ver `.kf-map-controls__group` en `MapControls.css`), separadas entre sí
+ * por el `gap` del `:host` — mismo lenguaje ya verificado visualmente en
+ * `route-assistance-monorepo/design/mockups/operations-final.html`
+ * (`.map__ctrl-group`). Orden fijo de arriba a abajo, independiente del
+ * orden en el array `controls` del consumidor (para que dos pantallas que
+ * piden los mismos controles en distinto orden se vean IGUAL):
+ *
+ *   1. zoom — magnificación (par +/-, unido por un divisor, sin gap entre sí).
+ *   2. cámara — recenter + follow (posición de la cámara).
+ *   3. datos — cluster (densidad de los markers, eje distinto de cámara).
+ *   4. chrome — mapStyle + fullscreen (nada del mapa en sí).
+ *
+ * Cada grupo usa `@if` sobre AL MENOS UNO de sus controles (ej. el grupo de
+ * cámara aparece con solo `recenter`, solo `follow`, o ambos) — agregar o
+ * sacar un control nunca reacomoda ni depende de los demás grupos.
+ *
+ * Todos los botones siguen siendo `kf-button[variant=surface][shape=circle]`
+ * — sin tocar `Button.ts`: el fondo/sombra propios de `surface` se anulan
+ * SOLO dentro de un `.kf-map-controls__group` vía una custom property CSS
+ * (ver el comentario junto a esa clase en `MapControls.css` sobre por qué
+ * eso sí atraviesa la encapsulación de Angular y un selector normal no).
+ */
+class MapControls {
+    controls = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    clusterActive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterActive" }] : /* istanbul ignore next */ []));
+    followActive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followActive" }] : /* istanbul ignore next */ []));
+    /** Sin ningún marker `live`, togglear "seguir" no tendría ningún efecto
+     * visible — se deshabilita en vez de dejar un botón que parece no hacer nada. */
+    canFollow = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canFollow" }] : /* istanbul ignore next */ []));
+    isFullscreen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+    /** Nombre en español del tema actualmente resuelto (ej. "Calles"), para
+     * anunciar en el `aria-label` del botón de estilo qué se está por perder,
+     * no solo que "algo" va a cambiar. */
+    styleLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleLabel" }] : /* istanbul ignore next */ []));
+    /** Tema resuelto HOY (`light|dark|...`) — a diferencia de `styleLabel`
+     * (ya traducido a texto), esto es lo que `MapThemePicker` necesita para
+     * marcar la opción activa. */
+    activeTheme = input('dark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTheme" }] : /* istanbul ignore next */ []));
+    zoomIn = output();
+    zoomOut = output();
+    recenter = output();
+    followToggle = output();
+    clusterToggle = output();
+    /** Reemplaza al viejo `styleCycle` (ciclado de un click): ahora el botón
+     * `mapStyle` abre `MapThemePicker` y este output reporta la elección real
+     * hecha ahí. */
+    themeSelect = output();
+    fullscreenToggle = output();
+    /** Visibilidad del panel de temas — estado puramente de UI (abierto o no),
+     * no de negocio: `MapView` no necesita saberlo, así que vive acá y no
+     * rompe el criterio de "sin estado propio" del resto de la clase (ver
+     * JSDoc). Se cierra solo (click afuera/Escape) vía `kf-dropdown`, y acá
+     * además al elegir un tema. */
+    mapStyleOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mapStyleOpen" }] : /* istanbul ignore next */ []));
+    onThemeSelect(theme) {
+        this.themeSelect.emit(theme);
+        this.mapStyleOpen.set(false);
+    }
+    hasZoom = computed(() => this.controls().includes('zoom'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
+    hasRecenter = computed(() => this.controls().includes('recenter'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasRecenter" }] : /* istanbul ignore next */ []));
+    hasFollow = computed(() => this.controls().includes('follow'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFollow" }] : /* istanbul ignore next */ []));
+    hasCluster = computed(() => this.controls().includes('cluster'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasCluster" }] : /* istanbul ignore next */ []));
+    hasMapStyle = computed(() => this.controls().includes('mapStyle'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMapStyle" }] : /* istanbul ignore next */ []));
+    hasFullscreen = computed(() => this.controls().includes('fullscreen'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFullscreen" }] : /* istanbul ignore next */ []));
+    /** El grupo "cámara" (card) aparece con solo `recenter`, solo `follow`, o
+     * ambos — ver JSDoc de la clase sobre por qué cada `@if` de grupo cubre
+     * "al menos uno de sus controles" en vez de un control puntual. */
+    hasCamera = computed(() => this.hasRecenter() || this.hasFollow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasCamera" }] : /* istanbul ignore next */ []));
+    hasChrome = computed(() => this.hasMapStyle() || this.hasFullscreen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChrome" }] : /* istanbul ignore next */ []));
+    /**
+     * Texto corto que revela cada botón en hover/foco vía `[kfTooltip]` (ver
+     * `MapControls.html` — la librería ya resuelve este patrón con
+     * `TooltipDirective`, no con CSS a mano) — la misma acción que ya describe
+     * `ariaLabel`, condensada para caber en una píldora en vez de leerse como
+     * oración completa. No reemplaza `ariaLabel` (que sigue siendo la fuente
+     * real para lectores de pantalla): esto es SOLO visual, para quien puede
+     * ver el mapa pero no sabe qué hace un ícono suelto.
+     */
+    followLabel = computed(() => this.followActive() ? 'Dejar de seguir' : 'Seguir', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followLabel" }] : /* istanbul ignore next */ []));
+    clusterLabel = computed(() => this.clusterActive() ? 'Desagrupar' : 'Agrupar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterLabel" }] : /* istanbul ignore next */ []));
+    mapStyleLabel = computed(() => `Tema: ${this.styleLabel()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mapStyleLabel" }] : /* istanbul ignore next */ []));
+    fullscreenLabel = computed(() => this.isFullscreen() ? 'Salir de pantalla completa' : 'Pantalla completa', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullscreenLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MapControls, isStandalone: true, selector: "kf-map-controls", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, clusterActive: { classPropertyName: "clusterActive", publicName: "clusterActive", isSignal: true, isRequired: false, transformFunction: null }, followActive: { classPropertyName: "followActive", publicName: "followActive", isSignal: true, isRequired: false, transformFunction: null }, canFollow: { classPropertyName: "canFollow", publicName: "canFollow", isSignal: true, isRequired: false, transformFunction: null }, isFullscreen: { classPropertyName: "isFullscreen", publicName: "isFullscreen", isSignal: true, isRequired: false, transformFunction: null }, styleLabel: { classPropertyName: "styleLabel", publicName: "styleLabel", isSignal: true, isRequired: false, transformFunction: null }, activeTheme: { classPropertyName: "activeTheme", publicName: "activeTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", recenter: "recenter", followToggle: "followToggle", clusterToggle: "clusterToggle", themeSelect: "themeSelect", fullscreenToggle: "fullscreenToggle" }, ngImport: i0, template: "@if (hasZoom()) {\n  <div class=\"kf-map-controls__group kf-map-controls__group--zoom\">\n    <div class=\"kf-map-controls__item\" kfTooltip=\"Acercar\" kfTooltipPosition=\"left\">\n      <kf-button\n        variant=\"surface\"\n        shape=\"circle\"\n        size=\"sm\"\n        icon=\"plus\"\n        ariaLabel=\"Acercar\"\n        (click)=\"zoomIn.emit()\"\n      />\n    </div>\n    <div class=\"kf-map-controls__item\" kfTooltip=\"Alejar\" kfTooltipPosition=\"left\">\n      <kf-button\n        variant=\"surface\"\n        shape=\"circle\"\n        size=\"sm\"\n        icon=\"minus\"\n        ariaLabel=\"Alejar\"\n        (click)=\"zoomOut.emit()\"\n      />\n    </div>\n  </div>\n}\n@if (hasCamera()) {\n  <div class=\"kf-map-controls__group\">\n    @if (hasRecenter()) {\n      <div class=\"kf-map-controls__item\" kfTooltip=\"Centrar mapa\" kfTooltipPosition=\"left\">\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          icon=\"crosshair\"\n          ariaLabel=\"Volver a encuadrar el mapa\"\n          (click)=\"recenter.emit()\"\n        />\n      </div>\n    }\n    @if (hasFollow()) {\n      <div class=\"kf-map-controls__item\" [kfTooltip]=\"followLabel()\" kfTooltipPosition=\"left\">\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          icon=\"navigation\"\n          [ariaLabel]=\"followActive() ? 'Dejar de seguir' : 'Seguir posici\u00F3n'\"\n          [ariaPressed]=\"followActive()\"\n          [disabled]=\"!canFollow()\"\n          (click)=\"followToggle.emit()\"\n        />\n      </div>\n    }\n  </div>\n}\n@if (hasCluster()) {\n  <div class=\"kf-map-controls__group\">\n    <div class=\"kf-map-controls__item\" [kfTooltip]=\"clusterLabel()\" kfTooltipPosition=\"left\">\n      <kf-button\n        variant=\"surface\"\n        shape=\"circle\"\n        size=\"sm\"\n        icon=\"grid\"\n        [ariaLabel]=\"clusterActive() ? 'Desagrupar marcadores' : 'Agrupar marcadores cercanos'\"\n        [ariaPressed]=\"clusterActive()\"\n        (click)=\"clusterToggle.emit()\"\n      />\n    </div>\n  </div>\n}\n@if (hasChrome()) {\n  <div class=\"kf-map-controls__group\">\n    @if (hasMapStyle()) {\n      <kf-dropdown\n        class=\"kf-map-controls__item\"\n        [kfTooltip]=\"mapStyleLabel()\"\n        kfTooltipPosition=\"left\"\n        [(open)]=\"mapStyleOpen\"\n      >\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          icon=\"layers\"\n          [ariaLabel]=\"'Cambiar estilo de mapa (actual: ' + styleLabel() + ')'\"\n          [ariaExpanded]=\"mapStyleOpen()\"\n          (click)=\"mapStyleOpen.set(!mapStyleOpen())\"\n        />\n        <kf-dropdown-panel>\n          <kf-map-theme-picker [active]=\"activeTheme()\" (themeSelect)=\"onThemeSelect($event)\" />\n        </kf-dropdown-panel>\n      </kf-dropdown>\n    }\n    @if (hasFullscreen()) {\n      <div class=\"kf-map-controls__item\" [kfTooltip]=\"fullscreenLabel()\" kfTooltipPosition=\"left\">\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          [icon]=\"isFullscreen() ? 'minimize' : 'maximize'\"\n          [ariaLabel]=\"isFullscreen() ? 'Salir de pantalla completa' : 'Pantalla completa'\"\n          [ariaPressed]=\"isFullscreen()\"\n          (click)=\"fullscreenToggle.emit()\"\n        />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-end;gap:var(--kf-space-sm)}.kf-map-controls__item{position:relative;display:flex}.kf-map-controls__group{display:flex;flex-direction:column;gap:2px;background:var(--kf-color-surface);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);padding:3px}.kf-map-controls__group kf-button{--kf-color-surface: transparent;--kf-color-border: transparent;--kf-shadow-md: none}.kf-map-controls__group--zoom{gap:0}.kf-map-controls__group--zoom .kf-map-controls__item+.kf-map-controls__item{border-top:1px solid var(--kf-color-border)}\n"], dependencies: [{ kind: "component", type: Button, selector: "kf-button", inputs: ["variant", "size", "shape", "disabled", "type", "icon", "block", "loading", "ariaLabel", "ariaExpanded", "ariaPressed"] }, { kind: "component", type: Dropdown, selector: "kf-dropdown", inputs: ["open", "anchor"], outputs: ["openChange"] }, { kind: "component", type: DropdownPanel, selector: "kf-dropdown-panel", inputs: ["variant"] }, { kind: "component", type: MapThemePicker, selector: "kf-map-theme-picker", inputs: ["active"], outputs: ["themeSelect"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapControls, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-map-controls', imports: [Button, Dropdown, DropdownPanel, MapThemePicker, TooltipDirective], template: "@if (hasZoom()) {\n  <div class=\"kf-map-controls__group kf-map-controls__group--zoom\">\n    <div class=\"kf-map-controls__item\" kfTooltip=\"Acercar\" kfTooltipPosition=\"left\">\n      <kf-button\n        variant=\"surface\"\n        shape=\"circle\"\n        size=\"sm\"\n        icon=\"plus\"\n        ariaLabel=\"Acercar\"\n        (click)=\"zoomIn.emit()\"\n      />\n    </div>\n    <div class=\"kf-map-controls__item\" kfTooltip=\"Alejar\" kfTooltipPosition=\"left\">\n      <kf-button\n        variant=\"surface\"\n        shape=\"circle\"\n        size=\"sm\"\n        icon=\"minus\"\n        ariaLabel=\"Alejar\"\n        (click)=\"zoomOut.emit()\"\n      />\n    </div>\n  </div>\n}\n@if (hasCamera()) {\n  <div class=\"kf-map-controls__group\">\n    @if (hasRecenter()) {\n      <div class=\"kf-map-controls__item\" kfTooltip=\"Centrar mapa\" kfTooltipPosition=\"left\">\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          icon=\"crosshair\"\n          ariaLabel=\"Volver a encuadrar el mapa\"\n          (click)=\"recenter.emit()\"\n        />\n      </div>\n    }\n    @if (hasFollow()) {\n      <div class=\"kf-map-controls__item\" [kfTooltip]=\"followLabel()\" kfTooltipPosition=\"left\">\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          icon=\"navigation\"\n          [ariaLabel]=\"followActive() ? 'Dejar de seguir' : 'Seguir posici\u00F3n'\"\n          [ariaPressed]=\"followActive()\"\n          [disabled]=\"!canFollow()\"\n          (click)=\"followToggle.emit()\"\n        />\n      </div>\n    }\n  </div>\n}\n@if (hasCluster()) {\n  <div class=\"kf-map-controls__group\">\n    <div class=\"kf-map-controls__item\" [kfTooltip]=\"clusterLabel()\" kfTooltipPosition=\"left\">\n      <kf-button\n        variant=\"surface\"\n        shape=\"circle\"\n        size=\"sm\"\n        icon=\"grid\"\n        [ariaLabel]=\"clusterActive() ? 'Desagrupar marcadores' : 'Agrupar marcadores cercanos'\"\n        [ariaPressed]=\"clusterActive()\"\n        (click)=\"clusterToggle.emit()\"\n      />\n    </div>\n  </div>\n}\n@if (hasChrome()) {\n  <div class=\"kf-map-controls__group\">\n    @if (hasMapStyle()) {\n      <kf-dropdown\n        class=\"kf-map-controls__item\"\n        [kfTooltip]=\"mapStyleLabel()\"\n        kfTooltipPosition=\"left\"\n        [(open)]=\"mapStyleOpen\"\n      >\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          icon=\"layers\"\n          [ariaLabel]=\"'Cambiar estilo de mapa (actual: ' + styleLabel() + ')'\"\n          [ariaExpanded]=\"mapStyleOpen()\"\n          (click)=\"mapStyleOpen.set(!mapStyleOpen())\"\n        />\n        <kf-dropdown-panel>\n          <kf-map-theme-picker [active]=\"activeTheme()\" (themeSelect)=\"onThemeSelect($event)\" />\n        </kf-dropdown-panel>\n      </kf-dropdown>\n    }\n    @if (hasFullscreen()) {\n      <div class=\"kf-map-controls__item\" [kfTooltip]=\"fullscreenLabel()\" kfTooltipPosition=\"left\">\n        <kf-button\n          variant=\"surface\"\n          shape=\"circle\"\n          size=\"sm\"\n          [icon]=\"isFullscreen() ? 'minimize' : 'maximize'\"\n          [ariaLabel]=\"isFullscreen() ? 'Salir de pantalla completa' : 'Pantalla completa'\"\n          [ariaPressed]=\"isFullscreen()\"\n          (click)=\"fullscreenToggle.emit()\"\n        />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-end;gap:var(--kf-space-sm)}.kf-map-controls__item{position:relative;display:flex}.kf-map-controls__group{display:flex;flex-direction:column;gap:2px;background:var(--kf-color-surface);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);padding:3px}.kf-map-controls__group kf-button{--kf-color-surface: transparent;--kf-color-border: transparent;--kf-shadow-md: none}.kf-map-controls__group--zoom{gap:0}.kf-map-controls__group--zoom .kf-map-controls__item+.kf-map-controls__item{border-top:1px solid var(--kf-color-border)}\n"] }]
+        }], propDecorators: { controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], clusterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterActive", required: false }] }], followActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "followActive", required: false }] }], canFollow: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFollow", required: false }] }], isFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullscreen", required: false }] }], styleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleLabel", required: false }] }], activeTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTheme", required: false }] }], zoomIn: [{ type: i0.Output, args: ["zoomIn"] }], zoomOut: [{ type: i0.Output, args: ["zoomOut"] }], recenter: [{ type: i0.Output, args: ["recenter"] }], followToggle: [{ type: i0.Output, args: ["followToggle"] }], clusterToggle: [{ type: i0.Output, args: ["clusterToggle"] }], themeSelect: [{ type: i0.Output, args: ["themeSelect"] }], fullscreenToggle: [{ type: i0.Output, args: ["fullscreenToggle"] }] } });
+
+/// <reference types="geojson" />
+// `tsconfig.lib.json` fija `types: []` a propósito (no filtrar globals
+// ambientales a la librería publicada) — esta referencia explícita es la
+// única forma de resolver el namespace `GeoJSON` que usan los tipos de
+// `mapbox-gl` (`addSource({ type: 'geojson', data: ... })`) sin relajar esa
+// restricción para el resto del archivo.
+const DEFAULT_CENTER = { lat: 0, lng: 0 };
+const DEFAULT_ZOOM = 2;
+const FIT_BOUNDS_PADDING_PX = 48;
+const FIT_BOUNDS_MAX_ZOOM = 16;
+const ROUTE_SOURCE_ID = 'kf-map-route';
+const ROUTE_LAYER_ID = 'kf-map-route-line';
+/**
+ * Duraciones de cámara — todas pasan por `cameraDuration()`, que las
+ * colapsa a 0 si el usuario pidió `prefers-reduced-motion: reduce` (ver
+ * ese método). `INITIAL_FIT` es más larga que `RECENTER`: la entrada
+ * inicial es la primera impresión del mapa (vale la pena un momento
+ * "cinematográfico"); un recentrado manual es una corrección puntual que
+ * el usuario ya pidió a propósito, no hace falta hacerlo esperar de más.
+ */
+const CAMERA_DURATION_MS = {
+    initialFit: 900,
+    recenter: 700,
+    zoomStep: 250,
+};
+/**
+ * Umbral de "caja degenerada" para `fitBounds()`, en grados — no en metros,
+ * para no necesitar trigonometría (la longitud de un grado de longitud
+ * varía con la latitud; la de un grado de latitud no). 0.0005° equivale a
+ * ~55 m en el ecuador de lado a lado, más chico en longitud a medida que la
+ * latitud crece. Se eligió para cubrir el caso real que rompía el encuadre
+ * (un solo marker, o vehículo+destino en el mismo sitio con dos fixes de
+ * GPS ligeramente distintos) sin tragarse una ruta corta real: cualquier
+ * separación de más de ~50 m entre los puntos sigue entrando a `fitBounds`
+ * normal.
+ */
+const DEGENERATE_BOUNDS_THRESHOLD_DEG = 0.0005;
+/** Zoom que reemplaza a `fitBounds()` en el caso degenerado — suficiente
+ * para ver contexto real de calle alrededor de un único punto. */
+const SINGLE_POINT_ZOOM = 15;
+const MARKER_CLUSTER_SOURCE_ID = 'kf-map-markers-cluster';
+const CLUSTER_CIRCLE_LAYER_ID = 'kf-map-cluster-circle';
+const CLUSTER_COUNT_LAYER_ID = 'kf-map-cluster-count';
+/**
+ * Radio (px) del marker DOM de cluster (ver `addClusterMarkerToMap()`) —
+ * MISMOS umbrales que el `'circle-radius'` de `CLUSTER_CIRCLE_LAYER_ID`
+ * (`step(point_count, 14, 10, 18, 50, 22)`): el marker DOM tiene que cubrir
+ * exactamente el mismo área que la capa WebGL que pinta debajo, para que el
+ * hit target de mouse/teclado calce con lo que el usuario ve.
+ */
+function clusterMarkerRadiusPx(pointCount) {
+    if (pointCount >= 50) {
+        return 22;
+    }
+    if (pointCount >= 10) {
+        return 18;
+    }
+    return 14;
+}
+/** Margen mínimo (px) contra el borde del contenedor del mapa antes de
+ * recortar/voltear un popup (marker o cluster) — ver `positionFloatingPopup()`. */
+const POPUP_EDGE_MARGIN_PX = 8;
+/** Separación (px) entre el punto de pantalla de un cluster y su popup
+ * resumen — equivalente al `calc(100% + 12px)` que ya usa el popup de
+ * marker individual vía CSS, pero acá en JS porque el popup de cluster no
+ * es hijo de ningún elemento posicionado por CSS (ver `renderClusterPopup()`). */
+const CLUSTER_POPUP_GAP_PX = 16;
+/** Duración de la corrección de cámara en modo `follow` — bastante corta
+ * para sentirse "pegada" al marker, sin el salto seco de `jumpTo`. */
+const FOLLOW_EASE_DURATION_MS = 400;
+/** Ver el comentario junto a `markReady` en `initializeMap()` — respaldo
+ * para no depender exclusivamente de `'load'`, que en al menos una cadena
+ * real verificada nunca llega a disparar pese a que el mapa carga bien. */
+const MAP_READY_FALLBACK_TIMEOUT_MS = 4000;
+/**
+ * Mapa con motor real de Mapbox GL JS — decisión de producto ya cerrada
+ * (comparación de 6 proveedores). El access token vive a nivel app, no por
+ * uso: ver `provideMapConfig` en `map-config.ts` (mismo criterio que
+ * `API_CONFIG` de `packages/api-client`), inyectado una vez en
+ * `app.config.ts` de cada app consumidora.
+ *
+ * `size` (`sm|md|lg` alturas fijas, `full` llena el contenedor padre) NO
+ * hace step-down por viewport como `kf-page-header`: ese mecanismo existe
+ * ahí porque un tamaño de FUENTE fijo se corta en pantallas chicas; una
+ * caja de mapa no tiene ese problema — el canvas de Mapbox ya es
+ * responsive dentro de cualquier tamaño de contenedor. Lo que sí hace
+ * falta (y que el header no necesita) es un `ResizeObserver` real: Mapbox
+ * no se entera solo de que su contenedor cambió de tamaño (un layout que
+ * colapsa un sidebar, un cambio de orientación) — hay que llamar
+ * `map.resize()` a mano cuando el contenedor cambia (mismo motivo por el
+ * que `fullscreenchange` también llama `resize()`, ver `onFullscreenChange`).
+ *
+ * `variant` es un eje ortogonal a `size` (mismo criterio que `variant` +
+ * `tone` en `kf-badge`): `interactive` trae la posibilidad de controles
+ * flotantes reales (ver `controls`); `preview` (`interactive: false` de
+ * Mapbox GL) es para una card de lista, sin chrome y sin foco por teclado —
+ * no hace nada al recibir foco, así que no debe formar parte del tab order,
+ * y por eso NUNCA renderiza `controls` aunque el consumidor los pida:
+ * togglear "seguir" o abrir pantalla completa no tiene sentido en un mapa
+ * que no acepta interacción. Ninguna de las dos variantes oculta la
+ * atribución: es requisito de licencia de Mapbox, no cosmético.
+ *
+ * `theme` (`light|dark|streets|satellite|outdoors`) resuelve el estilo real
+ * de Mapbox — eje totalmente distinto del `[data-theme]` de
+ * `tokens/themes/*` (paleta de marca de la librería): ninguno de los 5
+ * temas de `tokens/` es oscuro todavía, así que no hay ninguna señal real
+ * de la que derivar un default "según el tema de marca activo" — construir
+ * esa detección ahora sería simular una señal que no existe.
+ *
+ * `controls` (`MapControlKind[]`, default `[]`) es siempre opt-in: un mapa
+ * sin `controls` no dibuja ningún botón flotante, ni siquiera en
+ * `interactive` (antes de esta versión, `interactive` agregaba el
+ * `NavigationControl` default de Mapbox gratis — se sacó a propósito: era
+ * el look genérico de Mapbox, no el de esta librería, exactamente la queja
+ * que motivó este rediseño. Un consumidor que quería esos botones de zoom
+ * ahora los pide con `[controls]="['zoom']"`). Cada kind es una pieza
+ * independiente entre sí (ver `MapControls.ts` para el detalle de cada
+ * una) — agregar una no reacomoda ni depende de las demás.
+ *
+ *   <kf-map label="Ubicación del vehículo y del destino" [markers]="markers()" />
+ *   <kf-map size="sm" variant="preview" label="Vista previa de la ruta" [route]="route()" />
+ *   <kf-map label="Flota completa" [markers]="fleet()" [controls]="['zoom', 'recenter', 'cluster', 'follow']" />
+ */
+class MapView {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('interactive', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    markers = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
+    route = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "route" }] : /* istanbul ignore next */ []));
+    fitToMarkers = input(true, { ...(ngDevMode ? { debugName: "fitToMarkers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    center = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "center" }] : /* istanbul ignore next */ []));
+    zoom = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "zoom" }] : /* istanbul ignore next */ []));
+    /**
+     * Default `'streets'`, no `'light'` ni `'dark'`. `'dark'` se probó
+     * primero por coherencia con la paleta navy de marca, pero una
+     * verificación visual real sobre una ubicación de servicio típica (una
+     * faena/zona rural, no un centro urbano denso) mostró el problema real:
+     * `dark-v11` casi no tiene datos que pintar fuera de ciudades grandes —
+     * el mapa se ve prácticamente todo negro, ilegible, exactamente donde
+     * más importa que se lea bien (ubicaciones de terreno, no de oficina).
+     * `'streets'` SIEMPRE tiene cartografía base visible (calles, nombres,
+     * uso de suelo) sin importar la densidad del lugar — es el único de los
+     * 5 estilos sin ese riesgo. Sigue siendo overrideable por el consumidor. */
+    theme = input('streets', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    /** Controles flotantes a mostrar — ver JSDoc de la clase y `MapControls.ts`. */
+    controls = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /**
+     * Descripción accesible real del mapa — el `<div>` donde Mapbox renderiza
+     * su canvas queda vacío de semántica para un lector de pantalla. Requerido
+     * a propósito: un default genérico ("Mapa") no dice qué está mostrando
+     * ESTE mapa; cada consumidor conoce su propio caso real (ej. "Ubicación
+     * del vehículo y del destino").
+     */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Se emite al hacer click sobre un marker que declaró `id` (ver JSDoc de
+     * `MapMarker.id`) — un marker SIN `id` no es clickeable, no emite nada.
+     * No dispara en modo `cluster` (los markers pasan a ser capas WebGL sin
+     * DOM propio donde colgar un listener) ni en `variant="preview"` (el
+     * mapa entero no es interactivo ahí). */
+    markerSelect = output();
+    /** Se emite al clickear un botón de `MapMarker.popup.actions` — ver el
+     * JSDoc de `popup` para por qué reporta `actionKey` (nunca el `label`) y
+     * por qué el click no dispara además `markerSelect`. */
+    markerAction = output();
+    mapConfig = inject(MAP_CONFIG);
+    environmentInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    hostElementRef = inject((ElementRef));
+    containerRef = viewChild.required('mapContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerRef" }] : /* istanbul ignore next */ []));
+    /** `preview` no es foco-navegable ni se anuncia como región interactiva. */
+    isPreview = computed(() => this.variant() === 'preview', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreview" }] : /* istanbul ignore next */ []));
+    containerRole = computed(() => (this.isPreview() ? 'img' : 'region'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerRole" }] : /* istanbul ignore next */ []));
+    /** Ver estado de carga/error real, más abajo (`status`). */
+    status = signal('loading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Elección manual del consumidor final vía el control `mapStyle` — pisa
+     * `theme()` de forma sostenida (no vuelve a `theme()` sola) hasta que se
+     * destruya este `kf-map`; ver `resolvedTheme()`. */
+    userTheme = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userTheme" }] : /* istanbul ignore next */ []));
+    styleLabel = computed(() => THEME_LABEL[this.resolvedTheme()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleLabel" }] : /* istanbul ignore next */ []));
+    /** Igual que `resolvedTheme()` pero público para el template — lo necesita
+     * `MapThemePicker` (vía `MapControls`) para marcar la opción activa. */
+    activeTheme = computed(() => this.resolvedTheme(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTheme" }] : /* istanbul ignore next */ []));
+    clusterActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterActive" }] : /* istanbul ignore next */ []));
+    followActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followActive" }] : /* istanbul ignore next */ []));
+    hasLiveMarker = computed(() => this.markers().some((marker) => marker.live), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLiveMarker" }] : /* istanbul ignore next */ []));
+    isFullscreen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+    /** Sin estilo de marca propio (Mapbox Studio) no hay nada que ciclar con
+     * `mapStyle` — se filtra en vez de dejar un botón que no cambiaría nada. */
+    effectiveControls = computed(() => {
+        const requested = this.controls();
+        return this.mapConfig.styleUrl ? requested.filter((kind) => kind !== 'mapStyle') : requested;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveControls" }] : /* istanbul ignore next */ []));
+    showControls = computed(() => this.variant() === 'interactive' && this.effectiveControls().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
+    map = null;
+    /** `extraIconRefs`: íconos de las acciones del popup (ver `buildMarkerPopup()`)
+     * — se crean con `createComponent()` igual que `iconRef` (el pin), así que
+     * necesitan el mismo `.destroy()` en `clearMarkers()`. */
+    markerHandles = [];
+    /** Markers DOM reales sobre cada cluster real (punto 1, a11y) — separados
+     * de `markerHandles` porque se reconstruyen en su propio ciclo (ver
+     * `syncClusterMarkers()`) y no tienen `iconRef` propio (sin `kf-icon`
+     * adentro, ver JSDoc de `addClusterMarkerToMap()`). */
+    clusterMarkerHandles = [];
+    resizeObserver = null;
+    currentStyle = '';
+    mapReady = false;
+    /** Popup resumen de un cluster real (ver `renderClusterPopup()`) — a
+     * diferencia del popup de marker individual (siempre en el DOM, mostrado
+     * por CSS `:hover`/`:focus-within`), este se crea/destruye a demanda: no
+     * cuelga de ningún elemento con estado hover propio, lo abre un click
+     * sobre una capa WebGL sin DOM. */
+    clusterPopupElement = null;
+    clusterPopupIconRefs = [];
+    /** Coordenadas del cluster abierto — necesarias para volver a proyectar
+     * contra pantalla en cada `'move'` (ver `repositionClusterPopup()`); el
+     * cluster en sí no se mueve, pero su posición EN PANTALLA sí cuando se
+     * hace pan. */
+    clusterPopupCoordinates = null;
+    onFullscreenChange = () => {
+        this.isFullscreen.set(this.document.fullscreenElement === this.hostElementRef.nativeElement);
+        // El propio contenedor cambia de tamaño al entrar/salir de pantalla
+        // completa — mismo motivo que el `ResizeObserver` de más abajo, pero
+        // ESTE cambio de tamaño no pasa por él (la Fullscreen API no dispara
+        // un resize de layout normal en todos los navegadores).
+        this.map?.resize();
+    };
+    constructor() {
+        afterNextRender(() => this.initializeMap());
+        this.document.addEventListener('fullscreenchange', this.onFullscreenChange);
+        // Reactivo a `markers`/`route`/`fitToMarkers`/`center`/`zoom`/`theme`/
+        // `controls`/`clusterActive`/`followActive` — el primer sync real ya lo
+        // hace `initializeMap()` (ver comentario ahí sobre por qué la ruta NO se
+        // sincroniza en esa primera pasada), así que este effect solo necesita
+        // reaccionar a cambios posteriores.
+        afterRenderEffect(() => {
+            const style = this.resolvedStyle();
+            if (!this.map) {
+                return;
+            }
+            if (this.mapReady && style !== this.currentStyle) {
+                this.currentStyle = style;
+                this.map.setStyle(style);
+            }
+            this.syncMarkers();
+            // `setStyle()` recién dispara `'style.load'` de forma asíncrona (ver
+            // el listener en `initializeMap`), que es quien repone la ruta (y el
+            // cluster, si está activo) en ese caso. Este llamado cubre el resto:
+            // un cambio de `route()`/`markers()` sin cambio de `theme()` no
+            // dispara ningún evento de Mapbox por sí solo — sin esto, la cámara
+            // se reencuadraría pero los datos dibujados quedarían viejos.
+            // `syncRoute()` ya revisa `isStyleLoaded()`, así que no hace nada si
+            // el estilo está a mitad de cargar.
+            this.syncRoute();
+            this.syncCamera();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.document.removeEventListener('fullscreenchange', this.onFullscreenChange);
+            this.resizeObserver?.disconnect();
+            this.clearMarkers();
+            this.clearClusterMarkers();
+            this.closeClusterPopup();
+            this.map?.remove();
+            this.map = null;
+        });
+    }
+    // Ex-`assignWorkerClass()`: el bundle UMD de `mapbox-gl` (`from 'mapbox-gl'`
+    // sin sufijo) arma su Web Worker serializando el código del worker como
+    // string y cargándolo por Blob URL — un bundler ESM-nativo (esbuild, el
+    // builder `application` de Angular) minifica ESE string también, sin saber
+    // que corre verbatim en otro contexto, y el worker termina con un
+    // identificador roto en runtime (`ReferenceError: <letra> is not defined`,
+    // ver mapbox/mapbox-gl-js#13700 y angular/angular-cli#27378). El método que
+    // vivía acá reemplazaba ese mecanismo a mano, reasignando
+    // `mapboxgl.workerClass` a un `Worker` real armado con
+    // `new Worker(new URL('./mapbox-gl-csp.worker.js', import.meta.url), {type:
+    // 'module'})`.
+    //
+    // Al migrar a `mapbox-gl/esm` (ver el import de arriba) ese fix quedó
+    // obsoleto, no solo innecesario: `mapbox-gl/esm` NO expone `workerClass` en
+    // absoluto (no hay objeto `mapboxgl` de import default sobre el cual
+    // asignarlo — confirmado leyendo `dist/esm/core.js`, sin ese identificador
+    // en ningún export). Su propio mecanismo interno de carga de worker
+    // (`dist/esm/core.js`, función que arma el pool de workers) YA usa
+    // exactamente el mismo patrón literal `new Worker(new URL("worker.js",
+    // import.meta.url), {type: "module"})` que este método replicaba a mano
+    // para el bundle UMD — es decir, la ESM build de `mapbox-gl` ya resuelve
+    // este problema nativamente, con su propio `dist/esm/worker.js` al lado de
+    // `core.js`. No hace falta (ni es posible) reemplazar nada.
+    //
+    // Sin verificar con un browser real todavía (sin token de Mapbox ni página
+    // de `kf-map` en el playground de este repo) que ese worker nativo carga
+    // correctamente una vez re-bundleado por el build de un consumidor real
+    // (`route-assistance-monorepo`) — pendiente de QA manual antes de dar esto
+    // por cerrado en ese frente. `mapbox-gl-csp.worker.js` y su entrada en
+    // `ng-package.json` se retiraron junto con este método: nada los importa ya.
+    initializeMap() {
+        const container = this.containerRef().nativeElement;
+        const style = this.resolvedStyle();
+        this.map = new Map({
+            container,
+            accessToken: this.mapConfig.accessToken,
+            style,
+            interactive: this.variant() === 'interactive',
+            // Se agrega a mano más abajo, con `compact: false`: la atribución de
+            // Mapbox tiene que quedar SIEMPRE visible (requisito de licencia, no
+            // cosmético) — el default `compact` la colapsa detrás de un ícono en
+            // contenedores angostos, exactamente lo que no puede pasar acá.
+            attributionControl: false,
+            center: this.toLngLat(this.center() ?? DEFAULT_CENTER),
+            zoom: this.zoom() ?? DEFAULT_ZOOM,
+            // Mapbox GL JS v3 elige la proyección "globe" (esfera 3D con atmósfera)
+            // sola a partir de cierto zoom bajo, incluso con estilos clásicos como
+            // `streets-v12` — no hace falta el estilo "Standard" para que pase. El
+            // constructor arranca siempre en `DEFAULT_ZOOM` (2) ANTES de que
+            // `fitBounds()` corra (recién en `markReady()`), así que sin esto el
+            // primer frame real que ve el usuario es ese globo, con los markers
+            // amontonados cerca de un borde — el bug real reportado ("se ve como un
+            // globo terráqueo"). `'mercator'` fija la proyección clásica sin
+            // importar el zoom en ningún momento del ciclo de vida del mapa.
+            projection: 'mercator',
+        });
+        this.currentStyle = style;
+        this.mapReady = true;
+        this.map.addControl(new AttributionControl({ compact: false }));
+        // Ya no se agrega `NavigationControl` (ni ningún otro control default de
+        // Mapbox): ver JSDoc de `controls` en la clase — el chrome flotante de
+        // esta librería es siempre `kf-map-controls`, opt-in, nunca el look
+        // genérico de Mapbox.
+        // `load` marca el mapa como visualmente listo (primer frame con todas
+        // sus fuentes cargadas) — DISTINTO de `mapReady` de arriba, que solo
+        // significa "el objeto `Map` ya existe" y gatea `setStyle()`. Mientras
+        // no llega, el overlay de `status()` cubre el canvas a medio pintar.
+        //
+        // `markReady` se cablea a `load` PERO también a un timeout de respaldo:
+        // en una verificación real (Chromium headless vía Playwright, mismo
+        // navegador que corre cualquier E2E de los consumidores) se comprobó
+        // que `render`/`data`/`sourcedata`/`styledata` disparan con normalidad
+        // — las tiles llegan y el mapa pinta de verdad — pero `load` (y `idle`)
+        // no llegan a disparar nunca en esa cadena concreta. No se pudo aislar
+        // la causa raíz con certeza en su momento (sospecha original: alguna
+        // interacción puntual con el `workerClass` custom que este componente
+        // asignaba a mano sobre el bundle UMD de `mapbox-gl`, ver el comentario
+        // sobre la migración a `mapbox-gl/esm` más arriba en `initializeMap()`).
+        // Esa asignación custom ya no existe — pero la sospecha nunca se confirmó
+        // con certeza, así que el fallback se mantiene sin cambios: no hay
+        // evidencia todavía (falta QA manual en un browser real) de que la migración
+        // haya resuelto esto, y depender SOLO de `load` deja al usuario con un
+        // spinner infinito sobre un mapa que en los hechos ya funciona — un
+        // fallback acotado es la salida segura sin importar cuál sea la causa real.
+        const markReady = () => {
+            if (this.status() === 'loading') {
+                this.status.set('ready');
+                // `fitBounds()` (dentro de `syncCamera()`) calcula el zoom de
+                // encuadre en base al tamaño ACTUAL del canvas de Mapbox — pero ese
+                // canvas se creó con el contenedor todavía detrás del overlay de
+                // carga (`display` normal, sin `hidden`, pero en layouts flex/grid
+                // que recién terminan de asentarse el tamaño real puede no estar
+                // listo todavía en este punto del ciclo). Un tamaño transitorio le
+                // da a Mapbox un ancho/alto de referencia equivocado y el zoom
+                // resultante queda mal. `resize()` SÍNCRONO justo antes de encuadrar
+                // fuerza a Mapbox a releer el tamaño real del contenedor primero —
+                // mismo mecanismo que ya usa el `ResizeObserver` de más abajo para
+                // cambios posteriores, aplicado acá una vez, a mano, en el momento
+                // exacto que más importa: el primer encuadre real.
+                this.map?.resize();
+                // Recién ACÁ el canvas queda visible detrás del overlay — es el
+                // único momento en que animar la cámara tiene sentido. Antes este
+                // fit corría en `initializeMap()`, sincrónico, ANTES de que el
+                // mapa se pintara — la animación entera pasaba oculta detrás del
+                // spinner y lo único que el usuario veía era el resultado final de
+                // golpe (el bug real: "no veo el efecto, aparece centrado de
+                // golpe"). Ver `CAMERA_DURATION_MS.initialFit`.
+                this.syncCamera(CAMERA_DURATION_MS.initialFit);
+            }
+        };
+        this.map.on('load', markReady);
+        const readyFallbackTimer = setTimeout(markReady, MAP_READY_FALLBACK_TIMEOUT_MS);
+        this.destroyRef.onDestroy(() => clearTimeout(readyFallbackTimer));
+        // Cualquier error ANTES de llegar a `ready` es grave (token inválido,
+        // sin red, estilo inexistente): no hay mapa usable que mostrar debajo
+        // del overlay. Un error DESPUÉS de `ready` (ej. una tile puntual que no
+        // cargó) no debería tapar retroactivamente un mapa que en general
+        // funciona — por eso se ignora ahí, en vez de andar adivinando el
+        // mensaje exacto de cada causa posible.
+        this.map.on('error', () => {
+            if (this.status() !== 'ready') {
+                this.status.set('error');
+            }
+        });
+        // `addSource`/`addLayer` fallan si el estilo todavía no cargó — por eso
+        // la ruta (y el cluster, si está activo) no se sincronizan en la pasada
+        // inicial de más abajo, solo acá. `.on` (no `.once`): cada `setStyle()`
+        // posterior (cambio de `theme`) vuelve a disparar este evento y hay que
+        // reponerlos, porque `setStyle` descarta cualquier source/layer custom
+        // del estilo anterior. Los markers en DOM (`syncMarkers()` sin
+        // clustering) no dependen del estilo y por eso no se repiten acá.
+        this.map.on('style.load', () => {
+            this.syncRoute();
+            if (this.clusterActive()) {
+                this.syncClusterSource();
+            }
+        });
+        // El click/foco sobre un cluster real NO se cablea contra la capa WebGL
+        // (`CLUSTER_CIRCLE_LAYER_ID` es puro pintado, sin nodo DOM — inalcanzable
+        // por teclado, WCAG 2.1.1). La interacción real vive en el marker DOM que
+        // `syncClusterMarkers()` crea por cada cluster vía `addClusterMarkerToMap()`
+        // (mismo patrón que `addMarkerToMap()`: `role="button"`, `tabindex="0"`,
+        // `click`+`keydown` de Enter/Space), así que acá no hace falta ningún
+        // listener de `click`/`mouseenter`/`mouseleave` sobre la capa.
+        // Qué puntos quedan "sueltos" (sin agrupar) depende del zoom actual —
+        // Mapbox reclusteriza sola en cada cambio, esto solo reacciona.
+        // `'data'` cubre la primera vez que la fuente termina de cargar (antes
+        // de eso `querySourceFeatures()` no tiene nada que devolver);
+        // `'moveend'` cubre cualquier pan/zoom posterior. No se usa `'render'`
+        // (dispara ~60/s) ni `'move'` continuo para esto: reconstruir markers
+        // en cada frame de una animación de cámara sería puro parpadeo sin
+        // ganar nada, `'moveend'` (una vez que la interacción termina) alcanza.
+        this.map.on('data', (event) => {
+            // `'data'` cubre tanto datos de `source` como de `style` — solo el
+            // primero trae `sourceId`/`isSourceLoaded`, de ahí el chequeo de
+            // `dataType` antes de leerlos (si no, TypeScript no puede angostar la
+            // unión `MapSourceDataEvent | MapStyleDataEvent`).
+            if (event.dataType === 'source' &&
+                this.clusterActive() &&
+                event.sourceId === MARKER_CLUSTER_SOURCE_ID &&
+                event.isSourceLoaded) {
+                this.syncClusterMarkers();
+            }
+        });
+        this.map.on('moveend', () => {
+            if (this.clusterActive()) {
+                this.syncClusterMarkers();
+            }
+        });
+        // El popup resumen de cluster (ver `renderClusterPopup()`) no es hijo de
+        // ningún elemento que Mapbox reposicione solo — sigue al punto de
+        // pantalla a mano en cada pan (`'move'`, sí continuo acá: reproyectar
+        // 2 números es barato, nada que ver con reconstruir markers arriba). Se
+        // cierra apenas empieza un zoom: el `cluster_id` que abrió el popup deja
+        // de tener sentido en cuanto la agrupación cambia, y esperar a que
+        // termine el zoom para recién ahí darse cuenta sería mostrar datos ya
+        // viejos un rato.
+        this.map.on('move', () => this.repositionClusterPopup());
+        this.map.on('zoomstart', () => this.closeClusterPopup());
+        this.resizeObserver = new ResizeObserver(() => this.map?.resize());
+        this.resizeObserver.observe(container);
+        this.syncMarkers();
+        // El fit animado inicial NO corre acá — ver `markReady()` más arriba:
+        // recién cuando el overlay de carga se saca tiene sentido animar algo
+        // que el usuario pueda ver. Mientras carga, la cámara se queda donde el
+        // constructor de `MapboxMap` la dejó (arriba) — invisible de todos
+        // modos detrás del overlay.
+    }
+    resolvedTheme() {
+        return this.userTheme() ?? this.theme();
+    }
+    resolvedStyle() {
+        // Un estilo de marca custom (Mapbox Studio) no tiene un tema que elegir
+        // — si el config de la app lo define, gana siempre sobre `theme()`/`userTheme()`.
+        return this.mapConfig.styleUrl ?? STYLE_BY_THEME[this.resolvedTheme()];
+    }
+    toLngLat(point) {
+        return [point.lng, point.lat];
+    }
+    /**
+     * `matchMedia` (no una media query CSS): esta preferencia decide la
+     * `duration` que se le pasa a la API de cámara de Mapbox, que corre en
+     * JS/WebGL — CSS no tiene nada que animar acá. `document.defaultView` (no
+     * el `window` global) para que quede mockeable en test igual que el resto
+     * de la clase usa `DOCUMENT` inyectado.
+     */
+    prefersReducedMotion() {
+        return (this.document.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
+    }
+    /** Colapsa cualquier duración a 0 (instantáneo, sin animar) si el usuario
+     * pidió `prefers-reduced-motion: reduce` — un único punto de verdad para
+     * que ningún movimiento de cámara se salga de esa preferencia. */
+    cameraDuration(baseMs) {
+        return this.prefersReducedMotion() ? 0 : baseMs;
+    }
+    syncCamera(duration = CAMERA_DURATION_MS.recenter) {
+        if (!this.map) {
+            return;
+        }
+        const followTarget = this.followActive()
+            ? this.markers().find((marker) => marker.live)
+            : undefined;
+        if (followTarget) {
+            // `easeTo`, no `jumpTo`: en modo "seguir" la cámara se corrige de a
+            // poco detrás del marker en movimiento, no salta en seco cada vez que
+            // llega una posición nueva.
+            this.map.easeTo({
+                center: this.toLngLat(followTarget.position),
+                duration: this.cameraDuration(FOLLOW_EASE_DURATION_MS),
+            });
+            return;
+        }
+        if (this.fitToMarkers()) {
+            const bounds = this.computeBounds();
+            if (bounds) {
+                this.frameBounds(bounds, duration);
+                return;
+            }
+        }
+        // `easeTo` con la duración calculada — no `jumpTo`: con
+        // `prefers-reduced-motion` la duración cae a 0 y el efecto es idéntico a
+        // un salto instantáneo, sin necesitar una rama de código aparte.
+        this.map.easeTo({
+            center: this.toLngLat(this.center() ?? DEFAULT_CENTER),
+            zoom: this.zoom() ?? DEFAULT_ZOOM,
+            duration: this.cameraDuration(duration),
+        });
+    }
+    /**
+     * Encuadra `bounds` con `fitBounds()`, salvo que sea una caja degenerada
+     * (ver `DEGENERATE_BOUNDS_THRESHOLD_DEG`) — un solo punto total (un único
+     * marker sin ruta, o vehículo+destino prácticamente en el mismo sitio) le
+     * da a `fitBounds()` un ancho y alto ~cero, que Mapbox resuelve con un
+     * `padding`/zoom que en la práctica deja el mapa mayormente en blanco
+     * ("se ve todo blanco", el bug real que esto corrige). Un `easeTo` con
+     * zoom fijo sensato muestra contexto real de calle en ese caso, animado
+     * igual que el resto (antes era un `jumpTo` seco).
+     */
+    frameBounds(bounds, duration = CAMERA_DURATION_MS.recenter) {
+        if (!this.map) {
+            return;
+        }
+        if (this.isDegenerateBounds(bounds)) {
+            this.map.easeTo({
+                center: bounds.getCenter(),
+                zoom: SINGLE_POINT_ZOOM,
+                duration: this.cameraDuration(duration),
+            });
+            return;
+        }
+        this.map.fitBounds(bounds, {
+            padding: FIT_BOUNDS_PADDING_PX,
+            maxZoom: FIT_BOUNDS_MAX_ZOOM,
+            duration: this.cameraDuration(duration),
+        });
+    }
+    isDegenerateBounds(bounds) {
+        const ne = bounds.getNorthEast();
+        const sw = bounds.getSouthWest();
+        return (Math.abs(ne.lat - sw.lat) < DEGENERATE_BOUNDS_THRESHOLD_DEG &&
+            Math.abs(ne.lng - sw.lng) < DEGENERATE_BOUNDS_THRESHOLD_DEG);
+    }
+    /**
+     * Extiende sobre markers Y route: el nombre del input sigue el caso de
+     * uso principal (encuadrar los markers), pero un mapa con solo `route` y
+     * sin `markers` tampoco debería quedar en el encuadre default inútil.
+     */
+    computeBounds() {
+        const points = [...this.markers().map((marker) => marker.position), ...(this.route() ?? [])];
+        if (points.length === 0) {
+            return null;
+        }
+        const bounds = new LngLatBounds();
+        for (const point of points) {
+            bounds.extend(this.toLngLat(point));
+        }
+        return bounds;
+    }
+    syncMarkers() {
+        if (!this.map) {
+            return;
+        }
+        if (this.clusterActive()) {
+            // El clustering nativo resuelve por fuente+capas GeoJSON los clusters
+            // REALES (2+ puntos agrupados) — pero un punto que Mapbox deja suelto
+            // (sin `point_count`) sigue siendo un marker DOM normal, con su
+            // `kf-icon`/tono/popup de siempre (ver JSDoc de `syncClusterMarkers()`
+            // sobre por qué). Por eso acá NO se limpian los markers incondicional-
+            // mente: `syncClusterMarkers()` decide cuáles siguen sueltos y
+            // reconstruye solo esos; este método solo se asegura de que la fuente
+            // de clusters exista/esté al día.
+            this.syncClusterSource();
+            this.syncClusterMarkers();
+            return;
+        }
+        this.clearClusterLayers();
+        this.clearClusterMarkers();
+        this.closeClusterPopup();
+        this.clearMarkers();
+        for (const markerData of this.markers()) {
+            this.addMarkerToMap(markerData);
+        }
+    }
+    /**
+     * Crea el marker de Mapbox (DOM + `kf-icon` + wiring de click/teclado/
+     * popup) para UN `MapMarker` y lo agrega a `markerHandles` — compartido
+     * entre el modo normal (`syncMarkers()`, todos los markers) y el modo
+     * cluster (`syncClusterMarkers()`, solo los que quedan sueltos): un punto
+     * suelto en modo cluster tiene que verse y comportarse EXACTAMENTE igual
+     * que en modo normal, así que no puede haber dos implementaciones.
+     */
+    addMarkerToMap(markerData) {
+        if (!this.map) {
+            return;
+        }
+        // `kf-icon` real (no un `<svg>` a mano): reusa el sprite compartido y
+        // se destruye igual que cualquier otro componente Angular al sacar el
+        // marker del mapa.
+        const iconRef = createComponent(Icon, { environmentInjector: this.environmentInjector });
+        iconRef.setInput('name', markerData.icon ?? 'map-pin');
+        iconRef.setInput('size', 'sm');
+        iconRef.changeDetectorRef.detectChanges();
+        const element = this.document.createElement('div');
+        element.className = [
+            'kf-map__marker',
+            `kf-map__marker--${markerData.tone ?? 'neutral'}`,
+            markerData.live ? 'kf-map__marker--live' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (markerData.label) {
+            // Solo nombre accesible + tooltip nativo — `label` no abre un popup.
+            element.setAttribute('aria-label', markerData.label);
+            element.setAttribute('title', markerData.label);
+        }
+        const extraIconRefs = [];
+        if (markerData.id) {
+            // `id` (ver JSDoc de `MapMarker.id`) es lo único que hace a un
+            // marker clickeable — sin él, no hay con qué identificar de vuelta
+            // la selección en `markerSelect`.
+            const markerId = markerData.id;
+            element.classList.add('kf-map__marker--clickable');
+            element.setAttribute('role', 'button');
+            element.setAttribute('tabindex', '0');
+            element.addEventListener('click', () => this.markerSelect.emit(markerId));
+            element.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    this.markerSelect.emit(markerId);
+                }
+            });
+            // Solo con `id` el marker es clickeable/enfocable — sin eso, hover
+            // ni foco por teclado tendrían de qué revelar esta mini-card, así
+            // que `popup` sin `id` se ignora en silencio en vez de agregar un
+            // elemento que nunca se vería.
+            if (markerData.popup) {
+                const { element: popupElement, iconRefs: popupIconRefs } = this.buildMarkerPopup(markerData.popup, markerId, markerData.tone ?? 'neutral');
+                extraIconRefs.push(...popupIconRefs);
+                // Reposiciona (recorte de borde, ver `positionMarkerPopup()`) en
+                // el evento que dispara la aparición — el mecanismo de mostrar/
+                // ocultar sigue siendo 100% CSS (`:hover`/`:focus-within`), esto
+                // solo decide DÓNDE queda el popup antes de que se vuelva visible.
+                const reposition = () => this.positionMarkerPopup(element, popupElement);
+                element.addEventListener('mouseenter', reposition);
+                element.addEventListener('focusin', reposition);
+                element.appendChild(popupElement);
+            }
+        }
+        element.appendChild(iconRef.location.nativeElement);
+        const marker = new Marker({ element })
+            .setLngLat(this.toLngLat(markerData.position))
+            .addTo(this.map);
+        this.markerHandles.push({ marker, iconRef, extraIconRefs });
+    }
+    /**
+     * Mini-card hija del `<div>` del marker — mismo patrón que
+     * `.kf-map-controls__label` (ver `MapControls.css`): un elemento SIEMPRE
+     * presente en el DOM, oculto por defecto vía `opacity`/`pointer-events` en
+     * `MapView.css` y revelado por CSS puro en `:hover`/`:focus-within` del
+     * marker padre — sin JS de show/hide, y sin `mapboxgl.Popup` (evita una
+     * segunda gestión de overlay/posicionamiento cuando el CSS ya alcanza acá,
+     * igual que ya decidió `.kf-map-controls__label`).
+     *
+     * Todo el subárbol (título, descripción, `details`, `actions`) se arma con
+     * `document.createElement` puro, nunca `kf-text`/`kf-button`: este marker
+     * entero vive fuera del template de Angular (ver el comentario grande de
+     * `ViewEncapsulation.None` más arriba) — meter un componente real acá
+     * significaría un `createComponent()` propio por cada línea de texto, el
+     * mismo costo que ya paga `kf-icon` en `syncMarkers()` pero sin ninguna
+     * necesidad real (no hay nada dinámico que un componente resuelva mejor
+     * que texto plano estilado por clase). Es la MISMA decisión que ya regía
+     * para `title`/`description` antes de esta ronda — se extiende acá para no
+     * mezclar dos convenciones distintas dentro del mismo fragmento de DOM.
+     *
+     * `actions` sí necesita wiring propio (a diferencia del resto de la card,
+     * que burbujea su click al listener ya cableado sobre `element` en
+     * `syncMarkers()`): cada botón corta esa burbuja con `stopPropagation()`
+     * para reportar `markerAction` en vez de (además) `markerSelect`.
+     *
+     * Jerarquía visual de `actions` (ver JSDoc de `MapPopupAction`): la
+     * PRIMERA acción del array es la principal (`--primary`, fill); el resto
+     * es secundaria (`--ghost`, transparente) — mismo peso que ya usan
+     * `kf-button[variant=primary]`/`[variant=ghost]` en el resto de la
+     * librería, sin inventar un esquema de color nuevo acá.
+     *
+     * El punto de color junto al título (`kf-map__marker-popup-tone`) reusa
+     * el `tone` del propio marker — no el de cada `details` (que son pares
+     * label/value genéricos, sin un campo "cuál de estos es el estado"): es
+     * la misma señal que YA pinta el círculo del marker en el mapa, mostrada
+     * de nuevo acá para que el popup se lea sin tener que mirar el marker.
+     */
+    buildMarkerPopup(popup, markerId, tone) {
+        const iconRefs = [];
+        const card = this.document.createElement('div');
+        card.className = 'kf-map__marker-popup';
+        const heading = this.document.createElement('div');
+        heading.className = 'kf-map__marker-popup-heading';
+        const toneDot = this.document.createElement('span');
+        toneDot.className = `kf-map__marker-popup-tone kf-map__marker-popup-tone--${tone}`;
+        toneDot.setAttribute('aria-hidden', 'true');
+        const title = this.document.createElement('span');
+        title.className = 'kf-map__marker-popup-title';
+        title.textContent = popup.title;
+        heading.append(toneDot, title);
+        card.appendChild(heading);
+        if (popup.description) {
+            const description = this.document.createElement('span');
+            description.className = 'kf-map__marker-popup-description';
+            description.textContent = popup.description;
+            card.appendChild(description);
+        }
+        if (popup.details?.length) {
+            const list = this.document.createElement('dl');
+            list.className = 'kf-map__marker-popup-details';
+            for (const detail of popup.details) {
+                const row = this.document.createElement('div');
+                row.className = 'kf-map__marker-popup-detail';
+                const label = this.document.createElement('dt');
+                label.className = 'kf-map__marker-popup-detail-label';
+                label.textContent = detail.label;
+                const value = this.document.createElement('dd');
+                value.className = 'kf-map__marker-popup-detail-value';
+                value.textContent = detail.value;
+                row.append(label, value);
+                list.appendChild(row);
+            }
+            card.appendChild(list);
+        }
+        if (popup.actions?.length) {
+            const actions = this.document.createElement('div');
+            actions.className = 'kf-map__marker-popup-actions';
+            popup.actions.forEach((action, index) => {
+                const button = this.document.createElement('button');
+                button.type = 'button';
+                // Primera acción = principal (fill), resto = secundaria (ghost) —
+                // ver JSDoc de este método y de `MapPopupAction`.
+                button.className = `kf-map__marker-popup-action kf-map__marker-popup-action--${index === 0 ? 'primary' : 'ghost'}`;
+                // `title` nativo como respaldo: el label puede truncar con ellipsis
+                // si dos acciones no entran completas en el ancho mínimo del popup
+                // (ver `.kf-map__marker-popup-action-label`) — con esto, el texto
+                // completo sigue disponible al pasar el mouse por encima.
+                button.title = action.label;
+                if (action.icon) {
+                    const iconRef = createComponent(Icon, { environmentInjector: this.environmentInjector });
+                    iconRef.setInput('name', action.icon);
+                    iconRef.setInput('size', 'sm');
+                    iconRef.changeDetectorRef.detectChanges();
+                    iconRefs.push(iconRef);
+                    button.appendChild(iconRef.location.nativeElement);
+                }
+                // Clase propia para poder truncar SOLO el texto (con ellipsis) sin
+                // afectar al ícono — ver `.kf-map__marker-popup-action-label` en
+                // MapView.css: con `flex:1` en el botón pero sin esto, dos acciones
+                // de largo de texto distinto no se reparten el ancho parejo (el
+                // `white-space:nowrap` fija un min-content propio que `flex:1` no
+                // puede pisar sin `min-width:0` — mismo bug que en cualquier grid
+                // con `1fr` a secas).
+                const label = this.document.createElement('span');
+                label.className = 'kf-map__marker-popup-action-label';
+                label.textContent = action.label;
+                button.appendChild(label);
+                button.addEventListener('click', (domEvent) => {
+                    // Sin esto, el click también burbujearía hasta el listener de
+                    // `element` en `syncMarkers()` y dispararía `markerSelect` además
+                    // de `markerAction` — dos outputs por un solo click real.
+                    domEvent.stopPropagation();
+                    this.markerAction.emit({ markerId, actionKey: action.key });
+                });
+                actions.appendChild(button);
+            });
+            card.appendChild(actions);
+        }
+        return { element: card, iconRefs };
+    }
+    clearMarkers() {
+        for (const { marker, iconRef, extraIconRefs } of this.markerHandles) {
+            marker.remove();
+            iconRef.destroy();
+            for (const extraIconRef of extraIconRefs) {
+                extraIconRef.destroy();
+            }
+        }
+        this.markerHandles = [];
+    }
+    /**
+     * Recorte de borde para el popup de marker individual (punto 2) —
+     * `getBoundingClientRect()` del marker y del propio contenedor del mapa,
+     * recalculado en el evento que dispara la apertura (`mouseenter`/
+     * `focusin`, ver `addMarkerToMap()`). El mecanismo de mostrar/ocultar
+     * sigue siendo 100% CSS; esto solo decide 3 clases modificadoras que
+     * `MapView.css` traduce en alineación horizontal/vertical:
+     *
+     *   `--align-start` — el popup se desborda por la izquierda del
+     *   contenedor si se centra sobre el marker: se alinea su borde
+     *   izquierdo con el del marker en vez de centrarlo.
+     *   `--align-end` — mismo caso, contra el borde derecho.
+     *   `--below` — no entra arriba del marker (cerca del borde superior del
+     *   contenedor): se muestra debajo en vez de arriba.
+     *
+     * El popup YA está en el DOM en este punto (oculto por `opacity`, no por
+     * `display:none` — ver `MapView.css`), así que `getBoundingClientRect()`
+     * devuelve su tamaño real aunque todavía no sea visible.
+     */
+    positionMarkerPopup(markerElement, popupElement) {
+        const containerRect = this.containerRef().nativeElement.getBoundingClientRect();
+        const markerRect = markerElement.getBoundingClientRect();
+        const popupRect = popupElement.getBoundingClientRect();
+        const markerCenterX = markerRect.left + markerRect.width / 2;
+        const overflowsLeft = markerCenterX - popupRect.width / 2 < containerRect.left + POPUP_EDGE_MARGIN_PX;
+        const overflowsRight = markerCenterX + popupRect.width / 2 > containerRect.right - POPUP_EDGE_MARGIN_PX;
+        popupElement.classList.toggle('kf-map__marker-popup--align-start', overflowsLeft);
+        popupElement.classList.toggle('kf-map__marker-popup--align-end', !overflowsLeft && overflowsRight);
+        const overflowsTop = markerRect.top - popupRect.height - POPUP_EDGE_MARGIN_PX < containerRect.top;
+        popupElement.classList.toggle('kf-map__marker-popup--below', overflowsTop);
+    }
+    /**
+     * Clustering nativo de Mapbox (`cluster: true` en la fuente GeoJSON, no un
+     * algoritmo armado a mano) — 2 capas, solo para clusters REALES (2+
+     * puntos agrupados, `has: point_count`): círculo agregado y su label de
+     * cantidad. Un punto que Mapbox deja suelto (sin `point_count`) YA NO
+     * tiene capa WebGL propia — ver `syncClusterMarkers()`, que lo renderiza
+     * como el mismo marker DOM de siempre (con ícono/tono/popup reales, cosa
+     * que una capa `circle` no puede mostrar).
+     */
+    syncClusterSource() {
+        if (!this.map || !this.map.isStyleLoaded()) {
+            return;
+        }
+        const data = this.markersToFeatureCollection();
+        const existing = this.map.getSource(MARKER_CLUSTER_SOURCE_ID);
+        if (existing) {
+            existing.setData(data);
+            return;
+        }
+        this.map.addSource(MARKER_CLUSTER_SOURCE_ID, {
+            type: 'geojson',
+            data,
+            cluster: true,
+            clusterMaxZoom: 14,
+            clusterRadius: 50,
+        });
+        this.map.addLayer({
+            id: CLUSTER_CIRCLE_LAYER_ID,
+            type: 'circle',
+            source: MARKER_CLUSTER_SOURCE_ID,
+            filter: ['has', 'point_count'],
+            paint: {
+                'circle-color': this.resolveColorToken('--kf-color-gray-700'),
+                'circle-radius': ['step', ['get', 'point_count'], 14, 10, 18, 50, 22],
+                'circle-stroke-width': 2,
+                'circle-stroke-color': this.resolveColorToken('--kf-color-white'),
+            },
+        });
+        this.map.addLayer({
+            id: CLUSTER_COUNT_LAYER_ID,
+            type: 'symbol',
+            source: MARKER_CLUSTER_SOURCE_ID,
+            filter: ['has', 'point_count'],
+            layout: {
+                'text-field': ['get', 'point_count_abbreviated'],
+                'text-size': 12,
+            },
+            paint: {
+                'text-color': this.resolveColorToken('--kf-color-white'),
+            },
+        });
+    }
+    /**
+     * Contraparte en DOM de la capa WebGL: mientras esa capa solo dibuja
+     * clusters reales, ESTE método decide qué puntos quedan sueltos al zoom
+     * ACTUAL (`querySourceFeatures` con el mismo filtro `!has(point_count)`
+     * que ya usa Mapbox para separar cluster de leaf) y les arma el mismo
+     * marker DOM que tendrían sin clustering — vía `addMarkerToMap()`, la
+     * MISMA función que usa el modo normal, no una copia.
+     *
+     * `querySourceFeatures` puede devolver una feature repetida si cae cerca
+     * de un borde interno de tile — de ahí el `Set` sobre `index` (la
+     * property que identifica al `MapMarker` de origen, ver
+     * `markersToFeatureCollection()`), no una lista con posibles duplicados.
+     * Mismo motivo (y mismo `Set`, esta vez sobre `cluster_id`) para los
+     * clusters reales que se resuelven acá abajo.
+     *
+     * Se llama solo cuando `clusterActive()` — ver los listeners `'data'`/
+     * `'moveend'` en `initializeMap()` sobre CUÁNDO se llama esto.
+     */
+    syncClusterMarkers() {
+        if (!this.map) {
+            return;
+        }
+        const source = this.map.getSource(MARKER_CLUSTER_SOURCE_ID);
+        if (!source) {
+            return;
+        }
+        const singletonFeatures = this.map.querySourceFeatures(MARKER_CLUSTER_SOURCE_ID, {
+            filter: ['!', ['has', 'point_count']],
+        });
+        const singletonIndexes = new Set();
+        for (const feature of singletonFeatures) {
+            const index = feature.properties?.['index'];
+            if (typeof index === 'number') {
+                singletonIndexes.add(index);
+            }
+        }
+        this.clearMarkers();
+        const markers = this.markers();
+        for (const index of singletonIndexes) {
+            const markerData = markers[index];
+            if (markerData) {
+                this.addMarkerToMap(markerData);
+            }
+        }
+        // Clusters reales (punto 1, a11y): además del círculo WebGL que pinta
+        // `CLUSTER_CIRCLE_LAYER_ID`, cada uno recibe acá un marker DOM real —
+        // ver `addClusterMarkerToMap()` sobre por qué la capa WebGL sola no
+        // alcanza (WCAG 2.1.1, sin nodo DOM no hay foco de teclado posible).
+        const clusterFeatures = this.map.querySourceFeatures(MARKER_CLUSTER_SOURCE_ID, {
+            filter: ['has', 'point_count'],
+        });
+        const seenClusterIds = new Set();
+        this.clearClusterMarkers();
+        for (const feature of clusterFeatures) {
+            const clusterId = feature.properties?.['cluster_id'];
+            const pointCount = feature.properties?.['point_count'];
+            const geometry = feature.geometry;
+            if (typeof clusterId !== 'number' ||
+                typeof pointCount !== 'number' ||
+                geometry?.type !== 'Point') {
+                continue;
+            }
+            if (seenClusterIds.has(clusterId)) {
+                continue;
+            }
+            seenClusterIds.add(clusterId);
+            this.addClusterMarkerToMap(clusterId, geometry.coordinates, pointCount);
+        }
+    }
+    /**
+     * Marker DOM real sobre un cluster (punto 1, a11y) — MISMO patrón de
+     * wiring que `addMarkerToMap()` (`role="button"`, `tabindex="0"`,
+     * `click`+`keydown` de Enter/Space), aplicado acá porque el círculo que
+     * pinta `CLUSTER_CIRCLE_LAYER_ID` es una capa WebGL sin nodo DOM propio
+     * —inalcanzable por teclado (WCAG SC 2.1.1 Keyboard). `mapboxgl.Marker`
+     * posiciona y reproyecta este `<div>` solo en cada pan/zoom, igual que ya
+     * hace con cualquier marker individual — no hace falta reposicionarlo a
+     * mano como sí necesita el popup resumen (ver `repositionClusterPopup()`).
+     *
+     * Sin `kf-icon`/texto propio adentro a propósito: el círculo+conteo que ya
+     * pinta la capa WebGL sigue siendo la representación visual (mismo
+     * `'circle-radius'`, ver `clusterMarkerRadiusPx()`); este `<div>` es
+     * transparente y se superpone exacto encima, aportando SOLO la
+     * interactividad real que la capa WebGL no puede tener.
+     */
+    addClusterMarkerToMap(clusterId, coordinates, pointCount) {
+        if (!this.map) {
+            return;
+        }
+        const diameter = clusterMarkerRadiusPx(pointCount) * 2;
+        const element = this.document.createElement('div');
+        element.className = 'kf-map__cluster-marker';
+        element.style.width = `${diameter}px`;
+        element.style.height = `${diameter}px`;
+        element.setAttribute('role', 'button');
+        element.setAttribute('tabindex', '0');
+        element.setAttribute('aria-label', `${pointCount} puntos agrupados`);
+        const activate = () => this.activateCluster(clusterId, coordinates, pointCount);
+        element.addEventListener('click', activate);
+        element.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                activate();
+            }
+        });
+        const marker = new Marker({ element }).setLngLat(coordinates).addTo(this.map);
+        this.clusterMarkerHandles.push(marker);
+    }
+    clearClusterMarkers() {
+        for (const marker of this.clusterMarkerHandles) {
+            marker.remove();
+        }
+        this.clusterMarkerHandles = [];
+    }
+    /**
+     * Activación de un cluster real (click O Enter/Space sobre su marker DOM,
+     * ver `addClusterMarkerToMap()`): ANTES hacía zoom directo
+     * (`getClusterExpansionZoom()` + `easeTo`) — ahora abre el popup resumen
+     * (`renderClusterPopup()`) con la lista de tickets agrupados, y ESE zoom
+     * pasa a ser la acción explícita "Acercar para separar" dentro del popup
+     * (ver `expandCluster()`).
+     */
+    activateCluster(clusterId, coordinates, pointCount) {
+        const map = this.map;
+        if (!map) {
+            return;
+        }
+        const source = map.getSource(MARKER_CLUSTER_SOURCE_ID);
+        // `pointCount` como `limit`: trae TODOS los leaves del cluster, nunca
+        // los corta en silencio (ver JSDoc de `renderClusterPopup()` sobre el
+        // scroll interno para cuando son muchos) — mismo patrón que documenta
+        // el propio Mapbox GL JS para este método.
+        source?.getClusterLeaves(clusterId, pointCount, 0, (error, leaves) => {
+            if (error || !leaves) {
+                return;
+            }
+            this.renderClusterPopup(clusterId, coordinates, leaves);
+        });
+    }
+    /** Dispara el zoom que antes hacía el click directo sobre el círculo —
+     * ahora vive detrás del botón "Acercar para separar" del popup resumen. */
+    expandCluster(clusterId, coordinates) {
+        const map = this.map;
+        if (!map) {
+            return;
+        }
+        const source = map.getSource(MARKER_CLUSTER_SOURCE_ID);
+        source?.getClusterExpansionZoom(clusterId, (error, zoom) => {
+            if (error || typeof zoom !== 'number') {
+                return;
+            }
+            map.easeTo({
+                center: coordinates,
+                zoom,
+                duration: this.cameraDuration(CAMERA_DURATION_MS.recenter),
+            });
+        });
+    }
+    /**
+     * `index` identifica de vuelta al `MapMarker` de origen (ver
+     * `syncClusterMarkers()`); `title`/`description`/`markerId` son las
+     * mismas properties que ya arma `buildMarkerPopup()` (folio/cliente/id
+     * del caso real) — se serializan acá TAMBIÉN para que
+     * `getClusterLeaves()` pueda listarlas en el popup resumen sin tener que
+     * ir a buscar cada `MapMarker` original por separado. Los campos son
+     * `string` (no `undefined`): las properties de una `Feature` de GeoJSON
+     * no viajan bien como `undefined` — `''` significa "sin dato" en los 3.
+     */
+    markersToFeatureCollection() {
+        return {
+            type: 'FeatureCollection',
+            features: this.markers().map((marker, index) => ({
+                type: 'Feature',
+                properties: {
+                    index,
+                    tone: marker.tone ?? 'neutral',
+                    title: marker.popup?.title ?? '',
+                    description: marker.popup?.description ?? '',
+                    markerId: marker.id ?? '',
+                },
+                geometry: { type: 'Point', coordinates: this.toLngLat(marker.position) },
+            })),
+        };
+    }
+    clearClusterLayers() {
+        if (!this.map) {
+            return;
+        }
+        // Las 2 capas antes que la fuente: Mapbox no deja sacar una fuente
+        // mientras alguna capa todavía la referencia.
+        for (const layerId of [CLUSTER_CIRCLE_LAYER_ID, CLUSTER_COUNT_LAYER_ID]) {
+            if (this.map.getLayer(layerId)) {
+                this.map.removeLayer(layerId);
+            }
+        }
+        if (this.map.getSource(MARKER_CLUSTER_SOURCE_ID)) {
+            this.map.removeSource(MARKER_CLUSTER_SOURCE_ID);
+        }
+    }
+    /**
+     * Popup resumen de un cluster real (punto 4) — a diferencia del popup de
+     * marker individual (siempre en el DOM, `:hover`/`:focus-within` puro),
+     * este no cuelga de ningún elemento con estado hover propio: lo abre un
+     * click sobre una capa WebGL sin DOM, así que se crea/destruye a demanda
+     * y su visibilidad la maneja JS, no CSS. Se agrega como hijo del HOST
+     * (`kf-map`, no `.kf-map__container`): ambos comparten exactamente la
+     * misma caja (`.kf-map__container` es `width/height:100%` sin padding/
+     * borde dentro de un host `position:relative`), así que las coordenadas
+     * de `map.project()` (relativas al contenedor) valen también acá — mismo
+     * ancestro posicionado que ya usa `.kf-map__overlay`.
+     *
+     * `title`/`description` de cada leaf son `popup.title`/`popup.description`
+     * del `MapMarker` original (folio/cliente en el caso real) — ver
+     * `markersToFeatureCollection()`. El punto de color reusa `tone`, MISMO
+     * criterio que el punto de color del popup individual (ver JSDoc de
+     * `buildMarkerPopup()`): no se inventa un texto de "estado" que la
+     * librería no tiene, se reusa la señal de color que sí existe.
+     */
+    renderClusterPopup(clusterId, coordinates, leaves) {
+        this.closeClusterPopup();
+        if (!this.map) {
+            return;
+        }
+        const card = this.document.createElement('div');
+        card.className = 'kf-map__cluster-popup';
+        const header = this.document.createElement('div');
+        header.className = 'kf-map__cluster-popup-header';
+        const title = this.document.createElement('span');
+        title.className = 'kf-map__cluster-popup-title';
+        title.textContent = `${leaves.length} puntos agrupados`;
+        const closeButton = this.document.createElement('button');
+        closeButton.type = 'button';
+        closeButton.className = 'kf-map__cluster-popup-close';
+        closeButton.setAttribute('aria-label', 'Cerrar');
+        const closeIconRef = createComponent(Icon, { environmentInjector: this.environmentInjector });
+        closeIconRef.setInput('name', 'x');
+        closeIconRef.setInput('size', 'sm');
+        closeIconRef.changeDetectorRef.detectChanges();
+        this.clusterPopupIconRefs.push(closeIconRef);
+        closeButton.appendChild(closeIconRef.location.nativeElement);
+        closeButton.addEventListener('click', () => this.closeClusterPopup());
+        header.append(title, closeButton);
+        card.appendChild(header);
+        // `<ul>`/`<li>`: es una lista real de tickets, no párrafos sueltos —
+        // `max-height`+`overflow-y:auto` en `MapView.css` resuelve el scroll
+        // interno cuando hay más leaves de los que entran cómodos, en vez de
+        // cortar la lista en silencio (ver JSDoc de `handleClusterClick()`
+        // sobre por qué `getClusterLeaves` ya trae TODOS los leaves).
+        const list = this.document.createElement('ul');
+        list.className = 'kf-map__cluster-popup-list';
+        for (const leaf of leaves) {
+            const properties = leaf.properties;
+            const markerId = properties?.markerId;
+            const tone = properties?.tone ?? 'neutral';
+            const item = this.document.createElement('li');
+            item.className = 'kf-map__cluster-popup-item';
+            const dot = this.document.createElement('span');
+            dot.className = `kf-map__cluster-popup-dot kf-map__cluster-popup-dot--${tone}`;
+            dot.setAttribute('aria-hidden', 'true');
+            const text = this.document.createElement('span');
+            text.className = 'kf-map__cluster-popup-text';
+            const itemTitle = this.document.createElement('span');
+            itemTitle.className = 'kf-map__cluster-popup-item-title';
+            itemTitle.textContent = properties?.title || 'Sin título';
+            text.appendChild(itemTitle);
+            if (properties?.description) {
+                const itemDescription = this.document.createElement('span');
+                itemDescription.className = 'kf-map__cluster-popup-item-description';
+                itemDescription.textContent = properties.description;
+                text.appendChild(itemDescription);
+            }
+            item.append(dot, text);
+            // Mismo criterio que el marker individual (ver JSDoc de `MapMarker.id`):
+            // sin `markerId` esta fila no tiene con qué identificar de vuelta la
+            // selección en `markerSelect`, así que se queda sin ser clickeable.
+            if (markerId) {
+                item.classList.add('kf-map__cluster-popup-item--clickable');
+                item.setAttribute('role', 'button');
+                item.setAttribute('tabindex', '0');
+                const select = () => {
+                    this.markerSelect.emit(markerId);
+                    this.closeClusterPopup();
+                };
+                item.addEventListener('click', select);
+                item.addEventListener('keydown', (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        select();
+                    }
+                });
+            }
+            list.appendChild(item);
+        }
+        card.appendChild(list);
+        const footer = this.document.createElement('div');
+        footer.className = 'kf-map__cluster-popup-footer';
+        const expandButton = this.document.createElement('button');
+        expandButton.type = 'button';
+        expandButton.className = 'kf-map__cluster-popup-expand';
+        const expandIconRef = createComponent(Icon, { environmentInjector: this.environmentInjector });
+        expandIconRef.setInput('name', 'plus');
+        expandIconRef.setInput('size', 'sm');
+        expandIconRef.changeDetectorRef.detectChanges();
+        this.clusterPopupIconRefs.push(expandIconRef);
+        const expandLabel = this.document.createElement('span');
+        expandLabel.textContent = 'Acercar para separar';
+        expandButton.append(expandIconRef.location.nativeElement, expandLabel);
+        expandButton.addEventListener('click', () => {
+            this.expandCluster(clusterId, coordinates);
+            this.closeClusterPopup();
+        });
+        footer.appendChild(expandButton);
+        card.appendChild(footer);
+        this.hostElementRef.nativeElement.appendChild(card);
+        this.clusterPopupElement = card;
+        this.clusterPopupCoordinates = coordinates;
+        this.repositionClusterPopup();
+    }
+    /** Reproyecta el popup de cluster contra pantalla — se llama en cada
+     * `'move'` (ver `initializeMap()`): el punto geográfico no se mueve, pero
+     * su posición EN PANTALLA sí cuando se hace pan. Mismo criterio de
+     * recorte de borde que `positionMarkerPopup()` (punto 2), pero en
+     * píxeles calculados a mano en vez de clases CSS: este popup no cuelga
+     * de un ancestro posicionado por CSS relativo al marker, su posición
+     * ENTERA viene de `map.project()`. */
+    repositionClusterPopup() {
+        if (!this.map || !this.clusterPopupElement || !this.clusterPopupCoordinates) {
+            return;
+        }
+        const point = this.map.project(this.clusterPopupCoordinates);
+        const containerRect = this.containerRef().nativeElement.getBoundingClientRect();
+        const popupRect = this.clusterPopupElement.getBoundingClientRect();
+        const maxLeft = Math.max(containerRect.width - popupRect.width - POPUP_EDGE_MARGIN_PX, POPUP_EDGE_MARGIN_PX);
+        const left = Math.min(Math.max(point.x - popupRect.width / 2, POPUP_EDGE_MARGIN_PX), maxLeft);
+        const fitsAbove = point.y - popupRect.height - CLUSTER_POPUP_GAP_PX >= POPUP_EDGE_MARGIN_PX;
+        const top = fitsAbove
+            ? point.y - popupRect.height - CLUSTER_POPUP_GAP_PX
+            : point.y + CLUSTER_POPUP_GAP_PX;
+        this.clusterPopupElement.style.left = `${left}px`;
+        this.clusterPopupElement.style.top = `${Math.max(top, POPUP_EDGE_MARGIN_PX)}px`;
+    }
+    closeClusterPopup() {
+        this.clusterPopupElement?.remove();
+        this.clusterPopupElement = null;
+        this.clusterPopupCoordinates = null;
+        for (const iconRef of this.clusterPopupIconRefs) {
+            iconRef.destroy();
+        }
+        this.clusterPopupIconRefs = [];
+    }
+    syncRoute() {
+        if (!this.map || !this.map.isStyleLoaded()) {
+            return;
+        }
+        if (this.map.getLayer(ROUTE_LAYER_ID)) {
+            this.map.removeLayer(ROUTE_LAYER_ID);
+        }
+        if (this.map.getSource(ROUTE_SOURCE_ID)) {
+            this.map.removeSource(ROUTE_SOURCE_ID);
+        }
+        const points = this.route();
+        if (!points || points.length < 2) {
+            return;
+        }
+        this.map.addSource(ROUTE_SOURCE_ID, {
+            type: 'geojson',
+            data: {
+                type: 'Feature',
+                properties: {},
+                geometry: {
+                    type: 'LineString',
+                    coordinates: points.map((point) => this.toLngLat(point)),
+                },
+            },
+        });
+        this.map.addLayer({
+            id: ROUTE_LAYER_ID,
+            type: 'line',
+            source: ROUTE_SOURCE_ID,
+            layout: { 'line-cap': 'round', 'line-join': 'round' },
+            paint: {
+                // El paint de Mapbox corre en WebGL, fuera del árbol CSS — no
+                // puede resolver `var(--kf-color-primary)` directo, así que el
+                // valor YA COMPUTADO se lee del DOM en tiempo de ejecución. Sigue
+                // siendo el token quien decide el color: nunca se hardcodea un hex.
+                'line-color': this.resolveColorToken('--kf-color-primary'),
+                'line-width': 3,
+            },
+        });
+    }
+    resolveColorToken(name) {
+        return getComputedStyle(this.document.documentElement).getPropertyValue(name).trim();
+    }
+    // ---------- Wiring de `kf-map-controls` — ver `MapControls.ts` ----------
+    // Cada handler es la única pieza que sabe CÓMO se resuelve una acción
+    // sobre el `Map` real; `MapControls` solo reporta QUÉ se pidió.
+    handleZoomIn() {
+        this.map?.zoomIn({ duration: this.cameraDuration(CAMERA_DURATION_MS.zoomStep) });
+    }
+    handleZoomOut() {
+        this.map?.zoomOut({ duration: this.cameraDuration(CAMERA_DURATION_MS.zoomStep) });
+    }
+    /** Reencuadra a demanda, ignorando `fitToMarkers()` (tiene sentido pedirlo
+     * justo cuando `fitToMarkers` está en `false`) y sin apagar `follow`: si
+     * está activo, la próxima posición nueva vuelve a pegar la cámara al
+     * marker `live` — este reencuadre es una corrección puntual, no un modo. */
+    handleRecenter() {
+        if (!this.map) {
+            return;
+        }
+        const bounds = this.computeBounds();
+        if (bounds) {
+            this.frameBounds(bounds, CAMERA_DURATION_MS.recenter);
+            return;
+        }
+        this.map.easeTo({
+            center: this.toLngLat(this.center() ?? DEFAULT_CENTER),
+            zoom: this.zoom() ?? DEFAULT_ZOOM,
+            duration: this.cameraDuration(CAMERA_DURATION_MS.recenter),
+        });
+    }
+    handleFollowToggle() {
+        this.followActive.update((value) => !value);
+        this.syncCamera();
+    }
+    handleClusterToggle() {
+        this.clusterActive.update((value) => !value);
+        this.syncMarkers();
+    }
+    /** Reemplaza al viejo ciclado de un click (`handleStyleCycle`): la
+     * elección real llega desde `MapThemePicker`, vía `MapControls`. */
+    handleThemeSelect(theme) {
+        this.userTheme.set(theme);
+    }
+    handleFullscreenToggle() {
+        const host = this.hostElementRef.nativeElement;
+        if (typeof host.requestFullscreen !== 'function') {
+            return;
+        }
+        if (this.document.fullscreenElement === host) {
+            void this.document.exitFullscreen();
+        }
+        else {
+            void host.requestFullscreen();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MapView, isStandalone: true, selector: "kf-map", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, fitToMarkers: { classPropertyName: "fitToMarkers", publicName: "fitToMarkers", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerSelect: "markerSelect", markerAction: "markerAction" }, host: { properties: { "class.kf-map--sm": "size() === 'sm'", "class.kf-map--md": "size() === 'md'", "class.kf-map--lg": "size() === 'lg'", "class.kf-map--full": "size() === 'full'" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #mapContainer\n  class=\"kf-map__container\"\n  [attr.role]=\"containerRole()\"\n  [attr.aria-label]=\"label()\"\n  [attr.tabindex]=\"isPreview() ? -1 : null\"\n></div>\n\n@if (status() === 'loading') {\n  <div class=\"kf-map__overlay\" aria-live=\"polite\">\n    <kf-spinner label=\"Cargando mapa\u2026\" />\n  </div>\n} @else if (status() === 'error') {\n  <div class=\"kf-map__overlay kf-map__overlay--error\" role=\"alert\">\n    <kf-icon name=\"alert-triangle\" size=\"lg\" />\n    <kf-text as=\"p\" variant=\"body\" tone=\"error\">No pudimos cargar el mapa</kf-text>\n  </div>\n}\n\n@if (showControls()) {\n  <kf-map-controls\n    class=\"kf-map__controls\"\n    [controls]=\"effectiveControls()\"\n    [clusterActive]=\"clusterActive()\"\n    [followActive]=\"followActive()\"\n    [canFollow]=\"hasLiveMarker()\"\n    [isFullscreen]=\"isFullscreen()\"\n    [styleLabel]=\"styleLabel()\"\n    [activeTheme]=\"activeTheme()\"\n    (zoomIn)=\"handleZoomIn()\"\n    (zoomOut)=\"handleZoomOut()\"\n    (recenter)=\"handleRecenter()\"\n    (followToggle)=\"handleFollowToggle()\"\n    (clusterToggle)=\"handleClusterToggle()\"\n    (themeSelect)=\"handleThemeSelect($event)\"\n    (fullscreenToggle)=\"handleFullscreenToggle()\"\n  />\n}\n", styles: ["kf-map{display:block;position:relative;width:100%;border-radius:var(--kf-radius-md);overflow:hidden;background:var(--kf-color-gray-100)}kf-map.kf-map--sm{height:200px}kf-map.kf-map--md{height:320px}kf-map.kf-map--lg{height:480px}kf-map.kf-map--full{height:100%}kf-map:fullscreen,kf-map:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}.kf-map__container{width:100%;height:100%}.kf-map__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-sm);background:var(--kf-color-gray-100);text-align:center;padding:var(--kf-space-md);box-sizing:border-box}.kf-map__overlay--error{background:var(--kf-color-error-soft)}.kf-map__controls{position:absolute;top:var(--kf-space-sm);right:var(--kf-space-sm);z-index:3}.kf-map__marker{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:3px solid var(--kf-color-white);box-shadow:var(--kf-shadow-md);color:var(--kf-color-white);z-index:1}.kf-map__marker:hover,.kf-map__marker:focus-within{z-index:3}.kf-map__marker--neutral{background:var(--kf-color-gray-700)}.kf-map__marker--ok{background:var(--kf-color-success)}.kf-map__marker--warn{background:var(--kf-color-warning)}.kf-map__marker--error{background:var(--kf-color-error)}.kf-map__marker--info{background:var(--kf-color-info)}.kf-map__marker--live:before{content:\"\";position:absolute;inset:-8px;border-radius:50%;background:var(--kf-color-white);opacity:.45;animation:kf-map-marker-pulse 1.8s ease-out infinite}@keyframes kf-map-marker-pulse{0%{transform:scale(.6);opacity:.45}to{transform:scale(1.6);opacity:0}}.kf-map__marker--clickable{cursor:pointer}.kf-map__marker--clickable:after{content:\"\";position:absolute;inset:-6px;border-radius:50%;transition:background-color .12s ease}.kf-map__marker--clickable:hover:after{background-color:color-mix(in srgb,var(--kf-color-ink) 12%,transparent)}.kf-map__marker--clickable:active{filter:brightness(.85)}.kf-map__marker--clickable:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}@media(prefers-reduced-motion:reduce){.kf-map__marker--clickable:after{transition:none}.kf-map__marker--live:before{animation:none}}.kf-map__cluster-marker{position:absolute;top:0;left:0;border-radius:50%;cursor:pointer}.kf-map__cluster-marker:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}.kf-map__marker-popup{--kf-map-popup-tx: -50%;--kf-map-popup-ty: 4px;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(var(--kf-map-popup-tx),var(--kf-map-popup-ty));display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:240px;max-width:320px;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);padding:var(--kf-space-md);text-align:left;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:4}.kf-map__marker-popup:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--kf-color-white)}.kf-map__marker:hover .kf-map__marker-popup,.kf-map__marker:focus-within .kf-map__marker-popup{opacity:1;transform:translate(var(--kf-map-popup-tx));pointer-events:auto}.kf-map__marker-popup--align-start{left:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--align-end{left:auto;right:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--below{bottom:auto;top:calc(100% + 12px);--kf-map-popup-ty: -4px}.kf-map__marker-popup--below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--kf-color-white)}.kf-map__marker-popup-heading{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-map__marker-popup-tone{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__marker-popup-tone--neutral{background:var(--kf-color-gray-700)}.kf-map__marker-popup-tone--ok{background:var(--kf-color-success)}.kf-map__marker-popup-tone--warn{background:var(--kf-color-warning)}.kf-map__marker-popup-tone--error{background:var(--kf-color-error)}.kf-map__marker-popup-tone--info{background:var(--kf-color-info)}.kf-map__marker-popup-title{font-family:var(--kf-font-mono);font-weight:700;font-size:.9375rem;line-height:1.25;color:var(--kf-color-primary)}.kf-map__marker-popup-description{font-size:.8125rem;line-height:1.4;color:var(--kf-color-text)}.kf-map__marker-popup-details{display:flex;flex-direction:column;gap:4px;margin:2px 0 0;padding:var(--kf-space-xs) 0 0;border-top:1px solid var(--kf-color-border)}.kf-map__marker-popup-detail{display:flex;align-items:baseline;justify-content:space-between;gap:var(--kf-space-sm);margin:0}.kf-map__marker-popup-detail-label{font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted);white-space:nowrap}.kf-map__marker-popup-detail-value{margin:0;font-size:.75rem;font-weight:600;color:var(--kf-color-text);text-align:right}.kf-map__marker-popup-actions{display:flex;gap:var(--kf-space-xs);margin-top:2px}.kf-map__marker-popup-action{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:.75rem;font-weight:700;border:1px solid transparent;border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.kf-map__marker-popup-action-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__marker-popup-action--primary{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-map__marker-popup-action--primary:hover{background:var(--kf-color-primary-hover);border-color:var(--kf-color-primary-hover)}.kf-map__marker-popup-action--ghost{color:var(--kf-color-primary);background:transparent}.kf-map__marker-popup-action--ghost:hover{background:var(--kf-color-primary-soft)}.kf-map__marker-popup-action:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__marker-popup-action svg,.kf-map__cluster-popup-close svg,.kf-map__cluster-popup-expand svg{width:14px;height:14px;flex:none}@media(prefers-reduced-motion:reduce){.kf-map__marker-popup,.kf-map__marker-popup-action{transition:none}}.kf-map__cluster-popup{position:absolute;display:flex;flex-direction:column;width:280px;max-width:calc(100% - 2 * var(--kf-space-sm));background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);overflow:hidden;z-index:5}.kf-map__cluster-popup-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-map__cluster-popup-title{font-weight:700;font-size:.8125rem;color:var(--kf-color-text)}.kf-map__cluster-popup-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-text-muted);cursor:pointer;flex:none}.kf-map__cluster-popup-close:hover{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-map__cluster-popup-close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__cluster-popup-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;margin:0;padding:var(--kf-space-xs) 0;list-style:none}.kf-map__cluster-popup-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-md)}.kf-map__cluster-popup-item--clickable{cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-item--clickable:hover,.kf-map__cluster-popup-item--clickable:focus-visible{background:var(--kf-color-surface);outline:none}.kf-map__cluster-popup-dot{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__cluster-popup-dot--neutral{background:var(--kf-color-gray-700)}.kf-map__cluster-popup-dot--ok{background:var(--kf-color-success)}.kf-map__cluster-popup-dot--warn{background:var(--kf-color-warning)}.kf-map__cluster-popup-dot--error{background:var(--kf-color-error)}.kf-map__cluster-popup-dot--info{background:var(--kf-color-info)}.kf-map__cluster-popup-text{display:flex;flex-direction:column;min-width:0;gap:1px}.kf-map__cluster-popup-item-title{font-weight:600;font-size:.8125rem;color:var(--kf-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-item-description{font-size:.75rem;color:var(--kf-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-map__cluster-popup-expand{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;font:inherit;font-size:.75rem;font-weight:700;color:var(--kf-color-primary);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-expand:hover{background:var(--kf-color-primary-soft)}.kf-map__cluster-popup-expand:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){.kf-map__cluster-popup-item--clickable,.kf-map__cluster-popup-expand{transition:none}}\n"], dependencies: [{ kind: "component", type: MapControls, selector: "kf-map-controls", inputs: ["controls", "clusterActive", "followActive", "canFollow", "isFullscreen", "styleLabel", "activeTheme"], outputs: ["zoomIn", "zoomOut", "recenter", "followToggle", "clusterToggle", "themeSelect", "fullscreenToggle"] }, { kind: "component", type: Spinner, selector: "kf-spinner", inputs: ["size", "label", "onDark"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapView, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-map', imports: [MapControls, Spinner, Icon, Text], encapsulation: ViewEncapsulation.None, host: {
+                        '[class.kf-map--sm]': "size() === 'sm'",
+                        '[class.kf-map--md]': "size() === 'md'",
+                        '[class.kf-map--lg]': "size() === 'lg'",
+                        '[class.kf-map--full]': "size() === 'full'",
+                    }, template: "<div\n  #mapContainer\n  class=\"kf-map__container\"\n  [attr.role]=\"containerRole()\"\n  [attr.aria-label]=\"label()\"\n  [attr.tabindex]=\"isPreview() ? -1 : null\"\n></div>\n\n@if (status() === 'loading') {\n  <div class=\"kf-map__overlay\" aria-live=\"polite\">\n    <kf-spinner label=\"Cargando mapa\u2026\" />\n  </div>\n} @else if (status() === 'error') {\n  <div class=\"kf-map__overlay kf-map__overlay--error\" role=\"alert\">\n    <kf-icon name=\"alert-triangle\" size=\"lg\" />\n    <kf-text as=\"p\" variant=\"body\" tone=\"error\">No pudimos cargar el mapa</kf-text>\n  </div>\n}\n\n@if (showControls()) {\n  <kf-map-controls\n    class=\"kf-map__controls\"\n    [controls]=\"effectiveControls()\"\n    [clusterActive]=\"clusterActive()\"\n    [followActive]=\"followActive()\"\n    [canFollow]=\"hasLiveMarker()\"\n    [isFullscreen]=\"isFullscreen()\"\n    [styleLabel]=\"styleLabel()\"\n    [activeTheme]=\"activeTheme()\"\n    (zoomIn)=\"handleZoomIn()\"\n    (zoomOut)=\"handleZoomOut()\"\n    (recenter)=\"handleRecenter()\"\n    (followToggle)=\"handleFollowToggle()\"\n    (clusterToggle)=\"handleClusterToggle()\"\n    (themeSelect)=\"handleThemeSelect($event)\"\n    (fullscreenToggle)=\"handleFullscreenToggle()\"\n  />\n}\n", styles: ["kf-map{display:block;position:relative;width:100%;border-radius:var(--kf-radius-md);overflow:hidden;background:var(--kf-color-gray-100)}kf-map.kf-map--sm{height:200px}kf-map.kf-map--md{height:320px}kf-map.kf-map--lg{height:480px}kf-map.kf-map--full{height:100%}kf-map:fullscreen,kf-map:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}.kf-map__container{width:100%;height:100%}.kf-map__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-sm);background:var(--kf-color-gray-100);text-align:center;padding:var(--kf-space-md);box-sizing:border-box}.kf-map__overlay--error{background:var(--kf-color-error-soft)}.kf-map__controls{position:absolute;top:var(--kf-space-sm);right:var(--kf-space-sm);z-index:3}.kf-map__marker{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:3px solid var(--kf-color-white);box-shadow:var(--kf-shadow-md);color:var(--kf-color-white);z-index:1}.kf-map__marker:hover,.kf-map__marker:focus-within{z-index:3}.kf-map__marker--neutral{background:var(--kf-color-gray-700)}.kf-map__marker--ok{background:var(--kf-color-success)}.kf-map__marker--warn{background:var(--kf-color-warning)}.kf-map__marker--error{background:var(--kf-color-error)}.kf-map__marker--info{background:var(--kf-color-info)}.kf-map__marker--live:before{content:\"\";position:absolute;inset:-8px;border-radius:50%;background:var(--kf-color-white);opacity:.45;animation:kf-map-marker-pulse 1.8s ease-out infinite}@keyframes kf-map-marker-pulse{0%{transform:scale(.6);opacity:.45}to{transform:scale(1.6);opacity:0}}.kf-map__marker--clickable{cursor:pointer}.kf-map__marker--clickable:after{content:\"\";position:absolute;inset:-6px;border-radius:50%;transition:background-color .12s ease}.kf-map__marker--clickable:hover:after{background-color:color-mix(in srgb,var(--kf-color-ink) 12%,transparent)}.kf-map__marker--clickable:active{filter:brightness(.85)}.kf-map__marker--clickable:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}@media(prefers-reduced-motion:reduce){.kf-map__marker--clickable:after{transition:none}.kf-map__marker--live:before{animation:none}}.kf-map__cluster-marker{position:absolute;top:0;left:0;border-radius:50%;cursor:pointer}.kf-map__cluster-marker:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}.kf-map__marker-popup{--kf-map-popup-tx: -50%;--kf-map-popup-ty: 4px;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(var(--kf-map-popup-tx),var(--kf-map-popup-ty));display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:240px;max-width:320px;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);padding:var(--kf-space-md);text-align:left;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:4}.kf-map__marker-popup:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--kf-color-white)}.kf-map__marker:hover .kf-map__marker-popup,.kf-map__marker:focus-within .kf-map__marker-popup{opacity:1;transform:translate(var(--kf-map-popup-tx));pointer-events:auto}.kf-map__marker-popup--align-start{left:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--align-end{left:auto;right:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--below{bottom:auto;top:calc(100% + 12px);--kf-map-popup-ty: -4px}.kf-map__marker-popup--below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--kf-color-white)}.kf-map__marker-popup-heading{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-map__marker-popup-tone{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__marker-popup-tone--neutral{background:var(--kf-color-gray-700)}.kf-map__marker-popup-tone--ok{background:var(--kf-color-success)}.kf-map__marker-popup-tone--warn{background:var(--kf-color-warning)}.kf-map__marker-popup-tone--error{background:var(--kf-color-error)}.kf-map__marker-popup-tone--info{background:var(--kf-color-info)}.kf-map__marker-popup-title{font-family:var(--kf-font-mono);font-weight:700;font-size:.9375rem;line-height:1.25;color:var(--kf-color-primary)}.kf-map__marker-popup-description{font-size:.8125rem;line-height:1.4;color:var(--kf-color-text)}.kf-map__marker-popup-details{display:flex;flex-direction:column;gap:4px;margin:2px 0 0;padding:var(--kf-space-xs) 0 0;border-top:1px solid var(--kf-color-border)}.kf-map__marker-popup-detail{display:flex;align-items:baseline;justify-content:space-between;gap:var(--kf-space-sm);margin:0}.kf-map__marker-popup-detail-label{font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted);white-space:nowrap}.kf-map__marker-popup-detail-value{margin:0;font-size:.75rem;font-weight:600;color:var(--kf-color-text);text-align:right}.kf-map__marker-popup-actions{display:flex;gap:var(--kf-space-xs);margin-top:2px}.kf-map__marker-popup-action{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:.75rem;font-weight:700;border:1px solid transparent;border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.kf-map__marker-popup-action-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__marker-popup-action--primary{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-map__marker-popup-action--primary:hover{background:var(--kf-color-primary-hover);border-color:var(--kf-color-primary-hover)}.kf-map__marker-popup-action--ghost{color:var(--kf-color-primary);background:transparent}.kf-map__marker-popup-action--ghost:hover{background:var(--kf-color-primary-soft)}.kf-map__marker-popup-action:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__marker-popup-action svg,.kf-map__cluster-popup-close svg,.kf-map__cluster-popup-expand svg{width:14px;height:14px;flex:none}@media(prefers-reduced-motion:reduce){.kf-map__marker-popup,.kf-map__marker-popup-action{transition:none}}.kf-map__cluster-popup{position:absolute;display:flex;flex-direction:column;width:280px;max-width:calc(100% - 2 * var(--kf-space-sm));background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);overflow:hidden;z-index:5}.kf-map__cluster-popup-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-map__cluster-popup-title{font-weight:700;font-size:.8125rem;color:var(--kf-color-text)}.kf-map__cluster-popup-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-text-muted);cursor:pointer;flex:none}.kf-map__cluster-popup-close:hover{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-map__cluster-popup-close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__cluster-popup-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;margin:0;padding:var(--kf-space-xs) 0;list-style:none}.kf-map__cluster-popup-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-md)}.kf-map__cluster-popup-item--clickable{cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-item--clickable:hover,.kf-map__cluster-popup-item--clickable:focus-visible{background:var(--kf-color-surface);outline:none}.kf-map__cluster-popup-dot{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__cluster-popup-dot--neutral{background:var(--kf-color-gray-700)}.kf-map__cluster-popup-dot--ok{background:var(--kf-color-success)}.kf-map__cluster-popup-dot--warn{background:var(--kf-color-warning)}.kf-map__cluster-popup-dot--error{background:var(--kf-color-error)}.kf-map__cluster-popup-dot--info{background:var(--kf-color-info)}.kf-map__cluster-popup-text{display:flex;flex-direction:column;min-width:0;gap:1px}.kf-map__cluster-popup-item-title{font-weight:600;font-size:.8125rem;color:var(--kf-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-item-description{font-size:.75rem;color:var(--kf-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-map__cluster-popup-expand{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;font:inherit;font-size:.75rem;font-weight:700;color:var(--kf-color-primary);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-expand:hover{background:var(--kf-color-primary-soft)}.kf-map__cluster-popup-expand:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){.kf-map__cluster-popup-item--clickable,.kf-map__cluster-popup-expand{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], fitToMarkers: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToMarkers", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], markerSelect: [{ type: i0.Output, args: ["markerSelect"] }], markerAction: [{ type: i0.Output, args: ["markerAction"] }], containerRef: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of ui/map — entry point secundario, `@kaufmann-lab/ui/map`.
+ *
+ * `kf-map`/`MapView` (y todo lo que depende de `mapbox-gl`) vivía en el
+ * barrel principal (`projects/ui/src/public-api.ts`) hasta acá. Se movió a un
+ * entry point secundario para que un consumidor que NO usa el mapa no
+ * arrastre `mapbox-gl` a su bundle inicial solo por importar cualquier otro
+ * símbolo de `@kaufmann-lab/ui` — confirmado con un build real de producción
+ * de un consumidor sin `<kf-map>` en ningún componente: ni siquiera migrar
+ * `mapbox-gl` a su subpath ESM (`mapbox-gl/esm`, ver el comentario en
+ * `MapView.ts`) alcanzaba para que el tree-shaking de esbuild lo eliminara
+ * del bundle inicial estando en el barrel único — 1.28 MB igual, con
+ * `hd-main`/`standard-main`/`lite-main`/`debug`/`raster_array-main` (chunks
+ * internos de `mapbox-gl`) apareciendo como lazy chunks de todos modos.
+ *
+ * Los archivos fuente viven acá (`./lib/map/`), no reexportados desde otro
+ * directorio: ng-packagr calcula un `rootDir` propio POR entry point (el
+ * directorio del `entryFile`) y rechaza cualquier archivo fuente importado
+ * desde afuera de ese `rootDir` (`TS6059: File '...' is not under
+ * 'rootDir'`) — cada entry point de Angular Package Format es su propio
+ * proyecto TypeScript autocontenido, no una vista alternativa del mismo árbol
+ * de archivos. `MapView.ts`/`MapControls.ts`/`MapThemePicker.ts` importan
+ * `Icon`/`Spinner`/`Text`/`Button`/`Dropdown`/`DropdownPanel`/
+ * `TooltipDirective` desde `'@kaufmann-lab/ui/core'` y
+ * `handleArrowKeyNavigation` desde `'@kaufmann-lab/ui/shared'` (el paquete, no
+ * una ruta relativa) — el patrón estándar para que un entry point secundario
+ * reuse piezas de otro (mismo patrón que Angular Material: cada entry point
+ * de `@angular/material/*` es autocontenido y consume `@angular/cdk` como
+ * dependencia real, no con imports relativos cruzando paquetes). Nunca desde
+ * la raíz `'@kaufmann-lab/ui'`: es un agregador que depende de todos los
+ * entry points, no de vuelta.
+ *
+ * CAMBIO DE API PÚBLICA: cualquier consumidor que hoy importe `MapView`,
+ * `MapControls`, `MapMarker`, `provideMapConfig`, `MAP_CONFIG`, `MapTheme`,
+ * etc. desde `'@kaufmann-lab/ui'` tiene que migrar esos imports a
+ * `'@kaufmann-lab/ui/map'` — ver `route-assistance-monorepo` (único
+ * consumidor real de `kf-map` hoy), pendiente de migrar sus imports, no
+ * hecho automáticamente por este cambio.
+ *
+ * `allowedNonPeerDependencies: ["mapbox-gl"]` sigue viviendo en el
+ * `ng-package.json` del entry point PRIMARIO (`projects/ui/ng-package.json`),
+ * no acá — ng-packagr solo lee esa clave del entry point primario
+ * (`NgPackage.allowedNonPeerDependencies` en su código fuente hace
+ * `this.primary.$get(...)`, nunca del secundario), aunque `mapbox-gl` ya no
+ * lo importe el primario. Declararla acá también rompe el build: el schema
+ * de un entry point SECUNDARIO no admite esa clave (`additionalProperties`).
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MAP_CONFIG, MapControls, MapView, STYLE_BY_THEME, THEME_LABEL, THEME_ORDER, provideMapConfig };
+//# sourceMappingURL=kaufmann-lab-ui-map.mjs.map