deck.gl 9.2.0-beta.2 → 9.2.0-beta.4

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" : "running from source"
+          true ? "9.2.2" : "running from source"
         );
         spector;
         preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -9603,7 +9603,7 @@ ${source4}`;
          * @param gl
          * @returns
          */
-        async attach(gl) {
+        async attach(gl, props = {}) {
           const { WebGLDevice: WebGLDevice2 } = await Promise.resolve().then(() => (init_webgl_device(), webgl_device_exports));
           if (gl instanceof WebGLDevice2) {
             return gl;
@@ -9614,9 +9614,11 @@ ${source4}`;
           if (!isWebGL(gl)) {
             throw new Error("Invalid WebGL2RenderingContext");
           }
+          const createCanvasContext = props.createCanvasContext === true ? {} : props.createCanvasContext;
           return new WebGLDevice2({
+            ...props,
             _handle: gl,
-            createCanvasContext: { canvas: gl.canvas, autoResize: false }
+            createCanvasContext: { canvas: gl.canvas, autoResize: false, ...createCanvasContext }
           });
         }
         async create(props = {}) {
@@ -43265,7 +43267,7 @@ void main() {
         if (props.gl instanceof WebGLRenderingContext) {
           log_default.error("WebGL1 context not supported.")();
         }
-        deviceOrPromise = webgl2Adapter.attach(props.gl);
+        deviceOrPromise = webgl2Adapter.attach(props.gl, this.props.deviceProps);
       }
       if (!deviceOrPromise) {
         deviceOrPromise = this._createDevice(props);
@@ -43331,7 +43333,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();
       }
@@ -44531,7 +44533,7 @@ void main() {
     }
     // Use generic value
     // Returns true if successful
-    setConstantValue(value) {
+    setConstantValue(context, value) {
       const isWebGPU = this.device.type === "webgpu";
       if (isWebGPU || value === void 0 || typeof value === "function") {
         if (isWebGPU && typeof value !== "function") {
@@ -44542,7 +44544,8 @@ void main() {
         }
         return false;
       }
-      const hasChanged = this.setData({ constant: true, value });
+      const transformedValue = this.settings.transform && context ? this.settings.transform.call(context, value) : value;
+      const hasChanged = this.setData({ constant: true, value: transformedValue });
       if (hasChanged) {
         this.setNeedsRedraw();
       }
@@ -45571,7 +45574,7 @@ void main(void) {
           typeof accessorName === "string" ? buffers[accessorName] : void 0,
           data.startIndices
         )) {
-        } else if (typeof accessorName === "string" && !buffers[accessorName] && attribute.setConstantValue(props[accessorName])) {
+        } else if (typeof accessorName === "string" && !buffers[accessorName] && attribute.setConstantValue(context, props[accessorName])) {
         } else if (attribute.needsUpdate()) {
           updated = true;
           this._updateAttribute({
@@ -45687,7 +45690,7 @@ void main(void) {
       const { attribute, numInstances } = opts;
       debug(TRACE_ATTRIBUTE_UPDATE_START, attribute);
       if (attribute.constant) {
-        attribute.setConstantValue(attribute.value);
+        attribute.setConstantValue(opts.context, attribute.value);
         return;
       }
       if (attribute.allocate(numInstances)) {
@@ -50017,6 +50020,7 @@ void main(void) {
   var uniformBlock9 = `uniform iconUniforms {
   float sizeScale;
   vec2 iconsTextureDim;
+  float sizeBasis;
   float sizeMinPixels;
   float sizeMaxPixels;
   bool billboard;
@@ -50031,6 +50035,7 @@ void main(void) {
     uniformTypes: {
       sizeScale: "f32",
       iconsTextureDim: "vec2<f32>",
+      sizeBasis: "f32",
       sizeMinPixels: "f32",
       sizeMaxPixels: "f32",
       billboard: "f32",
@@ -50084,8 +50089,9 @@ void main(void) {
     icon.sizeMinPixels, icon.sizeMaxPixels
   );
 
-  // scale icon height to match instanceSize
-  float instanceScale = iconSize.y == 0.0 ? 0.0 : sizePixels / iconSize.y;
+  // Choose correct constraint based on the 'sizeBasis' value (0.0 = width, 1.0 = height)
+  float iconConstraint = icon.sizeBasis == 0.0 ? iconSize.x : iconSize.y;
+  float instanceScale = iconConstraint == 0.0 ? 0.0 : sizePixels / iconConstraint;
 
   // scale and rotate vertex in "pixel" value and convert back to fraction in clipspace
   vec2 pixelOffset = positions / 2.0 * iconSize + instanceOffsets;
@@ -50099,7 +50105,6 @@ void main(void) {
     vec3 offset = vec3(pixelOffset, 0.0);
     DECKGL_FILTER_SIZE(offset, geometry);
     gl_Position.xy += project_pixel_size_to_clipspace(offset.xy);
-
   } else {
     vec3 offset_common = vec3(project_pixel_size(pixelOffset), 0.0);
     DECKGL_FILTER_SIZE(offset_common, geometry);
@@ -50448,6 +50453,7 @@ void main(void) {
     sizeScale: { type: "number", value: 1, min: 0 },
     billboard: true,
     sizeUnits: "pixels",
+    sizeBasis: "height",
     sizeMinPixels: { type: "number", min: 0, value: 0 },
     //  min point radius in pixels
     sizeMaxPixels: { type: "number", min: 0, value: Number.MAX_SAFE_INTEGER },
@@ -50566,7 +50572,7 @@ void main(void) {
       this.state.iconManager.finalize();
     }
     draw({ uniforms }) {
-      const { sizeScale, sizeMinPixels, sizeMaxPixels, sizeUnits, billboard, alphaCutoff } = this.props;
+      const { sizeScale, sizeBasis, sizeMinPixels, sizeMaxPixels, sizeUnits, billboard, alphaCutoff } = this.props;
       const { iconManager } = this.state;
       const iconsTexture = iconManager.getTexture();
       if (iconsTexture) {
@@ -50576,6 +50582,7 @@ void main(void) {
           iconsTextureDim: [iconsTexture.width, iconsTexture.height],
           sizeUnits: UNIT[sizeUnits],
           sizeScale,
+          sizeBasis: sizeBasis === "height" ? 1 : 0,
           sizeMinPixels,
           sizeMaxPixels,
           billboard,
@@ -56287,12 +56294,21 @@ void main(void) {
       featureIds: lines.featureIds
     };
     layerProps.lines._pathType = "open";
+    const vertexCount = polygons.positions.value.length / polygons.positions.size;
+    const vertexValid = Array(vertexCount).fill(1);
+    for (const index of polygons.primitivePolygonIndices.value) {
+      vertexValid[index - 1] = 0;
+    }
     layerProps.polygons.data = {
       length: polygons.polygonIndices.value.length - 1,
       startIndices: polygons.polygonIndices.value,
       attributes: {
         ...polygons.attributes,
         getPolygon: polygons.positions,
+        instanceVertexValid: {
+          size: 1,
+          value: new Uint16Array(vertexValid)
+        },
         pickingColors: {
           size: 4,
           value: customPickingColors.polygons
@@ -94190,7 +94206,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
         }
@@ -102180,6 +102198,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) {
@@ -102265,16 +102289,24 @@ void main() {
             return;
         }
       };
-      const { interleaved = false, ...otherProps } = props;
+      const { interleaved = false } = props;
       this._interleaved = interleaved;
-      this._props = otherProps;
+      this._props = this.filterProps(props);
+    }
+    /** Filter out props to pass to Deck **/
+    filterProps(props) {
+      const { interleaved = false, useDevicePixels, ...deckProps } = props;
+      if (!interleaved && useDevicePixels !== void 0) {
+        deckProps.useDevicePixels = useDevicePixels;
+      }
+      return deckProps;
     }
     /** Update (partial) props of the underlying Deck instance. */
     setProps(props) {
       if (this._interleaved && props.layers) {
         resolveLayers(this._map, this._deck, this._props.layers, props.layers);
       }
-      Object.assign(this._props, props);
+      Object.assign(this._props, this.filterProps(props));
       if (this._deck && this._map) {
         this._deck.setProps({
           ...this._props,
@@ -102334,7 +102366,11 @@ void main() {
         gl,
         deck: new Deck({
           ...this._props,
-          gl
+          gl,
+          parameters: { ...getDefaultParameters(map6, false), ...this._props.parameters },
+          deviceProps: {
+            createCanvasContext: { autoResize: true }
+          }
         })
       });
       map6.on("styledata", this._handleStyleChange);
@@ -102741,21 +102777,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" })
       }
     );
   };
@@ -102766,10 +102802,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;
@@ -102808,7 +102842,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);
     }
@@ -102836,12 +102872,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",
       {
@@ -102860,10 +102896,11 @@ 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) {
@@ -102884,9 +102921,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()
@@ -102901,95 +102938,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))"
-              }
-            )
-          ] }) })
-        }
-      ) });
-      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
+    viewId: null
   };
 
   // ../widgets/src/gimbal-widget.tsx
@@ -102998,7 +102947,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) {
@@ -103007,13 +102956,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 },
@@ -103076,10 +103029,11 @@ void main() {
       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 = {
@@ -103094,8 +103048,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);
@@ -103108,8 +103062,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) {
@@ -103130,7 +103084,7 @@ void main() {
     ...Widget.defaultProps,
     id: "gimbal",
     placement: "top-left",
-    viewId: void 0,
+    viewId: null,
     label: "Gimbal",
     strokeWidth: 1.5,
     transitionDuration: 200
@@ -103149,6 +103103,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 = {}) {
@@ -103161,10 +103202,11 @@ 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) {
@@ -103255,7 +103297,7 @@ void main() {
     id: "scale",
     placement: "bottom-left",
     label: "Scale",
-    onCapture: void 0
+    viewId: null
   };
   function getMetersPerPixel(latitude, zoom) {
     const earthCircumference = 40075016686e-3;
@@ -103749,17 +103791,16 @@ 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];
@@ -103834,7 +103875,7 @@ void main() {
   GeocoderWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "geocoder",
-    viewId: void 0,
+    viewId: null,
     placement: "top-left",
     label: "Geocoder",
     transitionDuration: 200,
@@ -103870,7 +103911,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));
@@ -103883,7 +103924,9 @@ void main() {
         /* @__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"
           }
@@ -103893,6 +103936,7 @@ void main() {
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     getContainer() {
@@ -103938,322 +103982,318 @@ 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) {
+      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) {
       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,
+        /* @__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"
+    viewId: null,
+    label: "Split View",
+    initialViewMode: "single",
+    onViewModeChange: () => {
+    }
+  };
+  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/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;
+  // ../widgets/src/info-widget.tsx
+  var _InfoWidget = class extends Widget {
+    constructor(props) {
+      super(props, _InfoWidget.defaultProps);
+      this.className = "deck-widget-info";
+      this.placement = "fill";
+      this.setProps(this.props);
     }
     setProps(props) {
-      if (props.placement) {
-        this.placement = props.placement;
-      }
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
-    onAdd({}) {
-      this._lastFps = this._getFps();
-      this.updateHTML();
+    onCreateRootElement() {
+      const element = super.onCreateRootElement();
+      const style = { margin: "0px", top: "0px", left: "0px", position: "absolute" };
+      Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
+      return element;
     }
-    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);
-    }
-  };
-  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;
-      B3(
-        /* @__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"
-  };
-
-  // ../widgets/src/info-widget.tsx
-  var _InfoWidget = class extends Widget {
-    constructor(props) {
-      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;
-    }
-    setProps(props) {
-      super.setProps(props);
-    }
-    onCreateRootElement() {
-      const element = super.onCreateRootElement();
-      const style = { margin: "0px", top: "0px", left: "0px", position: "absolute" };
-      Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
-      return element;
-    }
-    onViewportChange(viewport) {
-      this.viewport = viewport;
-      this.updateHTML();
+    onViewportChange(viewport) {
+      this.viewport = viewport;
+      this.updateHTML();
     }
     onHover(info) {
       if (this.props.mode === "hover" && this.props.getTooltip) {
@@ -104261,7 +104301,7 @@ ${fps}`;
         this.setProps({
           visible: tooltip !== null,
           ...tooltip,
-          style: { zIndex: 1, ...tooltip?.style }
+          style: { zIndex: "1", ...tooltip?.style }
         });
       }
     }
@@ -104374,10 +104414,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",
@@ -104385,136 +104425,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}`)
-            );
-          });
-        });
-      }
-      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 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",
@@ -104523,7 +104433,7 @@ ${fps}`;
     background: "white",
     border: "1px solid #ccc",
     borderRadius: "4px",
-    marginTop: "4px",
+    marginTop: "var(--menu-gap, 4px)",
     zIndex: 100
   };
   var MENU_ITEM_STYLE = {
@@ -104562,7 +104472,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");
@@ -104628,131 +104538,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";
-      B3(
-        /* @__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 = 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/timeline-widget.tsx
   var _TimelineWidget = class extends Widget {
     constructor(props = {}) {
@@ -104790,9 +104575,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() {
@@ -104805,16 +104592,7 @@ ${fps}`;
     onRenderHTML(rootElement) {
       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",
             {
@@ -104850,6 +104628,7 @@ ${fps}`;
     ...Widget.defaultProps,
     id: "timeline",
     placement: "bottom-left",
+    viewId: null,
     timeRange: [0, 100],
     step: 1,
     initialTime: void 0,
@@ -104858,123 +104637,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 = 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: /* @__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) {
+      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",
+    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);