maplibre-gl-lidar 0.7.2 → 0.8.0

package/dist/{LidarLayerAdapter-kyyfQw05.js → LidarLayerAdapter-CgPF0Hvt.js}

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { MapboxOverlay } from "@deck.gl/mapbox";
-import { PointCloudLayer } from "@deck.gl/layers";
+import { PointCloudLayer, GeoJsonLayer } from "@deck.gl/layers";
 import { COORDINATE_SYSTEM } from "@deck.gl/core";
 class DeckOverlay {
   constructor(map) {
@@ -93,10 +93,18 @@ class DeckOverlay {
   }
   /**
    * Updates the overlay with current layers.
+   * Layers are sorted so that overlay layers (like cross-section) render on top.
    */
   _updateOverlay() {
+    const sortedLayers = Array.from(this._layers.entries()).sort(([idA], [idB]) => {
+      const isOverlayA = idA.includes("cross-section");
+      const isOverlayB = idB.includes("cross-section");
+      if (isOverlayA && !isOverlayB) return 1;
+      if (!isOverlayA && isOverlayB) return -1;
+      return 0;
+    }).map(([, layer]) => layer);
     this._overlay.setProps({
-      layers: Array.from(this._layers.values())
+      layers: sortedLayers
     });
     this._map.triggerRepaint();
   }
@@ -34966,6 +34974,95 @@ class CopcStreamingLoader {
   isLoading() {
     return this._activeRequests > 0 || this._loadingQueue.length > 0;
   }
+  /**
+   * Gets the full COPC metadata for the loaded file.
+   *
+   * @returns COPC metadata or undefined if not initialized
+   */
+  getCopcMetadata() {
+    var _a;
+    if (!this._copc) return void 0;
+    const { header: header2, info: info2 } = this._copc;
+    const dimensions2 = [];
+    if (header2.pointDataRecordFormat !== void 0) {
+      const standardDims = [
+        "X",
+        "Y",
+        "Z",
+        "Intensity",
+        "ReturnNumber",
+        "NumberOfReturns",
+        "ScanDirectionFlag",
+        "EdgeOfFlightLine",
+        "Classification",
+        "ScanAngleRank",
+        "UserData",
+        "PointSourceId"
+      ];
+      for (const dimName of standardDims) {
+        dimensions2.push({
+          name: dimName,
+          type: dimName === "X" || dimName === "Y" || dimName === "Z" ? "float" : dimName === "Intensity" ? "uint16" : "uint8",
+          size: dimName === "X" || dimName === "Y" || dimName === "Z" ? 8 : dimName === "Intensity" ? 2 : 1,
+          scale: dimName === "X" ? header2.scale[0] : dimName === "Y" ? header2.scale[1] : dimName === "Z" ? header2.scale[2] : void 0,
+          offset: dimName === "X" ? header2.offset[0] : dimName === "Y" ? header2.offset[1] : dimName === "Z" ? header2.offset[2] : void 0
+        });
+      }
+      const colorFormats = [2, 3, 5, 7, 8, 10];
+      if (colorFormats.includes(header2.pointDataRecordFormat)) {
+        dimensions2.push({ name: "Red", type: "uint16", size: 2 });
+        dimensions2.push({ name: "Green", type: "uint16", size: 2 });
+        dimensions2.push({ name: "Blue", type: "uint16", size: 2 });
+      }
+    }
+    return {
+      lasVersion: `${header2.majorVersion}.${header2.minorVersion}`,
+      pointDataRecordFormat: header2.pointDataRecordFormat,
+      generatingSoftware: header2.generatingSoftware || "Unknown",
+      creationDate: header2.fileCreationYear ? {
+        year: header2.fileCreationYear,
+        dayOfYear: header2.fileCreationDayOfYear || 1
+      } : void 0,
+      scale: header2.scale,
+      offset: header2.offset,
+      nativeBounds: {
+        min: header2.min,
+        max: header2.max
+      },
+      copcInfo: {
+        spacing: info2.spacing,
+        rootHierarchyOffset: ((_a = info2.rootHierarchyPage) == null ? void 0 : _a.pageOffset) || 0,
+        pointSpacing: this._calculateNominalSpacing(header2)
+      },
+      dimensions: dimensions2
+    };
+  }
+  /**
+   * Calculates the nominal point spacing from bounding box area.
+   * Uses formula: sqrt(area / pointCount) * unitFactor
+   *
+   * @param header - COPC header with bounds and point count
+   * @returns Estimated point spacing in meters
+   */
+  _calculateNominalSpacing(header2) {
+    const width = header2.max[0] - header2.min[0];
+    const height = header2.max[1] - header2.min[1];
+    const area = width * height;
+    if (area <= 0 || header2.pointCount <= 0) {
+      return 0;
+    }
+    const spacingInSourceUnits = Math.sqrt(area / header2.pointCount);
+    return spacingInSourceUnits * this._verticalUnitFactor;
+  }
+  /**
+   * Gets the WKT coordinate reference system string.
+   *
+   * @returns WKT string or undefined if not available
+   */
+  getWkt() {
+    var _a;
+    return (_a = this._copc) == null ? void 0 : _a.wkt;
+  }
   /**
    * Destroys the streaming loader and cleans up resources.
    */
@@ -36044,6 +36141,52 @@ class EptStreamingLoader {
   getMetadata() {
     return this._metadata;
   }
+  /**
+   * Gets the extended EPT metadata for the metadata panel.
+   *
+   * @returns Extended EPT metadata or undefined if not initialized
+   */
+  getExtendedMetadata() {
+    if (!this._metadata) return void 0;
+    const meta = this._metadata;
+    const dimensions2 = [];
+    if (meta.schema) {
+      for (const dim of meta.schema) {
+        dimensions2.push({
+          name: dim.name,
+          type: dim.type,
+          size: dim.size,
+          scale: dim.scale,
+          offset: dim.offset
+        });
+      }
+    }
+    let pointSpacing;
+    if (meta.bounds && meta.bounds.length >= 6 && this._totalPointsInFile > 0) {
+      const width = meta.bounds[3] - meta.bounds[0];
+      const height = meta.bounds[4] - meta.bounds[1];
+      const area = width * height;
+      if (area > 0) {
+        const spacingInSourceUnits = Math.sqrt(area / this._totalPointsInFile);
+        pointSpacing = spacingInSourceUnits * this._verticalUnitFactor;
+      }
+    }
+    return {
+      version: meta.version || "1.0",
+      dataType: meta.dataType || "laszip",
+      hierarchyType: meta.hierarchyType || "json",
+      span: meta.span || 128,
+      nativeBounds: meta.bounds || [],
+      srs: meta.srs ? {
+        authority: meta.srs.authority,
+        horizontal: meta.srs.horizontal,
+        vertical: meta.srs.vertical,
+        wkt: meta.srs.wkt
+      } : void 0,
+      dimensions: dimensions2,
+      pointSpacing
+    };
+  }
   /**
    * Destroys the streaming loader and cleans up resources.
    */
@@ -36980,6 +37123,60 @@ class PointCloudManager {
   getLastComputedBounds() {
     return this._lastComputedBounds;
   }
+  /**
+   * Gets merged point cloud data from all loaded point clouds.
+   * Used for cross-section profile extraction.
+   *
+   * @returns Merged point cloud data or null if no data loaded
+   */
+  getMergedPointCloudData() {
+    if (this._pointClouds.size === 0) return null;
+    if (this._pointClouds.size === 1) {
+      const [first] = this._pointClouds.values();
+      return first.data;
+    }
+    let totalPoints = 0;
+    for (const pc of this._pointClouds.values()) {
+      totalPoints += pc.data.pointCount;
+    }
+    if (totalPoints === 0) return null;
+    const [firstPc] = this._pointClouds.values();
+    const originLng = firstPc.coordinateOrigin[0];
+    const originLat = firstPc.coordinateOrigin[1];
+    const positions = new Float32Array(totalPoints * 3);
+    const intensities = new Float32Array(totalPoints);
+    const classifications = new Uint8Array(totalPoints);
+    let offset = 0;
+    for (const pc of this._pointClouds.values()) {
+      const data = pc.data;
+      const count = data.pointCount;
+      const dLng = pc.coordinateOrigin[0] - originLng;
+      const dLat = pc.coordinateOrigin[1] - originLat;
+      for (let i = 0; i < count; i++) {
+        positions[(offset + i) * 3] = data.positions[i * 3] + dLng;
+        positions[(offset + i) * 3 + 1] = data.positions[i * 3 + 1] + dLat;
+        positions[(offset + i) * 3 + 2] = data.positions[i * 3 + 2];
+      }
+      if (data.intensities) {
+        intensities.set(data.intensities.subarray(0, count), offset);
+      }
+      if (data.classifications) {
+        classifications.set(data.classifications.subarray(0, count), offset);
+      }
+      offset += count;
+    }
+    return {
+      positions,
+      coordinateOrigin: [originLng, originLat, 0],
+      intensities,
+      classifications,
+      pointCount: totalPoints,
+      bounds: firstPc.data.bounds,
+      hasRGB: firstPc.data.hasRGB,
+      hasIntensity: true,
+      hasClassification: true
+    };
+  }
   /**
    * Creates a deck.gl layer for a point cloud.
    * Chunks large point clouds into multiple layers to avoid WebGL buffer limits.
@@ -38330,6 +38527,10 @@ class PanelBuilder {
     content.appendChild(this._buildFileSection());
     content.appendChild(this._buildStylingSection());
     content.appendChild(this._buildPointCloudsList());
+    const crossSectionPanel = this._buildCrossSectionSection();
+    if (crossSectionPanel) {
+      content.appendChild(crossSectionPanel);
+    }
     content.appendChild(this._buildLoadingIndicator());
     content.appendChild(this._buildErrorMessage());
     return content;
@@ -38938,6 +39139,18 @@ class PanelBuilder {
     info2.appendChild(details);
     const actions = document.createElement("div");
     actions.className = "lidar-pointcloud-actions";
+    if (this._callbacks.onShowMetadata) {
+      const infoBtn = document.createElement("button");
+      infoBtn.type = "button";
+      infoBtn.className = "lidar-pointcloud-action info";
+      infoBtn.textContent = "Info";
+      infoBtn.title = "Show metadata";
+      infoBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this._callbacks.onShowMetadata(pc.id);
+      });
+      actions.appendChild(infoBtn);
+    }
     const zoomBtn = document.createElement("button");
     zoomBtn.type = "button";
     zoomBtn.className = "lidar-pointcloud-action";
@@ -38986,6 +39199,1658 @@ class PanelBuilder {
     this._errorMessage = error;
     return error;
   }
+  /**
+   * Builds the cross-section section if callback is provided.
+   *
+   * @returns Cross-section section or null if not available
+   */
+  _buildCrossSectionSection() {
+    if (!this._callbacks.onCrossSectionPanel) return null;
+    const panel = this._callbacks.onCrossSectionPanel();
+    if (!panel) return null;
+    const section = document.createElement("div");
+    section.className = "lidar-control-section lidar-crosssection-section";
+    const header2 = document.createElement("div");
+    header2.className = "lidar-control-section-header lidar-section-collapsible";
+    header2.innerHTML = '<span class="lidar-section-toggle">▶</span> Cross-Section';
+    header2.style.cursor = "pointer";
+    const body = document.createElement("div");
+    body.className = "lidar-section-body";
+    body.style.display = "none";
+    body.appendChild(panel);
+    header2.addEventListener("click", () => {
+      const toggle = header2.querySelector(".lidar-section-toggle");
+      if (body.style.display === "none") {
+        body.style.display = "block";
+        if (toggle) toggle.textContent = "▼";
+      } else {
+        body.style.display = "none";
+        if (toggle) toggle.textContent = "▶";
+      }
+    });
+    section.appendChild(header2);
+    section.appendChild(body);
+    return section;
+  }
+}
+class MetadataPanel {
+  /**
+   * Creates a new MetadataPanel instance.
+   *
+   * @param options - Panel options
+   */
+  constructor(options) {
+    __publicField(this, "_container", null);
+    __publicField(this, "_backdrop", null);
+    __publicField(this, "_options");
+    __publicField(this, "_metadata", null);
+    this._options = options;
+  }
+  /**
+   * Shows the metadata panel with the given metadata.
+   *
+   * @param metadata - Full metadata to display
+   */
+  show(metadata) {
+    this._metadata = metadata;
+    this._render();
+  }
+  /**
+   * Hides and destroys the metadata panel.
+   */
+  hide() {
+    var _a, _b;
+    (_a = this._backdrop) == null ? void 0 : _a.remove();
+    (_b = this._container) == null ? void 0 : _b.remove();
+    this._backdrop = null;
+    this._container = null;
+  }
+  /**
+   * Renders the metadata panel.
+   */
+  _render() {
+    var _a;
+    if (!this._metadata) return;
+    this._backdrop = document.createElement("div");
+    this._backdrop.className = "lidar-metadata-backdrop";
+    this._backdrop.addEventListener("click", () => this._close());
+    document.body.appendChild(this._backdrop);
+    this._container = document.createElement("div");
+    this._container.className = "lidar-metadata-panel";
+    this._container.addEventListener("click", (e) => e.stopPropagation());
+    const header2 = document.createElement("div");
+    header2.className = "lidar-metadata-header";
+    header2.innerHTML = `
+      <span class="lidar-metadata-title">Point Cloud Metadata</span>
+      <button type="button" class="lidar-metadata-close" title="Close">&times;</button>
+    `;
+    (_a = header2.querySelector(".lidar-metadata-close")) == null ? void 0 : _a.addEventListener("click", () => this._close());
+    this._container.appendChild(header2);
+    const content = document.createElement("div");
+    content.className = "lidar-metadata-content";
+    content.appendChild(this._buildBasicInfoSection());
+    content.appendChild(this._buildBoundsSection());
+    content.appendChild(this._buildCrsSection());
+    content.appendChild(this._buildPointFormatSection());
+    content.appendChild(this._buildDimensionsSection());
+    this._container.appendChild(content);
+    document.body.appendChild(this._container);
+  }
+  /**
+   * Closes the panel and calls the onClose callback.
+   */
+  _close() {
+    this.hide();
+    this._options.onClose();
+  }
+  /**
+   * Builds the basic info section.
+   *
+   * @returns Section element
+   */
+  _buildBasicInfoSection() {
+    var _a;
+    const section = this._createSection("Basic Info", true);
+    const body = section.querySelector(".lidar-metadata-section-body");
+    const meta = this._metadata;
+    const basic = meta.basic;
+    const rows = [
+      { label: "Name", value: basic.name },
+      { label: "Type", value: meta.type.toUpperCase() },
+      { label: "Point Count", value: this._formatNumber(basic.pointCount) },
+      { label: "Has RGB", value: basic.hasRGB ? "Yes" : "No" },
+      { label: "Has Intensity", value: basic.hasIntensity ? "Yes" : "No" },
+      { label: "Has Classification", value: basic.hasClassification ? "Yes" : "No" },
+      { label: "Source", value: basic.source }
+    ];
+    if (meta.type === "copc" && meta.copc) {
+      rows.push({ label: "LAS Version", value: meta.copc.lasVersion });
+      rows.push({ label: "Point Format", value: String(meta.copc.pointDataRecordFormat) });
+      rows.push({ label: "Generating Software", value: meta.copc.generatingSoftware });
+      if (meta.copc.creationDate) {
+        rows.push({
+          label: "Creation Date",
+          value: `${meta.copc.creationDate.year}, Day ${meta.copc.creationDate.dayOfYear}`
+        });
+      }
+      if (((_a = meta.copc.copcInfo) == null ? void 0 : _a.pointSpacing) !== void 0 && meta.copc.copcInfo.pointSpacing > 0) {
+        rows.push({ label: "Point Spacing (est.)", value: "~" + meta.copc.copcInfo.pointSpacing.toFixed(2) + " m" });
+      }
+    }
+    if (meta.type === "ept" && meta.ept) {
+      rows.push({ label: "EPT Version", value: meta.ept.version });
+      rows.push({ label: "Data Type", value: meta.ept.dataType });
+      if (meta.ept.pointSpacing !== void 0 && meta.ept.pointSpacing > 0) {
+        rows.push({ label: "Point Spacing (est.)", value: "~" + meta.ept.pointSpacing.toFixed(2) + " m" });
+      }
+    }
+    for (const row of rows) {
+      body.appendChild(this._createRow(row.label, row.value));
+    }
+    return section;
+  }
+  /**
+   * Builds the bounds section.
+   *
+   * @returns Section element
+   */
+  _buildBoundsSection() {
+    var _a, _b;
+    const section = this._createSection("Bounds", false);
+    const body = section.querySelector(".lidar-metadata-section-body");
+    const meta = this._metadata;
+    const basic = meta.basic;
+    body.appendChild(this._createSubheader("Geographic (WGS84)"));
+    body.appendChild(this._createRow("Min X (Lng)", basic.bounds.minX.toFixed(6) + "°"));
+    body.appendChild(this._createRow("Max X (Lng)", basic.bounds.maxX.toFixed(6) + "°"));
+    body.appendChild(this._createRow("Min Y (Lat)", basic.bounds.minY.toFixed(6) + "°"));
+    body.appendChild(this._createRow("Max Y (Lat)", basic.bounds.maxY.toFixed(6) + "°"));
+    body.appendChild(this._createRow("Min Z", basic.bounds.minZ.toFixed(2) + " m"));
+    body.appendChild(this._createRow("Max Z", basic.bounds.maxZ.toFixed(2) + " m"));
+    if (meta.type === "copc" && ((_a = meta.copc) == null ? void 0 : _a.nativeBounds)) {
+      body.appendChild(this._createSubheader("Native CRS"));
+      const nb = meta.copc.nativeBounds;
+      body.appendChild(this._createRow("Min X", nb.min[0].toFixed(3)));
+      body.appendChild(this._createRow("Max X", nb.max[0].toFixed(3)));
+      body.appendChild(this._createRow("Min Y", nb.min[1].toFixed(3)));
+      body.appendChild(this._createRow("Max Y", nb.max[1].toFixed(3)));
+      body.appendChild(this._createRow("Min Z", nb.min[2].toFixed(3)));
+      body.appendChild(this._createRow("Max Z", nb.max[2].toFixed(3)));
+    }
+    if (meta.type === "ept" && ((_b = meta.ept) == null ? void 0 : _b.nativeBounds) && meta.ept.nativeBounds.length >= 6) {
+      body.appendChild(this._createSubheader("Native CRS"));
+      const nb = meta.ept.nativeBounds;
+      body.appendChild(this._createRow("Min X", nb[0].toFixed(3)));
+      body.appendChild(this._createRow("Max X", nb[3].toFixed(3)));
+      body.appendChild(this._createRow("Min Y", nb[1].toFixed(3)));
+      body.appendChild(this._createRow("Max Y", nb[4].toFixed(3)));
+      body.appendChild(this._createRow("Min Z", nb[2].toFixed(3)));
+      body.appendChild(this._createRow("Max Z", nb[5].toFixed(3)));
+    }
+    return section;
+  }
+  /**
+   * Builds the CRS section.
+   *
+   * @returns Section element
+   */
+  _buildCrsSection() {
+    var _a;
+    const section = this._createSection("Coordinate Reference System", false);
+    const body = section.querySelector(".lidar-metadata-section-body");
+    const meta = this._metadata;
+    const wkt2 = meta.basic.wkt;
+    if (wkt2) {
+      const wktContainer = document.createElement("div");
+      wktContainer.className = "lidar-metadata-wkt";
+      const copyBtn = document.createElement("button");
+      copyBtn.type = "button";
+      copyBtn.className = "lidar-metadata-copy-btn";
+      copyBtn.textContent = "Copy WKT";
+      copyBtn.addEventListener("click", () => {
+        navigator.clipboard.writeText(wkt2).then(() => {
+          copyBtn.textContent = "Copied!";
+          setTimeout(() => {
+            copyBtn.textContent = "Copy WKT";
+          }, 2e3);
+        });
+      });
+      wktContainer.appendChild(copyBtn);
+      const wktCode = document.createElement("pre");
+      wktCode.className = "lidar-metadata-code";
+      wktCode.textContent = this._formatWkt(wkt2);
+      wktContainer.appendChild(wktCode);
+      body.appendChild(wktContainer);
+    } else {
+      body.appendChild(this._createRow("WKT", "Not available"));
+    }
+    if (meta.type === "ept" && ((_a = meta.ept) == null ? void 0 : _a.srs)) {
+      const srs = meta.ept.srs;
+      if (srs.authority) {
+        body.appendChild(this._createRow("Authority", srs.authority));
+      }
+      if (srs.horizontal) {
+        body.appendChild(this._createRow("Horizontal", srs.horizontal));
+      }
+      if (srs.vertical) {
+        body.appendChild(this._createRow("Vertical", srs.vertical));
+      }
+    }
+    if (meta.type === "copc" && meta.copc) {
+      body.appendChild(this._createSubheader("Scale & Offset"));
+      body.appendChild(this._createRow("Scale X", meta.copc.scale[0].toExponential(4)));
+      body.appendChild(this._createRow("Scale Y", meta.copc.scale[1].toExponential(4)));
+      body.appendChild(this._createRow("Scale Z", meta.copc.scale[2].toExponential(4)));
+      body.appendChild(this._createRow("Offset X", meta.copc.offset[0].toFixed(3)));
+      body.appendChild(this._createRow("Offset Y", meta.copc.offset[1].toFixed(3)));
+      body.appendChild(this._createRow("Offset Z", meta.copc.offset[2].toFixed(3)));
+    }
+    return section;
+  }
+  /**
+   * Builds the point format section.
+   *
+   * @returns Section element
+   */
+  _buildPointFormatSection() {
+    const section = this._createSection("Point Format", false);
+    const body = section.querySelector(".lidar-metadata-section-body");
+    const meta = this._metadata;
+    if (meta.type === "copc" && meta.copc) {
+      body.appendChild(this._createRow("Point Data Record Format", String(meta.copc.pointDataRecordFormat)));
+      body.appendChild(this._createRow("LAS Version", meta.copc.lasVersion));
+      const format = meta.copc.pointDataRecordFormat;
+      const formatDescriptions = {
+        0: "Core (XYZ, Intensity, Return, Classification)",
+        1: "Format 0 + GPS Time",
+        2: "Format 0 + RGB",
+        3: "Format 0 + GPS Time + RGB",
+        6: "Extended (14-bit Classification, NIR)",
+        7: "Format 6 + RGB",
+        8: "Format 6 + RGB + NIR"
+      };
+      if (formatDescriptions[format]) {
+        body.appendChild(this._createRow("Description", formatDescriptions[format]));
+      }
+    }
+    if (meta.type === "ept" && meta.ept) {
+      body.appendChild(this._createRow("Data Encoding", meta.ept.dataType));
+    }
+    return section;
+  }
+  /**
+   * Builds the dimensions section.
+   *
+   * @returns Section element
+   */
+  _buildDimensionsSection() {
+    var _a, _b;
+    const section = this._createSection("Dimensions", false);
+    const body = section.querySelector(".lidar-metadata-section-body");
+    const meta = this._metadata;
+    let dimensions2 = [];
+    if (meta.type === "copc" && ((_a = meta.copc) == null ? void 0 : _a.dimensions)) {
+      dimensions2 = meta.copc.dimensions;
+    } else if (meta.type === "ept" && ((_b = meta.ept) == null ? void 0 : _b.dimensions)) {
+      dimensions2 = meta.ept.dimensions;
+    }
+    if (dimensions2.length > 0) {
+      const table = document.createElement("table");
+      table.className = "lidar-metadata-table";
+      table.innerHTML = `
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Size</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      `;
+      const tbody = table.querySelector("tbody");
+      for (const dim of dimensions2) {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `
+          <td>${dim.name}</td>
+          <td>${dim.type}</td>
+          <td>${dim.size} bytes</td>
+        `;
+        tbody.appendChild(tr);
+      }
+      body.appendChild(table);
+    } else {
+      body.appendChild(this._createRow("Dimensions", "Not available"));
+    }
+    return section;
+  }
+  /**
+   * Creates a collapsible section.
+   *
+   * @param title - Section title
+   * @param expanded - Whether section starts expanded
+   * @returns Section element
+   */
+  _createSection(title, expanded) {
+    const section = document.createElement("div");
+    section.className = "lidar-metadata-section";
+    const header2 = document.createElement("div");
+    header2.className = "lidar-metadata-section-header";
+    header2.innerHTML = `
+      <span class="lidar-metadata-section-toggle">${expanded ? "▼" : "▶"}</span>
+      <span class="lidar-metadata-section-title">${title}</span>
+    `;
+    const body = document.createElement("div");
+    body.className = "lidar-metadata-section-body";
+    body.style.display = expanded ? "block" : "none";
+    header2.addEventListener("click", () => {
+      const toggle = header2.querySelector(".lidar-metadata-section-toggle");
+      if (body.style.display === "none") {
+        body.style.display = "block";
+        toggle.textContent = "▼";
+      } else {
+        body.style.display = "none";
+        toggle.textContent = "▶";
+      }
+    });
+    section.appendChild(header2);
+    section.appendChild(body);
+    return section;
+  }
+  /**
+   * Creates a key-value row.
+   *
+   * @param label - Row label
+   * @param value - Row value
+   * @returns Row element
+   */
+  _createRow(label, value) {
+    const row = document.createElement("div");
+    row.className = "lidar-metadata-row";
+    row.innerHTML = `
+      <span class="lidar-metadata-label">${label}:</span>
+      <span class="lidar-metadata-value">${value}</span>
+    `;
+    return row;
+  }
+  /**
+   * Creates a subheader element.
+   *
+   * @param title - Subheader title
+   * @returns Subheader element
+   */
+  _createSubheader(title) {
+    const subheader = document.createElement("div");
+    subheader.className = "lidar-metadata-subheader";
+    subheader.textContent = title;
+    return subheader;
+  }
+  /**
+   * Formats a number with commas.
+   *
+   * @param n - Number to format
+   * @returns Formatted string
+   */
+  _formatNumber(n) {
+    return n.toLocaleString();
+  }
+  /**
+   * Formats a WKT string for display.
+   *
+   * @param wkt - WKT string
+   * @returns Formatted WKT
+   */
+  _formatWkt(wkt2) {
+    let formatted = "";
+    let indent = 0;
+    for (let i = 0; i < wkt2.length; i++) {
+      const char = wkt2[i];
+      if (char === "[") {
+        formatted += "[\n" + "  ".repeat(++indent);
+      } else if (char === "]") {
+        formatted += "\n" + "  ".repeat(--indent) + "]";
+      } else if (char === ",") {
+        formatted += ",\n" + "  ".repeat(indent);
+      } else {
+        formatted += char;
+      }
+    }
+    return formatted;
+  }
+}
+class ElevationProfileChart {
+  /**
+   * Creates a new ElevationProfileChart instance.
+   *
+   * @param options - Chart options
+   */
+  constructor(options) {
+    __publicField(this, "_container");
+    __publicField(this, "_canvas");
+    __publicField(this, "_ctx");
+    __publicField(this, "_tooltip");
+    __publicField(this, "_options");
+    __publicField(this, "_profile", null);
+    __publicField(this, "_hoveredPointIndex", -1);
+    // Chart dimensions (with margins)
+    __publicField(this, "MARGIN", { top: 20, right: 20, bottom: 40, left: 60 });
+    this._options = {
+      width: (options == null ? void 0 : options.width) ?? 300,
+      height: (options == null ? void 0 : options.height) ?? 150,
+      colormap: (options == null ? void 0 : options.colormap) ?? "viridis",
+      onPointHover: (options == null ? void 0 : options.onPointHover) ?? (() => {
+      })
+    };
+    this._container = document.createElement("div");
+    this._container.className = "lidar-profile-chart-container";
+    this._canvas = document.createElement("canvas");
+    this._canvas.className = "lidar-profile-chart";
+    this._canvas.width = this._options.width;
+    this._canvas.height = this._options.height;
+    this._container.appendChild(this._canvas);
+    this._ctx = this._canvas.getContext("2d");
+    this._tooltip = document.createElement("div");
+    this._tooltip.className = "lidar-profile-tooltip";
+    this._tooltip.style.display = "none";
+    this._container.appendChild(this._tooltip);
+    this._canvas.addEventListener("mousemove", this._handleMouseMove.bind(this));
+    this._canvas.addEventListener("mouseleave", this._handleMouseLeave.bind(this));
+  }
+  /**
+   * Renders the chart container element.
+   *
+   * @returns Container element
+   */
+  render() {
+    return this._container;
+  }
+  /**
+   * Sets the elevation profile data and redraws the chart.
+   *
+   * @param profile - Elevation profile to display
+   */
+  setProfile(profile) {
+    this._profile = profile;
+    this._draw();
+  }
+  /**
+   * Sets the colormap and redraws the chart.
+   *
+   * @param colormap - Colormap name
+   */
+  setColormap(colormap) {
+    this._options.colormap = colormap;
+    this._draw();
+  }
+  /**
+   * Resizes the chart.
+   *
+   * @param width - New width
+   * @param height - New height
+   */
+  resize(width, height) {
+    const safeWidth = Math.max(100, Math.round(width));
+    const safeHeight = Math.max(80, Math.round(height));
+    this._options.width = safeWidth;
+    this._options.height = safeHeight;
+    this._canvas.width = safeWidth;
+    this._canvas.height = safeHeight;
+    const ctx = this._canvas.getContext("2d");
+    if (ctx) {
+      this._ctx = ctx;
+    }
+    this._draw();
+  }
+  /**
+   * Draws the chart.
+   */
+  _draw() {
+    const { width, height } = this._options;
+    const ctx = this._ctx;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = "#f8f8f8";
+    ctx.fillRect(0, 0, width, height);
+    if (!this._profile || this._profile.points.length === 0) {
+      this._drawNoData();
+      return;
+    }
+    const plotWidth = width - this.MARGIN.left - this.MARGIN.right;
+    const plotHeight = height - this.MARGIN.top - this.MARGIN.bottom;
+    this._drawGrid(plotWidth, plotHeight);
+    this._drawPoints(plotWidth, plotHeight);
+    this._drawAxes(plotWidth, plotHeight);
+  }
+  /**
+   * Draws "No data" message.
+   */
+  _drawNoData() {
+    const { width, height } = this._options;
+    const ctx = this._ctx;
+    ctx.fillStyle = "#888";
+    ctx.font = "12px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText("Draw a cross-section line to view elevation profile", width / 2, height / 2);
+  }
+  /**
+   * Draws grid lines.
+   *
+   * @param plotWidth - Plot area width
+   * @param plotHeight - Plot area height
+   */
+  _drawGrid(plotWidth, plotHeight) {
+    const ctx = this._ctx;
+    const { left, top } = this.MARGIN;
+    ctx.strokeStyle = "#ddd";
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 4; i++) {
+      const y = top + plotHeight * i / 4;
+      ctx.beginPath();
+      ctx.moveTo(left, y);
+      ctx.lineTo(left + plotWidth, y);
+      ctx.stroke();
+    }
+    for (let i = 0; i <= 4; i++) {
+      const x = left + plotWidth * i / 4;
+      ctx.beginPath();
+      ctx.moveTo(x, top);
+      ctx.lineTo(x, top + plotHeight);
+      ctx.stroke();
+    }
+  }
+  /**
+   * Draws the profile points.
+   *
+   * @param plotWidth - Plot area width
+   * @param plotHeight - Plot area height
+   */
+  _drawPoints(plotWidth, plotHeight) {
+    if (!this._profile) return;
+    const ctx = this._ctx;
+    const { left, top } = this.MARGIN;
+    const { points, stats } = this._profile;
+    const colormap = getColormap(this._options.colormap);
+    const xScale = plotWidth / stats.totalDistance;
+    const yRange = stats.maxElevation - stats.minElevation;
+    const yScale = yRange > 0 ? plotHeight / yRange : 1;
+    const pointRadius = Math.max(1, Math.min(3, 500 / points.length));
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+      const x = left + point.distance * xScale;
+      const y = top + plotHeight - (point.elevation - stats.minElevation) * yScale;
+      const t = yRange > 0 ? (point.elevation - stats.minElevation) / yRange : 0.5;
+      const colorIndex = Math.floor(t * (colormap.length - 1));
+      const color = colormap[Math.max(0, Math.min(colormap.length - 1, colorIndex))];
+      ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+      ctx.beginPath();
+      ctx.arc(x, y, pointRadius, 0, Math.PI * 2);
+      ctx.fill();
+      if (i === this._hoveredPointIndex) {
+        ctx.strokeStyle = "#000";
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.arc(x, y, pointRadius + 2, 0, Math.PI * 2);
+        ctx.stroke();
+      }
+    }
+  }
+  /**
+   * Draws the axes and labels.
+   *
+   * @param plotWidth - Plot area width
+   * @param plotHeight - Plot area height
+   */
+  _drawAxes(plotWidth, plotHeight) {
+    if (!this._profile) return;
+    const ctx = this._ctx;
+    const { left, top } = this.MARGIN;
+    const { width, height } = this._options;
+    const { stats } = this._profile;
+    ctx.strokeStyle = "#333";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(left, top);
+    ctx.lineTo(left, top + plotHeight);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(left, top + plotHeight);
+    ctx.lineTo(left + plotWidth, top + plotHeight);
+    ctx.stroke();
+    ctx.fillStyle = "#333";
+    ctx.font = "10px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    for (let i = 0; i <= 4; i++) {
+      const x = left + plotWidth * i / 4;
+      const dist = stats.totalDistance * i / 4;
+      ctx.fillText(this._formatDistance(dist), x, top + plotHeight + 5);
+    }
+    ctx.textBaseline = "bottom";
+    ctx.fillText("Distance (m)", width / 2, height - 6);
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
+    const yRange = stats.maxElevation - stats.minElevation;
+    for (let i = 0; i <= 4; i++) {
+      const y = top + plotHeight - plotHeight * i / 4;
+      const elev = stats.minElevation + yRange * i / 4;
+      ctx.fillText(elev.toFixed(1), left - 5, y);
+    }
+    ctx.save();
+    ctx.translate(12, height / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = "center";
+    ctx.fillText("Elevation (m)", 0, 0);
+    ctx.restore();
+  }
+  /**
+   * Formats distance for display.
+   *
+   * @param meters - Distance in meters
+   * @returns Formatted string
+   */
+  _formatDistance(meters) {
+    if (meters >= 1e3) {
+      return (meters / 1e3).toFixed(1) + "km";
+    }
+    return Math.round(meters) + "";
+  }
+  /**
+   * Handles mouse move for hover interaction.
+   *
+   * @param event - Mouse event
+   */
+  _handleMouseMove(event) {
+    if (!this._profile || this._profile.points.length === 0) {
+      this._hideTooltip();
+      return;
+    }
+    const rect = this._canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    const { left, top } = this.MARGIN;
+    const plotWidth = this._options.width - this.MARGIN.left - this.MARGIN.right;
+    const plotHeight = this._options.height - this.MARGIN.top - this.MARGIN.bottom;
+    const { points, stats } = this._profile;
+    const xScale = plotWidth / stats.totalDistance;
+    const yRange = stats.maxElevation - stats.minElevation;
+    const yScale = yRange > 0 ? plotHeight / yRange : 1;
+    let closestIndex = -1;
+    let closestDist = Infinity;
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+      const px = left + point.distance * xScale;
+      const py = top + plotHeight - (point.elevation - stats.minElevation) * yScale;
+      const dist = Math.sqrt((mouseX - px) ** 2 + (mouseY - py) ** 2);
+      if (dist < closestDist && dist < 15) {
+        closestDist = dist;
+        closestIndex = i;
+      }
+    }
+    if (closestIndex !== this._hoveredPointIndex) {
+      this._hoveredPointIndex = closestIndex;
+      this._draw();
+      if (closestIndex >= 0) {
+        const point = points[closestIndex];
+        this._showTooltip(point, event.clientX, event.clientY);
+        this._options.onPointHover(point, event.clientX, event.clientY);
+      } else {
+        this._hideTooltip();
+        this._options.onPointHover(null, 0, 0);
+      }
+    }
+  }
+  /**
+   * Handles mouse leave.
+   */
+  _handleMouseLeave() {
+    this._hoveredPointIndex = -1;
+    this._draw();
+    this._hideTooltip();
+    this._options.onPointHover(null, 0, 0);
+  }
+  /**
+   * Shows the tooltip.
+   *
+   * @param point - Profile point
+   * @param x - Screen X coordinate
+   * @param y - Screen Y coordinate
+   */
+  _showTooltip(point, x, y) {
+    const lines = [
+      `Distance: ${point.distance.toFixed(1)} m`,
+      `Elevation: ${point.elevation.toFixed(2)} m`,
+      `Offset: ${point.offsetFromLine.toFixed(2)} m`
+    ];
+    if (point.classification !== void 0) {
+      lines.push(`Class: ${point.classification}`);
+    }
+    this._tooltip.innerHTML = lines.join("<br>");
+    this._tooltip.style.display = "block";
+    const rect = this._container.getBoundingClientRect();
+    this._tooltip.style.left = `${x - rect.left + 10}px`;
+    this._tooltip.style.top = `${y - rect.top - 40}px`;
+  }
+  /**
+   * Hides the tooltip.
+   */
+  _hideTooltip() {
+    this._tooltip.style.display = "none";
+  }
+  /**
+   * Destroys the chart and cleans up resources.
+   */
+  destroy() {
+    this._canvas.removeEventListener("mousemove", this._handleMouseMove.bind(this));
+    this._canvas.removeEventListener("mouseleave", this._handleMouseLeave.bind(this));
+    this._container.remove();
+  }
+}
+class CrossSectionPanel {
+  /**
+   * Creates a new CrossSectionPanel instance.
+   *
+   * @param callbacks - Panel callbacks
+   * @param options - Panel options
+   */
+  constructor(callbacks, options) {
+    __publicField(this, "_container");
+    __publicField(this, "_callbacks");
+    __publicField(this, "_options");
+    // UI elements
+    __publicField(this, "_drawButton");
+    __publicField(this, "_clearButton");
+    __publicField(this, "_downloadButton");
+    __publicField(this, "_expandButton");
+    __publicField(this, "_bufferSlider");
+    __publicField(this, "_bufferValue");
+    __publicField(this, "_statsContainer");
+    __publicField(this, "_chartContainer");
+    __publicField(this, "_chart");
+    // Popup elements
+    __publicField(this, "_popupBackdrop");
+    __publicField(this, "_popupContainer");
+    __publicField(this, "_popupChartContainer");
+    __publicField(this, "_popupChart");
+    __publicField(this, "_popupResizeObserver");
+    __publicField(this, "_isDrawing", false);
+    __publicField(this, "_profile", null);
+    // Popup resize state
+    __publicField(this, "_isResizing", false);
+    __publicField(this, "_ignoreBackdropClick", false);
+    __publicField(this, "_resizeStartX", 0);
+    __publicField(this, "_resizeStartY", 0);
+    __publicField(this, "_resizeStartWidth", 0);
+    __publicField(this, "_resizeStartHeight", 0);
+    __publicField(this, "_resizeObserver");
+    // Bound handlers for cleanup
+    __publicField(this, "_handlePopupResizeMouseMove");
+    __publicField(this, "_handlePopupResizeMouseUp");
+    this._callbacks = callbacks;
+    this._options = {
+      bufferDistance: (options == null ? void 0 : options.bufferDistance) ?? 10,
+      colormap: (options == null ? void 0 : options.colormap) ?? "viridis",
+      chartHeight: (options == null ? void 0 : options.chartHeight) ?? 180
+    };
+    this._container = document.createElement("div");
+    this._container.className = "lidar-crosssection-panel";
+    this._chart = new ElevationProfileChart({
+      width: 320,
+      height: this._options.chartHeight,
+      colormap: this._options.colormap
+    });
+    this._handlePopupResizeMouseMove = this._onPopupResizeMouseMove.bind(this);
+    this._handlePopupResizeMouseUp = this._onPopupResizeMouseUp.bind(this);
+    this._build();
+    this._setupResizeObserver();
+  }
+  /**
+   * Renders the panel element.
+   *
+   * @returns Container element
+   */
+  render() {
+    return this._container;
+  }
+  /**
+   * Updates the elevation profile display.
+   *
+   * @param profile - Elevation profile data
+   */
+  setProfile(profile) {
+    var _a;
+    this._profile = profile;
+    this._chart.setProfile(profile);
+    (_a = this._popupChart) == null ? void 0 : _a.setProfile(profile);
+    this._updateStats();
+    const hasData = profile && profile.points.length > 0;
+    if (this._downloadButton) {
+      this._downloadButton.disabled = !hasData;
+    }
+    if (this._expandButton) {
+      this._expandButton.disabled = !hasData;
+    }
+  }
+  /**
+   * Sets the drawing state.
+   *
+   * @param isDrawing - Whether drawing mode is active
+   */
+  setDrawing(isDrawing) {
+    this._isDrawing = isDrawing;
+    if (this._drawButton) {
+      this._drawButton.textContent = isDrawing ? "Cancel" : "Draw Line";
+      this._drawButton.classList.toggle("active", isDrawing);
+    }
+  }
+  /**
+   * Sets the colormap.
+   *
+   * @param colormap - Colormap name
+   */
+  setColormap(colormap) {
+    var _a;
+    this._options.colormap = colormap;
+    this._chart.setColormap(colormap);
+    (_a = this._popupChart) == null ? void 0 : _a.setColormap(colormap);
+  }
+  /**
+   * Sets the buffer distance.
+   *
+   * @param meters - Buffer distance in meters
+   */
+  setBufferDistance(meters) {
+    this._options.bufferDistance = meters;
+    if (this._bufferSlider) {
+      this._bufferSlider.value = String(meters);
+    }
+    if (this._bufferValue) {
+      this._bufferValue.textContent = `${meters} m`;
+    }
+  }
+  /**
+   * Builds the panel UI.
+   */
+  _build() {
+    const controls = document.createElement("div");
+    controls.className = "lidar-crosssection-controls";
+    this._drawButton = document.createElement("button");
+    this._drawButton.type = "button";
+    this._drawButton.className = "lidar-control-button lidar-crosssection-draw";
+    this._drawButton.textContent = "Draw Line";
+    this._drawButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._isDrawing = !this._isDrawing;
+      this.setDrawing(this._isDrawing);
+      this._callbacks.onDrawToggle(this._isDrawing);
+    });
+    controls.appendChild(this._drawButton);
+    this._clearButton = document.createElement("button");
+    this._clearButton.type = "button";
+    this._clearButton.className = "lidar-control-button lidar-crosssection-clear";
+    this._clearButton.textContent = "Clear";
+    this._clearButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._callbacks.onClear();
+      this.setDrawing(false);
+    });
+    controls.appendChild(this._clearButton);
+    this._downloadButton = document.createElement("button");
+    this._downloadButton.type = "button";
+    this._downloadButton.className = "lidar-control-button secondary";
+    this._downloadButton.textContent = "CSV";
+    this._downloadButton.title = "Download profile data as CSV";
+    this._downloadButton.disabled = true;
+    this._downloadButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._downloadCSV();
+    });
+    controls.appendChild(this._downloadButton);
+    this._expandButton = document.createElement("button");
+    this._expandButton.type = "button";
+    this._expandButton.className = "lidar-control-button secondary";
+    this._expandButton.innerHTML = "⤢";
+    this._expandButton.title = "Expand chart in popup";
+    this._expandButton.disabled = true;
+    this._expandButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._openPopup();
+    });
+    controls.appendChild(this._expandButton);
+    this._container.appendChild(controls);
+    const bufferGroup = document.createElement("div");
+    bufferGroup.className = "lidar-control-group";
+    const bufferLabel = document.createElement("label");
+    bufferLabel.className = "lidar-control-label";
+    bufferLabel.textContent = "Buffer Distance: ";
+    this._bufferValue = document.createElement("span");
+    this._bufferValue.textContent = `${this._options.bufferDistance} m`;
+    bufferLabel.appendChild(this._bufferValue);
+    bufferGroup.appendChild(bufferLabel);
+    this._bufferSlider = document.createElement("input");
+    this._bufferSlider.type = "range";
+    this._bufferSlider.className = "lidar-control-slider";
+    this._bufferSlider.min = "1";
+    this._bufferSlider.max = "100";
+    this._bufferSlider.step = "1";
+    this._bufferSlider.value = String(this._options.bufferDistance);
+    this._bufferSlider.addEventListener("input", (e) => {
+      e.stopPropagation();
+      const meters = parseInt(this._bufferSlider.value, 10);
+      this._bufferValue.textContent = `${meters} m`;
+      this._callbacks.onBufferDistanceChange(meters);
+    });
+    bufferGroup.appendChild(this._bufferSlider);
+    this._container.appendChild(bufferGroup);
+    this._chartContainer = document.createElement("div");
+    this._chartContainer.className = "lidar-crosssection-chart";
+    this._chartContainer.appendChild(this._chart.render());
+    this._container.appendChild(this._chartContainer);
+    this._statsContainer = document.createElement("div");
+    this._statsContainer.className = "lidar-crosssection-stats";
+    this._container.appendChild(this._statsContainer);
+    this._updateStats();
+  }
+  /**
+   * Updates the statistics display.
+   */
+  _updateStats() {
+    if (!this._statsContainer) return;
+    if (!this._profile || this._profile.points.length === 0) {
+      this._statsContainer.innerHTML = '<div class="lidar-crosssection-stat">No profile data</div>';
+      return;
+    }
+    const { stats } = this._profile;
+    this._statsContainer.innerHTML = `
+      <div class="lidar-crosssection-stat">
+        <span class="lidar-crosssection-stat-label">Points:</span>
+        <span class="lidar-crosssection-stat-value">${stats.pointCount.toLocaleString()}</span>
+      </div>
+      <div class="lidar-crosssection-stat">
+        <span class="lidar-crosssection-stat-label">Distance:</span>
+        <span class="lidar-crosssection-stat-value">${stats.totalDistance.toFixed(1)} m</span>
+      </div>
+      <div class="lidar-crosssection-stat">
+        <span class="lidar-crosssection-stat-label">Elevation:</span>
+        <span class="lidar-crosssection-stat-value">${stats.minElevation.toFixed(1)} - ${stats.maxElevation.toFixed(1)} m</span>
+      </div>
+      <div class="lidar-crosssection-stat">
+        <span class="lidar-crosssection-stat-label">Mean:</span>
+        <span class="lidar-crosssection-stat-value">${stats.meanElevation.toFixed(1)} m</span>
+      </div>
+    `;
+  }
+  /**
+   * Sets up ResizeObserver for responsive chart width.
+   */
+  _setupResizeObserver() {
+    this._resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === this._container) {
+          const containerWidth = entry.contentRect.width;
+          const chartWidth = Math.max(200, containerWidth - 4);
+          this._chart.resize(chartWidth, this._options.chartHeight);
+        }
+      }
+    });
+    this._resizeObserver.observe(this._container);
+  }
+  /**
+   * Opens the popup with a larger, resizable chart.
+   */
+  _openPopup() {
+    if (!this._profile) return;
+    this._popupBackdrop = document.createElement("div");
+    this._popupBackdrop.className = "lidar-chart-popup-backdrop";
+    this._popupBackdrop.addEventListener("click", (e) => {
+      if (this._ignoreBackdropClick) {
+        this._ignoreBackdropClick = false;
+        return;
+      }
+      if (e.target === this._popupBackdrop) {
+        this._closePopup();
+      }
+    });
+    this._popupContainer = document.createElement("div");
+    this._popupContainer.className = "lidar-chart-popup";
+    const header2 = document.createElement("div");
+    header2.className = "lidar-chart-popup-header";
+    const title = document.createElement("span");
+    title.className = "lidar-chart-popup-title";
+    title.textContent = "Cross-Section Elevation Profile";
+    header2.appendChild(title);
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "lidar-chart-popup-close";
+    closeBtn.innerHTML = "×";
+    closeBtn.title = "Close";
+    closeBtn.addEventListener("click", () => this._closePopup());
+    header2.appendChild(closeBtn);
+    this._popupContainer.appendChild(header2);
+    const popupChartContainer = document.createElement("div");
+    popupChartContainer.className = "lidar-chart-popup-content";
+    this._popupChartContainer = popupChartContainer;
+    this._popupChart = new ElevationProfileChart({
+      width: 700,
+      height: 400,
+      colormap: this._options.colormap
+    });
+    this._popupChart.setProfile(this._profile);
+    popupChartContainer.appendChild(this._popupChart.render());
+    this._popupContainer.appendChild(popupChartContainer);
+    const popupStats = document.createElement("div");
+    popupStats.className = "lidar-chart-popup-stats";
+    const { stats } = this._profile;
+    popupStats.innerHTML = `
+      <span><strong>Points:</strong> ${stats.pointCount.toLocaleString()}</span>
+      <span><strong>Distance:</strong> ${stats.totalDistance.toFixed(1)} m</span>
+      <span><strong>Elevation:</strong> ${stats.minElevation.toFixed(1)} - ${stats.maxElevation.toFixed(1)} m</span>
+      <span><strong>Mean:</strong> ${stats.meanElevation.toFixed(1)} m</span>
+    `;
+    this._popupContainer.appendChild(popupStats);
+    const resizeHandle = document.createElement("div");
+    resizeHandle.className = "lidar-chart-popup-resize";
+    resizeHandle.title = "Drag to resize";
+    resizeHandle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._startPopupResize(e);
+    });
+    this._popupContainer.appendChild(resizeHandle);
+    this._popupBackdrop.appendChild(this._popupContainer);
+    document.body.appendChild(this._popupBackdrop);
+    document.body.style.overflow = "hidden";
+    this._popupResizeObserver = new ResizeObserver(() => {
+      this._syncPopupChartSize();
+    });
+    this._popupResizeObserver.observe(popupChartContainer);
+    this._syncPopupChartSize();
+  }
+  /**
+   * Closes the popup.
+   */
+  _closePopup() {
+    if (this._popupBackdrop) {
+      this._popupBackdrop.remove();
+      this._popupBackdrop = void 0;
+    }
+    if (this._popupChart) {
+      this._popupChart.destroy();
+      this._popupChart = void 0;
+    }
+    if (this._popupResizeObserver) {
+      this._popupResizeObserver.disconnect();
+      this._popupResizeObserver = void 0;
+    }
+    this._popupContainer = void 0;
+    this._popupChartContainer = void 0;
+    this._ignoreBackdropClick = false;
+    document.body.style.overflow = "";
+  }
+  /**
+   * Starts popup resize operation.
+   */
+  _startPopupResize(e) {
+    if (!this._popupContainer) return;
+    this._isResizing = true;
+    this._ignoreBackdropClick = true;
+    this._resizeStartX = e.clientX;
+    this._resizeStartY = e.clientY;
+    const rect = this._popupContainer.getBoundingClientRect();
+    this._resizeStartWidth = rect.width;
+    this._resizeStartHeight = rect.height;
+    document.addEventListener("mousemove", this._handlePopupResizeMouseMove);
+    document.addEventListener("mouseup", this._handlePopupResizeMouseUp);
+    document.body.style.cursor = "nwse-resize";
+    document.body.style.userSelect = "none";
+  }
+  /**
+   * Handles popup resize mouse move.
+   */
+  _onPopupResizeMouseMove(e) {
+    if (!this._isResizing || !this._popupContainer) return;
+    const deltaX = e.clientX - this._resizeStartX;
+    const deltaY = e.clientY - this._resizeStartY;
+    const newWidth = Math.max(400, Math.min(window.innerWidth - 40, this._resizeStartWidth + deltaX));
+    const newHeight = Math.max(300, Math.min(window.innerHeight - 40, this._resizeStartHeight + deltaY));
+    this._popupContainer.style.width = `${newWidth}px`;
+    this._popupContainer.style.height = `${newHeight}px`;
+    this._syncPopupChartSize();
+  }
+  /**
+   * Handles popup resize mouse up.
+   */
+  _onPopupResizeMouseUp() {
+    this._isResizing = false;
+    document.removeEventListener("mousemove", this._handlePopupResizeMouseMove);
+    document.removeEventListener("mouseup", this._handlePopupResizeMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    this._syncPopupChartSize();
+    window.setTimeout(() => {
+      this._ignoreBackdropClick = false;
+    }, 0);
+    if (this._popupChart && this._profile) {
+      this._popupChart.setProfile(this._profile);
+    }
+  }
+  _syncPopupChartSize() {
+    if (!this._popupChart || !this._popupChartContainer) return;
+    const rect = this._popupChartContainer.getBoundingClientRect();
+    const styles = window.getComputedStyle(this._popupChartContainer);
+    const paddingX = (Number.parseFloat(styles.paddingLeft) || 0) + (Number.parseFloat(styles.paddingRight) || 0);
+    const paddingY = (Number.parseFloat(styles.paddingTop) || 0) + (Number.parseFloat(styles.paddingBottom) || 0);
+    const chartWidth = Math.max(200, rect.width - paddingX);
+    const chartHeight = Math.max(150, rect.height - paddingY);
+    this._popupChart.resize(chartWidth, chartHeight);
+  }
+  /**
+   * Downloads the profile data as CSV.
+   */
+  _downloadCSV() {
+    if (!this._profile || this._profile.points.length === 0) return;
+    const headers = ["distance", "elevation", "offsetFromLine", "longitude", "latitude", "intensity", "classification"];
+    const rows = [headers.join(",")];
+    for (const point of this._profile.points) {
+      const row = [
+        point.distance.toFixed(3),
+        point.elevation.toFixed(3),
+        point.offsetFromLine.toFixed(3),
+        point.longitude.toFixed(8),
+        point.latitude.toFixed(8),
+        point.intensity !== void 0 ? point.intensity.toFixed(4) : "",
+        point.classification !== void 0 ? String(point.classification) : ""
+      ];
+      rows.push(row.join(","));
+    }
+    const csvContent = rows.join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `cross-section-profile-${Date.now()}.csv`;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+  /**
+   * Destroys the panel and cleans up resources.
+   */
+  destroy() {
+    this._closePopup();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = void 0;
+    }
+    if (this._isResizing) {
+      document.removeEventListener("mousemove", this._handlePopupResizeMouseMove);
+      document.removeEventListener("mouseup", this._handlePopupResizeMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }
+    this._chart.destroy();
+    this._container.remove();
+  }
+}
+class ElevationProfileExtractor {
+  /**
+   * Extracts points within the buffer distance of a cross-section line.
+   *
+   * @param line - The cross-section line definition
+   * @param pointCloudData - The point cloud data to extract from
+   * @param coordinateOrigin - The coordinate origin [lng, lat, z]
+   * @returns Elevation profile with sorted points and statistics
+   */
+  static extract(line, pointCloudData, coordinateOrigin) {
+    const points = [];
+    const { positions, intensities, classifications, pointCount } = pointCloudData;
+    const lineStart = line.start;
+    const lineEnd = line.end;
+    const totalDistance = this.haversineDistance(lineStart, lineEnd);
+    const dx = lineEnd[0] - lineStart[0];
+    const dy = lineEnd[1] - lineStart[1];
+    const lineLengthSq = dx * dx + dy * dy;
+    for (let i = 0; i < pointCount; i++) {
+      const lng = positions[i * 3] + coordinateOrigin[0];
+      const lat = positions[i * 3 + 1] + coordinateOrigin[1];
+      const elevation = positions[i * 3 + 2];
+      const { distance: distanceAlongLine, offset } = this.pointToLineDistance(
+        [lng, lat],
+        lineStart,
+        lineEnd,
+        lineLengthSq,
+        totalDistance
+      );
+      if (offset <= line.bufferDistance && distanceAlongLine >= 0 && distanceAlongLine <= totalDistance) {
+        const point = {
+          distance: distanceAlongLine,
+          elevation,
+          offsetFromLine: offset,
+          longitude: lng,
+          latitude: lat,
+          intensity: intensities ? intensities[i] : void 0,
+          classification: classifications ? classifications[i] : void 0
+        };
+        points.push(point);
+      }
+    }
+    points.sort((a, b) => a.distance - b.distance);
+    const stats = this.calculateStats(points, totalDistance);
+    return {
+      line,
+      points,
+      stats
+    };
+  }
+  /**
+   * Calculates the Haversine distance between two WGS84 points.
+   *
+   * @param p1 - First point [lng, lat]
+   * @param p2 - Second point [lng, lat]
+   * @returns Distance in meters
+   */
+  static haversineDistance(p1, p2) {
+    const lat1 = this.toRadians(p1[1]);
+    const lat2 = this.toRadians(p2[1]);
+    const dLat = this.toRadians(p2[1] - p1[1]);
+    const dLng = this.toRadians(p2[0] - p1[0]);
+    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return this.EARTH_RADIUS_M * c;
+  }
+  /**
+   * Calculates the distance along a line and perpendicular offset from a point.
+   *
+   * @param point - The point [lng, lat]
+   * @param lineStart - Line start [lng, lat]
+   * @param lineEnd - Line end [lng, lat]
+   * @param lineLengthSq - Squared length of line vector (for efficiency)
+   * @param totalLineDistance - Total line distance in meters
+   * @returns Distance along line (m) and perpendicular offset (m)
+   */
+  static pointToLineDistance(point, lineStart, lineEnd, lineLengthSq, totalLineDistance) {
+    const dx = lineEnd[0] - lineStart[0];
+    const dy = lineEnd[1] - lineStart[1];
+    const px = point[0] - lineStart[0];
+    const py = point[1] - lineStart[1];
+    let t = (px * dx + py * dy) / lineLengthSq;
+    t = Math.max(0, Math.min(1, t));
+    const closestLng = lineStart[0] + t * dx;
+    const closestLat = lineStart[1] + t * dy;
+    const distanceAlongLine = t * totalLineDistance;
+    const offset = this.haversineDistance(point, [closestLng, closestLat]);
+    return { distance: distanceAlongLine, offset };
+  }
+  /**
+   * Calculates profile statistics.
+   *
+   * @param points - Profile points
+   * @param totalDistance - Total line distance
+   * @returns Statistics object
+   */
+  static calculateStats(points, totalDistance) {
+    if (points.length === 0) {
+      return {
+        minElevation: 0,
+        maxElevation: 0,
+        meanElevation: 0,
+        totalDistance,
+        pointCount: 0
+      };
+    }
+    let minElevation = Infinity;
+    let maxElevation = -Infinity;
+    let sumElevation = 0;
+    for (const point of points) {
+      minElevation = Math.min(minElevation, point.elevation);
+      maxElevation = Math.max(maxElevation, point.elevation);
+      sumElevation += point.elevation;
+    }
+    return {
+      minElevation,
+      maxElevation,
+      meanElevation: sumElevation / points.length,
+      totalDistance,
+      pointCount: points.length
+    };
+  }
+  /**
+   * Converts degrees to radians.
+   *
+   * @param degrees - Angle in degrees
+   * @returns Angle in radians
+   */
+  static toRadians(degrees) {
+    return degrees * (Math.PI / 180);
+  }
+  /**
+   * Creates a buffer polygon around a line for visualization.
+   * Returns GeoJSON coordinates for a polygon.
+   *
+   * @param line - The cross-section line
+   * @param numPoints - Number of points for end caps
+   * @returns GeoJSON polygon coordinates
+   */
+  static createBufferPolygon(line, numPoints = 8) {
+    const [startLng, startLat] = line.start;
+    const [endLng, endLat] = line.end;
+    const bufferDegrees = this.metersToDegrees(line.bufferDistance, (startLat + endLat) / 2);
+    const dx = endLng - startLng;
+    const dy = endLat - startLat;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    const perpX = -dy / len;
+    const perpY = dx / len;
+    const coords = [];
+    coords.push([startLng + perpX * bufferDegrees, startLat + perpY * bufferDegrees]);
+    coords.push([endLng + perpX * bufferDegrees, endLat + perpY * bufferDegrees]);
+    for (let i = 0; i <= numPoints; i++) {
+      const angle = Math.atan2(perpY, perpX) - Math.PI + Math.PI * i / numPoints;
+      coords.push([
+        endLng + Math.cos(angle) * bufferDegrees,
+        endLat + Math.sin(angle) * bufferDegrees
+      ]);
+    }
+    coords.push([endLng - perpX * bufferDegrees, endLat - perpY * bufferDegrees]);
+    coords.push([startLng - perpX * bufferDegrees, startLat - perpY * bufferDegrees]);
+    for (let i = 0; i <= numPoints; i++) {
+      const angle = Math.atan2(perpY, perpX) + Math.PI * i / numPoints;
+      coords.push([
+        startLng + Math.cos(angle) * bufferDegrees,
+        startLat + Math.sin(angle) * bufferDegrees
+      ]);
+    }
+    coords.push(coords[0]);
+    return coords;
+  }
+  /**
+   * Converts meters to approximate degrees at a given latitude.
+   *
+   * @param meters - Distance in meters
+   * @param latitude - Latitude for conversion
+   * @returns Approximate degrees
+   */
+  static metersToDegrees(meters, latitude) {
+    const latRadians = this.toRadians(latitude);
+    return meters / (this.EARTH_RADIUS_M * Math.cos(latRadians) * (Math.PI / 180));
+  }
+}
+__publicField(ElevationProfileExtractor, "EARTH_RADIUS_M", 6371e3);
+class CrossSectionTool {
+  /**
+   * Creates a new CrossSectionTool instance.
+   *
+   * @param map - MapLibre map instance
+   * @param deckOverlay - DeckOverlay instance for rendering
+   */
+  constructor(map, deckOverlay) {
+    __publicField(this, "_map");
+    __publicField(this, "_deckOverlay");
+    __publicField(this, "_enabled", false);
+    __publicField(this, "_isDrawing", false);
+    __publicField(this, "_startPoint", null);
+    __publicField(this, "_endPoint", null);
+    __publicField(this, "_bufferDistance", 10);
+    // meters
+    // deck.gl layer ID
+    __publicField(this, "LAYER_ID", "lidar-cross-section-layer");
+    // Event callbacks
+    __publicField(this, "_onLineChange");
+    // Bound event handlers
+    __publicField(this, "_handleClickBound");
+    __publicField(this, "_handleMouseMoveBound");
+    this._map = map;
+    this._deckOverlay = deckOverlay;
+    this._handleClickBound = this._handleClick.bind(this);
+    this._handleMouseMoveBound = this._handleMouseMove.bind(this);
+  }
+  /**
+   * Enables cross-section drawing mode.
+   */
+  enable() {
+    if (this._enabled) return;
+    this._enabled = true;
+    this._addEventListeners();
+    this._map.getCanvas().style.cursor = "crosshair";
+  }
+  /**
+   * Disables cross-section drawing mode.
+   */
+  disable() {
+    if (!this._enabled) return;
+    this._enabled = false;
+    this._removeEventListeners();
+    this._map.getCanvas().style.cursor = "";
+    this._isDrawing = false;
+  }
+  /**
+   * Checks if the tool is enabled.
+   *
+   * @returns True if enabled
+   */
+  isEnabled() {
+    return this._enabled;
+  }
+  /**
+   * Gets the current cross-section line.
+   *
+   * @returns Cross-section line or null if not defined
+   */
+  getLine() {
+    if (!this._startPoint || !this._endPoint) return null;
+    return {
+      start: this._startPoint,
+      end: this._endPoint,
+      bufferDistance: this._bufferDistance
+    };
+  }
+  /**
+   * Sets the buffer distance.
+   *
+   * @param meters - Buffer distance in meters
+   */
+  setBufferDistance(meters) {
+    this._bufferDistance = meters;
+    this._updateVisualization();
+    this._notifyLineChange();
+  }
+  /**
+   * Gets the current buffer distance.
+   *
+   * @returns Buffer distance in meters
+   */
+  getBufferDistance() {
+    return this._bufferDistance;
+  }
+  /**
+   * Clears the current cross-section line.
+   */
+  clearLine() {
+    this._startPoint = null;
+    this._endPoint = null;
+    this._isDrawing = false;
+    this._removeDeckLayers();
+    this._notifyLineChange();
+  }
+  /**
+   * Sets the callback for line changes.
+   *
+   * @param callback - Callback function
+   */
+  setOnLineChange(callback) {
+    this._onLineChange = callback;
+  }
+  /**
+   * Destroys the tool and cleans up resources.
+   */
+  destroy() {
+    this.disable();
+    this._removeDeckLayers();
+  }
+  /**
+   * Removes deck.gl layers.
+   */
+  _removeDeckLayers() {
+    if (this._deckOverlay.hasLayer(this.LAYER_ID)) {
+      this._deckOverlay.removeLayer(this.LAYER_ID);
+    }
+  }
+  /**
+   * Adds event listeners for drawing.
+   */
+  _addEventListeners() {
+    this._map.on("click", this._handleClickBound);
+    this._map.on("mousemove", this._handleMouseMoveBound);
+  }
+  /**
+   * Removes event listeners.
+   */
+  _removeEventListeners() {
+    this._map.off("click", this._handleClickBound);
+    this._map.off("mousemove", this._handleMouseMoveBound);
+  }
+  /**
+   * Handles map click events.
+   *
+   * @param e - Map mouse event
+   */
+  _handleClick(e) {
+    const lngLat = e.lngLat;
+    if (!this._isDrawing) {
+      this._startPoint = [lngLat.lng, lngLat.lat];
+      this._endPoint = null;
+      this._isDrawing = true;
+    } else {
+      this._endPoint = [lngLat.lng, lngLat.lat];
+      this._isDrawing = false;
+      this._notifyLineChange();
+    }
+    this._updateVisualization();
+  }
+  /**
+   * Handles mouse move events for preview.
+   *
+   * @param e - Map mouse event
+   */
+  _handleMouseMove(e) {
+    if (!this._isDrawing || !this._startPoint) return;
+    this._endPoint = [e.lngLat.lng, e.lngLat.lat];
+    this._updateVisualization();
+  }
+  /**
+   * Updates the visualization on the map using deck.gl.
+   */
+  _updateVisualization() {
+    const features = [];
+    if (this._startPoint) {
+      features.push({
+        type: "Feature",
+        properties: { type: "point", position: "start" },
+        geometry: {
+          type: "Point",
+          coordinates: this._startPoint
+        }
+      });
+    }
+    if (this._startPoint && this._endPoint) {
+      features.push({
+        type: "Feature",
+        properties: { type: "point", position: "end" },
+        geometry: {
+          type: "Point",
+          coordinates: this._endPoint
+        }
+      });
+      features.push({
+        type: "Feature",
+        properties: { type: "line" },
+        geometry: {
+          type: "LineString",
+          coordinates: [this._startPoint, this._endPoint]
+        }
+      });
+      const bufferCoords = ElevationProfileExtractor.createBufferPolygon({
+        start: this._startPoint,
+        end: this._endPoint,
+        bufferDistance: this._bufferDistance
+      });
+      features.push({
+        type: "Feature",
+        properties: { type: "buffer" },
+        geometry: {
+          type: "Polygon",
+          coordinates: [bufferCoords]
+        }
+      });
+    }
+    const geojsonData = {
+      type: "FeatureCollection",
+      features
+    };
+    const layer = new GeoJsonLayer({
+      id: this.LAYER_ID,
+      data: geojsonData,
+      pickable: false,
+      stroked: true,
+      filled: true,
+      // Disable depth testing so this layer always renders on top
+      parameters: {
+        depthTest: false,
+        depthMask: false
+      },
+      // Fill color for polygons (buffer) and points
+      getFillColor: (f) => {
+        var _a, _b;
+        if (((_a = f.properties) == null ? void 0 : _a.type) === "point") {
+          return [255, 51, 51, 255];
+        }
+        if (((_b = f.properties) == null ? void 0 : _b.type) === "buffer") {
+          return [51, 136, 255, 50];
+        }
+        return [0, 0, 0, 0];
+      },
+      // Line color for lines and polygon borders
+      getLineColor: (f) => {
+        var _a, _b, _c;
+        if (((_a = f.properties) == null ? void 0 : _a.type) === "line") {
+          return [51, 136, 255, 255];
+        }
+        if (((_b = f.properties) == null ? void 0 : _b.type) === "buffer") {
+          return [51, 136, 255, 100];
+        }
+        if (((_c = f.properties) == null ? void 0 : _c.type) === "point") {
+          return [255, 255, 255, 255];
+        }
+        return [0, 0, 0, 0];
+      },
+      getLineWidth: (f) => {
+        var _a, _b;
+        if (((_a = f.properties) == null ? void 0 : _a.type) === "line") {
+          return 3;
+        }
+        if (((_b = f.properties) == null ? void 0 : _b.type) === "point") {
+          return 2;
+        }
+        return 1;
+      },
+      lineWidthUnits: "pixels",
+      // Point styling
+      pointType: "circle",
+      getPointRadius: 8,
+      pointRadiusUnits: "pixels"
+    });
+    if (this._deckOverlay.hasLayer(this.LAYER_ID)) {
+      this._deckOverlay.updateLayer(this.LAYER_ID, layer);
+    } else {
+      this._deckOverlay.addLayer(this.LAYER_ID, layer);
+    }
+  }
+  /**
+   * Notifies listeners of line change.
+   */
+  _notifyLineChange() {
+    if (this._onLineChange) {
+      this._onLineChange(this.getLine());
+    }
+  }
 }
 const DEFAULT_OPTIONS = {
   collapsed: true,
@@ -39049,6 +40914,12 @@ class LidarControl {
     __publicField(this, "_viewportManagers", /* @__PURE__ */ new Map());
     __publicField(this, "_eptViewportRequestIds", /* @__PURE__ */ new Map());
     __publicField(this, "_eptLastViewport", /* @__PURE__ */ new Map());
+    // Metadata and cross-section components
+    __publicField(this, "_metadataPanel");
+    __publicField(this, "_fullMetadata", /* @__PURE__ */ new Map());
+    __publicField(this, "_crossSectionTool");
+    __publicField(this, "_crossSectionPanel");
+    __publicField(this, "_currentProfile", null);
     this._options = { ...DEFAULT_OPTIONS, ...options };
     const defaultColorRange = this._options.colorRange ?? {
       mode: "percentile",
@@ -40479,7 +42350,9 @@ class LidarControl {
         onClassificationToggle: (code, visible) => this._toggleClassification(code, visible),
         onClassificationShowAll: () => this._showAllClassifications(),
         onClassificationHideAll: () => this._hideAllClassifications(),
-        onTerrainChange: (enabled) => this.setTerrain(enabled)
+        onTerrainChange: (enabled) => this.setTerrain(enabled),
+        onShowMetadata: (id) => this.showMetadataPanel(id),
+        onCrossSectionPanel: () => this.getCrossSectionPanel().render()
       },
       this._state
     );
@@ -40742,6 +42615,10 @@ class LidarControl {
   _setupEventListeners() {
     var _a;
     this._clickOutsideHandler = (e) => {
+      var _a2, _b;
+      if (((_a2 = this._crossSectionTool) == null ? void 0 : _a2.isEnabled()) || ((_b = this._crossSectionTool) == null ? void 0 : _b.getLine())) {
+        return;
+      }
       const target = e.target;
       if (this._container && this._panel && !this._container.contains(target) && !this._panel.contains(target)) {
         this.collapse();
@@ -40815,6 +42692,223 @@ class LidarControl {
         break;
     }
   }
+  // ==================== Metadata Viewer API ====================
+  /**
+   * Gets the full metadata for a point cloud.
+   *
+   * @param id - Point cloud ID. If not provided, returns metadata for the active point cloud.
+   * @returns Full metadata or undefined if not available
+   */
+  getFullMetadata(id) {
+    const targetId = id ?? this._state.activePointCloudId;
+    if (!targetId) return void 0;
+    return this._fullMetadata.get(targetId);
+  }
+  /**
+   * Shows the metadata panel for a point cloud.
+   *
+   * @param id - Point cloud ID. If not provided, shows metadata for the active point cloud.
+   */
+  showMetadataPanel(id) {
+    const targetId = id ?? this._state.activePointCloudId;
+    if (!targetId) return;
+    let metadata = this._fullMetadata.get(targetId);
+    if (!metadata) {
+      metadata = this._buildFullMetadata(targetId);
+      if (metadata) {
+        this._fullMetadata.set(targetId, metadata);
+      }
+    }
+    if (!metadata) return;
+    if (!this._metadataPanel) {
+      this._metadataPanel = new MetadataPanel({
+        onClose: () => {
+        }
+      });
+    }
+    this._metadataPanel.show(metadata);
+  }
+  /**
+   * Hides the metadata panel.
+   */
+  hideMetadataPanel() {
+    var _a;
+    (_a = this._metadataPanel) == null ? void 0 : _a.hide();
+  }
+  /**
+   * Builds full metadata for a point cloud.
+   *
+   * @param id - Point cloud ID
+   * @returns Full metadata or undefined
+   */
+  _buildFullMetadata(id) {
+    const basic = this._state.pointClouds.find((pc) => pc.id === id);
+    if (!basic) return void 0;
+    const copcLoader = this._streamingLoaders.get(id);
+    if (copcLoader) {
+      const copcMeta = copcLoader.getCopcMetadata();
+      return {
+        type: "copc",
+        copc: copcMeta,
+        basic: { ...basic, wkt: copcLoader.getWkt() ?? basic.wkt }
+      };
+    }
+    const eptLoader = this._eptStreamingLoaders.get(id);
+    if (eptLoader) {
+      const eptMeta = eptLoader.getExtendedMetadata();
+      return {
+        type: "ept",
+        ept: eptMeta,
+        basic
+      };
+    }
+    return {
+      type: "las",
+      basic
+    };
+  }
+  // ==================== Cross-Section API ====================
+  /**
+   * Enables cross-section drawing mode.
+   */
+  enableCrossSection() {
+    var _a, _b;
+    if (!this._map) return;
+    if (!this._crossSectionTool && this._deckOverlay) {
+      this._crossSectionTool = new CrossSectionTool(this._map, this._deckOverlay);
+      this._crossSectionTool.setOnLineChange((line) => {
+        this._handleCrossSectionLineChange(line);
+      });
+    }
+    (_a = this._crossSectionTool) == null ? void 0 : _a.enable();
+    (_b = this._crossSectionPanel) == null ? void 0 : _b.setDrawing(true);
+  }
+  /**
+   * Disables cross-section drawing mode.
+   */
+  disableCrossSection() {
+    var _a, _b;
+    (_a = this._crossSectionTool) == null ? void 0 : _a.disable();
+    (_b = this._crossSectionPanel) == null ? void 0 : _b.setDrawing(false);
+  }
+  /**
+   * Checks if cross-section mode is enabled.
+   *
+   * @returns True if enabled
+   */
+  isCrossSectionEnabled() {
+    var _a;
+    return ((_a = this._crossSectionTool) == null ? void 0 : _a.isEnabled()) ?? false;
+  }
+  /**
+   * Gets the current cross-section elevation profile.
+   *
+   * @returns Elevation profile or null if not available
+   */
+  getCrossSectionProfile() {
+    return this._currentProfile;
+  }
+  /**
+   * Sets the cross-section buffer distance.
+   *
+   * @param meters - Buffer distance in meters
+   */
+  setCrossSectionBufferDistance(meters) {
+    var _a, _b, _c;
+    (_a = this._crossSectionTool) == null ? void 0 : _a.setBufferDistance(meters);
+    (_b = this._crossSectionPanel) == null ? void 0 : _b.setBufferDistance(meters);
+    const line = (_c = this._crossSectionTool) == null ? void 0 : _c.getLine();
+    if (line) {
+      this._extractElevationProfile(line);
+    }
+  }
+  /**
+   * Gets the current cross-section buffer distance.
+   *
+   * @returns Buffer distance in meters
+   */
+  getCrossSectionBufferDistance() {
+    var _a;
+    return ((_a = this._crossSectionTool) == null ? void 0 : _a.getBufferDistance()) ?? 10;
+  }
+  /**
+   * Clears the current cross-section.
+   */
+  clearCrossSection() {
+    var _a, _b;
+    (_a = this._crossSectionTool) == null ? void 0 : _a.clearLine();
+    this._currentProfile = null;
+    (_b = this._crossSectionPanel) == null ? void 0 : _b.setProfile(null);
+  }
+  /**
+   * Gets the current cross-section line.
+   *
+   * @returns Cross-section line or null
+   */
+  getCrossSectionLine() {
+    var _a;
+    return ((_a = this._crossSectionTool) == null ? void 0 : _a.getLine()) ?? null;
+  }
+  /**
+   * Handles cross-section line changes.
+   *
+   * @param line - New line or null if cleared
+   */
+  _handleCrossSectionLineChange(line) {
+    var _a, _b, _c;
+    if (line) {
+      this._extractElevationProfile(line);
+      (_a = this._crossSectionTool) == null ? void 0 : _a.disable();
+      (_b = this._crossSectionPanel) == null ? void 0 : _b.setDrawing(false);
+    } else {
+      this._currentProfile = null;
+      (_c = this._crossSectionPanel) == null ? void 0 : _c.setProfile(null);
+    }
+  }
+  /**
+   * Extracts elevation profile for the current cross-section line.
+   *
+   * @param line - Cross-section line
+   */
+  _extractElevationProfile(line) {
+    var _a, _b, _c;
+    const pointCloudData = (_a = this._pointCloudManager) == null ? void 0 : _a.getMergedPointCloudData();
+    if (!pointCloudData || pointCloudData.pointCount === 0) {
+      this._currentProfile = null;
+      (_b = this._crossSectionPanel) == null ? void 0 : _b.setProfile(null);
+      return;
+    }
+    this._currentProfile = ElevationProfileExtractor.extract(
+      line,
+      pointCloudData,
+      pointCloudData.coordinateOrigin
+    );
+    (_c = this._crossSectionPanel) == null ? void 0 : _c.setProfile(this._currentProfile);
+  }
+  /**
+   * Gets the cross-section panel for adding to the UI.
+   * Creates the panel if it doesn't exist.
+   *
+   * @returns CrossSectionPanel instance
+   */
+  getCrossSectionPanel() {
+    if (!this._crossSectionPanel) {
+      this._crossSectionPanel = new CrossSectionPanel({
+        onDrawToggle: (enabled) => {
+          if (enabled) {
+            this.enableCrossSection();
+          } else {
+            this.disableCrossSection();
+          }
+        },
+        onClear: () => this.clearCrossSection(),
+        onBufferDistanceChange: (meters) => this.setCrossSectionBufferDistance(meters)
+      }, {
+        colormap: this._state.colormap
+      });
+    }
+    return this._crossSectionPanel;
+  }
 }
 class LidarLayerAdapter {
   /**
@@ -40970,6 +43064,7 @@ export {
   DeckOverlay as D,
   EptStreamingLoader as E,
   LidarControl as L,
+  MetadataPanel as M,
   PointCloudLoader as P,
   ViewportManager as V,
   PointCloudManager as a,
@@ -40979,15 +43074,19 @@ export {
   COLORMAP_LABELS as e,
   getColormap as f,
   getClassificationName as g,
-  LidarLayerAdapter as h,
-  clamp as i,
-  formatNumericValue as j,
-  generateId as k,
-  debounce as l,
-  classNames as m,
-  formatNumber as n,
-  formatBytes as o,
-  getFilename as p,
-  throttle as t
+  CrossSectionTool as h,
+  ElevationProfileExtractor as i,
+  CrossSectionPanel as j,
+  ElevationProfileChart as k,
+  LidarLayerAdapter as l,
+  clamp as m,
+  formatNumericValue as n,
+  generateId as o,
+  debounce as p,
+  classNames as q,
+  formatNumber as r,
+  formatBytes as s,
+  throttle as t,
+  getFilename as u
 };
-//# sourceMappingURL=LidarLayerAdapter-kyyfQw05.js.map
+//# sourceMappingURL=LidarLayerAdapter-CgPF0Hvt.js.map