@tamagui/use-element-layout 1.130.6 → 1.130.8

package/src/index.ts

@@ -1,6 +1,6 @@
 import { isClient, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { isEqualShallow } from '@tamagui/is-equal-shallow'
-import type { RefObject } from 'react'
+import { useCallback, type RefObject } from 'react'
 
 const LayoutHandlers = new WeakMap<HTMLElement, Function>()
 const Nodes = new Set<HTMLElement>()
@@ -26,8 +26,8 @@ export type LayoutValue = {
   y: number
   width: number
   height: number
-  left: number
-  top: number
+  pageX: number
+  pageY: number
 }
 
 export type LayoutEvent = {
@@ -58,7 +58,7 @@ export function enable(): void {
   }
 }
 
-function startGlobalIntersectionObserver() {
+function startGlobalObservers() {
   if (!isClient || globalIntersectionObserver) return
 
   globalIntersectionObserver = new IntersectionObserver(
@@ -150,7 +150,9 @@ if (isClient) {
 
     // only run once in a few frames, this could be adjustable
     let frameCount = 0
-    const RUN_EVERY_X_FRAMES = 8
+
+    const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP
+    const RUN_EVERY_X_FRAMES = userSkipVal ? +userSkipVal : 10
 
     function layoutOnAnimationFrame() {
       if (strategy !== 'off') {
@@ -193,76 +195,11 @@ export const getElementLayoutEvent = (
   }
 }
 
-export const measureLayout = (
-  node: HTMLElement,
-  relativeTo: HTMLElement | null,
-  callback: (
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    left: number,
-    top: number
-  ) => void
-): void => {
-  const relativeNode = relativeTo || node?.parentElement
-  if (relativeNode instanceof HTMLElement) {
-    const nodeDim = node.getBoundingClientRect()
-    const relativeNodeDim = relativeNode.getBoundingClientRect()
-
-    if (relativeNodeDim && nodeDim) {
-      const { x, y, width, height, left, top } = getRelativeDimensions(
-        nodeDim,
-        relativeNodeDim
-      )
-      callback(x, y, width, height, left, top)
-    }
-  }
-}
-
-export const getElementLayoutEventAsync = async (
-  target: HTMLElement
-): Promise<LayoutEvent> => {
-  const layout = await measureLayoutAsync(target)
-  if (!layout) {
-    throw new Error(`‼️`) // impossible
-  }
-  return {
-    nativeEvent: {
-      layout,
-      target,
-    },
-    timeStamp: Date.now(),
-  }
-}
-
-export const measureLayoutAsync = async (
-  node: HTMLElement,
-  relativeTo?: HTMLElement | null
-): Promise<null | LayoutValue> => {
-  const relativeNode = relativeTo || node?.parentElement
-  if (relativeNode instanceof HTMLElement) {
-    const [nodeDim, relativeNodeDim] = await Promise.all([
-      getBoundingClientRectAsync(node),
-      getBoundingClientRectAsync(relativeNode),
-    ])
-
-    if (relativeNodeDim && nodeDim) {
-      const { x, y, width, height, left, top } = getRelativeDimensions(
-        nodeDim,
-        relativeNodeDim
-      )
-      return { x, y, width, height, left, top }
-    }
-  }
-  return null
-}
-
 const getRelativeDimensions = (a: DOMRectReadOnly, b: DOMRectReadOnly) => {
   const { height, left, top, width } = a
   const x = left - b.left
   const y = top - b.top
-  return { x, y, width, height, left, top }
+  return { x, y, width, height, pageX: a.left, pageY: a.top }
 }
 
 export function useElementLayout(
@@ -283,7 +220,7 @@ export function useElementLayout(
     Nodes.add(node)
 
     // Add node to intersection observer
-    startGlobalIntersectionObserver()
+    startGlobalObservers()
     if (globalIntersectionObserver) {
       globalIntersectionObserver.observe(node)
       // Initialize as intersecting by default
@@ -323,7 +260,7 @@ function ensureWebElement<X>(x: X): HTMLElement | undefined {
   return x instanceof HTMLElement ? x : undefined
 }
 
-const getBoundingClientRectAsync = (
+export const getBoundingClientRectAsync = (
   node: HTMLElement | null
 ): Promise<DOMRectReadOnly | false> => {
   return new Promise<DOMRectReadOnly | false>((res) => {
@@ -342,14 +279,87 @@ const getBoundingClientRectAsync = (
   })
 }
 
-const getBoundingClientRect = (node: HTMLElement | null): undefined | DOMRect => {
-  if (!node || node.nodeType !== 1) return
-  return node.getBoundingClientRect?.()
+export const measureNode = async (
+  node: HTMLElement,
+  relativeTo?: HTMLElement | null
+): Promise<null | LayoutValue> => {
+  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)
+    }
+  }
+  return null
+}
+
+type MeasureInWindowCb = (x: number, y: number, width: number, height: number) => void
+
+type MeasureCb = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number
+) => void
+
+export const measure = async (
+  node: HTMLElement,
+  callback: MeasureCb
+): Promise<LayoutValue | null> => {
+  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
+}
+
+export function createMeasure(
+  node: HTMLElement
+): (callback: MeasureCb) => Promise<LayoutValue | null> {
+  return (callback) => measure(node, callback)
+}
+
+type WindowLayout = { pageX: number; pageY: number; width: number; height: number }
+
+export const measureInWindow = async (
+  node: HTMLElement,
+  callback: MeasureInWindowCb
+): Promise<WindowLayout | null> => {
+  const out = await measureNode(node, null)
+  if (out) {
+    callback?.(out.pageX, out.pageY, out.width, out.height)
+  }
+  return out
+}
+
+export const createMeasureInWindow = (
+  node: HTMLElement
+): ((callback: MeasureInWindowCb) => Promise<WindowLayout | null>) => {
+  return (callback) => measureInWindow(node, callback)
+}
+
+export const measureLayout = async (
+  node: HTMLElement,
+  relativeNode: HTMLElement,
+  callback: MeasureCb
+): Promise<LayoutValue | null> => {
+  const out = await measureNode(node, relativeNode)
+  if (out) {
+    callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY)
+  }
+  return out
 }
 
-export const getRect = (node: HTMLElement): LayoutValue | undefined => {
-  const rect = getBoundingClientRect(node)
-  if (!rect) return
-  const { x, y, top, left } = rect
-  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }
+export function createMeasureLayout(
+  node: HTMLElement
+): (relativeTo: HTMLElement, callback: MeasureCb) => Promise<LayoutValue | null> {
+  return (relativeTo, callback) => measureLayout(node, relativeTo, callback)
 }

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import { type RefObject } from "react";
 type TamaguiComponentStatePartial = {
 	host?: any;
 };
@@ -9,8 +9,8 @@ export type LayoutValue = {
 	y: number;
 	width: number;
 	height: number;
-	left: number;
-	top: number;
+	pageX: number;
+	pageY: number;
 };
 export type LayoutEvent = {
 	nativeEvent: {
@@ -21,11 +21,23 @@ export type LayoutEvent = {
 };
 export declare function enable(): void;
 export declare const getElementLayoutEvent: (nodeRect: DOMRectReadOnly, parentRect: DOMRectReadOnly) => LayoutEvent;
-export declare const measureLayout: (node: HTMLElement, relativeTo: HTMLElement | null, callback: (x: number, y: number, width: number, height: number, left: number, top: number) => void) => void;
-export declare const getElementLayoutEventAsync: (target: HTMLElement) => Promise<LayoutEvent>;
-export declare const measureLayoutAsync: (node: HTMLElement, relativeTo?: HTMLElement | null) => Promise<null | LayoutValue>;
 export declare function useElementLayout(ref: RefObject<TamaguiComponentStatePartial>, onLayout?: ((e: LayoutEvent) => void) | null): void;
-export declare const getRect: (node: HTMLElement) => LayoutValue | undefined;
+export declare const getBoundingClientRectAsync: (node: HTMLElement | null) => Promise<DOMRectReadOnly | false>;
+export declare const measureNode: (node: HTMLElement, relativeTo?: HTMLElement | null) => Promise<null | LayoutValue>;
+type MeasureInWindowCb = (x: number, y: number, width: number, height: number) => void;
+type MeasureCb = (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void;
+export declare const measure: (node: HTMLElement, callback: MeasureCb) => Promise<LayoutValue | null>;
+export declare function createMeasure(node: HTMLElement): (callback: MeasureCb) => Promise<LayoutValue | null>;
+type WindowLayout = {
+	pageX: number;
+	pageY: number;
+	width: number;
+	height: number;
+};
+export declare const measureInWindow: (node: HTMLElement, callback: MeasureInWindowCb) => Promise<WindowLayout | null>;
+export declare const createMeasureInWindow: (node: HTMLElement) => ((callback: MeasureInWindowCb) => Promise<WindowLayout | null>);
+export declare const measureLayout: (node: HTMLElement, relativeNode: HTMLElement, callback: MeasureCb) => Promise<LayoutValue | null>;
+export declare function createMeasureLayout(node: HTMLElement): (relativeTo: HTMLElement, callback: MeasureCb) => Promise<LayoutValue | null>;
 export {};
 
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1,29 +1,31 @@
 {
-  "mappings": "AAEA,cAAc,iBAAiB,OAAO;KASjC,+BAA+B;CAClC;AACD;KAEI,4BAA4B,QAAQ,SAAS;AAIlD,OAAO,iBAAS,oBAAoBA,OAAO;AAI3C,YAAY,cAAc;CACxB;CACA;CACA;CACA;CACA;CACA;AACD;AAED,YAAY,cAAc;CACxB,aAAa;EACX,QAAQ;EACR;CACD;CACD;AACD;AAYD,OAAO,iBAAS;AAoIhB,OAAO,cAAM,wBACXC,UAAU,iBACVC,YAAY,oBACX;AAUH,OAAO,cAAM,gBACXC,MAAM,aACNC,YAAY,oBACZC,WACEC,WACAC,WACAC,eACAC,gBACAC,cACAC;AAkBJ,OAAO,cAAM,6BACXC,QAAQ,gBACP,QAAQ;AAcX,OAAO,cAAM,qBACXT,MAAM,aACNU,aAAa,uBACZ,eAAe;AA0BlB,OAAO,iBAAS,iBACdC,KAAK,UAAU,+BACfC,aAAaC,GAAG;AAgFlB,OAAO,cAAM,UAAWb,MAAM,gBAAc",
+  "mappings": "AAEA,cAA2B,iBAAiB,OAAO;KAS9C,+BAA+B;CAClC;AACD;KAEI,4BAA4B,QAAQ,SAAS;AAIlD,OAAO,iBAAS,oBAAoBA,OAAO;AAI3C,YAAY,cAAc;CACxB;CACA;CACA;CACA;CACA;CACA;AACD;AAED,YAAY,cAAc;CACxB,aAAa;EACX,QAAQ;EACR;CACD;CACD;AACD;AAYD,OAAO,iBAAS;AAsIhB,OAAO,cAAM,wBACXC,UAAU,iBACVC,YAAY,oBACX;AAiBH,OAAO,iBAAS,iBACdC,KAAK,UAAU,+BACfC,aAAaC,GAAG;AAwDlB,OAAO,cAAM,6BACXC,MAAM,uBACL,QAAQ,kBAAkB;AAiB7B,OAAO,cAAM,cACXC,MAAM,aACNC,aAAa,uBACZ,eAAe;KAcb,qBAAqBC,WAAWC,WAAWC,eAAeC;KAE1D,aACHH,WACAC,WACAC,eACAC,gBACAC,eACAC;AAGF,OAAO,cAAM,UACXP,MAAM,aACNQ,UAAU,cACT,QAAQ;AAWX,OAAO,iBAAS,cACdR,MAAM,eACJQ,UAAU,cAAc,QAAQ;KAI/B,eAAe;CAAE;CAAe;CAAe;CAAe;AAAgB;AAEnF,OAAO,cAAM,kBACXR,MAAM,aACNS,UAAU,sBACT,QAAQ;AAQX,OAAO,cAAM,wBACXT,MAAM,kBACHS,UAAU,sBAAsB,QAAQ;AAI7C,OAAO,cAAM,gBACXT,MAAM,aACNU,cAAc,aACdF,UAAU,cACT,QAAQ;AAQX,OAAO,iBAAS,oBACdR,MAAM,eACJW,YAAY,aAAaH,UAAU,cAAc,QAAQ",
   "names": [
     "state: LayoutMeasurementStrategy",
     "nodeRect: DOMRectReadOnly",
     "parentRect: DOMRectReadOnly",
+    "ref: RefObject<TamaguiComponentStatePartial>",
+    "onLayout?: ((e: LayoutEvent) => void) | null",
+    "e: LayoutEvent",
+    "node: HTMLElement | null",
     "node: HTMLElement",
-    "relativeTo: HTMLElement | null",
-    "callback: (\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    left: number,\n    top: number\n  ) => void",
+    "relativeTo?: HTMLElement | null",
     "x: number",
     "y: number",
     "width: number",
     "height: number",
-    "left: number",
-    "top: number",
-    "target: HTMLElement",
-    "relativeTo?: HTMLElement | null",
-    "ref: RefObject<TamaguiComponentStatePartial>",
-    "onLayout?: ((e: LayoutEvent) => void) | null",
-    "e: LayoutEvent"
+    "pageX: number",
+    "pageY: number",
+    "callback: MeasureCb",
+    "callback: MeasureInWindowCb",
+    "relativeNode: HTMLElement",
+    "relativeTo: HTMLElement"
   ],
   "sources": [
     "src/index.ts"
   ],
   "sourcesContent": [
-    "import { isClient, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { isEqualShallow } from '@tamagui/is-equal-shallow'\nimport type { RefObject } from 'react'\n\nconst LayoutHandlers = new WeakMap<HTMLElement, Function>()\nconst Nodes = new Set<HTMLElement>()\nconst IntersectionState = new WeakMap<HTMLElement, boolean>()\n\n// Single persistent IntersectionObserver for all nodes\nlet globalIntersectionObserver: IntersectionObserver | null = null\n\ntype TamaguiComponentStatePartial = {\n  host?: any\n}\n\ntype LayoutMeasurementStrategy = 'off' | 'sync' | 'async'\n\nlet strategy: LayoutMeasurementStrategy = 'async'\n\nexport function setOnLayoutStrategy(state: LayoutMeasurementStrategy): void {\n  strategy = state\n}\n\nexport type LayoutValue = {\n  x: number\n  y: number\n  width: number\n  height: number\n  left: number\n  top: number\n}\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: LayoutValue\n    target: any\n  }\n  timeStamp: number\n}\n\nconst NodeRectCache = new WeakMap<HTMLElement, DOMRect>()\nconst ParentRectCache = new WeakMap<HTMLElement, DOMRect>()\nconst LastChangeTime = new WeakMap<HTMLElement, number>()\n\nconst rAF = typeof window !== 'undefined' ? window.requestAnimationFrame : undefined\n\n// prevent thrashing during first hydration (somewhat, streaming gets trickier)\nlet avoidUpdates = true\nconst queuedUpdates = new Map<HTMLElement, Function>()\n\nexport function enable(): void {\n  if (avoidUpdates) {\n    avoidUpdates = false\n    if (queuedUpdates) {\n      queuedUpdates.forEach((cb) => cb())\n      queuedUpdates.clear()\n    }\n  }\n}\n\nfunction startGlobalIntersectionObserver() {\n  if (!isClient || globalIntersectionObserver) return\n\n  globalIntersectionObserver = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        const node = entry.target as HTMLElement\n        if (IntersectionState.get(node) !== entry.isIntersecting) {\n          IntersectionState.set(node, entry.isIntersecting)\n        }\n      })\n    },\n    {\n      threshold: 0,\n    }\n  )\n}\n\nif (isClient) {\n  if (rAF) {\n    const supportsCheckVisibility = 'checkVisibility' in document.body\n\n    async function updateLayoutIfChanged(node: HTMLElement) {\n      if (IntersectionState.get(node) === false) {\n        // avoid due to not intersecting\n        return\n      }\n      // triggers style recalculation in safari which is slower than not\n      if (process.env.TAMAGUI_ONLAYOUT_VISIBILITY_CHECK === '1') {\n        if (supportsCheckVisibility && !(node as any).checkVisibility()) {\n          // avoid due to not visible\n          return\n        }\n      }\n\n      const onLayout = LayoutHandlers.get(node)\n      if (typeof onLayout !== 'function') return\n\n      const parentNode = node.parentElement\n      if (!parentNode) return\n\n      let nodeRect: DOMRectReadOnly\n      let parentRect: DOMRectReadOnly\n\n      if (strategy === 'async') {\n        const [nr, pr] = await Promise.all([\n          getBoundingClientRectAsync(node),\n          getBoundingClientRectAsync(parentNode),\n        ])\n\n        if (nr === false || pr === false) {\n          return\n        }\n\n        nodeRect = nr\n        parentRect = pr\n      } else {\n        nodeRect = node.getBoundingClientRect()\n        parentRect = parentNode.getBoundingClientRect()\n      }\n\n      const cachedRect = NodeRectCache.get(node)\n      const cachedParentRect = NodeRectCache.get(parentNode)\n\n      if (\n        !cachedRect ||\n        // has changed one rect\n        // @ts-expect-error DOMRectReadOnly can go into object\n        (!isEqualShallow(cachedRect, nodeRect) &&\n          // @ts-expect-error DOMRectReadOnly can go into object\n          (!cachedParentRect || !isEqualShallow(cachedParentRect, parentRect)))\n      ) {\n        NodeRectCache.set(node, nodeRect)\n        ParentRectCache.set(parentNode, parentRect)\n\n        const event = getElementLayoutEvent(nodeRect, parentRect)\n\n        if (avoidUpdates) {\n          queuedUpdates.set(node, () => onLayout(event))\n        } else {\n          onLayout(event)\n        }\n      }\n    }\n\n    // note that getBoundingClientRect() does not thrash layout if its after an animation frame\n    // ok new note: *if* it needed recalc then yea, but browsers often skip that, so it does\n    // which is why we use async strategy in general\n    rAF!(layoutOnAnimationFrame)\n\n    // only run once in a few frames, this could be adjustable\n    let frameCount = 0\n    const RUN_EVERY_X_FRAMES = 8\n\n    function layoutOnAnimationFrame() {\n      if (strategy !== 'off') {\n        if (frameCount++ % RUN_EVERY_X_FRAMES !== 0) {\n          // skip a few frames to avoid work\n          rAF!(layoutOnAnimationFrame)\n          return\n        }\n\n        if (frameCount === Number.MAX_SAFE_INTEGER) {\n          frameCount = 0\n        }\n\n        Nodes.forEach((node) => {\n          updateLayoutIfChanged(node)\n        })\n      }\n\n      rAF!(layoutOnAnimationFrame)\n    }\n  } else {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(\n        `No requestAnimationFrame - please polyfill for onLayout to work correctly`\n      )\n    }\n  }\n}\n\nexport const getElementLayoutEvent = (\n  nodeRect: DOMRectReadOnly,\n  parentRect: DOMRectReadOnly\n): LayoutEvent => {\n  return {\n    nativeEvent: {\n      layout: getRelativeDimensions(nodeRect, parentRect),\n      target: nodeRect,\n    },\n    timeStamp: Date.now(),\n  }\n}\n\nexport const measureLayout = (\n  node: HTMLElement,\n  relativeTo: HTMLElement | null,\n  callback: (\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    left: number,\n    top: number\n  ) => void\n): void => {\n  const relativeNode = relativeTo || node?.parentElement\n  if (relativeNode instanceof HTMLElement) {\n    const nodeDim = node.getBoundingClientRect()\n    const relativeNodeDim = relativeNode.getBoundingClientRect()\n\n    if (relativeNodeDim && nodeDim) {\n      const { x, y, width, height, left, top } = getRelativeDimensions(\n        nodeDim,\n        relativeNodeDim\n      )\n      callback(x, y, width, height, left, top)\n    }\n  }\n}\n\nexport const getElementLayoutEventAsync = async (\n  target: HTMLElement\n): Promise<LayoutEvent> => {\n  const layout = await measureLayoutAsync(target)\n  if (!layout) {\n    throw new Error(`‼️`) // impossible\n  }\n  return {\n    nativeEvent: {\n      layout,\n      target,\n    },\n    timeStamp: Date.now(),\n  }\n}\n\nexport const measureLayoutAsync = async (\n  node: HTMLElement,\n  relativeTo?: HTMLElement | null\n): Promise<null | LayoutValue> => {\n  const relativeNode = relativeTo || node?.parentElement\n  if (relativeNode instanceof HTMLElement) {\n    const [nodeDim, relativeNodeDim] = await Promise.all([\n      getBoundingClientRectAsync(node),\n      getBoundingClientRectAsync(relativeNode),\n    ])\n\n    if (relativeNodeDim && nodeDim) {\n      const { x, y, width, height, left, top } = getRelativeDimensions(\n        nodeDim,\n        relativeNodeDim\n      )\n      return { x, y, width, height, left, top }\n    }\n  }\n  return null\n}\n\nconst getRelativeDimensions = (a: DOMRectReadOnly, b: DOMRectReadOnly) => {\n  const { height, left, top, width } = a\n  const x = left - b.left\n  const y = top - b.top\n  return { x, y, width, height, left, top }\n}\n\nexport function useElementLayout(\n  ref: RefObject<TamaguiComponentStatePartial>,\n  onLayout?: ((e: LayoutEvent) => void) | null\n): void {\n  // ensure always up to date so we can avoid re-running effect\n  const node = ensureWebElement(ref.current?.host)\n  if (node && onLayout) {\n    LayoutHandlers.set(node, onLayout)\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    if (!onLayout) return\n    const node = ref.current?.host\n    if (!node) return\n\n    Nodes.add(node)\n\n    // Add node to intersection observer\n    startGlobalIntersectionObserver()\n    if (globalIntersectionObserver) {\n      globalIntersectionObserver.observe(node)\n      // Initialize as intersecting by default\n      IntersectionState.set(node, true)\n    }\n\n    // always do one immediate sync layout event no matter the strategy for accuracy\n    const parentNode = node.parentNode\n    if (parentNode) {\n      onLayout(\n        getElementLayoutEvent(\n          node.getBoundingClientRect(),\n          parentNode.getBoundingClientRect()\n        )\n      )\n    }\n\n    return () => {\n      Nodes.delete(node)\n      LayoutHandlers.delete(node)\n      NodeRectCache.delete(node)\n      LastChangeTime.delete(node)\n      IntersectionState.delete(node)\n\n      // Remove from intersection observer\n      if (globalIntersectionObserver) {\n        globalIntersectionObserver.unobserve(node)\n      }\n    }\n  }, [ref, !!onLayout])\n}\n\nfunction ensureWebElement<X>(x: X): HTMLElement | undefined {\n  if (typeof HTMLElement === 'undefined') {\n    return undefined\n  }\n  return x instanceof HTMLElement ? x : undefined\n}\n\nconst getBoundingClientRectAsync = (\n  node: HTMLElement | null\n): Promise<DOMRectReadOnly | false> => {\n  return new Promise<DOMRectReadOnly | false>((res) => {\n    if (!node || node.nodeType !== 1) return res(false)\n\n    const io = new IntersectionObserver(\n      (entries) => {\n        io.disconnect()\n        return res(entries[0].boundingClientRect)\n      },\n      {\n        threshold: 0,\n      }\n    )\n    io.observe(node)\n  })\n}\n\nconst getBoundingClientRect = (node: HTMLElement | null): undefined | DOMRect => {\n  if (!node || node.nodeType !== 1) return\n  return node.getBoundingClientRect?.()\n}\n\nexport const getRect = (node: HTMLElement): LayoutValue | undefined => {\n  const rect = getBoundingClientRect(node)\n  if (!rect) return\n  const { x, y, top, left } = rect\n  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }\n}\n"
+    "import { isClient, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { isEqualShallow } from '@tamagui/is-equal-shallow'\nimport { useCallback, type RefObject } from 'react'\n\nconst LayoutHandlers = new WeakMap<HTMLElement, Function>()\nconst Nodes = new Set<HTMLElement>()\nconst IntersectionState = new WeakMap<HTMLElement, boolean>()\n\n// Single persistent IntersectionObserver for all nodes\nlet globalIntersectionObserver: IntersectionObserver | null = null\n\ntype TamaguiComponentStatePartial = {\n  host?: any\n}\n\ntype LayoutMeasurementStrategy = 'off' | 'sync' | 'async'\n\nlet strategy: LayoutMeasurementStrategy = 'async'\n\nexport function setOnLayoutStrategy(state: LayoutMeasurementStrategy): void {\n  strategy = state\n}\n\nexport type LayoutValue = {\n  x: number\n  y: number\n  width: number\n  height: number\n  pageX: number\n  pageY: number\n}\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: LayoutValue\n    target: any\n  }\n  timeStamp: number\n}\n\nconst NodeRectCache = new WeakMap<HTMLElement, DOMRect>()\nconst ParentRectCache = new WeakMap<HTMLElement, DOMRect>()\nconst LastChangeTime = new WeakMap<HTMLElement, number>()\n\nconst rAF = typeof window !== 'undefined' ? window.requestAnimationFrame : undefined\n\n// prevent thrashing during first hydration (somewhat, streaming gets trickier)\nlet avoidUpdates = true\nconst queuedUpdates = new Map<HTMLElement, Function>()\n\nexport function enable(): void {\n  if (avoidUpdates) {\n    avoidUpdates = false\n    if (queuedUpdates) {\n      queuedUpdates.forEach((cb) => cb())\n      queuedUpdates.clear()\n    }\n  }\n}\n\nfunction startGlobalObservers() {\n  if (!isClient || globalIntersectionObserver) return\n\n  globalIntersectionObserver = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        const node = entry.target as HTMLElement\n        if (IntersectionState.get(node) !== entry.isIntersecting) {\n          IntersectionState.set(node, entry.isIntersecting)\n        }\n      })\n    },\n    {\n      threshold: 0,\n    }\n  )\n}\n\nif (isClient) {\n  if (rAF) {\n    const supportsCheckVisibility = 'checkVisibility' in document.body\n\n    async function updateLayoutIfChanged(node: HTMLElement) {\n      if (IntersectionState.get(node) === false) {\n        // avoid due to not intersecting\n        return\n      }\n      // triggers style recalculation in safari which is slower than not\n      if (process.env.TAMAGUI_ONLAYOUT_VISIBILITY_CHECK === '1') {\n        if (supportsCheckVisibility && !(node as any).checkVisibility()) {\n          // avoid due to not visible\n          return\n        }\n      }\n\n      const onLayout = LayoutHandlers.get(node)\n      if (typeof onLayout !== 'function') return\n\n      const parentNode = node.parentElement\n      if (!parentNode) return\n\n      let nodeRect: DOMRectReadOnly\n      let parentRect: DOMRectReadOnly\n\n      if (strategy === 'async') {\n        const [nr, pr] = await Promise.all([\n          getBoundingClientRectAsync(node),\n          getBoundingClientRectAsync(parentNode),\n        ])\n\n        if (nr === false || pr === false) {\n          return\n        }\n\n        nodeRect = nr\n        parentRect = pr\n      } else {\n        nodeRect = node.getBoundingClientRect()\n        parentRect = parentNode.getBoundingClientRect()\n      }\n\n      const cachedRect = NodeRectCache.get(node)\n      const cachedParentRect = NodeRectCache.get(parentNode)\n\n      if (\n        !cachedRect ||\n        // has changed one rect\n        // @ts-expect-error DOMRectReadOnly can go into object\n        (!isEqualShallow(cachedRect, nodeRect) &&\n          // @ts-expect-error DOMRectReadOnly can go into object\n          (!cachedParentRect || !isEqualShallow(cachedParentRect, parentRect)))\n      ) {\n        NodeRectCache.set(node, nodeRect)\n        ParentRectCache.set(parentNode, parentRect)\n\n        const event = getElementLayoutEvent(nodeRect, parentRect)\n\n        if (avoidUpdates) {\n          queuedUpdates.set(node, () => onLayout(event))\n        } else {\n          onLayout(event)\n        }\n      }\n    }\n\n    // note that getBoundingClientRect() does not thrash layout if its after an animation frame\n    // ok new note: *if* it needed recalc then yea, but browsers often skip that, so it does\n    // which is why we use async strategy in general\n    rAF!(layoutOnAnimationFrame)\n\n    // only run once in a few frames, this could be adjustable\n    let frameCount = 0\n\n    const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP\n    const RUN_EVERY_X_FRAMES = userSkipVal ? +userSkipVal : 10\n\n    function layoutOnAnimationFrame() {\n      if (strategy !== 'off') {\n        if (frameCount++ % RUN_EVERY_X_FRAMES !== 0) {\n          // skip a few frames to avoid work\n          rAF!(layoutOnAnimationFrame)\n          return\n        }\n\n        if (frameCount === Number.MAX_SAFE_INTEGER) {\n          frameCount = 0\n        }\n\n        Nodes.forEach((node) => {\n          updateLayoutIfChanged(node)\n        })\n      }\n\n      rAF!(layoutOnAnimationFrame)\n    }\n  } else {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(\n        `No requestAnimationFrame - please polyfill for onLayout to work correctly`\n      )\n    }\n  }\n}\n\nexport const getElementLayoutEvent = (\n  nodeRect: DOMRectReadOnly,\n  parentRect: DOMRectReadOnly\n): LayoutEvent => {\n  return {\n    nativeEvent: {\n      layout: getRelativeDimensions(nodeRect, parentRect),\n      target: nodeRect,\n    },\n    timeStamp: Date.now(),\n  }\n}\n\nconst getRelativeDimensions = (a: DOMRectReadOnly, b: DOMRectReadOnly) => {\n  const { height, left, top, width } = a\n  const x = left - b.left\n  const y = top - b.top\n  return { x, y, width, height, pageX: a.left, pageY: a.top }\n}\n\nexport function useElementLayout(\n  ref: RefObject<TamaguiComponentStatePartial>,\n  onLayout?: ((e: LayoutEvent) => void) | null\n): void {\n  // ensure always up to date so we can avoid re-running effect\n  const node = ensureWebElement(ref.current?.host)\n  if (node && onLayout) {\n    LayoutHandlers.set(node, onLayout)\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    if (!onLayout) return\n    const node = ref.current?.host\n    if (!node) return\n\n    Nodes.add(node)\n\n    // Add node to intersection observer\n    startGlobalObservers()\n    if (globalIntersectionObserver) {\n      globalIntersectionObserver.observe(node)\n      // Initialize as intersecting by default\n      IntersectionState.set(node, true)\n    }\n\n    // always do one immediate sync layout event no matter the strategy for accuracy\n    const parentNode = node.parentNode\n    if (parentNode) {\n      onLayout(\n        getElementLayoutEvent(\n          node.getBoundingClientRect(),\n          parentNode.getBoundingClientRect()\n        )\n      )\n    }\n\n    return () => {\n      Nodes.delete(node)\n      LayoutHandlers.delete(node)\n      NodeRectCache.delete(node)\n      LastChangeTime.delete(node)\n      IntersectionState.delete(node)\n\n      // Remove from intersection observer\n      if (globalIntersectionObserver) {\n        globalIntersectionObserver.unobserve(node)\n      }\n    }\n  }, [ref, !!onLayout])\n}\n\nfunction ensureWebElement<X>(x: X): HTMLElement | undefined {\n  if (typeof HTMLElement === 'undefined') {\n    return undefined\n  }\n  return x instanceof HTMLElement ? x : undefined\n}\n\nexport const getBoundingClientRectAsync = (\n  node: HTMLElement | null\n): Promise<DOMRectReadOnly | false> => {\n  return new Promise<DOMRectReadOnly | false>((res) => {\n    if (!node || node.nodeType !== 1) return res(false)\n\n    const io = new IntersectionObserver(\n      (entries) => {\n        io.disconnect()\n        return res(entries[0].boundingClientRect)\n      },\n      {\n        threshold: 0,\n      }\n    )\n    io.observe(node)\n  })\n}\n\nexport const measureNode = async (\n  node: HTMLElement,\n  relativeTo?: HTMLElement | null\n): Promise<null | LayoutValue> => {\n  const relativeNode = relativeTo || node?.parentElement\n  if (relativeNode instanceof HTMLElement) {\n    const [nodeDim, relativeNodeDim] = await Promise.all([\n      getBoundingClientRectAsync(node),\n      getBoundingClientRectAsync(relativeNode),\n    ])\n    if (relativeNodeDim && nodeDim) {\n      return getRelativeDimensions(nodeDim, relativeNodeDim)\n    }\n  }\n  return null\n}\n\ntype MeasureInWindowCb = (x: number, y: number, width: number, height: number) => void\n\ntype MeasureCb = (\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  pageX: number,\n  pageY: number\n) => void\n\nexport const measure = async (\n  node: HTMLElement,\n  callback: MeasureCb\n): Promise<LayoutValue | null> => {\n  const out = await measureNode(\n    node,\n    node.parentNode instanceof HTMLElement ? node.parentNode : null\n  )\n  if (out) {\n    callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY)\n  }\n  return out\n}\n\nexport function createMeasure(\n  node: HTMLElement\n): (callback: MeasureCb) => Promise<LayoutValue | null> {\n  return (callback) => measure(node, callback)\n}\n\ntype WindowLayout = { pageX: number; pageY: number; width: number; height: number }\n\nexport const measureInWindow = async (\n  node: HTMLElement,\n  callback: MeasureInWindowCb\n): Promise<WindowLayout | null> => {\n  const out = await measureNode(node, null)\n  if (out) {\n    callback?.(out.pageX, out.pageY, out.width, out.height)\n  }\n  return out\n}\n\nexport const createMeasureInWindow = (\n  node: HTMLElement\n): ((callback: MeasureInWindowCb) => Promise<WindowLayout | null>) => {\n  return (callback) => measureInWindow(node, callback)\n}\n\nexport const measureLayout = async (\n  node: HTMLElement,\n  relativeNode: HTMLElement,\n  callback: MeasureCb\n): Promise<LayoutValue | null> => {\n  const out = await measureNode(node, relativeNode)\n  if (out) {\n    callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY)\n  }\n  return out\n}\n\nexport function createMeasureLayout(\n  node: HTMLElement\n): (relativeTo: HTMLElement, callback: MeasureCb) => Promise<LayoutValue | null> {\n  return (relativeTo, callback) => measureLayout(node, relativeTo, callback)\n}\n"
   ],
   "version": 3
 }