@deck.gl/widgets 9.2.0-beta.2 → 9.2.0-beta.4

package/dist/index.cjs

@@ -63,15 +63,15 @@ var import_preact = require("preact");
 // dist/lib/components/button-group.js
 var import_jsx_runtime = require("preact/jsx-runtime");
 var ButtonGroup = (props) => {
-  const { children, orientation } = props;
+  const { children, orientation = "horizontal" } = props;
   return (0, import_jsx_runtime.jsx)("div", { className: `deck-widget-button-group ${orientation}`, children });
 };
 
 // dist/lib/components/grouped-icon-button.js
 var import_jsx_runtime2 = require("preact/jsx-runtime");
 var GroupedIconButton = (props) => {
-  const { className, label, onClick } = props;
-  return (0, import_jsx_runtime2.jsx)("button", { className: `deck-widget-icon-button ${className || ""}`, type: "button", onClick, title: label, children: (0, import_jsx_runtime2.jsx)("div", { className: "deck-widget-icon" }) });
+  const { className = "", label, onClick, children } = props;
+  return (0, import_jsx_runtime2.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, title: label, children: children ? children : (0, import_jsx_runtime2.jsx)("div", { className: "deck-widget-icon" }) });
 };
 
 // dist/zoom-widget.js
@@ -80,10 +80,8 @@ var ZoomWidget = class extends import_core.Widget {
     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;
@@ -105,7 +103,9 @@ var ZoomWidget = class extends import_core.Widget {
     };
     if (this.props.transitionDuration > 0) {
       nextViewState.transitionDuration = this.props.transitionDuration;
-      nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core.FlyToInterpolator() : new import_core.LinearInterpolator();
+      nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core.FlyToInterpolator() : new import_core.LinearInterpolator({
+        transitionProps: ["zoom"]
+      });
     }
     this.setViewState(viewId, nextViewState);
   }
@@ -132,7 +132,7 @@ ZoomWidget.defaultProps = {
   transitionDuration: 200,
   zoomInLabel: "Zoom In",
   zoomOutLabel: "Zoom Out",
-  viewId: void 0
+  viewId: null
 };
 
 // dist/reset-view-widget.js
@@ -143,7 +143,7 @@ var import_core2 = require("@deck.gl/core");
 // dist/lib/components/icon-button.js
 var import_jsx_runtime4 = require("preact/jsx-runtime");
 var IconButton = (props) => {
-  const { className, label, onClick, children } = props;
+  const { className = "", label, onClick, children } = props;
   return (0, import_jsx_runtime4.jsx)("div", { className: "deck-widget-button", children: (0, import_jsx_runtime4.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, title: label, children: children ? children : (0, import_jsx_runtime4.jsx)("div", { className: "deck-widget-icon" }) }) });
 };
 
@@ -153,10 +153,11 @@ var ResetViewWidget = class extends import_core2.Widget {
     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) {
@@ -168,9 +169,9 @@ var ResetViewWidget = class extends import_core2.Widget {
     this.setViewState(initialViewState);
   }
   setViewState(viewState) {
-    const viewId = this.props.viewId || (viewState == null ? void 0 : viewState.id) || "default-view";
+    const viewId = this.props.viewId || "default-view";
     const nextViewState = {
-      ...viewState
+      ...viewId !== "default-view" ? viewState == null ? void 0 : viewState[viewId] : viewState
       // only works for geospatial?
       // transitionDuration: this.props.transitionDuration,
       // transitionInterpolator: new FlyToInterpolator()
@@ -184,19 +185,18 @@ ResetViewWidget.defaultProps = {
   placement: "top-left",
   label: "Reset View",
   initialViewState: void 0,
-  viewId: void 0
+  viewId: null
 };
 
-// dist/compass-widget.js
+// dist/gimbal-widget.js
 var import_jsx_runtime6 = require("preact/jsx-runtime");
 var import_core3 = require("@deck.gl/core");
 var import_preact3 = require("preact");
-var CompassWidget = class extends import_core3.Widget {
+var GimbalWidget = class extends import_core3.Widget {
   constructor(props = {}) {
-    super(props, CompassWidget.defaultProps);
-    this.className = "deck-widget-compass";
+    super(props, GimbalWidget.defaultProps);
+    this.className = "deck-widget-gimbal";
     this.placement = "top-left";
-    this.viewId = null;
     this.viewports = {};
     this.setProps(this.props);
   }
@@ -209,90 +209,30 @@ var CompassWidget = class extends import_core3.Widget {
     var _a;
     const viewId = this.viewId || ((_a = Object.values(this.viewports)[0]) == null ? void 0 : _a.id) || "default-view";
     const widgetViewport = this.viewports[viewId];
-    const [rz, rx] = this.getRotation(widgetViewport);
-    const ui = (0, import_jsx_runtime6.jsx)("div", { className: "deck-widget-button", style: { perspective: 100 }, children: (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: () => {
+    const { rotationOrbit, rotationX } = this.getNormalizedRotation(widgetViewport);
+    const ui = (0, import_jsx_runtime6.jsx)("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: (0, import_jsx_runtime6.jsxs)("button", { type: "button", onClick: () => {
       for (const viewport of Object.values(this.viewports)) {
-        this.handleCompassReset(viewport);
+        this.resetOrbitView(viewport);
       }
-    }, title: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: (0, import_jsx_runtime6.jsx)("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: (0, import_jsx_runtime6.jsxs)("g", { transform: `rotate(${rz},13,13)`, children: [(0, import_jsx_runtime6.jsx)("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, rgb(240, 92, 68))" }), (0, import_jsx_runtime6.jsx)("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, rgb(204, 204, 204))" })] }) }) }) });
-    (0, import_preact3.render)(ui, rootElement);
-  }
-  onViewportChange(viewport) {
-    if (!viewport.equals(this.viewports[viewport.id])) {
-      this.viewports[viewport.id] = viewport;
-      this.updateHTML();
-    }
-  }
-  getRotation(viewport) {
-    if (viewport instanceof import_core3.WebMercatorViewport) {
-      return [-viewport.bearing, viewport.pitch];
-    } else if (viewport instanceof import_core3._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 import_core3.WebMercatorViewport) {
-      const nextViewState = {
-        ...viewport,
-        bearing: 0,
-        ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
-        transitionDuration: this.props.transitionDuration,
-        transitionInterpolator: new import_core3.FlyToInterpolator()
-      };
-      this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
-    }
-  }
-};
-CompassWidget.defaultProps = {
-  ...import_core3.Widget.defaultProps,
-  id: "compass",
-  placement: "top-left",
-  viewId: null,
-  label: "Reset Compass",
-  transitionDuration: 200
-};
-
-// dist/gimbal-widget.js
-var import_jsx_runtime7 = require("preact/jsx-runtime");
-var import_core4 = require("@deck.gl/core");
-var import_preact4 = require("preact");
-var GimbalWidget = class extends import_core4.Widget {
-  constructor(props = {}) {
-    super(props, GimbalWidget.defaultProps);
-    this.className = "deck-widget-gimbal";
-    this.placement = "top-left";
-    this.viewId = null;
-    this.setProps(this.props);
-  }
-  setProps(props) {
-    this.placement = props.placement ?? this.placement;
-    this.viewId = props.viewId ?? this.viewId;
-    super.setProps(props);
-  }
-  onRenderHTML(rootElement) {
-    const { rotationOrbit, rotationX } = this.getNormalizedRotation();
-    const ui = (0, import_jsx_runtime7.jsx)("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick: () => {
-      this.resetOrbitView();
-    }, title: this.props.label, style: { position: "relative", width: 26, height: 26 }, children: [(0, import_jsx_runtime7.jsx)("svg", { className: "gimbal-outer-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
+    }, title: this.props.label, style: { position: "relative", width: 26, height: 26 }, children: [(0, import_jsx_runtime6.jsx)("svg", { className: "gimbal-outer-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
       position: "absolute",
       top: 0,
       left: 0,
       transform: `rotateY(${rotationOrbit}deg)`
-    }, children: (0, import_jsx_runtime7.jsx)("circle", { cx: "13", cy: "13", r: "10", stroke: "var(--icon-gimbal-outer-color, rgb(68, 92, 204))", strokeWidth: this.props.strokeWidth, fill: "none" }) }), (0, import_jsx_runtime7.jsx)("svg", { className: "gimbal-inner-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
+    }, children: (0, import_jsx_runtime6.jsx)("circle", { cx: "13", cy: "13", r: "10", stroke: "var(--icon-gimbal-outer-color, rgb(68, 92, 204))", strokeWidth: this.props.strokeWidth, fill: "none" }) }), (0, import_jsx_runtime6.jsx)("svg", { className: "gimbal-inner-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
       position: "absolute",
       top: 0,
       left: 0,
       transform: `rotateX(${rotationX}deg)`
-    }, children: (0, import_jsx_runtime7.jsx)("circle", { cx: "13", cy: "13", r: "7", stroke: "var(--icon-gimbal-inner-color, rgb(240, 92, 68))", strokeWidth: this.props.strokeWidth, fill: "none" }) })] }) });
-    (0, import_preact4.render)(ui, rootElement);
+    }, children: (0, import_jsx_runtime6.jsx)("circle", { cx: "13", cy: "13", r: "7", stroke: "var(--icon-gimbal-inner-color, rgb(240, 92, 68))", strokeWidth: this.props.strokeWidth, fill: "none" }) })] }) });
+    (0, import_preact3.render)(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 = {
@@ -300,15 +240,15 @@ var GimbalWidget = class extends import_core4.Widget {
         rotationOrbit: 0,
         rotationX: 0,
         transitionDuration: this.props.transitionDuration,
-        transitionInterpolator: new import_core4.LinearInterpolator({
+        transitionInterpolator: new import_core3.LinearInterpolator({
           transitionProps: ["rotationOrbit", "rotationX"]
         })
       };
       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);
@@ -321,8 +261,8 @@ var GimbalWidget = class extends import_core4.Widget {
     return [0, 0];
   }
   // Move to Widget/WidgetManager?
-  getViewId() {
-    const viewId = this.viewId || "OrbitView";
+  getViewId(viewport) {
+    const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "OrbitView";
     return viewId;
   }
   getViewState(viewId) {
@@ -340,10 +280,10 @@ var GimbalWidget = class extends import_core4.Widget {
   }
 };
 GimbalWidget.defaultProps = {
-  ...import_core4.Widget.defaultProps,
+  ...import_core3.Widget.defaultProps,
   id: "gimbal",
   placement: "top-left",
-  viewId: void 0,
+  viewId: null,
   label: "Gimbal",
   strokeWidth: 1.5,
   transitionDuration: 200
@@ -362,6 +302,72 @@ function normalizeAndClampAngle(angle) {
   return normalized;
 }
 
+// dist/compass-widget.js
+var import_jsx_runtime7 = require("preact/jsx-runtime");
+var import_core4 = require("@deck.gl/core");
+var import_preact4 = require("preact");
+var CompassWidget = class extends import_core4.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) {
+    var _a;
+    const viewId = this.viewId || ((_a = Object.values(this.viewports)[0]) == null ? void 0 : _a.id) || "default-view";
+    const widgetViewport = this.viewports[viewId];
+    const [rz, rx] = this.getRotation(widgetViewport);
+    const ui = (0, import_jsx_runtime7.jsx)("div", { className: "deck-widget-button", style: { perspective: 100 }, children: (0, import_jsx_runtime7.jsx)("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: (0, import_jsx_runtime7.jsx)("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: (0, import_jsx_runtime7.jsxs)("g", { transform: `rotate(${rz},13,13)`, children: [(0, import_jsx_runtime7.jsx)("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, rgb(240, 92, 68))" }), (0, import_jsx_runtime7.jsx)("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, rgb(204, 204, 204))" })] }) }) }) });
+    (0, import_preact4.render)(ui, rootElement);
+  }
+  onViewportChange(viewport) {
+    if (!viewport.equals(this.viewports[viewport.id])) {
+      this.viewports[viewport.id] = viewport;
+      this.updateHTML();
+    }
+  }
+  getRotation(viewport) {
+    if (viewport instanceof import_core4.WebMercatorViewport) {
+      return [-viewport.bearing, viewport.pitch];
+    } else if (viewport instanceof import_core4._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 import_core4.WebMercatorViewport) {
+      const nextViewState = {
+        ...viewport,
+        bearing: 0,
+        ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
+        transitionDuration: this.props.transitionDuration,
+        transitionInterpolator: new import_core4.FlyToInterpolator()
+      };
+      this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+    }
+  }
+};
+CompassWidget.defaultProps = {
+  ...import_core4.Widget.defaultProps,
+  id: "compass",
+  placement: "top-left",
+  viewId: null,
+  label: "Reset Compass",
+  transitionDuration: 200
+};
+
 // dist/scale-widget.js
 var import_jsx_runtime8 = require("preact/jsx-runtime");
 var import_preact5 = require("preact");
@@ -374,10 +380,11 @@ var ScaleWidget = class extends import_core5.Widget {
     this.scaleWidth = 10;
     this.scaleValue = 0;
     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) {
@@ -409,7 +416,7 @@ ScaleWidget.defaultProps = {
   id: "scale",
   placement: "bottom-left",
   label: "Scale",
-  onCapture: void 0
+  viewId: null
 };
 function getMetersPerPixel(latitude, zoom) {
   const earthCircumference = 40075016686e-3;
@@ -730,17 +737,16 @@ var GeocoderWidget = class extends import_core6.Widget {
       }
     };
     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];
@@ -794,7 +800,7 @@ var GeocoderWidget = class extends import_core6.Widget {
 GeocoderWidget.defaultProps = {
   ...import_core6.Widget.defaultProps,
   id: "geocoder",
-  viewId: void 0,
+  viewId: null,
   placement: "top-left",
   label: "Geocoder",
   transitionDuration: 200,
@@ -833,7 +839,7 @@ var FullscreenWidget = class extends import_core8.Widget {
     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));
@@ -842,10 +848,13 @@ var FullscreenWidget = class extends import_core8.Widget {
     document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
   }
   onRenderHTML(rootElement) {
-    (0, import_preact7.render)((0, import_jsx_runtime11.jsx)(IconButton, { onClick: this.handleClick.bind(this), label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel, className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
+    (0, import_preact7.render)((0, import_jsx_runtime11.jsx)(IconButton, { onClick: () => {
+      this.handleClick().catch((err) => import_core8.log.error(err)());
+    }, label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel, className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
   }
   setProps(props) {
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
   getContainer() {
@@ -892,298 +901,212 @@ FullscreenWidget.defaultProps = {
   ...import_core8.Widget.defaultProps,
   id: "fullscreen",
   placement: "top-left",
+  viewId: null,
   enterLabel: "Enter Fullscreen",
   exitLabel: "Exit Fullscreen",
   container: void 0
 };
 
-// dist/screenshot-widget.js
+// dist/splitter-widget.js
 var import_jsx_runtime12 = require("preact/jsx-runtime");
 var import_preact8 = require("preact");
+var import_hooks2 = require("preact/hooks");
 var import_core9 = require("@deck.gl/core");
-var ScreenshotWidget = class extends import_core9.Widget {
-  constructor(props = {}) {
-    super(props, ScreenshotWidget.defaultProps);
-    this.className = "deck-widget-screenshot";
-    this.placement = "top-left";
-    this.placement = props.placement ?? this.placement;
+var SplitterWidget = class extends import_core9.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) {
-    (0, import_preact8.render)((0, import_jsx_runtime12.jsx)(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) {
-    var _a;
-    const canvas = (_a = this.deck) == null ? void 0 : _a.getCanvas();
-    return canvas == null ? void 0 : canvas.toDataURL(imageFormat);
-  }
-  /** Download a data URL */
-  downloadDataURL(dataURL, filename) {
-    const link = document.createElement("a");
-    link.href = dataURL;
-    link.download = filename;
-    link.click();
+    rootElement.style.position = "absolute";
+    rootElement.style.top = "0";
+    rootElement.style.left = "0";
+    rootElement.style.width = "100%";
+    rootElement.style.height = "100%";
+    rootElement.style.margin = "0px";
+    (0, import_preact8.render)((0, import_jsx_runtime12.jsx)(Splitter, { orientation: this.props.orientation, initialSplit: this.props.initialSplit, onChange: this.props.onChange, onDragStart: this.props.onDragStart, onDragEnd: this.props.onDragEnd }), rootElement);
   }
 };
-ScreenshotWidget.defaultProps = {
+SplitterWidget.defaultProps = {
   ...import_core9.Widget.defaultProps,
-  id: "screenshot",
-  placement: "top-left",
-  label: "Screenshot",
-  filename: "screenshot.png",
-  imageFormat: "image/png",
-  onCapture: void 0
-};
-
-// dist/loading-widget.js
-var import_jsx_runtime13 = require("preact/jsx-runtime");
-var import_preact9 = require("preact");
-var import_core10 = require("@deck.gl/core");
-var LoadingWidget = class extends import_core10.Widget {
-  constructor(props = {}) {
-    super(props, LoadingWidget.defaultProps);
-    this.className = "deck-widget-loading";
-    this.placement = "top-left";
-    this.loading = true;
-    this.placement = props.placement ?? this.placement;
-  }
-  setProps(props) {
-    this.placement = props.placement ?? this.placement;
-    super.setProps(props);
-  }
-  onRenderHTML(rootElement) {
-    (0, import_preact9.render)(
-      // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
-      this.loading && (0, import_jsx_runtime13.jsx)(IconButton, { className: "deck-widget-spinner-icon", 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() {
+  id: "splitter-widget",
+  viewId1: "",
+  viewId2: "",
+  orientation: "vertical",
+  initialSplit: 0.5,
+  onChange: () => {
+  },
+  onDragStart: () => {
+  },
+  onDragEnd: () => {
   }
 };
-LoadingWidget.defaultProps = {
-  ...import_core10.Widget.defaultProps,
-  id: "loading",
-  placement: "top-left",
-  label: "Loading layer data"
-};
-
-// dist/fps-widget.js
-var import_core11 = require("@deck.gl/core");
-var FpsWidget = class extends import_core11.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();
+function Splitter({ orientation, initialSplit, onChange, onDragStart, onDragEnd }) {
+  const [split, setSplit] = (0, import_hooks2.useState)(initialSplit);
+  const dragging = (0, import_hooks2.useRef)(false);
+  const containerRef = (0, import_hooks2.useRef)(null);
+  const handleDragStart = (event) => {
+    dragging.current = true;
+    onDragStart == null ? void 0 : 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;
     }
-  }
-  _getFps() {
-    return Math.round(this.deck.metrics.fps ?? 0);
-  }
-};
-FpsWidget.defaultProps = {
-  ...import_core11.Widget.defaultProps,
-  id: "fps",
-  placement: "top-left"
-};
+    newSplit = Math.min(Math.max(newSplit, 0.05), 0.95);
+    setSplit(newSplit);
+    onChange == null ? void 0 : onChange(newSplit);
+  };
+  const handleDragEnd = (event) => {
+    if (!dragging.current)
+      return;
+    dragging.current = false;
+    onDragEnd == null ? void 0 : 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 (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: containerStyle, children: (0, import_jsx_runtime12.jsx)("div", { style: splitterStyle, onMouseDown: handleDragStart }) });
+}
 
-// dist/theme-widget.js
+// dist/view-selector-widget.js
 var import_jsx_runtime14 = require("preact/jsx-runtime");
-var import_core12 = require("@deck.gl/core");
-var import_core13 = require("@deck.gl/core");
-var import_preact10 = require("preact");
+var import_preact9 = require("preact");
+var import_core10 = require("@deck.gl/core");
 
-// dist/themes.js
-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)"
-};
+// dist/lib/components/icon-menu.js
+var import_jsx_runtime13 = require("preact/jsx-runtime");
+var import_hooks3 = require("preact/hooks");
+function IconMenu(props) {
+  const [menuOpen, setMenuOpen] = (0, import_hooks3.useState)(false);
+  const containerRef = (0, import_hooks3.useRef)(null);
+  const handleClickOutside = (event) => {
+    if (containerRef.current && !containerRef.current.contains(event.target)) {
+      setMenuOpen(false);
+    }
+  };
+  (0, import_hooks3.useEffect)(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [containerRef]);
+  const [selectedItem, setSelectedItem] = (0, import_hooks3.useState)(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 == null ? void 0 : selectedMenuItem.label) || "";
+  const icon = props.icon || (selectedMenuItem == null ? void 0 : selectedMenuItem.icon);
+  return (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [(0, import_jsx_runtime13.jsx)(IconButton, { className: props.className, label, onClick: handleButtonClick, children: icon }), menuOpen && (0, import_jsx_runtime13.jsx)("div", { className: "deck-widget-icon-menu", children: (0, import_jsx_runtime13.jsx)(ButtonGroup, { orientation: "vertical", children: props.menuItems.map((item) => (0, import_jsx_runtime13.jsx)(GroupedIconButton, { label: item.label, onClick: () => handleSelectItem(item.value), children: item.icon }, item.value)) }) })] });
+}
 
-// dist/theme-widget.js
-var ThemeWidget = class extends import_core13.Widget {
+// dist/view-selector-widget.js
+var ViewSelectorWidget = class extends import_core10.Widget {
   constructor(props = {}) {
-    super(props, ThemeWidget.defaultProps);
-    this.className = "deck-widget-theme";
+    super(props, ViewSelectorWidget.defaultProps);
+    this.className = "deck-widget-view-selector";
     this.placement = "top-left";
-    this.themeMode = "dark";
-    this.placement = props.placement ?? this.placement;
-    this.themeMode = this._getInitialThemeMode();
+    this.handleSelectMode = (viewMode) => {
+      this.viewMode = viewMode;
+      this.updateHTML();
+      this.props.onViewModeChange(viewMode);
+    };
+    this.viewMode = this.props.initialViewMode;
+    this.setProps(this.props);
   }
-  // eslint-disable-next-line complexity
   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 && !(0, import_core12._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
-          this._setThemeMode("light");
-        }
-        break;
-      case "dark":
-        if (props.darkModeTheme && !(0, import_core12._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
-          this._setThemeMode("dark");
-        }
-        break;
-    }
   }
   onRenderHTML(rootElement) {
-    const { lightModeLabel, darkModeLabel } = this.props;
-    (0, import_preact10.render)((0, import_jsx_runtime14.jsx)(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) {
-    var _a;
-    this.themeMode = themeMode;
-    const container = (_a = this.rootElement) == null ? void 0 : _a.closest(".deck-widget-container");
-    if (container) {
-      const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
-      (0, import_core12._applyStyles)(container, themeStyle);
-      const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-      import_core12.log.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;
+    (0, import_preact9.render)((0, import_jsx_runtime14.jsx)(IconMenu, { className: "deck-widget-view-selector", menuItems: MENU_ITEMS.map((item) => ({
+      ...item,
+      icon: item.icon()
+    })), initialItem: this.props.initialViewMode, onItemSelected: this.handleSelectMode }), rootElement);
   }
 };
-ThemeWidget.defaultProps = {
-  ...import_core13.Widget.defaultProps,
-  id: "theme",
+ViewSelectorWidget.defaultProps = {
+  ...import_core10.Widget.defaultProps,
+  id: "view-selector",
   placement: "top-left",
-  lightModeLabel: "Light Mode",
-  lightModeTheme: LightGlassTheme,
-  darkModeLabel: "Dark Mode",
-  darkModeTheme: DarkGlassTheme,
-  initialThemeMode: "auto"
+  viewId: null,
+  label: "Split View",
+  initialViewMode: "single",
+  onViewModeChange: () => {
+  }
+};
+var ICON_STYLE = { width: "24px", height: "24px" };
+var ICONS = {
+  single: () => (0, import_jsx_runtime14.jsx)("svg", { width: "24", height: "24", style: ICON_STYLE, children: (0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }) }),
+  "split-horizontal": () => (0, import_jsx_runtime14.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "4", width: "16", height: "7", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }), (0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "13", width: "16", height: "7", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" })] }),
+  "split-vertical": () => (0, import_jsx_runtime14.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "4", width: "7", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }), (0, import_jsx_runtime14.jsx)("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" }
+];
 
 // dist/info-widget.js
 var import_jsx_runtime15 = require("preact/jsx-runtime");
-var import_core14 = require("@deck.gl/core");
-var import_preact11 = require("preact");
-var InfoWidget = class extends import_core14.Widget {
+var import_core11 = require("@deck.gl/core");
+var import_preact10 = require("preact");
+var InfoWidget = class extends import_core11.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;
+    this.setProps(this.props);
   }
   setProps(props) {
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
   onCreateRootElement() {
@@ -1202,7 +1125,7 @@ var InfoWidget = class extends import_core14.Widget {
       this.setProps({
         visible: tooltip !== null,
         ...tooltip,
-        style: { zIndex: 1, ...tooltip == null ? void 0 : tooltip.style }
+        style: { zIndex: "1", ...tooltip == null ? void 0 : tooltip.style }
       });
     }
   }
@@ -1245,7 +1168,7 @@ var InfoWidget = class extends import_core14.Widget {
       // Include any additional styles
       ...this.props.style
     }, children: this.props.text }), (0, import_jsx_runtime15.jsx)("div", { className: "popup-arrow", style: { position: "absolute", width: "0px", height: "0px" } })] }) : null;
-    (0, import_preact11.render)(ui, rootElement);
+    (0, import_preact10.render)(ui, rootElement);
     requestAnimationFrame(() => {
       if (!this.props.visible || !rootElement.firstChild || !this.viewport)
         return;
@@ -1304,11 +1227,11 @@ var InfoWidget = class extends import_core14.Widget {
   }
 };
 InfoWidget.defaultProps = {
-  ...import_core14.Widget.defaultProps,
+  ...import_core11.Widget.defaultProps,
+  id: "info",
   position: [0, 0],
   text: "",
   visible: false,
-  // Set default minOffset if not provided
   minOffset: 0,
   viewId: null,
   mode: "hover",
@@ -1316,126 +1239,13 @@ InfoWidget.defaultProps = {
   onClick: void 0
 };
 
-// dist/stats-widget.js
-var import_jsx_runtime16 = require("preact/jsx-runtime");
-var import_core15 = require("@deck.gl/core");
-var import_core16 = require("@luma.gl/core");
-var import_preact12 = require("preact");
-var RIGHT_ARROW = "\u25B6";
-var DOWN_ARROW = "\u2B07";
-var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
-function formatTime(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}: ${formatTime(stat.getAverageTime())}`,
-  totalTime: (stat) => `${stat.name}: ${formatTime(stat.time)}`,
-  fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
-  memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
-};
-var StatsWidget = class extends import_core15.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 name in props.formatters) {
-        const f = props.formatters[name];
-        this._formatters[name] = typeof f === "string" ? DEFAULT_FORMATTERS[f] || DEFAULT_COUNT_FORMATTER : f;
-      }
-    }
-    if (props.resetOnUpdate) {
-      this._resetOnUpdate = { ...props.resetOnUpdate };
-    }
-  }
-  onAdd() {
-    this._stats = this._getStats();
-    this.updateHTML();
-  }
-  onRenderHTML(rootElement) {
-    const stats = this._stats;
-    const collapsed = this.collapsed;
-    const title = this.props.title || (stats == null ? void 0 : stats.id) || "Stats";
-    const items = [];
-    if (!collapsed && stats) {
-      stats.forEach((stat) => {
-        const lines = this._getLines(stat);
-        if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
-          stat.reset();
-        }
-        lines.forEach((line, i) => {
-          items.push((0, import_jsx_runtime16.jsx)("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i}`));
-        });
-      });
-    }
-    (0, import_preact12.render)((0, import_jsx_runtime16.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime16.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleCollapsed, children: [collapsed ? RIGHT_ARROW : DOWN_ARROW, " ", title] }), !collapsed && (0, import_jsx_runtime16.jsx)("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() {
-    var _a, _b;
-    switch (this.props.type) {
-      case "deck":
-        return (_a = this.deck) == null ? void 0 : _a.stats;
-      case "luma":
-        return Array.from(import_core16.luma.stats.stats.values())[0];
-      case "device":
-        const device = (_b = this.deck) == null ? void 0 : _b.device;
-        const stats = device == null ? void 0 : device.statsManager.stats.values();
-        return stats ? Array.from(stats)[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");
-  }
-};
-StatsWidget.defaultProps = {
-  ...import_core15.Widget.defaultProps,
-  type: "deck",
-  stats: void 0,
-  title: "Stats",
-  framesPerUpdate: 1,
-  formatters: {},
-  resetOnUpdate: {},
-  id: "stats"
-};
-
 // dist/context-menu-widget.js
-var import_jsx_runtime18 = require("preact/jsx-runtime");
-var import_core17 = require("@deck.gl/core");
-var import_preact13 = require("preact");
+var import_jsx_runtime17 = require("preact/jsx-runtime");
+var import_core12 = require("@deck.gl/core");
+var import_preact11 = require("preact");
 
 // dist/lib/components/simple-menu.js
-var import_jsx_runtime17 = require("preact/jsx-runtime");
+var import_jsx_runtime16 = require("preact/jsx-runtime");
 var MENU_STYLE = {
   position: "absolute",
   top: "100%",
@@ -1443,7 +1253,7 @@ var MENU_STYLE = {
   background: "white",
   border: "1px solid #ccc",
   borderRadius: "4px",
-  marginTop: "4px",
+  marginTop: "var(--menu-gap, 4px)",
   zIndex: 100
 };
 var MENU_ITEM_STYLE = {
@@ -1461,20 +1271,20 @@ var SimpleMenu = (props) => {
     left: `${position.x}px`,
     top: `${position.y}px`
   };
-  return (0, import_jsx_runtime17.jsx)("div", { style: styleOverride, children: menuItems.map(({ key, label }) => (0, import_jsx_runtime17.jsx)("button", { style: { ...MENU_ITEM_STYLE, display: "block" }, onClick: (_) => onItemSelected(key), children: label }, key)) });
+  return (0, import_jsx_runtime16.jsx)("div", { style: styleOverride, children: menuItems.map(({ key, label }) => (0, import_jsx_runtime16.jsx)("button", { style: { ...MENU_ITEM_STYLE, display: "block" }, onClick: (_) => onItemSelected(key), children: label }, key)) });
 };
 
 // dist/context-menu-widget.js
 var MOUSE_BUTTON_RIGHT = 2;
 var MOUSE_WHICH_RIGHT = 3;
-var ContextMenuWidget = class extends import_core17.Widget {
+var ContextMenuWidget = class extends import_core12.Widget {
   constructor(props) {
     super(props, ContextMenuWidget.defaultProps);
     this.className = "deck-widget-context-menu";
     this.placement = "fill";
     this.pickInfo = null;
     this.pickInfo = null;
-    this.setProps(props);
+    this.setProps(this.props);
   }
   onAdd({ deck }) {
     var _a, _b;
@@ -1494,8 +1304,8 @@ var ContextMenuWidget = class extends import_core17.Widget {
   }
   onRenderHTML(rootElement) {
     const { visible, position, menuItems } = this.props;
-    const ui = visible && menuItems.length ? (0, import_jsx_runtime18.jsx)(SimpleMenu, { menuItems, onItemSelected: (key) => this.props.onMenuItemSelected(key, this.pickInfo), position, style: { pointerEvents: "auto" } }) : null;
-    (0, import_preact13.render)(ui, rootElement);
+    const ui = visible && menuItems.length ? (0, import_jsx_runtime17.jsx)(SimpleMenu, { menuItems, onItemSelected: (key) => this.props.onMenuItemSelected(key, this.pickInfo), position, style: { pointerEvents: "auto" } }) : null;
+    (0, import_preact11.render)(ui, rootElement);
   }
   handleContextMenu(srcEvent) {
     var _a, _b, _c;
@@ -1522,7 +1332,7 @@ var ContextMenuWidget = class extends import_core17.Widget {
   }
 };
 ContextMenuWidget.defaultProps = {
-  ...import_core17.Widget.defaultProps,
+  ...import_core12.Widget.defaultProps,
   id: "context",
   viewId: null,
   visible: false,
@@ -1533,115 +1343,11 @@ ContextMenuWidget.defaultProps = {
   onMenuItemSelected: (key, pickInfo) => console.log("Context menu item selected:", key, pickInfo)
 };
 
-// dist/splitter-widget.js
-var import_jsx_runtime19 = require("preact/jsx-runtime");
-var import_preact14 = require("preact");
-var import_hooks2 = require("preact/hooks");
-var import_core18 = require("@deck.gl/core");
-var SplitterWidget = class extends import_core18.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";
-    (0, import_preact14.render)((0, import_jsx_runtime19.jsx)(Splitter, { orientation: this.props.orientation, initialSplit: this.props.initialSplit, onChange: this.props.onChange, onDragStart: this.props.onDragStart, onDragEnd: this.props.onDragEnd }), rootElement);
-  }
-};
-SplitterWidget.defaultProps = {
-  ...import_core18.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] = (0, import_hooks2.useState)(initialSplit);
-  const dragging = (0, import_hooks2.useRef)(false);
-  const containerRef = (0, import_hooks2.useRef)(null);
-  const handleDragStart = (event) => {
-    dragging.current = true;
-    onDragStart == null ? void 0 : 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 == null ? void 0 : onChange(newSplit);
-  };
-  const handleDragEnd = (event) => {
-    if (!dragging.current)
-      return;
-    dragging.current = false;
-    onDragEnd == null ? void 0 : 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 (0, import_jsx_runtime19.jsx)("div", { ref: containerRef, style: containerStyle, children: (0, import_jsx_runtime19.jsx)("div", { style: splitterStyle, onMouseDown: handleDragStart }) });
-}
-
 // dist/timeline-widget.js
-var import_jsx_runtime20 = require("preact/jsx-runtime");
-var import_core19 = require("@deck.gl/core");
-var import_preact15 = require("preact");
-var TimelineWidget = class extends import_core19.Widget {
+var import_jsx_runtime18 = require("preact/jsx-runtime");
+var import_core13 = require("@deck.gl/core");
+var import_preact12 = require("preact");
+var TimelineWidget = class extends import_core13.Widget {
   constructor(props = {}) {
     super(props, TimelineWidget.defaultProps);
     this.id = "timeline";
@@ -1677,9 +1383,11 @@ var TimelineWidget = class extends import_core19.Widget {
       }
     };
     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() {
@@ -1690,7 +1398,7 @@ var TimelineWidget = class extends import_core19.Widget {
     this.stop();
   }
   onRenderHTML(rootElement) {
-    (0, import_preact15.render)((0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [(0, import_jsx_runtime20.jsx)("button", { type: "button", className: "timeline-play-pause", title: this.playing ? "Pause" : "Play", onClick: this.handlePlayPause, children: this.playing ? "\u23F8" : "\u25B6" }), (0, import_jsx_runtime20.jsx)("input", { type: "range", className: "timeline-slider", min: this.props.timeRange[0], max: this.props.timeRange[1], step: this.props.step, value: this.currentTime, onInput: this.handleSliderChange })] }), rootElement);
+    (0, import_preact12.render)((0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [(0, import_jsx_runtime18.jsx)(IconButton, { label: this.playing ? "Pause" : "Play", onClick: this.handlePlayPause, children: (0, import_jsx_runtime18.jsx)("div", { className: "text", children: this.playing ? "\u23F8" : "\u25B6" }) }), (0, import_jsx_runtime18.jsx)("input", { type: "range", className: "timeline-slider", min: this.props.timeRange[0], max: this.props.timeRange[1], step: this.props.step, value: this.currentTime, onInput: this.handleSliderChange })] }), rootElement);
   }
   start() {
     this.playing = true;
@@ -1707,9 +1415,10 @@ var TimelineWidget = class extends import_core19.Widget {
   }
 };
 TimelineWidget.defaultProps = {
-  ...import_core19.Widget.defaultProps,
+  ...import_core13.Widget.defaultProps,
   id: "timeline",
   placement: "bottom-left",
+  viewId: null,
   timeRange: [0, 100],
   step: 1,
   initialTime: void 0,
@@ -1718,98 +1427,406 @@ TimelineWidget.defaultProps = {
   playInterval: 1e3
 };
 
-// dist/view-selector-widget.js
-var import_jsx_runtime22 = require("preact/jsx-runtime");
-var import_preact16 = require("preact");
-var import_core20 = require("@deck.gl/core");
-
-// dist/lib/components/icon-menu.js
-var import_jsx_runtime21 = require("preact/jsx-runtime");
-var import_hooks3 = require("preact/hooks");
-var MENU_STYLE2 = {
-  position: "absolute",
-  top: "100%",
-  left: 0,
-  background: "white",
-  border: "1px solid #ccc",
-  borderRadius: "4px",
-  marginTop: "4px",
-  zIndex: 100
-};
-var MENU_ITEM_STYLE2 = {
-  background: "white",
-  border: "none",
-  padding: "4px",
-  cursor: "pointer",
-  pointerEvents: "auto"
-};
-function IconMenu(props) {
-  const [menuOpen, setMenuOpen] = (0, import_hooks3.useState)(false);
-  const containerRef = (0, import_hooks3.useRef)(null);
-  const handleClickOutside = (event) => {
-    if (containerRef.current && !containerRef.current.contains(event.target)) {
-      setMenuOpen(false);
-    }
-  };
-  (0, import_hooks3.useEffect)(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [containerRef]);
-  const [selectedItem, setSelectedItem] = (0, import_hooks3.useState)(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 == null ? void 0 : selectedMenuItem.label) || "";
-  const Icon = props.icon || (selectedMenuItem == null ? void 0 : selectedMenuItem.icon);
-  return (0, import_jsx_runtime21.jsxs)("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [(0, import_jsx_runtime21.jsx)(IconButton, { className: props.className, label, onClick: handleButtonClick, children: (0, import_jsx_runtime21.jsx)(Icon, {}) }), menuOpen && (0, import_jsx_runtime21.jsx)("div", { style: MENU_STYLE2, children: (0, import_jsx_runtime21.jsx)("div", { style: { display: "flex", flexDirection: "column" }, children: props.menuItems.map((item) => (0, import_jsx_runtime21.jsx)("button", { style: MENU_ITEM_STYLE2, title: item.label, onClick: () => handleSelectItem(item.value), children: item.icon }, item.value)) }) })] });
-}
+// dist/screenshot-widget.js
+var import_jsx_runtime19 = require("preact/jsx-runtime");
+var import_preact13 = require("preact");
+var import_core14 = require("@deck.gl/core");
+var ScreenshotWidget = class extends import_core14.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) {
+    (0, import_preact13.render)((0, import_jsx_runtime19.jsx)(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) {
+    var _a;
+    const canvas = (_a = this.deck) == null ? void 0 : _a.getCanvas();
+    return canvas == null ? void 0 : canvas.toDataURL(imageFormat);
+  }
+  /** Download a data URL */
+  downloadDataURL(dataURL, filename) {
+    const link = document.createElement("a");
+    link.href = dataURL;
+    link.download = filename;
+    link.click();
+  }
+};
+ScreenshotWidget.defaultProps = {
+  ...import_core14.Widget.defaultProps,
+  id: "screenshot",
+  placement: "top-left",
+  viewId: null,
+  label: "Screenshot",
+  filename: "screenshot.png",
+  imageFormat: "image/png",
+  onCapture: void 0
+};
 
-// dist/view-selector-widget.js
-var ViewSelectorWidget = class extends import_core20.Widget {
+// dist/theme-widget.js
+var import_jsx_runtime20 = require("preact/jsx-runtime");
+var import_core15 = require("@deck.gl/core");
+var import_core16 = require("@deck.gl/core");
+var import_preact14 = require("preact");
+
+// dist/themes.js
+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"
+};
+
+// dist/theme-widget.js
+var ThemeWidget = class extends import_core16.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.themeMode = "dark";
+    this.themeMode = this._getInitialThemeMode();
+    this.setProps(this.props);
+  }
+  // eslint-disable-next-line complexity
+  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 && !(0, import_core15._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
+          this._setThemeMode("light");
+        }
+        break;
+      case "dark":
+        if (props.darkModeTheme && !(0, import_core15._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
+          this._setThemeMode("dark");
+        }
+        break;
+      default:
+        import_core15.log.warn(`Invalid theme mode ${this.themeMode}`)();
+    }
+  }
+  onRenderHTML(rootElement) {
+    const { lightModeLabel, darkModeLabel } = this.props;
+    (0, import_preact14.render)((0, import_jsx_runtime20.jsx)(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) {
+    var _a;
+    this.themeMode = themeMode;
+    const container = (_a = this.rootElement) == null ? void 0 : _a.closest(".deck-widget-container");
+    if (container) {
+      const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
+      (0, import_core15._applyStyles)(container, themeStyle);
+      const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
+      import_core15.log.log(1, `Switched theme to ${label}`, themeStyle)();
       this.updateHTML();
-    };
-    this.placement = this.props.placement;
-    this.viewMode = this.props.initialViewMode;
+    }
+  }
+  /** Read browser preference */
+  _getInitialThemeMode() {
+    const { initialThemeMode } = this.props;
+    return initialThemeMode === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : initialThemeMode;
+  }
+};
+ThemeWidget.defaultProps = {
+  ...import_core16.Widget.defaultProps,
+  id: "theme",
+  placement: "top-left",
+  viewId: null,
+  lightModeLabel: "Light Mode",
+  lightModeTheme: LightGlassTheme,
+  darkModeLabel: "Dark Mode",
+  darkModeTheme: DarkGlassTheme,
+  initialThemeMode: "auto"
+};
+
+// dist/loading-widget.js
+var import_jsx_runtime21 = require("preact/jsx-runtime");
+var import_preact15 = require("preact");
+var import_core17 = require("@deck.gl/core");
+var LoadingWidget = class extends import_core17.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) {
+    (0, import_preact15.render)(
+      // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
+      this.loading && (0, import_jsx_runtime21.jsx)(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() {
+  }
+};
+LoadingWidget.defaultProps = {
+  ...import_core17.Widget.defaultProps,
+  id: "loading",
+  placement: "top-left",
+  viewId: null,
+  label: "Loading layer data"
+};
+
+// dist/fps-widget.js
+var import_jsx_runtime22 = require("preact/jsx-runtime");
+var import_core18 = require("@deck.gl/core");
+var import_preact16 = require("preact");
+var FpsWidget = class extends import_core18.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) {
-    (0, import_preact16.render)((0, import_jsx_runtime22.jsx)(IconMenu, { className: "deck-widget-view-selector", menuItems: MENU_ITEMS, initialItem: this.props.initialViewMode, onItemSelected: this.handleSelectMode }), rootElement);
+    const fps = this._getFps();
+    (0, import_preact16.render)((0, import_jsx_runtime22.jsx)(IconButton, { children: (0, import_jsx_runtime22.jsxs)("div", { className: "text", children: ["FPS", (0, import_jsx_runtime22.jsx)("br", {}), fps] }) }), rootElement);
+  }
+  _animate() {
+    const fps = this._getFps();
+    if (this._lastFps !== fps) {
+      this._lastFps = fps;
+      this.updateHTML();
+    }
+    requestAnimationFrame(() => this._animate());
+  }
+  _getFps() {
+    var _a;
+    return Math.round(((_a = this.deck) == null ? void 0 : _a.metrics.fps) ?? 0);
   }
 };
-ViewSelectorWidget.defaultProps = {
-  ...import_core20.Widget.defaultProps,
-  id: "view-selector",
+FpsWidget.defaultProps = {
+  ...import_core18.Widget.defaultProps,
+  id: "fps",
   placement: "top-left",
-  label: "Split View",
-  initialViewMode: "single",
-  onViewModeChange: (viewMode) => {
-    console.log(viewMode);
+  viewId: null
+};
+
+// dist/stats-widget.js
+var import_jsx_runtime23 = require("preact/jsx-runtime");
+var import_core19 = require("@deck.gl/core");
+var import_core20 = require("@luma.gl/core");
+var import_preact17 = require("preact");
+var RIGHT_ARROW = "\u25B6";
+var DOWN_ARROW = "\u2B07";
+var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
+function formatTime(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}: ${formatTime(stat.getAverageTime())}`,
+  totalTime: (stat) => `${stat.name}: ${formatTime(stat.time)}`,
+  fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
+  memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
+};
+var StatsWidget = class extends import_core19.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 name in props.formatters) {
+        const f = props.formatters[name];
+        this._formatters[name] = typeof f === "string" ? DEFAULT_FORMATTERS[f] || DEFAULT_COUNT_FORMATTER : f;
+      }
+    }
+    if (props.resetOnUpdate) {
+      this._resetOnUpdate = { ...props.resetOnUpdate };
+    }
+    super.setProps(props);
+  }
+  onAdd() {
+    this._stats = this._getStats();
+    this.updateHTML();
+  }
+  onRenderHTML(rootElement) {
+    const stats = this._stats;
+    const collapsed = this.collapsed;
+    const title = this.props.title || (stats == null ? void 0 : stats.id) || "Stats";
+    const items = [];
+    if (!collapsed && stats) {
+      stats.forEach((stat) => {
+        const lines = this._getLines(stat);
+        if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
+          stat.reset();
+        }
+        lines.forEach((line, i) => {
+          items.push((0, import_jsx_runtime23.jsx)("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i}`));
+        });
+      });
+    }
+    (0, import_preact17.render)((0, import_jsx_runtime23.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime23.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleCollapsed, children: [collapsed ? RIGHT_ARROW : DOWN_ARROW, " ", title] }), !collapsed && (0, import_jsx_runtime23.jsx)("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() {
+    var _a, _b;
+    switch (this.props.type) {
+      case "deck":
+        return (_a = this.deck) == null ? void 0 : _a.stats;
+      case "luma":
+        return Array.from(import_core20.luma.stats.stats.values())[0];
+      case "device":
+        const device = (_b = this.deck) == null ? void 0 : _b.device;
+        const stats = device == null ? void 0 : device.statsManager.stats.values();
+        return stats ? Array.from(stats)[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 ICON_STYLE = { width: "24px", height: "24px" };
-var ICONS = {
-  single: () => (0, import_jsx_runtime22.jsx)("svg", { width: "24", height: "24", style: ICON_STYLE, children: (0, import_jsx_runtime22.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }) }),
-  "split-horizontal": () => (0, import_jsx_runtime22.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime22.jsx)("rect", { x: "4", y: "4", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" }), (0, import_jsx_runtime22.jsx)("rect", { x: "4", y: "13", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" })] }),
-  "split-vertical": () => (0, import_jsx_runtime22.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime22.jsx)("rect", { x: "4", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }), (0, import_jsx_runtime22.jsx)("rect", { x: "13", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" })] })
+StatsWidget.defaultProps = {
+  ...import_core19.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" }
-];
 //# sourceMappingURL=index.cjs.map