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

package/dist/dist.dev.js

@@ -56,37 +56,39 @@ var __exports__ = (() => {
   var bundle_exports = {};
   __export(bundle_exports, {
     CompassWidget: () => CompassWidget,
+    ContextMenuWidget: () => ContextMenuWidget,
     DarkGlassTheme: () => DarkGlassTheme,
     DarkTheme: () => DarkTheme,
     FullscreenWidget: () => FullscreenWidget,
     GimbalWidget: () => GimbalWidget,
+    IconWidget: () => IconWidget,
+    InfoWidget: () => InfoWidget,
     LightGlassTheme: () => LightGlassTheme,
     LightTheme: () => LightTheme,
+    LoadingWidget: () => LoadingWidget,
+    PopupWidget: () => PopupWidget,
     ResetViewWidget: () => ResetViewWidget,
     ScreenshotWidget: () => ScreenshotWidget,
+    ScrollbarWidget: () => ScrollbarWidget,
+    SelectorWidget: () => SelectorWidget,
+    ThemeWidget: () => ThemeWidget,
+    ToggleWidget: () => ToggleWidget,
     ZoomWidget: () => ZoomWidget,
     _ButtonGroup: () => ButtonGroup,
-    _ContextMenuWidget: () => ContextMenuWidget,
     _CoordinatesGeocoder: () => CoordinatesGeocoder,
     _CurrentLocationGeocoder: () => CurrentLocationGeocoder,
     _DropdownMenu: () => DropdownMenu,
-    _FpsWidget: () => FpsWidget,
     _GeocoderWidget: () => GeocoderWidget,
     _GoogleGeocoder: () => GoogleGeocoder,
-    _GroupedIconButton: () => GroupedIconButton,
     _IconButton: () => IconButton,
-    _IconMenu: () => IconMenu,
-    _InfoWidget: () => InfoWidget,
-    _LoadingWidget: () => LoadingWidget,
     _MapboxGeocoder: () => MapboxGeocoder,
     _OpenCageGeocoder: () => OpenCageGeocoder,
+    _RangeInput: () => RangeInput,
     _ScaleWidget: () => ScaleWidget,
     _SimpleMenu: () => SimpleMenu,
     _SplitterWidget: () => SplitterWidget,
     _StatsWidget: () => StatsWidget,
-    _ThemeWidget: () => ThemeWidget,
-    _TimelineWidget: () => TimelineWidget,
-    _ViewSelectorWidget: () => ViewSelectorWidget
+    _TimelineWidget: () => TimelineWidget
   });
 
   // ../core/bundle/peer-dependency.ts
@@ -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,37 +268,37 @@ 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, h3, 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);
     n:
       if ("function" == typeof T3)
         try {
-          if (m2 = u4.props, x2 = "prototype" in T3 && T3.prototype.render, C3 = (a3 = T3.contextType) && i4[a3.__c], M2 = a3 ? C3 ? C3.props.value : a3.__ : i4, t3.__c ? g2 = (h4 = u4.__c = t3.__c).__ = h4.__E : (x2 ? u4.__c = h4 = new T3(m2, M2) : (u4.__c = h4 = new b(m2, M2), h4.constructor = T3, h4.render = q), C3 && C3.sub(h4), h4.props = m2, h4.state || (h4.state = {}), h4.context = M2, h4.__n = i4, p3 = h4.__d = true, h4.__h = [], h4._sb = []), x2 && null == h4.__s && (h4.__s = h4.state), x2 && null != T3.getDerivedStateFromProps && (h4.__s == h4.state && (h4.__s = d({}, h4.__s)), d(h4.__s, T3.getDerivedStateFromProps(m2, h4.__s))), v3 = h4.props, w3 = h4.state, h4.__v = u4, p3)
-            x2 && null == T3.getDerivedStateFromProps && null != h4.componentWillMount && h4.componentWillMount(), x2 && null != h4.componentDidMount && h4.__h.push(h4.componentDidMount);
+          if (m2 = u4.props, x2 = "prototype" in T3 && T3.prototype.render, C3 = (a3 = T3.contextType) && i4[a3.__c], M2 = a3 ? C3 ? C3.props.value : a3.__ : i4, t3.__c ? g2 = (h3 = u4.__c = t3.__c).__ = h3.__E : (x2 ? u4.__c = h3 = new T3(m2, M2) : (u4.__c = h3 = new b(m2, M2), h3.constructor = T3, h3.render = q), C3 && C3.sub(h3), h3.props = m2, h3.state || (h3.state = {}), h3.context = M2, h3.__n = i4, p3 = h3.__d = true, h3.__h = [], h3._sb = []), x2 && null == h3.__s && (h3.__s = h3.state), x2 && null != T3.getDerivedStateFromProps && (h3.__s == h3.state && (h3.__s = d({}, h3.__s)), d(h3.__s, T3.getDerivedStateFromProps(m2, h3.__s))), v3 = h3.props, w3 = h3.state, h3.__v = u4, p3)
+            x2 && null == T3.getDerivedStateFromProps && null != h3.componentWillMount && h3.componentWillMount(), x2 && null != h3.componentDidMount && h3.__h.push(h3.componentDidMount);
           else {
-            if (x2 && null == T3.getDerivedStateFromProps && m2 !== v3 && null != h4.componentWillReceiveProps && h4.componentWillReceiveProps(m2, M2), !h4.__e && (null != h4.shouldComponentUpdate && false === h4.shouldComponentUpdate(m2, h4.__s, M2) || u4.__v === t3.__v)) {
-              for (u4.__v !== t3.__v && (h4.props = m2, h4.state = h4.__s, h4.__d = false), u4.__e = t3.__e, u4.__k = t3.__k, u4.__k.forEach(function(n3) {
+            if (x2 && null == T3.getDerivedStateFromProps && m2 !== v3 && null != h3.componentWillReceiveProps && h3.componentWillReceiveProps(m2, M2), !h3.__e && (null != h3.shouldComponentUpdate && false === h3.shouldComponentUpdate(m2, h3.__s, M2) || u4.__v === t3.__v)) {
+              for (u4.__v !== t3.__v && (h3.props = m2, h3.state = h3.__s, h3.__d = false), u4.__e = t3.__e, u4.__k = t3.__k, u4.__k.forEach(function(n3) {
                 n3 && (n3.__ = u4);
-              }), P2 = 0; P2 < h4._sb.length; P2++)
-                h4.__h.push(h4._sb[P2]);
-              h4._sb = [], h4.__h.length && f4.push(h4);
+              }), P2 = 0; P2 < h3._sb.length; P2++)
+                h3.__h.push(h3._sb[P2]);
+              h3._sb = [], h3.__h.length && f4.push(h3);
               break n;
             }
-            null != h4.componentWillUpdate && h4.componentWillUpdate(m2, h4.__s, M2), x2 && null != h4.componentDidUpdate && h4.__h.push(function() {
-              h4.componentDidUpdate(v3, w3, _2);
+            null != h3.componentWillUpdate && h3.componentWillUpdate(m2, h3.__s, M2), x2 && null != h3.componentDidUpdate && h3.__h.push(function() {
+              h3.componentDidUpdate(v3, w3, _3);
             });
           }
-          if (h4.context = M2, h4.props = m2, h4.__P = n2, h4.__e = false, $2 = l.__r, I2 = 0, x2) {
-            for (h4.state = h4.__s, h4.__d = false, $2 && $2(u4), a3 = h4.render(h4.props, h4.state, h4.context), H = 0; H < h4._sb.length; H++)
-              h4.__h.push(h4._sb[H]);
-            h4._sb = [];
+          if (h3.context = M2, h3.props = m2, h3.__P = n2, h3.__e = false, $2 = l.__r, I2 = 0, x2) {
+            for (h3.state = h3.__s, h3.__d = false, $2 && $2(u4), a3 = h3.render(h3.props, h3.state, h3.context), H = 0; H < h3._sb.length; H++)
+              h3.__h.push(h3._sb[H]);
+            h3._sb = [];
           } else
             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);
+              h3.__d = false, $2 && $2(u4), a3 = h3.render(h3.props, h3.state, h3.context), h3.state = h3.__s;
+            } while (h3.__d && ++I2 < 25);
+          h3.state = h3.__s, null != h3.getChildContext && (i4 = d(d({}, i4), h3.getChildContext())), x2 && !p3 && null != h3.getSnapshotBeforeUpdate && (_3 = h3.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), h3.base = u4.__e, u4.__u &= -161, h3.__h.length && f4.push(h3), g2 && (h3.__E = h3.__ = 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,19 +444,185 @@ var __exports__ = (() => {
     return /* @__PURE__ */ u2("div", { className: `deck-widget-button-group ${orientation}`, children });
   };
 
-  // src/lib/components/grouped-icon-button.tsx
-  var GroupedIconButton = (props) => {
-    const { className = "", label, onClick, children } = props;
-    return /* @__PURE__ */ u2(
+  // ../../node_modules/preact/hooks/dist/hooks.module.js
+  var t2;
+  var r2;
+  var u3;
+  var i3;
+  var o2 = 0;
+  var f3 = [];
+  var c2 = l;
+  var e2 = c2.__b;
+  var a2 = c2.__r;
+  var v2 = c2.diffed;
+  var l2 = c2.__c;
+  var m = c2.unmount;
+  var s2 = c2.__;
+  function d2(n2, t3) {
+    c2.__h && c2.__h(r2, n2, o2 || t3), o2 = 0;
+    var u4 = r2.__H || (r2.__H = { __: [], __h: [] });
+    return n2 >= u4.__.length && u4.__.push({}), u4.__[n2];
+  }
+  function h2(n2) {
+    return o2 = 1, p2(D, n2);
+  }
+  function p2(n2, u4, i4) {
+    var o3 = d2(t2++, 2);
+    if (o3.t = n2, !o3.__c && (o3.__ = [i4 ? i4(u4) : D(void 0, u4), function(n3) {
+      var t3 = o3.__N ? o3.__N[0] : o3.__[0], r3 = o3.t(t3, n3);
+      t3 !== r3 && (o3.__N = [r3, o3.__[1]], o3.__c.setState({}));
+    }], o3.__c = r2, !r2.u)) {
+      var f4 = function(n3, t3, r3) {
+        if (!o3.__c.__H)
+          return true;
+        var u5 = o3.__c.__H.__.filter(function(n4) {
+          return !!n4.__c;
+        });
+        if (u5.every(function(n4) {
+          return !n4.__N;
+        }))
+          return !c3 || c3.call(this, n3, t3, r3);
+        var i5 = false;
+        return u5.forEach(function(n4) {
+          if (n4.__N) {
+            var t4 = n4.__[0];
+            n4.__ = n4.__N, n4.__N = void 0, t4 !== n4.__[0] && (i5 = true);
+          }
+        }), !(!i5 && o3.__c.props === n3) && (!c3 || c3.call(this, n3, t3, r3));
+      };
+      r2.u = true;
+      var c3 = r2.shouldComponentUpdate, e3 = r2.componentWillUpdate;
+      r2.componentWillUpdate = function(n3, t3, r3) {
+        if (this.__e) {
+          var u5 = c3;
+          c3 = void 0, f4(n3, t3, r3), c3 = u5;
+        }
+        e3 && e3.call(this, n3, t3, r3);
+      }, r2.shouldComponentUpdate = f4;
+    }
+    return o3.__N || o3.__;
+  }
+  function y2(n2, u4) {
+    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 };
+    }, []);
+  }
+  function T2(n2, r3) {
+    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)
+        try {
+          n2.__H.__h.forEach(z2), n2.__H.__h.forEach(B2), n2.__H.__h = [];
+        } catch (t3) {
+          n2.__H.__h = [], c2.__e(t3, n2.__v);
+        }
+  }
+  c2.__b = function(n2) {
+    r2 = null, e2 && e2(n2);
+  }, c2.__ = function(n2, t3) {
+    n2 && t3.__k && t3.__k.__m && (n2.__m = t3.__k.__m), s2 && s2(n2, t3);
+  }, c2.__r = function(n2) {
+    a2 && a2(n2), t2 = 0;
+    var i4 = (r2 = n2.__c).__H;
+    i4 && (u3 === r2 ? (i4.__h = [], r2.__h = [], i4.__.forEach(function(n3) {
+      n3.__N && (n3.__ = n3.__N), n3.i = n3.__N = void 0;
+    })) : (i4.__h.forEach(z2), i4.__h.forEach(B2), i4.__h = [], t2 = 0)), u3 = r2;
+  }, c2.diffed = function(n2) {
+    v2 && v2(n2);
+    var t3 = n2.__c;
+    t3 && t3.__H && (t3.__H.__h.length && (1 !== f3.push(t3) && i3 === c2.requestAnimationFrame || ((i3 = c2.requestAnimationFrame) || w2)(j2)), t3.__H.__.forEach(function(n3) {
+      n3.i && (n3.__H = n3.i), n3.i = void 0;
+    })), u3 = r2 = null;
+  }, c2.__c = function(n2, t3) {
+    t3.some(function(n3) {
+      try {
+        n3.__h.forEach(z2), n3.__h = n3.__h.filter(function(n4) {
+          return !n4.__ || B2(n4);
+        });
+      } catch (r3) {
+        t3.some(function(n4) {
+          n4.__h && (n4.__h = []);
+        }), t3 = [], c2.__e(r3, n3.__v);
+      }
+    }), l2 && l2(n2, t3);
+  }, c2.unmount = function(n2) {
+    m && m(n2);
+    var t3, r3 = n2.__c;
+    r3 && r3.__H && (r3.__H.__.forEach(function(n3) {
+      try {
+        z2(n3);
+      } catch (n4) {
+        t3 = n4;
+      }
+    }), r3.__H = void 0, t3 && c2.__e(t3, r3.__v));
+  };
+  var k2 = "function" == typeof requestAnimationFrame;
+  function w2(n2) {
+    var t3, r3 = function() {
+      clearTimeout(u4), k2 && cancelAnimationFrame(t3), setTimeout(n2);
+    }, u4 = setTimeout(r3, 100);
+    k2 && (t3 = requestAnimationFrame(r3));
+  }
+  function z2(n2) {
+    var t3 = r2, u4 = n2.__c;
+    "function" == typeof u4 && (n2.__c = void 0, u4()), r2 = t3;
+  }
+  function B2(n2) {
+    var t3 = r2;
+    n2.__c = n2.__(), r2 = t3;
+  }
+  function C2(n2, t3) {
+    return !n2 || n2.length !== t3.length || t3.some(function(t4, r3) {
+      return t4 !== n2[r3];
+    });
+  }
+  function D(n2, t3) {
+    return "function" == typeof t3 ? t3(n2) : t3;
+  }
+
+  // src/lib/data-url.ts
+  function getCSSMask(imageUrl) {
+    if (!imageUrl)
+      return void 0;
+    const cssUrl = `url("${imageUrl.replace(/"/g, `'`)}")`;
+    return { maskImage: cssUrl, WebkitMaskImage: cssUrl };
+  }
+
+  // src/lib/components/icon-button.tsx
+  var IconButton = (props) => {
+    const { className = "", style, color, icon, label, onClick, children } = props;
+    const iconStyle = T2(() => {
+      const css = getCSSMask(icon);
+      if (!color)
+        return css;
+      return { ...css, backgroundColor: color };
+    }, [color, icon]);
+    return /* @__PURE__ */ u2("div", { className: "deck-widget-button", style, 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" })
+        children: children ? children : /* @__PURE__ */ u2("div", { className: "deck-widget-icon", style: iconStyle })
       }
-    );
+    ) });
   };
 
   // src/zoom-widget.tsx
@@ -463,7 +631,6 @@ var __exports__ = (() => {
       super(props);
       this.className = "deck-widget-zoom";
       this.placement = "top-left";
-      this.viewports = {};
       this.setProps(this.props);
     }
     setProps(props) {
@@ -474,7 +641,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 +649,7 @@ var __exports__ = (() => {
           }
         ),
         /* @__PURE__ */ u2(
-          GroupedIconButton,
+          IconButton,
           {
             onClick: () => this.handleZoomOut(),
             label: this.props.zoomOutLabel,
@@ -492,13 +659,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 +683,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 +710,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 +737,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 +854,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 +866,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 +883,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 +923,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 +972,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);
       }
     }
   };
@@ -1000,202 +1143,70 @@ var __exports__ = (() => {
   var import_core7 = __toESM(require_core(), 1);
   var import_core8 = __toESM(require_core(), 1);
 
-  // ../../node_modules/preact/hooks/dist/hooks.module.js
-  var t2;
-  var r2;
-  var u3;
-  var i3;
-  var o2 = 0;
-  var f3 = [];
-  var c2 = l;
-  var e2 = c2.__b;
-  var a2 = c2.__r;
-  var v2 = c2.diffed;
-  var l2 = c2.__c;
-  var m = c2.unmount;
-  var s2 = c2.__;
-  function d2(n2, t3) {
-    c2.__h && c2.__h(r2, n2, o2 || t3), o2 = 0;
-    var u4 = r2.__H || (r2.__H = { __: [], __h: [] });
-    return n2 >= u4.__.length && u4.__.push({}), u4.__[n2];
+  // src/lib/components/dropdown-menu.tsx
+  function getMenuItemValue(item) {
+    return typeof item === "string" ? item : item.value;
   }
-  function h2(n2) {
-    return o2 = 1, p2(D, n2);
+  function getMenuItemLabel(item) {
+    return typeof item === "string" ? item : item.label;
   }
-  function p2(n2, u4, i4) {
-    var o3 = d2(t2++, 2);
-    if (o3.t = n2, !o3.__c && (o3.__ = [i4 ? i4(u4) : D(void 0, u4), function(n3) {
-      var t3 = o3.__N ? o3.__N[0] : o3.__[0], r3 = o3.t(t3, n3);
-      t3 !== r3 && (o3.__N = [r3, o3.__[1]], o3.__c.setState({}));
-    }], o3.__c = r2, !r2.u)) {
-      var f4 = function(n3, t3, r3) {
-        if (!o3.__c.__H)
-          return true;
-        var u5 = o3.__c.__H.__.filter(function(n4) {
-          return !!n4.__c;
-        });
-        if (u5.every(function(n4) {
-          return !n4.__N;
-        }))
-          return !c3 || c3.call(this, n3, t3, r3);
-        var i5 = false;
-        return u5.forEach(function(n4) {
-          if (n4.__N) {
-            var t4 = n4.__[0];
-            n4.__ = n4.__N, n4.__N = void 0, t4 !== n4.__[0] && (i5 = true);
-          }
-        }), !(!i5 && o3.__c.props === n3) && (!c3 || c3.call(this, n3, t3, r3));
-      };
-      r2.u = true;
-      var c3 = r2.shouldComponentUpdate, e3 = r2.componentWillUpdate;
-      r2.componentWillUpdate = function(n3, t3, r3) {
-        if (this.__e) {
-          var u5 = c3;
-          c3 = void 0, f4(n3, t3, r3), c3 = u5;
-        }
-        e3 && e3.call(this, n3, t3, r3);
-      }, r2.shouldComponentUpdate = f4;
-    }
-    return o3.__N || o3.__;
-  }
-  function y2(n2, u4) {
-    var i4 = d2(t2++, 3);
-    !c2.__s && C2(i4.__H, u4) && (i4.__ = n2, i4.i = u4, r2.__H.__h.push(i4));
-  }
-  function A2(n2) {
-    return o2 = 5, T2(function() {
-      return { current: n2 };
-    }, []);
-  }
-  function T2(n2, r3) {
-    var u4 = d2(t2++, 7);
-    return C2(u4.__H, r3) && (u4.__ = n2(), u4.__H = r3, u4.__h = n2), u4.__;
-  }
-  function j2() {
-    for (var n2; n2 = f3.shift(); )
-      if (n2.__P && n2.__H)
-        try {
-          n2.__H.__h.forEach(z2), n2.__H.__h.forEach(B2), n2.__H.__h = [];
-        } catch (t3) {
-          n2.__H.__h = [], c2.__e(t3, n2.__v);
-        }
-  }
-  c2.__b = function(n2) {
-    r2 = null, e2 && e2(n2);
-  }, c2.__ = function(n2, t3) {
-    n2 && t3.__k && t3.__k.__m && (n2.__m = t3.__k.__m), s2 && s2(n2, t3);
-  }, c2.__r = function(n2) {
-    a2 && a2(n2), t2 = 0;
-    var i4 = (r2 = n2.__c).__H;
-    i4 && (u3 === r2 ? (i4.__h = [], r2.__h = [], i4.__.forEach(function(n3) {
-      n3.__N && (n3.__ = n3.__N), n3.i = n3.__N = void 0;
-    })) : (i4.__h.forEach(z2), i4.__h.forEach(B2), i4.__h = [], t2 = 0)), u3 = r2;
-  }, c2.diffed = function(n2) {
-    v2 && v2(n2);
-    var t3 = n2.__c;
-    t3 && t3.__H && (t3.__H.__h.length && (1 !== f3.push(t3) && i3 === c2.requestAnimationFrame || ((i3 = c2.requestAnimationFrame) || w2)(j2)), t3.__H.__.forEach(function(n3) {
-      n3.i && (n3.__H = n3.i), n3.i = void 0;
-    })), u3 = r2 = null;
-  }, c2.__c = function(n2, t3) {
-    t3.some(function(n3) {
-      try {
-        n3.__h.forEach(z2), n3.__h = n3.__h.filter(function(n4) {
-          return !n4.__ || B2(n4);
-        });
-      } catch (r3) {
-        t3.some(function(n4) {
-          n4.__h && (n4.__h = []);
-        }), t3 = [], c2.__e(r3, n3.__v);
-      }
-    }), l2 && l2(n2, t3);
-  }, c2.unmount = function(n2) {
-    m && m(n2);
-    var t3, r3 = n2.__c;
-    r3 && r3.__H && (r3.__H.__.forEach(function(n3) {
-      try {
-        z2(n3);
-      } catch (n4) {
-        t3 = n4;
-      }
-    }), r3.__H = void 0, t3 && c2.__e(t3, r3.__v));
-  };
-  var k2 = "function" == typeof requestAnimationFrame;
-  function w2(n2) {
-    var t3, r3 = function() {
-      clearTimeout(u4), k2 && cancelAnimationFrame(t3), setTimeout(n2);
-    }, u4 = setTimeout(r3, 100);
-    k2 && (t3 = requestAnimationFrame(r3));
-  }
-  function z2(n2) {
-    var t3 = r2, u4 = n2.__c;
-    "function" == typeof u4 && (n2.__c = void 0, u4()), r2 = t3;
-  }
-  function B2(n2) {
-    var t3 = r2;
-    n2.__c = n2.__(), r2 = t3;
-  }
-  function C2(n2, t3) {
-    return !n2 || n2.length !== t3.length || t3.some(function(t4, r3) {
-      return t4 !== n2[r3];
-    });
-  }
-  function D(n2, t3) {
-    return "function" == typeof t3 ? t3(n2) : t3;
-  }
-
-  // src/lib/components/dropdown-menu.tsx
-  function getMenuItemValue(item) {
-    return typeof item === "string" ? item : item.value;
-  }
-  function getMenuItemLabel(item) {
-    return typeof item === "string" ? item : item.label;
-  }
-  function getMenuItemIcon(item) {
-    return typeof item === "string" ? void 0 : item.icon;
+  function getMenuItemIcon(item) {
+    return typeof item === "string" ? void 0 : item.icon;
   }
   var DropdownMenu = (props) => {
     const [isOpen, setIsOpen] = h2(false);
-    const dropdownRef = A2(null);
-    const toggleDropdown = () => setIsOpen(!isOpen);
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(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);
     y2(() => {
+      const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          props.onClose();
+        }
+      };
       document.addEventListener("mousedown", handleClickOutside);
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, []);
-    const handleSelect = (item) => {
-      props.onSelect(getMenuItemValue(item));
-      setIsOpen(false);
+    const handleSelect = (value, item) => {
+      if (value) {
+        if (typeof item === "object") {
+          item.onSelect?.();
+        }
+        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, item),
             children: [
-              icon && /* @__PURE__ */ u2(
-                "span",
-                {
-                  className: "deck-widget-dropdown-item-icon",
-                  style: { maskImage: `url("${icon}")`, WebkitMaskImage: `url("${icon}")` }
-                }
-              ),
+              icon && /* @__PURE__ */ u2("span", { className: "deck-widget-dropdown-item-icon", style: getCSSMask(icon) }),
               getMenuItemLabel(item)
             ]
           },
-          getMenuItemValue(item)
+          i4
         );
       }) })
     ] });
@@ -1435,7 +1446,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 +1468,9 @@ var __exports__ = (() => {
           this.updateHTML();
         }
         if (coordinates) {
-          this.setViewState(coordinates);
+          this.flyTo(coordinates);
         }
       };
-      this.viewports = {};
       this.setProps(this.props);
     }
     setProps(props) {
@@ -1493,22 +1503,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 +1588,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;
@@ -1629,33 +1637,153 @@ var __exports__ = (() => {
 
   // src/splitter-widget.tsx
   var import_core10 = __toESM(require_core(), 1);
+  function parseViewLayout(root) {
+    const layoutsById = [];
+    const isViewLayout = (v3) => "views" in v3;
+    function createManagedViewLayout(l3) {
+      const id = layoutsById.length;
+      const minSplit = l3.minSplit ?? 0.05;
+      const maxSplit = l3.maxSplit ?? 0.95;
+      const split = Math.min(Math.max(l3.initialSplit ?? 0.5, minSplit), maxSplit);
+      const managed = {
+        id,
+        orientation: l3.orientation,
+        views: l3.views,
+        split,
+        editable: l3.editable ?? true,
+        minSplit,
+        maxSplit,
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+      layoutsById.push(managed);
+      managed.views = [
+        isViewLayout(l3.views[0]) ? createManagedViewLayout(l3.views[0]) : l3.views[0],
+        isViewLayout(l3.views[1]) ? createManagedViewLayout(l3.views[1]) : l3.views[1]
+      ];
+      return managed;
+    }
+    createManagedViewLayout(root);
+    return layoutsById;
+  }
+  function evaluateViews(root) {
+    const views = [];
+    function evaluateViewLayout(l3, x2, y3, width, height) {
+      l3.x = x2;
+      l3.y = y3;
+      l3.width = width;
+      l3.height = height;
+      const child1X = x2;
+      const child1Y = y3;
+      let child1Width = width;
+      let child1Height = height;
+      let child2X = x2;
+      let child2Y = y3;
+      let child2Width = width;
+      let child2Height = height;
+      if (l3.orientation === "horizontal") {
+        child1Width = width * l3.split;
+        child2X = x2 + child1Width;
+        child2Width = width - child1Width;
+      } else {
+        child1Height = height * l3.split;
+        child2Y = y3 + child1Height;
+        child2Height = height - child1Height;
+      }
+      const [view1, view2] = l3.views;
+      if ("views" in view1) {
+        evaluateViewLayout(view1, child1X, child1Y, child1Width, child1Height);
+      } else {
+        views.push(
+          view1.clone({
+            x: `${child1X}%`,
+            y: `${child1Y}%`,
+            width: `${child1Width}%`,
+            height: `${child1Height}%`
+          })
+        );
+      }
+      if ("views" in view2) {
+        evaluateViewLayout(view2, child2X, child2Y, child2Width, child2Height);
+      } else {
+        views.push(
+          view2.clone({
+            x: `${child2X}%`,
+            y: `${child2Y}%`,
+            width: `${child2Width}%`,
+            height: `${child2Height}%`
+          })
+        );
+      }
+    }
+    evaluateViewLayout(root, 0, 0, 100, 100);
+    return views;
+  }
   var SplitterWidget = class extends import_core10.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-splitter";
       this.placement = "fill";
+      this.needsUpdate = true;
+      this.viewLayouts = parseViewLayout(this.props.viewLayout);
     }
     setProps(props) {
+      if (props.viewLayout && !(0, import_core10._deepEqual)(props.viewLayout, this.props.viewLayout, -1)) {
+        this.viewLayouts = parseViewLayout(props.viewLayout);
+        this.views = void 0;
+      }
       super.setProps(props);
     }
+    onRedraw() {
+      super.updateHTML();
+    }
+    // Usually widgets rerender their DOM elements here
+    // In this case we need the widget UI to synchronize with deck view states
+    // so we update deck props here and rerender DOM in the next onRedraw
+    updateHTML() {
+      if (!this.views) {
+        this.views = evaluateViews(this.viewLayouts[0]);
+        this.props.onChange(this.views.slice());
+      }
+      requestAnimationFrame(() => {
+        this.doUpdate();
+      });
+    }
+    doUpdate() {
+      if (this.deck) {
+        const deckViews = this.deck.props.views;
+        const isManagedExternally = (
+          // is not empty
+          deckViews && // is not set by us
+          deckViews !== this.lastViews
+        );
+        if (!isManagedExternally && this.lastViews !== this.views) {
+          this.lastViews = this.views;
+          this.deck.setProps({ views: this.views });
+        }
+      }
+    }
+    onChange(newSplit, layout) {
+      layout.split = newSplit;
+      this.views = evaluateViews(this.viewLayouts[0]);
+      this.props.onChange(this.views.slice());
+      this.doUpdate();
+    }
     onRenderHTML(rootElement) {
-      rootElement.style.position = "absolute";
-      rootElement.style.top = "0";
-      rootElement.style.left = "0";
-      rootElement.style.width = "100%";
-      rootElement.style.height = "100%";
-      rootElement.style.margin = "0px";
       B(
-        /* @__PURE__ */ u2(
-          Splitter,
-          {
-            orientation: this.props.orientation,
-            initialSplit: this.props.initialSplit,
-            onChange: this.props.onChange,
-            onDragStart: this.props.onDragStart,
-            onDragEnd: this.props.onDragEnd
-          }
-        ),
+        /* @__PURE__ */ u2(k, { children: this.viewLayouts.map(
+          (layout) => layout.editable && /* @__PURE__ */ u2(
+            Splitter,
+            {
+              ...layout,
+              onChange: (newSplit) => this.onChange(newSplit, layout),
+              onDragStart: () => this.props.onDragStart(),
+              onDragEnd: () => this.props.onDragStart()
+            }
+          )
+        ) }),
         rootElement
       );
     }
@@ -1663,10 +1791,7 @@ var __exports__ = (() => {
   SplitterWidget.defaultProps = {
     ...import_core10.Widget.defaultProps,
     id: "splitter-widget",
-    viewId1: "",
-    viewId2: "",
-    orientation: "vertical",
-    initialSplit: 0.5,
+    viewLayout: void 0,
     onChange: () => {
     },
     onDragStart: () => {
@@ -1676,585 +1801,2692 @@ var __exports__ = (() => {
   };
   function Splitter({
     orientation,
-    initialSplit,
+    x: x2,
+    y: y3,
+    width,
+    height,
+    split,
+    minSplit,
+    maxSplit,
     onChange,
     onDragStart,
     onDragEnd
   }) {
-    const [split, setSplit] = h2(initialSplit);
-    const dragging = A2(false);
+    const [dragging, setDragging] = h2(false);
     const containerRef = A2(null);
+    y2(() => {
+      if (!dragging) {
+        return void 0;
+      }
+      const handleDragging = (event) => {
+        if (!containerRef.current)
+          return;
+        const rect = containerRef.current.getBoundingClientRect();
+        let newSplit;
+        if (orientation === "horizontal") {
+          newSplit = (event.clientX - rect.left) / rect.width;
+        } else {
+          newSplit = (event.clientY - rect.top) / rect.height;
+        }
+        newSplit = Math.min(Math.max(newSplit, minSplit), maxSplit);
+        onChange?.(newSplit);
+      };
+      const handleDragEnd = () => {
+        onDragEnd?.();
+        setDragging(false);
+      };
+      document.addEventListener("pointermove", handleDragging);
+      document.addEventListener("pointerup", handleDragEnd);
+      document.addEventListener("pointerleave", handleDragEnd);
+      return () => {
+        document.removeEventListener("pointermove", handleDragging);
+        document.removeEventListener("pointerup", handleDragEnd);
+        document.removeEventListener("pointerleave", handleDragEnd);
+      };
+    }, [dragging]);
     const handleDragStart = (event) => {
-      dragging.current = true;
+      setDragging(true);
       onDragStart?.();
-      document.addEventListener("mousemove", handleDragging);
-      document.addEventListener("mouseup", handleDragEnd);
       event.preventDefault();
     };
-    const handleDragging = (event) => {
-      if (!dragging.current || !containerRef.current)
-        return;
-      const rect = containerRef.current.getBoundingClientRect();
-      let newSplit;
-      if (orientation === "vertical") {
-        newSplit = (event.clientX - rect.left) / rect.width;
-      } else {
-        newSplit = (event.clientY - rect.top) / rect.height;
-      }
-      newSplit = Math.min(Math.max(newSplit, 0.05), 0.95);
-      setSplit(newSplit);
-      onChange?.(newSplit);
-    };
-    const handleDragEnd = (event) => {
-      if (!dragging.current)
-        return;
-      dragging.current = false;
-      onDragEnd?.();
-      document.removeEventListener("mousemove", handleDragging);
-      document.removeEventListener("mouseup", handleDragEnd);
-    };
-    const splitterStyle = orientation === "vertical" ? {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: `${split * 100}%`,
-      width: "4px",
-      cursor: "col-resize",
-      background: "#ccc",
-      zIndex: 10,
-      pointerEvents: "auto",
-      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
-    } : {
-      position: "absolute",
-      left: 0,
-      right: 0,
-      top: `${split * 100}%`,
-      height: "4px",
-      cursor: "row-resize",
-      background: "#ccc",
-      zIndex: 10,
-      pointerEvents: "auto",
-      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
-    };
+    const splitterStyle = orientation === "horizontal" ? { left: `${split * 100}%` } : { top: `${split * 100}%` };
     const containerStyle = {
       position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
+      top: `${y3}%`,
+      left: `${x2}%`,
+      width: `${width}%`,
+      height: `${height}%`
     };
     return /* @__PURE__ */ u2("div", { ref: containerRef, style: containerStyle, children: /* @__PURE__ */ u2(
       "div",
       {
+        className: `deck-widget-splitter-handle deck-widget-splitter-handle--${orientation} ${dragging ? "active" : ""}`,
         style: splitterStyle,
-        onMouseDown: handleDragStart
+        onPointerDown: handleDragStart
+      }
+    ) });
+  }
+
+  // src/info-widget.tsx
+  var import_core12 = __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 [];
+    }
+  }
+  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));
+      }
+    }
+    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
+        };
+    }
+    switch (getAlignment(placement)) {
+      case "start":
+        coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+      case "end":
+        coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+    }
+    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 {
+      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 {};
+      }
+      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 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
+          }
+        },
+        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 {};
+        }
+        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));
+        }
+        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 (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
+              }
+            };
+          }
+        }
+        return {};
+      }
+    };
+  };
+  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 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
+          }
+        };
+      }
+    };
+  };
+
+  // ../../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();
+    }
+    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;
+    }
+    return value instanceof Node || value instanceof getWindow(value).Node;
+  }
+  function isElement(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof Element || value instanceof getWindow(value).Element;
+  }
+  function isHTMLElement(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+  }
+  function isShadowRoot(value) {
+    if (!hasWindow() || typeof ShadowRoot === "undefined") {
+      return false;
+    }
+    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?.();
+    }, [x2, y3, 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_core12.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;
+    }
+    onRemove() {
+      if (this.rootElement) {
+        B(null, this.rootElement);
+      }
+    }
+    onViewportChange(viewport) {
+      this.viewport = viewport;
+      this.updateHTML();
+    }
+    onHover(info) {
+      if (this.props.mode === "hover") {
+        this.tooltip = this._getTooltip(info);
+      }
+    }
+    onClick(info) {
+      if (this.props.mode === "click") {
+        this.tooltip = this._getTooltip(info);
+      }
+    }
+    _getTooltip(info) {
+      if (!this.props.getTooltip)
+        return null;
+      const content = this.props.getTooltip(info, this) ?? null;
+      if (content === null)
+        return null;
+      const normalizedTooltip = typeof content === "string" ? { text: content } : content;
+      const position = normalizedTooltip.position || info.coordinate;
+      if (!position)
+        return null;
+      return {
+        position,
+        text: "",
+        html: "",
+        element: null,
+        className: "",
+        style: {},
+        ...normalizedTooltip
+      };
+    }
+    onRenderHTML(rootElement) {
+      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_core12.Widget.defaultProps,
+    id: "info",
+    viewId: null,
+    mode: "hover",
+    getTooltip: void 0,
+    placement: "right",
+    offset: 10,
+    arrow: 10
+  };
+
+  // src/popup-widget.tsx
+  var import_core13 = __toESM(require_core(), 1);
+  var PopupWidget = class extends import_core13.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;
+    }
+    onRemove() {
+      if (this.rootElement) {
+        B(null, this.rootElement);
+      }
+    }
+    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_core13.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_core14 = __toESM(require_core(), 1);
+  var ContextMenuWidget = class extends import_core14.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.props.menuItems;
+      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_core14.Widget.defaultProps,
+    id: "context",
+    viewId: null,
+    menuItems: [],
+    getMenuItems: void 0,
+    onMenuItemSelected: () => {
+    },
+    placement: "bottom-start",
+    offset: 10,
+    arrow: false
+  };
+
+  // src/scrollbar-widget.tsx
+  var import_core15 = __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_core15.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 [];
       }
-    ) });
-  }
-
-  // src/view-selector-widget.tsx
-  var import_core11 = __toESM(require_core(), 1);
-
-  // src/lib/components/icon-menu.tsx
-  function IconMenu(props) {
-    const [menuOpen, setMenuOpen] = h2(false);
-    const containerRef = A2(null);
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setMenuOpen(false);
+      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;
       }
-    };
-    y2(() => {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [containerRef]);
-    const [selectedItem, setSelectedItem] = h2(props.initialItem);
-    const handleSelectItem = (item) => {
-      setSelectedItem(item);
-      setMenuOpen(false);
-      props.onItemSelected(item);
-    };
-    const handleButtonClick = () => setMenuOpen(!menuOpen);
-    const selectedMenuItem = props.menuItems.find((item) => item.value === selectedItem);
-    const label = props.label || selectedMenuItem?.label || "";
-    const icon = props.icon || selectedMenuItem?.icon;
-    return /* @__PURE__ */ u2("div", { style: { position: "relative", display: "inline-block" }, ref: containerRef, children: [
-      /* @__PURE__ */ u2(IconButton, { className: props.className, label, onClick: handleButtonClick, children: icon }),
-      menuOpen && /* @__PURE__ */ u2("div", { className: "deck-widget-icon-menu", children: /* @__PURE__ */ u2(ButtonGroup, { orientation: "vertical", children: props.menuItems.map((item) => /* @__PURE__ */ u2(
-        GroupedIconButton,
-        {
-          label: item.label,
-          onClick: () => handleSelectItem(item.value),
-          children: item.icon
-        },
-        item.value
-      )) }) })
-    ] });
+      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_core15.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/view-selector-widget.tsx
-  var ViewSelectorWidget = class extends import_core11.Widget {
-    constructor(props = {}) {
+  // src/icon-widget.tsx
+  var import_core16 = __toESM(require_core(), 1);
+  var IconWidget = class extends import_core16.Widget {
+    constructor(props) {
       super(props);
-      this.className = "deck-widget-view-selector";
+      this.className = "";
       this.placement = "top-left";
-      this.handleSelectMode = (viewMode) => {
-        this.viewMode = viewMode;
-        this.updateHTML();
-        this.props.onViewModeChange(viewMode);
-      };
-      this.viewMode = this.props.initialViewMode;
       this.setProps(this.props);
     }
     setProps(props) {
       this.placement = props.placement ?? this.placement;
-      this.viewId = props.viewId ?? this.viewId;
+      this.viewId = props.viewId;
       super.setProps(props);
     }
     onRenderHTML(rootElement) {
+      const { className, style, icon, color, label, onClick } = this.props;
       B(
         /* @__PURE__ */ u2(
-          IconMenu,
+          IconButton,
           {
-            className: "deck-widget-view-selector",
-            menuItems: MENU_ITEMS.map((item) => ({
-              ...item,
-              icon: item.icon()
-            })),
-            initialItem: this.props.initialViewMode,
-            onItemSelected: this.handleSelectMode
+            className,
+            style,
+            color,
+            icon,
+            label,
+            onClick
           }
         ),
         rootElement
       );
     }
   };
-  ViewSelectorWidget.defaultProps = {
-    ...import_core11.Widget.defaultProps,
-    id: "view-selector",
+  IconWidget.defaultProps = {
+    ...import_core16.Widget.defaultProps,
+    id: "icon",
     placement: "top-left",
     viewId: null,
-    label: "Split View",
-    initialViewMode: "single",
-    onViewModeChange: () => {
-    }
+    icon: "",
+    label: "",
+    color: "",
+    onClick: void 0
   };
-  var ICON_STYLE = { width: "24px", height: "24px" };
-  var ICONS = {
-    single: () => /* @__PURE__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: /* @__PURE__ */ u2(
-      "rect",
-      {
-        x: "4",
-        y: "4",
-        width: "16",
-        height: "16",
-        stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
-        fill: "none",
-        strokeWidth: "2"
-      }
-    ) }),
-    "split-horizontal": () => /* @__PURE__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
-      /* @__PURE__ */ u2(
-        "rect",
-        {
-          x: "4",
-          y: "4",
-          width: "16",
-          height: "7",
-          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
-          fill: "none",
-          strokeWidth: "2"
-        }
-      ),
-      /* @__PURE__ */ u2(
-        "rect",
-        {
-          x: "4",
-          y: "13",
-          width: "16",
-          height: "7",
-          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
-          fill: "none",
-          strokeWidth: "2"
-        }
-      )
-    ] }),
-    "split-vertical": () => /* @__PURE__ */ u2("svg", { width: "24", height: "24", style: ICON_STYLE, children: [
-      /* @__PURE__ */ u2(
-        "rect",
-        {
-          x: "4",
-          y: "4",
-          width: "7",
-          height: "16",
-          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
-          fill: "none",
-          strokeWidth: "2"
-        }
-      ),
-      /* @__PURE__ */ u2(
-        "rect",
-        {
-          x: "13",
-          y: "4",
-          width: "7",
-          height: "16",
-          stroke: "var(--button-icon-hover, rgb(24, 24, 26))",
-          fill: "none",
-          strokeWidth: "2"
-        }
-      )
-    ] })
-  };
-  var MENU_ITEMS = [
-    { value: "single", icon: ICONS.single, label: "Single View" },
-    { value: "split-horizontal", icon: ICONS["split-horizontal"], label: "Split Horizontal" },
-    { value: "split-vertical", icon: ICONS["split-vertical"], label: "Split Vertical" }
-  ];
 
-  // src/info-widget.tsx
-  var import_core12 = __toESM(require_core(), 1);
-  var InfoWidget = class extends import_core12.Widget {
+  // src/toggle-widget.tsx
+  var import_core17 = __toESM(require_core(), 1);
+  var ToggleWidget = class extends import_core17.Widget {
     constructor(props) {
       super(props);
-      this.className = "deck-widget-info";
-      this.placement = "fill";
+      this.className = "deck-widget-toggle";
+      this.placement = "top-left";
+      this._toggle = () => {
+        this.checked = !this.checked;
+        this.props.onChange?.(this.checked);
+        this.updateHTML();
+      };
+      this.checked = this.props.initialChecked;
       this.setProps(this.props);
     }
     setProps(props) {
-      this.viewId = props.viewId ?? this.viewId;
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId;
       super.setProps(props);
     }
-    onCreateRootElement() {
-      const element = super.onCreateRootElement();
-      const style = { margin: "0px", top: "0px", left: "0px", position: "absolute" };
-      Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
-      return element;
-    }
-    onViewportChange(viewport) {
-      this.viewport = viewport;
-      this.updateHTML();
-    }
-    onHover(info) {
-      if (this.props.mode === "hover" && this.props.getTooltip) {
-        const tooltip = this.props.getTooltip(info, this);
-        this.setProps({
-          visible: tooltip !== null,
-          ...tooltip,
-          style: { zIndex: "1", ...tooltip?.style }
-        });
-      }
-    }
-    onClick(info) {
-      if (this.props.mode === "click" && this.props.getTooltip) {
-        const tooltip = this.props.getTooltip(info, this);
-        this.setProps({
-          visible: tooltip !== null,
-          ...tooltip
-        });
-        return tooltip !== null;
-      }
-      return this.props.onClick?.(this, info) || false;
-    }
-    onAdd({ deck, viewId }) {
-      this.deck = deck;
-      if (!viewId) {
-        this.viewport = deck.getViewports()[0];
-      } else {
-        this.viewport = deck.getViewports().find((viewport) => viewport.id === viewId);
-      }
-    }
     onRenderHTML(rootElement) {
-      if (!this.viewport) {
-        return;
-      }
-      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: [
+      const {
+        className,
+        style,
+        icon,
+        label,
+        color,
+        onIcon = icon,
+        onLabel = label,
+        onColor = color
+      } = this.props;
+      const on = this.checked;
+      rootElement.dataset.checked = String(on);
+      B(
         /* @__PURE__ */ u2(
-          "div",
+          IconButton,
           {
-            className: "popup-content",
-            style: {
-              background,
-              padding: "10px",
-              position: "relative",
-              // Include any additional styles
-              ...this.props.style
-            },
-            children: this.props.text
+            className,
+            style,
+            icon: on ? onIcon : icon,
+            label: on ? onLabel : label,
+            color: on ? onColor : color,
+            onClick: this._toggle
           }
         ),
-        /* @__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;
-        }
-        if (computedLeft < minOffset) {
-          computedLeft = minOffset;
-        }
-        if (computedLeft + popupWidth > this.viewport.width - minOffset) {
-          computedLeft = this.viewport.width - minOffset - popupWidth;
-        }
-        if (isAbove) {
-          if (computedTop < minOffset) {
-            computedTop = minOffset;
-          }
-        } else if (computedTop + popupHeight + arrowHeight > this.viewport.height - minOffset) {
-          computedTop = this.viewport.height - minOffset - popupHeight - arrowHeight;
-        }
-        container.style.left = `${computedLeft}px`;
-        container.style.top = `${computedTop}px`;
-        container.style.transform = "";
-        let arrowLeft = 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 = "";
-        }
-      });
+        rootElement
+      );
     }
   };
-  InfoWidget.defaultProps = {
-    ...import_core12.Widget.defaultProps,
-    id: "info",
-    position: [0, 0],
-    text: "",
-    visible: false,
-    minOffset: 0,
+  ToggleWidget.defaultProps = {
+    ...import_core17.Widget.defaultProps,
+    id: "icon",
+    placement: "top-left",
     viewId: null,
-    mode: "hover",
-    getTooltip: void 0,
-    onClick: void 0
-  };
-
-  // 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"
-  };
-  var SimpleMenu = (props) => {
-    const { menuItems, onItemSelected, position, style } = props;
-    const styleOverride = {
-      ...MENU_STYLE,
-      ...style,
-      left: `${position.x}px`,
-      top: `${position.y}px`
-    };
-    return /* @__PURE__ */ u2("div", { style: styleOverride, children: menuItems.map(({ key, label }) => /* @__PURE__ */ u2(
-      "button",
-      {
-        style: { ...MENU_ITEM_STYLE, display: "block" },
-        onClick: (_2) => onItemSelected(key),
-        children: label
-      },
-      key
-    )) });
+    initialChecked: false,
+    icon: "",
+    onIcon: void 0,
+    label: "",
+    onLabel: void 0,
+    color: "",
+    onColor: void 0,
+    onChange: void 0
   };
 
-  // src/context-menu-widget.tsx
-  var MOUSE_BUTTON_RIGHT = 2;
-  var MOUSE_WHICH_RIGHT = 3;
-  var ContextMenuWidget = class extends import_core13.Widget {
+  // src/selector-widget.tsx
+  var import_core18 = __toESM(require_core(), 1);
+  var SelectorWidget = class extends import_core18.Widget {
     constructor(props) {
       super(props);
-      this.className = "deck-widget-context-menu";
-      this.placement = "fill";
-      this.pickInfo = null;
-      this.pickInfo = null;
+      this.className = "deck-widget-selector";
+      this.placement = "top-left";
+      this.isOpen = false;
+      this._toggleMenu = () => {
+        if (this.isOpen) {
+          this.isOpen = false;
+        } else if (this.rootElement) {
+          this.isOpen = {
+            x: this.rootElement.offsetLeft,
+            y: this.rootElement.offsetTop,
+            placement: this.props.placement.includes("right") ? "left-start" : "right-start"
+          };
+        }
+        this.updateHTML();
+      };
+      this._handleSelectMode = (value) => {
+        this.value = value;
+        this.props.onChange(value);
+        this.updateHTML();
+      };
+      this.value = this.props.initialValue;
       this.setProps(this.props);
     }
-    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;
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
     }
     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);
-    }
-    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 false;
-    }
-    hide() {
-      this.setProps({ visible: false });
+      const selectedOption = this.props.options.find((opt) => opt.value === this.value) ?? this.props.options[0];
+      B(
+        /* @__PURE__ */ u2("div", { children: [
+          /* @__PURE__ */ u2(
+            IconButton,
+            {
+              icon: selectedOption.icon,
+              label: selectedOption.label,
+              onClick: this._toggleMenu
+            }
+          ),
+          this.isOpen && /* @__PURE__ */ u2(Popover, { ...this.isOpen, children: /* @__PURE__ */ u2(
+            SimpleMenu,
+            {
+              isOpen: true,
+              style: { pointerEvents: "auto", position: "static" },
+              menuItems: this.props.options,
+              onSelect: this._handleSelectMode,
+              onClose: this._toggleMenu
+            }
+          ) })
+        ] }),
+        rootElement
+      );
     }
   };
-  ContextMenuWidget.defaultProps = {
-    ...import_core13.Widget.defaultProps,
-    id: "context",
+  SelectorWidget.defaultProps = {
+    ...import_core18.Widget.defaultProps,
+    id: "view-selector",
+    placement: "top-left",
     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)
+    initialValue: "",
+    options: [],
+    onChange: () => {
+    }
   };
 
   // src/timeline-widget.tsx
-  var import_core14 = __toESM(require_core(), 1);
-  var TimelineWidget = class extends import_core14.Widget {
+  var import_core19 = __toESM(require_core(), 1);
+  var TimelineWidget = class extends import_core19.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.round(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;
+      const {
+        timeRange: [min3, max3]
+      } = this.props;
+      if (this.currentTime >= max3) {
+        this.currentTime = min3;
+        this.props.onTimeChange(min3);
+      }
       this.updateHTML();
       this.tick();
     }
@@ -2268,21 +4500,25 @@ var __exports__ = (() => {
     }
   };
   TimelineWidget.defaultProps = {
-    ...import_core14.Widget.defaultProps,
+    ...import_core19.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_core20 = __toESM(require_core(), 1);
+  var ScreenshotWidget = class extends import_core20.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-screenshot";
@@ -2331,7 +4567,7 @@ var __exports__ = (() => {
     }
   };
   ScreenshotWidget.defaultProps = {
-    ...import_core15.Widget.defaultProps,
+    ...import_core20.Widget.defaultProps,
     id: "screenshot",
     placement: "top-left",
     viewId: null,
@@ -2342,8 +4578,8 @@ var __exports__ = (() => {
   };
 
   // src/theme-widget.tsx
-  var import_core16 = __toESM(require_core(), 1);
-  var import_core17 = __toESM(require_core(), 1);
+  var import_core21 = __toESM(require_core(), 1);
+  var import_core22 = __toESM(require_core(), 1);
 
   // src/themes.ts
   var LightTheme = {
@@ -2366,7 +4602,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 +4630,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 +4658,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 +4686,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_core22.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-theme";
@@ -2453,17 +4713,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_core21._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_core21._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
             this._setThemeMode("dark");
           }
           break;
         default:
-          import_core16.log.warn(`Invalid theme mode ${this.themeMode}`)();
+          import_core21.log.warn(`Invalid theme mode ${this.themeMode}`)();
       }
     }
     onRenderHTML(rootElement) {
@@ -2492,20 +4752,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_core21._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_core21.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_core22.Widget.defaultProps,
     id: "theme",
     placement: "top-left",
     viewId: null,
@@ -2517,8 +4783,8 @@ var __exports__ = (() => {
   };
 
   // src/loading-widget.tsx
-  var import_core18 = __toESM(require_core(), 1);
-  var LoadingWidget = class extends import_core18.Widget {
+  var import_core23 = __toESM(require_core(), 1);
+  var LoadingWidget = class extends import_core23.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-loading";
@@ -2557,67 +4823,16 @@ var __exports__ = (() => {
     }
   };
   LoadingWidget.defaultProps = {
-    ...import_core18.Widget.defaultProps,
+    ...import_core23.Widget.defaultProps,
     id: "loading",
     placement: "top-left",
     viewId: null,
     label: "Loading layer data"
   };
 
-  // src/fps-widget.tsx
-  var import_core19 = __toESM(require_core(), 1);
-  var FpsWidget = class extends import_core19.Widget {
-    constructor(props = {}) {
-      super(props);
-      this.className = "deck-widget-fps";
-      this.placement = "top-left";
-      this._lastFps = -1;
-      this.setProps(this.props);
-    }
-    setProps(props) {
-      this.placement = props.placement ?? this.placement;
-      this.viewId = props.viewId ?? this.viewId;
-      super.setProps(props);
-    }
-    onAdd({}) {
-      this._lastFps = this._getFps();
-      requestAnimationFrame(() => this._animate());
-    }
-    onRenderHTML(rootElement) {
-      const fps = this._getFps();
-      B(
-        /* @__PURE__ */ u2(IconButton, { children: /* @__PURE__ */ u2("div", { className: "text", children: [
-          "FPS",
-          /* @__PURE__ */ u2("br", {}),
-          fps
-        ] }) }),
-        rootElement
-      );
-    }
-    _animate() {
-      const fps = this._getFps();
-      if (this._lastFps !== fps) {
-        this._lastFps = fps;
-        this.updateHTML();
-      }
-      requestAnimationFrame(() => this._animate());
-    }
-    _getFps() {
-      return Math.round(this.deck?.metrics.fps ?? 0);
-    }
-  };
-  FpsWidget.defaultProps = {
-    ...import_core19.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_core24 = __toESM(require_core(), 1);
+  var import_core25 = __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 +4848,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_core24.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-stats";
@@ -2644,8 +4859,12 @@ var __exports__ = (() => {
         this.collapsed = !this.collapsed;
         this.updateHTML();
       };
+      this._getFps = () => {
+        return Math.round(this.deck?.metrics.fps ?? 0);
+      };
       this._formatters = { ...DEFAULT_FORMATTERS };
       this._resetOnUpdate = { ...this.props.resetOnUpdate };
+      this.collapsed = !props.defaultIsExpanded;
       this.setProps(props);
     }
     setProps(props) {
@@ -2662,15 +4881,21 @@ var __exports__ = (() => {
       }
       super.setProps(props);
     }
-    onAdd() {
-      this.updateHTML();
+    onRemove() {
+      if (this.rootElement) {
+        B(null, this.rootElement);
+      }
     }
     onRenderHTML(rootElement) {
-      const stats = this._getStats();
       const collapsed = this.collapsed;
+      if (collapsed) {
+        B(/* @__PURE__ */ u2(FpsIcon, { getFps: this._getFps, onClick: this._toggleCollapsed }), rootElement);
+        return;
+      }
+      const stats = this._getStats();
       const title = this.props.title || ("id" in stats ? stats.id : null) || "Stats";
       const items = [];
-      if (!collapsed && stats) {
+      if (stats) {
         stats.forEach((stat) => {
           const lines = this._getLines(stat).split("\n");
           if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
@@ -2692,21 +4917,22 @@ 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 open" }) })
               ]
             }
           ),
-          !collapsed && /* @__PURE__ */ u2("div", { className: "deck-widget-stats-content", children: items })
+          /* @__PURE__ */ u2("div", { className: "deck-widget-stats-content", children: items })
         ] }),
         rootElement
       );
     }
     onRedraw() {
-      const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
-      if (this._counter++ % framesPerUpdate === 0) {
-        this.updateHTML();
+      if (!this.collapsed) {
+        const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
+        if (this._counter++ % framesPerUpdate === 0) {
+          this.updateHTML();
+        }
       }
     }
     _getStats() {
@@ -2715,7 +4941,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_core25.luma.stats.stats.values())[0];
         case "device":
           const device = this.deck?.device;
           const stats = device?.statsManager.stats.values();
@@ -2737,10 +4963,11 @@ var __exports__ = (() => {
     }
   };
   StatsWidget.defaultProps = {
-    ...import_core20.Widget.defaultProps,
+    ...import_core24.Widget.defaultProps,
     type: "deck",
     placement: "top-left",
     viewId: null,
+    defaultIsExpanded: false,
     stats: void 0,
     title: "Stats",
     framesPerUpdate: 1,
@@ -2748,6 +4975,24 @@ var __exports__ = (() => {
     resetOnUpdate: {},
     id: "stats"
   };
+  function FpsIcon({ getFps, onClick }) {
+    const [fps, setFps] = h2(getFps());
+    y2(() => {
+      const onUpdate = () => {
+        setFps(getFps());
+        timer = requestAnimationFrame(onUpdate);
+      };
+      let timer = requestAnimationFrame(onUpdate);
+      return () => {
+        cancelAnimationFrame(timer);
+      };
+    }, [getFps]);
+    return /* @__PURE__ */ u2(IconButton, { onClick, children: /* @__PURE__ */ u2("div", { className: "text", children: [
+      "FPS",
+      /* @__PURE__ */ u2("br", {}),
+      fps
+    ] }) });
+  }
   return __toCommonJS(bundle_exports);
 })();
       return __exports__;