Context Cursor

1"use client";
2 
3import * as React from "react";
4import {
5  motion,
6  useMotionValue,
7  useReducedMotion,
8  useSpring,
9  type MotionValue,
10  type SpringOptions,
11} from "motion/react";
12 
13import { cn } from "@/lib/utils";
14 
15export type ContextCursorVariant = "default" | "open" | "drag" | "preview";
16export type ContextCursorFollow = "instant" | "spring";
17 
18export type ContextCursorState = {
19  label: React.ReactNode;
20  icon?: React.ReactNode;
21  variant?: ContextCursorVariant;
22};
23 
24export type ContextCursorAnimation = {
25  edgeFade?: boolean;
26  edgeFadeDistance?: number;
27  edgeFadeEasing?: (progress: number) => number;
28  hideDelay?: number;
29  opacity?: {
30    hidden?: number;
31    visible?: number;
32  };
33  scale?: {
34    hidden?: number;
35    visible?: number;
36  };
37  opacitySpring?: SpringOptions;
38  scaleSpring?: SpringOptions;
39};
40 
41export type ContextCursorTargetAnimation = Omit<
42  ContextCursorAnimation,
43  "opacitySpring" | "scaleSpring"
44>;
45 
46type ContextCursorContextValue = {
47  showCursor: (
48    cursor: ContextCursorState,
49    targetId: string,
50    point?: CursorPoint,
51    targetBounds?: DOMRectReadOnly,
52    targetAnimation?: ContextCursorTargetAnimation,
53  ) => void;
54  hideCursor: (targetId?: string, point?: CursorPoint) => void;
55  isDisabled: boolean;
56};
57 
58type CursorPoint = {
59  x: number;
60  y: number;
61};
62 
63type ResolvedContextCursorAnimation = {
64  edgeFade: boolean;
65  edgeFadeDistance: number;
66  edgeFadeEasing: (progress: number) => number;
67  hideDelay: number;
68  hiddenOpacity: number;
69  visibleOpacity: number;
70  hiddenScale: number;
71  visibleScale: number;
72};
73 
74const ContextCursorContext =
75  React.createContext<ContextCursorContextValue | null>(null);
76 
77const defaultSpring: SpringOptions = {
78  mass: 0.1,
79  stiffness: 320,
80  damping: 26,
81};
82 
83const opacitySpring: SpringOptions = {
84  mass: 0.1,
85  stiffness: 480,
86  damping: 24,
87};
88 
89const scaleSpring: SpringOptions = {
90  mass: 0.12,
91  stiffness: 420,
92  damping: 22,
93};
94 
95const nativeCursorStyleId = "context-cursor-native-hidden";
96const defaultEdgeFadeDistance = 40;
97const defaultCursorHideDelay = 140;
98const defaultHiddenOpacity = 0;
99const defaultVisibleOpacity = 1;
100const defaultHiddenScale = 0.4;
101const defaultVisibleScale = 1;
102// Once the edge-fade has shrunk the badge below this much progress it is
103// effectively gone, so the native cursor is handed back at that exact point.
104const nativeHandoffProgress = 0.08;
105 
106const variantClassNames: Record<ContextCursorVariant, string> = {
107// … truncated