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

package/dist/dist.dev.js

@@ -438,21 +438,21 @@ var __exports__ = (() => {
 
   // src/lib/components/button-group.tsx
   var ButtonGroup = (props) => {
-    const { children, orientation } = props;
+    const { children, orientation = "horizontal" } = props;
     return /* @__PURE__ */ u2("div", { className: `deck-widget-button-group ${orientation}`, children });
   };
 
   // src/lib/components/grouped-icon-button.tsx
   var GroupedIconButton = (props) => {
-    const { className, label, onClick } = props;
+    const { className = "", label, onClick, children } = props;
     return /* @__PURE__ */ u2(
       "button",
       {
-        className: `deck-widget-icon-button ${className || ""}`,
+        className: `deck-widget-icon-button ${className}`,
         type: "button",
         onClick,
         title: label,
-        children: /* @__PURE__ */ u2("div", { className: "deck-widget-icon" })
+        children: children ? children : /* @__PURE__ */ u2("div", { className: "deck-widget-icon" })
       }
     );
   };
@@ -463,10 +463,8 @@ var __exports__ = (() => {
       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;
@@ -505,7 +503,9 @@ var __exports__ = (() => {
       };
       if (this.props.transitionDuration > 0) {
         nextViewState.transitionDuration = this.props.transitionDuration;
-        nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core2.FlyToInterpolator() : new import_core2.LinearInterpolator();
+        nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core2.FlyToInterpolator() : new import_core2.LinearInterpolator({
+          transitionProps: ["zoom"]
+        });
       }
       this.setViewState(viewId, nextViewState);
     }
@@ -533,7 +533,7 @@ var __exports__ = (() => {
     transitionDuration: 200,
     zoomInLabel: "Zoom In",
     zoomOutLabel: "Zoom Out",
-    viewId: void 0
+    viewId: null
   };
 
   // src/reset-view-widget.tsx
@@ -541,7 +541,7 @@ var __exports__ = (() => {
 
   // src/lib/components/icon-button.tsx
   var IconButton = (props) => {
-    const { className, label, onClick, children } = props;
+    const { className = "", label, onClick, children } = props;
     return /* @__PURE__ */ u2("div", { className: "deck-widget-button", children: /* @__PURE__ */ u2(
       "button",
       {
@@ -560,10 +560,11 @@ var __exports__ = (() => {
       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) {
@@ -584,9 +585,9 @@ var __exports__ = (() => {
       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()
@@ -601,17 +602,16 @@ var __exports__ = (() => {
     placement: "top-left",
     label: "Reset View",
     initialViewState: void 0,
-    viewId: void 0
+    viewId: null
   };
 
-  // src/compass-widget.tsx
+  // src/gimbal-widget.tsx
   var import_core4 = __toESM(require_core(), 1);
-  var _CompassWidget = class extends import_core4.Widget {
+  var _GimbalWidget = class extends import_core4.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);
     }
@@ -623,101 +623,17 @@ var __exports__ = (() => {
     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__ */ u2("div", { className: "deck-widget-button", style: { perspective: 100 }, children: /* @__PURE__ */ u2(
+      const { rotationOrbit, rotationX } = this.getNormalizedRotation(widgetViewport);
+      const ui = /* @__PURE__ */ u2("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: /* @__PURE__ */ u2(
         "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: /* @__PURE__ */ u2("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: /* @__PURE__ */ u2("g", { transform: `rotate(${rz},13,13)`, children: [
-            /* @__PURE__ */ u2(
-              "path",
-              {
-                d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z",
-                fill: "var(--icon-compass-north-color, rgb(240, 92, 68))"
-              }
-            ),
-            /* @__PURE__ */ u2(
-              "path",
-              {
-                d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",
-                fill: "var(--icon-compass-south-color, rgb(204, 204, 204))"
-              }
-            )
-          ] }) })
-        }
-      ) });
-      B(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: {} });
-      }
-    }
-  };
-  var CompassWidget = _CompassWidget;
-  CompassWidget.defaultProps = {
-    ...import_core4.Widget.defaultProps,
-    id: "compass",
-    placement: "top-left",
-    viewId: null,
-    label: "Reset Compass",
-    transitionDuration: 200
-  };
-
-  // src/gimbal-widget.tsx
-  var import_core5 = __toESM(require_core(), 1);
-  var _GimbalWidget = class extends import_core5.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 = /* @__PURE__ */ u2("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: /* @__PURE__ */ u2(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            this.resetOrbitView();
-          },
-          title: this.props.label,
           style: { position: "relative", width: 26, height: 26 },
           children: [
             /* @__PURE__ */ u2(
@@ -778,10 +694,11 @@ var __exports__ = (() => {
       B(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 = {
@@ -789,15 +706,15 @@ var __exports__ = (() => {
           rotationOrbit: 0,
           rotationX: 0,
           transitionDuration: this.props.transitionDuration,
-          transitionInterpolator: new import_core5.LinearInterpolator({
+          transitionInterpolator: new import_core4.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);
@@ -810,8 +727,8 @@ var __exports__ = (() => {
       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) {
@@ -829,10 +746,10 @@ var __exports__ = (() => {
   };
   var GimbalWidget = _GimbalWidget;
   GimbalWidget.defaultProps = {
-    ...import_core5.Widget.defaultProps,
+    ...import_core4.Widget.defaultProps,
     id: "gimbal",
     placement: "top-left",
-    viewId: void 0,
+    viewId: null,
     label: "Gimbal",
     strokeWidth: 1.5,
     transitionDuration: 200
@@ -851,6 +768,94 @@ var __exports__ = (() => {
     return normalized;
   }
 
+  // src/compass-widget.tsx
+  var import_core5 = __toESM(require_core(), 1);
+  var _CompassWidget = class extends import_core5.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__ */ u2("div", { className: "deck-widget-button", style: { perspective: 100 }, children: /* @__PURE__ */ u2(
+        "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__ */ u2("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: /* @__PURE__ */ u2("g", { transform: `rotate(${rz},13,13)`, children: [
+            /* @__PURE__ */ u2(
+              "path",
+              {
+                d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z",
+                fill: "var(--icon-compass-north-color, rgb(240, 92, 68))"
+              }
+            ),
+            /* @__PURE__ */ u2(
+              "path",
+              {
+                d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",
+                fill: "var(--icon-compass-south-color, rgb(204, 204, 204))"
+              }
+            )
+          ] }) })
+        }
+      ) });
+      B(ui, rootElement);
+    }
+    onViewportChange(viewport) {
+      if (!viewport.equals(this.viewports[viewport.id])) {
+        this.viewports[viewport.id] = viewport;
+        this.updateHTML();
+      }
+    }
+    getRotation(viewport) {
+      if (viewport instanceof import_core5.WebMercatorViewport) {
+        return [-viewport.bearing, viewport.pitch];
+      } else if (viewport instanceof import_core5._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_core5.WebMercatorViewport) {
+        const nextViewState = {
+          ...viewport,
+          bearing: 0,
+          ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
+          transitionDuration: this.props.transitionDuration,
+          transitionInterpolator: new import_core5.FlyToInterpolator()
+        };
+        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+      }
+    }
+  };
+  var CompassWidget = _CompassWidget;
+  CompassWidget.defaultProps = {
+    ...import_core5.Widget.defaultProps,
+    id: "compass",
+    placement: "top-left",
+    viewId: null,
+    label: "Reset Compass",
+    transitionDuration: 200
+  };
+
   // src/scale-widget.tsx
   var import_core6 = __toESM(require_core(), 1);
   var _ScaleWidget = class extends import_core6.Widget {
@@ -864,10 +869,11 @@ var __exports__ = (() => {
       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) {
@@ -958,7 +964,7 @@ var __exports__ = (() => {
     id: "scale",
     placement: "bottom-left",
     label: "Scale",
-    onCapture: void 0
+    viewId: null
   };
   function getMetersPerPixel(latitude, zoom) {
     const earthCircumference = 40075016686e-3;
@@ -1456,17 +1462,16 @@ var __exports__ = (() => {
         }
       };
       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];
@@ -1541,7 +1546,7 @@ var __exports__ = (() => {
   GeocoderWidget.defaultProps = {
     ...import_core7.Widget.defaultProps,
     id: "geocoder",
-    viewId: void 0,
+    viewId: null,
     placement: "top-left",
     label: "Geocoder",
     transitionDuration: 200,
@@ -1578,7 +1583,7 @@ var __exports__ = (() => {
       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));
@@ -1591,7 +1596,9 @@ var __exports__ = (() => {
         /* @__PURE__ */ u2(
           IconButton,
           {
-            onClick: this.handleClick.bind(this),
+            onClick: () => {
+              this.handleClick().catch((err) => import_core9.log.error(err)());
+            },
             label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel,
             className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter"
           }
@@ -1601,6 +1608,7 @@ var __exports__ = (() => {
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
     getContainer() {
@@ -1646,351 +1654,344 @@ var __exports__ = (() => {
     ...import_core9.Widget.defaultProps,
     id: "fullscreen",
     placement: "top-left",
+    viewId: null,
     enterLabel: "Enter Fullscreen",
     exitLabel: "Exit Fullscreen",
     container: void 0
   };
 
-  // src/screenshot-widget.tsx
+  // src/splitter-widget.tsx
   var import_core10 = __toESM(require_core(), 1);
-  var _ScreenshotWidget = class extends import_core10.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_core10.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";
       B(
         /* @__PURE__ */ u2(
-          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 canvas = this.deck?.getCanvas();
-      return canvas?.toDataURL(imageFormat);
-    }
-    /** Download a data URL */
-    downloadDataURL(dataURL, filename) {
-      const link = document.createElement("a");
-      link.href = dataURL;
-      link.download = filename;
-      link.click();
-    }
   };
-  var ScreenshotWidget = _ScreenshotWidget;
-  ScreenshotWidget.defaultProps = {
+  var SplitterWidget = _SplitterWidget;
+  SplitterWidget.defaultProps = {
     ...import_core10.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] = h2(initialSplit);
+    const dragging = A2(false);
+    const containerRef = A2(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__ */ u2("div", { ref: containerRef, style: containerStyle, children: /* @__PURE__ */ u2(
+      "div",
+      {
+        style: splitterStyle,
+        onMouseDown: handleDragStart
+      }
+    ) });
+  }
 
-  // src/loading-widget.tsx
+  // src/view-selector-widget.tsx
   var import_core11 = __toESM(require_core(), 1);
-  var _LoadingWidget = class extends import_core11.Widget {
+
+  // src/lib/components/icon-menu.tsx
+  function IconMenu(props) {
+    const [menuOpen, setMenuOpen] = h2(false);
+    const containerRef = A2(null);
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setMenuOpen(false);
+      }
+    };
+    y2(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [containerRef]);
+    const [selectedItem, setSelectedItem] = h2(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__ */ u2("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [
+      /* @__PURE__ */ u2(IconButton, { className: props.className, label, onClick: handleButtonClick, children: icon }),
+      menuOpen && /* @__PURE__ */ u2("div", { className: "deck-widget-icon-menu", children: /* @__PURE__ */ u2(ButtonGroup, { orientation: "vertical", children: props.menuItems.map((item) => /* @__PURE__ */ u2(
+        GroupedIconButton,
+        {
+          label: item.label,
+          onClick: () => handleSelectItem(item.value),
+          children: item.icon
+        },
+        item.value
+      )) }) })
+    ] });
+  }
+
+  // src/view-selector-widget.tsx
+  var _ViewSelectorWidget = class extends import_core11.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) {
       B(
-        // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
-        this.loading && /* @__PURE__ */ u2(
-          IconButton,
+        /* @__PURE__ */ u2(
+          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 = {
     ...import_core11.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__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: /* @__PURE__ */ u2(
+      "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__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
+      /* @__PURE__ */ u2(
+        "rect",
+        {
+          x: "4",
+          y: "4",
+          width: "16",
+          height: "7",
+          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
+          fill: "none",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ u2(
+        "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__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
+      /* @__PURE__ */ u2(
+        "rect",
+        {
+          x: "4",
+          y: "4",
+          width: "7",
+          height: "16",
+          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
+          fill: "none",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ u2(
+        "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" }
+  ];
 
-  // src/fps-widget.tsx
+  // src/info-widget.tsx
   var import_core12 = __toESM(require_core(), 1);
-  var _FpsWidget = class extends import_core12.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;
+  var _InfoWidget = class extends import_core12.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();
+    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();
     }
-    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();
+    onHover(info) {
+      if (this.props.mode === "hover" && this.props.getTooltip) {
+        const tooltip = this.props.getTooltip(info, this);
+        this.setProps({
+          visible: tooltip !== null,
+          ...tooltip,
+          style: { zIndex: "1", ...tooltip?.style }
+        });
       }
     }
-    _getFps() {
-      return Math.round(this.deck.metrics.fps ?? 0);
-    }
-  };
-  var FpsWidget = _FpsWidget;
-  FpsWidget.defaultProps = {
-    ...import_core12.Widget.defaultProps,
-    id: "fps",
-    placement: "top-left"
-  };
-
-  // src/theme-widget.tsx
-  var import_core13 = __toESM(require_core(), 1);
-  var import_core14 = __toESM(require_core(), 1);
-
-  // 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)"
-  };
-
-  // src/theme-widget.tsx
-  var _ThemeWidget = class extends import_core14.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 && !(0, import_core13._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
-            this._setThemeMode("light");
-          }
-          break;
-        case "dark":
-          if (props.darkModeTheme && !(0, import_core13._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
-            this._setThemeMode("dark");
-          }
-          break;
-      }
-    }
-    onRenderHTML(rootElement) {
-      const { lightModeLabel, darkModeLabel } = this.props;
-      B(
-        /* @__PURE__ */ u2(
-          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;
-        (0, import_core13._applyStyles)(container, themeStyle);
-        const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-        import_core13.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;
-    }
-  };
-  var ThemeWidget = _ThemeWidget;
-  ThemeWidget.defaultProps = {
-    ...import_core14.Widget.defaultProps,
-    id: "theme",
-    placement: "top-left",
-    lightModeLabel: "Light Mode",
-    lightModeTheme: LightGlassTheme,
-    darkModeLabel: "Dark Mode",
-    darkModeTheme: DarkGlassTheme,
-    initialThemeMode: "auto"
-  };
-
-  // src/info-widget.tsx
-  var import_core15 = __toESM(require_core(), 1);
-  var _InfoWidget = class extends import_core15.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();
-    }
-    onHover(info) {
-      if (this.props.mode === "hover" && this.props.getTooltip) {
-        const tooltip = this.props.getTooltip(info, this);
-        this.setProps({
-          visible: tooltip !== null,
-          ...tooltip,
-          style: { zIndex: 1, ...tooltip?.style }
-        });
-      }
-    }
-    onClick(info) {
-      if (this.props.mode === "click" && this.props.getTooltip) {
-        const tooltip = this.props.getTooltip(info, this);
-        this.setProps({
-          visible: tooltip !== null,
-          ...tooltip
-        });
-        return tooltip !== null;
-      }
-      return this.props.onClick?.(this, info) || false;
+    onClick(info) {
+      if (this.props.mode === "click" && this.props.getTooltip) {
+        const tooltip = this.props.getTooltip(info, this);
+        this.setProps({
+          visible: tooltip !== null,
+          ...tooltip
+        });
+        return tooltip !== null;
+      }
+      return this.props.onClick?.(this, info) || false;
     }
     onAdd({ deck, viewId }) {
       this.deck = deck;
@@ -2089,11 +2090,11 @@ ${fps}`;
   };
   var InfoWidget = _InfoWidget;
   InfoWidget.defaultProps = {
-    ...import_core15.Widget.defaultProps,
+    ...import_core12.Widget.defaultProps,
+    id: "info",
     position: [0, 0],
     text: "",
     visible: false,
-    // Set default minOffset if not provided
     minOffset: 0,
     viewId: null,
     mode: "hover",
@@ -2101,188 +2102,57 @@ ${fps}`;
     onClick: void 0
   };
 
-  // src/stats-widget.tsx
-  var import_core16 = __toESM(require_core(), 1);
-  var import_core17 = __toESM(require_core2(), 1);
-  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)}`
+  // src/context-menu-widget.tsx
+  var import_core13 = __toESM(require_core(), 1);
+
+  // src/lib/components/simple-menu.tsx
+  var MENU_STYLE = {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    background: "white",
+    border: "1px solid #ccc",
+    borderRadius: "4px",
+    marginTop: "var(--menu-gap, 4px)",
+    zIndex: 100
   };
-  var _StatsWidget = class extends import_core16.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 f4 = props.formatters[name];
-          this._formatters[name] = typeof f4 === "string" ? DEFAULT_FORMATTERS[f4] || DEFAULT_COUNT_FORMATTER : f4;
-        }
-      }
-      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?.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, i4) => {
-            items.push(
-              /* @__PURE__ */ u2("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i4}`)
-            );
-          });
-        });
-      }
-      B(
-        /* @__PURE__ */ u2("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [
-          /* @__PURE__ */ u2(
-            "div",
-            {
-              className: "deck-widget-stats-header",
-              style: { cursor: "pointer", pointerEvents: "auto" },
-              onClick: this._toggleCollapsed,
-              children: [
-                collapsed ? RIGHT_ARROW : DOWN_ARROW,
-                " ",
-                title
-              ]
-            }
-          ),
-          !collapsed && /* @__PURE__ */ u2("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(import_core17.luma.stats.stats.values())[0];
-        case "device":
-          const device = this.deck?.device;
-          const stats = 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 StatsWidget = _StatsWidget;
-  StatsWidget.defaultProps = {
-    ...import_core16.Widget.defaultProps,
-    type: "deck",
-    stats: void 0,
-    title: "Stats",
-    framesPerUpdate: 1,
-    formatters: {},
-    resetOnUpdate: {},
-    id: "stats"
-  };
-
-  // src/context-menu-widget.tsx
-  var import_core18 = __toESM(require_core(), 1);
-
-  // src/lib/components/simple-menu.tsx
-  var MENU_STYLE = {
-    position: "absolute",
-    top: "100%",
-    left: 0,
-    background: "white",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    marginTop: "4px",
-    zIndex: 100
-  };
-  var MENU_ITEM_STYLE = {
-    background: "white",
-    border: "none",
-    padding: "4px",
-    cursor: "pointer",
-    pointerEvents: "auto"
-  };
-  var SimpleMenu = (props) => {
-    const { menuItems, onItemSelected, position, style } = props;
-    const styleOverride = {
-      ...MENU_STYLE,
-      ...style,
-      left: `${position.x}px`,
-      top: `${position.y}px`
-    };
-    return /* @__PURE__ */ u2("div", { style: styleOverride, children: menuItems.map(({ key, label }) => /* @__PURE__ */ u2(
-      "button",
-      {
-        style: { ...MENU_ITEM_STYLE, display: "block" },
-        onClick: (_2) => onItemSelected(key),
-        children: label
-      },
-      key
-    )) });
-  };
-
-  // src/context-menu-widget.tsx
-  var MOUSE_BUTTON_RIGHT = 2;
-  var MOUSE_WHICH_RIGHT = 3;
-  var _ContextMenuWidget = class extends import_core18.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);
+  var MENU_ITEM_STYLE = {
+    background: "white",
+    border: "none",
+    padding: "4px",
+    cursor: "pointer",
+    pointerEvents: "auto"
+  };
+  var SimpleMenu = (props) => {
+    const { menuItems, onItemSelected, position, style } = props;
+    const styleOverride = {
+      ...MENU_STYLE,
+      ...style,
+      left: `${position.x}px`,
+      top: `${position.y}px`
+    };
+    return /* @__PURE__ */ u2("div", { style: styleOverride, children: menuItems.map(({ key, label }) => /* @__PURE__ */ u2(
+      "button",
+      {
+        style: { ...MENU_ITEM_STYLE, display: "block" },
+        onClick: (_2) => onItemSelected(key),
+        children: label
+      },
+      key
+    )) });
+  };
+
+  // src/context-menu-widget.tsx
+  var MOUSE_BUTTON_RIGHT = 2;
+  var MOUSE_WHICH_RIGHT = 3;
+  var _ContextMenuWidget = class extends import_core13.Widget {
+    constructor(props) {
+      super(props, _ContextMenuWidget.defaultProps);
+      this.className = "deck-widget-context-menu";
+      this.placement = "fill";
+      this.pickInfo = null;
+      this.pickInfo = null;
+      this.setProps(this.props);
     }
     onAdd({ deck }) {
       const element = document.createElement("div");
@@ -2337,7 +2207,7 @@ ${fps}`;
   };
   var ContextMenuWidget = _ContextMenuWidget;
   ContextMenuWidget.defaultProps = {
-    ...import_core18.Widget.defaultProps,
+    ...import_core13.Widget.defaultProps,
     id: "context",
     viewId: null,
     visible: false,
@@ -2348,358 +2218,553 @@ ${fps}`;
     onMenuItemSelected: (key, pickInfo) => console.log("Context menu item selected:", key, pickInfo)
   };
 
-  // src/splitter-widget.tsx
-  var import_core19 = __toESM(require_core(), 1);
-  var _SplitterWidget = class extends import_core19.Widget {
-    constructor(props) {
-      super(props, _SplitterWidget.defaultProps);
-      this.className = "deck-widget-splitter";
-      this.placement = "fill";
+  // src/timeline-widget.tsx
+  var import_core14 = __toESM(require_core(), 1);
+  var _TimelineWidget = class extends import_core14.Widget {
+    constructor(props = {}) {
+      super(props, _TimelineWidget.defaultProps);
+      this.id = "timeline";
+      this.className = "deck-widget-timeline";
+      this.placement = "bottom-left";
+      this.playing = false;
+      this.timerId = null;
+      this.handlePlayPause = () => {
+        if (this.playing) {
+          this.stop();
+        } else {
+          this.start();
+        }
+      };
+      this.handleSliderChange = (e3) => {
+        const input = e3.target;
+        const val = Number(input.value);
+        this.currentTime = val;
+        this.props.onTimeChange(val);
+        this.updateHTML();
+      };
+      this.tick = () => {
+        const [min, max] = this.props.timeRange;
+        let next = this.currentTime + this.props.step;
+        if (next > max) {
+          next = min;
+        }
+        this.currentTime = next;
+        this.props.onTimeChange(next);
+        this.updateHTML();
+        if (this.playing) {
+          this.timerId = window.setTimeout(this.tick, this.props.playInterval);
+        }
+      };
+      this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+      this.setProps(this.props);
     }
     setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
+    onAdd() {
+      this.playing = false;
+      this.timerId = null;
+    }
+    onRemove() {
+      this.stop();
+    }
     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";
       B(
-        /* @__PURE__ */ u2(
-          Splitter,
-          {
-            orientation: this.props.orientation,
-            initialSplit: this.props.initialSplit,
-            onChange: this.props.onChange,
-            onDragStart: this.props.onDragStart,
-            onDragEnd: this.props.onDragEnd
-          }
-        ),
+        /* @__PURE__ */ u2("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [
+          /* @__PURE__ */ u2(IconButton, { label: this.playing ? "Pause" : "Play", onClick: this.handlePlayPause, children: /* @__PURE__ */ u2("div", { className: "text", children: this.playing ? "\u23F8" : "\u25B6" }) }),
+          /* @__PURE__ */ u2(
+            "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;
+      this.updateHTML();
+      this.tick();
+    }
+    stop() {
+      this.playing = false;
+      if (this.timerId !== null) {
+        window.clearTimeout(this.timerId);
+        this.timerId = null;
+      }
+      this.updateHTML();
+    }
   };
-  var SplitterWidget = _SplitterWidget;
-  SplitterWidget.defaultProps = {
-    ...import_core19.Widget.defaultProps,
-    id: "splitter-widget",
-    viewId1: "",
-    viewId2: "",
-    orientation: "vertical",
-    initialSplit: 0.5,
-    onChange: () => {
-    },
-    onDragStart: () => {
+  var TimelineWidget = _TimelineWidget;
+  TimelineWidget.defaultProps = {
+    ...import_core14.Widget.defaultProps,
+    id: "timeline",
+    placement: "bottom-left",
+    viewId: null,
+    timeRange: [0, 100],
+    step: 1,
+    initialTime: void 0,
+    onTimeChange: () => {
     },
-    onDragEnd: () => {
-    }
+    playInterval: 1e3
   };
-  function Splitter({
-    orientation,
-    initialSplit,
-    onChange,
-    onDragStart,
-    onDragEnd
-  }) {
-    const [split, setSplit] = h2(initialSplit);
-    const dragging = A2(false);
-    const containerRef = A2(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)
+
+  // src/screenshot-widget.tsx
+  var import_core15 = __toESM(require_core(), 1);
+  var _ScreenshotWidget = class extends import_core15.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) {
+      B(
+        /* @__PURE__ */ u2(
+          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 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__ */ u2("div", { ref: containerRef, style: containerStyle, children: /* @__PURE__ */ u2(
-      "div",
-      {
-        style: splitterStyle,
-        onMouseDown: handleDragStart
+      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 canvas = this.deck?.getCanvas();
+      return canvas?.toDataURL(imageFormat);
+    }
+    /** Download a data URL */
+    downloadDataURL(dataURL, filename) {
+      const link = document.createElement("a");
+      link.href = dataURL;
+      link.download = filename;
+      link.click();
+    }
+  };
+  var ScreenshotWidget = _ScreenshotWidget;
+  ScreenshotWidget.defaultProps = {
+    ...import_core15.Widget.defaultProps,
+    id: "screenshot",
+    placement: "top-left",
+    viewId: null,
+    label: "Screenshot",
+    filename: "screenshot.png",
+    imageFormat: "image/png",
+    onCapture: void 0
+  };
 
-  // src/timeline-widget.tsx
-  var import_core20 = __toESM(require_core(), 1);
-  var _TimelineWidget = class extends import_core20.Widget {
+  // src/theme-widget.tsx
+  var import_core16 = __toESM(require_core(), 1);
+  var import_core17 = __toESM(require_core(), 1);
+
+  // 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"
+  };
+
+  // src/theme-widget.tsx
+  var _ThemeWidget = class extends import_core17.Widget {
     constructor(props = {}) {
-      super(props, _TimelineWidget.defaultProps);
-      this.id = "timeline";
-      this.className = "deck-widget-timeline";
-      this.placement = "bottom-left";
-      this.playing = false;
-      this.timerId = null;
-      this.handlePlayPause = () => {
-        if (this.playing) {
-          this.stop();
-        } else {
-          this.start();
-        }
-      };
-      this.handleSliderChange = (e3) => {
-        const input = e3.target;
-        const val = Number(input.value);
-        this.currentTime = val;
-        this.props.onTimeChange(val);
+      super(props, _ThemeWidget.defaultProps);
+      this.className = "deck-widget-theme";
+      this.placement = "top-left";
+      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_core16._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
+            this._setThemeMode("light");
+          }
+          break;
+        case "dark":
+          if (props.darkModeTheme && !(0, import_core16._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
+            this._setThemeMode("dark");
+          }
+          break;
+        default:
+          import_core16.log.warn(`Invalid theme mode ${this.themeMode}`)();
+      }
+    }
+    onRenderHTML(rootElement) {
+      const { lightModeLabel, darkModeLabel } = this.props;
+      B(
+        /* @__PURE__ */ u2(
+          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;
+        (0, import_core16._applyStyles)(container, themeStyle);
+        const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
+        import_core16.log.log(1, `Switched theme to ${label}`, themeStyle)();
         this.updateHTML();
-      };
-      this.tick = () => {
-        const [min, max] = this.props.timeRange;
-        let next = this.currentTime + this.props.step;
-        if (next > max) {
-          next = min;
-        }
-        this.currentTime = next;
-        this.props.onTimeChange(next);
+      }
+    }
+    /** 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 = {
+    ...import_core17.Widget.defaultProps,
+    id: "theme",
+    placement: "top-left",
+    viewId: null,
+    lightModeLabel: "Light Mode",
+    lightModeTheme: LightGlassTheme,
+    darkModeLabel: "Dark Mode",
+    darkModeTheme: DarkGlassTheme,
+    initialThemeMode: "auto"
+  };
+
+  // src/loading-widget.tsx
+  var import_core18 = __toESM(require_core(), 1);
+  var _LoadingWidget = class extends import_core18.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) {
+      B(
+        // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
+        this.loading && /* @__PURE__ */ u2(
+          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();
-        if (this.playing) {
-          this.timerId = window.setTimeout(this.tick, this.props.playInterval);
-        }
-      };
-      this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+      }
+    }
+    // TODO(ibgreen) - this should not be a button, see above.
+    handleClick() {
+    }
+  };
+  var LoadingWidget = _LoadingWidget;
+  LoadingWidget.defaultProps = {
+    ...import_core18.Widget.defaultProps,
+    id: "loading",
+    placement: "top-left",
+    viewId: null,
+    label: "Loading layer data"
+  };
+
+  // src/fps-widget.tsx
+  var import_core19 = __toESM(require_core(), 1);
+  var _FpsWidget = class extends import_core19.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.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
       super.setProps(props);
     }
-    onAdd() {
-      this.playing = false;
-      this.timerId = null;
-    }
-    onRemove() {
-      this.stop();
+    onAdd({}) {
+      this._lastFps = this._getFps();
+      requestAnimationFrame(() => this._animate());
     }
     onRenderHTML(rootElement) {
+      const fps = this._getFps();
       B(
-        /* @__PURE__ */ u2("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [
-          /* @__PURE__ */ u2(
-            "button",
-            {
-              type: "button",
-              className: "timeline-play-pause",
-              title: this.playing ? "Pause" : "Play",
-              onClick: this.handlePlayPause,
-              children: this.playing ? "\u23F8" : "\u25B6"
-            }
-          ),
-          /* @__PURE__ */ u2(
-            "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
-            }
-          )
-        ] }),
+        /* @__PURE__ */ u2(IconButton, { children: /* @__PURE__ */ u2("div", { className: "text", children: [
+          "FPS",
+          /* @__PURE__ */ u2("br", {}),
+          fps
+        ] }) }),
         rootElement
       );
     }
-    start() {
-      this.playing = true;
-      this.updateHTML();
-      this.tick();
-    }
-    stop() {
-      this.playing = false;
-      if (this.timerId !== null) {
-        window.clearTimeout(this.timerId);
-        this.timerId = null;
+    _animate() {
+      const fps = this._getFps();
+      if (this._lastFps !== fps) {
+        this._lastFps = fps;
+        this.updateHTML();
       }
-      this.updateHTML();
+      requestAnimationFrame(() => this._animate());
+    }
+    _getFps() {
+      return Math.round(this.deck?.metrics.fps ?? 0);
     }
   };
-  var TimelineWidget = _TimelineWidget;
-  TimelineWidget.defaultProps = {
-    ...import_core20.Widget.defaultProps,
-    id: "timeline",
-    placement: "bottom-left",
-    timeRange: [0, 100],
-    step: 1,
-    initialTime: void 0,
-    onTimeChange: () => {
-    },
-    playInterval: 1e3
+  var FpsWidget = _FpsWidget;
+  FpsWidget.defaultProps = {
+    ...import_core19.Widget.defaultProps,
+    id: "fps",
+    placement: "top-left",
+    viewId: null
   };
 
-  // src/view-selector-widget.tsx
-  var import_core21 = __toESM(require_core(), 1);
-
-  // 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
-  };
-  var MENU_ITEM_STYLE2 = {
-    background: "white",
-    border: "none",
-    padding: "4px",
-    cursor: "pointer",
-    pointerEvents: "auto"
-  };
-  function IconMenu(props) {
-    const [menuOpen, setMenuOpen] = h2(false);
-    const containerRef = A2(null);
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setMenuOpen(false);
-      }
-    };
-    y2(() => {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [containerRef]);
-    const [selectedItem, setSelectedItem] = h2(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__ */ u2("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [
-      /* @__PURE__ */ u2(IconButton, { className: props.className, label, onClick: handleButtonClick, children: /* @__PURE__ */ u2(Icon, {}) }),
-      menuOpen && /* @__PURE__ */ u2("div", { style: MENU_STYLE2, children: /* @__PURE__ */ u2("div", { style: { display: "flex", flexDirection: "column" }, children: props.menuItems.map((item) => /* @__PURE__ */ u2(
-        "button",
-        {
-          style: MENU_ITEM_STYLE2,
-          title: item.label,
-          onClick: () => handleSelectItem(item.value),
-          children: item.icon
-        },
-        item.value
-      )) }) })
-    ] });
+  // src/stats-widget.tsx
+  var import_core20 = __toESM(require_core(), 1);
+  var import_core21 = __toESM(require_core2(), 1);
+  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`;
   }
-
-  // src/view-selector-widget.tsx
-  var _ViewSelectorWidget = class extends import_core21.Widget {
+  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_core20.Widget {
     constructor(props = {}) {
-      super(props, _ViewSelectorWidget.defaultProps);
-      this.className = "deck-widget-view-selector";
+      super(props, _StatsWidget.defaultProps);
+      this.className = "deck-widget-stats";
       this.placement = "top-left";
-      this.handleSelectMode = (viewMode) => {
-        this.viewMode = viewMode;
+      this._counter = 0;
+      this.collapsed = true;
+      this._toggleCollapsed = () => {
+        this.collapsed = !this.collapsed;
         this.updateHTML();
       };
-      this.placement = this.props.placement;
-      this.viewMode = this.props.initialViewMode;
+      this._formatters = { ...DEFAULT_FORMATTERS };
+      this._resetOnUpdate = { ...this.props.resetOnUpdate };
+      this._stats = this.props.stats;
+      this.setProps(props);
     }
     setProps(props) {
-      super.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 f4 = props.formatters[name];
+          this._formatters[name] = typeof f4 === "string" ? DEFAULT_FORMATTERS[f4] || DEFAULT_COUNT_FORMATTER : f4;
+        }
+      }
+      if (props.resetOnUpdate) {
+        this._resetOnUpdate = { ...props.resetOnUpdate };
+      }
+      super.setProps(props);
+    }
+    onAdd() {
+      this._stats = this._getStats();
+      this.updateHTML();
     }
     onRenderHTML(rootElement) {
-      B(
-        /* @__PURE__ */ u2(
-          IconMenu,
-          {
-            className: "deck-widget-view-selector",
-            menuItems: MENU_ITEMS,
-            initialItem: this.props.initialViewMode,
-            onItemSelected: this.handleSelectMode
+      const stats = this._stats;
+      const collapsed = this.collapsed;
+      const title = this.props.title || 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, i4) => {
+            items.push(
+              /* @__PURE__ */ u2("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i4}`)
+            );
+          });
+        });
+      }
+      B(
+        /* @__PURE__ */ u2("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [
+          /* @__PURE__ */ u2(
+            "div",
+            {
+              className: "deck-widget-stats-header",
+              style: { cursor: "pointer", pointerEvents: "auto" },
+              onClick: this._toggleCollapsed,
+              children: [
+                collapsed ? RIGHT_ARROW : DOWN_ARROW,
+                " ",
+                title
+              ]
+            }
+          ),
+          !collapsed && /* @__PURE__ */ u2("div", { className: "deck-widget-stats-content", children: items })
+        ] }),
         rootElement
       );
     }
-  };
-  var ViewSelectorWidget = _ViewSelectorWidget;
-  ViewSelectorWidget.defaultProps = {
-    ...import_core21.Widget.defaultProps,
-    id: "view-selector",
-    placement: "top-left",
-    label: "Split View",
-    initialViewMode: "single",
-    onViewModeChange: (viewMode) => {
-      console.log(viewMode);
+    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(import_core21.luma.stats.stats.values())[0];
+        case "device":
+          const device = this.deck?.device;
+          const stats = 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: () => /* @__PURE__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: /* @__PURE__ */ u2("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }) }),
-    "split-horizontal": () => /* @__PURE__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
-      /* @__PURE__ */ u2("rect", { x: "4", y: "4", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" }),
-      /* @__PURE__ */ u2("rect", { x: "4", y: "13", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" })
-    ] }),
-    "split-vertical": () => /* @__PURE__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
-      /* @__PURE__ */ u2("rect", { x: "4", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }),
-      /* @__PURE__ */ u2("rect", { x: "13", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" })
-    ] })
+  var StatsWidget = _StatsWidget;
+  StatsWidget.defaultProps = {
+    ...import_core20.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" }
-  ];
   return __toCommonJS(bundle_exports);
 })();
       return __exports__;