{label}

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:T47a,"use client"; // beui.dev/charts/bump-chart import { cn } from "@/lib/utils"; import { BumpChartContext, useBumpChartModel, type BumpChartProps } from "./bump-chart/context"; import { BumpChartLegend } from "./bump-chart/legend"; import { BumpChartPlot } from "./bump-chart/plot"; /** Compose the plot and legend, or supply children for your own arrangement. */ export function BumpChart({ children, className, ...props }: BumpChartProps) { const model = useBumpChartModel(props); return (

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

); } export { BumpChartLegend } from "./bump-chart/legend"; export { BumpChartPlot } from "./bump-chart/plot"; export { useBumpChart } from "./bump-chart/context"; export type { BumpChartProps } from "./bump-chart/context"; export type BumpChartSeries = import("./bump-chart/model").BumpSeries; 51:T8a5,"use client"; import { createContext, useContext, useState, type ReactNode } from "react"; import { useReducedMotion } from "motion/react"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { buildBumpChart, type BumpSeries } from "./model"; export interface BumpChartProps { series: readonly BumpSeries[]; /** Unique period labels, in chronological order. */ periods: readonly string[]; /** Pinned series ID. Null clears the selection. */ active?: string | null; defaultActive?: string | null; onActiveChange?: (id: string | null) => void; label?: string; children?: ReactNode; className?: string; } export function useBumpChartModel({ series, periods, active, defaultActive = null, onActiveChange, label = "Rankings over time", }: BumpChartProps) { const model = buildBumpChart(series, periods.length); const [internal, setInternal] = useState(defaultActive); const [hovered, setHovered] = useState(null); const [focused, setFocused] = useState(null); const valid = (id: string | null) => id != null && model.rows.some((row) => row.id === id); // Clear removed identities in this render so reappearing data cannot revive them. if (internal !== null && !valid(internal)) setInternal(null); if (hovered !== null && !valid(hovered)) setHovered(null); if (focused !== null && !valid(focused)) setFocused(null); const selected = active === undefined ? internal : active; const pinned = valid(selected) ? selected : null; const highlighted = valid(hovered) ? hovered : valid(focused) ? focused : pinned; const select = (id: string | null) => { if (active === undefined) setInternal(id); onActiveChange?.(id); }; return { ...model, periods, label, pinned, highlighted, select, setHovered, setFocused, reduce: useReducedMotion(), canHover: useHoverCapable(), }; } export const BumpChartContext = createContext | null>(null); export function useBumpChart() { const context = useContext(BumpChartContext); if (!context) throw new Error("Bump chart parts must be rendered inside BumpChart."); return context; } 52:T9f3,"use client"; import { cn } from "@/lib/utils"; import { useBumpChart } from "./context"; export function BumpChartLegend({ className }: { className?: string }) { const { rows, pinned, highlighted, select, setHovered, setFocused, canHover } = useBumpChart(); return (

{rows.map((row) => { const first = row.ranks[0]; const last = row.ranks.at(-1); const gain = first != null && last != null ? first - last : null; return ( ); })}

); } 53:T972,export interface BumpSeries { id: string; name: string; /** One rank per period, starting at 1. Null leaves a gap in the path. */ ranks: readonly (number | null)[]; color?: string; } export const BUMP_COLORS = ["#8b5cf6", "#0d9488", "#f59e0b", "#3b82f6", "#f43f5e", "#a3a33a"]; export const PLOT = { width: 560, left: 32, right: 100, top: 28, bottom: 36, rowHeight: 44 }; export function buildBumpChart(series: readonly BumpSeries[], periodCount: number) { const seen = new Set(); const rows = series .filter((row) => { if (seen.has(row.id)) return false; seen.add(row.id); return true; }) .map((row, index) => ({ ...row, color: row.color ?? BUMP_COLORS[index % BUMP_COLORS.length], ranks: Array.from({ length: periodCount }, (_, i) => { const rank = row.ranks[i]; return rank != null && Number.isSafeInteger(rank) && rank > 0 ? rank : null; }), })); const ranks = [ ...new Set(rows.flatMap((row) => row.ranks.filter((rank): rank is number => rank != null))), ].sort((a, b) => a - b); const maxRank = ranks.at(-1) ?? 1; // Preserve numeric rank distances, including skipped ranks, without unbounded chart height. const plotHeight = Math.max(1, Math.min(maxRank - 1, 8)) * PLOT.rowHeight; const height = PLOT.top + plotHeight + PLOT.bottom; const x = (index: number) => periodCount <= 1 ? (PLOT.left + PLOT.width - PLOT.right) / 2 : PLOT.left + (index / (periodCount - 1)) * (PLOT.width - PLOT.left - PLOT.right); const y = (rank: number) => maxRank === 1 ? PLOT.top + plotHeight / 2 : PLOT.top + ((rank - 1) / (maxRank - 1)) * plotHeight; return { rows, ranks, maxRank, height, x, y }; } /** Missing periods break the path rather than inventing continuity. */ export function bumpPath( ranks: readonly (number | null)[], x: (i: number) => number, y: (rank: number) => number, ) { let path = ""; let previous: { x: number; y: number } | null = null; ranks.forEach((rank, index) => { if (rank == null) { previous = null; return; } const point = { x: x(index), y: y(rank) }; if (previous) { const middle = (previous.x + point.x) / 2; path += ` C ${middle} ${previous.y}, ${middle} ${point.y}, ${point.x} ${point.y}`; } else path += ` M ${point.x} ${point.y}`; previous = point; }); return path.trim(); } 54:Tf8f,"use client"; import { cn } from "@/lib/utils"; import { useBumpChart } from "./context"; import { PLOT } from "./model"; import { BumpChartPoint } from "./point"; import { BumpChartSeriesPath } from "./series"; import { pointKey, useBumpGeometry } from "./use-geometry"; export function BumpChartPlot({ className }: { className?: string }) { const { rows, ranks, height, x, y, periods, label, reduce } = useBumpChart(); const positions = useBumpGeometry( rows.flatMap((row) => row.ranks.flatMap((rank, index) => rank == null ? [] : [{ key: pointKey(row.id, periods[index]), x: x(index), y: y(rank) }], ), ), !!reduce, ); if (!periods.length || !ranks.length) return (

No rankings yet

); // Keep labels and rank dots readable inside narrow preview containers. const width = Math.max(PLOT.width, periods.length * 64); return (

{rows.map((row, seriesIndex) => row.ranks.map((rank, point) => rank == null ? null : ( ), ), )}

{periods.map((period) => ( ))} {rows.map((row) => ( {row.ranks.map((rank, index) => ( ))} ))}

{label} — exact ranks
Series	{period}
{row.name}	{rank ?? "No data"}

); } 55:T130a,"use client"; import { motion, useTransform } from "motion/react"; import type { ReactNode } from "react"; import { Tooltip } from "@/components/motion/tooltip"; import { EASE_OUT, SPRING_PRESS } from "@/lib/ease"; import { useBumpChart } from "./context"; import { PLOT } from "./model"; import type { BumpPosition } from "./use-geometry"; export function BumpChartPoint({ seriesId, period, seriesIndex, position, }: { seriesId: string; period: string; seriesIndex: number; position: BumpPosition | undefined; }) { const { rows, periods, highlighted, pinned, select, setHovered, setFocused, canHover, reduce } = useBumpChart(); const row = rows.find((item) => item.id === seriesId); const index = periods.indexOf(period); const rank = row?.ranks[index]; if (!row || rank == null || !position) return null; const previous = row.ranks[index - 1]; const change = previous == null ? null : previous - rank; const active = highlighted === row.id; const dimmed = highlighted !== null && !active; const changeLabel = change == null ? "No previous rank" : change === 0 ? "No change" : `${change > 0 ? "Up" : "Down"} ${Math.abs(change)} ${Math.abs(change) === 1 ? "place" : "places"}`; return (

{ if (canHover) setHovered(row.id); }} onPointerLeave={() => setHovered(null)} > {row.name} {period} #{rank} {changeLabel} {previous != null && ( Previously #{previous} in {periods[index - 1]} )} } > setFocused(row.id)} onBlur={() => setFocused(null)} onClick={() => select(pinned === row.id ? null : row.id)} onKeyDown={(event) => { if (event.key === "Escape") { select(null); setFocused(null); setHovered(null); } }} initial={reduce ? false : { transform: "scale(0.85)", opacity: 0 }} animate={{ transform: "scale(1)", opacity: dimmed ? 0.22 : 1 }} transition={{ transform: SPRING_PRESS, opacity: { duration: 0.18, ease: EASE_OUT } }} whileHover={canHover && !reduce ? { transform: "scale(1.12)" } : undefined} className="relative flex size-7 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring" style={{ color: row.color }} >

); } function MovingPoint({ position, children }: { position: BumpPosition; children: ReactNode }) { const { height } = useBumpChart(); const transform = useTransform( [position.x, position.y], ([x, y]: number[]) => `translate(${(x / PLOT.width) * 100}%, ${(y / height) * 100}%)`, ); return ( {children} ); } 56:Tc6c,"use client"; import { useId, useRef } from "react"; import { motion, useTransform, useMotionValueEvent } from "motion/react"; import { EASE_OUT } from "@/lib/ease"; import { useBumpChart } from "./context"; import { bumpPath, PLOT } from "./model"; import type { BumpPosition } from "./use-geometry"; type Row = ReturnType["rows"][number]; export function BumpChartSeriesPath({ row, positions, index, }: { row: Row; positions: (BumpPosition | null)[]; index: number; }) { const { height, highlighted, setHovered, canHover, reduce } = useBumpChart(); const clip = useId(); const values = positions.flatMap((point) => (point ? [point.x, point.y] : [])); const path = useTransform(values, (coordinates: number[]) => { let cursor = 0; const points = positions.map((point) => point ? { x: coordinates[cursor++], y: coordinates[cursor++] } : null, ); return bumpPath( points.map((point) => point?.y ?? null), (i) => points[i]?.x ?? 0, (value) => value, ); }); const last = positions.at(-1); const labelTransform = useTransform( values, () => `translate(${last?.x.get() ?? 0} ${last?.y.get() ?? 0})`, ); const labelRef = useRef(null); useMotionValueEvent(labelTransform, "change", (transform) => { labelRef.current?.setAttribute("transform", transform); }); const dimmed = highlighted !== null && highlighted !== row.id; return ( { if (canHover) setHovered(row.id); }} onPointerLeave={() => setHovered(null)} > {/* SVG geometry must reshape with the animated points; transforming a whole path cannot express new ranks. */} {last && ( {row.name.length > 12 ? `${row.name.slice(0, 11)}…` : row.name} {row.name} )} ); } 57:T728,"use client"; import { animate, motionValue, type MotionValue } from "motion/react"; import { useLayoutEffect, useState } from "react"; import { SPRING_LAYOUT } from "@/lib/ease"; export type BumpPosition = { x: MotionValue; y: MotionValue }; export type BumpTarget = { key: string; x: number; y: number }; export const pointKey = (series: string, period: string) => JSON.stringify([series, period]); /** The curves, dots, and end labels all read these exact same animated coordinates. */ export function useBumpGeometry(targets: BumpTarget[], reduce: boolean) { const shape = JSON.stringify(targets.map((target) => target.key)); const create = (previous?: Map) => new Map( targets.map((target) => [ target.key, previous?.get(target.key) ?? { x: motionValue(target.x), y: motionValue(target.y) }, ]), ); const [stored, setStored] = useState(() => ({ shape, positions: create() })); let positions = stored.positions; if (stored.shape !== shape) { positions = create(stored.positions); setStored({ shape, positions }); } // Hover/focus renders do not restart a running transition. Only new geometry does. const snapshot = JSON.stringify(targets); useLayoutEffect(() => { const next: BumpTarget[] = JSON.parse(snapshot); const controls: ReturnType[] = []; for (const target of next) { const position = positions.get(target.key); if (!position) continue; for (const axis of ["x", "y"] as const) { if (reduce) position[axis].jump(target[axis]); else controls.push(animate(position[axis], target[axis], SPRING_LAYOUT)); } } return () => { for (const control of controls) control.stop(); }; }, [snapshot, reduce, positions]); return positions; } 58: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} ); } 59: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; 5a: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)} ); } 5b: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 }; } 5c: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 ( ); } 5d: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]); } 5e: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"; }, }), [], ); } 5f: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; }, }), [], ); } 60: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/bump-chart.tsx","content":"$50","type":"registry:component","target":"@components/charts/bump-chart.tsx"},{"path":"components/charts/bump-chart/context.tsx","content":"$51","type":"registry:component","target":"@components/charts/bump-chart/context.tsx"},{"path":"components/charts/bump-chart/legend.tsx","content":"$52","type":"registry:component","target":"@components/charts/bump-chart/legend.tsx"},{"path":"components/charts/bump-chart/model.ts","content":"$53","type":"registry:component","target":"@components/charts/bump-chart/model.ts"},{"path":"components/charts/bump-chart/plot.tsx","content":"$54","type":"registry:component","target":"@components/charts/bump-chart/plot.tsx"},{"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":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"},{"path":"components/charts/bump-chart/point.tsx","content":"$55","type":"registry:component","target":"@components/charts/bump-chart/point.tsx"},{"path":"components/charts/bump-chart/series.tsx","content":"$56","type":"registry:component","target":"@components/charts/bump-chart/series.tsx"},{"path":"components/charts/bump-chart/use-geometry.ts","content":"$57","type":"registry:component","target":"@components/charts/bump-chart/use-geometry.ts"},{"path":"components/motion/tooltip.tsx","content":"$58","type":"registry:component","target":"@components/motion/tooltip.tsx"},{"path":"lib/ease.ts","content":"$59","type":"registry:lib","target":"@lib/ease.ts"},{"path":"components/motion/tooltip/positioner.tsx","content":"$5a","type":"registry:component","target":"@components/motion/tooltip/positioner.tsx"},{"path":"components/motion/tooltip/use-position.ts","content":"$5b","type":"registry:component","target":"@components/motion/tooltip/use-position.ts"},{"path":"components/motion/tooltip-surface.tsx","content":"$5c","type":"registry:component","target":"@components/motion/tooltip-surface.tsx"},{"path":"lib/hooks/use-dismiss.ts","content":"$5d","type":"registry:hook","target":"@lib/hooks/use-dismiss.ts"},{"path":"lib/hooks/use-hover-gesture.ts","content":"$5e","type":"registry:hook","target":"@lib/hooks/use-hover-gesture.ts"},{"path":"lib/hooks/use-tap-gesture.ts","content":"$5f","type":"registry:hook","target":"@lib/hooks/use-tap-gesture.ts"},{"path":"lib/touch.ts","content":"$60","type":"registry:lib","target":"@lib/touch.ts"}],"className":"h-[70svh] min-h-80"}]]}]