4f: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"] 50: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"] 51:T2049,'use client'; import * as React from 'react'; import { animate, motion, useMotionValue, useTransform } from 'motion/react'; import { cn } from '@/lib/utils'; import { usePrefersReducedMotion } from '@/components/spectrumui/use-typewriter'; export interface TreeNavItem { label: string; href: string; /** Small pill after the label, e.g. "New". */ badge?: string; /** Opens in a new tab. */ external?: boolean; } type LinkComponent = 'a' | React.ComponentType & { href: string }>; export interface TreeNavProps { items: TreeNavItem[]; /** href of the current page; the marker and background rest on this row. */ activeHref?: string; /** Slide the marker and background to the hovered row and spring back on leave. */ followHover?: boolean; /** Element used for links, e.g. Next's Link. Defaults to a plain anchor. */ linkComponent?: LinkComponent; onSelect?: (item: TreeNavItem, event: React.MouseEvent) => void; className?: string; } const ROW_H = 32; const MARKER = 7; /** Horizontal centre of the rail inside the 24px gutter. */ const RAIL_X = 10; // Critically damped (no overshoot) with a ~0.3s response: Apple's default for // repositioning UI, tightened a little for a hover highlight. Springs re-target from the live value and carry velocity, // so sweeping the pointer down the list never stutters or snaps. const GLIDE = { type: 'spring', visualDuration: 0.22, bounce: 0 } as const; const FADE = { duration: 0.12, ease: 'easeOut' } as const; export function TreeNav({ items, activeHref, followHover = true, linkComponent: Link = 'a', onSelect, className, }: TreeNavProps) { const listRef = React.useRef(null); const rowRefs = React.useRef<(HTMLLIElement | null)[]>([]); const centersRef = React.useRef([]); const hoveredRef = React.useRef(null); const reduced = usePrefersReducedMotion(); const activeIndex = items.findIndex((item) => item.href === activeHref); // Handlers and the measurer read these through refs so they never go stale // and never need to be re-created; the sync runs before the measure effect. const reducedRef = React.useRef(reduced); const activeRef = React.useRef(activeIndex); React.useLayoutEffect(() => { reducedRef.current = reduced; activeRef.current = activeIndex; }); // Rail length is the only measurement that renders; everything that moves is // a motion value, so hovering never re-renders the list. const [end, setEnd] = React.useState(0); const [measured, setMeasured] = React.useState(false); const centerY = useMotionValue(0); const visibility = useMotionValue(0); const pillY = useTransform(centerY, (v) => v - ROW_H / 2); const markerY = useTransform(centerY, (v) => v - MARKER / 2); const accentScale = useTransform(centerY, (v) => (end > 0 ? Math.min(1, v / end) : 0)); const moveTo = React.useCallback( (index: number | null, immediate = false) => { const centers = centersRef.current; if (index === null || index < 0 || index >= centers.length) { animate(visibility, 0, FADE); return; } const target = centers[index]; // Coming back from hidden: appear on the row instead of travelling from // wherever the marker was last parked. const jump = immediate || reducedRef.current || visibility.get() < 0.05; if (jump) centerY.jump(target); else animate(centerY, target, GLIDE); animate(visibility, 1, FADE); }, [centerY, visibility], ); React.useLayoutEffect(() => { const list = listRef.current; if (!list) return; const measure = () => { const next = rowRefs.current .slice(0, items.length) .map((el) => (el ? el.offsetTop + el.offsetHeight / 2 : 0)); centersRef.current = next; setEnd(next.length > 0 ? next[next.length - 1] : 0); setMeasured(true); // A re-measure is a layout change, not motion: settle instantly. moveTo(hoveredRef.current ?? activeRef.current, true); }; measure(); const observer = new ResizeObserver(measure); observer.observe(list); return () => observer.disconnect(); }, [items.length, moveTo]); // Route changes glide; a hover in progress keeps priority. React.useEffect(() => { if (hoveredRef.current === null) moveTo(activeIndex); }, [activeIndex, moveTo]); const enter = (index: number) => { if (!followHover) return; hoveredRef.current = index; moveTo(index); }; const leave = () => { if (!followHover) return; hoveredRef.current = null; moveTo(activeRef.current); }; return (

{/* One shared background: rests on the active row, follows the pointer, springs back on leave. */} {items.map((item, index) => { const isActive = index === activeIndex; return (

{ rowRefs.current[index] = el; }} className="relative" onPointerEnter={() => enter(index)} > onSelect(item, event) : undefined} onFocus={() => enter(index)} onBlur={leave} className={cn( 'flex h-8 items-center gap-2 rounded-lg px-3 text-[13px] leading-5 antialiased transition-colors duration-150 ease-out', // Before the first measurement the pill has no position yet, so // the active row paints its own background for that one frame. isActive && !measured && 'bg-black/4 dark:bg-white/6', isActive ? 'font-medium text-neutral-900 dark:text-neutral-100' : 'font-normal text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100', )} > {item.label} {item.badge && ( {item.badge} )}

); })}

); } 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/use-typewriter"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"app/registry/tree-nav/tree-nav.tsx","content":"$51","type":"registry:component","target":"components/spectrumui/tree-nav.tsx"}],"className":"h-[70svh] min-h-80"}]]}]