@deck.gl/widgets 9.3.0-alpha.1 → 9.3.0-alpha.2

package/dist/index.cjs

@@ -21,29 +21,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var dist_exports = {};
 __export(dist_exports, {
   CompassWidget: () => CompassWidget,
+  ContextMenuWidget: () => ContextMenuWidget,
   DarkGlassTheme: () => DarkGlassTheme,
   DarkTheme: () => DarkTheme,
   FullscreenWidget: () => FullscreenWidget,
   GimbalWidget: () => GimbalWidget,
+  IconWidget: () => IconWidget,
+  InfoWidget: () => InfoWidget,
   LightGlassTheme: () => LightGlassTheme,
   LightTheme: () => LightTheme,
+  LoadingWidget: () => LoadingWidget,
   PopupWidget: () => PopupWidget,
   ResetViewWidget: () => ResetViewWidget,
   ScreenshotWidget: () => ScreenshotWidget,
   ScrollbarWidget: () => ScrollbarWidget,
+  SelectorWidget: () => SelectorWidget,
+  ThemeWidget: () => ThemeWidget,
+  ToggleWidget: () => ToggleWidget,
   ZoomWidget: () => ZoomWidget,
   _ButtonGroup: () => ButtonGroup,
-  _ContextMenuWidget: () => ContextMenuWidget,
   _CoordinatesGeocoder: () => CoordinatesGeocoder,
   _CurrentLocationGeocoder: () => CurrentLocationGeocoder,
   _DropdownMenu: () => DropdownMenu,
-  _FpsWidget: () => FpsWidget,
   _GeocoderWidget: () => GeocoderWidget,
   _GoogleGeocoder: () => GoogleGeocoder,
   _IconButton: () => IconButton,
-  _IconMenu: () => IconMenu,
-  _InfoWidget: () => InfoWidget,
-  _LoadingWidget: () => LoadingWidget,
   _MapboxGeocoder: () => MapboxGeocoder,
   _OpenCageGeocoder: () => OpenCageGeocoder,
   _RangeInput: () => RangeInput,
@@ -51,9 +53,7 @@ __export(dist_exports, {
   _SimpleMenu: () => SimpleMenu,
   _SplitterWidget: () => SplitterWidget,
   _StatsWidget: () => StatsWidget,
-  _ThemeWidget: () => ThemeWidget,
-  _TimelineWidget: () => TimelineWidget,
-  _ViewSelectorWidget: () => ViewSelectorWidget
+  _TimelineWidget: () => TimelineWidget
 });
 module.exports = __toCommonJS(dist_exports);
 
@@ -71,9 +71,26 @@ var ButtonGroup = (props) => {
 
 // dist/lib/components/icon-button.js
 var import_jsx_runtime2 = require("preact/jsx-runtime");
+var import_hooks = require("preact/hooks");
+
+// dist/lib/data-url.js
+function getCSSMask(imageUrl) {
+  if (!imageUrl)
+    return void 0;
+  const cssUrl = `url("${imageUrl.replace(/"/g, `'`)}")`;
+  return { maskImage: cssUrl, WebkitMaskImage: cssUrl };
+}
+
+// dist/lib/components/icon-button.js
 var IconButton = (props) => {
-  const { className = "", label, onClick, children } = props;
-  return (0, import_jsx_runtime2.jsx)("div", { className: "deck-widget-button", children: (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" }) }) });
+  const { className = "", style, color, icon, label, onClick, children } = props;
+  const iconStyle = (0, import_hooks.useMemo)(() => {
+    const css = getCSSMask(icon);
+    if (!color)
+      return css;
+    return { ...css, backgroundColor: color };
+  }, [color, icon]);
+  return (0, import_jsx_runtime2.jsx)("div", { className: "deck-widget-button", style, children: (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", style: iconStyle }) }) });
 };
 
 // dist/zoom-widget.js
@@ -448,7 +465,7 @@ var import_preact6 = require("preact");
 
 // dist/lib/components/dropdown-menu.js
 var import_jsx_runtime8 = require("preact/jsx-runtime");
-var import_hooks = require("preact/hooks");
+var import_hooks2 = require("preact/hooks");
 function getMenuItemValue(item) {
   return typeof item === "string" ? item : item.value;
 }
@@ -459,25 +476,29 @@ function getMenuItemIcon(item) {
   return typeof item === "string" ? void 0 : item.icon;
 }
 var DropdownMenu = (props) => {
-  const [isOpen, setIsOpen] = (0, import_hooks.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_hooks2.useState)(false);
   return (0, import_jsx_runtime8.jsx)(SimpleMenu, { ...props, style: { ...props.style, position: "absolute" }, isOpen, onClose: () => setIsOpen(false), trigger: (0, import_jsx_runtime8.jsx)("button", { className: "deck-widget-dropdown-button", onClick: () => setIsOpen(!isOpen), children: (0, import_jsx_runtime8.jsx)("span", { className: `deck-widget-dropdown-icon ${isOpen ? "open" : ""}` }) }) });
 };
 var SimpleMenu = (props) => {
-  const dropdownRef = (0, import_hooks.useRef)(null);
-  const handleClickOutside = (event) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      props.onClose();
-    }
-  };
-  (0, import_hooks.useEffect)(() => {
+  const dropdownRef = (0, import_hooks2.useRef)(null);
+  (0, import_hooks2.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        props.onClose();
+      }
+    };
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  const handleSelect = (value) => {
+  const handleSelect = (value, item) => {
+    var _a, _b;
     if (value) {
-      props.onSelect(value);
+      if (typeof item === "object") {
+        (_a = item.onSelect) == null ? void 0 : _a.call(item);
+      }
+      (_b = props.onSelect) == null ? void 0 : _b.call(props, value);
       props.onClose();
     }
   };
@@ -487,7 +508,7 @@ var SimpleMenu = (props) => {
   return (0, import_jsx_runtime8.jsxs)("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, children: [props.trigger, props.isOpen && (0, import_jsx_runtime8.jsx)("ul", { className: "deck-widget-dropdown-menu", style: props.style, children: props.menuItems.map((item, i) => {
     const value = getMenuItemValue(item);
     const icon = getMenuItemIcon(item);
-    return (0, import_jsx_runtime8.jsxs)("li", { className: `deck-widget-dropdown-item ${value ? "" : "disabled"}`, onClick: () => handleSelect(value), children: [icon && (0, import_jsx_runtime8.jsx)("span", { className: "deck-widget-dropdown-item-icon", style: { maskImage: `url("${icon}")`, WebkitMaskImage: `url("${icon}")` } }), getMenuItemLabel(item)] }, i);
+    return (0, import_jsx_runtime8.jsxs)("li", { className: `deck-widget-dropdown-item ${value ? "" : "disabled"}`, onClick: () => handleSelect(value, item), children: [icon && (0, import_jsx_runtime8.jsx)("span", { className: "deck-widget-dropdown-item-icon", style: getCSSMask(icon) }), getMenuItemLabel(item)] }, i);
   }) })] });
 };
 
@@ -899,34 +920,146 @@ FullscreenWidget.defaultProps = {
 // dist/splitter-widget.js
 var import_jsx_runtime11 = require("preact/jsx-runtime");
 var import_preact8 = require("preact");
-var import_hooks2 = require("preact/hooks");
+var import_hooks3 = require("preact/hooks");
 var import_core9 = require("@deck.gl/core");
+function parseViewLayout(root) {
+  const layoutsById = [];
+  const isViewLayout = (v) => "views" in v;
+  function createManagedViewLayout(l) {
+    const id = layoutsById.length;
+    const minSplit = l.minSplit ?? 0.05;
+    const maxSplit = l.maxSplit ?? 0.95;
+    const split = Math.min(Math.max(l.initialSplit ?? 0.5, minSplit), maxSplit);
+    const managed = {
+      id,
+      orientation: l.orientation,
+      views: l.views,
+      split,
+      editable: l.editable ?? true,
+      minSplit,
+      maxSplit,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    layoutsById.push(managed);
+    managed.views = [
+      isViewLayout(l.views[0]) ? createManagedViewLayout(l.views[0]) : l.views[0],
+      isViewLayout(l.views[1]) ? createManagedViewLayout(l.views[1]) : l.views[1]
+    ];
+    return managed;
+  }
+  createManagedViewLayout(root);
+  return layoutsById;
+}
+function evaluateViews(root) {
+  const views = [];
+  function evaluateViewLayout(l, x, y, width, height) {
+    l.x = x;
+    l.y = y;
+    l.width = width;
+    l.height = height;
+    const child1X = x;
+    const child1Y = y;
+    let child1Width = width;
+    let child1Height = height;
+    let child2X = x;
+    let child2Y = y;
+    let child2Width = width;
+    let child2Height = height;
+    if (l.orientation === "horizontal") {
+      child1Width = width * l.split;
+      child2X = x + child1Width;
+      child2Width = width - child1Width;
+    } else {
+      child1Height = height * l.split;
+      child2Y = y + child1Height;
+      child2Height = height - child1Height;
+    }
+    const [view1, view2] = l.views;
+    if ("views" in view1) {
+      evaluateViewLayout(view1, child1X, child1Y, child1Width, child1Height);
+    } else {
+      views.push(view1.clone({
+        x: `${child1X}%`,
+        y: `${child1Y}%`,
+        width: `${child1Width}%`,
+        height: `${child1Height}%`
+      }));
+    }
+    if ("views" in view2) {
+      evaluateViewLayout(view2, child2X, child2Y, child2Width, child2Height);
+    } else {
+      views.push(view2.clone({
+        x: `${child2X}%`,
+        y: `${child2Y}%`,
+        width: `${child2Width}%`,
+        height: `${child2Height}%`
+      }));
+    }
+  }
+  evaluateViewLayout(root, 0, 0, 100, 100);
+  return views;
+}
 var SplitterWidget = class extends import_core9.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-splitter";
     this.placement = "fill";
+    this.needsUpdate = true;
+    this.viewLayouts = parseViewLayout(this.props.viewLayout);
   }
   setProps(props) {
+    if (props.viewLayout && !(0, import_core9._deepEqual)(props.viewLayout, this.props.viewLayout, -1)) {
+      this.viewLayouts = parseViewLayout(props.viewLayout);
+      this.views = void 0;
+    }
     super.setProps(props);
   }
+  onRedraw() {
+    super.updateHTML();
+  }
+  // Usually widgets rerender their DOM elements here
+  // In this case we need the widget UI to synchronize with deck view states
+  // so we update deck props here and rerender DOM in the next onRedraw
+  updateHTML() {
+    if (!this.views) {
+      this.views = evaluateViews(this.viewLayouts[0]);
+      this.props.onChange(this.views.slice());
+    }
+    requestAnimationFrame(() => {
+      this.doUpdate();
+    });
+  }
+  doUpdate() {
+    if (this.deck) {
+      const deckViews = this.deck.props.views;
+      const isManagedExternally = (
+        // is not empty
+        deckViews && // is not set by us
+        deckViews !== this.lastViews
+      );
+      if (!isManagedExternally && this.lastViews !== this.views) {
+        this.lastViews = this.views;
+        this.deck.setProps({ views: this.views });
+      }
+    }
+  }
+  onChange(newSplit, layout) {
+    layout.split = newSplit;
+    this.views = evaluateViews(this.viewLayouts[0]);
+    this.props.onChange(this.views.slice());
+    this.doUpdate();
+  }
   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_preact8.render)((0, import_jsx_runtime11.jsx)(Splitter, { orientation: this.props.orientation, initialSplit: this.props.initialSplit, onChange: this.props.onChange, onDragStart: this.props.onDragStart, onDragEnd: this.props.onDragEnd }), rootElement);
+    (0, import_preact8.render)((0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: this.viewLayouts.map((layout) => layout.editable && (0, import_jsx_runtime11.jsx)(Splitter, { ...layout, onChange: (newSplit) => this.onChange(newSplit, layout), onDragStart: () => this.props.onDragStart(), onDragEnd: () => this.props.onDragStart() })) }), rootElement);
   }
 };
 SplitterWidget.defaultProps = {
   ...import_core9.Widget.defaultProps,
   id: "splitter-widget",
-  viewId1: "",
-  viewId2: "",
-  orientation: "vertical",
-  initialSplit: 0.5,
+  viewLayout: void 0,
   onChange: () => {
   },
   onDragStart: () => {
@@ -934,162 +1067,62 @@ SplitterWidget.defaultProps = {
   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);
+function Splitter({ orientation, x, y, width, height, split, minSplit, maxSplit, onChange, onDragStart, onDragEnd }) {
+  const [dragging, setDragging] = (0, import_hooks3.useState)(false);
+  const containerRef = (0, import_hooks3.useRef)(null);
+  (0, import_hooks3.useEffect)(() => {
+    if (!dragging) {
+      return void 0;
+    }
+    const handleDragging = (event) => {
+      if (!containerRef.current)
+        return;
+      const rect = containerRef.current.getBoundingClientRect();
+      let newSplit;
+      if (orientation === "horizontal") {
+        newSplit = (event.clientX - rect.left) / rect.width;
+      } else {
+        newSplit = (event.clientY - rect.top) / rect.height;
+      }
+      newSplit = Math.min(Math.max(newSplit, minSplit), maxSplit);
+      onChange == null ? void 0 : onChange(newSplit);
+    };
+    const handleDragEnd = () => {
+      onDragEnd == null ? void 0 : onDragEnd();
+      setDragging(false);
+    };
+    document.addEventListener("pointermove", handleDragging);
+    document.addEventListener("pointerup", handleDragEnd);
+    document.addEventListener("pointerleave", handleDragEnd);
+    return () => {
+      document.removeEventListener("pointermove", handleDragging);
+      document.removeEventListener("pointerup", handleDragEnd);
+      document.removeEventListener("pointerleave", handleDragEnd);
+    };
+  }, [dragging]);
   const handleDragStart = (event) => {
-    dragging.current = true;
+    setDragging(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 splitterStyle = orientation === "horizontal" ? { left: `${split * 100}%` } : { top: `${split * 100}%` };
   const containerStyle = {
     position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
+    top: `${y}%`,
+    left: `${x}%`,
+    width: `${width}%`,
+    height: `${height}%`
   };
-  return (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: containerStyle, children: (0, import_jsx_runtime11.jsx)("div", { style: splitterStyle, onMouseDown: handleDragStart }) });
+  return (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: containerStyle, children: (0, import_jsx_runtime11.jsx)("div", { className: `deck-widget-splitter-handle deck-widget-splitter-handle--${orientation} ${dragging ? "active" : ""}`, style: splitterStyle, onPointerDown: handleDragStart }) });
 }
 
-// dist/view-selector-widget.js
-var import_jsx_runtime13 = require("preact/jsx-runtime");
-var import_preact9 = require("preact");
-var import_core10 = require("@deck.gl/core");
-
-// dist/lib/components/icon-menu.js
-var import_jsx_runtime12 = 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_runtime12.jsxs)("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [(0, import_jsx_runtime12.jsx)(IconButton, { className: props.className, label, onClick: handleButtonClick, children: icon }), menuOpen && (0, import_jsx_runtime12.jsx)("div", { className: "deck-widget-icon-menu", children: (0, import_jsx_runtime12.jsx)(ButtonGroup, { orientation: "vertical", children: props.menuItems.map((item) => (0, import_jsx_runtime12.jsx)(IconButton, { label: item.label, onClick: () => handleSelectItem(item.value), children: item.icon }, item.value)) }) })] });
-}
-
-// dist/view-selector-widget.js
-var ViewSelectorWidget = class extends import_core10.Widget {
-  constructor(props = {}) {
-    super(props);
-    this.className = "deck-widget-view-selector";
-    this.placement = "top-left";
-    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) {
-    (0, import_preact9.render)((0, import_jsx_runtime13.jsx)(IconMenu, { className: "deck-widget-view-selector", menuItems: MENU_ITEMS.map((item) => ({
-      ...item,
-      icon: item.icon()
-    })), initialItem: this.props.initialViewMode, onItemSelected: this.handleSelectMode }), rootElement);
-  }
-};
-ViewSelectorWidget.defaultProps = {
-  ...import_core10.Widget.defaultProps,
-  id: "view-selector",
-  placement: "top-left",
-  viewId: null,
-  label: "Split View",
-  initialViewMode: "single",
-  onViewModeChange: () => {
-  }
-};
-var ICON_STYLE = { width: "24px", height: "24px" };
-var ICONS = {
-  single: () => (0, import_jsx_runtime13.jsx)("svg", { width: "24", height: "24", style: ICON_STYLE, children: (0, import_jsx_runtime13.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_runtime13.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime13.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_runtime13.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_runtime13.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime13.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_runtime13.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_runtime16 = require("preact/jsx-runtime");
-var import_core11 = require("@deck.gl/core");
-var import_preact10 = require("preact");
+var import_jsx_runtime14 = require("preact/jsx-runtime");
+var import_core10 = require("@deck.gl/core");
+var import_preact9 = require("preact");
 
 // dist/lib/components/popover.js
-var import_jsx_runtime14 = require("preact/jsx-runtime");
+var import_jsx_runtime12 = require("preact/jsx-runtime");
 var import_hooks4 = require("preact/hooks");
 var import_dom = require("@floating-ui/dom");
 var Popover = ({ x, y, placement = "right", offset: pixelOffset = 0, arrow: arrowSize = false, arrowColor = "white", children }) => {
@@ -1128,7 +1161,7 @@ var Popover = ({ x, y, placement = "right", offset: pixelOffset = 0, arrow: arro
   (0, import_hooks4.useMemo)(() => {
     var _a;
     (_a = updaterRef.current) == null ? void 0 : _a.call(updaterRef);
-  }, [placement, arrowSize, pixelOffset]);
+  }, [x, y, placement, arrowSize, pixelOffset]);
   (0, import_hooks4.useEffect)(() => {
     if (contentRef.current) {
       contentRef.current.style.visibility = "visible";
@@ -1141,7 +1174,7 @@ var Popover = ({ x, y, placement = "right", offset: pixelOffset = 0, arrow: arro
       cleanup();
     };
   }, []);
-  return (0, import_jsx_runtime14.jsx)("div", { style: { position: "absolute", left: x, top: y }, ref: anchorRef, children: (0, import_jsx_runtime14.jsxs)("div", { className: "deck-widget deck-widget-popover", style: { position: "fixed", visibility: "hidden", pointerEvents: "none" }, ref: contentRef, children: [Boolean(arrowSize) && (0, import_jsx_runtime14.jsx)("div", { className: "deck-widget-popover-arrow", style: { position: "absolute" }, ref: arrowRef }), children] }) });
+  return (0, import_jsx_runtime12.jsx)("div", { style: { position: "absolute", left: x, top: y }, ref: anchorRef, children: (0, import_jsx_runtime12.jsxs)("div", { className: "deck-widget deck-widget-popover", style: { position: "fixed", visibility: "hidden", pointerEvents: "none" }, ref: contentRef, children: [Boolean(arrowSize) && (0, import_jsx_runtime12.jsx)("div", { className: "deck-widget-popover-arrow", style: { position: "absolute" }, ref: arrowRef }), children] }) });
 };
 function createArrow(width, height, color, placement) {
   const result = {
@@ -1181,7 +1214,7 @@ function createArrow(width, height, color, placement) {
 }
 
 // dist/lib/components/user-content.js
-var import_jsx_runtime15 = require("preact/jsx-runtime");
+var import_jsx_runtime13 = require("preact/jsx-runtime");
 var import_hooks5 = require("preact/hooks");
 var UserContent = ({ text, html, element, ...props }) => {
   const containerRef = (0, import_hooks5.useRef)(null);
@@ -1193,11 +1226,11 @@ var UserContent = ({ text, html, element, ...props }) => {
       element == null ? void 0 : element.remove();
     };
   }, [element]);
-  return (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, ...props, dangerouslySetInnerHTML: html ? { __html: html } : void 0, children: text });
+  return (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, ...props, dangerouslySetInnerHTML: html ? { __html: html } : void 0, children: text });
 };
 
 // dist/info-widget.js
-var InfoWidget = class extends import_core11.Widget {
+var InfoWidget = class extends import_core10.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-info";
@@ -1212,6 +1245,11 @@ var InfoWidget = class extends import_core11.Widget {
   onAdd({ deck }) {
     this.deck = deck;
   }
+  onRemove() {
+    if (this.rootElement) {
+      (0, import_preact9.render)(null, this.rootElement);
+    }
+  }
   onViewportChange(viewport) {
     this.viewport = viewport;
     this.updateHTML();
@@ -1248,7 +1286,7 @@ var InfoWidget = class extends import_core11.Widget {
   }
   onRenderHTML(rootElement) {
     if (!this.viewport || this.tooltip === null) {
-      (0, import_preact10.render)(null, rootElement);
+      (0, import_preact9.render)(null, rootElement);
       return;
     }
     const style = {
@@ -1256,12 +1294,12 @@ var InfoWidget = class extends import_core11.Widget {
       ...this.tooltip.style
     };
     const [x, y] = this.viewport.project(this.tooltip.position);
-    const ui = (0, import_jsx_runtime16.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime16.jsx)(UserContent, { className: `deck-widget-popup-content ${this.tooltip.className} ${this.props.className}`, style, html: this.tooltip.html, text: this.tooltip.text, element: this.tooltip.element }) });
-    (0, import_preact10.render)(ui, rootElement);
+    const ui = (0, import_jsx_runtime14.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime14.jsx)(UserContent, { className: `deck-widget-popup-content ${this.tooltip.className} ${this.props.className}`, style, html: this.tooltip.html, text: this.tooltip.text, element: this.tooltip.element }) });
+    (0, import_preact9.render)(ui, rootElement);
   }
 };
 InfoWidget.defaultProps = {
-  ...import_core11.Widget.defaultProps,
+  ...import_core10.Widget.defaultProps,
   id: "info",
   viewId: null,
   mode: "hover",
@@ -1272,10 +1310,10 @@ InfoWidget.defaultProps = {
 };
 
 // dist/popup-widget.js
-var import_jsx_runtime17 = require("preact/jsx-runtime");
-var import_core12 = require("@deck.gl/core");
-var import_preact11 = require("preact");
-var PopupWidget = class extends import_core12.Widget {
+var import_jsx_runtime15 = require("preact/jsx-runtime");
+var import_core11 = require("@deck.gl/core");
+var import_preact10 = require("preact");
+var PopupWidget = class extends import_core11.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-popup";
@@ -1290,6 +1328,11 @@ var PopupWidget = class extends import_core12.Widget {
   onAdd({ deck }) {
     this.deck = deck;
   }
+  onRemove() {
+    if (this.rootElement) {
+      (0, import_preact10.render)(null, this.rootElement);
+    }
+  }
   onViewportChange(viewport) {
     this.viewport = viewport;
     this.updateHTML();
@@ -1309,17 +1352,17 @@ var PopupWidget = class extends import_core12.Widget {
   }
   onRenderHTML(rootElement) {
     if (!this.viewport) {
-      (0, import_preact11.render)(null, rootElement);
+      (0, import_preact10.render)(null, rootElement);
       return;
     }
     const { marker, content, style } = this.props;
     const [x, y] = this.viewport.project(this.props.position);
-    const ui = (0, import_jsx_runtime17.jsxs)("div", { children: [marker && (0, import_jsx_runtime17.jsx)("div", { style: { position: "absolute", left: x, top: y, pointerEvents: "all", cursor: "pointer" }, children: (0, import_jsx_runtime17.jsx)(UserContent, { ...marker, onClick: () => this._setIsOpen(true) }) }), this.isOpen && (0, import_jsx_runtime17.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime17.jsxs)("div", { className: `deck-widget-popup-content ${this.props.className}`, style, children: [this.props.closeButton && (0, import_jsx_runtime17.jsx)("div", { className: "deck-widget-popup-controls", style: { width: "100%", display: "flex", justifyContent: "end" }, children: (0, import_jsx_runtime17.jsx)(IconButton, { className: "deck-widget-popup-close-button", onClick: () => this._setIsOpen(false) }) }), (0, import_jsx_runtime17.jsx)(UserContent, { ...typeof content === "string" ? { text: content } : content })] }) })] });
-    (0, import_preact11.render)(ui, rootElement);
+    const ui = (0, import_jsx_runtime15.jsxs)("div", { children: [marker && (0, import_jsx_runtime15.jsx)("div", { style: { position: "absolute", left: x, top: y, pointerEvents: "all", cursor: "pointer" }, children: (0, import_jsx_runtime15.jsx)(UserContent, { ...marker, onClick: () => this._setIsOpen(true) }) }), this.isOpen && (0, import_jsx_runtime15.jsx)(Popover, { x, y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime15.jsxs)("div", { className: `deck-widget-popup-content ${this.props.className}`, style, children: [this.props.closeButton && (0, import_jsx_runtime15.jsx)("div", { className: "deck-widget-popup-controls", style: { width: "100%", display: "flex", justifyContent: "end" }, children: (0, import_jsx_runtime15.jsx)(IconButton, { className: "deck-widget-popup-close-button", onClick: () => this._setIsOpen(false) }) }), (0, import_jsx_runtime15.jsx)(UserContent, { ...typeof content === "string" ? { text: content } : content })] }) })] });
+    (0, import_preact10.render)(ui, rootElement);
   }
 };
 PopupWidget.defaultProps = {
-  ...import_core12.Widget.defaultProps,
+  ...import_core11.Widget.defaultProps,
   id: "info",
   viewId: null,
   position: [0, 0],
@@ -1336,10 +1379,10 @@ PopupWidget.defaultProps = {
 };
 
 // dist/context-menu-widget.js
-var import_jsx_runtime18 = require("preact/jsx-runtime");
-var import_core13 = require("@deck.gl/core");
-var import_preact12 = require("preact");
-var ContextMenuWidget = class extends import_core13.Widget {
+var import_jsx_runtime16 = require("preact/jsx-runtime");
+var import_core12 = require("@deck.gl/core");
+var import_preact11 = require("preact");
+var ContextMenuWidget = class extends import_core12.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-context-menu";
@@ -1352,7 +1395,7 @@ var ContextMenuWidget = class extends import_core13.Widget {
     (_a = deck.getCanvas()) == null ? void 0 : _a.addEventListener("contextmenu", (event) => this.handleContextMenu(event));
   }
   handleContextMenu(srcEvent) {
-    var _a;
+    var _a, _b, _c;
     const targetRect = srcEvent.target.getBoundingClientRect();
     const x = srcEvent.clientX - targetRect.x;
     const y = srcEvent.clientY - targetRect.y;
@@ -1365,7 +1408,7 @@ var ContextMenuWidget = class extends import_core13.Widget {
       index: -1,
       pixelRatio: 1
     };
-    const menuItems = this.props.getMenuItems(pickInfo, this) || [];
+    const menuItems = ((_c = (_b = this.props).getMenuItems) == null ? void 0 : _c.call(_b, pickInfo, this)) || this.props.menuItems;
     this.menu = menuItems.length > 0 ? {
       items: menuItems,
       pickInfo
@@ -1375,7 +1418,7 @@ var ContextMenuWidget = class extends import_core13.Widget {
   }
   onRenderHTML(rootElement) {
     if (!this.menu) {
-      (0, import_preact12.render)(null, rootElement);
+      (0, import_preact11.render)(null, rootElement);
       return;
     }
     const { items, pickInfo } = this.menu;
@@ -1384,8 +1427,8 @@ var ContextMenuWidget = class extends import_core13.Widget {
       position: "static",
       ...this.props.style
     };
-    const ui = (0, import_jsx_runtime18.jsx)(Popover, { x: pickInfo.x, y: pickInfo.y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime18.jsx)(SimpleMenu, { menuItems: items, onSelect: (value) => this.props.onMenuItemSelected(value, pickInfo), style, isOpen: true, onClose: () => this.hide() }) });
-    (0, import_preact12.render)(ui, rootElement);
+    const ui = (0, import_jsx_runtime16.jsx)(Popover, { x: pickInfo.x, y: pickInfo.y, placement: this.props.placement, arrow: this.props.arrow, arrowColor: "var(--menu-background, #fff)", offset: this.props.offset, children: (0, import_jsx_runtime16.jsx)(SimpleMenu, { menuItems: items, onSelect: (value) => this.props.onMenuItemSelected(value, pickInfo), style, isOpen: true, onClose: () => this.hide() }) });
+    (0, import_preact11.render)(ui, rootElement);
   }
   hide() {
     this.menu = null;
@@ -1393,9 +1436,10 @@ var ContextMenuWidget = class extends import_core13.Widget {
   }
 };
 ContextMenuWidget.defaultProps = {
-  ...import_core13.Widget.defaultProps,
+  ...import_core12.Widget.defaultProps,
   id: "context",
   viewId: null,
+  menuItems: [],
   getMenuItems: void 0,
   onMenuItemSelected: () => {
   },
@@ -1405,12 +1449,12 @@ ContextMenuWidget.defaultProps = {
 };
 
 // dist/scrollbar-widget.js
-var import_jsx_runtime20 = require("preact/jsx-runtime");
-var import_core14 = require("@deck.gl/core");
-var import_preact13 = require("preact");
+var import_jsx_runtime18 = require("preact/jsx-runtime");
+var import_core13 = require("@deck.gl/core");
+var import_preact12 = require("preact");
 
 // dist/lib/components/range-input.js
-var import_jsx_runtime19 = require("preact/jsx-runtime");
+var import_jsx_runtime17 = require("preact/jsx-runtime");
 var import_hooks6 = require("preact/hooks");
 var wheelListenerOptions = { passive: false };
 var clamp = (value, min, max) => {
@@ -1660,10 +1704,10 @@ function RangeInput(props) {
         left: `${offsetPct}%`,
         width: `${sizePct}%`
       };
-      return (0, import_jsx_runtime19.jsx)("div", { className: "deck-widget-range__decoration", style, children: decoration.element }, `decoration-${index}`);
+      return (0, import_jsx_runtime17.jsx)("div", { className: "deck-widget-range__decoration", style, children: decoration.element }, `decoration-${index}`);
     });
   }, [decorations, range, min, vertical]);
-  return (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, tabIndex: 0, role: "scrollbar", "aria-valuemin": min, "aria-valuemax": min + maxStart, "aria-valuenow": clampedStart, "aria-orientation": orientation, className: `${className} deck-widget-range deck-widget-range--${orientation} ${maxStart === 0 ? "deck-widget-range--disabled" : ""}`, children: [stepButtons && (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--start", "aria-label": startButtonAriaLabel, disabled: clampedStart <= min, onClick: handleStepNegative, children: (0, import_jsx_runtime19.jsx)("span", { className: "deck-widget-icon" }) }), (0, import_jsx_runtime19.jsxs)("div", { className: "deck-widget-range__track", ref: trackRef, onClick: handleTrackClick, children: [(0, import_jsx_runtime19.jsx)("div", { className: "deck-widget-range__decorations", children: decorationElements }), (0, import_jsx_runtime19.jsx)("div", { className: "deck-widget-range__thumb", "data-scrollbar-thumb": "true", ref: thumbRef, style: vertical ? { height: `${thumbLength * 100}%`, top: `${thumbOffset * 100}%` } : { width: `${thumbLength * 100}%`, left: `${thumbOffset * 100}%` }, onPointerDown: handleThumbPointerDown, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, onPointerCancel: handleThumbPointerUp })] }), stepButtons && (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--end", "aria-label": endButtonAriaLabel, disabled: clampedStart >= min + maxStart, onClick: handleStepPositive, children: (0, import_jsx_runtime19.jsx)("span", { className: "deck-widget-icon" }) })] });
+  return (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, tabIndex: 0, role: "scrollbar", "aria-valuemin": min, "aria-valuemax": min + maxStart, "aria-valuenow": clampedStart, "aria-orientation": orientation, className: `${className} deck-widget-range deck-widget-range--${orientation} ${maxStart === 0 ? "deck-widget-range--disabled" : ""}`, children: [stepButtons && (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--start", "aria-label": startButtonAriaLabel, disabled: clampedStart <= min, onClick: handleStepNegative, children: (0, import_jsx_runtime17.jsx)("span", { className: "deck-widget-icon" }) }), (0, import_jsx_runtime17.jsxs)("div", { className: "deck-widget-range__track", ref: trackRef, onClick: handleTrackClick, children: [(0, import_jsx_runtime17.jsx)("div", { className: "deck-widget-range__decorations", children: decorationElements }), (0, import_jsx_runtime17.jsx)("div", { className: "deck-widget-range__thumb", "data-scrollbar-thumb": "true", ref: thumbRef, style: vertical ? { height: `${thumbLength * 100}%`, top: `${thumbOffset * 100}%` } : { width: `${thumbLength * 100}%`, left: `${thumbOffset * 100}%` }, onPointerDown: handleThumbPointerDown, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, onPointerCancel: handleThumbPointerUp })] }), stepButtons && (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "deck-widget-range__button deck-widget-range__button--end", "aria-label": endButtonAriaLabel, disabled: clampedStart >= min + maxStart, onClick: handleStepPositive, children: (0, import_jsx_runtime17.jsx)("span", { className: "deck-widget-icon" }) })] });
 }
 
 // dist/scrollbar-widget.js
@@ -1676,7 +1720,7 @@ var clamp2 = (value, min, max) => {
   }
   return value;
 };
-var ScrollbarWidget = class extends import_core14.Widget {
+var ScrollbarWidget = class extends import_core13.Widget {
   constructor(props) {
     const resolved = {
       ...ScrollbarWidget.defaultProps,
@@ -1711,12 +1755,12 @@ var ScrollbarWidget = class extends import_core14.Widget {
     const isVertical = this.isVertical();
     const startLabel = this.props.startButtonAriaLabel ?? (isVertical ? "Scroll up" : "Scroll left");
     const endLabel = this.props.endButtonAriaLabel ?? (isVertical ? "Scroll down" : "Scroll right");
-    const ui = (0, import_jsx_runtime20.jsx)(RangeInput, { min: 0, max: Math.max(0, this.contentSize), step: this.getEffectiveStep(), pageSize: this.getEffectivePage(), value: [clampedOffset, clampedOffset + this.viewportSize], orientation: this.props.orientation, stepButtons: true, startButtonAriaLabel: startLabel, endButtonAriaLabel: endLabel, eventTarget: wheelTarget, decorations, onChange: this.handleRangeChange });
-    (0, import_preact13.render)(ui, element);
+    const ui = (0, import_jsx_runtime18.jsx)(RangeInput, { min: 0, max: Math.max(0, this.contentSize), step: this.getEffectiveStep(), pageSize: this.getEffectivePage(), value: [clampedOffset, clampedOffset + this.viewportSize], orientation: this.props.orientation, stepButtons: true, startButtonAriaLabel: startLabel, endButtonAriaLabel: endLabel, eventTarget: wheelTarget, decorations, onChange: this.handleRangeChange });
+    (0, import_preact12.render)(ui, element);
   }
   onRemove() {
     if (this.rootElement) {
-      (0, import_preact13.render)(null, this.rootElement);
+      (0, import_preact12.render)(null, this.rootElement);
     }
     super.onRemove();
   }
@@ -1753,7 +1797,7 @@ var ScrollbarWidget = class extends import_core14.Widget {
       } : void 0;
       return {
         position: [start - contentStart, end - contentStart],
-        element: (0, import_jsx_runtime20.jsx)("div", { style: {
+        element: (0, import_jsx_runtime18.jsx)("div", { style: {
           pointerEvents: onClick ? "all" : "none",
           width: "100%",
           height: "100%",
@@ -1816,7 +1860,7 @@ var ScrollbarWidget = class extends import_core14.Widget {
   }
 };
 ScrollbarWidget.defaultProps = {
-  ...import_core14.Widget.defaultProps,
+  ...import_core13.Widget.defaultProps,
   contentBounds: null,
   placement: "top-right",
   viewId: null,
@@ -1837,11 +1881,139 @@ function projectBounds(bounds, viewport, isVertical) {
   }, [Infinity, -Infinity]);
 }
 
-// dist/timeline-widget.js
-var import_jsx_runtime21 = require("preact/jsx-runtime");
-var import_core15 = require("@deck.gl/core");
+// dist/icon-widget.js
+var import_jsx_runtime19 = require("preact/jsx-runtime");
+var import_preact13 = require("preact");
+var import_core14 = require("@deck.gl/core");
+var IconWidget = class extends import_core14.Widget {
+  constructor(props) {
+    super(props);
+    this.className = "";
+    this.placement = "top-left";
+    this.setProps(this.props);
+  }
+  setProps(props) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId;
+    super.setProps(props);
+  }
+  onRenderHTML(rootElement) {
+    const { className, style, icon, color, label, onClick } = this.props;
+    (0, import_preact13.render)((0, import_jsx_runtime19.jsx)(IconButton, { className, style, color, icon, label, onClick }), rootElement);
+  }
+};
+IconWidget.defaultProps = {
+  ...import_core14.Widget.defaultProps,
+  id: "icon",
+  placement: "top-left",
+  viewId: null,
+  icon: "",
+  label: "",
+  color: "",
+  onClick: void 0
+};
+
+// dist/toggle-widget.js
+var import_jsx_runtime20 = require("preact/jsx-runtime");
 var import_preact14 = require("preact");
-var TimelineWidget = class extends import_core15.Widget {
+var import_core15 = require("@deck.gl/core");
+var ToggleWidget = class extends import_core15.Widget {
+  constructor(props) {
+    super(props);
+    this.className = "deck-widget-toggle";
+    this.placement = "top-left";
+    this._toggle = () => {
+      var _a, _b;
+      this.checked = !this.checked;
+      (_b = (_a = this.props).onChange) == null ? void 0 : _b.call(_a, this.checked);
+      this.updateHTML();
+    };
+    this.checked = this.props.initialChecked;
+    this.setProps(this.props);
+  }
+  setProps(props) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId;
+    super.setProps(props);
+  }
+  onRenderHTML(rootElement) {
+    const { className, style, icon, label, color, onIcon = icon, onLabel = label, onColor = color } = this.props;
+    const on = this.checked;
+    rootElement.dataset.checked = String(on);
+    (0, import_preact14.render)((0, import_jsx_runtime20.jsx)(IconButton, { className, style, icon: on ? onIcon : icon, label: on ? onLabel : label, color: on ? onColor : color, onClick: this._toggle }), rootElement);
+  }
+};
+ToggleWidget.defaultProps = {
+  ...import_core15.Widget.defaultProps,
+  id: "icon",
+  placement: "top-left",
+  viewId: null,
+  initialChecked: false,
+  icon: "",
+  onIcon: void 0,
+  label: "",
+  onLabel: void 0,
+  color: "",
+  onColor: void 0,
+  onChange: void 0
+};
+
+// dist/selector-widget.js
+var import_jsx_runtime21 = require("preact/jsx-runtime");
+var import_preact15 = require("preact");
+var import_core16 = require("@deck.gl/core");
+var SelectorWidget = class extends import_core16.Widget {
+  constructor(props) {
+    super(props);
+    this.className = "deck-widget-selector";
+    this.placement = "top-left";
+    this.isOpen = false;
+    this._toggleMenu = () => {
+      if (this.isOpen) {
+        this.isOpen = false;
+      } else if (this.rootElement) {
+        this.isOpen = {
+          x: this.rootElement.offsetLeft,
+          y: this.rootElement.offsetTop,
+          placement: this.props.placement.includes("right") ? "left-start" : "right-start"
+        };
+      }
+      this.updateHTML();
+    };
+    this._handleSelectMode = (value) => {
+      this.value = value;
+      this.props.onChange(value);
+      this.updateHTML();
+    };
+    this.value = this.props.initialValue;
+    this.setProps(this.props);
+  }
+  setProps(props) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
+    super.setProps(props);
+  }
+  onRenderHTML(rootElement) {
+    const selectedOption = this.props.options.find((opt) => opt.value === this.value) ?? this.props.options[0];
+    (0, import_preact15.render)((0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsx)(IconButton, { icon: selectedOption.icon, label: selectedOption.label, onClick: this._toggleMenu }), this.isOpen && (0, import_jsx_runtime21.jsx)(Popover, { ...this.isOpen, children: (0, import_jsx_runtime21.jsx)(SimpleMenu, { isOpen: true, style: { pointerEvents: "auto", position: "static" }, menuItems: this.props.options, onSelect: this._handleSelectMode, onClose: this._toggleMenu }) })] }), rootElement);
+  }
+};
+SelectorWidget.defaultProps = {
+  ...import_core16.Widget.defaultProps,
+  id: "view-selector",
+  placement: "top-left",
+  viewId: null,
+  initialValue: "",
+  options: [],
+  onChange: () => {
+  }
+};
+
+// dist/timeline-widget.js
+var import_jsx_runtime22 = require("preact/jsx-runtime");
+var import_core17 = require("@deck.gl/core");
+var import_preact16 = require("preact");
+var TimelineWidget = class extends import_core17.Widget {
   constructor(props = {}) {
     var _a;
     super(props);
@@ -1867,7 +2039,7 @@ var TimelineWidget = class extends import_core15.Widget {
     this.tick = () => {
       const { timeRange: [min, max], step, loop } = this.props;
       if (step > 0) {
-        let next = Math.floor(this.currentTime / step) * step + step;
+        let next = Math.round(this.currentTime / step) * step + step;
         if (next > max) {
           if (this.currentTime < max) {
             next = max;
@@ -1909,15 +2081,20 @@ var TimelineWidget = class extends import_core15.Widget {
     const { timeRange, step, formatLabel } = this.props;
     const currentTime = this.currentTime;
     rootElement.dataset.placement = this.props.placement;
-    (0, import_preact14.render)((0, import_jsx_runtime21.jsxs)("div", { className: "deck-widget-button-group", children: [this.playing ? (0, import_jsx_runtime21.jsx)(IconButton, { label: "Pause", className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime21.jsx)(IconButton, { label: "Play", className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime21.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
+    (0, import_preact16.render)((0, import_jsx_runtime22.jsxs)("div", { className: "deck-widget-button-group", children: [this.playing ? (0, import_jsx_runtime22.jsx)(IconButton, { label: "Pause", className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime22.jsx)(IconButton, { label: "Play", className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime22.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
       {
         position: [currentTime, currentTime + step],
-        element: (0, import_jsx_runtime21.jsx)("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
+        element: (0, import_jsx_runtime22.jsx)("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
       }
     ] })] }), rootElement);
   }
   play() {
     this.playing = true;
+    const { timeRange: [min, max] } = this.props;
+    if (this.currentTime >= max) {
+      this.currentTime = min;
+      this.props.onTimeChange(min);
+    }
     this.updateHTML();
     this.tick();
   }
@@ -1931,7 +2108,7 @@ var TimelineWidget = class extends import_core15.Widget {
   }
 };
 TimelineWidget.defaultProps = {
-  ...import_core15.Widget.defaultProps,
+  ...import_core17.Widget.defaultProps,
   id: "timeline",
   placement: "bottom-left",
   viewId: null,
@@ -1948,10 +2125,10 @@ TimelineWidget.defaultProps = {
 };
 
 // dist/screenshot-widget.js
-var import_jsx_runtime22 = require("preact/jsx-runtime");
-var import_preact15 = require("preact");
-var import_core16 = require("@deck.gl/core");
-var ScreenshotWidget = class extends import_core16.Widget {
+var import_jsx_runtime23 = require("preact/jsx-runtime");
+var import_preact17 = require("preact");
+var import_core18 = require("@deck.gl/core");
+var ScreenshotWidget = class extends import_core18.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-screenshot";
@@ -1964,7 +2141,7 @@ var ScreenshotWidget = class extends import_core16.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    (0, import_preact15.render)((0, import_jsx_runtime22.jsx)(IconButton, { className: "deck-widget-camera", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
+    (0, import_preact17.render)((0, import_jsx_runtime23.jsx)(IconButton, { className: "deck-widget-camera", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
   }
   handleClick() {
     if (this.props.onCapture) {
@@ -1991,7 +2168,7 @@ var ScreenshotWidget = class extends import_core16.Widget {
   }
 };
 ScreenshotWidget.defaultProps = {
-  ...import_core16.Widget.defaultProps,
+  ...import_core18.Widget.defaultProps,
   id: "screenshot",
   placement: "top-left",
   viewId: null,
@@ -2002,10 +2179,10 @@ ScreenshotWidget.defaultProps = {
 };
 
 // dist/theme-widget.js
-var import_jsx_runtime23 = require("preact/jsx-runtime");
-var import_core17 = require("@deck.gl/core");
-var import_core18 = require("@deck.gl/core");
-var import_preact16 = require("preact");
+var import_jsx_runtime24 = require("preact/jsx-runtime");
+var import_core19 = require("@deck.gl/core");
+var import_core20 = require("@deck.gl/core");
+var import_preact18 = require("preact");
 
 // dist/themes.js
 var LightTheme = {
@@ -2122,7 +2299,7 @@ var DarkGlassTheme = {
 };
 
 // dist/theme-widget.js
-var ThemeWidget = class extends import_core18.Widget {
+var ThemeWidget = class extends import_core20.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-theme";
@@ -2139,22 +2316,22 @@ var ThemeWidget = class extends import_core18.Widget {
     super.setProps(props);
     switch (this.themeMode) {
       case "light":
-        if (props.lightModeTheme && !(0, import_core17._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
+        if (props.lightModeTheme && !(0, import_core19._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
           this._setThemeMode("light");
         }
         break;
       case "dark":
-        if (props.darkModeTheme && !(0, import_core17._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
+        if (props.darkModeTheme && !(0, import_core19._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
           this._setThemeMode("dark");
         }
         break;
       default:
-        import_core17.log.warn(`Invalid theme mode ${this.themeMode}`)();
+        import_core19.log.warn(`Invalid theme mode ${this.themeMode}`)();
     }
   }
   onRenderHTML(rootElement) {
     const { lightModeLabel, darkModeLabel } = this.props;
-    (0, import_preact16.render)((0, import_jsx_runtime23.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel, className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
+    (0, import_preact18.render)((0, import_jsx_runtime24.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);
@@ -2169,9 +2346,9 @@ var ThemeWidget = class extends import_core18.Widget {
     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_core17._applyStyles)(container, themeStyle);
+      (0, import_core19._applyStyles)(container, themeStyle);
       const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-      import_core17.log.log(1, `Switched theme to ${label}`, themeStyle)();
+      import_core19.log.log(1, `Switched theme to ${label}`, themeStyle)();
       this.updateHTML();
     }
   }
@@ -2188,7 +2365,7 @@ var ThemeWidget = class extends import_core18.Widget {
   }
 };
 ThemeWidget.defaultProps = {
-  ...import_core18.Widget.defaultProps,
+  ...import_core20.Widget.defaultProps,
   id: "theme",
   placement: "top-left",
   viewId: null,
@@ -2200,10 +2377,10 @@ ThemeWidget.defaultProps = {
 };
 
 // dist/loading-widget.js
-var import_jsx_runtime24 = require("preact/jsx-runtime");
-var import_preact17 = require("preact");
-var import_core19 = require("@deck.gl/core");
-var LoadingWidget = class extends import_core19.Widget {
+var import_jsx_runtime25 = require("preact/jsx-runtime");
+var import_preact19 = require("preact");
+var import_core21 = require("@deck.gl/core");
+var LoadingWidget = class extends import_core21.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-loading";
@@ -2217,9 +2394,9 @@ var LoadingWidget = class extends import_core19.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    (0, import_preact17.render)(
+    (0, import_preact19.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_runtime24.jsx)(IconButton, { className: "deck-widget-spinner", label: this.props.label, onClick: this.handleClick.bind(this) }),
+      this.loading && (0, import_jsx_runtime25.jsx)(IconButton, { className: "deck-widget-spinner", label: this.props.label, onClick: this.handleClick.bind(this) }),
       rootElement
     );
   }
@@ -2235,63 +2412,19 @@ var LoadingWidget = class extends import_core19.Widget {
   }
 };
 LoadingWidget.defaultProps = {
-  ...import_core19.Widget.defaultProps,
+  ...import_core21.Widget.defaultProps,
   id: "loading",
   placement: "top-left",
   viewId: null,
   label: "Loading layer data"
 };
 
-// dist/fps-widget.js
-var import_jsx_runtime25 = require("preact/jsx-runtime");
-var import_core20 = require("@deck.gl/core");
-var import_preact18 = require("preact");
-var FpsWidget = class extends import_core20.Widget {
-  constructor(props = {}) {
-    super(props);
-    this.className = "deck-widget-fps";
-    this.placement = "top-left";
-    this._lastFps = -1;
-    this.setProps(this.props);
-  }
-  setProps(props) {
-    this.placement = props.placement ?? this.placement;
-    this.viewId = props.viewId ?? this.viewId;
-    super.setProps(props);
-  }
-  onAdd({}) {
-    this._lastFps = this._getFps();
-    requestAnimationFrame(() => this._animate());
-  }
-  onRenderHTML(rootElement) {
-    const fps = this._getFps();
-    (0, import_preact18.render)((0, import_jsx_runtime25.jsx)(IconButton, { children: (0, import_jsx_runtime25.jsxs)("div", { className: "text", children: ["FPS", (0, import_jsx_runtime25.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);
-  }
-};
-FpsWidget.defaultProps = {
-  ...import_core20.Widget.defaultProps,
-  id: "fps",
-  placement: "top-left",
-  viewId: null
-};
-
 // dist/stats-widget.js
 var import_jsx_runtime26 = require("preact/jsx-runtime");
-var import_core21 = require("@deck.gl/core");
-var import_core22 = require("@luma.gl/core");
-var import_preact19 = require("preact");
+var import_core22 = require("@deck.gl/core");
+var import_core23 = require("@luma.gl/core");
+var import_preact20 = require("preact");
+var import_hooks7 = require("preact/hooks");
 var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
 function formatTime(time) {
   return time < 1e3 ? `${time.toFixed(2)}ms` : `${(time / 1e3).toFixed(2)}s`;
@@ -2307,7 +2440,7 @@ var DEFAULT_FORMATTERS = {
   fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
   memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
 };
-var StatsWidget = class extends import_core21.Widget {
+var StatsWidget = class extends import_core22.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-stats";
@@ -2318,6 +2451,10 @@ var StatsWidget = class extends import_core21.Widget {
       this.collapsed = !this.collapsed;
       this.updateHTML();
     };
+    this._getFps = () => {
+      var _a;
+      return Math.round(((_a = this.deck) == null ? void 0 : _a.metrics.fps) ?? 0);
+    };
     this._formatters = { ...DEFAULT_FORMATTERS };
     this._resetOnUpdate = { ...this.props.resetOnUpdate };
     this.collapsed = !props.defaultIsExpanded;
@@ -2337,15 +2474,21 @@ var StatsWidget = class extends import_core21.Widget {
     }
     super.setProps(props);
   }
-  onAdd() {
-    this.updateHTML();
+  onRemove() {
+    if (this.rootElement) {
+      (0, import_preact20.render)(null, this.rootElement);
+    }
   }
   onRenderHTML(rootElement) {
-    const stats = this._getStats();
     const collapsed = this.collapsed;
+    if (collapsed) {
+      (0, import_preact20.render)((0, import_jsx_runtime26.jsx)(FpsIcon, { getFps: this._getFps, onClick: this._toggleCollapsed }), rootElement);
+      return;
+    }
+    const stats = this._getStats();
     const title = this.props.title || ("id" in stats ? stats.id : null) || "Stats";
     const items = [];
-    if (!collapsed && stats) {
+    if (stats) {
       stats.forEach((stat) => {
         const lines = this._getLines(stat).split("\n");
         if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
@@ -2356,12 +2499,14 @@ var StatsWidget = class extends import_core21.Widget {
         });
       });
     }
-    (0, import_preact19.render)((0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleCollapsed, children: [(0, import_jsx_runtime26.jsx)("b", { children: title }), (0, import_jsx_runtime26.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime26.jsx)("span", { className: `deck-widget-dropdown-icon ${collapsed ? "" : "open"}` }) })] }), !collapsed && (0, import_jsx_runtime26.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
+    (0, import_preact20.render)((0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleCollapsed, children: [(0, import_jsx_runtime26.jsx)("b", { children: title }), (0, import_jsx_runtime26.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-dropdown-icon open" }) })] }), (0, import_jsx_runtime26.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.updateHTML();
+    if (!this.collapsed) {
+      const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
+      if (this._counter++ % framesPerUpdate === 0) {
+        this.updateHTML();
+      }
     }
   }
   _getStats() {
@@ -2371,7 +2516,7 @@ var StatsWidget = class extends import_core21.Widget {
         const metrics = ((_a = this.deck) == null ? void 0 : _a.metrics) ?? {};
         return Object.entries(metrics);
       case "luma":
-        return Array.from(import_core22.luma.stats.stats.values())[0];
+        return Array.from(import_core23.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();
@@ -2393,7 +2538,7 @@ var StatsWidget = class extends import_core21.Widget {
   }
 };
 StatsWidget.defaultProps = {
-  ...import_core21.Widget.defaultProps,
+  ...import_core22.Widget.defaultProps,
   type: "deck",
   placement: "top-left",
   viewId: null,
@@ -2405,4 +2550,18 @@ StatsWidget.defaultProps = {
   resetOnUpdate: {},
   id: "stats"
 };
+function FpsIcon({ getFps, onClick }) {
+  const [fps, setFps] = (0, import_hooks7.useState)(getFps());
+  (0, import_hooks7.useEffect)(() => {
+    const onUpdate = () => {
+      setFps(getFps());
+      timer = requestAnimationFrame(onUpdate);
+    };
+    let timer = requestAnimationFrame(onUpdate);
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [getFps]);
+  return (0, import_jsx_runtime26.jsx)(IconButton, { onClick, children: (0, import_jsx_runtime26.jsxs)("div", { className: "text", children: ["FPS", (0, import_jsx_runtime26.jsx)("br", {}), fps] }) });
+}
 //# sourceMappingURL=index.cjs.map