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:T3433,"use client"; // beui.dev/charts/liquidity-heatmap import { createContext, useContext, useId, useMemo, useRef, useState, type ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; import { NumberTicker } from "@/components/motion/number-ticker"; import { Tooltip } from "@/components/motion/tooltip"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; import { buildLiquidityHeatmap, pricePosition, type LiquiditySnapshot, } from "./liquidity-heatmap/model"; const formatPrice = (value: number) => value.toLocaleString("en-US", { maximumFractionDigits: 2 }); const formatSize = (value: number) => value.toLocaleString("en-US", { notation: "compact", maximumFractionDigits: 1 }); const colors = ["#17233b", "#254f80", "#217c90", "#27af98", "#97d56b", "#f4df76"]; function heatColor(value: number, max: number) { return colors[ Math.min(colors.length - 1, Math.floor((max > 0 ? value / max : 0) * colors.length)) ]; } interface LiquidityHeatmapProps { /** Time-ordered snapshots; use consistent price buckets and stable IDs. */ snapshots: readonly LiquiditySnapshot[]; /** Fixed intensity ceiling keeps colors comparable across live updates. */ maxSize?: number; unit?: string; label?: string; formatPrice?: (price: number) => string; formatSize?: (size: number) => string; children?: ReactNode; className?: string; } const Context = createContext< | (ReturnType & { ceiling: number; unit: string; formatPrice: (value: number) => string; formatSize: (value: number) => string; }) | null >(null); export function useLiquidityHeatmap() { const value = useContext(Context); if (!value) throw new Error("Liquidity heatmap parts must be inside LiquidityHeatmap"); return value; } export function LiquidityHeatmap({ snapshots, maxSize, unit = "units", label = "Liquidity heatmap", formatPrice: priceFormatter = formatPrice, formatSize: sizeFormatter = formatSize, children, className, }: LiquidityHeatmapProps) { const model = useMemo(() => buildLiquidityHeatmap(snapshots), [snapshots]); const ceiling = maxSize !== undefined && Number.isFinite(maxSize) && maxSize > 0 ? maxSize : model.maximum; return (

{children ?? ( <> )}

); } export function LiquidityHeatmapPlot({ className }: { className?: string }) { const { columns, prices, ceiling, unit, formatPrice, formatSize } = useLiquidityHeatmap(); const reduced = useReducedMotion(); const root = useRef(null); const anchor = useRef(null); const tooltipId = useId(); const [active, setActive] = useState(null); const [cursor, setCursor] = useState(null); const keys = prices.flatMap((price) => columns.map((column) => JSON.stringify([column.id, price])), ); const validCursor = cursor !== null && keys.includes(cursor) ? cursor : keys[0]; if (cursor !== null && !keys.includes(cursor)) setCursor(null); if (active !== null && !keys.includes(active)) setActive(null); const activeIndex = active === null ? -1 : keys.indexOf(active); const row = Math.floor(activeIndex / columns.length); const col = activeIndex % columns.length; const selected = activeIndex >= 0 ? columns[col] : null; const size = selected?.levels.get(prices[row]); let connected = false; const path = columns .map((column, index) => { const y = column.price === undefined ? null : pricePosition(column.price, prices); if (y === null) { connected = false; return ""; } const command = connected ? "L" : "M"; connected = true; return `${command}${index + 0.5},${y}`; }) .join(" "); if (!prices.length || !columns.length) return (

No liquidity data

); return (

{columns.map((column) => ( ))} {prices.map((price, rowIndex) => ( {columns.map((column, columnIndex) => { const value = column.levels.get(price); const key = JSON.stringify([column.id, price]); const index = rowIndex * columns.length + columnIndex; return ( ); })} ))}

{column.label}

{/* Remount only when trace topology changes; numeric coordinates otherwise interpolate together. */}

{ if (!open) setActive(null); }} content={ selected && ( {selected.label} · {formatPrice(prices[row])} {size === undefined ? "No data" : ( formatSize(size)} suffix={` ${unit}`} duration={0.35} startOnView={false} /> )} {selected.price !== undefined && Number.isFinite(selected.price) && ( Market {formatPrice(selected.price)} )} ) } />

); } export function LiquidityHeatmapLegend({ className }: { className?: string }) { const { ceiling, formatSize, unit } = useLiquidityHeatmap(); return (

Resting liquidity · {unit} 0

); } export type { LiquiditySnapshot, LiquidityHeatmapProps }; 53:T708,export interface LiquiditySnapshot { /** Stable identity, usually an ISO timestamp. */ id: string; label: string; levels: readonly { price: number; size: number }[]; price?: number; } /** Invalid observations are omitted; zero size is distinct from missing data. */ export function buildLiquidityHeatmap(snapshots: readonly LiquiditySnapshot[]) { const seen = new Set(); const columns = snapshots .filter((snapshot) => { if (seen.has(snapshot.id)) return false; seen.add(snapshot.id); return true; }) .map((snapshot) => { const levels = new Map(); for (const { price, size } of snapshot.levels) { if (!Number.isFinite(price) || price <= 0 || !Number.isFinite(size) || size < 0) continue; const total = (levels.get(price) ?? 0) + size; if (Number.isFinite(total)) levels.set(price, total); } return { ...snapshot, levels }; }); const prices = [...new Set(columns.flatMap((column) => [...column.levels.keys()]))].sort( (a, b) => b - a, ); let maximum = 0; for (const column of columns) for (const size of column.levels.values()) maximum = Math.max(maximum, size); return { columns, prices, maximum }; } /** Price levels are discrete bands; interpolate the trace between their centers. */ export function pricePosition(price: number, prices: readonly number[]) { if ( !Number.isFinite(price) || !prices.length || price > prices[0] || price < prices[prices.length - 1] ) return null; for (let index = 0; index < prices.length - 1; index++) { if (price <= prices[index] && price >= prices[index + 1]) { return index + 0.5 + (prices[index] - price) / (prices[index] - prices[index + 1]); } } return prices.length - 0.5; } 54:T14a4,"use client"; import { animate, motion, useInView, useReducedMotion } from "motion/react"; import { useEffect, useMemo, useRef, useState } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface NumberTickerProps { value: number; /** Digits to pad to (left). */ pad?: number; /** Per-digit roll duration in seconds. */ duration?: number; /** Stagger between digits. */ stagger?: number; /** Render only after the element enters the viewport. */ startOnView?: boolean; prefix?: string; suffix?: string; /** Add a small blur during digit rolls. */ blur?: boolean; className?: string; digitClassName?: string; /** Insert locale group separators (commas). Server-component safe. */ locale?: boolean; /** Custom formatter. Client-only — server components must use `locale` instead. */ format?: (value: number) => string; } const DIGIT_HEIGHT_EM = 1.1; const DIGITS = Array.from({ length: 10 }, (_, n) => n); export function NumberTicker({ value, pad, duration = 0.9, stagger = 0.04, startOnView = true, prefix, suffix, blur = false, className, digitClassName, locale, format, }: NumberTickerProps) { const containerRef = useRef(null); const inView = useInView(containerRef, { once: true, amount: 0.6 }); const [armed, setArmed] = useState(!startOnView); useEffect(() => { if (startOnView && inView) setArmed(true); }, [startOnView, inView]); const text = useMemo(() => { const rounded = Math.round(value); const formatted = format ? format(rounded) : locale ? rounded.toLocaleString() : rounded.toString(); return pad ? formatted.padStart(pad, "0") : formatted; }, [value, pad, format, locale]); const glyphs = useMemo(() => { const chars = text.split(""); // Key by place value (position from the right): a changing digit keeps its // identity and rolls to the new value instead of remounting and replaying // from 0. Growing numbers add glyphs on the left without re-keying the // ones, tens, hundreds already on screen. return chars.map((char, i) => ({ char, id: `g-${chars.length - 1 - i}` })); }, [text]); const readableText = `${prefix ?? ""}${text}${suffix ?? ""}`; // Stagger is an entrance flourish. Once the reveal has played, value // changes roll every digit immediately — a per-digit delay on live updates // reads as lag. const [entered, setEntered] = useState(false); useEffect(() => { if (!armed || entered) return; const total = (duration + glyphs.length * stagger) * 1000; const t = window.setTimeout(() => setEntered(true), total); return () => window.clearTimeout(t); }, [armed, entered, duration, stagger, glyphs.length]); return ( {readableText} ); } function Digit({ digit, delay, duration, blur, className, }: { digit: number; delay: number; duration: number; blur: boolean; className?: string; }) { const reduce = useReducedMotion(); const columnRef = useRef(null); useEffect(() => { if (reduce || !blur || !columnRef.current || !Number.isFinite(digit)) { return; } const node = columnRef.current; const controls = animate( node, { filter: ["blur(10px)", "blur(0px)"] }, { duration: Math.min(duration * 0.75, 0.32), delay, ease: EASE_OUT, }, ); return () => { controls.stop(); node.style.filter = "blur(0px)"; }; }, [blur, delay, digit, duration, reduce]); return ( {DIGITS.map((n) => ( {n} ))} ); } 55:T21e0,"use client"; import { AnimatePresence } from "motion/react"; import { TooltipPositioner } from "./tooltip/positioner"; import { useTooltipPointer } from "./tooltip/use-position"; import { cloneElement, isValidElement, type PointerEvent, type ReactElement, type ReactNode, type RefObject, useCallback, useEffect, useId, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { TooltipSurface } from "@/components/motion/tooltip-surface"; import { useDismiss } from "@/lib/hooks/use-dismiss"; import { useHoverGesture } from "@/lib/hooks/use-hover-gesture"; import { useTapGesture } from "@/lib/hooks/use-tap-gesture"; import { cn } from "@/lib/utils"; type Side = "top" | "right" | "bottom" | "left"; export interface TooltipProps { content: ReactNode; children?: ReactElement; /** Existing trigger for controlled integrations such as chart cells. */ anchorRef?: RefObject; /** Point within the anchor, as fractions of its rendered width and height. */ anchorPoint?: { x: number; y: number }; /** Follow real pointer coordinates; keyboard focus still uses the anchor. */ followCursor?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; id?: string; side?: Side; /** Delay before showing (ms). Default 120. */ delay?: number; className?: string; /** Classes for the outer wrapper span. Use to fix baseline / fill parent. */ wrapperClassName?: string; } // Once any tooltip has just closed, neighbouring tooltips open without the // initial delay — moving along a toolbar feels instant after the first one. const WARM_WINDOW_MS = 300; let lastHiddenAt = 0; export function Tooltip({ content, children, side = "top", delay = 120, className, wrapperClassName, anchorRef: externalAnchorRef, anchorPoint, followCursor = false, open: controlledOpen, onOpenChange, id: providedId, }: TooltipProps) { const [internalOpen, setInternalOpen] = useState(false); const open = controlledOpen ?? internalOpen; const setOpen = useCallback( (next: boolean) => { if (controlledOpen === undefined) setInternalOpen(next); onOpenChange?.(next); }, [controlledOpen, onOpenChange], ); const generatedId = useId(); const id = providedId ?? generatedId; const timer = useRef | null>(null); const wrapperRef = useRef(null); const anchorRef = externalAnchorRef ?? wrapperRef; const hover = useHoverGesture(); const floatingRef = useRef(null); const pointer = useTooltipPointer(anchorRef, followCursor); const focused = useRef(false); const show = useCallback(() => { if (timer.current) clearTimeout(timer.current); if (open) return; const warm = Date.now() - lastHiddenAt < WARM_WINDOW_MS; if (warm) { setOpen(true); return; } timer.current = setTimeout(() => { setOpen(true); }, delay); }, [delay, setOpen, open]); const hide = useCallback(() => { if (timer.current) { clearTimeout(timer.current); timer.current = null; } if (open) lastHiddenAt = Date.now(); setOpen(false); }, [open, setOpen]); const leave = useCallback(() => { if (focused.current) return; if (timer.current) clearTimeout(timer.current); // Bridge the small physical gap to a stationary, readable tooltip. if (followCursor) hide(); else timer.current = setTimeout(hide, 100); }, [followCursor, hide]); const insideTooltip = useCallback( (target: Element) => Boolean(floatingRef.current?.contains(target)), [], ); // A finger never hovers, and Safari does not focus a button on tap either, so // the label is only reachable if the tap itself opens the tooltip. A click // carries no pointerType, so the pointerdown that preceded it is what says // whether this was a tap; keyboard activation arrives with no pointerdown at // all, and focus has already shown the label there. const tap = useTapGesture(); const toggleOnTap = useCallback(() => { const gesture = tap.take(); if (!gesture || gesture.pointerType === "mouse") return; if (gesture.state) { hide(); return; } if (timer.current) clearTimeout(timer.current); setOpen(true); }, [hide, tap, setOpen]); // ...and closed again by the next tap that lands somewhere else. The label // covers nothing interactive, so that tap passes through to what it hit. useDismiss(open, hide, anchorRef, { ignore: insideTooltip }); useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); if (!externalAnchorRef && !isValidElement(children)) return children; // The label describes the trigger, so it has to name the trigger itself. // Everything else the tooltip needs is read off the anchor below instead of // cloned on: a handler written onto the child is the child's handler as far // as that child can tell, and a component that owns its activation — // hard-wiring onClick and spreading the rest of its props over it, as // ThemeToggle does — then runs the tooltip's instead of its own. Composing // with `props.onClick` cannot save it either, because a component element's // props hold nothing the component does internally. const trigger = isValidElement(children) ? cloneElement(children as ReactElement>, { "aria-describedby": [(children.props as Record)["aria-describedby"], open ? id : undefined] .filter(Boolean) .join(" ") || undefined, }) : null; return ( <> {!externalAnchorRef ? ( // biome-ignore lint/a11y/noStaticElementInteractions: This wrapper observes bubbling trigger events without replacing the control's handlers. { if (hover.enter(event)) show(); }} onPointerLeave={(event: PointerEvent) => { if (hover.leave(event)) leave(); }} onFocus={() => { focused.current = true; show(); }} onBlur={() => { focused.current = false; hide(); }} onPointerDown={(event: PointerEvent) => tap.start(event, open)} // A gesture the platform took away sends no click, and a key press // starts an activation that never had a pointer behind it. Either way // the record has to go, or the next click reads a finger that has long // since lifted. onPointerCancel={tap.drop} onKeyDown={(event) => { tap.drop(); if (event.key === "Escape") hide(); }} onClick={toggleOnTap} > {trigger} ) : null} {typeof document !== "undefined" ? createPortal( {open ? ( {(positioned, isPresent) => ( { if (timer.current) clearTimeout(timer.current); }} onPointerLeave={leave} style={{ maxWidth: "calc(100vw - 16px)", whiteSpace: "normal", pointerEvents: isPresent && !followCursor ? "auto" : "none", }} className={cn("overflow-hidden", className)} > {content} )} ) : null} , document.body, ) : null} ); } 56:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 57:T40a,"use client"; import { useIsPresent } from "motion/react"; import { useCallback, useState, type ReactNode } from "react"; import { useTooltipPosition } from "./use-position"; type PositionProps = Parameters[0]; /** Readiness lives with the mounted overlay, not a trigger ref's attach/detach cycle. */ export function TooltipPositioner({ children, ...position }: Omit & { children: (ready: boolean, present: boolean) => ReactNode; }) { const present = useIsPresent(); const [ready, setReady] = useState(false); const onPosition = useCallback(() => setReady(true), []); useTooltipPosition({ ...position, open: present, onPosition }); return ( {children(ready, present)} ); } 58:T1be2,"use client"; import { autoUpdate, computePosition, flip, offset, shift, type Placement, type VirtualElement, } from "@floating-ui/dom"; import { useCallback, useLayoutEffect, useRef, type RefObject } from "react"; export type TooltipSide = "top" | "right" | "bottom" | "left"; export type TooltipPoint = { x: number; y: number }; /** Position is geometry, not animation. One write per frame, never a spring chasing a pointer. */ export function useTooltipPosition({ open, anchorRef, floatingRef, anchorPoint, followCursor, side, onDismiss, onPosition, pointer, }: { open: boolean; anchorRef: RefObject; floatingRef: RefObject; anchorPoint?: TooltipPoint; followCursor: boolean; side: TooltipSide; onDismiss: () => void; onPosition: () => void; pointer: ReturnType; }) { const { cursor, onMove } = pointer; const cursorSide = useRef(null); useLayoutEffect(() => { cursorSide.current = open ? side : null; }, [open, side]); const frame = useRef(null); const version = useRef(0); const update = useRef<() => void>(() => {}); const schedule = useCallback(() => { // Invalidate older async calculations as soon as new geometry is requested. version.current++; if (frame.current !== null) return; frame.current = requestAnimationFrame(() => { frame.current = null; update.current(); }); }, []); useLayoutEffect(() => { onMove.current = schedule; return () => { onMove.current = null; }; }, [onMove, schedule]); const pointX = anchorPoint?.x; const pointY = anchorPoint?.y; // Latest committed inputs are read without recreating observers for every period/content update. useLayoutEffect(() => { update.current = () => { const anchor = anchorRef.current; const floating = floatingRef.current; if (!open || !anchor || !floating) return; const revision = ++version.current; const currentCursor = followCursor ? cursor.current : null; const reference: Element | VirtualElement = currentCursor || pointX !== undefined || pointY !== undefined ? { contextElement: anchor, getBoundingClientRect: () => { const rect = anchor.getBoundingClientRect(); const x = currentCursor?.x ?? rect.left + rect.width * (pointX ?? 0.5); const y = currentCursor?.y ?? rect.top + rect.height * (pointY ?? 0.5); return { x, y, left: x, right: x, top: y, bottom: y, width: 0, height: 0 }; }, } : anchor; void computePosition(reference, floating, { strategy: "fixed", placement: currentCursor ? (cursorSide.current ?? side) : side, middleware: [offset(currentCursor ? 12 : 8), flip({ padding: 8 }), shift({ padding: 8 })], }).then(({ x, y, placement }) => { if (version.current !== revision || !floating.isConnected) return; // Hold the chosen side for this hover session. Crossing a flip threshold // repeatedly must not bounce the surface above and below the pointer. if (currentCursor) cursorSide.current = placement; else cursorSide.current = null; const dpr = window.devicePixelRatio || 1; floating.style.transform = `translate3d(${Math.round(x * dpr) / dpr}px, ${Math.round(y * dpr) / dpr}px, 0)`; const origin = { top: "center bottom", bottom: "center top", left: "right center", right: "left center", }; floating.style.setProperty( "--tooltip-origin", origin[placement.split("-")[0] as TooltipSide], ); floating.style.visibility = "visible"; floating.dataset.placement = placement; onPosition(); }); }; if (open) schedule(); }, [ open, anchorRef, floatingRef, followCursor, pointX, pointY, side, schedule, onPosition, cursor, ]); useLayoutEffect(() => { const anchor = anchorRef.current; const floating = floatingRef.current; if (!open || !anchor || !floating) return; const stop = autoUpdate(anchor, floating, schedule); const onScroll = () => { // A stationary pointer no longer describes the same chart point after scrolling. if (followCursor && cursor.current) onDismiss(); }; window.addEventListener("scroll", onScroll, true); return () => { stop(); window.removeEventListener("scroll", onScroll, true); version.current++; if (frame.current !== null) cancelAnimationFrame(frame.current); frame.current = null; }; }, [open, anchorRef, floatingRef, followCursor, onDismiss, schedule, cursor]); useLayoutEffect( () => () => { version.current++; if (frame.current !== null) cancelAnimationFrame(frame.current); }, [], ); } /** Pointer lifetime belongs to the trigger, including the opening delay. */ export function useTooltipPointer( anchorRef: RefObject, followCursor: boolean, ) { const cursor = useRef(null); const onMove = useRef<(() => void) | null>(null); const pointerFocus = useRef(false); useLayoutEffect(() => { const anchor = anchorRef.current; if (!anchor || !followCursor) return; const point = (event: PointerEvent) => { if (event.type === "pointermove" && event.pointerType === "touch" && !event.buttons) return; cursor.current = { x: event.clientX, y: event.clientY }; if (event.type === "pointerdown") pointerFocus.current = true; onMove.current?.(); }; const keyboard = () => { cursor.current = null; pointerFocus.current = false; onMove.current?.(); }; const focus = () => { if (!pointerFocus.current) cursor.current = null; pointerFocus.current = false; onMove.current?.(); }; const leave = () => { cursor.current = null; }; anchor.addEventListener("pointerenter", point as EventListener, { passive: true }); anchor.addEventListener("pointermove", point as EventListener, { passive: true }); anchor.addEventListener("pointerdown", point as EventListener, { passive: true }); anchor.addEventListener("pointerleave", leave); anchor.addEventListener("pointercancel", leave); anchor.addEventListener("keydown", keyboard); anchor.addEventListener("focusin", focus); return () => { cursor.current = null; anchor.removeEventListener("pointerenter", point as EventListener); anchor.removeEventListener("pointermove", point as EventListener); anchor.removeEventListener("pointerdown", point as EventListener); anchor.removeEventListener("pointerleave", leave); anchor.removeEventListener("pointercancel", leave); anchor.removeEventListener("keydown", keyboard); anchor.removeEventListener("focusin", focus); }; }, [anchorRef, followCursor]); return { cursor, onMove }; } 59:T57d,"use client"; import { motion, useReducedMotion } from "motion/react"; import type { ComponentProps, ReactNode, Ref } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; /** Presentation only: the unanimated parent owns measurement and positioning. */ export function TooltipSurface({ children, side: _side = "top", className, ref, ready = true, style, ...props }: Omit, "children"> & { children?: ReactNode; /** Start the entrance only after the positioning layer has been measured. */ ready?: boolean; side?: "top" | "right" | "bottom" | "left"; ref?: Ref; }) { const reduce = useReducedMotion(); const closed = { opacity: 0, scale: reduce ? 1 : 0.94 }; return ( ); } 5a:T1279,"use client"; import { type RefObject, useEffect } from "react"; /** * What the dismissing gesture does to the control it landed on. * * `"pass-through"` is the platform norm (native popover light-dismiss): the * tap closes the overlay *and* activates whatever was under it. Use * `"consume"` where the open overlay sits over or beside controls that would * be costly to trigger by accident — the dismissal then swallows the * activation too, so the gesture only closes. */ export type DismissBehavior = "pass-through" | "consume"; export interface DismissOptions { /** Default `"pass-through"`. */ behavior?: DismissBehavior; /** Dismiss on Escape as well. Default true. */ escape?: boolean; /** Return true for an outside target that should *not* dismiss. Must be stable. */ ignore?: (target: Element) => boolean; } /** * What every currently open dismiss scope counts as inside itself. A consumed * dismissal reads this to tell a stray gesture from one that belongs to an * overlay in front of it: overlays have no shared z-order to consult, but the * one the gesture landed in has said as much by registering it. */ const openScopes = new Set<(target: Element) => boolean>(); function claimedByAnotherScope( self: (target: Element) => boolean, target: Element, ) { for (const scope of openScopes) { if (scope !== self && scope(target)) return true; } return false; } // preventDefault on pointerdown does not suppress the click that follows, so // consuming a gesture means swallowing that click itself. The swallower // deliberately outlives the effect that installed it — the dismissal it // belongs to has already unmounted or re-rendered by the time the click lands. // It releases on that click, or on the next gesture if the pointer is dragged // away and no click ever arrives, so it can never eat a later one. A keydown // releases it too: a gesture that ends with neither a click nor a cancel would // otherwise leave it armed, and the click Enter synthesizes on some focused // control is not the one this dismissal was owed. function consumeActivation(source: Event) { const swallow = (event: MouseEvent) => { event.preventDefault(); event.stopPropagation(); release(); }; const restart = (event: Event) => { if (event !== source) release(); }; const release = () => { window.removeEventListener("click", swallow, true); window.removeEventListener("pointerdown", restart, true); window.removeEventListener("pointercancel", restart, true); window.removeEventListener("keydown", release, true); }; window.addEventListener("click", swallow, true); window.addEventListener("pointerdown", restart, true); window.addEventListener("pointercancel", restart, true); window.addEventListener("keydown", release, true); } /** * Close an open overlay on Escape or a pointerdown outside `ref`. Pass `null` * for `ref` when what counts as inside isn't one element, and say so with * `ignore` instead. * * The pointerdown listener is capture-phase: a bubble-phase one is blinded by * any handler in between that stops propagation, and an overlay cannot know * what it is layered over. `onDismiss` and `ignore` must be stable (wrap in * useCallback) so the listeners aren't re-bound every render while open. */ export function useDismiss( open: boolean, onDismiss: () => void, ref: RefObject | null, { behavior = "pass-through", escape: dismissOnEscape = true, ignore, }: DismissOptions = {}, ) { useEffect(() => { if (!open) return; const inside = (target: Element) => Boolean(ref?.current?.contains(target)) || Boolean(ignore?.(target)); const onKey = (event: KeyboardEvent) => { if (dismissOnEscape && event.key === "Escape") onDismiss(); }; const onPointer = (event: PointerEvent) => { const target = event.target as Element | null; if (!target || inside(target)) return; // Outside this overlay, but inside one that is also open: the gesture is // that overlay's to answer, and swallowing its click from behind would // cost the user the control they actually aimed at. if (behavior === "consume" && !claimedByAnotherScope(inside, target)) { consumeActivation(event); } onDismiss(); }; openScopes.add(inside); window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onPointer, true); return () => { openScopes.delete(inside); window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onPointer, true); }; }, [open, onDismiss, ref, behavior, dismissOnEscape, ignore]); } 5b:T8a7,"use client"; import { useMemo, useRef } from "react"; import { isHoveringPointer } from "@/lib/touch"; interface BoundaryEvent { pointerId: number; pointerType: string; buttons: number; } export interface HoverGesture { /** True when this enter starts a hover: the pointer arrived resting, not pressing. */ enter: (event: BoundaryEvent) => boolean; /** True when this leave ends a hover that entered as one. */ leave: (event: BoundaryEvent) => boolean; } /** * Pairs a surface's enter with its leave, per pointer. * * `isHoveringPointer` answers the question the *enter* asks — is this pointer * resting on the surface or pressing it — and both boundary cases go wrong if * the leave is asked the same question again: * * - A pen with no hover never rests. It arrives in contact, taps, and the spec * then requires its boundary events after `pointerup`, so the leave carries * `buttons: 0` and reads as a mouse gliding off. Hover teardown then undid * the tap — the panel the pen had just opened closed under it. * - A mouse pressed on the surface and dragged off leaves with `buttons: 1`. * Skipping teardown there strands the surface open: the release happens * outside, and no second leave ever comes. * * So the state a hover holds is released by the pointer that took it, whatever * the buttons say at the boundary, and a pointer that arrived in contact never * took it in the first place. Contact is the exception tracked here, not * hover: a leave from a pointer this surface never saw enter — mounted under * the cursor, say — still counts, since the alternative is state with no way * out. */ export function useHoverGesture(): HoverGesture { const contact = useRef(new Set()); return useMemo( () => ({ enter: (event) => { if (isHoveringPointer(event)) { contact.current.delete(event.pointerId); return true; } contact.current.add(event.pointerId); return false; }, leave: (event) => { const arrivedInContact = contact.current.delete(event.pointerId); return !arrivedInContact && event.pointerType !== "touch"; }, }), [], ); } 5c:T98e,"use client"; import { useMemo, useRef } from "react"; /** What a pointerdown recorded, read back by the click that ends its gesture. */ export interface TapRecord { /** Which input started the gesture. */ pointerType: string; /** What the surface was showing when it started. */ state: S; } export interface TapGesture { /** Record the gesture a pointerdown starts, with the state it starts in. */ start: (event: { pointerType: string }, state: S) => void; /** Read the record and clear it. `null` when no pointer is behind this click. */ take: () => TapRecord | null; /** Drop the record: this gesture will never spend it on a click. */ drop: () => void; } /** * The pointer gesture behind a click, recorded where the click cannot report * it. A `click` carries no `pointerType` in the engines that matter, so the * `pointerdown` before it is the only thing that says which input activated * the control — and whether one did at all, since keyboard activation * synthesizes a click with no pointer behind it. * * State goes in with the record because a click reports that no better: a * browser that focuses a control on contact can open the very panel the tap * was meant to open, and reading "is it open" at click time then undoes it. * What the gesture started against is what it acts on. * * The record is spent by one click and dropped by everything else, because a * record that outlives its gesture is worse than none: * * - A scroll or an OS gesture takes the touch away — `pointercancel`, no click * ever — and the finger would sit in the record until some later click. * - That later click is often `Enter` on a keyboard, which arrives with no * pointerdown of its own and would inherit the abandoned finger. A keydown * is the start of a keyboard activation and never part of a tap, so it drops * the record too. * * Both ends have to be wired by the surface: `drop` on `onPointerCancel` and * on `onKeyDown`. */ export function useTapGesture(): TapGesture { const record = useRef | null>(null); return useMemo( () => ({ start: (event, state) => { record.current = { pointerType: event.pointerType, state }; }, take: () => { const spent = record.current; record.current = null; return spent; }, drop: () => { record.current = null; }, }), [], ); } 5d:T1668,// Shared touch primitives. iOS and iPadOS run their own gestures on top of the // page — the long-press selection callout and the selection it drags in with // it — and they win: once the platform claims a touch it cancels ours // mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own // their gesture have to opt out. // // What the two classes below cover, precisely: // - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only: // it is not a property other engines have, so it is inert everywhere else. // - `user-select: none` stops the long-press selection on every engine, // Android included, and stops a drag from painting a selection under the // cursor. It is inherited, so it reaches every descendant — which is why the // two classes differ only in whether they apply it unconditionally. // What neither covers: // - Chrome for Android's long-press menu on a link or an image. No CSS // suppresses it; a gesture surface that wraps one needs its own // `onContextMenu` with `preventDefault()`. // - The native drag of an `` or `` descendant. `-webkit-user-drag` is // not inherited and plain divs and buttons are not drag sources, so setting // it on the surface does nothing — the child itself needs `draggable={false}`. /** * Classes for a surface that *is* the control: a thumb, a drum, a stage, a * handle, a hold button. Selection is suppressed on every input, because a * drag that highlights the control's own label is wrong on a mouse too. * Compose with `touch-none` when the surface also owns the scroll axis — leave * it off when the page must still scroll from there. */ export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]"; /** * The same opt-out for a gesture surface that wraps content the consumer owns: * a scroller, a context-menu trigger, a sheet header, a list row. Selection is * suppressed only where the platform runs its own press gestures — a coarse * pointer — so a mouse user can still select and copy that content. If the * gesture itself would paint a selection under the cursor, add `select-none` * for the duration of the gesture rather than reaching for * `TOUCH_GESTURE_CLASS`. * * `pointer: coarse` describes the *primary* pointer and nothing else, so a * hybrid machine reads it wrong in both directions: a tablet with a mouse * plugged in keeps touch as primary and loses mouse selection, and a laptop * with a touchscreen keeps the mouse as primary and leaves selection live * under a finger. No media query can answer per interaction — the query is * about the device, and the question is about the gesture in progress. The * default stays here because it is right on the machines that are one thing or * the other, and losing a selection is a nuisance; where the miss costs a * *gesture* instead, the surface pairs it with `holdSelection` on the press. */ export const TOUCH_GESTURE_CONTENT_CLASS = "[-webkit-touch-callout:none] pointer-coarse:select-none"; /** * Suppress selection on `element` for as long as a gesture is running on it, * whatever the primary pointer of the machine happens to be. Returns the * release. Inline, so it wins over the class above and is gone again the * moment the gesture ends. * * For the press gestures a native selection would otherwise steal — a * long-press that opens a menu. Elsewhere prefer the classes: a surface that * takes selection away for the whole session is a surface whose text nobody * can copy. */ export function holdSelection(element: HTMLElement) { element.style.setProperty("user-select", "none"); element.style.setProperty("-webkit-user-select", "none"); return () => { element.style.removeProperty("user-select"); element.style.removeProperty("-webkit-user-select"); }; } /** * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer * is already gone by the time the handler runs — routine on iOS, where the * system can claim the touch first — and an uncaught throw takes the rest of * the handler, the gesture included, down with it. Touch pointers carry * implicit capture anyway, so losing it is never fatal. */ export function capturePointer(element: Element, pointerId: number) { try { element.setPointerCapture(pointerId); } catch { // Pointer is no longer active — implicit capture still applies on touch. } } /** Release a capture taken with `capturePointer`, ignoring a stale pointer. */ export function releasePointer(element: Element, pointerId: number) { try { if (element.hasPointerCapture(pointerId)) { element.releasePointerCapture(pointerId); } } catch { // Capture was already dropped by the browser. } } /** * Whether this event came from a pointer that is *hovering*: not a touch, and * not currently pressed. Which input the user is holding right now is not * something a device capability can answer — a touchscreen laptop hovers and * taps, and iPadOS reports a fine hovering pointer for a finger — so both * paths stay live and each handler branches on the event it was given. * * A pen resting on the glass is making contact, not hovering: `buttons` is the * tell, and it sends a pen tap down the same route a finger takes. * * This answers what an *enter* asks. A leave is the other half of a pair and * has to be read against the enter that started it — `useHoverGesture` in * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it * rather than asking this question twice. */ export const isHoveringPointer = (event: { pointerType: string; buttons: number; }) => event.pointerType !== "touch" && event.buttons === 0; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@floating-ui/dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40floating-ui%2Fdom","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@floating-ui/dom"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@beui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/charts/liquidity-heatmap.tsx","content":"$52","type":"registry:component","target":"@components/charts/liquidity-heatmap.tsx"},{"path":"components/charts/liquidity-heatmap/model.ts","content":"$53","type":"registry:component","target":"@components/charts/liquidity-heatmap/model.ts"},{"path":"components/motion/number-ticker.tsx","content":"$54","type":"registry:component","target":"@components/motion/number-ticker.tsx"},{"path":"components/motion/tooltip.tsx","content":"$55","type":"registry:component","target":"@components/motion/tooltip.tsx"},{"path":"lib/ease.ts","content":"$56","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/motion/tooltip/positioner.tsx","content":"$57","type":"registry:component","target":"@components/motion/tooltip/positioner.tsx"},{"path":"components/motion/tooltip/use-position.ts","content":"$58","type":"registry:component","target":"@components/motion/tooltip/use-position.ts"},{"path":"components/motion/tooltip-surface.tsx","content":"$59","type":"registry:component","target":"@components/motion/tooltip-surface.tsx"},{"path":"lib/hooks/use-dismiss.ts","content":"$5a","type":"registry:hook","target":"@lib/hooks/use-dismiss.ts"},{"path":"lib/hooks/use-hover-gesture.ts","content":"$5b","type":"registry:hook","target":"@lib/hooks/use-hover-gesture.ts"},{"path":"lib/hooks/use-tap-gesture.ts","content":"$5c","type":"registry:hook","target":"@lib/hooks/use-tap-gesture.ts"},{"path":"lib/touch.ts","content":"$5d","type":"registry:lib","target":"@lib/touch.ts"}],"className":"h-[70svh] min-h-80"}]]}]