@hanzogui/use-element-layout 3.0.6 → 4.4.0

package/dist/esm/index.native.js

@@ -2,188 +2,260 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useIsomorphicLayoutEffect } from "@hanzogui/constants";
 import { createContext, useContext, useId } from "react";
 function _instanceof(left, right) {
-  return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
 }
-var LayoutHandlers = /* @__PURE__ */new WeakMap(),
-  LayoutDisableKey = /* @__PURE__ */new WeakMap(),
-  Nodes = /* @__PURE__ */new Set(),
-  IntersectionState = /* @__PURE__ */new WeakMap(),
-  usePretransformDimensions = function () {
-    return globalThis.__HANZO_GUI_ONLAYOUT_PRETRANSFORM === !0 || process.env.HANZO_GUI_ONLAYOUT_PRETRANSFORM === "1";
-  },
-  _debugLayout;
+var LayoutHandlers = /* @__PURE__ */new WeakMap();
+var LayoutDisableKey = /* @__PURE__ */new WeakMap();
+var Nodes = /* @__PURE__ */new Set();
+var IntersectionState = /* @__PURE__ */new WeakMap();
+var usePretransformDimensions = function () {
+  return globalThis.__GUI_ONLAYOUT_PRETRANSFORM === true || process.env.GUI_ONLAYOUT_PRETRANSFORM === "1";
+};
+var _debugLayout;
 function isDebugLayout() {
-  return _debugLayout === void 0 && (_debugLayout = typeof window < "u" && new URLSearchParams(window.location.search).has("__tamaDebugLayout")), _debugLayout;
+  if (_debugLayout === void 0) {
+    _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
+  }
+  return _debugLayout;
 }
-var DisableLayoutContextValues = {},
-  DisableLayoutContextKey = /* @__PURE__ */createContext(""),
-  ENABLE = !1,
-  LayoutMeasurementController = function (param) {
-    var {
-        disable,
-        children
-      } = param,
-      id = useId();
-    return useIsomorphicLayoutEffect(function () {
-      DisableLayoutContextValues[id] = disable;
-    }, [disable, id]), /* @__PURE__ */_jsx(DisableLayoutContextKey.Provider, {
-      value: id,
-      children
-    });
-  },
-  globalIntersectionObserver = null,
-  strategy = "async";
+var DisableLayoutContextValues = {};
+var DisableLayoutContextKey = /* @__PURE__ */createContext("");
+var ENABLE = false;
+var LayoutMeasurementController = function (param) {
+  var {
+    disable,
+    children
+  } = param;
+  var id = useId();
+  useIsomorphicLayoutEffect(function () {
+    DisableLayoutContextValues[id] = disable;
+  }, [disable, id]);
+  return /* @__PURE__ */_jsx(DisableLayoutContextKey.Provider, {
+    value: id,
+    children
+  });
+};
+var globalIntersectionObserver = null;
+var strategy = "async";
 function setOnLayoutStrategy(state) {
   strategy = state;
 }
-var NodeRectCache = /* @__PURE__ */new WeakMap(),
-  avoidUpdates = !0,
-  queuedUpdates = /* @__PURE__ */new Map();
+var NodeRectCache = /* @__PURE__ */new WeakMap();
+var avoidUpdates = true;
+var queuedUpdates = /* @__PURE__ */new Map();
 function enable() {
-  avoidUpdates && (avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(function (cb) {
-    return cb();
-  }), queuedUpdates.clear()));
+  if (avoidUpdates) {
+    avoidUpdates = false;
+    if (queuedUpdates) {
+      queuedUpdates.forEach(function (cb) {
+        return cb();
+      });
+      queuedUpdates.clear();
+    }
+  }
 }
 function startGlobalObservers() {
-  !ENABLE || globalIntersectionObserver || (globalIntersectionObserver = new IntersectionObserver(function (entries) {
+  if (!ENABLE || globalIntersectionObserver) return;
+  globalIntersectionObserver = new IntersectionObserver(function (entries) {
     for (var i = 0; i < entries.length; i++) {
-      var entry = entries[i],
-        node = entry.target;
-      IntersectionState.get(node) !== entry.isIntersecting && IntersectionState.set(node, entry.isIntersecting);
+      var entry = entries[i];
+      var node = entry.target;
+      if (IntersectionState.get(node) !== entry.isIntersecting) {
+        IntersectionState.set(node, entry.isIntersecting);
+      }
     }
   }, {
     threshold: 0
-  }));
+  });
 }
 function rectsEqual(a, b) {
   return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
 if (ENABLE) {
   let ensureRectFetchObserver = function () {
-    return rectFetchObserver || (rectFetchObserver = new IntersectionObserver(function (entries) {
+    if (rectFetchObserver) return rectFetchObserver;
+    rectFetchObserver = new IntersectionObserver(function (entries) {
       lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
-      for (var i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
-      process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50 && console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries"), rectFetchResolve && (rectFetchResolve(!0), rectFetchResolve = null);
+      for (var i = 0; i < entries.length; i++) {
+        BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
+      }
+      if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) {
+        console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
+      }
+      if (rectFetchResolve) {
+        rectFetchResolve(true);
+        rectFetchResolve = null;
+      }
     }, {
       threshold: 0
-    }), rectFetchObserver);
+    });
+    return rectFetchObserver;
   };
-  var ensureRectFetchObserver2 = ensureRectFetchObserver,
-    BoundingRects = /* @__PURE__ */new WeakMap(),
-    rectFetchObserver = null,
-    rectFetchResolve = null,
-    rectFetchStartTime = 0,
-    lastCallbackDelay = 0;
+  var ensureRectFetchObserver2 = ensureRectFetchObserver;
+  var BoundingRects = /* @__PURE__ */new WeakMap();
+  var rectFetchObserver = null;
+  var rectFetchResolve = null;
+  var rectFetchStartTime = 0;
+  var lastCallbackDelay = 0;
   async function updateLayoutIfChanged(node) {
     var onLayout = LayoutHandlers.get(node);
-    if (typeof onLayout == "function") {
-      var parentNode = node.parentElement;
-      if (parentNode) {
-        var nodeRect, parentRect;
-        if (strategy === "async") {
-          if (nodeRect = BoundingRects.get(node), parentRect = BoundingRects.get(parentNode), !nodeRect || !parentRect) return;
-        } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
-        var cachedRect = NodeRectCache.get(node),
-          cachedParentRect = NodeRectCache.get(parentNode),
-          nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect),
-          parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
-        if (nodeChanged || parentChanged) {
-          NodeRectCache.set(node, nodeRect), NodeRectCache.set(parentNode, parentRect);
-          var event = getElementLayoutEvent(nodeRect, parentRect, node);
-          process.env.NODE_ENV === "development" && isDebugLayout() && console.log("[useElementLayout] change", {
-            tag: node.tagName,
-            id: node.id || void 0,
-            className: (node.className || "").slice(0, 60) || void 0,
-            layout: event.nativeEvent.layout,
-            first: !cachedRect
-          }), avoidUpdates ? queuedUpdates.set(node, function () {
-            return onLayout(event);
-          }) : onLayout(event);
-        }
+    if (typeof onLayout !== "function") return;
+    var parentNode = node.parentElement;
+    if (!parentNode) return;
+    var nodeRect;
+    var parentRect;
+    if (strategy === "async") {
+      nodeRect = BoundingRects.get(node);
+      parentRect = BoundingRects.get(parentNode);
+      if (!nodeRect || !parentRect) {
+        return;
+      }
+    } else {
+      nodeRect = node.getBoundingClientRect();
+      parentRect = parentNode.getBoundingClientRect();
+    }
+    var cachedRect = NodeRectCache.get(node);
+    var cachedParentRect = NodeRectCache.get(parentNode);
+    var nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
+    var parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
+    if (nodeChanged || parentChanged) {
+      NodeRectCache.set(node, nodeRect);
+      NodeRectCache.set(parentNode, parentRect);
+      var event = getElementLayoutEvent(nodeRect, parentRect, node);
+      if (process.env.NODE_ENV === "development" && isDebugLayout()) {
+        console.log("[useElementLayout] change", {
+          tag: node.tagName,
+          id: node.id || void 0,
+          className: (node.className || "").slice(0, 60) || void 0,
+          layout: event.nativeEvent.layout,
+          first: !cachedRect
+        });
+      }
+      if (avoidUpdates) {
+        queuedUpdates.set(node, function () {
+          return onLayout(event);
+        });
+      } else {
+        onLayout(event);
       }
     }
   }
-  var rAF = typeof requestAnimationFrame < "u" ? requestAnimationFrame : void 0,
-    userSkipVal = process.env.HANZO_GUI_LAYOUT_FRAME_SKIP,
-    BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10,
-    MAX_SKIP_FRAMES = 20,
-    skipFrames = BASE_SKIP_FRAMES,
-    frameCount = 0;
+  var rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
+  var userSkipVal = process.env.GUI_LAYOUT_FRAME_SKIP;
+  var BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
+  var MAX_SKIP_FRAMES = 20;
+  var skipFrames = BASE_SKIP_FRAMES;
+  var frameCount = 0;
   async function layoutOnAnimationFrame() {
     if (frameCount++ % skipFrames !== 0) {
       rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
       return;
     }
-    if (frameCount >= Number.MAX_SAFE_INTEGER && (frameCount = 0), strategy !== "off") {
-      var visibleNodes = [],
-        parentsToObserve = /* @__PURE__ */new Set(),
-        _iteratorNormalCompletion = !0,
-        _didIteratorError = !1,
+    if (frameCount >= Number.MAX_SAFE_INTEGER) {
+      frameCount = 0;
+    }
+    if (strategy !== "off") {
+      var visibleNodes = [];
+      var parentsToObserve = /* @__PURE__ */new Set();
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
         _iteratorError = void 0;
       try {
-        for (var _iterator = Nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-          var node = _step.value,
-            parentElement = node.parentElement;
+        for (var _iterator = Nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var node = _step.value;
+          var parentElement = node.parentElement;
           if (!_instanceof(parentElement, HTMLElement)) {
             cleanupNode(node);
             continue;
           }
           var disableKey = LayoutDisableKey.get(node);
-          disableKey && DisableLayoutContextValues[disableKey] === !0 || IntersectionState.get(node) !== !1 && (visibleNodes.push(node), parentsToObserve.add(parentElement));
+          if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
+          if (IntersectionState.get(node) === false) continue;
+          visibleNodes.push(node);
+          parentsToObserve.add(parentElement);
         }
       } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
+        _didIteratorError = true;
+        _iteratorError = err;
       } finally {
         try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
         } finally {
-          if (_didIteratorError) throw _iteratorError;
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
         }
       }
       if (visibleNodes.length > 0) {
         var io = ensureRectFetchObserver();
         rectFetchStartTime = performance.now();
-        for (var i = 0; i < visibleNodes.length; i++) io.observe(visibleNodes[i]);
-        var _iteratorNormalCompletion1 = !0,
-          _didIteratorError1 = !1,
+        for (var i = 0; i < visibleNodes.length; i++) {
+          io.observe(visibleNodes[i]);
+        }
+        var _iteratorNormalCompletion1 = true,
+          _didIteratorError1 = false,
           _iteratorError1 = void 0;
         try {
-          for (var _iterator1 = parentsToObserve[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
+          for (var _iterator1 = parentsToObserve[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
             var parent = _step1.value;
             io.observe(parent);
           }
         } catch (err) {
-          _didIteratorError1 = !0, _iteratorError1 = err;
+          _didIteratorError1 = true;
+          _iteratorError1 = err;
         } finally {
           try {
-            !_iteratorNormalCompletion1 && _iterator1.return != null && _iterator1.return();
+            if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+              _iterator1.return();
+            }
           } finally {
-            if (_didIteratorError1) throw _iteratorError1;
+            if (_didIteratorError1) {
+              throw _iteratorError1;
+            }
           }
         }
         await new Promise(function (res) {
           rectFetchResolve = res;
         });
-        for (var i1 = 0; i1 < visibleNodes.length; i1++) io.unobserve(visibleNodes[i1]);
-        var _iteratorNormalCompletion2 = !0,
-          _didIteratorError2 = !1,
+        for (var i1 = 0; i1 < visibleNodes.length; i1++) {
+          io.unobserve(visibleNodes[i1]);
+        }
+        var _iteratorNormalCompletion2 = true,
+          _didIteratorError2 = false,
           _iteratorError2 = void 0;
         try {
-          for (var _iterator2 = parentsToObserve[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
+          for (var _iterator2 = parentsToObserve[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
             var parent1 = _step2.value;
             io.unobserve(parent1);
           }
         } catch (err) {
-          _didIteratorError2 = !0, _iteratorError2 = err;
+          _didIteratorError2 = true;
+          _iteratorError2 = err;
         } finally {
           try {
-            !_iteratorNormalCompletion2 && _iterator2.return != null && _iterator2.return();
+            if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+              _iterator2.return();
+            }
           } finally {
-            if (_didIteratorError2) throw _iteratorError2;
+            if (_didIteratorError2) {
+              throw _iteratorError2;
+            }
           }
         }
-        lastCallbackDelay > 50 ? skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES) : lastCallbackDelay < 20 && (skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES));
-        for (var i2 = 0; i2 < visibleNodes.length; i2++) updateLayoutIfChanged(visibleNodes[i2]);
+        if (lastCallbackDelay > 50) {
+          skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
+        } else if (lastCallbackDelay < 20) {
+          skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
+        }
+        for (var i2 = 0; i2 < visibleNodes.length; i2++) {
+          updateLayoutIfChanged(visibleNodes[i2]);
+        }
       }
     }
     rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
@@ -191,139 +263,192 @@ if (ENABLE) {
   layoutOnAnimationFrame();
 }
 var getElementLayoutEvent = function (nodeRect, parentRect, node) {
-    return {
-      nativeEvent: {
-        layout: getRelativeDimensions(nodeRect, parentRect, node),
-        target: nodeRect
-      },
-      timeStamp: Date.now()
-    };
-  },
-  getPreTransformDimensions = function (node) {
-    return {
-      width: node.offsetWidth,
-      height: node.offsetHeight
-    };
-  },
-  getRelativeDimensions = function (a, b, aNode) {
-    var {
-        left,
-        top
-      } = a,
-      x = left - b.left,
-      y = top - b.top,
-      {
-        width,
-        height
-      } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
-        width: a.width,
-        height: a.height
-      };
-    return {
-      x,
-      y,
-      width,
-      height,
-      pageX: a.left,
-      pageY: a.top
-    };
+  return {
+    nativeEvent: {
+      layout: getRelativeDimensions(nodeRect, parentRect, node),
+      target: nodeRect
+    },
+    timeStamp: Date.now()
   };
+};
+var getPreTransformDimensions = function (node) {
+  return {
+    width: node.offsetWidth,
+    height: node.offsetHeight
+  };
+};
+var getRelativeDimensions = function (a, b, aNode) {
+  var {
+    left,
+    top
+  } = a;
+  var x = left - b.left;
+  var y = top - b.top;
+  var {
+    width,
+    height
+  } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
+    width: a.width,
+    height: a.height
+  };
+  return {
+    x,
+    y,
+    width,
+    height,
+    pageX: a.left,
+    pageY: a.top
+  };
+};
 function registerLayoutNode(node, onChange, disableKey) {
-  return Nodes.add(node), LayoutHandlers.set(node, onChange), disableKey && LayoutDisableKey.set(node, disableKey), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node), IntersectionState.set(node, !0)), function () {
+  Nodes.add(node);
+  LayoutHandlers.set(node, onChange);
+  if (disableKey) LayoutDisableKey.set(node, disableKey);
+  startGlobalObservers();
+  if (globalIntersectionObserver) {
+    globalIntersectionObserver.observe(node);
+    IntersectionState.set(node, true);
+  }
+  return function () {
     return cleanupNode(node);
   };
 }
 function cleanupNode(node) {
-  Nodes.delete(node), LayoutHandlers.delete(node), LayoutDisableKey.delete(node), NodeRectCache.delete(node), IntersectionState.delete(node), globalIntersectionObserver && globalIntersectionObserver.unobserve(node);
+  Nodes.delete(node);
+  LayoutHandlers.delete(node);
+  LayoutDisableKey.delete(node);
+  NodeRectCache.delete(node);
+  IntersectionState.delete(node);
+  if (globalIntersectionObserver) {
+    globalIntersectionObserver.unobserve(node);
+  }
 }
 var PrevHostNode = /* @__PURE__ */new WeakMap();
 function useElementLayout(ref, onLayout) {
-  var _ref_current,
-    disableKey = useContext(DisableLayoutContextKey),
-    node = ensureWebElement((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.host);
-  node && onLayout && (LayoutHandlers.set(node, onLayout), LayoutDisableKey.set(node, disableKey)), useIsomorphicLayoutEffect(function () {
+  var _ref_current;
+  var disableKey = useContext(DisableLayoutContextKey);
+  var node = ensureWebElement((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.host);
+  if (node && onLayout) {
+    LayoutHandlers.set(node, onLayout);
+    LayoutDisableKey.set(node, disableKey);
+  }
+  useIsomorphicLayoutEffect(function () {
     var _ref_current2;
-    if (onLayout) {
-      var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host),
-        prevNode = PrevHostNode.get(ref);
-      if (nextNode !== prevNode && (prevNode && cleanupNode(prevNode), PrevHostNode.set(ref, nextNode), !!nextNode)) {
-        Nodes.add(nextNode), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(nextNode), IntersectionState.set(nextNode, !0));
-        var handler = LayoutHandlers.get(nextNode);
-        if (typeof handler == "function") {
-          var parentNode = nextNode.parentElement;
-          if (parentNode) {
-            var nodeRect = nextNode.getBoundingClientRect(),
-              parentRect = parentNode.getBoundingClientRect();
-            NodeRectCache.set(nextNode, nodeRect), NodeRectCache.set(parentNode, parentRect), handler(getElementLayoutEvent(nodeRect, parentRect, nextNode));
-          }
-        }
-      }
+    if (!onLayout) return;
+    var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host);
+    var prevNode = PrevHostNode.get(ref);
+    if (nextNode === prevNode) return;
+    if (prevNode) cleanupNode(prevNode);
+    PrevHostNode.set(ref, nextNode);
+    if (!nextNode) return;
+    Nodes.add(nextNode);
+    startGlobalObservers();
+    if (globalIntersectionObserver) {
+      globalIntersectionObserver.observe(nextNode);
+      IntersectionState.set(nextNode, true);
     }
-  }), useIsomorphicLayoutEffect(function () {
+    var handler = LayoutHandlers.get(nextNode);
+    if (typeof handler !== "function") return;
+    var parentNode = nextNode.parentElement;
+    if (!parentNode) return;
+    var nodeRect = nextNode.getBoundingClientRect();
+    var parentRect = parentNode.getBoundingClientRect();
+    NodeRectCache.set(nextNode, nodeRect);
+    NodeRectCache.set(parentNode, parentRect);
+    handler(getElementLayoutEvent(nodeRect, parentRect, nextNode));
+  });
+  useIsomorphicLayoutEffect(function () {
     var _ref_current2;
-    if (onLayout) {
-      var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
-      if (node2) {
-        Nodes.add(node2), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node2), IntersectionState.set(node2, !0)), process.env.NODE_ENV === "development" && isDebugLayout() && console.log("[useElementLayout] register", {
-          tag: node2.tagName,
-          id: node2.id || void 0,
-          className: (node2.className || "").slice(0, 60) || void 0,
-          totalNodes: Nodes.size
-        });
-        var parentNode = node2.parentNode;
-        return parentNode && onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2)), function () {
-          cleanupNode(node2);
-          var swappedNode = PrevHostNode.get(ref);
-          swappedNode && swappedNode !== node2 && cleanupNode(swappedNode), PrevHostNode.delete(ref);
-        };
-      }
+    if (!onLayout) return;
+    var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
+    if (!node2) return;
+    Nodes.add(node2);
+    startGlobalObservers();
+    if (globalIntersectionObserver) {
+      globalIntersectionObserver.observe(node2);
+      IntersectionState.set(node2, true);
+    }
+    if (process.env.NODE_ENV === "development" && isDebugLayout()) {
+      console.log("[useElementLayout] register", {
+        tag: node2.tagName,
+        id: node2.id || void 0,
+        className: (node2.className || "").slice(0, 60) || void 0,
+        totalNodes: Nodes.size
+      });
+    }
+    var parentNode = node2.parentNode;
+    if (parentNode) {
+      onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2));
     }
+    return function () {
+      cleanupNode(node2);
+      var swappedNode = PrevHostNode.get(ref);
+      if (swappedNode && swappedNode !== node2) {
+        cleanupNode(swappedNode);
+      }
+      PrevHostNode.delete(ref);
+    };
   }, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-  if (!(typeof HTMLElement > "u")) return _instanceof(x, HTMLElement) ? x : void 0;
+  if (typeof HTMLElement === "undefined") {
+    return void 0;
+  }
+  return _instanceof(x, HTMLElement) ? x : void 0;
 }
 var getBoundingClientRectAsync = function (node) {
-    return new Promise(function (res) {
-      if (!node || node.nodeType !== 1) return res(!1);
-      var io = new IntersectionObserver(function (entries) {
-        return io.disconnect(), res(entries[0].boundingClientRect);
-      }, {
-        threshold: 0
-      });
-      io.observe(node);
+  return new Promise(function (res) {
+    if (!node || node.nodeType !== 1) return res(false);
+    var io = new IntersectionObserver(function (entries) {
+      io.disconnect();
+      return res(entries[0].boundingClientRect);
+    }, {
+      threshold: 0
     });
-  },
-  measureNode = async function (node, relativeTo) {
-    var relativeNode = relativeTo || node?.parentElement;
-    if (_instanceof(relativeNode, HTMLElement)) {
-      var [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
-      if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
+    io.observe(node);
+  });
+};
+var measureNode = async function (node, relativeTo) {
+  var relativeNode = relativeTo || (node === null || node === void 0 ? void 0 : node.parentElement);
+  if (_instanceof(relativeNode, HTMLElement)) {
+    var [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
+    if (relativeNodeDim && nodeDim) {
+      return getRelativeDimensions(nodeDim, relativeNodeDim, node);
     }
-    return null;
-  },
-  measure = async function (node, callback) {
-    var out = await measureNode(node, _instanceof(node.parentNode, HTMLElement) ? node.parentNode : null);
-    return out && callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY), out;
-  };
+  }
+  return null;
+};
+var measure = async function (node, callback) {
+  var out = await measureNode(node, _instanceof(node.parentNode, HTMLElement) ? node.parentNode : null);
+  if (out) {
+    callback === null || callback === void 0 ? void 0 : callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+  }
+  return out;
+};
 function createMeasure(node) {
   return function (callback) {
     return measure(node, callback);
   };
 }
 var measureInWindow = async function (node, callback) {
-    var out = await measureNode(node, null);
-    return out && callback?.(out.pageX, out.pageY, out.width, out.height), out;
-  },
-  createMeasureInWindow = function (node) {
-    return function (callback) {
-      return measureInWindow(node, callback);
-    };
-  },
-  measureLayout = async function (node, relativeNode, callback) {
-    var out = await measureNode(node, relativeNode);
-    return out && callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY), out;
+  var out = await measureNode(node, null);
+  if (out) {
+    callback === null || callback === void 0 ? void 0 : callback(out.pageX, out.pageY, out.width, out.height);
+  }
+  return out;
+};
+var createMeasureInWindow = function (node) {
+  return function (callback) {
+    return measureInWindow(node, callback);
   };
+};
+var measureLayout = async function (node, relativeNode, callback) {
+  var out = await measureNode(node, relativeNode);
+  if (out) {
+    callback === null || callback === void 0 ? void 0 : callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+  }
+  return out;
+};
 function createMeasureLayout(node) {
   return function (relativeTo, callback) {
     return measureLayout(node, relativeTo, callback);