deck.gl 9.2.0-alpha.3 → 9.2.0-beta.2

package/dist/dist.dev.js

@@ -1907,7 +1907,7 @@ or create a device with the 'debug: true' prop.`;
         VERSION = (
           // Version detection using build plugin
           // @ts-expect-error no-undef
-          true ? "9.2.0-alpha.5" : "running from source"
+          true ? "9.2.0" : "running from source"
         );
         spector;
         preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -2253,6 +2253,13 @@ or create a device with the 'debug: true' prop.`;
         destroy() {
           this.destroyed = true;
         }
+        setProps(props) {
+          if ("useDevicePixels" in props) {
+            this.props.useDevicePixels = props.useDevicePixels || false;
+            this._updateDrawingBufferSize();
+          }
+          return this;
+        }
         // SIZE METHODS
         /**
          * Returns the size covered by the canvas in CSS pixels
@@ -2370,6 +2377,10 @@ or create a device with the 'debug: true' prop.`;
           const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
           this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
           this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
+          this._updateDrawingBufferSize();
+          this.device.props.onResize(this, { oldPixelSize });
+        }
+        _updateDrawingBufferSize() {
           if (this.props.autoResize) {
             if (typeof this.props.useDevicePixels === "number") {
               const dpr = this.props.useDevicePixels;
@@ -2384,7 +2395,6 @@ or create a device with the 'debug: true' prop.`;
           this._initializedResolvers.resolve();
           this.isInitialized = true;
           this.updatePosition();
-          this.device.props.onResize(this, { oldPixelSize });
         }
         /** Monitor DPR changes */
         _observeDevicePixelRatio() {
@@ -26703,20 +26713,20 @@ void main() {
     return a6[0] * b4[0] + a6[1] * b4[1] + a6[2] * b4[2] + a6[3] * b4[3];
   }
   function cross3(out, u6, v5, w5) {
-    const A4 = v5[0] * w5[1] - v5[1] * w5[0];
-    const B4 = v5[0] * w5[2] - v5[2] * w5[0];
-    const C4 = v5[0] * w5[3] - v5[3] * w5[0];
-    const D3 = v5[1] * w5[2] - v5[2] * w5[1];
-    const E2 = v5[1] * w5[3] - v5[3] * w5[1];
-    const F3 = v5[2] * w5[3] - v5[3] * w5[2];
-    const G2 = u6[0];
+    const A5 = v5[0] * w5[1] - v5[1] * w5[0];
+    const B5 = v5[0] * w5[2] - v5[2] * w5[0];
+    const C5 = v5[0] * w5[3] - v5[3] * w5[0];
+    const D4 = v5[1] * w5[2] - v5[2] * w5[1];
+    const E3 = v5[1] * w5[3] - v5[3] * w5[1];
+    const F4 = v5[2] * w5[3] - v5[3] * w5[2];
+    const G3 = u6[0];
     const H2 = u6[1];
     const I3 = u6[2];
     const J2 = u6[3];
-    out[0] = H2 * F3 - I3 * E2 + J2 * D3;
-    out[1] = -(G2 * F3) + I3 * C4 - J2 * B4;
-    out[2] = G2 * E2 - H2 * C4 + J2 * A4;
-    out[3] = -(G2 * D3) + H2 * B4 - I3 * A4;
+    out[0] = H2 * F4 - I3 * E3 + J2 * D4;
+    out[1] = -(G3 * F4) + I3 * C5 - J2 * B5;
+    out[2] = G3 * E3 - H2 * C5 + J2 * A5;
+    out[3] = -(G3 * D4) + H2 * B5 - I3 * A5;
     return out;
   }
   function lerp4(out, a6, b4, t5) {
@@ -35714,9 +35724,9 @@ ${fragment}
   }
   function getEclipticLongitude(meanAnomaly) {
     const M3 = meanAnomaly;
-    const C4 = DEGREES_TO_RADIANS5 * (1.9148 * Math.sin(M3) + 0.02 * Math.sin(2 * M3) + 3e-4 * Math.sin(3 * M3));
+    const C5 = DEGREES_TO_RADIANS5 * (1.9148 * Math.sin(M3) + 0.02 * Math.sin(2 * M3) + 3e-4 * Math.sin(3 * M3));
     const P3 = DEGREES_TO_RADIANS5 * 102.9372;
-    return M3 + C4 + P3 + Math.PI;
+    return M3 + C5 + P3 + Math.PI;
   }
   function getSunCoords(dates) {
     const M3 = getSolarMeanAnomaly(dates);
@@ -47962,17 +47972,17 @@ void main(void) {
       const lambda = lng * DEGREES_TO_RADIANS6;
       const phi = lat * DEGREES_TO_RADIANS6;
       const cosPhi = Math.cos(phi);
-      const D3 = (Z2 / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-      return [Math.sin(lambda) * cosPhi * D3, -Math.cos(lambda) * cosPhi * D3, Math.sin(phi) * D3];
+      const D4 = (Z2 / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+      return [Math.sin(lambda) * cosPhi * D4, -Math.cos(lambda) * cosPhi * D4, Math.sin(phi) * D4];
     }
     unprojectPosition(xyz) {
       const [x4, y5, z4] = xyz;
-      const D3 = vec3_exports.len(xyz);
-      const phi = Math.asin(z4 / D3);
+      const D4 = vec3_exports.len(xyz);
+      const phi = Math.asin(z4 / D4);
       const lambda = Math.atan2(x4, -y5);
       const lng = lambda * RADIANS_TO_DEGREES3;
       const lat = phi * RADIANS_TO_DEGREES3;
-      const Z2 = (D3 / GLOBE_RADIUS - 1) * EARTH_RADIUS;
+      const Z2 = (D4 / GLOBE_RADIUS - 1) * EARTH_RADIUS;
       return [lng, lat, Z2];
     }
     projectFlat(xyz) {
@@ -56806,12 +56816,12 @@ void main(void) {
   function frob2(a22) {
     return Math.hypot(a22[0], a22[1], a22[2], a22[3]);
   }
-  function LDU(L22, D3, U2, a22) {
+  function LDU(L22, D22, U2, a22) {
     L22[2] = a22[2] / a22[0];
     U2[0] = a22[0];
     U2[1] = a22[1];
     U2[3] = a22[3] - L22[2] * U2[1];
-    return [L22, D3, U2];
+    return [L22, D22, U2];
   }
   function add7(out, a22, b22) {
     out[0] = a22[0] + b22[0];
@@ -58005,7 +58015,6 @@ void main(void) {
   var PentagonShape = class _PentagonShape {
     constructor(vertices) {
       this.vertices = vertices;
-      this.id = { i: 0, j: 0, k: 0, resolution: 1 };
       if (!this.isWindingCorrect()) {
         this.vertices.reverse();
       }
@@ -58076,36 +58085,36 @@ void main(void) {
       return newPentagon;
     }
     getCenter() {
-      return this.vertices.reduce(
-        (sum2, v22) => [sum2[0] + v22[0] / 5, sum2[1] + v22[1] / 5],
-        [0, 0]
-      );
+      const n4 = this.vertices.length;
+      const sum2 = this.vertices.reduce((sum22, v22) => [sum22[0] + v22[0] / n4, sum22[1] + v22[1] / n4], [0, 0]);
+      return sum2;
     }
     /**
      * Tests if a point is inside the pentagon by checking if it's on the correct side of all edges.
      * Assumes consistent winding order (counter-clockwise).
      * @param point The point to test
-     * @returns -1 if point is inside, otherwise a value proportional to the distance from the point to the edge
+     * @returns 1 if point is inside, otherwise a negative value proportional to the distance from the point to the edge
      */
     containsPoint(point) {
       if (!this.isWindingCorrect()) {
         throw new Error("Pentagon is not counter-clockwise");
       }
       const N3 = this.vertices.length;
+      let dMax = 1;
       for (let i7 = 0; i7 < N3; i7++) {
         const v1 = this.vertices[i7];
         const v22 = this.vertices[(i7 + 1) % N3];
-        const dx = v22[0] - v1[0];
-        const dy = v22[1] - v1[1];
+        const dx = v1[0] - v22[0];
+        const dy = v1[1] - v22[1];
         const px = point[0] - v1[0];
         const py = point[1] - v1[1];
         const crossProduct = dx * py - dy * px;
-        if (crossProduct > 0) {
+        if (crossProduct < 0) {
           const pLength = Math.sqrt(px * px + py * py);
-          return crossProduct / pLength;
+          dMax = Math.min(dMax, crossProduct / pLength);
         }
       }
-      return -1;
+      return dMax;
     }
     /**
      * Splits each edge of the pentagon into the specified number of segments
@@ -58179,16 +58188,16 @@ void main(void) {
      * @param C Array of coefficients
      * @returns Transformed angle in radians
      */
-    applyCoefficients(phi, C4) {
+    applyCoefficients(phi, C22) {
       const sinPhi = Math.sin(phi);
       const cosPhi = Math.cos(phi);
       const X2 = 2 * (cosPhi - sinPhi) * (cosPhi + sinPhi);
       let u0, u1;
-      u0 = X2 * C4[5] + C4[4];
-      u1 = X2 * u0 + C4[3];
-      u0 = X2 * u1 - u0 + C4[2];
-      u1 = X2 * u0 - u1 + C4[1];
-      u0 = X2 * u1 - u0 + C4[0];
+      u0 = X2 * C22[5] + C22[4];
+      u1 = X2 * u0 + C22[3];
+      u0 = X2 * u1 - u0 + C22[2];
+      u1 = X2 * u0 - u1 + C22[1];
+      u0 = X2 * u1 - u0 + C22[0];
       return phi + 2 * sinPhi * cosPhi * u0;
     }
     /**
@@ -58270,12 +58279,6 @@ void main(void) {
     const latitude = radToDeg(geodeticLat);
     return [longitude, latitude];
   }
-  function quatFromSpherical(axis) {
-    const cartesian = toCartesian(axis);
-    const Q2 = quat_exports.create();
-    quat_exports.rotationTo(Q2, [0, 0, 1], cartesian);
-    return Q2;
-  }
   function normalizeLongitudes(contour) {
     const points = contour.map((lonLat) => toCartesian(fromLonLat(lonLat)));
     const center2 = vec3_exports2.create();
@@ -58298,6 +58301,53 @@ void main(void) {
     });
   }
   common_exports2.setMatrixArrayType(Float64Array);
+  var SQRT5 = Math.sqrt(5);
+  var INV_SQRT5 = Math.sqrt(0.2);
+  var sinAlpha = Math.sqrt((1 - INV_SQRT5) / 2);
+  var cosAlpha = Math.sqrt((1 + INV_SQRT5) / 2);
+  var A2 = 0.5;
+  var B2 = Math.sqrt((2.5 - SQRT5) / 10);
+  var C2 = Math.sqrt((2.5 + SQRT5) / 10);
+  var D2 = Math.sqrt((1 + INV_SQRT5) / 8);
+  var E2 = Math.sqrt((1 - INV_SQRT5) / 8);
+  var F2 = Math.sqrt((3 - SQRT5) / 8);
+  var G2 = Math.sqrt((3 + SQRT5) / 8);
+  var faceCenters = [
+    [0, 0],
+    // Doesn't actually matter as rotation is 0
+    // First ring: five vertices, CCW, multiplied by sinAlpha
+    [sinAlpha, 0],
+    // [cos0, sin0]
+    [B2, A2],
+    // [cos72, sin72]
+    [-D2, F2],
+    // [-cos36, sin36]
+    [-D2, -F2],
+    // [-cos36, -sin36]
+    [B2, -A2],
+    // [cos72, -sin72]
+    // Second ring: the same five vertices but negated (180deg rotation), multiplied by cosAlpha
+    [-cosAlpha, 0],
+    // [-cos0, -sin0]
+    [-E2, -G2],
+    // [-cos72, -sin72]
+    [C2, -A2],
+    // [cos36, -sin36]
+    [C2, A2],
+    // [cos36, sin36]
+    [-E2, G2],
+    // [-cos72, sin72]
+    [0, 0]
+  ];
+  var axes = faceCenters.map(([x4, y5]) => [-y5, x4]);
+  var quaternions = axes.map((axis, i7) => {
+    if (i7 === 0)
+      return [0, 0, 0, 1];
+    if (i7 === 11)
+      return [0, -1, 0, 0];
+    return [...axis, 0, i7 < 6 ? cosAlpha : sinAlpha];
+  });
+  common_exports2.setMatrixArrayType(Float64Array);
   var clockwiseFan = ["vu", "uw", "vw", "vw", "vw"];
   var clockwiseStep = ["wu", "uw", "vw", "vu", "uw"];
   var counterStep = ["wu", "uv", "wv", "wu", "uw"];
@@ -58332,24 +58382,27 @@ void main(void) {
   var ORIGIN_ORDER = [0, 1, 2, 4, 3, 5, 7, 8, 6, 11, 10, 9];
   var origins = [];
   function generateOrigins() {
-    addOrigin([0, 0], 0);
+    addOrigin([0, 0], 0, quaternions[0]);
     for (let i7 = 0; i7 < 5; i7++) {
       const alpha = i7 * TWO_PI_OVER_5;
       const alpha2 = alpha + PI_OVER_5;
-      addOrigin([alpha, interhedralAngle], PI_OVER_5);
-      addOrigin([alpha2, Math.PI - interhedralAngle], PI_OVER_5);
+      addOrigin([alpha, interhedralAngle], PI_OVER_5, quaternions[i7 + 1]);
+      addOrigin([alpha2, Math.PI - interhedralAngle], PI_OVER_5, quaternions[(i7 + 3) % 5 + 6]);
     }
-    addOrigin([0, Math.PI], 0);
+    addOrigin([0, Math.PI], 0, quaternions[11]);
   }
   var originId = 0;
-  function addOrigin(axis, angle32) {
+  function addOrigin(axis, angle32, quaternion) {
     if (originId > 11) {
       throw new Error(`Too many origins: ${originId}`);
     }
+    const inverseQuat = quat_exports.create();
+    quat_exports.conjugate(inverseQuat, quaternion);
     const origin = {
       id: originId,
       axis,
-      quat: quatFromSpherical(axis),
+      quat: quaternion,
+      inverseQuat,
       angle: angle32,
       orientation: QUINTANT_ORIENTATIONS[originId],
       firstQuintant: QUINTANT_FIRST[originId]
@@ -58390,39 +58443,39 @@ void main(void) {
   var crossCD = vec3_exports2.create();
   var scaledA = vec3_exports2.create();
   var scaledB = vec3_exports2.create();
-  function vectorDifference(A4, B4) {
-    vec3_exports2.lerp(midpointAB, A4, B4, 0.5);
+  function vectorDifference(A22, B22) {
+    vec3_exports2.lerp(midpointAB, A22, B22, 0.5);
     vec3_exports2.normalize(midpointAB, midpointAB);
-    vec3_exports2.cross(midpointAB, A4, midpointAB);
-    const D3 = vec3_exports2.length(midpointAB);
-    if (D3 < 1e-8) {
-      const AB = vec3_exports2.subtract(vec3_exports2.create(), A4, B4);
+    vec3_exports2.cross(midpointAB, A22, midpointAB);
+    const D22 = vec3_exports2.length(midpointAB);
+    if (D22 < 1e-8) {
+      const AB = vec3_exports2.subtract(vec3_exports2.create(), A22, B22);
       const halfDistance = 0.5 * vec3_exports2.length(AB);
       return halfDistance;
     }
-    return D3;
+    return D22;
   }
-  function tripleProduct(A4, B4, C4) {
-    vec3_exports2.cross(crossCD, B4, C4);
-    return vec3_exports2.dot(A4, crossCD);
+  function tripleProduct(A22, B22, C22) {
+    vec3_exports2.cross(crossCD, B22, C22);
+    return vec3_exports2.dot(A22, crossCD);
   }
-  function quadrupleProduct(out, A4, B4, C4, D3) {
-    vec3_exports2.cross(crossCD, C4, D3);
-    const tripleProductACD = vec3_exports2.dot(A4, crossCD);
-    const tripleProductBCD = vec3_exports2.dot(B4, crossCD);
-    vec3_exports2.scale(scaledA, A4, tripleProductBCD);
-    vec3_exports2.scale(scaledB, B4, tripleProductACD);
+  function quadrupleProduct(out, A22, B22, C22, D22) {
+    vec3_exports2.cross(crossCD, C22, D22);
+    const tripleProductACD = vec3_exports2.dot(A22, crossCD);
+    const tripleProductBCD = vec3_exports2.dot(B22, crossCD);
+    vec3_exports2.scale(scaledA, A22, tripleProductBCD);
+    vec3_exports2.scale(scaledB, B22, tripleProductACD);
     return vec3_exports2.sub(out, scaledB, scaledA);
   }
-  function slerp22(out, A4, B4, t5) {
-    const gamma = vec3_exports2.angle(A4, B4);
+  function slerp22(out, A22, B22, t5) {
+    const gamma = vec3_exports2.angle(A22, B22);
     if (gamma < 1e-12) {
-      return vec3_exports2.lerp(out, A4, B4, t5);
+      return vec3_exports2.lerp(out, A22, B22, t5);
     }
     const weightA = Math.sin((1 - t5) * gamma) / Math.sin(gamma);
     const weightB = Math.sin(t5 * gamma) / Math.sin(gamma);
-    const scaledA2 = vec3_exports2.scale(vec3_exports2.create(), A4, weightA);
-    const scaledB2 = vec3_exports2.scale(vec3_exports2.create(), B4, weightB);
+    const scaledA2 = vec3_exports2.scale(vec3_exports2.create(), A22, weightA);
+    const scaledB2 = vec3_exports2.scale(vec3_exports2.create(), B22, weightB);
     return vec3_exports2.add(out, scaledA2, scaledB2);
   }
   common_exports2.setMatrixArrayType(Float64Array);
@@ -58589,19 +58642,19 @@ void main(void) {
      * @returns The face coordinates
      */
     forward(v22, sphericalTriangle, faceTriangle) {
-      const [A4, B4, C4] = sphericalTriangle;
-      const triangleShape = new SphericalTriangleShape([A4, B4, C4]);
-      const Z2 = vec3_exports2.subtract(vec3_exports2.create(), v22, A4);
+      const [A22, B22, C22] = sphericalTriangle;
+      const triangleShape = new SphericalTriangleShape([A22, B22, C22]);
+      const Z2 = vec3_exports2.subtract(vec3_exports2.create(), v22, A22);
       vec3_exports2.normalize(Z2, Z2);
-      const p5 = quadrupleProduct(vec3_exports2.create(), A4, Z2, B4, C4);
+      const p5 = quadrupleProduct(vec3_exports2.create(), A22, Z2, B22, C22);
       vec3_exports2.normalize(p5, p5);
-      const h5 = vectorDifference(A4, v22) / vectorDifference(A4, p5);
+      const h5 = vectorDifference(A22, v22) / vectorDifference(A22, p5);
       const Area_ABC = triangleShape.getArea();
       const scaledArea = h5 / Area_ABC;
       const b22 = [
         1 - h5,
-        scaledArea * new SphericalTriangleShape([A4, p5, C4]).getArea(),
-        scaledArea * new SphericalTriangleShape([A4, B4, p5]).getArea()
+        scaledArea * new SphericalTriangleShape([A22, p5, C22]).getArea(),
+        scaledArea * new SphericalTriangleShape([A22, B22, p5]).getArea()
       ];
       return barycentricToFace(b22, faceTriangle);
     }
@@ -58613,18 +58666,18 @@ void main(void) {
      * @returns The spherical coordinates
      */
     inverse(facePoint, faceTriangle, sphericalTriangle) {
-      const [A4, B4, C4] = sphericalTriangle;
-      const triangleShape = new SphericalTriangleShape([A4, B4, C4]);
+      const [A22, B22, C22] = sphericalTriangle;
+      const triangleShape = new SphericalTriangleShape([A22, B22, C22]);
       const b22 = faceToBarycentric(facePoint, faceTriangle);
       const threshold2 = 1 - 1e-14;
       if (b22[0] > threshold2)
-        return A4;
+        return A22;
       if (b22[1] > threshold2)
-        return B4;
+        return B22;
       if (b22[2] > threshold2)
-        return C4;
+        return C22;
       const c1 = vec3_exports2.create();
-      vec3_exports2.cross(c1, B4, C4);
+      vec3_exports2.cross(c1, B22, C22);
       const Area_ABC = triangleShape.getArea();
       const h5 = 1 - b22[0];
       const R2 = b22[2] / h5;
@@ -58632,18 +58685,18 @@ void main(void) {
       const S3 = Math.sin(alpha);
       const halfC = Math.sin(alpha / 2);
       const CC = 2 * halfC * halfC;
-      const c01 = vec3_exports2.dot(A4, B4);
-      const c12 = vec3_exports2.dot(B4, C4);
-      const c20 = vec3_exports2.dot(C4, A4);
+      const c01 = vec3_exports2.dot(A22, B22);
+      const c12 = vec3_exports2.dot(B22, C22);
+      const c20 = vec3_exports2.dot(C22, A22);
       const s12 = vec3_exports2.length(c1);
-      const V22 = vec3_exports2.dot(A4, c1);
+      const V22 = vec3_exports2.dot(A22, c1);
       const f6 = S3 * V22 + CC * (c01 * c12 - c20);
       const g3 = CC * s12 * (1 + c01);
       const q3 = 2 / Math.acos(c12) * Math.atan2(g3, f6);
-      const P3 = slerp22(vec3_exports2.create(), B4, C4, q3);
-      const K2 = vectorDifference(A4, P3);
+      const P3 = slerp22(vec3_exports2.create(), B22, C22, q3);
+      const K2 = vectorDifference(A22, P3);
       const t5 = this.safeAcos(h5 * K2) / this.safeAcos(K2);
-      const out = slerp22([0, 0, 0], A4, P3, t5);
+      const out = slerp22([0, 0, 0], A22, P3, t5);
       return out;
     }
     /**
@@ -58715,10 +58768,10 @@ void main(void) {
       return;
     const parentK = digits[i7] || 0;
     const childK = digits[i7 - 1];
-    const F3 = flips[0] + flips[1];
+    const F22 = flips[0] + flips[1];
     let needsShift = true;
     let first = true;
-    if (invertJ !== (F3 === 0)) {
+    if (invertJ !== (F22 === 0)) {
       needsShift = parentK === 1 || parentK === 2;
       first = parentK === 1;
     } else {
@@ -58800,11 +58853,11 @@ void main(void) {
       pentagon.rotate180();
     }
     const { k: k4 } = anchor;
-    const F3 = anchor.flips[0] + anchor.flips[1];
+    const F22 = anchor.flips[0] + anchor.flips[1];
     if (
       // Orient last two pentagons when both or neither flips are YES
-      (F3 === -2 || F3 === 2) && k4 > 1 || // Orient first & last pentagons when only one of flips is YES
-      F3 === 0 && (k4 === 0 || k4 === 3)
+      (F22 === -2 || F22 === 2) && k4 > 1 || // Orient first & last pentagons when only one of flips is YES
+      F22 === 0 && (k4 === 0 || k4 === 3)
     ) {
       pentagon.reflectY();
     }
@@ -58911,16 +58964,15 @@ void main(void) {
     forward(spherical, originId2) {
       const origin = origins[originId2];
       const unprojected = toCartesian(spherical);
-      const inverseQuat = quat_exports.create();
-      quat_exports.invert(inverseQuat, origin.quat);
       const out = vec3_exports2.create();
-      vec3_exports2.transformQuat(out, unprojected, inverseQuat);
+      vec3_exports2.transformQuat(out, unprojected, origin.inverseQuat);
       const projectedSpherical = toSpherical(out);
       const polar = this.gnomonic.forward(projectedSpherical);
       polar[1] = polar[1] - origin.angle;
       const faceTriangleIndex = this.getFaceTriangleIndex(polar);
-      let faceTriangle = this.getFaceTriangle(faceTriangleIndex);
-      let sphericalTriangle = this.getSphericalTriangle(faceTriangleIndex, originId2, false);
+      const reflect = this.shouldReflect(polar);
+      let faceTriangle = this.getFaceTriangle(faceTriangleIndex, reflect, false);
+      let sphericalTriangle = this.getSphericalTriangle(faceTriangleIndex, originId2, reflect);
       return this.polyhedral.forward(unprojected, sphericalTriangle, faceTriangle);
     }
     /**
@@ -58932,14 +58984,26 @@ void main(void) {
     inverse(face, originId2) {
       const polar = toPolar(face);
       const faceTriangleIndex = this.getFaceTriangleIndex(polar);
-      const [rho, gamma] = polar;
-      const D3 = toFace([rho, this.normalizeGamma(gamma)])[0];
-      const reflect = D3 > distanceToEdge;
+      const reflect = this.shouldReflect(polar);
       const faceTriangle = this.getFaceTriangle(faceTriangleIndex, reflect, false);
-      let sphericalTriangle = this.getSphericalTriangle(faceTriangleIndex, originId2, reflect);
+      const sphericalTriangle = this.getSphericalTriangle(faceTriangleIndex, originId2, reflect);
       const unprojected = this.polyhedral.inverse(face, faceTriangle, sphericalTriangle);
       return toSpherical(unprojected);
     }
+    /**
+     * Detects when point is beyond the edge of the dodecahedron face
+     * In the standard case (reflect = false), the face and spherical triangle can be
+     * used directly.
+     * In the reflected case (reflect = true), the point is beyond the edge of the dodecahedron face,
+     * and so the face triangle is squashed to unproject correctly onto the neighboring dodecahedron face.
+     * @param polar Polar coordinates
+     * @returns True if point is beyond the edge of the dodecahedron face
+     */
+    shouldReflect(polar) {
+      const [rho, gamma] = polar;
+      const D22 = toFace([rho, this.normalizeGamma(gamma)])[0];
+      return D22 > distanceToEdge;
+    }
     /**
      * Given a polar coordinate, returns the index of the face triangle it belongs to
      * @param polar Polar coordinates
@@ -58974,12 +59038,12 @@ void main(void) {
       return even ? [vCenter, vEdgeMidpoint, vCorner1] : [vCenter, vCorner2, vEdgeMidpoint];
     }
     _getReflectedFaceTriangle(faceTriangleIndex, squashed = false) {
-      let [A4, B4, C4] = this._getFaceTriangle(faceTriangleIndex).map((face) => vec2_exports2.clone(face));
+      let [A22, B22, C22] = this._getFaceTriangle(faceTriangleIndex).map((face) => vec2_exports2.clone(face));
       const even = faceTriangleIndex % 2 === 0;
-      vec2_exports2.negate(A4, A4);
-      const midpoint = even ? B4 : C4;
-      vec2_exports2.scaleAndAdd(A4, A4, midpoint, squashed ? 1 + 1 / Math.cos(interhedralAngle) : 2);
-      return [A4, C4, B4];
+      vec2_exports2.negate(A22, A22);
+      const midpoint = even ? B22 : C22;
+      vec2_exports2.scaleAndAdd(A22, A22, midpoint, squashed ? 1 + 1 / Math.cos(interhedralAngle) : 2);
+      return [A22, C22, B22];
     }
     /**
      * Gets the spherical triangle for a given face triangle index and origin
@@ -59097,7 +59161,7 @@ void main(void) {
     normalizedBoundary.reverse();
     return normalizedBoundary;
   }
-  function hexToBigInt(hex) {
+  function hexToU64(hex) {
     return BigInt(`0x${hex}`);
   }
   var AUTHALIC_RADIUS = 63710072e-1;
@@ -59166,7 +59230,7 @@ void main(void) {
         getPolygon: (x4, objectInfo) => {
           const pentagon = getPentagon(x4, objectInfo);
           const boundary = cellToBoundary(
-            typeof pentagon === "string" ? hexToBigInt(pentagon) : pentagon,
+            typeof pentagon === "string" ? hexToU64(pentagon) : pentagon,
             { closedRing: true, segments: "auto" }
           );
           return flattenPolygon(boundary);
@@ -61944,7 +62008,7 @@ void main(void) {
       return this._frameNumber;
     }
     // eslint-disable-next-line complexity
-    isTileVisible(tile, cullRect) {
+    isTileVisible(tile, cullRect, modelMatrix2) {
       if (!tile.isVisible) {
         return false;
       }
@@ -61954,12 +62018,19 @@ void main(void) {
           z: this._zRange,
           cullRect
         });
-        const { bbox } = tile;
+        let { bbox } = tile;
         for (const [minX, minY, maxX, maxY] of boundsArr) {
           let overlaps;
           if ("west" in bbox) {
             overlaps = bbox.west < maxX && bbox.east > minX && bbox.south < maxY && bbox.north > minY;
           } else {
+            if (modelMatrix2 && !Matrix4.IDENTITY.equals(modelMatrix2)) {
+              const [left, top, right, bottom] = transformBox(
+                [bbox.left, bbox.top, bbox.right, bbox.bottom],
+                modelMatrix2
+              );
+              bbox = { left, top, right, bottom };
+            }
             const y0 = Math.min(bbox.top, bbox.bottom);
             const y1 = Math.max(bbox.top, bbox.bottom);
             overlaps = bbox.left < maxX && bbox.right > minX && y0 < maxY && y1 > minY;
@@ -62389,7 +62460,12 @@ void main(void) {
     }
     filterSubLayer({ layer, cullRect }) {
       const { tile } = layer.props;
-      return this.state.tileset.isTileVisible(tile, cullRect);
+      const { modelMatrix: modelMatrix2 } = this.props;
+      return this.state.tileset.isTileVisible(
+        tile,
+        cullRect,
+        modelMatrix2 ? new Matrix4(modelMatrix2) : null
+      );
     }
   };
   TileLayer.defaultProps = defaultProps24;
@@ -89182,16 +89258,16 @@ void main(void) {
     const region = getS2Region(s2cell);
     const W3 = region.west;
     const S3 = region.south;
-    const E2 = region.east;
+    const E3 = region.east;
     const N3 = region.north;
     const points = [];
     points.push(new Vector37(W3, N3, min7));
-    points.push(new Vector37(E2, N3, min7));
-    points.push(new Vector37(E2, S3, min7));
+    points.push(new Vector37(E3, N3, min7));
+    points.push(new Vector37(E3, S3, min7));
     points.push(new Vector37(W3, S3, min7));
     points.push(new Vector37(W3, N3, max7));
-    points.push(new Vector37(E2, N3, max7));
-    points.push(new Vector37(E2, S3, max7));
+    points.push(new Vector37(E3, N3, max7));
+    points.push(new Vector37(E3, S3, max7));
     points.push(new Vector37(W3, S3, max7));
     return points;
   }
@@ -100947,6 +101023,10 @@ void main() {
       if (changeFlags.dataChanged || changeFlags.boundsChanged) {
         clearTimeout(this.state.updateTimer);
         this.setState({ isWeightMapDirty: true });
+        if (changeFlags.dataChanged) {
+          const weightsTransformShaders = this.getShaders({ vs: weights_vs_glsl_default, fs: weights_fs_glsl_default });
+          this._createWeightsTransform(weightsTransformShaders);
+        }
       } else if (changeFlags.viewportZoomChanged) {
         this._debouncedUpdateWeightmap();
       }
@@ -101204,17 +101284,13 @@ void main() {
       const { colorRange } = opts.props;
       let { colorTexture } = this.state;
       const colors = colorRangeToFlatArray(colorRange, false, Uint8Array);
-      if (colorTexture && colorTexture?.width === colorRange.length) {
-        colorTexture.setTexture2DData({ data: colors });
-      } else {
-        colorTexture?.destroy();
-        colorTexture = this.context.device.createTexture({
-          ...TEXTURE_PROPS,
-          data: colors,
-          width: colorRange.length,
-          height: 1
-        });
-      }
+      colorTexture?.destroy();
+      colorTexture = this.context.device.createTexture({
+        ...TEXTURE_PROPS,
+        data: colors,
+        width: colorRange.length,
+        height: 1
+      });
       this.setState({ colorTexture });
     }
     _updateWeightmap() {
@@ -102383,7 +102459,7 @@ void main() {
         return u6.__e;
     return "function" == typeof n4.type ? x3(n4) : null;
   }
-  function C2(n4) {
+  function C3(n4) {
     var l5, u6;
     if (null != (n4 = n4.__) && null != n4.__c) {
       for (n4.__e = n4.__c.base = null, l5 = 0; l5 < n4.__k.length; l5++)
@@ -102391,7 +102467,7 @@ void main() {
           n4.__e = n4.__c.base = u6.__e;
           break;
         }
-      return C2(n4);
+      return C3(n4);
     }
   }
   function M2(n4) {
@@ -102400,7 +102476,7 @@ void main() {
   function P2() {
     var n4, u6, t5, o5, r5, e6, c5, s5;
     for (i4.sort(f3); n4 = i4.shift(); )
-      n4.__d && (u6 = i4.length, o5 = void 0, e6 = (r5 = (t5 = n4).__v).__e, c5 = [], s5 = [], t5.__P && ((o5 = d3({}, r5)).__v = r5.__v + 1, l3.vnode && l3.vnode(o5), O2(t5.__P, o5, r5, t5.__n, t5.__P.namespaceURI, 32 & r5.__u ? [e6] : null, c5, null == e6 ? x3(r5) : e6, !!(32 & r5.__u), s5), o5.__v = r5.__v, o5.__.__k[o5.__i] = o5, j2(c5, o5, s5), o5.__e != e6 && C2(o5)), i4.length > u6 && i4.sort(f3));
+      n4.__d && (u6 = i4.length, o5 = void 0, e6 = (r5 = (t5 = n4).__v).__e, c5 = [], s5 = [], t5.__P && ((o5 = d3({}, r5)).__v = r5.__v + 1, l3.vnode && l3.vnode(o5), O2(t5.__P, o5, r5, t5.__n, t5.__P.namespaceURI, 32 & r5.__u ? [e6] : null, c5, null == e6 ? x3(r5) : e6, !!(32 & r5.__u), s5), o5.__v = r5.__v, o5.__.__k[o5.__i] = o5, j2(c5, o5, s5), o5.__e != e6 && C3(o5)), i4.length > u6 && i4.sort(f3));
     P2.__r = 0;
   }
   function S2(n4, l5, u6, t5, i7, o5, r5, f6, e6, c5, s5) {
@@ -102452,7 +102528,7 @@ void main() {
   function T2(n4, l5, u6) {
     "-" === l5[0] ? n4.setProperty(l5, null == u6 ? "" : u6) : n4[l5] = null == u6 ? "" : "number" != typeof u6 || v3.test(l5) ? u6 : u6 + "px";
   }
-  function A2(n4, l5, u6, t5, i7) {
+  function A3(n4, l5, u6, t5, i7) {
     var o5;
     n:
       if ("style" === l5)
@@ -102480,7 +102556,7 @@ void main() {
         "function" == typeof u6 || (null == u6 || false === u6 && "-" !== l5[4] ? n4.removeAttribute(l5) : n4.setAttribute(l5, "popover" == l5 && 1 == u6 ? "" : u6));
       }
   }
-  function F2(n4) {
+  function F3(n4) {
     return function(u6) {
       if (this.l) {
         var t5 = this.l[u6.type + n4];
@@ -102493,14 +102569,14 @@ void main() {
     };
   }
   function O2(n4, u6, t5, i7, o5, r5, f6, e6, c5, s5) {
-    var a6, h5, p5, v5, w5, _3, g3, m3, x4, C4, M3, P3, $3, I3, H2, L4, T4 = u6.type;
+    var a6, h5, p5, v5, w5, _3, g3, m3, x4, C5, M3, P3, $3, I3, H2, L4, T4 = u6.type;
     if (void 0 !== u6.constructor)
       return null;
     128 & t5.__u && (c5 = !!(32 & t5.__u), r5 = [e6 = u6.__e = t5.__e]), (a6 = l3.__b) && a6(u6);
     n:
       if ("function" == typeof T4)
         try {
-          if (m3 = u6.props, x4 = "prototype" in T4 && T4.prototype.render, C4 = (a6 = T4.contextType) && i7[a6.__c], M3 = a6 ? C4 ? C4.props.value : a6.__ : i7, t5.__c ? g3 = (h5 = u6.__c = t5.__c).__ = h5.__E : (x4 ? u6.__c = h5 = new T4(m3, M3) : (u6.__c = h5 = new b3(m3, M3), h5.constructor = T4, h5.render = q2), C4 && C4.sub(h5), h5.props = m3, h5.state || (h5.state = {}), h5.context = M3, h5.__n = i7, p5 = h5.__d = true, h5.__h = [], h5._sb = []), x4 && null == h5.__s && (h5.__s = h5.state), x4 && null != T4.getDerivedStateFromProps && (h5.__s == h5.state && (h5.__s = d3({}, h5.__s)), d3(h5.__s, T4.getDerivedStateFromProps(m3, h5.__s))), v5 = h5.props, w5 = h5.state, h5.__v = u6, p5)
+          if (m3 = u6.props, x4 = "prototype" in T4 && T4.prototype.render, C5 = (a6 = T4.contextType) && i7[a6.__c], M3 = a6 ? C5 ? C5.props.value : a6.__ : i7, t5.__c ? g3 = (h5 = u6.__c = t5.__c).__ = h5.__E : (x4 ? u6.__c = h5 = new T4(m3, M3) : (u6.__c = h5 = new b3(m3, M3), h5.constructor = T4, h5.render = q2), C5 && C5.sub(h5), h5.props = m3, h5.state || (h5.state = {}), h5.context = M3, h5.__n = i7, p5 = h5.__d = true, h5.__h = [], h5._sb = []), x4 && null == h5.__s && (h5.__s = h5.state), x4 && null != T4.getDerivedStateFromProps && (h5.__s == h5.state && (h5.__s = d3({}, h5.__s)), d3(h5.__s, T4.getDerivedStateFromProps(m3, h5.__s))), v5 = h5.props, w5 = h5.state, h5.__v = u6, p5)
             x4 && null == T4.getDerivedStateFromProps && null != h5.componentWillMount && h5.componentWillMount(), x4 && null != h5.componentDidMount && h5.__h.push(h5.componentDidMount);
           else {
             if (x4 && null == T4.getDerivedStateFromProps && m3 !== v5 && null != h5.componentWillReceiveProps && h5.componentWillReceiveProps(m3, M3), !h5.__e && (null != h5.shouldComponentUpdate && false === h5.shouldComponentUpdate(m3, h5.__s, M3) || u6.__v === t5.__v)) {
@@ -102579,16 +102655,16 @@ void main() {
         else if ("key" !== s5 && !(s5 in k4)) {
           if ("value" == s5 && "defaultValue" in k4 || "checked" == s5 && "defaultChecked" in k4)
             continue;
-          A2(l5, s5, null, d5, o5);
+          A3(l5, s5, null, d5, o5);
         }
       for (s5 in k4)
-        d5 = k4[s5], "children" == s5 ? v5 = d5 : "dangerouslySetInnerHTML" == s5 ? a6 = d5 : "value" == s5 ? _3 = d5 : "checked" == s5 ? g3 = d5 : "key" === s5 || e6 && "function" != typeof d5 || m3[s5] === d5 || A2(l5, s5, d5, m3[s5], o5);
+        d5 = k4[s5], "children" == s5 ? v5 = d5 : "dangerouslySetInnerHTML" == s5 ? a6 = d5 : "value" == s5 ? _3 = d5 : "checked" == s5 ? g3 = d5 : "key" === s5 || e6 && "function" != typeof d5 || m3[s5] === d5 || A3(l5, s5, d5, m3[s5], o5);
       if (a6)
         e6 || p5 && (a6.__html === p5.__html || a6.__html === l5.innerHTML) || (l5.innerHTML = a6.__html), u6.__k = [];
       else if (p5 && (l5.innerHTML = ""), S2(l5, y3(v5) ? v5 : [v5], u6, t5, i7, "foreignObject" === b4 ? "http://www.w3.org/1999/xhtml" : o5, r5, f6, r5 ? r5[0] : t5.__k && x3(t5, 0), e6, c5), null != r5)
         for (s5 = r5.length; s5--; )
           null != r5[s5] && w3(r5[s5]);
-      e6 || (s5 = "value", void 0 !== _3 && (_3 !== l5[s5] || "progress" === b4 && !_3 || "option" === b4 && _3 !== m3[s5]) && A2(l5, s5, _3, m3[s5], o5), s5 = "checked", void 0 !== g3 && g3 !== l5[s5] && A2(l5, s5, g3, m3[s5], o5));
+      e6 || (s5 = "value", void 0 !== _3 && (_3 !== l5[s5] || "progress" === b4 && !_3 || "option" === b4 && _3 !== m3[s5]) && A3(l5, s5, _3, m3[s5], o5), s5 = "checked", void 0 !== g3 && g3 !== l5[s5] && A3(l5, s5, g3, m3[s5], o5));
     }
     return l5;
   }
@@ -102622,7 +102698,7 @@ void main() {
   function q2(n4, l5, u6) {
     return this.constructor(n4, u6);
   }
-  function B2(u6, t5, i7) {
+  function B3(u6, t5, i7) {
     var o5, r5, f6, e6;
     l3.__ && l3.__(u6, t5), r5 = (o5 = "function" == typeof i7) ? null : i7 && i7.__k || t5.__k, f6 = [], e6 = [], O2(t5, u6 = (!o5 && i7 || t5).__k = _2(k2, null, [u6]), r5 || h2, h2, t5.namespaceURI, !o5 && i7 ? [i7] : r5 ? null : t5.firstChild ? n3.call(t5.childNodes) : null, f6, !o5 && i7 ? i7 : r5 ? r5.__e : t5.firstChild, o5, e6), j2(f6, u6, e6);
   }
@@ -102645,7 +102721,7 @@ void main() {
     this.__v && (this.__e = true, n4 && this.__h.push(n4), M2(this));
   }, b3.prototype.render = k2, i4 = [], r3 = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, f3 = function(n4, l5) {
     return n4.__v.__b - l5.__v.__b;
-  }, P2.__r = 0, e4 = 0, c3 = F2(false), s3 = F2(true), a4 = 0;
+  }, P2.__r = 0, e4 = 0, c3 = F3(false), s3 = F3(true), a4 = 0;
 
   // ../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js
   var f4 = 0;
@@ -102719,7 +102795,7 @@ void main() {
           }
         )
       ] });
-      B2(ui, rootElement);
+      B3(ui, rootElement);
     }
     onViewportChange(viewport) {
       this.viewports[viewport.id] = viewport;
@@ -102791,7 +102867,7 @@ void main() {
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           IconButton,
           {
@@ -102876,7 +102952,7 @@ void main() {
           ] }) })
         }
       ) });
-      B2(ui, rootElement);
+      B3(ui, rootElement);
     }
     onViewportChange(viewport) {
       if (!viewport.equals(this.viewports[viewport.id])) {
@@ -102997,7 +103073,7 @@ void main() {
           ]
         }
       ) });
-      B2(ui, rootElement);
+      B3(ui, rootElement);
     }
     onViewportChange(viewport) {
       this.updateHTML();
@@ -103095,7 +103171,7 @@ void main() {
       const lineOffsetX = 50;
       const svgWidth = lineOffsetX + this.scaleWidth;
       const tickHeight = 10;
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           "svg",
           {
@@ -103236,11 +103312,11 @@ void main() {
     return n4 >= u6.__.length && u6.__.push({}), u6.__[n4];
   }
   function h3(n4) {
-    return o4 = 1, p4(D2, n4);
+    return o4 = 1, p4(D3, n4);
   }
   function p4(n4, u6, i7) {
     var o5 = d4(t4++, 2);
-    if (o5.t = n4, !o5.__c && (o5.__ = [i7 ? i7(u6) : D2(void 0, u6), function(n5) {
+    if (o5.t = n4, !o5.__c && (o5.__ = [i7 ? i7(u6) : D3(void 0, u6), function(n5) {
       var t5 = o5.__N ? o5.__N[0] : o5.__[0], r5 = o5.t(t5, n5);
       t5 !== r5 && (o5.__N = [r5, o5.__[1]], o5.__c.setState({}));
     }], o5.__c = r4, !r4.u)) {
@@ -103276,22 +103352,22 @@ void main() {
   }
   function y4(n4, u6) {
     var i7 = d4(t4++, 3);
-    !c4.__s && C3(i7.__H, u6) && (i7.__ = n4, i7.i = u6, r4.__H.__h.push(i7));
+    !c4.__s && C4(i7.__H, u6) && (i7.__ = n4, i7.i = u6, r4.__H.__h.push(i7));
   }
-  function A3(n4) {
+  function A4(n4) {
     return o4 = 5, T3(function() {
       return { current: n4 };
     }, []);
   }
   function T3(n4, r5) {
     var u6 = d4(t4++, 7);
-    return C3(u6.__H, r5) && (u6.__ = n4(), u6.__H = r5, u6.__h = n4), u6.__;
+    return C4(u6.__H, r5) && (u6.__ = n4(), u6.__H = r5, u6.__h = n4), u6.__;
   }
   function j3() {
     for (var n4; n4 = f5.shift(); )
       if (n4.__P && n4.__H)
         try {
-          n4.__H.__h.forEach(z3), n4.__H.__h.forEach(B3), n4.__H.__h = [];
+          n4.__H.__h.forEach(z3), n4.__H.__h.forEach(B4), n4.__H.__h = [];
         } catch (t5) {
           n4.__H.__h = [], c4.__e(t5, n4.__v);
         }
@@ -103305,7 +103381,7 @@ void main() {
     var i7 = (r4 = n4.__c).__H;
     i7 && (u5 === r4 ? (i7.__h = [], r4.__h = [], i7.__.forEach(function(n5) {
       n5.__N && (n5.__ = n5.__N), n5.i = n5.__N = void 0;
-    })) : (i7.__h.forEach(z3), i7.__h.forEach(B3), i7.__h = [], t4 = 0)), u5 = r4;
+    })) : (i7.__h.forEach(z3), i7.__h.forEach(B4), i7.__h = [], t4 = 0)), u5 = r4;
   }, c4.diffed = function(n4) {
     v4 && v4(n4);
     var t5 = n4.__c;
@@ -103316,7 +103392,7 @@ void main() {
     t5.some(function(n5) {
       try {
         n5.__h.forEach(z3), n5.__h = n5.__h.filter(function(n6) {
-          return !n6.__ || B3(n6);
+          return !n6.__ || B4(n6);
         });
       } catch (r5) {
         t5.some(function(n6) {
@@ -103346,23 +103422,23 @@ void main() {
     var t5 = r4, u6 = n4.__c;
     "function" == typeof u6 && (n4.__c = void 0, u6()), r4 = t5;
   }
-  function B3(n4) {
+  function B4(n4) {
     var t5 = r4;
     n4.__c = n4.__(), r4 = t5;
   }
-  function C3(n4, t5) {
+  function C4(n4, t5) {
     return !n4 || n4.length !== t5.length || t5.some(function(t6, r5) {
       return t6 !== n4[r5];
     });
   }
-  function D2(n4, t5) {
+  function D3(n4, t5) {
     return "function" == typeof t5 ? t5(n4) : t5;
   }
 
   // ../widgets/src/lib/components/dropdown-menu.tsx
   var DropdownMenu = (props) => {
     const [isOpen, setIsOpen] = h3(false);
-    const dropdownRef = A3(null);
+    const dropdownRef = A4(null);
     const toggleDropdown = () => setIsOpen(!isOpen);
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -103687,7 +103763,7 @@ void main() {
     }
     onRenderHTML(rootElement) {
       const menuItems = this.props._geolocation ? [CURRENT_LOCATION2, ...this.geocodeHistory.addressHistory] : [...this.geocodeHistory.addressHistory];
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           "div",
           {
@@ -103757,10 +103833,10 @@ void main() {
   var GeocoderWidget = _GeocoderWidget;
   GeocoderWidget.defaultProps = {
     ...Widget.defaultProps,
-    id: "geolocate",
+    id: "geocoder",
     viewId: void 0,
     placement: "top-left",
-    label: "Geolocate",
+    label: "Geocoder",
     transitionDuration: 200,
     geocoder: "coordinates",
     customGeocoder: CoordinatesGeocoder,
@@ -103803,7 +103879,7 @@ void main() {
       document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           IconButton,
           {
@@ -103880,7 +103956,7 @@ void main() {
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           IconButton,
           {
@@ -103940,7 +104016,7 @@ void main() {
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
         this.loading && /* @__PURE__ */ u4(
           IconButton,
@@ -104106,7 +104182,7 @@ ${fps}`;
     }
     onRenderHTML(rootElement) {
       const { lightModeLabel, darkModeLabel } = this.props;
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           IconButton,
           {
@@ -104237,7 +104313,7 @@ ${fps}`;
         ),
         /* @__PURE__ */ u4("div", { className: "popup-arrow", style: { position: "absolute", width: "0px", height: "0px" } })
       ] }) : null;
-      B2(ui, rootElement);
+      B3(ui, rootElement);
       requestAnimationFrame(() => {
         if (!this.props.visible || !rootElement.firstChild || !this.viewport)
           return;
@@ -104379,7 +104455,7 @@ ${fps}`;
           });
         });
       }
-      B2(
+      B3(
         /* @__PURE__ */ u4("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [
           /* @__PURE__ */ u4(
             "div",
@@ -104514,7 +104590,7 @@ ${fps}`;
           style: { pointerEvents: "auto" }
         }
       ) : null;
-      B2(ui, rootElement);
+      B3(ui, rootElement);
     }
     handleContextMenu(srcEvent) {
       if (srcEvent && (srcEvent.button === MOUSE_BUTTON_RIGHT || srcEvent.which === MOUSE_WHICH_RIGHT)) {
@@ -104542,6 +104618,7 @@ ${fps}`;
   var ContextMenuWidget = _ContextMenuWidget;
   ContextMenuWidget.defaultProps = {
     ...Widget.defaultProps,
+    id: "context",
     viewId: null,
     visible: false,
     position: { x: 0, y: 0 },
@@ -104568,7 +104645,7 @@ ${fps}`;
       rootElement.style.width = "100%";
       rootElement.style.height = "100%";
       rootElement.style.margin = "0px";
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           Splitter,
           {
@@ -104606,8 +104683,8 @@ ${fps}`;
     onDragEnd
   }) {
     const [split, setSplit] = h3(initialSplit);
-    const dragging = A3(false);
-    const containerRef = A3(null);
+    const dragging = A4(false);
+    const containerRef = A4(null);
     const handleDragStart = (event) => {
       dragging.current = true;
       onDragStart?.();
@@ -104726,7 +104803,7 @@ ${fps}`;
       this.stop();
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [
           /* @__PURE__ */ u4(
             "button",
@@ -104801,7 +104878,7 @@ ${fps}`;
   };
   function IconMenu(props) {
     const [menuOpen, setMenuOpen] = h3(false);
-    const containerRef = A3(null);
+    const containerRef = A4(null);
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setMenuOpen(false);
@@ -104856,7 +104933,7 @@ ${fps}`;
       this.placement = props.placement ?? this.placement;
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           IconMenu,
           {
@@ -104873,7 +104950,7 @@ ${fps}`;
   var ViewSelectorWidget = _ViewSelectorWidget;
   ViewSelectorWidget.defaultProps = {
     ...Widget.defaultProps,
-    id: "view-selector-widget",
+    id: "view-selector",
     placement: "top-left",
     label: "Split View",
     initialViewMode: "single",