51: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"] 52: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"] 53:T602c,"use client"; import * as React from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, type MotionValue, type SpringOptions, } from "motion/react"; import { cn } from "@/lib/utils"; export type ContextCursorVariant = "default" | "open" | "drag" | "preview"; export type ContextCursorFollow = "instant" | "spring"; export type ContextCursorState = { label: React.ReactNode; icon?: React.ReactNode; variant?: ContextCursorVariant; }; export type ContextCursorAnimation = { edgeFade?: boolean; edgeFadeDistance?: number; edgeFadeEasing?: (progress: number) => number; hideDelay?: number; opacity?: { hidden?: number; visible?: number; }; scale?: { hidden?: number; visible?: number; }; opacitySpring?: SpringOptions; scaleSpring?: SpringOptions; }; export type ContextCursorTargetAnimation = Omit< ContextCursorAnimation, "opacitySpring" | "scaleSpring" >; type ContextCursorContextValue = { showCursor: ( cursor: ContextCursorState, targetId: string, point?: CursorPoint, targetElement?: Element, targetAnimation?: ContextCursorTargetAnimation, ) => void; hideCursor: (targetId?: string, point?: CursorPoint) => void; isDisabled: boolean; }; type CursorPoint = { x: number; y: number; }; type ResolvedContextCursorAnimation = { edgeFade: boolean; edgeFadeDistance: number; edgeFadeEasing: (progress: number) => number; hideDelay: number; hiddenOpacity: number; visibleOpacity: number; hiddenScale: number; visibleScale: number; }; const ContextCursorContext = React.createContext(null); const defaultSpring: SpringOptions = { mass: 0.1, stiffness: 320, damping: 26, }; const opacitySpring: SpringOptions = { mass: 0.1, stiffness: 480, damping: 24, }; const scaleSpring: SpringOptions = { mass: 0.12, stiffness: 420, damping: 22, }; const nativeCursorStyleId = "context-cursor-native-hidden"; const defaultEdgeFadeDistance = 40; const defaultCursorHideDelay = 140; const defaultHiddenOpacity = 0; const defaultVisibleOpacity = 1; const defaultHiddenScale = 0.4; const defaultVisibleScale = 1; // Once the edge-fade has shrunk the badge below this much progress it is // effectively gone, so the native cursor is handed back at that exact point. const nativeHandoffProgress = 0.08; const variantClassNames: Record = { default: "border-border bg-background text-foreground", open: "border-transparent bg-primary text-primary-foreground", drag: "border-border bg-muted text-foreground", preview: "border-border bg-background text-foreground", }; export type ContextCursorProps = Omit< React.ComponentProps<"div">, "onPointerEnter" | "onPointerLeave" | "onPointerMove" > & { follow?: ContextCursorFollow; spring?: SpringOptions; animation?: ContextCursorAnimation; edgeFadeDistance?: number; cursorClassName?: string; disabled?: boolean; }; export function ContextCursor({ children, className, cursorClassName, follow = "instant", spring = defaultSpring, animation, edgeFadeDistance = defaultEdgeFadeDistance, disabled, ref, ...props }: ContextCursorProps) { const initialHiddenOpacity = animation?.opacity?.hidden ?? defaultHiddenOpacity; const initialHiddenScale = animation?.scale?.hidden ?? defaultHiddenScale; const shouldReduceMotion = useReducedMotion(); const supportsFinePointer = useFinePointer(); const [cursor, setCursor] = React.useState(null); const wrapperRef = React.useRef(null); const bounds = React.useRef(null); const activeTargetBounds = React.useRef(null); const activeTargetElement = React.useRef(null); // Set when a scroll or resize moves layout under a still pointer, so the // cached wrapper/target rects above are re-read on the next frame. const measurementsStale = React.useRef(false); const lastPointer = React.useRef(null); const activeTargetAnimation = React.useRef(null); const hideTimer = React.useRef(null); const pointerFrame = React.useRef(null); const latestPointerFrame = React.useRef<{ point: CursorPoint; wrapperBounds: DOMRectReadOnly; targetBounds: DOMRectReadOnly | null; } | null>(null); const hasNativeCursorLock = React.useRef(false); const activeTargetId = React.useRef(null); const isDisabled = Boolean( disabled || shouldReduceMotion || !supportsFinePointer, ); const rawX = useMotionValue(0); const rawY = useMotionValue(0); const opacity = useSpring( initialHiddenOpacity, animation?.opacitySpring ?? opacitySpring, ); const scale = useSpring( initialHiddenScale, animation?.scaleSpring ?? scaleSpring, ); const hideNativeCursor = React.useCallback(() => { if (hasNativeCursorLock.current) return; hasNativeCursorLock.current = true; acquireNativeCursorLock(wrapperRef.current); }, []); const showNativeCursor = React.useCallback(() => { if (!hasNativeCursorLock.current) return; hasNativeCursorLock.current = false; releaseNativeCursorLock(wrapperRef.current); }, []); const getAnimation = React.useCallback( ( targetAnimation: ContextCursorTargetAnimation | null = activeTargetAnimation.current, ): ResolvedContextCursorAnimation => ({ edgeFade: targetAnimation?.edgeFade ?? animation?.edgeFade ?? true, edgeFadeDistance: targetAnimation?.edgeFadeDistance ?? animation?.edgeFadeDistance ?? edgeFadeDistance, edgeFadeEasing: targetAnimation?.edgeFadeEasing ?? animation?.edgeFadeEasing ?? smoothstep, hideDelay: targetAnimation?.hideDelay ?? animation?.hideDelay ?? defaultCursorHideDelay, hiddenOpacity: targetAnimation?.opacity?.hidden ?? animation?.opacity?.hidden ?? defaultHiddenOpacity, visibleOpacity: targetAnimation?.opacity?.visible ?? animation?.opacity?.visible ?? defaultVisibleOpacity, hiddenScale: targetAnimation?.scale?.hidden ?? animation?.scale?.hidden ?? defaultHiddenScale, visibleScale: targetAnimation?.scale?.visible ?? animation?.scale?.visible ?? defaultVisibleScale, }), [animation, edgeFadeDistance], ); // Drives the badge by how close the pointer is to the target edge: it shrinks // and fades as the edge nears, and the native cursor is handed back at the // exact moment the badge vanishes — so the two never overlap and there is no // gap where neither cursor is visible. // // Scale and opacity are written with `jump` (not `set`), so the badge size is // an exact function of the pointer's distance to the border with zero spring // lag. A laggy spring can't keep up with a fast pointer, which is what made // the badge finish shrinking *outside* the target; jumping ties the shrink to // position, so it always completes inside the box no matter how fast the move. const updateCursorPresence = React.useCallback( (point: CursorPoint, targetBounds: DOMRectReadOnly) => { const currentAnimation = getAnimation(); const distanceToEdge = Math.min( point.x - targetBounds.left, targetBounds.right - point.x, point.y - targetBounds.top, targetBounds.bottom - point.y, ); const fadeDistance = Math.max(1, currentAnimation.edgeFadeDistance); const edgeProgress = clamp(distanceToEdge / fadeDistance, 0, 1); const easedProgress = currentAnimation.edgeFade ? clamp(currentAnimation.edgeFadeEasing(edgeProgress), 0, 1) : 1; opacity.jump( interpolate( currentAnimation.hiddenOpacity, currentAnimation.visibleOpacity, easedProgress, ), ); scale.jump( interpolate( currentAnimation.hiddenScale, currentAnimation.visibleScale, easedProgress, ), ); if (easedProgress <= nativeHandoffProgress) { showNativeCursor(); } else { hideNativeCursor(); } }, [getAnimation, hideNativeCursor, opacity, scale, showNativeCursor], ); const getWrapperBounds = React.useCallback(() => { const currentBounds = wrapperRef.current?.getBoundingClientRect() ?? bounds.current ?? null; if (currentBounds) { bounds.current = currentBounds; } return currentBounds; }, []); const updatePointerPosition = React.useCallback( ( point: CursorPoint, wrapperBounds: DOMRectReadOnly, targetBounds: DOMRectReadOnly | null = activeTargetBounds.current, ) => { rawX.set(snapToDevicePixel(point.x - wrapperBounds.left)); rawY.set(snapToDevicePixel(point.y - wrapperBounds.top)); if (targetBounds) { updateCursorPresence(point, targetBounds); } }, [rawX, rawY, updateCursorPresence], ); const schedulePointerPosition = React.useCallback( ( point: CursorPoint, wrapperBounds: DOMRectReadOnly, targetBounds: DOMRectReadOnly | null = activeTargetBounds.current, ) => { latestPointerFrame.current = { point, wrapperBounds, targetBounds, }; if (pointerFrame.current !== null) return; pointerFrame.current = window.requestAnimationFrame(() => { pointerFrame.current = null; const nextFrame = latestPointerFrame.current; latestPointerFrame.current = null; if (!nextFrame) return; if (measurementsStale.current) { measurementsStale.current = false; const freshWrapperBounds = wrapperRef.current?.getBoundingClientRect() ?? nextFrame.wrapperBounds; const targetElement = activeTargetElement.current; const freshTargetBounds = targetElement?.getBoundingClientRect() ?? null; bounds.current = freshWrapperBounds; activeTargetBounds.current = freshTargetBounds; updatePointerPosition( nextFrame.point, freshWrapperBounds, freshTargetBounds, ); return; } updatePointerPosition( nextFrame.point, nextFrame.wrapperBounds, nextFrame.targetBounds, ); }); }, [updatePointerPosition], ); const showCursor = React.useCallback( ( nextCursor: ContextCursorState, targetId: string, point?: CursorPoint, targetElement?: Element, targetAnimation?: ContextCursorTargetAnimation, ) => { if (isDisabled) return; const targetBounds = targetElement?.getBoundingClientRect(); if (hideTimer.current) { window.clearTimeout(hideTimer.current); hideTimer.current = null; } activeTargetId.current = targetId; activeTargetBounds.current = targetBounds ?? null; activeTargetElement.current = targetElement ?? null; if (point) lastPointer.current = point; activeTargetAnimation.current = targetAnimation ?? null; setCursor(nextCursor); const currentWrapperBounds = getWrapperBounds(); if (point && currentWrapperBounds) { updatePointerPosition(point, currentWrapperBounds, targetBounds ?? null); } if (!point || !targetBounds) { hideNativeCursor(); const currentAnimation = getAnimation(targetAnimation ?? null); opacity.set(currentAnimation.visibleOpacity); scale.set(currentAnimation.visibleScale); } }, [ hideNativeCursor, getWrapperBounds, isDisabled, opacity, scale, getAnimation, updatePointerPosition, ], ); const hideCursor = React.useCallback( (targetId?: string, point?: CursorPoint) => { const targetIdAtLeave = targetId ?? activeTargetId.current; if (targetIdAtLeave && activeTargetId.current !== targetIdAtLeave) { return; } const currentAnimation = getAnimation(activeTargetAnimation.current); activeTargetBounds.current = null; activeTargetElement.current = null; activeTargetAnimation.current = null; if (hideTimer.current) { window.clearTimeout(hideTimer.current); hideTimer.current = null; } const currentBounds = bounds.current; if (point && currentBounds) { updatePointerPosition(point, currentBounds, null); } // Leaving the target snaps the badge away (no spring tail) and hands the // native cursor back on the same frame — so crossing the border reads as // an instant switch back to the normal cursor, never a badge shrinking // outside the box on a fast exit that skipped the edge-fade band. opacity.jump(currentAnimation.hiddenOpacity); scale.jump(currentAnimation.hiddenScale); showNativeCursor(); // The badge is already invisible; this only clears the React state once // we're sure the pointer hasn't re-entered another target in the meantime. hideTimer.current = window.setTimeout(() => { if (targetIdAtLeave && activeTargetId.current !== targetIdAtLeave) { return; } activeTargetId.current = null; setCursor(null); hideTimer.current = null; }, currentAnimation.hideDelay); }, [getAnimation, opacity, scale, showNativeCursor, updatePointerPosition], ); React.useEffect(() => { return () => { if (hideTimer.current) { window.clearTimeout(hideTimer.current); } if (pointerFrame.current !== null) { window.cancelAnimationFrame(pointerFrame.current); } showNativeCursor(); }; }, [showNativeCursor]); React.useEffect(() => { if (!isDisabled) return; if (hideTimer.current) { window.clearTimeout(hideTimer.current); hideTimer.current = null; } if (pointerFrame.current !== null) { window.cancelAnimationFrame(pointerFrame.current); pointerFrame.current = null; } latestPointerFrame.current = null; activeTargetId.current = null; activeTargetBounds.current = null; activeTargetElement.current = null; activeTargetAnimation.current = null; measurementsStale.current = false; lastPointer.current = null; bounds.current = null; const currentAnimation = getAnimation(null); opacity.set(currentAnimation.hiddenOpacity); scale.set(currentAnimation.hiddenScale); showNativeCursor(); hideTimer.current = window.setTimeout(() => { setCursor(null); hideTimer.current = null; }, 0); }, [getAnimation, isDisabled, opacity, scale, showNativeCursor]); const updateBounds = React.useCallback((element: HTMLDivElement) => { bounds.current = element.getBoundingClientRect(); }, []); const handlePointerEnter = React.useCallback( (event: React.PointerEvent) => { if (isDisabled || event.pointerType !== "mouse") return; updateBounds(event.currentTarget); }, [isDisabled, updateBounds], ); const handlePointerMove = React.useCallback( (event: React.PointerEvent) => { if (isDisabled || event.pointerType !== "mouse") return; const currentBounds = bounds.current ?? event.currentTarget.getBoundingClientRect(); const point = { x: event.clientX, y: event.clientY }; lastPointer.current = point; schedulePointerPosition(point, currentBounds); }, [isDisabled, schedulePointerPosition], ); const schedulePointerPositionRef = React.useRef(schedulePointerPosition); React.useEffect(() => { schedulePointerPositionRef.current = schedulePointerPosition; }); const hasCursor = cursor !== null; // Wrapper and target rects are cached on enter, so scrolling (or resizing) // without moving the pointer would leave them stale and the badge pinned to // the old spot. Only while a badge is live: mark the rects stale and replay // the last pointer position through the rAF, which re-measures once per // frame at most. React.useEffect(() => { if (isDisabled || !hasCursor) return; const invalidateMeasurements = () => { measurementsStale.current = true; const point = lastPointer.current; const wrapperBounds = bounds.current; if (point && wrapperBounds && activeTargetElement.current) { schedulePointerPositionRef.current(point, wrapperBounds); } }; const scrollOptions = { capture: true, passive: true } as const; window.addEventListener("scroll", invalidateMeasurements, scrollOptions); window.addEventListener("resize", invalidateMeasurements, { passive: true, }); return () => { window.removeEventListener( "scroll", invalidateMeasurements, scrollOptions, ); window.removeEventListener("resize", invalidateMeasurements); }; }, [hasCursor, isDisabled]); const handlePointerLeave = React.useCallback( (event: React.PointerEvent) => { if (event.pointerType !== "mouse") return; hideCursor(undefined, { x: event.clientX, y: event.clientY }); bounds.current = null; lastPointer.current = null; }, [hideCursor], ); const handlePointerCancel = React.useCallback(() => { bounds.current = null; hideCursor(); }, [hideCursor]); const contextValue = React.useMemo( () => ({ showCursor, hideCursor, isDisabled, }), [hideCursor, isDisabled, showCursor], ); // The wrapper node is needed internally (bounds measurement, native-cursor // lock) *and* by consumers, so the consumer's ref is merged in. const setWrapperRef = React.useCallback( (node: HTMLDivElement | null) => { wrapperRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }, [ref], ); const variant = cursor?.variant ?? "default"; return (

{children} {follow === "spring" ? ( ) : ( )}

); } type ContextCursorIndicatorProps = { cursor: ContextCursorState | null; cursorClassName?: string; opacity: MotionValue; scale: MotionValue; variant: ContextCursorVariant; x: MotionValue; y: MotionValue; }; function ContextCursorIndicator({ cursor, cursorClassName, opacity, scale, variant, x, y, }: ContextCursorIndicatorProps) { return ( ); } type SpringCursorIndicatorProps = Omit< ContextCursorIndicatorProps, "x" | "y" > & { rawX: MotionValue; rawY: MotionValue; spring: SpringOptions; }; function SpringCursorIndicator({ rawX, rawY, spring, ...props }: SpringCursorIndicatorProps) { const x = useSpring(rawX, spring); const y = useSpring(rawY, spring); return ; } function useFinePointer() { const [supportsFinePointer, setSupportsFinePointer] = React.useState(false); React.useEffect(() => { const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)"); const updateSupportsFinePointer = () => { setSupportsFinePointer(mediaQuery.matches); }; updateSupportsFinePointer(); mediaQuery.addEventListener("change", updateSupportsFinePointer); return () => { mediaQuery.removeEventListener("change", updateSupportsFinePointer); }; }, []); return supportsFinePointer; } function acquireNativeCursorLock(element: HTMLElement | null) { if (!element) return; ensureNativeCursorStyle(); element.dataset.contextCursorNativeHidden = "true"; } function releaseNativeCursorLock(element: HTMLElement | null) { if (!element) return; delete element.dataset.contextCursorNativeHidden; } function ensureNativeCursorStyle() { if (document.getElementById(nativeCursorStyleId)) return; const style = document.createElement("style"); style.id = nativeCursorStyleId; style.textContent = ` [data-context-cursor-native-hidden="true"], [data-context-cursor-native-hidden="true"] * { cursor: none !important; } `; document.head.appendChild(style); } function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function smoothstep(value: number) { return value * value * (3 - 2 * value); } function interpolate(from: number, to: number, progress: number) { return from + (to - from) * progress; } function snapToDevicePixel(value: number) { const ratio = window.devicePixelRatio || 1; return Math.round(value * ratio) / ratio; } export type ContextCursorTargetProps = React.ComponentProps<"div"> & { label: React.ReactNode; icon?: React.ReactNode; variant?: ContextCursorVariant; animation?: ContextCursorTargetAnimation; }; export function ContextCursorTarget({ children, className, label, icon, variant = "default", animation, onPointerEnter, onPointerLeave, ...props }: ContextCursorTargetProps) { const context = React.useContext(ContextCursorContext); const targetId = React.useId(); const hideCursorRef = React.useRef(context?.hideCursor); React.useEffect(() => { hideCursorRef.current = context?.hideCursor; }); // A target removed mid-hover never fires pointerleave, which would strand // the badge (with this target's label) following the pointer indefinitely. React.useEffect(() => { return () => hideCursorRef.current?.(targetId); }, [targetId]); return (

{ if (event.pointerType === "mouse") { context?.showCursor( { label, icon, variant }, targetId, { x: event.clientX, y: event.clientY, }, event.currentTarget, animation, ); } onPointerEnter?.(event); }} onPointerLeave={(event) => { context?.hideCursor(targetId, { x: event.clientX, y: event.clientY, }); onPointerLeave?.(event); }} {...props} > {children}

); } 50:["$","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@ericts","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/base/ui/context-cursor.tsx","content":"$53","type":"registry:ui","target":"@ui/context-cursor.tsx"}],"className":"h-[70svh] min-h-80"}]]}]