4e: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"] 4f: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"] 50:T1ce2,"use client"; // beui.dev/charts/funnel-chart import { createContext, useContext, useMemo, 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 { buildFunnel, funnelPath, type FunnelStage } from "./funnel-chart/model"; const defaultFormat = (value: number) => value.toLocaleString("en-US", { maximumFractionDigits: 2 }); const percentage = (value: number | null) => (value === null ? "—" : `${value.toFixed(1)}%`); const colors = ["#8b5cf6", "#7774ef", "#548ee4", "#2ca6bc", "#14b8a6"]; export interface FunnelChartProps { /** Ordered stages with finite, nonnegative counts; duplicate IDs are omitted. */ stages: readonly FunnelStage[]; direction?: "vertical" | "horizontal"; unit?: string; label?: string; formatValue?: (value: number) => string; className?: string; children?: ReactNode; } const Context = createContext< | (ReturnType & { direction: "vertical" | "horizontal"; unit: string; formatValue: (value: number) => string; }) | null >(null); export function useFunnelChart() { const context = useContext(Context); if (!context) throw new Error("Funnel chart parts must be inside FunnelChart"); return context; } export function FunnelChart({ stages, direction = "vertical", unit = "people", label = "Conversion funnel", formatValue = defaultFormat, className, children, }: FunnelChartProps) { const model = useMemo(() => buildFunnel(stages), [stages]); return (

{children === undefined ? ( <> ) : ( children )}

); } export function FunnelChartPlot({ className }: { className?: string }) { const { rows, direction, unit, formatValue } = useFunnelChart(); const reduced = useReducedMotion(); if (!rows.length) return (

No funnel data

); const horizontal = direction === "horizontal"; const proportions = rows.map((stage) => stage.proportion); return (

{stage.label} formatValue(stage.value)} suffix={` ${unit}`} duration={0.35} startOnView={false} className="font-mono" /> {index > 0 && ( <> {percentage(stage.stepConversion)} from previous stage {formatValue(Math.abs(stage.change ?? 0))}{" "} {(stage.change ?? 0) > 0 ? "gained" : "dropped"} )} {percentage(stage.conversion)} of starting total } >

{rows.map((stage, index) => ( ))}

); } export function FunnelChartSummary({ className }: { className?: string }) { const { rows, first, last, conversion, formatValue, unit } = useFunnelChart(); if (!rows.length) return null; return (

{formatValue(first)} → {formatValue(last)} {unit} Overall conversion {percentage(conversion)}

); } export type { FunnelStage }; 51:Ta06,export interface FunnelStage { /** Keep IDs stable when updating counts. */ id: string; label: string; value: number; color?: string; } /** Preserve stage order; omit invalid counts and repeated identities. */ export function buildFunnel(stages: readonly FunnelStage[]) { const seen = new Set(); const valid = stages.filter((stage) => { if (seen.has(stage.id) || !Number.isFinite(stage.value) || stage.value < 0) return false; seen.add(stage.id); return true; }); const first = valid[0]?.value ?? 0; const last = valid.at(-1)?.value ?? 0; const maximum = valid.reduce((max, stage) => Math.max(max, stage.value), 0); const rows = valid.map((stage, index) => { const previous = valid[index - 1]?.value; return { ...stage, proportion: maximum > 0 ? stage.value / maximum : 0, conversion: first > 0 ? (stage.value / first) * 100 : null, stepConversion: previous !== undefined && previous > 0 ? (stage.value / previous) * 100 : null, change: previous === undefined ? null : stage.value - previous, }; }); return { rows, first, last, conversion: first > 0 ? (last / first) * 100 : null }; } /** Each stage's center width encodes its value; shared boundaries join without gaps. */ export function funnelPath( proportions: readonly number[], index: number, direction: "vertical" | "horizontal", ) { const value = proportions[index]; const top = index === 0 ? value : (proportions[index - 1] + value) / 2; const bottom = index === proportions.length - 1 ? value : (value + proportions[index + 1]) / 2; const start = index / proportions.length; const end = (index + 1) / proportions.length; const middle = (start + end) / 2; const quarter = (end - start) / 4; const point = (cross: number, along: number) => direction === "vertical" ? `${cross * 1000},${along * 500}` : `${along * 1000},${cross * 500}`; const left = (width: number) => 0.5 - width * 0.46; const right = (width: number) => 0.5 + width * 0.46; return `M${point(left(top), start)} L${point(right(top), start)} C${point(right(top), start + quarter)} ${point(right(value), middle - quarter)} ${point(right(value), middle)} C${point(right(value), middle + quarter)} ${point(right(bottom), end - quarter)} ${point(right(bottom), end)} L${point(left(bottom), end)} C${point(left(bottom), end - quarter)} ${point(left(value), middle + quarter)} ${point(left(value), middle)} C${point(left(value), middle - quarter)} ${point(left(top), start + quarter)} ${point(left(top), start)} Z`; } 52: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} ))} ); } 53: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} ); } 54: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; 55: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)} ); } 56: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 }; } 57: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 ( ); } 58: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]); } 59: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"; }, }), [], ); } 5a: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; }, }), [], ); } 5b: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; 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@beui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/charts/funnel-chart.tsx","content":"$50","type":"registry:component","target":"@components/charts/funnel-chart.tsx"},{"path":"components/charts/funnel-chart/model.ts","content":"$51","type":"registry:component","target":"@components/charts/funnel-chart/model.ts"},{"path":"components/motion/number-ticker.tsx","content":"$52","type":"registry:component","target":"@components/motion/number-ticker.tsx"},{"path":"components/motion/tooltip.tsx","content":"$53","type":"registry:component","target":"@components/motion/tooltip.tsx"},{"path":"lib/ease.ts","content":"$54","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":"$55","type":"registry:component","target":"@components/motion/tooltip/positioner.tsx"},{"path":"components/motion/tooltip/use-position.ts","content":"$56","type":"registry:component","target":"@components/motion/tooltip/use-position.ts"},{"path":"components/motion/tooltip-surface.tsx","content":"$57","type":"registry:component","target":"@components/motion/tooltip-surface.tsx"},{"path":"lib/hooks/use-dismiss.ts","content":"$58","type":"registry:hook","target":"@lib/hooks/use-dismiss.ts"},{"path":"lib/hooks/use-hover-gesture.ts","content":"$59","type":"registry:hook","target":"@lib/hooks/use-hover-gesture.ts"},{"path":"lib/hooks/use-tap-gesture.ts","content":"$5a","type":"registry:hook","target":"@lib/hooks/use-tap-gesture.ts"},{"path":"lib/touch.ts","content":"$5b","type":"registry:lib","target":"@lib/touch.ts"}],"className":"h-[70svh] min-h-80"}]]}]