@deck.gl/widgets 9.4.0-alpha.2 → 9.4.0-beta.3

package/dist/index.cjs

@@ -15,11 +15,11 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
 
 // dist/index.js
-var dist_exports = {};
-__export(dist_exports, {
+var index_exports = {};
+__export(index_exports, {
   CompassWidget: () => CompassWidget,
   ContextMenuWidget: () => ContextMenuWidget,
   DarkGlassTheme: () => DarkGlassTheme,
@@ -54,13 +54,3162 @@ __export(dist_exports, {
   _SplitterWidget: () => SplitterWidget,
   _StatsWidget: () => StatsWidget,
   _TimelineWidget: () => TimelineWidget,
+  _Tooltip: () => Tooltip,
   buildViewsFromViewLayout: () => buildViewsFromViewLayout
 });
-module.exports = __toCommonJS(dist_exports);
+module.exports = __toCommonJS(index_exports);
+
+// dist/zoom-widget.js
+var import_jsx_runtime4 = require("preact/jsx-runtime");
+
+// ../core/src/utils/log.ts
+var import_log = require("@probe.gl/log");
+var defaultLogger = new import_log.Log({ id: "deck" });
+var log_default = defaultLogger;
+
+// ../core/src/lib/constants.ts
+var import_mjolnir = require("mjolnir.js");
+var COORDINATE_SYSTEM = {
+  /**
+   * `LNGLAT` if rendering into a geospatial viewport, `CARTESIAN` otherwise
+   */
+  DEFAULT: "default",
+  /**
+   * Positions are interpreted as [longitude, latitude, elevation]
+   * longitude/latitude are in degrees, elevation is in meters.
+   * Dimensions are in meters.
+   */
+  LNGLAT: "lnglat",
+  /**
+   * Positions are interpreted as [x, y, z] in meter offsets from the coordinate origin.
+   * Dimensions are in meters.
+   */
+  METER_OFFSETS: "meter-offsets",
+  /**
+   * Positions are interpreted as [deltaLng, deltaLat, elevation] from the coordinate origin.
+   * deltaLng/deltaLat are in degrees, elevation is in meters.
+   * Dimensions are in meters.
+   */
+  LNGLAT_OFFSETS: "lnglat-offsets",
+  /**
+   * Positions and dimensions are in the common units of the viewport.
+   */
+  CARTESIAN: "cartesian"
+};
+Object.defineProperty(COORDINATE_SYSTEM, "IDENTITY", {
+  get: () => {
+    log_default.deprecated("COORDINATE_SYSTEM.IDENTITY", "COORDINATE_SYSTEM.CARTESIAN")();
+    return COORDINATE_SYSTEM.CARTESIAN;
+  }
+});
+var PROJECTION_MODE = {
+  /**
+   * Render geospatial data in Web Mercator projection
+   */
+  WEB_MERCATOR: 1,
+  /**
+   * Render geospatial data as a 3D globe
+   */
+  GLOBE: 2,
+  /**
+   * (Internal use only) Web Mercator projection at high zoom
+   */
+  WEB_MERCATOR_AUTO_OFFSET: 4,
+  /**
+   * No transformation
+   */
+  IDENTITY: 0
+};
+
+// ../core/src/utils/math-utils.ts
+var import_core = require("@math.gl/core");
+function createMat4() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+function mod(value, divisor) {
+  const modulus = value % divisor;
+  return modulus < 0 ? divisor + modulus : modulus;
+}
+function getCameraPosition(viewMatrixInverse) {
+  return [viewMatrixInverse[12], viewMatrixInverse[13], viewMatrixInverse[14]];
+}
+function getFrustumPlanes(viewProjectionMatrix) {
+  return {
+    left: getFrustumPlane(
+      viewProjectionMatrix[3] + viewProjectionMatrix[0],
+      viewProjectionMatrix[7] + viewProjectionMatrix[4],
+      viewProjectionMatrix[11] + viewProjectionMatrix[8],
+      viewProjectionMatrix[15] + viewProjectionMatrix[12]
+    ),
+    right: getFrustumPlane(
+      viewProjectionMatrix[3] - viewProjectionMatrix[0],
+      viewProjectionMatrix[7] - viewProjectionMatrix[4],
+      viewProjectionMatrix[11] - viewProjectionMatrix[8],
+      viewProjectionMatrix[15] - viewProjectionMatrix[12]
+    ),
+    bottom: getFrustumPlane(
+      viewProjectionMatrix[3] + viewProjectionMatrix[1],
+      viewProjectionMatrix[7] + viewProjectionMatrix[5],
+      viewProjectionMatrix[11] + viewProjectionMatrix[9],
+      viewProjectionMatrix[15] + viewProjectionMatrix[13]
+    ),
+    top: getFrustumPlane(
+      viewProjectionMatrix[3] - viewProjectionMatrix[1],
+      viewProjectionMatrix[7] - viewProjectionMatrix[5],
+      viewProjectionMatrix[11] - viewProjectionMatrix[9],
+      viewProjectionMatrix[15] - viewProjectionMatrix[13]
+    ),
+    near: getFrustumPlane(
+      viewProjectionMatrix[3] + viewProjectionMatrix[2],
+      viewProjectionMatrix[7] + viewProjectionMatrix[6],
+      viewProjectionMatrix[11] + viewProjectionMatrix[10],
+      viewProjectionMatrix[15] + viewProjectionMatrix[14]
+    ),
+    far: getFrustumPlane(
+      viewProjectionMatrix[3] - viewProjectionMatrix[2],
+      viewProjectionMatrix[7] - viewProjectionMatrix[6],
+      viewProjectionMatrix[11] - viewProjectionMatrix[10],
+      viewProjectionMatrix[15] - viewProjectionMatrix[14]
+    )
+  };
+}
+var scratchVector = new import_core.Vector3();
+function getFrustumPlane(a, b, c, d) {
+  scratchVector.set(a, b, c);
+  const L = scratchVector.len();
+  return { distance: d / L, normal: new import_core.Vector3(-a / L, -b / L, -c / L) };
+}
+
+// ../core/src/viewports/viewport.ts
+var import_core2 = require("@math.gl/core");
+var import_web_mercator = require("@math.gl/web-mercator");
+var DEGREES_TO_RADIANS = Math.PI / 180;
+var IDENTITY = createMat4();
+var ZERO_VECTOR = [0, 0, 0];
+var DEFAULT_DISTANCE_SCALES = {
+  unitsPerMeter: [1, 1, 1],
+  metersPerUnit: [1, 1, 1]
+};
+function createProjectionMatrix({
+  width,
+  height,
+  orthographic,
+  fovyRadians,
+  focalDistance,
+  padding,
+  near,
+  far
+}) {
+  const aspect = width / height;
+  const matrix = orthographic ? new import_core2.Matrix4().orthographic({ fovy: fovyRadians, aspect, focalDistance, near, far }) : new import_core2.Matrix4().perspective({ fovy: fovyRadians, aspect, near, far });
+  if (padding) {
+    const { left = 0, right = 0, top = 0, bottom = 0 } = padding;
+    const offsetX = (0, import_core2.clamp)((left + width - right) / 2, 0, width) - width / 2;
+    const offsetY = (0, import_core2.clamp)((top + height - bottom) / 2, 0, height) - height / 2;
+    matrix[8] -= offsetX * 2 / width;
+    matrix[9] += offsetY * 2 / height;
+  }
+  return matrix;
+}
+var _Viewport = class _Viewport {
+  // eslint-disable-next-line complexity
+  constructor(opts = {}) {
+    this._frustumPlanes = {};
+    this.id = opts.id || this.constructor.displayName || "viewport";
+    this.x = opts.x || 0;
+    this.y = opts.y || 0;
+    this.width = opts.width || 1;
+    this.height = opts.height || 1;
+    this.zoom = opts.zoom || 0;
+    this.padding = opts.padding;
+    this.distanceScales = opts.distanceScales || DEFAULT_DISTANCE_SCALES;
+    this.focalDistance = opts.focalDistance || 1;
+    this.position = opts.position || ZERO_VECTOR;
+    this.modelMatrix = opts.modelMatrix || null;
+    const { longitude, latitude } = opts;
+    this.isGeospatial = Number.isFinite(latitude) && Number.isFinite(longitude);
+    this._initProps(opts);
+    this._initMatrices(opts);
+    this.equals = this.equals.bind(this);
+    this.project = this.project.bind(this);
+    this.unproject = this.unproject.bind(this);
+    this.projectPosition = this.projectPosition.bind(this);
+    this.unprojectPosition = this.unprojectPosition.bind(this);
+    this.projectFlat = this.projectFlat.bind(this);
+    this.unprojectFlat = this.unprojectFlat.bind(this);
+  }
+  get subViewports() {
+    return null;
+  }
+  get metersPerPixel() {
+    return this.distanceScales.metersPerUnit[2] / this.scale;
+  }
+  get projectionMode() {
+    if (this.isGeospatial) {
+      return this.zoom < 12 ? PROJECTION_MODE.WEB_MERCATOR : PROJECTION_MODE.WEB_MERCATOR_AUTO_OFFSET;
+    }
+    return PROJECTION_MODE.IDENTITY;
+  }
+  // Two viewports are equal if their dimensions, common-space scale, and
+  // view and projection matrices are (approximately) equal.
+  equals(viewport) {
+    if (!(viewport instanceof _Viewport)) {
+      return false;
+    }
+    if (this === viewport) {
+      return true;
+    }
+    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && viewport.projectionMode === this.projectionMode && viewport.resolution === this.resolution && (0, import_core2.equals)(viewport.distanceScales.unitsPerMeter, this.distanceScales.unitsPerMeter) && (0, import_core2.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core2.equals)(viewport.viewMatrix, this.viewMatrix);
+  }
+  /**
+   * Projects xyz (possibly latitude and longitude) to pixel coordinates in window
+   * using viewport projection parameters
+   * - [longitude, latitude] to [x, y]
+   * - [longitude, latitude, Z] => [x, y, z]
+   * Note: By default, returns top-left coordinates for canvas/SVG type render
+   *
+   * @param {Array} lngLatZ - [lng, lat] or [lng, lat, Z]
+   * @param {Object} opts - options
+   * @param {Object} opts.topLeft=true - Whether projected coords are top left
+   * @return {Array} - [x, y] or [x, y, z] in top left coords
+   */
+  project(xyz, { topLeft = true } = {}) {
+    const worldPosition = this.projectPosition(xyz);
+    const coord = (0, import_web_mercator.worldToPixels)(worldPosition, this.pixelProjectionMatrix);
+    const [x, y] = coord;
+    const y2 = topLeft ? y : this.height - y;
+    return xyz.length === 2 ? [x, y2] : [x, y2, coord[2]];
+  }
+  /**
+   * Unproject pixel coordinates on screen onto world coordinates,
+   * (possibly [lon, lat]) on map.
+   * - [x, y] => [lng, lat]
+   * - [x, y, z] => [lng, lat, Z]
+   * @param {Array} xyz -
+   * @param {Object} opts - options
+   * @param {Object} opts.topLeft=true - Whether origin is top left
+   * @return {Array|null} - [lng, lat, Z] or [X, Y, Z]
+   */
+  unproject(xyz, { topLeft = true, targetZ } = {}) {
+    const [x, y, z] = xyz;
+    const y2 = topLeft ? y : this.height - y;
+    const targetZWorld = targetZ && targetZ * this.distanceScales.unitsPerMeter[2];
+    const coord = (0, import_web_mercator.pixelsToWorld)([x, y2, z], this.pixelUnprojectionMatrix, targetZWorld);
+    const [X, Y, Z] = this.unprojectPosition(coord);
+    if (Number.isFinite(z)) {
+      return [X, Y, Z];
+    }
+    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
+  }
+  // NON_LINEAR PROJECTION HOOKS
+  // Used for web meractor projection
+  projectPosition(xyz) {
+    const [X, Y] = this.projectFlat(xyz);
+    const Z = (xyz[2] || 0) * this.distanceScales.unitsPerMeter[2];
+    return [X, Y, Z];
+  }
+  unprojectPosition(xyz) {
+    const [X, Y] = this.unprojectFlat(xyz);
+    const Z = (xyz[2] || 0) * this.distanceScales.metersPerUnit[2];
+    return [X, Y, Z];
+  }
+  /**
+   * Project [lng,lat] on sphere onto [x,y] on 512*512 Mercator Zoom 0 tile.
+   * Performs the nonlinear part of the web mercator projection.
+   * Remaining projection is done with 4x4 matrices which also handles
+   * perspective.
+   * @param {Array} lngLat - [lng, lat] coordinates
+   *   Specifies a point on the sphere to project onto the map.
+   * @return {Array} [x,y] coordinates.
+   */
+  projectFlat(xyz) {
+    if (this.isGeospatial) {
+      const result = (0, import_web_mercator.lngLatToWorld)(xyz);
+      result[1] = (0, import_core2.clamp)(result[1], -318, 830);
+      return result;
+    }
+    return xyz;
+  }
+  /**
+   * Unproject world point [x,y] on map onto {lat, lon} on sphere
+   * @param {object|Vector} xy - object with {x,y} members
+   *  representing point on projected map plane
+   * @return {GeoCoordinates} - object with {lat,lon} of point on sphere.
+   *   Has toArray method if you need a GeoJSON Array.
+   *   Per cartographic tradition, lat and lon are specified as degrees.
+   */
+  unprojectFlat(xyz) {
+    if (this.isGeospatial) {
+      return (0, import_web_mercator.worldToLngLat)(xyz);
+    }
+    return xyz;
+  }
+  /**
+   * Get bounds of the current viewport
+   * @return {Array} - [minX, minY, maxX, maxY]
+   */
+  getBounds(options = {}) {
+    const unprojectOption = { targetZ: options.z || 0 };
+    const topLeft = this.unproject([0, 0], unprojectOption);
+    const topRight = this.unproject([this.width, 0], unprojectOption);
+    const bottomLeft = this.unproject([0, this.height], unprojectOption);
+    const bottomRight = this.unproject([this.width, this.height], unprojectOption);
+    return [
+      Math.min(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.min(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]),
+      Math.max(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.max(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1])
+    ];
+  }
+  getDistanceScales(coordinateOrigin) {
+    if (coordinateOrigin && this.isGeospatial) {
+      return (0, import_web_mercator.getDistanceScales)({
+        longitude: coordinateOrigin[0],
+        latitude: coordinateOrigin[1],
+        highPrecision: true
+      });
+    }
+    return this.distanceScales;
+  }
+  containsPixel({
+    x,
+    y,
+    width = 1,
+    height = 1
+  }) {
+    return x < this.x + this.width && this.x < x + width && y < this.y + this.height && this.y < y + height;
+  }
+  // Extract frustum planes in common space
+  getFrustumPlanes() {
+    if (this._frustumPlanes.near) {
+      return this._frustumPlanes;
+    }
+    Object.assign(this._frustumPlanes, getFrustumPlanes(this.viewProjectionMatrix));
+    return this._frustumPlanes;
+  }
+  // EXPERIMENTAL METHODS
+  /**
+   * Needed by panning and linear transition
+   * Pan the viewport to place a given world coordinate at screen point [x, y]
+   *
+   * @param {Array} coords - world coordinates
+   * @param {Array} pixel - [x,y] coordinates on screen
+   * @param {Array} startPixel - [x,y] screen position where pan started (optional, for delta-based panning)
+   * @return {Object} props of the new viewport
+   */
+  panByPosition(coords, pixel, startPixel) {
+    return null;
+  }
+  // INTERNAL METHODS
+  /* eslint-disable complexity, max-statements */
+  _initProps(opts) {
+    const longitude = opts.longitude;
+    const latitude = opts.latitude;
+    if (this.isGeospatial) {
+      if (!Number.isFinite(opts.zoom)) {
+        this.zoom = (0, import_web_mercator.getMeterZoom)({ latitude }) + Math.log2(this.focalDistance);
+      }
+      this.distanceScales = opts.distanceScales || (0, import_web_mercator.getDistanceScales)({ latitude, longitude });
+    }
+    const scale = Math.pow(2, this.zoom);
+    this.scale = scale;
+    const { position, modelMatrix } = opts;
+    let meterOffset = ZERO_VECTOR;
+    if (position) {
+      meterOffset = modelMatrix ? new import_core2.Matrix4(modelMatrix).transformAsVector(position, []) : position;
+    }
+    if (this.isGeospatial) {
+      const center = this.projectPosition([longitude, latitude, 0]);
+      this.center = new import_core2.Vector3(meterOffset).scale(this.distanceScales.unitsPerMeter).add(center);
+    } else {
+      this.center = this.projectPosition(meterOffset);
+    }
+  }
+  /* eslint-enable complexity, max-statements */
+  _initMatrices(opts) {
+    const {
+      // View matrix
+      viewMatrix: viewMatrix2 = IDENTITY,
+      // Projection matrix
+      projectionMatrix = null,
+      // Projection matrix parameters, used if projectionMatrix not supplied
+      orthographic = false,
+      fovyRadians,
+      fovy = 75,
+      near = 0.1,
+      // Distance of near clipping plane
+      far = 1e3,
+      // Distance of far clipping plane
+      padding = null,
+      // Center offset in pixels
+      focalDistance = 1
+    } = opts;
+    this.viewMatrixUncentered = viewMatrix2;
+    this.viewMatrix = new import_core2.Matrix4().multiplyRight(viewMatrix2).translate(new import_core2.Vector3(this.center).negate());
+    this.projectionMatrix = projectionMatrix || createProjectionMatrix({
+      width: this.width,
+      height: this.height,
+      orthographic,
+      fovyRadians: fovyRadians || fovy * DEGREES_TO_RADIANS,
+      focalDistance,
+      padding,
+      near,
+      far
+    });
+    const vpm = createMat4();
+    import_core2.mat4.multiply(vpm, vpm, this.projectionMatrix);
+    import_core2.mat4.multiply(vpm, vpm, this.viewMatrix);
+    this.viewProjectionMatrix = vpm;
+    this.viewMatrixInverse = import_core2.mat4.invert([], this.viewMatrix) || this.viewMatrix;
+    this.cameraPosition = getCameraPosition(this.viewMatrixInverse);
+    const viewportMatrix = createMat4();
+    const pixelProjectionMatrix = createMat4();
+    import_core2.mat4.scale(viewportMatrix, viewportMatrix, [this.width / 2, -this.height / 2, 1]);
+    import_core2.mat4.translate(viewportMatrix, viewportMatrix, [1, -1, 0]);
+    import_core2.mat4.multiply(pixelProjectionMatrix, viewportMatrix, this.viewProjectionMatrix);
+    this.pixelProjectionMatrix = pixelProjectionMatrix;
+    this.pixelUnprojectionMatrix = import_core2.mat4.invert(createMat4(), this.pixelProjectionMatrix);
+    if (!this.pixelUnprojectionMatrix) {
+      log_default.warn("Pixel project matrix not invertible")();
+    }
+  }
+};
+_Viewport.displayName = "Viewport";
+var Viewport = _Viewport;
+
+// ../core/src/viewports/web-mercator-viewport.ts
+var import_web_mercator2 = require("@math.gl/web-mercator");
+var import_core3 = require("@math.gl/core");
+var _WebMercatorViewport = class _WebMercatorViewport extends Viewport {
+  /* eslint-disable complexity, max-statements */
+  constructor(opts = {}) {
+    const {
+      latitude = 0,
+      longitude = 0,
+      zoom = 0,
+      pitch = 0,
+      bearing = 0,
+      nearZMultiplier = 0.1,
+      farZMultiplier = 1.01,
+      nearZ,
+      farZ,
+      orthographic = false,
+      projectionMatrix,
+      repeat = false,
+      worldOffset = 0,
+      position,
+      padding,
+      // backward compatibility
+      // TODO: remove in v9
+      legacyMeterSizes = false
+    } = opts;
+    let { width, height, altitude = 1.5 } = opts;
+    const scale = Math.pow(2, zoom);
+    width = width || 1;
+    height = height || 1;
+    let fovy;
+    let projectionParameters = null;
+    if (projectionMatrix) {
+      altitude = projectionMatrix[5] / 2;
+      fovy = (0, import_web_mercator2.altitudeToFovy)(altitude);
+    } else {
+      if (opts.fovy) {
+        fovy = opts.fovy;
+        altitude = (0, import_web_mercator2.fovyToAltitude)(fovy);
+      } else {
+        fovy = (0, import_web_mercator2.altitudeToFovy)(altitude);
+      }
+      let offset3;
+      if (padding) {
+        const { top = 0, bottom = 0 } = padding;
+        offset3 = [0, (0, import_core3.clamp)((top + height - bottom) / 2, 0, height) - height / 2];
+      }
+      projectionParameters = (0, import_web_mercator2.getProjectionParameters)({
+        width,
+        height,
+        scale,
+        center: position && [0, 0, position[2] * (0, import_web_mercator2.unitsPerMeter)(latitude)],
+        offset: offset3,
+        pitch,
+        fovy,
+        nearZMultiplier,
+        farZMultiplier
+      });
+      if (Number.isFinite(nearZ)) {
+        projectionParameters.near = nearZ;
+      }
+      if (Number.isFinite(farZ)) {
+        projectionParameters.far = farZ;
+      }
+    }
+    let viewMatrixUncentered = (0, import_web_mercator2.getViewMatrix)({
+      height,
+      pitch,
+      bearing,
+      scale,
+      altitude
+    });
+    if (worldOffset) {
+      const viewOffset = new import_core3.Matrix4().translate([512 * worldOffset, 0, 0]);
+      viewMatrixUncentered = viewOffset.multiplyLeft(viewMatrixUncentered);
+    }
+    super({
+      ...opts,
+      // x, y,
+      width,
+      height,
+      // view matrix
+      viewMatrix: viewMatrixUncentered,
+      longitude,
+      latitude,
+      zoom,
+      // projection matrix parameters
+      ...projectionParameters,
+      fovy,
+      focalDistance: altitude
+    });
+    this.latitude = latitude;
+    this.longitude = longitude;
+    this.zoom = zoom;
+    this.pitch = pitch;
+    this.bearing = bearing;
+    this.altitude = altitude;
+    this.fovy = fovy;
+    this.orthographic = orthographic;
+    this._subViewports = repeat ? [] : null;
+    this._pseudoMeters = legacyMeterSizes;
+    Object.freeze(this);
+  }
+  /* eslint-enable complexity, max-statements */
+  get subViewports() {
+    if (this._subViewports && !this._subViewports.length) {
+      const bounds = this.getBounds();
+      const minOffset = Math.floor((bounds[0] + 180) / 360);
+      const maxOffset = Math.ceil((bounds[2] - 180) / 360);
+      for (let x = minOffset; x <= maxOffset; x++) {
+        const offsetViewport = x ? new _WebMercatorViewport({
+          ...this,
+          worldOffset: x
+        }) : this;
+        this._subViewports.push(offsetViewport);
+      }
+    }
+    return this._subViewports;
+  }
+  /** Returns whether two Web Mercator viewports use the same projection settings. */
+  equals(viewport) {
+    return viewport instanceof _WebMercatorViewport && viewport._pseudoMeters === this._pseudoMeters && super.equals(viewport);
+  }
+  projectPosition(xyz) {
+    if (this._pseudoMeters) {
+      return super.projectPosition(xyz);
+    }
+    const [X, Y] = this.projectFlat(xyz);
+    const Z = (xyz[2] || 0) * (0, import_web_mercator2.unitsPerMeter)(xyz[1]);
+    return [X, Y, Z];
+  }
+  unprojectPosition(xyz) {
+    if (this._pseudoMeters) {
+      return super.unprojectPosition(xyz);
+    }
+    const [X, Y] = this.unprojectFlat(xyz);
+    const Z = (xyz[2] || 0) / (0, import_web_mercator2.unitsPerMeter)(Y);
+    return [X, Y, Z];
+  }
+  /**
+   * Add a meter delta to a base lnglat coordinate, returning a new lnglat array
+   *
+   * Note: Uses simple linear approximation around the viewport center
+   * Error increases with size of offset (roughly 1% per 100km)
+   *
+   * @param {[Number,Number]|[Number,Number,Number]) lngLatZ - base coordinate
+   * @param {[Number,Number]|[Number,Number,Number]) xyz - array of meter deltas
+   * @return {[Number,Number]|[Number,Number,Number]) array of [lng,lat,z] deltas
+   */
+  addMetersToLngLat(lngLatZ, xyz) {
+    return (0, import_web_mercator2.addMetersToLngLat)(lngLatZ, xyz);
+  }
+  panByPosition(coords, pixel, startPixel) {
+    const fromLocation = (0, import_web_mercator2.pixelsToWorld)(pixel, this.pixelUnprojectionMatrix);
+    const toLocation = this.projectFlat(coords);
+    const translate = import_core3.vec2.add([], toLocation, import_core3.vec2.negate([], fromLocation));
+    const newCenter = import_core3.vec2.add([], this.center, translate);
+    const [longitude, latitude] = this.unprojectFlat(newCenter);
+    return { longitude, latitude };
+  }
+  /**
+   * Returns a new longitude and latitude that keeps a 3D world coordinate at a given screen pixel
+   * This version handles the z-component (altitude) properly for cameras positioned above ground
+   */
+  panByPosition3D(coords, pixel) {
+    const targetZ = coords[2] || 0;
+    const deltaLngLat = import_core3.vec2.sub([], coords, this.unproject(pixel, { targetZ }));
+    return { longitude: this.longitude + deltaLngLat[0], latitude: this.latitude + deltaLngLat[1] };
+  }
+  getBounds(options = {}) {
+    const corners = (0, import_web_mercator2.getBounds)(this, options.z || 0);
+    return [
+      Math.min(corners[0][0], corners[1][0], corners[2][0], corners[3][0]),
+      Math.min(corners[0][1], corners[1][1], corners[2][1], corners[3][1]),
+      Math.max(corners[0][0], corners[1][0], corners[2][0], corners[3][0]),
+      Math.max(corners[0][1], corners[1][1], corners[2][1], corners[3][1])
+    ];
+  }
+  /**
+   * Returns a new viewport that fit around the given rectangle.
+   * Only supports non-perspective mode.
+   */
+  fitBounds(bounds, options = {}) {
+    const { width, height } = this;
+    const { longitude, latitude, zoom } = (0, import_web_mercator2.fitBounds)({ width, height, bounds, ...options });
+    return new _WebMercatorViewport({ width, height, longitude, latitude, zoom });
+  }
+};
+_WebMercatorViewport.displayName = "WebMercatorViewport";
+var WebMercatorViewport = _WebMercatorViewport;
+
+// ../core/src/utils/deep-equal.ts
+function deepEqual(a, b, depth) {
+  if (a === b) {
+    return true;
+  }
+  if (!depth || !a || !b) {
+    return false;
+  }
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i], depth - 1)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (Array.isArray(b)) {
+    return false;
+  }
+  if (typeof a === "object" && typeof b === "object") {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+    for (const key of aKeys) {
+      if (!b.hasOwnProperty(key)) {
+        return false;
+      }
+      if (!deepEqual(a[key], b[key], depth - 1)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+// ../core/src/utils/positions.ts
+var NUMBER_REGEX = /^(?:\d+\.?\d*|\.\d+)$/;
+function parsePosition(value) {
+  switch (typeof value) {
+    case "number":
+      if (!Number.isFinite(value)) {
+        throw new Error(`Could not parse position string ${value}`);
+      }
+      return { type: "literal", value };
+    case "string":
+      try {
+        const tokens = tokenize(value);
+        const parser = new LayoutExpressionParser(tokens);
+        return parser.parseExpression();
+      } catch (error) {
+        const reason = error instanceof Error ? error.message : String(error);
+        throw new Error(`Could not parse position string ${value}: ${reason}`);
+      }
+    default:
+      throw new Error(`Could not parse position string ${value}`);
+  }
+}
+function evaluateLayoutExpression(expression, extent) {
+  switch (expression.type) {
+    case "literal":
+      return expression.value;
+    case "percentage":
+      return Math.round(expression.value * extent);
+    case "binary":
+      const left = evaluateLayoutExpression(expression.left, extent);
+      const right = evaluateLayoutExpression(expression.right, extent);
+      return expression.operator === "+" ? left + right : left - right;
+    default:
+      throw new Error("Unknown layout expression type");
+  }
+}
+function getPosition(expression, extent) {
+  return evaluateLayoutExpression(expression, extent);
+}
+function tokenize(input) {
+  const tokens = [];
+  let index = 0;
+  while (index < input.length) {
+    const char = input[index];
+    if (/\s/.test(char)) {
+      index++;
+      continue;
+    }
+    if (char === "+" || char === "-" || char === "(" || char === ")" || char === "%") {
+      tokens.push({ type: "symbol", value: char });
+      index++;
+      continue;
+    }
+    if (isDigit(char) || char === ".") {
+      const start = index;
+      let hasDecimal = char === ".";
+      index++;
+      while (index < input.length) {
+        const next = input[index];
+        if (isDigit(next)) {
+          index++;
+          continue;
+        }
+        if (next === "." && !hasDecimal) {
+          hasDecimal = true;
+          index++;
+          continue;
+        }
+        break;
+      }
+      const numberString = input.slice(start, index);
+      if (!NUMBER_REGEX.test(numberString)) {
+        throw new Error("Invalid number token");
+      }
+      tokens.push({ type: "number", value: parseFloat(numberString) });
+      continue;
+    }
+    if (isAlpha(char)) {
+      const start = index;
+      while (index < input.length && isAlpha(input[index])) {
+        index++;
+      }
+      const word = input.slice(start, index).toLowerCase();
+      tokens.push({ type: "word", value: word });
+      continue;
+    }
+    throw new Error("Invalid token in position string");
+  }
+  return tokens;
+}
+var LayoutExpressionParser = class {
+  constructor(tokens) {
+    this.index = 0;
+    this.tokens = tokens;
+  }
+  parseExpression() {
+    const expression = this.parseBinaryExpression();
+    if (this.index < this.tokens.length) {
+      throw new Error("Unexpected token at end of expression");
+    }
+    return expression;
+  }
+  parseBinaryExpression() {
+    let expression = this.parseFactor();
+    let token = this.peek();
+    while (isAddSubSymbol(token)) {
+      this.index++;
+      const right = this.parseFactor();
+      expression = { type: "binary", operator: token.value, left: expression, right };
+      token = this.peek();
+    }
+    return expression;
+  }
+  parseFactor() {
+    const token = this.peek();
+    if (!token) {
+      throw new Error("Unexpected end of expression");
+    }
+    if (token.type === "symbol" && token.value === "+") {
+      this.index++;
+      return this.parseFactor();
+    }
+    if (token.type === "symbol" && token.value === "-") {
+      this.index++;
+      const factor = this.parseFactor();
+      return { type: "binary", operator: "-", left: { type: "literal", value: 0 }, right: factor };
+    }
+    if (token.type === "symbol" && token.value === "(") {
+      this.index++;
+      const expression = this.parseBinaryExpression();
+      if (!this.consumeSymbol(")")) {
+        throw new Error("Missing closing parenthesis");
+      }
+      return expression;
+    }
+    if (token.type === "word" && token.value === "calc") {
+      this.index++;
+      if (!this.consumeSymbol("(")) {
+        throw new Error("Missing opening parenthesis after calc");
+      }
+      const expression = this.parseBinaryExpression();
+      if (!this.consumeSymbol(")")) {
+        throw new Error("Missing closing parenthesis");
+      }
+      return expression;
+    }
+    if (token.type === "number") {
+      this.index++;
+      const numberValue = token.value;
+      const nextToken = this.peek();
+      if (nextToken && nextToken.type === "symbol" && nextToken.value === "%") {
+        this.index++;
+        return { type: "percentage", value: numberValue / 100 };
+      }
+      if (nextToken && nextToken.type === "word" && nextToken.value === "px") {
+        this.index++;
+        return { type: "literal", value: numberValue };
+      }
+      return { type: "literal", value: numberValue };
+    }
+    throw new Error("Unexpected token in expression");
+  }
+  consumeSymbol(value) {
+    const token = this.peek();
+    if (token && token.type === "symbol" && token.value === value) {
+      this.index++;
+      return true;
+    }
+    return false;
+  }
+  peek() {
+    return this.tokens[this.index] || null;
+  }
+};
+function isDigit(char) {
+  return char >= "0" && char <= "9";
+}
+function isAlpha(char) {
+  return char >= "a" && char <= "z" || char >= "A" && char <= "Z";
+}
+function isAddSubSymbol(token) {
+  return Boolean(token && token.type === "symbol" && (token.value === "+" || token.value === "-"));
+}
+
+// ../core/src/utils/deep-merge.ts
+function deepMergeViewState(a, b) {
+  const result = { ...a };
+  for (const key in b) {
+    if (key === "id") continue;
+    if (Array.isArray(result[key]) && Array.isArray(b[key])) {
+      result[key] = mergeNumericArray(result[key], b[key]);
+    } else {
+      result[key] = b[key];
+    }
+  }
+  return result;
+}
+function mergeNumericArray(target, source) {
+  target = target.slice();
+  for (let i = 0; i < source.length; i++) {
+    const v = source[i];
+    if (Number.isFinite(v)) {
+      target[i] = v;
+    }
+  }
+  return target;
+}
+
+// ../core/src/views/view.ts
+var View = class {
+  constructor(props) {
+    const { id, x = 0, y = 0, width = "100%", height = "100%", padding = null } = props;
+    this.id = id || this.constructor.displayName || "view";
+    this.props = { ...props, id: this.id };
+    this._x = parsePosition(x);
+    this._y = parsePosition(y);
+    this._width = parsePosition(width);
+    this._height = parsePosition(height);
+    this._padding = padding && {
+      left: parsePosition(padding.left || 0),
+      right: parsePosition(padding.right || 0),
+      top: parsePosition(padding.top || 0),
+      bottom: parsePosition(padding.bottom || 0)
+    };
+    this.equals = this.equals.bind(this);
+    Object.seal(this);
+  }
+  equals(view) {
+    if (this === view) {
+      return true;
+    }
+    return this.constructor === view.constructor && deepEqual(this.props, view.props, 2);
+  }
+  /** Clone this view with modified props */
+  clone(newProps) {
+    const ViewConstructor = this.constructor;
+    return new ViewConstructor({ ...this.props, ...newProps });
+  }
+  /** Make viewport from canvas dimensions and view state */
+  makeViewport({ width, height, viewState }) {
+    viewState = this.filterViewState(viewState);
+    const viewportDimensions = this.getDimensions({ width, height });
+    if (!viewportDimensions.height || !viewportDimensions.width) {
+      return null;
+    }
+    const ViewportType = this.getViewportType(viewState);
+    return new ViewportType({ ...viewState, ...this.props, ...viewportDimensions });
+  }
+  getViewStateId() {
+    const { viewState } = this.props;
+    if (typeof viewState === "string") {
+      return viewState;
+    }
+    return (viewState == null ? void 0 : viewState.id) || this.id;
+  }
+  // Allows view to override (or completely define) viewState
+  filterViewState(viewState) {
+    if (this.props.viewState && typeof this.props.viewState === "object") {
+      if (!this.props.viewState.id) {
+        return this.props.viewState;
+      }
+      return deepMergeViewState(viewState, this.props.viewState);
+    }
+    return viewState;
+  }
+  /** Resolve the dimensions of the view from overall canvas dimensions */
+  getDimensions({ width, height }) {
+    const dimensions = {
+      x: getPosition(this._x, width),
+      y: getPosition(this._y, height),
+      width: getPosition(this._width, width),
+      height: getPosition(this._height, height)
+    };
+    if (this._padding) {
+      dimensions.padding = {
+        left: getPosition(this._padding.left, width),
+        top: getPosition(this._padding.top, height),
+        right: getPosition(this._padding.right, width),
+        bottom: getPosition(this._padding.bottom, height)
+      };
+    }
+    return dimensions;
+  }
+  // Used by sub classes to resolve controller props
+  get controller() {
+    const opts = this.props.controller;
+    if (!opts) {
+      return null;
+    }
+    if (opts === true) {
+      return { type: this.ControllerType };
+    }
+    if (typeof opts === "function") {
+      return { type: opts };
+    }
+    return { type: this.ControllerType, ...opts };
+  }
+};
+
+// ../core/src/transitions/transition.ts
+var Transition = class {
+  /**
+   * @params timeline {Timeline}
+   */
+  constructor(timeline) {
+    this._inProgress = false;
+    this._handle = null;
+    this.time = 0;
+    // @ts-expect-error
+    this.settings = {
+      duration: 0
+    };
+    this._timeline = timeline;
+  }
+  /* Public API */
+  get inProgress() {
+    return this._inProgress;
+  }
+  /**
+   * (re)start this transition.
+   * @params props {object} - optional overriding props. see constructor
+   */
+  start(settings) {
+    var _a, _b;
+    this.cancel();
+    this.settings = settings;
+    this._inProgress = true;
+    (_b = (_a = this.settings).onStart) == null ? void 0 : _b.call(_a, this);
+  }
+  /**
+   * end this transition if it is in progress.
+   */
+  end() {
+    var _a, _b;
+    if (this._inProgress) {
+      this._timeline.removeChannel(this._handle);
+      this._handle = null;
+      this._inProgress = false;
+      (_b = (_a = this.settings).onEnd) == null ? void 0 : _b.call(_a, this);
+    }
+  }
+  /**
+   * cancel this transition if it is in progress.
+   */
+  cancel() {
+    var _a, _b;
+    if (this._inProgress) {
+      (_b = (_a = this.settings).onInterrupt) == null ? void 0 : _b.call(_a, this);
+      this._timeline.removeChannel(this._handle);
+      this._handle = null;
+      this._inProgress = false;
+    }
+  }
+  /**
+   * update this transition. Returns `true` if updated.
+   */
+  update() {
+    var _a, _b;
+    if (!this._inProgress) {
+      return false;
+    }
+    if (this._handle === null) {
+      const { _timeline: timeline, settings } = this;
+      this._handle = timeline.addChannel({
+        delay: timeline.getTime(),
+        duration: settings.duration
+      });
+    }
+    this.time = this._timeline.getTime(this._handle);
+    this._onUpdate();
+    (_b = (_a = this.settings).onUpdate) == null ? void 0 : _b.call(_a, this);
+    if (this._timeline.isFinished(this._handle)) {
+      this.end();
+    }
+    return true;
+  }
+  /* Private API */
+  _onUpdate() {
+  }
+};
+
+// ../core/src/controllers/transition-manager.ts
+var noop = () => {
+};
+var PRESERVE_CONSTRAINT_CONTEXT = { mode: "preserve" };
+var HARD_CONSTRAINT_CONTEXT = { mode: "hard" };
+var TRANSITION_EVENTS = {
+  BREAK: 1,
+  SNAP_TO_END: 2,
+  IGNORE: 3
+};
+var DEFAULT_EASING = (t) => t;
+var DEFAULT_INTERRUPTION = TRANSITION_EVENTS.BREAK;
+var TransitionManager = class {
+  constructor(opts) {
+    this._onTransitionUpdate = (transition) => {
+      const {
+        time,
+        settings: { interpolator, startProps, endProps, duration, easing }
+      } = transition;
+      const t = easing(time / duration);
+      const viewport = interpolator.interpolateProps(startProps, endProps, t);
+      this.propsInTransition = this.getControllerState(
+        {
+          ...this.props,
+          ...viewport
+        },
+        PRESERVE_CONSTRAINT_CONTEXT
+      ).getViewportProps();
+      this.onViewStateChange({
+        viewState: this.propsInTransition,
+        oldViewState: this.props
+      });
+    };
+    this.getControllerState = opts.getControllerState;
+    this.propsInTransition = null;
+    this.transition = new Transition(opts.timeline);
+    this.onViewStateChange = opts.onViewStateChange || noop;
+    this.onStateChange = opts.onStateChange || noop;
+  }
+  finalize() {
+    this.transition.cancel();
+  }
+  // Returns current transitioned viewport.
+  getViewportInTransition() {
+    return this.propsInTransition;
+  }
+  // Process the vewiport change, either ignore or trigger a new transition.
+  // Return true if a new transition is triggered, false otherwise.
+  processViewStateChange(nextProps) {
+    let transitionTriggered = false;
+    const currentProps = this.props;
+    this.props = nextProps;
+    if (!currentProps || this._shouldIgnoreViewportChange(currentProps, nextProps)) {
+      return false;
+    }
+    if (this._isTransitionEnabled(nextProps)) {
+      let startProps = currentProps;
+      if (this.transition.inProgress) {
+        const { interruption, endProps } = this.transition.settings;
+        startProps = {
+          ...currentProps,
+          ...interruption === TRANSITION_EVENTS.SNAP_TO_END ? endProps : this.propsInTransition || currentProps
+        };
+      }
+      this._triggerTransition(startProps, nextProps);
+      transitionTriggered = true;
+    } else {
+      this.transition.cancel();
+    }
+    return transitionTriggered;
+  }
+  updateTransition() {
+    this.transition.update();
+  }
+  // Helper methods
+  _isTransitionEnabled(props) {
+    const { transitionDuration, transitionInterpolator } = props;
+    return (transitionDuration > 0 || transitionDuration === "auto") && Boolean(transitionInterpolator);
+  }
+  _isUpdateDueToCurrentTransition(props) {
+    if (this.transition.inProgress && this.propsInTransition) {
+      return this.transition.settings.interpolator.arePropsEqual(
+        props,
+        this.propsInTransition
+      );
+    }
+    return false;
+  }
+  _shouldIgnoreViewportChange(currentProps, nextProps) {
+    if (this.transition.inProgress) {
+      const transitionSettings = this.transition.settings;
+      return transitionSettings.interruption === TRANSITION_EVENTS.IGNORE || // Ignore update if it is due to current active transition.
+      this._isUpdateDueToCurrentTransition(nextProps);
+    }
+    if (this._isTransitionEnabled(nextProps)) {
+      return nextProps.transitionInterpolator.arePropsEqual(
+        currentProps,
+        nextProps
+      );
+    }
+    return true;
+  }
+  _triggerTransition(startProps, endProps) {
+    const startViewstate = this.getControllerState(startProps, PRESERVE_CONSTRAINT_CONTEXT);
+    const endViewStateProps = this.getControllerState(
+      endProps,
+      HARD_CONSTRAINT_CONTEXT
+    ).shortestPathFrom(startViewstate);
+    const transitionInterpolator = endProps.transitionInterpolator;
+    const duration = transitionInterpolator.getDuration ? transitionInterpolator.getDuration(startProps, endProps) : endProps.transitionDuration;
+    if (duration === 0) {
+      return;
+    }
+    const initialProps = transitionInterpolator.initializeProps(startProps, endViewStateProps);
+    this.propsInTransition = {};
+    const transitionSettings = {
+      duration,
+      easing: endProps.transitionEasing || DEFAULT_EASING,
+      interpolator: transitionInterpolator,
+      interruption: endProps.transitionInterruption || DEFAULT_INTERRUPTION,
+      startProps: initialProps.start,
+      endProps: initialProps.end,
+      onStart: endProps.onTransitionStart,
+      onUpdate: this._onTransitionUpdate,
+      onInterrupt: this._onTransitionEnd(endProps.onTransitionInterrupt),
+      onEnd: this._onTransitionEnd(endProps.onTransitionEnd)
+    };
+    this.transition.start(transitionSettings);
+    this.onStateChange({ inTransition: true });
+    this.updateTransition();
+  }
+  _onTransitionEnd(callback) {
+    return (transition) => {
+      this.propsInTransition = null;
+      this.onStateChange({
+        inTransition: false,
+        isZooming: false,
+        isPanning: false,
+        isRotating: false
+      });
+      callback == null ? void 0 : callback(transition);
+    };
+  }
+};
+
+// ../core/src/transitions/transition-interpolator.ts
+var import_core4 = require("@math.gl/core");
+
+// ../core/src/utils/assert.ts
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || "deck.gl: assertion failed.");
+  }
+}
+
+// ../core/src/transitions/transition-interpolator.ts
+var TransitionInterpolator = class {
+  /**
+   * @param opts {array|object}
+   * @param opts.compare {array} - prop names used in equality check
+   * @param opts.extract {array} - prop names needed for interpolation
+   * @param opts.required {array} - prop names that must be supplied
+   * alternatively, supply one list of prop names as `opts` if all of the above are the same.
+   */
+  constructor(opts) {
+    const { compare, extract, required } = opts;
+    this._propsToCompare = compare;
+    this._propsToExtract = extract || compare;
+    this._requiredProps = required;
+  }
+  /**
+   * Checks if two sets of props need transition in between
+   * @param currentProps {object} - a list of viewport props
+   * @param nextProps {object} - a list of viewport props
+   * @returns {bool} - true if two props are equivalent
+   */
+  arePropsEqual(currentProps, nextProps) {
+    for (const key of this._propsToCompare) {
+      if (!(key in currentProps) || !(key in nextProps) || !(0, import_core4.equals)(currentProps[key], nextProps[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Called before transition starts to validate/pre-process start and end props
+   * @param startProps {object} - a list of starting viewport props
+   * @param endProps {object} - a list of target viewport props
+   * @returns {Object} {start, end} - start and end props to be passed
+   *   to `interpolateProps`
+   */
+  initializeProps(startProps, endProps) {
+    const startViewStateProps = {};
+    const endViewStateProps = {};
+    for (const key of this._propsToExtract) {
+      if (key in startProps || key in endProps) {
+        startViewStateProps[key] = startProps[key];
+        endViewStateProps[key] = endProps[key];
+      }
+    }
+    this._checkRequiredProps(startViewStateProps);
+    this._checkRequiredProps(endViewStateProps);
+    return { start: startViewStateProps, end: endViewStateProps };
+  }
+  /**
+   * Returns transition duration
+   * @param startProps {object} - a list of starting viewport props
+   * @param endProps {object} - a list of target viewport props
+   * @returns {Number} - transition duration in milliseconds
+   */
+  getDuration(startProps, endProps) {
+    return endProps.transitionDuration;
+  }
+  _checkRequiredProps(props) {
+    if (!this._requiredProps) {
+      return;
+    }
+    this._requiredProps.forEach((propName) => {
+      const value = props[propName];
+      assert(
+        Number.isFinite(value) || Array.isArray(value),
+        `${propName} is required for transition`
+      );
+    });
+  }
+};
+
+// ../core/src/transitions/linear-interpolator.ts
+var import_core5 = require("@math.gl/core");
+var DEFAULT_PROPS = ["longitude", "latitude", "zoom", "bearing", "pitch"];
+var DEFAULT_REQUIRED_PROPS = ["longitude", "latitude", "zoom"];
+var LinearInterpolator = class extends TransitionInterpolator {
+  /**
+   * @param {Object} opts
+   * @param {Array} opts.transitionProps - list of props to apply linear transition to.
+   * @param {Array} opts.around - a screen point to zoom/rotate around.
+   * @param {Function} opts.makeViewport - construct a viewport instance with given props.
+   */
+  constructor(opts = {}) {
+    const transitionProps = Array.isArray(opts) ? opts : opts.transitionProps;
+    const normalizedOpts = Array.isArray(opts) ? {} : opts;
+    normalizedOpts.transitionProps = Array.isArray(transitionProps) ? {
+      compare: transitionProps,
+      required: transitionProps
+    } : transitionProps || {
+      compare: DEFAULT_PROPS,
+      required: DEFAULT_REQUIRED_PROPS
+    };
+    super(normalizedOpts.transitionProps);
+    this.opts = normalizedOpts;
+  }
+  initializeProps(startProps, endProps) {
+    const result = super.initializeProps(startProps, endProps);
+    const { makeViewport, around } = this.opts;
+    if (makeViewport && around) {
+      const startViewport = makeViewport(startProps);
+      const endViewport = makeViewport(endProps);
+      const aroundPosition = startViewport.unproject(around);
+      result.start.around = around;
+      Object.assign(result.end, {
+        around: endViewport.project(aroundPosition),
+        aroundPosition,
+        width: endProps.width,
+        height: endProps.height
+      });
+    }
+    return result;
+  }
+  interpolateProps(startProps, endProps, t) {
+    const propsInTransition = {};
+    for (const key of this._propsToExtract) {
+      propsInTransition[key] = (0, import_core5.lerp)(startProps[key] || 0, endProps[key] || 0, t);
+    }
+    if (endProps.aroundPosition && this.opts.makeViewport) {
+      const viewport = this.opts.makeViewport({ ...endProps, ...propsInTransition });
+      Object.assign(
+        propsInTransition,
+        viewport.panByPosition(
+          endProps.aroundPosition,
+          // anchor point in current screen coordinates
+          (0, import_core5.lerp)(startProps.around, endProps.around, t)
+        )
+      );
+    }
+    return propsInTransition;
+  }
+};
+
+// ../core/src/controllers/controller.ts
+var import_web_mercator3 = require("@math.gl/web-mercator");
+var NO_TRANSITION_PROPS = {
+  transitionDuration: 0
+};
+var DEFAULT_INERTIA = 300;
+var REBOUND_DURATION = 300;
+var INERTIA_EASING = (t) => 1 - (1 - t) * (1 - t);
+var EASE_OUT_EXPONENTIAL = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+var EVENT_TYPES = {
+  WHEEL: ["wheel"],
+  PAN: ["panstart", "panmove", "panend"],
+  PINCH: ["pinchstart", "pinchmove", "pinchend"],
+  MULTI_PAN: ["multipanstart", "multipanmove", "multipanend"],
+  DOUBLE_CLICK: ["dblclick"],
+  DOUBLE_CLICK_DRAG: [
+    "dblclickdragstart",
+    "dblclickdragmove",
+    "dblclickdragend",
+    "dblclickdragcancel"
+  ],
+  KEYBOARD: ["keydown"]
+};
+var pinchEventWorkaround = {};
+var Controller = class {
+  constructor(opts) {
+    this.state = {};
+    this._events = {};
+    this._interactionState = {
+      isDragging: false
+    };
+    this._customEvents = [];
+    this._eventStartBlocked = null;
+    this._panMove = false;
+    this._multiPanMode = null;
+    this._multiPanStartCenter = null;
+    this._doubleClickDragAnchor = null;
+    this._suppressDoubleClickUntil = 0;
+    this.invertPan = false;
+    this.dragMode = "rotate";
+    this.inertia = 0;
+    this.scrollZoom = true;
+    this.dragPan = true;
+    this.dragRotate = true;
+    this.doubleClickZoom = true;
+    this.doubleClickDragZoom = true;
+    this.touchZoom = true;
+    this.touchRotate = false;
+    this.multiTouchDrag = null;
+    this.trackpadGesture = false;
+    this.zoomAround = "pointer";
+    this.keyboard = true;
+    this.transitionManager = new TransitionManager({
+      ...opts,
+      getControllerState: (props, constraintContext) => new this.ControllerState({
+        ...props,
+        constraintContext,
+        makeViewport: opts.makeViewport
+      }),
+      onViewStateChange: this._onTransition.bind(this),
+      onStateChange: this._setInteractionState.bind(this)
+    });
+    this.handleEvent = this.handleEvent.bind(this);
+    this.eventManager = opts.eventManager;
+    this.onViewStateChange = opts.onViewStateChange || (() => {
+    });
+    this.onStateChange = opts.onStateChange || (() => {
+    });
+    this.makeViewport = opts.makeViewport;
+    this.pickPosition = opts.pickPosition;
+  }
+  set events(customEvents) {
+    this.toggleEvents(this._customEvents, false);
+    this.toggleEvents(customEvents, true);
+    this._customEvents = customEvents;
+    if (this.props) {
+      this.setProps(this.props);
+    }
+  }
+  finalize() {
+    var _a;
+    for (const eventName in this._events) {
+      if (this._events[eventName]) {
+        (_a = this.eventManager) == null ? void 0 : _a.off(eventName, this.handleEvent);
+      }
+    }
+    this.transitionManager.finalize();
+  }
+  /**
+   * Callback for events
+   */
+  handleEvent(event) {
+    this._controllerState = void 0;
+    const eventStartBlocked = this._eventStartBlocked;
+    switch (event.type) {
+      case "panstart":
+        return eventStartBlocked ? false : this._onPanStart(event);
+      case "panmove":
+        return this._onPan(event);
+      case "panend":
+        return this._onPanEnd(event);
+      case "pinchstart":
+        return eventStartBlocked || !this._isTrackpadGestureAllowed(event) ? false : this._onPinchStart(event);
+      case "pinchmove":
+        return this._isTrackpadGestureAllowed(event) ? this._onPinch(event) : false;
+      case "pinchend":
+        return this._isTrackpadGestureAllowed(event) ? this._onPinchEnd(event) : false;
+      case "multipanstart":
+        return eventStartBlocked ? false : this._onMultiPanStart(event);
+      case "multipanmove":
+        return this._onMultiPan(event);
+      case "multipanend":
+        return this._onMultiPanEnd(event);
+      case "dblclick":
+        return this._onDoubleClick(event);
+      case "dblclickdragstart":
+        return eventStartBlocked ? false : this._onDoubleClickDragStart(event);
+      case "dblclickdragmove":
+        return this._onDoubleClickDrag(event);
+      case "dblclickdragend":
+      case "dblclickdragcancel":
+        return this._onDoubleClickDragEnd(event);
+      case "wheel":
+        return this._onWheel(event);
+      case "keydown":
+        return this._onKeyDown(event);
+      default:
+        return false;
+    }
+  }
+  /* Event utils */
+  // Event object: http://hammerjs.github.io/api/#event-object
+  get controllerState() {
+    this._controllerState = this._controllerState || new this.ControllerState({
+      makeViewport: this.makeViewport,
+      ...this.props,
+      ...this.state
+    });
+    return this._controllerState;
+  }
+  getCenter(event) {
+    const { x, y } = this.props;
+    const { offsetCenter } = event;
+    return [offsetCenter.x - x, offsetCenter.y - y];
+  }
+  /** Resolves the zoom anchor for pointer-based controls. */
+  getZoomPosition(position) {
+    if (this.zoomAround === "pointer") {
+      return position;
+    }
+    const viewport = this.makeViewport(this.controllerState.getViewportProps());
+    const [centerX, centerY] = (0, import_web_mercator3.worldToPixels)(viewport.center, viewport.pixelProjectionMatrix);
+    return [centerX, centerY];
+  }
+  isPointInBounds(pos, event) {
+    const { width, height } = this.props;
+    if (event && event.handled) {
+      return false;
+    }
+    const inside = pos[0] >= 0 && pos[0] <= width && pos[1] >= 0 && pos[1] <= height;
+    if (inside && event) {
+      event.stopPropagation();
+    }
+    return inside;
+  }
+  isFunctionKeyPressed(event) {
+    const { srcEvent } = event;
+    return Boolean(srcEvent.metaKey || srcEvent.altKey || srcEvent.ctrlKey || srcEvent.shiftKey);
+  }
+  isDragging() {
+    return this._interactionState.isDragging || false;
+  }
+  // When a multi-touch event ends, e.g. pinch, not all pointers are lifted at the same time.
+  // This triggers a brief `pan` event.
+  // Calling this method will temporarily disable *start events to avoid conflicting transitions.
+  blockEvents(timeout) {
+    const timer = setTimeout(() => {
+      if (this._eventStartBlocked === timer) {
+        this._eventStartBlocked = null;
+      }
+    }, timeout);
+    this._eventStartBlocked = timer;
+  }
+  /**
+   * Extract interactivity options
+   */
+  setProps(props) {
+    if (props.maxBoundsPadding === void 0) {
+      props.maxBoundsPadding = null;
+    }
+    if (props.dragMode) {
+      this.dragMode = props.dragMode;
+    }
+    const oldProps = this.props;
+    this.props = props;
+    if (!("transitionInterpolator" in props)) {
+      props.transitionInterpolator = this._getTransitionProps().transitionInterpolator;
+    }
+    this.transitionManager.processViewStateChange(props);
+    const { inertia } = props;
+    this.inertia = Number.isFinite(inertia) ? inertia : inertia === true ? DEFAULT_INERTIA : 0;
+    const {
+      scrollZoom = true,
+      dragPan = true,
+      dragRotate = true,
+      doubleClickZoom = true,
+      doubleClickDragZoom = false,
+      touchZoom = true,
+      touchRotate = false,
+      multiTouchDrag = touchRotate ? "rotate" : null,
+      trackpadGesture = false,
+      zoomAround = "pointer",
+      keyboard = true
+    } = props;
+    const isInteractive = Boolean(this.onViewStateChange);
+    this.toggleEvents(EVENT_TYPES.WHEEL, isInteractive && scrollZoom);
+    this.toggleEvents(EVENT_TYPES.PAN, isInteractive);
+    this.toggleEvents(
+      EVENT_TYPES.PINCH,
+      isInteractive && (touchZoom || multiTouchDrag === "rotate")
+    );
+    this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && Boolean(multiTouchDrag));
+    this.toggleEvents(EVENT_TYPES.DOUBLE_CLICK, isInteractive && doubleClickZoom);
+    this.toggleEvents(EVENT_TYPES.DOUBLE_CLICK_DRAG, isInteractive && doubleClickDragZoom);
+    this.toggleEvents(EVENT_TYPES.KEYBOARD, isInteractive && keyboard);
+    this.scrollZoom = scrollZoom;
+    this.dragPan = dragPan;
+    this.dragRotate = dragRotate;
+    this.doubleClickZoom = doubleClickZoom;
+    this.doubleClickDragZoom = doubleClickDragZoom;
+    this.touchZoom = touchZoom;
+    this.touchRotate = multiTouchDrag === "rotate";
+    this.multiTouchDrag = multiTouchDrag;
+    this.trackpadGesture = trackpadGesture;
+    this.zoomAround = zoomAround;
+    this.keyboard = keyboard;
+    const constraintChanged = !oldProps || oldProps.height !== props.height || oldProps.width !== props.width || oldProps.maxBounds !== props.maxBounds || oldProps.maxBoundsPadding !== props.maxBoundsPadding;
+    if (constraintChanged && props.maxBounds) {
+      const controllerState = new this.ControllerState({ ...props, makeViewport: this.makeViewport });
+      const normalizedProps = controllerState.getViewportProps();
+      const changed = Object.keys(normalizedProps).some(
+        (key) => !deepEqual(normalizedProps[key], props[key], 1)
+      );
+      if (changed) {
+        this.updateViewport(controllerState);
+      }
+    }
+  }
+  updateTransition() {
+    this.transitionManager.updateTransition();
+  }
+  toggleEvents(eventNames, enabled) {
+    if (this.eventManager) {
+      eventNames.forEach((eventName) => {
+        if (this._events[eventName] !== enabled) {
+          this._events[eventName] = enabled;
+          if (enabled) {
+            this.eventManager.on(eventName, this.handleEvent);
+          } else {
+            this.eventManager.off(eventName, this.handleEvent);
+          }
+        }
+      });
+    }
+  }
+  // Private Methods
+  /* Callback util */
+  // formats map state and invokes callback function
+  updateViewport(newControllerState, extraProps = null, interactionState = {}) {
+    const viewState = { ...newControllerState.getViewportProps(), ...extraProps };
+    const changed = this.controllerState !== newControllerState;
+    this.state = newControllerState.getState();
+    this._setInteractionState(interactionState);
+    if (changed) {
+      const oldViewState = this.controllerState && this.controllerState.getViewportProps();
+      if (this.onViewStateChange) {
+        this.onViewStateChange({
+          viewState,
+          interactionState: this._interactionState,
+          oldViewState,
+          viewId: this.props.id
+        });
+      }
+    }
+  }
+  _onTransition(params) {
+    this.onViewStateChange({
+      ...params,
+      interactionState: this._interactionState,
+      viewId: this.props.id
+    });
+  }
+  _setInteractionState(newStates) {
+    Object.assign(this._interactionState, newStates);
+    this.onStateChange(this._interactionState);
+  }
+  /** Maps a semantic input lifecycle to the constraint policy seen by controller state. */
+  _getConstraintContext(_action, phase) {
+    if (!this.props.rubberBand) {
+      return { mode: "hard" };
+    }
+    return { mode: phase === "update" ? "elastic" : phase === "end" ? "rebound" : "hard" };
+  }
+  /** Returns a rebound transition when hard resolution changed the displayed viewport props. */
+  _getReboundTransition(constraintContext, nextControllerState) {
+    if (constraintContext.mode !== "rebound") {
+      return null;
+    }
+    const nextViewportProps = nextControllerState.getViewportProps();
+    const shouldRebound = Object.keys(nextViewportProps).some(
+      (key) => !deepEqual(this.props[key], nextViewportProps[key], 1)
+    );
+    return shouldRebound ? {
+      ...this._getTransitionProps(),
+      transitionDuration: REBOUND_DURATION,
+      transitionEasing: EASE_OUT_EXPONENTIAL
+    } : null;
+  }
+  /* Event handlers */
+  // Default handler for the `panstart` event.
+  _onPanStart(event) {
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    let alternateMode = this.isFunctionKeyPressed(event) || event.rightButton || false;
+    if (this.invertPan || this.dragMode === "pan") {
+      alternateMode = !alternateMode;
+    }
+    const action = alternateMode ? "pan" : "rotate";
+    const constraintContext = this._getConstraintContext(action, "start");
+    const newControllerState = alternateMode ? this.controllerState.panStart({ pos }, constraintContext) : this.controllerState.rotateStart({ pos }, constraintContext);
+    this._panMove = alternateMode;
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
+    return true;
+  }
+  // Default handler for the `panmove` and `panend` event.
+  _onPan(event) {
+    if (!this.isDragging()) {
+      return false;
+    }
+    return this._panMove ? this._onPanMove(event) : this._onPanRotate(event);
+  }
+  _onPanEnd(event) {
+    if (!this.isDragging()) {
+      return false;
+    }
+    return this._panMove ? this._onPanMoveEnd(event) : this._onPanRotateEnd(event);
+  }
+  // Default handler for panning to move.
+  // Called by `_onPan` when panning without function key pressed.
+  _onPanMove(event) {
+    if (!this.dragPan) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    const newControllerState = this.controllerState.pan(
+      { pos },
+      this._getConstraintContext("pan", "update")
+    );
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: true
+    });
+    return true;
+  }
+  _onPanMoveEnd(event) {
+    const { inertia } = this;
+    if (this.dragPan && inertia && event.velocity) {
+      const pos = this.getCenter(event);
+      const endPos = [
+        pos[0] + event.velocityX * inertia / 2,
+        pos[1] + event.velocityY * inertia / 2
+      ];
+      const newControllerState = this.controllerState.pan({ pos: endPos }).panEnd();
+      this.updateViewport(
+        newControllerState,
+        {
+          ...this._getTransitionProps(),
+          transitionDuration: inertia,
+          transitionEasing: INERTIA_EASING
+        },
+        {
+          isDragging: false,
+          isPanning: true
+        }
+      );
+    } else {
+      const currentControllerState = this.controllerState;
+      const constraintContext = this._getConstraintContext("pan", "end");
+      const newControllerState = currentControllerState.panEnd(constraintContext);
+      const reboundTransition = this._getReboundTransition(constraintContext, newControllerState);
+      this.updateViewport(newControllerState, reboundTransition, {
+        isDragging: false,
+        isPanning: Boolean(reboundTransition)
+      });
+    }
+    return true;
+  }
+  // Default handler for panning to rotate.
+  // Called by `_onPan` when panning with function key pressed.
+  _onPanRotate(event) {
+    if (!this.dragRotate) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    const newControllerState = this.controllerState.rotate(
+      { pos },
+      this._getConstraintContext("rotate", "update")
+    );
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isRotating: true
+    });
+    return true;
+  }
+  _onPanRotateEnd(event) {
+    const { inertia } = this;
+    if (this.dragRotate && inertia && event.velocity) {
+      const pos = this.getCenter(event);
+      const endPos = [
+        pos[0] + event.velocityX * inertia / 2,
+        pos[1] + event.velocityY * inertia / 2
+      ];
+      const newControllerState = this.controllerState.rotate({ pos: endPos }).rotateEnd();
+      this.updateViewport(
+        newControllerState,
+        {
+          ...this._getTransitionProps(),
+          transitionDuration: inertia,
+          transitionEasing: INERTIA_EASING
+        },
+        {
+          isDragging: false,
+          isRotating: true
+        }
+      );
+    } else {
+      const currentControllerState = this.controllerState;
+      const constraintContext = this._getConstraintContext("rotate", "end");
+      const newControllerState = currentControllerState.rotateEnd(constraintContext);
+      const reboundTransition = this._getReboundTransition(constraintContext, newControllerState);
+      this.updateViewport(newControllerState, reboundTransition, {
+        isDragging: false,
+        isRotating: Boolean(reboundTransition)
+      });
+    }
+    return true;
+  }
+  // Default handler for the `wheel` event.
+  _onWheel(event) {
+    if (!this.scrollZoom) {
+      return false;
+    }
+    if (this.trackpadGesture && event.device !== "mouse") {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    event.srcEvent.preventDefault();
+    const { speed = 0.01, smooth = false } = this.scrollZoom === true ? {} : this.scrollZoom;
+    const { delta } = event;
+    let scale = 2 / (1 + Math.exp(-Math.abs(delta * speed)));
+    if (delta < 0 && scale !== 0) {
+      scale = 1 / scale;
+    }
+    const zoomPosition = this.getZoomPosition(pos);
+    const transitionProps = smooth ? { ...this._getTransitionProps({ around: zoomPosition }), transitionDuration: 250 } : NO_TRANSITION_PROPS;
+    const newControllerState = this.controllerState.zoom({ pos: zoomPosition, scale });
+    this.updateViewport(newControllerState, transitionProps, {
+      isZooming: true,
+      isPanning: true
+    });
+    if (!smooth) {
+      this._setInteractionState({ isZooming: false, isPanning: false });
+    }
+    return true;
+  }
+  _onMultiPanStart(event) {
+    const { multiTouchDrag } = this;
+    if (!multiTouchDrag || !this._isMultiPanEventAllowed(event, multiTouchDrag)) {
+      return false;
+    }
+    const currentCenter = event.offsetCenter;
+    if (!this.isPointInBounds(this.getCenter(event), event)) {
+      return false;
+    }
+    const isTrackpad = event.pointerType === "trackpad";
+    const startCenter = {
+      x: currentCenter.x - (isTrackpad ? 0 : event.deltaX),
+      y: currentCenter.y - (isTrackpad ? 0 : event.deltaY)
+    };
+    const startEvent = { ...event, offsetCenter: startCenter };
+    const pos = this.getCenter(startEvent);
+    const newControllerState = multiTouchDrag === "pan" ? this.controllerState.panStart({ pos }, this._getConstraintContext("pan", "start")) : this.controllerState.rotateStart({ pos }, this._getConstraintContext("rotate", "start"));
+    this._multiPanMode = multiTouchDrag;
+    this._multiPanStartCenter = startCenter;
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
+    return true;
+  }
+  _onMultiPan(event) {
+    const { mode, event: panEvent } = this._getMultiPanEvent(event);
+    if (!mode || !panEvent || !this.isDragging()) {
+      return false;
+    }
+    return mode === "pan" ? this._onPanMove(panEvent) : this._onPanRotate(panEvent);
+  }
+  _onMultiPanEnd(event) {
+    const { mode, event: panEvent } = this._getMultiPanEvent(event);
+    if (!mode || !panEvent || !this.isDragging()) {
+      this._resetMultiPan();
+      return false;
+    }
+    const handled = mode === "pan" ? this._onPanMoveEnd(panEvent) : this._onPanRotateEnd(panEvent);
+    this._resetMultiPan();
+    return handled;
+  }
+  _isTrackpadGestureAllowed(event) {
+    return event.pointerType !== "trackpad" || this.trackpadGesture;
+  }
+  _isMultiPanEventAllowed(event, mode) {
+    if (event.pointerType === "trackpad") {
+      return this.trackpadGesture && (mode === "pan" ? this.dragPan : this.dragRotate);
+    }
+    return event.pointerType === "touch" && (mode === "pan" ? this.dragPan : this.dragRotate);
+  }
+  _getMultiPanEvent(event) {
+    const mode = this._multiPanMode;
+    const startCenter = this._multiPanStartCenter;
+    if (!mode || !startCenter) {
+      return { mode: null, event: null };
+    }
+    return {
+      mode,
+      event: {
+        ...event,
+        offsetCenter: {
+          x: startCenter.x + event.deltaX,
+          y: startCenter.y + event.deltaY
+        }
+      }
+    };
+  }
+  _resetMultiPan() {
+    this._multiPanMode = null;
+    this._multiPanStartCenter = null;
+  }
+  // Default handler for the `pinchstart` event.
+  _onPinchStart(event) {
+    this._doubleClickDragAnchor = null;
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    const newControllerState = this.controllerState.zoomStart({ pos: this.getZoomPosition(pos) }, this._getConstraintContext("zoom", "start")).rotateStart({ pos }, this._getConstraintContext("rotate", "start"));
+    pinchEventWorkaround._startPinchRotation = event.rotation;
+    pinchEventWorkaround._lastPinchEvent = event;
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
+    return true;
+  }
+  // Default handler for the `pinchmove` and `pinchend` events.
+  _onPinch(event) {
+    if (!this.touchZoom && !this.touchRotate) {
+      return false;
+    }
+    if (!this.isDragging()) {
+      return false;
+    }
+    let newControllerState = this.controllerState;
+    if (this.touchZoom) {
+      const { scale } = event;
+      const pos = this.getCenter(event);
+      newControllerState = newControllerState.zoom(
+        { pos: this.getZoomPosition(pos), scale },
+        this._getConstraintContext("zoom", "update")
+      );
+    }
+    if (this.touchRotate) {
+      const { rotation } = event;
+      newControllerState = newControllerState.rotate(
+        { deltaAngleX: pinchEventWorkaround._startPinchRotation - rotation },
+        this._getConstraintContext("rotate", "update")
+      );
+    }
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: this.touchZoom,
+      isZooming: this.touchZoom,
+      isRotating: this.touchRotate
+    });
+    pinchEventWorkaround._lastPinchEvent = event;
+    return true;
+  }
+  _onPinchEnd(event) {
+    if (!this.isDragging()) {
+      return false;
+    }
+    const { inertia } = this;
+    const { _lastPinchEvent } = pinchEventWorkaround;
+    if (this.touchZoom && inertia && _lastPinchEvent && event.scale !== _lastPinchEvent.scale) {
+      const pos = this.getCenter(event);
+      const zoomPosition = this.getZoomPosition(pos);
+      let newControllerState = this.controllerState.rotateEnd();
+      const z = Math.log2(event.scale);
+      const velocityZ = (z - Math.log2(_lastPinchEvent.scale)) / (event.deltaTime - _lastPinchEvent.deltaTime);
+      const endScale = Math.pow(2, z + velocityZ * inertia / 2);
+      newControllerState = newControllerState.zoom({ pos: zoomPosition, scale: endScale }).zoomEnd();
+      this.updateViewport(
+        newControllerState,
+        {
+          ...this._getTransitionProps({ around: zoomPosition }),
+          transitionDuration: inertia,
+          transitionEasing: INERTIA_EASING
+        },
+        {
+          isDragging: false,
+          isPanning: this.touchZoom,
+          isZooming: this.touchZoom,
+          isRotating: false
+        }
+      );
+      this.blockEvents(inertia);
+    } else {
+      const currentControllerState = this.controllerState;
+      const zoomConstraintContext = this._getConstraintContext("zoom", "end");
+      const rotateConstraintContext = this._getConstraintContext("rotate", "end");
+      const newControllerState = currentControllerState.zoomEnd(zoomConstraintContext).rotateEnd(rotateConstraintContext);
+      const reboundTransition = this._getReboundTransition(
+        this.touchZoom ? zoomConstraintContext : rotateConstraintContext,
+        newControllerState
+      );
+      this.updateViewport(newControllerState, reboundTransition, {
+        isDragging: false,
+        isPanning: Boolean(reboundTransition) && this.touchZoom,
+        isZooming: Boolean(reboundTransition) && this.touchZoom,
+        isRotating: Boolean(reboundTransition) && this.touchRotate
+      });
+    }
+    pinchEventWorkaround._startPinchRotation = null;
+    pinchEventWorkaround._lastPinchEvent = null;
+    return true;
+  }
+  // Default handler for the `dblclick` event.
+  _onDoubleClick(event) {
+    if (!this.doubleClickZoom) {
+      return false;
+    }
+    if (Date.now() < this._suppressDoubleClickUntil) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    const isZoomOut = this.isFunctionKeyPressed(event);
+    const zoomPosition = this.getZoomPosition(pos);
+    const newControllerState = this.controllerState.zoom({
+      pos: zoomPosition,
+      scale: isZoomOut ? 0.5 : 2
+    });
+    this.updateViewport(newControllerState, this._getTransitionProps({ around: zoomPosition }), {
+      isZooming: true,
+      isPanning: true
+    });
+    this.blockEvents(100);
+    return true;
+  }
+  _onDoubleClickDragStart(event) {
+    if (!this.doubleClickDragZoom) {
+      this._doubleClickDragAnchor = null;
+      return false;
+    }
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      this._doubleClickDragAnchor = null;
+      return false;
+    }
+    this._doubleClickDragAnchor = this.getZoomPosition(pos);
+    let newControllerState = this.controllerState.zoomStart(
+      { pos: this._doubleClickDragAnchor },
+      this._getConstraintContext("zoom", "start")
+    );
+    if (event.scale !== 1) {
+      newControllerState = newControllerState.zoom(
+        { pos: this._doubleClickDragAnchor, scale: event.scale },
+        this._getConstraintContext("zoom", "update")
+      );
+    }
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: true,
+      isZooming: true
+    });
+    return true;
+  }
+  _onDoubleClickDrag(event) {
+    const pos = this._doubleClickDragAnchor;
+    if (!pos) {
+      return false;
+    }
+    const newControllerState = this.controllerState.zoom(
+      { pos, scale: event.scale },
+      this._getConstraintContext("zoom", "update")
+    );
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: true,
+      isZooming: true
+    });
+    return true;
+  }
+  _onDoubleClickDragEnd(_event) {
+    const pos = this._doubleClickDragAnchor;
+    if (!pos) {
+      return false;
+    }
+    this._doubleClickDragAnchor = null;
+    const currentControllerState = this.controllerState;
+    const constraintContext = this._getConstraintContext("zoom", "end");
+    const newControllerState = currentControllerState.zoomEnd(constraintContext);
+    const reboundTransition = this._getReboundTransition(constraintContext, newControllerState);
+    this.updateViewport(newControllerState, reboundTransition, {
+      isDragging: false,
+      isPanning: Boolean(reboundTransition),
+      isZooming: Boolean(reboundTransition)
+    });
+    this._suppressDoubleClickUntil = Date.now() + 100;
+    this.blockEvents(100);
+    return true;
+  }
+  // Default handler for the `keydown` event
+  _onKeyDown(event) {
+    if (!this.keyboard) {
+      return false;
+    }
+    const funcKey = this.isFunctionKeyPressed(event);
+    const { zoomSpeed, moveSpeed, rotateSpeedX, rotateSpeedY } = this.keyboard === true ? {} : this.keyboard;
+    const { controllerState } = this;
+    let newControllerState;
+    const interactionState = {};
+    switch (event.srcEvent.code) {
+      case "Minus":
+        newControllerState = funcKey ? controllerState.zoomOut(zoomSpeed).zoomOut(zoomSpeed) : controllerState.zoomOut(zoomSpeed);
+        interactionState.isZooming = true;
+        break;
+      case "Equal":
+        newControllerState = funcKey ? controllerState.zoomIn(zoomSpeed).zoomIn(zoomSpeed) : controllerState.zoomIn(zoomSpeed);
+        interactionState.isZooming = true;
+        break;
+      case "ArrowLeft":
+        if (funcKey) {
+          newControllerState = controllerState.rotateLeft(rotateSpeedX);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveLeft(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      case "ArrowRight":
+        if (funcKey) {
+          newControllerState = controllerState.rotateRight(rotateSpeedX);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveRight(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      case "ArrowUp":
+        if (funcKey) {
+          newControllerState = controllerState.rotateUp(rotateSpeedY);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveUp(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      case "ArrowDown":
+        if (funcKey) {
+          newControllerState = controllerState.rotateDown(rotateSpeedY);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveDown(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      default:
+        return false;
+    }
+    this.updateViewport(newControllerState, this._getTransitionProps(), interactionState);
+    return true;
+  }
+  _getTransitionProps(opts) {
+    const { transition } = this;
+    if (!transition || !transition.transitionInterpolator) {
+      return NO_TRANSITION_PROPS;
+    }
+    return opts ? {
+      ...transition,
+      transitionInterpolator: new LinearInterpolator({
+        ...opts,
+        ...transition.transitionInterpolator.opts,
+        makeViewport: this.controllerState.makeViewport
+      })
+    } : transition;
+  }
+};
+
+// ../core/src/controllers/view-state.ts
+var CONSTRAINT_AROUND = /* @__PURE__ */ Symbol("constraintAround");
+var ViewState = class {
+  constructor(props, state, makeViewport, constraintContext) {
+    this.makeViewport = makeViewport;
+    this._viewportProps = this.applyConstraints(props, constraintContext);
+    this._state = state;
+  }
+  getViewportProps() {
+    return this._viewportProps;
+  }
+  getState() {
+    return this._state;
+  }
+};
+
+// ../core/src/controllers/utils.ts
+function applyRubberBand(value, constrainedValue, range) {
+  const overshoot = value - constrainedValue;
+  return overshoot && Number.isFinite(overshoot) ? constrainedValue + overshoot * range / (range + Math.abs(overshoot)) : constrainedValue;
+}
+function getMaxBoundsRect(width, height, padding) {
+  const left = getPosition(parsePosition((padding == null ? void 0 : padding.left) ?? 0), width);
+  const right = getPosition(parsePosition((padding == null ? void 0 : padding.right) ?? 0), width);
+  const top = getPosition(parsePosition((padding == null ? void 0 : padding.top) ?? 0), height);
+  const bottom = getPosition(parsePosition((padding == null ? void 0 : padding.bottom) ?? 0), height);
+  return {
+    x: left,
+    y: top,
+    width: width - left - right,
+    height: height - top - bottom
+  };
+}
+function getMaxBoundsExtents(viewport, target, rect) {
+  let [x, y] = viewport.project(target);
+  x = Number.isFinite(x) ? x : viewport.width / 2;
+  y = Number.isFinite(y) ? y : viewport.height / 2;
+  return {
+    left: x - rect.x,
+    right: rect.x + rect.width - x,
+    top: y - rect.y,
+    bottom: rect.y + rect.height - y
+  };
+}
+
+// ../core/src/utils/apply-styles.ts
+function applyStyles(element, style) {
+  if (style) {
+    Object.entries(style).map(([key, value]) => {
+      if (key.startsWith("--")) {
+        element.style.setProperty(key, value);
+      } else {
+        element.style[key] = value;
+      }
+    });
+  }
+}
+function removeStyles(element, style) {
+  if (style) {
+    Object.keys(style).map((key) => {
+      if (key.startsWith("--")) {
+        element.style.removeProperty(key);
+      } else {
+        element.style[key] = "";
+      }
+    });
+  }
+}
+
+// ../core/src/lib/widget.ts
+var Widget = class {
+  constructor(props) {
+    /**
+     * The view id that this widget controls and is positioned relative to. Default `null`.
+     * If assigned, this widget only responds to events inside the matching view. In multi-canvas
+     * mode, the view's `canvasId` determines the positioning offset, but the widget DOM remains
+     * under the shared widget root.
+     */
+    this.viewId = null;
+    this.props = {
+      // @ts-expect-error `defaultProps` may not exist on constructor
+      ...this.constructor.defaultProps,
+      ...props
+    };
+    this.id = this.props.id;
+  }
+  /** Called to update widget options */
+  setProps(props) {
+    const oldProps = this.props;
+    const el = this.rootElement;
+    if (el && oldProps.className !== props.className) {
+      if (oldProps.className) el.classList.remove(oldProps.className);
+      if (props.className) el.classList.add(props.className);
+    }
+    if (el && !deepEqual(oldProps.style, props.style, 1)) {
+      removeStyles(el, oldProps.style);
+      applyStyles(el, props.style);
+    }
+    Object.assign(this.props, props);
+    this.updateHTML();
+  }
+  /** Update the HTML to reflect latest props and state */
+  updateHTML() {
+    if (this.rootElement) {
+      this.onRenderHTML(this.rootElement);
+    }
+  }
+  // VIEW STATE HELPERS
+  get viewIds() {
+    var _a;
+    return this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
+  }
+  /** Returns the current view state for the given view */
+  getViewState(viewId) {
+    var _a, _b;
+    return ((_b = (_a = this.deck) == null ? void 0 : _a.viewManager) == null ? void 0 : _b.getViewState(viewId)) || {};
+  }
+  /** Updates the view state for the given view */
+  setViewState(viewId, viewState) {
+    var _a;
+    (_a = this.deck) == null ? void 0 : _a._onViewStateChange({ viewId, viewState, interactionState: {} });
+  }
+  // @note empty method calls have an overhead in V8 but it is very low, ~1ns
+  /**
+   * Common utility to create the root DOM element for this widget
+   * Configures the top-level styles and adds basic class names for theming
+   * @returns an UI element that should be appended to the Deck container
+   */
+  onCreateRootElement() {
+    const CLASS_NAMES = [
+      // Add class names for theming
+      "deck-widget",
+      this.className,
+      // plus any app-supplied class name
+      this.props.className
+    ];
+    const element = document.createElement("div");
+    CLASS_NAMES.filter((cls) => typeof cls === "string" && cls.length > 0).forEach(
+      (className) => element.classList.add(className)
+    );
+    applyStyles(element, this.props.style);
+    return element;
+  }
+  /** Internal API called by Deck when the widget is first added to a Deck instance */
+  _onAdd(params) {
+    return this.onAdd(params) ?? this.onCreateRootElement();
+  }
+  /** Overridable by subclass - called when the widget is first added to a Deck instance
+   * @returns an optional UI element that should be appended to the Deck container
+   */
+  onAdd(params) {
+  }
+  /** Called when the widget is removed */
+  onRemove() {
+  }
+  // deck integration - Event hooks
+  /** Called when the containing view is changed */
+  onViewportChange(viewport) {
+  }
+  /** Called when the containing view is redrawn */
+  onRedraw(params) {
+  }
+  /** Called when a hover event occurs */
+  onHover(info, event) {
+  }
+  /** Called when a click event occurs */
+  onClick(info, event) {
+  }
+  /** Called when a drag event occurs */
+  onDrag(info, event) {
+  }
+  /** Called when a dragstart event occurs */
+  onDragStart(info, event) {
+  }
+  /** Called when a dragend event occurs */
+  onDragEnd(info, event) {
+  }
+};
+Widget.defaultProps = {
+  id: "widget",
+  style: {},
+  _container: null,
+  className: ""
+};
+
+// ../core/src/viewports/globe-viewport.ts
+var import_core6 = require("@math.gl/core");
+var import_web_mercator4 = require("@math.gl/web-mercator");
+var DEGREES_TO_RADIANS2 = Math.PI / 180;
+var RADIANS_TO_DEGREES = 180 / Math.PI;
+var NORTH_UP_BEARING_THRESHOLD = 1;
+var EARTH_RADIUS = 6370972;
+var GLOBE_RADIUS = 256;
+var GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO = 0.75;
+var GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO = 1.15;
+function isGlobeNorthUp(bearing) {
+  const normalizedBearing = mod(bearing + 180, 360) - 180;
+  return Math.abs(normalizedBearing) < NORTH_UP_BEARING_THRESHOLD;
+}
+function getDistanceScales2() {
+  const unitsPerMeter2 = GLOBE_RADIUS / EARTH_RADIUS;
+  const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
+  return {
+    unitsPerMeter: [unitsPerMeter2, unitsPerMeter2, unitsPerMeter2],
+    unitsPerMeter2: [0, 0, 0],
+    metersPerUnit: [1 / unitsPerMeter2, 1 / unitsPerMeter2, 1 / unitsPerMeter2],
+    unitsPerDegree: [unitsPerDegree, unitsPerDegree, unitsPerMeter2],
+    unitsPerDegree2: [0, 0, 0],
+    degreesPerUnit: [1 / unitsPerDegree, 1 / unitsPerDegree, 1 / unitsPerMeter2]
+  };
+}
+var GlobeViewport = class extends Viewport {
+  constructor(opts = {}) {
+    const {
+      longitude = 0,
+      bearing = 0,
+      pitch = 0,
+      zoom = 0,
+      // Matches Maplibre defaults
+      // https://github.com/maplibre/maplibre-gl-js/blob/f8ab4b48d59ab8fe7b068b102538793bbdd4c848/src/geo/projection/globe_transform.ts#L632-L633
+      nearZMultiplier = 0.5,
+      farZMultiplier = 1,
+      resolution = 10
+    } = opts;
+    let { latitude = 0, height, altitude = 1.5, fovy } = opts;
+    latitude = Math.max(Math.min(latitude, 90), -90);
+    height = height || 1;
+    if (fovy) {
+      altitude = (0, import_web_mercator4.fovyToAltitude)(fovy);
+    } else {
+      fovy = (0, import_web_mercator4.altitudeToFovy)(altitude);
+    }
+    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    const scale = Math.pow(2, zoom - zoomAdjust(scaleLatitude));
+    const pitchRadians = pitch * DEGREES_TO_RADIANS2;
+    const nearZ = opts.nearZ ?? nearZMultiplier;
+    const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale / height / Math.max(Math.cos(pitchRadians), 0.1)) * farZMultiplier;
+    const viewMatrix2 = new import_core6.Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] }).rotateX(-pitchRadians).rotateY(-bearing * DEGREES_TO_RADIANS2).rotateX(latitude * DEGREES_TO_RADIANS2).rotateZ(-longitude * DEGREES_TO_RADIANS2).scale(scale / height);
+    super({
+      ...opts,
+      // x, y, width,
+      height,
+      // view matrix
+      viewMatrix: viewMatrix2,
+      longitude,
+      latitude,
+      zoom,
+      // projection matrix parameters
+      distanceScales: getDistanceScales2(),
+      fovy,
+      focalDistance: altitude,
+      near: nearZ,
+      far: farZ
+    });
+    this.scale = scale;
+    this.latitude = latitude;
+    this.longitude = longitude;
+    this.bearing = bearing;
+    this.pitch = pitch;
+    this.fovy = fovy;
+    this.resolution = resolution;
+  }
+  get projectionMode() {
+    return PROJECTION_MODE.GLOBE;
+  }
+  getDistanceScales() {
+    return this.distanceScales;
+  }
+  getBounds(options = {}) {
+    const unprojectOption = { targetZ: options.z || 0 };
+    const left = this.unproject([0, this.height / 2], unprojectOption);
+    const top = this.unproject([this.width / 2, 0], unprojectOption);
+    const right = this.unproject([this.width, this.height / 2], unprojectOption);
+    const bottom = this.unproject([this.width / 2, this.height], unprojectOption);
+    if (right[0] < this.longitude) right[0] += 360;
+    if (left[0] > this.longitude) left[0] -= 360;
+    return [
+      Math.min(left[0], right[0], top[0], bottom[0]),
+      Math.min(left[1], right[1], top[1], bottom[1]),
+      Math.max(left[0], right[0], top[0], bottom[0]),
+      Math.max(left[1], right[1], top[1], bottom[1])
+    ];
+  }
+  /**
+   * Builds the screen-pixel → globe-center ray and the intermediate ray/sphere
+   * math reused by `unproject` and anchored zoom. One function so the same
+   * pixelUnprojectionMatrix work isn't duplicated.
+   */
+  _getRayToGlobe(screenPosition, { topLeft = true, targetZ } = {}) {
+    const [screenX, screenY] = screenPosition;
+    const adjustedScreenY = topLeft ? screenY : this.height - screenY;
+    const { pixelUnprojectionMatrix } = this;
+    const rayStartPosition = transformVector(pixelUnprojectionMatrix, [
+      screenX,
+      adjustedScreenY,
+      -1,
+      1
+    ]);
+    const rayEndPosition = transformVector(pixelUnprojectionMatrix, [
+      screenX,
+      adjustedScreenY,
+      1,
+      1
+    ]);
+    const radius = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+    const rayLengthSquared = import_core6.vec3.sqrLen(import_core6.vec3.sub([], rayStartPosition, rayEndPosition));
+    const rayStartDistanceSquared = import_core6.vec3.sqrLen(rayStartPosition);
+    const rayEndDistanceSquared = import_core6.vec3.sqrLen(rayEndPosition);
+    const triangleAreaSquared = (4 * rayStartDistanceSquared * rayEndDistanceSquared - (rayLengthSquared - rayStartDistanceSquared - rayEndDistanceSquared) ** 2) / 16;
+    const distanceToCenterSquared = 4 * triangleAreaSquared / rayLengthSquared;
+    return {
+      rayStartPosition,
+      rayEndPosition,
+      radius,
+      rayLengthSquared,
+      rayStartDistanceSquared,
+      distanceToCenterSquared
+    };
+  }
+  _getRayDistanceToGlobeCenterRatio(screenPosition, options) {
+    const { distanceToCenterSquared, radius } = this._getRayToGlobe(screenPosition, options);
+    return Math.sqrt(Math.max(0, distanceToCenterSquared)) / radius;
+  }
+  /**
+   * Returns how strongly a screen position should anchor zoom on the visible globe.
+   * A value of `0` means that the controller should fall back to center zoom.
+   * @param screenPosition - Screen position to evaluate.
+   * @returns Anchor strength from `0` to `1`.
+   */
+  getZoomAnchorStrength(screenPosition) {
+    const distanceRatio = this._getRayDistanceToGlobeCenterRatio(screenPosition);
+    if (distanceRatio >= GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO) {
+      return 0;
+    }
+    const edgeProgress = Math.max(
+      0,
+      Math.min(
+        1,
+        (distanceRatio - GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO) / (GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO - GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO)
+      )
+    );
+    const smoothProgress = edgeProgress * edgeProgress * (3 - 2 * edgeProgress);
+    return 1 - smoothProgress;
+  }
+  unproject(xyz, { topLeft = true, targetZ } = {}) {
+    const [x, y, z] = xyz;
+    const y2 = topLeft ? y : this.height - y;
+    const { pixelUnprojectionMatrix } = this;
+    let coord;
+    if (Number.isFinite(z)) {
+      coord = transformVector(pixelUnprojectionMatrix, [x, y2, z, 1]);
+    } else {
+      const {
+        rayStartPosition,
+        rayEndPosition,
+        radius,
+        rayLengthSquared,
+        rayStartDistanceSquared,
+        distanceToCenterSquared
+      } = this._getRayToGlobe(xyz, { topLeft, targetZ });
+      const rayStartToClosestApproach = Math.sqrt(
+        rayStartDistanceSquared - distanceToCenterSquared
+      );
+      const closestApproachToIntersection = Math.sqrt(
+        Math.max(0, radius * radius - distanceToCenterSquared)
+      );
+      const intersectionRatio = (rayStartToClosestApproach - closestApproachToIntersection) / Math.sqrt(rayLengthSquared);
+      coord = import_core6.vec3.lerp([], rayStartPosition, rayEndPosition, intersectionRatio);
+    }
+    const [X, Y, Z] = this.unprojectPosition(coord);
+    if (Number.isFinite(z)) {
+      return [X, Y, Z];
+    }
+    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
+  }
+  projectPosition(xyz) {
+    const [lng, lat, Z = 0] = xyz;
+    const lambda = lng * DEGREES_TO_RADIANS2;
+    const phi = lat * DEGREES_TO_RADIANS2;
+    const cosPhi = Math.cos(phi);
+    const D = (Z / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+    return [Math.sin(lambda) * cosPhi * D, -Math.cos(lambda) * cosPhi * D, Math.sin(phi) * D];
+  }
+  unprojectPosition(xyz) {
+    const [x, y, z] = xyz;
+    const D = import_core6.vec3.len(xyz);
+    const phi = Math.asin(z / D);
+    const lambda = Math.atan2(x, -y);
+    const lng = lambda * RADIANS_TO_DEGREES;
+    const lat = phi * RADIANS_TO_DEGREES;
+    const Z = (D / GLOBE_RADIUS - 1) * EARTH_RADIUS;
+    return [lng, lat, Z];
+  }
+  projectFlat(xyz) {
+    return xyz;
+  }
+  unprojectFlat(xyz) {
+    return xyz;
+  }
+  /**
+   * Pan the globe to place geographic coordinates at a screen pixel.
+   * When `dragStartPosition` is supplied, applies the delta-based movement used by globe dragging.
+   * @param coordinates - Geographic anchor, or the starting longitude, latitude and zoom.
+   * @param screenPosition - Current screen position.
+   * @param dragStartPosition - Screen position where a drag started.
+   * @returns Updated viewport options.
+   */
+  panByPosition(coordinates, screenPosition, dragStartPosition) {
+    if (!dragStartPosition) {
+      let anchorStrength = this.getZoomAnchorStrength(screenPosition);
+      if (anchorStrength === 0) {
+        return { longitude: this.longitude, latitude: this.latitude };
+      }
+      const currentCoordinates = this.unproject(screenPosition);
+      const longitudeDelta = mod(coordinates[0] - currentCoordinates[0] + 180, 360) - 180;
+      const latitudeDelta = coordinates[1] - currentCoordinates[1];
+      const crossesPole = Math.abs(currentCoordinates[1]) > import_web_mercator4.MAX_LATITUDE || Math.abs(longitudeDelta) > 90;
+      if (isGlobeNorthUp(this.bearing) && crossesPole) {
+        return { longitude: this.longitude, latitude: this.latitude };
+      }
+      if (isGlobeNorthUp(this.bearing) && latitudeDelta !== 0) {
+        const latitudeLimit = latitudeDelta > 0 ? import_web_mercator4.MAX_LATITUDE : -import_web_mercator4.MAX_LATITUDE;
+        const latitudeConstraintStrength = (latitudeLimit - this.latitude) / latitudeDelta;
+        anchorStrength = Math.min(anchorStrength, Math.max(0, latitudeConstraintStrength));
+      }
+      const longitude2 = this.longitude + longitudeDelta * anchorStrength;
+      const latitude2 = Math.max(Math.min(this.latitude + latitudeDelta * anchorStrength, 90), -90);
+      return { longitude: longitude2, latitude: latitude2 };
+    }
+    const [startLongitude, startLatitude, startZoom] = coordinates;
+    const scale = Math.pow(2, this.zoom - zoomAdjust(this.latitude));
+    const rotationSpeed = 0.25 / scale;
+    const longitude = startLongitude + rotationSpeed * (dragStartPosition[0] - screenPosition[0]);
+    let latitude = startLatitude - rotationSpeed * (dragStartPosition[1] - screenPosition[1]);
+    latitude = Math.max(Math.min(latitude, 90), -90);
+    const nextViewState = { longitude, latitude, zoom: startZoom - zoomAdjust(startLatitude) };
+    nextViewState.zoom += zoomAdjust(nextViewState.latitude);
+    return nextViewState;
+  }
+};
+GlobeViewport.displayName = "GlobeViewport";
+function zoomAdjust(latitude, clampToPoles) {
+  if (clampToPoles) {
+    latitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+  }
+  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
+  return Math.log2(scaleAdjust);
+}
+function transformVector(matrix, vector) {
+  const result = import_core6.vec4.transformMat4([], vector, matrix);
+  import_core6.vec4.scale(result, result, 1 / result[3]);
+  return result;
+}
+
+// ../core/src/viewports/orthographic-viewport.ts
+var import_core7 = require("@math.gl/core");
+var import_web_mercator5 = require("@math.gl/web-mercator");
+var viewMatrix = new import_core7.Matrix4().lookAt({ eye: [0, 0, 1] });
+function getProjectionMatrix({
+  width,
+  height,
+  near,
+  far,
+  padding
+}) {
+  let left = -width / 2;
+  let right = width / 2;
+  let bottom = -height / 2;
+  let top = height / 2;
+  if (padding) {
+    const { left: l = 0, right: r = 0, top: t = 0, bottom: b = 0 } = padding;
+    const offsetX = (0, import_core7.clamp)((l + width - r) / 2, 0, width) - width / 2;
+    const offsetY = (0, import_core7.clamp)((t + height - b) / 2, 0, height) - height / 2;
+    left -= offsetX;
+    right -= offsetX;
+    bottom += offsetY;
+    top += offsetY;
+  }
+  return new import_core7.Matrix4().ortho({
+    left,
+    right,
+    bottom,
+    top,
+    near,
+    far
+  });
+}
+var OrthographicViewport = class extends Viewport {
+  constructor(props) {
+    const {
+      width,
+      height,
+      near = 0.1,
+      far = 1e3,
+      zoom = 0,
+      target = [0, 0, 0],
+      padding = null,
+      flipY = true
+    } = props;
+    const zoomX = props.zoomX ?? (Array.isArray(zoom) ? zoom[0] : zoom);
+    const zoomY = props.zoomY ?? (Array.isArray(zoom) ? zoom[1] : zoom);
+    const zoom_ = Number.isFinite(props.zoom) ? props.zoom : Math.min(zoomX, zoomY);
+    const scale = Math.pow(2, zoom_);
+    let distanceScales;
+    if (zoomX !== zoom_ || zoomY !== zoom_) {
+      const scaleX = Math.pow(2, zoomX);
+      const scaleY = Math.pow(2, zoomY);
+      distanceScales = {
+        unitsPerMeter: [scaleX / scale, scaleY / scale, 1],
+        metersPerUnit: [scale / scaleX, scale / scaleY, 1]
+      };
+    }
+    super({
+      ...props,
+      // in case viewState contains longitude/latitude values,
+      // make sure that the base Viewport class does not treat this as a geospatial viewport
+      longitude: void 0,
+      position: target,
+      viewMatrix: viewMatrix.clone().scale([scale, scale * (flipY ? -1 : 1), scale]),
+      projectionMatrix: getProjectionMatrix({
+        width: width || 1,
+        height: height || 1,
+        padding,
+        near,
+        far
+      }),
+      zoom: zoom_,
+      distanceScales
+    });
+    this.target = target;
+    this.zoomX = zoomX;
+    this.zoomY = zoomY;
+    this.flipY = flipY;
+  }
+  projectFlat([X, Y]) {
+    const { unitsPerMeter: unitsPerMeter2 } = this.distanceScales;
+    return [X * unitsPerMeter2[0], Y * unitsPerMeter2[1]];
+  }
+  unprojectFlat([x, y]) {
+    const { metersPerUnit } = this.distanceScales;
+    return [x * metersPerUnit[0], y * metersPerUnit[1]];
+  }
+  /* Needed by LinearInterpolator */
+  panByPosition(coords, pixel, startPixel) {
+    const fromLocation = (0, import_web_mercator5.pixelsToWorld)(pixel, this.pixelUnprojectionMatrix);
+    const toLocation = this.projectFlat(coords);
+    const translate = import_core7.vec2.add([], toLocation, import_core7.vec2.negate([], fromLocation));
+    const newCenter = import_core7.vec2.add([], this.center, translate);
+    return { target: this.unprojectFlat(newCenter) };
+  }
+};
+OrthographicViewport.displayName = "OrthographicViewport";
+
+// ../core/src/controllers/orthographic-controller.ts
+var import_core8 = require("@math.gl/core");
+var ZOOM_RUBBER_BAND_RANGE = 1;
+function normalizeZoom({
+  zoom = 0,
+  zoomX,
+  zoomY
+}) {
+  zoomX = zoomX ?? (Array.isArray(zoom) ? zoom[0] : zoom);
+  zoomY = zoomY ?? (Array.isArray(zoom) ? zoom[1] : zoom);
+  return { zoomX, zoomY };
+}
+function getAxisBounds(maxBounds, index, negativeExtent, positiveExtent, target) {
+  const minimum = maxBounds[0][index] + negativeExtent;
+  const maximum = maxBounds[1][index] - positiveExtent;
+  const midpoint = (minimum + maximum) / 2;
+  return {
+    minimum,
+    maximum,
+    midpoint,
+    settledTarget: Number.isFinite(negativeExtent) && Number.isFinite(positiveExtent) && minimum <= maximum ? (0, import_core8.clamp)(target, minimum, maximum) : midpoint
+  };
+}
+var OrthographicState = class extends ViewState {
+  constructor(options) {
+    const {
+      /* Viewport arguments */
+      width,
+      // Width of viewport
+      height,
+      // Height of viewport
+      target = [0, 0, 0],
+      zoom = 0,
+      zoomAxis = "all",
+      /* Viewport constraints */
+      minZoom = -Infinity,
+      maxZoom = Infinity,
+      minZoomX = minZoom,
+      maxZoomX = maxZoom,
+      minZoomY = minZoom,
+      maxZoomY = maxZoom,
+      maxBounds = null,
+      maxBoundsPadding = null,
+      rubberBand = false,
+      /** Interaction states, required to calculate change during transform */
+      // Model state when the pan operation first started
+      startPanPosition,
+      // Model state when the zoom operation first started
+      startZoomPosition,
+      startZoom
+    } = options;
+    const { [CONSTRAINT_AROUND]: constraintAround } = options;
+    const { zoomX, zoomY } = normalizeZoom(options);
+    super(
+      {
+        width,
+        height,
+        target,
+        zoom,
+        zoomX,
+        zoomY,
+        zoomAxis,
+        minZoomX,
+        maxZoomX,
+        minZoomY,
+        maxZoomY,
+        maxBounds,
+        maxBoundsPadding,
+        rubberBand,
+        ...{ [CONSTRAINT_AROUND]: constraintAround }
+      },
+      {
+        startPanPosition,
+        startZoomPosition,
+        startZoom
+      },
+      options.makeViewport,
+      options.constraintContext
+    );
+  }
+  /**
+   * Start panning
+   * @param {[Number, Number]} pos - position on screen where the pointer grabs
+   */
+  panStart({ pos }, constraintContext) {
+    return this._getUpdatedState({ startPanPosition: this._unproject(pos) }, constraintContext);
+  }
+  /**
+   * Pan
+   * @param {[Number, Number]} pos - position on screen where the pointer is
+   */
+  pan({ pos, startPosition }, constraintContext) {
+    const startPanPosition = this.getState().startPanPosition || startPosition;
+    if (!startPanPosition) {
+      return this;
+    }
+    const viewport = this.makeViewport(this.getViewportProps());
+    const newProps = viewport.panByPosition(startPanPosition, pos);
+    return this._getUpdatedState(newProps, constraintContext);
+  }
+  /**
+   * End panning
+   * Must call if `panStart()` was called
+   */
+  panEnd(constraintContext) {
+    return this._getUpdatedState({ startPanPosition: null }, constraintContext);
+  }
+  /**
+   * Start rotating
+   */
+  rotateStart() {
+    return this;
+  }
+  /**
+   * Rotate
+   */
+  rotate() {
+    return this;
+  }
+  /**
+   * End rotating
+   */
+  rotateEnd() {
+    return this;
+  }
+  // shortest path between two view states
+  shortestPathFrom(viewState) {
+    const fromProps = viewState.getViewportProps();
+    const props = { ...this.getViewportProps() };
+    return props;
+  }
+  /**
+   * Start zooming
+   * @param {[Number, Number]} pos - position on screen where the pointer grabs
+   */
+  zoomStart({ pos }, constraintContext) {
+    const { zoomX, zoomY } = this.getViewportProps();
+    return this._getUpdatedState(
+      {
+        startZoomPosition: this._unproject(pos),
+        startZoom: [zoomX, zoomY]
+      },
+      constraintContext
+    );
+  }
+  /**
+   * Zoom
+   * @param {[Number, Number]} pos - position on screen where the current target is
+   * @param {[Number, Number]} startPos - the target position at
+   *   the start of the operation. Must be supplied of `zoomStart()` was not called
+   * @param {Number} scale - a number between [0, 1] specifying the accumulated
+   *   relative scale.
+   */
+  zoom({
+    pos,
+    startPos,
+    scale
+  }, constraintContext) {
+    let { startZoom, startZoomPosition } = this.getState();
+    if (!startZoomPosition) {
+      const { zoomX, zoomY } = this.getViewportProps();
+      startZoom = [zoomX, zoomY];
+      startZoomPosition = this._unproject(startPos || pos);
+    }
+    if (!startZoomPosition) {
+      return this;
+    }
+    const newZoomProps = this._calculateNewZoom({ scale, startZoom });
+    return this._getUpdatedState(
+      {
+        ...newZoomProps,
+        [CONSTRAINT_AROUND]: { position: startZoomPosition, screenPosition: pos }
+      },
+      constraintContext
+    );
+  }
+  /**
+   * End zooming
+   * Must call if `zoomStart()` was called
+   */
+  zoomEnd(constraintContext) {
+    return this._getUpdatedState(
+      {
+        startZoomPosition: null,
+        startZoom: null
+      },
+      constraintContext
+    );
+  }
+  zoomIn(speed = 2, constraintContext) {
+    return this._getUpdatedState(this._calculateNewZoom({ scale: speed }), constraintContext);
+  }
+  zoomOut(speed = 2, constraintContext) {
+    return this._getUpdatedState(this._calculateNewZoom({ scale: 1 / speed }), constraintContext);
+  }
+  moveLeft(speed = 50, constraintContext) {
+    return this._panFromCenter([-speed, 0], constraintContext);
+  }
+  moveRight(speed = 50, constraintContext) {
+    return this._panFromCenter([speed, 0], constraintContext);
+  }
+  moveUp(speed = 50, constraintContext) {
+    return this._panFromCenter([0, -speed], constraintContext);
+  }
+  moveDown(speed = 50, constraintContext) {
+    return this._panFromCenter([0, speed], constraintContext);
+  }
+  rotateLeft(speed = 15) {
+    return this;
+  }
+  rotateRight(speed = 15) {
+    return this;
+  }
+  rotateUp(speed = 10) {
+    return this;
+  }
+  rotateDown(speed = 10) {
+    return this;
+  }
+  /* Private methods */
+  _project(pos) {
+    const viewport = this.makeViewport(this.getViewportProps());
+    return viewport.project(pos);
+  }
+  _unproject(pos) {
+    const viewport = this.makeViewport(this.getViewportProps());
+    const [x, y] = viewport.unproject(pos);
+    return [x, y];
+  }
+  // Calculates new zoom
+  _calculateNewZoom({ scale, startZoom }) {
+    const { zoomX, zoomY, zoomAxis } = this.getViewportProps();
+    if (startZoom === void 0) {
+      startZoom = [zoomX, zoomY];
+    }
+    const deltaZoom = Math.log2(scale);
+    let [newZoomX, newZoomY] = startZoom;
+    switch (zoomAxis) {
+      case "X":
+        newZoomX += deltaZoom;
+        break;
+      case "Y":
+        newZoomY += deltaZoom;
+        break;
+      default:
+        newZoomX += deltaZoom;
+        newZoomY += deltaZoom;
+    }
+    return {
+      zoomX: newZoomX,
+      zoomY: newZoomY
+    };
+  }
+  _panFromCenter(offset3, constraintContext) {
+    const { target } = this.getViewportProps();
+    const center = this._project(target);
+    return this.pan(
+      {
+        startPosition: target,
+        pos: [center[0] + offset3[0], center[1] + offset3[1]]
+      },
+      constraintContext
+    );
+  }
+  _getUpdatedState(newProps, constraintContext) {
+    return new this.constructor({
+      makeViewport: this.makeViewport,
+      ...this.getViewportProps(),
+      ...this.getState(),
+      ...newProps,
+      constraintContext
+    });
+  }
+  // Apply any constraints (mathematical or defined by _viewportProps) to map state
+  applyConstraints(props, constraintContext) {
+    const internalProps = props;
+    const constraintAround = internalProps[CONSTRAINT_AROUND];
+    delete internalProps[CONSTRAINT_AROUND];
+    const normalizedZoom = normalizeZoom(props);
+    const constrainedZoom = this._constrainZoom(normalizedZoom, props);
+    const shouldRubberBand = props.rubberBand && (constraintContext == null ? void 0 : constraintContext.mode) === "elastic";
+    const { zoomX, zoomY } = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? normalizedZoom : shouldRubberBand ? {
+      zoomX: applyRubberBand(
+        normalizedZoom.zoomX,
+        constrainedZoom.zoomX,
+        ZOOM_RUBBER_BAND_RANGE
+      ),
+      zoomY: applyRubberBand(
+        normalizedZoom.zoomY,
+        constrainedZoom.zoomY,
+        ZOOM_RUBBER_BAND_RANGE
+      )
+    } : constrainedZoom;
+    props.zoomX = zoomX;
+    props.zoomY = zoomY;
+    if (constraintAround) {
+      const viewport = this.makeViewport({ ...props, zoomX, zoomY });
+      Object.assign(
+        props,
+        viewport.panByPosition(constraintAround.position, constraintAround.screenPosition)
+      );
+    }
+    props.zoom = Array.isArray(props.zoom) || props.zoomX !== props.zoomY ? [props.zoomX, props.zoomY] : props.zoomX;
+    const { maxBounds, rubberBand, target } = props;
+    if (maxBounds) {
+      const maxBoundsRect = getMaxBoundsRect(props.width, props.height, props.maxBoundsPadding);
+      const viewport = this.makeViewport(props);
+      const screenExtents = getMaxBoundsExtents(viewport, target, maxBoundsRect);
+      const projectedTarget = viewport.project(target);
+      const pixelsPerUnit = [0, 1].map((index) => {
+        const sampleTarget = target.slice();
+        sampleTarget[index] += 1;
+        const projectedDelta = viewport.project(sampleTarget)[index] - projectedTarget[index];
+        return Number.isFinite(projectedDelta) ? projectedDelta : 2 ** (index === 0 ? zoomX : zoomY) * (index === 0 ? 1 : -1);
+      });
+      const worldExtents = pixelsPerUnit.map((projectedDelta, index) => {
+        const negativeScreenExtent = index === 0 ? screenExtents.left : screenExtents.top;
+        const positiveScreenExtent = index === 0 ? screenExtents.right : screenExtents.bottom;
+        const scale = Math.abs(projectedDelta);
+        return projectedDelta >= 0 ? [negativeScreenExtent / scale, positiveScreenExtent / scale] : [positiveScreenExtent / scale, negativeScreenExtent / scale];
+      });
+      const constrainedTarget = target.slice();
+      const targetDimensions = [maxBoundsRect.width, maxBoundsRect.height];
+      for (const [index, [negativeExtent, positiveExtent]] of worldExtents.entries()) {
+        if (targetDimensions[index] < 0) {
+          continue;
+        }
+        const { minimum, maximum, midpoint, settledTarget } = getAxisBounds(
+          maxBounds,
+          index,
+          negativeExtent,
+          positiveExtent,
+          target[index]
+        );
+        if ((constraintContext == null ? void 0 : constraintContext.mode) !== "preserve" && rubberBand && (!Number.isFinite(negativeExtent) || !Number.isFinite(positiveExtent))) {
+          constrainedTarget[index] = midpoint;
+          continue;
+        }
+        const constrained = rubberBand ? settledTarget : (0, import_core8.clamp)(target[index], minimum, maximum);
+        constrainedTarget[index] = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? target[index] : shouldRubberBand ? applyRubberBand(
+          target[index],
+          constrained,
+          (index === 0 ? maxBoundsRect.width : maxBoundsRect.height) / 2 / Math.abs(pixelsPerUnit[index])
+        ) : constrained;
+      }
+      if (constrainedTarget[0] !== target[0] || constrainedTarget[1] !== target[1]) {
+        props.target = constrainedTarget;
+      }
+    }
+    return props;
+  }
+  _constrainZoom({ zoomX, zoomY }, props) {
+    props ||= this.getViewportProps();
+    const { zoomAxis, maxZoomX, maxZoomY, maxBounds } = props;
+    let { minZoomX, minZoomY } = props;
+    const shouldApplyMaxBounds = maxBounds !== null && props.width > 0 && props.height > 0;
+    if (shouldApplyMaxBounds) {
+      const maxBoundsRect = getMaxBoundsRect(props.width, props.height, props.maxBoundsPadding);
+      const bl = maxBounds[0];
+      const tr = maxBounds[1];
+      const w = tr[0] - bl[0];
+      const h = tr[1] - bl[1];
+      if (maxBoundsRect.width > 0 && Number.isFinite(w) && w > 0) {
+        minZoomX = Math.max(minZoomX, Math.log2(maxBoundsRect.width / w));
+        if (minZoomX > maxZoomX) minZoomX = maxZoomX;
+      }
+      if (maxBoundsRect.height > 0 && Number.isFinite(h) && h > 0) {
+        minZoomY = Math.max(minZoomY, Math.log2(maxBoundsRect.height / h));
+        if (minZoomY > maxZoomY) minZoomY = maxZoomY;
+      }
+    }
+    switch (zoomAxis) {
+      case "X":
+        zoomX = (0, import_core8.clamp)(zoomX, minZoomX, maxZoomX);
+        break;
+      case "Y":
+        zoomY = (0, import_core8.clamp)(zoomY, minZoomY, maxZoomY);
+        break;
+      default:
+        let delta = Math.min(maxZoomX - zoomX, maxZoomY - zoomY, 0);
+        if (delta === 0) {
+          delta = Math.max(minZoomX - zoomX, minZoomY - zoomY, 0);
+        }
+        if (delta !== 0) {
+          zoomX += delta;
+          zoomY += delta;
+        }
+    }
+    return { zoomX, zoomY };
+  }
+};
+var OrthographicController = class extends Controller {
+  constructor() {
+    super(...arguments);
+    this.ControllerState = OrthographicState;
+    this.transition = {
+      transitionDuration: 300,
+      transitionInterpolator: new LinearInterpolator(["target", "zoomX", "zoomY"])
+    };
+    this.dragMode = "pan";
+  }
+  setProps(props) {
+    Object.assign(props, normalizeZoom(props));
+    super.setProps(props);
+  }
+  _onMultiPanStart(event) {
+    return this.multiTouchDrag === "pan" && super._onMultiPanStart(event);
+  }
+  _onPanRotate() {
+    return false;
+  }
+};
+
+// ../core/src/views/orthographic-view.ts
+var OrthographicView = class extends View {
+  constructor(props = {}) {
+    super(props);
+  }
+  getViewportType() {
+    return OrthographicViewport;
+  }
+  get ControllerType() {
+    return OrthographicController;
+  }
+};
+OrthographicView.displayName = "OrthographicView";
+
+// ../core/src/transitions/fly-to-interpolator.ts
+var import_core9 = require("@math.gl/core");
+var import_web_mercator6 = require("@math.gl/web-mercator");
+var LINEARLY_INTERPOLATED_PROPS = {
+  bearing: 0,
+  pitch: 0,
+  position: [0, 0, 0]
+};
+var DEFAULT_OPTS = {
+  speed: 1.2,
+  curve: 1.414
+};
+var FlyToInterpolator = class extends TransitionInterpolator {
+  constructor(opts = {}) {
+    super({
+      compare: ["longitude", "latitude", "zoom", "bearing", "pitch", "position"],
+      extract: ["width", "height", "longitude", "latitude", "zoom", "bearing", "pitch", "position"],
+      required: ["width", "height", "latitude", "longitude", "zoom"]
+    });
+    this.opts = { ...DEFAULT_OPTS, ...opts };
+  }
+  interpolateProps(startProps, endProps, t) {
+    const viewport = (0, import_web_mercator6.flyToViewport)(startProps, endProps, t, this.opts);
+    for (const key in LINEARLY_INTERPOLATED_PROPS) {
+      viewport[key] = (0, import_core9.lerp)(
+        startProps[key] || LINEARLY_INTERPOLATED_PROPS[key],
+        endProps[key] || LINEARLY_INTERPOLATED_PROPS[key],
+        t
+      );
+    }
+    return viewport;
+  }
+  // computes the transition duration
+  getDuration(startProps, endProps) {
+    let { transitionDuration } = endProps;
+    if (transitionDuration === "auto") {
+      transitionDuration = (0, import_web_mercator6.getFlyToDuration)(startProps, endProps, this.opts);
+    }
+    return transitionDuration;
+  }
+};
 
 // dist/zoom-widget.js
-var import_jsx_runtime3 = require("preact/jsx-runtime");
-var import_core = require("@deck.gl/core");
 var import_preact = require("preact");
 
 // dist/lib/components/button-group.js
@@ -71,8 +3220,8 @@ var ButtonGroup = (props) => {
 };
 
 // dist/lib/components/icon-button.js
-var import_jsx_runtime2 = require("preact/jsx-runtime");
-var import_hooks = require("preact/hooks");
+var import_jsx_runtime3 = require("preact/jsx-runtime");
+var import_hooks2 = require("preact/hooks");
 
 // dist/lib/data-url.js
 function getCSSMask(imageUrl) {
@@ -82,20 +3231,87 @@ function getCSSMask(imageUrl) {
   return { maskImage: cssUrl, WebkitMaskImage: cssUrl };
 }
 
+// dist/lib/components/tooltip.js
+var import_jsx_runtime2 = require("preact/jsx-runtime");
+var import_hooks = require("preact/hooks");
+var import_dom = require("@floating-ui/dom");
+var Tooltip = ({ content, placement = "right", children }) => {
+  const wrapperRef = (0, import_hooks.useRef)(null);
+  const tooltipRef = (0, import_hooks.useRef)(null);
+  const [visible, setVisible] = (0, import_hooks.useState)(false);
+  const delayRef = (0, import_hooks.useRef)();
+  const show = (0, import_hooks.useCallback)(() => {
+    clearTimeout(delayRef.current);
+    setVisible(true);
+  }, []);
+  const hide = (0, import_hooks.useCallback)(() => {
+    clearTimeout(delayRef.current);
+    setVisible(false);
+  }, []);
+  const onKeyDown = (0, import_hooks.useCallback)((e) => {
+    if (e.key === "Escape")
+      hide();
+  }, [hide]);
+  (0, import_hooks.useEffect)(() => {
+    var _a;
+    const tooltip = tooltipRef.current;
+    const trigger = (_a = wrapperRef.current) == null ? void 0 : _a.firstElementChild;
+    if (!visible || !tooltip || !trigger)
+      return void 0;
+    const updatePosition = () => {
+      (0, import_dom.computePosition)(trigger, tooltip, {
+        placement,
+        strategy: "fixed",
+        middleware: [(0, import_dom.offset)(8), (0, import_dom.flip)(), (0, import_dom.shift)({ padding: 4 })]
+      }).then(({ x, y }) => {
+        if (tooltipRef.current === tooltip) {
+          Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px`, opacity: "1" });
+        }
+      });
+    };
+    return (0, import_dom.autoUpdate)(trigger, tooltip, updatePosition);
+  }, [visible, placement]);
+  (0, import_hooks.useEffect)(() => {
+    return () => clearTimeout(delayRef.current);
+  }, []);
+  const htmlRef = (0, import_hooks.useCallback)((el) => {
+    if (el && content instanceof HTMLElement) {
+      el.replaceChildren(content.cloneNode(true));
+    }
+  }, [content]);
+  const renderContent = () => {
+    if (content instanceof HTMLElement) {
+      return (0, import_jsx_runtime2.jsx)("div", { ref: htmlRef });
+    }
+    return content;
+  };
+  if (content === null || content === void 0 || content === false || content === "") {
+    return (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  }
+  return (0, import_jsx_runtime2.jsxs)("div", { ref: wrapperRef, className: "deck-widget-tooltip-trigger", onPointerEnter: show, onPointerLeave: hide, onFocusCapture: show, onBlurCapture: hide, onKeyDown, children: [children, visible && (0, import_jsx_runtime2.jsx)("div", { ref: tooltipRef, className: "deck-widget-tooltip", role: "tooltip", style: {
+    position: "fixed",
+    opacity: 0,
+    fontSize: "12px",
+    padding: "4px 8px"
+  }, children: renderContent() })] });
+};
+
 // dist/lib/components/icon-button.js
 var IconButton = (props) => {
-  const { className = "", style, color, icon, label, onClick, children } = props;
-  const iconStyle = (0, import_hooks.useMemo)(() => {
+  const { className = "", style, color, icon, label, tooltip, onClick, children } = props;
+  const tooltipContent = tooltip === false ? void 0 : tooltip ?? label;
+  const iconStyle = (0, import_hooks2.useMemo)(() => {
     const css = getCSSMask(icon);
     if (!color)
       return css;
     return { ...css, backgroundColor: color };
   }, [color, icon]);
-  return (0, import_jsx_runtime2.jsx)("div", { className: "deck-widget-button", style, children: (0, import_jsx_runtime2.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, title: label, children: children ? children : (0, import_jsx_runtime2.jsx)("div", { className: "deck-widget-icon", style: iconStyle }) }) });
+  const button = (0, import_jsx_runtime3.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, "aria-label": label, children: children ? children : (0, import_jsx_runtime3.jsx)("div", { className: "deck-widget-icon", style: iconStyle }) });
+  return (0, import_jsx_runtime3.jsx)("div", { className: "deck-widget-button", style, children: tooltipContent ? (0, import_jsx_runtime3.jsx)(Tooltip, { content: tooltipContent, children: button }) : button });
 };
 
 // dist/zoom-widget.js
-var ZoomWidget = class extends import_core.Widget {
+var ZoomWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-zoom";
@@ -108,13 +3324,13 @@ var ZoomWidget = class extends import_core.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    const ui = (0, import_jsx_runtime3.jsxs)(ButtonGroup, { orientation: this.props.orientation, children: [(0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), (0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] });
+    const ui = (0, import_jsx_runtime4.jsxs)(ButtonGroup, { orientation: this.props.orientation, children: [(0, import_jsx_runtime4.jsx)(IconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, tooltip: this.props.zoomInTooltip, className: "deck-widget-zoom-in" }), (0, import_jsx_runtime4.jsx)(IconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, tooltip: this.props.zoomOutTooltip, className: "deck-widget-zoom-out" })] });
     (0, import_preact.render)(ui, rootElement);
   }
   isOrthographicView(viewId) {
     const deck = this.deck;
     const view = (deck == null ? void 0 : deck.isInitialized) && deck.getView(viewId);
-    return view instanceof import_core.OrthographicView;
+    return view instanceof OrthographicView;
   }
   handleZoom(viewId, delta) {
     var _a, _b, _c, _d;
@@ -126,13 +3342,13 @@ var ZoomWidget = class extends import_core.Widget {
       let nextZoom;
       let nextZoomY;
       if (zoomAxis === "X") {
-        nextZoom = clamp(zoomX + delta, minZoomX, maxZoomX);
+        nextZoom = clamp5(zoomX + delta, minZoomX, maxZoomX);
         nextZoomY = zoomY;
       } else if (zoomAxis === "Y") {
         nextZoom = zoomX;
-        nextZoomY = clamp(zoomY + delta, minZoomY, maxZoomY);
+        nextZoomY = clamp5(zoomY + delta, minZoomY, maxZoomY);
       } else {
-        const clampedDelta = clamp(delta, Math.max(minZoomX - zoomX, minZoomY - zoomY), Math.min(maxZoomX - zoomX, maxZoomY - zoomY));
+        const clampedDelta = clamp5(delta, Math.max(minZoomX - zoomX, minZoomY - zoomY), Math.min(maxZoomX - zoomX, maxZoomY - zoomY));
         nextZoom = zoomX + clampedDelta;
         nextZoomY = zoomY + clampedDelta;
       }
@@ -149,7 +3365,7 @@ var ZoomWidget = class extends import_core.Widget {
       });
     } else {
       const { zoom = 0, minZoom, maxZoom } = viewState;
-      const nextZoom = clamp(zoom + delta, minZoom, maxZoom);
+      const nextZoom = clamp5(zoom + delta, minZoom, maxZoom);
       newViewState.zoom = nextZoom;
       (_d = (_c = this.props).onZoom) == null ? void 0 : _d.call(_c, {
         viewId,
@@ -163,7 +3379,7 @@ var ZoomWidget = class extends import_core.Widget {
     };
     if (this.props.transitionDuration > 0) {
       nextViewState.transitionDuration = this.props.transitionDuration;
-      nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core.FlyToInterpolator() : new import_core.LinearInterpolator({
+      nextViewState.transitionInterpolator = "latitude" in nextViewState ? new FlyToInterpolator() : new LinearInterpolator({
         transitionProps: "zoomX" in newViewState ? ["zoomX", "zoomY"] : ["zoom"]
       });
     }
@@ -181,7 +3397,7 @@ var ZoomWidget = class extends import_core.Widget {
   }
 };
 ZoomWidget.defaultProps = {
-  ...import_core.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "zoom",
   placement: "top-left",
   orientation: "vertical",
@@ -189,12 +3405,14 @@ ZoomWidget.defaultProps = {
   zoomStep: 1,
   zoomInLabel: "Zoom In",
   zoomOutLabel: "Zoom Out",
+  zoomInTooltip: void 0,
+  zoomOutTooltip: void 0,
   zoomAxis: "all",
   viewId: null,
   onZoom: () => {
   }
 };
-function clamp(zoom, minZoom, maxZoom) {
+function clamp5(zoom, minZoom, maxZoom) {
   return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
 }
 function normalizeOrthographicViewState({ zoom = 0, zoomX, zoomY, minZoom = -Infinity, maxZoom = Infinity, minZoomX = minZoom, maxZoomX = maxZoom, minZoomY = minZoom, maxZoomY = maxZoom }) {
@@ -204,10 +3422,9 @@ function normalizeOrthographicViewState({ zoom = 0, zoomX, zoomY, minZoom = -Inf
 }
 
 // dist/reset-view-widget.js
-var import_jsx_runtime4 = require("preact/jsx-runtime");
+var import_jsx_runtime5 = require("preact/jsx-runtime");
 var import_preact2 = require("preact");
-var import_core2 = require("@deck.gl/core");
-var ResetViewWidget = class extends import_core2.Widget {
+var ResetViewWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-reset-view";
@@ -220,7 +3437,7 @@ var ResetViewWidget = class extends import_core2.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    (0, import_preact2.render)((0, import_jsx_runtime4.jsx)(IconButton, { className: "deck-widget-reset-focus", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
+    (0, import_preact2.render)((0, import_jsx_runtime5.jsx)(IconButton, { className: "deck-widget-reset-focus", label: this.props.label, tooltip: this.props.tooltip, onClick: this.handleClick.bind(this) }), rootElement);
   }
   handleClick() {
     var _a;
@@ -242,10 +3459,11 @@ var ResetViewWidget = class extends import_core2.Widget {
   }
 };
 ResetViewWidget.defaultProps = {
-  ...import_core2.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "reset-view",
   placement: "top-left",
   label: "Reset View",
+  tooltip: void 0,
   initialViewState: void 0,
   viewId: null,
   onReset: () => {
@@ -253,10 +3471,9 @@ ResetViewWidget.defaultProps = {
 };
 
 // dist/gimbal-widget.js
-var import_jsx_runtime5 = require("preact/jsx-runtime");
-var import_core3 = require("@deck.gl/core");
+var import_jsx_runtime6 = require("preact/jsx-runtime");
 var import_preact3 = require("preact");
-var GimbalWidget = class extends import_core3.Widget {
+var GimbalWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-gimbal";
@@ -274,21 +3491,22 @@ var GimbalWidget = class extends import_core3.Widget {
     const viewId = this.viewId || ((_a = Object.values(this.viewports)[0]) == null ? void 0 : _a.id) || "default-view";
     const widgetViewport = this.viewports[viewId];
     const { rotationOrbit, rotationX } = this.getNormalizedRotation(widgetViewport);
-    const ui = (0, import_jsx_runtime5.jsx)("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: (0, import_jsx_runtime5.jsxs)("button", { type: "button", onClick: () => {
+    const tooltipContent = this.props.tooltip === false ? void 0 : this.props.tooltip ?? this.props.label;
+    const ui = (0, import_jsx_runtime6.jsx)("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: (0, import_jsx_runtime6.jsx)(Tooltip, { content: tooltipContent, children: (0, import_jsx_runtime6.jsxs)("button", { type: "button", onClick: () => {
       for (const viewport of Object.values(this.viewports)) {
         this.resetOrbitView(viewport);
       }
-    }, title: this.props.label, style: { position: "relative", width: 26, height: 26 }, children: [(0, import_jsx_runtime5.jsx)("svg", { className: "gimbal-outer-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
+    }, "aria-label": this.props.label, style: { position: "relative", width: 26, height: 26 }, children: [(0, import_jsx_runtime6.jsx)("svg", { className: "gimbal-outer-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
       position: "absolute",
       top: 0,
       left: 0,
       transform: `rotateY(${rotationOrbit}deg)`
-    }, children: (0, import_jsx_runtime5.jsx)("circle", { cx: "13", cy: "13", r: "10", stroke: "var(--icon-gimbal-outer-color, rgb(68, 92, 204))", strokeWidth: this.props.strokeWidth, fill: "none" }) }), (0, import_jsx_runtime5.jsx)("svg", { className: "gimbal-inner-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
+    }, children: (0, import_jsx_runtime6.jsx)("circle", { cx: "13", cy: "13", r: "10", stroke: "var(--icon-gimbal-outer-color, rgb(68, 92, 204))", strokeWidth: this.props.strokeWidth, fill: "none" }) }), (0, import_jsx_runtime6.jsx)("svg", { className: "gimbal-inner-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
       position: "absolute",
       top: 0,
       left: 0,
       transform: `rotateX(${rotationX}deg)`
-    }, children: (0, import_jsx_runtime5.jsx)("circle", { cx: "13", cy: "13", r: "7", stroke: "var(--icon-gimbal-inner-color, rgb(240, 92, 68))", strokeWidth: this.props.strokeWidth, fill: "none" }) })] }) });
+    }, children: (0, import_jsx_runtime6.jsx)("circle", { cx: "13", cy: "13", r: "7", stroke: "var(--icon-gimbal-inner-color, rgb(240, 92, 68))", strokeWidth: this.props.strokeWidth, fill: "none" }) })] }) }) });
     (0, import_preact3.render)(ui, rootElement);
   }
   onViewportChange(viewport) {
@@ -306,7 +3524,7 @@ var GimbalWidget = class extends import_core3.Widget {
         rotationOrbit: 0,
         rotationX: 0,
         transitionDuration: this.props.transitionDuration,
-        transitionInterpolator: new import_core3.LinearInterpolator({
+        transitionInterpolator: new LinearInterpolator({
           transitionProps: ["rotationOrbit", "rotationX"]
         })
       };
@@ -329,11 +3547,12 @@ var GimbalWidget = class extends import_core3.Widget {
   }
 };
 GimbalWidget.defaultProps = {
-  ...import_core3.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "gimbal",
   placement: "top-left",
   viewId: null,
   label: "Gimbal",
+  tooltip: void 0,
   strokeWidth: 1.5,
   transitionDuration: 200,
   onReset: () => {
@@ -354,10 +3573,9 @@ function normalizeAndClampAngle(angle) {
 }
 
 // dist/compass-widget.js
-var import_jsx_runtime6 = require("preact/jsx-runtime");
-var import_core4 = require("@deck.gl/core");
+var import_jsx_runtime7 = require("preact/jsx-runtime");
 var import_preact4 = require("preact");
-var CompassWidget = class extends import_core4.Widget {
+var CompassWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-compass";
@@ -375,11 +3593,12 @@ var CompassWidget = class extends import_core4.Widget {
     const viewId = this.viewId || ((_a = Object.values(this.viewports)[0]) == null ? void 0 : _a.id);
     const widgetViewport = this.viewports[viewId];
     const [rz, rx] = this.getRotation(widgetViewport);
-    const ui = (0, import_jsx_runtime6.jsx)("div", { className: "deck-widget-button", style: { perspective: 100 }, children: (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: () => {
+    const tooltipContent = this.props.tooltip === false ? void 0 : this.props.tooltip ?? this.props.label;
+    const ui = (0, import_jsx_runtime7.jsx)("div", { className: "deck-widget-button", style: { perspective: 100 }, children: (0, import_jsx_runtime7.jsx)(Tooltip, { content: tooltipContent, children: (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => {
       for (const viewport of Object.values(this.viewports)) {
         this.handleCompassReset(viewport);
       }
-    }, title: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: (0, import_jsx_runtime6.jsx)("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: (0, import_jsx_runtime6.jsxs)("g", { transform: `rotate(${rz},13,13)`, children: [(0, import_jsx_runtime6.jsx)("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, rgb(240, 92, 68))" }), (0, import_jsx_runtime6.jsx)("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, rgb(204, 204, 204))" })] }) }) }) });
+    }, "aria-label": this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: (0, import_jsx_runtime7.jsx)("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: (0, import_jsx_runtime7.jsxs)("g", { transform: `rotate(${rz},13,13)`, children: [(0, import_jsx_runtime7.jsx)("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, rgb(240, 92, 68))" }), (0, import_jsx_runtime7.jsx)("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, rgb(204, 204, 204))" })] }) }) }) }) });
     (0, import_preact4.render)(ui, rootElement);
   }
   onViewportChange(viewport) {
@@ -389,9 +3608,9 @@ var CompassWidget = class extends import_core4.Widget {
     }
   }
   getRotation(viewport) {
-    if (viewport instanceof import_core4.WebMercatorViewport) {
+    if (viewport instanceof WebMercatorViewport) {
       return [-viewport.bearing, viewport.pitch];
-    } else if (viewport instanceof import_core4._GlobeViewport) {
+    } else if (viewport instanceof GlobeViewport) {
       return [0, Math.max(-80, Math.min(80, viewport.latitude))];
     }
     return [0, 0];
@@ -399,7 +3618,7 @@ var CompassWidget = class extends import_core4.Widget {
   handleCompassReset(viewport) {
     var _a, _b;
     const viewId = this.viewId || viewport.id;
-    if (viewport instanceof import_core4.WebMercatorViewport) {
+    if (viewport instanceof WebMercatorViewport) {
       const viewState = this.getViewState(viewId);
       const resetPitch = this.getRotation(viewport)[0] === 0;
       const nextBearing = 0;
@@ -410,28 +3629,28 @@ var CompassWidget = class extends import_core4.Widget {
         bearing: nextBearing,
         ...resetPitch ? { pitch: nextPitch } : {},
         transitionDuration: this.props.transitionDuration,
-        transitionInterpolator: new import_core4.FlyToInterpolator()
+        transitionInterpolator: new FlyToInterpolator()
       };
       this.setViewState(viewId, nextViewState);
     }
   }
 };
 CompassWidget.defaultProps = {
-  ...import_core4.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "compass",
   placement: "top-left",
   viewId: null,
   label: "Reset Compass",
+  tooltip: void 0,
   transitionDuration: 200,
   onReset: () => {
   }
 };
 
 // dist/scale-widget.js
-var import_jsx_runtime7 = require("preact/jsx-runtime");
+var import_jsx_runtime8 = require("preact/jsx-runtime");
 var import_preact5 = require("preact");
-var import_core5 = require("@deck.gl/core");
-var ScaleWidget = class extends import_core5.Widget {
+var ScaleWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-scale";
@@ -450,7 +3669,7 @@ var ScaleWidget = class extends import_core5.Widget {
     const lineOffsetX = 50;
     const svgWidth = lineOffsetX + this.scaleWidth;
     const tickHeight = 10;
-    (0, import_preact5.render)((0, import_jsx_runtime7.jsxs)("svg", { className: "deck-widget-scale", width: svgWidth, height: 30, style: { overflow: "visible", background: "transparent" }, onClick: this.handleClick.bind(this), children: [(0, import_jsx_runtime7.jsx)("text", { x: lineOffsetX + 5, y: "10", textAnchor: "end", alignmentBaseline: "middle", style: { fontSize: "16px", fill: "black", fontWeight: "bold", fontFamily: "sans-serif" }, children: this.scaleText }), (0, import_jsx_runtime7.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: "15", stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime7.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime7.jsx)("line", { x1: lineOffsetX + this.scaleWidth, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" })] }), rootElement);
+    (0, import_preact5.render)((0, import_jsx_runtime8.jsxs)("svg", { className: "deck-widget-scale", width: svgWidth, height: 30, style: { overflow: "visible", background: "transparent" }, onClick: this.handleClick.bind(this), children: [(0, import_jsx_runtime8.jsx)("text", { x: lineOffsetX + 5, y: "10", textAnchor: "end", alignmentBaseline: "middle", style: { fontSize: "16px", fill: "black", fontWeight: "bold", fontFamily: "sans-serif" }, children: this.scaleText }), (0, import_jsx_runtime8.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: "15", stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime8.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime8.jsx)("line", { x1: lineOffsetX + this.scaleWidth, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" })] }), rootElement);
   }
   onViewportChange(viewport) {
     if (!("latitude" in viewport))
@@ -471,7 +3690,7 @@ var ScaleWidget = class extends import_core5.Widget {
   }
 };
 ScaleWidget.defaultProps = {
-  ...import_core5.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "scale",
   placement: "bottom-left",
   label: "Scale",
@@ -513,14 +3732,12 @@ function computeScaleCandidate(metersPerPixel) {
 }
 
 // dist/geocoder-widget.js
-var import_jsx_runtime9 = require("preact/jsx-runtime");
-var import_core6 = require("@deck.gl/core");
-var import_core7 = require("@deck.gl/core");
+var import_jsx_runtime10 = require("preact/jsx-runtime");
 var import_preact6 = require("preact");
 
 // dist/lib/components/dropdown-menu.js
-var import_jsx_runtime8 = require("preact/jsx-runtime");
-var import_hooks2 = require("preact/hooks");
+var import_jsx_runtime9 = require("preact/jsx-runtime");
+var import_hooks3 = require("preact/hooks");
 function getMenuItemValue(item) {
   return typeof item === "string" ? item : item.value;
 }
@@ -531,12 +3748,12 @@ function getMenuItemIcon(item) {
   return typeof item === "string" ? void 0 : item.icon;
 }
 var DropdownMenu = (props) => {
-  const [isOpen, setIsOpen] = (0, import_hooks2.useState)(false);
-  return (0, import_jsx_runtime8.jsx)(SimpleMenu, { ...props, style: { ...props.style, position: "absolute" }, isOpen, onClose: () => setIsOpen(false), trigger: (0, import_jsx_runtime8.jsx)("button", { className: "deck-widget-dropdown-button", onClick: () => setIsOpen(!isOpen), children: (0, import_jsx_runtime8.jsx)("span", { className: `deck-widget-dropdown-icon ${isOpen ? "open" : ""}` }) }) });
+  const [isOpen, setIsOpen] = (0, import_hooks3.useState)(false);
+  return (0, import_jsx_runtime9.jsx)(SimpleMenu, { ...props, style: { ...props.style, position: "absolute" }, isOpen, onClose: () => setIsOpen(false), trigger: (0, import_jsx_runtime9.jsx)("button", { className: "deck-widget-dropdown-button", onClick: () => setIsOpen(!isOpen), children: (0, import_jsx_runtime9.jsx)("span", { className: `deck-widget-dropdown-icon ${isOpen ? "open" : ""}` }) }) });
 };
 var SimpleMenu = (props) => {
-  const dropdownRef = (0, import_hooks2.useRef)(null);
-  (0, import_hooks2.useEffect)(() => {
+  const dropdownRef = (0, import_hooks3.useRef)(null);
+  (0, import_hooks3.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         props.onClose();
@@ -560,10 +3777,10 @@ var SimpleMenu = (props) => {
   if (props.menuItems.length === 0) {
     return null;
   }
-  return (0, import_jsx_runtime8.jsxs)("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, children: [props.trigger, props.isOpen && (0, import_jsx_runtime8.jsx)("ul", { className: "deck-widget-dropdown-menu", style: props.style, children: props.menuItems.map((item, i) => {
+  return (0, import_jsx_runtime9.jsxs)("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, children: [props.trigger, props.isOpen && (0, import_jsx_runtime9.jsx)("ul", { className: "deck-widget-dropdown-menu", style: props.style, children: props.menuItems.map((item, i) => {
     const value = getMenuItemValue(item);
     const icon = getMenuItemIcon(item);
-    return (0, import_jsx_runtime8.jsxs)("li", { className: `deck-widget-dropdown-item ${value ? "" : "disabled"}`, onClick: () => handleSelect(value, item), children: [icon && (0, import_jsx_runtime8.jsx)("span", { className: "deck-widget-dropdown-item-icon", style: getCSSMask(icon) }), getMenuItemLabel(item)] }, i);
+    return (0, import_jsx_runtime9.jsxs)("li", { className: `deck-widget-dropdown-item ${value ? "" : "disabled"}`, onClick: () => handleSelect(value, item), children: [icon && (0, import_jsx_runtime9.jsx)("span", { className: "deck-widget-dropdown-item-icon", style: getCSSMask(icon) }), getMenuItemLabel(item)] }, i);
   }) })] });
 };
 
@@ -770,7 +3987,7 @@ var CURRENT_LOCATION_ITEM = {
   value: CURRENT_LOCATION2,
   icon: LOCATION_ICON
 };
-var GeocoderWidget = class extends import_core6.Widget {
+var GeocoderWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-geocoder";
@@ -839,7 +4056,7 @@ var GeocoderWidget = class extends import_core6.Widget {
   }
   onRenderHTML(rootElement) {
     const menuItems = this.props._geolocation ? [CURRENT_LOCATION_ITEM, ...this.geocodeHistory.addressHistory] : [...this.geocodeHistory.addressHistory];
-    (0, import_preact6.render)((0, import_jsx_runtime9.jsxs)("div", { className: "deck-widget-geocoder", children: [(0, import_jsx_runtime9.jsx)("input", {
+    (0, import_preact6.render)((0, import_jsx_runtime10.jsxs)("div", { className: "deck-widget-geocoder", children: [(0, import_jsx_runtime10.jsx)("input", {
       className: "deck-widget-geocoder-input",
       type: "text",
       placeholder: this.isGettingLocation ? "Finding your location..." : this.geocoder.placeholderLocation ?? "Enter address or location",
@@ -850,7 +4067,7 @@ var GeocoderWidget = class extends import_core6.Widget {
         return this.setInput(((_a = e.target) == null ? void 0 : _a.value) || "");
       },
       onKeyPress: this.handleKeyPress
-    }), (0, import_jsx_runtime9.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect }), this.geocodeHistory.errorText && (0, import_jsx_runtime9.jsx)("div", { className: "deck-widget-geocoder-error", children: this.geocodeHistory.errorText })] }), rootElement);
+    }), (0, import_jsx_runtime10.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect }), this.geocodeHistory.errorText && (0, import_jsx_runtime10.jsx)("div", { className: "deck-widget-geocoder-error", children: this.geocodeHistory.errorText })] }), rootElement);
   }
   flyTo(viewState) {
     var _a, _b;
@@ -872,14 +4089,14 @@ var GeocoderWidget = class extends import_core6.Widget {
       };
       if (this.props.transitionDuration > 0) {
         nextViewState.transitionDuration = this.props.transitionDuration;
-        nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core7.FlyToInterpolator() : new import_core7.LinearInterpolator();
+        nextViewState.transitionInterpolator = "latitude" in nextViewState ? new FlyToInterpolator() : new LinearInterpolator();
       }
       this.setViewState(viewId, nextViewState);
     }
   }
 };
 GeocoderWidget.defaultProps = {
-  ...import_core6.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "geocoder",
   viewId: null,
   placement: "top-left",
@@ -913,10 +4130,9 @@ function getGeocoder(props) {
 }
 
 // dist/fullscreen-widget.js
-var import_jsx_runtime10 = require("preact/jsx-runtime");
-var import_core8 = require("@deck.gl/core");
+var import_jsx_runtime11 = require("preact/jsx-runtime");
 var import_preact7 = require("preact");
-var FullscreenWidget = class extends import_core8.Widget {
+var FullscreenWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-fullscreen";
@@ -932,9 +4148,9 @@ var FullscreenWidget = class extends import_core8.Widget {
   }
   onRenderHTML(rootElement) {
     const isFullscreen = this.getFullscreen();
-    (0, import_preact7.render)((0, import_jsx_runtime10.jsx)(IconButton, { onClick: () => {
-      this.handleClick().catch((err) => import_core8.log.error(err)());
-    }, label: isFullscreen ? this.props.exitLabel : this.props.enterLabel, className: isFullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
+    (0, import_preact7.render)((0, import_jsx_runtime11.jsx)(IconButton, { onClick: () => {
+      this.handleClick().catch((err) => log_default.error(err)());
+    }, label: isFullscreen ? this.props.exitLabel : this.props.enterLabel, tooltip: isFullscreen ? this.props.exitTooltip : this.props.enterTooltip, className: isFullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
   }
   setProps(props) {
     this.placement = props.placement ?? this.placement;
@@ -989,29 +4205,29 @@ var FullscreenWidget = class extends import_core8.Widget {
   }
 };
 FullscreenWidget.defaultProps = {
-  ...import_core8.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "fullscreen",
   placement: "top-left",
   viewId: null,
   enterLabel: "Enter Fullscreen",
   exitLabel: "Exit Fullscreen",
+  enterTooltip: void 0,
+  exitTooltip: void 0,
   container: void 0,
   onFullscreenChange: () => {
   }
 };
 
 // dist/splitter-widget.js
-var import_jsx_runtime11 = require("preact/jsx-runtime");
+var import_jsx_runtime12 = require("preact/jsx-runtime");
 var import_preact8 = require("preact");
-var import_hooks3 = require("preact/hooks");
-var import_core10 = require("@deck.gl/core");
+var import_hooks4 = require("preact/hooks");
 
 // dist/view-layout/view-layout.js
-var import_core9 = require("@deck.gl/core");
 var VIEW_LAYOUT_TYPES = /* @__PURE__ */ new Set(["row", "column", "overlay", "spacer"]);
 var VIEW_LAYOUT_ORIENTATIONS = /* @__PURE__ */ new Set(["horizontal", "vertical"]);
 function isViewLayout(child) {
-  return Boolean(child && typeof child === "object" && !(child instanceof import_core9.View) && ("type" in child && VIEW_LAYOUT_TYPES.has(String(child.type)) || "orientation" in child && VIEW_LAYOUT_ORIENTATIONS.has(String(child.orientation))));
+  return Boolean(child && typeof child === "object" && !(child instanceof View) && ("type" in child && VIEW_LAYOUT_TYPES.has(String(child.type)) || "orientation" in child && VIEW_LAYOUT_ORIENTATIONS.has(String(child.orientation))));
 }
 function getViewLayoutType(item) {
   if ("orientation" in item) {
@@ -1061,7 +4277,7 @@ function assertViewLayoutChild(child) {
     assertViewLayout(child);
     return;
   }
-  if (child instanceof import_core9.View) {
+  if (child instanceof View) {
     return;
   }
   throw new Error("ViewLayout children must be deck.gl View instances or layout objects.");
@@ -1563,7 +4779,7 @@ function evaluateViews(layout, viewLayouts, splitValues) {
     height: `${view.props.height}%`
   }));
 }
-var SplitterWidget = class extends import_core10.Widget {
+var SplitterWidget = class extends Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-splitter";
@@ -1573,7 +4789,7 @@ var SplitterWidget = class extends import_core10.Widget {
     this.updateViewLayout(this.props.viewLayout);
   }
   setProps(props) {
-    if (props.viewLayout && !(0, import_core10._deepEqual)(props.viewLayout, this.props.viewLayout, -1)) {
+    if (props.viewLayout && !deepEqual(props.viewLayout, this.props.viewLayout, -1)) {
       this.updateViewLayout(props.viewLayout);
       this.views = void 0;
     }
@@ -1621,11 +4837,11 @@ var SplitterWidget = class extends import_core10.Widget {
     this.doUpdate();
   }
   onRenderHTML(rootElement) {
-    (0, import_preact8.render)((0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: this.viewLayouts.map((layout) => layout.editable && (0, import_jsx_runtime11.jsx)(Splitter, { ...layout, onChange: (newSplit) => this.onChange(newSplit, layout), onDragStart: () => this.props.onDragStart(), onDragEnd: () => this.props.onDragStart() })) }), rootElement);
+    (0, import_preact8.render)((0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: this.viewLayouts.map((layout) => layout.editable && (0, import_jsx_runtime12.jsx)(Splitter, { ...layout, onChange: (newSplit) => this.onChange(newSplit, layout), onDragStart: () => this.props.onDragStart(), onDragEnd: () => this.props.onDragStart() })) }), rootElement);
   }
 };
 SplitterWidget.defaultProps = {
-  ...import_core10.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "splitter-widget",
   viewLayout: void 0,
   onChange: () => {
@@ -1636,9 +4852,9 @@ SplitterWidget.defaultProps = {
   }
 };
 function Splitter({ orientation, x, y, width, height, split, minSplit, maxSplit, onChange, onDragStart, onDragEnd }) {
-  const [dragging, setDragging] = (0, import_hooks3.useState)(false);
-  const containerRef = (0, import_hooks3.useRef)(null);
-  (0, import_hooks3.useEffect)(() => {
+  const [dragging, setDragging] = (0, import_hooks4.useState)(false);
+  const containerRef = (0, import_hooks4.useRef)(null);
+  (0, import_hooks4.useEffect)(() => {
     if (!dragging) {
       return void 0;
     }
@@ -1681,33 +4897,32 @@ function Splitter({ orientation, x, y, width, height, split, minSplit, maxSplit,
     width: `${width}%`,
     height: `${height}%`
   };
-  return (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: containerStyle, children: (0, import_jsx_runtime11.jsx)("div", { className: `deck-widget-splitter-handle deck-widget-splitter-handle--${orientation} ${dragging ? "active" : ""}`, style: splitterStyle, onPointerDown: handleDragStart }) });
+  return (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: containerStyle, children: (0, import_jsx_runtime12.jsx)("div", { className: `deck-widget-splitter-handle deck-widget-splitter-handle--${orientation} ${dragging ? "active" : ""}`, style: splitterStyle, onPointerDown: handleDragStart }) });
 }
 
 // dist/info-widget.js
-var import_jsx_runtime14 = require("preact/jsx-runtime");
-var import_core11 = require("@deck.gl/core");
+var import_jsx_runtime15 = require("preact/jsx-runtime");
 var import_preact9 = require("preact");
 
 // dist/lib/components/popover.js
-var import_jsx_runtime12 = require("preact/jsx-runtime");
-var import_hooks4 = require("preact/hooks");
-var import_dom = require("@floating-ui/dom");
+var import_jsx_runtime13 = require("preact/jsx-runtime");
+var import_hooks5 = require("preact/hooks");
+var import_dom2 = require("@floating-ui/dom");
 var Popover = ({ x, y, placement = "right", offset: pixelOffset = 0, arrow: arrowSize = false, arrowColor = "white", children }) => {
-  const anchorRef = (0, import_hooks4.useRef)(null);
-  const contentRef = (0, import_hooks4.useRef)(null);
-  const arrowRef = (0, import_hooks4.useRef)(null);
-  const updaterRef = (0, import_hooks4.useRef)();
+  const anchorRef = (0, import_hooks5.useRef)(null);
+  const contentRef = (0, import_hooks5.useRef)(null);
+  const arrowRef = (0, import_hooks5.useRef)(null);
+  const updaterRef = (0, import_hooks5.useRef)();
   updaterRef.current = () => {
     if (!anchorRef.current || !contentRef.current)
       return;
     const arrowWidth = Array.isArray(arrowSize) ? arrowSize[0] : arrowSize || 0;
     const arrowHeight = Array.isArray(arrowSize) ? arrowSize[1] : arrowSize || 0;
     const padding = pixelOffset + Math.max(arrowHeight, arrowWidth);
-    const middleware = placement.includes("-") ? [(0, import_dom.offset)(padding), (0, import_dom.flip)(), (0, import_dom.shift)()] : [(0, import_dom.offset)(padding), (0, import_dom.shift)(), (0, import_dom.flip)()];
+    const middleware = placement.includes("-") ? [(0, import_dom2.offset)(padding), (0, import_dom2.flip)(), (0, import_dom2.shift)()] : [(0, import_dom2.offset)(padding), (0, import_dom2.shift)(), (0, import_dom2.flip)()];
     if (arrowRef.current)
-      middleware.push((0, import_dom.arrow)({ element: arrowRef.current }));
-    (0, import_dom.computePosition)(anchorRef.current, contentRef.current, {
+      middleware.push((0, import_dom2.arrow)({ element: arrowRef.current }));
+    (0, import_dom2.computePosition)(anchorRef.current, contentRef.current, {
       placement,
       strategy: "fixed",
       middleware
@@ -1726,18 +4941,18 @@ var Popover = ({ x, y, placement = "right", offset: pixelOffset = 0, arrow: arro
       }
     });
   };
-  (0, import_hooks4.useMemo)(() => {
+  (0, import_hooks5.useMemo)(() => {
     var _a;
     (_a = updaterRef.current) == null ? void 0 : _a.call(updaterRef);
   }, [x, y, placement, arrowSize, pixelOffset]);
-  (0, import_hooks4.useEffect)(() => {
+  (0, import_hooks5.useEffect)(() => {
     const anchor = anchorRef.current;
     const content = contentRef.current;
     if (!anchor || !content) {
       return void 0;
     }
     content.style.visibility = "visible";
-    const cleanup = (0, import_dom.autoUpdate)(anchor, content, () => {
+    const cleanup = (0, import_dom2.autoUpdate)(anchor, content, () => {
       var _a;
       return (_a = updaterRef.current) == null ? void 0 : _a.call(updaterRef);
     });
@@ -1745,7 +4960,7 @@ var Popover = ({ x, y, placement = "right", offset: pixelOffset = 0, arrow: arro
       cleanup();
     };
   }, []);
-  return (0, import_jsx_runtime12.jsx)("div", { style: { position: "absolute", left: x, top: y }, ref: anchorRef, children: (0, import_jsx_runtime12.jsxs)("div", { className: "deck-widget deck-widget-popover", style: { position: "fixed", visibility: "hidden", pointerEvents: "none" }, ref: contentRef, children: [Boolean(arrowSize) && (0, import_jsx_runtime12.jsx)("div", { className: "deck-widget-popover-arrow", style: { position: "absolute" }, ref: arrowRef }), children] }) });
+  return (0, import_jsx_runtime13.jsx)("div", { style: { position: "absolute", left: x, top: y }, ref: anchorRef, children: (0, import_jsx_runtime13.jsxs)("div", { className: "deck-widget deck-widget-popover", style: { position: "fixed", visibility: "hidden", pointerEvents: "none" }, ref: contentRef, children: [Boolean(arrowSize) && (0, import_jsx_runtime13.jsx)("div", { className: "deck-widget-popover-arrow", style: { position: "absolute" }, ref: arrowRef }), children] }) });
 };
 function createArrow(width, height, color, placement) {
   const result = {
@@ -1785,11 +5000,11 @@ function createArrow(width, height, color, placement) {
 }
 
 // dist/lib/components/user-content.js
-var import_jsx_runtime13 = require("preact/jsx-runtime");
-var import_hooks5 = require("preact/hooks");
+var import_jsx_runtime14 = require("preact/jsx-runtime");
+var import_hooks6 = require("preact/hooks");
 var UserContent = ({ text, html, element, ...props }) => {
-  const containerRef = (0, import_hooks5.useRef)(null);
-  (0, import_hooks5.useEffect)(() => {
+  const containerRef = (0, import_hooks6.useRef)(null);
+  (0, import_hooks6.useEffect)(() => {
     if (containerRef.current && element) {
       containerRef.current.append(element);
     }
@@ -1797,11 +5012,11 @@ var UserContent = ({ text, html, element, ...props }) => {
       element == null ? void 0 : element.remove();
     };
   }, [element]);
-  return (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, ...props, dangerouslySetInnerHTML: html ? { __html: html } : void 0, children: text });
+  return (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, ...props, dangerouslySetInnerHTML: html ? { __html: html } : void 0, children: text });
 };
 
 // dist/info-widget.js
-var InfoWidget = class extends import_core11.Widget {
+var InfoWidget = class extends Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-info";
@@ -1867,12 +5082,12 @@ var InfoWidget = class extends import_core11.Widget {
       ...this.tooltip.style
     };
     const [x, y] = this.viewport.project(this.tooltip.position);
-    const ui = (0, import_jsx_runtime14.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime14.jsx)(UserContent, { className: `deck-widget-popup-content ${this.tooltip.className} ${this.props.className}`, style, html: this.tooltip.html, text: this.tooltip.text, element: this.tooltip.element }) });
+    const ui = (0, import_jsx_runtime15.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime15.jsx)(UserContent, { className: `deck-widget-popup-content ${this.tooltip.className} ${this.props.className}`, style, html: this.tooltip.html, text: this.tooltip.text, element: this.tooltip.element }) });
     (0, import_preact9.render)(ui, rootElement);
   }
 };
 InfoWidget.defaultProps = {
-  ...import_core11.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "info",
   viewId: null,
   mode: "hover",
@@ -1883,10 +5098,9 @@ InfoWidget.defaultProps = {
 };
 
 // dist/popup-widget.js
-var import_jsx_runtime15 = require("preact/jsx-runtime");
-var import_core12 = require("@deck.gl/core");
+var import_jsx_runtime16 = require("preact/jsx-runtime");
 var import_preact10 = require("preact");
-var PopupWidget = class extends import_core12.Widget {
+var PopupWidget = class extends Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-popup";
@@ -1930,12 +5144,12 @@ var PopupWidget = class extends import_core12.Widget {
     }
     const { marker, content, style } = this.props;
     const [x, y] = this.viewport.project(this.props.position);
-    const ui = (0, import_jsx_runtime15.jsxs)("div", { children: [marker && (0, import_jsx_runtime15.jsx)("div", { className: "deck-widget-popup-marker", style: { left: x, top: y }, children: (0, import_jsx_runtime15.jsx)(UserContent, { ...marker, onClick: () => this._setIsOpen(true) }) }), this.isOpen && (0, import_jsx_runtime15.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime15.jsxs)("div", { className: `deck-widget-popup-content ${this.props.className}`, style, children: [this.props.closeButton && (0, import_jsx_runtime15.jsx)("div", { className: "deck-widget-popup-controls", style: { width: "100%", display: "flex", justifyContent: "end" }, children: (0, import_jsx_runtime15.jsx)(IconButton, { className: "deck-widget-popup-close-button", onClick: () => this._setIsOpen(false) }) }), (0, import_jsx_runtime15.jsx)(UserContent, { ...typeof content === "string" ? { text: content } : content })] }) })] });
+    const ui = (0, import_jsx_runtime16.jsxs)("div", { children: [marker && (0, import_jsx_runtime16.jsx)("div", { className: "deck-widget-popup-marker", style: { left: x, top: y }, children: (0, import_jsx_runtime16.jsx)(UserContent, { ...marker, onClick: () => this._setIsOpen(true) }) }), this.isOpen && (0, import_jsx_runtime16.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime16.jsxs)("div", { className: `deck-widget-popup-content ${this.props.className}`, style, children: [this.props.closeButton && (0, import_jsx_runtime16.jsx)("div", { className: "deck-widget-popup-controls", style: { width: "100%", display: "flex", justifyContent: "end" }, children: (0, import_jsx_runtime16.jsx)(IconButton, { className: "deck-widget-popup-close-button", onClick: () => this._setIsOpen(false) }) }), (0, import_jsx_runtime16.jsx)(UserContent, { ...typeof content === "string" ? { text: content } : content })] }) })] });
     (0, import_preact10.render)(ui, rootElement);
   }
 };
 PopupWidget.defaultProps = {
-  ...import_core12.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "info",
   viewId: null,
   position: [0, 0],
@@ -1952,10 +5166,9 @@ PopupWidget.defaultProps = {
 };
 
 // dist/context-menu-widget.js
-var import_jsx_runtime16 = require("preact/jsx-runtime");
-var import_core13 = require("@deck.gl/core");
+var import_jsx_runtime17 = require("preact/jsx-runtime");
 var import_preact11 = require("preact");
-var ContextMenuWidget = class extends import_core13.Widget {
+var ContextMenuWidget = class extends Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-context-menu";
@@ -2000,7 +5213,7 @@ var ContextMenuWidget = class extends import_core13.Widget {
       position: "static",
       ...this.props.style
     };
-    const ui = (0, import_jsx_runtime16.jsx)(Popover, { x: pickInfo.x, y: pickInfo.y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime16.jsx)(SimpleMenu, { menuItems: items, onSelect: (value) => this.props.onMenuItemSelected(value, pickInfo), style, isOpen: true, onClose: () => this.hide() }) });
+    const ui = (0, import_jsx_runtime17.jsx)(Popover, { x: pickInfo.x, y: pickInfo.y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime17.jsx)(SimpleMenu, { menuItems: items, onSelect: (value) => this.props.onMenuItemSelected(value, pickInfo), style, isOpen: true, onClose: () => this.hide() }) });
     (0, import_preact11.render)(ui, rootElement);
   }
   hide() {
@@ -2009,7 +5222,7 @@ var ContextMenuWidget = class extends import_core13.Widget {
   }
 };
 ContextMenuWidget.defaultProps = {
-  ...import_core13.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "context",
   viewId: null,
   menuItems: [],
@@ -2022,15 +5235,14 @@ ContextMenuWidget.defaultProps = {
 };
 
 // dist/scrollbar-widget.js
-var import_jsx_runtime18 = require("preact/jsx-runtime");
-var import_core14 = require("@deck.gl/core");
+var import_jsx_runtime19 = require("preact/jsx-runtime");
 var import_preact12 = require("preact");
 
 // dist/lib/components/range-input.js
-var import_jsx_runtime17 = require("preact/jsx-runtime");
-var import_hooks6 = require("preact/hooks");
+var import_jsx_runtime18 = require("preact/jsx-runtime");
+var import_hooks7 = require("preact/hooks");
 var wheelListenerOptions = { passive: false };
-var clamp2 = (value, min, max) => {
+var clamp6 = (value, min, max) => {
   if (value < min) {
     return min;
   }
@@ -2064,16 +5276,16 @@ var getEffectivePage = (pageSize, rangeSize) => {
 function RangeInput(props) {
   const { className = "", min, max, step, value, orientation, pageSize, stepButtons = false, startButtonAriaLabel, endButtonAriaLabel, eventTarget, decorations = [], onChange } = props;
   const vertical = orientation !== "horizontal";
-  const rootRef = (0, import_hooks6.useRef)(null);
-  const trackRef = (0, import_hooks6.useRef)(null);
-  const thumbRef = (0, import_hooks6.useRef)(null);
-  const dragStateRef = (0, import_hooks6.useRef)(null);
-  const [trackLength, setTrackLength] = (0, import_hooks6.useState)(0);
+  const rootRef = (0, import_hooks7.useRef)(null);
+  const trackRef = (0, import_hooks7.useRef)(null);
+  const thumbRef = (0, import_hooks7.useRef)(null);
+  const dragStateRef = (0, import_hooks7.useRef)(null);
+  const [trackLength, setTrackLength] = (0, import_hooks7.useState)(0);
   const range = max - min;
   const rangeSize = Math.max(0, value[1] - value[0]);
   const maxStart = Math.max(0, range - rangeSize);
-  const clampedStart = clamp2(value[0], min, min + maxStart);
-  const { thumbLength, thumbOffset } = (0, import_hooks6.useMemo)(() => {
+  const clampedStart = clamp6(value[0], min, min + maxStart);
+  const { thumbLength, thumbOffset } = (0, import_hooks7.useMemo)(() => {
     if (trackLength <= 0 || range <= 0) {
       return { thumbLength: 0, thumbOffset: 0 };
     }
@@ -2082,28 +5294,28 @@ function RangeInput(props) {
     }
     const nextThumbLength = rangeSize / range;
     const travel = Math.max(0, 1 - nextThumbLength);
-    const ratio = maxStart <= 0 ? 0 : clamp2((clampedStart - min) / maxStart, 0, 1);
+    const ratio = maxStart <= 0 ? 0 : clamp6((clampedStart - min) / maxStart, 0, 1);
     return {
       thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
       thumbOffset: travel * ratio
     };
   }, [trackLength, range, rangeSize, maxStart, clampedStart, min]);
-  const emitRange = (0, import_hooks6.useCallback)((nextStart) => {
+  const emitRange = (0, import_hooks7.useCallback)((nextStart) => {
     if (!onChange) {
       return;
     }
-    const clamped = clamp2(nextStart, min, min + maxStart);
+    const clamped = clamp6(nextStart, min, min + maxStart);
     onChange([clamped, clamped + rangeSize]);
   }, [onChange, min, maxStart, rangeSize]);
-  const handleStepNegative = (0, import_hooks6.useCallback)((event) => {
+  const handleStepNegative = (0, import_hooks7.useCallback)((event) => {
     event.stopPropagation();
     emitRange(clampedStart - getEffectiveStep(step, range));
   }, [emitRange, clampedStart, step, range]);
-  const handleStepPositive = (0, import_hooks6.useCallback)((event) => {
+  const handleStepPositive = (0, import_hooks7.useCallback)((event) => {
     event.stopPropagation();
     emitRange(clampedStart + getEffectiveStep(step, range));
   }, [emitRange, clampedStart, step, range]);
-  const handleTrackClick = (0, import_hooks6.useCallback)((event) => {
+  const handleTrackClick = (0, import_hooks7.useCallback)((event) => {
     if (event.button !== 0) {
       return;
     }
@@ -2121,7 +5333,7 @@ function RangeInput(props) {
     const coordinate = vertical ? event.clientY - trackStart : event.clientX - trackStart;
     const span = Math.max(1, 1 - thumbLength) * trackLength;
     const thumbCenter = thumbLength / 2 * trackLength;
-    const ratio = span <= 0 ? 0 : clamp2((coordinate - thumbCenter) / span, 0, 1);
+    const ratio = span <= 0 ? 0 : clamp6((coordinate - thumbCenter) / span, 0, 1);
     emitRange(min + ratio * maxStart);
   }, [vertical, trackLength, thumbLength, emitRange, min, maxStart]);
   const handleThumbPointerDown = (event) => {
@@ -2144,7 +5356,7 @@ function RangeInput(props) {
     event.preventDefault();
     event.stopPropagation();
   };
-  const handleThumbPointerMove = (0, import_hooks6.useCallback)((event) => {
+  const handleThumbPointerMove = (0, import_hooks7.useCallback)((event) => {
     const state = dragStateRef.current;
     if (!state || state.pointerId !== event.pointerId) {
       return;
@@ -2153,11 +5365,11 @@ function RangeInput(props) {
     const coordinate = vertical ? event.clientY : event.clientX;
     const delta = coordinate - state.startCoord;
     const ratio = state.startRatio + delta / trackLength2;
-    const nextStart = clamp2(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
+    const nextStart = clamp6(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
     emitRange(nextStart);
     event.preventDefault();
   }, [emitRange, vertical]);
-  const handleThumbPointerUp = (0, import_hooks6.useCallback)((event) => {
+  const handleThumbPointerUp = (0, import_hooks7.useCallback)((event) => {
     var _a;
     const state = dragStateRef.current;
     if (state && state.pointerId === event.pointerId) {
@@ -2166,7 +5378,7 @@ function RangeInput(props) {
       event.preventDefault();
     }
   }, []);
-  const handleKeyDown = (0, import_hooks6.useCallback)((event) => {
+  const handleKeyDown = (0, import_hooks7.useCallback)((event) => {
     switch (event.key) {
       case "ArrowUp":
       case "ArrowLeft":
@@ -2202,7 +5414,7 @@ function RangeInput(props) {
         break;
     }
   }, [vertical, emitRange, clampedStart, step, range, pageSize, rangeSize, min, maxStart]);
-  const handleWheel = (0, import_hooks6.useCallback)((event) => {
+  const handleWheel = (0, import_hooks7.useCallback)((event) => {
     event.preventDefault();
     event.stopPropagation();
     if (maxStart === 0) {
@@ -2222,10 +5434,10 @@ function RangeInput(props) {
     }
     emitRange(clampedStart + delta);
   }, [emitRange, clampedStart, maxStart, vertical, step, range, pageSize, rangeSize]);
-  (0, import_hooks6.useLayoutEffect)(() => {
+  (0, import_hooks7.useLayoutEffect)(() => {
     setTrackLength(getTrackDimension(trackRef.current, vertical)[1]);
   }, [vertical]);
-  (0, import_hooks6.useLayoutEffect)(() => {
+  (0, import_hooks7.useLayoutEffect)(() => {
     const track = trackRef.current;
     if (!track) {
       return void 0;
@@ -2245,7 +5457,7 @@ function RangeInput(props) {
     }
     return void 0;
   }, [vertical]);
-  (0, import_hooks6.useEffect)(() => {
+  (0, import_hooks7.useEffect)(() => {
     const eventRoot = eventTarget ?? rootRef.current;
     if (!eventRoot)
       return void 0;
@@ -2256,7 +5468,7 @@ function RangeInput(props) {
       eventRoot.removeEventListener("wheel", handleWheel, wheelListenerOptions);
     };
   }, [eventTarget, handleKeyDown, handleWheel]);
-  const decorationElements = (0, import_hooks6.useMemo)(() => {
+  const decorationElements = (0, import_hooks7.useMemo)(() => {
     if (!decorations.length || range <= 0) {
       return [];
     }
@@ -2277,14 +5489,14 @@ function RangeInput(props) {
         left: `${offsetPct}%`,
         width: `${sizePct}%`
       };
-      return (0, import_jsx_runtime17.jsx)("div", { className: "deck-widget-range__decoration", style, children: decoration.element }, `decoration-${index}`);
+      return (0, import_jsx_runtime18.jsx)("div", { className: "deck-widget-range__decoration", style, children: decoration.element }, `decoration-${index}`);
     });
   }, [decorations, range, min, vertical]);
-  return (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, tabIndex: 0, role: "scrollbar", "aria-valuemin": min, "aria-valuemax": min + maxStart, "aria-valuenow": clampedStart, "aria-orientation": orientation, className: `${className} deck-widget-range deck-widget-range--${orientation} ${maxStart === 0 ? "deck-widget-range--disabled" : ""}`, children: [stepButtons && (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--start", "aria-label": startButtonAriaLabel, disabled: clampedStart <= min, onClick: handleStepNegative, children: (0, import_jsx_runtime17.jsx)("span", { className: "deck-widget-icon" }) }), (0, import_jsx_runtime17.jsxs)("div", { className: "deck-widget-range__track", ref: trackRef, onClick: handleTrackClick, children: [(0, import_jsx_runtime17.jsx)("div", { className: "deck-widget-range__decorations", children: decorationElements }), (0, import_jsx_runtime17.jsx)("div", { className: "deck-widget-range__thumb", "data-scrollbar-thumb": "true", ref: thumbRef, style: vertical ? { height: `${thumbLength * 100}%`, top: `${thumbOffset * 100}%` } : { width: `${thumbLength * 100}%`, left: `${thumbOffset * 100}%` }, onPointerDown: handleThumbPointerDown, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, onPointerCancel: handleThumbPointerUp })] }), stepButtons && (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--end", "aria-label": endButtonAriaLabel, disabled: clampedStart >= min + maxStart, onClick: handleStepPositive, children: (0, import_jsx_runtime17.jsx)("span", { className: "deck-widget-icon" }) })] });
+  return (0, import_jsx_runtime18.jsxs)("div", { ref: rootRef, tabIndex: 0, role: "scrollbar", "aria-valuemin": min, "aria-valuemax": min + maxStart, "aria-valuenow": clampedStart, "aria-orientation": orientation, className: `${className} deck-widget-range deck-widget-range--${orientation} ${maxStart === 0 ? "deck-widget-range--disabled" : ""}`, children: [stepButtons && (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--start", "aria-label": startButtonAriaLabel, disabled: clampedStart <= min, onClick: handleStepNegative, children: (0, import_jsx_runtime18.jsx)("span", { className: "deck-widget-icon" }) }), (0, import_jsx_runtime18.jsxs)("div", { className: "deck-widget-range__track", ref: trackRef, onClick: handleTrackClick, children: [(0, import_jsx_runtime18.jsx)("div", { className: "deck-widget-range__decorations", children: decorationElements }), (0, import_jsx_runtime18.jsx)("div", { className: "deck-widget-range__thumb", "data-scrollbar-thumb": "true", ref: thumbRef, style: vertical ? { height: `${thumbLength * 100}%`, top: `${thumbOffset * 100}%` } : { width: `${thumbLength * 100}%`, left: `${thumbOffset * 100}%` }, onPointerDown: handleThumbPointerDown, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, onPointerCancel: handleThumbPointerUp })] }), stepButtons && (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--end", "aria-label": endButtonAriaLabel, disabled: clampedStart >= min + maxStart, onClick: handleStepPositive, children: (0, import_jsx_runtime18.jsx)("span", { className: "deck-widget-icon" }) })] });
 }
 
 // dist/scrollbar-widget.js
-var clamp3 = (value, min, max) => {
+var clamp7 = (value, min, max) => {
   if (value < min) {
     return min;
   }
@@ -2293,10 +5505,10 @@ var clamp3 = (value, min, max) => {
   }
   return value;
 };
-var ScrollbarWidget = class extends import_core14.Widget {
+var ScrollbarWidget = class _ScrollbarWidget extends Widget {
   constructor(props) {
     const resolved = {
-      ...ScrollbarWidget.defaultProps,
+      ..._ScrollbarWidget.defaultProps,
       ...props
     };
     super(resolved);
@@ -2328,7 +5540,7 @@ var ScrollbarWidget = class extends import_core14.Widget {
     const isVertical = this.isVertical();
     const startLabel = this.props.startButtonAriaLabel ?? (isVertical ? "Scroll up" : "Scroll left");
     const endLabel = this.props.endButtonAriaLabel ?? (isVertical ? "Scroll down" : "Scroll right");
-    const ui = (0, import_jsx_runtime18.jsx)(RangeInput, { min: 0, max: Math.max(0, this.contentSize), step: this.getEffectiveStep(), pageSize: this.getEffectivePage(), value: [clampedOffset, clampedOffset + this.viewportSize], orientation: this.props.orientation, stepButtons: true, startButtonAriaLabel: startLabel, endButtonAriaLabel: endLabel, eventTarget: wheelTarget, decorations, onChange: this.handleRangeChange });
+    const ui = (0, import_jsx_runtime19.jsx)(RangeInput, { min: 0, max: Math.max(0, this.contentSize), step: this.getEffectiveStep(), pageSize: this.getEffectivePage(), value: [clampedOffset, clampedOffset + this.viewportSize], orientation: this.props.orientation, stepButtons: true, startButtonAriaLabel: startLabel, endButtonAriaLabel: endLabel, eventTarget: wheelTarget, decorations, onChange: this.handleRangeChange });
     (0, import_preact12.render)(ui, element);
   }
   onRemove() {
@@ -2341,6 +5553,10 @@ var ScrollbarWidget = class extends import_core14.Widget {
     var _a, _b, _c;
     return this.props.contentBounds ?? ((_c = (_b = (_a = this.deck) == null ? void 0 : _a.getView(viewId)) == null ? void 0 : _b.controller) == null ? void 0 : _c.maxBounds) ?? null;
   }
+  getContentBoundsPadding(viewId) {
+    var _a, _b, _c;
+    return this.props.contentBoundsPadding ?? ((_c = (_b = (_a = this.deck) == null ? void 0 : _a.getView(viewId)) == null ? void 0 : _b.controller) == null ? void 0 : _c.maxBoundsPadding) ?? null;
+  }
   updateViewport(viewport) {
     if (!viewport) {
       this.contentSize = 0;
@@ -2351,9 +5567,12 @@ var ScrollbarWidget = class extends import_core14.Widget {
     const contentBounds = this.getContentBounds(viewport.id);
     const isVertical = this.isVertical();
     const projectedBounds = contentBounds ? projectBounds(contentBounds, viewport, isVertical) : [0, 0];
+    const contentRect = getMaxBoundsRect(viewport.width, viewport.height, this.getContentBoundsPadding(viewport.id));
+    const contentStart = isVertical ? contentRect.y : contentRect.x;
+    const viewportSize = isVertical ? contentRect.height : contentRect.width;
     this.contentSize = projectedBounds[1] - projectedBounds[0];
-    this.scrollOffset = -projectedBounds[0];
-    this.viewportSize = isVertical ? viewport.height : viewport.width;
+    this.scrollOffset = contentStart - projectedBounds[0];
+    this.viewportSize = Math.max(0, viewportSize);
   }
   getDecorations(viewport) {
     const { decorations = [] } = this.props;
@@ -2378,7 +5597,7 @@ var ScrollbarWidget = class extends import_core14.Widget {
       } : void 0;
       return {
         position: [start - contentStart, end - contentStart],
-        element: (0, import_jsx_runtime18.jsx)("div", { style: {
+        element: (0, import_jsx_runtime19.jsx)("div", { style: {
           pointerEvents: onClick ? "all" : "none",
           width: "100%",
           height: "100%",
@@ -2400,7 +5619,7 @@ var ScrollbarWidget = class extends import_core14.Widget {
   }
   getClampedOffset() {
     const maxScroll = this.getMaxScroll();
-    return clamp3(this.scrollOffset, 0, maxScroll);
+    return clamp7(this.scrollOffset, 0, maxScroll);
   }
   isVertical() {
     return this.props.orientation !== "horizontal";
@@ -2419,7 +5638,7 @@ var ScrollbarWidget = class extends import_core14.Widget {
   }
   emitScroll(next) {
     const maxScroll = this.getMaxScroll();
-    const target = clamp3(Math.round(next), 0, maxScroll);
+    const target = clamp7(Math.round(next), 0, maxScroll);
     const viewport = this.viewport;
     if (viewport && target !== this.getClampedOffset()) {
       const pixel = viewport.project(viewport.position);
@@ -2441,8 +5660,9 @@ var ScrollbarWidget = class extends import_core14.Widget {
   }
 };
 ScrollbarWidget.defaultProps = {
-  ...import_core14.Widget.defaultProps,
+  ...Widget.defaultProps,
   contentBounds: null,
+  contentBoundsPadding: null,
   placement: "top-right",
   viewId: null,
   orientation: "vertical",
@@ -2463,10 +5683,9 @@ function projectBounds(bounds, viewport, isVertical) {
 }
 
 // dist/icon-widget.js
-var import_jsx_runtime19 = require("preact/jsx-runtime");
+var import_jsx_runtime20 = require("preact/jsx-runtime");
 var import_preact13 = require("preact");
-var import_core15 = require("@deck.gl/core");
-var IconWidget = class extends import_core15.Widget {
+var IconWidget = class extends Widget {
   constructor(props) {
     super(props);
     this.className = "";
@@ -2479,26 +5698,26 @@ var IconWidget = class extends import_core15.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    const { className, style, icon, color, label, onClick } = this.props;
-    (0, import_preact13.render)((0, import_jsx_runtime19.jsx)(IconButton, { className, style, color, icon, label, onClick }), rootElement);
+    const { className, style, icon, color, label, tooltip, onClick } = this.props;
+    (0, import_preact13.render)((0, import_jsx_runtime20.jsx)(IconButton, { className, style, color, icon, label, tooltip, onClick }), rootElement);
   }
 };
 IconWidget.defaultProps = {
-  ...import_core15.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "icon",
   placement: "top-left",
   viewId: null,
   icon: "",
   label: "",
+  tooltip: void 0,
   color: "",
   onClick: void 0
 };
 
 // dist/toggle-widget.js
-var import_jsx_runtime20 = require("preact/jsx-runtime");
+var import_jsx_runtime21 = require("preact/jsx-runtime");
 var import_preact14 = require("preact");
-var import_core16 = require("@deck.gl/core");
-var ToggleWidget = class extends import_core16.Widget {
+var ToggleWidget = class extends Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-toggle";
@@ -2518,14 +5737,14 @@ var ToggleWidget = class extends import_core16.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    const { className, style, icon, label, color, onIcon = icon, onLabel = label, onColor = color } = this.props;
+    const { className, style, icon, label, tooltip, color, onIcon = icon, onLabel = label, onTooltip, onColor = color } = this.props;
     const on = this.checked;
     rootElement.dataset.checked = String(on);
-    (0, import_preact14.render)((0, import_jsx_runtime20.jsx)(IconButton, { className, style, icon: on ? onIcon : icon, label: on ? onLabel : label, color: on ? onColor : color, onClick: this._toggle }), rootElement);
+    (0, import_preact14.render)((0, import_jsx_runtime21.jsx)(IconButton, { className, style, icon: on ? onIcon : icon, label: on ? onLabel : label, tooltip: on ? onTooltip : tooltip, color: on ? onColor : color, onClick: this._toggle }), rootElement);
   }
 };
 ToggleWidget.defaultProps = {
-  ...import_core16.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "icon",
   placement: "top-left",
   viewId: null,
@@ -2533,17 +5752,18 @@ ToggleWidget.defaultProps = {
   icon: "",
   onIcon: void 0,
   label: "",
+  tooltip: void 0,
   onLabel: void 0,
+  onTooltip: void 0,
   color: "",
   onColor: void 0,
   onChange: void 0
 };
 
 // dist/selector-widget.js
-var import_jsx_runtime21 = require("preact/jsx-runtime");
+var import_jsx_runtime22 = require("preact/jsx-runtime");
 var import_preact15 = require("preact");
-var import_core17 = require("@deck.gl/core");
-var SelectorWidget = class extends import_core17.Widget {
+var SelectorWidget = class extends Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-selector";
@@ -2576,25 +5796,25 @@ var SelectorWidget = class extends import_core17.Widget {
   }
   onRenderHTML(rootElement) {
     const selectedOption = this.props.options.find((opt) => opt.value === this.value) ?? this.props.options[0];
-    (0, import_preact15.render)((0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsx)(IconButton, { icon: selectedOption.icon, label: selectedOption.label, onClick: this._toggleMenu }), this.isOpen && (0, import_jsx_runtime21.jsx)(Popover, { ...this.isOpen, children: (0, import_jsx_runtime21.jsx)(SimpleMenu, { isOpen: true, style: { pointerEvents: "auto", position: "static" }, menuItems: this.props.options, onSelect: this._handleSelectMode, onClose: this._toggleMenu }) })] }), rootElement);
+    (0, import_preact15.render)((0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsx)(IconButton, { icon: selectedOption.icon, label: selectedOption.label, tooltip: this.props.tooltip, onClick: this._toggleMenu }), this.isOpen && (0, import_jsx_runtime22.jsx)(Popover, { ...this.isOpen, children: (0, import_jsx_runtime22.jsx)(SimpleMenu, { isOpen: true, style: { pointerEvents: "auto", position: "static" }, menuItems: this.props.options, onSelect: this._handleSelectMode, onClose: this._toggleMenu }) })] }), rootElement);
   }
 };
 SelectorWidget.defaultProps = {
-  ...import_core17.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "view-selector",
   placement: "top-left",
   viewId: null,
   initialValue: "",
   options: [],
+  tooltip: void 0,
   onChange: () => {
   }
 };
 
 // dist/timeline-widget.js
-var import_jsx_runtime22 = require("preact/jsx-runtime");
-var import_core18 = require("@deck.gl/core");
+var import_jsx_runtime23 = require("preact/jsx-runtime");
 var import_preact16 = require("preact");
-var TimelineWidget = class extends import_core18.Widget {
+var TimelineWidget = class extends Widget {
   /**
    * Returns the current time value.
    * In controlled mode, returns the time prop.
@@ -2708,14 +5928,14 @@ var TimelineWidget = class extends import_core18.Widget {
     this.stop();
   }
   onRenderHTML(rootElement) {
-    const { timeRange, step, formatLabel } = this.props;
+    const { timeRange, step, formatLabel, playTooltip, pauseTooltip } = this.props;
     const isPlaying = this.getPlaying();
     const currentTime = this.getTime();
     rootElement.dataset.placement = this.props.placement;
-    (0, import_preact16.render)((0, import_jsx_runtime22.jsxs)("div", { className: "deck-widget-button-group", children: [isPlaying ? (0, import_jsx_runtime22.jsx)(IconButton, { label: "Pause", className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime22.jsx)(IconButton, { label: "Play", className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime22.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
+    (0, import_preact16.render)((0, import_jsx_runtime23.jsxs)("div", { className: "deck-widget-button-group", children: [isPlaying ? (0, import_jsx_runtime23.jsx)(IconButton, { label: "Pause", tooltip: pauseTooltip, className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime23.jsx)(IconButton, { label: "Play", tooltip: playTooltip, className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime23.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
       {
         position: [currentTime, currentTime + step],
-        element: (0, import_jsx_runtime22.jsx)("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
+        element: (0, import_jsx_runtime23.jsx)("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
       }
     ] })] }), rootElement);
   }
@@ -2750,7 +5970,7 @@ var TimelineWidget = class extends import_core18.Widget {
   }
 };
 TimelineWidget.defaultProps = {
-  ...import_core18.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "timeline",
   placement: "bottom-left",
   viewId: null,
@@ -2767,14 +5987,15 @@ TimelineWidget.defaultProps = {
   playing: void 0,
   onPlayingChange: () => {
   },
-  formatLabel: String
+  formatLabel: String,
+  playTooltip: void 0,
+  pauseTooltip: void 0
 };
 
 // dist/screenshot-widget.js
-var import_jsx_runtime23 = require("preact/jsx-runtime");
+var import_jsx_runtime24 = require("preact/jsx-runtime");
 var import_preact17 = require("preact");
-var import_core19 = require("@deck.gl/core");
-var ScreenshotWidget = class extends import_core19.Widget {
+var ScreenshotWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-screenshot";
@@ -2787,7 +6008,7 @@ var ScreenshotWidget = class extends import_core19.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    (0, import_preact17.render)((0, import_jsx_runtime23.jsx)(IconButton, { className: "deck-widget-camera", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
+    (0, import_preact17.render)((0, import_jsx_runtime24.jsx)(IconButton, { className: "deck-widget-camera", label: this.props.label, tooltip: this.props.tooltip, onClick: this.handleClick.bind(this) }), rootElement);
   }
   handleClick() {
     if (this.props.onCapture) {
@@ -2814,26 +6035,26 @@ var ScreenshotWidget = class extends import_core19.Widget {
   }
 };
 ScreenshotWidget.defaultProps = {
-  ...import_core19.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "screenshot",
   placement: "top-left",
   viewId: null,
   label: "Screenshot",
+  tooltip: void 0,
   filename: "screenshot.png",
   imageFormat: "image/png",
   onCapture: void 0
 };
 
 // dist/theme-widget.js
-var import_jsx_runtime24 = require("preact/jsx-runtime");
-var import_core20 = require("@deck.gl/core");
-var import_core21 = require("@deck.gl/core");
+var import_jsx_runtime25 = require("preact/jsx-runtime");
 var import_preact18 = require("preact");
 
 // dist/themes.js
 var LightTheme = {
   "--widget-margin": "12px",
   "--button-size": "28px",
+  "--icon-size": "75%",
   "--button-corner-radius": "8px",
   "--button-background": "#fff",
   "--button-stroke": "rgba(255, 255, 255, 0.3)",
@@ -2862,6 +6083,7 @@ var LightTheme = {
 var DarkTheme = {
   "--widget-margin": "12px",
   "--button-size": "28px",
+  "--icon-size": "75%",
   "--button-corner-radius": "8px",
   "--button-background": "rgba(18, 18, 20, 1)",
   "--button-stroke": "rgba(18, 18, 20, 0.30)",
@@ -2890,6 +6112,7 @@ var DarkTheme = {
 var LightGlassTheme = {
   "--widget-margin": "12px",
   "--button-size": "28px",
+  "--icon-size": "75%",
   "--button-corner-radius": "8px",
   "--button-background": "rgba(255, 255, 255, 0.6)",
   "--button-stroke": "rgba(255, 255, 255, 0.3)",
@@ -2918,6 +6141,7 @@ var LightGlassTheme = {
 var DarkGlassTheme = {
   "--widget-margin": "12px",
   "--button-size": "28px",
+  "--icon-size": "75%",
   "--button-corner-radius": "8px",
   "--button-background": "rgba(18, 18, 20, 0.75)",
   "--button-stroke": "rgba(18, 18, 20, 0.30)",
@@ -2945,7 +6169,7 @@ var DarkGlassTheme = {
 };
 
 // dist/theme-widget.js
-var ThemeWidget = class extends import_core21.Widget {
+var ThemeWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-theme";
@@ -2962,10 +6186,10 @@ var ThemeWidget = class extends import_core21.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    const { lightModeLabel, darkModeLabel } = this.props;
+    const { lightModeLabel, darkModeLabel, lightModeTooltip, darkModeTooltip } = this.props;
     const currentMode = this.getThemeMode();
     this._applyTheme(currentMode, rootElement);
-    (0, import_preact18.render)((0, import_jsx_runtime24.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: currentMode === "dark" ? darkModeLabel : lightModeLabel, className: currentMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
+    (0, import_preact18.render)((0, import_jsx_runtime25.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: currentMode === "dark" ? darkModeLabel : lightModeLabel, tooltip: currentMode === "dark" ? darkModeTooltip : lightModeTooltip, className: currentMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
   }
   /**
    * Returns the current theme mode.
@@ -2988,16 +6212,16 @@ var ThemeWidget = class extends import_core21.Widget {
   /** Apply theme styling without changing internal state */
   _applyTheme(themeMode, rootElement) {
     const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
-    if ((0, import_core20._deepEqual)(themeStyle, this.appliedTheme, 1)) {
+    if (deepEqual(themeStyle, this.appliedTheme, 1)) {
       return;
     }
     const container = rootElement.closest(".deck-widget-container");
     if (!container)
       return;
-    (0, import_core20._applyStyles)(container, themeStyle);
+    applyStyles(container, themeStyle);
     this.appliedTheme = themeStyle;
     const label = themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-    import_core20.log.log(1, `Switched theme to ${label}`, themeStyle)();
+    log_default.log(1, `Switched theme to ${label}`, themeStyle)();
   }
   /** Read browser preference */
   _getInitialThemeMode() {
@@ -3012,13 +6236,15 @@ var ThemeWidget = class extends import_core21.Widget {
   }
 };
 ThemeWidget.defaultProps = {
-  ...import_core21.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "theme",
   placement: "top-left",
   viewId: null,
   lightModeLabel: "Light Mode",
+  lightModeTooltip: void 0,
   lightModeTheme: LightGlassTheme,
   darkModeLabel: "Dark Mode",
+  darkModeTooltip: void 0,
   darkModeTheme: DarkGlassTheme,
   initialThemeMode: "auto",
   themeMode: void 0,
@@ -3027,10 +6253,9 @@ ThemeWidget.defaultProps = {
 };
 
 // dist/loading-widget.js
-var import_jsx_runtime25 = require("preact/jsx-runtime");
+var import_jsx_runtime26 = require("preact/jsx-runtime");
 var import_preact19 = require("preact");
-var import_core22 = require("@deck.gl/core");
-var LoadingWidget = class extends import_core22.Widget {
+var LoadingWidget = class extends Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-loading";
@@ -3046,7 +6271,7 @@ var LoadingWidget = class extends import_core22.Widget {
   onRenderHTML(rootElement) {
     (0, import_preact19.render)(
       // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
-      this.loading && (0, import_jsx_runtime25.jsx)(IconButton, { className: "deck-widget-spinner", label: this.props.label, onClick: this.handleClick.bind(this) }),
+      this.loading && (0, import_jsx_runtime26.jsx)(IconButton, { className: "deck-widget-spinner", label: this.props.label, tooltip: this.props.tooltip, onClick: this.handleClick.bind(this) }),
       rootElement
     );
   }
@@ -3064,21 +6289,21 @@ var LoadingWidget = class extends import_core22.Widget {
   }
 };
 LoadingWidget.defaultProps = {
-  ...import_core22.Widget.defaultProps,
+  ...Widget.defaultProps,
   id: "loading",
   placement: "top-left",
   viewId: null,
   label: "Loading layer data",
+  tooltip: void 0,
   onLoadingChange: () => {
   }
 };
 
 // dist/stats-widget.js
-var import_jsx_runtime26 = require("preact/jsx-runtime");
-var import_core23 = require("@deck.gl/core");
-var import_core24 = require("@luma.gl/core");
+var import_jsx_runtime27 = require("preact/jsx-runtime");
+var import_core33 = require("@luma.gl/core");
 var import_preact20 = require("preact");
-var import_hooks7 = require("preact/hooks");
+var import_hooks8 = require("preact/hooks");
 var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
 function formatTime(time) {
   return time < 1e3 ? `${time.toFixed(2)}ms` : `${(time / 1e3).toFixed(2)}s`;
@@ -3094,7 +6319,7 @@ var DEFAULT_FORMATTERS = {
   fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
   memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
 };
-var StatsWidget = class extends import_core23.Widget {
+var StatsWidget = class extends Widget {
   /**
    * Returns the current expanded state.
    * In controlled mode, returns the expanded prop.
@@ -3149,7 +6374,7 @@ var StatsWidget = class extends import_core23.Widget {
   onRenderHTML(rootElement) {
     const isExpanded = this.getExpanded();
     if (!isExpanded) {
-      (0, import_preact20.render)((0, import_jsx_runtime26.jsx)(FpsIcon, { getFps: this._getFps, onClick: this._toggleExpanded }), rootElement);
+      (0, import_preact20.render)((0, import_jsx_runtime27.jsx)(FpsIcon, { getFps: this._getFps, onClick: this._toggleExpanded }), rootElement);
       return;
     }
     const stats = this._getStats();
@@ -3163,11 +6388,11 @@ var StatsWidget = class extends import_core23.Widget {
           stat.reset();
         }
         lines.forEach((line, i) => {
-          items.push((0, import_jsx_runtime26.jsx)("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i}`));
+          items.push((0, import_jsx_runtime27.jsx)("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i}`));
         });
       });
     }
-    (0, import_preact20.render)((0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleExpanded, children: [(0, import_jsx_runtime26.jsx)("b", { children: title }), deviceLabel && (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-stats-device", children: deviceLabel }), (0, import_jsx_runtime26.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-dropdown-icon open" }) })] }), (0, import_jsx_runtime26.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
+    (0, import_preact20.render)((0, import_jsx_runtime27.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime27.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleExpanded, children: [(0, import_jsx_runtime27.jsx)("b", { children: title }), deviceLabel && (0, import_jsx_runtime27.jsx)("span", { className: "deck-widget-stats-device", children: deviceLabel }), (0, import_jsx_runtime27.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime27.jsx)("span", { className: "deck-widget-dropdown-icon open" }) })] }), (0, import_jsx_runtime27.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
   }
   onRedraw() {
     if (this.getExpanded()) {
@@ -3184,7 +6409,7 @@ var StatsWidget = class extends import_core23.Widget {
         const metrics = ((_a = this.deck) == null ? void 0 : _a.metrics) ?? {};
         return Object.entries(metrics);
       case "luma":
-        return Array.from(import_core24.luma.stats.stats.values())[0];
+        return Array.from(import_core33.luma.stats.stats.values())[0];
       case "device":
         const device = (_b = this.deck) == null ? void 0 : _b.device;
         const stats = device == null ? void 0 : device.statsManager.stats.values();
@@ -3221,7 +6446,7 @@ var StatsWidget = class extends import_core23.Widget {
   }
 };
 StatsWidget.defaultProps = {
-  ...import_core23.Widget.defaultProps,
+  ...Widget.defaultProps,
   type: "deck",
   placement: "top-left",
   viewId: null,
@@ -3237,8 +6462,8 @@ StatsWidget.defaultProps = {
   }
 };
 function FpsIcon({ getFps, onClick }) {
-  const [fps, setFps] = (0, import_hooks7.useState)(getFps());
-  (0, import_hooks7.useEffect)(() => {
+  const [fps, setFps] = (0, import_hooks8.useState)(getFps());
+  (0, import_hooks8.useEffect)(() => {
     const onUpdate = () => {
       setFps(getFps());
       timer = requestAnimationFrame(onUpdate);
@@ -3248,6 +6473,6 @@ function FpsIcon({ getFps, onClick }) {
       cancelAnimationFrame(timer);
     };
   }, [getFps]);
-  return (0, import_jsx_runtime26.jsx)(IconButton, { onClick, children: (0, import_jsx_runtime26.jsxs)("div", { className: "text", children: ["FPS", (0, import_jsx_runtime26.jsx)("br", {}), fps] }) });
+  return (0, import_jsx_runtime27.jsx)(IconButton, { onClick, children: (0, import_jsx_runtime27.jsxs)("div", { className: "text", children: ["FPS", (0, import_jsx_runtime27.jsx)("br", {}), fps] }) });
 }
 //# sourceMappingURL=index.cjs.map