maplibre-gl-geoagent 0.2.0 → 0.3.0

package/dist/{GeoAgentControl-C-3MIQTc.js → GeoAgentControl-DOAYVbPg.js}

@@ -3518,7 +3518,7 @@ class HttpProtocol extends SerdeContext {
     });
   }
   async loadEventStreamCapability() {
-    const { EventStreamSerde } = await import("./index-DI9BALDH.js");
+    const { EventStreamSerde } = await import("./index-Bbu2vTKz.js");
     return new EventStreamSerde({
       marshaller: this.getEventStreamMarshaller(),
       serializer: this.serializer,
@@ -42205,3530 +42205,6 @@ g.walkTokens;
 g.parseInline;
 b.parse;
 x.lex;
-var __defProp2 = Object.defineProperty;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-class CustomLayerRegistry {
-  constructor() {
-    __publicField2(this, "adapters", /* @__PURE__ */ new Map());
-    __publicField2(this, "changeListeners", []);
-    __publicField2(this, "unsubscribers", /* @__PURE__ */ new Map());
-  }
-  /**
-   * Register a custom layer adapter.
-   * @param adapter The adapter to register
-   */
-  register(adapter) {
-    this.adapters.set(adapter.type, adapter);
-    if (adapter.onLayerChange) {
-      const unsubscribe = adapter.onLayerChange((event, layerId) => {
-        this.notifyChange(event, layerId);
-      });
-      this.unsubscribers.set(adapter.type, unsubscribe);
-    }
-  }
-  /**
-   * Unregister an adapter by type.
-   * @param type The adapter type to unregister
-   */
-  unregister(type2) {
-    const unsubscribe = this.unsubscribers.get(type2);
-    if (unsubscribe) {
-      unsubscribe();
-      this.unsubscribers.delete(type2);
-    }
-    this.adapters.delete(type2);
-  }
-  /**
-   * Get all custom layer IDs across all adapters.
-   * @returns Array of layer IDs
-   */
-  getAllLayerIds() {
-    const ids = [];
-    this.adapters.forEach((adapter) => {
-      ids.push(...adapter.getLayerIds());
-    });
-    return ids;
-  }
-  /**
-   * Check if a layer ID is managed by any adapter.
-   * @param layerId The layer ID to check
-   * @returns true if the layer is managed by an adapter
-   */
-  hasLayer(layerId) {
-    for (const adapter of this.adapters.values()) {
-      if (adapter.getLayerIds().includes(layerId)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  /**
-   * Get the adapter responsible for a specific layer.
-   * @param layerId The layer ID
-   * @returns The adapter or null if not found
-   */
-  getAdapterForLayer(layerId) {
-    for (const adapter of this.adapters.values()) {
-      if (adapter.getLayerIds().includes(layerId)) {
-        return adapter;
-      }
-    }
-    return null;
-  }
-  /**
-   * Get the state of a custom layer.
-   * @param layerId The layer ID
-   * @returns The layer state or null if not found
-   */
-  getLayerState(layerId) {
-    const adapter = this.getAdapterForLayer(layerId);
-    return adapter ? adapter.getLayerState(layerId) : null;
-  }
-  /**
-   * Set visibility of a custom layer.
-   * @param layerId The layer ID
-   * @param visible Whether the layer should be visible
-   * @returns true if the operation was handled by an adapter
-   */
-  setVisibility(layerId, visible) {
-    const adapter = this.getAdapterForLayer(layerId);
-    if (adapter) {
-      adapter.setVisibility(layerId, visible);
-      return true;
-    }
-    return false;
-  }
-  /**
-   * Set opacity of a custom layer.
-   * @param layerId The layer ID
-   * @param opacity The opacity value (0-1)
-   * @returns true if the operation was handled by an adapter
-   */
-  setOpacity(layerId, opacity) {
-    const adapter = this.getAdapterForLayer(layerId);
-    if (adapter) {
-      adapter.setOpacity(layerId, opacity);
-      return true;
-    }
-    return false;
-  }
-  /**
-   * Get the symbol type for a custom layer (for UI display).
-   * @param layerId The layer ID
-   * @returns The symbol type or null if not available
-   */
-  getSymbolType(layerId) {
-    const adapter = this.getAdapterForLayer(layerId);
-    if (adapter && adapter.getSymbolType) {
-      return adapter.getSymbolType(layerId);
-    }
-    return null;
-  }
-  /**
-   * Get the bounds of a custom layer (for zoom-to-layer).
-   * @param layerId The layer ID
-   * @returns The bounds [west, south, east, north] or null if not available
-   */
-  getBounds(layerId) {
-    const adapter = this.getAdapterForLayer(layerId);
-    if (adapter && adapter.getBounds) {
-      return adapter.getBounds(layerId);
-    }
-    return null;
-  }
-  /**
-   * Get native MapLibre layer IDs for a custom layer.
-   * @param layerId The custom layer ID
-   * @returns Array of native layer IDs, or null if not available
-   */
-  getNativeLayerIds(layerId) {
-    const adapter = this.getAdapterForLayer(layerId);
-    if (adapter && adapter.getNativeLayerIds) {
-      return adapter.getNativeLayerIds(layerId);
-    }
-    return null;
-  }
-  /**
-   * Remove a custom layer through its adapter.
-   * @param layerId The layer ID to remove
-   * @returns true if the operation was handled by an adapter
-   */
-  removeLayer(layerId) {
-    const adapter = this.getAdapterForLayer(layerId);
-    if (adapter && adapter.removeLayer) {
-      adapter.removeLayer(layerId);
-      return true;
-    }
-    return false;
-  }
-  /**
-   * Subscribe to layer changes across all adapters.
-   * @param callback Function called when layers are added or removed
-   * @returns Unsubscribe function
-   */
-  onChange(callback) {
-    this.changeListeners.push(callback);
-    return () => {
-      const idx = this.changeListeners.indexOf(callback);
-      if (idx >= 0) {
-        this.changeListeners.splice(idx, 1);
-      }
-    };
-  }
-  notifyChange(event, layerId) {
-    this.changeListeners.forEach((cb) => cb(event, layerId));
-  }
-  /**
-   * Clean up all subscriptions and adapters.
-   */
-  destroy() {
-    this.unsubscribers.forEach((unsub) => unsub());
-    this.unsubscribers.clear();
-    this.adapters.clear();
-    this.changeListeners = [];
-  }
-}
-function getOpacityProperty(layerType) {
-  switch (layerType) {
-    case "fill":
-      return "fill-opacity";
-    case "line":
-      return "line-opacity";
-    case "circle":
-      return "circle-opacity";
-    case "symbol":
-      return ["icon-opacity", "text-opacity"];
-    case "raster":
-      return "raster-opacity";
-    case "background":
-      return "background-opacity";
-    case "heatmap":
-      return "heatmap-opacity";
-    case "fill-extrusion":
-      return "fill-extrusion-opacity";
-    case "hillshade":
-      return "hillshade-exaggeration";
-    case "color-relief":
-      return null;
-    default:
-      return `${layerType}-opacity`;
-  }
-}
-function getLayerOpacity(map, layerId, layerType) {
-  const opacityProp = getOpacityProperty(layerType);
-  if (opacityProp === null) {
-    return 1;
-  }
-  if (Array.isArray(opacityProp)) {
-    const opacity2 = map.getPaintProperty(layerId, opacityProp[0]);
-    return opacity2 !== void 0 && opacity2 !== null ? opacity2 : 1;
-  }
-  const opacity = map.getPaintProperty(layerId, opacityProp);
-  return opacity !== void 0 && opacity !== null ? opacity : 1;
-}
-function setLayerOpacity(map, layerId, layerType, opacity) {
-  const opacityProp = getOpacityProperty(layerType);
-  if (opacityProp === null) {
-    return;
-  }
-  if (Array.isArray(opacityProp)) {
-    opacityProp.forEach((prop) => {
-      map.setPaintProperty(layerId, prop, opacity);
-    });
-  } else {
-    map.setPaintProperty(layerId, opacityProp, opacity);
-  }
-}
-function getLayerType(map, layerId) {
-  try {
-    const layer = map.getLayer(layerId);
-    return layer ? layer.type : null;
-  } catch (error) {
-    console.warn(`Failed to get layer type for ${layerId}:`, error);
-    return null;
-  }
-}
-function clonePaintValue(value) {
-  if (Array.isArray(value)) {
-    return value.map((item) => clonePaintValue(item));
-  }
-  if (value && typeof value === "object") {
-    try {
-      return JSON.parse(JSON.stringify(value));
-    } catch (error) {
-      return value;
-    }
-  }
-  return value;
-}
-function cacheOriginalLayerStyle(map, layerId, originalStyles) {
-  var _a3;
-  if (originalStyles.has(layerId)) {
-    return;
-  }
-  try {
-    const layer = map.getLayer(layerId);
-    if (!layer) {
-      return;
-    }
-    const paint = {};
-    const style = map.getStyle();
-    const layerDef = (_a3 = style.layers) == null ? void 0 : _a3.find((l3) => l3.id === layerId);
-    if (layer.type === "raster") {
-      const rasterDefaults = {
-        "raster-opacity": 1,
-        "raster-brightness-min": 0,
-        "raster-brightness-max": 1,
-        "raster-saturation": 0,
-        "raster-contrast": 0,
-        "raster-hue-rotate": 0
-      };
-      Object.assign(paint, rasterDefaults);
-      if (layerDef && "paint" in layerDef && layerDef.paint) {
-        Object.entries(layerDef.paint).forEach(([prop, value]) => {
-          if (prop.startsWith("raster-")) {
-            paint[prop] = clonePaintValue(value);
-          }
-        });
-      }
-    } else {
-      if (layerDef && "paint" in layerDef && layerDef.paint) {
-        Object.entries(layerDef.paint).forEach(([prop, value]) => {
-          paint[prop] = clonePaintValue(value);
-        });
-      }
-    }
-    originalStyles.set(layerId, { paint });
-  } catch (error) {
-    console.warn(`Failed to cache original style for ${layerId}:`, error);
-  }
-}
-function restoreOriginalStyle(map, layerId, originalStyles) {
-  const original = originalStyles.get(layerId);
-  if (!original) {
-    return {};
-  }
-  const applied = {};
-  Object.entries(original.paint).forEach(([property, value]) => {
-    try {
-      const restoredValue = clonePaintValue(value);
-      map.setPaintProperty(layerId, property, restoredValue);
-      applied[property] = restoredValue;
-    } catch (error) {
-      console.warn(`Failed to restore ${property} for ${layerId}:`, error);
-    }
-  });
-  return applied;
-}
-function rgbToHex(r2, g2, b2) {
-  const clamp2 = (v2) => Math.max(0, Math.min(255, Math.round(v2)));
-  const toHex2 = (v2) => {
-    const hex = clamp2(v2).toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-  return `#${toHex2(r2)}${toHex2(g2)}${toHex2(b2)}`;
-}
-function normalizeColor(value) {
-  if (typeof value === "string") {
-    if (value.startsWith("#")) {
-      if (value.length === 4) {
-        const r2 = value[1];
-        const g2 = value[2];
-        const b2 = value[3];
-        return `#${r2}${r2}${g2}${g2}${b2}${b2}`;
-      }
-      return value;
-    }
-    if (value.startsWith("rgb")) {
-      const match = value.match(/\d+/g);
-      if (match && match.length >= 3) {
-        const [r2, g2, b2] = match.map((num) => parseInt(num, 10));
-        return rgbToHex(r2, g2, b2);
-      }
-    }
-  } else if (Array.isArray(value) && value.length >= 3) {
-    return rgbToHex(value[0], value[1], value[2]);
-  }
-  return "#3388ff";
-}
-function formatNumericValue(value, step) {
-  let decimals = 0;
-  if (step && Number(step) !== 1) {
-    const stepNumber = Number(step);
-    if (stepNumber > 0 && stepNumber < 1) {
-      decimals = Math.min(4, Math.ceil(Math.abs(Math.log10(stepNumber))));
-    }
-  }
-  return value.toFixed(decimals);
-}
-const COLOR_PROPERTY_MAP = {
-  fill: ["fill-color", "fill-outline-color"],
-  line: ["line-color"],
-  circle: ["circle-color", "circle-stroke-color"],
-  symbol: ["icon-color", "text-color"],
-  background: ["background-color"],
-  heatmap: ["heatmap-color"],
-  "fill-extrusion": ["fill-extrusion-color"]
-};
-function extractColorFromExpression(expression) {
-  if (!Array.isArray(expression) || expression.length === 0) return null;
-  for (const item of expression) {
-    if (typeof item === "string") {
-      if (item.startsWith("#") || item.startsWith("rgb") || item.startsWith("hsl")) {
-        return normalizeColor(item);
-      }
-    } else if (Array.isArray(item)) {
-      const result = extractColorFromExpression(item);
-      if (result) return result;
-    }
-  }
-  return null;
-}
-function getLayerColor(map, layerId, layerType) {
-  var _a3;
-  const propertyNames2 = COLOR_PROPERTY_MAP[layerType];
-  if (!propertyNames2) return null;
-  for (const propertyName of propertyNames2) {
-    try {
-      const runtimeColor = map.getPaintProperty(layerId, propertyName);
-      if (runtimeColor) {
-        if (typeof runtimeColor === "string") {
-          return normalizeColor(runtimeColor);
-        }
-        if (Array.isArray(runtimeColor)) {
-          const extracted = extractColorFromExpression(runtimeColor);
-          if (extracted) return extracted;
-        }
-      }
-    } catch {
-    }
-    const style = map.getStyle();
-    const layer = (_a3 = style == null ? void 0 : style.layers) == null ? void 0 : _a3.find(
-      (l3) => l3.id === layerId
-    );
-    if (layer && "paint" in layer && layer.paint) {
-      const paintColor = layer.paint[propertyName];
-      if (paintColor) {
-        if (typeof paintColor === "string") {
-          return normalizeColor(paintColor);
-        }
-        if (Array.isArray(paintColor)) {
-          const extracted = extractColorFromExpression(paintColor);
-          if (extracted) return extracted;
-        }
-      }
-    }
-  }
-  return null;
-}
-function getLayerColorFromSpec(layer) {
-  const propertyNames2 = COLOR_PROPERTY_MAP[layer.type];
-  if (!propertyNames2) return null;
-  for (const propertyName of propertyNames2) {
-    if ("paint" in layer && layer.paint) {
-      const paintColor = layer.paint[propertyName];
-      if (paintColor) {
-        if (typeof paintColor === "string") {
-          return normalizeColor(paintColor);
-        }
-        if (Array.isArray(paintColor)) {
-          const extracted = extractColorFromExpression(paintColor);
-          if (extracted) return extracted;
-        }
-      }
-    }
-  }
-  return null;
-}
-function darkenColor(hexColor, amount) {
-  let hex = hexColor.replace("#", "");
-  if (hex.length === 3) {
-    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-  }
-  const r2 = Math.max(
-    0,
-    parseInt(hex.slice(0, 2), 16) - Math.round(255 * amount)
-  );
-  const g2 = Math.max(
-    0,
-    parseInt(hex.slice(2, 4), 16) - Math.round(255 * amount)
-  );
-  const b2 = Math.max(
-    0,
-    parseInt(hex.slice(4, 6), 16) - Math.round(255 * amount)
-  );
-  return rgbToHex(r2, g2, b2);
-}
-function createFillSymbol(size, color) {
-  const padding = 2;
-  const borderColor = darkenColor(color, 0.3);
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
-          fill="${color}" stroke="${borderColor}" stroke-width="1" rx="1"/>
-  </svg>`;
-}
-function createLineSymbol(size, color, strokeWidth = 2) {
-  const y2 = size / 2;
-  const padding = 2;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <line x1="${padding}" y1="${y2}" x2="${size - padding}" y2="${y2}"
-          stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round"/>
-  </svg>`;
-}
-function createCircleSymbol(size, color) {
-  const cx = size / 2;
-  const cy = size / 2;
-  const r2 = size / 2 - 3;
-  const borderColor = darkenColor(color, 0.3);
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="${cx}" cy="${cy}" r="${r2}" fill="${color}"
-            stroke="${borderColor}" stroke-width="1"/>
-  </svg>`;
-}
-function createMarkerSymbol(size, color) {
-  const borderColor = darkenColor(color, 0.3);
-  const cx = size / 2;
-  const pinWidth = size * 0.5;
-  const pinHeight = size * 0.7;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <path d="M${cx} ${size - 2}
-             L${cx - pinWidth / 2} ${size - pinHeight}
-             A${pinWidth / 2} ${pinWidth / 2} 0 1 1 ${cx + pinWidth / 2} ${size - pinHeight}
-             Z"
-          fill="${color}" stroke="${borderColor}" stroke-width="1"/>
-    <circle cx="${cx}" cy="${size - pinHeight - pinWidth / 4}" r="${pinWidth / 5}" fill="white"/>
-  </svg>`;
-}
-function createRasterSymbol(size) {
-  const padding = 2;
-  const id2 = `rasterGrad_${Math.random().toString(36).slice(2, 9)}`;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient id="${id2}" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="#e0e0e0"/>
-        <stop offset="50%" stop-color="#808080"/>
-        <stop offset="100%" stop-color="#404040"/>
-      </linearGradient>
-    </defs>
-    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
-          fill="url(#${id2})" rx="1"/>
-  </svg>`;
-}
-function createBackgroundSymbol(size, color) {
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="${size - 2}" height="${size - 2}" fill="${color}" rx="2"/>
-    <rect x="3" y="3" width="${size - 6}" height="${size - 6}" fill="none"
-          stroke="white" stroke-width="1" stroke-opacity="0.5" rx="1"/>
-  </svg>`;
-}
-function createHeatmapSymbol(size) {
-  const padding = 2;
-  const id2 = `heatmapGrad_${Math.random().toString(36).slice(2, 9)}`;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <radialGradient id="${id2}" cx="50%" cy="50%" r="50%">
-        <stop offset="0%" stop-color="#ffff00"/>
-        <stop offset="50%" stop-color="#ff8800"/>
-        <stop offset="100%" stop-color="#ff0000"/>
-      </radialGradient>
-    </defs>
-    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
-          fill="url(#${id2})" rx="1"/>
-  </svg>`;
-}
-function createHillshadeSymbol(size) {
-  const padding = 2;
-  const id2 = `hillshadeGrad_${Math.random().toString(36).slice(2, 9)}`;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient id="${id2}" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="#ffffff"/>
-        <stop offset="100%" stop-color="#666666"/>
-      </linearGradient>
-    </defs>
-    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
-          fill="url(#${id2})" rx="1"/>
-  </svg>`;
-}
-function createFillExtrusionSymbol(size, color) {
-  const borderColor = darkenColor(color, 0.3);
-  const topColor = color;
-  const sideColor = darkenColor(color, 0.2);
-  const depth = 3;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="${2 + depth},2 ${size - 2},2 ${size - 2},${size - 2 - depth} ${size - 2 - depth},${size - 2} 2,${size - 2} 2,${2 + depth}"
-             fill="${topColor}" stroke="${borderColor}" stroke-width="1"/>
-    <polygon points="2,${2 + depth} ${2 + depth},2 ${2 + depth},${size - 2 - depth} 2,${size - 2}"
-             fill="${sideColor}" stroke="${borderColor}" stroke-width="0.5"/>
-    <polygon points="${2 + depth},${size - 2 - depth} ${size - 2},${size - 2 - depth} ${size - 2 - depth},${size - 2} 2,${size - 2}"
-             fill="${sideColor}" stroke="${borderColor}" stroke-width="0.5"/>
-  </svg>`;
-}
-function createDefaultSymbol(size, color) {
-  const padding = 2;
-  const borderColor = darkenColor(color, 0.3);
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
-          fill="${color}" stroke="${borderColor}" stroke-width="1"/>
-  </svg>`;
-}
-function createCOGSymbol(size, color) {
-  const padding = 2;
-  const borderColor = darkenColor(color, 0.3);
-  const cellSize = (size - padding * 2) / 2;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <rect x="${padding}" y="${padding}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5"/>
-    <rect x="${padding + cellSize}" y="${padding}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" opacity="0.8"/>
-    <rect x="${padding}" y="${padding + cellSize}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" opacity="0.6"/>
-    <rect x="${padding + cellSize}" y="${padding + cellSize}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" opacity="0.4"/>
-  </svg>`;
-}
-function createZarrSymbol(size, color) {
-  const padding = 2;
-  const borderColor = darkenColor(color, 0.3);
-  const innerSize = size - padding * 2;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <rect x="${padding + 2}" y="${padding}" width="${innerSize - 2}" height="${innerSize - 2}" fill="${darkenColor(color, 0.2)}" stroke="${borderColor}" stroke-width="0.5" rx="1"/>
-    <rect x="${padding + 1}" y="${padding + 1}" width="${innerSize - 2}" height="${innerSize - 2}" fill="${darkenColor(color, 0.1)}" stroke="${borderColor}" stroke-width="0.5" rx="1"/>
-    <rect x="${padding}" y="${padding + 2}" width="${innerSize - 2}" height="${innerSize - 2}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" rx="1"/>
-    <line x1="${padding + 3}" y1="${padding + 5}" x2="${padding + innerSize - 5}" y2="${padding + 5}" stroke="${borderColor}" stroke-width="0.5" opacity="0.5"/>
-    <line x1="${padding + 3}" y1="${padding + 8}" x2="${padding + innerSize - 5}" y2="${padding + 8}" stroke="${borderColor}" stroke-width="0.5" opacity="0.5"/>
-  </svg>`;
-}
-function createCustomRasterSymbol(size, color) {
-  const padding = 2;
-  const borderColor = darkenColor(color, 0.3);
-  const id2 = `customRasterGrad_${Math.random().toString(36).slice(2, 9)}`;
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient id="${id2}" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="${color}"/>
-        <stop offset="100%" stop-color="${darkenColor(color, 0.4)}"/>
-      </linearGradient>
-    </defs>
-    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
-          fill="url(#${id2})" stroke="${borderColor}" stroke-width="1" rx="1"/>
-    <line x1="${size / 2}" y1="${padding}" x2="${size / 2}" y2="${size - padding}" stroke="${borderColor}" stroke-width="0.5" opacity="0.3"/>
-    <line x1="${padding}" y1="${size / 2}" x2="${size - padding}" y2="${size / 2}" stroke="${borderColor}" stroke-width="0.5" opacity="0.3"/>
-  </svg>`;
-}
-function createStackedLayersSymbol(size) {
-  const colors = ["#a8d4a8", "#8ec4e8", "#d4c4a8"];
-  const borderColor = "#666666";
-  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
-    <rect x="4" y="1" width="${size - 6}" height="${size - 6}" fill="${colors[2]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
-    <rect x="2" y="3" width="${size - 6}" height="${size - 6}" fill="${colors[1]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
-    <rect x="0" y="5" width="${size - 6}" height="${size - 6}" fill="${colors[0]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
-  </svg>`;
-}
-function createLayerSymbolSVG(layerType, color, options = {}) {
-  const size = options.size || 16;
-  const strokeWidth = options.strokeWidth || 2;
-  const fillColor = color || "#888888";
-  switch (layerType) {
-    case "fill":
-      return createFillSymbol(size, fillColor);
-    case "line":
-      return createLineSymbol(size, fillColor, strokeWidth);
-    case "circle":
-      return createCircleSymbol(size, fillColor);
-    case "symbol":
-      return createMarkerSymbol(size, fillColor);
-    case "raster":
-      return createRasterSymbol(size);
-    case "background":
-      return createBackgroundSymbol(size, fillColor);
-    case "heatmap":
-      return createHeatmapSymbol(size);
-    case "hillshade":
-      return createHillshadeSymbol(size);
-    case "fill-extrusion":
-      return createFillExtrusionSymbol(size, fillColor);
-    case "background-group":
-      return createStackedLayersSymbol(size);
-    case "cog":
-      return createCOGSymbol(size, fillColor);
-    case "zarr":
-      return createZarrSymbol(size, fillColor);
-    case "custom-raster":
-      return createCustomRasterSymbol(size, fillColor);
-    default:
-      return createDefaultSymbol(size, fillColor);
-  }
-}
-function createBackgroundGroupSymbolSVG(size = 16) {
-  return createStackedLayersSymbol(size);
-}
-class LayerControl {
-  constructor(options = {}) {
-    __publicField2(this, "map");
-    __publicField2(this, "mapContainer");
-    __publicField2(this, "container");
-    __publicField2(this, "button");
-    __publicField2(this, "panel");
-    __publicField2(this, "resizeHandler", null);
-    __publicField2(this, "mapResizeHandler", null);
-    __publicField2(this, "state");
-    __publicField2(this, "targetLayers");
-    __publicField2(this, "styleEditors");
-    __publicField2(this, "initialSourceIds", null);
-    __publicField2(this, "initialLayerIds", null);
-    __publicField2(this, "initialLayerStates");
-    __publicField2(this, "minPanelWidth");
-    __publicField2(this, "maxPanelWidth");
-    __publicField2(this, "maxPanelHeight");
-    __publicField2(this, "showStyleEditor");
-    __publicField2(this, "showOpacitySlider");
-    __publicField2(this, "showLayerSymbol");
-    __publicField2(this, "excludeDrawnLayers");
-    __publicField2(this, "excludeLayerPatterns");
-    __publicField2(this, "customLayerRegistry", null);
-    __publicField2(this, "customLayerUnsubscribe", null);
-    __publicField2(this, "removedCustomLayerIds", /* @__PURE__ */ new Set());
-    __publicField2(this, "nativeLayerGroups", /* @__PURE__ */ new Map());
-    __publicField2(this, "basemapStyleUrl", null);
-    __publicField2(this, "basemapLayerIds", null);
-    __publicField2(this, "widthSliderEl", null);
-    __publicField2(this, "widthThumbEl", null);
-    __publicField2(this, "widthValueEl", null);
-    __publicField2(this, "isWidthSliderActive", false);
-    __publicField2(this, "widthDragRectWidth", null);
-    __publicField2(this, "widthDragStartX", null);
-    __publicField2(this, "widthDragStartWidth", null);
-    __publicField2(this, "widthFrame", null);
-    __publicField2(this, "contextMenuEl", null);
-    __publicField2(this, "enableContextMenu");
-    __publicField2(this, "enableDragAndDrop");
-    __publicField2(this, "onLayerRename");
-    __publicField2(this, "onLayerReorder");
-    __publicField2(this, "onLayerRemove");
-    this.minPanelWidth = options.panelMinWidth || 240;
-    this.maxPanelWidth = options.panelMaxWidth || 420;
-    this.maxPanelHeight = options.panelMaxHeight || 600;
-    this.showStyleEditor = options.showStyleEditor !== false;
-    this.showOpacitySlider = options.showOpacitySlider !== false;
-    this.showLayerSymbol = options.showLayerSymbol !== false;
-    this.excludeDrawnLayers = options.excludeDrawnLayers !== false;
-    this.excludeLayerPatterns = this.wildcardPatternsToRegex(options.excludeLayers || []);
-    this.enableContextMenu = options.enableContextMenu !== false;
-    this.enableDragAndDrop = options.enableDragAndDrop !== false;
-    this.onLayerRename = options.onLayerRename;
-    this.onLayerReorder = options.onLayerReorder;
-    this.onLayerRemove = options.onLayerRemove;
-    this.initialLayerStates = options.layerStates || {};
-    this.state = {
-      collapsed: options.collapsed !== false,
-      panelWidth: options.panelWidth || 350,
-      activeStyleEditor: null,
-      layerStates: {},
-      originalStyles: /* @__PURE__ */ new Map(),
-      userInteractingWithSlider: false,
-      backgroundLegendOpen: false,
-      backgroundLayerVisibility: /* @__PURE__ */ new Map(),
-      onlyRenderedFilter: false,
-      contextMenu: {
-        visible: false,
-        targetLayerId: null,
-        x: 0,
-        y: 0
-      },
-      renamingLayerId: null,
-      customLayerNames: /* @__PURE__ */ new Map(),
-      drag: {
-        active: false,
-        layerId: null,
-        startY: 0,
-        currentY: 0,
-        placeholder: null,
-        draggedElement: null
-      },
-      isStyleOperationInProgress: false
-    };
-    this.targetLayers = options.layers || Object.keys(this.initialLayerStates);
-    this.styleEditors = /* @__PURE__ */ new Map();
-    if (options.customLayerAdapters && options.customLayerAdapters.length > 0) {
-      this.customLayerRegistry = new CustomLayerRegistry();
-      options.customLayerAdapters.forEach((adapter) => {
-        this.customLayerRegistry.register(adapter);
-      });
-    }
-    this.basemapStyleUrl = options.basemapStyleUrl || null;
-  }
-  /**
-   * Called when the control is added to the map
-   */
-  onAdd(map) {
-    this.map = map;
-    this.mapContainer = map.getContainer();
-    const style = this.map.getStyle();
-    if (style && style.sources) {
-      this.initialSourceIds = new Set(Object.keys(style.sources));
-    } else {
-      this.initialSourceIds = /* @__PURE__ */ new Set();
-    }
-    if (style && style.layers) {
-      this.initialLayerIds = new Set(style.layers.map((layer) => layer.id));
-    } else {
-      this.initialLayerIds = /* @__PURE__ */ new Set();
-    }
-    this.container = this.createContainer();
-    this.button = this.createToggleButton();
-    this.panel = this.createPanel();
-    this.container.appendChild(this.button);
-    this.mapContainer.appendChild(this.panel);
-    if (this.enableContextMenu) {
-      this.contextMenuEl = this.createContextMenu();
-      this.mapContainer.appendChild(this.contextMenuEl);
-    }
-    this.updateWidthDisplay();
-    this.setupEventListeners();
-    if (this.basemapStyleUrl && !this.basemapLayerIds) {
-      this.fetchBasemapStyle().then(() => {
-        if (Object.keys(this.state.layerStates).length === 0) {
-          this.autoDetectLayers();
-        }
-        this.buildLayerItems();
-      }).catch((error) => {
-        console.warn("Failed to fetch basemap style, falling back to heuristic detection:", error);
-        if (Object.keys(this.state.layerStates).length === 0) {
-          this.autoDetectLayers();
-        }
-        this.buildLayerItems();
-      });
-    } else {
-      if (Object.keys(this.state.layerStates).length === 0) {
-        this.autoDetectLayers();
-      }
-      this.buildLayerItems();
-    }
-    if (!this.state.collapsed) {
-      requestAnimationFrame(() => {
-        this.updatePanelPosition();
-      });
-    }
-    return this.container;
-  }
-  /**
-   * Fetch the basemap style JSON and extract layer IDs.
-   * This provides reliable distinction between basemap and user-added layers.
-   */
-  async fetchBasemapStyle() {
-    if (!this.basemapStyleUrl) return;
-    try {
-      const response = await fetch(this.basemapStyleUrl);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const styleJson = await response.json();
-      if (styleJson && Array.isArray(styleJson.layers)) {
-        this.basemapLayerIds = new Set(
-          styleJson.layers.map((layer) => layer.id)
-        );
-      } else {
-        this.basemapLayerIds = /* @__PURE__ */ new Set();
-      }
-    } catch (error) {
-      console.warn("Failed to fetch basemap style from URL:", this.basemapStyleUrl, error);
-      throw error;
-    }
-  }
-  /**
-   * Called when the control is removed from the map
-   */
-  onRemove() {
-    var _a3, _b3, _c3;
-    if (this.customLayerUnsubscribe) {
-      this.customLayerUnsubscribe();
-      this.customLayerUnsubscribe = null;
-    }
-    if (this.customLayerRegistry) {
-      this.customLayerRegistry.destroy();
-      this.customLayerRegistry = null;
-    }
-    if (this.resizeHandler) {
-      window.removeEventListener("resize", this.resizeHandler);
-      this.resizeHandler = null;
-    }
-    if (this.mapResizeHandler) {
-      this.map.off("resize", this.mapResizeHandler);
-      this.mapResizeHandler = null;
-    }
-    if (this.contextMenuEl) {
-      (_a3 = this.contextMenuEl.parentNode) == null ? void 0 : _a3.removeChild(this.contextMenuEl);
-      this.contextMenuEl = null;
-    }
-    this.cleanupDragState();
-    (_b3 = this.panel.parentNode) == null ? void 0 : _b3.removeChild(this.panel);
-    (_c3 = this.container.parentNode) == null ? void 0 : _c3.removeChild(this.container);
-  }
-  /**
-   * Auto-detect layers from the map and populate layerStates
-   */
-  autoDetectLayers() {
-    const style = this.map.getStyle();
-    if (!style || !style.layers) {
-      return;
-    }
-    const allLayerIds = style.layers.map((layer) => layer.id);
-    if (this.targetLayers.length === 0) {
-      const userAddedLayers = [];
-      const backgroundLayerIds = [];
-      const useBasemapStyleDetection = this.basemapLayerIds !== null && this.basemapLayerIds.size > 0;
-      const userAddedSourceIds = useBasemapStyleDetection ? /* @__PURE__ */ new Set() : this.detectUserAddedSources();
-      allLayerIds.forEach((layerId) => {
-        const layer = this.map.getLayer(layerId);
-        if (!layer) return;
-        if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
-          backgroundLayerIds.push(layerId);
-          return;
-        }
-        if (this.isExcludedByPattern(layerId)) {
-          backgroundLayerIds.push(layerId);
-          return;
-        }
-        if (useBasemapStyleDetection) {
-          if (this.basemapLayerIds.has(layerId)) {
-            backgroundLayerIds.push(layerId);
-          } else {
-            userAddedLayers.push(layerId);
-          }
-        } else {
-          const sourceId = layer.source;
-          if (sourceId && userAddedSourceIds.has(sourceId)) {
-            userAddedLayers.push(layerId);
-          } else {
-            backgroundLayerIds.push(layerId);
-          }
-        }
-      });
-      if (backgroundLayerIds.length > 0) {
-        this.state.layerStates["Background"] = {
-          visible: true,
-          opacity: 1,
-          name: "Background"
-        };
-      }
-      userAddedLayers.forEach((layerId) => {
-        const layer = this.map.getLayer(layerId);
-        if (!layer) return;
-        const visibility = this.map.getLayoutProperty(layerId, "visibility");
-        const isVisible = visibility !== "none";
-        const layerType = layer.type;
-        const opacity = getLayerOpacity(this.map, layerId, layerType);
-        const friendlyName = this.generateFriendlyName(layerId);
-        this.state.layerStates[layerId] = this.mergeWithUserState(layerId, {
-          visible: isVisible,
-          opacity,
-          name: friendlyName
-        });
-      });
-    } else {
-      const userLayers = [];
-      const basemapLayers = [];
-      allLayerIds.forEach((layerId) => {
-        if (this.isExcludedByPattern(layerId)) {
-          basemapLayers.push(layerId);
-          return;
-        }
-        if (this.targetLayers.includes(layerId)) {
-          userLayers.push(layerId);
-        } else {
-          basemapLayers.push(layerId);
-        }
-      });
-      if (basemapLayers.length > 0) {
-        this.state.layerStates["Background"] = {
-          visible: true,
-          opacity: 1,
-          name: "Background"
-        };
-      }
-      userLayers.forEach((layerId) => {
-        const layer = this.map.getLayer(layerId);
-        if (!layer) return;
-        const visibility = this.map.getLayoutProperty(layerId, "visibility");
-        const isVisible = visibility !== "none";
-        const layerType = layer.type;
-        const opacity = getLayerOpacity(this.map, layerId, layerType);
-        const friendlyName = this.generateFriendlyName(layerId);
-        this.state.layerStates[layerId] = this.mergeWithUserState(layerId, {
-          visible: isVisible,
-          opacity,
-          name: friendlyName
-        });
-      });
-    }
-    if (this.customLayerRegistry) {
-      const customLayerIds = this.customLayerRegistry.getAllLayerIds();
-      customLayerIds.forEach((layerId) => {
-        if (this.state.layerStates[layerId]) return;
-        const customState = this.customLayerRegistry.getLayerState(layerId);
-        if (customState) {
-          this.state.layerStates[layerId] = {
-            visible: customState.visible,
-            opacity: customState.opacity,
-            name: customState.name,
-            isCustomLayer: true,
-            customLayerType: this.customLayerRegistry.getSymbolType(layerId) || void 0
-          };
-        }
-      });
-    }
-    this.targetLayers = Object.keys(this.state.layerStates);
-  }
-  /**
-   * Detect which sources are user-added (not from the basemap style)
-   * User-added sources are identified by:
-   * - Sources that were NOT present when the control was first added
-   * - Additionally for sources added later:
-   *   - GeoJSON sources with inline data objects (not URL strings)
-   *   - Image, video, canvas sources
-   *   - Raster, raster-dem, vector sources from non-basemap tile providers
-   */
-  detectUserAddedSources() {
-    const userAddedSources = /* @__PURE__ */ new Set();
-    const style = this.map.getStyle();
-    if (!style || !style.sources) return userAddedSources;
-    const basemapDomains = /* @__PURE__ */ new Set();
-    const knownBasemapProviders = [
-      "demotiles.maplibre.org",
-      "api.maptiler.com",
-      "tiles.stadiamaps.com",
-      "api.mapbox.com",
-      "basemaps.cartocdn.com",
-      "tiles.mapbox.com",
-      "a.basemaps.cartocdn.com",
-      "b.basemaps.cartocdn.com",
-      "c.basemaps.cartocdn.com",
-      "d.basemaps.cartocdn.com",
-      "tiles.arcgis.com",
-      "server.arcgisonline.com",
-      "services.arcgisonline.com"
-    ];
-    const spriteUrl = style.sprite;
-    if (spriteUrl && typeof spriteUrl === "string") {
-      try {
-        const url = new URL(spriteUrl);
-        basemapDomains.add(url.hostname);
-      } catch {
-      }
-    }
-    if (style.glyphs) {
-      try {
-        const url = new URL(style.glyphs.replace("{fontstack}", "x").replace("{range}", "x"));
-        basemapDomains.add(url.hostname);
-      } catch {
-      }
-    }
-    for (const [sourceId, source] of Object.entries(style.sources)) {
-      if (this.initialSourceIds && this.initialSourceIds.has(sourceId)) {
-        continue;
-      }
-      const src = source;
-      const sourceType = src.type;
-      if (sourceType === "image" || sourceType === "video" || sourceType === "canvas") {
-        userAddedSources.add(sourceId);
-        continue;
-      }
-      if (sourceType === "geojson") {
-        if (src.data && typeof src.data === "object") {
-          userAddedSources.add(sourceId);
-        } else if (src.data && typeof src.data === "string") {
-          try {
-            const url = new URL(src.data);
-            const isBasemap = knownBasemapProviders.some((p) => url.hostname.includes(p)) || basemapDomains.has(url.hostname);
-            if (!isBasemap) {
-              userAddedSources.add(sourceId);
-            }
-          } catch {
-            userAddedSources.add(sourceId);
-          }
-        }
-        continue;
-      }
-      if (sourceType === "raster" || sourceType === "raster-dem" || sourceType === "vector") {
-        const tileUrl = src.url || src.tiles && src.tiles[0] || "";
-        if (tileUrl) {
-          try {
-            const url = new URL(tileUrl.replace(/{[^}]+}/g, "0"));
-            const hostname = url.hostname;
-            const isKnownBasemap = knownBasemapProviders.some(
-              (provider) => hostname === provider || hostname.endsWith("." + provider)
-            );
-            const matchesBasemapDomain = basemapDomains.has(hostname);
-            if (!isKnownBasemap && !matchesBasemapDomain) {
-              userAddedSources.add(sourceId);
-            }
-          } catch {
-            userAddedSources.add(sourceId);
-          }
-        }
-      }
-    }
-    return userAddedSources;
-  }
-  /**
-   * Generate a friendly display name from a layer ID
-   */
-  generateFriendlyName(layerId) {
-    let name = layerId.replace(/^(layer[-_]?|gl[-_]?)/, "");
-    name = name.replace(/[-_]/g, " ");
-    name = name.replace(/\b\w/g, (char) => char.toUpperCase());
-    return name || layerId;
-  }
-  /**
-   * Merge auto-detected layer state with user-provided initial state.
-   * User-provided values take precedence over detected values.
-   */
-  mergeWithUserState(layerId, detected) {
-    const userState = this.initialLayerStates[layerId];
-    if (!userState) return detected;
-    return {
-      visible: userState.visible ?? detected.visible,
-      opacity: userState.opacity ?? detected.opacity,
-      name: userState.name ?? detected.name,
-      ...userState.isCustomLayer !== void 0 && { isCustomLayer: userState.isCustomLayer },
-      ...userState.customLayerType !== void 0 && { customLayerType: userState.customLayerType }
-    };
-  }
-  /**
-   * Check if a layer ID belongs to a drawing library (Geoman, Mapbox GL Draw, etc.)
-   * @param layerId The layer ID to check
-   * @returns true if the layer is from a drawing library
-   */
-  isDrawnLayer(layerId) {
-    const drawnLayerPatterns = [
-      // Drawing libraries
-      /^gm[-_\s]/i,
-      // Geoman (gm-main-*, gm_*, Gm Temporary...)
-      /^gl-draw[-_]/i,
-      // Mapbox GL Draw
-      /^mapbox-gl-draw[-_]/i,
-      // Mapbox GL Draw alternative
-      /^terra-draw[-_]/i,
-      // Terra Draw
-      /^maplibre-gl-draw[-_]/i,
-      // MapLibre GL Draw
-      /^draw[-_]layer/i,
-      // Generic draw layers
-      // maplibre-gl-components internal layers
-      /^measure-/i,
-      // MeasureControl (measure-{id}-fill, measure-{id}-line)
-      /^pmtiles-source-/i,
-      // PMTilesLayerControl (managed via adapter)
-      /^stac-search-footprints/i
-      // StacSearchControl footprint layers
-    ];
-    return drawnLayerPatterns.some((pattern2) => pattern2.test(layerId));
-  }
-  /**
-   * Convert wildcard patterns (e.g., '*-temp-*', 'debug-*') to RegExp objects
-   */
-  wildcardPatternsToRegex(patterns) {
-    return patterns.map((pattern2) => {
-      const escaped = pattern2.replace(/[.+?^${}()|[\]\\]/g, "\\$&");
-      const regexStr = escaped.replace(/\*/g, ".*");
-      return new RegExp(`^${regexStr}$`, "i");
-    });
-  }
-  /**
-   * Check if a layer matches any of the user-defined exclusion patterns
-   */
-  isExcludedByPattern(layerId) {
-    return this.excludeLayerPatterns.some((pattern2) => pattern2.test(layerId));
-  }
-  /**
-   * Create the main container element
-   */
-  createContainer() {
-    const container = document.createElement("div");
-    container.className = "maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-layer-control";
-    return container;
-  }
-  /**
-   * Create the toggle button
-   */
-  createToggleButton() {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.title = "Layer Control";
-    button.setAttribute("aria-label", "Layer Control");
-    const icon = document.createElement("span");
-    icon.className = "layer-control-icon";
-    icon.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 3 3 8.25 12 13.5 21 8.25 12 3"></polygon><polyline points="3 12.75 12 18 21 12.75"></polyline><polyline points="3 17.25 12 22 21 17.25"></polyline></svg>';
-    button.appendChild(icon);
-    return button;
-  }
-  /**
-   * Create the panel element
-   */
-  createPanel() {
-    const panel = document.createElement("div");
-    panel.className = "layer-control-panel";
-    panel.style.width = `${this.state.panelWidth}px`;
-    panel.style.maxHeight = `${this.maxPanelHeight}px`;
-    if (!this.state.collapsed) {
-      panel.classList.add("expanded");
-    }
-    const header = this.createPanelHeader();
-    panel.appendChild(header);
-    const actionButtons = this.createActionButtons();
-    panel.appendChild(actionButtons);
-    return panel;
-  }
-  /**
-   * Detect which corner the control is positioned in
-   * @returns The position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-   */
-  getControlPosition() {
-    const parent = this.container.parentElement;
-    if (!parent) return "top-right";
-    if (parent.classList.contains("maplibregl-ctrl-top-left")) return "top-left";
-    if (parent.classList.contains("maplibregl-ctrl-top-right")) return "top-right";
-    if (parent.classList.contains("maplibregl-ctrl-bottom-left")) return "bottom-left";
-    if (parent.classList.contains("maplibregl-ctrl-bottom-right")) return "bottom-right";
-    return "top-right";
-  }
-  /**
-   * Update the panel position based on button location and control corner
-   * Positions the panel next to the button, expanding in the appropriate direction
-   */
-  updatePanelPosition() {
-    if (!this.button || !this.panel || !this.mapContainer) return;
-    const buttonRect = this.button.getBoundingClientRect();
-    const mapRect = this.mapContainer.getBoundingClientRect();
-    const position = this.getControlPosition();
-    const buttonTop = buttonRect.top - mapRect.top;
-    const buttonBottom = mapRect.bottom - buttonRect.bottom;
-    const buttonLeft = buttonRect.left - mapRect.left;
-    const buttonRight = mapRect.right - buttonRect.right;
-    const panelGap = 5;
-    this.panel.style.top = "";
-    this.panel.style.bottom = "";
-    this.panel.style.left = "";
-    this.panel.style.right = "";
-    switch (position) {
-      case "top-left":
-        this.panel.style.top = `${buttonTop + buttonRect.height + panelGap}px`;
-        this.panel.style.left = `${buttonLeft}px`;
-        break;
-      case "top-right":
-        this.panel.style.top = `${buttonTop + buttonRect.height + panelGap}px`;
-        this.panel.style.right = `${buttonRight}px`;
-        break;
-      case "bottom-left":
-        this.panel.style.bottom = `${buttonBottom + buttonRect.height + panelGap}px`;
-        this.panel.style.left = `${buttonLeft}px`;
-        break;
-      case "bottom-right":
-        this.panel.style.bottom = `${buttonBottom + buttonRect.height + panelGap}px`;
-        this.panel.style.right = `${buttonRight}px`;
-        break;
-    }
-  }
-  /**
-   * Create action buttons for Show All / Hide All
-   */
-  createActionButtons() {
-    const container = document.createElement("div");
-    container.className = "layer-control-actions";
-    const showAllBtn = document.createElement("button");
-    showAllBtn.type = "button";
-    showAllBtn.className = "layer-control-action-btn";
-    showAllBtn.textContent = "Show All";
-    showAllBtn.title = "Show all layers";
-    showAllBtn.addEventListener("click", () => this.setAllLayersVisibility(true));
-    const hideAllBtn = document.createElement("button");
-    hideAllBtn.type = "button";
-    hideAllBtn.className = "layer-control-action-btn";
-    hideAllBtn.textContent = "Hide All";
-    hideAllBtn.title = "Hide all layers";
-    hideAllBtn.addEventListener("click", () => this.setAllLayersVisibility(false));
-    container.appendChild(showAllBtn);
-    container.appendChild(hideAllBtn);
-    return container;
-  }
-  /**
-   * Set visibility of all layers
-   */
-  setAllLayersVisibility(visible) {
-    Object.keys(this.state.layerStates).forEach((layerId) => {
-      this.toggleLayerVisibility(layerId, visible);
-      const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-      if (itemEl) {
-        const checkbox = itemEl.querySelector(".layer-control-checkbox");
-        if (checkbox) {
-          checkbox.checked = visible;
-          checkbox.indeterminate = false;
-        }
-      }
-    });
-  }
-  /**
-   * Create the panel header with title and width control
-   */
-  createPanelHeader() {
-    const header = document.createElement("div");
-    header.className = "layer-control-panel-header";
-    const title2 = document.createElement("span");
-    title2.className = "layer-control-panel-title";
-    title2.textContent = "Layers";
-    header.appendChild(title2);
-    const widthControl = this.createWidthControl();
-    header.appendChild(widthControl);
-    return header;
-  }
-  /**
-   * Create the width control slider
-   */
-  createWidthControl() {
-    const widthControl = document.createElement("label");
-    widthControl.className = "layer-control-width-control";
-    widthControl.title = "Adjust layer panel width";
-    const widthLabel = document.createElement("span");
-    widthLabel.textContent = "Width";
-    widthControl.appendChild(widthLabel);
-    const widthSlider = document.createElement("div");
-    widthSlider.className = "layer-control-width-slider";
-    widthSlider.setAttribute("role", "slider");
-    widthSlider.setAttribute("aria-valuemin", String(this.minPanelWidth));
-    widthSlider.setAttribute("aria-valuemax", String(this.maxPanelWidth));
-    widthSlider.setAttribute("aria-valuenow", String(this.state.panelWidth));
-    widthSlider.setAttribute("aria-valuestep", "10");
-    widthSlider.setAttribute("aria-label", "Layer panel width");
-    widthSlider.tabIndex = 0;
-    const widthTrack = document.createElement("div");
-    widthTrack.className = "layer-control-width-track";
-    const widthThumb = document.createElement("div");
-    widthThumb.className = "layer-control-width-thumb";
-    widthSlider.appendChild(widthTrack);
-    widthSlider.appendChild(widthThumb);
-    this.widthSliderEl = widthSlider;
-    this.widthThumbEl = widthThumb;
-    const widthValue = document.createElement("span");
-    widthValue.className = "layer-control-width-value";
-    this.widthValueEl = widthValue;
-    widthControl.appendChild(widthSlider);
-    widthControl.appendChild(widthValue);
-    this.updateWidthDisplay();
-    this.setupWidthSliderEvents(widthSlider);
-    return widthControl;
-  }
-  /**
-   * Setup event listeners for width slider
-   */
-  setupWidthSliderEvents(widthSlider) {
-    widthSlider.addEventListener("pointerdown", (event) => {
-      event.preventDefault();
-      const rect = widthSlider.getBoundingClientRect();
-      this.widthDragRectWidth = rect.width || 1;
-      this.widthDragStartX = event.clientX;
-      this.widthDragStartWidth = this.state.panelWidth;
-      this.isWidthSliderActive = true;
-      widthSlider.setPointerCapture(event.pointerId);
-      this.updateWidthFromPointer(event, true);
-    });
-    widthSlider.addEventListener("pointermove", (event) => {
-      if (!this.isWidthSliderActive) return;
-      this.updateWidthFromPointer(event);
-    });
-    const endPointerDrag = (event) => {
-      if (!this.isWidthSliderActive) return;
-      if (event.pointerId !== void 0) {
-        try {
-          widthSlider.releasePointerCapture(event.pointerId);
-        } catch (error) {
-        }
-      }
-      this.isWidthSliderActive = false;
-      this.widthDragRectWidth = null;
-      this.widthDragStartX = null;
-      this.widthDragStartWidth = null;
-      this.updateWidthDisplay();
-    };
-    widthSlider.addEventListener("pointerup", endPointerDrag);
-    widthSlider.addEventListener("pointercancel", endPointerDrag);
-    widthSlider.addEventListener("lostpointercapture", endPointerDrag);
-    widthSlider.addEventListener("keydown", (event) => {
-      let handled = true;
-      const step = event.shiftKey ? 20 : 10;
-      switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          this.applyPanelWidth(this.state.panelWidth - step, true);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          this.applyPanelWidth(this.state.panelWidth + step, true);
-          break;
-        case "Home":
-          this.applyPanelWidth(this.minPanelWidth, true);
-          break;
-        case "End":
-          this.applyPanelWidth(this.maxPanelWidth, true);
-          break;
-        case "PageUp":
-          this.applyPanelWidth(this.state.panelWidth + 50, true);
-          break;
-        case "PageDown":
-          this.applyPanelWidth(this.state.panelWidth - 50, true);
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        this.updateWidthDisplay();
-      }
-    });
-  }
-  /**
-   * Update panel width from pointer event
-   */
-  updateWidthFromPointer(event, resetBaseline = false) {
-    if (!this.widthSliderEl) return;
-    const sliderWidth = this.widthDragRectWidth || this.widthSliderEl.getBoundingClientRect().width || 1;
-    const widthRange = this.maxPanelWidth - this.minPanelWidth;
-    let width;
-    if (resetBaseline) {
-      const rect = this.widthSliderEl.getBoundingClientRect();
-      const relative = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
-      const clampedRatio = Math.min(1, Math.max(0, relative));
-      width = this.minPanelWidth + clampedRatio * widthRange;
-      this.widthDragStartWidth = width;
-      this.widthDragStartX = event.clientX;
-    } else {
-      const delta = event.clientX - (this.widthDragStartX || event.clientX);
-      width = (this.widthDragStartWidth || this.state.panelWidth) + delta / sliderWidth * widthRange;
-    }
-    this.applyPanelWidth(width, this.isWidthSliderActive);
-  }
-  /**
-   * Apply panel width (clamped to min/max)
-   */
-  applyPanelWidth(width, immediate = false) {
-    const clamped = Math.round(Math.min(this.maxPanelWidth, Math.max(this.minPanelWidth, width)));
-    const applyWidth = () => {
-      this.state.panelWidth = clamped;
-      const px = `${clamped}px`;
-      this.panel.style.width = px;
-      this.updateWidthDisplay();
-    };
-    if (immediate) {
-      applyWidth();
-      return;
-    }
-    if (this.widthFrame) {
-      cancelAnimationFrame(this.widthFrame);
-    }
-    this.widthFrame = requestAnimationFrame(() => {
-      applyWidth();
-      this.widthFrame = null;
-    });
-  }
-  /**
-   * Update width display (value label and thumb position)
-   */
-  updateWidthDisplay() {
-    if (this.widthValueEl) {
-      this.widthValueEl.textContent = `${this.state.panelWidth}px`;
-    }
-    if (this.widthSliderEl) {
-      this.widthSliderEl.setAttribute("aria-valuenow", String(this.state.panelWidth));
-      const ratio = (this.state.panelWidth - this.minPanelWidth) / (this.maxPanelWidth - this.minPanelWidth || 1);
-      if (this.widthThumbEl) {
-        const sliderWidth = this.widthSliderEl.clientWidth;
-        if (sliderWidth === 0) {
-          requestAnimationFrame(() => this.updateWidthDisplay());
-          return;
-        }
-        const thumbWidth = this.widthThumbEl.offsetWidth || 14;
-        const padding = 16;
-        const available = Math.max(0, sliderWidth - padding - thumbWidth);
-        const clampedRatio = Math.min(1, Math.max(0, ratio));
-        const leftPx = 8 + available * clampedRatio;
-        this.widthThumbEl.style.left = `${leftPx}px`;
-      }
-    }
-  }
-  /**
-   * Setup main event listeners
-   */
-  setupEventListeners() {
-    this.button.addEventListener("click", () => this.toggle());
-    document.addEventListener("click", (e2) => {
-      const target = e2.target;
-      if (this.contextMenuEl && this.state.contextMenu.visible) {
-        if (!this.contextMenuEl.contains(target)) {
-          this.hideContextMenu();
-        }
-      }
-      if (!this.container.contains(target) && !this.panel.contains(target)) {
-        this.collapse();
-      }
-    });
-    this.resizeHandler = () => {
-      if (!this.state.collapsed) {
-        this.updatePanelPosition();
-      }
-    };
-    window.addEventListener("resize", this.resizeHandler);
-    this.mapResizeHandler = () => {
-      if (!this.state.collapsed) {
-        this.updatePanelPosition();
-      }
-    };
-    this.map.on("resize", this.mapResizeHandler);
-    this.setupLayerChangeListeners();
-  }
-  /**
-   * Setup listeners for map layer changes
-   */
-  setupLayerChangeListeners() {
-    this.map.on("styledata", () => {
-      setTimeout(() => {
-        this.updateLayerStatesFromMap();
-        this.checkForNewLayers();
-      }, 100);
-    });
-    this.map.on("data", (e2) => {
-      if (e2.sourceDataType === "content") {
-        setTimeout(() => {
-          this.updateLayerStatesFromMap();
-          this.checkForNewLayers();
-        }, 100);
-      }
-    });
-    this.map.on("sourcedata", (e2) => {
-      if (e2.sourceDataType === "metadata") {
-        setTimeout(() => {
-          this.checkForNewLayers();
-        }, 150);
-      }
-    });
-    if (this.customLayerRegistry) {
-      this.customLayerUnsubscribe = this.customLayerRegistry.onChange((event, layerId) => {
-        if (event === "add" && layerId) {
-          this.removedCustomLayerIds.delete(layerId);
-        }
-        setTimeout(() => this.checkForNewLayers(), 100);
-      });
-    }
-  }
-  /**
-   * Toggle panel expanded/collapsed state
-   */
-  toggle() {
-    if (this.state.collapsed) {
-      this.expand();
-    } else {
-      this.collapse();
-    }
-  }
-  /**
-   * Expand the panel
-   */
-  expand() {
-    this.state.collapsed = false;
-    this.panel.classList.add("expanded");
-    this.updatePanelPosition();
-  }
-  /**
-   * Collapse the panel
-   */
-  collapse() {
-    this.state.collapsed = true;
-    this.panel.classList.remove("expanded");
-  }
-  /**
-   * Build layer items (called initially and when layers change)
-   */
-  buildLayerItems() {
-    const existingItems = this.panel.querySelectorAll(".layer-control-item");
-    existingItems.forEach((item) => item.remove());
-    this.styleEditors.clear();
-    Object.entries(this.state.layerStates).forEach(([layerId, state]) => {
-      if (this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
-        this.addLayerItem(layerId, state);
-      }
-    });
-  }
-  /**
-   * Add a single layer item to the panel
-   */
-  addLayerItem(layerId, state) {
-    const item = document.createElement("div");
-    item.className = "layer-control-item";
-    item.setAttribute("data-layer-id", layerId);
-    const row = document.createElement("div");
-    row.className = "layer-control-row";
-    if (this.enableDragAndDrop) {
-      if (layerId === "Background") {
-        const disabledHandle = this.createDisabledDragHandle();
-        row.appendChild(disabledHandle);
-      } else {
-        const dragHandle = this.createDragHandle(layerId);
-        row.appendChild(dragHandle);
-      }
-    }
-    const checkbox = document.createElement("input");
-    checkbox.type = "checkbox";
-    checkbox.className = "layer-control-checkbox";
-    checkbox.checked = state.visible;
-    checkbox.addEventListener("change", () => {
-      this.toggleLayerVisibility(layerId, checkbox.checked);
-    });
-    const displayName = this.state.customLayerNames.get(layerId) || state.name || layerId;
-    const name = document.createElement("span");
-    name.className = "layer-control-name";
-    name.textContent = displayName;
-    name.title = displayName;
-    row.appendChild(checkbox);
-    if (this.showLayerSymbol) {
-      if (layerId === "Background") {
-        const symbol = this.createBackgroundGroupSymbol();
-        row.appendChild(symbol);
-      } else {
-        const symbol = this.createLayerSymbol(layerId);
-        if (symbol) {
-          row.appendChild(symbol);
-        }
-      }
-    }
-    row.appendChild(name);
-    if (this.showOpacitySlider) {
-      const opacity = document.createElement("input");
-      opacity.type = "range";
-      opacity.className = "layer-control-opacity";
-      opacity.min = "0";
-      opacity.max = "1";
-      opacity.step = "0.01";
-      opacity.value = String(state.opacity);
-      opacity.title = `Opacity: ${Math.round(state.opacity * 100)}%`;
-      opacity.addEventListener("mousedown", () => {
-        this.state.userInteractingWithSlider = true;
-      });
-      opacity.addEventListener("mouseup", () => {
-        this.state.userInteractingWithSlider = false;
-      });
-      opacity.addEventListener("input", () => {
-        this.changeLayerOpacity(layerId, parseFloat(opacity.value));
-        opacity.title = `Opacity: ${Math.round(parseFloat(opacity.value) * 100)}%`;
-      });
-      row.appendChild(opacity);
-    }
-    if (this.showStyleEditor) {
-      if (layerId === "Background") {
-        const legendButton = this.createBackgroundLegendButton();
-        row.appendChild(legendButton);
-      } else {
-        const styleButton = this.createStyleButton(layerId);
-        if (styleButton) {
-          row.appendChild(styleButton);
-        }
-      }
-    }
-    item.appendChild(row);
-    if (this.enableContextMenu && layerId !== "Background") {
-      row.addEventListener("contextmenu", (e2) => {
-        e2.preventDefault();
-        e2.stopPropagation();
-        this.showContextMenu(layerId, e2.clientX, e2.clientY);
-      });
-    }
-    this.panel.appendChild(item);
-  }
-  /**
-   * Create a symbol element for a layer
-   * @param layerId The layer ID
-   * @returns The symbol HTML element, or null if layer not found
-   */
-  createLayerSymbol(layerId) {
-    const layerState = this.state.layerStates[layerId];
-    if (layerState == null ? void 0 : layerState.isCustomLayer) {
-      const symbolType = layerState.customLayerType || "custom-raster";
-      const color2 = "#4a90d9";
-      const svgMarkup2 = createLayerSymbolSVG(symbolType, color2);
-      const symbolContainer2 = document.createElement("span");
-      symbolContainer2.className = "layer-control-symbol";
-      symbolContainer2.innerHTML = svgMarkup2;
-      symbolContainer2.title = `Layer type: ${symbolType}`;
-      return symbolContainer2;
-    }
-    const layer = this.map.getLayer(layerId);
-    if (!layer) return null;
-    const layerType = layer.type;
-    const color = getLayerColor(this.map, layerId, layerType);
-    const svgMarkup = createLayerSymbolSVG(layerType, color);
-    const symbolContainer = document.createElement("span");
-    symbolContainer.className = "layer-control-symbol";
-    symbolContainer.innerHTML = svgMarkup;
-    symbolContainer.title = `Layer type: ${layerType}`;
-    return symbolContainer;
-  }
-  /**
-   * Create a symbol element for a background layer
-   * @param layer The layer specification
-   * @returns The symbol HTML element
-   */
-  createBackgroundLayerSymbol(layer) {
-    const color = getLayerColorFromSpec(layer);
-    const svgMarkup = createLayerSymbolSVG(layer.type, color, { size: 14 });
-    const symbolContainer = document.createElement("span");
-    symbolContainer.className = "background-legend-layer-symbol";
-    symbolContainer.innerHTML = svgMarkup;
-    symbolContainer.title = `Layer type: ${layer.type}`;
-    return symbolContainer;
-  }
-  /**
-   * Create a symbol element for the Background layer group
-   * Shows a stacked layers icon to represent multiple background layers
-   * @returns The symbol HTML element
-   */
-  createBackgroundGroupSymbol() {
-    const svgMarkup = createBackgroundGroupSymbolSVG(16);
-    const symbolContainer = document.createElement("span");
-    symbolContainer.className = "layer-control-symbol";
-    symbolContainer.innerHTML = svgMarkup;
-    symbolContainer.title = "Background layers";
-    return symbolContainer;
-  }
-  /**
-   * Toggle layer visibility
-   */
-  toggleLayerVisibility(layerId, visible) {
-    var _a3;
-    if (layerId === "Background") {
-      this.toggleBackgroundVisibility(visible);
-      return;
-    }
-    this.state.isStyleOperationInProgress = true;
-    if (this.state.layerStates[layerId]) {
-      this.state.layerStates[layerId].visible = visible;
-    }
-    if ((_a3 = this.customLayerRegistry) == null ? void 0 : _a3.setVisibility(layerId, visible)) {
-      setTimeout(() => {
-        this.state.isStyleOperationInProgress = false;
-      }, 200);
-      return;
-    }
-    this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
-    setTimeout(() => {
-      this.state.isStyleOperationInProgress = false;
-    }, 200);
-  }
-  /**
-   * Change layer opacity
-   */
-  changeLayerOpacity(layerId, opacity) {
-    var _a3;
-    if (layerId === "Background") {
-      this.changeBackgroundOpacity(opacity);
-      return;
-    }
-    this.state.isStyleOperationInProgress = true;
-    if (this.state.layerStates[layerId]) {
-      this.state.layerStates[layerId].opacity = opacity;
-    }
-    if ((_a3 = this.customLayerRegistry) == null ? void 0 : _a3.setOpacity(layerId, opacity)) {
-      setTimeout(() => {
-        this.state.isStyleOperationInProgress = false;
-      }, 200);
-      return;
-    }
-    const layerType = getLayerType(this.map, layerId);
-    if (layerType) {
-      setLayerOpacity(this.map, layerId, layerType, opacity);
-    }
-    setTimeout(() => {
-      this.state.isStyleOperationInProgress = false;
-    }, 200);
-  }
-  /**
-   * Check if a layer is a user-added layer (vs basemap layer)
-   * Used primarily for the background legend to determine which layers are background
-   */
-  isUserAddedLayer(layerId) {
-    if (this.state.layerStates[layerId] !== void 0 && layerId !== "Background") {
-      return true;
-    }
-    if (this.basemapLayerIds !== null && this.basemapLayerIds.size > 0) {
-      return !this.basemapLayerIds.has(layerId);
-    }
-    if (this.initialLayerIds !== null && !this.initialLayerIds.has(layerId)) {
-      return true;
-    }
-    const layer = this.map.getLayer(layerId);
-    if (layer) {
-      const sourceId = layer.source;
-      if (sourceId) {
-        const userAddedSourceIds = this.detectUserAddedSources();
-        return userAddedSourceIds.has(sourceId);
-      }
-    }
-    return false;
-  }
-  /**
-   * Toggle visibility for all background layers (basemap layers)
-   */
-  toggleBackgroundVisibility(visible) {
-    if (this.state.layerStates["Background"]) {
-      this.state.layerStates["Background"].visible = visible;
-    }
-    const styleLayers = this.map.getStyle().layers || [];
-    styleLayers.forEach((layer) => {
-      if (!this.isUserAddedLayer(layer.id)) {
-        this.state.backgroundLayerVisibility.set(layer.id, visible);
-        this.map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
-      }
-    });
-    if (this.state.backgroundLegendOpen) {
-      const legendPanel = this.panel.querySelector(".layer-control-background-legend");
-      if (legendPanel) {
-        const checkboxes = legendPanel.querySelectorAll(".background-legend-checkbox");
-        checkboxes.forEach((checkbox) => {
-          checkbox.checked = visible;
-        });
-      }
-    }
-  }
-  /**
-   * Change opacity for all background layers (basemap layers)
-   */
-  changeBackgroundOpacity(opacity) {
-    if (this.state.layerStates["Background"]) {
-      this.state.layerStates["Background"].opacity = opacity;
-    }
-    const styleLayers = this.map.getStyle().layers || [];
-    styleLayers.forEach((styleLayer) => {
-      if (!this.isUserAddedLayer(styleLayer.id)) {
-        const layerType = getLayerType(this.map, styleLayer.id);
-        if (layerType) {
-          setLayerOpacity(this.map, styleLayer.id, layerType, opacity);
-        }
-      }
-    });
-  }
-  // ===== Background Legend Methods =====
-  /**
-   * Create legend button for Background layer
-   */
-  createBackgroundLegendButton() {
-    const button = document.createElement("button");
-    button.className = "layer-control-style-button layer-control-background-legend-button";
-    button.innerHTML = "&#9881;";
-    button.title = "Show background layer details";
-    button.setAttribute("aria-label", "Show background layer visibility controls");
-    button.setAttribute("aria-expanded", String(this.state.backgroundLegendOpen));
-    button.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.toggleBackgroundLegend();
-    });
-    return button;
-  }
-  /**
-   * Toggle background legend panel visibility
-   */
-  toggleBackgroundLegend() {
-    if (this.state.backgroundLegendOpen) {
-      this.closeBackgroundLegend();
-    } else {
-      this.openBackgroundLegend();
-    }
-  }
-  /**
-   * Open background legend panel
-   */
-  openBackgroundLegend() {
-    if (this.state.activeStyleEditor) {
-      this.closeStyleEditor(this.state.activeStyleEditor);
-    }
-    const itemEl = this.panel.querySelector('[data-layer-id="Background"]');
-    if (!itemEl) return;
-    let legendPanel = itemEl.querySelector(".layer-control-background-legend");
-    if (legendPanel) {
-      const layerList = legendPanel.querySelector(".background-legend-layer-list");
-      if (layerList) {
-        this.populateBackgroundLayerList(layerList);
-      }
-    } else {
-      legendPanel = this.createBackgroundLegendPanel();
-      itemEl.appendChild(legendPanel);
-    }
-    this.state.backgroundLegendOpen = true;
-    const button = itemEl.querySelector(".layer-control-background-legend-button");
-    if (button) {
-      button.setAttribute("aria-expanded", "true");
-      button.classList.add("active");
-    }
-    setTimeout(() => {
-      legendPanel == null ? void 0 : legendPanel.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }, 50);
-  }
-  /**
-   * Close background legend panel
-   */
-  closeBackgroundLegend() {
-    const itemEl = this.panel.querySelector('[data-layer-id="Background"]');
-    if (!itemEl) return;
-    const legendPanel = itemEl.querySelector(".layer-control-background-legend");
-    if (legendPanel) {
-      legendPanel.remove();
-    }
-    this.state.backgroundLegendOpen = false;
-    const button = itemEl.querySelector(".layer-control-background-legend-button");
-    if (button) {
-      button.setAttribute("aria-expanded", "false");
-      button.classList.remove("active");
-    }
-  }
-  /**
-   * Create the background legend panel with individual layer controls
-   */
-  createBackgroundLegendPanel() {
-    const panel = document.createElement("div");
-    panel.className = "layer-control-background-legend";
-    const header = document.createElement("div");
-    header.className = "background-legend-header";
-    const title2 = document.createElement("span");
-    title2.className = "background-legend-title";
-    title2.textContent = "Background Layers";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "background-legend-close";
-    closeBtn.innerHTML = "&times;";
-    closeBtn.title = "Close";
-    closeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.closeBackgroundLegend();
-    });
-    header.appendChild(title2);
-    header.appendChild(closeBtn);
-    const actionsRow = document.createElement("div");
-    actionsRow.className = "background-legend-actions";
-    const showAllBtn = document.createElement("button");
-    showAllBtn.className = "background-legend-action-btn";
-    showAllBtn.textContent = "Show All";
-    showAllBtn.addEventListener("click", () => this.setAllBackgroundLayersVisibility(true));
-    const hideAllBtn = document.createElement("button");
-    hideAllBtn.className = "background-legend-action-btn";
-    hideAllBtn.textContent = "Hide All";
-    hideAllBtn.addEventListener("click", () => this.setAllBackgroundLayersVisibility(false));
-    actionsRow.appendChild(showAllBtn);
-    actionsRow.appendChild(hideAllBtn);
-    const filterRow = document.createElement("div");
-    filterRow.className = "background-legend-filter";
-    const filterCheckbox = document.createElement("input");
-    filterCheckbox.type = "checkbox";
-    filterCheckbox.className = "background-legend-filter-checkbox";
-    filterCheckbox.id = "background-legend-only-rendered";
-    filterCheckbox.checked = this.state.onlyRenderedFilter;
-    filterCheckbox.addEventListener("change", () => {
-      this.state.onlyRenderedFilter = filterCheckbox.checked;
-      const layerList2 = panel.querySelector(".background-legend-layer-list");
-      if (layerList2) {
-        this.populateBackgroundLayerList(layerList2);
-      }
-    });
-    const filterLabel = document.createElement("label");
-    filterLabel.className = "background-legend-filter-label";
-    filterLabel.htmlFor = "background-legend-only-rendered";
-    filterLabel.textContent = "Only rendered";
-    filterRow.appendChild(filterCheckbox);
-    filterRow.appendChild(filterLabel);
-    const layerList = document.createElement("div");
-    layerList.className = "background-legend-layer-list";
-    this.populateBackgroundLayerList(layerList);
-    panel.appendChild(header);
-    panel.appendChild(actionsRow);
-    panel.appendChild(filterRow);
-    panel.appendChild(layerList);
-    return panel;
-  }
-  /**
-   * Check if a layer is currently rendered in the map viewport
-   */
-  isLayerRendered(layerId) {
-    try {
-      const layer = this.map.getLayer(layerId);
-      if (!layer) return false;
-      const visibility = this.map.getLayoutProperty(layerId, "visibility");
-      if (visibility === "none") return false;
-      if (layer.type === "raster" || layer.type === "hillshade") {
-        return true;
-      }
-      if (layer.type === "background") {
-        return true;
-      }
-      const features = this.map.queryRenderedFeatures({ layers: [layerId] });
-      return features.length > 0;
-    } catch (error) {
-      return true;
-    }
-  }
-  /**
-   * Populate the background layer list with individual layers
-   */
-  populateBackgroundLayerList(container) {
-    container.innerHTML = "";
-    const styleLayers = this.map.getStyle().layers || [];
-    styleLayers.forEach((layer) => {
-      if (!this.isUserAddedLayer(layer.id)) {
-        if (this.excludeDrawnLayers && this.isDrawnLayer(layer.id)) {
-          return;
-        }
-        if (this.isExcludedByPattern(layer.id)) {
-          return;
-        }
-        if (this.state.onlyRenderedFilter && !this.isLayerRendered(layer.id)) {
-          return;
-        }
-        const layerRow = document.createElement("div");
-        layerRow.className = "background-legend-layer-row";
-        layerRow.setAttribute("data-background-layer-id", layer.id);
-        const checkbox = document.createElement("input");
-        checkbox.type = "checkbox";
-        checkbox.className = "background-legend-checkbox";
-        const visibility = this.map.getLayoutProperty(layer.id, "visibility");
-        const isVisible = visibility !== "none";
-        checkbox.checked = isVisible;
-        this.state.backgroundLayerVisibility.set(layer.id, isVisible);
-        checkbox.addEventListener("change", () => {
-          this.toggleIndividualBackgroundLayer(layer.id, checkbox.checked);
-        });
-        const name = document.createElement("span");
-        name.className = "background-legend-layer-name";
-        name.textContent = this.generateFriendlyName(layer.id);
-        name.title = layer.id;
-        const typeIndicator = document.createElement("span");
-        typeIndicator.className = "background-legend-layer-type";
-        typeIndicator.textContent = layer.type;
-        layerRow.appendChild(checkbox);
-        if (this.showLayerSymbol) {
-          const symbol = this.createBackgroundLayerSymbol(layer);
-          if (symbol) {
-            layerRow.appendChild(symbol);
-          }
-        }
-        layerRow.appendChild(name);
-        layerRow.appendChild(typeIndicator);
-        container.appendChild(layerRow);
-      }
-    });
-    if (container.children.length === 0) {
-      const emptyMsg = document.createElement("p");
-      emptyMsg.className = "background-legend-empty";
-      emptyMsg.textContent = this.state.onlyRenderedFilter ? "No rendered layers in current view." : "No background layers found.";
-      container.appendChild(emptyMsg);
-    }
-  }
-  /**
-   * Toggle visibility of an individual background layer
-   */
-  toggleIndividualBackgroundLayer(layerId, visible) {
-    this.state.backgroundLayerVisibility.set(layerId, visible);
-    this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
-    this.updateBackgroundCheckboxState();
-  }
-  /**
-   * Set visibility for all background layers
-   */
-  setAllBackgroundLayersVisibility(visible) {
-    const styleLayers = this.map.getStyle().layers || [];
-    styleLayers.forEach((layer) => {
-      if (!this.isUserAddedLayer(layer.id)) {
-        this.state.backgroundLayerVisibility.set(layer.id, visible);
-        this.map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
-      }
-    });
-    const legendPanel = this.panel.querySelector(".layer-control-background-legend");
-    if (legendPanel) {
-      const checkboxes = legendPanel.querySelectorAll(".background-legend-checkbox");
-      checkboxes.forEach((checkbox) => {
-        checkbox.checked = visible;
-      });
-    }
-    this.updateBackgroundCheckboxState();
-  }
-  /**
-   * Update the main Background checkbox based on individual layer states
-   */
-  updateBackgroundCheckboxState() {
-    const styleLayers = this.map.getStyle().layers || [];
-    let anyVisible = false;
-    let allVisible = true;
-    styleLayers.forEach((layer) => {
-      if (!this.isUserAddedLayer(layer.id)) {
-        const visible = this.state.backgroundLayerVisibility.get(layer.id);
-        if (visible === true) anyVisible = true;
-        if (visible === false) allVisible = false;
-      }
-    });
-    const backgroundItem = this.panel.querySelector('[data-layer-id="Background"]');
-    if (backgroundItem) {
-      const checkbox = backgroundItem.querySelector(".layer-control-checkbox");
-      if (checkbox) {
-        checkbox.checked = anyVisible;
-        checkbox.indeterminate = anyVisible && !allVisible;
-      }
-    }
-    if (this.state.layerStates["Background"]) {
-      this.state.layerStates["Background"].visible = anyVisible;
-    }
-  }
-  /**
-   * Create style button for a layer
-   */
-  createStyleButton(layerId) {
-    if (layerId === "Background") {
-      return null;
-    }
-    const layerState = this.state.layerStates[layerId];
-    const isCustomLayer = (layerState == null ? void 0 : layerState.isCustomLayer) === true;
-    const button = document.createElement("button");
-    button.className = "layer-control-style-button";
-    button.innerHTML = "&#9881;";
-    if (isCustomLayer) {
-      button.title = "Layer info (style editing not available)";
-      button.setAttribute("aria-label", `Layer info for ${layerId}`);
-    } else {
-      button.title = "Edit layer style";
-      button.setAttribute("aria-label", `Edit style for ${layerId}`);
-    }
-    button.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.toggleStyleEditor(layerId);
-    });
-    return button;
-  }
-  /**
-   * Toggle style editor for a layer
-   */
-  toggleStyleEditor(layerId) {
-    if (this.state.activeStyleEditor === layerId) {
-      this.closeStyleEditor(layerId);
-      return;
-    }
-    if (this.state.activeStyleEditor) {
-      this.closeStyleEditor(this.state.activeStyleEditor);
-    }
-    this.openStyleEditor(layerId);
-  }
-  /**
-   * Open style editor for a layer
-   */
-  openStyleEditor(layerId) {
-    var _a3;
-    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-    if (!itemEl) return;
-    const layerState = this.state.layerStates[layerId];
-    if (layerState == null ? void 0 : layerState.isCustomLayer) {
-      const nativeLayerIds = (_a3 = this.customLayerRegistry) == null ? void 0 : _a3.getNativeLayerIds(layerId);
-      if (nativeLayerIds && nativeLayerIds.length > 0) {
-        for (const nativeId of nativeLayerIds) {
-          if (!this.state.originalStyles.has(nativeId)) {
-            const nativeLayer = this.map.getLayer(nativeId);
-            if (nativeLayer) {
-              cacheOriginalLayerStyle(this.map, nativeId, this.state.originalStyles);
-            }
-          }
-        }
-        const editor3 = this.createNativeSubLayerStyleEditor(layerId, nativeLayerIds);
-        if (editor3) {
-          itemEl.appendChild(editor3);
-          this.styleEditors.set(layerId, editor3);
-          this.state.activeStyleEditor = layerId;
-          setTimeout(() => {
-            editor3.scrollIntoView({ behavior: "smooth", block: "nearest" });
-          }, 50);
-          return;
-        }
-      }
-      const editor2 = this.createCustomLayerInfoPanel(layerId);
-      itemEl.appendChild(editor2);
-      this.styleEditors.set(layerId, editor2);
-      this.state.activeStyleEditor = layerId;
-      setTimeout(() => {
-        editor2.scrollIntoView({ behavior: "smooth", block: "nearest" });
-      }, 50);
-      return;
-    }
-    if (!this.state.originalStyles.has(layerId)) {
-      const layer = this.map.getLayer(layerId);
-      if (layer) {
-        cacheOriginalLayerStyle(this.map, layerId, this.state.originalStyles);
-      }
-    }
-    const editor = this.createStyleEditor(layerId);
-    if (!editor) return;
-    itemEl.appendChild(editor);
-    this.styleEditors.set(layerId, editor);
-    this.state.activeStyleEditor = layerId;
-    setTimeout(() => {
-      editor.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }, 50);
-  }
-  /**
-   * Create info panel for custom layers (style editing not supported)
-   */
-  createCustomLayerInfoPanel(layerId) {
-    const editor = document.createElement("div");
-    editor.className = "layer-control-style-editor layer-control-custom-info";
-    const header = document.createElement("div");
-    header.className = "style-editor-header";
-    const title2 = document.createElement("span");
-    title2.className = "style-editor-title";
-    title2.textContent = "Layer Info";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "style-editor-close";
-    closeBtn.innerHTML = "&times;";
-    closeBtn.title = "Close";
-    closeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.closeStyleEditor(layerId);
-    });
-    header.appendChild(title2);
-    header.appendChild(closeBtn);
-    const content = document.createElement("div");
-    content.className = "style-editor-controls";
-    const infoText = document.createElement("p");
-    infoText.className = "layer-control-custom-info-text";
-    infoText.textContent = `This is a custom layer. Style editing is not available for this layer type. Use the visibility toggle and opacity slider to control the layer.`;
-    content.appendChild(infoText);
-    const actions = document.createElement("div");
-    actions.className = "style-editor-actions";
-    const removeBtn = document.createElement("button");
-    removeBtn.className = "style-editor-button style-editor-button-remove";
-    removeBtn.textContent = "Remove";
-    removeBtn.title = "Remove layer from map";
-    removeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.showRemoveConfirmation(editor, () => {
-        this.closeStyleEditor(layerId);
-        this.removeLayer(layerId);
-      });
-    });
-    const closeActionBtn = document.createElement("button");
-    closeActionBtn.className = "style-editor-button style-editor-button-close";
-    closeActionBtn.textContent = "Close";
-    closeActionBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.closeStyleEditor(layerId);
-    });
-    actions.appendChild(removeBtn);
-    actions.appendChild(closeActionBtn);
-    editor.appendChild(header);
-    editor.appendChild(content);
-    editor.appendChild(actions);
-    return editor;
-  }
-  /**
-   * Create a combined style editor for custom layers with native MapLibre sublayers.
-   * Groups controls by sublayer type (fill, line, circle, etc.).
-   */
-  createNativeSubLayerStyleEditor(layerId, nativeLayerIds) {
-    const layersByType = /* @__PURE__ */ new Map();
-    for (const nativeId of nativeLayerIds) {
-      const layer = this.map.getLayer(nativeId);
-      if (layer) {
-        const type2 = layer.type;
-        if (!layersByType.has(type2)) {
-          layersByType.set(type2, []);
-        }
-        layersByType.get(type2).push(nativeId);
-      }
-    }
-    if (layersByType.size === 0) return null;
-    const editor = document.createElement("div");
-    editor.className = "layer-control-style-editor";
-    const header = document.createElement("div");
-    header.className = "style-editor-header";
-    const title2 = document.createElement("span");
-    title2.className = "style-editor-title";
-    title2.textContent = "Edit Style";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "style-editor-close";
-    closeBtn.innerHTML = "&times;";
-    closeBtn.title = "Close";
-    closeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.closeStyleEditor(layerId);
-    });
-    header.appendChild(title2);
-    header.appendChild(closeBtn);
-    editor.appendChild(header);
-    const controls = document.createElement("div");
-    controls.className = "style-editor-controls";
-    const typeLabels = {
-      fill: "Fill",
-      line: "Line",
-      circle: "Circle",
-      symbol: "Symbol",
-      raster: "Raster"
-    };
-    for (const [type2, ids] of layersByType) {
-      if (layersByType.size > 1) {
-        const sectionHeader = document.createElement("div");
-        sectionHeader.className = "style-editor-section-header";
-        sectionHeader.textContent = typeLabels[type2] || type2;
-        controls.appendChild(sectionHeader);
-      }
-      const primaryId = ids[0];
-      this.addStyleControlsForNativeGroup(controls, ids, primaryId, type2);
-    }
-    const actions = document.createElement("div");
-    actions.className = "style-editor-actions";
-    const resetBtn = document.createElement("button");
-    resetBtn.className = "style-editor-button style-editor-button-reset";
-    resetBtn.textContent = "Reset";
-    resetBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      for (const nativeId of nativeLayerIds) {
-        restoreOriginalStyle(this.map, nativeId, this.state.originalStyles);
-      }
-      this.closeStyleEditor(layerId);
-      this.openStyleEditor(layerId);
-    });
-    const removeBtn = document.createElement("button");
-    removeBtn.className = "style-editor-button style-editor-button-remove";
-    removeBtn.textContent = "Remove";
-    removeBtn.title = "Remove layer from map";
-    removeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.showRemoveConfirmation(editor, () => {
-        this.closeStyleEditor(layerId);
-        this.removeLayer(layerId);
-      });
-    });
-    const closeActionBtn = document.createElement("button");
-    closeActionBtn.className = "style-editor-button style-editor-button-close";
-    closeActionBtn.textContent = "Close";
-    closeActionBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.closeStyleEditor(layerId);
-    });
-    actions.appendChild(resetBtn);
-    actions.appendChild(removeBtn);
-    actions.appendChild(closeActionBtn);
-    editor.appendChild(controls);
-    editor.appendChild(actions);
-    return editor;
-  }
-  /**
-   * Add style controls for a group of native layers of the same type.
-   * Changes to any control are applied to all layers in the group.
-   */
-  addStyleControlsForNativeGroup(container, layerIds, primaryLayerId, layerType) {
-    this.nativeLayerGroups.set(primaryLayerId, layerIds);
-    this.addStyleControlsForLayerType(container, primaryLayerId, layerType);
-  }
-  /**
-   * Close style editor for a layer
-   */
-  closeStyleEditor(layerId) {
-    const editor = this.styleEditors.get(layerId);
-    if (editor) {
-      editor.remove();
-      this.styleEditors.delete(layerId);
-    }
-    this.nativeLayerGroups.clear();
-    if (this.state.activeStyleEditor === layerId) {
-      this.state.activeStyleEditor = null;
-    }
-  }
-  /**
-   * Create style editor UI
-   */
-  createStyleEditor(layerId) {
-    const layer = this.map.getLayer(layerId);
-    if (!layer) return null;
-    const editor = document.createElement("div");
-    editor.className = "layer-control-style-editor";
-    const header = document.createElement("div");
-    header.className = "style-editor-header";
-    const title2 = document.createElement("span");
-    title2.className = "style-editor-title";
-    title2.textContent = "Edit Style";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "style-editor-close";
-    closeBtn.innerHTML = "&times;";
-    closeBtn.title = "Close";
-    closeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.closeStyleEditor(layerId);
-    });
-    header.appendChild(title2);
-    header.appendChild(closeBtn);
-    const controls = document.createElement("div");
-    controls.className = "style-editor-controls";
-    const layerType = layer.type;
-    this.addStyleControlsForLayerType(controls, layerId, layerType);
-    const actions = document.createElement("div");
-    actions.className = "style-editor-actions";
-    const resetBtn = document.createElement("button");
-    resetBtn.className = "style-editor-button style-editor-button-reset";
-    resetBtn.textContent = "Reset";
-    resetBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.resetLayerStyle(layerId);
-    });
-    const removeBtn = document.createElement("button");
-    removeBtn.className = "style-editor-button style-editor-button-remove";
-    removeBtn.textContent = "Remove";
-    removeBtn.title = "Remove layer from map";
-    removeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.showRemoveConfirmation(editor, () => {
-        this.closeStyleEditor(layerId);
-        this.removeLayer(layerId);
-      });
-    });
-    const closeActionBtn = document.createElement("button");
-    closeActionBtn.className = "style-editor-button style-editor-button-close";
-    closeActionBtn.textContent = "Close";
-    closeActionBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      this.closeStyleEditor(layerId);
-    });
-    actions.appendChild(resetBtn);
-    actions.appendChild(removeBtn);
-    actions.appendChild(closeActionBtn);
-    editor.appendChild(header);
-    editor.appendChild(controls);
-    editor.appendChild(actions);
-    return editor;
-  }
-  /**
-   * Add style controls based on layer type
-   */
-  addStyleControlsForLayerType(container, layerId, layerType) {
-    switch (layerType) {
-      case "fill":
-        this.addFillControls(container, layerId);
-        break;
-      case "line":
-        this.addLineControls(container, layerId);
-        break;
-      case "circle":
-        this.addCircleControls(container, layerId);
-        break;
-      case "raster":
-        this.addRasterControls(container, layerId);
-        break;
-      case "symbol":
-        this.addSymbolControls(container, layerId);
-        break;
-      default:
-        container.textContent = `Style controls for ${layerType} layers not yet implemented.`;
-    }
-  }
-  /**
-   * Add controls for fill layers
-   */
-  addFillControls(container, layerId) {
-    var _a3;
-    const style = this.map.getStyle();
-    const layer = (_a3 = style.layers) == null ? void 0 : _a3.find((l3) => l3.id === layerId);
-    let fillColor = void 0;
-    if (layer && "paint" in layer && layer.paint && "fill-color" in layer.paint) {
-      fillColor = layer.paint["fill-color"];
-    }
-    if (!fillColor) {
-      fillColor = this.map.getPaintProperty(layerId, "fill-color");
-    }
-    this.createColorControl(container, layerId, "fill-color", "Fill Color", normalizeColor(fillColor || "#088"));
-    const fillOpacity = this.map.getPaintProperty(layerId, "fill-opacity");
-    if (fillOpacity !== void 0 && typeof fillOpacity === "number") {
-      this.createSliderControl(container, layerId, "fill-opacity", "Fill Opacity", fillOpacity, 0, 1, 0.05);
-    }
-    const outlineColor = this.map.getPaintProperty(layerId, "fill-outline-color");
-    if (outlineColor !== void 0) {
-      this.createColorControl(container, layerId, "fill-outline-color", "Outline Color", normalizeColor(outlineColor));
-    }
-  }
-  /**
-   * Add controls for line layers
-   */
-  addLineControls(container, layerId) {
-    var _a3;
-    const style = this.map.getStyle();
-    const layer = (_a3 = style.layers) == null ? void 0 : _a3.find((l3) => l3.id === layerId);
-    let lineColor = void 0;
-    if (layer && "paint" in layer && layer.paint && "line-color" in layer.paint) {
-      lineColor = layer.paint["line-color"];
-    }
-    if (!lineColor) {
-      lineColor = this.map.getPaintProperty(layerId, "line-color");
-    }
-    this.createColorControl(container, layerId, "line-color", "Line Color", normalizeColor(lineColor || "#000"));
-    const lineWidth = this.map.getPaintProperty(layerId, "line-width");
-    this.createSliderControl(container, layerId, "line-width", "Line Width", typeof lineWidth === "number" ? lineWidth : 1, 0, 20, 0.5);
-    const lineOpacity = this.map.getPaintProperty(layerId, "line-opacity");
-    if (lineOpacity !== void 0 && typeof lineOpacity === "number") {
-      this.createSliderControl(container, layerId, "line-opacity", "Line Opacity", lineOpacity, 0, 1, 0.05);
-    }
-    const lineBlur = this.map.getPaintProperty(layerId, "line-blur");
-    if (lineBlur !== void 0 && typeof lineBlur === "number") {
-      this.createSliderControl(container, layerId, "line-blur", "Line Blur", lineBlur, 0, 5, 0.1);
-    }
-  }
-  /**
-   * Add controls for circle layers
-   */
-  addCircleControls(container, layerId) {
-    var _a3;
-    const style = this.map.getStyle();
-    const layer = (_a3 = style.layers) == null ? void 0 : _a3.find((l3) => l3.id === layerId);
-    let circleColor = void 0;
-    if (layer && "paint" in layer && layer.paint && "circle-color" in layer.paint) {
-      circleColor = layer.paint["circle-color"];
-    }
-    if (!circleColor) {
-      circleColor = this.map.getPaintProperty(layerId, "circle-color");
-    }
-    this.createColorControl(container, layerId, "circle-color", "Circle Color", normalizeColor(circleColor || "#000"));
-    const circleRadius = this.map.getPaintProperty(layerId, "circle-radius");
-    this.createSliderControl(container, layerId, "circle-radius", "Radius", typeof circleRadius === "number" ? circleRadius : 5, 0, 40, 0.5);
-    const circleOpacity = this.map.getPaintProperty(layerId, "circle-opacity");
-    if (circleOpacity !== void 0 && typeof circleOpacity === "number") {
-      this.createSliderControl(container, layerId, "circle-opacity", "Opacity", circleOpacity, 0, 1, 0.05);
-    }
-    const strokeColor = this.map.getPaintProperty(layerId, "circle-stroke-color");
-    if (strokeColor !== void 0) {
-      this.createColorControl(container, layerId, "circle-stroke-color", "Stroke Color", normalizeColor(strokeColor));
-    }
-    const strokeWidth = this.map.getPaintProperty(layerId, "circle-stroke-width");
-    if (strokeWidth !== void 0 && typeof strokeWidth === "number") {
-      this.createSliderControl(container, layerId, "circle-stroke-width", "Stroke Width", strokeWidth, 0, 10, 0.1);
-    }
-  }
-  /**
-   * Add controls for raster layers
-   */
-  addRasterControls(container, layerId) {
-    const rasterOpacity = this.map.getPaintProperty(layerId, "raster-opacity");
-    this.createSliderControl(container, layerId, "raster-opacity", "Opacity", typeof rasterOpacity === "number" ? rasterOpacity : 1, 0, 1, 0.05);
-    const brightnessMin = this.map.getPaintProperty(layerId, "raster-brightness-min");
-    this.createSliderControl(container, layerId, "raster-brightness-min", "Brightness Min", typeof brightnessMin === "number" ? brightnessMin : 0, -1, 1, 0.05);
-    const brightnessMax = this.map.getPaintProperty(layerId, "raster-brightness-max");
-    this.createSliderControl(container, layerId, "raster-brightness-max", "Brightness Max", typeof brightnessMax === "number" ? brightnessMax : 1, -1, 1, 0.05);
-    const saturation = this.map.getPaintProperty(layerId, "raster-saturation");
-    this.createSliderControl(container, layerId, "raster-saturation", "Saturation", typeof saturation === "number" ? saturation : 0, -1, 1, 0.05);
-    const contrast = this.map.getPaintProperty(layerId, "raster-contrast");
-    this.createSliderControl(container, layerId, "raster-contrast", "Contrast", typeof contrast === "number" ? contrast : 0, -1, 1, 0.05);
-    const hueRotate = this.map.getPaintProperty(layerId, "raster-hue-rotate");
-    this.createSliderControl(container, layerId, "raster-hue-rotate", "Hue Rotate", typeof hueRotate === "number" ? hueRotate : 0, 0, 350, 5);
-  }
-  /**
-   * Add controls for symbol layers
-   */
-  addSymbolControls(container, layerId) {
-    const textColor = this.map.getPaintProperty(layerId, "text-color");
-    if (textColor !== void 0) {
-      this.createColorControl(container, layerId, "text-color", "Text Color", normalizeColor(textColor));
-    }
-    const textOpacity = this.map.getPaintProperty(layerId, "text-opacity");
-    if (textOpacity !== void 0 && typeof textOpacity === "number") {
-      this.createSliderControl(container, layerId, "text-opacity", "Text Opacity", textOpacity, 0, 1, 0.05);
-    }
-    const iconOpacity = this.map.getPaintProperty(layerId, "icon-opacity");
-    if (iconOpacity !== void 0 && typeof iconOpacity === "number") {
-      this.createSliderControl(container, layerId, "icon-opacity", "Icon Opacity", iconOpacity, 0, 1, 0.05);
-    }
-  }
-  /**
-   * Create a color control
-   */
-  createColorControl(container, layerId, property, label, initialValue) {
-    const controlGroup = document.createElement("div");
-    controlGroup.className = "style-control-group";
-    const labelEl = document.createElement("label");
-    labelEl.className = "style-control-label";
-    labelEl.textContent = label;
-    const inputWrapper = document.createElement("div");
-    inputWrapper.className = "style-control-color-group";
-    const colorInput = document.createElement("input");
-    colorInput.type = "color";
-    colorInput.className = "style-control-color-picker";
-    colorInput.value = initialValue;
-    colorInput.dataset.property = property;
-    const hexDisplay = document.createElement("input");
-    hexDisplay.type = "text";
-    hexDisplay.className = "style-control-color-value";
-    hexDisplay.value = initialValue;
-    hexDisplay.readOnly = true;
-    colorInput.addEventListener("input", () => {
-      const color = colorInput.value;
-      hexDisplay.value = color;
-      const targetIds = this.nativeLayerGroups.get(layerId) || [layerId];
-      for (const id2 of targetIds) {
-        this.map.setPaintProperty(id2, property, color);
-      }
-    });
-    inputWrapper.appendChild(colorInput);
-    inputWrapper.appendChild(hexDisplay);
-    controlGroup.appendChild(labelEl);
-    controlGroup.appendChild(inputWrapper);
-    container.appendChild(controlGroup);
-  }
-  /**
-   * Create a slider control
-   */
-  createSliderControl(container, layerId, property, label, initialValue, min, max, step) {
-    const controlGroup = document.createElement("div");
-    controlGroup.className = "style-control-group";
-    const labelEl = document.createElement("label");
-    labelEl.className = "style-control-label";
-    labelEl.textContent = label;
-    const inputWrapper = document.createElement("div");
-    inputWrapper.className = "style-control-input-wrapper";
-    const slider = document.createElement("input");
-    slider.type = "range";
-    slider.className = "style-control-slider";
-    slider.min = String(min);
-    slider.max = String(max);
-    slider.step = String(step);
-    slider.value = String(initialValue);
-    slider.dataset.property = property;
-    const valueDisplay = document.createElement("span");
-    valueDisplay.className = "style-control-value";
-    valueDisplay.textContent = formatNumericValue(initialValue, step);
-    slider.addEventListener("input", () => {
-      const value = parseFloat(slider.value);
-      valueDisplay.textContent = formatNumericValue(value, step);
-      const targetIds = this.nativeLayerGroups.get(layerId) || [layerId];
-      for (const id2 of targetIds) {
-        this.map.setPaintProperty(id2, property, value);
-      }
-    });
-    inputWrapper.appendChild(slider);
-    inputWrapper.appendChild(valueDisplay);
-    controlGroup.appendChild(labelEl);
-    controlGroup.appendChild(inputWrapper);
-    container.appendChild(controlGroup);
-  }
-  /**
-   * Reset layer style to original
-   */
-  resetLayerStyle(layerId) {
-    const originalStyle = this.state.originalStyles.get(layerId);
-    if (!originalStyle) return;
-    restoreOriginalStyle(this.map, layerId, this.state.originalStyles);
-    const editor = this.styleEditors.get(layerId);
-    if (editor) {
-      const sliders = editor.querySelectorAll(".style-control-slider");
-      sliders.forEach((slider) => {
-        var _a3;
-        const property = slider.dataset.property;
-        if (property) {
-          const value = this.map.getPaintProperty(layerId, property);
-          if (value !== void 0 && typeof value === "number") {
-            slider.value = String(value);
-            const valueDisplay = (_a3 = slider.parentElement) == null ? void 0 : _a3.querySelector(".style-control-value");
-            if (valueDisplay) {
-              const step = parseFloat(slider.step);
-              valueDisplay.textContent = formatNumericValue(value, step);
-            }
-          }
-        }
-      });
-      const colorPickers = editor.querySelectorAll(".style-control-color-picker");
-      colorPickers.forEach((picker) => {
-        var _a3;
-        const property = picker.dataset.property;
-        if (property) {
-          const value = this.map.getPaintProperty(layerId, property);
-          if (value !== void 0) {
-            const hexColor = normalizeColor(value);
-            picker.value = hexColor;
-            const hexDisplay = (_a3 = picker.parentElement) == null ? void 0 : _a3.querySelector(".style-control-color-value");
-            if (hexDisplay) {
-              hexDisplay.textContent = hexColor;
-            }
-          }
-        }
-      });
-    }
-  }
-  /**
-   * Update layer states from map (sync UI with map)
-   */
-  updateLayerStatesFromMap() {
-    if (this.state.userInteractingWithSlider) {
-      return;
-    }
-    Object.keys(this.state.layerStates).forEach((layerId) => {
-      var _a3;
-      try {
-        if ((_a3 = this.state.layerStates[layerId]) == null ? void 0 : _a3.isCustomLayer) {
-          return;
-        }
-        if (layerId === "Background") {
-          return;
-        }
-        const layer = this.map.getLayer(layerId);
-        if (!layer) return;
-        const visibility = this.map.getLayoutProperty(layerId, "visibility");
-        const isVisible = visibility !== "none";
-        const layerType = layer.type;
-        const opacity = getLayerOpacity(this.map, layerId, layerType);
-        if (this.state.layerStates[layerId]) {
-          this.state.layerStates[layerId].visible = isVisible;
-          this.state.layerStates[layerId].opacity = opacity;
-        }
-        this.updateUIForLayer(layerId, isVisible, opacity);
-      } catch (error) {
-        console.warn(`Failed to update state for layer ${layerId}:`, error);
-      }
-    });
-  }
-  /**
-   * Update UI elements for a specific layer
-   */
-  updateUIForLayer(layerId, visible, opacity) {
-    const layerItems = this.panel.querySelectorAll(".layer-control-item");
-    layerItems.forEach((item) => {
-      if (item.dataset.layerId === layerId) {
-        const checkbox = item.querySelector(".layer-control-checkbox");
-        const opacitySlider = item.querySelector(".layer-control-opacity");
-        if (checkbox) {
-          checkbox.checked = visible;
-        }
-        if (opacitySlider) {
-          opacitySlider.value = String(opacity);
-          opacitySlider.title = `Opacity: ${Math.round(opacity * 100)}%`;
-        }
-      }
-    });
-  }
-  /**
-   * Check for new layers and add them to the control, remove deleted layers
-   */
-  checkForNewLayers() {
-    if (this.state.isStyleOperationInProgress) {
-      return;
-    }
-    try {
-      const style = this.map.getStyle();
-      if (!style || !style.layers) {
-        return;
-      }
-      const currentMapLayerIds = new Set(style.layers.map((layer) => layer.id));
-      const isAutoDetectMode = this.targetLayers.length === 0 || this.targetLayers.length === 1 && this.targetLayers[0] === "Background" || this.targetLayers.every((id2) => id2 === "Background" || this.state.layerStates[id2]);
-      const newLayers = [];
-      const useBasemapStyleDetection = this.basemapLayerIds !== null && this.basemapLayerIds.size > 0;
-      const useInitialLayerDetection = !useBasemapStyleDetection && this.initialLayerIds !== null && this.initialLayerIds.size > 0;
-      currentMapLayerIds.forEach((layerId) => {
-        if (layerId !== "Background" && !this.state.layerStates[layerId]) {
-          const layer = this.map.getLayer(layerId);
-          if (layer) {
-            if (this.initialLayerIds !== null && this.initialLayerIds.has(layerId)) {
-              return;
-            }
-            if (isAutoDetectMode) {
-              if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
-                return;
-              }
-              if (this.isExcludedByPattern(layerId)) {
-                return;
-              }
-              if (!this.isUserAddedLayer(layerId)) {
-                return;
-              }
-              if (useBasemapStyleDetection) {
-                if (this.basemapLayerIds.has(layerId)) {
-                  return;
-                }
-              } else if (useInitialLayerDetection) {
-                if (this.initialLayerIds.has(layerId)) {
-                  const userAddedSourceIds = this.detectUserAddedSources();
-                  const sourceId = layer.source;
-                  if (!sourceId || !userAddedSourceIds.has(sourceId)) {
-                    return;
-                  }
-                }
-              } else {
-                const userAddedSourceIds = this.detectUserAddedSources();
-                const sourceId = layer.source;
-                if (!sourceId || !userAddedSourceIds.has(sourceId)) {
-                  return;
-                }
-              }
-            }
-            newLayers.push(layerId);
-          }
-        }
-      });
-      const removedLayers = [];
-      Object.keys(this.state.layerStates).forEach((layerId) => {
-        const state = this.state.layerStates[layerId];
-        if (layerId !== "Background" && !state.isCustomLayer && !currentMapLayerIds.has(layerId)) {
-          removedLayers.push(layerId);
-        }
-      });
-      if (removedLayers.length > 0) {
-        removedLayers.forEach((layerId) => {
-          delete this.state.layerStates[layerId];
-          const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-          if (itemEl) {
-            itemEl.remove();
-          }
-          if (this.state.activeStyleEditor === layerId) {
-            this.state.activeStyleEditor = null;
-          }
-          this.styleEditors.delete(layerId);
-        });
-      }
-      if (newLayers.length > 0) {
-        newLayers.forEach((layerId) => {
-          const layer = this.map.getLayer(layerId);
-          if (!layer) return;
-          const layerType = layer.type;
-          const opacity = getLayerOpacity(this.map, layerId, layerType);
-          const visibility = this.map.getLayoutProperty(layerId, "visibility");
-          const isVisible = visibility !== "none";
-          this.state.layerStates[layerId] = {
-            visible: isVisible,
-            opacity,
-            name: this.generateFriendlyName(layerId)
-          };
-          this.addLayerItem(layerId, this.state.layerStates[layerId]);
-        });
-      }
-      if (this.customLayerRegistry) {
-        const customLayerIds = this.customLayerRegistry.getAllLayerIds();
-        customLayerIds.forEach((layerId) => {
-          if (!this.state.layerStates[layerId] && !this.removedCustomLayerIds.has(layerId)) {
-            const customState = this.customLayerRegistry.getLayerState(layerId);
-            if (customState) {
-              this.state.layerStates[layerId] = {
-                visible: customState.visible,
-                opacity: customState.opacity,
-                name: customState.name,
-                isCustomLayer: true,
-                customLayerType: this.customLayerRegistry.getSymbolType(layerId) || void 0
-              };
-              this.addLayerItem(layerId, this.state.layerStates[layerId]);
-            }
-          }
-        });
-        Object.keys(this.state.layerStates).forEach((layerId) => {
-          const state = this.state.layerStates[layerId];
-          if (state.isCustomLayer && !customLayerIds.includes(layerId)) {
-            delete this.state.layerStates[layerId];
-            const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-            if (itemEl) {
-              itemEl.remove();
-            }
-            if (this.state.activeStyleEditor === layerId) {
-              this.state.activeStyleEditor = null;
-            }
-            this.styleEditors.delete(layerId);
-          }
-        });
-      }
-    } catch (error) {
-      console.warn("Failed to check for new layers:", error);
-    }
-  }
-  /**
-   * Register a custom layer adapter dynamically.
-   * This allows adding adapters after the LayerControl has been initialized.
-   * @param adapter The custom layer adapter to register
-   */
-  registerCustomAdapter(adapter) {
-    if (!this.customLayerRegistry) {
-      this.customLayerRegistry = new CustomLayerRegistry();
-      this.customLayerUnsubscribe = this.customLayerRegistry.onChange((event, layerId) => {
-        if (event === "add" && layerId) {
-          this.removedCustomLayerIds.delete(layerId);
-        }
-        this.checkForNewLayers();
-      });
-    }
-    this.customLayerRegistry.register(adapter);
-    if (this.panel) {
-      this.checkForNewLayers();
-    }
-  }
-  // ===== Context Menu Methods =====
-  /**
-   * Create context menu element
-   */
-  createContextMenu() {
-    const menu = document.createElement("div");
-    menu.className = "layer-control-context-menu";
-    menu.style.display = "none";
-    const renameItem = this.createContextMenuItem("Rename", "✏️", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.startRenaming(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    });
-    const zoomItem = this.createContextMenuItem("Zoom to Layer", "🔍", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.zoomToLayer(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    });
-    const sep1 = document.createElement("div");
-    sep1.className = "context-menu-separator";
-    const moveUpItem = this.createContextMenuItem("Move Up", "↑", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.moveLayerUp(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    });
-    const moveTopItem = this.createContextMenuItem("Move to Top", "⤒", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.moveLayerToTop(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    });
-    const moveDownItem = this.createContextMenuItem("Move Down", "↓", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.moveLayerDown(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    });
-    const moveBottomItem = this.createContextMenuItem("Move to Bottom", "⤓", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.moveLayerToBottom(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    });
-    const sep2 = document.createElement("div");
-    sep2.className = "context-menu-separator";
-    const removeItem = this.createContextMenuItem("Remove Layer", "🗑️", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.removeLayer(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    }, true);
-    menu.appendChild(renameItem);
-    menu.appendChild(zoomItem);
-    menu.appendChild(sep1);
-    menu.appendChild(moveUpItem);
-    menu.appendChild(moveTopItem);
-    menu.appendChild(moveDownItem);
-    menu.appendChild(moveBottomItem);
-    menu.appendChild(sep2);
-    menu.appendChild(removeItem);
-    return menu;
-  }
-  /**
-   * Create a context menu item
-   */
-  createContextMenuItem(label, icon, onClick, isDanger = false) {
-    const item = document.createElement("div");
-    item.className = "context-menu-item" + (isDanger ? " context-menu-item-danger" : "");
-    const iconEl = document.createElement("span");
-    iconEl.className = "context-menu-item-icon";
-    iconEl.textContent = icon;
-    const labelEl = document.createElement("span");
-    labelEl.className = "context-menu-item-label";
-    labelEl.textContent = label;
-    item.appendChild(iconEl);
-    item.appendChild(labelEl);
-    item.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      onClick();
-    });
-    return item;
-  }
-  /**
-   * Show context menu at position
-   */
-  showContextMenu(layerId, x2, y2) {
-    if (!this.contextMenuEl) return;
-    this.state.contextMenu = {
-      visible: true,
-      targetLayerId: layerId,
-      x: x2,
-      y: y2
-    };
-    const mapRect = this.mapContainer.getBoundingClientRect();
-    let menuX = x2 - mapRect.left;
-    let menuY = y2 - mapRect.top;
-    this.contextMenuEl.style.display = "block";
-    const menuRect = this.contextMenuEl.getBoundingClientRect();
-    if (menuX + menuRect.width > mapRect.width) {
-      menuX = mapRect.width - menuRect.width - 5;
-    }
-    if (menuY + menuRect.height > mapRect.height) {
-      menuY = mapRect.height - menuRect.height - 5;
-    }
-    this.contextMenuEl.style.left = `${menuX}px`;
-    this.contextMenuEl.style.top = `${menuY}px`;
-  }
-  /**
-   * Hide context menu
-   */
-  hideContextMenu() {
-    if (!this.contextMenuEl) return;
-    this.state.contextMenu = {
-      visible: false,
-      targetLayerId: null,
-      x: 0,
-      y: 0
-    };
-    this.contextMenuEl.style.display = "none";
-  }
-  /**
-   * Start renaming a layer
-   */
-  startRenaming(layerId) {
-    var _a3;
-    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-    if (!itemEl) return;
-    const nameEl = itemEl.querySelector(".layer-control-name");
-    if (!nameEl) return;
-    this.state.renamingLayerId = layerId;
-    const currentName = this.state.customLayerNames.get(layerId) || ((_a3 = this.state.layerStates[layerId]) == null ? void 0 : _a3.name) || layerId;
-    const input = document.createElement("input");
-    input.type = "text";
-    input.className = "layer-control-name-input";
-    input.value = currentName;
-    const finishRename = () => {
-      var _a22;
-      const newName = input.value.trim() || currentName;
-      const oldName = currentName;
-      if (newName !== oldName) {
-        this.state.customLayerNames.set(layerId, newName);
-        if (this.state.layerStates[layerId]) {
-          this.state.layerStates[layerId].name = newName;
-        }
-        (_a22 = this.onLayerRename) == null ? void 0 : _a22.call(this, layerId, oldName, newName);
-      }
-      const newNameEl = document.createElement("span");
-      newNameEl.className = "layer-control-name";
-      newNameEl.textContent = newName;
-      newNameEl.title = newName;
-      input.replaceWith(newNameEl);
-      this.state.renamingLayerId = null;
-    };
-    input.addEventListener("blur", finishRename);
-    input.addEventListener("keydown", (e2) => {
-      if (e2.key === "Enter") {
-        e2.preventDefault();
-        finishRename();
-      } else if (e2.key === "Escape") {
-        e2.preventDefault();
-        const newNameEl = document.createElement("span");
-        newNameEl.className = "layer-control-name";
-        newNameEl.textContent = currentName;
-        newNameEl.title = currentName;
-        input.replaceWith(newNameEl);
-        this.state.renamingLayerId = null;
-      }
-    });
-    nameEl.replaceWith(input);
-    input.focus();
-    input.select();
-  }
-  /**
-   * Zoom to a layer's bounds
-   */
-  zoomToLayer(layerId) {
-    const layerState = this.state.layerStates[layerId];
-    if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
-      const bounds = this.customLayerRegistry.getBounds(layerId);
-      if (bounds) {
-        this.map.fitBounds(bounds, { padding: 50 });
-        return;
-      }
-    }
-    const layer = this.map.getLayer(layerId);
-    if (!layer) return;
-    try {
-      const sourceId = layer.source;
-      let features = sourceId ? this.map.querySourceFeatures(sourceId) : [];
-      if (features.length === 0) {
-        features = this.map.queryRenderedFeatures({ layers: [layerId] });
-      }
-      if (features.length === 0) return;
-      let minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity;
-      features.forEach((feature) => {
-        if (!feature.geometry) return;
-        const processCoords = (coords) => {
-          if (typeof coords[0] === "number") {
-            const [lng, lat] = coords;
-            minLng = Math.min(minLng, lng);
-            minLat = Math.min(minLat, lat);
-            maxLng = Math.max(maxLng, lng);
-            maxLat = Math.max(maxLat, lat);
-          } else {
-            coords.forEach(processCoords);
-          }
-        };
-        if (feature.geometry.type === "Point") {
-          processCoords(feature.geometry.coordinates);
-        } else if (feature.geometry.type === "LineString" || feature.geometry.type === "MultiPoint") {
-          feature.geometry.coordinates.forEach(processCoords);
-        } else if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiLineString") {
-          feature.geometry.coordinates.forEach((ring) => ring.forEach(processCoords));
-        } else if (feature.geometry.type === "MultiPolygon") {
-          feature.geometry.coordinates.forEach(
-            (polygon) => polygon.forEach((ring) => ring.forEach(processCoords))
-          );
-        }
-      });
-      if (minLng !== Infinity && minLat !== Infinity && maxLng !== -Infinity && maxLat !== -Infinity) {
-        this.map.fitBounds([[minLng, minLat], [maxLng, maxLat]], { padding: 50 });
-      }
-    } catch (error) {
-      console.warn(`Failed to zoom to layer ${layerId}:`, error);
-    }
-  }
-  /**
-   * Get user layer IDs in current map order (top to bottom in UI = high z-index to low)
-   * Includes both MapLibre layers and custom layers managed by adapters.
-   */
-  getUserLayerIdsInMapOrder() {
-    const style = this.map.getStyle();
-    if (!(style == null ? void 0 : style.layers)) return [];
-    const mapLayerIds = style.layers.map((l3) => l3.id);
-    const userLayerIds = Object.keys(this.state.layerStates).filter((id2) => id2 !== "Background");
-    const mapLibreLayers = userLayerIds.filter((id2) => mapLayerIds.includes(id2));
-    const customLayers = userLayerIds.filter(
-      (id2) => {
-        var _a3;
-        return ((_a3 = this.state.layerStates[id2]) == null ? void 0 : _a3.isCustomLayer) && !mapLayerIds.includes(id2);
-      }
-    );
-    const sortedMapLibreLayers = mapLibreLayers.sort((a2, b2) => mapLayerIds.indexOf(b2) - mapLayerIds.indexOf(a2));
-    return [...customLayers, ...sortedMapLibreLayers];
-  }
-  /**
-   * Check if a layer is a MapLibre layer (not a custom layer)
-   */
-  isMapLibreLayer(layerId) {
-    return this.map.getLayer(layerId) !== void 0;
-  }
-  /**
-   * Find the next MapLibre layer ID in a direction from a given index
-   * @param layerIds Array of layer IDs
-   * @param startIndex Index to start searching from
-   * @param direction 1 for forward (toward bottom), -1 for backward (toward top)
-   * @returns MapLibre layer ID or undefined if not found
-   */
-  findNextMapLibreLayer(layerIds, startIndex, direction) {
-    for (let i2 = startIndex; direction === 1 ? i2 < layerIds.length : i2 >= 0; i2 += direction) {
-      if (this.isMapLibreLayer(layerIds[i2])) {
-        return layerIds[i2];
-      }
-    }
-    return void 0;
-  }
-  /**
-   * Move a layer up in UI (higher rendering order = move to higher z-index)
-   */
-  moveLayerUp(layerId) {
-    var _a3, _b3;
-    const layerIds = this.getUserLayerIdsInMapOrder();
-    const index = layerIds.indexOf(layerId);
-    if (index <= 0) return;
-    const isCustom = (_a3 = this.state.layerStates[layerId]) == null ? void 0 : _a3.isCustomLayer;
-    if (!isCustom && this.isMapLibreLayer(layerId)) {
-      try {
-        const targetBeforeId = index >= 2 ? this.findNextMapLibreLayer(layerIds, index - 2, -1) : void 0;
-        this.map.moveLayer(layerId, targetBeforeId);
-      } catch (e2) {
-      }
-    }
-    const newLayerStates = {};
-    const orderedIds = [...layerIds];
-    [orderedIds[index], orderedIds[index - 1]] = [orderedIds[index - 1], orderedIds[index]];
-    if (this.state.layerStates["Background"]) {
-      newLayerStates["Background"] = this.state.layerStates["Background"];
-    }
-    orderedIds.forEach((id2) => {
-      if (this.state.layerStates[id2]) {
-        newLayerStates[id2] = this.state.layerStates[id2];
-      }
-    });
-    this.state.layerStates = newLayerStates;
-    this.buildLayerItems();
-    (_b3 = this.onLayerReorder) == null ? void 0 : _b3.call(this, this.getUserLayerIdsInMapOrder());
-  }
-  /**
-   * Move a layer to the top (highest rendering order)
-   */
-  moveLayerToTop(layerId) {
-    var _a3, _b3;
-    const layerIds = this.getUserLayerIdsInMapOrder();
-    const index = layerIds.indexOf(layerId);
-    if (index <= 0) return;
-    const isCustom = (_a3 = this.state.layerStates[layerId]) == null ? void 0 : _a3.isCustomLayer;
-    if (!isCustom && this.isMapLibreLayer(layerId)) {
-      try {
-        this.map.moveLayer(layerId);
-      } catch (e2) {
-      }
-    }
-    const newLayerStates = {};
-    const orderedIds = [...layerIds];
-    orderedIds.splice(index, 1);
-    orderedIds.unshift(layerId);
-    if (this.state.layerStates["Background"]) {
-      newLayerStates["Background"] = this.state.layerStates["Background"];
-    }
-    orderedIds.forEach((id2) => {
-      if (this.state.layerStates[id2]) {
-        newLayerStates[id2] = this.state.layerStates[id2];
-      }
-    });
-    this.state.layerStates = newLayerStates;
-    this.buildLayerItems();
-    (_b3 = this.onLayerReorder) == null ? void 0 : _b3.call(this, this.getUserLayerIdsInMapOrder());
-  }
-  /**
-   * Move a layer down in UI (lower rendering order = move to lower z-index)
-   */
-  moveLayerDown(layerId) {
-    var _a3, _b3;
-    const layerIds = this.getUserLayerIdsInMapOrder();
-    const index = layerIds.indexOf(layerId);
-    if (index < 0 || index >= layerIds.length - 1) return;
-    const isCustom = (_a3 = this.state.layerStates[layerId]) == null ? void 0 : _a3.isCustomLayer;
-    if (!isCustom && this.isMapLibreLayer(layerId)) {
-      const belowLayerId = this.findNextMapLibreLayer(layerIds, index + 1, 1);
-      if (belowLayerId) {
-        try {
-          this.map.moveLayer(layerId, belowLayerId);
-        } catch (e2) {
-        }
-      }
-    }
-    const newLayerStates = {};
-    const orderedIds = [...layerIds];
-    [orderedIds[index], orderedIds[index + 1]] = [orderedIds[index + 1], orderedIds[index]];
-    if (this.state.layerStates["Background"]) {
-      newLayerStates["Background"] = this.state.layerStates["Background"];
-    }
-    orderedIds.forEach((id2) => {
-      if (this.state.layerStates[id2]) {
-        newLayerStates[id2] = this.state.layerStates[id2];
-      }
-    });
-    this.state.layerStates = newLayerStates;
-    this.buildLayerItems();
-    (_b3 = this.onLayerReorder) == null ? void 0 : _b3.call(this, this.getUserLayerIdsInMapOrder());
-  }
-  /**
-   * Move a layer to the bottom (lowest rendering order among user layers)
-   */
-  moveLayerToBottom(layerId) {
-    var _a3, _b3;
-    const layerIds = this.getUserLayerIdsInMapOrder();
-    if (layerIds.length <= 1) return;
-    const index = layerIds.indexOf(layerId);
-    if (index < 0 || index === layerIds.length - 1) return;
-    const isCustom = (_a3 = this.state.layerStates[layerId]) == null ? void 0 : _a3.isCustomLayer;
-    if (!isCustom && this.isMapLibreLayer(layerId)) {
-      const bottomLayerId = this.findNextMapLibreLayer(layerIds, layerIds.length - 1, -1);
-      if (bottomLayerId && bottomLayerId !== layerId) {
-        try {
-          this.map.moveLayer(layerId, bottomLayerId);
-        } catch (e2) {
-        }
-      }
-    }
-    const newLayerStates = {};
-    const orderedIds = [...layerIds];
-    orderedIds.splice(index, 1);
-    orderedIds.push(layerId);
-    if (this.state.layerStates["Background"]) {
-      newLayerStates["Background"] = this.state.layerStates["Background"];
-    }
-    orderedIds.forEach((id2) => {
-      if (this.state.layerStates[id2]) {
-        newLayerStates[id2] = this.state.layerStates[id2];
-      }
-    });
-    this.state.layerStates = newLayerStates;
-    this.buildLayerItems();
-    (_b3 = this.onLayerReorder) == null ? void 0 : _b3.call(this, this.getUserLayerIdsInMapOrder());
-  }
-  /**
-   * Show inline remove confirmation instead of browser confirm() dialog.
-   * Works in Jupyter notebooks where native dialogs may not appear.
-   */
-  showRemoveConfirmation(container, onConfirm) {
-    const existing = container.querySelector(".layer-control-remove-confirm");
-    if (existing) {
-      existing.remove();
-    }
-    const confirmEl = document.createElement("div");
-    confirmEl.className = "layer-control-remove-confirm";
-    const message = document.createElement("div");
-    message.className = "layer-control-remove-confirm-message";
-    message.innerHTML = `
-      <svg class="layer-control-remove-confirm-icon" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
-      </svg>
-      <span>Remove this layer?</span>
-    `;
-    const buttons = document.createElement("div");
-    buttons.className = "layer-control-remove-confirm-buttons";
-    const cancelBtn = document.createElement("button");
-    cancelBtn.className = "layer-control-remove-confirm-btn layer-control-remove-confirm-btn-cancel";
-    cancelBtn.textContent = "Cancel";
-    cancelBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      confirmEl.remove();
-    });
-    const confirmBtn = document.createElement("button");
-    confirmBtn.className = "layer-control-remove-confirm-btn layer-control-remove-confirm-btn-confirm";
-    confirmBtn.textContent = "Remove";
-    confirmBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      confirmEl.remove();
-      onConfirm();
-    });
-    buttons.appendChild(cancelBtn);
-    buttons.appendChild(confirmBtn);
-    confirmEl.appendChild(message);
-    confirmEl.appendChild(buttons);
-    container.appendChild(confirmEl);
-    requestAnimationFrame(() => {
-      confirmEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    });
-  }
-  /**
-   * Remove a layer from the map
-   */
-  removeLayer(layerId) {
-    var _a3, _b3;
-    this.state.isStyleOperationInProgress = true;
-    const layerState = this.state.layerStates[layerId];
-    if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
-      this.removedCustomLayerIds.add(layerId);
-      this.customLayerRegistry.setVisibility(layerId, false);
-      this.customLayerRegistry.removeLayer(layerId);
-    }
-    try {
-      const layer = this.map.getLayer(layerId);
-      if (layer) {
-        const sourceId = layer.source;
-        this.map.removeLayer(layerId);
-        if (sourceId) {
-          const style = this.map.getStyle();
-          const sourceStillUsed = (_a3 = style == null ? void 0 : style.layers) == null ? void 0 : _a3.some((l3) => l3.source === sourceId);
-          if (!sourceStillUsed) {
-            try {
-              this.map.removeSource(sourceId);
-            } catch (e2) {
-            }
-          }
-        }
-      }
-    } catch (error) {
-      console.warn(`Failed to remove layer ${layerId}:`, error);
-    }
-    delete this.state.layerStates[layerId];
-    this.state.customLayerNames.delete(layerId);
-    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-    if (itemEl) {
-      itemEl.remove();
-    }
-    (_b3 = this.onLayerRemove) == null ? void 0 : _b3.call(this, layerId);
-    setTimeout(() => {
-      this.state.isStyleOperationInProgress = false;
-    }, 200);
-  }
-  // ===== Drag and Drop Methods =====
-  /**
-   * Create drag handle element
-   */
-  createDragHandle(layerId) {
-    const handle = document.createElement("div");
-    handle.className = "layer-control-drag-handle";
-    handle.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor">
-      <circle cx="5" cy="3" r="1.5"/>
-      <circle cx="11" cy="3" r="1.5"/>
-      <circle cx="5" cy="8" r="1.5"/>
-      <circle cx="11" cy="8" r="1.5"/>
-      <circle cx="5" cy="13" r="1.5"/>
-      <circle cx="11" cy="13" r="1.5"/>
-    </svg>`;
-    handle.title = "Drag to reorder";
-    handle.addEventListener("pointerdown", (e2) => {
-      e2.preventDefault();
-      e2.stopPropagation();
-      this.startDrag(layerId, e2);
-    });
-    return handle;
-  }
-  /**
-   * Create a disabled drag handle for alignment (used for Background layer)
-   */
-  createDisabledDragHandle() {
-    const handle = document.createElement("div");
-    handle.className = "layer-control-drag-handle layer-control-drag-handle-disabled";
-    handle.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor">
-      <circle cx="5" cy="3" r="1.5"/>
-      <circle cx="11" cy="3" r="1.5"/>
-      <circle cx="5" cy="8" r="1.5"/>
-      <circle cx="11" cy="8" r="1.5"/>
-      <circle cx="5" cy="13" r="1.5"/>
-      <circle cx="11" cy="13" r="1.5"/>
-    </svg>`;
-    return handle;
-  }
-  /**
-   * Start dragging a layer
-   */
-  startDrag(layerId, e2) {
-    var _a3;
-    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-    if (!itemEl) return;
-    const rect = itemEl.getBoundingClientRect();
-    this.state.drag = {
-      active: true,
-      layerId,
-      startY: e2.clientY,
-      currentY: e2.clientY,
-      placeholder: null,
-      draggedElement: null
-    };
-    this.panel.classList.add("dragging-active");
-    itemEl.classList.add("dragging");
-    const placeholder = document.createElement("div");
-    placeholder.className = "layer-control-drop-placeholder";
-    placeholder.style.height = `${rect.height}px`;
-    (_a3 = itemEl.parentNode) == null ? void 0 : _a3.insertBefore(placeholder, itemEl);
-    this.state.drag.placeholder = placeholder;
-    const clone2 = itemEl.cloneNode(true);
-    clone2.classList.remove("dragging");
-    clone2.className = "layer-control-item layer-control-item-dragging";
-    clone2.style.width = `${rect.width}px`;
-    clone2.style.left = `${rect.left}px`;
-    clone2.style.top = `${rect.top}px`;
-    document.body.appendChild(clone2);
-    this.state.drag.draggedElement = clone2;
-    const onMove = (moveE) => this.onDragMove(moveE);
-    const onEnd = (endE) => {
-      document.removeEventListener("pointermove", onMove);
-      document.removeEventListener("pointerup", onEnd);
-      document.removeEventListener("pointercancel", onEnd);
-      this.endDrag(endE);
-    };
-    document.addEventListener("pointermove", onMove);
-    document.addEventListener("pointerup", onEnd);
-    document.addEventListener("pointercancel", onEnd);
-  }
-  /**
-   * Handle drag move
-   */
-  onDragMove(e2) {
-    var _a3, _b3;
-    if (!this.state.drag.active || !this.state.drag.draggedElement) return;
-    const placeholder = this.state.drag.placeholder;
-    if (!placeholder) return;
-    const deltaY = e2.clientY - this.state.drag.startY;
-    const clone2 = this.state.drag.draggedElement;
-    const currentTop = parseFloat(clone2.style.top) || 0;
-    clone2.style.top = `${currentTop + deltaY}px`;
-    this.state.drag.startY = e2.clientY;
-    this.state.drag.currentY = e2.clientY;
-    const items2 = Array.from(this.panel.querySelectorAll(".layer-control-item:not(.dragging)")).filter((item) => item.dataset.layerId !== "Background");
-    for (const item of items2) {
-      const itemRect = item.getBoundingClientRect();
-      if (e2.clientY >= itemRect.top && e2.clientY <= itemRect.bottom) {
-        const itemMiddle = itemRect.top + itemRect.height / 2;
-        if (e2.clientY < itemMiddle) {
-          if (placeholder.nextSibling !== item) {
-            (_a3 = item.parentNode) == null ? void 0 : _a3.insertBefore(placeholder, item);
-          }
-        } else {
-          if (placeholder.previousSibling !== item) {
-            (_b3 = item.parentNode) == null ? void 0 : _b3.insertBefore(placeholder, item.nextSibling);
-          }
-        }
-        break;
-      }
-    }
-  }
-  /**
-   * End dragging
-   */
-  endDrag(_e2) {
-    var _a3;
-    if (!this.state.drag.active) return;
-    const layerId = this.state.drag.layerId;
-    const placeholder = this.state.drag.placeholder;
-    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
-    if (itemEl && placeholder) {
-      (_a3 = placeholder.parentNode) == null ? void 0 : _a3.insertBefore(itemEl, placeholder);
-      itemEl.classList.remove("dragging");
-    }
-    this.cleanupDragState();
-    this.applyUIOrderToMap();
-  }
-  /**
-   * Clean up drag state
-   */
-  cleanupDragState() {
-    if (this.state.drag.draggedElement) {
-      this.state.drag.draggedElement.remove();
-    }
-    if (this.state.drag.placeholder) {
-      this.state.drag.placeholder.remove();
-    }
-    this.panel.classList.remove("dragging-active");
-    this.panel.querySelectorAll(".layer-control-item.dragging").forEach((el) => {
-      el.classList.remove("dragging");
-    });
-    this.state.drag = {
-      active: false,
-      layerId: null,
-      startY: 0,
-      currentY: 0,
-      placeholder: null,
-      draggedElement: null
-    };
-  }
-  /**
-   * Apply UI order to map layers
-   */
-  applyUIOrderToMap() {
-    var _a3, _b3;
-    this.state.isStyleOperationInProgress = true;
-    const items2 = this.panel.querySelectorAll(".layer-control-item");
-    const uiLayerIds = [];
-    items2.forEach((item) => {
-      const layerId = item.dataset.layerId;
-      if (layerId && layerId !== "Background") {
-        uiLayerIds.push(layerId);
-      }
-    });
-    const reversedIds = [...uiLayerIds].reverse();
-    const style = this.map.getStyle();
-    const mapLibreLayerIds = new Set(((_a3 = style == null ? void 0 : style.layers) == null ? void 0 : _a3.map((l3) => l3.id)) || []);
-    for (let i2 = 0; i2 < reversedIds.length; i2++) {
-      const layerId = reversedIds[i2];
-      if (!mapLibreLayerIds.has(layerId)) {
-        continue;
-      }
-      let beforeId = void 0;
-      for (let j2 = i2 - 1; j2 >= 0; j2--) {
-        if (mapLibreLayerIds.has(reversedIds[j2])) {
-          beforeId = reversedIds[j2];
-          break;
-        }
-      }
-      try {
-        this.map.moveLayer(layerId, beforeId);
-      } catch (e2) {
-      }
-    }
-    (_b3 = this.onLayerReorder) == null ? void 0 : _b3.call(this, uiLayerIds);
-    setTimeout(() => {
-      this.state.isStyleOperationInProgress = false;
-    }, 200);
-  }
-}
 const DEFAULT_BASEMAPS = {
   liberty: "https://tiles.openfreemap.org/styles/liberty",
   positron: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
@@ -45948,9 +42424,6 @@ function toJsonValue(value) {
     return String(value);
   }
 }
-function basemapStyleUrl(style) {
-  return typeof style === "string" && /^https?:\/\//.test(style) ? style : void 0;
-}
 class MapLibreAgentTools {
   constructor(map, options) {
     __publicField(this, "map");
@@ -45958,34 +42431,13 @@ class MapLibreAgentTools {
     __publicField(this, "allowCodeExecution");
     __publicField(this, "allowDestructiveTools");
     __publicField(this, "overlays", new globalThis.Map());
-    __publicField(this, "layerControl", null);
-    __publicField(this, "pendingLayerControlInstallHandler", null);
     this.map = map;
     this.basemaps = { ...DEFAULT_BASEMAPS, ...options.basemaps };
     this.allowCodeExecution = options.allowCodeExecution;
     this.allowDestructiveTools = options.allowDestructiveTools;
   }
   destroy() {
-    if (this.pendingLayerControlInstallHandler) {
-      this.map.off("load", this.pendingLayerControlInstallHandler);
-      this.pendingLayerControlInstallHandler = null;
-    }
     this.clearOverlays();
-    this.removeLayerControl();
-  }
-  installDefaultLayerControl() {
-    if (this.layerControl || this.pendingLayerControlInstallHandler) {
-      return;
-    }
-    if (this.map.loaded()) {
-      this.installLayerControl();
-      return;
-    }
-    this.pendingLayerControlInstallHandler = () => {
-      this.pendingLayerControlInstallHandler = null;
-      this.installLayerControl();
-    };
-    this.map.once("load", this.pendingLayerControlInstallHandler);
   }
   createTools() {
     const optionalStyleSchema = record(string(), any()).optional().describe("Optional MapLibre-compatible paint/style values.");
@@ -46256,11 +42708,9 @@ class MapLibreAgentTools {
       if (typeof style === "string" && this.basemaps[style]) {
         style = this.basemaps[style];
       }
-      this.removeLayerControl();
       this.map.setStyle(style);
       await new Promise((resolve2) => this.map.once("style.load", () => resolve2()));
       await this.restoreOverlaysAfterStyleChange();
-      this.installLayerControl(style);
       return `Basemap changed to ${rawStyle}.`;
     }
     if (command === "add_marker") {
@@ -46630,25 +43080,6 @@ ${code2}
       }
     }
   }
-  installLayerControl(style) {
-    this.removeLayerControl();
-    const styleUrl = style ? basemapStyleUrl(style) : void 0;
-    this.layerControl = new LayerControl({
-      collapsed: true,
-      ...styleUrl ? { basemapStyleUrl: styleUrl } : {},
-      panelWidth: 320,
-      panelMinWidth: 240,
-      panelMaxWidth: 420
-    });
-    this.map.addControl(this.layerControl, "top-right");
-  }
-  removeLayerControl() {
-    if (!this.layerControl) {
-      return;
-    }
-    this.map.removeControl(this.layerControl);
-    this.layerControl = null;
-  }
   requireDestructiveApproval(action) {
     if (!this.allowDestructiveTools()) {
       throw new Error(`${action} is disabled. Enable layer removal first.`);
@@ -46799,7 +43230,6 @@ class GeoAgentControl {
       allowCodeExecution: () => this.state.allowCodeExecution,
       allowDestructiveTools: () => this.state.allowDestructiveTools
     });
-    this.tools.installDefaultLayerControl();
     this.setupEventListeners();
     this.loadProviderSettings();
     this.setStatus("Ready", "connected");
@@ -47458,7 +43888,7 @@ ${markdown.trim()}`;
   }
   async createProviderModel(providerId, modelId, apiKey, bedrockRegion) {
     if (providerId === "openai-responses" || providerId === "openai-chat") {
-      const { OpenAIModel } = await import("./index-DW6rmZdc.js");
+      const { OpenAIModel } = await import("./index-BU4LZEvR.js");
       return new OpenAIModel({
         api: providerId === "openai-responses" ? "responses" : "chat",
         modelId,
@@ -47469,7 +43899,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "anthropic") {
-      const { AnthropicModel } = await import("./anthropic-38gbSx-8.js");
+      const { AnthropicModel } = await import("./anthropic-DhbSHleV.js");
       return new AnthropicModel({
         modelId,
         apiKey,
@@ -47479,7 +43909,7 @@ ${markdown.trim()}`;
       });
     }
     if (providerId === "google") {
-      const { GoogleModel } = await import("./index-DtsWabeI.js");
+      const { GoogleModel } = await import("./index-DXB0TYg3.js");
       return new GoogleModel({
         modelId,
         apiKey
@@ -47689,4 +44119,4 @@ export {
   toJsonValue as t,
   warnOnce as w
 };
-//# sourceMappingURL=GeoAgentControl-C-3MIQTc.js.map
+//# sourceMappingURL=GeoAgentControl-DOAYVbPg.js.map