50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1de1,"use client" import * as React from "react" import { createPortal } from "react-dom" type SafeAreaPoint = { x: number; y: number } type SafeAreaRect = { x: number; y: number; width: number; height: number } type SafeAreaShape = { polygon: SafeAreaPoint[] trough: SafeAreaRect inside: boolean } type SafeAreaElements = { reference: Element; floating: Element } const buffer = 0.5 function crosses(point: SafeAreaPoint, a: SafeAreaPoint, b: SafeAreaPoint) { return ( a.y >= point.y !== b.y >= point.y && point.x <= ((b.x - a.x) * (point.y - a.y)) / (b.y - a.y) + a.x ) } function inPolygon(point: SafeAreaPoint, polygon: SafeAreaPoint[]) { let inside = false for (let i = 0; i < polygon.length; i++) { if (crosses(point, polygon[i], polygon[(i + 1) % polygon.length])) { inside = !inside } } return inside } function inRect(point: SafeAreaPoint, rect: SafeAreaRect) { return ( point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height ) } function box(rect: DOMRect): SafeAreaRect { return { x: rect.left, y: rect.top, width: rect.width, height: rect.height } } function safeAreaShape( exit: SafeAreaPoint, point: SafeAreaPoint, ref: DOMRect, rect: DOMRect ): SafeAreaShape { const side = rect.left >= ref.right - 1 ? "right" : rect.right <= ref.left + 1 ? "left" : rect.top >= ref.bottom - 1 ? "bottom" : "top" const { x, y } = exit const fromRight = x > rect.right - rect.width / 2 const fromBottom = y > rect.bottom - rect.height / 2 const wider = rect.width > ref.width const taller = rect.height > ref.height const left = (wider ? ref : rect).left const right = (wider ? ref : rect).right const top = (taller ? ref : rect).top const bottom = (taller ? ref : rect).bottom let polygon: SafeAreaPoint[] let trough: SafeAreaRect if (side === "left" || side === "right") { const offset = taller ? buffer / 2 : buffer * 4 const one = taller ? y + offset : fromBottom ? y + offset : y - offset const two = taller ? y - offset : fromBottom ? y + offset : y - offset const near = side === "right" ? rect.left + buffer : rect.right - buffer const far = side === "right" ? rect.right : rect.left const edgeTop = fromBottom ? near : taller ? near : far const edgeBottom = fromBottom ? (taller ? near : far) : near const cursorX = side === "right" ? x - buffer : x + buffer + 1 polygon = [ { x: cursorX, y: one }, { x: cursorX, y: two }, { x: edgeTop, y: rect.top }, { x: edgeBottom, y: rect.bottom }, ] const from = side === "right" ? ref.right - 1 : rect.right - 1 const to = side === "right" ? rect.left + 1 : ref.left + 1 trough = { x: from, y: top, width: to - from, height: bottom - top } } else { const offset = wider ? buffer / 2 : buffer * 4 const one = wider ? x + offset : fromRight ? x + offset : x - offset const two = wider ? x - offset : fromRight ? x + offset : x - offset const near = side === "bottom" ? rect.top + buffer : rect.bottom - buffer const far = side === "bottom" ? rect.bottom : rect.top const edgeLeft = fromRight ? near : wider ? near : far const edgeRight = fromRight ? (wider ? near : far) : near const cursorY = side === "bottom" ? y - buffer : y + buffer + 1 polygon = [ { x: one, y: cursorY }, { x: two, y: cursorY }, { x: rect.left, y: edgeLeft }, { x: rect.right, y: edgeRight }, ] const from = side === "bottom" ? ref.bottom - 1 : rect.bottom - 1 const to = side === "bottom" ? rect.top + 1 : ref.top + 1 trough = { x: left, y: from, width: right - left, height: to - from } } return { polygon, trough, inside: inRect(point, box(ref)) || inRect(point, box(rect)) || inRect(point, trough) || inPolygon(point, polygon), } } function subscribe() { return () => {} } function SafeAreaOverlay({ getElements, }: { getElements: () => SafeAreaElements | null }) { const client = React.useSyncExternalStore( subscribe, () => true, () => false ) const svgRef = React.useRef(null) const polygonRef = React.useRef(null) const troughRef = React.useRef(null) const dotRef = React.useRef(null) const getElementsRef = React.useRef(getElements) React.useEffect(() => { getElementsRef.current = getElements }) React.useEffect(() => { if (!client) { return } let point: SafeAreaPoint | null = null let exit: { reference: Element; point: SafeAreaPoint } | null = null let frame = 0 const draw = () => { frame = requestAnimationFrame(draw) const svg = svgRef.current const polygon = polygonRef.current const trough = troughRef.current const dot = dotRef.current const elements = getElementsRef.current() if (!svg || !polygon || !trough || !dot || !point || !elements) { exit = null svg?.removeAttribute("data-visible") return } const ref = elements.reference.getBoundingClientRect() const rect = elements.floating.getBoundingClientRect() if (exit?.reference !== elements.reference) { exit = { reference: elements.reference, point } } const shape = safeAreaShape(exit.point, point, ref, rect) polygon.setAttribute( "points", shape.polygon.map((p) => `${p.x},${p.y}`).join(" ") ) trough.setAttribute("x", String(shape.trough.x)) trough.setAttribute("y", String(shape.trough.y)) trough.setAttribute("width", String(Math.max(0, shape.trough.width))) trough.setAttribute("height", String(Math.max(0, shape.trough.height))) dot.setAttribute("cx", String(point.x)) dot.setAttribute("cy", String(point.y)) svg.toggleAttribute("data-inside", shape.inside) svg.setAttribute("data-visible", "") } const onMove = (event: PointerEvent) => { if (event.pointerType === "touch") { return } point = { x: event.clientX, y: event.clientY } const elements = getElementsRef.current() if ( elements && (exit?.reference !== elements.reference || inRect(point, box(elements.reference.getBoundingClientRect()))) ) { exit = { reference: elements.reference, point } } } document.addEventListener("pointermove", onMove, { capture: true, passive: true, }) frame = requestAnimationFrame(draw) return () => { cancelAnimationFrame(frame) document.removeEventListener("pointermove", onMove, { capture: true }) } }, [client]) if (!client) { return null } return createPortal( , document.body ) } export { SafeAreaOverlay } export type { SafeAreaElements } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/safe-area.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]