@tamagui/use-element-layout 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/index.cjs

@@ -1,360 +1,348 @@
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
-  LayoutMeasurementController: () => LayoutMeasurementController,
-  createMeasure: () => createMeasure,
-  createMeasureInWindow: () => createMeasureInWindow,
-  createMeasureLayout: () => createMeasureLayout,
-  enable: () => enable,
-  getBoundingClientRectAsync: () => getBoundingClientRectAsync,
-  getElementLayoutEvent: () => getElementLayoutEvent,
-  measure: () => measure,
-  measureInWindow: () => measureInWindow,
-  measureLayout: () => measureLayout,
-  measureNode: () => measureNode,
-  registerLayoutNode: () => registerLayoutNode,
-  setOnLayoutStrategy: () => setOnLayoutStrategy,
-  useElementLayout: () => useElementLayout
+	LayoutMeasurementController: () => LayoutMeasurementController,
+	createMeasure: () => createMeasure,
+	createMeasureInWindow: () => createMeasureInWindow,
+	createMeasureLayout: () => createMeasureLayout,
+	enable: () => enable,
+	getBoundingClientRectAsync: () => getBoundingClientRectAsync,
+	getElementLayoutEvent: () => getElementLayoutEvent,
+	measure: () => measure,
+	measureInWindow: () => measureInWindow,
+	measureLayout: () => measureLayout,
+	measureNode: () => measureNode,
+	registerLayoutNode: () => registerLayoutNode,
+	setOnLayoutStrategy: () => setOnLayoutStrategy,
+	useElementLayout: () => useElementLayout
 });
 module.exports = __toCommonJS(index_exports);
 var import_constants = require("@tamagui/constants");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-const LayoutHandlers = /* @__PURE__ */new WeakMap();
-const LayoutDisableKey = /* @__PURE__ */new WeakMap();
-const Nodes = /* @__PURE__ */new Set();
+const LayoutHandlers = /* @__PURE__ */ new WeakMap();
+const LayoutDisableKey = /* @__PURE__ */ new WeakMap();
+const Nodes = /* @__PURE__ */ new Set();
 const usePretransformDimensions = () => globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
 let _debugLayout;
 function isDebugLayout() {
-  if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
-  return _debugLayout;
+	if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
+	return _debugLayout;
 }
 const DisableLayoutContextValues = {};
 const DisableLayoutContextKey = (0, import_react.createContext)("");
 const ENABLE = typeof IntersectionObserver !== "undefined";
-const LayoutMeasurementController = ({
-  disable,
-  children
-}) => {
-  const id = (0, import_react.useId)();
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    const wasDisabled = DisableLayoutContextValues[id] === true;
-    DisableLayoutContextValues[id] = disable;
-    if (wasDisabled && !disable) measureOnNextFrame?.();
-  }, [disable, id]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
-    value: id,
-    children
-  });
+const LayoutMeasurementController = ({ disable, children }) => {
+	const id = (0, import_react.useId)();
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		const wasDisabled = DisableLayoutContextValues[id] === true;
+		DisableLayoutContextValues[id] = disable;
+		if (wasDisabled && !disable) measureOnNextFrame?.();
+	}, [disable, id]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
+		value: id,
+		children
+	});
 };
 let strategy = "async";
 let resumeLayoutLoop;
 let measureOnNextFrame;
 function setOnLayoutStrategy(state) {
-  strategy = state;
-  resumeLayoutLoop?.();
+	strategy = state;
+	resumeLayoutLoop?.();
 }
-const NodeRectCache = /* @__PURE__ */new WeakMap();
+const NodeRectCache = /* @__PURE__ */ new WeakMap();
 let avoidUpdates = true;
-const queuedUpdates = /* @__PURE__ */new Map();
+const queuedUpdates = /* @__PURE__ */ new Map();
 function enable() {
-  if (avoidUpdates) {
-    avoidUpdates = false;
-    if (queuedUpdates) {
-      queuedUpdates.forEach(cb => cb());
-      queuedUpdates.clear();
-    }
-  }
+	if (avoidUpdates) {
+		avoidUpdates = false;
+		if (queuedUpdates) {
+			queuedUpdates.forEach((cb) => cb());
+			queuedUpdates.clear();
+		}
+	}
 }
 function rectsEqual(a, b) {
-  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
 if (ENABLE) {
-  let ensureRectFetchObserver = function () {
-      if (rectFetchObserver) return rectFetchObserver;
-      rectFetchObserver = new IntersectionObserver(entries => {
-        lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
-        for (let 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
-      });
-      return rectFetchObserver;
-    },
-    scheduleLayoutFrame = function () {
-      if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
-      frameScheduled = true;
-      rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
-    };
-  const BoundingRects = /* @__PURE__ */new WeakMap();
-  let rectFetchObserver = null;
-  let rectFetchResolve = null;
-  let rectFetchStartTime = 0;
-  let lastCallbackDelay = 0;
-  async function updateLayoutIfChanged(node) {
-    if (typeof LayoutHandlers.get(node) !== "function") return;
-    const parentNode = node.parentElement;
-    if (!parentNode) return;
-    let nodeRect;
-    let parentRect;
-    if (strategy === "async") {
-      nodeRect = BoundingRects.get(node);
-      parentRect = BoundingRects.get(parentNode);
-      if (!nodeRect || !parentRect) return;
-    } else {
-      nodeRect = node.getBoundingClientRect();
-      parentRect = parentNode.getBoundingClientRect();
-    }
-    emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
-  }
-  const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
-  const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
-  const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
-  const MAX_SKIP_FRAMES = 20;
-  let skipFrames = BASE_SKIP_FRAMES;
-  let frameCount = 0;
-  let frameScheduled = false;
-  async function layoutOnAnimationFrame() {
-    if (frameCount++ % skipFrames !== 0) {
-      frameScheduled = false;
-      scheduleLayoutFrame();
-      return;
-    }
-    if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
-    if (strategy !== "off") {
-      const activeNodes = [];
-      const parentsToObserve = /* @__PURE__ */new Set();
-      for (const node of Nodes) {
-        const parentElement = node.parentElement;
-        if (!(parentElement instanceof HTMLElement)) {
-          cleanupNode(node);
-          continue;
-        }
-        const disableKey = LayoutDisableKey.get(node);
-        if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
-        activeNodes.push(node);
-        parentsToObserve.add(parentElement);
-      }
-      if (activeNodes.length > 0) {
-        const io = ensureRectFetchObserver();
-        rectFetchStartTime = performance.now();
-        for (let i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
-        for (const parent of parentsToObserve) io.observe(parent);
-        await new Promise(res => {
-          rectFetchResolve = res;
-        });
-        for (let i = 0; i < activeNodes.length; i++) io.unobserve(activeNodes[i]);
-        for (const parent of parentsToObserve) io.unobserve(parent);
-        if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
-        for (let i = 0; i < activeNodes.length; i++) updateLayoutIfChanged(activeNodes[i]);
-      }
-    }
-    frameScheduled = false;
-    scheduleLayoutFrame();
-  }
-  resumeLayoutLoop = scheduleLayoutFrame;
-  measureOnNextFrame = () => {
-    frameCount = 0;
-    scheduleLayoutFrame();
-  };
-  document.addEventListener("visibilitychange", scheduleLayoutFrame);
-  scheduleLayoutFrame();
+	let ensureRectFetchObserver = function() {
+		if (rectFetchObserver) return rectFetchObserver;
+		rectFetchObserver = new IntersectionObserver((entries) => {
+			lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
+			for (let 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 });
+		return rectFetchObserver;
+	}, scheduleLayoutFrame = function() {
+		if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
+		frameScheduled = true;
+		rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+	};
+	const BoundingRects = /* @__PURE__ */ new WeakMap();
+	let rectFetchObserver = null;
+	let rectFetchResolve = null;
+	let rectFetchStartTime = 0;
+	let lastCallbackDelay = 0;
+	async function updateLayoutIfChanged(node) {
+		if (typeof LayoutHandlers.get(node) !== "function") return;
+		const parentNode = node.parentElement;
+		if (!parentNode) return;
+		let nodeRect;
+		let parentRect;
+		if (strategy === "async") {
+			nodeRect = BoundingRects.get(node);
+			parentRect = BoundingRects.get(parentNode);
+			if (!nodeRect || !parentRect) return;
+		} else {
+			nodeRect = node.getBoundingClientRect();
+			parentRect = parentNode.getBoundingClientRect();
+		}
+		emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
+	}
+	const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
+	const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
+	const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
+	const MAX_SKIP_FRAMES = 20;
+	let skipFrames = BASE_SKIP_FRAMES;
+	let frameCount = 0;
+	let frameScheduled = false;
+	async function layoutOnAnimationFrame() {
+		if (frameCount++ % skipFrames !== 0) {
+			frameScheduled = false;
+			scheduleLayoutFrame();
+			return;
+		}
+		if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
+		if (strategy !== "off") {
+			const activeNodes = [];
+			const parentsToObserve = /* @__PURE__ */ new Set();
+			for (const node of Nodes) {
+				const parentElement = node.parentElement;
+				if (!(parentElement instanceof HTMLElement)) {
+					cleanupNode(node);
+					continue;
+				}
+				const disableKey = LayoutDisableKey.get(node);
+				if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
+				activeNodes.push(node);
+				parentsToObserve.add(parentElement);
+			}
+			if (activeNodes.length > 0) {
+				const io = ensureRectFetchObserver();
+				rectFetchStartTime = performance.now();
+				for (let i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
+				for (const parent of parentsToObserve) io.observe(parent);
+				await new Promise((res) => {
+					rectFetchResolve = res;
+				});
+				for (let i = 0; i < activeNodes.length; i++) io.unobserve(activeNodes[i]);
+				for (const parent of parentsToObserve) io.unobserve(parent);
+				if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
+				else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
+				for (let i = 0; i < activeNodes.length; i++) updateLayoutIfChanged(activeNodes[i]);
+			}
+		}
+		frameScheduled = false;
+		scheduleLayoutFrame();
+	}
+	resumeLayoutLoop = scheduleLayoutFrame;
+	measureOnNextFrame = () => {
+		frameCount = 0;
+		scheduleLayoutFrame();
+	};
+	document.addEventListener("visibilitychange", scheduleLayoutFrame);
+	scheduleLayoutFrame();
 }
 const getElementLayoutEvent = (nodeRect, parentRect, node) => {
-  return {
-    nativeEvent: {
-      layout: getRelativeDimensions(nodeRect, parentRect, node),
-      target: nodeRect
-    },
-    timeStamp: Date.now()
-  };
+	return {
+		nativeEvent: {
+			layout: getRelativeDimensions(nodeRect, parentRect, node),
+			target: nodeRect
+		},
+		timeStamp: Date.now()
+	};
 };
-const getPreTransformDimensions = node => {
-  return {
-    width: node.offsetWidth,
-    height: node.offsetHeight
-  };
+const getPreTransformDimensions = (node) => {
+	return {
+		width: node.offsetWidth,
+		height: node.offsetHeight
+	};
 };
 const getRelativeDimensions = (a, b, aNode) => {
-  const {
-    left,
-    top
-  } = a;
-  const x = left - b.left;
-  const y = top - b.top;
-  const {
-    width,
-    height
-  } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
-    width: a.width,
-    height: a.height
-  };
-  return {
-    x,
-    y,
-    width,
-    height,
-    pageX: a.left,
-    pageY: a.top
-  };
+	const { left, top } = a;
+	const x = left - b.left;
+	const y = top - b.top;
+	const { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
+		width: a.width,
+		height: a.height
+	};
+	return {
+		x,
+		y,
+		width,
+		height,
+		pageX: a.left,
+		pageY: a.top
+	};
 };
 function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
-  const onLayout = LayoutHandlers.get(node);
-  if (typeof onLayout !== "function") return;
-  const cachedRect = NodeRectCache.get(node);
-  const cachedParentRect = NodeRectCache.get(parentNode);
-  const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
-  const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
-  if (!nodeChanged && !parentChanged) return;
-  NodeRectCache.set(node, nodeRect);
-  NodeRectCache.set(parentNode, parentRect);
-  const 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, () => onLayout(event));else onLayout(event);
+	const onLayout = LayoutHandlers.get(node);
+	if (typeof onLayout !== "function") return;
+	const cachedRect = NodeRectCache.get(node);
+	const cachedParentRect = NodeRectCache.get(parentNode);
+	const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
+	const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
+	if (!nodeChanged && !parentChanged) return;
+	NodeRectCache.set(node, nodeRect);
+	NodeRectCache.set(parentNode, parentRect);
+	const 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, () => onLayout(event));
+	else onLayout(event);
 }
 function observeLayoutNode(node, disableKey) {
-  Nodes.add(node);
-  if (disableKey) LayoutDisableKey.set(node, disableKey);else LayoutDisableKey.delete(node);
-  resumeLayoutLoop?.();
+	Nodes.add(node);
+	if (disableKey) LayoutDisableKey.set(node, disableKey);
+	else LayoutDisableKey.delete(node);
+	resumeLayoutLoop?.();
 }
 function registerLayoutNode(node, onChange, disableKey) {
-  LayoutHandlers.set(node, onChange);
-  observeLayoutNode(node, disableKey);
-  return () => cleanupNode(node);
+	LayoutHandlers.set(node, onChange);
+	observeLayoutNode(node, disableKey);
+	return () => cleanupNode(node);
 }
 function cleanupNode(node) {
-  Nodes.delete(node);
-  LayoutHandlers.delete(node);
-  LayoutDisableKey.delete(node);
-  NodeRectCache.delete(node);
+	Nodes.delete(node);
+	LayoutHandlers.delete(node);
+	LayoutDisableKey.delete(node);
+	NodeRectCache.delete(node);
 }
-const PrevHostNode = /* @__PURE__ */new WeakMap();
+const PrevHostNode = /* @__PURE__ */ new WeakMap();
 function emitLayoutSync(node) {
-  const onLayout = LayoutHandlers.get(node);
-  if (typeof onLayout !== "function") return;
-  const parentNode = node.parentElement;
-  if (!parentNode) return;
-  const nodeRect = node.getBoundingClientRect();
-  const parentRect = parentNode.getBoundingClientRect();
-  NodeRectCache.set(node, nodeRect);
-  NodeRectCache.set(parentNode, parentRect);
-  onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
+	const onLayout = LayoutHandlers.get(node);
+	if (typeof onLayout !== "function") return;
+	const parentNode = node.parentElement;
+	if (!parentNode) return;
+	const nodeRect = node.getBoundingClientRect();
+	const parentRect = parentNode.getBoundingClientRect();
+	NodeRectCache.set(node, nodeRect);
+	NodeRectCache.set(parentNode, parentRect);
+	onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
 }
 function useElementLayout(ref, onLayout) {
-  const disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
-  const node = ensureWebElement(ref.current?.host);
-  if (node && onLayout) {
-    LayoutHandlers.set(node, onLayout);
-    LayoutDisableKey.set(node, disableKey);
-  }
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (!onLayout) return;
-    const nextNode = ensureWebElement(ref.current?.host);
-    const prevNode = PrevHostNode.get(ref);
-    if (nextNode === prevNode) return;
-    if (prevNode) cleanupNode(prevNode);
-    PrevHostNode.set(ref, nextNode);
-    if (!nextNode) return;
-    LayoutHandlers.set(nextNode, onLayout);
-    observeLayoutNode(nextNode, disableKey);
-    emitLayoutSync(nextNode);
-  });
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (!onLayout) return;
-    const node2 = ref.current?.host;
-    if (!node2) return;
-    LayoutHandlers.set(node2, onLayout);
-    observeLayoutNode(node2, disableKey);
-    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
-    });
-    return () => {
-      cleanupNode(node2);
-      const swappedNode = PrevHostNode.get(ref);
-      if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
-      PrevHostNode.delete(ref);
-    };
-  }, [ref, !!onLayout]);
+	const disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
+	const node = ensureWebElement(ref.current?.host);
+	if (node && onLayout) {
+		LayoutHandlers.set(node, onLayout);
+		LayoutDisableKey.set(node, disableKey);
+	}
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (!onLayout) return;
+		const nextNode = ensureWebElement(ref.current?.host);
+		const prevNode = PrevHostNode.get(ref);
+		if (nextNode === prevNode) return;
+		if (prevNode) cleanupNode(prevNode);
+		PrevHostNode.set(ref, nextNode);
+		if (!nextNode) return;
+		LayoutHandlers.set(nextNode, onLayout);
+		observeLayoutNode(nextNode, disableKey);
+		emitLayoutSync(nextNode);
+	});
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (!onLayout) return;
+		const node2 = ref.current?.host;
+		if (!node2) return;
+		LayoutHandlers.set(node2, onLayout);
+		observeLayoutNode(node2, disableKey);
+		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
+		});
+		return () => {
+			cleanupNode(node2);
+			const swappedNode = PrevHostNode.get(ref);
+			if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
+			PrevHostNode.delete(ref);
+		};
+	}, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-  if (typeof HTMLElement === "undefined") return;
-  return x instanceof HTMLElement ? x : void 0;
+	if (typeof HTMLElement === "undefined") return;
+	return x instanceof HTMLElement ? x : void 0;
 }
-const getBoundingClientRectAsync = node => {
-  return new Promise(res => {
-    if (!node || node.nodeType !== 1) return res(false);
-    const io = new IntersectionObserver(entries => {
-      io.disconnect();
-      return res(entries[0].boundingClientRect);
-    }, {
-      threshold: 0
-    });
-    io.observe(node);
-  });
+const getBoundingClientRectAsync = (node) => {
+	return new Promise((res) => {
+		if (!node || node.nodeType !== 1) return res(false);
+		const io = new IntersectionObserver((entries) => {
+			io.disconnect();
+			return res(entries[0].boundingClientRect);
+		}, { threshold: 0 });
+		io.observe(node);
+	});
 };
 const measureNode = async (node, relativeTo) => {
-  const relativeNode = relativeTo || node?.parentElement;
-  if (relativeNode instanceof HTMLElement) {
-    const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
-    if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
-  }
-  return null;
+	const relativeNode = relativeTo || node?.parentElement;
+	if (relativeNode instanceof HTMLElement) {
+		const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
+		if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
+	}
+	return null;
 };
 const measure = async (node, callback) => {
-  const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
-  if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
-  return out;
+	const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
+	if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+	return out;
 };
 function createMeasure(node) {
-  return callback => measure(node, callback);
+	return (callback) => measure(node, callback);
 }
 const measureInWindow = async (node, callback) => {
-  const out = await measureNode(node, null);
-  if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
-  return out;
+	const out = await measureNode(node, null);
+	if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
+	return out;
 };
-const createMeasureInWindow = node => {
-  return callback => measureInWindow(node, callback);
+const createMeasureInWindow = (node) => {
+	return (callback) => measureInWindow(node, callback);
 };
 const measureLayout = async (node, relativeNode, callback) => {
-  const out = await measureNode(node, relativeNode);
-  if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
-  return out;
+	const out = await measureNode(node, relativeNode);
+	if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+	return out;
 };
 function createMeasureLayout(node) {
-  return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
-}
+	return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
+}