deck.gl 9.2.0-beta.1 → 9.2.0-beta.3

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);
@@ -43321,7 +43331,7 @@ void main() {
           this.eventManager?.destroy();
           this.canvas = null;
         }
-        log_default.log(`recreating animation loop for new device! id=${props.device.id}`);
+        log_default.log(`recreating animation loop for new device! id=${props.device.id}`)();
         this.animationLoop = this._createAnimationLoop(props.device, props);
         this.animationLoop.start();
       }
@@ -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;
   }
@@ -94114,7 +94190,9 @@ if ((terrain.mode == TERRAIN_MODE_USE_COVER) || (terrain.mode == TERRAIN_MODE_US
       return { ...parameters2, depthCompare: "always" };
     }
     getShaderModuleProps(layer, effects, otherShaderModuleProps) {
+      const base = super.getShaderModuleProps(layer, effects, otherShaderModuleProps);
       return {
+        ...base,
         terrain: {
           project: otherShaderModuleProps.project
         }
@@ -100947,6 +101025,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 +101286,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() {
@@ -102104,6 +102182,12 @@ void main() {
     constructor(props) {
       this._handleStyleChange = () => {
         resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);
+        if (!this._map)
+          return;
+        const projection = getProjection(this._map);
+        if (projection && !this._props.views) {
+          this._deck?.setProps({ views: getDefaultView(this._map) });
+        }
       };
       this._updateContainerSize = () => {
         if (this._map && this._container) {
@@ -102383,7 +102467,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 +102475,7 @@ void main() {
           n4.__e = n4.__c.base = u6.__e;
           break;
         }
-      return C2(n4);
+      return C3(n4);
     }
   }
   function M2(n4) {
@@ -102400,7 +102484,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 +102536,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 +102564,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 +102577,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 +102663,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 +102706,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 +102729,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;
@@ -102665,21 +102749,21 @@ void main() {
 
   // ../widgets/src/lib/components/button-group.tsx
   var ButtonGroup = (props) => {
-    const { children, orientation } = props;
+    const { children, orientation = "horizontal" } = props;
     return /* @__PURE__ */ u4("div", { className: `deck-widget-button-group ${orientation}`, children });
   };
 
   // ../widgets/src/lib/components/grouped-icon-button.tsx
   var GroupedIconButton = (props) => {
-    const { className, label, onClick } = props;
+    const { className = "", label, onClick, children } = props;
     return /* @__PURE__ */ u4(
       "button",
       {
-        className: `deck-widget-icon-button ${className || ""}`,
+        className: `deck-widget-icon-button ${className}`,
         type: "button",
         onClick,
         title: label,
-        children: /* @__PURE__ */ u4("div", { className: "deck-widget-icon" })
+        children: children ? children : /* @__PURE__ */ u4("div", { className: "deck-widget-icon" })
       }
     );
   };
@@ -102690,10 +102774,8 @@ void main() {
       super(props, _ZoomWidget.defaultProps);
       this.className = "deck-widget-zoom";
       this.placement = "top-left";
-      this.viewId = null;
       this.viewports = {};
-      this.viewId = props.viewId ?? this.viewId;
-      this.placement = props.placement ?? this.placement;
+      this.setProps(this.props);
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
@@ -102719,7 +102801,7 @@ void main() {
           }
         )
       ] });
-      B2(ui, rootElement);
+      B3(ui, rootElement);
     }
     onViewportChange(viewport) {
       this.viewports[viewport.id] = viewport;
@@ -102732,7 +102814,9 @@ void main() {
       };
       if (this.props.transitionDuration > 0) {
         nextViewState.transitionDuration = this.props.transitionDuration;
-        nextViewState.transitionInterpolator = "latitude" in nextViewState ? new FlyToInterpolator() : new LinearInterpolator();
+        nextViewState.transitionInterpolator = "latitude" in nextViewState ? new FlyToInterpolator() : new LinearInterpolator({
+          transitionProps: ["zoom"]
+        });
       }
       this.setViewState(viewId, nextViewState);
     }
@@ -102760,12 +102844,12 @@ void main() {
     transitionDuration: 200,
     zoomInLabel: "Zoom In",
     zoomOutLabel: "Zoom Out",
-    viewId: void 0
+    viewId: null
   };
 
   // ../widgets/src/lib/components/icon-button.tsx
   var IconButton = (props) => {
-    const { className, label, onClick, children } = props;
+    const { className = "", label, onClick, children } = props;
     return /* @__PURE__ */ u4("div", { className: "deck-widget-button", children: /* @__PURE__ */ u4(
       "button",
       {
@@ -102784,14 +102868,15 @@ void main() {
       super(props, _ResetViewWidget.defaultProps);
       this.className = "deck-widget-reset-view";
       this.placement = "top-left";
-      this.placement = props.placement ?? this.placement;
+      this.setProps(this.props);
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           IconButton,
           {
@@ -102808,9 +102893,9 @@ void main() {
       this.setViewState(initialViewState);
     }
     setViewState(viewState) {
-      const viewId = this.props.viewId || viewState?.id || "default-view";
+      const viewId = this.props.viewId || "default-view";
       const nextViewState = {
-        ...viewState
+        ...viewId !== "default-view" ? viewState?.[viewId] : viewState
         // only works for geospatial?
         // transitionDuration: this.props.transitionDuration,
         // transitionInterpolator: new FlyToInterpolator()
@@ -102825,95 +102910,7 @@ void main() {
     placement: "top-left",
     label: "Reset View",
     initialViewState: void 0,
-    viewId: void 0
-  };
-
-  // ../widgets/src/compass-widget.tsx
-  var _CompassWidget = class extends Widget {
-    constructor(props = {}) {
-      super(props, _CompassWidget.defaultProps);
-      this.className = "deck-widget-compass";
-      this.placement = "top-left";
-      this.viewId = null;
-      this.viewports = {};
-      this.setProps(this.props);
-    }
-    setProps(props) {
-      this.placement = props.placement ?? this.placement;
-      this.viewId = props.viewId ?? this.viewId;
-      super.setProps(props);
-    }
-    onRenderHTML(rootElement) {
-      const viewId = this.viewId || Object.values(this.viewports)[0]?.id || "default-view";
-      const widgetViewport = this.viewports[viewId];
-      const [rz, rx] = this.getRotation(widgetViewport);
-      const ui = /* @__PURE__ */ u4("div", { className: "deck-widget-button", style: { perspective: 100 }, children: /* @__PURE__ */ u4(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            for (const viewport of Object.values(this.viewports)) {
-              this.handleCompassReset(viewport);
-            }
-          },
-          title: this.props.label,
-          style: { transform: `rotateX(${rx}deg)` },
-          children: /* @__PURE__ */ u4("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: /* @__PURE__ */ u4("g", { transform: `rotate(${rz},13,13)`, children: [
-            /* @__PURE__ */ u4(
-              "path",
-              {
-                d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z",
-                fill: "var(--icon-compass-north-color, rgb(240, 92, 68))"
-              }
-            ),
-            /* @__PURE__ */ u4(
-              "path",
-              {
-                d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",
-                fill: "var(--icon-compass-south-color, rgb(204, 204, 204))"
-              }
-            )
-          ] }) })
-        }
-      ) });
-      B2(ui, rootElement);
-    }
-    onViewportChange(viewport) {
-      if (!viewport.equals(this.viewports[viewport.id])) {
-        this.viewports[viewport.id] = viewport;
-        this.updateHTML();
-      }
-    }
-    getRotation(viewport) {
-      if (viewport instanceof WebMercatorViewport2) {
-        return [-viewport.bearing, viewport.pitch];
-      } else if (viewport instanceof GlobeViewport) {
-        return [0, Math.max(-80, Math.min(80, viewport.latitude))];
-      }
-      return [0, 0];
-    }
-    handleCompassReset(viewport) {
-      const viewId = this.viewId || viewport.id || "default-view";
-      if (viewport instanceof WebMercatorViewport2) {
-        const nextViewState = {
-          ...viewport,
-          bearing: 0,
-          ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
-          transitionDuration: this.props.transitionDuration,
-          transitionInterpolator: new FlyToInterpolator()
-        };
-        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
-      }
-    }
-  };
-  var CompassWidget = _CompassWidget;
-  CompassWidget.defaultProps = {
-    ...Widget.defaultProps,
-    id: "compass",
-    placement: "top-left",
-    viewId: null,
-    label: "Reset Compass",
-    transitionDuration: 200
+    viewId: null
   };
 
   // ../widgets/src/gimbal-widget.tsx
@@ -102922,7 +102919,7 @@ void main() {
       super(props, _GimbalWidget.defaultProps);
       this.className = "deck-widget-gimbal";
       this.placement = "top-left";
-      this.viewId = null;
+      this.viewports = {};
       this.setProps(this.props);
     }
     setProps(props) {
@@ -102931,13 +102928,17 @@ void main() {
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      const { rotationOrbit, rotationX } = this.getNormalizedRotation();
+      const viewId = this.viewId || Object.values(this.viewports)[0]?.id || "default-view";
+      const widgetViewport = this.viewports[viewId];
+      const { rotationOrbit, rotationX } = this.getNormalizedRotation(widgetViewport);
       const ui = /* @__PURE__ */ u4("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: /* @__PURE__ */ u4(
         "button",
         {
           type: "button",
           onClick: () => {
-            this.resetOrbitView();
+            for (const viewport of Object.values(this.viewports)) {
+              this.resetOrbitView(viewport);
+            }
           },
           title: this.props.label,
           style: { position: "relative", width: 26, height: 26 },
@@ -102997,13 +102998,14 @@ void main() {
           ]
         }
       ) });
-      B2(ui, rootElement);
+      B3(ui, rootElement);
     }
     onViewportChange(viewport) {
+      this.viewports[viewport.id] = viewport;
       this.updateHTML();
     }
-    resetOrbitView() {
-      const viewId = this.getViewId();
+    resetOrbitView(viewport) {
+      const viewId = this.getViewId(viewport);
       const viewState = this.getViewState(viewId);
       if ("rotationOrbit" in viewState || "rotationX" in viewState) {
         const nextViewState = {
@@ -103018,8 +103020,8 @@ void main() {
         this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
       }
     }
-    getNormalizedRotation() {
-      const viewState = this.getViewState(this.getViewId());
+    getNormalizedRotation(viewport) {
+      const viewState = this.getViewState(this.getViewId(viewport));
       const [rz, rx] = this.getRotation(viewState);
       const rotationOrbit = normalizeAndClampAngle(rz);
       const rotationX = normalizeAndClampAngle(rx);
@@ -103032,8 +103034,8 @@ void main() {
       return [0, 0];
     }
     // Move to Widget/WidgetManager?
-    getViewId() {
-      const viewId = this.viewId || "OrbitView";
+    getViewId(viewport) {
+      const viewId = this.viewId || viewport?.id || "OrbitView";
       return viewId;
     }
     getViewState(viewId) {
@@ -103054,7 +103056,7 @@ void main() {
     ...Widget.defaultProps,
     id: "gimbal",
     placement: "top-left",
-    viewId: void 0,
+    viewId: null,
     label: "Gimbal",
     strokeWidth: 1.5,
     transitionDuration: 200
@@ -103073,6 +103075,93 @@ void main() {
     return normalized;
   }
 
+  // ../widgets/src/compass-widget.tsx
+  var _CompassWidget = class extends Widget {
+    constructor(props = {}) {
+      super(props, _CompassWidget.defaultProps);
+      this.className = "deck-widget-compass";
+      this.placement = "top-left";
+      this.viewports = {};
+      this.setProps(this.props);
+    }
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+      const viewId = this.viewId || Object.values(this.viewports)[0]?.id || "default-view";
+      const widgetViewport = this.viewports[viewId];
+      const [rz, rx] = this.getRotation(widgetViewport);
+      const ui = /* @__PURE__ */ u4("div", { className: "deck-widget-button", style: { perspective: 100 }, children: /* @__PURE__ */ u4(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            for (const viewport of Object.values(this.viewports)) {
+              this.handleCompassReset(viewport);
+            }
+          },
+          title: this.props.label,
+          style: { transform: `rotateX(${rx}deg)` },
+          children: /* @__PURE__ */ u4("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: /* @__PURE__ */ u4("g", { transform: `rotate(${rz},13,13)`, children: [
+            /* @__PURE__ */ u4(
+              "path",
+              {
+                d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z",
+                fill: "var(--icon-compass-north-color, rgb(240, 92, 68))"
+              }
+            ),
+            /* @__PURE__ */ u4(
+              "path",
+              {
+                d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",
+                fill: "var(--icon-compass-south-color, rgb(204, 204, 204))"
+              }
+            )
+          ] }) })
+        }
+      ) });
+      B3(ui, rootElement);
+    }
+    onViewportChange(viewport) {
+      if (!viewport.equals(this.viewports[viewport.id])) {
+        this.viewports[viewport.id] = viewport;
+        this.updateHTML();
+      }
+    }
+    getRotation(viewport) {
+      if (viewport instanceof WebMercatorViewport2) {
+        return [-viewport.bearing, viewport.pitch];
+      } else if (viewport instanceof GlobeViewport) {
+        return [0, Math.max(-80, Math.min(80, viewport.latitude))];
+      }
+      return [0, 0];
+    }
+    handleCompassReset(viewport) {
+      const viewId = this.viewId || viewport.id || "default-view";
+      if (viewport instanceof WebMercatorViewport2) {
+        const nextViewState = {
+          ...viewport,
+          bearing: 0,
+          ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
+          transitionDuration: this.props.transitionDuration,
+          transitionInterpolator: new FlyToInterpolator()
+        };
+        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+      }
+    }
+  };
+  var CompassWidget = _CompassWidget;
+  CompassWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: "compass",
+    placement: "top-left",
+    viewId: null,
+    label: "Reset Compass",
+    transitionDuration: 200
+  };
+
   // ../widgets/src/scale-widget.tsx
   var _ScaleWidget = class extends Widget {
     constructor(props = {}) {
@@ -103085,17 +103174,18 @@ void main() {
       this.scaleValue = 0;
       // The formatted distance label (e.g. "200 m" or "1.0 km")
       this.scaleText = "";
-      this.placement = props.placement ?? this.placement;
+      this.setProps(this.props);
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
       const lineOffsetX = 50;
       const svgWidth = lineOffsetX + this.scaleWidth;
       const tickHeight = 10;
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           "svg",
           {
@@ -103179,7 +103269,7 @@ void main() {
     id: "scale",
     placement: "bottom-left",
     label: "Scale",
-    onCapture: void 0
+    viewId: null
   };
   function getMetersPerPixel(latitude, zoom) {
     const earthCircumference = 40075016686e-3;
@@ -103236,11 +103326,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 +103366,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 +103395,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 +103406,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 +103436,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)) {
@@ -103673,21 +103763,20 @@ void main() {
         }
       };
       this.viewports = {};
-      this.placement = this.props.placement ?? this.placement;
       this.setProps(this.props);
-      this.geocoder = getGeocoder(this.props);
     }
     setProps(props) {
-      super.setProps(props);
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       this.geocoder = getGeocoder(this.props);
       if (this.geocoder.requiresApiKey && !this.props.apiKey) {
         throw new Error(`API key is required for the ${this.geocoder.name} geocoder`);
       }
+      super.setProps(props);
     }
     onRenderHTML(rootElement) {
       const menuItems = this.props._geolocation ? [CURRENT_LOCATION2, ...this.geocodeHistory.addressHistory] : [...this.geocodeHistory.addressHistory];
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           "div",
           {
@@ -103757,10 +103846,10 @@ void main() {
   var GeocoderWidget = _GeocoderWidget;
   GeocoderWidget.defaultProps = {
     ...Widget.defaultProps,
-    id: "geolocate",
-    viewId: void 0,
+    id: "geocoder",
+    viewId: null,
     placement: "top-left",
-    label: "Geolocate",
+    label: "Geocoder",
     transitionDuration: 200,
     geocoder: "coordinates",
     customGeocoder: CoordinatesGeocoder,
@@ -103794,7 +103883,7 @@ void main() {
       this.className = "deck-widget-fullscreen";
       this.placement = "top-left";
       this.fullscreen = false;
-      this.placement = props.placement ?? this.placement;
+      this.setProps(this.props);
     }
     onAdd() {
       document.addEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
@@ -103803,11 +103892,13 @@ void main() {
       document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4(
           IconButton,
           {
-            onClick: this.handleClick.bind(this),
+            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"
           }
@@ -103817,6 +103908,7 @@ void main() {
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     getContainer() {
@@ -103862,297 +103954,296 @@ void main() {
     ...Widget.defaultProps,
     id: "fullscreen",
     placement: "top-left",
+    viewId: null,
     enterLabel: "Enter Fullscreen",
     exitLabel: "Exit Fullscreen",
     container: void 0
   };
 
-  // ../widgets/src/screenshot-widget.tsx
-  var _ScreenshotWidget = class extends Widget {
-    constructor(props = {}) {
-      super(props, _ScreenshotWidget.defaultProps);
-      this.className = "deck-widget-screenshot";
-      this.placement = "top-left";
-      this.placement = props.placement ?? this.placement;
+  // ../widgets/src/splitter-widget.tsx
+  var _SplitterWidget = class extends Widget {
+    constructor(props) {
+      super(props, _SplitterWidget.defaultProps);
+      this.className = "deck-widget-splitter";
+      this.placement = "fill";
     }
     setProps(props) {
-      this.placement = props.placement ?? this.placement;
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      B2(
+      rootElement.style.position = "absolute";
+      rootElement.style.top = "0";
+      rootElement.style.left = "0";
+      rootElement.style.width = "100%";
+      rootElement.style.height = "100%";
+      rootElement.style.margin = "0px";
+      B3(
         /* @__PURE__ */ u4(
-          IconButton,
+          Splitter,
           {
-            className: "deck-widget-camera",
-            label: this.props.label,
-            onClick: this.handleClick.bind(this)
+            orientation: this.props.orientation,
+            initialSplit: this.props.initialSplit,
+            onChange: this.props.onChange,
+            onDragStart: this.props.onDragStart,
+            onDragEnd: this.props.onDragEnd
           }
         ),
         rootElement
       );
     }
-    handleClick() {
-      if (this.props.onCapture) {
-        this.props.onCapture(this);
-        return;
-      }
-      const dataURL = this.captureScreenToDataURL(this.props.imageFormat);
-      if (dataURL) {
-        this.downloadDataURL(dataURL, this.props.filename);
-      }
-    }
-    /** @note only captures canvas contents, not HTML DOM or CSS styles */
-    captureScreenToDataURL(imageFormat) {
-      const canvas2 = this.deck?.getCanvas();
-      return canvas2?.toDataURL(imageFormat);
-    }
-    /** Download a data URL */
-    downloadDataURL(dataURL, filename2) {
-      const link = document.createElement("a");
-      link.href = dataURL;
-      link.download = filename2;
-      link.click();
-    }
   };
-  var ScreenshotWidget = _ScreenshotWidget;
-  ScreenshotWidget.defaultProps = {
+  var SplitterWidget = _SplitterWidget;
+  SplitterWidget.defaultProps = {
     ...Widget.defaultProps,
-    id: "screenshot",
-    placement: "top-left",
-    label: "Screenshot",
-    filename: "screenshot.png",
-    imageFormat: "image/png",
-    onCapture: void 0
+    id: "splitter-widget",
+    viewId1: "",
+    viewId2: "",
+    orientation: "vertical",
+    initialSplit: 0.5,
+    onChange: () => {
+    },
+    onDragStart: () => {
+    },
+    onDragEnd: () => {
+    }
   };
+  function Splitter({
+    orientation,
+    initialSplit,
+    onChange,
+    onDragStart,
+    onDragEnd
+  }) {
+    const [split, setSplit] = h3(initialSplit);
+    const dragging = A4(false);
+    const containerRef = A4(null);
+    const handleDragStart = (event) => {
+      dragging.current = true;
+      onDragStart?.();
+      document.addEventListener("mousemove", handleDragging);
+      document.addEventListener("mouseup", handleDragEnd);
+      event.preventDefault();
+    };
+    const handleDragging = (event) => {
+      if (!dragging.current || !containerRef.current)
+        return;
+      const rect = containerRef.current.getBoundingClientRect();
+      let newSplit;
+      if (orientation === "vertical") {
+        newSplit = (event.clientX - rect.left) / rect.width;
+      } else {
+        newSplit = (event.clientY - rect.top) / rect.height;
+      }
+      newSplit = Math.min(Math.max(newSplit, 0.05), 0.95);
+      setSplit(newSplit);
+      onChange?.(newSplit);
+    };
+    const handleDragEnd = (event) => {
+      if (!dragging.current)
+        return;
+      dragging.current = false;
+      onDragEnd?.();
+      document.removeEventListener("mousemove", handleDragging);
+      document.removeEventListener("mouseup", handleDragEnd);
+    };
+    const splitterStyle = orientation === "vertical" ? {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: `${split * 100}%`,
+      width: "4px",
+      cursor: "col-resize",
+      background: "#ccc",
+      zIndex: 10,
+      pointerEvents: "auto",
+      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
+    } : {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      top: `${split * 100}%`,
+      height: "4px",
+      cursor: "row-resize",
+      background: "#ccc",
+      zIndex: 10,
+      pointerEvents: "auto",
+      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
+    };
+    const containerStyle = {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    };
+    return /* @__PURE__ */ u4("div", { ref: containerRef, style: containerStyle, children: /* @__PURE__ */ u4(
+      "div",
+      {
+        style: splitterStyle,
+        onMouseDown: handleDragStart
+      }
+    ) });
+  }
 
-  // ../widgets/src/loading-widget.tsx
-  var _LoadingWidget = class extends Widget {
+  // ../widgets/src/lib/components/icon-menu.tsx
+  function IconMenu(props) {
+    const [menuOpen, setMenuOpen] = h3(false);
+    const containerRef = A4(null);
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setMenuOpen(false);
+      }
+    };
+    y4(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [containerRef]);
+    const [selectedItem, setSelectedItem] = h3(props.initialItem);
+    const handleSelectItem = (item) => {
+      setSelectedItem(item);
+      setMenuOpen(false);
+      props.onItemSelected(item);
+    };
+    const handleButtonClick = () => setMenuOpen(!menuOpen);
+    const selectedMenuItem = props.menuItems.find((item) => item.value === selectedItem);
+    const label = props.label || selectedMenuItem?.label || "";
+    const icon = props.icon || selectedMenuItem?.icon;
+    return /* @__PURE__ */ u4("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [
+      /* @__PURE__ */ u4(IconButton, { className: props.className, label, onClick: handleButtonClick, children: icon }),
+      menuOpen && /* @__PURE__ */ u4("div", { className: "deck-widget-icon-menu", children: /* @__PURE__ */ u4(ButtonGroup, { orientation: "vertical", children: props.menuItems.map((item) => /* @__PURE__ */ u4(
+        GroupedIconButton,
+        {
+          label: item.label,
+          onClick: () => handleSelectItem(item.value),
+          children: item.icon
+        },
+        item.value
+      )) }) })
+    ] });
+  }
+
+  // ../widgets/src/view-selector-widget.tsx
+  var _ViewSelectorWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _LoadingWidget.defaultProps);
-      this.className = "deck-widget-loading";
+      super(props, _ViewSelectorWidget.defaultProps);
+      this.className = "deck-widget-view-selector";
       this.placement = "top-left";
-      this.loading = true;
-      this.placement = props.placement ?? this.placement;
+      this.handleSelectMode = (viewMode) => {
+        this.viewMode = viewMode;
+        this.updateHTML();
+        this.props.onViewModeChange(viewMode);
+      };
+      this.viewMode = this.props.initialViewMode;
+      this.setProps(this.props);
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      B2(
-        // 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,
+      B3(
+        /* @__PURE__ */ u4(
+          IconMenu,
           {
-            className: "deck-widget-spinner-icon",
-            label: this.props.label,
-            onClick: this.handleClick.bind(this)
+            className: "deck-widget-view-selector",
+            menuItems: MENU_ITEMS.map((item) => ({
+              ...item,
+              icon: item.icon()
+            })),
+            initialItem: this.props.initialViewMode,
+            onItemSelected: this.handleSelectMode
           }
         ),
         rootElement
       );
     }
-    onRedraw({ layers }) {
-      const loading = !layers.some((layer) => !layer.isLoaded);
-      if (loading !== this.loading) {
-        this.loading = loading;
-        this.updateHTML();
-      }
-    }
-    // TODO(ibgreen) - this should not be a button, see above.
-    handleClick() {
-    }
   };
-  var LoadingWidget = _LoadingWidget;
-  LoadingWidget.defaultProps = {
+  var ViewSelectorWidget = _ViewSelectorWidget;
+  ViewSelectorWidget.defaultProps = {
     ...Widget.defaultProps,
-    id: "loading",
+    id: "view-selector",
     placement: "top-left",
-    label: "Loading layer data"
-  };
-
-  // ../widgets/src/fps-widget.tsx
-  var _FpsWidget = class extends Widget {
-    constructor(props = {}) {
-      super(props, _FpsWidget.defaultProps);
-      this.className = "deck-widget-fps";
-      this.placement = "top-left";
-      this._lastFps = -1;
-      this.placement = props.placement ?? this.placement;
-    }
-    setProps(props) {
-      if (props.placement) {
-        this.placement = props.placement;
-      }
-      super.setProps(props);
-    }
-    onAdd({}) {
-      this._lastFps = this._getFps();
-      this.updateHTML();
-    }
-    onRenderHTML(rootElement) {
-      const fps = this._getFps();
-      rootElement.innerText = `FPS:
-${fps}`;
-      rootElement.style.backgroundColor = "white";
-      rootElement.style.fontFamily = "monospace";
-      rootElement.style.fontSize = "8px";
-      rootElement.style.fontWeight = "700";
-    }
-    onRedraw({}) {
-      const fps = this._getFps();
-      if (fps !== this._lastFps) {
-        this._lastFps = fps;
-        this.updateHTML();
-      }
-    }
-    _getFps() {
-      return Math.round(this.deck.metrics.fps ?? 0);
+    viewId: null,
+    label: "Split View",
+    initialViewMode: "single",
+    onViewModeChange: () => {
     }
   };
-  var FpsWidget = _FpsWidget;
-  FpsWidget.defaultProps = {
-    ...Widget.defaultProps,
-    id: "fps",
-    placement: "top-left"
-  };
-
-  // ../widgets/src/themes.ts
-  var LightTheme = {
-    "--widget-margin": "12px",
-    "--button-size": "28px",
-    "--button-corner-radius": "8px",
-    "--button-background": "#fff",
-    "--button-stroke": "rgba(255, 255, 255, 0.3)",
-    "--button-inner-stroke": "unset",
-    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
-    "--button-backdrop-filter": "unset",
-    "--button-icon-idle": "rgba(97, 97, 102, 1)",
-    "--button-icon-hover": "rgba(24, 24, 26, 1)",
-    "--icon-compass-north-color": "rgb(240, 92, 68)",
-    "--icon-compass-south-color": "rgb(204, 204, 204)"
-  };
-  var DarkTheme = {
-    "--widget-margin": "12px",
-    "--button-size": "28px",
-    "--button-corner-radius": "8px",
-    "--button-background": "rgba(18, 18, 20, 1)",
-    "--button-stroke": "rgba(18, 18, 20, 0.30)",
-    "--button-inner-stroke": "unset",
-    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
-    "--button-backdrop-filter": "unset",
-    "--button-icon-idle": "rgba(158, 157, 168, 1)",
-    "--button-icon-hover": "rgba(215, 214, 229, 1)",
-    "--icon-compass-north-color": "rgb(240, 92, 68)",
-    "--icon-compass-south-color": "rgb(200, 199, 209)"
-  };
-  var LightGlassTheme = {
-    "--widget-margin": "12px",
-    "--button-size": "28px",
-    "--button-corner-radius": "8px",
-    "--button-background": "rgba(255, 255, 255, 0.6)",
-    "--button-stroke": "rgba(255, 255, 255, 0.3)",
-    "--button-inner-stroke": "1px solid rgba(255, 255, 255, 0.6)",
-    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
-    "--button-backdrop-filter": "blur(4px)",
-    "--button-icon-idle": "rgba(97, 97, 102, 1)",
-    "--button-icon-hover": "rgba(24, 24, 26, 1)",
-    "--icon-compass-north-color": "rgb(240, 92, 68)",
-    "--icon-compass-south-color": "rgb(204, 204, 204)"
-  };
-  var DarkGlassTheme = {
-    "--widget-margin": "12px",
-    "--button-size": "28px",
-    "--button-corner-radius": "8px",
-    "--button-background": "rgba(18, 18, 20, 0.75)",
-    "--button-stroke": "rgba(18, 18, 20, 0.30)",
-    "--button-inner-stroke": "1px solid rgba(18, 18, 20, 0.75)",
-    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
-    "--button-backdrop-filter": "blur(4px)",
-    "--button-icon-idle": "rgba(158, 157, 168, 1)",
-    "--button-icon-hover": "rgba(215, 214, 229, 1)",
-    "--icon-compass-north-color": "rgb(240, 92, 68)",
-    "--icon-compass-south-color": "rgb(200, 199, 209)"
-  };
-
-  // ../widgets/src/theme-widget.tsx
-  var _ThemeWidget = class extends Widget {
-    constructor(props = {}) {
-      super(props, _ThemeWidget.defaultProps);
-      this.className = "deck-widget-theme";
-      this.placement = "top-left";
-      this.themeMode = "dark";
-      this.placement = props.placement ?? this.placement;
-      this.themeMode = this._getInitialThemeMode();
-    }
-    // eslint-disable-next-line complexity
-    setProps(props) {
-      const { lightModeTheme, darkModeTheme } = this.props;
-      this.placement = props.placement ?? this.placement;
-      super.setProps(props);
-      switch (this.themeMode) {
-        case "light":
-          if (props.lightModeTheme && !deepEqual2(props.lightModeTheme, lightModeTheme, 1)) {
-            this._setThemeMode("light");
-          }
-          break;
-        case "dark":
-          if (props.darkModeTheme && !deepEqual2(props.darkModeTheme, darkModeTheme, 1)) {
-            this._setThemeMode("dark");
-          }
-          break;
-      }
-    }
-    onRenderHTML(rootElement) {
-      const { lightModeLabel, darkModeLabel } = this.props;
-      B2(
-        /* @__PURE__ */ u4(
-          IconButton,
-          {
-            onClick: this._handleClick.bind(this),
-            label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel,
-            className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun"
-          }
-        ),
-        rootElement
-      );
-    }
-    onAdd() {
-      this._setThemeMode(this.themeMode);
-    }
-    _handleClick() {
-      const newThemeMode = this.themeMode === "dark" ? "light" : "dark";
-      this._setThemeMode(newThemeMode);
-    }
-    _setThemeMode(themeMode) {
-      this.themeMode = 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;
-        log_default.log(1, `Switched theme to ${label}`, themeStyle);
-        this.updateHTML();
-      }
-    }
-    /** Read browser preference */
-    _getInitialThemeMode() {
-      const { initialThemeMode } = this.props;
-      return initialThemeMode === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : initialThemeMode;
-    }
-  };
-  var ThemeWidget = _ThemeWidget;
-  ThemeWidget.defaultProps = {
-    ...Widget.defaultProps,
-    id: "theme",
-    placement: "top-left",
-    lightModeLabel: "Light Mode",
-    lightModeTheme: LightGlassTheme,
-    darkModeLabel: "Dark Mode",
-    darkModeTheme: DarkGlassTheme,
-    initialThemeMode: "auto"
+  var ICON_STYLE = { width: "24px", height: "24px" };
+  var ICONS = {
+    single: () => /* @__PURE__ */ u4("svg", { width: "24", height: "24", style: ICON_STYLE, children: /* @__PURE__ */ u4(
+      "rect",
+      {
+        x: "4",
+        y: "4",
+        width: "16",
+        height: "16",
+        stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
+        fill: "none",
+        strokeWidth: "2"
+      }
+    ) }),
+    "split-horizontal": () => /* @__PURE__ */ u4("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
+      /* @__PURE__ */ u4(
+        "rect",
+        {
+          x: "4",
+          y: "4",
+          width: "16",
+          height: "7",
+          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
+          fill: "none",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ u4(
+        "rect",
+        {
+          x: "4",
+          y: "13",
+          width: "16",
+          height: "7",
+          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
+          fill: "none",
+          strokeWidth: "2"
+        }
+      )
+    ] }),
+    "split-vertical": () => /* @__PURE__ */ u4("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
+      /* @__PURE__ */ u4(
+        "rect",
+        {
+          x: "4",
+          y: "4",
+          width: "7",
+          height: "16",
+          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
+          fill: "none",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ u4(
+        "rect",
+        {
+          x: "13",
+          y: "4",
+          width: "7",
+          height: "16",
+          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
+          fill: "none",
+          strokeWidth: "2"
+        }
+      )
+    ] })
   };
+  var MENU_ITEMS = [
+    { value: "single", icon: ICONS.single, label: "Single View" },
+    { value: "split-horizontal", icon: ICONS["split-horizontal"], label: "Split Horizontal" },
+    { value: "split-vertical", icon: ICONS["split-vertical"], label: "Split Vertical" }
+  ];
 
   // ../widgets/src/info-widget.tsx
   var _InfoWidget = class extends Widget {
@@ -104160,13 +104251,10 @@ ${fps}`;
       super(props, _InfoWidget.defaultProps);
       this.className = "deck-widget-info";
       this.placement = "fill";
-      this.viewId = null;
-      props.position = props.position || [0, 0];
-      props.text = props.text || "";
-      props.visible = props.visible || false;
-      props.minOffset = props.minOffset ?? 0;
+      this.setProps(this.props);
     }
     setProps(props) {
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     onCreateRootElement() {
@@ -104185,7 +104273,7 @@ ${fps}`;
         this.setProps({
           visible: tooltip !== null,
           ...tooltip,
-          style: { zIndex: 1, ...tooltip?.style }
+          style: { zIndex: "1", ...tooltip?.style }
         });
       }
     }
@@ -104237,7 +104325,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;
@@ -104298,10 +104386,10 @@ ${fps}`;
   var InfoWidget = _InfoWidget;
   InfoWidget.defaultProps = {
     ...Widget.defaultProps,
+    id: "info",
     position: [0, 0],
     text: "",
     visible: false,
-    // Set default minOffset if not provided
     minOffset: 0,
     viewId: null,
     mode: "hover",
@@ -104309,136 +104397,6 @@ ${fps}`;
     onClick: void 0
   };
 
-  // ../widgets/src/stats-widget.tsx
-  init_dist4();
-  var RIGHT_ARROW = "\u25B6";
-  var DOWN_ARROW = "\u2B07";
-  var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
-  function formatTime2(time) {
-    return time < 1e3 ? `${time.toFixed(2)}ms` : `${(time / 1e3).toFixed(2)}s`;
-  }
-  function formatMemory(bytes) {
-    const mb = bytes / 1e6;
-    return `${mb.toFixed(1)} MB`;
-  }
-  var DEFAULT_FORMATTERS = {
-    count: DEFAULT_COUNT_FORMATTER,
-    averageTime: (stat) => `${stat.name}: ${formatTime2(stat.getAverageTime())}`,
-    totalTime: (stat) => `${stat.name}: ${formatTime2(stat.time)}`,
-    fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
-    memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
-  };
-  var _StatsWidget = class extends Widget {
-    constructor(props = {}) {
-      super(props, _StatsWidget.defaultProps);
-      this.className = "deck-widget-stats";
-      this.placement = "top-left";
-      this._counter = 0;
-      this.collapsed = true;
-      this._toggleCollapsed = () => {
-        this.collapsed = !this.collapsed;
-        this.updateHTML();
-      };
-      this._formatters = { ...DEFAULT_FORMATTERS };
-      this.setProps(props);
-      this._resetOnUpdate = { ...this.props.resetOnUpdate };
-      this._stats = this.props.stats;
-    }
-    setProps(props) {
-      super.setProps(props);
-      this._stats = this._getStats();
-      if (props.formatters) {
-        for (const name13 in props.formatters) {
-          const f6 = props.formatters[name13];
-          this._formatters[name13] = typeof f6 === "string" ? DEFAULT_FORMATTERS[f6] || DEFAULT_COUNT_FORMATTER : f6;
-        }
-      }
-      if (props.resetOnUpdate) {
-        this._resetOnUpdate = { ...props.resetOnUpdate };
-      }
-    }
-    onAdd() {
-      this._stats = this._getStats();
-      this.updateHTML();
-    }
-    onRenderHTML(rootElement) {
-      const stats2 = this._stats;
-      const collapsed = this.collapsed;
-      const title = this.props.title || stats2?.id || "Stats";
-      const items = [];
-      if (!collapsed && stats2) {
-        stats2.forEach((stat) => {
-          const lines = this._getLines(stat);
-          if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
-            stat.reset();
-          }
-          lines.forEach((line, i7) => {
-            items.push(
-              /* @__PURE__ */ u4("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i7}`)
-            );
-          });
-        });
-      }
-      B2(
-        /* @__PURE__ */ u4("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [
-          /* @__PURE__ */ u4(
-            "div",
-            {
-              className: "deck-widget-stats-header",
-              style: { cursor: "pointer", pointerEvents: "auto" },
-              onClick: this._toggleCollapsed,
-              children: [
-                collapsed ? RIGHT_ARROW : DOWN_ARROW,
-                " ",
-                title
-              ]
-            }
-          ),
-          !collapsed && /* @__PURE__ */ u4("div", { className: "deck-widget-stats-content deck-widget-common", children: items })
-        ] }),
-        rootElement
-      );
-    }
-    onRedraw() {
-      const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
-      if (this._counter++ % framesPerUpdate === 0) {
-        console.log("Redrawing stats widget");
-        this.updateHTML();
-      }
-    }
-    _getStats() {
-      switch (this.props.type) {
-        case "deck":
-          return this.deck?.stats;
-        case "luma":
-          return Array.from(luma.stats.stats.values())[0];
-        case "device":
-          const device = this.deck?.device;
-          const stats2 = device?.statsManager.stats.values();
-          return stats2 ? Array.from(stats2)[0] : void 0;
-        case "custom":
-          return this.props.stats;
-        default:
-          throw new Error(`Unknown stats type: ${this.props.type}`);
-      }
-    }
-    _getLines(stat) {
-      const formatter = this._formatters[stat.name] || this._formatters[stat.type || ""] || DEFAULT_COUNT_FORMATTER;
-      return formatter(stat).split("\n");
-    }
-  };
-  var StatsWidget = _StatsWidget;
-  StatsWidget.defaultProps = {
-    ...Widget.defaultProps,
-    type: "deck",
-    stats: void 0,
-    title: "Stats",
-    framesPerUpdate: 1,
-    formatters: {},
-    resetOnUpdate: {},
-    id: "stats"
-  };
-
   // ../widgets/src/lib/components/simple-menu.tsx
   var MENU_STYLE = {
     position: "absolute",
@@ -104447,7 +104405,7 @@ ${fps}`;
     background: "white",
     border: "1px solid #ccc",
     borderRadius: "4px",
-    marginTop: "4px",
+    marginTop: "var(--menu-gap, 4px)",
     zIndex: 100
   };
   var MENU_ITEM_STYLE = {
@@ -104486,7 +104444,7 @@ ${fps}`;
       this.placement = "fill";
       this.pickInfo = null;
       this.pickInfo = null;
-      this.setProps(props);
+      this.setProps(this.props);
     }
     onAdd({ deck }) {
       const element = document.createElement("div");
@@ -104514,7 +104472,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 +104500,7 @@ ${fps}`;
   var ContextMenuWidget = _ContextMenuWidget;
   ContextMenuWidget.defaultProps = {
     ...Widget.defaultProps,
+    id: "context",
     viewId: null,
     visible: false,
     position: { x: 0, y: 0 },
@@ -104551,131 +104510,6 @@ ${fps}`;
     onMenuItemSelected: (key, pickInfo) => console.log("Context menu item selected:", key, pickInfo)
   };
 
-  // ../widgets/src/splitter-widget.tsx
-  var _SplitterWidget = class extends Widget {
-    constructor(props) {
-      super(props, _SplitterWidget.defaultProps);
-      this.className = "deck-widget-splitter";
-      this.placement = "fill";
-    }
-    setProps(props) {
-      super.setProps(props);
-    }
-    onRenderHTML(rootElement) {
-      rootElement.style.position = "absolute";
-      rootElement.style.top = "0";
-      rootElement.style.left = "0";
-      rootElement.style.width = "100%";
-      rootElement.style.height = "100%";
-      rootElement.style.margin = "0px";
-      B2(
-        /* @__PURE__ */ u4(
-          Splitter,
-          {
-            orientation: this.props.orientation,
-            initialSplit: this.props.initialSplit,
-            onChange: this.props.onChange,
-            onDragStart: this.props.onDragStart,
-            onDragEnd: this.props.onDragEnd
-          }
-        ),
-        rootElement
-      );
-    }
-  };
-  var SplitterWidget = _SplitterWidget;
-  SplitterWidget.defaultProps = {
-    ...Widget.defaultProps,
-    id: "splitter-widget",
-    viewId1: "",
-    viewId2: "",
-    orientation: "vertical",
-    initialSplit: 0.5,
-    onChange: () => {
-    },
-    onDragStart: () => {
-    },
-    onDragEnd: () => {
-    }
-  };
-  function Splitter({
-    orientation,
-    initialSplit,
-    onChange,
-    onDragStart,
-    onDragEnd
-  }) {
-    const [split, setSplit] = h3(initialSplit);
-    const dragging = A3(false);
-    const containerRef = A3(null);
-    const handleDragStart = (event) => {
-      dragging.current = true;
-      onDragStart?.();
-      document.addEventListener("mousemove", handleDragging);
-      document.addEventListener("mouseup", handleDragEnd);
-      event.preventDefault();
-    };
-    const handleDragging = (event) => {
-      if (!dragging.current || !containerRef.current)
-        return;
-      const rect = containerRef.current.getBoundingClientRect();
-      let newSplit;
-      if (orientation === "vertical") {
-        newSplit = (event.clientX - rect.left) / rect.width;
-      } else {
-        newSplit = (event.clientY - rect.top) / rect.height;
-      }
-      newSplit = Math.min(Math.max(newSplit, 0.05), 0.95);
-      setSplit(newSplit);
-      onChange?.(newSplit);
-    };
-    const handleDragEnd = (event) => {
-      if (!dragging.current)
-        return;
-      dragging.current = false;
-      onDragEnd?.();
-      document.removeEventListener("mousemove", handleDragging);
-      document.removeEventListener("mouseup", handleDragEnd);
-    };
-    const splitterStyle = orientation === "vertical" ? {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: `${split * 100}%`,
-      width: "4px",
-      cursor: "col-resize",
-      background: "#ccc",
-      zIndex: 10,
-      pointerEvents: "auto",
-      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
-    } : {
-      position: "absolute",
-      left: 0,
-      right: 0,
-      top: `${split * 100}%`,
-      height: "4px",
-      cursor: "row-resize",
-      background: "#ccc",
-      zIndex: 10,
-      pointerEvents: "auto",
-      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
-    };
-    const containerStyle = {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    };
-    return /* @__PURE__ */ u4("div", { ref: containerRef, style: containerStyle, children: /* @__PURE__ */ u4(
-      "div",
-      {
-        style: splitterStyle,
-        onMouseDown: handleDragStart
-      }
-    ) });
-  }
-
   // ../widgets/src/timeline-widget.tsx
   var _TimelineWidget = class extends Widget {
     constructor(props = {}) {
@@ -104713,9 +104547,11 @@ ${fps}`;
         }
       };
       this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+      this.setProps(this.props);
     }
     setProps(props) {
-      this.placement = props.placement || this.placement;
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     onAdd() {
@@ -104726,18 +104562,9 @@ ${fps}`;
       this.stop();
     }
     onRenderHTML(rootElement) {
-      B2(
+      B3(
         /* @__PURE__ */ u4("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [
-          /* @__PURE__ */ u4(
-            "button",
-            {
-              type: "button",
-              className: "timeline-play-pause",
-              title: this.playing ? "Pause" : "Play",
-              onClick: this.handlePlayPause,
-              children: this.playing ? "\u23F8" : "\u25B6"
-            }
-          ),
+          /* @__PURE__ */ u4(IconButton, { label: this.playing ? "Pause" : "Play", onClick: this.handlePlayPause, children: /* @__PURE__ */ u4("div", { className: "text", children: this.playing ? "\u23F8" : "\u25B6" }) }),
           /* @__PURE__ */ u4(
             "input",
             {
@@ -104773,6 +104600,7 @@ ${fps}`;
     ...Widget.defaultProps,
     id: "timeline",
     placement: "bottom-left",
+    viewId: null,
     timeRange: [0, 100],
     step: 1,
     initialTime: void 0,
@@ -104781,123 +104609,445 @@ ${fps}`;
     playInterval: 1e3
   };
 
-  // ../widgets/src/lib/components/icon-menu.tsx
-  var MENU_STYLE2 = {
-    position: "absolute",
-    top: "100%",
-    left: 0,
-    background: "white",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    marginTop: "4px",
-    zIndex: 100
+  // ../widgets/src/screenshot-widget.tsx
+  var _ScreenshotWidget = class extends Widget {
+    constructor(props = {}) {
+      super(props, _ScreenshotWidget.defaultProps);
+      this.className = "deck-widget-screenshot";
+      this.placement = "top-left";
+      this.setProps(this.props);
+    }
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+      B3(
+        /* @__PURE__ */ u4(
+          IconButton,
+          {
+            className: "deck-widget-camera",
+            label: this.props.label,
+            onClick: this.handleClick.bind(this)
+          }
+        ),
+        rootElement
+      );
+    }
+    handleClick() {
+      if (this.props.onCapture) {
+        this.props.onCapture(this);
+        return;
+      }
+      const dataURL = this.captureScreenToDataURL(this.props.imageFormat);
+      if (dataURL) {
+        this.downloadDataURL(dataURL, this.props.filename);
+      }
+    }
+    /** @note only captures canvas contents, not HTML DOM or CSS styles */
+    captureScreenToDataURL(imageFormat) {
+      const canvas2 = this.deck?.getCanvas();
+      return canvas2?.toDataURL(imageFormat);
+    }
+    /** Download a data URL */
+    downloadDataURL(dataURL, filename2) {
+      const link = document.createElement("a");
+      link.href = dataURL;
+      link.download = filename2;
+      link.click();
+    }
   };
-  var MENU_ITEM_STYLE2 = {
-    background: "white",
-    border: "none",
-    padding: "4px",
-    cursor: "pointer",
-    pointerEvents: "auto"
+  var ScreenshotWidget = _ScreenshotWidget;
+  ScreenshotWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: "screenshot",
+    placement: "top-left",
+    viewId: null,
+    label: "Screenshot",
+    filename: "screenshot.png",
+    imageFormat: "image/png",
+    onCapture: void 0
   };
-  function IconMenu(props) {
-    const [menuOpen, setMenuOpen] = h3(false);
-    const containerRef = A3(null);
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setMenuOpen(false);
-      }
-    };
-    y4(() => {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [containerRef]);
-    const [selectedItem, setSelectedItem] = h3(props.initialItem);
-    const handleSelectItem = (item) => {
-      setSelectedItem(item);
-      setMenuOpen(false);
-      props.onItemSelected(item);
-    };
-    const handleButtonClick = () => setMenuOpen(!menuOpen);
-    const selectedMenuItem = props.menuItems.find((item) => item.value === selectedItem);
-    const label = props.label || selectedMenuItem?.label || "";
-    const Icon = props.icon || selectedMenuItem?.icon;
-    return /* @__PURE__ */ u4("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [
-      /* @__PURE__ */ u4(IconButton, { className: props.className, label, onClick: handleButtonClick, children: /* @__PURE__ */ u4(Icon, {}) }),
-      menuOpen && /* @__PURE__ */ u4("div", { style: MENU_STYLE2, children: /* @__PURE__ */ u4("div", { style: { display: "flex", flexDirection: "column" }, children: props.menuItems.map((item) => /* @__PURE__ */ u4(
-        "button",
-        {
-          style: MENU_ITEM_STYLE2,
-          title: item.label,
-          onClick: () => handleSelectItem(item.value),
-          children: item.icon
-        },
-        item.value
-      )) }) })
-    ] });
-  }
 
-  // ../widgets/src/view-selector-widget.tsx
-  var _ViewSelectorWidget = class extends Widget {
+  // ../widgets/src/themes.ts
+  var LightTheme = {
+    "--widget-margin": "12px",
+    "--button-size": "28px",
+    "--button-corner-radius": "8px",
+    "--button-background": "#fff",
+    "--button-stroke": "rgba(255, 255, 255, 0.3)",
+    "--button-inner-stroke": "unset",
+    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
+    "--button-backdrop-filter": "unset",
+    "--button-icon-idle": "rgba(97, 97, 102, 1)",
+    "--button-icon-hover": "rgba(24, 24, 26, 1)",
+    "--button-text": "rgb(24, 24, 26, 1)",
+    "--icon-compass-north-color": "rgb(240, 92, 68)",
+    "--icon-compass-south-color": "rgb(204, 204, 204)",
+    "--menu-gap": "4px"
+  };
+  var DarkTheme = {
+    "--widget-margin": "12px",
+    "--button-size": "28px",
+    "--button-corner-radius": "8px",
+    "--button-background": "rgba(18, 18, 20, 1)",
+    "--button-stroke": "rgba(18, 18, 20, 0.30)",
+    "--button-inner-stroke": "unset",
+    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
+    "--button-backdrop-filter": "unset",
+    "--button-icon-idle": "rgba(158, 157, 168, 1)",
+    "--button-icon-hover": "rgba(215, 214, 229, 1)",
+    "--button-text": "rgb(215, 214, 229, 1)",
+    "--icon-compass-north-color": "rgb(240, 92, 68)",
+    "--icon-compass-south-color": "rgb(200, 199, 209)",
+    "--menu-gap": "4px"
+  };
+  var LightGlassTheme = {
+    "--widget-margin": "12px",
+    "--button-size": "28px",
+    "--button-corner-radius": "8px",
+    "--button-background": "rgba(255, 255, 255, 0.6)",
+    "--button-stroke": "rgba(255, 255, 255, 0.3)",
+    "--button-inner-stroke": "1px solid rgba(255, 255, 255, 0.6)",
+    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
+    "--button-backdrop-filter": "blur(4px)",
+    "--button-icon-idle": "rgba(97, 97, 102, 1)",
+    "--button-icon-hover": "rgba(24, 24, 26, 1)",
+    "--button-text": "rgb(24, 24, 26, 1)",
+    "--icon-compass-north-color": "rgb(240, 92, 68)",
+    "--icon-compass-south-color": "rgb(204, 204, 204)",
+    "--menu-gap": "4px"
+  };
+  var DarkGlassTheme = {
+    "--widget-margin": "12px",
+    "--button-size": "28px",
+    "--button-corner-radius": "8px",
+    "--button-background": "rgba(18, 18, 20, 0.75)",
+    "--button-stroke": "rgba(18, 18, 20, 0.30)",
+    "--button-inner-stroke": "1px solid rgba(18, 18, 20, 0.75)",
+    "--button-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
+    "--button-backdrop-filter": "blur(4px)",
+    "--button-icon-idle": "rgba(158, 157, 168, 1)",
+    "--button-icon-hover": "rgba(215, 214, 229, 1)",
+    "--button-text": "rgb(215, 214, 229, 1)",
+    "--icon-compass-north-color": "rgb(240, 92, 68)",
+    "--icon-compass-south-color": "rgb(200, 199, 209)",
+    "--menu-gap": "4px"
+  };
+
+  // ../widgets/src/theme-widget.tsx
+  var _ThemeWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _ViewSelectorWidget.defaultProps);
-      this.className = "deck-widget-view-selector";
+      super(props, _ThemeWidget.defaultProps);
+      this.className = "deck-widget-theme";
       this.placement = "top-left";
-      this.handleSelectMode = (viewMode) => {
-        this.viewMode = viewMode;
-        this.updateHTML();
-      };
-      this.placement = this.props.placement;
-      this.viewMode = this.props.initialViewMode;
+      this.themeMode = "dark";
+      this.themeMode = this._getInitialThemeMode();
+      this.setProps(this.props);
     }
+    // eslint-disable-next-line complexity
     setProps(props) {
-      super.setProps(props);
+      const { lightModeTheme, darkModeTheme } = this.props;
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
+      switch (this.themeMode) {
+        case "light":
+          if (props.lightModeTheme && !deepEqual2(props.lightModeTheme, lightModeTheme, 1)) {
+            this._setThemeMode("light");
+          }
+          break;
+        case "dark":
+          if (props.darkModeTheme && !deepEqual2(props.darkModeTheme, darkModeTheme, 1)) {
+            this._setThemeMode("dark");
+          }
+          break;
+        default:
+          log_default.warn(`Invalid theme mode ${this.themeMode}`)();
+      }
     }
     onRenderHTML(rootElement) {
-      B2(
+      const { lightModeLabel, darkModeLabel } = this.props;
+      B3(
         /* @__PURE__ */ u4(
-          IconMenu,
+          IconButton,
           {
-            className: "deck-widget-view-selector",
-            menuItems: MENU_ITEMS,
-            initialItem: this.props.initialViewMode,
-            onItemSelected: this.handleSelectMode
+            onClick: this._handleClick.bind(this),
+            label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel,
+            className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun"
           }
         ),
         rootElement
       );
     }
+    onAdd() {
+      this._setThemeMode(this.themeMode);
+    }
+    _handleClick() {
+      const newThemeMode = this.themeMode === "dark" ? "light" : "dark";
+      this._setThemeMode(newThemeMode);
+    }
+    _setThemeMode(themeMode) {
+      this.themeMode = 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;
+        log_default.log(1, `Switched theme to ${label}`, themeStyle)();
+        this.updateHTML();
+      }
+    }
+    /** Read browser preference */
+    _getInitialThemeMode() {
+      const { initialThemeMode } = this.props;
+      return initialThemeMode === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : initialThemeMode;
+    }
   };
-  var ViewSelectorWidget = _ViewSelectorWidget;
-  ViewSelectorWidget.defaultProps = {
+  var ThemeWidget = _ThemeWidget;
+  ThemeWidget.defaultProps = {
     ...Widget.defaultProps,
-    id: "view-selector-widget",
+    id: "theme",
     placement: "top-left",
-    label: "Split View",
-    initialViewMode: "single",
-    onViewModeChange: (viewMode) => {
-      console.log(viewMode);
+    viewId: null,
+    lightModeLabel: "Light Mode",
+    lightModeTheme: LightGlassTheme,
+    darkModeLabel: "Dark Mode",
+    darkModeTheme: DarkGlassTheme,
+    initialThemeMode: "auto"
+  };
+
+  // ../widgets/src/loading-widget.tsx
+  var _LoadingWidget = class extends Widget {
+    constructor(props = {}) {
+      super(props, _LoadingWidget.defaultProps);
+      this.className = "deck-widget-loading";
+      this.placement = "top-left";
+      this.loading = true;
+      this.setProps(this.props);
+    }
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+      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,
+          {
+            className: "deck-widget-spinner",
+            label: this.props.label,
+            onClick: this.handleClick.bind(this)
+          }
+        ),
+        rootElement
+      );
+    }
+    onRedraw({ layers }) {
+      const loading = layers.some((layer) => !layer.isLoaded);
+      if (loading !== this.loading) {
+        this.loading = loading;
+        this.updateHTML();
+      }
+    }
+    // TODO(ibgreen) - this should not be a button, see above.
+    handleClick() {
     }
   };
-  var ICON_STYLE = { width: "24px", height: "24px" };
-  var ICONS = {
-    single: () => /* @__PURE__ */ u4("svg", { width: "24", height: "24", style: ICON_STYLE, children: /* @__PURE__ */ u4("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }) }),
-    "split-horizontal": () => /* @__PURE__ */ u4("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
-      /* @__PURE__ */ u4("rect", { x: "4", y: "4", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" }),
-      /* @__PURE__ */ u4("rect", { x: "4", y: "13", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" })
-    ] }),
-    "split-vertical": () => /* @__PURE__ */ u4("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
-      /* @__PURE__ */ u4("rect", { x: "4", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }),
-      /* @__PURE__ */ u4("rect", { x: "13", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" })
-    ] })
+  var LoadingWidget = _LoadingWidget;
+  LoadingWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: "loading",
+    placement: "top-left",
+    viewId: null,
+    label: "Loading layer data"
+  };
+
+  // ../widgets/src/fps-widget.tsx
+  var _FpsWidget = class extends Widget {
+    constructor(props = {}) {
+      super(props, _FpsWidget.defaultProps);
+      this.className = "deck-widget-fps";
+      this.placement = "top-left";
+      this._lastFps = -1;
+      this.setProps(this.props);
+    }
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
+    }
+    onAdd({}) {
+      this._lastFps = this._getFps();
+      requestAnimationFrame(() => this._animate());
+    }
+    onRenderHTML(rootElement) {
+      const fps = this._getFps();
+      B3(
+        /* @__PURE__ */ u4(IconButton, { children: /* @__PURE__ */ u4("div", { className: "text", children: [
+          "FPS",
+          /* @__PURE__ */ u4("br", {}),
+          fps
+        ] }) }),
+        rootElement
+      );
+    }
+    _animate() {
+      const fps = this._getFps();
+      if (this._lastFps !== fps) {
+        this._lastFps = fps;
+        this.updateHTML();
+      }
+      requestAnimationFrame(() => this._animate());
+    }
+    _getFps() {
+      return Math.round(this.deck.metrics.fps ?? 0);
+    }
+  };
+  var FpsWidget = _FpsWidget;
+  FpsWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: "fps",
+    placement: "top-left",
+    viewId: null
+  };
+
+  // ../widgets/src/stats-widget.tsx
+  init_dist4();
+  var RIGHT_ARROW = "\u25B6";
+  var DOWN_ARROW = "\u2B07";
+  var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
+  function formatTime2(time) {
+    return time < 1e3 ? `${time.toFixed(2)}ms` : `${(time / 1e3).toFixed(2)}s`;
+  }
+  function formatMemory(bytes) {
+    const mb = bytes / 1e6;
+    return `${mb.toFixed(1)} MB`;
+  }
+  var DEFAULT_FORMATTERS = {
+    count: DEFAULT_COUNT_FORMATTER,
+    averageTime: (stat) => `${stat.name}: ${formatTime2(stat.getAverageTime())}`,
+    totalTime: (stat) => `${stat.name}: ${formatTime2(stat.time)}`,
+    fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
+    memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
+  };
+  var _StatsWidget = class extends Widget {
+    constructor(props = {}) {
+      super(props, _StatsWidget.defaultProps);
+      this.className = "deck-widget-stats";
+      this.placement = "top-left";
+      this._counter = 0;
+      this.collapsed = true;
+      this._toggleCollapsed = () => {
+        this.collapsed = !this.collapsed;
+        this.updateHTML();
+      };
+      this._formatters = { ...DEFAULT_FORMATTERS };
+      this._resetOnUpdate = { ...this.props.resetOnUpdate };
+      this._stats = this.props.stats;
+      this.setProps(props);
+    }
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      this._stats = this._getStats();
+      if (props.formatters) {
+        for (const name13 in props.formatters) {
+          const f6 = props.formatters[name13];
+          this._formatters[name13] = typeof f6 === "string" ? DEFAULT_FORMATTERS[f6] || DEFAULT_COUNT_FORMATTER : f6;
+        }
+      }
+      if (props.resetOnUpdate) {
+        this._resetOnUpdate = { ...props.resetOnUpdate };
+      }
+      super.setProps(props);
+    }
+    onAdd() {
+      this._stats = this._getStats();
+      this.updateHTML();
+    }
+    onRenderHTML(rootElement) {
+      const stats2 = this._stats;
+      const collapsed = this.collapsed;
+      const title = this.props.title || stats2?.id || "Stats";
+      const items = [];
+      if (!collapsed && stats2) {
+        stats2.forEach((stat) => {
+          const lines = this._getLines(stat);
+          if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
+            stat.reset();
+          }
+          lines.forEach((line, i7) => {
+            items.push(
+              /* @__PURE__ */ u4("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i7}`)
+            );
+          });
+        });
+      }
+      B3(
+        /* @__PURE__ */ u4("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [
+          /* @__PURE__ */ u4(
+            "div",
+            {
+              className: "deck-widget-stats-header",
+              style: { cursor: "pointer", pointerEvents: "auto" },
+              onClick: this._toggleCollapsed,
+              children: [
+                collapsed ? RIGHT_ARROW : DOWN_ARROW,
+                " ",
+                title
+              ]
+            }
+          ),
+          !collapsed && /* @__PURE__ */ u4("div", { className: "deck-widget-stats-content", children: items })
+        ] }),
+        rootElement
+      );
+    }
+    onRedraw() {
+      const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
+      if (this._counter++ % framesPerUpdate === 0) {
+        this._stats = this._getStats();
+        this.updateHTML();
+      }
+    }
+    _getStats() {
+      switch (this.props.type) {
+        case "deck":
+          return this.deck?.stats;
+        case "luma":
+          return Array.from(luma.stats.stats.values())[0];
+        case "device":
+          const device = this.deck?.device;
+          const stats2 = device?.statsManager.stats.values();
+          return stats2 ? Array.from(stats2)[0] : void 0;
+        case "custom":
+          return this.props.stats;
+        default:
+          throw new Error(`Unknown stats type: ${this.props.type}`);
+      }
+    }
+    _getLines(stat) {
+      const formatter = this._formatters[stat.name] || this._formatters[stat.type || ""] || DEFAULT_COUNT_FORMATTER;
+      return formatter(stat).split("\n");
+    }
+  };
+  var StatsWidget = _StatsWidget;
+  StatsWidget.defaultProps = {
+    ...Widget.defaultProps,
+    type: "deck",
+    placement: "top-left",
+    viewId: null,
+    stats: void 0,
+    title: "Stats",
+    framesPerUpdate: 1,
+    formatters: {},
+    resetOnUpdate: {},
+    id: "stats"
   };
-  var MENU_ITEMS = [
-    { value: "single", icon: ICONS.single, label: "Single View" },
-    { value: "split-horizontal", icon: ICONS["split-horizontal"], label: "Split Horizontal" },
-    { value: "split-vertical", icon: ICONS["split-vertical"], label: "Split Vertical" }
-  ];
 
   // bundle.ts
   var h32 = __toESM(require_h3_js(), 1);