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

package/dist/dist.dev.js

@@ -56,29 +56,31 @@ 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,
     _IconButton: () => IconButton,
-    _IconMenu: () => IconMenu,
-    _InfoWidget: () => InfoWidget,
-    _LoadingWidget: () => LoadingWidget,
     _MapboxGeocoder: () => MapboxGeocoder,
     _OpenCageGeocoder: () => OpenCageGeocoder,
     _RangeInput: () => RangeInput,
@@ -86,9 +88,7 @@ var __exports__ = (() => {
     _SimpleMenu: () => SimpleMenu,
     _SplitterWidget: () => SplitterWidget,
     _StatsWidget: () => StatsWidget,
-    _ThemeWidget: () => ThemeWidget,
-    _TimelineWidget: () => TimelineWidget,
-    _ViewSelectorWidget: () => ViewSelectorWidget
+    _TimelineWidget: () => TimelineWidget
   });
 
   // ../core/bundle/peer-dependency.ts
@@ -268,37 +268,37 @@ var __exports__ = (() => {
     };
   }
   function O(n2, u4, t3, i4, o3, r3, f4, e3, c3, s3) {
-    var a3, h4, p3, v3, w3, _3, 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, _3);
+            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 && (_3 = h4.getSnapshotBeforeUpdate(v3, w3)), S(n2, y(L2 = null != a3 && a3.type === k && null == a3.key ? a3.props.children : a3) ? L2 : [L2], u4, t3, i4, o3, r3, f4, e3, c3, s3), h4.base = u4.__e, u4.__u &= -161, h4.__h.length && f4.push(h4), g2 && (h4.__E = h4.__ = null);
+              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; )
@@ -444,17 +444,183 @@ var __exports__ = (() => {
     return /* @__PURE__ */ u2("div", { className: `deck-widget-button-group ${orientation}`, children });
   };
 
+  // ../../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 = "", label, onClick, children } = props;
-    return /* @__PURE__ */ u2("div", { className: "deck-widget-button", children: /* @__PURE__ */ u2(
+    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 })
       }
     ) });
   };
@@ -977,158 +1143,6 @@ 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];
-  }
-  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/components/dropdown-menu.tsx
   function getMenuItemValue(item) {
     return typeof item === "string" ? item : item.value;
@@ -1154,20 +1168,23 @@ var __exports__ = (() => {
   };
   var SimpleMenu = (props) => {
     const dropdownRef = A2(null);
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        props.onClose();
-      }
-    };
     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 = (value) => {
+    const handleSelect = (value, item) => {
       if (value) {
-        props.onSelect(value);
+        if (typeof item === "object") {
+          item.onSelect?.();
+        }
+        props.onSelect?.(value);
         props.onClose();
       }
     };
@@ -1183,15 +1200,9 @@ var __exports__ = (() => {
           "li",
           {
             className: `deck-widget-dropdown-item ${value ? "" : "disabled"}`,
-            onClick: () => handleSelect(value),
+            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)
             ]
           },
@@ -1626,293 +1637,238 @@ var __exports__ = (() => {
 
   // src/splitter-widget.tsx
   var import_core10 = __toESM(require_core(), 1);
-  var SplitterWidget = class extends import_core10.Widget {
-    constructor(props) {
-      super(props);
-      this.className = "deck-widget-splitter";
-      this.placement = "fill";
-    }
-    setProps(props) {
-      super.setProps(props);
-    }
-    onRenderHTML(rootElement) {
-      rootElement.style.position = "absolute";
-      rootElement.style.top = "0";
-      rootElement.style.left = "0";
-      rootElement.style.width = "100%";
-      rootElement.style.height = "100%";
-      rootElement.style.margin = "0px";
-      B(
-        /* @__PURE__ */ u2(
-          Splitter,
-          {
-            orientation: this.props.orientation,
-            initialSplit: this.props.initialSplit,
-            onChange: this.props.onChange,
-            onDragStart: this.props.onDragStart,
-            onDragEnd: this.props.onDragEnd
-          }
-        ),
-        rootElement
-      );
-    }
-  };
-  SplitterWidget.defaultProps = {
-    ...import_core10.Widget.defaultProps,
-    id: "splitter-widget",
-    viewId1: "",
-    viewId2: "",
-    orientation: "vertical",
-    initialSplit: 0.5,
-    onChange: () => {
-    },
-    onDragStart: () => {
-    },
-    onDragEnd: () => {
-    }
-  };
-  function Splitter({
-    orientation,
-    initialSplit,
-    onChange,
-    onDragStart,
-    onDragEnd
-  }) {
-    const [split, setSplit] = h2(initialSplit);
-    const dragging = A2(false);
-    const containerRef = A2(null);
-    const handleDragStart = (event) => {
-      dragging.current = true;
-      onDragStart?.();
-      document.addEventListener("mousemove", handleDragging);
-      document.addEventListener("mouseup", handleDragEnd);
-      event.preventDefault();
-    };
-    const handleDragging = (event) => {
-      if (!dragging.current || !containerRef.current)
-        return;
-      const rect = containerRef.current.getBoundingClientRect();
-      let newSplit;
-      if (orientation === "vertical") {
-        newSplit = (event.clientX - rect.left) / rect.width;
+  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 {
-        newSplit = (event.clientY - rect.top) / rect.height;
+        child1Height = height * l3.split;
+        child2Y = y3 + child1Height;
+        child2Height = height - child1Height;
       }
-      newSplit = Math.min(Math.max(newSplit, 0.05), 0.95);
-      setSplit(newSplit);
-      onChange?.(newSplit);
-    };
-    const handleDragEnd = (event) => {
-      if (!dragging.current)
-        return;
-      dragging.current = false;
-      onDragEnd?.();
-      document.removeEventListener("mousemove", handleDragging);
-      document.removeEventListener("mouseup", handleDragEnd);
-    };
-    const splitterStyle = orientation === "vertical" ? {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: `${split * 100}%`,
-      width: "4px",
-      cursor: "col-resize",
-      background: "#ccc",
-      zIndex: 10,
-      pointerEvents: "auto",
-      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
-    } : {
-      position: "absolute",
-      left: 0,
-      right: 0,
-      top: `${split * 100}%`,
-      height: "4px",
-      cursor: "row-resize",
-      background: "#ccc",
-      zIndex: 10,
-      pointerEvents: "auto",
-      boxShadow: "inset -1px 0 0 white, inset 1px 0 0 white"
-    };
-    const containerStyle = {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    };
-    return /* @__PURE__ */ u2("div", { ref: containerRef, style: containerStyle, children: /* @__PURE__ */ u2(
-      "div",
-      {
-        style: splitterStyle,
-        onMouseDown: handleDragStart
+      const [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}%`
+          })
+        );
       }
-    ) });
-  }
-
-  // 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);
+      if ("views" in view2) {
+        evaluateViewLayout(view2, child2X, child2Y, child2Width, child2Height);
+      } else {
+        views.push(
+          view2.clone({
+            x: `${child2X}%`,
+            y: `${child2Y}%`,
+            width: `${child2Width}%`,
+            height: `${child2Height}%`
+          })
+        );
       }
-    };
-    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(
-        IconButton,
-        {
-          label: item.label,
-          onClick: () => handleSelectItem(item.value),
-          children: item.icon
-        },
-        item.value
-      )) }) })
-    ] });
+    }
+    evaluateViewLayout(root, 0, 0, 100, 100);
+    return views;
   }
-
-  // src/view-selector-widget.tsx
-  var ViewSelectorWidget = class extends import_core11.Widget {
-    constructor(props = {}) {
+  var SplitterWidget = class extends import_core10.Widget {
+    constructor(props) {
       super(props);
-      this.className = "deck-widget-view-selector";
-      this.placement = "top-left";
-      this.handleSelectMode = (viewMode) => {
-        this.viewMode = viewMode;
-        this.updateHTML();
-        this.props.onViewModeChange(viewMode);
-      };
-      this.viewMode = this.props.initialViewMode;
-      this.setProps(this.props);
+      this.className = "deck-widget-splitter";
+      this.placement = "fill";
+      this.needsUpdate = true;
+      this.viewLayouts = parseViewLayout(this.props.viewLayout);
     }
     setProps(props) {
-      this.placement = props.placement ?? this.placement;
-      this.viewId = props.viewId ?? this.viewId;
+      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) {
       B(
-        /* @__PURE__ */ u2(
-          IconMenu,
-          {
-            className: "deck-widget-view-selector",
-            menuItems: MENU_ITEMS.map((item) => ({
-              ...item,
-              icon: item.icon()
-            })),
-            initialItem: this.props.initialViewMode,
-            onItemSelected: this.handleSelectMode
-          }
-        ),
+        /* @__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
       );
     }
   };
-  ViewSelectorWidget.defaultProps = {
-    ...import_core11.Widget.defaultProps,
-    id: "view-selector",
-    placement: "top-left",
-    viewId: null,
-    label: "Split View",
-    initialViewMode: "single",
-    onViewModeChange: () => {
+  SplitterWidget.defaultProps = {
+    ...import_core10.Widget.defaultProps,
+    id: "splitter-widget",
+    viewLayout: void 0,
+    onChange: () => {
+    },
+    onDragStart: () => {
+    },
+    onDragEnd: () => {
     }
   };
-  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"
+  function Splitter({
+    orientation,
+    x: x2,
+    y: y3,
+    width,
+    height,
+    split,
+    minSplit,
+    maxSplit,
+    onChange,
+    onDragStart,
+    onDragEnd
+  }) {
+    const [dragging, setDragging] = h2(false);
+    const containerRef = A2(null);
+    y2(() => {
+      if (!dragging) {
+        return void 0;
       }
-    ) }),
-    "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"
+      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;
         }
-      )
-    ] })
-  };
-  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" }
-  ];
+        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) => {
+      setDragging(true);
+      onDragStart?.();
+      event.preventDefault();
+    };
+    const splitterStyle = orientation === "horizontal" ? { left: `${split * 100}%` } : { top: `${split * 100}%` };
+    const containerStyle = {
+      position: "absolute",
+      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,
+        onPointerDown: handleDragStart
+      }
+    ) });
+  }
 
   // src/info-widget.tsx
-  var import_core13 = __toESM(require_core(), 1);
+  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;
@@ -3314,7 +3270,7 @@ var __exports__ = (() => {
     };
     T2(() => {
       updaterRef.current?.();
-    }, [placement, arrowSize, pixelOffset]);
+    }, [x2, y3, placement, arrowSize, pixelOffset]);
     y2(() => {
       if (contentRef.current) {
         contentRef.current.style.visibility = "visible";
@@ -3400,7 +3356,7 @@ var __exports__ = (() => {
   };
 
   // src/info-widget.tsx
-  var InfoWidget = class extends import_core13.Widget {
+  var InfoWidget = class extends import_core12.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-info";
@@ -3415,6 +3371,11 @@ var __exports__ = (() => {
     onAdd({ deck }) {
       this.deck = deck;
     }
+    onRemove() {
+      if (this.rootElement) {
+        B(null, this.rootElement);
+      }
+    }
     onViewportChange(viewport) {
       this.viewport = viewport;
       this.updateHTML();
@@ -3484,7 +3445,7 @@ var __exports__ = (() => {
     }
   };
   InfoWidget.defaultProps = {
-    ...import_core13.Widget.defaultProps,
+    ...import_core12.Widget.defaultProps,
     id: "info",
     viewId: null,
     mode: "hover",
@@ -3495,8 +3456,8 @@ var __exports__ = (() => {
   };
 
   // src/popup-widget.tsx
-  var import_core14 = __toESM(require_core(), 1);
-  var PopupWidget = class extends import_core14.Widget {
+  var import_core13 = __toESM(require_core(), 1);
+  var PopupWidget = class extends import_core13.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-popup";
@@ -3511,6 +3472,11 @@ var __exports__ = (() => {
     onAdd({ deck }) {
       this.deck = deck;
     }
+    onRemove() {
+      if (this.rootElement) {
+        B(null, this.rootElement);
+      }
+    }
     onViewportChange(viewport) {
       this.viewport = viewport;
       this.updateHTML();
@@ -3582,7 +3548,7 @@ var __exports__ = (() => {
     }
   };
   PopupWidget.defaultProps = {
-    ...import_core14.Widget.defaultProps,
+    ...import_core13.Widget.defaultProps,
     id: "info",
     viewId: null,
     position: [0, 0],
@@ -3599,8 +3565,8 @@ var __exports__ = (() => {
   };
 
   // src/context-menu-widget.tsx
-  var import_core15 = __toESM(require_core(), 1);
-  var ContextMenuWidget = class extends import_core15.Widget {
+  var import_core14 = __toESM(require_core(), 1);
+  var ContextMenuWidget = class extends import_core14.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-context-menu";
@@ -3624,7 +3590,7 @@ var __exports__ = (() => {
         index: -1,
         pixelRatio: 1
       };
-      const menuItems = this.props.getMenuItems(pickInfo, this) || [];
+      const menuItems = this.props.getMenuItems?.(pickInfo, this) || this.props.menuItems;
       this.menu = menuItems.length > 0 ? {
         items: menuItems,
         pickInfo
@@ -3672,9 +3638,10 @@ var __exports__ = (() => {
     }
   };
   ContextMenuWidget.defaultProps = {
-    ...import_core15.Widget.defaultProps,
+    ...import_core14.Widget.defaultProps,
     id: "context",
     viewId: null,
+    menuItems: [],
     getMenuItems: void 0,
     onMenuItemSelected: () => {
     },
@@ -3684,7 +3651,7 @@ var __exports__ = (() => {
   };
 
   // src/scrollbar-widget.tsx
-  var import_core16 = __toESM(require_core(), 1);
+  var import_core15 = __toESM(require_core(), 1);
 
   // src/lib/components/range-input.tsx
   var wheelListenerOptions = { passive: false };
@@ -4037,7 +4004,7 @@ var __exports__ = (() => {
     }
     return value;
   };
-  var _ScrollbarWidget = class extends import_core16.Widget {
+  var _ScrollbarWidget = class extends import_core15.Widget {
     constructor(props) {
       const resolved = {
         ..._ScrollbarWidget.defaultProps,
@@ -4199,7 +4166,7 @@ var __exports__ = (() => {
   };
   var ScrollbarWidget = _ScrollbarWidget;
   ScrollbarWidget.defaultProps = {
-    ...import_core16.Widget.defaultProps,
+    ...import_core15.Widget.defaultProps,
     contentBounds: null,
     placement: "top-right",
     viewId: null,
@@ -4223,9 +4190,187 @@ var __exports__ = (() => {
     );
   }
 
-  // src/timeline-widget.tsx
+  // src/icon-widget.tsx
+  var import_core16 = __toESM(require_core(), 1);
+  var IconWidget = class extends import_core16.Widget {
+    constructor(props) {
+      super(props);
+      this.className = "";
+      this.placement = "top-left";
+      this.setProps(this.props);
+    }
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId;
+      super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+      const { className, style, icon, color, label, onClick } = this.props;
+      B(
+        /* @__PURE__ */ u2(
+          IconButton,
+          {
+            className,
+            style,
+            color,
+            icon,
+            label,
+            onClick
+          }
+        ),
+        rootElement
+      );
+    }
+  };
+  IconWidget.defaultProps = {
+    ...import_core16.Widget.defaultProps,
+    id: "icon",
+    placement: "top-left",
+    viewId: null,
+    icon: "",
+    label: "",
+    color: "",
+    onClick: void 0
+  };
+
+  // src/toggle-widget.tsx
   var import_core17 = __toESM(require_core(), 1);
-  var TimelineWidget = class extends import_core17.Widget {
+  var ToggleWidget = class extends import_core17.Widget {
+    constructor(props) {
+      super(props);
+      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.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId;
+      super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+      const {
+        className,
+        style,
+        icon,
+        label,
+        color,
+        onIcon = icon,
+        onLabel = label,
+        onColor = color
+      } = this.props;
+      const on = this.checked;
+      rootElement.dataset.checked = String(on);
+      B(
+        /* @__PURE__ */ u2(
+          IconButton,
+          {
+            className,
+            style,
+            icon: on ? onIcon : icon,
+            label: on ? onLabel : label,
+            color: on ? onColor : color,
+            onClick: this._toggle
+          }
+        ),
+        rootElement
+      );
+    }
+  };
+  ToggleWidget.defaultProps = {
+    ...import_core17.Widget.defaultProps,
+    id: "icon",
+    placement: "top-left",
+    viewId: null,
+    initialChecked: false,
+    icon: "",
+    onIcon: void 0,
+    label: "",
+    onLabel: void 0,
+    color: "",
+    onColor: void 0,
+    onChange: void 0
+  };
+
+  // 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-selector";
+      this.placement = "top-left";
+      this.isOpen = false;
+      this._toggleMenu = () => {
+        if (this.isOpen) {
+          this.isOpen = false;
+        } else if (this.rootElement) {
+          this.isOpen = {
+            x: this.rootElement.offsetLeft,
+            y: this.rootElement.offsetTop,
+            placement: this.props.placement.includes("right") ? "left-start" : "right-start"
+          };
+        }
+        this.updateHTML();
+      };
+      this._handleSelectMode = (value) => {
+        this.value = value;
+        this.props.onChange(value);
+        this.updateHTML();
+      };
+      this.value = this.props.initialValue;
+      this.setProps(this.props);
+    }
+    setProps(props) {
+      this.placement = props.placement ?? this.placement;
+      this.viewId = props.viewId ?? this.viewId;
+      super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+      const selectedOption = this.props.options.find((opt) => opt.value === this.value) ?? this.props.options[0];
+      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
+      );
+    }
+  };
+  SelectorWidget.defaultProps = {
+    ...import_core18.Widget.defaultProps,
+    id: "view-selector",
+    placement: "top-left",
+    viewId: null,
+    initialValue: "",
+    options: [],
+    onChange: () => {
+    }
+  };
+
+  // src/timeline-widget.tsx
+  var import_core19 = __toESM(require_core(), 1);
+  var TimelineWidget = class extends import_core19.Widget {
     constructor(props = {}) {
       super(props);
       this.id = "timeline";
@@ -4253,7 +4398,7 @@ var __exports__ = (() => {
           loop
         } = this.props;
         if (step > 0) {
-          let next = Math.floor(this.currentTime / step) * step + step;
+          let next = Math.round(this.currentTime / step) * step + step;
           if (next > max3) {
             if (this.currentTime < max3) {
               next = max3;
@@ -4335,6 +4480,13 @@ var __exports__ = (() => {
     }
     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();
     }
@@ -4348,7 +4500,7 @@ var __exports__ = (() => {
     }
   };
   TimelineWidget.defaultProps = {
-    ...import_core17.Widget.defaultProps,
+    ...import_core19.Widget.defaultProps,
     id: "timeline",
     placement: "bottom-left",
     viewId: null,
@@ -4365,8 +4517,8 @@ var __exports__ = (() => {
   };
 
   // src/screenshot-widget.tsx
-  var import_core18 = __toESM(require_core(), 1);
-  var ScreenshotWidget = class extends import_core18.Widget {
+  var import_core20 = __toESM(require_core(), 1);
+  var ScreenshotWidget = class extends import_core20.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-screenshot";
@@ -4415,7 +4567,7 @@ var __exports__ = (() => {
     }
   };
   ScreenshotWidget.defaultProps = {
-    ...import_core18.Widget.defaultProps,
+    ...import_core20.Widget.defaultProps,
     id: "screenshot",
     placement: "top-left",
     viewId: null,
@@ -4426,8 +4578,8 @@ var __exports__ = (() => {
   };
 
   // src/theme-widget.tsx
-  var import_core19 = __toESM(require_core(), 1);
-  var import_core20 = __toESM(require_core(), 1);
+  var import_core21 = __toESM(require_core(), 1);
+  var import_core22 = __toESM(require_core(), 1);
 
   // src/themes.ts
   var LightTheme = {
@@ -4544,7 +4696,7 @@ var __exports__ = (() => {
   };
 
   // src/theme-widget.tsx
-  var ThemeWidget = class extends import_core20.Widget {
+  var ThemeWidget = class extends import_core22.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-theme";
@@ -4561,17 +4713,17 @@ var __exports__ = (() => {
       super.setProps(props);
       switch (this.themeMode) {
         case "light":
-          if (props.lightModeTheme && !(0, import_core19._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_core19._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
+          if (props.darkModeTheme && !(0, import_core21._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
             this._setThemeMode("dark");
           }
           break;
         default:
-          import_core19.log.warn(`Invalid theme mode ${this.themeMode}`)();
+          import_core21.log.warn(`Invalid theme mode ${this.themeMode}`)();
       }
     }
     onRenderHTML(rootElement) {
@@ -4600,9 +4752,9 @@ var __exports__ = (() => {
       const container = this.rootElement?.closest(".deck-widget-container");
       if (container) {
         const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
-        (0, import_core19._applyStyles)(container, themeStyle);
+        (0, import_core21._applyStyles)(container, themeStyle);
         const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-        import_core19.log.log(1, `Switched theme to ${label}`, themeStyle)();
+        import_core21.log.log(1, `Switched theme to ${label}`, themeStyle)();
         this.updateHTML();
       }
     }
@@ -4619,7 +4771,7 @@ var __exports__ = (() => {
     }
   };
   ThemeWidget.defaultProps = {
-    ...import_core20.Widget.defaultProps,
+    ...import_core22.Widget.defaultProps,
     id: "theme",
     placement: "top-left",
     viewId: null,
@@ -4631,8 +4783,8 @@ var __exports__ = (() => {
   };
 
   // src/loading-widget.tsx
-  var import_core21 = __toESM(require_core(), 1);
-  var LoadingWidget = class extends import_core21.Widget {
+  var import_core23 = __toESM(require_core(), 1);
+  var LoadingWidget = class extends import_core23.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-loading";
@@ -4671,65 +4823,16 @@ var __exports__ = (() => {
     }
   };
   LoadingWidget.defaultProps = {
-    ...import_core21.Widget.defaultProps,
+    ...import_core23.Widget.defaultProps,
     id: "loading",
     placement: "top-left",
     viewId: null,
     label: "Loading layer data"
   };
 
-  // src/fps-widget.tsx
-  var import_core22 = __toESM(require_core(), 1);
-  var FpsWidget = class extends import_core22.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_core22.Widget.defaultProps,
-    id: "fps",
-    placement: "top-left",
-    viewId: null
-  };
-
   // src/stats-widget.tsx
-  var import_core23 = __toESM(require_core(), 1);
-  var import_core24 = __toESM(require_core2(), 1);
+  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`;
@@ -4745,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_core23.Widget {
+  var StatsWidget = class extends import_core24.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-stats";
@@ -4756,6 +4859,9 @@ 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;
@@ -4775,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]) {
@@ -4806,19 +4918,21 @@ var __exports__ = (() => {
               onClick: this._toggleCollapsed,
               children: [
                 /* @__PURE__ */ u2("b", { children: title }),
-                /* @__PURE__ */ u2("button", { className: "deck-widget-dropdown-button", children: /* @__PURE__ */ u2("span", { className: `deck-widget-dropdown-icon ${collapsed ? "" : "open"}` }) })
+                /* @__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() {
@@ -4827,7 +4941,7 @@ var __exports__ = (() => {
           const metrics = this.deck?.metrics ?? {};
           return Object.entries(metrics);
         case "luma":
-          return Array.from(import_core24.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();
@@ -4849,7 +4963,7 @@ var __exports__ = (() => {
     }
   };
   StatsWidget.defaultProps = {
-    ...import_core23.Widget.defaultProps,
+    ...import_core24.Widget.defaultProps,
     type: "deck",
     placement: "top-left",
     viewId: null,
@@ -4861,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__;