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

package/dist/vitest.cjs

@@ -15,7 +15,7 @@ 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/vitest.js
 var vitest_exports = {};
@@ -33,8 +33,4186 @@ __export(vitest_exports, {
 module.exports = __toCommonJS(vitest_exports);
 var import_vitest = require("vitest");
 
-// dist/lifecycle-test.js
-var import_core = require("@deck.gl/core");
+// ../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/debug/loggers.ts
+var logState = {
+  attributeUpdateStart: -1,
+  attributeManagerUpdateStart: -1,
+  attributeUpdateMessages: []
+};
+var LOG_LEVEL_MAJOR_UPDATE = 1;
+var LOG_LEVEL_MINOR_UPDATE = 2;
+var LOG_LEVEL_UPDATE_DETAIL = 3;
+var LOG_LEVEL_INFO = 4;
+var LOG_LEVEL_DRAW = 2;
+var getLoggers = (log) => ({
+  /* Layer events */
+  "layer.changeFlag": (layer, key, flags) => {
+    log.log(LOG_LEVEL_UPDATE_DETAIL, `${layer.id} ${key}: `, flags[key])();
+  },
+  "layer.initialize": (layer) => {
+    log.log(LOG_LEVEL_MAJOR_UPDATE, `Initializing ${layer}`)();
+  },
+  "layer.update": (layer, needsUpdate) => {
+    if (needsUpdate) {
+      const flags = layer.getChangeFlags();
+      log.log(
+        LOG_LEVEL_MINOR_UPDATE,
+        `Updating ${layer} because: ${Object.keys(flags).filter((key) => flags[key]).join(", ")}`
+      )();
+    } else {
+      log.log(LOG_LEVEL_INFO, `${layer} does not need update`)();
+    }
+  },
+  "layer.matched": (layer, changed) => {
+    if (changed) {
+      log.log(LOG_LEVEL_INFO, `Matched ${layer}, state transfered`)();
+    }
+  },
+  "layer.finalize": (layer) => {
+    log.log(LOG_LEVEL_MAJOR_UPDATE, `Finalizing ${layer}`)();
+  },
+  /* CompositeLayer events */
+  "compositeLayer.renderLayers": (layer, updated, subLayers) => {
+    if (updated) {
+      log.log(
+        LOG_LEVEL_MINOR_UPDATE,
+        `Composite layer rendered new subLayers ${layer}`,
+        subLayers
+      )();
+    } else {
+      log.log(LOG_LEVEL_INFO, `Composite layer reused subLayers ${layer}`, subLayers)();
+    }
+  },
+  /* LayerManager events */
+  "layerManager.setLayers": (layerManager, updated, layers) => {
+    if (updated) {
+      log.log(LOG_LEVEL_MINOR_UPDATE, `Updating ${layers.length} deck layers`)();
+    }
+  },
+  "layerManager.activateViewport": (layerManager, viewport) => {
+    log.log(LOG_LEVEL_UPDATE_DETAIL, "Viewport changed", viewport)();
+  },
+  /* AttributeManager events */
+  "attributeManager.invalidate": (attributeManager, trigger, attributeNames) => {
+    log.log(
+      LOG_LEVEL_MAJOR_UPDATE,
+      attributeNames ? `invalidated attributes ${attributeNames} (${trigger}) for ${attributeManager.id}` : `invalidated all attributes for ${attributeManager.id}`
+    )();
+  },
+  "attributeManager.updateStart": (attributeManager) => {
+    logState.attributeUpdateMessages.length = 0;
+    logState.attributeManagerUpdateStart = Date.now();
+  },
+  "attributeManager.updateEnd": (attributeManager, numInstances) => {
+    const timeMs = Math.round(Date.now() - logState.attributeManagerUpdateStart);
+    log.groupCollapsed(
+      LOG_LEVEL_MINOR_UPDATE,
+      `Updated attributes for ${numInstances} instances in ${attributeManager.id} in ${timeMs}ms`
+    )();
+    for (const updateMessage of logState.attributeUpdateMessages) {
+      log.log(LOG_LEVEL_UPDATE_DETAIL, updateMessage)();
+    }
+    log.groupEnd(LOG_LEVEL_MINOR_UPDATE)();
+  },
+  /* Attribute events */
+  "attribute.updateStart": (attribute) => {
+    logState.attributeUpdateStart = Date.now();
+  },
+  "attribute.allocate": (attribute, numInstances) => {
+    const message = `${attribute.id} allocated ${numInstances}`;
+    logState.attributeUpdateMessages.push(message);
+  },
+  "attribute.updateEnd": (attribute, numInstances) => {
+    const timeMs = Math.round(Date.now() - logState.attributeUpdateStart);
+    const message = `${attribute.id} updated ${numInstances} in ${timeMs}ms`;
+    logState.attributeUpdateMessages.push(message);
+  },
+  /* Render events */
+  "deckRenderer.renderLayers": (deckRenderer, renderStats, opts) => {
+    const { pass, redrawReason } = opts;
+    for (const status of renderStats) {
+      const { totalCount, visibleCount, compositeCount, pickableCount } = status;
+      const primitiveCount = totalCount - compositeCount;
+      const hiddenCount = primitiveCount - visibleCount;
+      log.log(
+        LOG_LEVEL_DRAW,
+        `RENDER #${deckRenderer.renderCount}   ${visibleCount} (of ${totalCount} layers) to ${pass} because ${redrawReason}   (${hiddenCount} hidden, ${compositeCount} composite ${pickableCount} pickable)`
+      )();
+    }
+  }
+});
+
+// ../core/src/debug/index.ts
+var loggers = {};
+if (true) {
+  loggers = getLoggers(log_default);
+}
+function debug(eventType, arg1, arg2, arg3) {
+  if (log_default.level > 0 && loggers[eventType]) {
+    loggers[eventType].call(null, arg1, arg2, arg3);
+  }
+}
+
+// ../core/src/shaderlib/index.ts
+var import_shadertools = require("@luma.gl/shadertools");
+
+// ../core/src/shaderlib/misc/layer-uniforms.ts
+var uniformBlockWGSL = (
+  /* wgsl */
+  `struct LayerUniforms {
+  opacity: f32,
+};
+
+@group(0) @binding(auto)
+var<uniform> layer: LayerUniforms;
+`
+);
+var uniformBlock = `layout(std140) uniform layerUniforms {
+  uniform float opacity;
+} layer;
+`;
+var layerUniforms = {
+  name: "layer",
+  source: uniformBlockWGSL,
+  vs: uniformBlock,
+  fs: uniformBlock,
+  getUniforms: (props) => {
+    return {
+      // apply gamma to opacity to make it visually "linear"
+      // TODO - v10: use raw opacity?
+      opacity: Math.pow(props.opacity, 1 / 2.2)
+    };
+  },
+  uniformTypes: {
+    opacity: "f32"
+  }
+};
+
+// ../core/src/shaderlib/misc/geometry.ts
+var source = (
+  /* wgsl */
+  `const SMOOTH_EDGE_RADIUS: f32 = 0.5;
+
+struct VertexGeometry {
+  position: vec4<f32>,
+  worldPosition: vec3<f32>,
+  worldPositionAlt: vec3<f32>,
+  normal: vec3<f32>,
+  uv: vec2<f32>,
+  pickingColor: vec3<f32>,
+};
+
+var<private> geometry_: VertexGeometry = VertexGeometry(
+  vec4<f32>(0.0, 0.0, 1.0, 0.0),
+  vec3<f32>(0.0, 0.0, 0.0),
+  vec3<f32>(0.0, 0.0, 0.0),
+  vec3<f32>(0.0, 0.0, 0.0),
+  vec2<f32>(0.0, 0.0),
+  vec3<f32>(0.0, 0.0, 0.0)
+);
+
+struct FragmentGeometry {
+  uv: vec2<f32>,
+};
+
+var<private> fragmentGeometry: FragmentGeometry;
+
+fn smoothedge(edge: f32, x: f32) -> f32 {
+  return smoothstep(edge - SMOOTH_EDGE_RADIUS, edge + SMOOTH_EDGE_RADIUS, x);
+}
+`
+);
+var defines = "#define SMOOTH_EDGE_RADIUS 0.5";
+var vs = (
+  /* glsl */
+  `${defines}
+
+struct VertexGeometry {
+  vec4 position;
+  vec3 worldPosition;
+  vec3 worldPositionAlt;
+  vec3 normal;
+  vec2 uv;
+  vec3 pickingColor;
+} geometry = VertexGeometry(
+  vec4(0.0, 0.0, 1.0, 0.0),
+  vec3(0.0),
+  vec3(0.0),
+  vec3(0.0),
+  vec2(0.0),
+  vec3(0.0)
+);
+`
+);
+var fs = (
+  /* glsl */
+  `${defines}
+
+struct FragmentGeometry {
+  vec2 uv;
+};
+FragmentGeometry geometry;
+
+float smoothedge(float edge, float x) {
+  return smoothstep(edge - SMOOTH_EDGE_RADIUS, edge + SMOOTH_EDGE_RADIUS, x);
+}
+`
+);
+var geometry_default = {
+  name: "geometry",
+  source,
+  vs,
+  fs
+};
+
+// ../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/shaderlib/index.ts
+var DEFAULT_MODULES = [geometry_default];
+var SHADER_HOOKS_GLSL = [
+  "vs:DECKGL_FILTER_SIZE(inout vec3 size, VertexGeometry geometry)",
+  "vs:DECKGL_FILTER_GL_POSITION(inout vec4 position, VertexGeometry geometry)",
+  "vs:DECKGL_FILTER_COLOR(inout vec4 color, VertexGeometry geometry)",
+  "fs:DECKGL_FILTER_COLOR(inout vec4 color, FragmentGeometry geometry)"
+];
+var SHADER_HOOKS_WGSL = [
+  // Not yet supported
+];
+function getShaderAssembler(language) {
+  const shaderAssembler = import_shadertools.ShaderAssembler.getDefaultShaderAssembler(language);
+  for (const shaderModule of DEFAULT_MODULES) {
+    shaderAssembler.addDefaultModule(shaderModule);
+  }
+  shaderAssembler._hookFunctions.length = 0;
+  const shaderHooks = language === "glsl" ? SHADER_HOOKS_GLSL : SHADER_HOOKS_WGSL;
+  for (const shaderHook of shaderHooks) {
+    shaderAssembler.addShaderHook(shaderHook);
+  }
+  return shaderAssembler;
+}
+
+// ../core/src/passes/pass.ts
+var Pass = class {
+  /** Create a new Pass instance */
+  constructor(device2, props = { id: "pass" }) {
+    const { id } = props;
+    this.id = id;
+    this.device = device2;
+    this.props = { ...props };
+  }
+  setProps(props) {
+    Object.assign(this.props, props);
+  }
+  render(params) {
+  }
+  // eslint-disable-line @typescript-eslint/no-empty-function
+  cleanup() {
+  }
+  // eslint-disable-line @typescript-eslint/no-empty-function
+};
+
+// ../core/src/passes/layers-pass.ts
+var WEBGPU_DEFAULT_DRAW_PARAMETERS = {
+  depthWriteEnabled: true,
+  depthCompare: "less-equal",
+  blendColorOperation: "add",
+  blendColorSrcFactor: "one",
+  blendColorDstFactor: "one-minus-src-alpha",
+  blendAlphaOperation: "add",
+  blendAlphaSrcFactor: "one",
+  blendAlphaDstFactor: "one-minus-src-alpha"
+};
+var LayersPass = class extends Pass {
+  constructor() {
+    super(...arguments);
+    this._lastRenderIndex = -1;
+  }
+  render(options) {
+    this._render(options);
+  }
+  _render(options) {
+    const { canvasContext = this.device.canvasContext } = options;
+    const framebuffer = options.target ?? canvasContext.getCurrentFramebuffer();
+    const [width, height] = canvasContext.getDrawingBufferSize();
+    const clearCanvas = options.clearCanvas ?? true;
+    let clearColor = options.clearColor ?? (clearCanvas ? [0, 0, 0, 0] : false);
+    let clearDepth = clearCanvas ? 1 : false;
+    let clearStencil = clearCanvas ? 0 : false;
+    const colorMask = options.colorMask ?? 15;
+    const parameters = { viewport: [0, 0, width, height] };
+    if (options.colorMask) {
+      parameters.colorMask = colorMask;
+    }
+    if (options.scissorRect) {
+      parameters.scissorRect = options.scissorRect;
+    }
+    const { shaderModuleProps, viewports, views, onViewportActive, clearStack = true } = options;
+    const pass = options.pass || "unknown";
+    const submitEachRenderPass = this.device.type === "webgpu";
+    if (clearStack) {
+      this._lastRenderIndex = -1;
+    }
+    const renderStats = [];
+    if (!viewports.length) {
+      const renderPass = this.device.beginRenderPass({
+        framebuffer,
+        parameters,
+        clearColor,
+        clearDepth,
+        clearStencil
+      });
+      renderPass.end();
+      this.device.submit();
+      return renderStats;
+    }
+    try {
+      for (const viewport of viewports) {
+        onViewportActive == null ? void 0 : onViewportActive(viewport);
+        const drawLayerParams = this._getDrawLayerParams(viewport, options);
+        const view = views && views[viewport.id];
+        const subViewports = viewport.subViewports || [viewport];
+        const renderGroups = submitEachRenderPass ? subViewports.map((subViewport) => [subViewport]) : [subViewports];
+        for (const renderGroup of renderGroups) {
+          const renderPass = this.device.beginRenderPass({
+            framebuffer,
+            parameters,
+            clearColor,
+            clearDepth,
+            clearStencil
+          });
+          try {
+            for (const subViewport of renderGroup) {
+              const stats = this._drawLayersInViewport(
+                renderPass,
+                {
+                  target: framebuffer,
+                  canvasContext,
+                  shaderModuleProps,
+                  viewport: subViewport,
+                  view,
+                  pass,
+                  layers: options.layers,
+                  isPicking: options.isPicking
+                },
+                drawLayerParams
+              );
+              renderStats.push(stats);
+            }
+          } finally {
+            renderPass.end();
+            if (submitEachRenderPass) {
+              this.device.submit();
+            }
+          }
+          clearColor = false;
+          clearDepth = false;
+          clearStencil = false;
+        }
+      }
+      return renderStats;
+    } finally {
+      if (!submitEachRenderPass) {
+        this.device.submit();
+      }
+    }
+  }
+  // When a viewport contains multiple subviewports (e.g. repeated web mercator map),
+  // this is only done once for the parent viewport
+  /* Resolve the parameters needed to draw each layer */
+  _getDrawLayerParams(viewport, {
+    layers,
+    pass,
+    isPicking = false,
+    layerFilter,
+    cullRect,
+    views,
+    effects,
+    canvasContext = this.device.canvasContext,
+    shaderModuleProps
+  }, evaluateShouldDrawOnly = false) {
+    var _a2, _b;
+    const drawLayerParams = [];
+    const indexResolver = layerIndexResolver(this._lastRenderIndex + 1);
+    const drawContext = {
+      layer: layers[0],
+      viewport,
+      isPicking,
+      renderPass: pass,
+      cullRect
+    };
+    const layerFilterCache = {};
+    for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
+      const layer = layers[layerIndex];
+      const shouldDrawLayer = this._shouldDrawLayer(
+        layer,
+        drawContext,
+        layerFilter,
+        layerFilterCache
+      );
+      const layerParam = { shouldDrawLayer };
+      if (shouldDrawLayer && !evaluateShouldDrawOnly) {
+        layerParam.shouldDrawLayer = true;
+        layerParam.layerRenderIndex = indexResolver(layer, shouldDrawLayer);
+        layerParam.shaderModuleProps = this._getShaderModuleProps(
+          layer,
+          effects,
+          pass,
+          canvasContext,
+          shaderModuleProps
+        );
+        const defaultParams = layer.context.device.type === "webgpu" ? WEBGPU_DEFAULT_DRAW_PARAMETERS : null;
+        layerParam.layerParameters = {
+          ...defaultParams,
+          ...(_a2 = layer.context.deck) == null ? void 0 : _a2.props.parameters,
+          ...(_b = views == null ? void 0 : views[viewport.id]) == null ? void 0 : _b.props.parameters,
+          ...this.getLayerParameters(layer, layerIndex, viewport)
+        };
+      }
+      drawLayerParams[layerIndex] = layerParam;
+    }
+    return drawLayerParams;
+  }
+  // Draws a list of layers in one viewport
+  // TODO - when picking we could completely skip rendering viewports that dont
+  // intersect with the picking rect
+  /* eslint-disable max-depth, max-statements, complexity */
+  _drawLayersInViewport(renderPass, {
+    layers,
+    shaderModuleProps: globalModuleParameters,
+    pass,
+    target,
+    canvasContext,
+    viewport,
+    view,
+    isPicking
+  }, drawLayerParams) {
+    const glViewport = getGLViewport(this.device, {
+      canvasContext,
+      shaderModuleProps: globalModuleParameters,
+      target,
+      viewport
+    });
+    if (view) {
+      const { clear, clearColor, clearDepth, clearStencil } = view.props;
+      if (clear) {
+        let colorToUse = [0, 0, 0, 0];
+        let depthToUse = 1;
+        let stencilToUse = 0;
+        if (Array.isArray(clearColor) && !isPicking) {
+          colorToUse = [...clearColor.slice(0, 3), clearColor[3] || 255].map(
+            (c) => c / 255
+          );
+        } else if (clearColor === false) {
+          colorToUse = false;
+        }
+        if (clearDepth !== void 0) {
+          depthToUse = clearDepth;
+        }
+        if (clearStencil !== void 0) {
+          stencilToUse = clearStencil;
+        }
+        const clearRenderPass = this.device.beginRenderPass({
+          framebuffer: target,
+          parameters: {
+            viewport: glViewport,
+            scissorRect: glViewport
+          },
+          clearColor: colorToUse,
+          clearDepth: depthToUse,
+          clearStencil: stencilToUse
+        });
+        clearRenderPass.end();
+      }
+    }
+    const renderStatus = {
+      totalCount: layers.length,
+      visibleCount: 0,
+      compositeCount: 0,
+      pickableCount: 0
+    };
+    renderPass.setParameters({ viewport: glViewport });
+    for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
+      const layer = layers[layerIndex];
+      const drawLayerParameters = drawLayerParams[layerIndex];
+      const { shouldDrawLayer } = drawLayerParameters;
+      if (shouldDrawLayer && layer.props.pickable) {
+        renderStatus.pickableCount++;
+      }
+      if (layer.isComposite) {
+        renderStatus.compositeCount++;
+      }
+      if (layer.isDrawable && drawLayerParameters.shouldDrawLayer) {
+        const { layerRenderIndex, shaderModuleProps, layerParameters } = drawLayerParameters;
+        renderStatus.visibleCount++;
+        this._lastRenderIndex = Math.max(this._lastRenderIndex, layerRenderIndex);
+        if (shaderModuleProps.project) {
+          shaderModuleProps.project.viewport = viewport;
+        }
+        layer.context.renderPass = renderPass;
+        try {
+          layer._drawLayer({
+            renderPass,
+            shaderModuleProps,
+            uniforms: { layerIndex: layerRenderIndex },
+            parameters: layerParameters
+          });
+        } catch (err) {
+          layer.raiseError(err, `drawing ${layer} to ${pass}`);
+        }
+      }
+    }
+    return renderStatus;
+  }
+  /* eslint-enable max-depth, max-statements */
+  /* Methods for subclass overrides */
+  shouldDrawLayer(layer) {
+    return true;
+  }
+  getShaderModuleProps(layer, effects, otherShaderModuleProps) {
+    return null;
+  }
+  getLayerParameters(layer, layerIndex, viewport) {
+    return layer.props.parameters;
+  }
+  /* Private */
+  _shouldDrawLayer(layer, drawContext, layerFilter, layerFilterCache) {
+    const shouldDrawLayer = layer.props.visible && this.shouldDrawLayer(layer);
+    if (!shouldDrawLayer) {
+      return false;
+    }
+    drawContext.layer = layer;
+    let parent = layer.parent;
+    while (parent) {
+      if (!parent.props.visible || !parent.filterSubLayer(drawContext)) {
+        return false;
+      }
+      drawContext.layer = parent;
+      parent = parent.parent;
+    }
+    if (layerFilter) {
+      const rootLayerId = drawContext.layer.id;
+      if (!(rootLayerId in layerFilterCache)) {
+        layerFilterCache[rootLayerId] = layerFilter(drawContext);
+      }
+      if (!layerFilterCache[rootLayerId]) {
+        return false;
+      }
+    }
+    layer.activateViewport(drawContext.viewport);
+    return true;
+  }
+  _getShaderModuleProps(layer, effects, pass, canvasContext, overrides) {
+    var _a2, _b;
+    const devicePixelRatio = canvasContext.cssToDeviceRatio();
+    const layerProps = ((_a2 = layer.internalState) == null ? void 0 : _a2.propsInTransition) || layer.props;
+    const shaderModuleProps = {
+      layer: layerProps,
+      picking: {
+        isActive: false
+      },
+      project: {
+        viewport: layer.context.viewport,
+        devicePixelRatio,
+        modelMatrix: layerProps.modelMatrix,
+        coordinateSystem: layerProps.coordinateSystem,
+        coordinateOrigin: layerProps.coordinateOrigin,
+        autoWrapLongitude: layer.wrapLongitude
+      }
+    };
+    if (effects) {
+      for (const effect of effects) {
+        mergeModuleParameters(
+          shaderModuleProps,
+          (_b = effect.getShaderModuleProps) == null ? void 0 : _b.call(effect, layer, shaderModuleProps)
+        );
+      }
+    }
+    for (const module2 of layer.context.defaultShaderModules) {
+      if (!(module2.name in shaderModuleProps)) {
+        shaderModuleProps[module2.name] = {};
+      }
+    }
+    return mergeModuleParameters(
+      shaderModuleProps,
+      this.getShaderModuleProps(layer, effects, shaderModuleProps),
+      overrides
+    );
+  }
+};
+function layerIndexResolver(startIndex = 0, layerIndices = {}) {
+  const resolvers = {};
+  const resolveLayerIndex = (layer, isDrawn) => {
+    const indexOverride = layer.props._offset;
+    const layerId = layer.id;
+    const parentId = layer.parent && layer.parent.id;
+    let index;
+    if (parentId && !(parentId in layerIndices)) {
+      resolveLayerIndex(layer.parent, false);
+    }
+    if (parentId in resolvers) {
+      const resolver = resolvers[parentId] = resolvers[parentId] || layerIndexResolver(layerIndices[parentId], layerIndices);
+      index = resolver(layer, isDrawn);
+      resolvers[layerId] = resolver;
+    } else if (Number.isFinite(indexOverride)) {
+      index = indexOverride + (layerIndices[parentId] || 0);
+      resolvers[layerId] = null;
+    } else {
+      index = startIndex;
+    }
+    if (isDrawn && index >= startIndex) {
+      startIndex = index + 1;
+    }
+    layerIndices[layerId] = index;
+    return index;
+  };
+  return resolveLayerIndex;
+}
+function getGLViewport(device2, {
+  canvasContext = device2.canvasContext,
+  shaderModuleProps,
+  target,
+  viewport
+}) {
+  var _a2;
+  const pixelRatio = ((_a2 = shaderModuleProps == null ? void 0 : shaderModuleProps.project) == null ? void 0 : _a2.devicePixelRatio) ?? canvasContext.cssToDeviceRatio();
+  const [, drawingBufferHeight] = canvasContext.getDrawingBufferSize();
+  const height = target ? target.height : drawingBufferHeight;
+  const dimensions = viewport;
+  return [
+    dimensions.x * pixelRatio,
+    height - (dimensions.y + dimensions.height) * pixelRatio,
+    dimensions.width * pixelRatio,
+    dimensions.height * pixelRatio
+  ];
+}
+function mergeModuleParameters(target, ...sources) {
+  for (const source2 of sources) {
+    if (source2) {
+      for (const key in source2) {
+        if (target[key]) {
+          Object.assign(target[key], source2[key]);
+        } else {
+          target[key] = source2[key];
+        }
+      }
+    }
+  }
+  return target;
+}
+
+// ../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 = 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 = viewMatrix;
+    this.viewMatrix = new import_core2.Matrix4().multiplyRight(viewMatrix).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 offset;
+      if (padding) {
+        const { top = 0, bottom = 0 } = padding;
+        offset = [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,
+        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/passes/pick-layers-pass.ts
+var PICKING_BLENDING = {
+  blendColorOperation: "add",
+  blendColorSrcFactor: "one",
+  blendColorDstFactor: "zero",
+  blendAlphaOperation: "add",
+  blendAlphaSrcFactor: "constant",
+  blendAlphaDstFactor: "zero"
+};
+var PickLayersPass = class extends LayersPass {
+  constructor() {
+    super(...arguments);
+    this._colorEncoderState = null;
+  }
+  render(props) {
+    if ("pickingFBO" in props) {
+      return this._drawPickingBuffer(props);
+    }
+    const stats = super._render(props);
+    return { decodePickingColor: null, stats };
+  }
+  // Private
+  // Draws list of layers and viewports into the picking buffer
+  // Note: does not sample the buffer, that has to be done by the caller
+  _drawPickingBuffer({
+    layers,
+    layerFilter,
+    views,
+    viewports,
+    onViewportActive,
+    pickingFBO,
+    deviceRect: { x, y, width, height },
+    cullRect,
+    effects,
+    pass = "picking",
+    pickZ,
+    canvasContext,
+    shaderModuleProps,
+    clearColor
+  }) {
+    this.pickZ = pickZ;
+    const colorEncoderState = this._resetColorEncoder(pickZ);
+    const scissorRect = [x, y, width, height];
+    const renderStatus = super._render({
+      target: pickingFBO,
+      layers,
+      layerFilter,
+      views,
+      viewports,
+      onViewportActive,
+      cullRect,
+      effects: effects == null ? void 0 : effects.filter((e) => e.useInPicking),
+      pass,
+      canvasContext,
+      isPicking: true,
+      shaderModuleProps,
+      clearColor: clearColor ?? [0, 0, 0, 0],
+      colorMask: 15,
+      scissorRect
+    });
+    this._colorEncoderState = null;
+    const decodePickingColor = colorEncoderState && decodeColor.bind(null, colorEncoderState);
+    return { decodePickingColor, stats: renderStatus };
+  }
+  shouldDrawLayer(layer) {
+    const { pickable, operation } = layer.props;
+    return pickable && operation.includes("draw") || operation.includes("terrain") || operation.includes("mask");
+  }
+  getShaderModuleProps(layer, effects, otherShaderModuleProps) {
+    var _a2;
+    return {
+      picking: {
+        isActive: 1,
+        isAttribute: this.pickZ,
+        disabledPickingIndices: (_a2 = layer.internalState) == null ? void 0 : _a2.disabledPickingIndices
+      },
+      lighting: { enabled: false }
+    };
+  }
+  getLayerParameters(layer, layerIndex, viewport) {
+    var _a2;
+    const pickParameters = {
+      ...layer.props.parameters
+    };
+    const { pickable, operation } = layer.props;
+    if (!this._colorEncoderState) {
+      pickParameters.blend = false;
+    } else if (pickable && operation.includes("draw")) {
+      Object.assign(pickParameters, PICKING_BLENDING);
+      pickParameters.blend = true;
+      if (this.device.type === "webgpu") {
+        pickParameters.blendConstant = encodeColor(this._colorEncoderState, layer, viewport);
+      } else {
+        pickParameters.blendColor = encodeColor(this._colorEncoderState, layer, viewport);
+      }
+      if (operation.includes("terrain") && ((_a2 = layer.state) == null ? void 0 : _a2._hasPickingCover)) {
+        pickParameters.blendAlphaSrcFactor = "one";
+      }
+    } else if (operation.includes("terrain")) {
+      pickParameters.blend = false;
+    }
+    return pickParameters;
+  }
+  _resetColorEncoder(pickZ) {
+    this._colorEncoderState = pickZ ? null : {
+      byLayer: /* @__PURE__ */ new Map(),
+      byAlpha: []
+    };
+    return this._colorEncoderState;
+  }
+};
+function encodeColor(encoded, layer, viewport) {
+  const { byLayer, byAlpha } = encoded;
+  let a;
+  let entry = byLayer.get(layer);
+  if (entry) {
+    entry.viewports.push(viewport);
+    a = entry.a;
+  } else {
+    a = byLayer.size + 1;
+    if (a <= 255) {
+      entry = { a, layer, viewports: [viewport] };
+      byLayer.set(layer, entry);
+      byAlpha[a] = entry;
+    } else {
+      log_default.warn("Too many pickable layers, only picking the first 255")();
+      a = 0;
+    }
+  }
+  return [0, 0, 0, a / 255];
+}
+function decodeColor(encoded, pickedColor) {
+  const entry = encoded.byAlpha[pickedColor[3]];
+  return entry && {
+    pickedLayer: entry.layer,
+    pickedViewports: entry.viewports,
+    pickedObjectIndex: entry.layer.decodePickingColor(pickedColor)
+  };
+}
+
+// ../core/src/lib/layer-manager.ts
+var import_engine = require("@luma.gl/engine");
+
+// ../core/src/lifecycle/constants.ts
+var LIFECYCLE = {
+  NO_STATE: "Awaiting state",
+  MATCHED: "Matched. State transferred from previous layer",
+  INITIALIZED: "Initialized",
+  AWAITING_GC: "Discarded. Awaiting garbage collection",
+  AWAITING_FINALIZATION: "No longer matched. Awaiting garbage collection",
+  FINALIZED: "Finalized! Awaiting garbage collection"
+};
+
+// ../core/src/utils/flatten.ts
+function flatten(array, filter = () => true) {
+  if (!Array.isArray(array)) {
+    return filter(array) ? [array] : [];
+  }
+  return flattenArray(array, filter, []);
+}
+function flattenArray(array, filter, result) {
+  let index = -1;
+  while (++index < array.length) {
+    const value = array[index];
+    if (Array.isArray(value)) {
+      flattenArray(value, filter, result);
+    } else if (filter(value)) {
+      result.push(value);
+    }
+  }
+  return result;
+}
+
+// ../core/src/lib/layer-manager.ts
+var import_stats = require("@probe.gl/stats");
+
+// ../core/src/lib/resource/resource.ts
+var import_core4 = require("@loaders.gl/core");
+var Resource = class {
+  constructor(id, data, context) {
+    this._loadCount = 0;
+    this._subscribers = /* @__PURE__ */ new Set();
+    this.id = id;
+    this.context = context;
+    this.setData(data);
+  }
+  // consumer: {onChange: Function}
+  subscribe(consumer) {
+    this._subscribers.add(consumer);
+  }
+  unsubscribe(consumer) {
+    this._subscribers.delete(consumer);
+  }
+  inUse() {
+    return this._subscribers.size > 0;
+  }
+  delete() {
+  }
+  getData() {
+    return this.isLoaded ? this._error ? Promise.reject(this._error) : this._content : this._loader.then(() => this.getData());
+  }
+  setData(data, forceUpdate) {
+    if (data === this._data && !forceUpdate) {
+      return;
+    }
+    this._data = data;
+    const loadCount = ++this._loadCount;
+    let loader = data;
+    if (typeof data === "string") {
+      loader = (0, import_core4.load)(data);
+    }
+    if (loader instanceof Promise) {
+      this.isLoaded = false;
+      this._loader = loader.then((result) => {
+        if (this._loadCount === loadCount) {
+          this.isLoaded = true;
+          this._error = void 0;
+          this._content = result;
+        }
+      }).catch((error) => {
+        if (this._loadCount === loadCount) {
+          this.isLoaded = true;
+          this._error = error || true;
+        }
+      });
+    } else {
+      this.isLoaded = true;
+      this._error = void 0;
+      this._content = data;
+    }
+    for (const subscriber of this._subscribers) {
+      subscriber.onChange(this.getData());
+    }
+  }
+};
+
+// ../core/src/lib/resource/resource-manager.ts
+var ResourceManager = class {
+  constructor(props) {
+    var _a2;
+    this.protocol = props.protocol || "resource://";
+    this._context = {
+      device: props.device,
+      // @ts-expect-error
+      gl: (_a2 = props.device) == null ? void 0 : _a2.gl,
+      resourceManager: this
+    };
+    this._resources = {};
+    this._consumers = {};
+    this._pruneRequest = null;
+  }
+  contains(resourceId) {
+    if (resourceId.startsWith(this.protocol)) {
+      return true;
+    }
+    return resourceId in this._resources;
+  }
+  add({
+    resourceId,
+    data,
+    forceUpdate = false,
+    persistent = true
+  }) {
+    let res = this._resources[resourceId];
+    if (res) {
+      res.setData(data, forceUpdate);
+    } else {
+      res = new Resource(resourceId, data, this._context);
+      this._resources[resourceId] = res;
+    }
+    res.persistent = persistent;
+  }
+  remove(resourceId) {
+    const res = this._resources[resourceId];
+    if (res) {
+      res.delete();
+      delete this._resources[resourceId];
+    }
+  }
+  unsubscribe({ consumerId }) {
+    const consumer = this._consumers[consumerId];
+    if (consumer) {
+      for (const requestId in consumer) {
+        const request = consumer[requestId];
+        const resource = this._resources[request.resourceId];
+        if (resource) {
+          resource.unsubscribe(request);
+        }
+      }
+      delete this._consumers[consumerId];
+      this.prune();
+    }
+  }
+  subscribe({
+    resourceId,
+    onChange,
+    consumerId,
+    requestId = "default"
+  }) {
+    const { _resources: resources, protocol } = this;
+    if (resourceId.startsWith(protocol)) {
+      resourceId = resourceId.replace(protocol, "");
+      if (!resources[resourceId]) {
+        this.add({ resourceId, data: null, persistent: false });
+      }
+    }
+    const res = resources[resourceId];
+    this._track(consumerId, requestId, res, onChange);
+    if (res) {
+      return res.getData();
+    }
+    return void 0;
+  }
+  prune() {
+    if (!this._pruneRequest) {
+      this._pruneRequest = setTimeout(() => this._prune(), 0);
+    }
+  }
+  finalize() {
+    for (const key in this._resources) {
+      this._resources[key].delete();
+    }
+  }
+  _track(consumerId, requestId, resource, onChange) {
+    const consumers = this._consumers;
+    const consumer = consumers[consumerId] = consumers[consumerId] || {};
+    let request = consumer[requestId];
+    const oldResource = request && request.resourceId && this._resources[request.resourceId];
+    if (oldResource) {
+      oldResource.unsubscribe(request);
+      this.prune();
+    }
+    if (resource) {
+      if (request) {
+        request.onChange = onChange;
+        request.resourceId = resource.id;
+      } else {
+        request = {
+          onChange,
+          resourceId: resource.id
+        };
+      }
+      consumer[requestId] = request;
+      resource.subscribe(request);
+    }
+  }
+  _prune() {
+    this._pruneRequest = null;
+    for (const key of Object.keys(this._resources)) {
+      const res = this._resources[key];
+      if (!res.persistent && !res.inUse()) {
+        res.delete();
+        delete this._resources[key];
+      }
+    }
+  }
+};
+
+// ../core/src/lib/layer-manager.ts
+var TRACE_SET_LAYERS = "layerManager.setLayers";
+var TRACE_ACTIVATE_VIEWPORT = "layerManager.activateViewport";
+var LayerManager = class {
+  /**
+   * @param device
+   * @param param1
+   */
+  // eslint-disable-next-line
+  constructor(device2, props) {
+    this._lastRenderedLayers = [];
+    this._needsRedraw = false;
+    this._needsUpdate = false;
+    this._nextLayers = null;
+    this._debug = false;
+    // This flag is separate from _needsUpdate because it can be set during an update and should trigger another full update
+    this._defaultShaderModulesChanged = false;
+    //
+    // INTERNAL METHODS
+    //
+    /** Make a viewport "current" in layer context, updating viewportChanged flags */
+    this.activateViewport = (viewport) => {
+      debug(TRACE_ACTIVATE_VIEWPORT, this, viewport);
+      if (viewport) {
+        this.context.viewport = viewport;
+      }
+    };
+    var _a2;
+    const { deck, stats, viewport, timeline } = props || {};
+    this.layers = [];
+    this.resourceManager = new ResourceManager({ device: device2, protocol: "deck://" });
+    this.context = {
+      mousePosition: null,
+      userData: {},
+      layerManager: this,
+      device: device2,
+      // @ts-expect-error
+      gl: device2 == null ? void 0 : device2.gl,
+      deck,
+      shaderAssembler: getShaderAssembler(((_a2 = device2 == null ? void 0 : device2.info) == null ? void 0 : _a2.shadingLanguage) || "glsl"),
+      defaultShaderModules: [layerUniforms],
+      renderPass: void 0,
+      stats: stats || new import_stats.Stats({ id: "deck.gl" }),
+      // Make sure context.viewport is not empty on the first layer initialization
+      viewport: viewport || new Viewport({ id: "DEFAULT-INITIAL-VIEWPORT" }),
+      // Current viewport, exposed to layers for project* function
+      timeline: timeline || new import_engine.Timeline(),
+      resourceManager: this.resourceManager,
+      onError: void 0
+    };
+    Object.seal(this);
+  }
+  /** Method to call when the layer manager is not needed anymore. */
+  finalize() {
+    this.resourceManager.finalize();
+    for (const layer of this.layers) {
+      this._finalizeLayer(layer);
+    }
+  }
+  /** Check if a redraw is needed */
+  needsRedraw(opts = { clearRedrawFlags: false }) {
+    let redraw = this._needsRedraw;
+    if (opts.clearRedrawFlags) {
+      this._needsRedraw = false;
+    }
+    for (const layer of this.layers) {
+      const layerNeedsRedraw = layer.getNeedsRedraw(opts);
+      redraw = redraw || layerNeedsRedraw;
+    }
+    return redraw;
+  }
+  /** Check if a deep update of all layers is needed */
+  needsUpdate() {
+    if (this._nextLayers && this._nextLayers !== this._lastRenderedLayers) {
+      return "layers changed";
+    }
+    if (this._defaultShaderModulesChanged) {
+      return "shader modules changed";
+    }
+    return this._needsUpdate;
+  }
+  /** Layers will be redrawn (in next animation frame) */
+  setNeedsRedraw(reason) {
+    this._needsRedraw = this._needsRedraw || reason;
+  }
+  /** Layers will be updated deeply (in next animation frame)
+    Potentially regenerating attributes and sub layers */
+  setNeedsUpdate(reason) {
+    this._needsUpdate = this._needsUpdate || reason;
+  }
+  /** Gets a list of currently rendered layers. Optionally filter by id. */
+  getLayers({ layerIds } = {}) {
+    return layerIds ? this.layers.filter((layer) => layerIds.find((layerId) => layer.id.indexOf(layerId) === 0)) : this.layers;
+  }
+  /** Set props needed for layer rendering and picking. */
+  setProps(props) {
+    if ("debug" in props) {
+      this._debug = props.debug;
+    }
+    if ("userData" in props) {
+      this.context.userData = props.userData;
+    }
+    if ("layers" in props) {
+      this._nextLayers = props.layers;
+    }
+    if ("onError" in props) {
+      this.context.onError = props.onError;
+    }
+  }
+  /** Supply a new layer list, initiating sublayer generation and layer matching */
+  setLayers(newLayers, reason) {
+    debug(TRACE_SET_LAYERS, this, reason, newLayers);
+    this._lastRenderedLayers = newLayers;
+    const flatLayers = flatten(newLayers, Boolean);
+    for (const layer of flatLayers) {
+      layer.context = this.context;
+    }
+    this._updateLayers(this.layers, flatLayers);
+  }
+  /** Update layers from last cycle if `setNeedsUpdate()` has been called */
+  updateLayers() {
+    const reason = this.needsUpdate();
+    if (reason) {
+      this.setNeedsRedraw(`updating layers: ${reason}`);
+      this.setLayers(this._nextLayers || this._lastRenderedLayers, reason);
+    }
+    this._nextLayers = null;
+  }
+  /** Register a default shader module */
+  addDefaultShaderModule(module2) {
+    const { defaultShaderModules } = this.context;
+    if (!defaultShaderModules.find((m) => m.name === module2.name)) {
+      defaultShaderModules.push(module2);
+      this._defaultShaderModulesChanged = true;
+    }
+  }
+  /** Deregister a default shader module */
+  removeDefaultShaderModule(module2) {
+    const { defaultShaderModules } = this.context;
+    const i = defaultShaderModules.findIndex((m) => m.name === module2.name);
+    if (i >= 0) {
+      defaultShaderModules.splice(i, 1);
+      this._defaultShaderModulesChanged = true;
+    }
+  }
+  _handleError(stage, error, layer) {
+    layer.raiseError(error, `${stage} of ${layer}`);
+  }
+  // TODO - mark layers with exceptions as bad and remove from rendering cycle?
+  /** Match all layers, checking for caught errors
+    to avoid having an exception in one layer disrupt other layers */
+  _updateLayers(oldLayers, newLayers) {
+    const oldLayerMap = {};
+    for (const oldLayer of oldLayers) {
+      if (oldLayerMap[oldLayer.id]) {
+        log_default.warn(`Multiple old layers with same id ${oldLayer.id}`)();
+      } else {
+        oldLayerMap[oldLayer.id] = oldLayer;
+      }
+    }
+    if (this._defaultShaderModulesChanged) {
+      for (const layer of oldLayers) {
+        layer.setNeedsUpdate();
+        layer.setChangeFlags({ extensionsChanged: true });
+      }
+      this._defaultShaderModulesChanged = false;
+    }
+    const generatedLayers = [];
+    this._updateSublayersRecursively(newLayers, oldLayerMap, generatedLayers);
+    this._finalizeOldLayers(oldLayerMap);
+    let needsUpdate = false;
+    for (const layer of generatedLayers) {
+      if (layer.hasUniformTransition()) {
+        needsUpdate = `Uniform transition in ${layer}`;
+        break;
+      }
+    }
+    this._needsUpdate = needsUpdate;
+    this.layers = generatedLayers;
+  }
+  /* eslint-disable complexity,max-statements */
+  // Note: adds generated layers to `generatedLayers` array parameter
+  _updateSublayersRecursively(newLayers, oldLayerMap, generatedLayers) {
+    for (const newLayer of newLayers) {
+      newLayer.context = this.context;
+      const oldLayer = oldLayerMap[newLayer.id];
+      if (oldLayer === null) {
+        log_default.warn(`Multiple new layers with same id ${newLayer.id}`)();
+      }
+      oldLayerMap[newLayer.id] = null;
+      let sublayers = null;
+      try {
+        if (this._debug && oldLayer !== newLayer) {
+          newLayer.validateProps();
+        }
+        if (!oldLayer) {
+          this._initializeLayer(newLayer);
+        } else {
+          this._transferLayerState(oldLayer, newLayer);
+          this._updateLayer(newLayer);
+        }
+        generatedLayers.push(newLayer);
+        sublayers = newLayer.isComposite ? newLayer.getSubLayers() : null;
+      } catch (err) {
+        this._handleError("matching", err, newLayer);
+      }
+      if (sublayers) {
+        this._updateSublayersRecursively(sublayers, oldLayerMap, generatedLayers);
+      }
+    }
+  }
+  /* eslint-enable complexity,max-statements */
+  // Finalize any old layers that were not matched
+  _finalizeOldLayers(oldLayerMap) {
+    for (const layerId in oldLayerMap) {
+      const layer = oldLayerMap[layerId];
+      if (layer) {
+        this._finalizeLayer(layer);
+      }
+    }
+  }
+  // / EXCEPTION SAFE LAYER ACCESS
+  /** Safely initializes a single layer, calling layer methods */
+  _initializeLayer(layer) {
+    try {
+      layer._initialize();
+      layer.lifecycle = LIFECYCLE.INITIALIZED;
+    } catch (err) {
+      this._handleError("initialization", err, layer);
+    }
+  }
+  /** Transfer state from one layer to a newer version */
+  _transferLayerState(oldLayer, newLayer) {
+    newLayer._transferState(oldLayer);
+    newLayer.lifecycle = LIFECYCLE.MATCHED;
+    if (newLayer !== oldLayer) {
+      oldLayer.lifecycle = LIFECYCLE.AWAITING_GC;
+    }
+  }
+  /** Safely updates a single layer, cleaning all flags */
+  _updateLayer(layer) {
+    try {
+      layer._update();
+    } catch (err) {
+      this._handleError("update", err, layer);
+    }
+  }
+  /** Safely finalizes a single layer, removing all resources */
+  _finalizeLayer(layer) {
+    this._needsRedraw = this._needsRedraw || `finalized ${layer}`;
+    layer.lifecycle = LIFECYCLE.AWAITING_FINALIZATION;
+    try {
+      layer._finalize();
+      layer.lifecycle = LIFECYCLE.FINALIZED;
+    } catch (err) {
+      this._handleError("finalization", err, layer);
+    }
+  }
+};
+
+// ../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, source2) {
+  target = target.slice();
+  for (let i = 0; i < source2.length; i++) {
+    const v = source2[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/controllers/map-controller.ts
+var import_core7 = require("@math.gl/core");
+
+// ../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 _a2, _b;
+    this.cancel();
+    this.settings = settings;
+    this._inProgress = true;
+    (_b = (_a2 = this.settings).onStart) == null ? void 0 : _b.call(_a2, this);
+  }
+  /**
+   * end this transition if it is in progress.
+   */
+  end() {
+    var _a2, _b;
+    if (this._inProgress) {
+      this._timeline.removeChannel(this._handle);
+      this._handle = null;
+      this._inProgress = false;
+      (_b = (_a2 = this.settings).onEnd) == null ? void 0 : _b.call(_a2, this);
+    }
+  }
+  /**
+   * cancel this transition if it is in progress.
+   */
+  cancel() {
+    var _a2, _b;
+    if (this._inProgress) {
+      (_b = (_a2 = this.settings).onInterrupt) == null ? void 0 : _b.call(_a2, this);
+      this._timeline.removeChannel(this._handle);
+      this._handle = null;
+      this._inProgress = false;
+    }
+  }
+  /**
+   * update this transition. Returns `true` if updated.
+   */
+  update() {
+    var _a2, _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 = (_a2 = this.settings).onUpdate) == null ? void 0 : _b.call(_a2, 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_core5 = 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_core5.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_core6 = 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_core6.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_core6.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 _a2;
+    for (const eventName in this._events) {
+      if (this._events[eventName]) {
+        (_a2 = this.eventManager) == null ? void 0 : _a2.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/controllers/map-controller.ts
+var import_web_mercator4 = require("@math.gl/web-mercator");
+var PITCH_MOUSE_THRESHOLD = 5;
+var PITCH_ACCEL = 1.2;
+var WEB_MERCATOR_TILE_SIZE = 512;
+var WEB_MERCATOR_MAX_BOUNDS = [
+  [-Infinity, -90],
+  [Infinity, 90]
+];
+var ZOOM_RUBBER_BAND_RANGE = 1;
+function lngLatToWorld2([lng, lat]) {
+  if (Math.abs(lat) > 90) {
+    lat = Math.sign(lat) * 90;
+  }
+  if (Number.isFinite(lng)) {
+    const [x, y2] = (0, import_web_mercator4.lngLatToWorld)([lng, lat]);
+    return [x, (0, import_core7.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
+  }
+  const [, y] = (0, import_web_mercator4.lngLatToWorld)([0, lat]);
+  return [lng, (0, import_core7.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
+}
+var MapState = class extends ViewState {
+  constructor(options) {
+    const {
+      /** Mapbox viewport properties */
+      /** The width of the viewport */
+      width,
+      /** The height of the viewport */
+      height,
+      /** The latitude at the center of the viewport */
+      latitude,
+      /** The longitude at the center of the viewport */
+      longitude,
+      /** The tile zoom level of the map. */
+      zoom,
+      /** The bearing of the viewport in degrees */
+      bearing = 0,
+      /** The pitch of the viewport in degrees */
+      pitch = 0,
+      /**
+       * Specify the altitude of the viewport camera
+       * Unit: map heights, default 1.5
+       * Non-public API, see https://github.com/mapbox/mapbox-gl-js/issues/1137
+       */
+      altitude = 1.5,
+      /** Viewport position */
+      position = [0, 0, 0],
+      /** Viewport constraints */
+      maxZoom = 20,
+      minZoom = 0,
+      maxPitch = 60,
+      minPitch = 0,
+      /** Interaction states, required to calculate change during transform */
+      /* The point on map being grabbed when the operation first started */
+      startPanLngLat,
+      /* Center of the zoom when the operation first started */
+      startZoomLngLat,
+      /* Pointer position when rotation started */
+      startRotatePos,
+      /* The lng/lat point at the rotation pivot (where rotation started) */
+      startRotateLngLat,
+      /** Bearing when current perspective rotate operation started */
+      startBearing,
+      /** Pitch when current perspective rotate operation started */
+      startPitch,
+      /** Zoom when current zoom operation started */
+      startZoom,
+      /** Normalize viewport props to fit map height into viewport */
+      normalize = true,
+      rubberBand = false
+    } = options;
+    const { [CONSTRAINT_AROUND]: constraintAround } = options;
+    assert(Number.isFinite(longitude));
+    assert(Number.isFinite(latitude));
+    assert(Number.isFinite(zoom));
+    const maxBounds = options.maxBounds || (normalize ? WEB_MERCATOR_MAX_BOUNDS : null);
+    const maxBoundsPadding = options.maxBoundsPadding || null;
+    super(
+      {
+        width,
+        height,
+        latitude,
+        longitude,
+        zoom,
+        bearing,
+        pitch,
+        altitude,
+        maxZoom,
+        minZoom,
+        maxPitch,
+        minPitch,
+        normalize,
+        position,
+        maxBounds,
+        maxBoundsPadding,
+        rubberBand,
+        ...{ [CONSTRAINT_AROUND]: constraintAround }
+      },
+      {
+        startPanLngLat,
+        startZoomLngLat,
+        startRotatePos,
+        startRotateLngLat,
+        startBearing,
+        startPitch,
+        startZoom
+      },
+      options.makeViewport,
+      options.constraintContext
+    );
+    this.getAltitude = options.getAltitude;
+  }
+  /**
+   * Start panning
+   * @param {[Number, Number]} pos - position on screen where the pointer grabs
+   */
+  panStart({ pos }, constraintContext) {
+    return this._getUpdatedState(
+      {
+        startPanLngLat: this._unproject(pos)
+      },
+      constraintContext
+    );
+  }
+  /**
+   * Pan
+   * @param {[Number, Number]} pos - position on screen where the pointer is
+   * @param {[Number, Number], optional} startPos - where the pointer grabbed at
+   *   the start of the operation. Must be supplied of `panStart()` was not called
+   */
+  pan({ pos, startPos }, constraintContext) {
+    const startPanLngLat = this.getState().startPanLngLat || this._unproject(startPos);
+    if (!startPanLngLat) {
+      return this;
+    }
+    const viewport = this.makeViewport(this.getViewportProps());
+    const newProps = viewport.panByPosition(startPanLngLat, pos);
+    return this._getUpdatedState(newProps, constraintContext);
+  }
+  /**
+   * End panning
+   * Must call if `panStart()` was called
+   */
+  panEnd(constraintContext) {
+    return this._getUpdatedState(
+      {
+        startPanLngLat: null
+      },
+      constraintContext
+    );
+  }
+  /**
+   * Start rotating
+   * @param {[Number, Number]} pos - position on screen where the center is
+   */
+  rotateStart({ pos }) {
+    var _a2;
+    const altitude = (_a2 = this.getAltitude) == null ? void 0 : _a2.call(this, pos);
+    return this._getUpdatedState({
+      startRotatePos: pos,
+      startRotateLngLat: altitude !== void 0 ? this._unproject3D(pos, altitude) : void 0,
+      startBearing: this.getViewportProps().bearing,
+      startPitch: this.getViewportProps().pitch
+    });
+  }
+  /**
+   * Rotate
+   * @param {[Number, Number]} pos - position on screen where the center is
+   */
+  rotate({
+    pos,
+    deltaAngleX = 0,
+    deltaAngleY = 0
+  }) {
+    const { startRotatePos, startRotateLngLat, startBearing, startPitch } = this.getState();
+    if (!startRotatePos || startBearing === void 0 || startPitch === void 0) {
+      return this;
+    }
+    let newRotation;
+    if (pos) {
+      newRotation = this._getNewRotation(pos, startRotatePos, startPitch, startBearing);
+    } else {
+      newRotation = {
+        bearing: startBearing + deltaAngleX,
+        pitch: startPitch + deltaAngleY
+      };
+    }
+    if (startRotateLngLat) {
+      const rotatedViewport = this.makeViewport({
+        ...this.getViewportProps(),
+        ...newRotation
+      });
+      const panMethod = "panByPosition3D" in rotatedViewport ? "panByPosition3D" : "panByPosition";
+      return this._getUpdatedState({
+        ...newRotation,
+        ...rotatedViewport[panMethod](startRotateLngLat, startRotatePos)
+      });
+    }
+    return this._getUpdatedState(newRotation);
+  }
+  /**
+   * End rotating
+   * Must call if `rotateStart()` was called
+   */
+  rotateEnd() {
+    return this._getUpdatedState({
+      startRotatePos: null,
+      startRotateLngLat: null,
+      startBearing: null,
+      startPitch: null
+    });
+  }
+  /**
+   * Start zooming
+   * @param {[Number, Number]} pos - position on screen where the center is
+   */
+  zoomStart({ pos }, constraintContext) {
+    return this._getUpdatedState(
+      {
+        startZoomLngLat: this._unproject(pos),
+        startZoom: this.getViewportProps().zoom
+      },
+      constraintContext
+    );
+  }
+  /**
+   * Zoom
+   * @param {[Number, Number]} pos - position on screen where the current center is
+   * @param {[Number, Number]} startPos - the center 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, startZoomLngLat } = this.getState();
+    if (!startZoomLngLat) {
+      startZoom = this.getViewportProps().zoom;
+      startZoomLngLat = this._unproject(startPos) || this._unproject(pos);
+    }
+    if (!startZoomLngLat) {
+      return this;
+    }
+    return this._getUpdatedState(
+      {
+        zoom: startZoom + Math.log2(scale),
+        [CONSTRAINT_AROUND]: { position: startZoomLngLat, screenPosition: pos }
+      },
+      constraintContext
+    );
+  }
+  /**
+   * End zooming
+   * Must call if `zoomStart()` was called
+   */
+  zoomEnd(constraintContext) {
+    return this._getUpdatedState(
+      {
+        startZoomLngLat: null,
+        startZoom: null
+      },
+      constraintContext
+    );
+  }
+  zoomIn(speed = 2, constraintContext) {
+    return this._zoomFromCenter(speed, constraintContext);
+  }
+  zoomOut(speed = 2, constraintContext) {
+    return this._zoomFromCenter(1 / speed, constraintContext);
+  }
+  moveLeft(speed = 100, constraintContext) {
+    return this._panFromCenter([speed, 0], constraintContext);
+  }
+  moveRight(speed = 100, constraintContext) {
+    return this._panFromCenter([-speed, 0], constraintContext);
+  }
+  moveUp(speed = 100, constraintContext) {
+    return this._panFromCenter([0, speed], constraintContext);
+  }
+  moveDown(speed = 100, constraintContext) {
+    return this._panFromCenter([0, -speed], constraintContext);
+  }
+  rotateLeft(speed = 15) {
+    return this._getUpdatedState({
+      bearing: this.getViewportProps().bearing - speed
+    });
+  }
+  rotateRight(speed = 15) {
+    return this._getUpdatedState({
+      bearing: this.getViewportProps().bearing + speed
+    });
+  }
+  rotateUp(speed = 10) {
+    return this._getUpdatedState({
+      pitch: this.getViewportProps().pitch + speed
+    });
+  }
+  rotateDown(speed = 10) {
+    return this._getUpdatedState({
+      pitch: this.getViewportProps().pitch - speed
+    });
+  }
+  shortestPathFrom(viewState) {
+    const fromProps = viewState.getViewportProps();
+    const props = { ...this.getViewportProps() };
+    const { bearing, longitude } = props;
+    if (Math.abs(bearing - fromProps.bearing) > 180) {
+      props.bearing = bearing < 0 ? bearing + 360 : bearing - 360;
+    }
+    if (Math.abs(longitude - fromProps.longitude) > 180) {
+      props.longitude = longitude < 0 ? longitude + 360 : longitude - 360;
+    }
+    return props;
+  }
+  // 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 { maxPitch, minPitch, pitch, bearing, normalize, maxBounds, rubberBand } = props;
+    if (normalize) {
+      if (bearing < -180 || bearing > 180) {
+        props.bearing = mod(bearing + 180, 360) - 180;
+      }
+    }
+    props.pitch = (0, import_core7.clamp)(pitch, minPitch, maxPitch);
+    const constrainedZoom = this._constrainZoom(props.zoom, props);
+    const shouldRubberBand = rubberBand && (constraintContext == null ? void 0 : constraintContext.mode) === "elastic";
+    props.zoom = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? props.zoom : shouldRubberBand ? applyRubberBand(props.zoom, constrainedZoom, ZOOM_RUBBER_BAND_RANGE) : constrainedZoom;
+    if (constraintAround) {
+      const viewport = this.makeViewport(props);
+      Object.assign(
+        props,
+        viewport.panByPosition(constraintAround.position, constraintAround.screenPosition)
+      );
+    }
+    if (normalize && (props.longitude < -180 || props.longitude > 180)) {
+      props.longitude = mod(props.longitude + 180, 360) - 180;
+    }
+    if (maxBounds) {
+      const maxBoundsRect = getMaxBoundsRect(props.width, props.height, props.maxBoundsPadding);
+      const viewport = this.makeViewport({ ...props, bearing: 0, pitch: 0 });
+      const screenExtents = getMaxBoundsExtents(
+        viewport,
+        [props.longitude, props.latitude],
+        maxBoundsRect
+      );
+      const bl = lngLatToWorld2(maxBounds[0]);
+      const tr = lngLatToWorld2(maxBounds[1]);
+      const scale = 2 ** props.zoom;
+      const minimumCenter = [
+        bl[0] + screenExtents.left / scale,
+        bl[1] + screenExtents.bottom / scale
+      ];
+      const maximumCenter = [
+        tr[0] - screenExtents.right / scale,
+        tr[1] - screenExtents.top / scale
+      ];
+      const center = lngLatToWorld2([props.longitude, props.latitude]);
+      const constrainedCenter = [
+        (0, import_core7.clamp)(center[0], minimumCenter[0], maximumCenter[0]),
+        (0, import_core7.clamp)(center[1], minimumCenter[1], maximumCenter[1])
+      ];
+      const displayedCenter = center.slice();
+      if (maxBoundsRect.width >= 0) {
+        displayedCenter[0] = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? center[0] : shouldRubberBand ? applyRubberBand(center[0], constrainedCenter[0], maxBoundsRect.width / 2 / scale) : constrainedCenter[0];
+      }
+      if (maxBoundsRect.height >= 0) {
+        displayedCenter[1] = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? center[1] : shouldRubberBand ? applyRubberBand(center[1], constrainedCenter[1], maxBoundsRect.height / 2 / scale) : constrainedCenter[1];
+      }
+      if (displayedCenter[0] !== center[0] || displayedCenter[1] !== center[1]) {
+        const [displayedLongitude, displayedLatitude] = (0, import_web_mercator4.worldToLngLat)(displayedCenter);
+        if (displayedCenter[0] !== center[0]) {
+          props.longitude = displayedLongitude;
+        }
+        if (displayedCenter[1] !== center[1]) {
+          props.latitude = displayedLatitude;
+        }
+      }
+    }
+    return props;
+  }
+  /* Private methods */
+  _constrainZoom(zoom, props) {
+    props ||= this.getViewportProps();
+    const { maxZoom, maxBounds } = props;
+    const shouldApplyMaxBounds = maxBounds !== null && props.width > 0 && props.height > 0;
+    let { minZoom } = props;
+    if (shouldApplyMaxBounds) {
+      const maxBoundsRect = getMaxBoundsRect(props.width, props.height, props.maxBoundsPadding);
+      const bl = lngLatToWorld2(maxBounds[0]);
+      const tr = lngLatToWorld2(maxBounds[1]);
+      const w = tr[0] - bl[0];
+      const h = tr[1] - bl[1];
+      if (maxBoundsRect.width > 0 && Number.isFinite(w) && w > 0) {
+        minZoom = Math.max(minZoom, Math.log2(maxBoundsRect.width / w));
+      }
+      if (maxBoundsRect.height > 0 && Number.isFinite(h) && h > 0) {
+        minZoom = Math.max(minZoom, Math.log2(maxBoundsRect.height / h));
+      }
+      if (minZoom > maxZoom) minZoom = maxZoom;
+    }
+    return (0, import_core7.clamp)(zoom, minZoom, maxZoom);
+  }
+  _zoomFromCenter(scale, constraintContext) {
+    const { width, height } = this.getViewportProps();
+    return this.zoom(
+      {
+        pos: [width / 2, height / 2],
+        scale
+      },
+      constraintContext
+    );
+  }
+  _panFromCenter(offset, constraintContext) {
+    const { width, height } = this.getViewportProps();
+    return this.pan(
+      {
+        startPos: [width / 2, height / 2],
+        pos: [width / 2 + offset[0], height / 2 + offset[1]]
+      },
+      constraintContext
+    );
+  }
+  _getUpdatedState(newProps, constraintContext) {
+    return new this.constructor({
+      makeViewport: this.makeViewport,
+      ...this.getViewportProps(),
+      ...this.getState(),
+      ...newProps,
+      constraintContext
+    });
+  }
+  _unproject(pos) {
+    const viewport = this.makeViewport(this.getViewportProps());
+    return pos && viewport.unproject(pos);
+  }
+  _unproject3D(pos, altitude) {
+    const viewport = this.makeViewport(this.getViewportProps());
+    return viewport.unproject(pos, { targetZ: altitude });
+  }
+  _getNewRotation(pos, startPos, startPitch, startBearing) {
+    const deltaX = pos[0] - startPos[0];
+    const deltaY = pos[1] - startPos[1];
+    const centerY = pos[1];
+    const startY = startPos[1];
+    const { width, height } = this.getViewportProps();
+    const deltaScaleX = deltaX / width;
+    let deltaScaleY = 0;
+    if (deltaY > 0) {
+      if (Math.abs(height - startY) > PITCH_MOUSE_THRESHOLD) {
+        deltaScaleY = deltaY / (startY - height) * PITCH_ACCEL;
+      }
+    } else if (deltaY < 0) {
+      if (startY > PITCH_MOUSE_THRESHOLD) {
+        deltaScaleY = 1 - centerY / startY;
+      }
+    }
+    deltaScaleY = (0, import_core7.clamp)(deltaScaleY, -1, 1);
+    const { minPitch, maxPitch } = this.getViewportProps();
+    const bearing = startBearing + 180 * deltaScaleX;
+    let pitch = startPitch;
+    if (deltaScaleY > 0) {
+      pitch = startPitch + deltaScaleY * (maxPitch - startPitch);
+    } else if (deltaScaleY < 0) {
+      pitch = startPitch - deltaScaleY * (minPitch - startPitch);
+    }
+    return {
+      pitch,
+      bearing
+    };
+  }
+};
+var MapController = class extends Controller {
+  constructor() {
+    super(...arguments);
+    this.ControllerState = MapState;
+    this.transition = {
+      transitionDuration: 300,
+      transitionInterpolator: new LinearInterpolator({
+        transitionProps: {
+          compare: ["longitude", "latitude", "zoom", "bearing", "pitch", "position"],
+          required: ["longitude", "latitude", "zoom"]
+        }
+      })
+    };
+    this.dragMode = "pan";
+    /**
+     * Rotation pivot behavior:
+     * - 'center': Rotate around viewport center (default)
+     * - '2d': Rotate around pointer position at ground level (z=0)
+     * - '3d': Rotate around 3D picked point (requires pickPosition callback)
+     */
+    this.rotationPivot = "center";
+    /** Add altitude to rotateStart params based on rotationPivot mode */
+    this._getAltitude = (pos) => {
+      if (this.rotationPivot === "2d") {
+        return 0;
+      } else if (this.rotationPivot === "3d") {
+        if (this.pickPosition) {
+          const { x, y } = this.props;
+          const pickResult = this.pickPosition(x + pos[0], y + pos[1]);
+          if (pickResult && pickResult.coordinate && pickResult.coordinate.length >= 3) {
+            return pickResult.coordinate[2];
+          }
+        }
+      }
+      return void 0;
+    };
+  }
+  setProps(props) {
+    if ("rotationPivot" in props) {
+      this.rotationPivot = props.rotationPivot || "center";
+    }
+    props.getAltitude = this._getAltitude;
+    props.position = props.position || [0, 0, 0];
+    props.maxBounds = props.maxBounds || (props.normalize === false ? null : WEB_MERCATOR_MAX_BOUNDS);
+    super.setProps(props);
+  }
+  updateViewport(newControllerState, extraProps = null, interactionState = {}) {
+    const state = newControllerState.getState();
+    if (interactionState.isDragging && state.startRotateLngLat) {
+      interactionState = {
+        ...interactionState,
+        rotationPivotPosition: state.startRotateLngLat
+      };
+    } else if (interactionState.isDragging === false) {
+      interactionState = { ...interactionState, rotationPivotPosition: void 0 };
+    }
+    super.updateViewport(newControllerState, extraProps, interactionState);
+  }
+};
+
+// ../core/src/views/map-view.ts
+var MapView = class extends View {
+  constructor(props = {}) {
+    super(props);
+  }
+  getViewportType() {
+    return WebMercatorViewport;
+  }
+  get ControllerType() {
+    return MapController;
+  }
+};
+MapView.displayName = "MapView";
+
+// ../core/src/passes/draw-layers-pass.ts
+var DrawLayersPass = class extends LayersPass {
+  shouldDrawLayer(layer) {
+    const { operation } = layer.props;
+    return operation.includes("draw") || operation.includes("terrain");
+  }
+  render(options) {
+    return this._render(options);
+  }
+};
+
+// ../core/src/lib/deck-renderer.ts
+var TRACE_RENDER_LAYERS = "deckRenderer.renderLayers";
+var DeckRenderer = class {
+  constructor(device2, opts = {}) {
+    this.device = device2;
+    this.stats = opts.stats;
+    this.layerFilter = null;
+    this.drawPickingColors = false;
+    this.drawLayersPass = new DrawLayersPass(device2);
+    this.pickLayersPass = new PickLayersPass(device2);
+    this.renderCount = 0;
+    this._needsRedraw = "Initial render";
+    this.renderBuffers = [];
+    this.lastPostProcessEffect = null;
+  }
+  setProps(props) {
+    if (this.layerFilter !== props.layerFilter) {
+      this.layerFilter = props.layerFilter;
+      this._needsRedraw = "layerFilter changed";
+    }
+    if (this.drawPickingColors !== props.drawPickingColors) {
+      this.drawPickingColors = props.drawPickingColors;
+      this._needsRedraw = "drawPickingColors changed";
+    }
+  }
+  renderLayers(opts) {
+    const layerPass = this.drawPickingColors ? this.pickLayersPass : this.drawLayersPass;
+    const renderOpts = {
+      layerFilter: this.layerFilter,
+      isPicking: this.drawPickingColors,
+      ...opts
+    };
+    if (!opts.viewports.length) {
+      const renderResult2 = layerPass.render(renderOpts);
+      const renderStats2 = "stats" in renderResult2 ? renderResult2.stats : renderResult2;
+      this._updateStats(renderStats2);
+      return;
+    }
+    if (renderOpts.effects) {
+      this._preRender(renderOpts.effects, renderOpts);
+    }
+    const outputBuffer = this.lastPostProcessEffect ? this.renderBuffers[0] : renderOpts.target;
+    if (this.lastPostProcessEffect) {
+      renderOpts.clearColor = [0, 0, 0, 0];
+      renderOpts.clearCanvas = true;
+    }
+    const renderResult = layerPass.render({ ...renderOpts, target: outputBuffer });
+    const renderStats = "stats" in renderResult ? renderResult.stats : renderResult;
+    if (renderOpts.effects) {
+      if (this.lastPostProcessEffect) {
+        renderOpts.clearCanvas = opts.clearCanvas === void 0 ? true : opts.clearCanvas;
+      }
+      this._postRender(renderOpts.effects, renderOpts);
+    }
+    this.renderCount++;
+    debug(TRACE_RENDER_LAYERS, this, renderStats, opts);
+    this._updateStats(renderStats);
+  }
+  needsRedraw(opts = { clearRedrawFlags: false }) {
+    const redraw = this._needsRedraw;
+    if (opts.clearRedrawFlags) {
+      this._needsRedraw = false;
+    }
+    return redraw;
+  }
+  finalize() {
+    const { renderBuffers } = this;
+    for (const buffer of renderBuffers) {
+      buffer.delete();
+    }
+    renderBuffers.length = 0;
+  }
+  _updateStats(source2) {
+    if (!this.stats) return;
+    let layersCount = 0;
+    for (const { visibleCount } of source2) {
+      layersCount += visibleCount;
+    }
+    this.stats.get("Layers rendered").addCount(layersCount);
+  }
+  _preRender(effects, opts) {
+    this.lastPostProcessEffect = null;
+    opts.preRenderStats = opts.preRenderStats || {};
+    for (const effect of effects) {
+      opts.preRenderStats[effect.id] = effect.preRender(opts);
+      if (effect.postRender) {
+        this.lastPostProcessEffect = effect.id;
+      }
+    }
+    if (this.lastPostProcessEffect) {
+      this._resizeRenderBuffers(opts.canvasContext);
+    }
+  }
+  _resizeRenderBuffers(canvasContext = this.device.canvasContext) {
+    const { renderBuffers } = this;
+    const size = canvasContext.getDrawingBufferSize();
+    const [width, height] = size;
+    if (renderBuffers.length === 0) {
+      [0, 1].map((i) => {
+        const texture = this.device.createTexture({
+          sampler: { minFilter: "linear", magFilter: "linear" },
+          width,
+          height
+        });
+        renderBuffers.push(
+          this.device.createFramebuffer({
+            id: `deck-renderbuffer-${i}`,
+            colorAttachments: [texture]
+          })
+        );
+      });
+    }
+    for (const buffer of renderBuffers) {
+      buffer.resize(size);
+    }
+  }
+  _postRender(effects, opts) {
+    var _a2;
+    const { renderBuffers } = this;
+    const target = opts.target ?? ((_a2 = opts.canvasContext) == null ? void 0 : _a2.getCurrentFramebuffer()) ?? opts.target;
+    const params = {
+      ...opts,
+      inputBuffer: renderBuffers[0],
+      swapBuffer: renderBuffers[1]
+    };
+    for (const effect of effects) {
+      if (effect.postRender) {
+        params.target = effect.id === this.lastPostProcessEffect ? target : void 0;
+        const buffer = effect.postRender(params);
+        params.inputBuffer = buffer;
+        params.swapBuffer = buffer === renderBuffers[0] ? renderBuffers[1] : renderBuffers[0];
+      }
+    }
+  }
+};
+
+// ../core/src/utils/count.ts
+var ERR_NOT_OBJECT = "count(): argument not an object";
+var ERR_NOT_CONTAINER = "count(): argument not a container";
+function count(container) {
+  if (!isObject(container)) {
+    throw new Error(ERR_NOT_OBJECT);
+  }
+  if (typeof container.count === "function") {
+    return container.count();
+  }
+  if (Number.isFinite(container.size)) {
+    return container.size;
+  }
+  if (Number.isFinite(container.length)) {
+    return container.length;
+  }
+  if (isPlainObject(container)) {
+    return Object.keys(container).length;
+  }
+  throw new Error(ERR_NOT_CONTAINER);
+}
+function isPlainObject(value) {
+  return value !== null && typeof value === "object" && value.constructor === Object;
+}
+function isObject(value) {
+  return value !== null && typeof value === "object";
+}
 
 // dist/utils/setup-gl.js
 var import_test_utils = require("@luma.gl/test-utils");
@@ -44,7 +4222,7 @@ var gl = ((_a = import_test_utils.webglDevice) == null ? void 0 : _a.gl) || 1;
 globalThis.glContext = globalThis.glContext || gl;
 
 // dist/lifecycle-test.js
-var testViewport = new import_core.MapView({}).makeViewport({
+var testViewport = new MapView({}).makeViewport({
   width: 100,
   height: 100,
   viewState: { longitude: 0, latitude: 0, zoom: 1 }
@@ -55,7 +4233,7 @@ function defaultOnError(error, title) {
   }
 }
 function initializeLayerManager({ layer, viewport = testViewport, onError = defaultOnError }) {
-  const layerManager = new import_core.LayerManager(device, { viewport });
+  const layerManager = new LayerManager(device, { viewport });
   layerManager.setProps({
     onError: (error) => onError(error, `initializing ${layer.id}`)
   });
@@ -74,7 +4252,7 @@ function testInitializeLayer(opts) {
 }
 async function testInitializeLayerAsync(opts) {
   const layerManager = initializeLayerManager(opts);
-  const deckRenderer = new import_core.DeckRenderer(device);
+  const deckRenderer = new DeckRenderer(device);
   while (!opts.layer.isLoaded) {
     await update({ layerManager, deckRenderer, oldResourceCounts: {} });
   }
@@ -124,8 +4302,8 @@ async function testLayerAsync(opts) {
 }
 function setupLayerTests(testTitle, { viewport = testViewport, timeline, onError = defaultOnError }) {
   const oldResourceCounts = getResourceCounts();
-  const layerManager = new import_core.LayerManager(device, { viewport, timeline });
-  const deckRenderer = new import_core.DeckRenderer(device);
+  const layerManager = new LayerManager(device, { viewport, timeline });
+  const deckRenderer = new DeckRenderer(device);
   const props = {
     layerFilter: null,
     drawPickingColors: false,
@@ -267,8 +4445,7 @@ function toLowPrecision(input, precision = 11) {
 }
 
 // dist/generate-layer-tests.js
-var import_core2 = require("@deck.gl/core");
-function noop() {
+function noop2() {
 }
 function defaultAssert(condition, comment) {
   if (!condition) {
@@ -279,12 +4456,12 @@ function generateLayerTests({
   // eslint-disable-next-line @typescript-eslint/no-shadow
   Layer,
   sampleProps = {},
-  assert = defaultAssert,
-  onBeforeUpdate = noop,
-  onAfterUpdate = noop,
+  assert: assert2 = defaultAssert,
+  onBeforeUpdate = noop2,
+  onAfterUpdate = noop2,
   runDefaultAsserts = true
 }) {
-  assert(Layer.layerName, "Layer should have display name");
+  assert2(Layer.layerName, "Layer should have display name");
   function wrapTestCaseTitle(title) {
     return `${Layer.layerName}#${title}`;
   }
@@ -306,20 +4483,20 @@ function generateLayerTests({
   try {
     new Layer({});
   } catch (error) {
-    assert(false, `Construct ${Layer.layerName} throws: ${error.message}`);
+    assert2(false, `Construct ${Layer.layerName} throws: ${error.message}`);
   }
   const { _propTypes: propTypes, _mergedDefaultProps: defaultProps } = Layer;
   testCases.push(...makeAltDataTestCases(sampleProps, propTypes));
   for (const propName in Layer.defaultProps) {
     if (!(propName in sampleProps)) {
-      const newTestCase = makeAltPropTestCase({ propName, propTypes, defaultProps, sampleProps, assert }) || [];
+      const newTestCase = makeAltPropTestCase({ propName, propTypes, defaultProps, sampleProps, assert: assert2 }) || [];
       testCases.push(...newTestCase);
     }
   }
   testCases.forEach((testCase) => {
     testCase.title = wrapTestCaseTitle(testCase.title);
-    const beforeFunc = testCase.onBeforeUpdate || noop;
-    const afterFunc = testCase.onAfterUpdate || noop;
+    const beforeFunc = testCase.onBeforeUpdate || noop2;
+    const afterFunc = testCase.onAfterUpdate || noop2;
     testCase.onBeforeUpdate = (params) => {
       beforeFunc(params);
       onBeforeUpdate(params);
@@ -330,18 +4507,18 @@ function generateLayerTests({
       if (runDefaultAsserts) {
         if (params.layer.isComposite) {
           const { data } = params.layer.props;
-          if (data && typeof data === "object" && (0, import_core2._count)(data)) {
-            assert(params.subLayers.length, "Layer should have sublayers");
+          if (data && typeof data === "object" && count(data)) {
+            assert2(params.subLayers.length, "Layer should have sublayers");
           }
         } else {
-          assert(params.layer.getModels().length, "Layer should have models");
+          assert2(params.layer.getModels().length, "Layer should have models");
         }
       }
     };
   });
   return testCases;
 }
-function makeAltPropTestCase({ propName, propTypes, defaultProps, sampleProps, assert }) {
+function makeAltPropTestCase({ propName, propTypes, defaultProps, sampleProps, assert: assert2 }) {
   const newProps = { ...sampleProps };
   const propDef = propTypes[propName];
   if (!propDef) {
@@ -383,7 +4560,7 @@ function makeAltPropTestCase({ propName, propTypes, defaultProps, sampleProps, a
         [propName]: "function"
       };
       const onBeforeUpdate = () => callCount = 0;
-      const onAfterUpdate = () => assert(callCount > 0, "accessor function is called");
+      const onAfterUpdate = () => assert2(callCount > 0, "accessor function is called");
       return [
         {
           title: `${propName}: () => ${defaultProps[propName]}`,