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:T1c6d,// Hairline UI · citation · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Globe } from "lucide-react"; /* ───────────────────────────────────────────────────────── * CITATION: an inline [1] that previews its source * * closed a small numbered marker in the sentence * open hover or focus: the card rises out of a light blur * with the site, title and snippet, and sinks back * when you leave * unavailable the source couldn't be fetched * * The marker is the link itself, so clicking opens the source. * The card is a tooltip describing it; it flips above near the * bottom of the screen and shifts to stay inside the viewport. * ───────────────────────────────────────────────────────── */ export interface CitationSource { title: string; url: string; snippet?: string; /** A favicon, e.g.

. */ icon?: React.ReactNode; } export interface CitationProps extends Omit, "children"> { index: number; source?: CitationSource; status?: "available" | "unavailable"; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const CARD_WIDTH = 288; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); function hostname(url: string) { try { return new URL(url).hostname.replace(/^www\./, ""); } catch { return url; } } export function Citation({ index, source, status = "available", className = "", ...props }: CitationProps) { const reduced = useReducedMotion(); const [open, setOpen] = React.useState(false); // The card stays mounted while it sinks away after closing. const [mounted, setMounted] = React.useState(false); if (open && !mounted) setMounted(true); const [place, setPlace] = React.useState<{ above: boolean; shift: number }>({ above: false, shift: 0 }); const triggerRef = React.useRef(null); const cardRef = React.useRef(null); const timer = React.useRef(undefined); const id = React.useId(); const unavailable = status === "unavailable" || !source; const show = (delay: number) => { window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setOpen(true), delay); }; const hide = (delay: number) => { window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setOpen(false), delay); }; React.useEffect(() => () => window.clearTimeout(timer.current), []); // Keep the card on screen: flip above near the bottom, shift left near the right edge. React.useLayoutEffect(() => { if (!open || !triggerRef.current || !cardRef.current) return; const t = triggerRef.current.getBoundingClientRect(); const h = cardRef.current.offsetHeight; const overflowRight = t.left + CARD_WIDTH - (window.innerWidth - 12); setPlace({ above: t.bottom + h + 12 > window.innerHeight && t.top > h + 12, shift: Math.max(0, overflowRight) }); }, [open]); // Rise in from the side it opens on; sink back the same way, then unmount. React.useLayoutEffect(() => { const el = cardRef.current; if (!el) return; const from = `translateY(${place.above ? 4 : -4}px)`; if (open) { if (reduced) return; const enter = el.animate( [ { opacity: 0, transform: from, filter: "blur(2px)" }, { opacity: 1, transform: "none", filter: "blur(0px)" }, ], { duration: 220, easing: MORPH } ); return () => enter.cancel(); } if (reduced) { setMounted(false); return; } const leave = el.animate([{ opacity: 1, transform: "none" }, { opacity: 0, transform: from }], { duration: 140, easing: "ease-out", fill: "forwards" }); leave.onfinish = () => setMounted(false); return () => leave.cancel(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [open, mounted]); React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open]); return ( show(120)} onMouseLeave={() => hide(150)} {...props}> show(0)} onBlur={() => hide(0)} className={`mx-0.5 inline-flex h-[1.2em] min-w-[1.2em] -translate-y-[0.12em] items-center justify-center rounded-[5px] px-1 font-mono text-[10.5px] leading-none no-underline transition-colors ${FOCUS} ${ unavailable ? "bg-muted text-muted-foreground/60 line-through" : open ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground" }`} > {index} {mounted && ( )} ); } 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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hairline","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/citation.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]