maplibre-gl-components 0.6.0 → 0.7.0

package/dist/{InspectControl-Dh8CfVpv.cjs → ViewStateControl-BZNDy3xx.cjs}

@@ -455,7 +455,7 @@ const GOOGLE_BASEMAPS = [
     maxZoom: 22
   }
 ];
-const DEFAULT_OPTIONS$7 = {
+const DEFAULT_OPTIONS$8 = {
   colormap: "viridis",
   colorStops: [],
   vmin: 0,
@@ -492,7 +492,7 @@ class Colorbar {
     __publicField(this, "_map");
     __publicField(this, "_handleZoom");
     __publicField(this, "_zoomVisible", true);
-    this._options = { ...DEFAULT_OPTIONS$7, ...options };
+    this._options = { ...DEFAULT_OPTIONS$8, ...options };
     this._state = {
       visible: this._options.visible,
       vmin: this._options.vmin,
@@ -790,7 +790,7 @@ class Colorbar {
     this._container.appendChild(barWrapper);
   }
 }
-const DEFAULT_OPTIONS$6 = {
+const DEFAULT_OPTIONS$7 = {
   title: "",
   items: [],
   position: "bottom-left",
@@ -824,7 +824,7 @@ class Legend {
     __publicField(this, "_map");
     __publicField(this, "_handleZoom");
     __publicField(this, "_zoomVisible", true);
-    this._options = { ...DEFAULT_OPTIONS$6, ...options };
+    this._options = { ...DEFAULT_OPTIONS$7, ...options };
     this._state = {
       visible: this._options.visible,
       collapsed: this._options.collapsed,
@@ -1179,7 +1179,7 @@ class Legend {
     this._container.appendChild(content);
   }
 }
-const DEFAULT_OPTIONS$5 = {
+const DEFAULT_OPTIONS$6 = {
   html: "",
   element: void 0,
   title: "",
@@ -1214,7 +1214,7 @@ class HtmlControl {
     __publicField(this, "_map");
     __publicField(this, "_handleZoom");
     __publicField(this, "_zoomVisible", true);
-    this._options = { ...DEFAULT_OPTIONS$5, ...options };
+    this._options = { ...DEFAULT_OPTIONS$6, ...options };
     this._state = {
       visible: this._options.visible,
       collapsed: this._options.collapsed,
@@ -1510,7 +1510,7 @@ class HtmlControl {
     this._container.appendChild(content);
   }
 }
-const DEFAULT_OPTIONS$4 = {
+const DEFAULT_OPTIONS$5 = {
   basemaps: [],
   providersUrl: XYZSERVICES_URL,
   defaultBasemap: "",
@@ -1554,7 +1554,7 @@ class BasemapControl {
     __publicField(this, "_map");
     __publicField(this, "_handleZoom");
     __publicField(this, "_zoomVisible", true);
-    this._options = { ...DEFAULT_OPTIONS$4, ...options };
+    this._options = { ...DEFAULT_OPTIONS$5, ...options };
     this._state = {
       visible: this._options.visible,
       collapsed: this._options.collapsed,
@@ -2353,7 +2353,7 @@ class BasemapControl {
 const DEFAULT_TERRAIN_URL = "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png";
 const TERRAIN_SOURCE_ID = "maplibre-gl-terrain-dem";
 const HILLSHADE_LAYER_ID = "maplibre-gl-terrain-hillshade";
-const DEFAULT_OPTIONS$3 = {
+const DEFAULT_OPTIONS$4 = {
   sourceUrl: DEFAULT_TERRAIN_URL,
   encoding: "terrarium",
   exaggeration: 1,
@@ -2389,7 +2389,7 @@ class TerrainControl {
     __publicField(this, "_handleZoom");
     __publicField(this, "_handleStyleLoad");
     __publicField(this, "_zoomVisible", true);
-    this._options = { ...DEFAULT_OPTIONS$3, ...options };
+    this._options = { ...DEFAULT_OPTIONS$4, ...options };
     this._state = {
       visible: this._options.visible,
       enabled: this._options.enabled,
@@ -2788,7 +2788,7 @@ class TerrainControl {
   }
 }
 const NOMINATIM_URL = "https://nominatim.openstreetmap.org/search";
-const DEFAULT_OPTIONS$2 = {
+const DEFAULT_OPTIONS$3 = {
   position: "top-right",
   className: "",
   visible: true,
@@ -2846,7 +2846,7 @@ class SearchControl {
         this.search(value);
       }, this._options.debounceMs);
     });
-    this._options = { ...DEFAULT_OPTIONS$2, ...options };
+    this._options = { ...DEFAULT_OPTIONS$3, ...options };
     this._state = {
       visible: this._options.visible,
       collapsed: this._options.collapsed,
@@ -3804,7 +3804,7 @@ const DEFAULT_STYLE = {
   circleStrokeColor: "#ffffff",
   circleStrokeWidth: 2
 };
-const DEFAULT_OPTIONS$1 = {
+const DEFAULT_OPTIONS$2 = {
   position: "top-right",
   className: "",
   visible: true,
@@ -3851,10 +3851,10 @@ class VectorDatasetControl {
     __publicField(this, "_loadingOverlay");
     __publicField(this, "_loadingText");
     __publicField(this, "_loadingProgress");
-    const enableAdvanced = (options == null ? void 0 : options.enableAdvancedFormats) ?? DEFAULT_OPTIONS$1.enableAdvancedFormats;
+    const enableAdvanced = (options == null ? void 0 : options.enableAdvancedFormats) ?? DEFAULT_OPTIONS$2.enableAdvancedFormats;
     const acceptedExtensions = (options == null ? void 0 : options.acceptedExtensions) ?? getAcceptedExtensions(enableAdvanced);
     this._options = {
-      ...DEFAULT_OPTIONS$1,
+      ...DEFAULT_OPTIONS$2,
       ...options,
       acceptedExtensions,
       defaultStyle: { ...DEFAULT_STYLE, ...options == null ? void 0 : options.defaultStyle }
@@ -4609,7 +4609,7 @@ const DEFAULT_HIGHLIGHT_STYLE = {
   circleRadius: 10,
   circleStrokeWidth: 3
 };
-const DEFAULT_OPTIONS = {
+const DEFAULT_OPTIONS$1 = {
   position: "top-right",
   className: "",
   visible: true,
@@ -4653,7 +4653,7 @@ class InspectControl {
     // Bound event handlers for proper cleanup
     __publicField(this, "_boundClickHandler");
     this._options = {
-      ...DEFAULT_OPTIONS,
+      ...DEFAULT_OPTIONS$1,
       ...options,
       highlightStyle: { ...DEFAULT_HIGHLIGHT_STYLE, ...options == null ? void 0 : options.highlightStyle }
     };
@@ -5309,6 +5309,738 @@ class InspectControl {
     this._container.style.display = shouldShow ? "block" : "none";
   }
 }
+const DEFAULT_OPTIONS = {
+  position: "bottom-left",
+  className: "",
+  visible: true,
+  collapsed: true,
+  precision: 4,
+  showCenter: true,
+  showBounds: true,
+  showZoom: true,
+  showPitch: true,
+  showBearing: true,
+  enableBBox: false,
+  bboxFillColor: "rgba(0, 120, 215, 0.1)",
+  bboxStrokeColor: "#0078d7",
+  bboxStrokeWidth: 2,
+  panelWidth: 280,
+  backgroundColor: "rgba(255, 255, 255, 0.95)",
+  borderRadius: 4,
+  opacity: 1,
+  fontSize: 12,
+  fontColor: "#333",
+  minzoom: 0,
+  maxzoom: 24
+};
+const VIEWSTATE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>`;
+const COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+const BBOX_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1" stroke-dasharray="4 2"/></svg>`;
+class ViewStateControl {
+  /**
+   * Creates a new ViewStateControl instance.
+   *
+   * @param options - Configuration options for the control.
+   */
+  constructor(options) {
+    __publicField(this, "_container");
+    __publicField(this, "_button");
+    __publicField(this, "_panel");
+    __publicField(this, "_options");
+    __publicField(this, "_state");
+    __publicField(this, "_eventHandlers", /* @__PURE__ */ new Map());
+    __publicField(this, "_map");
+    __publicField(this, "_handleZoom");
+    __publicField(this, "_zoomVisible", true);
+    // DOM references for live updates
+    __publicField(this, "_centerValueEl");
+    __publicField(this, "_boundsValueEl");
+    __publicField(this, "_zoomValueEl");
+    __publicField(this, "_pitchValueEl");
+    __publicField(this, "_bearingValueEl");
+    // Move handler for live updates
+    __publicField(this, "_boundMoveHandler");
+    // BBox drawing state
+    __publicField(this, "_bboxSourceId", "");
+    __publicField(this, "_bboxLayerFillId", "");
+    __publicField(this, "_bboxLayerLineId", "");
+    __publicField(this, "_bboxDrawStart");
+    __publicField(this, "_boundBBoxMouseDown");
+    __publicField(this, "_boundBBoxMouseMove");
+    __publicField(this, "_boundBBoxMouseUp");
+    __publicField(this, "_boundBBoxDragStart");
+    __publicField(this, "_bboxToggleBtn");
+    __publicField(this, "_bboxResultEl");
+    this._options = { ...DEFAULT_OPTIONS, ...options };
+    this._state = {
+      visible: this._options.visible,
+      collapsed: this._options.collapsed,
+      center: [0, 0],
+      bounds: [0, 0, 0, 0],
+      zoom: 0,
+      pitch: 0,
+      bearing: 0,
+      drawingBBox: false,
+      drawnBBox: null
+    };
+    const uid = generateId("viewstate");
+    this._bboxSourceId = `${uid}-bbox-src`;
+    this._bboxLayerFillId = `${uid}-bbox-fill`;
+    this._bboxLayerLineId = `${uid}-bbox-line`;
+  }
+  /**
+   * Called when the control is added to the map.
+   *
+   * @param map - The MapLibre GL map instance.
+   * @returns The control's container element.
+   */
+  onAdd(map) {
+    this._map = map;
+    this._readMapState();
+    this._container = this._createContainer();
+    this._handleZoom = () => this._checkZoomVisibility();
+    this._map.on("zoom", this._handleZoom);
+    this._checkZoomVisibility();
+    this._boundMoveHandler = () => this._onMapMove();
+    this._map.on("move", this._boundMoveHandler);
+    return this._container;
+  }
+  /**
+   * Called when the control is removed from the map.
+   */
+  onRemove() {
+    var _a, _b;
+    if (this._map) {
+      if (this._handleZoom) {
+        this._map.off("zoom", this._handleZoom);
+        this._handleZoom = void 0;
+      }
+      if (this._boundMoveHandler) {
+        this._map.off("move", this._boundMoveHandler);
+        this._boundMoveHandler = void 0;
+      }
+      if (this._state.drawingBBox) {
+        this._stopBBoxDrawing();
+      }
+      this._removeBBoxLayers();
+    }
+    this._map = void 0;
+    (_b = (_a = this._container) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._container);
+    this._container = void 0;
+    this._button = void 0;
+    this._panel = void 0;
+    this._centerValueEl = void 0;
+    this._boundsValueEl = void 0;
+    this._zoomValueEl = void 0;
+    this._pitchValueEl = void 0;
+    this._bearingValueEl = void 0;
+    this._bboxToggleBtn = void 0;
+    this._bboxResultEl = void 0;
+    this._eventHandlers.clear();
+  }
+  /**
+   * Expands the info panel.
+   */
+  expand() {
+    if (this._state.collapsed) {
+      this._state.collapsed = false;
+      this._updatePanelVisibility();
+      this._updateButtonState();
+      this._emit("expand");
+    }
+  }
+  /**
+   * Collapses the info panel.
+   */
+  collapse() {
+    if (!this._state.collapsed) {
+      this._state.collapsed = true;
+      this._updatePanelVisibility();
+      this._updateButtonState();
+      this._emit("collapse");
+    }
+  }
+  /**
+   * Toggles the panel expanded/collapsed state.
+   */
+  toggle() {
+    if (this._state.collapsed) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+  }
+  /**
+   * Returns whether the panel is collapsed.
+   */
+  isCollapsed() {
+    return this._state.collapsed;
+  }
+  /**
+   * Shows the control.
+   */
+  show() {
+    if (!this._state.visible) {
+      this._state.visible = true;
+      this._updateDisplayState();
+      this._emit("show");
+    }
+  }
+  /**
+   * Hides the control.
+   */
+  hide() {
+    if (this._state.visible) {
+      this._state.visible = false;
+      this._updateDisplayState();
+      this._emit("hide");
+    }
+  }
+  /**
+   * Returns a copy of the current state.
+   */
+  getState() {
+    return { ...this._state };
+  }
+  /**
+   * Starts bounding box drawing mode.
+   */
+  startBBoxDraw() {
+    if (!this._options.enableBBox || this._state.drawingBBox) return;
+    this._state.drawingBBox = true;
+    this._setupBBoxListeners();
+    this._updateBBoxToggleState();
+    this._emit("drawstart");
+  }
+  /**
+   * Stops bounding box drawing mode.
+   */
+  stopBBoxDraw() {
+    if (!this._state.drawingBBox) return;
+    this._stopBBoxDrawing();
+    this._emit("drawend");
+  }
+  /**
+   * Clears the drawn bounding box.
+   */
+  clearBBox() {
+    this._state.drawnBBox = null;
+    this._removeBBoxLayers();
+    this._updateBBoxResult();
+    this._emit("bboxclear");
+  }
+  /**
+   * Updates the control options.
+   */
+  update(options) {
+    Object.assign(this._options, options);
+    if (options.visible !== void 0) {
+      this._state.visible = options.visible;
+      this._updateDisplayState();
+    }
+    if (options.collapsed !== void 0) {
+      this._state.collapsed = options.collapsed;
+      this._updatePanelVisibility();
+      this._updateButtonState();
+    }
+    if (options.panelWidth !== void 0 && this._panel) {
+      this._panel.style.width = `${options.panelWidth}px`;
+    }
+    this._emit("update");
+  }
+  /**
+   * Registers an event handler.
+   */
+  on(event, handler) {
+    if (!this._eventHandlers.has(event)) {
+      this._eventHandlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this._eventHandlers.get(event).add(handler);
+  }
+  /**
+   * Removes an event handler.
+   */
+  off(event, handler) {
+    var _a;
+    (_a = this._eventHandlers.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  /**
+   * Emits an event to all registered handlers.
+   */
+  _emit(event, bbox) {
+    const handlers = this._eventHandlers.get(event);
+    if (handlers) {
+      handlers.forEach(
+        (handler) => handler({
+          type: event,
+          state: this.getState(),
+          bbox
+        })
+      );
+    }
+  }
+  /**
+   * Reads the current map state into internal state.
+   */
+  _readMapState() {
+    if (!this._map) return;
+    const center = this._map.getCenter();
+    const bounds = this._map.getBounds();
+    this._state.center = [center.lng, center.lat];
+    this._state.bounds = [
+      bounds.getWest(),
+      bounds.getSouth(),
+      bounds.getEast(),
+      bounds.getNorth()
+    ];
+    this._state.zoom = this._map.getZoom();
+    this._state.pitch = this._map.getPitch();
+    this._state.bearing = this._map.getBearing();
+  }
+  /**
+   * Handles map move events for live updates.
+   */
+  _onMapMove() {
+    this._readMapState();
+    this._updateValues();
+    this._emit("viewchange");
+  }
+  /**
+   * Updates the DOM value elements with current state.
+   */
+  _updateValues() {
+    const p = this._options.precision;
+    if (this._centerValueEl) {
+      this._centerValueEl.textContent = `${this._state.center[0].toFixed(p)}, ${this._state.center[1].toFixed(p)}`;
+    }
+    if (this._boundsValueEl) {
+      const b = this._state.bounds;
+      this._boundsValueEl.textContent = `${b[0].toFixed(p)}, ${b[1].toFixed(p)}, ${b[2].toFixed(p)}, ${b[3].toFixed(p)}`;
+    }
+    if (this._zoomValueEl) {
+      this._zoomValueEl.textContent = this._state.zoom.toFixed(2);
+    }
+    if (this._pitchValueEl) {
+      this._pitchValueEl.textContent = `${this._state.pitch.toFixed(1)}°`;
+    }
+    if (this._bearingValueEl) {
+      this._bearingValueEl.textContent = `${this._state.bearing.toFixed(1)}°`;
+    }
+  }
+  /**
+   * Creates the control container with button and panel.
+   */
+  _createContainer() {
+    const container = document.createElement("div");
+    container.className = `maplibregl-ctrl maplibregl-ctrl-group maplibre-gl-view-state ${this._options.className}`.trim();
+    if (this._options.backgroundColor) {
+      container.style.backgroundColor = this._options.backgroundColor;
+    }
+    if (this._options.borderRadius) {
+      container.style.borderRadius = `${this._options.borderRadius}px`;
+    }
+    if (this._options.opacity !== void 0 && this._options.opacity !== 1) {
+      container.style.opacity = String(this._options.opacity);
+    }
+    this._button = document.createElement("button");
+    this._button.type = "button";
+    this._button.className = "maplibre-gl-view-state-button";
+    this._button.title = "View map state";
+    this._button.innerHTML = VIEWSTATE_ICON;
+    this._button.addEventListener("click", () => this.toggle());
+    container.appendChild(this._button);
+    this._panel = this._createPanel();
+    container.appendChild(this._panel);
+    container.style.display = this._state.visible ? "block" : "none";
+    this._updatePanelVisibility();
+    this._updateButtonState();
+    return container;
+  }
+  /**
+   * Creates the expandable info panel.
+   */
+  _createPanel() {
+    const panel = document.createElement("div");
+    panel.className = "maplibre-gl-view-state-panel";
+    panel.style.width = `${this._options.panelWidth}px`;
+    if (this._options.fontSize) {
+      panel.style.fontSize = `${this._options.fontSize}px`;
+    }
+    if (this._options.fontColor) {
+      panel.style.color = this._options.fontColor;
+    }
+    const header = document.createElement("div");
+    header.className = "maplibre-gl-view-state-header";
+    header.textContent = "View State";
+    panel.appendChild(header);
+    const p = this._options.precision;
+    if (this._options.showCenter) {
+      const { row, valueEl } = this._createRow(
+        "Center",
+        `${this._state.center[0].toFixed(p)}, ${this._state.center[1].toFixed(p)}`
+      );
+      this._centerValueEl = valueEl;
+      panel.appendChild(row);
+    }
+    if (this._options.showBounds) {
+      const b = this._state.bounds;
+      const { row, valueEl } = this._createRow(
+        "Bounds",
+        `${b[0].toFixed(p)}, ${b[1].toFixed(p)}, ${b[2].toFixed(p)}, ${b[3].toFixed(p)}`
+      );
+      this._boundsValueEl = valueEl;
+      panel.appendChild(row);
+    }
+    if (this._options.showZoom) {
+      const { row, valueEl } = this._createRow("Zoom", this._state.zoom.toFixed(2));
+      this._zoomValueEl = valueEl;
+      panel.appendChild(row);
+    }
+    if (this._options.showPitch) {
+      const { row, valueEl } = this._createRow("Pitch", `${this._state.pitch.toFixed(1)}°`);
+      this._pitchValueEl = valueEl;
+      panel.appendChild(row);
+    }
+    if (this._options.showBearing) {
+      const { row, valueEl } = this._createRow("Bearing", `${this._state.bearing.toFixed(1)}°`);
+      this._bearingValueEl = valueEl;
+      panel.appendChild(row);
+    }
+    if (this._options.enableBBox) {
+      panel.appendChild(this._createBBoxSection());
+    }
+    return panel;
+  }
+  /**
+   * Creates a labeled data row with a copy button.
+   */
+  _createRow(label, value) {
+    const row = document.createElement("div");
+    row.className = "maplibre-gl-view-state-row";
+    const labelEl = document.createElement("span");
+    labelEl.className = "maplibre-gl-view-state-label";
+    labelEl.textContent = label;
+    const valueEl = document.createElement("span");
+    valueEl.className = "maplibre-gl-view-state-value";
+    valueEl.textContent = value;
+    const copyBtn = document.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "maplibre-gl-view-state-copy";
+    copyBtn.title = `Copy ${label.toLowerCase()}`;
+    copyBtn.innerHTML = COPY_ICON;
+    copyBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._copyToClipboard(valueEl.textContent || "", copyBtn);
+    });
+    row.appendChild(labelEl);
+    row.appendChild(valueEl);
+    row.appendChild(copyBtn);
+    return { row, valueEl };
+  }
+  /**
+   * Creates the bounding box drawing section.
+   */
+  _createBBoxSection() {
+    const section = document.createElement("div");
+    section.className = "maplibre-gl-view-state-bbox-section";
+    this._bboxToggleBtn = document.createElement("button");
+    this._bboxToggleBtn.type = "button";
+    this._bboxToggleBtn.className = "maplibre-gl-view-state-bbox-toggle";
+    this._bboxToggleBtn.innerHTML = `${BBOX_ICON} Draw BBox`;
+    this._bboxToggleBtn.addEventListener("click", () => {
+      if (this._state.drawingBBox) {
+        this.stopBBoxDraw();
+      } else {
+        this.startBBoxDraw();
+      }
+    });
+    section.appendChild(this._bboxToggleBtn);
+    this._bboxResultEl = document.createElement("div");
+    this._bboxResultEl.className = "maplibre-gl-view-state-bbox-result";
+    this._bboxResultEl.style.display = "none";
+    section.appendChild(this._bboxResultEl);
+    return section;
+  }
+  /**
+   * Updates the bbox result display.
+   */
+  _updateBBoxResult() {
+    if (!this._bboxResultEl) return;
+    if (!this._state.drawnBBox) {
+      this._bboxResultEl.style.display = "none";
+      return;
+    }
+    this._bboxResultEl.style.display = "block";
+    const b = this._state.drawnBBox;
+    const p = this._options.precision;
+    const bboxStr = `${b[0].toFixed(p)}, ${b[1].toFixed(p)}, ${b[2].toFixed(p)}, ${b[3].toFixed(p)}`;
+    this._bboxResultEl.innerHTML = "";
+    const valueDiv = document.createElement("div");
+    valueDiv.className = "maplibre-gl-view-state-bbox-value";
+    valueDiv.textContent = bboxStr;
+    this._bboxResultEl.appendChild(valueDiv);
+    const actionsDiv = document.createElement("div");
+    actionsDiv.className = "maplibre-gl-view-state-bbox-actions";
+    const copyBtn = document.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "maplibre-gl-view-state-bbox-action";
+    copyBtn.innerHTML = `${COPY_ICON} Copy`;
+    copyBtn.addEventListener("click", () => {
+      this._copyToClipboard(bboxStr, copyBtn);
+    });
+    actionsDiv.appendChild(copyBtn);
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "maplibre-gl-view-state-bbox-action maplibre-gl-view-state-bbox-action--clear";
+    clearBtn.textContent = "Clear";
+    clearBtn.addEventListener("click", () => this.clearBBox());
+    actionsDiv.appendChild(clearBtn);
+    this._bboxResultEl.appendChild(actionsDiv);
+  }
+  /**
+   * Copies text to clipboard and shows feedback on the button.
+   */
+  _copyToClipboard(text, btn) {
+    navigator.clipboard.writeText(text).then(() => {
+      const originalHtml = btn.innerHTML;
+      btn.innerHTML = CHECK_ICON;
+      setTimeout(() => {
+        btn.innerHTML = originalHtml;
+      }, 1e3);
+    }).catch(() => {
+    });
+  }
+  /**
+   * Updates the panel visibility based on collapsed state.
+   */
+  _updatePanelVisibility() {
+    if (this._panel) {
+      if (this._state.collapsed) {
+        this._panel.classList.remove("maplibre-gl-view-state-panel--visible");
+      } else {
+        this._panel.classList.add("maplibre-gl-view-state-panel--visible");
+      }
+    }
+  }
+  /**
+   * Updates the button's active state appearance.
+   */
+  _updateButtonState() {
+    if (this._button) {
+      if (!this._state.collapsed) {
+        this._button.classList.add("maplibre-gl-view-state-button--active");
+        this._button.title = "Hide view state";
+      } else {
+        this._button.classList.remove("maplibre-gl-view-state-button--active");
+        this._button.title = "View map state";
+      }
+    }
+  }
+  /**
+   * Updates the bbox toggle button state.
+   */
+  _updateBBoxToggleState() {
+    if (this._bboxToggleBtn) {
+      if (this._state.drawingBBox) {
+        this._bboxToggleBtn.classList.add("maplibre-gl-view-state-bbox-toggle--active");
+        this._bboxToggleBtn.innerHTML = `${BBOX_ICON} Cancel Draw`;
+      } else {
+        this._bboxToggleBtn.classList.remove("maplibre-gl-view-state-bbox-toggle--active");
+        this._bboxToggleBtn.innerHTML = `${BBOX_ICON} Draw BBox`;
+      }
+    }
+  }
+  /**
+   * Converts a native MouseEvent to map lng/lat using map.unproject().
+   */
+  _mouseEventToLngLat(e) {
+    const canvas = this._map.getCanvas();
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const lngLat = this._map.unproject([x, y]);
+    return { lng: lngLat.lng, lat: lngLat.lat };
+  }
+  /**
+   * Sets up mouse listeners for bbox drawing.
+   */
+  _setupBBoxListeners() {
+    if (!this._map) return;
+    const canvas = this._map.getCanvas();
+    canvas.style.cursor = "crosshair";
+    this._map.dragPan.disable();
+    this._map.boxZoom.disable();
+    this._boundBBoxMouseDown = (e) => this._onBBoxMouseDown(e);
+    this._map.on("mousedown", this._boundBBoxMouseDown);
+    this._boundBBoxDragStart = (e) => e.preventDefault();
+    canvas.addEventListener("dragstart", this._boundBBoxDragStart);
+  }
+  /**
+   * Removes bbox drawing listeners and restores map state.
+   */
+  _stopBBoxDrawing() {
+    if (!this._map) return;
+    const canvas = this._map.getCanvas();
+    canvas.style.cursor = "";
+    this._map.dragPan.enable();
+    this._map.boxZoom.enable();
+    if (this._boundBBoxMouseDown) {
+      this._map.off("mousedown", this._boundBBoxMouseDown);
+      this._boundBBoxMouseDown = void 0;
+    }
+    if (this._boundBBoxMouseMove) {
+      document.removeEventListener("mousemove", this._boundBBoxMouseMove);
+      this._boundBBoxMouseMove = void 0;
+    }
+    if (this._boundBBoxMouseUp) {
+      document.removeEventListener("mouseup", this._boundBBoxMouseUp);
+      this._boundBBoxMouseUp = void 0;
+    }
+    if (this._boundBBoxDragStart) {
+      canvas.removeEventListener("dragstart", this._boundBBoxDragStart);
+      this._boundBBoxDragStart = void 0;
+    }
+    this._bboxDrawStart = void 0;
+    this._state.drawingBBox = false;
+    this._updateBBoxToggleState();
+  }
+  /**
+   * Handles mouse down for bbox drawing start.
+   */
+  _onBBoxMouseDown(e) {
+    if (!this._map) return;
+    e.preventDefault();
+    e.originalEvent.preventDefault();
+    e.originalEvent.stopPropagation();
+    const lng = e.lngLat.lng;
+    const lat = e.lngLat.lat;
+    this._bboxDrawStart = { lng, lat };
+    this._removeBBoxLayers();
+    const pt = [lng, lat];
+    this._map.addSource(this._bboxSourceId, {
+      type: "geojson",
+      data: {
+        type: "Feature",
+        geometry: { type: "Polygon", coordinates: [[pt, pt, pt, pt, pt]] },
+        properties: {}
+      }
+    });
+    this._map.addLayer({
+      id: this._bboxLayerFillId,
+      type: "fill",
+      source: this._bboxSourceId,
+      paint: {
+        "fill-color": this._options.bboxFillColor,
+        "fill-opacity": 1
+      }
+    });
+    this._map.addLayer({
+      id: this._bboxLayerLineId,
+      type: "line",
+      source: this._bboxSourceId,
+      paint: {
+        "line-color": this._options.bboxStrokeColor,
+        "line-width": this._options.bboxStrokeWidth
+      }
+    });
+    this._boundBBoxMouseMove = (ev) => this._onBBoxMouseMove(ev);
+    this._boundBBoxMouseUp = (ev) => this._onBBoxMouseUp(ev);
+    document.addEventListener("mousemove", this._boundBBoxMouseMove);
+    document.addEventListener("mouseup", this._boundBBoxMouseUp);
+  }
+  /**
+   * Handles mouse move during bbox drawing.
+   */
+  _onBBoxMouseMove(e) {
+    if (!this._map || !this._bboxDrawStart) return;
+    const start = this._bboxDrawStart;
+    const current = this._mouseEventToLngLat(e);
+    const coords = [
+      [start.lng, start.lat],
+      [current.lng, start.lat],
+      [current.lng, current.lat],
+      [start.lng, current.lat],
+      [start.lng, start.lat]
+    ];
+    const source = this._map.getSource(this._bboxSourceId);
+    if (source) {
+      source.setData({
+        type: "Feature",
+        geometry: { type: "Polygon", coordinates: [coords] },
+        properties: {}
+      });
+    }
+  }
+  /**
+   * Handles mouse up to complete bbox drawing.
+   */
+  _onBBoxMouseUp(e) {
+    if (!this._map || !this._bboxDrawStart) return;
+    const start = this._bboxDrawStart;
+    const end = this._mouseEventToLngLat(e);
+    const west = Math.min(start.lng, end.lng);
+    const south = Math.min(start.lat, end.lat);
+    const east = Math.max(start.lng, end.lng);
+    const north = Math.max(start.lat, end.lat);
+    this._state.drawnBBox = [west, south, east, north];
+    this._updateBBoxResult();
+    const coords = [
+      [west, south],
+      [east, south],
+      [east, north],
+      [west, north],
+      [west, south]
+    ];
+    const source = this._map.getSource(this._bboxSourceId);
+    if (source) {
+      source.setData({
+        type: "Feature",
+        geometry: { type: "Polygon", coordinates: [coords] },
+        properties: {}
+      });
+    }
+    this._stopBBoxDrawing();
+    this._emit("bboxdraw", this._state.drawnBBox);
+    this._emit("drawend");
+  }
+  /**
+   * Removes bbox layers and source from the map.
+   */
+  _removeBBoxLayers() {
+    if (!this._map) return;
+    if (this._map.getLayer(this._bboxLayerFillId)) {
+      this._map.removeLayer(this._bboxLayerFillId);
+    }
+    if (this._map.getLayer(this._bboxLayerLineId)) {
+      this._map.removeLayer(this._bboxLayerLineId);
+    }
+    if (this._map.getSource(this._bboxSourceId)) {
+      this._map.removeSource(this._bboxSourceId);
+    }
+  }
+  /**
+   * Checks zoom visibility and updates display state.
+   */
+  _checkZoomVisibility() {
+    if (!this._map) return;
+    const zoom = this._map.getZoom();
+    const { minzoom, maxzoom } = this._options;
+    const inRange = zoom >= minzoom && zoom <= maxzoom;
+    if (inRange !== this._zoomVisible) {
+      this._zoomVisible = inRange;
+      this._updateDisplayState();
+    }
+  }
+  /**
+   * Updates the display state based on visibility settings.
+   */
+  _updateDisplayState() {
+    if (!this._container) return;
+    const shouldShow = this._state.visible && this._zoomVisible;
+    this._container.style.display = shouldShow ? "block" : "none";
+  }
+}
 exports.ADVANCED_EXTENSIONS = ADVANCED_EXTENSIONS;
 exports.ALL_EXTENSIONS = ALL_EXTENSIONS;
 exports.BasemapControl = BasemapControl;
@@ -5338,6 +6070,7 @@ exports.SearchControl = SearchControl;
 exports.TOPOJSON_EXTENSIONS = TOPOJSON_EXTENSIONS;
 exports.TerrainControl = TerrainControl;
 exports.VectorDatasetControl = VectorDatasetControl;
+exports.ViewStateControl = ViewStateControl;
 exports.XLSX_EXTENSIONS = XLSX_EXTENSIONS;
 exports.XYZSERVICES_URL = XYZSERVICES_URL;
 exports.bone = bone;
@@ -5382,4 +6115,4 @@ exports.terrain = terrain;
 exports.throttle = throttle;
 exports.turbo = turbo;
 exports.viridis = viridis;
-//# sourceMappingURL=InspectControl-Dh8CfVpv.cjs.map
+//# sourceMappingURL=ViewStateControl-BZNDy3xx.cjs.map