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

package/dist/dist.dev.js

@@ -1870,19 +1870,21 @@ var __exports__ = (() => {
   // 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
+  // ../../node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
   var min = Math.min;
   var max = Math.max;
+  var round = Math.round;
+  var floor = Math.floor;
+  var createCoords = (v3) => ({
+    x: v3,
+    y: v3
+  });
   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));
   }
@@ -1902,7 +1904,8 @@ var __exports__ = (() => {
     return axis === "y" ? "height" : "width";
   }
   function getSideAxis(placement) {
-    return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
+    const firstChar = placement[0];
+    return firstChar === "t" || firstChar === "b" ? "y" : "x";
   }
   function getAlignmentAxis(placement) {
     return getOppositeAxis(getSideAxis(placement));
@@ -1925,22 +1928,22 @@ var __exports__ = (() => {
     return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
   }
   function getOppositeAlignmentPlacement(placement) {
-    return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+    return placement.includes("start") ? placement.replace("start", "end") : placement.replace("end", "start");
   }
+  var lrPlacement = ["left", "right"];
+  var rlPlacement = ["right", "left"];
+  var tbPlacement = ["top", "bottom"];
+  var btPlacement = ["bottom", "top"];
   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;
+          return isStart ? rlPlacement : lrPlacement;
+        return isStart ? lrPlacement : rlPlacement;
       case "left":
       case "right":
-        return isStart ? tb : bt;
+        return isStart ? tbPlacement : btPlacement;
       default:
         return [];
     }
@@ -1957,7 +1960,8 @@ var __exports__ = (() => {
     return list;
   }
   function getOppositePlacement(placement) {
-    return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+    const side = getSide(placement);
+    return oppositeSideMap[side] + placement.slice(side.length);
   }
   function expandPaddingObject(padding) {
     return {
@@ -2051,6 +2055,63 @@ var __exports__ = (() => {
     }
     return coords;
   }
+  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 MAX_RESET_COUNT = 50;
   var computePosition = async (reference, floating, config) => {
     const {
       placement = "bottom",
@@ -2058,7 +2119,10 @@ var __exports__ = (() => {
       middleware = [],
       platform: platform2
     } = config;
-    const validMiddleware = middleware.filter(Boolean);
+    const platformWithDetectOverflow = platform2.detectOverflow ? platform2 : {
+      ...platform2,
+      detectOverflow
+    };
     const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
     let rects = await platform2.getElementRects({
       reference,
@@ -2070,13 +2134,17 @@ var __exports__ = (() => {
       y: y3
     } = computeCoordsFromPlacement(rects, placement, rtl);
     let statefulPlacement = placement;
-    let middlewareData = {};
     let resetCount = 0;
-    for (let i4 = 0; i4 < validMiddleware.length; i4++) {
+    const middlewareData = {};
+    for (let i4 = 0; i4 < middleware.length; i4++) {
+      const currentMiddleware = middleware[i4];
+      if (!currentMiddleware) {
+        continue;
+      }
       const {
         name,
         fn
-      } = validMiddleware[i4];
+      } = currentMiddleware;
       const {
         x: nextX,
         y: nextY,
@@ -2090,7 +2158,7 @@ var __exports__ = (() => {
         strategy,
         middlewareData,
         rects,
-        platform: platform2,
+        platform: platformWithDetectOverflow,
         elements: {
           reference,
           floating
@@ -2098,14 +2166,11 @@ var __exports__ = (() => {
       });
       x2 = nextX != null ? nextX : x2;
       y3 = nextY != null ? nextY : y3;
-      middlewareData = {
-        ...middlewareData,
-        [name]: {
-          ...middlewareData[name],
-          ...data
-        }
+      middlewareData[name] = {
+        ...middlewareData[name],
+        ...data
       };
-      if (reset && resetCount <= 50) {
+      if (reset && resetCount < MAX_RESET_COUNT) {
         resetCount++;
         if (typeof reset === "object") {
           if (reset.placement) {
@@ -2134,62 +2199,6 @@ var __exports__ = (() => {
       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,
@@ -2234,11 +2243,11 @@ var __exports__ = (() => {
       const minPadding = min(paddingObject[minProp], largestPossiblePadding);
       const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
       const min$1 = minPadding;
-      const max3 = clientSize - arrowDimensions[length] - maxPadding;
+      const max2 = clientSize - arrowDimensions[length] - maxPadding;
       const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-      const offset3 = clamp(min$1, center, max3);
+      const offset3 = clamp(min$1, center, max2);
       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;
+      const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
       return {
         [axis]: coords[axis] + alignmentOffset,
         data: {
@@ -2291,7 +2300,7 @@ var __exports__ = (() => {
           fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
         }
         const placements2 = [initialPlacement, ...fallbackPlacements];
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const overflows = [];
         let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
         if (checkMainAxis) {
@@ -2310,15 +2319,20 @@ var __exports__ = (() => {
           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
-              }
-            };
+            const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+            if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
+            // overflows the main axis.
+            overflowsData.every((d3) => getSideAxis(d3.placement) === initialSideAxis ? d3.overflows[0] > 0 : true)) {
+              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) {
@@ -2356,6 +2370,7 @@ var __exports__ = (() => {
       }
     };
   };
+  var originSides = /* @__PURE__ */ new Set(["left", "top"]);
   async function convertValueToCoords(state, options) {
     const {
       placement,
@@ -2366,7 +2381,7 @@ var __exports__ = (() => {
     const side = getSide(placement);
     const alignment = getAlignment(placement);
     const isVertical = getSideAxis(placement) === "y";
-    const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
+    const mainAxisMulti = originSides.has(side) ? -1 : 1;
     const crossAxisMulti = rtl && isVertical ? -1 : 1;
     const rawValue = evaluate(options, state);
     let {
@@ -2378,10 +2393,9 @@ var __exports__ = (() => {
       crossAxis: 0,
       alignmentAxis: null
     } : {
-      mainAxis: 0,
-      crossAxis: 0,
-      alignmentAxis: null,
-      ...rawValue
+      mainAxis: rawValue.mainAxis || 0,
+      crossAxis: rawValue.crossAxis || 0,
+      alignmentAxis: rawValue.alignmentAxis
     };
     if (alignment && typeof alignmentAxis === "number") {
       crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
@@ -2435,7 +2449,8 @@ var __exports__ = (() => {
         const {
           x: x2,
           y: y3,
-          placement
+          placement,
+          platform: platform2
         } = state;
         const {
           mainAxis: checkMainAxis = true,
@@ -2458,7 +2473,7 @@ var __exports__ = (() => {
           x: x2,
           y: y3
         };
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const crossAxis = getSideAxis(getSide(placement));
         const mainAxis = getOppositeAxis(crossAxis);
         let mainAxisCoord = coords[mainAxis];
@@ -2466,16 +2481,16 @@ var __exports__ = (() => {
         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);
+          const min2 = mainAxisCoord + overflow[minSide];
+          const max2 = mainAxisCoord - overflow[maxSide];
+          mainAxisCoord = clamp(min2, mainAxisCoord, max2);
         }
         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 min2 = crossAxisCoord + overflow[minSide];
+          const max2 = crossAxisCoord - overflow[maxSide];
+          crossAxisCoord = clamp(min2, crossAxisCoord, max2);
         }
         const limitedCoords = limiter.fn({
           ...state,
@@ -2486,23 +2501,17 @@ var __exports__ = (() => {
           ...limitedCoords,
           data: {
             x: limitedCoords.x - x2,
-            y: limitedCoords.y - y3
+            y: limitedCoords.y - y3,
+            enabled: {
+              [mainAxis]: checkMainAxis,
+              [crossAxis]: checkCrossAxis
+            }
           }
         };
       }
     };
   };
 
-  // ../../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";
@@ -2551,25 +2560,32 @@ var __exports__ = (() => {
       overflowX,
       overflowY,
       display
-    } = getComputedStyle(element);
-    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
+    } = getComputedStyle2(element);
+    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
   }
   function isTableElement(element) {
-    return ["table", "td", "th"].includes(getNodeName(element));
+    return /^(table|td|th)$/.test(getNodeName(element));
   }
   function isTopLayer(element) {
-    return [":popover-open", ":modal"].some((selector) => {
-      try {
-        return element.matches(selector);
-      } catch (e3) {
-        return false;
+    try {
+      if (element.matches(":popover-open")) {
+        return true;
       }
-    });
+    } catch (_e) {
+    }
+    try {
+      return element.matches(":modal");
+    } catch (_e) {
+      return false;
+    }
   }
+  var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+  var containRe = /paint|layout|strict|content/;
+  var isNotNone = (value) => !!value && value !== "none";
+  var isWebKitValue;
   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));
+    const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+    return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
   }
   function getContainingBlock(element) {
     let currentNode = getParentNode(element);
@@ -2584,14 +2600,15 @@ var __exports__ = (() => {
     return null;
   }
   function isWebKit() {
-    if (typeof CSS === "undefined" || !CSS.supports)
-      return false;
-    return CSS.supports("-webkit-backdrop-filter", "none");
+    if (isWebKitValue == null) {
+      isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
+    }
+    return isWebKitValue;
   }
   function isLastTraversableNode(node) {
-    return ["html", "body", "#document"].includes(getNodeName(node));
+    return /^(html|body|#document)$/.test(getNodeName(node));
   }
-  function getComputedStyle(element) {
+  function getComputedStyle2(element) {
     return getWindow(element).getComputedStyle(element);
   }
   function getNodeScroll(element) {
@@ -2643,8 +2660,9 @@ var __exports__ = (() => {
     if (isBody) {
       const frameElement = getFrameElement(win);
       return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+    } else {
+      return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
     }
-    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
   }
   function getFrameElement(win) {
     return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -2652,7 +2670,7 @@ var __exports__ = (() => {
 
   // ../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
   function getCssDimensions(element) {
-    const css = getComputedStyle(element);
+    const css = getComputedStyle2(element);
     let width = parseFloat(css.width) || 0;
     let height = parseFloat(css.height) || 0;
     const hasOffset = isHTMLElement(element);
@@ -2748,7 +2766,7 @@ var __exports__ = (() => {
       while (currentIFrame && offsetParent && offsetWin !== currentWin) {
         const iframeScale = getScale(currentIFrame);
         const iframeRect = currentIFrame.getBoundingClientRect();
-        const css = getComputedStyle(currentIFrame);
+        const css = getComputedStyle2(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;
@@ -2768,6 +2786,22 @@ var __exports__ = (() => {
       y: y3
     });
   }
+  function getWindowScrollBarX(element, rect) {
+    const leftScroll = getNodeScroll(element).scrollLeft;
+    if (!rect) {
+      return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+    }
+    return rect.left + leftScroll;
+  }
+  function getHTMLOffset(documentElement, scroll) {
+    const htmlRect = documentElement.getBoundingClientRect();
+    const x2 = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+    const y3 = htmlRect.top + scroll.scrollTop;
+    return {
+      x: x2,
+      y: y3
+    };
+  }
   function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     let {
       elements,
@@ -2792,40 +2826,34 @@ var __exports__ = (() => {
       if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
       }
-      if (isHTMLElement(offsetParent)) {
+      if (isOffsetParentAnElement) {
         const offsetRect = getBoundingClientRect(offsetParent);
         scale = getScale(offsetParent);
         offsets.x = offsetRect.x + offsetParent.clientLeft;
         offsets.y = offsetRect.y + offsetParent.clientTop;
       }
     }
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
     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
+      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.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);
+    const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+    const height = max(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;
+    if (getComputedStyle2(body).direction === "rtl") {
+      x2 += max(html.clientWidth, body.clientWidth) - width;
     }
     return {
       width,
@@ -2834,6 +2862,7 @@ var __exports__ = (() => {
       y: y3
     };
   }
+  var SCROLLBAR_MAX = 25;
   function getViewportRect(element, strategy) {
     const win = getWindow(element);
     const html = getDocumentElement(element);
@@ -2851,6 +2880,19 @@ var __exports__ = (() => {
         y3 = visualViewport.offsetTop;
       }
     }
+    const windowScrollbarX = getWindowScrollBarX(html);
+    if (windowScrollbarX <= 0) {
+      const doc = html.ownerDocument;
+      const body = doc.body;
+      const bodyStyles = getComputedStyle(body);
+      const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+      const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+      if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+        width -= clippingStableScrollbarWidth;
+      }
+    } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+      width += windowScrollbarX;
+    }
     return {
       width,
       height,
@@ -2885,9 +2927,10 @@ var __exports__ = (() => {
     } else {
       const visualOffsets = getVisualOffsets(element);
       rect = {
-        ...clippingAncestor,
         x: clippingAncestor.x - visualOffsets.x,
-        y: clippingAncestor.y - visualOffsets.y
+        y: clippingAncestor.y - visualOffsets.y,
+        width: clippingAncestor.width,
+        height: clippingAncestor.height
       };
     }
     return rectToClientRect(rect);
@@ -2897,7 +2940,7 @@ var __exports__ = (() => {
     if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
       return false;
     }
-    return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+    return getComputedStyle2(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
   }
   function getClippingElementAncestors(element, cache) {
     const cachedResult = cache.get(element);
@@ -2906,15 +2949,15 @@ var __exports__ = (() => {
     }
     let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
     let currentContainingBlockComputedStyle = null;
-    const elementIsFixed = getComputedStyle(element).position === "fixed";
+    const elementIsFixed = getComputedStyle2(element).position === "fixed";
     let currentNode = elementIsFixed ? getParentNode(element) : element;
     while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-      const computedStyle = getComputedStyle(currentNode);
+      const computedStyle = getComputedStyle2(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);
+      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
       if (shouldDropCurrentNode) {
         result = result.filter((ancestor) => ancestor !== currentNode);
       } else {
@@ -2934,20 +2977,23 @@ var __exports__ = (() => {
     } = _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));
+    const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+    let top = firstRect.top;
+    let right = firstRect.right;
+    let bottom = firstRect.bottom;
+    let left = firstRect.left;
+    for (let i4 = 1; i4 < clippingAncestors.length; i4++) {
+      const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i4], strategy);
+      top = max(rect.top, top);
+      right = min(rect.right, right);
+      bottom = min(rect.bottom, bottom);
+      left = max(rect.left, left);
+    }
     return {
-      width: clippingRect.right - clippingRect.left,
-      height: clippingRect.bottom - clippingRect.top,
-      x: clippingRect.left,
-      y: clippingRect.top
+      width: right - left,
+      height: bottom - top,
+      x: left,
+      y: top
     };
   }
   function getDimensions(element) {
@@ -2970,6 +3016,9 @@ var __exports__ = (() => {
       scrollTop: 0
     };
     const offsets = createCoords(0);
+    function setLeftRTLScrollbarOffset() {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
     if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
       if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
@@ -2979,19 +3028,15 @@ var __exports__ = (() => {
         offsets.x = offsetRect.x + offsetParent.clientLeft;
         offsets.y = offsetRect.y + offsetParent.clientTop;
       } else if (documentElement) {
-        offsets.x = getWindowScrollBarX(documentElement);
+        setLeftRTLScrollbarOffset();
       }
     }
-    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);
+    if (isFixed && !isOffsetParentAnElement && documentElement) {
+      setLeftRTLScrollbarOffset();
     }
-    const x2 = rect.left + scroll.scrollLeft - offsets.x - htmlX;
-    const y3 = rect.top + scroll.scrollTop - offsets.y - htmlY;
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+    const x2 = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+    const y3 = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
     return {
       x: x2,
       y: y3,
@@ -3000,10 +3045,10 @@ var __exports__ = (() => {
     };
   }
   function isStaticPositioned(element) {
-    return getComputedStyle(element).position === "static";
+    return getComputedStyle2(element).position === "static";
   }
   function getTrueOffsetParent(element, polyfill) {
-    if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+    if (!isHTMLElement(element) || getComputedStyle2(element).position === "fixed") {
       return null;
     }
     if (polyfill) {
@@ -3054,7 +3099,7 @@ var __exports__ = (() => {
     };
   };
   function isRTL(element) {
-    return getComputedStyle(element).direction === "rtl";
+    return getComputedStyle2(element).direction === "rtl";
   }
   var platform = {
     convertOffsetParentRelativeRectToViewportRelativeRect,
@@ -3068,6 +3113,9 @@ var __exports__ = (() => {
     isElement,
     isRTL
   };
+  function rectsAreEqual(a3, b2) {
+    return a3.x === b2.x && a3.y === b2.y && a3.width === b2.width && a3.height === b2.height;
+  }
   function observeMove(element, onMove) {
     let io = null;
     let timeoutId;
@@ -3086,12 +3134,13 @@ var __exports__ = (() => {
         threshold = 1;
       }
       cleanup();
+      const elementRectForRootMargin = element.getBoundingClientRect();
       const {
         left,
         top,
         width,
         height
-      } = element.getBoundingClientRect();
+      } = elementRectForRootMargin;
       if (!skip) {
         onMove();
       }
@@ -3105,7 +3154,7 @@ var __exports__ = (() => {
       const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
       const options = {
         rootMargin,
-        threshold: max2(0, min2(1, threshold)) || 1
+        threshold: max(0, min(1, threshold)) || 1
       };
       let isFirstUpdate = true;
       function handleObserve(entries) {
@@ -3122,6 +3171,9 @@ var __exports__ = (() => {
             refresh(false, ratio);
           }
         }
+        if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+          refresh();
+        }
         isFirstUpdate = false;
       }
       try {
@@ -3130,7 +3182,7 @@ var __exports__ = (() => {
           // Handle <iframe>s
           root: root.ownerDocument
         });
-      } catch (e3) {
+      } catch (_e) {
         io = new IntersectionObserver(handleObserve, options);
       }
       io.observe(element);
@@ -3150,7 +3202,7 @@ var __exports__ = (() => {
       animationFrame = false
     } = options;
     const referenceEl = unwrapElement(reference);
-    const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+    const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...floating ? getOverflowAncestors(floating) : []] : [];
     ancestors.forEach((ancestor) => {
       ancestorScroll && ancestor.addEventListener("scroll", update, {
         passive: true
@@ -3163,7 +3215,7 @@ var __exports__ = (() => {
     if (elementResize) {
       resizeObserver = new ResizeObserver((_ref) => {
         let [firstEntry] = _ref;
-        if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
           resizeObserver.unobserve(floating);
           cancelAnimationFrame(reobserveFrame);
           reobserveFrame = requestAnimationFrame(() => {
@@ -3176,7 +3228,9 @@ var __exports__ = (() => {
       if (referenceEl && !animationFrame) {
         resizeObserver.observe(referenceEl);
       }
-      resizeObserver.observe(floating);
+      if (floating) {
+        resizeObserver.observe(floating);
+      }
     }
     let frameId;
     let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -3185,7 +3239,7 @@ var __exports__ = (() => {
     }
     function frameLoop() {
       const nextRefRect = getBoundingClientRect(reference);
-      if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
         update();
       }
       prevRefRect = nextRefRect;
@@ -3272,14 +3326,13 @@ var __exports__ = (() => {
       updaterRef.current?.();
     }, [x2, y3, placement, arrowSize, pixelOffset]);
     y2(() => {
-      if (contentRef.current) {
-        contentRef.current.style.visibility = "visible";
+      const anchor = anchorRef.current;
+      const content = contentRef.current;
+      if (!anchor || !content) {
+        return void 0;
       }
-      const cleanup = autoUpdate(
-        anchorRef.current,
-        contentRef.current,
-        () => updaterRef.current?.()
-      );
+      content.style.visibility = "visible";
+      const cleanup = autoUpdate(anchor, content, () => updaterRef.current?.());
       return () => {
         cleanup();
       };
@@ -3655,12 +3708,12 @@ var __exports__ = (() => {
 
   // src/lib/components/range-input.tsx
   var wheelListenerOptions = { passive: false };
-  var clamp2 = (value, min3, max3) => {
-    if (value < min3) {
-      return min3;
+  var clamp2 = (value, min2, max2) => {
+    if (value < min2) {
+      return min2;
     }
-    if (value > max3) {
-      return max3;
+    if (value > max2) {
+      return max2;
     }
     return value;
   };
@@ -3689,8 +3742,8 @@ var __exports__ = (() => {
   function RangeInput(props) {
     const {
       className = "",
-      min: min3,
-      max: max3,
+      min: min2,
+      max: max2,
       step,
       value,
       orientation,
@@ -3708,10 +3761,10 @@ var __exports__ = (() => {
     const thumbRef = A2(null);
     const dragStateRef = A2(null);
     const [trackLength, setTrackLength] = h2(0);
-    const range = max3 - min3;
+    const range = max2 - min2;
     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 clampedStart = clamp2(value[0], min2, min2 + maxStart);
     const { thumbLength, thumbOffset } = T2(() => {
       if (trackLength <= 0 || range <= 0) {
         return { thumbLength: 0, thumbOffset: 0 };
@@ -3721,21 +3774,21 @@ var __exports__ = (() => {
       }
       const nextThumbLength = rangeSize / range;
       const travel = Math.max(0, 1 - nextThumbLength);
-      const ratio = maxStart <= 0 ? 0 : clamp2((clampedStart - min3) / maxStart, 0, 1);
+      const ratio = maxStart <= 0 ? 0 : clamp2((clampedStart - min2) / maxStart, 0, 1);
       return {
         thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
         thumbOffset: travel * ratio
       };
-    }, [trackLength, range, rangeSize, maxStart, clampedStart, min3]);
+    }, [trackLength, range, rangeSize, maxStart, clampedStart, min2]);
     const emitRange = q2(
       (nextStart) => {
         if (!onChange) {
           return;
         }
-        const clamped = clamp2(nextStart, min3, min3 + maxStart);
+        const clamped = clamp2(nextStart, min2, min2 + maxStart);
         onChange([clamped, clamped + rangeSize]);
       },
-      [onChange, min3, maxStart, rangeSize]
+      [onChange, min2, maxStart, rangeSize]
     );
     const handleStepNegative = q2(
       (event) => {
@@ -3771,9 +3824,9 @@ var __exports__ = (() => {
         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);
+        emitRange(min2 + ratio * maxStart);
       },
-      [vertical, trackLength, thumbLength, emitRange, min3, maxStart]
+      [vertical, trackLength, thumbLength, emitRange, min2, maxStart]
     );
     const handleThumbPointerDown = (event) => {
       if (event.button !== 0) {
@@ -3787,8 +3840,8 @@ var __exports__ = (() => {
         pointerId: event.pointerId,
         startCoord: vertical ? event.clientY : event.clientX,
         startRatio: thumbOffset,
-        min: min3,
-        max: max3,
+        min: min2,
+        max: max2,
         maxStart
       };
       event.currentTarget.setPointerCapture(event.pointerId);
@@ -3845,18 +3898,18 @@ var __exports__ = (() => {
             event.preventDefault();
             break;
           case "Home":
-            emitRange(min3);
+            emitRange(min2);
             event.preventDefault();
             break;
           case "End":
-            emitRange(min3 + maxStart);
+            emitRange(min2 + maxStart);
             event.preventDefault();
             break;
           default:
             break;
         }
       },
-      [vertical, emitRange, clampedStart, step, range, pageSize, rangeSize, min3, maxStart]
+      [vertical, emitRange, clampedStart, step, range, pageSize, rangeSize, min2, maxStart]
     );
     const handleWheel = q2(
       (event) => {
@@ -3921,8 +3974,8 @@ var __exports__ = (() => {
       }
       return decorations.map((decoration, index) => {
         const [start, end] = decoration.position;
-        const startRatio = (start - min3) / range;
-        const endRatio = (end - min3) / range;
+        const startRatio = (start - min2) / range;
+        const endRatio = (end - min2) / range;
         const offsetPct = Math.round(startRatio * 1e3) / 10;
         const sizePct = Math.max(0, Math.round((endRatio - startRatio) * 1e3) / 10);
         const style = vertical ? {
@@ -3938,15 +3991,15 @@ var __exports__ = (() => {
         };
         return /* @__PURE__ */ u2("div", { className: "deck-widget-range__decoration", style, children: decoration.element }, `decoration-${index}`);
       });
-    }, [decorations, range, min3, vertical]);
+    }, [decorations, range, min2, vertical]);
     return /* @__PURE__ */ u2(
       "div",
       {
         ref: rootRef,
         tabIndex: 0,
         role: "scrollbar",
-        "aria-valuemin": min3,
-        "aria-valuemax": min3 + maxStart,
+        "aria-valuemin": min2,
+        "aria-valuemax": min2 + maxStart,
         "aria-valuenow": clampedStart,
         "aria-orientation": orientation,
         className: `${className} deck-widget-range deck-widget-range--${orientation} ${maxStart === 0 ? "deck-widget-range--disabled" : ""}`,
@@ -3957,7 +4010,7 @@ var __exports__ = (() => {
               type: "button",
               className: "deck-widget-range__button deck-widget-range__button--start",
               "aria-label": startButtonAriaLabel,
-              disabled: clampedStart <= min3,
+              disabled: clampedStart <= min2,
               onClick: handleStepNegative,
               children: /* @__PURE__ */ u2("span", { className: "deck-widget-icon" })
             }
@@ -3984,7 +4037,7 @@ var __exports__ = (() => {
               type: "button",
               className: "deck-widget-range__button deck-widget-range__button--end",
               "aria-label": endButtonAriaLabel,
-              disabled: clampedStart >= min3 + maxStart,
+              disabled: clampedStart >= min2 + maxStart,
               onClick: handleStepPositive,
               children: /* @__PURE__ */ u2("span", { className: "deck-widget-icon" })
             }
@@ -3995,12 +4048,12 @@ var __exports__ = (() => {
   }
 
   // src/scrollbar-widget.tsx
-  var clamp3 = (value, min3, max3) => {
-    if (value < min3) {
-      return min3;
+  var clamp3 = (value, min2, max2) => {
+    if (value < min2) {
+      return min2;
     }
-    if (value > max3) {
-      return max3;
+    if (value > max2) {
+      return max2;
     }
     return value;
   };
@@ -4393,19 +4446,19 @@ var __exports__ = (() => {
       };
       this.tick = () => {
         const {
-          timeRange: [min3, max3],
+          timeRange: [min2, max2],
           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;
+          if (next > max2) {
+            if (this.currentTime < max2) {
+              next = max2;
             } else if (loop) {
-              next = min3;
+              next = min2;
             } else {
-              next = max3;
+              next = max2;
               this.playing = false;
             }
           }
@@ -4481,11 +4534,11 @@ var __exports__ = (() => {
     play() {
       this.playing = true;
       const {
-        timeRange: [min3, max3]
+        timeRange: [min2, max2]
       } = this.props;
-      if (this.currentTime >= max3) {
-        this.currentTime = min3;
-        this.props.onTimeChange(min3);
+      if (this.currentTime >= max2) {
+        this.currentTime = min2;
+        this.props.onTimeChange(min2);
       }
       this.updateHTML();
       this.tick();
@@ -4894,6 +4947,7 @@ var __exports__ = (() => {
       }
       const stats = this._getStats();
       const title = this.props.title || ("id" in stats ? stats.id : null) || "Stats";
+      const deviceLabel = this._getDeviceLabel();
       const items = [];
       if (stats) {
         stats.forEach((stat) => {
@@ -4918,6 +4972,7 @@ var __exports__ = (() => {
               onClick: this._toggleCollapsed,
               children: [
                 /* @__PURE__ */ u2("b", { children: title }),
+                deviceLabel && /* @__PURE__ */ u2("span", { className: "deck-widget-stats-device", children: deviceLabel }),
                 /* @__PURE__ */ u2("button", { className: "deck-widget-dropdown-button", children: /* @__PURE__ */ u2("span", { className: "deck-widget-dropdown-icon open" }) })
               ]
             }
@@ -4952,6 +5007,20 @@ var __exports__ = (() => {
           throw new Error(`Unknown stats type: ${this.props.type}`);
       }
     }
+    _getDeviceLabel() {
+      const deviceType = this.deck?.device?.type;
+      if (!deviceType) {
+        return null;
+      }
+      switch (deviceType) {
+        case "webgpu":
+          return "WebGPU";
+        case "webgl":
+          return "WebGL";
+        default:
+          return String(deviceType);
+      }
+    }
     _getLines(stat) {
       if ("count" in stat) {
         const formatter = this._formatters[stat.name] || this._formatters[stat.type || ""] || DEFAULT_COUNT_FORMATTER;