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

package/dist/index.cjs

@@ -21,37 +21,39 @@ 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,
-  _GroupedIconButton: () => GroupedIconButton,
   _IconButton: () => IconButton,
-  _IconMenu: () => IconMenu,
-  _InfoWidget: () => InfoWidget,
-  _LoadingWidget: () => LoadingWidget,
   _MapboxGeocoder: () => MapboxGeocoder,
   _OpenCageGeocoder: () => OpenCageGeocoder,
+  _RangeInput: () => RangeInput,
   _ScaleWidget: () => ScaleWidget,
   _SimpleMenu: () => SimpleMenu,
   _SplitterWidget: () => SplitterWidget,
   _StatsWidget: () => StatsWidget,
-  _ThemeWidget: () => ThemeWidget,
-  _TimelineWidget: () => TimelineWidget,
-  _ViewSelectorWidget: () => ViewSelectorWidget
+  _TimelineWidget: () => TimelineWidget
 });
 module.exports = __toCommonJS(dist_exports);
 
@@ -67,11 +69,28 @@ var ButtonGroup = (props) => {
   return (0, import_jsx_runtime.jsx)("div", { className: `deck-widget-button-group ${orientation}`, children });
 };
 
-// dist/lib/components/grouped-icon-button.js
+// dist/lib/components/icon-button.js
 var import_jsx_runtime2 = require("preact/jsx-runtime");
-var GroupedIconButton = (props) => {
-  const { className = "", label, onClick, children } = props;
-  return (0, import_jsx_runtime2.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, title: label, children: children ? children : (0, import_jsx_runtime2.jsx)("div", { className: "deck-widget-icon" }) });
+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 = "", 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
@@ -80,7 +99,6 @@ var ZoomWidget = class extends import_core.Widget {
     super(props);
     this.className = "deck-widget-zoom";
     this.placement = "top-left";
-    this.viewports = {};
     this.setProps(this.props);
   }
   setProps(props) {
@@ -89,16 +107,22 @@ var ZoomWidget = class extends import_core.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    const ui = (0, import_jsx_runtime3.jsxs)(ButtonGroup, { orientation: this.props.orientation, children: [(0, import_jsx_runtime3.jsx)(GroupedIconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), (0, import_jsx_runtime3.jsx)(GroupedIconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] });
+    const ui = (0, import_jsx_runtime3.jsxs)(ButtonGroup, { orientation: this.props.orientation, children: [(0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), (0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] });
     (0, import_preact.render)(ui, rootElement);
   }
-  onViewportChange(viewport) {
-    this.viewports[viewport.id] = viewport;
-  }
-  handleZoom(viewport, nextZoom) {
-    const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "default-view";
+  handleZoom(viewId, nextZoom) {
+    const viewState = this.getViewState(viewId);
+    if (viewState) {
+      const { minZoom, maxZoom } = viewState;
+      if (Number.isFinite(minZoom)) {
+        nextZoom = Math.max(minZoom, nextZoom);
+      }
+      if (Number.isFinite(maxZoom)) {
+        nextZoom = Math.min(maxZoom, nextZoom);
+      }
+    }
     const nextViewState = {
-      ...viewport,
+      ...viewState,
       zoom: nextZoom
     };
     if (this.props.transitionDuration > 0) {
@@ -110,19 +134,21 @@ var ZoomWidget = class extends import_core.Widget {
     this.setViewState(viewId, nextViewState);
   }
   handleZoomIn() {
-    for (const viewport of Object.values(this.viewports)) {
-      this.handleZoom(viewport, viewport.zoom + 1);
+    var _a;
+    const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
+    for (const viewId of viewIds) {
+      const viewState = this.getViewState(viewId);
+      this.handleZoom(viewId, viewState.zoom + 1);
     }
   }
   handleZoomOut() {
-    for (const viewport of Object.values(this.viewports)) {
-      this.handleZoom(viewport, viewport.zoom - 1);
+    var _a;
+    const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
+    for (const viewId of viewIds) {
+      const viewState = this.getViewState(viewId);
+      this.handleZoom(viewId, viewState.zoom - 1);
     }
   }
-  /** @todo - move to deck or widget manager */
-  setViewState(viewId, viewState) {
-    this.deck._onViewStateChange({ viewId, viewState, interactionState: {} });
-  }
 };
 ZoomWidget.defaultProps = {
   ...import_core.Widget.defaultProps,
@@ -136,18 +162,9 @@ ZoomWidget.defaultProps = {
 };
 
 // dist/reset-view-widget.js
-var import_jsx_runtime5 = require("preact/jsx-runtime");
+var import_jsx_runtime4 = require("preact/jsx-runtime");
 var import_preact2 = require("preact");
 var import_core2 = require("@deck.gl/core");
-
-// dist/lib/components/icon-button.js
-var import_jsx_runtime4 = require("preact/jsx-runtime");
-var IconButton = (props) => {
-  const { className = "", label, onClick, children } = props;
-  return (0, import_jsx_runtime4.jsx)("div", { className: "deck-widget-button", children: (0, import_jsx_runtime4.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, title: label, children: children ? children : (0, import_jsx_runtime4.jsx)("div", { className: "deck-widget-icon" }) }) });
-};
-
-// dist/reset-view-widget.js
 var ResetViewWidget = class extends import_core2.Widget {
   constructor(props = {}) {
     super(props);
@@ -161,22 +178,25 @@ var ResetViewWidget = class extends import_core2.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    (0, import_preact2.render)((0, import_jsx_runtime5.jsx)(IconButton, { className: "deck-widget-reset-focus", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
+    (0, import_preact2.render)((0, import_jsx_runtime4.jsx)(IconButton, { className: "deck-widget-reset-focus", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
   }
   handleClick() {
     var _a;
     const initialViewState = this.props.initialViewState || ((_a = this.deck) == null ? void 0 : _a.props.initialViewState);
-    this.setViewState(initialViewState);
+    this.resetViewState(initialViewState);
   }
-  setViewState(viewState) {
-    const viewId = this.props.viewId || "default-view";
-    const nextViewState = {
-      ...viewId !== "default-view" ? viewState == null ? void 0 : viewState[viewId] : viewState
-      // only works for geospatial?
-      // transitionDuration: this.props.transitionDuration,
-      // transitionInterpolator: new FlyToInterpolator()
-    };
-    this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+  resetViewState(viewState) {
+    var _a;
+    const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
+    for (const viewId of viewIds) {
+      const nextViewState = {
+        ...(viewState == null ? void 0 : viewState[viewId]) ?? viewState
+        // only works for geospatial?
+        // transitionDuration: this.props.transitionDuration,
+        // transitionInterpolator: new FlyToInterpolator()
+      };
+      this.setViewState(viewId, nextViewState);
+    }
   }
 };
 ResetViewWidget.defaultProps = {
@@ -189,7 +209,7 @@ ResetViewWidget.defaultProps = {
 };
 
 // dist/gimbal-widget.js
-var import_jsx_runtime6 = require("preact/jsx-runtime");
+var import_jsx_runtime5 = require("preact/jsx-runtime");
 var import_core3 = require("@deck.gl/core");
 var import_preact3 = require("preact");
 var GimbalWidget = class extends import_core3.Widget {
@@ -210,21 +230,21 @@ var GimbalWidget = class extends import_core3.Widget {
     const viewId = this.viewId || ((_a = Object.values(this.viewports)[0]) == null ? void 0 : _a.id) || "default-view";
     const widgetViewport = this.viewports[viewId];
     const { rotationOrbit, rotationX } = this.getNormalizedRotation(widgetViewport);
-    const ui = (0, import_jsx_runtime6.jsx)("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: (0, import_jsx_runtime6.jsxs)("button", { type: "button", onClick: () => {
+    const ui = (0, import_jsx_runtime5.jsx)("div", { className: "deck-widget-button", style: { perspective: 100, pointerEvents: "auto" }, children: (0, import_jsx_runtime5.jsxs)("button", { type: "button", onClick: () => {
       for (const viewport of Object.values(this.viewports)) {
         this.resetOrbitView(viewport);
       }
-    }, title: this.props.label, style: { position: "relative", width: 26, height: 26 }, children: [(0, import_jsx_runtime6.jsx)("svg", { className: "gimbal-outer-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
+    }, title: this.props.label, style: { position: "relative", width: 26, height: 26 }, children: [(0, import_jsx_runtime5.jsx)("svg", { className: "gimbal-outer-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
       position: "absolute",
       top: 0,
       left: 0,
       transform: `rotateY(${rotationOrbit}deg)`
-    }, children: (0, import_jsx_runtime6.jsx)("circle", { cx: "13", cy: "13", r: "10", stroke: "var(--icon-gimbal-outer-color, rgb(68, 92, 204))", strokeWidth: this.props.strokeWidth, fill: "none" }) }), (0, import_jsx_runtime6.jsx)("svg", { className: "gimbal-inner-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
+    }, children: (0, import_jsx_runtime5.jsx)("circle", { cx: "13", cy: "13", r: "10", stroke: "var(--icon-gimbal-outer-color, rgb(68, 92, 204))", strokeWidth: this.props.strokeWidth, fill: "none" }) }), (0, import_jsx_runtime5.jsx)("svg", { className: "gimbal-inner-ring", width: "100%", height: "100%", viewBox: "0 0 26 26", style: {
       position: "absolute",
       top: 0,
       left: 0,
       transform: `rotateX(${rotationX}deg)`
-    }, children: (0, import_jsx_runtime6.jsx)("circle", { cx: "13", cy: "13", r: "7", stroke: "var(--icon-gimbal-inner-color, rgb(240, 92, 68))", strokeWidth: this.props.strokeWidth, fill: "none" }) })] }) });
+    }, children: (0, import_jsx_runtime5.jsx)("circle", { cx: "13", cy: "13", r: "7", stroke: "var(--icon-gimbal-inner-color, rgb(240, 92, 68))", strokeWidth: this.props.strokeWidth, fill: "none" }) })] }) });
     (0, import_preact3.render)(ui, rootElement);
   }
   onViewportChange(viewport) {
@@ -232,7 +252,7 @@ var GimbalWidget = class extends import_core3.Widget {
     this.updateHTML();
   }
   resetOrbitView(viewport) {
-    const viewId = this.getViewId(viewport);
+    const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "OrbitView";
     const viewState = this.getViewState(viewId);
     if ("rotationOrbit" in viewState || "rotationX" in viewState) {
       const nextViewState = {
@@ -244,11 +264,12 @@ var GimbalWidget = class extends import_core3.Widget {
           transitionProps: ["rotationOrbit", "rotationX"]
         })
       };
-      this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+      this.setViewState(viewId, nextViewState);
     }
   }
   getNormalizedRotation(viewport) {
-    const viewState = this.getViewState(this.getViewId(viewport));
+    const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "OrbitView";
+    const viewState = this.getViewState(viewId);
     const [rz, rx] = this.getRotation(viewState);
     const rotationOrbit = normalizeAndClampAngle(rz);
     const rotationX = normalizeAndClampAngle(rx);
@@ -260,24 +281,6 @@ var GimbalWidget = class extends import_core3.Widget {
     }
     return [0, 0];
   }
-  // Move to Widget/WidgetManager?
-  getViewId(viewport) {
-    const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "OrbitView";
-    return viewId;
-  }
-  getViewState(viewId) {
-    const viewManager = this.getViewManager();
-    const viewState = viewId && viewManager.getViewState(viewId) || viewManager.viewState;
-    return viewState;
-  }
-  getViewManager() {
-    var _a;
-    const viewManager = (_a = this.deck) == null ? void 0 : _a.viewManager;
-    if (!viewManager) {
-      throw new Error("wigdet must be added to a deck instance");
-    }
-    return viewManager;
-  }
 };
 GimbalWidget.defaultProps = {
   ...import_core3.Widget.defaultProps,
@@ -303,7 +306,7 @@ function normalizeAndClampAngle(angle) {
 }
 
 // dist/compass-widget.js
-var import_jsx_runtime7 = require("preact/jsx-runtime");
+var import_jsx_runtime6 = require("preact/jsx-runtime");
 var import_core4 = require("@deck.gl/core");
 var import_preact4 = require("preact");
 var CompassWidget = class extends import_core4.Widget {
@@ -321,14 +324,14 @@ var CompassWidget = class extends import_core4.Widget {
   }
   onRenderHTML(rootElement) {
     var _a;
-    const viewId = this.viewId || ((_a = Object.values(this.viewports)[0]) == null ? void 0 : _a.id) || "default-view";
+    const viewId = this.viewId || ((_a = Object.values(this.viewports)[0]) == null ? void 0 : _a.id);
     const widgetViewport = this.viewports[viewId];
     const [rz, rx] = this.getRotation(widgetViewport);
-    const ui = (0, import_jsx_runtime7.jsx)("div", { className: "deck-widget-button", style: { perspective: 100 }, children: (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => {
+    const ui = (0, import_jsx_runtime6.jsx)("div", { className: "deck-widget-button", style: { perspective: 100 }, children: (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: () => {
       for (const viewport of Object.values(this.viewports)) {
         this.handleCompassReset(viewport);
       }
-    }, title: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: (0, import_jsx_runtime7.jsx)("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: (0, import_jsx_runtime7.jsxs)("g", { transform: `rotate(${rz},13,13)`, children: [(0, import_jsx_runtime7.jsx)("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, rgb(240, 92, 68))" }), (0, import_jsx_runtime7.jsx)("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, rgb(204, 204, 204))" })] }) }) }) });
+    }, title: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: (0, import_jsx_runtime6.jsx)("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: (0, import_jsx_runtime6.jsxs)("g", { transform: `rotate(${rz},13,13)`, children: [(0, import_jsx_runtime6.jsx)("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, rgb(240, 92, 68))" }), (0, import_jsx_runtime6.jsx)("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, rgb(204, 204, 204))" })] }) }) }) });
     (0, import_preact4.render)(ui, rootElement);
   }
   onViewportChange(viewport) {
@@ -346,16 +349,17 @@ var CompassWidget = class extends import_core4.Widget {
     return [0, 0];
   }
   handleCompassReset(viewport) {
-    const viewId = this.viewId || viewport.id || "default-view";
+    const viewId = this.viewId || viewport.id;
     if (viewport instanceof import_core4.WebMercatorViewport) {
+      const viewState = this.getViewState(viewId);
       const nextViewState = {
-        ...viewport,
+        ...viewState,
         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: {} });
+      this.setViewState(viewId, nextViewState);
     }
   }
 };
@@ -369,7 +373,7 @@ CompassWidget.defaultProps = {
 };
 
 // dist/scale-widget.js
-var import_jsx_runtime8 = require("preact/jsx-runtime");
+var import_jsx_runtime7 = require("preact/jsx-runtime");
 var import_preact5 = require("preact");
 var import_core5 = require("@deck.gl/core");
 var ScaleWidget = class extends import_core5.Widget {
@@ -391,7 +395,7 @@ var ScaleWidget = class extends import_core5.Widget {
     const lineOffsetX = 50;
     const svgWidth = lineOffsetX + this.scaleWidth;
     const tickHeight = 10;
-    (0, import_preact5.render)((0, import_jsx_runtime8.jsxs)("svg", { className: "deck-widget-scale", width: svgWidth, height: 30, style: { overflow: "visible", background: "transparent" }, onClick: this.handleClick.bind(this), children: [(0, import_jsx_runtime8.jsx)("text", { x: lineOffsetX + 5, y: "10", textAnchor: "end", alignmentBaseline: "middle", style: { fontSize: "16px", fill: "black", fontWeight: "bold", fontFamily: "sans-serif" }, children: this.scaleText }), (0, import_jsx_runtime8.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: "15", stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime8.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime8.jsx)("line", { x1: lineOffsetX + this.scaleWidth, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" })] }), rootElement);
+    (0, import_preact5.render)((0, import_jsx_runtime7.jsxs)("svg", { className: "deck-widget-scale", width: svgWidth, height: 30, style: { overflow: "visible", background: "transparent" }, onClick: this.handleClick.bind(this), children: [(0, import_jsx_runtime7.jsx)("text", { x: lineOffsetX + 5, y: "10", textAnchor: "end", alignmentBaseline: "middle", style: { fontSize: "16px", fill: "black", fontWeight: "bold", fontFamily: "sans-serif" }, children: this.scaleText }), (0, import_jsx_runtime7.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: "15", stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime7.jsx)("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" }), (0, import_jsx_runtime7.jsx)("line", { x1: lineOffsetX + this.scaleWidth, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" })] }), rootElement);
   }
   onViewportChange(viewport) {
     if (!("latitude" in viewport))
@@ -454,14 +458,14 @@ function computeScaleCandidate(metersPerPixel) {
 }
 
 // dist/geocoder-widget.js
-var import_jsx_runtime10 = require("preact/jsx-runtime");
+var import_jsx_runtime9 = require("preact/jsx-runtime");
 var import_core6 = require("@deck.gl/core");
 var import_core7 = require("@deck.gl/core");
 var import_preact6 = require("preact");
 
 // dist/lib/components/dropdown-menu.js
-var import_jsx_runtime9 = require("preact/jsx-runtime");
-var import_hooks = require("preact/hooks");
+var import_jsx_runtime8 = require("preact/jsx-runtime");
+var import_hooks2 = require("preact/hooks");
 function getMenuItemValue(item) {
   return typeof item === "string" ? item : item.value;
 }
@@ -472,30 +476,39 @@ function getMenuItemIcon(item) {
   return typeof item === "string" ? void 0 : item.icon;
 }
 var DropdownMenu = (props) => {
-  const [isOpen, setIsOpen] = (0, import_hooks.useState)(false);
-  const dropdownRef = (0, import_hooks.useRef)(null);
-  const toggleDropdown = () => setIsOpen(!isOpen);
-  const handleClickOutside = (event) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  };
-  (0, import_hooks.useEffect)(() => {
+  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_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 = (item) => {
-    props.onSelect(getMenuItemValue(item));
-    setIsOpen(false);
+  const handleSelect = (value, item) => {
+    var _a, _b;
+    if (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();
+    }
   };
   if (props.menuItems.length === 0) {
     return null;
   }
-  return (0, import_jsx_runtime9.jsxs)("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, style: props.style, children: [(0, import_jsx_runtime9.jsx)("button", { className: "deck-widget-dropdown-button", onClick: toggleDropdown, children: (0, import_jsx_runtime9.jsx)("span", { className: `deck-widget-dropdown-icon ${isOpen ? "open" : ""}` }) }), isOpen && (0, import_jsx_runtime9.jsx)("ul", { className: "deck-widget-dropdown-menu", children: props.menuItems.map((item) => {
+  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_runtime9.jsxs)("li", { className: "deck-widget-dropdown-item", onClick: () => handleSelect(item), children: [icon && (0, import_jsx_runtime9.jsx)("span", { className: "deck-widget-dropdown-item-icon", style: { maskImage: `url("${icon}")`, WebkitMaskImage: `url("${icon}")` } }), getMenuItemLabel(item)] }, getMenuItemValue(item));
+    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);
   }) })] });
 };
 
@@ -731,7 +744,7 @@ var GeocoderWidget = class extends import_core6.Widget {
       try {
         const coordinates = await CurrentLocationGeocoder.geocode();
         if (coordinates) {
-          this.setViewState(coordinates);
+          this.flyTo(coordinates);
         }
       } catch (error) {
         this.geocodeHistory.errorText = error instanceof Error ? error.message : "Location error";
@@ -748,10 +761,9 @@ var GeocoderWidget = class extends import_core6.Widget {
         this.updateHTML();
       }
       if (coordinates) {
-        this.setViewState(coordinates);
+        this.flyTo(coordinates);
       }
     };
-    this.viewports = {};
     this.setProps(this.props);
   }
   setProps(props) {
@@ -765,7 +777,7 @@ var GeocoderWidget = class extends import_core6.Widget {
   }
   onRenderHTML(rootElement) {
     const menuItems = this.props._geolocation ? [CURRENT_LOCATION_ITEM, ...this.geocodeHistory.addressHistory] : [...this.geocodeHistory.addressHistory];
-    (0, import_preact6.render)((0, import_jsx_runtime10.jsxs)("div", { className: "deck-widget-geocoder", children: [(0, import_jsx_runtime10.jsx)("input", {
+    (0, import_preact6.render)((0, import_jsx_runtime9.jsxs)("div", { className: "deck-widget-geocoder", children: [(0, import_jsx_runtime9.jsx)("input", {
       className: "deck-widget-geocoder-input",
       type: "text",
       placeholder: this.isGettingLocation ? "Finding your location..." : this.geocoder.placeholderLocation ?? "Enter address or location",
@@ -776,24 +788,23 @@ var GeocoderWidget = class extends import_core6.Widget {
         return this.setInput(((_a = e.target) == null ? void 0 : _a.value) || "");
       },
       onKeyPress: this.handleKeyPress
-    }), (0, import_jsx_runtime10.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect }), this.geocodeHistory.errorText && (0, import_jsx_runtime10.jsx)("div", { className: "deck-widget-geocoder-error", children: this.geocodeHistory.errorText })] }), rootElement);
+    }), (0, import_jsx_runtime9.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect }), this.geocodeHistory.errorText && (0, import_jsx_runtime9.jsx)("div", { className: "deck-widget-geocoder-error", children: this.geocodeHistory.errorText })] }), rootElement);
   }
-  // TODO - MOVE TO WIDGETIMPL?
-  setViewState(viewState) {
-    const viewId = this.props.viewId || (viewState == null ? void 0 : viewState.id) || "default-view";
-    const viewport = this.viewports[viewId] || {};
-    const nextViewState = {
-      ...viewport,
-      ...viewState
-    };
-    if (this.props.transitionDuration > 0) {
-      nextViewState.transitionDuration = this.props.transitionDuration;
-      nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core7.FlyToInterpolator() : new import_core7.LinearInterpolator();
+  flyTo(viewState) {
+    var _a;
+    const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
+    for (const viewId of viewIds) {
+      const currentViewState = this.getViewState(viewId);
+      const nextViewState = {
+        ...currentViewState,
+        ...viewState
+      };
+      if (this.props.transitionDuration > 0) {
+        nextViewState.transitionDuration = this.props.transitionDuration;
+        nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core7.FlyToInterpolator() : new import_core7.LinearInterpolator();
+      }
+      this.setViewState(viewId, nextViewState);
     }
-    this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
-  }
-  onViewportChange(viewport) {
-    this.viewports[viewport.id] = viewport;
   }
 };
 GeocoderWidget.defaultProps = {
@@ -829,7 +840,7 @@ function getGeocoder(props) {
 }
 
 // dist/fullscreen-widget.js
-var import_jsx_runtime11 = require("preact/jsx-runtime");
+var import_jsx_runtime10 = require("preact/jsx-runtime");
 var import_core8 = require("@deck.gl/core");
 var import_preact7 = require("preact");
 var FullscreenWidget = class extends import_core8.Widget {
@@ -847,7 +858,7 @@ var FullscreenWidget = class extends import_core8.Widget {
     document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
   }
   onRenderHTML(rootElement) {
-    (0, import_preact7.render)((0, import_jsx_runtime11.jsx)(IconButton, { onClick: () => {
+    (0, import_preact7.render)((0, import_jsx_runtime10.jsx)(IconButton, { onClick: () => {
       this.handleClick().catch((err) => import_core8.log.error(err)());
     }, label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel, className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
   }
@@ -857,8 +868,8 @@ var FullscreenWidget = class extends import_core8.Widget {
     super.setProps(props);
   }
   getContainer() {
-    var _a, _b;
-    return this.props.container || ((_b = (_a = this.deck) == null ? void 0 : _a.getCanvas()) == null ? void 0 : _b.parentElement);
+    var _a, _b, _c;
+    return this.props.container || ((_a = this.deck) == null ? void 0 : _a.props.parent) || ((_c = (_b = this.deck) == null ? void 0 : _b.getCanvas()) == null ? void 0 : _c.parentElement);
   }
   onFullscreenChange() {
     const prevFullscreen = this.fullscreen;
@@ -907,36 +918,148 @@ FullscreenWidget.defaultProps = {
 };
 
 // dist/splitter-widget.js
-var import_jsx_runtime12 = require("preact/jsx-runtime");
+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_runtime12.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: () => {
@@ -944,463 +1067,1034 @@ 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_runtime12.jsx)("div", { ref: containerRef, style: containerStyle, children: (0, import_jsx_runtime12.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
+// dist/info-widget.js
 var import_jsx_runtime14 = require("preact/jsx-runtime");
-var import_preact9 = require("preact");
 var import_core10 = require("@deck.gl/core");
+var import_preact9 = require("preact");
 
-// dist/lib/components/icon-menu.js
-var import_jsx_runtime13 = require("preact/jsx-runtime");
-var import_hooks3 = require("preact/hooks");
-function IconMenu(props) {
-  const [menuOpen, setMenuOpen] = (0, import_hooks3.useState)(false);
-  const containerRef = (0, import_hooks3.useRef)(null);
-  const handleClickOutside = (event) => {
-    if (containerRef.current && !containerRef.current.contains(event.target)) {
-      setMenuOpen(false);
-    }
+// dist/lib/components/popover.js
+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 }) => {
+  const anchorRef = (0, import_hooks4.useRef)(null);
+  const contentRef = (0, import_hooks4.useRef)(null);
+  const arrowRef = (0, import_hooks4.useRef)(null);
+  const updaterRef = (0, import_hooks4.useRef)();
+  updaterRef.current = () => {
+    if (!anchorRef.current || !contentRef.current)
+      return;
+    const arrowWidth = Array.isArray(arrowSize) ? arrowSize[0] : arrowSize || 0;
+    const arrowHeight = Array.isArray(arrowSize) ? arrowSize[1] : arrowSize || 0;
+    const padding = pixelOffset + Math.max(arrowHeight, arrowWidth);
+    const middleware = placement.includes("-") ? [(0, import_dom.offset)(padding), (0, import_dom.flip)(), (0, import_dom.shift)()] : [(0, import_dom.offset)(padding), (0, import_dom.shift)(), (0, import_dom.flip)()];
+    if (arrowRef.current)
+      middleware.push((0, import_dom.arrow)({ element: arrowRef.current }));
+    (0, import_dom.computePosition)(anchorRef.current, contentRef.current, {
+      placement,
+      strategy: "fixed",
+      middleware
+    }).then((popoverPos) => {
+      if (contentRef.current) {
+        Object.assign(contentRef.current.style, {
+          left: `${popoverPos.x}px`,
+          top: `${popoverPos.y}px`
+        });
+      }
+      const arrowData = popoverPos.middlewareData.arrow;
+      if (arrowData && arrowRef.current) {
+        const arrowStyle = createArrow(arrowWidth, arrowHeight, arrowColor, popoverPos.placement);
+        arrowStyle.transform = `translate(${arrowData.x || 0}px, ${arrowData.y || 0}px)`;
+        Object.assign(arrowRef.current.style, arrowStyle);
+      }
+    });
   };
-  (0, import_hooks3.useEffect)(() => {
-    document.addEventListener("mousedown", handleClickOutside);
+  (0, import_hooks4.useMemo)(() => {
+    var _a;
+    (_a = updaterRef.current) == null ? void 0 : _a.call(updaterRef);
+  }, [x, y, placement, arrowSize, pixelOffset]);
+  (0, import_hooks4.useEffect)(() => {
+    if (contentRef.current) {
+      contentRef.current.style.visibility = "visible";
+    }
+    const cleanup = (0, import_dom.autoUpdate)(anchorRef.current, contentRef.current, () => {
+      var _a;
+      return (_a = updaterRef.current) == null ? void 0 : _a.call(updaterRef);
+    });
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      cleanup();
     };
-  }, [containerRef]);
-  const [selectedItem, setSelectedItem] = (0, import_hooks3.useState)(props.initialItem);
-  const handleSelectItem = (item) => {
-    setSelectedItem(item);
-    setMenuOpen(false);
-    props.onItemSelected(item);
+  }, []);
+  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 = {
+    width: 0,
+    height: 0,
+    top: "",
+    bottom: "",
+    left: "",
+    right: ""
   };
-  const handleButtonClick = () => setMenuOpen(!menuOpen);
-  const selectedMenuItem = props.menuItems.find((item) => item.value === selectedItem);
-  const label = props.label || (selectedMenuItem == null ? void 0 : selectedMenuItem.label) || "";
-  const icon = props.icon || (selectedMenuItem == null ? void 0 : selectedMenuItem.icon);
-  return (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [(0, import_jsx_runtime13.jsx)(IconButton, { className: props.className, label, onClick: handleButtonClick, children: icon }), menuOpen && (0, import_jsx_runtime13.jsx)("div", { className: "deck-widget-icon-menu", children: (0, import_jsx_runtime13.jsx)(ButtonGroup, { orientation: "vertical", children: props.menuItems.map((item) => (0, import_jsx_runtime13.jsx)(GroupedIconButton, { label: item.label, onClick: () => handleSelectItem(item.value), children: item.icon }, item.value)) }) })] });
+  if (placement.startsWith("bottom")) {
+    result.borderLeft = `${width / 2}px solid transparent`;
+    result.borderRight = `${width / 2}px solid transparent`;
+    result.borderBottom = `${height}px solid ${color}`;
+    result.borderTop = "";
+    result.top = `${-height}px`;
+  } else if (placement.startsWith("top")) {
+    result.borderLeft = `${width / 2}px solid transparent`;
+    result.borderRight = `${width / 2}px solid transparent`;
+    result.borderTop = `${height}px solid ${color}`;
+    result.borderBottom = "";
+    result.bottom = `${-height}px`;
+  } else if (placement.startsWith("right")) {
+    result.borderTop = `${width / 2}px solid transparent`;
+    result.borderBottom = `${width / 2}px solid transparent`;
+    result.borderRight = `${height}px solid ${color}`;
+    result.borderLeft = "";
+    result.left = `${-height}px`;
+  } else if (placement.startsWith("left")) {
+    result.borderTop = `${width / 2}px solid transparent`;
+    result.borderBottom = `${width / 2}px solid transparent`;
+    result.borderLeft = `${height}px solid ${color}`;
+    result.borderRight = "";
+    result.right = `${-height}px`;
+  }
+  return result;
 }
 
-// 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);
+// dist/lib/components/user-content.js
+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);
+  (0, import_hooks5.useEffect)(() => {
+    if (containerRef.current && element) {
+      containerRef.current.append(element);
+    }
+    return () => {
+      element == null ? void 0 : element.remove();
     };
-    this.viewMode = this.props.initialViewMode;
+  }, [element]);
+  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_core10.Widget {
+  constructor(props) {
+    super(props);
+    this.className = "deck-widget-info";
+    this.placement = "fill";
+    this.tooltip = null;
     this.setProps(this.props);
   }
   setProps(props) {
-    this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
+  onAdd({ deck }) {
+    this.deck = deck;
+  }
+  onRemove() {
+    if (this.rootElement) {
+      (0, import_preact9.render)(null, this.rootElement);
+    }
+  }
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+    this.updateHTML();
+  }
+  onHover(info) {
+    if (this.props.mode === "hover") {
+      this.tooltip = this._getTooltip(info);
+    }
+  }
+  onClick(info) {
+    if (this.props.mode === "click") {
+      this.tooltip = this._getTooltip(info);
+    }
+  }
+  _getTooltip(info) {
+    if (!this.props.getTooltip)
+      return null;
+    const content = this.props.getTooltip(info, this) ?? null;
+    if (content === null)
+      return null;
+    const normalizedTooltip = typeof content === "string" ? { text: content } : content;
+    const position = normalizedTooltip.position || info.coordinate;
+    if (!position)
+      return null;
+    return {
+      position,
+      text: "",
+      html: "",
+      element: null,
+      className: "",
+      style: {},
+      ...normalizedTooltip
+    };
+  }
   onRenderHTML(rootElement) {
-    (0, import_preact9.render)((0, import_jsx_runtime14.jsx)(IconMenu, { className: "deck-widget-view-selector", menuItems: MENU_ITEMS.map((item) => ({
-      ...item,
-      icon: item.icon()
-    })), initialItem: this.props.initialViewMode, onItemSelected: this.handleSelectMode }), rootElement);
+    if (!this.viewport || this.tooltip === null) {
+      (0, import_preact9.render)(null, rootElement);
+      return;
+    }
+    const style = {
+      ...this.props.style,
+      ...this.tooltip.style
+    };
+    const [x, y] = this.viewport.project(this.tooltip.position);
+    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);
   }
 };
-ViewSelectorWidget.defaultProps = {
+InfoWidget.defaultProps = {
   ...import_core10.Widget.defaultProps,
-  id: "view-selector",
-  placement: "top-left",
+  id: "info",
   viewId: null,
-  label: "Split View",
-  initialViewMode: "single",
-  onViewModeChange: () => {
-  }
-};
-var ICON_STYLE = { width: "24px", height: "24px" };
-var ICONS = {
-  single: () => (0, import_jsx_runtime14.jsx)("svg", { width: "24", height: "24", style: ICON_STYLE, children: (0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }) }),
-  "split-horizontal": () => (0, import_jsx_runtime14.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "4", width: "16", height: "7", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }), (0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "13", width: "16", height: "7", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" })] }),
-  "split-vertical": () => (0, import_jsx_runtime14.jsxs)("svg", { width: "24", height: "24", style: ICON_STYLE, children: [(0, import_jsx_runtime14.jsx)("rect", { x: "4", y: "4", width: "7", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }), (0, import_jsx_runtime14.jsx)("rect", { x: "13", y: "4", width: "7", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" })] })
-};
-var MENU_ITEMS = [
-  { value: "single", icon: ICONS.single, label: "Single View" },
-  { value: "split-horizontal", icon: ICONS["split-horizontal"], label: "Split Horizontal" },
-  { value: "split-vertical", icon: ICONS["split-vertical"], label: "Split Vertical" }
-];
+  mode: "hover",
+  getTooltip: void 0,
+  placement: "right",
+  offset: 10,
+  arrow: 10
+};
 
-// dist/info-widget.js
+// dist/popup-widget.js
 var import_jsx_runtime15 = require("preact/jsx-runtime");
 var import_core11 = require("@deck.gl/core");
 var import_preact10 = require("preact");
-var InfoWidget = class extends import_core11.Widget {
+var PopupWidget = class extends import_core11.Widget {
   constructor(props) {
     super(props);
-    this.className = "deck-widget-info";
+    this.className = "deck-widget-popup";
     this.placement = "fill";
     this.setProps(this.props);
+    this.isOpen = this.props.defaultIsOpen;
   }
   setProps(props) {
     this.viewId = props.viewId ?? this.viewId;
     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;
+  onAdd({ deck }) {
+    this.deck = deck;
+  }
+  onRemove() {
+    if (this.rootElement) {
+      (0, import_preact10.render)(null, this.rootElement);
+    }
   }
   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 == null ? void 0 : tooltip.style }
-      });
+  onClick() {
+    if (this.props.closeOnClickOutside) {
+      this._setIsOpen(false);
     }
   }
-  onClick(info) {
+  _setIsOpen(isOpen) {
     var _a, _b;
-    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 ((_b = (_a = this.props).onClick) == null ? void 0 : _b.call(_a, this, info)) || false;
-  }
-  onAdd({ deck, viewId }) {
-    this.deck = deck;
-    if (!viewId) {
-      this.viewport = deck.getViewports()[0];
-    } else {
-      this.viewport = deck.getViewports().find((viewport) => viewport.id === viewId);
-    }
+    if (this.isOpen === isOpen)
+      return;
+    this.isOpen = isOpen;
+    (_b = (_a = this.props).onOpenChange) == null ? void 0 : _b.call(_a, isOpen);
+    this.updateHTML();
   }
   onRenderHTML(rootElement) {
     if (!this.viewport) {
+      (0, import_preact10.render)(null, rootElement);
       return;
     }
-    const [longitude, latitude] = this.props.position;
-    const [x, y] = this.viewport.project([longitude, latitude]);
-    const minOffset = this.props.minOffset || 0;
-    const gap = 10;
-    const arrowHeight = 8;
-    const arrowWidth = 16;
-    const isAbove = y > this.viewport.height / 2;
-    const background = this.props.style && this.props.style.background || "rgba(255,255,255,0.9)";
-    const ui = this.props.visible ? (0, import_jsx_runtime15.jsxs)("div", { className: "popup-container", style: { position: "absolute", left: 0, top: 0 }, children: [(0, import_jsx_runtime15.jsx)("div", { className: "popup-content", style: {
-      background,
-      padding: "10px",
-      position: "relative",
-      // Include any additional styles
-      ...this.props.style
-    }, children: this.props.text }), (0, import_jsx_runtime15.jsx)("div", { className: "popup-arrow", style: { position: "absolute", width: "0px", height: "0px" } })] }) : null;
+    const { marker, content, style } = this.props;
+    const [x, y] = this.viewport.project(this.props.position);
+    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);
-    requestAnimationFrame(() => {
-      if (!this.props.visible || !rootElement.firstChild || !this.viewport)
-        return;
-      const container = rootElement.firstChild;
-      const contentEl = container.querySelector(".popup-content");
-      const arrowEl = container.querySelector(".popup-arrow");
-      if (!contentEl || !arrowEl)
-        return;
-      const contentRect = contentEl.getBoundingClientRect();
-      const popupWidth = contentRect.width;
-      const popupHeight = contentRect.height;
-      let computedLeft = x - popupWidth / 2;
-      let computedTop;
-      if (isAbove) {
-        computedTop = y - gap - arrowHeight - popupHeight;
-      } else {
-        computedTop = y + gap + arrowHeight;
-      }
-      if (computedLeft < minOffset) {
-        computedLeft = minOffset;
-      }
-      if (computedLeft + popupWidth > this.viewport.width - minOffset) {
-        computedLeft = this.viewport.width - minOffset - popupWidth;
-      }
-      if (isAbove) {
-        if (computedTop < minOffset) {
-          computedTop = minOffset;
-        }
-      } else if (computedTop + popupHeight + arrowHeight > this.viewport.height - minOffset) {
-        computedTop = this.viewport.height - minOffset - popupHeight - arrowHeight;
-      }
-      container.style.left = `${computedLeft}px`;
-      container.style.top = `${computedTop}px`;
-      container.style.transform = "";
-      let arrowLeft = x - computedLeft - arrowWidth / 2;
-      arrowLeft = Math.max(arrowLeft, 0);
-      arrowLeft = Math.min(arrowLeft, popupWidth - arrowWidth);
-      if (isAbove) {
-        arrowEl.style.left = `${arrowLeft}px`;
-        arrowEl.style.bottom = `-${arrowHeight}px`;
-        arrowEl.style.top = "";
-        arrowEl.style.borderLeft = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderRight = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderTop = `${arrowHeight}px solid ${background}`;
-        arrowEl.style.borderBottom = "";
-      } else {
-        arrowEl.style.left = `${arrowLeft}px`;
-        arrowEl.style.top = `-${arrowHeight}px`;
-        arrowEl.style.bottom = "";
-        arrowEl.style.borderLeft = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderRight = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderBottom = `${arrowHeight}px solid ${background}`;
-        arrowEl.style.borderTop = "";
-      }
-    });
   }
 };
-InfoWidget.defaultProps = {
+PopupWidget.defaultProps = {
   ...import_core11.Widget.defaultProps,
   id: "info",
-  position: [0, 0],
-  text: "",
-  visible: false,
-  minOffset: 0,
   viewId: null,
-  mode: "hover",
-  getTooltip: void 0,
-  onClick: void 0
+  position: [0, 0],
+  marker: null,
+  defaultIsOpen: true,
+  content: "",
+  placement: "right",
+  offset: 10,
+  arrow: 10,
+  closeButton: true,
+  closeOnClickOutside: false,
+  onOpenChange: () => {
+  }
 };
 
 // dist/context-menu-widget.js
-var import_jsx_runtime17 = require("preact/jsx-runtime");
+var import_jsx_runtime16 = require("preact/jsx-runtime");
 var import_core12 = require("@deck.gl/core");
 var import_preact11 = require("preact");
-
-// dist/lib/components/simple-menu.js
-var import_jsx_runtime16 = require("preact/jsx-runtime");
-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 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 (0, import_jsx_runtime16.jsx)("div", { style: styleOverride, children: menuItems.map(({ key, label }) => (0, import_jsx_runtime16.jsx)("button", { style: { ...MENU_ITEM_STYLE, display: "block" }, onClick: (_) => onItemSelected(key), children: label }, key)) });
-};
-
-// dist/context-menu-widget.js
-var MOUSE_BUTTON_RIGHT = 2;
-var MOUSE_WHICH_RIGHT = 3;
 var ContextMenuWidget = class extends import_core12.Widget {
   constructor(props) {
     super(props);
     this.className = "deck-widget-context-menu";
     this.placement = "fill";
-    this.pickInfo = null;
-    this.pickInfo = null;
+    this.menu = null;
     this.setProps(this.props);
   }
   onAdd({ deck }) {
-    var _a, _b;
-    const element = document.createElement("div");
-    element.classList.add("deck-widget", "deck-widget-context-menu");
-    const style = {
-      margin: "0px",
-      top: "0px",
-      left: "0px",
-      position: "absolute",
-      pointerEvents: "auto"
+    var _a;
+    (_a = deck.getCanvas()) == null ? void 0 : _a.addEventListener("contextmenu", (event) => this.handleContextMenu(event));
+  }
+  handleContextMenu(srcEvent) {
+    var _a, _b, _c;
+    const targetRect = srcEvent.target.getBoundingClientRect();
+    const x = srcEvent.clientX - targetRect.x;
+    const y = srcEvent.clientY - targetRect.y;
+    const pickInfo = ((_a = this.deck) == null ? void 0 : _a.pickObject({ x, y })) || {
+      x,
+      y,
+      picked: false,
+      layer: null,
+      color: null,
+      index: -1,
+      pixelRatio: 1
     };
-    Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
-    (_a = deck.getCanvas()) == null ? void 0 : _a.addEventListener("click", () => this.hide());
-    (_b = deck.getCanvas()) == null ? void 0 : _b.addEventListener("contextmenu", (event) => this.handleContextMenu(event));
-    return element;
+    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
+    } : null;
+    srcEvent.preventDefault();
+    this.updateHTML();
   }
   onRenderHTML(rootElement) {
-    const { visible, position, menuItems } = this.props;
-    const ui = visible && menuItems.length ? (0, import_jsx_runtime17.jsx)(SimpleMenu, { menuItems, onItemSelected: (key) => this.props.onMenuItemSelected(key, this.pickInfo), position, style: { pointerEvents: "auto" } }) : null;
+    if (!this.menu) {
+      (0, import_preact11.render)(null, rootElement);
+      return;
+    }
+    const { items, pickInfo } = this.menu;
+    const style = {
+      pointerEvents: "auto",
+      position: "static",
+      ...this.props.style
+    };
+    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);
   }
-  handleContextMenu(srcEvent) {
-    var _a, _b, _c;
-    if (srcEvent && (srcEvent.button === MOUSE_BUTTON_RIGHT || srcEvent.which === MOUSE_WHICH_RIGHT)) {
-      this.pickInfo = ((_a = this.deck) == null ? void 0 : _a.pickObject({
-        x: srcEvent.clientX,
-        y: srcEvent.clientY
-      })) || null;
-      const menuItems = this.pickInfo && ((_c = (_b = this.props).getMenuItems) == null ? void 0 : _c.call(_b, this.pickInfo, this)) || [];
-      const visible = menuItems.length > 0;
-      this.setProps({
-        visible,
-        position: { x: srcEvent.clientX, y: srcEvent.clientY },
-        menuItems
-      });
-      this.updateHTML();
-      srcEvent.preventDefault();
-      return visible;
-    }
-    return false;
-  }
   hide() {
-    this.setProps({ visible: false });
+    this.menu = null;
+    this.updateHTML();
   }
 };
 ContextMenuWidget.defaultProps = {
   ...import_core12.Widget.defaultProps,
   id: "context",
   viewId: null,
-  visible: false,
-  position: { x: 0, y: 0 },
-  getMenuItems: void 0,
   menuItems: [],
-  // eslint-disable-next-line no-console
-  onMenuItemSelected: (key, pickInfo) => console.log("Context menu item selected:", key, pickInfo)
+  getMenuItems: void 0,
+  onMenuItemSelected: () => {
+  },
+  placement: "bottom-start",
+  offset: 10,
+  arrow: false
 };
 
-// dist/timeline-widget.js
+// dist/scrollbar-widget.js
 var import_jsx_runtime18 = require("preact/jsx-runtime");
 var import_core13 = require("@deck.gl/core");
 var import_preact12 = require("preact");
-var TimelineWidget = class extends import_core13.Widget {
+
+// dist/lib/components/range-input.js
+var import_jsx_runtime17 = require("preact/jsx-runtime");
+var import_hooks6 = require("preact/hooks");
+var wheelListenerOptions = { passive: false };
+var clamp = (value, min, max) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+var getTrackDimension = (track, vertical) => {
+  if (!track || !track.firstElementChild) {
+    return [0, 0];
+  }
+  const rect = track.firstElementChild.getBoundingClientRect();
+  if (vertical) {
+    return [rect.top, rect.height];
+  }
+  return vertical ? [rect.top, rect.height] : [rect.left, rect.width];
+};
+var getEffectiveStep = (step, range) => {
+  if (typeof step === "number" && !Number.isNaN(step) && step > 0) {
+    return step;
+  }
+  return Math.max(1, range / 10 || 1);
+};
+var getEffectivePage = (pageSize, rangeSize) => {
+  if (typeof pageSize === "number" && !Number.isNaN(pageSize) && pageSize > 0) {
+    return pageSize;
+  }
+  return Math.max(1, rangeSize || 1);
+};
+function RangeInput(props) {
+  const { className = "", min, max, step, value, orientation, pageSize, stepButtons = false, startButtonAriaLabel, endButtonAriaLabel, eventTarget, decorations = [], onChange } = props;
+  const vertical = orientation !== "horizontal";
+  const rootRef = (0, import_hooks6.useRef)(null);
+  const trackRef = (0, import_hooks6.useRef)(null);
+  const thumbRef = (0, import_hooks6.useRef)(null);
+  const dragStateRef = (0, import_hooks6.useRef)(null);
+  const [trackLength, setTrackLength] = (0, import_hooks6.useState)(0);
+  const range = max - min;
+  const rangeSize = Math.max(0, value[1] - value[0]);
+  const maxStart = Math.max(0, range - rangeSize);
+  const clampedStart = clamp(value[0], min, min + maxStart);
+  const { thumbLength, thumbOffset } = (0, import_hooks6.useMemo)(() => {
+    if (trackLength <= 0 || range <= 0) {
+      return { thumbLength: 0, thumbOffset: 0 };
+    }
+    if (range <= rangeSize) {
+      return { thumbLength: 1, thumbOffset: 0 };
+    }
+    const nextThumbLength = rangeSize / range;
+    const travel = Math.max(0, 1 - nextThumbLength);
+    const ratio = maxStart <= 0 ? 0 : clamp((clampedStart - min) / maxStart, 0, 1);
+    return {
+      thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
+      thumbOffset: travel * ratio
+    };
+  }, [trackLength, range, rangeSize, maxStart, clampedStart, min]);
+  const emitRange = (0, import_hooks6.useCallback)((nextStart) => {
+    if (!onChange) {
+      return;
+    }
+    const clamped = clamp(nextStart, min, min + maxStart);
+    onChange([clamped, clamped + rangeSize]);
+  }, [onChange, min, maxStart, rangeSize]);
+  const handleStepNegative = (0, import_hooks6.useCallback)((event) => {
+    event.stopPropagation();
+    emitRange(clampedStart - getEffectiveStep(step, range));
+  }, [emitRange, clampedStart, step, range]);
+  const handleStepPositive = (0, import_hooks6.useCallback)((event) => {
+    event.stopPropagation();
+    emitRange(clampedStart + getEffectiveStep(step, range));
+  }, [emitRange, clampedStart, step, range]);
+  const handleTrackClick = (0, import_hooks6.useCallback)((event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    if ((target == null ? void 0 : target.dataset.scrollbarThumb) === "true") {
+      return;
+    }
+    const track = trackRef.current;
+    if (!track) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const [trackStart] = getTrackDimension(track, vertical);
+    const coordinate = vertical ? event.clientY - trackStart : event.clientX - trackStart;
+    const span = Math.max(1, 1 - thumbLength) * trackLength;
+    const thumbCenter = thumbLength / 2 * trackLength;
+    const ratio = span <= 0 ? 0 : clamp((coordinate - thumbCenter) / span, 0, 1);
+    emitRange(min + ratio * maxStart);
+  }, [vertical, trackLength, thumbLength, emitRange, min, maxStart]);
+  const handleThumbPointerDown = (event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const track = trackRef.current;
+    if (!track) {
+      return;
+    }
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      startCoord: vertical ? event.clientY : event.clientX,
+      startRatio: thumbOffset,
+      min,
+      max,
+      maxStart
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleThumbPointerMove = (0, import_hooks6.useCallback)((event) => {
+    const state = dragStateRef.current;
+    if (!state || state.pointerId !== event.pointerId) {
+      return;
+    }
+    const [trackStart, trackLength2] = getTrackDimension(trackRef.current, vertical);
+    const coordinate = vertical ? event.clientY : event.clientX;
+    const delta = coordinate - state.startCoord;
+    const ratio = state.startRatio + delta / trackLength2;
+    const nextStart = clamp(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
+    emitRange(nextStart);
+    event.preventDefault();
+  }, [emitRange, vertical]);
+  const handleThumbPointerUp = (0, import_hooks6.useCallback)((event) => {
+    var _a;
+    const state = dragStateRef.current;
+    if (state && state.pointerId === event.pointerId) {
+      dragStateRef.current = null;
+      (_a = thumbRef.current) == null ? void 0 : _a.releasePointerCapture(event.pointerId);
+      event.preventDefault();
+    }
+  }, []);
+  const handleKeyDown = (0, import_hooks6.useCallback)((event) => {
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowLeft":
+        if (vertical && event.key === "ArrowUp" || !vertical && event.key === "ArrowLeft") {
+          emitRange(clampedStart - getEffectiveStep(step, range));
+          event.preventDefault();
+        }
+        break;
+      case "ArrowDown":
+      case "ArrowRight":
+        if (vertical && event.key === "ArrowDown" || !vertical && event.key === "ArrowRight") {
+          emitRange(clampedStart + getEffectiveStep(step, range));
+          event.preventDefault();
+        }
+        break;
+      case "PageUp":
+        emitRange(clampedStart - getEffectivePage(pageSize, rangeSize));
+        event.preventDefault();
+        break;
+      case "PageDown":
+        emitRange(clampedStart + getEffectivePage(pageSize, rangeSize));
+        event.preventDefault();
+        break;
+      case "Home":
+        emitRange(min);
+        event.preventDefault();
+        break;
+      case "End":
+        emitRange(min + maxStart);
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  }, [vertical, emitRange, clampedStart, step, range, pageSize, rangeSize, min, maxStart]);
+  const handleWheel = (0, import_hooks6.useCallback)((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (maxStart === 0) {
+      return;
+    }
+    let delta = vertical ? event.deltaY : event.deltaX;
+    if (!vertical && delta === 0) {
+      delta = event.deltaY;
+    }
+    if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+      delta *= getEffectiveStep(step, range);
+    } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+      delta *= getEffectivePage(pageSize, rangeSize);
+    }
+    if (delta === 0) {
+      return;
+    }
+    emitRange(clampedStart + delta);
+  }, [emitRange, clampedStart, maxStart, vertical, step, range, pageSize, rangeSize]);
+  (0, import_hooks6.useLayoutEffect)(() => {
+    setTrackLength(getTrackDimension(trackRef.current, vertical)[1]);
+  }, [vertical]);
+  (0, import_hooks6.useLayoutEffect)(() => {
+    const track = trackRef.current;
+    if (!track) {
+      return void 0;
+    }
+    const update = () => {
+      setTrackLength(getTrackDimension(track, vertical)[1]);
+    };
+    update();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(update);
+      observer.observe(track);
+      return () => observer.disconnect();
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", update);
+      return () => window.removeEventListener("resize", update);
+    }
+    return void 0;
+  }, [vertical]);
+  (0, import_hooks6.useEffect)(() => {
+    const eventRoot = eventTarget ?? rootRef.current;
+    if (!eventRoot)
+      return void 0;
+    eventRoot.addEventListener("keydown", handleKeyDown);
+    eventRoot.addEventListener("wheel", handleWheel, wheelListenerOptions);
+    return () => {
+      eventRoot.removeEventListener("keydown", handleKeyDown);
+      eventRoot.removeEventListener("wheel", handleWheel, wheelListenerOptions);
+    };
+  }, [eventTarget, handleKeyDown, handleWheel]);
+  const decorationElements = (0, import_hooks6.useMemo)(() => {
+    if (!decorations.length || range <= 0) {
+      return [];
+    }
+    return decorations.map((decoration, index) => {
+      const [start, end] = decoration.position;
+      const startRatio = (start - min) / range;
+      const endRatio = (end - min) / range;
+      const offsetPct = Math.round(startRatio * 1e3) / 10;
+      const sizePct = Math.max(0, Math.round((endRatio - startRatio) * 1e3) / 10);
+      const style = vertical ? {
+        left: "0",
+        width: "100%",
+        top: `${offsetPct}%`,
+        height: `${sizePct}%`
+      } : {
+        top: "0",
+        height: "100%",
+        left: `${offsetPct}%`,
+        width: `${sizePct}%`
+      };
+      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_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
+var clamp2 = (value, min, max) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+var ScrollbarWidget = class extends import_core13.Widget {
+  constructor(props) {
+    const resolved = {
+      ...ScrollbarWidget.defaultProps,
+      ...props
+    };
+    super(resolved);
+    this.className = "deck-widget-scrollbar";
+    this.placement = "fill";
+    this.contentSize = 0;
+    this.viewportSize = 0;
+    this.scrollOffset = 0;
+    this.handleRangeChange = (nextValue) => {
+      this.emitScroll(nextValue[0]);
+    };
+    this.viewId = resolved.viewId ?? null;
+  }
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+    this.onRenderHTML();
+  }
+  onRenderHTML() {
+    const element = this.rootElement;
+    if (!element) {
+      return;
+    }
+    element.dataset.placement = this.props.placement;
+    const viewport = this.viewport;
+    this.updateViewport(viewport);
+    const clampedOffset = this.getClampedOffset();
+    const wheelTarget = this.getWheelEventTarget(this.props.captureWheel ? "global" : "local");
+    const decorations = this.getDecorations(viewport);
+    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_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_preact12.render)(null, this.rootElement);
+    }
+    super.onRemove();
+  }
+  updateViewport(viewport) {
+    if (!viewport) {
+      this.contentSize = 0;
+      this.scrollOffset = 0;
+      this.viewportSize = 0;
+      return;
+    }
+    const { contentBounds } = this.props;
+    const isVertical = this.isVertical();
+    const projectedBounds = contentBounds ? projectBounds(contentBounds, viewport, isVertical) : [0, 0];
+    this.contentSize = projectedBounds[1] - projectedBounds[0];
+    this.scrollOffset = -projectedBounds[0];
+    this.viewportSize = isVertical ? viewport.height : viewport.width;
+  }
+  getDecorations(viewport) {
+    const { decorations = [], contentBounds } = this.props;
+    if (!viewport || !contentBounds || decorations.length === 0) {
+      return [];
+    }
+    const isVertical = this.isVertical();
+    const [contentStart] = projectBounds(contentBounds, viewport, isVertical);
+    return decorations.map((decoration) => {
+      const [start, end] = projectBounds(decoration.contentBounds, viewport, isVertical);
+      const onClick = decoration.onClick ? (e) => {
+        var _a;
+        const handled = (_a = decoration.onClick) == null ? void 0 : _a.call(decoration, e);
+        if (handled) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      } : void 0;
+      return {
+        position: [start - contentStart, end - contentStart],
+        element: (0, import_jsx_runtime18.jsx)("div", { style: {
+          pointerEvents: onClick ? "all" : "none",
+          width: "100%",
+          height: "100%",
+          backgroundColor: decoration.color
+        }, title: decoration.title, onClick })
+      };
+    });
+  }
+  getWheelEventTarget(mode) {
+    var _a, _b, _c;
+    if (mode === null)
+      return null;
+    if (mode === "local")
+      return this.rootElement;
+    return ((_a = this.deck) == null ? void 0 : _a.props.parent) || ((_c = (_b = this.deck) == null ? void 0 : _b.getCanvas()) == null ? void 0 : _c.parentElement) || this.rootElement;
+  }
+  getMaxScroll() {
+    return Math.max(0, this.contentSize - this.viewportSize);
+  }
+  getClampedOffset() {
+    const maxScroll = this.getMaxScroll();
+    return clamp2(this.scrollOffset, 0, maxScroll);
+  }
+  isVertical() {
+    return this.props.orientation !== "horizontal";
+  }
+  getEffectiveStep() {
+    if (typeof this.props.stepSize === "number" && !Number.isNaN(this.props.stepSize)) {
+      return this.props.stepSize;
+    }
+    return Math.max(1, this.viewportSize / 10 || 1);
+  }
+  getEffectivePage() {
+    if (typeof this.props.pageSize === "number" && !Number.isNaN(this.props.pageSize)) {
+      return this.props.pageSize;
+    }
+    return this.viewportSize;
+  }
+  emitScroll(next) {
+    const maxScroll = this.getMaxScroll();
+    const target = clamp2(Math.round(next), 0, maxScroll);
+    const viewport = this.viewport;
+    if (viewport && target !== this.getClampedOffset()) {
+      const pixel = viewport.project(viewport.position);
+      if (this.isVertical()) {
+        pixel[1] -= target - this.scrollOffset;
+      } else {
+        pixel[0] -= target - this.scrollOffset;
+      }
+      const { target: newTarget } = viewport.panByPosition(viewport.position, pixel);
+      this.deck._onViewStateChange({
+        viewId: viewport.id,
+        viewState: {
+          ...this.getViewState(viewport.id),
+          target: newTarget
+        },
+        interactionState: {}
+      });
+    }
+  }
+};
+ScrollbarWidget.defaultProps = {
+  ...import_core13.Widget.defaultProps,
+  contentBounds: null,
+  placement: "top-right",
+  viewId: null,
+  orientation: "vertical",
+  stepSize: null,
+  pageSize: null,
+  startButtonAriaLabel: "",
+  endButtonAriaLabel: "",
+  captureWheel: false,
+  decorations: []
+};
+function projectBounds(bounds, viewport, isVertical) {
+  return bounds.map(([x, y]) => viewport.project([x, y, 0])).reduce((range, [x, y]) => {
+    const value = isVertical ? y : x;
+    range[0] = Math.min(range[0], value);
+    range[1] = Math.max(range[1], value);
+    return range;
+  }, [Infinity, -Infinity]);
+}
+
+// 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 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);
     this.id = "timeline";
     this.className = "deck-widget-timeline";
-    this.placement = "bottom-left";
+    this.placement = "fill";
     this.playing = false;
     this.timerId = null;
     this.handlePlayPause = () => {
       if (this.playing) {
         this.stop();
       } else {
-        this.start();
+        this.play();
       }
     };
-    this.handleSliderChange = (e) => {
-      const input = e.target;
-      const val = Number(input.value);
-      this.currentTime = val;
-      this.props.onTimeChange(val);
+    this.handleTimeChange = ([value]) => {
+      var _a2;
+      this.currentTime = value;
+      (_a2 = this.props.timeline) == null ? void 0 : _a2.setTime(value);
+      this.props.onTimeChange(value);
       this.updateHTML();
     };
     this.tick = () => {
-      const [min, max] = this.props.timeRange;
-      let next = this.currentTime + this.props.step;
-      if (next > max) {
-        next = min;
+      const { timeRange: [min, max], step, loop } = this.props;
+      if (step > 0) {
+        let next = Math.round(this.currentTime / step) * step + step;
+        if (next > max) {
+          if (this.currentTime < max) {
+            next = max;
+          } else if (loop) {
+            next = min;
+          } else {
+            next = max;
+            this.playing = false;
+          }
+        }
+        this.currentTime = next;
+        this.props.onTimeChange(next);
+        this.updateHTML();
       }
-      this.currentTime = next;
-      this.props.onTimeChange(next);
-      this.updateHTML();
       if (this.playing) {
         this.timerId = window.setTimeout(this.tick, this.props.playInterval);
+      } else {
+        this.timerId = null;
       }
     };
     this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+    (_a = this.props.timeline) == null ? void 0 : _a.setTime(this.currentTime);
     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;
+    if (this.props.autoPlay)
+      this.play();
   }
   onRemove() {
     this.stop();
   }
   onRenderHTML(rootElement) {
-    (0, import_preact12.render)((0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [(0, import_jsx_runtime18.jsx)(IconButton, { label: this.playing ? "Pause" : "Play", onClick: this.handlePlayPause, children: (0, import_jsx_runtime18.jsx)("div", { className: "text", children: this.playing ? "\u23F8" : "\u25B6" }) }), (0, import_jsx_runtime18.jsx)("input", { type: "range", className: "timeline-slider", min: this.props.timeRange[0], max: this.props.timeRange[1], step: this.props.step, value: this.currentTime, onInput: this.handleSliderChange })] }), rootElement);
+    const { timeRange, step, formatLabel } = this.props;
+    const currentTime = this.currentTime;
+    rootElement.dataset.placement = this.props.placement;
+    (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_runtime22.jsx)("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
+      }
+    ] })] }), rootElement);
   }
-  start() {
+  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();
   }
@@ -1414,23 +2108,27 @@ var TimelineWidget = class extends import_core13.Widget {
   }
 };
 TimelineWidget.defaultProps = {
-  ...import_core13.Widget.defaultProps,
+  ...import_core17.Widget.defaultProps,
   id: "timeline",
   placement: "bottom-left",
   viewId: null,
+  timeline: null,
   timeRange: [0, 100],
   step: 1,
   initialTime: void 0,
   onTimeChange: () => {
   },
-  playInterval: 1e3
+  autoPlay: false,
+  loop: false,
+  playInterval: 1e3,
+  formatLabel: String
 };
 
 // dist/screenshot-widget.js
-var import_jsx_runtime19 = require("preact/jsx-runtime");
-var import_preact13 = require("preact");
-var import_core14 = require("@deck.gl/core");
-var ScreenshotWidget = class extends import_core14.Widget {
+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";
@@ -1443,7 +2141,7 @@ var ScreenshotWidget = class extends import_core14.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    (0, import_preact13.render)((0, import_jsx_runtime19.jsx)(IconButton, { className: "deck-widget-camera", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
+    (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) {
@@ -1470,7 +2168,7 @@ var ScreenshotWidget = class extends import_core14.Widget {
   }
 };
 ScreenshotWidget.defaultProps = {
-  ...import_core14.Widget.defaultProps,
+  ...import_core18.Widget.defaultProps,
   id: "screenshot",
   placement: "top-left",
   viewId: null,
@@ -1481,10 +2179,10 @@ ScreenshotWidget.defaultProps = {
 };
 
 // dist/theme-widget.js
-var import_jsx_runtime20 = require("preact/jsx-runtime");
-var import_core15 = require("@deck.gl/core");
-var import_core16 = require("@deck.gl/core");
-var import_preact14 = require("preact");
+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 = {
@@ -1507,7 +2205,13 @@ var LightTheme = {
   "--menu-border": "unset",
   "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
   "--menu-text": "rgb(24, 24, 26, 1)",
-  "--menu-item-hover": "rgba(0, 0, 0, 0.08)"
+  "--menu-item-hover": "rgba(0, 0, 0, 0.08)",
+  "--range-step-button-size": "24px",
+  "--range-track-size": "16px",
+  "--range-thumb-size": "10px",
+  "--range-track-color": "#d8d8e5",
+  "--range-thumb-color": "#616166",
+  "--range-decoration-active-color": "#f8dd50"
 };
 var DarkTheme = {
   "--widget-margin": "12px",
@@ -1529,7 +2233,13 @@ var DarkTheme = {
   "--menu-border": "unset",
   "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
   "--menu-text": "rgb(215, 214, 229, 1)",
-  "--menu-item-hover": "rgba(255, 255, 255, 0.1)"
+  "--menu-item-hover": "rgba(255, 255, 255, 0.1)",
+  "--range-step-button-size": "24px",
+  "--range-track-size": "16px",
+  "--range-thumb-size": "10px",
+  "--range-track-color": "#2c2c30",
+  "--range-thumb-color": "#9e9da8",
+  "--range-decoration-active-color": "#dd7d2c"
 };
 var LightGlassTheme = {
   "--widget-margin": "12px",
@@ -1551,7 +2261,13 @@ var LightGlassTheme = {
   "--menu-border": "1px solid rgba(255, 255, 255, 0.6)",
   "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
   "--menu-text": "rgb(24, 24, 26, 1)",
-  "--menu-item-hover": "rgba(0, 0, 0, 0.08)"
+  "--menu-item-hover": "rgba(0, 0, 0, 0.08)",
+  "--range-step-button-size": "24px",
+  "--range-track-size": "16px",
+  "--range-thumb-size": "10px",
+  "--range-track-color": "rgba(215, 214, 229, 0.3)",
+  "--range-thumb-color": "rgba(97, 97, 102, 1)",
+  "--range-decoration-active-color": "rgba(255, 215, 0, 0.6)"
 };
 var DarkGlassTheme = {
   "--widget-margin": "12px",
@@ -1573,11 +2289,17 @@ var DarkGlassTheme = {
   "--menu-border": "1px solid rgba(18, 18, 20, 0.75)",
   "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
   "--menu-text": "rgb(215, 214, 229, 1)",
-  "--menu-item-hover": "rgba(255, 255, 255, 0.1)"
+  "--menu-item-hover": "rgba(255, 255, 255, 0.1)",
+  "--range-step-button-size": "24px",
+  "--range-track-size": "16px",
+  "--range-thumb-size": "10px",
+  "--range-track-color": "rgba(24, 24, 26, 0.3)",
+  "--range-thumb-color": "rgba(158, 157, 168, 1)",
+  "--range-decoration-active-color": "rgba(255, 145, 0, 0.6)"
 };
 
 // dist/theme-widget.js
-var ThemeWidget = class extends import_core16.Widget {
+var ThemeWidget = class extends import_core20.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-theme";
@@ -1594,22 +2316,22 @@ var ThemeWidget = class extends import_core16.Widget {
     super.setProps(props);
     switch (this.themeMode) {
       case "light":
-        if (props.lightModeTheme && !(0, import_core15._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_core15._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
+        if (props.darkModeTheme && !(0, import_core19._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
           this._setThemeMode("dark");
         }
         break;
       default:
-        import_core15.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_preact14.render)((0, import_jsx_runtime20.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel, className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
+    (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);
@@ -1624,20 +2346,26 @@ var ThemeWidget = class extends import_core16.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_core15._applyStyles)(container, themeStyle);
+      (0, import_core19._applyStyles)(container, themeStyle);
       const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-      import_core15.log.log(1, `Switched theme to ${label}`, themeStyle)();
+      import_core19.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;
+    if (initialThemeMode !== "auto") {
+      return initialThemeMode;
+    }
+    if (typeof window === "undefined") {
+      return "light";
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   }
 };
 ThemeWidget.defaultProps = {
-  ...import_core16.Widget.defaultProps,
+  ...import_core20.Widget.defaultProps,
   id: "theme",
   placement: "top-left",
   viewId: null,
@@ -1649,10 +2377,10 @@ ThemeWidget.defaultProps = {
 };
 
 // dist/loading-widget.js
-var import_jsx_runtime21 = require("preact/jsx-runtime");
-var import_preact15 = require("preact");
-var import_core17 = require("@deck.gl/core");
-var LoadingWidget = class extends import_core17.Widget {
+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";
@@ -1666,9 +2394,9 @@ var LoadingWidget = class extends import_core17.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    (0, import_preact15.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_runtime21.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
     );
   }
@@ -1684,65 +2412,19 @@ var LoadingWidget = class extends import_core17.Widget {
   }
 };
 LoadingWidget.defaultProps = {
-  ...import_core17.Widget.defaultProps,
+  ...import_core21.Widget.defaultProps,
   id: "loading",
   placement: "top-left",
   viewId: null,
   label: "Loading layer data"
 };
 
-// dist/fps-widget.js
-var import_jsx_runtime22 = require("preact/jsx-runtime");
-var import_core18 = require("@deck.gl/core");
-var import_preact16 = require("preact");
-var FpsWidget = class extends import_core18.Widget {
-  constructor(props = {}) {
-    super(props);
-    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_preact16.render)((0, import_jsx_runtime22.jsx)(IconButton, { children: (0, import_jsx_runtime22.jsxs)("div", { className: "text", children: ["FPS", (0, import_jsx_runtime22.jsx)("br", {}), fps] }) }), rootElement);
-  }
-  _animate() {
-    const fps = this._getFps();
-    if (this._lastFps !== fps) {
-      this._lastFps = fps;
-      this.updateHTML();
-    }
-    requestAnimationFrame(() => this._animate());
-  }
-  _getFps() {
-    var _a;
-    return Math.round(((_a = this.deck) == null ? void 0 : _a.metrics.fps) ?? 0);
-  }
-};
-FpsWidget.defaultProps = {
-  ...import_core18.Widget.defaultProps,
-  id: "fps",
-  placement: "top-left",
-  viewId: null
-};
-
 // dist/stats-widget.js
-var import_jsx_runtime23 = require("preact/jsx-runtime");
-var import_core19 = require("@deck.gl/core");
-var import_core20 = require("@luma.gl/core");
-var import_preact17 = require("preact");
-var RIGHT_ARROW = "\u25B6";
-var DOWN_ARROW = "\u2B07";
+var import_jsx_runtime26 = require("preact/jsx-runtime");
+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`;
@@ -1758,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_core19.Widget {
+var StatsWidget = class extends import_core22.Widget {
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-stats";
@@ -1769,8 +2451,13 @@ var StatsWidget = class extends import_core19.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;
     this.setProps(props);
   }
   setProps(props) {
@@ -1787,31 +2474,39 @@ var StatsWidget = class extends import_core19.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]) {
           stat.reset();
         }
         lines.forEach((line, i) => {
-          items.push((0, import_jsx_runtime23.jsx)("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i}`));
+          items.push((0, import_jsx_runtime26.jsx)("div", { style: { whiteSpace: "pre" }, children: line }, `${stat.name}-${i}`));
         });
       });
     }
-    (0, import_preact17.render)((0, import_jsx_runtime23.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime23.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleCollapsed, children: [collapsed ? RIGHT_ARROW : DOWN_ARROW, " ", title] }), !collapsed && (0, import_jsx_runtime23.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
+    (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() {
@@ -1821,7 +2516,7 @@ var StatsWidget = class extends import_core19.Widget {
         const metrics = ((_a = this.deck) == null ? void 0 : _a.metrics) ?? {};
         return Object.entries(metrics);
       case "luma":
-        return Array.from(import_core20.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();
@@ -1843,10 +2538,11 @@ var StatsWidget = class extends import_core19.Widget {
   }
 };
 StatsWidget.defaultProps = {
-  ...import_core19.Widget.defaultProps,
+  ...import_core22.Widget.defaultProps,
   type: "deck",
   placement: "top-left",
   viewId: null,
+  defaultIsExpanded: false,
   stats: void 0,
   title: "Stats",
   framesPerUpdate: 1,
@@ -1854,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