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

package/dist/dist.dev.js

@@ -62,8 +62,10 @@ var __exports__ = (() => {
     GimbalWidget: () => GimbalWidget,
     LightGlassTheme: () => LightGlassTheme,
     LightTheme: () => LightTheme,
+    PopupWidget: () => PopupWidget,
     ResetViewWidget: () => ResetViewWidget,
     ScreenshotWidget: () => ScreenshotWidget,
+    ScrollbarWidget: () => ScrollbarWidget,
     ZoomWidget: () => ZoomWidget,
     _ButtonGroup: () => ButtonGroup,
     _ContextMenuWidget: () => ContextMenuWidget,
@@ -73,13 +75,13 @@ var __exports__ = (() => {
     _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,
@@ -177,9 +179,9 @@ var __exports__ = (() => {
     P.__r = 0;
   }
   function S(n2, l3, u4, t3, i4, o3, r3, f4, e3, c3, s3) {
-    var a3, v3, y3, d3, w3, _2 = t3 && t3.__k || p, g2 = l3.length;
-    for (u4.__d = e3, $(u4, l3, _2), e3 = u4.__d, a3 = 0; a3 < g2; a3++)
-      null != (y3 = u4.__k[a3]) && "boolean" != typeof y3 && "function" != typeof y3 && (v3 = -1 === y3.__i ? h : _2[y3.__i] || h, y3.__i = a3, O(n2, y3, v3, i4, o3, r3, f4, e3, c3, s3), d3 = y3.__e, y3.ref && v3.ref != y3.ref && (v3.ref && N(v3.ref, null, y3), s3.push(y3.ref, y3.__c || d3, y3)), null == w3 && null != d3 && (w3 = d3), 65536 & y3.__u || v3.__k === y3.__k ? e3 = I(y3, e3, n2) : "function" == typeof y3.type && void 0 !== y3.__d ? e3 = y3.__d : d3 && (e3 = d3.nextSibling), y3.__d = void 0, y3.__u &= -196609);
+    var a3, v3, y3, d3, w3, _3 = t3 && t3.__k || p, g2 = l3.length;
+    for (u4.__d = e3, $(u4, l3, _3), e3 = u4.__d, a3 = 0; a3 < g2; a3++)
+      null != (y3 = u4.__k[a3]) && "boolean" != typeof y3 && "function" != typeof y3 && (v3 = -1 === y3.__i ? h : _3[y3.__i] || h, y3.__i = a3, O(n2, y3, v3, i4, o3, r3, f4, e3, c3, s3), d3 = y3.__e, y3.ref && v3.ref != y3.ref && (v3.ref && N(v3.ref, null, y3), s3.push(y3.ref, y3.__c || d3, y3)), null == w3 && null != d3 && (w3 = d3), 65536 & y3.__u || v3.__k === y3.__k ? e3 = I(y3, e3, n2) : "function" == typeof y3.type && void 0 !== y3.__d ? e3 = y3.__d : d3 && (e3 = d3.nextSibling), y3.__d = void 0, y3.__u &= -196609);
     u4.__d = e3, u4.__e = w3;
   }
   function $(n2, l3, u4) {
@@ -266,7 +268,7 @@ var __exports__ = (() => {
     };
   }
   function O(n2, u4, t3, i4, o3, r3, f4, e3, c3, s3) {
-    var a3, h4, p3, v3, w3, _2, g2, m2, x2, C3, M2, P2, $2, I2, H, L2, T3 = u4.type;
+    var a3, h4, p3, v3, w3, _3, g2, m2, x2, C3, M2, P2, $2, I2, H, L2, T3 = u4.type;
     if (void 0 !== u4.constructor)
       return null;
     128 & t3.__u && (c3 = !!(32 & t3.__u), r3 = [e3 = u4.__e = t3.__e]), (a3 = l.__b) && a3(u4);
@@ -285,7 +287,7 @@ var __exports__ = (() => {
               break n;
             }
             null != h4.componentWillUpdate && h4.componentWillUpdate(m2, h4.__s, M2), x2 && null != h4.componentDidUpdate && h4.__h.push(function() {
-              h4.componentDidUpdate(v3, w3, _2);
+              h4.componentDidUpdate(v3, w3, _3);
             });
           }
           if (h4.context = M2, h4.props = m2, h4.__P = n2, h4.__e = false, $2 = l.__r, I2 = 0, x2) {
@@ -296,7 +298,7 @@ var __exports__ = (() => {
             do {
               h4.__d = false, $2 && $2(u4), a3 = h4.render(h4.props, h4.state, h4.context), h4.state = h4.__s;
             } while (h4.__d && ++I2 < 25);
-          h4.state = h4.__s, null != h4.getChildContext && (i4 = d(d({}, i4), h4.getChildContext())), x2 && !p3 && null != h4.getSnapshotBeforeUpdate && (_2 = h4.getSnapshotBeforeUpdate(v3, w3)), S(n2, y(L2 = null != a3 && a3.type === k && null == a3.key ? a3.props.children : a3) ? L2 : [L2], u4, t3, i4, o3, r3, f4, e3, c3, s3), h4.base = u4.__e, u4.__u &= -161, h4.__h.length && f4.push(h4), g2 && (h4.__E = h4.__ = null);
+          h4.state = h4.__s, null != h4.getChildContext && (i4 = d(d({}, i4), h4.getChildContext())), x2 && !p3 && null != h4.getSnapshotBeforeUpdate && (_3 = h4.getSnapshotBeforeUpdate(v3, w3)), S(n2, y(L2 = null != a3 && a3.type === k && null == a3.key ? a3.props.children : a3) ? L2 : [L2], u4, t3, i4, o3, r3, f4, e3, c3, s3), h4.base = u4.__e, u4.__u &= -161, h4.__h.length && f4.push(h4), g2 && (h4.__E = h4.__ = null);
         } catch (n3) {
           if (u4.__v = null, c3 || null != r3) {
             for (u4.__u |= c3 ? 160 : 32; e3 && 8 === e3.nodeType && e3.nextSibling; )
@@ -325,7 +327,7 @@ var __exports__ = (() => {
     });
   }
   function z(l3, u4, t3, i4, o3, r3, f4, e3, c3) {
-    var s3, a3, p3, v3, d3, _2, g2, m2 = t3.props, k3 = u4.props, b2 = u4.type;
+    var s3, a3, p3, v3, d3, _3, g2, m2 = t3.props, k3 = u4.props, b2 = u4.type;
     if ("svg" === b2 ? o3 = "http://www.w3.org/2000/svg" : "math" === b2 ? o3 = "http://www.w3.org/1998/Math/MathML" : o3 || (o3 = "http://www.w3.org/1999/xhtml"), null != r3) {
       for (s3 = 0; s3 < r3.length; s3++)
         if ((d3 = r3[s3]) && "setAttribute" in d3 == !!b2 && (b2 ? d3.localName === b2 : 3 === d3.nodeType)) {
@@ -355,13 +357,13 @@ var __exports__ = (() => {
           A(l3, s3, null, d3, o3);
         }
       for (s3 in k3)
-        d3 = k3[s3], "children" == s3 ? v3 = d3 : "dangerouslySetInnerHTML" == s3 ? a3 = d3 : "value" == s3 ? _2 = d3 : "checked" == s3 ? g2 = d3 : "key" === s3 || e3 && "function" != typeof d3 || m2[s3] === d3 || A(l3, s3, d3, m2[s3], o3);
+        d3 = k3[s3], "children" == s3 ? v3 = d3 : "dangerouslySetInnerHTML" == s3 ? a3 = d3 : "value" == s3 ? _3 = d3 : "checked" == s3 ? g2 = d3 : "key" === s3 || e3 && "function" != typeof d3 || m2[s3] === d3 || A(l3, s3, d3, m2[s3], o3);
       if (a3)
         e3 || p3 && (a3.__html === p3.__html || a3.__html === l3.innerHTML) || (l3.innerHTML = a3.__html), u4.__k = [];
       else if (p3 && (l3.innerHTML = ""), S(l3, y(v3) ? v3 : [v3], u4, t3, i4, "foreignObject" === b2 ? "http://www.w3.org/1999/xhtml" : o3, r3, f4, r3 ? r3[0] : t3.__k && x(t3, 0), e3, c3), null != r3)
         for (s3 = r3.length; s3--; )
           null != r3[s3] && w(r3[s3]);
-      e3 || (s3 = "value", void 0 !== _2 && (_2 !== l3[s3] || "progress" === b2 && !_2 || "option" === b2 && _2 !== m2[s3]) && A(l3, s3, _2, m2[s3], o3), s3 = "checked", void 0 !== g2 && g2 !== l3[s3] && A(l3, s3, g2, m2[s3], o3));
+      e3 || (s3 = "value", void 0 !== _3 && (_3 !== l3[s3] || "progress" === b2 && !_3 || "option" === b2 && _3 !== m2[s3]) && A(l3, s3, _3, m2[s3], o3), s3 = "checked", void 0 !== g2 && g2 !== l3[s3] && A(l3, s3, g2, m2[s3], o3));
     }
     return l3;
   }
@@ -442,10 +444,10 @@ var __exports__ = (() => {
     return /* @__PURE__ */ u2("div", { className: `deck-widget-button-group ${orientation}`, children });
   };
 
-  // src/lib/components/grouped-icon-button.tsx
-  var GroupedIconButton = (props) => {
+  // src/lib/components/icon-button.tsx
+  var IconButton = (props) => {
     const { className = "", label, onClick, children } = props;
-    return /* @__PURE__ */ u2(
+    return /* @__PURE__ */ u2("div", { className: "deck-widget-button", children: /* @__PURE__ */ u2(
       "button",
       {
         className: `deck-widget-icon-button ${className}`,
@@ -454,7 +456,7 @@ var __exports__ = (() => {
         title: label,
         children: children ? children : /* @__PURE__ */ u2("div", { className: "deck-widget-icon" })
       }
-    );
+    ) });
   };
 
   // src/zoom-widget.tsx
@@ -463,7 +465,6 @@ var __exports__ = (() => {
       super(props);
       this.className = "deck-widget-zoom";
       this.placement = "top-left";
-      this.viewports = {};
       this.setProps(this.props);
     }
     setProps(props) {
@@ -474,7 +475,7 @@ var __exports__ = (() => {
     onRenderHTML(rootElement) {
       const ui = /* @__PURE__ */ u2(ButtonGroup, { orientation: this.props.orientation, children: [
         /* @__PURE__ */ u2(
-          GroupedIconButton,
+          IconButton,
           {
             onClick: () => this.handleZoomIn(),
             label: this.props.zoomInLabel,
@@ -482,7 +483,7 @@ var __exports__ = (() => {
           }
         ),
         /* @__PURE__ */ u2(
-          GroupedIconButton,
+          IconButton,
           {
             onClick: () => this.handleZoomOut(),
             label: this.props.zoomOutLabel,
@@ -492,13 +493,19 @@ var __exports__ = (() => {
       ] });
       B(ui, rootElement);
     }
-    onViewportChange(viewport) {
-      this.viewports[viewport.id] = viewport;
-    }
-    handleZoom(viewport, nextZoom) {
-      const viewId = this.viewId || 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) {
@@ -510,19 +517,19 @@ var __exports__ = (() => {
       this.setViewState(viewId, nextViewState);
     }
     handleZoomIn() {
-      for (const viewport of Object.values(this.viewports)) {
-        this.handleZoom(viewport, viewport.zoom + 1);
+      const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.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);
+      const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.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_core2.Widget.defaultProps,
@@ -537,23 +544,6 @@ var __exports__ = (() => {
 
   // src/reset-view-widget.tsx
   var import_core3 = __toESM(require_core(), 1);
-
-  // src/lib/components/icon-button.tsx
-  var IconButton = (props) => {
-    const { className = "", label, onClick, children } = props;
-    return /* @__PURE__ */ u2("div", { className: "deck-widget-button", children: /* @__PURE__ */ u2(
-      "button",
-      {
-        className: `deck-widget-icon-button ${className}`,
-        type: "button",
-        onClick,
-        title: label,
-        children: children ? children : /* @__PURE__ */ u2("div", { className: "deck-widget-icon" })
-      }
-    ) });
-  };
-
-  // src/reset-view-widget.tsx
   var ResetViewWidget = class extends import_core3.Widget {
     constructor(props = {}) {
       super(props);
@@ -581,17 +571,19 @@ var __exports__ = (() => {
     }
     handleClick() {
       const initialViewState = this.props.initialViewState || this.deck?.props.initialViewState;
-      this.setViewState(initialViewState);
+      this.resetViewState(initialViewState);
     }
-    setViewState(viewState) {
-      const viewId = this.props.viewId || "default-view";
-      const nextViewState = {
-        ...viewId !== "default-view" ? viewState?.[viewId] : viewState
-        // only works for geospatial?
-        // transitionDuration: this.props.transitionDuration,
-        // transitionInterpolator: new FlyToInterpolator()
-      };
-      this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+    resetViewState(viewState) {
+      const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.id) ?? [];
+      for (const viewId of viewIds) {
+        const nextViewState = {
+          ...viewState?.[viewId] ?? viewState
+          // only works for geospatial?
+          // transitionDuration: this.props.transitionDuration,
+          // transitionInterpolator: new FlyToInterpolator()
+        };
+        this.setViewState(viewId, nextViewState);
+      }
     }
   };
   ResetViewWidget.defaultProps = {
@@ -696,7 +688,7 @@ var __exports__ = (() => {
       this.updateHTML();
     }
     resetOrbitView(viewport) {
-      const viewId = this.getViewId(viewport);
+      const viewId = this.viewId || viewport?.id || "OrbitView";
       const viewState = this.getViewState(viewId);
       if ("rotationOrbit" in viewState || "rotationX" in viewState) {
         const nextViewState = {
@@ -708,11 +700,12 @@ var __exports__ = (() => {
             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?.id || "OrbitView";
+      const viewState = this.getViewState(viewId);
       const [rz, rx] = this.getRotation(viewState);
       const rotationOrbit = normalizeAndClampAngle(rz);
       const rotationX = normalizeAndClampAngle(rx);
@@ -724,23 +717,6 @@ var __exports__ = (() => {
       }
       return [0, 0];
     }
-    // Move to Widget/WidgetManager?
-    getViewId(viewport) {
-      const viewId = this.viewId || viewport?.id || "OrbitView";
-      return viewId;
-    }
-    getViewState(viewId) {
-      const viewManager = this.getViewManager();
-      const viewState = viewId && viewManager.getViewState(viewId) || viewManager.viewState;
-      return viewState;
-    }
-    getViewManager() {
-      const viewManager = this.deck?.viewManager;
-      if (!viewManager) {
-        throw new Error("wigdet must be added to a deck instance");
-      }
-      return viewManager;
-    }
   };
   GimbalWidget.defaultProps = {
     ...import_core4.Widget.defaultProps,
@@ -781,7 +757,7 @@ var __exports__ = (() => {
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
-      const viewId = this.viewId || Object.values(this.viewports)[0]?.id || "default-view";
+      const viewId = this.viewId || Object.values(this.viewports)[0]?.id;
       const widgetViewport = this.viewports[viewId];
       const [rz, rx] = this.getRotation(widgetViewport);
       const ui = /* @__PURE__ */ u2("div", { className: "deck-widget-button", style: { perspective: 100 }, children: /* @__PURE__ */ u2(
@@ -830,16 +806,17 @@ var __exports__ = (() => {
       return [0, 0];
     }
     handleCompassReset(viewport) {
-      const viewId = this.viewId || viewport.id || "default-view";
+      const viewId = this.viewId || viewport.id;
       if (viewport instanceof import_core5.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_core5.FlyToInterpolator()
         };
-        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+        this.setViewState(viewId, nextViewState);
       }
     }
   };
@@ -1062,6 +1039,10 @@ var __exports__ = (() => {
     var i4 = d2(t2++, 3);
     !c2.__s && C2(i4.__H, u4) && (i4.__ = n2, i4.i = u4, r2.__H.__h.push(i4));
   }
+  function _2(n2, u4) {
+    var i4 = d2(t2++, 4);
+    !c2.__s && C2(i4.__H, u4) && (i4.__ = n2, i4.i = u4, r2.__h.push(i4));
+  }
   function A2(n2) {
     return o2 = 5, T2(function() {
       return { current: n2 };
@@ -1071,6 +1052,11 @@ var __exports__ = (() => {
     var u4 = d2(t2++, 7);
     return C2(u4.__H, r3) && (u4.__ = n2(), u4.__H = r3, u4.__h = n2), u4.__;
   }
+  function q2(n2, t3) {
+    return o2 = 8, T2(function() {
+      return n2;
+    }, t3);
+  }
   function j2() {
     for (var n2; n2 = f3.shift(); )
       if (n2.__P && n2.__H)
@@ -1155,11 +1141,22 @@ var __exports__ = (() => {
   }
   var DropdownMenu = (props) => {
     const [isOpen, setIsOpen] = h2(false);
+    return /* @__PURE__ */ u2(
+      SimpleMenu,
+      {
+        ...props,
+        style: { ...props.style, position: "absolute" },
+        isOpen,
+        onClose: () => setIsOpen(false),
+        trigger: /* @__PURE__ */ u2("button", { className: "deck-widget-dropdown-button", onClick: () => setIsOpen(!isOpen), children: /* @__PURE__ */ u2("span", { className: `deck-widget-dropdown-icon ${isOpen ? "open" : ""}` }) })
+      }
+    );
+  };
+  var SimpleMenu = (props) => {
     const dropdownRef = A2(null);
-    const toggleDropdown = () => setIsOpen(!isOpen);
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
+        props.onClose();
       }
     };
     y2(() => {
@@ -1168,22 +1165,25 @@ var __exports__ = (() => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, []);
-    const handleSelect = (item) => {
-      props.onSelect(getMenuItemValue(item));
-      setIsOpen(false);
+    const handleSelect = (value) => {
+      if (value) {
+        props.onSelect(value);
+        props.onClose();
+      }
     };
     if (props.menuItems.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ u2("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, style: props.style, children: [
-      /* @__PURE__ */ u2("button", { className: "deck-widget-dropdown-button", onClick: toggleDropdown, children: /* @__PURE__ */ u2("span", { className: `deck-widget-dropdown-icon ${isOpen ? "open" : ""}` }) }),
-      isOpen && /* @__PURE__ */ u2("ul", { className: "deck-widget-dropdown-menu", children: props.menuItems.map((item) => {
+    return /* @__PURE__ */ u2("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, children: [
+      props.trigger,
+      props.isOpen && /* @__PURE__ */ u2("ul", { className: "deck-widget-dropdown-menu", style: props.style, children: props.menuItems.map((item, i4) => {
+        const value = getMenuItemValue(item);
         const icon = getMenuItemIcon(item);
         return /* @__PURE__ */ u2(
           "li",
           {
-            className: "deck-widget-dropdown-item",
-            onClick: () => handleSelect(item),
+            className: `deck-widget-dropdown-item ${value ? "" : "disabled"}`,
+            onClick: () => handleSelect(value),
             children: [
               icon && /* @__PURE__ */ u2(
                 "span",
@@ -1195,7 +1195,7 @@ var __exports__ = (() => {
               getMenuItemLabel(item)
             ]
           },
-          getMenuItemValue(item)
+          i4
         );
       }) })
     ] });
@@ -1435,7 +1435,7 @@ var __exports__ = (() => {
         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";
@@ -1457,10 +1457,9 @@ var __exports__ = (() => {
           this.updateHTML();
         }
         if (coordinates) {
-          this.setViewState(coordinates);
+          this.flyTo(coordinates);
         }
       };
-      this.viewports = {};
       this.setProps(this.props);
     }
     setProps(props) {
@@ -1493,22 +1492,20 @@ var __exports__ = (() => {
         rootElement
       );
     }
-    // TODO - MOVE TO WIDGETIMPL?
-    setViewState(viewState) {
-      const viewId = this.props.viewId || 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_core8.FlyToInterpolator() : new import_core8.LinearInterpolator();
+    flyTo(viewState) {
+      const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.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_core8.FlyToInterpolator() : new import_core8.LinearInterpolator();
+        }
+        this.setViewState(viewId, nextViewState);
       }
-      this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
-    }
-    onViewportChange(viewport) {
-      this.viewports[viewport.id] = viewport;
     }
   };
   GeocoderWidget.defaultProps = {
@@ -1580,7 +1577,7 @@ var __exports__ = (() => {
       super.setProps(props);
     }
     getContainer() {
-      return this.props.container || this.deck?.getCanvas()?.parentElement;
+      return this.props.container || this.deck?.props.parent || this.deck?.getCanvas()?.parentElement;
     }
     onFullscreenChange() {
       const prevFullscreen = this.fullscreen;
@@ -1783,7 +1780,7 @@ var __exports__ = (() => {
     return /* @__PURE__ */ u2("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [
       /* @__PURE__ */ u2(IconButton, { className: props.className, label, onClick: handleButtonClick, children: icon }),
       menuOpen && /* @__PURE__ */ u2("div", { className: "deck-widget-icon-menu", children: /* @__PURE__ */ u2(ButtonGroup, { orientation: "vertical", children: props.menuItems.map((item) => /* @__PURE__ */ u2(
-        GroupedIconButton,
+        IconButton,
         {
           label: item.label,
           onClick: () => handleSelectItem(item.value),
@@ -1915,345 +1912,2428 @@ var __exports__ = (() => {
   ];
 
   // src/info-widget.tsx
-  var import_core12 = __toESM(require_core(), 1);
-  var InfoWidget = class extends import_core12.Widget {
-    constructor(props) {
-      super(props);
-      this.className = "deck-widget-info";
-      this.placement = "fill";
-      this.setProps(this.props);
-    }
-    setProps(props) {
-      this.viewId = props.viewId ?? this.viewId;
-      super.setProps(props);
+  var import_core13 = __toESM(require_core(), 1);
+
+  // ../../node_modules/@floating-ui/core/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+  var min = Math.min;
+  var max = Math.max;
+  var oppositeSideMap = {
+    left: "right",
+    right: "left",
+    bottom: "top",
+    top: "bottom"
+  };
+  var oppositeAlignmentMap = {
+    start: "end",
+    end: "start"
+  };
+  function clamp(start, value, end) {
+    return max(start, min(value, end));
+  }
+  function evaluate(value, param) {
+    return typeof value === "function" ? value(param) : value;
+  }
+  function getSide(placement) {
+    return placement.split("-")[0];
+  }
+  function getAlignment(placement) {
+    return placement.split("-")[1];
+  }
+  function getOppositeAxis(axis) {
+    return axis === "x" ? "y" : "x";
+  }
+  function getAxisLength(axis) {
+    return axis === "y" ? "height" : "width";
+  }
+  function getSideAxis(placement) {
+    return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
+  }
+  function getAlignmentAxis(placement) {
+    return getOppositeAxis(getSideAxis(placement));
+  }
+  function getAlignmentSides(placement, rects, rtl) {
+    if (rtl === void 0) {
+      rtl = false;
+    }
+    const alignment = getAlignment(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const length = getAxisLength(alignmentAxis);
+    let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+    if (rects.reference[length] > rects.floating[length]) {
+      mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+    }
+    return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+  }
+  function getExpandedPlacements(placement) {
+    const oppositePlacement = getOppositePlacement(placement);
+    return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+  }
+  function getOppositeAlignmentPlacement(placement) {
+    return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+  }
+  function getSideList(side, isStart, rtl) {
+    const lr = ["left", "right"];
+    const rl = ["right", "left"];
+    const tb = ["top", "bottom"];
+    const bt = ["bottom", "top"];
+    switch (side) {
+      case "top":
+      case "bottom":
+        if (rtl)
+          return isStart ? rl : lr;
+        return isStart ? lr : rl;
+      case "left":
+      case "right":
+        return isStart ? tb : bt;
+      default:
+        return [];
     }
-    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;
+  }
+  function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+    const alignment = getAlignment(placement);
+    let list = getSideList(getSide(placement), direction === "start", rtl);
+    if (alignment) {
+      list = list.map((side) => side + "-" + alignment);
+      if (flipAlignment) {
+        list = list.concat(list.map(getOppositeAlignmentPlacement));
+      }
     }
-    onViewportChange(viewport) {
-      this.viewport = viewport;
-      this.updateHTML();
+    return list;
+  }
+  function getOppositePlacement(placement) {
+    return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+  }
+  function expandPaddingObject(padding) {
+    return {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      ...padding
+    };
+  }
+  function getPaddingObject(padding) {
+    return typeof padding !== "number" ? expandPaddingObject(padding) : {
+      top: padding,
+      right: padding,
+      bottom: padding,
+      left: padding
+    };
+  }
+  function rectToClientRect(rect) {
+    const {
+      x: x2,
+      y: y3,
+      width,
+      height
+    } = rect;
+    return {
+      width,
+      height,
+      top: y3,
+      left: x2,
+      right: x2 + width,
+      bottom: y3 + height,
+      x: x2,
+      y: y3
+    };
+  }
+
+  // ../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+  function computeCoordsFromPlacement(_ref, placement, rtl) {
+    let {
+      reference,
+      floating
+    } = _ref;
+    const sideAxis = getSideAxis(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const alignLength = getAxisLength(alignmentAxis);
+    const side = getSide(placement);
+    const isVertical = sideAxis === "y";
+    const commonX = reference.x + reference.width / 2 - floating.width / 2;
+    const commonY = reference.y + reference.height / 2 - floating.height / 2;
+    const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+    let coords;
+    switch (side) {
+      case "top":
+        coords = {
+          x: commonX,
+          y: reference.y - floating.height
+        };
+        break;
+      case "bottom":
+        coords = {
+          x: commonX,
+          y: reference.y + reference.height
+        };
+        break;
+      case "right":
+        coords = {
+          x: reference.x + reference.width,
+          y: commonY
+        };
+        break;
+      case "left":
+        coords = {
+          x: reference.x - floating.width,
+          y: commonY
+        };
+        break;
+      default:
+        coords = {
+          x: reference.x,
+          y: reference.y
+        };
     }
-    onHover(info) {
-      if (this.props.mode === "hover" && this.props.getTooltip) {
-        const tooltip = this.props.getTooltip(info, this);
-        this.setProps({
-          visible: tooltip !== null,
-          ...tooltip,
-          style: { zIndex: "1", ...tooltip?.style }
-        });
-      }
+    switch (getAlignment(placement)) {
+      case "start":
+        coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+      case "end":
+        coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
     }
-    onClick(info) {
-      if (this.props.mode === "click" && this.props.getTooltip) {
-        const tooltip = this.props.getTooltip(info, this);
-        this.setProps({
-          visible: tooltip !== null,
-          ...tooltip
-        });
-        return tooltip !== null;
+    return coords;
+  }
+  var computePosition = async (reference, floating, config) => {
+    const {
+      placement = "bottom",
+      strategy = "absolute",
+      middleware = [],
+      platform: platform2
+    } = config;
+    const validMiddleware = middleware.filter(Boolean);
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
+    let rects = await platform2.getElementRects({
+      reference,
+      floating,
+      strategy
+    });
+    let {
+      x: x2,
+      y: y3
+    } = computeCoordsFromPlacement(rects, placement, rtl);
+    let statefulPlacement = placement;
+    let middlewareData = {};
+    let resetCount = 0;
+    for (let i4 = 0; i4 < validMiddleware.length; i4++) {
+      const {
+        name,
+        fn
+      } = validMiddleware[i4];
+      const {
+        x: nextX,
+        y: nextY,
+        data,
+        reset
+      } = await fn({
+        x: x2,
+        y: y3,
+        initialPlacement: placement,
+        placement: statefulPlacement,
+        strategy,
+        middlewareData,
+        rects,
+        platform: platform2,
+        elements: {
+          reference,
+          floating
+        }
+      });
+      x2 = nextX != null ? nextX : x2;
+      y3 = nextY != null ? nextY : y3;
+      middlewareData = {
+        ...middlewareData,
+        [name]: {
+          ...middlewareData[name],
+          ...data
+        }
+      };
+      if (reset && resetCount <= 50) {
+        resetCount++;
+        if (typeof reset === "object") {
+          if (reset.placement) {
+            statefulPlacement = reset.placement;
+          }
+          if (reset.rects) {
+            rects = reset.rects === true ? await platform2.getElementRects({
+              reference,
+              floating,
+              strategy
+            }) : reset.rects;
+          }
+          ({
+            x: x2,
+            y: y3
+          } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+        }
+        i4 = -1;
       }
-      return this.props.onClick?.(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);
+    return {
+      x: x2,
+      y: y3,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData
+    };
+  };
+  async function detectOverflow(state, options) {
+    var _await$platform$isEle;
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      x: x2,
+      y: y3,
+      platform: platform2,
+      rects,
+      elements,
+      strategy
+    } = state;
+    const {
+      boundary = "clippingAncestors",
+      rootBoundary = "viewport",
+      elementContext = "floating",
+      altBoundary = false,
+      padding = 0
+    } = evaluate(options, state);
+    const paddingObject = getPaddingObject(padding);
+    const altContext = elementContext === "floating" ? "reference" : "floating";
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+      boundary,
+      rootBoundary,
+      strategy
+    }));
+    const rect = elementContext === "floating" ? {
+      x: x2,
+      y: y3,
+      width: rects.floating.width,
+      height: rects.floating.height
+    } : rects.reference;
+    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+      x: 1,
+      y: 1
+    } : {
+      x: 1,
+      y: 1
+    };
+    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    }) : rect);
+    return {
+      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+    };
+  }
+  var arrow = (options) => ({
+    name: "arrow",
+    options,
+    async fn(state) {
+      const {
+        x: x2,
+        y: y3,
+        placement,
+        rects,
+        platform: platform2,
+        elements,
+        middlewareData
+      } = state;
+      const {
+        element,
+        padding = 0
+      } = evaluate(options, state) || {};
+      if (element == null) {
+        return {};
       }
-    }
-    onRenderHTML(rootElement) {
-      if (!this.viewport) {
-        return;
+      const paddingObject = getPaddingObject(padding);
+      const coords = {
+        x: x2,
+        y: y3
+      };
+      const axis = getAlignmentAxis(placement);
+      const length = getAxisLength(axis);
+      const arrowDimensions = await platform2.getDimensions(element);
+      const isYAxis = axis === "y";
+      const minProp = isYAxis ? "top" : "left";
+      const maxProp = isYAxis ? "bottom" : "right";
+      const clientProp = isYAxis ? "clientHeight" : "clientWidth";
+      const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+      const startDiff = coords[axis] - rects.reference[axis];
+      const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
+      let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+      if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
+        clientSize = elements.floating[clientProp] || rects.floating[length];
       }
-      const [longitude, latitude] = this.props.position;
-      const [x2, y3] = this.viewport.project([longitude, latitude]);
-      const minOffset = this.props.minOffset || 0;
-      const gap = 10;
-      const arrowHeight = 8;
-      const arrowWidth = 16;
-      const isAbove = y3 > this.viewport.height / 2;
-      const background = this.props.style && this.props.style.background || "rgba(255,255,255,0.9)";
-      const ui = this.props.visible ? /* @__PURE__ */ u2("div", { className: "popup-container", style: { position: "absolute", left: 0, top: 0 }, children: [
-        /* @__PURE__ */ u2(
-          "div",
-          {
-            className: "popup-content",
-            style: {
-              background,
-              padding: "10px",
-              position: "relative",
-              // Include any additional styles
-              ...this.props.style
-            },
-            children: this.props.text
+      const centerToReference = endDiff / 2 - startDiff / 2;
+      const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+      const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+      const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+      const min$1 = minPadding;
+      const max3 = clientSize - arrowDimensions[length] - maxPadding;
+      const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+      const offset3 = clamp(min$1, center, max3);
+      const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset3 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+      const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max3 : 0;
+      return {
+        [axis]: coords[axis] + alignmentOffset,
+        data: {
+          [axis]: offset3,
+          centerOffset: center - offset3 - alignmentOffset,
+          ...shouldAddOffset && {
+            alignmentOffset
           }
-        ),
-        /* @__PURE__ */ u2("div", { className: "popup-arrow", style: { position: "absolute", width: "0px", height: "0px" } })
-      ] }) : null;
-      B(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 = x2 - popupWidth / 2;
-        let computedTop;
-        if (isAbove) {
-          computedTop = y3 - gap - arrowHeight - popupHeight;
-        } else {
-          computedTop = y3 + gap + arrowHeight;
+        },
+        reset: shouldAddOffset
+      };
+    }
+  });
+  var flip = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "flip",
+      options,
+      async fn(state) {
+        var _middlewareData$arrow, _middlewareData$flip;
+        const {
+          placement,
+          middlewareData,
+          rects,
+          initialPlacement,
+          platform: platform2,
+          elements
+        } = state;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = true,
+          fallbackPlacements: specifiedFallbackPlacements,
+          fallbackStrategy = "bestFit",
+          fallbackAxisSideDirection = "none",
+          flipAlignment = true,
+          ...detectOverflowOptions
+        } = evaluate(options, state);
+        if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
         }
-        if (computedLeft < minOffset) {
-          computedLeft = minOffset;
+        const side = getSide(placement);
+        const initialSideAxis = getSideAxis(initialPlacement);
+        const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+        const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+        const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+        const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
+        if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+          fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
         }
-        if (computedLeft + popupWidth > this.viewport.width - minOffset) {
-          computedLeft = this.viewport.width - minOffset - popupWidth;
+        const placements2 = [initialPlacement, ...fallbackPlacements];
+        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflows = [];
+        let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+        if (checkMainAxis) {
+          overflows.push(overflow[side]);
         }
-        if (isAbove) {
-          if (computedTop < minOffset) {
-            computedTop = minOffset;
+        if (checkCrossAxis) {
+          const sides2 = getAlignmentSides(placement, rects, rtl);
+          overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
+        }
+        overflowsData = [...overflowsData, {
+          placement,
+          overflows
+        }];
+        if (!overflows.every((side2) => side2 <= 0)) {
+          var _middlewareData$flip2, _overflowsData$filter;
+          const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+          const nextPlacement = placements2[nextIndex];
+          if (nextPlacement) {
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
+          let resetPlacement = (_overflowsData$filter = overflowsData.filter((d3) => d3.overflows[0] <= 0).sort((a3, b2) => a3.overflows[1] - b2.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+          if (!resetPlacement) {
+            switch (fallbackStrategy) {
+              case "bestFit": {
+                var _overflowsData$filter2;
+                const placement2 = (_overflowsData$filter2 = overflowsData.filter((d3) => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d3.placement);
+                    return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === "y";
+                  }
+                  return true;
+                }).map((d3) => [d3.placement, d3.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a3, b2) => a3[1] - b2[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement2) {
+                  resetPlacement = placement2;
+                }
+                break;
+              }
+              case "initialPlacement":
+                resetPlacement = initialPlacement;
+                break;
+            }
+          }
+          if (placement !== resetPlacement) {
+            return {
+              reset: {
+                placement: resetPlacement
+              }
+            };
           }
-        } 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 = x2 - 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 = {
-    ...import_core12.Widget.defaultProps,
-    id: "info",
-    position: [0, 0],
-    text: "",
-    visible: false,
-    minOffset: 0,
-    viewId: null,
-    mode: "hover",
-    getTooltip: void 0,
-    onClick: void 0
+        return {};
+      }
+    };
   };
-
-  // src/context-menu-widget.tsx
-  var import_core13 = __toESM(require_core(), 1);
-
-  // src/lib/components/simple-menu.tsx
-  var MENU_STYLE = {
-    position: "absolute",
-    top: "100%",
-    left: 0,
-    background: "white",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    marginTop: "var(--menu-gap, 4px)",
-    zIndex: 100
-  };
-  var MENU_ITEM_STYLE = {
-    background: "white",
-    border: "none",
-    padding: "4px",
-    cursor: "pointer",
-    pointerEvents: "auto"
+  async function convertValueToCoords(state, options) {
+    const {
+      placement,
+      platform: platform2,
+      elements
+    } = state;
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+    const side = getSide(placement);
+    const alignment = getAlignment(placement);
+    const isVertical = getSideAxis(placement) === "y";
+    const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
+    const crossAxisMulti = rtl && isVertical ? -1 : 1;
+    const rawValue = evaluate(options, state);
+    let {
+      mainAxis,
+      crossAxis,
+      alignmentAxis
+    } = typeof rawValue === "number" ? {
+      mainAxis: rawValue,
+      crossAxis: 0,
+      alignmentAxis: null
+    } : {
+      mainAxis: 0,
+      crossAxis: 0,
+      alignmentAxis: null,
+      ...rawValue
+    };
+    if (alignment && typeof alignmentAxis === "number") {
+      crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
+    }
+    return isVertical ? {
+      x: crossAxis * crossAxisMulti,
+      y: mainAxis * mainAxisMulti
+    } : {
+      x: mainAxis * mainAxisMulti,
+      y: crossAxis * crossAxisMulti
+    };
+  }
+  var offset = function(options) {
+    if (options === void 0) {
+      options = 0;
+    }
+    return {
+      name: "offset",
+      options,
+      async fn(state) {
+        var _middlewareData$offse, _middlewareData$arrow;
+        const {
+          x: x2,
+          y: y3,
+          placement,
+          middlewareData
+        } = state;
+        const diffCoords = await convertValueToCoords(state, options);
+        if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
+        }
+        return {
+          x: x2 + diffCoords.x,
+          y: y3 + diffCoords.y,
+          data: {
+            ...diffCoords,
+            placement
+          }
+        };
+      }
+    };
   };
-  var SimpleMenu = (props) => {
-    const { menuItems, onItemSelected, position, style } = props;
-    const styleOverride = {
-      ...MENU_STYLE,
-      ...style,
-      left: `${position.x}px`,
-      top: `${position.y}px`
+  var shift = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "shift",
+      options,
+      async fn(state) {
+        const {
+          x: x2,
+          y: y3,
+          placement
+        } = state;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = false,
+          limiter = {
+            fn: (_ref) => {
+              let {
+                x: x3,
+                y: y4
+              } = _ref;
+              return {
+                x: x3,
+                y: y4
+              };
+            }
+          },
+          ...detectOverflowOptions
+        } = evaluate(options, state);
+        const coords = {
+          x: x2,
+          y: y3
+        };
+        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const crossAxis = getSideAxis(getSide(placement));
+        const mainAxis = getOppositeAxis(crossAxis);
+        let mainAxisCoord = coords[mainAxis];
+        let crossAxisCoord = coords[crossAxis];
+        if (checkMainAxis) {
+          const minSide = mainAxis === "y" ? "top" : "left";
+          const maxSide = mainAxis === "y" ? "bottom" : "right";
+          const min3 = mainAxisCoord + overflow[minSide];
+          const max3 = mainAxisCoord - overflow[maxSide];
+          mainAxisCoord = clamp(min3, mainAxisCoord, max3);
+        }
+        if (checkCrossAxis) {
+          const minSide = crossAxis === "y" ? "top" : "left";
+          const maxSide = crossAxis === "y" ? "bottom" : "right";
+          const min3 = crossAxisCoord + overflow[minSide];
+          const max3 = crossAxisCoord - overflow[maxSide];
+          crossAxisCoord = clamp(min3, crossAxisCoord, max3);
+        }
+        const limitedCoords = limiter.fn({
+          ...state,
+          [mainAxis]: mainAxisCoord,
+          [crossAxis]: crossAxisCoord
+        });
+        return {
+          ...limitedCoords,
+          data: {
+            x: limitedCoords.x - x2,
+            y: limitedCoords.y - y3
+          }
+        };
+      }
     };
-    return /* @__PURE__ */ u2("div", { style: styleOverride, children: menuItems.map(({ key, label }) => /* @__PURE__ */ u2(
-      "button",
-      {
-        style: { ...MENU_ITEM_STYLE, display: "block" },
-        onClick: (_2) => onItemSelected(key),
-        children: label
-      },
-      key
-    )) });
   };
 
-  // src/context-menu-widget.tsx
-  var MOUSE_BUTTON_RIGHT = 2;
-  var MOUSE_WHICH_RIGHT = 3;
-  var ContextMenuWidget = class extends import_core13.Widget {
-    constructor(props) {
-      super(props);
-      this.className = "deck-widget-context-menu";
-      this.placement = "fill";
-      this.pickInfo = null;
-      this.pickInfo = null;
-      this.setProps(this.props);
+  // ../../node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+  var min2 = Math.min;
+  var max2 = Math.max;
+  var round = Math.round;
+  var floor = Math.floor;
+  var createCoords = (v3) => ({
+    x: v3,
+    y: v3
+  });
+
+  // ../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+  function hasWindow() {
+    return typeof window !== "undefined";
+  }
+  function getNodeName(node) {
+    if (isNode(node)) {
+      return (node.nodeName || "").toLowerCase();
     }
-    onAdd({ deck }) {
-      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"
-      };
-      Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
-      deck.getCanvas()?.addEventListener("click", () => this.hide());
-      deck.getCanvas()?.addEventListener("contextmenu", (event) => this.handleContextMenu(event));
-      return element;
+    return "#document";
+  }
+  function getWindow(node) {
+    var _node$ownerDocument;
+    return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  }
+  function getDocumentElement(node) {
+    var _ref;
+    return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+  }
+  function isNode(value) {
+    if (!hasWindow()) {
+      return false;
     }
-    onRenderHTML(rootElement) {
-      const { visible, position, menuItems } = this.props;
-      const ui = visible && menuItems.length ? /* @__PURE__ */ u2(
-        SimpleMenu,
-        {
-          menuItems,
-          onItemSelected: (key) => this.props.onMenuItemSelected(key, this.pickInfo),
-          position,
-          style: { pointerEvents: "auto" }
-        }
-      ) : null;
-      B(ui, rootElement);
+    return value instanceof Node || value instanceof getWindow(value).Node;
+  }
+  function isElement(value) {
+    if (!hasWindow()) {
+      return false;
     }
-    handleContextMenu(srcEvent) {
-      if (srcEvent && (srcEvent.button === MOUSE_BUTTON_RIGHT || srcEvent.which === MOUSE_WHICH_RIGHT)) {
-        this.pickInfo = this.deck?.pickObject({
-          x: srcEvent.clientX,
-          y: srcEvent.clientY
-        }) || null;
-        const menuItems = this.pickInfo && this.props.getMenuItems?.(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 value instanceof Element || value instanceof getWindow(value).Element;
+  }
+  function isHTMLElement(value) {
+    if (!hasWindow()) {
       return false;
     }
-    hide() {
-      this.setProps({ visible: false });
+    return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+  }
+  function isShadowRoot(value) {
+    if (!hasWindow() || typeof ShadowRoot === "undefined") {
+      return false;
     }
-  };
-  ContextMenuWidget.defaultProps = {
-    ...import_core13.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)
-  };
-
-  // src/timeline-widget.tsx
-  var import_core14 = __toESM(require_core(), 1);
-  var TimelineWidget = class extends import_core14.Widget {
-    constructor(props = {}) {
-      super(props);
+    return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+  }
+  function isOverflowElement(element) {
+    const {
+      overflow,
+      overflowX,
+      overflowY,
+      display
+    } = getComputedStyle(element);
+    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
+  }
+  function isTableElement(element) {
+    return ["table", "td", "th"].includes(getNodeName(element));
+  }
+  function isTopLayer(element) {
+    return [":popover-open", ":modal"].some((selector) => {
+      try {
+        return element.matches(selector);
+      } catch (e3) {
+        return false;
+      }
+    });
+  }
+  function isContainingBlock(elementOrCss) {
+    const webkit = isWebKit();
+    const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+    return ["transform", "translate", "scale", "rotate", "perspective"].some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "translate", "scale", "rotate", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
+  }
+  function getContainingBlock(element) {
+    let currentNode = getParentNode(element);
+    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      if (isContainingBlock(currentNode)) {
+        return currentNode;
+      } else if (isTopLayer(currentNode)) {
+        return null;
+      }
+      currentNode = getParentNode(currentNode);
+    }
+    return null;
+  }
+  function isWebKit() {
+    if (typeof CSS === "undefined" || !CSS.supports)
+      return false;
+    return CSS.supports("-webkit-backdrop-filter", "none");
+  }
+  function isLastTraversableNode(node) {
+    return ["html", "body", "#document"].includes(getNodeName(node));
+  }
+  function getComputedStyle(element) {
+    return getWindow(element).getComputedStyle(element);
+  }
+  function getNodeScroll(element) {
+    if (isElement(element)) {
+      return {
+        scrollLeft: element.scrollLeft,
+        scrollTop: element.scrollTop
+      };
+    }
+    return {
+      scrollLeft: element.scrollX,
+      scrollTop: element.scrollY
+    };
+  }
+  function getParentNode(node) {
+    if (getNodeName(node) === "html") {
+      return node;
+    }
+    const result = (
+      // Step into the shadow DOM of the parent of a slotted node.
+      node.assignedSlot || // DOM Element detected.
+      node.parentNode || // ShadowRoot detected.
+      isShadowRoot(node) && node.host || // Fallback.
+      getDocumentElement(node)
+    );
+    return isShadowRoot(result) ? result.host : result;
+  }
+  function getNearestOverflowAncestor(node) {
+    const parentNode = getParentNode(node);
+    if (isLastTraversableNode(parentNode)) {
+      return node.ownerDocument ? node.ownerDocument.body : node.body;
+    }
+    if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+      return parentNode;
+    }
+    return getNearestOverflowAncestor(parentNode);
+  }
+  function getOverflowAncestors(node, list, traverseIframes) {
+    var _node$ownerDocument2;
+    if (list === void 0) {
+      list = [];
+    }
+    if (traverseIframes === void 0) {
+      traverseIframes = true;
+    }
+    const scrollableAncestor = getNearestOverflowAncestor(node);
+    const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+    const win = getWindow(scrollableAncestor);
+    if (isBody) {
+      const frameElement = getFrameElement(win);
+      return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+    }
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  }
+  function getFrameElement(win) {
+    return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+  }
+
+  // ../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+  function getCssDimensions(element) {
+    const css = getComputedStyle(element);
+    let width = parseFloat(css.width) || 0;
+    let height = parseFloat(css.height) || 0;
+    const hasOffset = isHTMLElement(element);
+    const offsetWidth = hasOffset ? element.offsetWidth : width;
+    const offsetHeight = hasOffset ? element.offsetHeight : height;
+    const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+    if (shouldFallback) {
+      width = offsetWidth;
+      height = offsetHeight;
+    }
+    return {
+      width,
+      height,
+      $: shouldFallback
+    };
+  }
+  function unwrapElement(element) {
+    return !isElement(element) ? element.contextElement : element;
+  }
+  function getScale(element) {
+    const domElement = unwrapElement(element);
+    if (!isHTMLElement(domElement)) {
+      return createCoords(1);
+    }
+    const rect = domElement.getBoundingClientRect();
+    const {
+      width,
+      height,
+      $: $2
+    } = getCssDimensions(domElement);
+    let x2 = ($2 ? round(rect.width) : rect.width) / width;
+    let y3 = ($2 ? round(rect.height) : rect.height) / height;
+    if (!x2 || !Number.isFinite(x2)) {
+      x2 = 1;
+    }
+    if (!y3 || !Number.isFinite(y3)) {
+      y3 = 1;
+    }
+    return {
+      x: x2,
+      y: y3
+    };
+  }
+  var noOffsets = /* @__PURE__ */ createCoords(0);
+  function getVisualOffsets(element) {
+    const win = getWindow(element);
+    if (!isWebKit() || !win.visualViewport) {
+      return noOffsets;
+    }
+    return {
+      x: win.visualViewport.offsetLeft,
+      y: win.visualViewport.offsetTop
+    };
+  }
+  function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+    if (isFixed === void 0) {
+      isFixed = false;
+    }
+    if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+      return false;
+    }
+    return isFixed;
+  }
+  function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+    if (includeScale === void 0) {
+      includeScale = false;
+    }
+    if (isFixedStrategy === void 0) {
+      isFixedStrategy = false;
+    }
+    const clientRect = element.getBoundingClientRect();
+    const domElement = unwrapElement(element);
+    let scale = createCoords(1);
+    if (includeScale) {
+      if (offsetParent) {
+        if (isElement(offsetParent)) {
+          scale = getScale(offsetParent);
+        }
+      } else {
+        scale = getScale(element);
+      }
+    }
+    const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+    let x2 = (clientRect.left + visualOffsets.x) / scale.x;
+    let y3 = (clientRect.top + visualOffsets.y) / scale.y;
+    let width = clientRect.width / scale.x;
+    let height = clientRect.height / scale.y;
+    if (domElement) {
+      const win = getWindow(domElement);
+      const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+      let currentWin = win;
+      let currentIFrame = getFrameElement(currentWin);
+      while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+        const iframeScale = getScale(currentIFrame);
+        const iframeRect = currentIFrame.getBoundingClientRect();
+        const css = getComputedStyle(currentIFrame);
+        const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+        const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+        x2 *= iframeScale.x;
+        y3 *= iframeScale.y;
+        width *= iframeScale.x;
+        height *= iframeScale.y;
+        x2 += left;
+        y3 += top;
+        currentWin = getWindow(currentIFrame);
+        currentIFrame = getFrameElement(currentWin);
+      }
+    }
+    return rectToClientRect({
+      width,
+      height,
+      x: x2,
+      y: y3
+    });
+  }
+  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+    let {
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    } = _ref;
+    const isFixed = strategy === "fixed";
+    const documentElement = getDocumentElement(offsetParent);
+    const topLayer = elements ? isTopLayer(elements.floating) : false;
+    if (offsetParent === documentElement || topLayer && isFixed) {
+      return rect;
+    }
+    let scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    let scale = createCoords(1);
+    const offsets = createCoords(0);
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+        scroll = getNodeScroll(offsetParent);
+      }
+      if (isHTMLElement(offsetParent)) {
+        const offsetRect = getBoundingClientRect(offsetParent);
+        scale = getScale(offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
+      }
+    }
+    return {
+      width: rect.width * scale.x,
+      height: rect.height * scale.y,
+      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+    };
+  }
+  function getClientRects(element) {
+    return Array.from(element.getClientRects());
+  }
+  function getWindowScrollBarX(element, rect) {
+    const leftScroll = getNodeScroll(element).scrollLeft;
+    if (!rect) {
+      return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+    }
+    return rect.left + leftScroll;
+  }
+  function getDocumentRect(element) {
+    const html = getDocumentElement(element);
+    const scroll = getNodeScroll(element);
+    const body = element.ownerDocument.body;
+    const width = max2(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+    const height = max2(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+    let x2 = -scroll.scrollLeft + getWindowScrollBarX(element);
+    const y3 = -scroll.scrollTop;
+    if (getComputedStyle(body).direction === "rtl") {
+      x2 += max2(html.clientWidth, body.clientWidth) - width;
+    }
+    return {
+      width,
+      height,
+      x: x2,
+      y: y3
+    };
+  }
+  function getViewportRect(element, strategy) {
+    const win = getWindow(element);
+    const html = getDocumentElement(element);
+    const visualViewport = win.visualViewport;
+    let width = html.clientWidth;
+    let height = html.clientHeight;
+    let x2 = 0;
+    let y3 = 0;
+    if (visualViewport) {
+      width = visualViewport.width;
+      height = visualViewport.height;
+      const visualViewportBased = isWebKit();
+      if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
+        x2 = visualViewport.offsetLeft;
+        y3 = visualViewport.offsetTop;
+      }
+    }
+    return {
+      width,
+      height,
+      x: x2,
+      y: y3
+    };
+  }
+  function getInnerBoundingClientRect(element, strategy) {
+    const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
+    const top = clientRect.top + element.clientTop;
+    const left = clientRect.left + element.clientLeft;
+    const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+    const width = element.clientWidth * scale.x;
+    const height = element.clientHeight * scale.y;
+    const x2 = left * scale.x;
+    const y3 = top * scale.y;
+    return {
+      width,
+      height,
+      x: x2,
+      y: y3
+    };
+  }
+  function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+    let rect;
+    if (clippingAncestor === "viewport") {
+      rect = getViewportRect(element, strategy);
+    } else if (clippingAncestor === "document") {
+      rect = getDocumentRect(getDocumentElement(element));
+    } else if (isElement(clippingAncestor)) {
+      rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+    } else {
+      const visualOffsets = getVisualOffsets(element);
+      rect = {
+        ...clippingAncestor,
+        x: clippingAncestor.x - visualOffsets.x,
+        y: clippingAncestor.y - visualOffsets.y
+      };
+    }
+    return rectToClientRect(rect);
+  }
+  function hasFixedPositionAncestor(element, stopNode) {
+    const parentNode = getParentNode(element);
+    if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+      return false;
+    }
+    return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  }
+  function getClippingElementAncestors(element, cache) {
+    const cachedResult = cache.get(element);
+    if (cachedResult) {
+      return cachedResult;
+    }
+    let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
+    let currentContainingBlockComputedStyle = null;
+    const elementIsFixed = getComputedStyle(element).position === "fixed";
+    let currentNode = elementIsFixed ? getParentNode(element) : element;
+    while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      const computedStyle = getComputedStyle(currentNode);
+      const currentNodeIsContaining = isContainingBlock(currentNode);
+      if (!currentNodeIsContaining && computedStyle.position === "fixed") {
+        currentContainingBlockComputedStyle = null;
+      }
+      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+      if (shouldDropCurrentNode) {
+        result = result.filter((ancestor) => ancestor !== currentNode);
+      } else {
+        currentContainingBlockComputedStyle = computedStyle;
+      }
+      currentNode = getParentNode(currentNode);
+    }
+    cache.set(element, result);
+    return result;
+  }
+  function getClippingRect(_ref) {
+    let {
+      element,
+      boundary,
+      rootBoundary,
+      strategy
+    } = _ref;
+    const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+    const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+    const firstClippingAncestor = clippingAncestors[0];
+    const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+      const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+      accRect.top = max2(rect.top, accRect.top);
+      accRect.right = min2(rect.right, accRect.right);
+      accRect.bottom = min2(rect.bottom, accRect.bottom);
+      accRect.left = max2(rect.left, accRect.left);
+      return accRect;
+    }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+    return {
+      width: clippingRect.right - clippingRect.left,
+      height: clippingRect.bottom - clippingRect.top,
+      x: clippingRect.left,
+      y: clippingRect.top
+    };
+  }
+  function getDimensions(element) {
+    const {
+      width,
+      height
+    } = getCssDimensions(element);
+    return {
+      width,
+      height
+    };
+  }
+  function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    const documentElement = getDocumentElement(offsetParent);
+    const isFixed = strategy === "fixed";
+    const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+    let scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    const offsets = createCoords(0);
+    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+        scroll = getNodeScroll(offsetParent);
+      }
+      if (isOffsetParentAnElement) {
+        const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
+      } else if (documentElement) {
+        offsets.x = getWindowScrollBarX(documentElement);
+      }
+    }
+    let htmlX = 0;
+    let htmlY = 0;
+    if (documentElement && !isOffsetParentAnElement && !isFixed) {
+      const htmlRect = documentElement.getBoundingClientRect();
+      htmlY = htmlRect.top + scroll.scrollTop;
+      htmlX = htmlRect.left + scroll.scrollLeft - // RTL <body> scrollbar.
+      getWindowScrollBarX(documentElement, htmlRect);
+    }
+    const x2 = rect.left + scroll.scrollLeft - offsets.x - htmlX;
+    const y3 = rect.top + scroll.scrollTop - offsets.y - htmlY;
+    return {
+      x: x2,
+      y: y3,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  function isStaticPositioned(element) {
+    return getComputedStyle(element).position === "static";
+  }
+  function getTrueOffsetParent(element, polyfill) {
+    if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+      return null;
+    }
+    if (polyfill) {
+      return polyfill(element);
+    }
+    let rawOffsetParent = element.offsetParent;
+    if (getDocumentElement(element) === rawOffsetParent) {
+      rawOffsetParent = rawOffsetParent.ownerDocument.body;
+    }
+    return rawOffsetParent;
+  }
+  function getOffsetParent(element, polyfill) {
+    const win = getWindow(element);
+    if (isTopLayer(element)) {
+      return win;
+    }
+    if (!isHTMLElement(element)) {
+      let svgOffsetParent = getParentNode(element);
+      while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+        if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+          return svgOffsetParent;
+        }
+        svgOffsetParent = getParentNode(svgOffsetParent);
+      }
+      return win;
+    }
+    let offsetParent = getTrueOffsetParent(element, polyfill);
+    while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+      offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+    }
+    if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+      return win;
+    }
+    return offsetParent || getContainingBlock(element) || win;
+  }
+  var getElementRects = async function(data) {
+    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+    const getDimensionsFn = this.getDimensions;
+    const floatingDimensions = await getDimensionsFn(data.floating);
+    return {
+      reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+      floating: {
+        x: 0,
+        y: 0,
+        width: floatingDimensions.width,
+        height: floatingDimensions.height
+      }
+    };
+  };
+  function isRTL(element) {
+    return getComputedStyle(element).direction === "rtl";
+  }
+  var platform = {
+    convertOffsetParentRelativeRectToViewportRelativeRect,
+    getDocumentElement,
+    getClippingRect,
+    getOffsetParent,
+    getElementRects,
+    getClientRects,
+    getDimensions,
+    getScale,
+    isElement,
+    isRTL
+  };
+  function observeMove(element, onMove) {
+    let io = null;
+    let timeoutId;
+    const root = getDocumentElement(element);
+    function cleanup() {
+      var _io;
+      clearTimeout(timeoutId);
+      (_io = io) == null || _io.disconnect();
+      io = null;
+    }
+    function refresh(skip, threshold) {
+      if (skip === void 0) {
+        skip = false;
+      }
+      if (threshold === void 0) {
+        threshold = 1;
+      }
+      cleanup();
+      const {
+        left,
+        top,
+        width,
+        height
+      } = element.getBoundingClientRect();
+      if (!skip) {
+        onMove();
+      }
+      if (!width || !height) {
+        return;
+      }
+      const insetTop = floor(top);
+      const insetRight = floor(root.clientWidth - (left + width));
+      const insetBottom = floor(root.clientHeight - (top + height));
+      const insetLeft = floor(left);
+      const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+      const options = {
+        rootMargin,
+        threshold: max2(0, min2(1, threshold)) || 1
+      };
+      let isFirstUpdate = true;
+      function handleObserve(entries) {
+        const ratio = entries[0].intersectionRatio;
+        if (ratio !== threshold) {
+          if (!isFirstUpdate) {
+            return refresh();
+          }
+          if (!ratio) {
+            timeoutId = setTimeout(() => {
+              refresh(false, 1e-7);
+            }, 1e3);
+          } else {
+            refresh(false, ratio);
+          }
+        }
+        isFirstUpdate = false;
+      }
+      try {
+        io = new IntersectionObserver(handleObserve, {
+          ...options,
+          // Handle <iframe>s
+          root: root.ownerDocument
+        });
+      } catch (e3) {
+        io = new IntersectionObserver(handleObserve, options);
+      }
+      io.observe(element);
+    }
+    refresh(true);
+    return cleanup;
+  }
+  function autoUpdate(reference, floating, update, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      ancestorScroll = true,
+      ancestorResize = true,
+      elementResize = typeof ResizeObserver === "function",
+      layoutShift = typeof IntersectionObserver === "function",
+      animationFrame = false
+    } = options;
+    const referenceEl = unwrapElement(reference);
+    const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+    ancestors.forEach((ancestor) => {
+      ancestorScroll && ancestor.addEventListener("scroll", update, {
+        passive: true
+      });
+      ancestorResize && ancestor.addEventListener("resize", update);
+    });
+    const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+    let reobserveFrame = -1;
+    let resizeObserver = null;
+    if (elementResize) {
+      resizeObserver = new ResizeObserver((_ref) => {
+        let [firstEntry] = _ref;
+        if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+          resizeObserver.unobserve(floating);
+          cancelAnimationFrame(reobserveFrame);
+          reobserveFrame = requestAnimationFrame(() => {
+            var _resizeObserver;
+            (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+          });
+        }
+        update();
+      });
+      if (referenceEl && !animationFrame) {
+        resizeObserver.observe(referenceEl);
+      }
+      resizeObserver.observe(floating);
+    }
+    let frameId;
+    let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+    if (animationFrame) {
+      frameLoop();
+    }
+    function frameLoop() {
+      const nextRefRect = getBoundingClientRect(reference);
+      if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+        update();
+      }
+      prevRefRect = nextRefRect;
+      frameId = requestAnimationFrame(frameLoop);
+    }
+    update();
+    return () => {
+      var _resizeObserver2;
+      ancestors.forEach((ancestor) => {
+        ancestorScroll && ancestor.removeEventListener("scroll", update);
+        ancestorResize && ancestor.removeEventListener("resize", update);
+      });
+      cleanupIo == null || cleanupIo();
+      (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+      resizeObserver = null;
+      if (animationFrame) {
+        cancelAnimationFrame(frameId);
+      }
+    };
+  }
+  var offset2 = offset;
+  var shift2 = shift;
+  var flip2 = flip;
+  var arrow2 = arrow;
+  var computePosition2 = (reference, floating, options) => {
+    const cache = /* @__PURE__ */ new Map();
+    const mergedOptions = {
+      platform,
+      ...options
+    };
+    const platformWithCache = {
+      ...mergedOptions.platform,
+      _c: cache
+    };
+    return computePosition(reference, floating, {
+      ...mergedOptions,
+      platform: platformWithCache
+    });
+  };
+
+  // src/lib/components/popover.tsx
+  var Popover = ({
+    x: x2,
+    y: y3,
+    placement = "right",
+    offset: pixelOffset = 0,
+    arrow: arrowSize = false,
+    arrowColor = "white",
+    children
+  }) => {
+    const anchorRef = A2(null);
+    const contentRef = A2(null);
+    const arrowRef = A2(null);
+    const updaterRef = A2();
+    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("-") ? [offset2(padding), flip2(), shift2()] : [offset2(padding), shift2(), flip2()];
+      if (arrowRef.current)
+        middleware.push(arrow2({ element: arrowRef.current }));
+      computePosition2(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);
+        }
+      });
+    };
+    T2(() => {
+      updaterRef.current?.();
+    }, [placement, arrowSize, pixelOffset]);
+    y2(() => {
+      if (contentRef.current) {
+        contentRef.current.style.visibility = "visible";
+      }
+      const cleanup = autoUpdate(
+        anchorRef.current,
+        contentRef.current,
+        () => updaterRef.current?.()
+      );
+      return () => {
+        cleanup();
+      };
+    }, []);
+    return /* @__PURE__ */ u2("div", { style: { position: "absolute", left: x2, top: y3 }, ref: anchorRef, children: /* @__PURE__ */ u2(
+      "div",
+      {
+        className: "deck-widget deck-widget-popover",
+        style: { position: "fixed", visibility: "hidden", pointerEvents: "none" },
+        ref: contentRef,
+        children: [
+          Boolean(arrowSize) && /* @__PURE__ */ u2(
+            "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: ""
+    };
+    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;
+  }
+
+  // src/lib/components/user-content.tsx
+  var UserContent = ({ text, html, element, ...props }) => {
+    const containerRef = A2(null);
+    y2(() => {
+      if (containerRef.current && element) {
+        containerRef.current.append(element);
+      }
+      return () => {
+        element?.remove();
+      };
+    }, [element]);
+    return /* @__PURE__ */ u2("div", { ref: containerRef, ...props, dangerouslySetInnerHTML: html ? { __html: html } : void 0, children: text });
+  };
+
+  // src/info-widget.tsx
+  var InfoWidget = class extends import_core13.Widget {
+    constructor(props) {
+      super(props);
+      this.className = "deck-widget-info";
+      this.placement = "fill";
+      this.tooltip = null;
+      this.setProps(this.props);
+    }
+    setProps(props) {
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
+    }
+    onAdd({ deck }) {
+      this.deck = deck;
+    }
+    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) {
+      if (!this.viewport || this.tooltip === null) {
+        B(null, rootElement);
+        return;
+      }
+      const style = {
+        ...this.props.style,
+        ...this.tooltip.style
+      };
+      const [x2, y3] = this.viewport.project(this.tooltip.position);
+      const ui = /* @__PURE__ */ u2(
+        Popover,
+        {
+          x: x2,
+          y: y3,
+          placement: this.props.placement,
+          arrow: this.props.arrow,
+          arrowColor: "var(--menu-background, #fff)",
+          offset: this.props.offset,
+          children: /* @__PURE__ */ u2(
+            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
+            }
+          )
+        }
+      );
+      B(ui, rootElement);
+    }
+  };
+  InfoWidget.defaultProps = {
+    ...import_core13.Widget.defaultProps,
+    id: "info",
+    viewId: null,
+    mode: "hover",
+    getTooltip: void 0,
+    placement: "right",
+    offset: 10,
+    arrow: 10
+  };
+
+  // src/popup-widget.tsx
+  var import_core14 = __toESM(require_core(), 1);
+  var PopupWidget = class extends import_core14.Widget {
+    constructor(props) {
+      super(props);
+      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);
+    }
+    onAdd({ deck }) {
+      this.deck = deck;
+    }
+    onViewportChange(viewport) {
+      this.viewport = viewport;
+      this.updateHTML();
+    }
+    onClick() {
+      if (this.props.closeOnClickOutside) {
+        this._setIsOpen(false);
+      }
+    }
+    _setIsOpen(isOpen) {
+      if (this.isOpen === isOpen)
+        return;
+      this.isOpen = isOpen;
+      this.props.onOpenChange?.(isOpen);
+      this.updateHTML();
+    }
+    onRenderHTML(rootElement) {
+      if (!this.viewport) {
+        B(null, rootElement);
+        return;
+      }
+      const { marker, content, style } = this.props;
+      const [x2, y3] = this.viewport.project(this.props.position);
+      const ui = /* @__PURE__ */ u2("div", { children: [
+        marker && /* @__PURE__ */ u2(
+          "div",
+          {
+            style: { position: "absolute", left: x2, top: y3, pointerEvents: "all", cursor: "pointer" },
+            children: /* @__PURE__ */ u2(UserContent, { ...marker, onClick: () => this._setIsOpen(true) })
+          }
+        ),
+        this.isOpen && /* @__PURE__ */ u2(
+          Popover,
+          {
+            x: x2,
+            y: y3,
+            placement: this.props.placement,
+            arrow: this.props.arrow,
+            arrowColor: "var(--menu-background, #fff)",
+            offset: this.props.offset,
+            children: /* @__PURE__ */ u2(
+              "div",
+              {
+                className: `deck-widget-popup-content ${this.props.className}`,
+                style,
+                children: [
+                  this.props.closeButton && /* @__PURE__ */ u2(
+                    "div",
+                    {
+                      className: "deck-widget-popup-controls",
+                      style: { width: "100%", display: "flex", justifyContent: "end" },
+                      children: /* @__PURE__ */ u2(
+                        IconButton,
+                        {
+                          className: "deck-widget-popup-close-button",
+                          onClick: () => this._setIsOpen(false)
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ u2(UserContent, { ...typeof content === "string" ? { text: content } : content })
+                ]
+              }
+            )
+          }
+        )
+      ] });
+      B(ui, rootElement);
+    }
+  };
+  PopupWidget.defaultProps = {
+    ...import_core14.Widget.defaultProps,
+    id: "info",
+    viewId: null,
+    position: [0, 0],
+    marker: null,
+    defaultIsOpen: true,
+    content: "",
+    placement: "right",
+    offset: 10,
+    arrow: 10,
+    closeButton: true,
+    closeOnClickOutside: false,
+    onOpenChange: () => {
+    }
+  };
+
+  // src/context-menu-widget.tsx
+  var import_core15 = __toESM(require_core(), 1);
+  var ContextMenuWidget = class extends import_core15.Widget {
+    constructor(props) {
+      super(props);
+      this.className = "deck-widget-context-menu";
+      this.placement = "fill";
+      this.menu = null;
+      this.setProps(this.props);
+    }
+    onAdd({ deck }) {
+      deck.getCanvas()?.addEventListener("contextmenu", (event) => this.handleContextMenu(event));
+    }
+    handleContextMenu(srcEvent) {
+      const targetRect = srcEvent.target.getBoundingClientRect();
+      const x2 = srcEvent.clientX - targetRect.x;
+      const y3 = srcEvent.clientY - targetRect.y;
+      const pickInfo = this.deck?.pickObject({ x: x2, y: y3 }) || {
+        x: x2,
+        y: y3,
+        picked: false,
+        layer: null,
+        color: null,
+        index: -1,
+        pixelRatio: 1
+      };
+      const menuItems = this.props.getMenuItems(pickInfo, this) || [];
+      this.menu = menuItems.length > 0 ? {
+        items: menuItems,
+        pickInfo
+      } : null;
+      srcEvent.preventDefault();
+      this.updateHTML();
+    }
+    onRenderHTML(rootElement) {
+      if (!this.menu) {
+        B(null, rootElement);
+        return;
+      }
+      const { items, pickInfo } = this.menu;
+      const style = {
+        pointerEvents: "auto",
+        position: "static",
+        ...this.props.style
+      };
+      const ui = /* @__PURE__ */ u2(
+        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: /* @__PURE__ */ u2(
+            SimpleMenu,
+            {
+              menuItems: items,
+              onSelect: (value) => this.props.onMenuItemSelected(value, pickInfo),
+              style,
+              isOpen: true,
+              onClose: () => this.hide()
+            }
+          )
+        }
+      );
+      B(ui, rootElement);
+    }
+    hide() {
+      this.menu = null;
+      this.updateHTML();
+    }
+  };
+  ContextMenuWidget.defaultProps = {
+    ...import_core15.Widget.defaultProps,
+    id: "context",
+    viewId: null,
+    getMenuItems: void 0,
+    onMenuItemSelected: () => {
+    },
+    placement: "bottom-start",
+    offset: 10,
+    arrow: false
+  };
+
+  // src/scrollbar-widget.tsx
+  var import_core16 = __toESM(require_core(), 1);
+
+  // src/lib/components/range-input.tsx
+  var wheelListenerOptions = { passive: false };
+  var clamp2 = (value, min3, max3) => {
+    if (value < min3) {
+      return min3;
+    }
+    if (value > max3) {
+      return max3;
+    }
+    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: min3,
+      max: max3,
+      step,
+      value,
+      orientation,
+      pageSize,
+      stepButtons = false,
+      startButtonAriaLabel,
+      endButtonAriaLabel,
+      eventTarget,
+      decorations = [],
+      onChange
+    } = props;
+    const vertical = orientation !== "horizontal";
+    const rootRef = A2(null);
+    const trackRef = A2(null);
+    const thumbRef = A2(null);
+    const dragStateRef = A2(null);
+    const [trackLength, setTrackLength] = h2(0);
+    const range = max3 - min3;
+    const rangeSize = Math.max(0, value[1] - value[0]);
+    const maxStart = Math.max(0, range - rangeSize);
+    const clampedStart = clamp2(value[0], min3, min3 + maxStart);
+    const { thumbLength, thumbOffset } = T2(() => {
+      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 : clamp2((clampedStart - min3) / maxStart, 0, 1);
+      return {
+        thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
+        thumbOffset: travel * ratio
+      };
+    }, [trackLength, range, rangeSize, maxStart, clampedStart, min3]);
+    const emitRange = q2(
+      (nextStart) => {
+        if (!onChange) {
+          return;
+        }
+        const clamped = clamp2(nextStart, min3, min3 + maxStart);
+        onChange([clamped, clamped + rangeSize]);
+      },
+      [onChange, min3, maxStart, rangeSize]
+    );
+    const handleStepNegative = q2(
+      (event) => {
+        event.stopPropagation();
+        emitRange(clampedStart - getEffectiveStep(step, range));
+      },
+      [emitRange, clampedStart, step, range]
+    );
+    const handleStepPositive = q2(
+      (event) => {
+        event.stopPropagation();
+        emitRange(clampedStart + getEffectiveStep(step, range));
+      },
+      [emitRange, clampedStart, step, range]
+    );
+    const handleTrackClick = q2(
+      (event) => {
+        if (event.button !== 0) {
+          return;
+        }
+        const target = event.target;
+        if (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 : clamp2((coordinate - thumbCenter) / span, 0, 1);
+        emitRange(min3 + ratio * maxStart);
+      },
+      [vertical, trackLength, thumbLength, emitRange, min3, 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: min3,
+        max: max3,
+        maxStart
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const handleThumbPointerMove = q2(
+      (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 = clamp2(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
+        emitRange(nextStart);
+        event.preventDefault();
+      },
+      [emitRange, vertical]
+    );
+    const handleThumbPointerUp = q2((event) => {
+      const state = dragStateRef.current;
+      if (state && state.pointerId === event.pointerId) {
+        dragStateRef.current = null;
+        thumbRef.current?.releasePointerCapture(event.pointerId);
+        event.preventDefault();
+      }
+    }, []);
+    const handleKeyDown = q2(
+      (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(min3);
+            event.preventDefault();
+            break;
+          case "End":
+            emitRange(min3 + maxStart);
+            event.preventDefault();
+            break;
+          default:
+            break;
+        }
+      },
+      [vertical, emitRange, clampedStart, step, range, pageSize, rangeSize, min3, maxStart]
+    );
+    const handleWheel = q2(
+      (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]
+    );
+    _2(() => {
+      setTrackLength(getTrackDimension(trackRef.current, vertical)[1]);
+    }, [vertical]);
+    _2(() => {
+      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]);
+    y2(() => {
+      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 = T2(() => {
+      if (!decorations.length || range <= 0) {
+        return [];
+      }
+      return decorations.map((decoration, index) => {
+        const [start, end] = decoration.position;
+        const startRatio = (start - min3) / range;
+        const endRatio = (end - min3) / 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 /* @__PURE__ */ u2("div", { className: "deck-widget-range__decoration", style, children: decoration.element }, `decoration-${index}`);
+      });
+    }, [decorations, range, min3, vertical]);
+    return /* @__PURE__ */ u2(
+      "div",
+      {
+        ref: rootRef,
+        tabIndex: 0,
+        role: "scrollbar",
+        "aria-valuemin": min3,
+        "aria-valuemax": min3 + maxStart,
+        "aria-valuenow": clampedStart,
+        "aria-orientation": orientation,
+        className: `${className} deck-widget-range deck-widget-range--${orientation} ${maxStart === 0 ? "deck-widget-range--disabled" : ""}`,
+        children: [
+          stepButtons && /* @__PURE__ */ u2(
+            "button",
+            {
+              type: "button",
+              className: "deck-widget-range__button deck-widget-range__button--start",
+              "aria-label": startButtonAriaLabel,
+              disabled: clampedStart <= min3,
+              onClick: handleStepNegative,
+              children: /* @__PURE__ */ u2("span", { className: "deck-widget-icon" })
+            }
+          ),
+          /* @__PURE__ */ u2("div", { className: "deck-widget-range__track", ref: trackRef, onClick: handleTrackClick, children: [
+            /* @__PURE__ */ u2("div", { className: "deck-widget-range__decorations", children: decorationElements }),
+            /* @__PURE__ */ u2(
+              "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 && /* @__PURE__ */ u2(
+            "button",
+            {
+              type: "button",
+              className: "deck-widget-range__button deck-widget-range__button--end",
+              "aria-label": endButtonAriaLabel,
+              disabled: clampedStart >= min3 + maxStart,
+              onClick: handleStepPositive,
+              children: /* @__PURE__ */ u2("span", { className: "deck-widget-icon" })
+            }
+          )
+        ]
+      }
+    );
+  }
+
+  // src/scrollbar-widget.tsx
+  var clamp3 = (value, min3, max3) => {
+    if (value < min3) {
+      return min3;
+    }
+    if (value > max3) {
+      return max3;
+    }
+    return value;
+  };
+  var _ScrollbarWidget = class extends import_core16.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 = /* @__PURE__ */ u2(
+        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
+        }
+      );
+      B(ui, element);
+    }
+    onRemove() {
+      if (this.rootElement) {
+        B(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 ? (e3) => {
+          const handled = decoration.onClick?.(e3);
+          if (handled) {
+            e3.stopPropagation();
+            e3.preventDefault();
+          }
+        } : void 0;
+        return {
+          position: [start - contentStart, end - contentStart],
+          element: /* @__PURE__ */ u2(
+            "div",
+            {
+              style: {
+                pointerEvents: onClick ? "all" : "none",
+                width: "100%",
+                height: "100%",
+                backgroundColor: decoration.color
+              },
+              title: decoration.title,
+              onClick
+            }
+          )
+        };
+      });
+    }
+    getWheelEventTarget(mode) {
+      if (mode === null)
+        return null;
+      if (mode === "local")
+        return this.rootElement;
+      return this.deck?.props.parent || this.deck?.getCanvas()?.parentElement || this.rootElement;
+    }
+    getMaxScroll() {
+      return Math.max(0, this.contentSize - this.viewportSize);
+    }
+    getClampedOffset() {
+      const maxScroll = this.getMaxScroll();
+      return clamp3(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 = clamp3(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: {}
+        });
+      }
+    }
+  };
+  var ScrollbarWidget = _ScrollbarWidget;
+  ScrollbarWidget.defaultProps = {
+    ...import_core16.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(([x2, y3]) => viewport.project([x2, y3, 0])).reduce(
+      (range, [x2, y3]) => {
+        const value = isVertical ? y3 : x2;
+        range[0] = Math.min(range[0], value);
+        range[1] = Math.max(range[1], value);
+        return range;
+      },
+      [Infinity, -Infinity]
+    );
+  }
+
+  // src/timeline-widget.tsx
+  var import_core17 = __toESM(require_core(), 1);
+  var TimelineWidget = class extends import_core17.Widget {
+    constructor(props = {}) {
+      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 = (e3) => {
-        const input = e3.target;
-        const val = Number(input.value);
-        this.currentTime = val;
-        this.props.onTimeChange(val);
+      this.handleTimeChange = ([value]) => {
+        this.currentTime = value;
+        this.props.timeline?.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: [min3, max3],
+          step,
+          loop
+        } = this.props;
+        if (step > 0) {
+          let next = Math.floor(this.currentTime / step) * step + step;
+          if (next > max3) {
+            if (this.currentTime < max3) {
+              next = max3;
+            } else if (loop) {
+              next = min3;
+            } else {
+              next = max3;
+              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];
+      this.props.timeline?.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) {
+      const { timeRange, step, formatLabel } = this.props;
+      const currentTime = this.currentTime;
+      rootElement.dataset.placement = this.props.placement;
       B(
-        /* @__PURE__ */ u2("div", { style: { display: "flex", alignItems: "center", pointerEvents: "auto" }, children: [
-          /* @__PURE__ */ u2(IconButton, { label: this.playing ? "Pause" : "Play", onClick: this.handlePlayPause, children: /* @__PURE__ */ u2("div", { className: "text", children: this.playing ? "\u23F8" : "\u25B6" }) }),
+        /* @__PURE__ */ u2("div", { className: "deck-widget-button-group", children: [
+          this.playing ? /* @__PURE__ */ u2(
+            IconButton,
+            {
+              label: "Pause",
+              className: "deck-widget-timeline-pause",
+              onClick: this.handlePlayPause
+            }
+          ) : /* @__PURE__ */ u2(
+            IconButton,
+            {
+              label: "Play",
+              className: "deck-widget-timeline-play",
+              onClick: this.handlePlayPause
+            }
+          ),
           /* @__PURE__ */ u2(
-            "input",
+            RangeInput,
             {
-              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
+              min: timeRange[0],
+              max: timeRange[1],
+              orientation: "horizontal",
+              step,
+              value: [currentTime, currentTime],
+              onChange: this.handleTimeChange,
+              decorations: [
+                {
+                  position: [currentTime, currentTime + step],
+                  element: /* @__PURE__ */ u2("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
+                }
+              ]
             }
           )
         ] }),
         rootElement
       );
     }
-    start() {
+    play() {
       this.playing = true;
       this.updateHTML();
       this.tick();
@@ -2268,21 +4348,25 @@ var __exports__ = (() => {
     }
   };
   TimelineWidget.defaultProps = {
-    ...import_core14.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
   };
 
   // src/screenshot-widget.tsx
-  var import_core15 = __toESM(require_core(), 1);
-  var ScreenshotWidget = class extends import_core15.Widget {
+  var import_core18 = __toESM(require_core(), 1);
+  var ScreenshotWidget = class extends import_core18.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-screenshot";
@@ -2331,7 +4415,7 @@ var __exports__ = (() => {
     }
   };
   ScreenshotWidget.defaultProps = {
-    ...import_core15.Widget.defaultProps,
+    ...import_core18.Widget.defaultProps,
     id: "screenshot",
     placement: "top-left",
     viewId: null,
@@ -2342,8 +4426,8 @@ var __exports__ = (() => {
   };
 
   // src/theme-widget.tsx
-  var import_core16 = __toESM(require_core(), 1);
-  var import_core17 = __toESM(require_core(), 1);
+  var import_core19 = __toESM(require_core(), 1);
+  var import_core20 = __toESM(require_core(), 1);
 
   // src/themes.ts
   var LightTheme = {
@@ -2366,7 +4450,13 @@ var __exports__ = (() => {
     "--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",
@@ -2388,7 +4478,13 @@ var __exports__ = (() => {
     "--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",
@@ -2410,7 +4506,13 @@ var __exports__ = (() => {
     "--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",
@@ -2432,11 +4534,17 @@ var __exports__ = (() => {
     "--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)"
   };
 
   // src/theme-widget.tsx
-  var ThemeWidget = class extends import_core17.Widget {
+  var ThemeWidget = class extends import_core20.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-theme";
@@ -2453,17 +4561,17 @@ var __exports__ = (() => {
       super.setProps(props);
       switch (this.themeMode) {
         case "light":
-          if (props.lightModeTheme && !(0, import_core16._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_core16._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
+          if (props.darkModeTheme && !(0, import_core19._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
             this._setThemeMode("dark");
           }
           break;
         default:
-          import_core16.log.warn(`Invalid theme mode ${this.themeMode}`)();
+          import_core19.log.warn(`Invalid theme mode ${this.themeMode}`)();
       }
     }
     onRenderHTML(rootElement) {
@@ -2492,20 +4600,26 @@ var __exports__ = (() => {
       const container = this.rootElement?.closest(".deck-widget-container");
       if (container) {
         const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
-        (0, import_core16._applyStyles)(container, themeStyle);
+        (0, import_core19._applyStyles)(container, themeStyle);
         const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-        import_core16.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_core17.Widget.defaultProps,
+    ...import_core20.Widget.defaultProps,
     id: "theme",
     placement: "top-left",
     viewId: null,
@@ -2517,8 +4631,8 @@ var __exports__ = (() => {
   };
 
   // src/loading-widget.tsx
-  var import_core18 = __toESM(require_core(), 1);
-  var LoadingWidget = class extends import_core18.Widget {
+  var import_core21 = __toESM(require_core(), 1);
+  var LoadingWidget = class extends import_core21.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-loading";
@@ -2557,7 +4671,7 @@ var __exports__ = (() => {
     }
   };
   LoadingWidget.defaultProps = {
-    ...import_core18.Widget.defaultProps,
+    ...import_core21.Widget.defaultProps,
     id: "loading",
     placement: "top-left",
     viewId: null,
@@ -2565,8 +4679,8 @@ var __exports__ = (() => {
   };
 
   // src/fps-widget.tsx
-  var import_core19 = __toESM(require_core(), 1);
-  var FpsWidget = class extends import_core19.Widget {
+  var import_core22 = __toESM(require_core(), 1);
+  var FpsWidget = class extends import_core22.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-fps";
@@ -2607,17 +4721,15 @@ var __exports__ = (() => {
     }
   };
   FpsWidget.defaultProps = {
-    ...import_core19.Widget.defaultProps,
+    ...import_core22.Widget.defaultProps,
     id: "fps",
     placement: "top-left",
     viewId: null
   };
 
   // src/stats-widget.tsx
-  var import_core20 = __toESM(require_core(), 1);
-  var import_core21 = __toESM(require_core2(), 1);
-  var RIGHT_ARROW = "\u25B6";
-  var DOWN_ARROW = "\u2B07";
+  var import_core23 = __toESM(require_core(), 1);
+  var import_core24 = __toESM(require_core2(), 1);
   var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
   function formatTime(time) {
     return time < 1e3 ? `${time.toFixed(2)}ms` : `${(time / 1e3).toFixed(2)}s`;
@@ -2633,7 +4745,7 @@ var __exports__ = (() => {
     fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
     memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
   };
-  var StatsWidget = class extends import_core20.Widget {
+  var StatsWidget = class extends import_core23.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-stats";
@@ -2646,6 +4758,7 @@ var __exports__ = (() => {
       };
       this._formatters = { ...DEFAULT_FORMATTERS };
       this._resetOnUpdate = { ...this.props.resetOnUpdate };
+      this.collapsed = !props.defaultIsExpanded;
       this.setProps(props);
     }
     setProps(props) {
@@ -2692,9 +4805,8 @@ var __exports__ = (() => {
               style: { cursor: "pointer", pointerEvents: "auto" },
               onClick: this._toggleCollapsed,
               children: [
-                collapsed ? RIGHT_ARROW : DOWN_ARROW,
-                " ",
-                title
+                /* @__PURE__ */ u2("b", { children: title }),
+                /* @__PURE__ */ u2("button", { className: "deck-widget-dropdown-button", children: /* @__PURE__ */ u2("span", { className: `deck-widget-dropdown-icon ${collapsed ? "" : "open"}` }) })
               ]
             }
           ),
@@ -2715,7 +4827,7 @@ var __exports__ = (() => {
           const metrics = this.deck?.metrics ?? {};
           return Object.entries(metrics);
         case "luma":
-          return Array.from(import_core21.luma.stats.stats.values())[0];
+          return Array.from(import_core24.luma.stats.stats.values())[0];
         case "device":
           const device = this.deck?.device;
           const stats = device?.statsManager.stats.values();
@@ -2737,10 +4849,11 @@ var __exports__ = (() => {
     }
   };
   StatsWidget.defaultProps = {
-    ...import_core20.Widget.defaultProps,
+    ...import_core23.Widget.defaultProps,
     type: "deck",
     placement: "top-left",
     viewId: null,
+    defaultIsExpanded: false,
     stats: void 0,
     title: "Stats",
     framesPerUpdate: 1,