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:T1a9a,"use client"; import { useEffect, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface TargetCursorProps { children: ReactNode; /** Elements matching this selector get wrapped by the brackets. */ targetSelector?: string; color?: string; /** Degrees per second the idle reticle spins. */ spinSpeed?: number; /** Idle reticle size in px. */ size?: number; /** Px between a target and the brackets. */ padding?: number; /** Hide the system cursor inside the container (mouse only). */ hideCursor?: boolean; className?: string; } const CSS = `@media (pointer: fine){.tc-hide,.tc-hide *{cursor:none!important}}`; // Idle offsets for the four brackets: top-left, top-right, bottom-right, bottom-left. const DIRS = [ [-1, -1], [1, -1], [1, 1], [-1, 1], ]; export function TargetCursor({ children, targetSelector = "[data-cursor-target]", color = "#ffffff", spinSpeed = 120, size = 34, padding = 8, hideCursor = true, className, }: TargetCursorProps) { const root = useRef(null); const layer = useRef(null); useEffect(() => { const el = root.current!; const [dot, ...brackets] = Array.from(layer.current!.children) as HTMLElement[]; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const mouse = { x: 0, y: 0, inside: false, down: false }; const corners = DIRS.map(() => ({ x: 0, y: 0 })); let target: Element | null = null; let angle = 0; let raf = 0; let last = performance.now(); let fresh = true; const frame = (now: number) => { const dt = Math.min((now - last) / 1000, 0.05); last = now; const box = el.getBoundingClientRect(); let goals: { x: number; y: number }[]; if (target) { // Settle on the nearest quarter turn, then hand each bracket the rect corner its rotation now faces. const snap = Math.round(angle / 90) * 90; angle += (snap - angle) * (reduced ? 1 : 0.2); const q = (((snap / 90) % 4) + 4) % 4; const r = target.getBoundingClientRect(); const pad = padding - (mouse.down ? 3 : 0); const rect = [ { x: r.left - pad, y: r.top - pad }, { x: r.right + pad, y: r.top - pad }, { x: r.right + pad, y: r.bottom + pad }, { x: r.left - pad, y: r.bottom + pad }, ]; goals = DIRS.map((_, i) => ({ x: rect[(i + q) % 4].x - box.left, y: rect[(i + q) % 4].y - box.top })); } else { if (!reduced) angle += spinSpeed * dt; const half = (size / 2) * (mouse.down ? 0.75 : 1); const a = (angle * Math.PI) / 180; const cos = Math.cos(a); const sin = Math.sin(a); goals = DIRS.map(([dx, dy]) => ({ x: mouse.x + (dx * cos - dy * sin) * half, y: mouse.y + (dx * sin + dy * cos) * half, })); } const ease = fresh || reduced ? 1 : target ? 0.22 : 0.35; fresh = false; corners.forEach((c, i) => { c.x += (goals[i].x - c.x) * ease; c.y += (goals[i].y - c.y) * ease; brackets[i].style.transform = `translate(${c.x}px,${c.y}px) rotate(${angle + i * 90}deg)`; }); dot.style.transform = `translate(${mouse.x}px,${mouse.y}px) translate(-50%,-50%) scale(${mouse.down ? 0.6 : 1})`; raf = mouse.inside || target ? requestAnimationFrame(frame) : 0; }; const start = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const show = (on: boolean) => { layer.current!.style.opacity = on ? "1" : "0"; }; const find = (node: EventTarget | null) => { const t = node instanceof Element ? node.closest(targetSelector) : null; return t && el.contains(t) ? t : null; }; const onMove = (e: PointerEvent) => { if (e.pointerType !== "mouse") return; const box = el.getBoundingClientRect(); mouse.x = e.clientX - box.left; mouse.y = e.clientY - box.top; if (!mouse.inside) fresh = true; mouse.inside = true; target = find(e.target); show(true); start(); }; const onLeave = () => { mouse.inside = false; target = null; show(false); }; const onDown = () => (mouse.down = true); const onUp = () => (mouse.down = false); // Keyboard users get the brackets on whatever target holds focus. const onFocus = (e: FocusEvent) => { const t = find(e.target); if (!t || mouse.inside) return; target = t; fresh = !layer.current!.style.opacity || layer.current!.style.opacity === "0"; dot.style.opacity = "0"; show(true); start(); }; const onBlur = () => { if (mouse.inside) return; target = null; show(false); }; el.addEventListener("pointermove", onMove, { passive: true }); el.addEventListener("pointerleave", onLeave); el.addEventListener("pointerdown", onDown); el.addEventListener("pointerup", onUp); el.addEventListener("focusin", onFocus); el.addEventListener("focusout", onBlur); const restoreDot = () => (dot.style.opacity = ""); el.addEventListener("pointerenter", restoreDot); return () => { cancelAnimationFrame(raf); el.removeEventListener("pointermove", onMove); el.removeEventListener("pointerleave", onLeave); el.removeEventListener("pointerdown", onDown); el.removeEventListener("pointerup", onUp); el.removeEventListener("focusin", onFocus); el.removeEventListener("focusout", onBlur); el.removeEventListener("pointerenter", restoreDot); }; }, [targetSelector, spinSpeed, size, padding]); const arm = Math.max(8, size * 0.32); return (

{hideCursor && ( )} {children}

{DIRS.map((_, i) => ( ))}

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