deck.gl 9.3.0-alpha.6 → 9.3.0-beta.1

package/dist/dist.dev.js

@@ -30931,33 +30931,33 @@ float smoothedge(float edge, float x) {
     /**
      * `LNGLAT` if rendering into a geospatial viewport, `CARTESIAN` otherwise
      */
-    DEFAULT: -1,
+    DEFAULT: "default",
     /**
      * Positions are interpreted as [longitude, latitude, elevation]
      * longitude/latitude are in degrees, elevation is in meters.
      * Dimensions are in meters.
      */
-    LNGLAT: 1,
+    LNGLAT: "lnglat",
     /**
      * Positions are interpreted as [x, y, z] in meter offsets from the coordinate origin.
      * Dimensions are in meters.
      */
-    METER_OFFSETS: 2,
+    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: 3,
+    LNGLAT_OFFSETS: "lnglat-offsets",
     /**
      * Positions and dimensions are in the common units of the viewport.
      */
-    CARTESIAN: 0
+    CARTESIAN: "cartesian"
   };
   Object.defineProperty(COORDINATE_SYSTEM, "IDENTITY", {
     get: () => {
       log_default.deprecated("COORDINATE_SYSTEM.IDENTITY", "COORDINATE_SYSTEM.CARTESIAN")();
-      return 0;
+      return COORDINATE_SYSTEM.CARTESIAN;
     }
   });
   var PROJECTION_MODE = {
@@ -31043,6 +31043,20 @@ float smoothedge(float edge, float x) {
   var IDENTITY_MATRIX4 = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
   var DEFAULT_PIXELS_PER_UNIT2 = [0, 0, 0];
   var DEFAULT_COORDINATE_ORIGIN = [0, 0, 0];
+  var COORDINATE_SYSTEM_NUMBERS = {
+    default: -1,
+    cartesian: 0,
+    lnglat: 1,
+    "meter-offsets": 2,
+    "lnglat-offsets": 3
+  };
+  function getShaderCoordinateSystem(coordinateSystem) {
+    const shaderCoordinateSystem = COORDINATE_SYSTEM_NUMBERS[coordinateSystem];
+    if (shaderCoordinateSystem === void 0) {
+      throw new Error(`Invalid coordinateSystem: ${coordinateSystem}`);
+    }
+    return shaderCoordinateSystem;
+  }
   var getMemoizedViewportUniforms = memoize(calculateViewportUniforms);
   function getOffsetOrigin(viewport, coordinateSystem, coordinateOrigin = DEFAULT_COORDINATE_ORIGIN) {
     if (coordinateOrigin.length < 3) {
@@ -31051,7 +31065,7 @@ float smoothedge(float edge, float x) {
     let shaderCoordinateOrigin = coordinateOrigin;
     let geospatialOrigin;
     let offsetMode = true;
-    if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS || coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {
+    if (coordinateSystem === "lnglat-offsets" || coordinateSystem === "meter-offsets") {
       geospatialOrigin = coordinateOrigin;
     } else {
       geospatialOrigin = viewport.isGeospatial ? (
@@ -31061,15 +31075,15 @@ float smoothedge(float edge, float x) {
     }
     switch (viewport.projectionMode) {
       case PROJECTION_MODE.WEB_MERCATOR:
-        if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT || coordinateSystem === COORDINATE_SYSTEM.CARTESIAN) {
+        if (coordinateSystem === "lnglat" || coordinateSystem === "cartesian") {
           geospatialOrigin = [0, 0, 0];
           offsetMode = false;
         }
         break;
       case PROJECTION_MODE.WEB_MERCATOR_AUTO_OFFSET:
-        if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT) {
+        if (coordinateSystem === "lnglat") {
           shaderCoordinateOrigin = geospatialOrigin;
-        } else if (coordinateSystem === COORDINATE_SYSTEM.CARTESIAN) {
+        } else if (coordinateSystem === "cartesian") {
           shaderCoordinateOrigin = [
             Math.fround(viewport.center[0]),
             Math.fround(viewport.center[1]),
@@ -31133,12 +31147,12 @@ float smoothedge(float edge, float x) {
     devicePixelRatio: devicePixelRatio2 = 1,
     modelMatrix: modelMatrix2 = null,
     // Match Layer.defaultProps
-    coordinateSystem = COORDINATE_SYSTEM.DEFAULT,
+    coordinateSystem = "default",
     coordinateOrigin = DEFAULT_COORDINATE_ORIGIN,
     autoWrapLongitude = false
   }) {
-    if (coordinateSystem === COORDINATE_SYSTEM.DEFAULT) {
-      coordinateSystem = viewport.isGeospatial ? COORDINATE_SYSTEM.LNGLAT : COORDINATE_SYSTEM.CARTESIAN;
+    if (coordinateSystem === "default") {
+      coordinateSystem = viewport.isGeospatial ? "lnglat" : "cartesian";
     }
     const uniforms = getMemoizedViewportUniforms({
       viewport,
@@ -31172,7 +31186,7 @@ float smoothedge(float edge, float x) {
     const focalDistance = vec4_exports.transformMat4([], [0, 0, -viewport.focalDistance, 1], viewport.projectionMatrix)[3] || 1;
     const uniforms = {
       // Projection mode values
-      coordinateSystem,
+      coordinateSystem: getShaderCoordinateSystem(coordinateSystem),
       projectionMode: viewport.projectionMode,
       coordinateOrigin: shaderCoordinateOrigin,
       commonOrigin: originCommon.slice(0, 3),
@@ -31199,19 +31213,19 @@ float smoothedge(float edge, float x) {
     if (geospatialOrigin) {
       const distanceScalesAtOrigin = viewport.getDistanceScales(geospatialOrigin);
       switch (coordinateSystem) {
-        case COORDINATE_SYSTEM.METER_OFFSETS:
+        case "meter-offsets":
           uniforms.commonUnitsPerWorldUnit = distanceScalesAtOrigin.unitsPerMeter;
           uniforms.commonUnitsPerWorldUnit2 = distanceScalesAtOrigin.unitsPerMeter2;
           break;
-        case COORDINATE_SYSTEM.LNGLAT:
-        case COORDINATE_SYSTEM.LNGLAT_OFFSETS:
+        case "lnglat":
+        case "lnglat-offsets":
           if (!viewport._pseudoMeters) {
             uniforms.commonUnitsPerMeter = distanceScalesAtOrigin.unitsPerMeter;
           }
           uniforms.commonUnitsPerWorldUnit = distanceScalesAtOrigin.unitsPerDegree;
           uniforms.commonUnitsPerWorldUnit2 = distanceScalesAtOrigin.unitsPerDegree2;
           break;
-        case COORDINATE_SYSTEM.CARTESIAN:
+        case "cartesian":
           uniforms.commonUnitsPerWorldUnit = [1, 1, distanceScalesAtOrigin.unitsPerMeter[2]];
           uniforms.commonUnitsPerWorldUnit2 = [0, 0, distanceScalesAtOrigin.unitsPerMeter2[2]];
           break;
@@ -31223,7 +31237,16 @@ float smoothedge(float edge, float x) {
   }
 
   // ../core/src/shaderlib/project/project.wgsl.ts
-  var COORDINATE_SYSTEM_WGSL_CONSTANTS = Object.keys(COORDINATE_SYSTEM).map((key) => `const COORDINATE_SYSTEM_${key}: i32 = ${COORDINATE_SYSTEM[key]};`).join("");
+  var SHADER_COORDINATE_SYSTEMS = [
+    "default",
+    "lnglat",
+    "meter-offsets",
+    "lnglat-offsets",
+    "cartesian"
+  ];
+  var COORDINATE_SYSTEM_WGSL_CONSTANTS = SHADER_COORDINATE_SYSTEMS.map(
+    (coordinateSystem) => `const COORDINATE_SYSTEM_${coordinateSystem.toUpperCase().replaceAll("-", "_")}: i32 = ${getShaderCoordinateSystem(coordinateSystem)};`
+  ).join("");
   var PROJECTION_MODE_WGSL_CONSTANTS = Object.keys(PROJECTION_MODE).map((key) => `const PROJECTION_MODE_${key}: i32 = ${PROJECTION_MODE[key]};`).join("");
   var UNIT_WGSL_CONSTANTS = Object.keys(UNIT).map((key) => `const UNIT_${key.toUpperCase()}: i32 = ${UNIT[key]};`).join("");
   var projectWGSLHeader = (
@@ -31517,7 +31540,16 @@ fn project_pixel_size_vec2(pixels: vec2<f32>) -> vec2<f32> {
   );
 
   // ../core/src/shaderlib/project/project.glsl.ts
-  var COORDINATE_SYSTEM_GLSL_CONSTANTS = Object.keys(COORDINATE_SYSTEM).map((key) => `const int COORDINATE_SYSTEM_${key} = ${COORDINATE_SYSTEM[key]};`).join("");
+  var SHADER_COORDINATE_SYSTEMS2 = [
+    "default",
+    "lnglat",
+    "meter-offsets",
+    "lnglat-offsets",
+    "cartesian"
+  ];
+  var COORDINATE_SYSTEM_GLSL_CONSTANTS = SHADER_COORDINATE_SYSTEMS2.map(
+    (coordinateSystem) => `const int COORDINATE_SYSTEM_${coordinateSystem.toUpperCase().replaceAll("-", "_")} = ${getShaderCoordinateSystem(coordinateSystem)};`
+  ).join("");
   var PROJECTION_MODE_GLSL_CONSTANTS = Object.keys(PROJECTION_MODE).map((key) => `const int PROJECTION_MODE_${key} = ${PROJECTION_MODE[key]};`).join("");
   var UNIT_GLSL_CONSTANTS = Object.keys(UNIT).map((key) => `const int UNIT_${key.toUpperCase()} = ${UNIT[key]};`).join("");
   var projectGLSL = (
@@ -32425,7 +32457,7 @@ ${fragment}
     for (let i4 = 0; i4 < opts.shadowMatrices.length; i4++) {
       const viewProjectionMatrix = viewProjectionMatrices[i4];
       const viewProjectionMatrixCentered = viewProjectionMatrix.clone().translate(new Vector3(projectProps.viewport.center).negate());
-      if (projectUniforms.coordinateSystem === COORDINATE_SYSTEM.LNGLAT && projectUniforms.projectionMode === PROJECTION_MODE.WEB_MERCATOR) {
+      if (projectUniforms.coordinateSystem === getShaderCoordinateSystem("lnglat") && projectUniforms.projectionMode === PROJECTION_MODE.WEB_MERCATOR) {
         viewProjectionMatrices[i4] = viewProjectionMatrixCentered;
         projectCenters[i4] = center2;
       } else {
@@ -32485,7 +32517,7 @@ ${fragment}
   isActive: f32,
   isAttribute: f32,
   isHighlightActive: f32,
-  useFloatColors: f32,
+  useByteColors: f32,
   highlightedObjectColor: vec3<f32>,
   highlightColor: vec4<f32>,
 };
@@ -32493,11 +32525,11 @@ ${fragment}
 @group(0) @binding(auto) var<uniform> picking: pickingUniforms;
 
 fn picking_normalizeColor(color: vec3<f32>) -> vec3<f32> {
-  return select(color / 255.0, color, picking.useFloatColors > 0.5);
+  return select(color, color / 255.0, picking.useByteColors > 0.5);
 }
 
 fn picking_normalizeColor4(color: vec4<f32>) -> vec4<f32> {
-  return select(color / 255.0, color, picking.useFloatColors > 0.5);
+  return select(color, color / 255.0, picking.useByteColors > 0.5);
 }
 
 fn picking_isColorZero(color: vec3<f32>) -> bool {
@@ -32512,7 +32544,7 @@ fn picking_isColorValid(color: vec3<f32>) -> bool {
   var picking_default = {
     ...picking,
     source: sourceWGSL,
-    defaultUniforms: { ...picking.defaultUniforms, useFloatColors: false },
+    defaultUniforms: { ...picking.defaultUniforms, useByteColors: true },
     inject: {
       "vs:DECKGL_FILTER_GL_POSITION": `
     // for picking depth values
@@ -33892,11 +33924,13 @@ fn picking_isColorValid(color: vec3<f32>) -> bool {
   function normalizeParameters(opts) {
     const { viewport, modelMatrix: modelMatrix2, coordinateOrigin } = opts;
     let { coordinateSystem, fromCoordinateSystem, fromCoordinateOrigin } = opts;
-    if (coordinateSystem === COORDINATE_SYSTEM.DEFAULT) {
-      coordinateSystem = viewport.isGeospatial ? COORDINATE_SYSTEM.LNGLAT : COORDINATE_SYSTEM.CARTESIAN;
+    if (coordinateSystem === "default") {
+      coordinateSystem = viewport.isGeospatial ? "lnglat" : "cartesian";
     }
     if (fromCoordinateSystem === void 0) {
       fromCoordinateSystem = coordinateSystem;
+    } else if (fromCoordinateSystem === "default") {
+      fromCoordinateSystem = viewport.isGeospatial ? "lnglat" : "cartesian";
     }
     if (fromCoordinateOrigin === void 0) {
       fromCoordinateOrigin = coordinateOrigin;
@@ -33922,23 +33956,32 @@ fn picking_isColorValid(color: vec3<f32>) -> bool {
       [x2, y3, z3] = vec4_exports.transformMat4([], [x2, y3, z3, 1], modelMatrix2);
     }
     switch (coordinateSystem) {
-      case COORDINATE_SYSTEM.LNGLAT:
+      case "default":
+        return getWorldPosition(position, {
+          viewport,
+          modelMatrix: modelMatrix2,
+          coordinateSystem: viewport.isGeospatial ? "lnglat" : "cartesian",
+          coordinateOrigin,
+          offsetMode
+        });
+      case "lnglat":
         return lngLatZToWorldPosition([x2, y3, z3], viewport, offsetMode);
-      case COORDINATE_SYSTEM.LNGLAT_OFFSETS:
+      case "lnglat-offsets":
         return lngLatZToWorldPosition(
           [x2 + coordinateOrigin[0], y3 + coordinateOrigin[1], z3 + (coordinateOrigin[2] || 0)],
           viewport,
           offsetMode
         );
-      case COORDINATE_SYSTEM.METER_OFFSETS:
+      case "meter-offsets":
         return lngLatZToWorldPosition(
           addMetersToLngLat(coordinateOrigin, [x2, y3, z3]),
           viewport,
           offsetMode
         );
-      case COORDINATE_SYSTEM.CARTESIAN:
-      default:
+      case "cartesian":
         return viewport.isGeospatial ? [x2 + coordinateOrigin[0], y3 + coordinateOrigin[1], z3 + coordinateOrigin[2]] : viewport.projectPosition([x2, y3, z3]);
+      default:
+        throw new Error(`Invalid coordinateSystem: ${coordinateSystem}`);
     }
   }
   function projectPosition(position, params) {
@@ -44349,10 +44392,14 @@ void main() {
         }
         if (!this.value) {
         } else if (this.constant || !this.buffer || this.buffer.byteLength < this.value.byteLength + this.byteOffset) {
-          this.setData({
-            value: this.value,
-            constant: this.constant
-          });
+          if (this.constant) {
+            this.setConstantValue(context, this.value);
+          } else {
+            this.setData({
+              value: this.value,
+              constant: this.constant
+            });
+          }
           this.constant = false;
         } else {
           for (const [startRow, endRow] of updateRanges) {
@@ -44372,17 +44419,13 @@ void main() {
     // Use generic value
     // Returns true if successful
     setConstantValue(context, value) {
-      const isWebGPU = this.device.type === "webgpu";
-      if (isWebGPU || value === void 0 || typeof value === "function") {
-        if (isWebGPU && typeof value !== "function") {
-          const normalisedValue = this._normalizeValue(value, [], 0);
-          if (!this._areValuesEqual(normalisedValue, this.value)) {
-            this.setNeedsUpdate("WebGPU constant updated");
-          }
-        }
+      if (value === void 0 || typeof value === "function") {
         return false;
       }
       const transformedValue = this.settings.transform && context ? this.settings.transform.call(context, value) : value;
+      if (this.device.type === "webgpu") {
+        return this.setConstantBufferValue(transformedValue, this.numInstances);
+      }
       const hasChanged = this.setData({ constant: true, value: transformedValue });
       if (hasChanged) {
         this.setNeedsRedraw();
@@ -44390,6 +44433,41 @@ void main() {
       this.clearNeedsUpdate();
       return true;
     }
+    setConstantBufferValue(value, numInstances) {
+      const ArrayType = this.settings.defaultType;
+      const constantValue = this._normalizeValue(value, new ArrayType(this.size), 0);
+      if (this._hasConstantBufferValue(constantValue, numInstances)) {
+        this.constant = false;
+        this.clearNeedsUpdate();
+        return false;
+      }
+      const repeatedValue = new ArrayType(Math.max(numInstances, 1) * this.size);
+      for (let i4 = 0; i4 < repeatedValue.length; i4 += this.size) {
+        repeatedValue.set(constantValue, i4);
+      }
+      const hasChanged = this.setData({ value: repeatedValue });
+      this.constant = false;
+      this.clearNeedsUpdate();
+      if (hasChanged) {
+        this.setNeedsRedraw();
+      }
+      return hasChanged;
+    }
+    _hasConstantBufferValue(value, numInstances) {
+      const currentValue = this.value;
+      const expectedLength = Math.max(numInstances, 1) * this.size;
+      if (!ArrayBuffer.isView(currentValue) || currentValue.length !== expectedLength || currentValue.length % this.size !== 0) {
+        return false;
+      }
+      for (let i4 = 0; i4 < currentValue.length; i4 += this.size) {
+        for (let j3 = 0; j3 < this.size; j3++) {
+          if (currentValue[i4 + j3] !== value[j3]) {
+            return false;
+          }
+        }
+      }
+      return true;
+    }
     // Use external buffer
     // Returns true if successful
     // eslint-disable-next-line max-statements
@@ -44498,18 +44576,10 @@ void main() {
       props,
       numInstances
     }) {
-      if (attribute.constant) {
-        if (this.context.device.type !== "webgpu") {
-          return;
-        }
-      }
       const { settings, state, value, size: size2, startIndices } = attribute;
       const { accessor, transform: transform2 } = settings;
-      let accessorFunc = state.binaryAccessor || // @ts-ignore
+      const accessorFunc = state.binaryAccessor || // @ts-ignore
       (typeof accessor === "function" ? accessor : props[accessor]);
-      if (typeof accessorFunc !== "function" && typeof accessor === "string") {
-        accessorFunc = () => props[accessor];
-      }
       assert10(typeof accessorFunc === "function", `accessor "${accessor}" is not a function`);
       let i4 = attribute.getVertexOffset(startRow);
       const { iterable, objectInfo } = createIterable(data, startRow, endRow);
@@ -46665,7 +46735,7 @@ void main(void) {
     onDragStart: { type: "function", value: null, optional: true },
     onDrag: { type: "function", value: null, optional: true },
     onDragEnd: { type: "function", value: null, optional: true },
-    coordinateSystem: COORDINATE_SYSTEM.DEFAULT,
+    coordinateSystem: "default",
     coordinateOrigin: { type: "array", value: [0, 0, 0], compare: true },
     modelMatrix: { type: "array", value: null, compare: true, optional: true },
     wrapLongitude: false,
@@ -46809,7 +46879,7 @@ void main(void) {
     }
     use64bitPositions() {
       const { coordinateSystem } = this.props;
-      return coordinateSystem === COORDINATE_SYSTEM.DEFAULT || coordinateSystem === COORDINATE_SYSTEM.LNGLAT || coordinateSystem === COORDINATE_SYSTEM.CARTESIAN;
+      return coordinateSystem === "default" || coordinateSystem === "lnglat" || coordinateSystem === "cartesian";
     }
     // Event handling
     onHover(info, pickingEvent) {
@@ -47189,7 +47259,6 @@ void main(void) {
     /* (Internal) Called by layer manager when a new layer is found */
     _initialize() {
       assert10(!this.internalState);
-      assert10(Number.isFinite(this.props.coordinateSystem));
       debug(TRACE_INITIALIZE, this);
       const attributeManager = this._getAttributeManager();
       if (attributeManager) {
@@ -50212,7 +50281,7 @@ void main(void) {
   var defaultProps4 = {
     image: { type: "image", value: null, async: true },
     bounds: { type: "array", value: [1, 0, 0, 1], compare: true },
-    _imageCoordinateSystem: COORDINATE_SYSTEM.DEFAULT,
+    _imageCoordinateSystem: "default",
     desaturate: { type: "number", min: 0, max: 1, value: 0 },
     // More context: because of the blending mode we're using for ground imagery,
     // alpha is not effective when blending the bitmap layers with the base map.
@@ -50344,19 +50413,18 @@ void main(void) {
       }
     }
     _getCoordinateUniforms() {
-      const { LNGLAT, CARTESIAN, DEFAULT } = COORDINATE_SYSTEM;
       let { _imageCoordinateSystem: imageCoordinateSystem } = this.props;
-      if (imageCoordinateSystem !== DEFAULT) {
+      if (imageCoordinateSystem !== "default") {
         const { bounds } = this.props;
         if (!isRectangularBounds(bounds)) {
           throw new Error("_imageCoordinateSystem only supports rectangular bounds");
         }
-        const defaultImageCoordinateSystem = this.context.viewport.resolution ? LNGLAT : CARTESIAN;
-        imageCoordinateSystem = imageCoordinateSystem === LNGLAT ? LNGLAT : CARTESIAN;
-        if (imageCoordinateSystem === LNGLAT && defaultImageCoordinateSystem === CARTESIAN) {
+        const defaultImageCoordinateSystem = this.context.viewport.resolution ? "lnglat" : "cartesian";
+        imageCoordinateSystem = imageCoordinateSystem === "lnglat" ? "lnglat" : "cartesian";
+        if (imageCoordinateSystem === "lnglat" && defaultImageCoordinateSystem === "cartesian") {
           return { coordinateConversion: -1, bounds };
         }
-        if (imageCoordinateSystem === CARTESIAN && defaultImageCoordinateSystem === LNGLAT) {
+        if (imageCoordinateSystem === "cartesian" && defaultImageCoordinateSystem === "lnglat") {
           const bottomLeft = lngLatToWorld([bounds[0], bounds[1]]);
           const topRight = lngLatToWorld([bounds[2], bounds[3]]);
           return {
@@ -50745,7 +50813,8 @@ fn fragmentMain(inp: Varyings) -> @location(0) vec4<f32> {
       width: oldWidth,
       height: oldHeight
     });
-    commandEncoder.finish();
+    const commandBuffer = commandEncoder.finish();
+    device.submit(commandBuffer);
     regenerateMipmaps(newTexture);
     texture.destroy();
     return newTexture;
@@ -52072,7 +52141,7 @@ void main(void) {
 
   float distToCenter = length(unitPosition) * outerRadiusPixels;
   float inCircle = scatterplot.antialiasing ?
-    smoothedge(distToCenter, outerRadiusPixels) : 
+    smoothedge(distToCenter, outerRadiusPixels) :
     step(distToCenter, outerRadiusPixels);
 
   if (inCircle == 0.0) {
@@ -52080,7 +52149,7 @@ void main(void) {
   }
 
   if (scatterplot.stroked > 0.5) {
-    float isLine = scatterplot.antialiasing ? 
+    float isLine = scatterplot.antialiasing ?
       smoothedge(innerUnitRadius * outerRadiusPixels, distToCenter) :
       step(innerUnitRadius * outerRadiusPixels, distToCenter);
 
@@ -52174,7 +52243,7 @@ struct Attributes {
   @location(4) instanceLineWidths: f32,
   @location(5) instanceFillColors: vec4<f32>,
   @location(6) instanceLineColors: vec4<f32>,
-  @location(7) instancePickingColors: vec3<f32>
+  @location(7) instancePickingColors: vec3<f32>,
 };
 
 struct Varyings {
@@ -55100,11 +55169,11 @@ void main(void) {
       const { viewport } = this.context;
       let { coordinateSystem } = this.props;
       const { _full3d } = this.props;
-      if (viewport.isGeospatial && coordinateSystem === COORDINATE_SYSTEM.DEFAULT) {
-        coordinateSystem = COORDINATE_SYSTEM.LNGLAT;
+      if (viewport.isGeospatial && coordinateSystem === "default") {
+        coordinateSystem = "lnglat";
       }
       let preproject;
-      if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT) {
+      if (coordinateSystem === "lnglat") {
         if (_full3d) {
           preproject = viewport.projectPosition.bind(viewport);
         } else {
@@ -55671,6 +55740,7 @@ void main(void) {
   var glslUniformBlock3 = `layout(std140) uniform textUniforms {
   highp vec2 cutoffPixels;
   highp ivec2 align;
+  highp float fontSize;
   bool flipY;
 } text;
 
@@ -55685,15 +55755,18 @@ void main(void) {
       contentCutoffPixels = [0, 0],
       contentAlignHorizontal = "none",
       contentAlignVertical = "none",
+      fontSize,
       viewport
     }) => ({
       cutoffPixels: contentCutoffPixels,
       align: [CONTENT_ALIGN[contentAlignHorizontal], CONTENT_ALIGN[contentAlignVertical]],
+      fontSize,
       flipY: viewport?.flipY ?? false
     }),
     uniformTypes: {
       cutoffPixels: "vec2<f32>",
       align: "vec2<i32>",
+      fontSize: "f32",
       flipY: "f32"
     }
   };
@@ -55762,9 +55835,7 @@ void main(void) {
     icon.sizeMinPixels, icon.sizeMaxPixels
   );
 
-  // Choose correct constraint based on the 'sizeBasis' value (0.0 = width, 1.0 = height)
-  float iconConstraint = icon.sizeBasis == 0.0 ? iconSize.x : iconSize.y;
-  float instanceScale = iconConstraint == 0.0 ? 0.0 : sizePixels / iconConstraint;
+  float instanceScale = sizePixels / text.fontSize;
 
   // scale and rotate vertex in "pixel" value and convert back to fraction in clipspace
   vec2 pixelOffset = positions / 2.0 * iconSize + instanceOffsets;
@@ -55902,6 +55973,7 @@ void main(void) {
   var defaultProps14 = {
     getIconOffsets: { type: "accessor", value: (x2) => x2.offsets },
     getContentBox: { type: "accessor", value: [0, 0, -1, -1] },
+    fontSize: 1,
     alphaCutoff: 1e-3,
     smoothing: 0.1,
     outlineWidth: 0,
@@ -55959,6 +56031,7 @@ void main(void) {
       const {
         sdf,
         smoothing,
+        fontSize,
         outlineWidth,
         contentCutoffPixels,
         contentAlignHorizontal,
@@ -55978,6 +56051,7 @@ void main(void) {
         contentCutoffPixels,
         contentAlignHorizontal,
         contentAlignVertical,
+        fontSize,
         viewport: this.context.viewport
       };
       model.shaderInputs.setProps({ sdf: sdfProps, text: textProps });
@@ -56005,7 +56079,7 @@ void main(void) {
           for (const char of Array.from(text)) {
             const def = super.getInstanceIconDef(char);
             def[0] = offsets[j3 * 2];
-            def[1] = offsets[j3 * 2 + 1];
+            def[1] += offsets[j3 * 2 + 1];
             def[6] = 1;
             output.set(def, i4);
             i4 += attribute.size;
@@ -56141,47 +56215,52 @@ void main(void) {
   }
   function buildMapping2({
     characterSet,
-    getFontWidth,
-    fontHeight,
+    measureText: measureText2,
     buffer,
     maxCanvasWidth,
     mapping = {},
     xOffset = 0,
-    yOffset = 0
+    yOffsetMin = 0,
+    yOffsetMax = 0
   }) {
-    let row = 0;
+    const row = 0;
     let x2 = xOffset;
-    const rowHeight = fontHeight + buffer * 2;
+    let yMin = yOffsetMin;
+    let yMax = yOffsetMax;
     for (const char of characterSet) {
       if (!mapping[char]) {
-        const width = getFontWidth(char);
+        const { advance, width, ascent, descent } = measureText2(char);
+        const height = ascent + descent;
         if (x2 + width + buffer * 2 > maxCanvasWidth) {
           x2 = 0;
-          row++;
+          yMin = yMax;
         }
         mapping[char] = {
           x: x2 + buffer,
-          y: yOffset + row * rowHeight + buffer,
+          y: yMin + buffer,
           width,
-          height: rowHeight,
-          layoutWidth: width,
-          layoutHeight: fontHeight
+          height,
+          advance,
+          anchorX: width / 2,
+          anchorY: ascent
         };
         x2 += width + buffer * 2;
+        yMax = Math.max(yMax, yMin + height + buffer * 2);
       }
     }
     return {
       mapping,
       xOffset: x2,
-      yOffset: yOffset + row * rowHeight,
-      canvasHeight: nextPowOfTwo2(yOffset + (row + 1) * rowHeight)
+      yOffsetMin: yMin,
+      yOffsetMax: yMax,
+      canvasHeight: nextPowOfTwo2(yMax)
     };
   }
   function getTextWidth(text, startIndex, endIndex, mapping) {
     let width = 0;
     for (let i4 = startIndex; i4 < endIndex; i4++) {
       const character = text[i4];
-      width += mapping[character]?.layoutWidth || 0;
+      width += mapping[character]?.advance || 0;
     }
     return width;
   }
@@ -56257,11 +56336,15 @@ void main(void) {
       const character = line[i4];
       const frame = iconMapping[character];
       if (frame) {
-        if (!rowHeight) {
-          rowHeight = frame.layoutHeight;
-        }
-        leftOffsets[i4] = x2 + frame.layoutWidth / 2;
-        x2 += frame.layoutWidth;
+        rowHeight = Math.max(rowHeight, frame.height);
+      }
+    }
+    for (let i4 = startIndex; i4 < endIndex; i4++) {
+      const character = line[i4];
+      const frame = iconMapping[character];
+      if (frame) {
+        leftOffsets[i4] = x2 + frame.anchorX;
+        x2 += frame.advance;
       } else {
         log_default.warn(`Missing character: ${character} (${character.codePointAt(0)})`)();
         leftOffsets[i4] = x2;
@@ -56271,7 +56354,7 @@ void main(void) {
     rowSize[0] = x2;
     rowSize[1] = rowHeight;
   }
-  function transformParagraph(paragraph, lineHeight, wordBreak, maxWidth, iconMapping) {
+  function transformParagraph(paragraph, baselineOffset, lineHeight, wordBreak, maxWidth, iconMapping) {
     const characters = Array.from(paragraph);
     const numCharacters = characters.length;
     const x2 = new Array(numCharacters);
@@ -56280,7 +56363,8 @@ void main(void) {
     const autoWrappingEnabled = (wordBreak === "break-word" || wordBreak === "break-all") && isFinite(maxWidth) && maxWidth > 0;
     const size2 = [0, 0];
     const rowSize = [0, 0];
-    let rowOffsetTop = 0;
+    let rowCount = 0;
+    let rowOffsetTop = baselineOffset + lineHeight / 2;
     let lineStartIndex = 0;
     let lineEndIndex = 0;
     for (let i4 = 0; i4 <= numCharacters; i4++) {
@@ -56295,12 +56379,11 @@ void main(void) {
           const rowEnd = rowIndex < rows.length ? rows[rowIndex] : lineEndIndex;
           transformRow(characters, rowStart, rowEnd, iconMapping, x2, rowSize);
           for (let j3 = rowStart; j3 < rowEnd; j3++) {
-            const char2 = characters[j3];
-            const layoutOffsetY = iconMapping[char2]?.layoutOffsetY || 0;
-            y3[j3] = rowOffsetTop + rowSize[1] / 2 + layoutOffsetY;
+            y3[j3] = rowOffsetTop;
             rowWidth[j3] = rowSize[0];
           }
-          rowOffsetTop = rowOffsetTop + rowSize[1] * lineHeight;
+          rowCount++;
+          rowOffsetTop += lineHeight;
           size2[0] = Math.max(size2[0], rowSize[0]);
         }
         lineStartIndex = lineEndIndex;
@@ -56312,7 +56395,7 @@ void main(void) {
         lineStartIndex++;
       }
     }
-    size2[1] = rowOffsetTop;
+    size2[1] = rowCount * lineHeight;
     return { x: x2, y: y3, rowWidth, size: size2 };
   }
   function getTextFromBuffer({
@@ -56421,8 +56504,8 @@ void main(void) {
     smoothing: 0.1
   };
   var MAX_CANVAS_WIDTH = 1024;
-  var BASELINE_SCALE = 0.9;
-  var HEIGHT_SCALE = 1.2;
+  var DEFAULT_ASCENT = 0.9;
+  var DEFAULT_DESCENT = 0.3;
   var CACHE_LIMIT = 3;
   var cache = new LRUCache(CACHE_LIMIT);
   function getNewChars(cacheKey, characterSet) {
@@ -56454,6 +56537,40 @@ void main(void) {
     ctx.textBaseline = "alphabetic";
     ctx.textAlign = "left";
   }
+  function measureText(ctx, fontSize, char) {
+    if (char === void 0) {
+      const fontMetrics = ctx.measureText("A");
+      if (fontMetrics.fontBoundingBoxAscent) {
+        return {
+          advance: 0,
+          width: 0,
+          ascent: Math.ceil(fontMetrics.fontBoundingBoxAscent),
+          descent: Math.ceil(fontMetrics.fontBoundingBoxDescent)
+        };
+      }
+      return {
+        advance: 0,
+        width: 0,
+        ascent: fontSize * DEFAULT_ASCENT,
+        descent: fontSize * DEFAULT_DESCENT
+      };
+    }
+    const metrics = ctx.measureText(char);
+    if (!metrics.actualBoundingBoxAscent) {
+      return {
+        advance: metrics.width,
+        width: metrics.width,
+        ascent: fontSize * DEFAULT_ASCENT,
+        descent: fontSize * DEFAULT_DESCENT
+      };
+    }
+    return {
+      advance: metrics.width,
+      width: Math.ceil(metrics.actualBoundingBoxRight - metrics.actualBoundingBoxLeft),
+      ascent: Math.ceil(metrics.actualBoundingBoxAscent),
+      descent: Math.ceil(metrics.actualBoundingBoxDescent)
+    };
+  }
   function setFontAtlasCacheLimit(limit) {
     log_default.assert(Number.isFinite(limit) && limit >= CACHE_LIMIT, "Invalid cache limit");
     cache = new LRUCache(limit);
@@ -56473,12 +56590,11 @@ void main(void) {
     get mapping() {
       return this._atlas && this._atlas.mapping;
     }
-    get scale() {
-      const { fontSize, buffer } = this.props;
-      return (fontSize * HEIGHT_SCALE + buffer * 2) / fontSize;
-    }
     setProps(props = {}) {
       Object.assign(this.props, props);
+      if (props._getFontRenderer) {
+        this._getFontRenderer = props._getFontRenderer;
+      }
       this._key = this._getKey();
       const charSet = getNewChars(this._key, this.props.characterSet);
       const cachedFontAtlas = cache.get(this._key);
@@ -56502,49 +56618,62 @@ void main(void) {
       }
       const ctx = canvas.getContext("2d", { willReadFrequently: true });
       setTextStyle(ctx, fontFamily, fontSize, fontWeight);
-      const { mapping, canvasHeight, xOffset, yOffset } = buildMapping2({
-        getFontWidth: (char) => ctx.measureText(char).width,
-        fontHeight: fontSize * HEIGHT_SCALE,
+      const defaultMeasure = (char) => measureText(ctx, fontSize, char);
+      let renderer;
+      if (this._getFontRenderer) {
+        renderer = this._getFontRenderer(this.props);
+      } else if (sdf) {
+        renderer = {
+          measure: defaultMeasure,
+          draw: getSdfFontRenderer(this.props)
+        };
+      }
+      const { mapping, canvasHeight, xOffset, yOffsetMin, yOffsetMax } = buildMapping2({
+        measureText: (char) => renderer ? renderer.measure(char) : defaultMeasure(char),
         buffer,
         characterSet,
         maxCanvasWidth: MAX_CANVAS_WIDTH,
         ...cachedFontAtlas && {
           mapping: cachedFontAtlas.mapping,
           xOffset: cachedFontAtlas.xOffset,
-          yOffset: cachedFontAtlas.yOffset
+          yOffsetMin: cachedFontAtlas.yOffsetMin,
+          yOffsetMax: cachedFontAtlas.yOffsetMax
         }
       });
       if (canvas.height !== canvasHeight) {
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const imageData = canvas.height > 0 ? ctx.getImageData(0, 0, canvas.width, canvas.height) : null;
         canvas.height = canvasHeight;
-        ctx.putImageData(imageData, 0, 0);
+        if (imageData) {
+          ctx.putImageData(imageData, 0, 0);
+        }
       }
       setTextStyle(ctx, fontFamily, fontSize, fontWeight);
-      if (sdf) {
-        const tinySDF = new TinySDF({
-          fontSize,
-          buffer,
-          radius,
-          cutoff,
-          fontFamily,
-          fontWeight: `${fontWeight}`
-        });
+      if (renderer) {
         for (const char of characterSet) {
-          const { data, width, height, glyphTop } = tinySDF.draw(char);
-          mapping[char].width = width;
-          mapping[char].layoutOffsetY = fontSize * BASELINE_SCALE - glyphTop;
-          const imageData = ctx.createImageData(width, height);
-          populateAlphaChannel(data, imageData);
-          ctx.putImageData(imageData, mapping[char].x, mapping[char].y);
+          const frame = mapping[char];
+          const { data, left = 0, top = 0 } = renderer.draw(char);
+          const x2 = frame.x - left;
+          const y3 = frame.y - top;
+          const x0 = Math.max(0, Math.round(x2));
+          const y0 = Math.max(0, Math.round(y3));
+          const w4 = Math.min(data.width, canvas.width - x0);
+          const h4 = Math.min(data.height, canvas.height - y0);
+          ctx.putImageData(data, x0, y0, 0, 0, w4, h4);
+          frame.x += x0 - x2;
+          frame.y += y0 - y3;
         }
       } else {
         for (const char of characterSet) {
-          ctx.fillText(char, mapping[char].x, mapping[char].y + buffer + fontSize * BASELINE_SCALE);
+          const frame = mapping[char];
+          ctx.fillText(char, frame.x, frame.y + frame.anchorY);
         }
       }
+      const fontMetrics = renderer ? renderer.measure() : defaultMeasure();
       return {
+        baselineOffset: (fontMetrics.ascent - fontMetrics.descent) / 2,
         xOffset,
-        yOffset,
+        yOffsetMin,
+        yOffsetMax,
         mapping,
         data: canvas,
         width: canvas.width,
@@ -56559,6 +56688,29 @@ void main(void) {
       return `${fontFamily} ${fontWeight} ${fontSize} ${buffer}`;
     }
   };
+  function getSdfFontRenderer({
+    fontSize,
+    buffer,
+    radius,
+    cutoff,
+    fontFamily,
+    fontWeight
+  }) {
+    const tinySDF = new TinySDF({
+      fontSize,
+      buffer,
+      radius,
+      cutoff,
+      fontFamily,
+      fontWeight: `${fontWeight}`
+    });
+    return (char) => {
+      const { data, width, height } = tinySDF.draw(char);
+      const imageData = new ImageData(width, height);
+      populateAlphaChannel(data, imageData);
+      return { data: imageData, left: buffer, top: buffer };
+    };
+  }
 
   // ../layers/src/text-layer/text-background-layer/text-background-layer-uniforms.ts
   var uniformBlock14 = `layout(std140) uniform textBackgroundUniforms {
@@ -56636,10 +56788,11 @@ void main(void) {
     project_size_to_pixel(instanceSizes * textBackground.sizeScale, textBackground.sizeUnits),
     textBackground.sizeMinPixels, textBackground.sizeMaxPixels
   );
+  float instanceScale = sizePixels / text.fontSize;
 
-  dimensions = instanceRects.zw * sizePixels + textBackground.padding.xy + textBackground.padding.zw;
+  dimensions = instanceRects.zw * instanceScale + textBackground.padding.xy + textBackground.padding.zw;
 
-  vec2 pixelOffset = (positions * instanceRects.zw + instanceRects.xy) * sizePixels + mix(-textBackground.padding.xy, textBackground.padding.zw, positions);
+  vec2 pixelOffset = (positions * instanceRects.zw + instanceRects.xy) * instanceScale + mix(-textBackground.padding.xy, textBackground.padding.zw, positions);
   pixelOffset = rotate_by_angle(pixelOffset, instanceAngles);
   pixelOffset += instancePixelOffsets;
   pixelOffset.y *= -1.0;
@@ -56730,13 +56883,15 @@ void main(void) {
 
   if (textBackground.borderRadius != vec4(0.0)) {
     float distToEdge = round_rect(uv, dimensions, textBackground.borderRadius);
+    float shapeAlpha = smoothedge(-distToEdge, 0.0);
+    if (shapeAlpha == 0.0) {
+      discard;
+    }
     if (textBackground.stroked) {
       fragColor = get_stroked_fragColor(distToEdge);
     } else {
       fragColor = vFillColor;
     }
-    // add border radius
-    float shapeAlpha = smoothedge(-distToEdge, 0.0);
     fragColor.a *= shapeAlpha;
   } else {
     if (textBackground.stroked) {
@@ -56757,6 +56912,7 @@ void main(void) {
     sizeUnits: "pixels",
     sizeMinPixels: 0,
     sizeMaxPixels: Number.MAX_SAFE_INTEGER,
+    fontSize: 1,
     borderRadius: { type: "object", value: 0 },
     padding: { type: "array", value: [0, 0, 0, 0] },
     getPosition: { type: "accessor", value: (x2) => x2.position },
@@ -56843,7 +56999,7 @@ void main(void) {
       }
     }
     draw({ uniforms }) {
-      const { billboard, sizeScale, sizeUnits, sizeMinPixels, sizeMaxPixels, getLineWidth } = this.props;
+      const { billboard, sizeScale, sizeUnits, sizeMinPixels, sizeMaxPixels, getLineWidth, fontSize } = this.props;
       let { padding, borderRadius } = this.props;
       if (padding.length < 4) {
         padding = [padding[0], padding[1], padding[0], padding[1]];
@@ -56868,6 +57024,7 @@ void main(void) {
         sizeMaxPixels
       };
       const textProps = {
+        fontSize,
         viewport: this.context.viewport
       };
       model.shaderInputs.setProps({ textBackground: textBackgroundProps, text: textProps });
@@ -56950,12 +57107,9 @@ void main(void) {
        * Used to render the background.
        */
       this.getBoundingRect = (object, objectInfo) => {
-        let {
+        const {
           size: [width, height]
         } = this.transformParagraph(object, objectInfo);
-        const { fontSize } = this.state.fontAtlasManager.props;
-        width /= fontSize;
-        height /= fontSize;
         const { getTextAnchor, getAlignmentBaseline } = this.props;
         const anchorX = TEXT_ANCHOR[typeof getTextAnchor === "function" ? getTextAnchor(object, objectInfo) : getTextAnchor];
         const anchorY = ALIGNMENT_BASELINE[typeof getAlignmentBaseline === "function" ? getAlignmentBaseline(object, objectInfo) : getAlignmentBaseline];
@@ -56970,7 +57124,7 @@ void main(void) {
           x: x2,
           y: y3,
           rowWidth,
-          size: [width, height]
+          size: [, height]
         } = this.transformParagraph(object, objectInfo);
         const anchorX = TEXT_ANCHOR[typeof getTextAnchor === "function" ? getTextAnchor(object, objectInfo) : getTextAnchor];
         const anchorY = ALIGNMENT_BASELINE[typeof getAlignmentBaseline === "function" ? getAlignmentBaseline(object, objectInfo) : getAlignmentBaseline];
@@ -56978,8 +57132,7 @@ void main(void) {
         const offsets = new Array(numCharacters * 2);
         let index = 0;
         for (let i4 = 0; i4 < numCharacters; i4++) {
-          const rowOffset = (1 - anchorX) * (width - rowWidth[i4]) / 2;
-          offsets[index++] = (anchorX - 1) * width / 2 + rowOffset + x2[i4];
+          offsets[index++] = (anchorX - 1) * rowWidth[i4] / 2 + x2[i4];
           offsets[index++] = (anchorY - 1) * height / 2 + y3[i4];
         }
         return offsets;
@@ -57015,13 +57168,14 @@ void main(void) {
     }
     /** Returns true if font has changed */
     _updateFontAtlas() {
-      const { fontSettings, fontFamily, fontWeight } = this.props;
+      const { fontSettings, fontFamily, fontWeight, _getFontRenderer } = this.props;
       const { fontAtlasManager, characterSet } = this.state;
       const fontProps = {
         ...fontSettings,
         characterSet,
         fontFamily,
-        fontWeight
+        fontWeight,
+        _getFontRenderer
       };
       if (!fontAtlasManager.mapping) {
         fontAtlasManager.setProps(fontProps);
@@ -57091,14 +57245,17 @@ void main(void) {
     transformParagraph(object, objectInfo) {
       const { fontAtlasManager } = this.state;
       const iconMapping = fontAtlasManager.mapping;
+      const { baselineOffset } = fontAtlasManager.atlas;
+      const { fontSize } = fontAtlasManager.props;
       const getText = this.state.getText;
       const { wordBreak, lineHeight, maxWidth } = this.props;
       const paragraph = getText(object, objectInfo) || "";
       return transformParagraph(
         paragraph,
-        lineHeight,
+        baselineOffset,
+        lineHeight * fontSize,
         wordBreak,
-        maxWidth * fontAtlasManager.props.fontSize,
+        maxWidth * fontSize,
         iconMapping
       );
     }
@@ -57107,7 +57264,7 @@ void main(void) {
         startIndices,
         numInstances,
         getText,
-        fontAtlasManager: { scale: scale8, atlas, mapping },
+        fontAtlasManager: { atlas, mapping },
         styleVersion
       } = this.state;
       const {
@@ -57141,6 +57298,7 @@ void main(void) {
       } = this.props;
       const CharactersLayerClass = this.getSubLayerClass("characters", MultiIconLayer);
       const BackgroundLayerClass = this.getSubLayerClass("background", TextBackgroundLayer);
+      const { fontSize } = this.state.fontAtlasManager.props;
       return [
         background && new BackgroundLayerClass(
           {
@@ -57161,6 +57319,7 @@ void main(void) {
             sizeUnits,
             sizeMinPixels,
             sizeMaxPixels,
+            fontSize,
             transitions: transitions && {
               getPosition: transitions.getPosition,
               getAngle: transitions.getAngle,
@@ -57218,10 +57377,11 @@ void main(void) {
             getPixelOffset,
             getContentBox,
             billboard,
-            sizeScale: sizeScale * scale8,
+            sizeScale,
             sizeUnits,
-            sizeMinPixels: sizeMinPixels * scale8,
-            sizeMaxPixels: sizeMaxPixels * scale8,
+            sizeMinPixels,
+            sizeMaxPixels,
+            fontSize,
             contentCutoffPixels,
             contentAlignHorizontal,
             contentAlignVertical,
@@ -59371,6 +59531,8 @@ void main(void) {
   var distanceToVertex = 3 - Math.sqrt(5);
   var Rmidedge = Math.sqrt(3 - \u03C6);
   var Rcircumscribed = Math.sqrt(3) * Rmidedge / \u03C6;
+  var AUTHALIC_RADIUS_EARTH = 63710072e-1;
+  var AUTHALIC_AREA_EARTH = 4 * Math.PI * AUTHALIC_RADIUS_EARTH * AUTHALIC_RADIUS_EARTH;
   common_exports2.setMatrixArrayType(Float64Array);
   var PentagonShape = class _PentagonShape {
     constructor(vertices) {
@@ -60072,12 +60234,13 @@ void main(void) {
       }
     }
   };
-  common_exports2.setMatrixArrayType(Float64Array);
   var YES = -1;
   var NO = 1;
+  common_exports2.setMatrixArrayType(Float64Array);
   var KJToIJ = ([k3, j3]) => {
     return vec2_exports2.fromValues(k3 - j3, j3);
   };
+  common_exports2.setMatrixArrayType(Float64Array);
   var kPos = vec2_exports2.fromValues(1, 0);
   var jPos = vec2_exports2.fromValues(0, 1);
   var kNeg = vec2_exports2.negate(vec2_exports2.create(), kPos);
@@ -60115,7 +60278,6 @@ void main(void) {
   var quaternaryToFlips = (n2) => {
     return [[NO, NO], [NO, YES], [NO, NO], [YES, NO]][n2];
   };
-  var FLIP_SHIFT = vec2_exports2.fromValues(-1, 1);
   function reversePattern(pattern) {
     return Array.from({ length: pattern.length }, (_3, i4) => pattern.indexOf(i4));
   }
@@ -60123,7 +60285,7 @@ void main(void) {
   var PATTERN_FLIPPED = [0, 1, 2, 7, 3, 4, 5, 6];
   var PATTERN_REVERSED = reversePattern(PATTERN);
   var PATTERN_FLIPPED_REVERSED = reversePattern(PATTERN_FLIPPED);
-  var _shiftDigits = (digits, i4, flips, invertJ, pattern) => {
+  var shiftDigits = (digits, i4, flips, invertJ, pattern) => {
     if (i4 <= 0)
       return;
     const parentK = digits[i4] || 0;
@@ -60145,7 +60307,10 @@ void main(void) {
     digits[i4 - 1] = dst % 4;
     digits[i4] = (parentK + 4 + Math.floor(dst / 4) - Math.floor(src / 4)) % 4;
   };
-  var sToAnchor = (s3, resolution, orientation) => {
+  common_exports2.setMatrixArrayType(Float64Array);
+  var FLIP_SHIFT = vec2_exports2.fromValues(-1, 1);
+  var SHIFTDIGITS = true;
+  var sToAnchor = (s3, resolution, orientation, doShiftDigits = SHIFTDIGITS) => {
     let input = BigInt(s3);
     const reverse = orientation === "vu" || orientation === "wu" || orientation === "vw";
     const invertJ = orientation === "wv" || orientation === "vw";
@@ -60153,7 +60318,7 @@ void main(void) {
     if (reverse) {
       input = (1n << BigInt(2 * resolution)) - input - 1n;
     }
-    const anchor = _sToAnchor(input, resolution, invertJ, flipIJ);
+    const anchor = _sToAnchor(input, resolution, invertJ, flipIJ, doShiftDigits);
     if (flipIJ) {
       const { offset: [_i, _j], flips: [flipX, flipY] } = anchor;
       anchor.offset = [_j, _i];
@@ -60171,7 +60336,7 @@ void main(void) {
     }
     return anchor;
   };
-  var _sToAnchor = (s3, resolution, invertJ, flipIJ) => {
+  var _sToAnchor = (s3, resolution, invertJ, flipIJ, doShiftDigits = SHIFTDIGITS) => {
     const offset3 = vec2_exports2.create();
     const flips = [NO, NO];
     let input = BigInt(s3);
@@ -60182,7 +60347,9 @@ void main(void) {
     }
     const pattern = flipIJ ? PATTERN_FLIPPED : PATTERN;
     for (let i4 = digits.length - 1; i4 >= 0; i4--) {
-      _shiftDigits(digits, i4, flips, invertJ, pattern);
+      if (doShiftDigits) {
+        shiftDigits(digits, i4, flips, invertJ, pattern);
+      }
       vec2_exports2.multiply(flips, flips, quaternaryToFlips(digits[i4]));
     }
     flips[0] = NO;
@@ -60193,9 +60360,16 @@ void main(void) {
       vec2_exports2.add(offset3, offset3, childOffset);
       vec2_exports2.multiply(flips, flips, quaternaryToFlips(digits[i4]));
     }
-    const k3 = digits[0] || 0;
-    return { flips, k: k3, offset: KJToIJ(offset3) };
+    const q3 = digits[0] || 0;
+    return { q: q3, offset: KJToIJ(offset3), flips };
   };
+  var PROBE_R = 0.1;
+  var PROBE_OFFSETS = [
+    [PROBE_R * Math.cos(45 * Math.PI / 180), PROBE_R * Math.sin(45 * Math.PI / 180)],
+    [PROBE_R * Math.cos(113 * Math.PI / 180), PROBE_R * Math.sin(113 * Math.PI / 180)],
+    [PROBE_R * Math.cos(293 * Math.PI / 180), PROBE_R * Math.sin(293 * Math.PI / 180)],
+    [PROBE_R * Math.cos(225 * Math.PI / 180), PROBE_R * Math.sin(225 * Math.PI / 180)]
+  ];
   common_exports2.setMatrixArrayType(Float64Array);
   var TRIANGLE_MODE = false;
   var shiftRight = vec2_exports2.clone(w);
@@ -60212,12 +60386,12 @@ void main(void) {
     if (anchor.flips[0] === NO && anchor.flips[1] === YES) {
       pentagon.rotate180();
     }
-    const { k: k3 } = anchor;
+    const { q: q3 } = anchor;
     const F22 = anchor.flips[0] + anchor.flips[1];
     if (
       // Orient last two pentagons when both or neither flips are YES
-      (F22 === -2 || F22 === 2) && k3 > 1 || // Orient first & last pentagons when only one of flips is YES
-      F22 === 0 && (k3 === 0 || k3 === 3)
+      (F22 === -2 || F22 === 2) && q3 > 1 || // Orient first & last pentagons when only one of flips is YES
+      F22 === 0 && (q3 === 0 || q3 === 3)
     ) {
       pentagon.reflectY();
     }
@@ -60451,13 +60625,40 @@ void main(void) {
   var FIRST_HILBERT_RESOLUTION = 2;
   var MAX_RESOLUTION = 30;
   var HILBERT_START_BIT = 58n;
-  var REMOVAL_MASK = 0x3ffffffffffffffn;
+  var WORLD_CELL = 0n;
   function getResolution(index) {
+    if (index === 0n)
+      return -1;
+    if (index & 1n || (index & 0b111n) === 0b100n || (index & 0b11111n) === 0b10000n)
+      return MAX_RESOLUTION;
     let resolution = MAX_RESOLUTION - 1;
     let shifted = index >> 1n;
-    while (resolution > -1 && (shifted & 0b1n) === 0n) {
+    if (shifted === 0n)
+      return -1;
+    let low32 = Number(shifted & 0xFFFFFFFFn);
+    let remaining;
+    if (low32 === 0) {
+      shifted >>= 32n;
+      resolution -= 16;
+      remaining = Number(shifted);
+    } else {
+      remaining = low32;
+    }
+    if ((remaining & 65535) === 0) {
+      remaining >>= 16;
+      resolution -= 8;
+    }
+    if (resolution >= 6 && (remaining & 255) === 0) {
+      remaining >>= 8;
+      resolution -= 4;
+    }
+    if (resolution >= 4 && (remaining & 15) === 0) {
+      remaining >>= 4;
+      resolution -= 2;
+    }
+    while (resolution > -1 && (remaining & 1) === 0) {
       resolution -= 1;
-      shifted = shifted >> (resolution < FIRST_HILBERT_RESOLUTION ? 1n : 2n);
+      remaining = remaining >> (resolution < FIRST_HILBERT_RESOLUTION ? 1 : 2);
     }
     return resolution;
   }
@@ -60466,27 +60667,33 @@ void main(void) {
     if (resolution === -1) {
       return { origin: origins[0], segment: 0, S: 0n, resolution };
     }
-    const top6Bits = Number(index >> 58n);
+    let quintantShift = HILBERT_START_BIT;
+    let quintantOffset = 0;
+    if (resolution === MAX_RESOLUTION) {
+      const markerBits = index & 1n ? 1n : index & 0b100n ? 3n : 5n;
+      quintantShift = HILBERT_START_BIT + markerBits;
+      quintantOffset = markerBits === 1n ? 0 : markerBits === 3n ? 32 : 40;
+    }
+    const topBits = Number(index >> quintantShift) + quintantOffset;
     let origin, segment;
     if (resolution === 0) {
-      const originId2 = top6Bits;
-      origin = origins[originId2];
+      origin = origins[topBits];
       segment = 0;
     } else {
-      const originId2 = Math.floor(top6Bits / 5);
+      const originId2 = Math.floor(topBits / 5);
       origin = origins[originId2];
-      segment = (top6Bits + origin.firstQuintant) % 5;
+      segment = (topBits + origin.firstQuintant) % 5;
     }
     if (!origin) {
-      throw new Error(`Could not parse origin: ${top6Bits}`);
+      throw new Error(`Could not parse origin: ${topBits}`);
     }
     if (resolution < FIRST_HILBERT_RESOLUTION) {
       return { origin, segment, S: 0n, resolution };
     }
     const hilbertLevels = resolution - FIRST_HILBERT_RESOLUTION + 1;
     const hilbertBits = BigInt(2 * hilbertLevels);
-    const shift3 = HILBERT_START_BIT - hilbertBits;
-    const S2 = (index & REMOVAL_MASK) >> shift3;
+    const removalMask = (1n << quintantShift) - 1n;
+    const S2 = (index & removalMask) >> quintantShift - hilbertBits;
     return { origin, segment, S: S2, resolution };
   }
   common_exports2.setMatrixArrayType(Float64Array);
@@ -60505,6 +60712,9 @@ void main(void) {
     return getPentagonVertices(hilbertResolution, quintant, anchor);
   }
   function cellToBoundary(cellId, { closedRing = true, segments = "auto" } = { closedRing: true, segments: "auto" }) {
+    if (cellId === WORLD_CELL) {
+      return [];
+    }
     const { S: S2, segment, origin, resolution } = deserialize(cellId);
     if (segments === "auto") {
       segments = Math.max(1, Math.pow(2, 6 - resolution));
@@ -60524,8 +60734,13 @@ void main(void) {
   function hexToU64(hex) {
     return BigInt(`0x${hex}`);
   }
-  var AUTHALIC_RADIUS = 63710072e-1;
-  var AUTHALIC_AREA = 4 * Math.PI * AUTHALIC_RADIUS * AUTHALIC_RADIUS;
+  var CELL_RADIUS_SAFETY_FACTOR = 2;
+  var BASE_CELL_RADIUS = CELL_RADIUS_SAFETY_FACTOR * AUTHALIC_RADIUS_EARTH / Math.sqrt(15);
+  var _cellRadius = new Array(31);
+  _cellRadius[0] = CELL_RADIUS_SAFETY_FACTOR * AUTHALIC_RADIUS_EARTH / Math.sqrt(3);
+  for (let r3 = 1; r3 <= 30; r3++) {
+    _cellRadius[r3] = BASE_CELL_RADIUS / (1 << r3 - 1);
+  }
   common_exports2.setMatrixArrayType(Float64Array);
 
   // ../geo-layers/src/h3-layers/h3-utils.ts
@@ -64612,7 +64827,7 @@ void main(void) {
     visibleMinZoom,
     visibleMaxZoom
   }) {
-    let z3 = viewport.isGeospatial ? Math.round(viewport.zoom + Math.log2(TILE_SIZE4 / tileSize)) + zoomOffset : Math.ceil(viewport.zoom) + zoomOffset;
+    let z3 = viewport.isGeospatial ? Math.round(viewport.zoom + Math.log2(TILE_SIZE4 / tileSize) + zoomOffset) : Math.ceil(viewport.zoom + zoomOffset);
     if (typeof minZoom === "number" && Number.isFinite(minZoom) && z3 < minZoom) {
       if (!extent) {
         return [];
@@ -65787,7 +66002,7 @@ out float vTime;
     }
   };
   function shouldComposeModelMatrix(viewport, coordinateSystem) {
-    return coordinateSystem === COORDINATE_SYSTEM.CARTESIAN || coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS || coordinateSystem === COORDINATE_SYSTEM.DEFAULT && !viewport.isGeospatial;
+    return coordinateSystem === "cartesian" || coordinateSystem === "meter-offsets" || coordinateSystem === "default" && !viewport.isGeospatial;
   }
 
   // ../mesh-layers/src/simple-mesh-layer/simple-mesh-layer-uniforms.ts
@@ -82201,7 +82416,7 @@ vec4 project_position_to_clipspace(
   var Fp64Extension = class extends LayerExtension {
     getShaders() {
       const { coordinateSystem } = this.props;
-      if (coordinateSystem !== COORDINATE_SYSTEM.LNGLAT && coordinateSystem !== COORDINATE_SYSTEM.DEFAULT) {
+      if (coordinateSystem !== "lnglat" && coordinateSystem !== "default") {
         throw new Error("fp64: coordinateSystem must be LNGLAT");
       }
       return {
@@ -82287,6 +82502,209 @@ in float vDashOffset;
       }
     }
   }
+`
+    }
+  };
+  var scatterplotDashShaders = {
+    inject: {
+      "vs:#decl": `
+in vec2 instanceDashArrays;
+out vec2 vDashArray;
+`,
+      "vs:#main-end": `
+vDashArray = instanceDashArrays;
+`,
+      "fs:#decl": `
+layout(std140) uniform pathStyleUniforms {
+  bool dashGapPickable;
+} pathStyle;
+
+in vec2 vDashArray;
+
+#define PI 3.141592653589793
+`,
+      "fs:#main-start": `
+  bool inDashGap = false;
+  float dashUnitLength = vDashArray.x + vDashArray.y;
+  if (dashUnitLength > 0.0 && scatterplot.stroked > 0.5) {
+    float _distToCenter = length(unitPosition) * outerRadiusPixels;
+    float innerRadius = innerUnitRadius * outerRadiusPixels;
+    if (_distToCenter >= innerRadius) {
+      float strokeWidth = (1.0 - innerUnitRadius) * outerRadiusPixels;
+      float midStrokeRadius = (innerUnitRadius + 1.0) * 0.5 * outerRadiusPixels;
+      float angle = atan(unitPosition.y, unitPosition.x) + PI;
+      float circumference = 2.0 * PI * midStrokeRadius;
+      float posAlongStroke = (angle / (2.0 * PI)) * circumference / strokeWidth;
+      float unitOffset = mod(posAlongStroke, dashUnitLength);
+      if (unitOffset > vDashArray.x) {
+        if (scatterplot.filled > 0.5) {
+          inDashGap = true;
+        } else {
+          if (!(pathStyle.dashGapPickable && bool(picking.isActive))) {
+            discard;
+          }
+        }
+      }
+    }
+  }
+`,
+      "fs:#main-end": `
+  if (inDashGap) {
+    float alphaFactor = fragColor.a / max(vLineColor.a, 0.001);
+    fragColor = vec4(vFillColor.rgb, vFillColor.a * alphaFactor);
+    fragColor = picking_filterPickingColor(fragColor);
+    fragColor = picking_filterHighlightColor(fragColor);
+  }
+`
+    }
+  };
+  var textBackgroundDashShaders = {
+    inject: {
+      "vs:#decl": `
+in vec2 instanceDashArrays;
+out vec2 vDashArray;
+`,
+      "vs:#main-end": `
+vDashArray = instanceDashArrays;
+`,
+      "fs:#decl": `
+layout(std140) uniform pathStyleUniforms {
+  bool dashGapPickable;
+} pathStyle;
+
+in vec2 vDashArray;
+
+#define PI 3.141592653589793
+
+// Calculate position along rounded rectangle perimeter in stroke-width units
+float getPerimeterPosition(vec2 fragUV, vec2 dims, vec4 radii, float lineWidth) {
+  float width = dims.x;
+  float height = dims.y;
+
+  float maxRadius = min(width, height) * 0.5;
+  float rBL = min(radii.w, maxRadius);
+  float rTL = min(radii.z, maxRadius);
+  float rTR = min(radii.x, maxRadius);
+  float rBR = min(radii.y, maxRadius);
+
+  vec2 p = fragUV * dims;
+
+  float leftLen = height - rBL - rTL;
+  float topLen = width - rTL - rTR;
+  float rightLen = height - rTR - rBR;
+  float bottomLen = width - rBR - rBL;
+
+  float arcBL = PI * 0.5 * rBL;
+  float arcTL = PI * 0.5 * rTL;
+  float arcTR = PI * 0.5 * rTR;
+  float arcBR = PI * 0.5 * rBR;
+
+  float pos = 0.0;
+
+  float distLeft = p.x;
+  float distRight = width - p.x;
+  float distBottom = p.y;
+  float distTop = height - p.y;
+  float minDist = min(min(distLeft, distRight), min(distBottom, distTop));
+
+  if (p.x < rBL && p.y < rBL) {
+    vec2 c = vec2(rBL, rBL);
+    vec2 d = p - c;
+    float angle = atan(-d.x, -d.y);
+    pos = angle / (PI * 0.5) * arcBL;
+  } else if (p.x < rTL && p.y > height - rTL) {
+    vec2 c = vec2(rTL, height - rTL);
+    vec2 d = p - c;
+    float angle = atan(d.y, -d.x);
+    pos = arcBL + leftLen + angle / (PI * 0.5) * arcTL;
+  } else if (p.x > width - rTR && p.y > height - rTR) {
+    vec2 c = vec2(width - rTR, height - rTR);
+    vec2 d = p - c;
+    float angle = atan(d.x, d.y);
+    pos = arcBL + leftLen + arcTL + topLen + angle / (PI * 0.5) * arcTR;
+  } else if (p.x > width - rBR && p.y < rBR) {
+    vec2 c = vec2(width - rBR, rBR);
+    vec2 d = p - c;
+    float angle = atan(-d.y, d.x);
+    pos = arcBL + leftLen + arcTL + topLen + arcTR + rightLen + angle / (PI * 0.5) * arcBR;
+  } else if (minDist == distLeft) {
+    pos = arcBL + clamp(p.y - rBL, 0.0, leftLen);
+  } else if (minDist == distTop) {
+    pos = arcBL + leftLen + arcTL + clamp(p.x - rTL, 0.0, topLen);
+  } else if (minDist == distRight) {
+    pos = arcBL + leftLen + arcTL + topLen + arcTR + clamp(height - rTR - p.y, 0.0, rightLen);
+  } else {
+    pos = arcBL + leftLen + arcTL + topLen + arcTR + rightLen + arcBR + clamp(width - rBR - p.x, 0.0, bottomLen);
+  }
+
+  return pos / lineWidth;
+}
+
+// Simple rectangular perimeter calculation (no rounded corners)
+float getRectPerimeterPosition(vec2 fragUV, vec2 dims, float lineWidth) {
+  float width = dims.x;
+  float height = dims.y;
+
+  float distLeft = fragUV.x * width;
+  float distRight = (1.0 - fragUV.x) * width;
+  float distBottom = fragUV.y * height;
+  float distTop = (1.0 - fragUV.y) * height;
+
+  float minDist = min(min(distLeft, distRight), min(distBottom, distTop));
+
+  float pos = 0.0;
+  if (minDist == distLeft) {
+    pos = fragUV.y * height;
+  } else if (minDist == distTop) {
+    pos = height + fragUV.x * width;
+  } else if (minDist == distRight) {
+    pos = height + width + (1.0 - fragUV.y) * height;
+  } else {
+    pos = 2.0 * height + width + (1.0 - fragUV.x) * width;
+  }
+
+  return pos / lineWidth;
+}
+`,
+      "fs:#main-start": `
+  bool inDashGap = false;
+  float dashUnitLength = vDashArray.x + vDashArray.y;
+  if (dashUnitLength > 0.0 && textBackground.stroked) {
+    float distToEdge;
+    bool hasRoundedCorners = textBackground.borderRadius != vec4(0.0);
+    if (hasRoundedCorners) {
+      distToEdge = round_rect(uv, dimensions, textBackground.borderRadius);
+    } else {
+      distToEdge = rect(uv, dimensions);
+    }
+
+    if (distToEdge <= vLineWidth && distToEdge >= 0.0) {
+      float posAlongStroke;
+      if (hasRoundedCorners) {
+        posAlongStroke = getPerimeterPosition(uv, dimensions, textBackground.borderRadius, vLineWidth);
+      } else {
+        posAlongStroke = getRectPerimeterPosition(uv, dimensions, vLineWidth);
+      }
+      float unitOffset = mod(posAlongStroke, dashUnitLength);
+      if (unitOffset > vDashArray.x) {
+        if (vFillColor.a > 0.0) {
+          inDashGap = true;
+        } else {
+          if (!(pathStyle.dashGapPickable && bool(picking.isActive))) {
+            discard;
+          }
+        }
+      }
+    }
+  }
+`,
+      "fs:#main-end": `
+  if (inDashGap) {
+    float alphaFactor = fragColor.a / max(vLineColor.a, 0.001);
+    fragColor = vec4(vFillColor.rgb, vFillColor.a * alphaFactor);
+    fragColor = picking_filterPickingColor(fragColor);
+    fragColor = picking_filterHighlightColor(fragColor);
+  }
 `
     }
   };
@@ -82331,13 +82749,41 @@ in float instanceOffsets;
     } = {}) {
       super({ dash: dash || highPrecisionDash, offset: offset3, highPrecisionDash });
     }
+    getLayerType(layer) {
+      if ("pathTesselator" in layer.state) {
+        return "path";
+      }
+      const layerName = layer.constructor.layerName;
+      if (layerName === "ScatterplotLayer") {
+        return "scatterplot";
+      }
+      if (layerName === "TextBackgroundLayer") {
+        return "textBackground";
+      }
+      return null;
+    }
     isEnabled(layer) {
-      return "pathTesselator" in layer.state;
+      return this.getLayerType(layer) !== null;
     }
     getShaders(extension) {
-      if (!extension.isEnabled(this)) {
+      const layerType = extension.getLayerType(this);
+      if (!layerType) {
         return null;
       }
+      if (layerType === "scatterplot" || layerType === "textBackground") {
+        if (!extension.opts.dash) {
+          return null;
+        }
+        const inject7 = layerType === "scatterplot" ? scatterplotDashShaders.inject : textBackgroundDashShaders.inject;
+        const pathStyle2 = {
+          name: "pathStyle",
+          inject: inject7,
+          uniformTypes: {
+            dashGapPickable: "i32"
+          }
+        };
+        return { modules: [pathStyle2] };
+      }
       let result = {};
       const defines2 = {};
       if (extension.opts.dash) {
@@ -82365,13 +82811,14 @@ in float instanceOffsets;
     }
     initializeState(context, extension) {
       const attributeManager = this.getAttributeManager();
-      if (!attributeManager || !extension.isEnabled(this)) {
+      const layerType = extension.getLayerType(this);
+      if (!attributeManager || !layerType) {
         return;
       }
       if (extension.opts.dash) {
         attributeManager.addInstanced({
           instanceDashArrays: { size: 2, accessor: "getDashArray" },
-          ...extension.opts.highPrecisionDash ? {
+          ...layerType === "path" && extension.opts.highPrecisionDash ? {
             instanceDashOffsets: {
               size: 1,
               accessor: "getPath",
@@ -82380,7 +82827,7 @@ in float instanceOffsets;
           } : {}
         });
       }
-      if (extension.opts.offset) {
+      if (layerType === "path" && extension.opts.offset) {
         attributeManager.addInstanced({
           instanceOffsets: { size: 1, accessor: "getOffset" }
         });
@@ -82391,11 +82838,19 @@ in float instanceOffsets;
         return;
       }
       if (extension.opts.dash) {
-        const pathStyleProps = {
-          dashAlignMode: this.props.dashJustified ? 1 : 0,
-          dashGapPickable: Boolean(this.props.dashGapPickable)
-        };
-        this.setShaderModuleProps({ pathStyle: pathStyleProps });
+        const layerType = extension.getLayerType(this);
+        if (layerType === "scatterplot" || layerType === "textBackground") {
+          const pathStyleProps = {
+            dashGapPickable: Boolean(this.props.dashGapPickable)
+          };
+          this.setShaderModuleProps({ pathStyle: pathStyleProps });
+        } else {
+          const pathStyleProps = {
+            dashAlignMode: this.props.dashJustified ? 1 : 0,
+            dashGapPickable: Boolean(this.props.dashGapPickable)
+          };
+          this.setShaderModuleProps({ pathStyle: pathStyleProps });
+        }
       }
     }
     getDashOffsets(path) {
@@ -90477,7 +90932,7 @@ void main() {
         {
           // position buffer is filled with world coordinates generated from viewport.unproject
           // i.e. LNGLAT if geospatial, CARTESIAN otherwise
-          coordinateSystem: COORDINATE_SYSTEM.DEFAULT,
+          coordinateSystem: "default",
           data: {
             attributes: {
               positions: triPositionBuffer,
@@ -90679,7 +91134,7 @@ void main() {
       if (forceUpdate || !this.state.worldBounds || !boundsContain(this.state.worldBounds, visibleWorldBounds)) {
         const scaledCommonBounds = this._worldToCommonBounds(visibleWorldBounds);
         const worldBounds = this._commonToWorldBounds(scaledCommonBounds);
-        if (this.props.coordinateSystem === COORDINATE_SYSTEM.LNGLAT) {
+        if (this.props.coordinateSystem === "lnglat") {
           worldBounds[1] = Math.max(worldBounds[1], -85.051129);
           worldBounds[3] = Math.min(worldBounds[3], 85.051129);
           worldBounds[0] = Math.max(worldBounds[0], -360);
@@ -90781,7 +91236,7 @@ void main() {
       const { viewport } = this.context;
       const { textureSize } = this.state;
       const { coordinateSystem } = this.props;
-      const offsetMode = useLayerCoordinateSystem && (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS || coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS);
+      const offsetMode = useLayerCoordinateSystem && (coordinateSystem === "lnglat-offsets" || coordinateSystem === "meter-offsets");
       const offsetOriginCommon = offsetMode ? viewport.projectPosition(this.props.coordinateOrigin) : [0, 0];
       const size2 = textureSize * RESOLUTION / viewport.scale;
       let bottomLeftCommon;
@@ -91285,6 +91740,85 @@ void main() {
     }
   };
 
+  // ../mapbox/src/mapbox-layer-group.ts
+  var MapboxLayerGroup = class {
+    /* eslint-disable no-this-before-super */
+    constructor(props) {
+      assert10(props.id, "id is required");
+      this.id = props.id;
+      this.type = "custom";
+      this.renderingMode = props.renderingMode || "3d";
+      this.slot = props.slot;
+      this.beforeId = props.beforeId;
+      this.map = null;
+    }
+    /* Mapbox custom layer methods */
+    onAdd(map3, gl) {
+      this.map = map3;
+    }
+    render(gl, renderParameters) {
+      if (!this.map)
+        return;
+      drawLayerGroup(this.map.__deck, this.map, this, renderParameters);
+    }
+  };
+
+  // ../mapbox/src/resolve-layer-groups.ts
+  var UNDEFINED_BEFORE_ID = "__UNDEFINED__";
+  function getLayerGroupId(layer) {
+    if (layer.props.beforeId) {
+      return `deck-layer-group-before:${layer.props.beforeId}`;
+    } else if (layer.props.slot) {
+      return `deck-layer-group-slot:${layer.props.slot}`;
+    }
+    return "deck-layer-group-last";
+  }
+  function resolveLayerGroups(map3, oldLayers, newLayers) {
+    if (!map3 || !map3.style || !map3.style._loaded) {
+      return;
+    }
+    const layers = flatten(newLayers, Boolean);
+    if (oldLayers !== newLayers) {
+      const prevLayers = flatten(oldLayers, Boolean);
+      const prevLayerGroupIds = new Set(prevLayers.map((l3) => getLayerGroupId(l3)));
+      const newLayerGroupIds = new Set(layers.map((l3) => getLayerGroupId(l3)));
+      for (const groupId of prevLayerGroupIds) {
+        if (!newLayerGroupIds.has(groupId)) {
+          if (map3.getLayer(groupId)) {
+            map3.removeLayer(groupId);
+          }
+        }
+      }
+    }
+    const layerGroups = {};
+    for (const layer of layers) {
+      const groupId = getLayerGroupId(layer);
+      const mapboxGroup = map3.getLayer(groupId);
+      if (mapboxGroup) {
+        const groupInstance = mapboxGroup.implementation || mapboxGroup;
+        layerGroups[groupId] = groupInstance;
+      } else {
+        const newGroup = new MapboxLayerGroup({
+          id: groupId,
+          slot: layer.props.slot,
+          beforeId: layer.props.beforeId
+        });
+        layerGroups[groupId] = newGroup;
+        map3.addLayer(newGroup, layer.props.beforeId);
+      }
+    }
+    const mapLayers = map3.style._order;
+    for (const [groupId, group] of Object.entries(layerGroups)) {
+      const beforeId = group.beforeId || UNDEFINED_BEFORE_ID;
+      const expectedGroupIndex = beforeId === UNDEFINED_BEFORE_ID ? mapLayers.length : mapLayers.indexOf(beforeId);
+      const currentGropupIndex = mapLayers.indexOf(groupId);
+      if (currentGropupIndex !== expectedGroupIndex - 1) {
+        const moveBeforeId = beforeId === UNDEFINED_BEFORE_ID ? void 0 : beforeId;
+        map3.moveLayer(groupId, moveBeforeId);
+      }
+    }
+  }
+
   // ../mapbox/src/deck-utils.ts
   var MAPBOX_VIEW_ID = "mapbox";
   var TILE_SIZE5 = 512;
@@ -91360,27 +91894,6 @@ void main() {
     }
     return result;
   }
-  function drawLayer(deck, map3, layer, renderParameters) {
-    if (!deck.isInitialized) {
-      return;
-    }
-    let { currentViewport } = deck.userData;
-    let clearStack = false;
-    if (!currentViewport) {
-      currentViewport = getViewport(deck, map3, renderParameters);
-      deck.userData.currentViewport = currentViewport;
-      clearStack = true;
-    }
-    if (!currentViewport) {
-      return;
-    }
-    deck._drawLayers("mapbox-repaint", {
-      viewports: [currentViewport],
-      layerFilter: (params) => (!deck.props.layerFilter || deck.props.layerFilter(params)) && (layer.id === params.layer.id || params.layer.props.operation.includes("terrain")),
-      clearStack,
-      clearCanvas: false
-    });
-  }
   function drawLayerGroup(deck, map3, group, renderParameters) {
     if (!deck.isInitialized) {
       return;
@@ -91499,7 +92012,9 @@ void main() {
   }
   function afterRender(deck, map3) {
     const deckLayers = flatten(deck.props.layers, Boolean);
-    const hasNonMapboxLayers = deckLayers.some((layer) => layer && !map3.getLayer(layer.id));
+    const hasNonMapboxLayers = deckLayers.some(
+      (layer) => layer && !map3.getLayer(getLayerGroupId(layer))
+    );
     let viewports = deck.getViewports();
     const mapboxViewportIdx = viewports.findIndex((vp) => vp.id === MAPBOX_VIEW_ID);
     const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
@@ -91515,7 +92030,7 @@ void main() {
       }
       deck._drawLayers("mapbox-repaint", {
         viewports,
-        layerFilter: (params) => (!deck.props.layerFilter || deck.props.layerFilter(params)) && (params.viewport.id !== MAPBOX_VIEW_ID || !map3.getLayer(params.layer.id)),
+        layerFilter: (params) => (!deck.props.layerFilter || deck.props.layerFilter(params)) && (params.viewport.id !== MAPBOX_VIEW_ID || !map3.getLayer(getLayerGroupId(params.layer))),
         clearCanvas: false
       });
     } else {
@@ -91533,181 +92048,6 @@ void main() {
     deck.needsRedraw({ clearRedrawFlags: true });
   }
 
-  // ../mapbox/src/mapbox-layer.ts
-  var MapboxLayer = class {
-    /* eslint-disable no-this-before-super */
-    constructor(props) {
-      if (!props.id) {
-        throw new Error("Layer must have an unique id");
-      }
-      this.id = props.id;
-      this.type = "custom";
-      this.renderingMode = props.renderingMode || "3d";
-      this.slot = props.slot;
-      this.map = null;
-      this.props = props;
-    }
-    /* Mapbox custom layer methods */
-    onAdd(map3, gl) {
-      this.map = map3;
-    }
-    onRemove() {
-      this.map = null;
-    }
-    setProps(props) {
-      Object.assign(this.props, props, { id: this.id });
-    }
-    render(gl, renderParameters) {
-      if (!this.map)
-        return;
-      drawLayer(this.map.__deck, this.map, this, renderParameters);
-    }
-  };
-
-  // ../mapbox/src/resolve-layers.ts
-  var UNDEFINED_BEFORE_ID = "__UNDEFINED__";
-  function resolveLayers(map3, deck, oldLayers, newLayers) {
-    if (!map3 || !deck || !map3.style || !map3.style._loaded) {
-      return;
-    }
-    const layers = flatten(newLayers, Boolean);
-    if (oldLayers !== newLayers) {
-      const prevLayers = flatten(oldLayers, Boolean);
-      const prevLayerIds = new Set(prevLayers.map((l3) => l3.id));
-      for (const layer of layers) {
-        prevLayerIds.delete(layer.id);
-      }
-      for (const id of prevLayerIds) {
-        if (map3.getLayer(id)) {
-          map3.removeLayer(id);
-        }
-      }
-    }
-    for (const layer of layers) {
-      const mapboxLayer = map3.getLayer(layer.id);
-      if (mapboxLayer) {
-        const layerInstance = mapboxLayer.implementation || mapboxLayer;
-        layerInstance.setProps(layer.props);
-      } else {
-        map3.addLayer(
-          new MapboxLayer({
-            id: layer.id,
-            // @ts-expect-error slot is not defined in LayerProps
-            slot: layer.props.slot
-          }),
-          // @ts-expect-error beforeId is not defined in LayerProps
-          layer.props.beforeId
-        );
-      }
-    }
-    const mapLayers = map3.style._order;
-    const layerGroups = {};
-    for (const layer of layers) {
-      let { beforeId } = layer.props;
-      if (!beforeId || !mapLayers.includes(beforeId)) {
-        beforeId = UNDEFINED_BEFORE_ID;
-      }
-      layerGroups[beforeId] = layerGroups[beforeId] || [];
-      layerGroups[beforeId].push(layer.id);
-    }
-    for (const beforeId in layerGroups) {
-      const layerGroup = layerGroups[beforeId];
-      let lastLayerIndex = beforeId === UNDEFINED_BEFORE_ID ? mapLayers.length : mapLayers.indexOf(beforeId);
-      let lastLayerId = beforeId === UNDEFINED_BEFORE_ID ? void 0 : beforeId;
-      for (let i4 = layerGroup.length - 1; i4 >= 0; i4--) {
-        const layerId = layerGroup[i4];
-        const layerIndex = mapLayers.indexOf(layerId);
-        if (layerIndex !== lastLayerIndex - 1) {
-          map3.moveLayer(layerId, lastLayerId);
-          if (layerIndex > lastLayerIndex) {
-            lastLayerIndex++;
-          }
-        }
-        lastLayerIndex--;
-        lastLayerId = layerId;
-      }
-    }
-  }
-
-  // ../mapbox/src/mapbox-layer-group.ts
-  var MapboxLayerGroup = class {
-    /* eslint-disable no-this-before-super */
-    constructor(props) {
-      assert10(props.id, "id is required");
-      this.id = props.id;
-      this.type = "custom";
-      this.renderingMode = props.renderingMode || "3d";
-      this.slot = props.slot;
-      this.beforeId = props.beforeId;
-      this.map = null;
-    }
-    /* Mapbox custom layer methods */
-    onAdd(map3, gl) {
-      this.map = map3;
-    }
-    render(gl, renderParameters) {
-      if (!this.map)
-        return;
-      drawLayerGroup(this.map.__deck, this.map, this, renderParameters);
-    }
-  };
-
-  // ../mapbox/src/resolve-layer-groups.ts
-  var UNDEFINED_BEFORE_ID2 = "__UNDEFINED__";
-  function getLayerGroupId(layer) {
-    if (layer.props.beforeId) {
-      return `deck-layer-group-before:${layer.props.beforeId}`;
-    } else if (layer.props.slot) {
-      return `deck-layer-group-slot:${layer.props.slot}`;
-    }
-    return "deck-layer-group-last";
-  }
-  function resolveLayerGroups(map3, oldLayers, newLayers) {
-    if (!map3 || !map3.style || !map3.style._loaded) {
-      return;
-    }
-    const layers = flatten(newLayers, Boolean);
-    if (oldLayers !== newLayers) {
-      const prevLayers = flatten(oldLayers, Boolean);
-      const prevLayerGroupIds = new Set(prevLayers.map((l3) => getLayerGroupId(l3)));
-      const newLayerGroupIds = new Set(layers.map((l3) => getLayerGroupId(l3)));
-      for (const groupId of prevLayerGroupIds) {
-        if (!newLayerGroupIds.has(groupId)) {
-          if (map3.getLayer(groupId)) {
-            map3.removeLayer(groupId);
-          }
-        }
-      }
-    }
-    const layerGroups = {};
-    for (const layer of layers) {
-      const groupId = getLayerGroupId(layer);
-      const mapboxGroup = map3.getLayer(groupId);
-      if (mapboxGroup) {
-        const groupInstance = mapboxGroup.implementation || mapboxGroup;
-        layerGroups[groupId] = groupInstance;
-      } else {
-        const newGroup = new MapboxLayerGroup({
-          id: groupId,
-          slot: layer.props.slot,
-          beforeId: layer.props.beforeId
-        });
-        layerGroups[groupId] = newGroup;
-        map3.addLayer(newGroup, layer.props.beforeId);
-      }
-    }
-    const mapLayers = map3.style._order;
-    for (const [groupId, group] of Object.entries(layerGroups)) {
-      const beforeId = group.beforeId || UNDEFINED_BEFORE_ID2;
-      const expectedGroupIndex = beforeId === UNDEFINED_BEFORE_ID2 ? mapLayers.length : mapLayers.indexOf(beforeId);
-      const currentGropupIndex = mapLayers.indexOf(groupId);
-      if (currentGropupIndex !== expectedGroupIndex - 1) {
-        const moveBeforeId = beforeId === UNDEFINED_BEFORE_ID2 ? void 0 : beforeId;
-        map3.moveLayer(groupId, moveBeforeId);
-      }
-    }
-  }
-
   // ../mapbox/src/mapbox-overlay.ts
   var MapboxOverlay = class {
     constructor(props) {
@@ -91716,8 +92056,8 @@ void main() {
         if (!this._map)
           return;
         const projection = getProjection(this._map);
-        if (projection && !this._props.views) {
-          this._deck?.setProps({ views: getDefaultView(this._map) });
+        if (projection) {
+          this._deck?.setProps({ views: this._getViews(this._map) });
         }
       };
       this._updateContainerSize = () => {
@@ -91734,7 +92074,7 @@ void main() {
         const map3 = this._map;
         if (deck && map3) {
           deck.setProps({
-            views: this._props.views || getDefaultView(map3),
+            views: this._getViews(map3),
             viewState: getViewState(map3)
           });
           if (deck.isInitialized) {
@@ -91806,7 +92146,6 @@ void main() {
       };
       const { interleaved = false } = props;
       this._interleaved = interleaved;
-      this._renderLayersInGroups = props._renderLayersInGroups || false;
       this._props = this.filterProps(props);
     }
     /** Filter out props to pass to Deck **/
@@ -91826,6 +92165,7 @@ void main() {
       if (this._deck && this._map) {
         this._deck.setProps({
           ...this._props,
+          views: this._getViews(this._map),
           parameters: {
             ...getDefaultParameters(this._map, this._interleaved),
             ...this._props.parameters
@@ -91854,7 +92194,7 @@ void main() {
         ...this._props,
         parent: container,
         parameters: { ...getDefaultParameters(map3, false), ...this._props.parameters },
-        views: this._props.views || getDefaultView(map3),
+        views: this._getViews(map3),
         viewState: getViewState(map3)
       });
       map3.on("resize", this._updateContainerSize);
@@ -91881,6 +92221,7 @@ void main() {
         map: map3,
         deck: new Deck({
           ...this._props,
+          views: this._getViews(map3),
           gl,
           parameters: { ...getDefaultParameters(map3, true), ...this._props.parameters }
         })
@@ -91889,12 +92230,8 @@ void main() {
       this._resolveLayers(map3, this._deck, [], this._props.layers);
       return document.createElement("div");
     }
-    _resolveLayers(map3, deck, prevLayers, newLayers) {
-      if (this._renderLayersInGroups) {
-        resolveLayerGroups(map3, prevLayers, newLayers);
-      } else {
-        resolveLayers(map3, deck, prevLayers, newLayers);
-      }
+    _resolveLayers(map3, _deck, prevLayers, newLayers) {
+      resolveLayerGroups(map3, prevLayers, newLayers);
     }
     /** Called when the control is removed from a map */
     onRemove() {
@@ -91959,6 +92296,17 @@ void main() {
       }
       return this._interleaved ? this._map.getCanvas() : this._deck.getCanvas();
     }
+    _getViews(map3) {
+      if (!this._props.views) {
+        return getDefaultView(map3);
+      }
+      const views = Array.isArray(this._props.views) ? this._props.views : [this._props.views];
+      const hasMapboxView = views.some((v4) => v4.id === MAPBOX_VIEW_ID);
+      if (hasMapboxView) {
+        return this._props.views;
+      }
+      return [getDefaultView(map3), ...views];
+    }
   };
 
   // ../../node_modules/preact/dist/preact.module.js
@@ -92515,7 +92863,7 @@ void main() {
       ] });
       B2(ui, rootElement);
     }
-    handleZoom(viewId, nextZoom) {
+    handleZoom(viewId, nextZoom, delta) {
       const viewState = this.getViewState(viewId);
       if (viewState) {
         const { minZoom, maxZoom } = viewState;
@@ -92526,6 +92874,7 @@ void main() {
           nextZoom = Math.min(maxZoom, nextZoom);
         }
       }
+      this.props.onZoom?.({ viewId, delta, zoom: nextZoom });
       const nextViewState = {
         ...viewState,
         zoom: nextZoom
@@ -92542,14 +92891,14 @@ void main() {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v4) => v4.id) ?? [];
       for (const viewId of viewIds) {
         const viewState = this.getViewState(viewId);
-        this.handleZoom(viewId, viewState.zoom + 1);
+        this.handleZoom(viewId, viewState.zoom + 1, 1);
       }
     }
     handleZoomOut() {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v4) => v4.id) ?? [];
       for (const viewId of viewIds) {
         const viewState = this.getViewState(viewId);
-        this.handleZoom(viewId, viewState.zoom - 1);
+        this.handleZoom(viewId, viewState.zoom - 1, -1);
       }
     }
   };
@@ -92561,7 +92910,9 @@ void main() {
     transitionDuration: 200,
     zoomInLabel: "Zoom In",
     zoomOutLabel: "Zoom Out",
-    viewId: null
+    viewId: null,
+    onZoom: () => {
+    }
   };
 
   // ../widgets/src/reset-view-widget.tsx
@@ -92603,6 +92954,7 @@ void main() {
           // transitionDuration: this.props.transitionDuration,
           // transitionInterpolator: new FlyToInterpolator()
         };
+        this.props.onReset?.({ viewId, viewState: nextViewState });
         this.setViewState(viewId, nextViewState);
       }
     }
@@ -92613,7 +92965,9 @@ void main() {
     placement: "top-left",
     label: "Reset View",
     initialViewState: void 0,
-    viewId: null
+    viewId: null,
+    onReset: () => {
+    }
   };
 
   // ../widgets/src/gimbal-widget.tsx
@@ -92711,6 +93065,7 @@ void main() {
       const viewId = this.viewId || viewport?.id || "OrbitView";
       const viewState = this.getViewState(viewId);
       if ("rotationOrbit" in viewState || "rotationX" in viewState) {
+        this.props.onReset?.({ viewId, rotationOrbit: 0, rotationX: 0 });
         const nextViewState = {
           ...viewState,
           rotationOrbit: 0,
@@ -92745,7 +93100,9 @@ void main() {
     viewId: null,
     label: "Gimbal",
     strokeWidth: 1.5,
-    transitionDuration: 200
+    transitionDuration: 200,
+    onReset: () => {
+    }
   };
   function normalizeAndClampAngle(angle4) {
     let normalized = ((angle4 + 180) % 360 + 360) % 360 - 180;
@@ -92828,10 +93185,14 @@ void main() {
       const viewId = this.viewId || viewport.id;
       if (viewport instanceof WebMercatorViewport2) {
         const viewState = this.getViewState(viewId);
+        const resetPitch = this.getRotation(viewport)[0] === 0;
+        const nextBearing = 0;
+        const nextPitch = resetPitch ? 0 : viewport.pitch;
+        this.props.onReset?.({ viewId, bearing: nextBearing, pitch: nextPitch });
         const nextViewState = {
           ...viewState,
-          bearing: 0,
-          ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
+          bearing: nextBearing,
+          ...resetPitch ? { pitch: nextPitch } : {},
           transitionDuration: this.props.transitionDuration,
           transitionInterpolator: new FlyToInterpolator()
         };
@@ -92845,7 +93206,9 @@ void main() {
     placement: "top-left",
     viewId: null,
     label: "Reset Compass",
-    transitionDuration: 200
+    transitionDuration: 200,
+    onReset: () => {
+    }
   };
 
   // ../widgets/src/scale-widget.tsx
@@ -93354,6 +93717,16 @@ void main() {
     flyTo(viewState) {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v4) => v4.id) ?? [];
       for (const viewId of viewIds) {
+        if ("longitude" in viewState && "latitude" in viewState) {
+          this.props.onGeocode?.({
+            viewId,
+            coordinates: {
+              longitude: viewState.longitude,
+              latitude: viewState.latitude,
+              zoom: viewState.zoom
+            }
+          });
+        }
         const currentViewState = this.getViewState(viewId);
         const nextViewState = {
           ...currentViewState,
@@ -93377,7 +93750,9 @@ void main() {
     geocoder: "coordinates",
     customGeocoder: CoordinatesGeocoder,
     apiKey: "",
-    _geolocation: false
+    _geolocation: false,
+    onGeocode: () => {
+    }
   };
   function getGeocoder(props) {
     switch (props.geocoder) {
@@ -93415,6 +93790,7 @@ void main() {
       document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
     }
     onRenderHTML(rootElement) {
+      const isFullscreen = this.getFullscreen();
       B2(
         /* @__PURE__ */ u3(
           IconButton,
@@ -93422,8 +93798,8 @@ void main() {
             onClick: () => {
               this.handleClick().catch((err) => log_default.error(err)());
             },
-            label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel,
-            className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter"
+            label: isFullscreen ? this.props.exitLabel : this.props.enterLabel,
+            className: isFullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter"
           }
         ),
         rootElement
@@ -93437,21 +93813,24 @@ void main() {
     getContainer() {
       return this.props.container || this.deck?.props.parent || this.deck?.getCanvas()?.parentElement;
     }
+    getFullscreen() {
+      return this.fullscreen;
+    }
     onFullscreenChange() {
-      const prevFullscreen = this.fullscreen;
       const fullscreen = document.fullscreenElement === this.getContainer();
-      if (prevFullscreen !== fullscreen) {
-        this.fullscreen = !this.fullscreen;
+      if (fullscreen !== this.fullscreen) {
+        this.fullscreen = fullscreen;
+        this.props.onFullscreenChange?.(fullscreen);
+        this.updateHTML();
       }
-      this.updateHTML();
     }
     async handleClick() {
-      if (this.fullscreen) {
+      const isFullscreen = this.getFullscreen();
+      if (isFullscreen) {
         await this.exitFullscreen();
       } else {
         await this.requestFullscreen();
       }
-      this.updateHTML();
     }
     async requestFullscreen() {
       const container = this.getContainer();
@@ -93470,6 +93849,9 @@ void main() {
     }
     togglePseudoFullscreen() {
       this.getContainer()?.classList.toggle("deck-pseudo-fullscreen");
+      this.fullscreen = !this.fullscreen;
+      this.props.onFullscreenChange?.(this.fullscreen);
+      this.updateHTML();
     }
   };
   FullscreenWidget.defaultProps = {
@@ -93479,7 +93861,9 @@ void main() {
     viewId: null,
     enterLabel: "Enter Fullscreen",
     exitLabel: "Exit Fullscreen",
-    container: void 0
+    container: void 0,
+    onFullscreenChange: () => {
+    }
   };
 
   // ../widgets/src/splitter-widget.tsx
@@ -96263,20 +96647,27 @@ void main() {
       this.id = "timeline";
       this.className = "deck-widget-timeline";
       this.placement = "fill";
-      this.playing = false;
+      this._playing = false;
       this.timerId = null;
       this.handlePlayPause = () => {
-        if (this.playing) {
-          this.stop();
-        } else {
-          this.play();
+        const isPlaying = this.getPlaying();
+        const nextPlaying = !isPlaying;
+        this.props.onPlayingChange?.(nextPlaying);
+        if (this.props.playing === void 0) {
+          if (nextPlaying) {
+            this.play();
+          } else {
+            this.stop();
+          }
         }
       };
       this.handleTimeChange = ([value]) => {
-        this.currentTime = value;
-        this.props.timeline?.setTime(value);
         this.props.onTimeChange(value);
-        this.updateHTML();
+        if (this.props.time === void 0) {
+          this.currentTime = value;
+          this.props.timeline?.setTime(value);
+          this.updateHTML();
+        }
       };
       this.tick = () => {
         const {
@@ -96285,51 +96676,90 @@ void main() {
           loop
         } = this.props;
         if (step > 0) {
-          let next = Math.round(this.currentTime / step) * step + step;
+          const currentTime = this.getTime();
+          let next = Math.round(currentTime / step) * step + step;
           if (next > max7) {
-            if (this.currentTime < max7) {
+            if (currentTime < max7) {
               next = max7;
             } else if (loop) {
               next = min7;
             } else {
               next = max7;
-              this.playing = false;
+              this._playing = false;
+              this.props.onPlayingChange?.(false);
             }
           }
-          this.currentTime = next;
           this.props.onTimeChange(next);
+          if (this.props.time === void 0) {
+            this.currentTime = next;
+            this.props.timeline?.setTime(next);
+          }
           this.updateHTML();
         }
-        if (this.playing) {
+        if (this._playing) {
           this.timerId = window.setTimeout(this.tick, this.props.playInterval);
         } else {
           this.timerId = null;
         }
       };
       this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
-      this.props.timeline?.setTime(this.currentTime);
+      const syncTime = this.props.time ?? this.currentTime;
+      this.props.timeline?.setTime(syncTime);
       this.setProps(this.props);
     }
+    /**
+     * Returns the current time value.
+     * In controlled mode, returns the time prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getTime() {
+      return this.props.time ?? this.currentTime;
+    }
+    /**
+     * Returns the current playing state.
+     * In controlled mode, returns the playing prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getPlaying() {
+      return this.props.playing ?? this._playing;
+    }
     setProps(props) {
+      const { playing: prevPlaying, time: prevTime } = this.props;
       this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
+      if (props.time !== void 0 && props.time !== prevTime) {
+        this.props.timeline?.setTime(props.time);
+      }
+      if (props.playing !== void 0 && props.playing !== prevPlaying) {
+        if (props.playing && !this._playing) {
+          this._startTimer();
+        } else if (!props.playing && this._playing) {
+          this._stopTimer();
+        }
+      }
     }
     onAdd() {
-      this.playing = false;
+      this._playing = false;
       this.timerId = null;
-      if (this.props.autoPlay)
-        this.play();
+      if (this.props.autoPlay) {
+        if (this.props.playing !== void 0) {
+          this.props.onPlayingChange?.(true);
+        } else {
+          this.play();
+        }
+      }
     }
     onRemove() {
       this.stop();
     }
     onRenderHTML(rootElement) {
       const { timeRange, step, formatLabel } = this.props;
-      const currentTime = this.currentTime;
+      const isPlaying = this.getPlaying();
+      const currentTime = this.getTime();
       rootElement.dataset.placement = this.props.placement;
       B2(
         /* @__PURE__ */ u3("div", { className: "deck-widget-button-group", children: [
-          this.playing ? /* @__PURE__ */ u3(
+          isPlaying ? /* @__PURE__ */ u3(
             IconButton,
             {
               label: "Pause",
@@ -96366,24 +96796,34 @@ void main() {
       );
     }
     play() {
-      this.playing = true;
+      this._playing = true;
       const {
         timeRange: [min7, max7]
       } = this.props;
-      if (this.currentTime >= max7) {
+      if (this.props.time === void 0 && this.getTime() >= max7) {
         this.currentTime = min7;
         this.props.onTimeChange(min7);
+        this.props.timeline?.setTime(min7);
       }
       this.updateHTML();
       this.tick();
     }
     stop() {
-      this.playing = false;
+      this._stopTimer();
+      this.updateHTML();
+    }
+    /** Start the playback timer (used internally) */
+    _startTimer() {
+      this._playing = true;
+      this.tick();
+    }
+    /** Stop the playback timer (used internally) */
+    _stopTimer() {
+      this._playing = false;
       if (this.timerId !== null) {
         window.clearTimeout(this.timerId);
         this.timerId = null;
       }
-      this.updateHTML();
     }
   };
   TimelineWidget.defaultProps = {
@@ -96395,11 +96835,15 @@ void main() {
     timeRange: [0, 100],
     step: 1,
     initialTime: void 0,
+    time: void 0,
     onTimeChange: () => {
     },
     autoPlay: false,
     loop: false,
     playInterval: 1e3,
+    playing: void 0,
+    onPlayingChange: () => {
+    },
     formatLabel: String
   };
 
@@ -96589,53 +97033,72 @@ void main() {
     }
     // eslint-disable-next-line complexity
     setProps(props) {
-      const { lightModeTheme, darkModeTheme } = this.props;
+      const { lightModeTheme, darkModeTheme, themeMode: prevThemeMode } = this.props;
       this.placement = props.placement ?? this.placement;
       this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
-      switch (this.themeMode) {
+      const currentMode = this.getThemeMode();
+      if (props.themeMode !== void 0 && props.themeMode !== prevThemeMode) {
+        this._applyTheme(props.themeMode);
+        return;
+      }
+      switch (currentMode) {
         case "light":
           if (props.lightModeTheme && !deepEqual2(props.lightModeTheme, lightModeTheme, 1)) {
-            this._setThemeMode("light");
+            this._applyTheme("light");
           }
           break;
         case "dark":
           if (props.darkModeTheme && !deepEqual2(props.darkModeTheme, darkModeTheme, 1)) {
-            this._setThemeMode("dark");
+            this._applyTheme("dark");
           }
           break;
         default:
-          log_default.warn(`Invalid theme mode ${this.themeMode}`)();
+          log_default.warn(`Invalid theme mode ${currentMode}`)();
       }
     }
     onRenderHTML(rootElement) {
       const { lightModeLabel, darkModeLabel } = this.props;
+      const currentMode = this.getThemeMode();
       B2(
         /* @__PURE__ */ u3(
           IconButton,
           {
             onClick: this._handleClick.bind(this),
-            label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel,
-            className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun"
+            label: currentMode === "dark" ? darkModeLabel : lightModeLabel,
+            className: currentMode === "dark" ? "deck-widget-moon" : "deck-widget-sun"
           }
         ),
         rootElement
       );
     }
     onAdd() {
-      this._setThemeMode(this.themeMode);
+      this._applyTheme(this.getThemeMode());
+    }
+    /**
+     * Returns the current theme mode.
+     * In controlled mode, returns the themeMode prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getThemeMode() {
+      return this.props.themeMode ?? this.themeMode;
     }
     _handleClick() {
-      const newThemeMode = this.themeMode === "dark" ? "light" : "dark";
-      this._setThemeMode(newThemeMode);
+      const currentMode = this.getThemeMode();
+      const nextMode = currentMode === "dark" ? "light" : "dark";
+      this.props.onThemeModeChange?.(nextMode);
+      if (this.props.themeMode === void 0) {
+        this.themeMode = nextMode;
+        this._applyTheme(nextMode);
+      }
     }
-    _setThemeMode(themeMode) {
-      this.themeMode = themeMode;
+    /** Apply theme styling without changing internal state */
+    _applyTheme(themeMode) {
       const container = this.rootElement?.closest(".deck-widget-container");
       if (container) {
         const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
         applyStyles(container, themeStyle);
-        const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
+        const label = themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
         log_default.log(1, `Switched theme to ${label}`, themeStyle)();
         this.updateHTML();
       }
@@ -96661,7 +97124,10 @@ void main() {
     lightModeTheme: LightGlassTheme,
     darkModeLabel: "Dark Mode",
     darkModeTheme: DarkGlassTheme,
-    initialThemeMode: "auto"
+    initialThemeMode: "auto",
+    themeMode: void 0,
+    onThemeModeChange: () => {
+    }
   };
 
   // ../widgets/src/loading-widget.tsx
@@ -96696,6 +97162,7 @@ void main() {
       const loading = layers.some((layer) => !layer.isLoaded);
       if (loading !== this.loading) {
         this.loading = loading;
+        this.props.onLoadingChange?.(loading);
         this.updateHTML();
       }
     }
@@ -96708,7 +97175,9 @@ void main() {
     id: "loading",
     placement: "top-left",
     viewId: null,
-    label: "Loading layer data"
+    label: "Loading layer data",
+    onLoadingChange: () => {
+    }
   };
 
   // ../widgets/src/stats-widget.tsx
@@ -96734,19 +97203,31 @@ void main() {
       this.className = "deck-widget-stats";
       this.placement = "top-left";
       this._counter = 0;
-      this.collapsed = true;
-      this._toggleCollapsed = () => {
-        this.collapsed = !this.collapsed;
-        this.updateHTML();
+      this._expanded = false;
+      this._toggleExpanded = () => {
+        const nextExpanded = !this.getExpanded();
+        this.props.onExpandedChange?.(nextExpanded);
+        if (this.props.expanded === void 0) {
+          this._expanded = nextExpanded;
+          this.updateHTML();
+        }
       };
       this._getFps = () => {
         return Math.round(this.deck?.metrics.fps ?? 0);
       };
       this._formatters = { ...DEFAULT_FORMATTERS };
       this._resetOnUpdate = { ...this.props.resetOnUpdate };
-      this.collapsed = !props.defaultIsExpanded;
+      this._expanded = Boolean(props.initialExpanded);
       this.setProps(props);
     }
+    /**
+     * Returns the current expanded state.
+     * In controlled mode, returns the expanded prop.
+     * In uncontrolled mode, returns the internal state.
+     */
+    getExpanded() {
+      return this.props.expanded ?? this._expanded;
+    }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
       this.viewId = props.viewId ?? this.viewId;
@@ -96767,9 +97248,9 @@ void main() {
       }
     }
     onRenderHTML(rootElement) {
-      const collapsed = this.collapsed;
-      if (collapsed) {
-        B2(/* @__PURE__ */ u3(FpsIcon, { getFps: this._getFps, onClick: this._toggleCollapsed }), rootElement);
+      const isExpanded = this.getExpanded();
+      if (!isExpanded) {
+        B2(/* @__PURE__ */ u3(FpsIcon, { getFps: this._getFps, onClick: this._toggleExpanded }), rootElement);
         return;
       }
       const stats2 = this._getStats();
@@ -96796,7 +97277,7 @@ void main() {
             {
               className: "deck-widget-stats-header",
               style: { cursor: "pointer", pointerEvents: "auto" },
-              onClick: this._toggleCollapsed,
+              onClick: this._toggleExpanded,
               children: [
                 /* @__PURE__ */ u3("b", { children: title }),
                 deviceLabel && /* @__PURE__ */ u3("span", { className: "deck-widget-stats-device", children: deviceLabel }),
@@ -96810,7 +97291,7 @@ void main() {
       );
     }
     onRedraw() {
-      if (!this.collapsed) {
+      if (this.getExpanded()) {
         const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
         if (this._counter++ % framesPerUpdate === 0) {
           this.updateHTML();
@@ -96863,13 +97344,16 @@ void main() {
     type: "deck",
     placement: "top-left",
     viewId: null,
-    defaultIsExpanded: false,
+    initialExpanded: false,
     stats: void 0,
     title: "Stats",
     framesPerUpdate: 1,
     formatters: {},
     resetOnUpdate: {},
-    id: "stats"
+    id: "stats",
+    expanded: void 0,
+    onExpandedChange: () => {
+    }
   };
   function FpsIcon({ getFps, onClick }) {
     const [fps, setFps] = h2(getFps());