50: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"] 51: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"] 52:T26d3,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const SETTLE = 420; const RELEASE = 900; export type ScrollSpySection = { id: string; label: string; }; export type UseScrollSpyOptions = { sections: ScrollSpySection[]; offset?: number; root?: React.RefObject; onChange?: (id: string) => void; }; export function useScrollSpy({ sections, offset = 96, root, onChange, }: UseScrollSpyOptions) { const reduced = useReducedMotion(); const [activeId, setActiveId] = useState(() => sections[0]?.id ?? ""); const [announce, setAnnounce] = useState(""); const list = useRef(sections); list.current = sections; const emit = useRef(onChange); emit.current = onChange; const frame = useRef(0); const lock = useRef(null); const lockTimer = useRef | null>(null); const settleTimer = useRef | null>(null); const started = useRef(false); const key = sections.map((s) => s.id).join("|"); const measure = useCallback(() => { const items = list.current; if (items.length === 0) return ""; const container = root?.current ?? null; const viewport = container ? container.clientHeight : window.innerHeight; const top = container ? container.scrollTop : window.scrollY; const max = container ? container.scrollHeight - container.clientHeight : document.documentElement.scrollHeight - window.innerHeight; const ratio = max > 0 ? Math.min(1, Math.max(0, top / max)) : 1; const line = (container ? container.getBoundingClientRect().top : 0) + offset + ratio * Math.max(0, viewport - offset - 1); let current = ""; let last = ""; for (const item of items) { const node = document.getElementById(item.id); if (!node) continue; last = item.id; if (!current) current = item.id; if (node.getBoundingClientRect().top <= line + 1) current = item.id; } const atEnd = container ? container.scrollTop + container.clientHeight >= container.scrollHeight - 2 : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2; return atEnd && last ? last : current; }, [offset, root]); const release = useCallback(() => { lock.current = null; if (lockTimer.current) { clearTimeout(lockTimer.current); lockTimer.current = null; } }, []); const sync = useCallback(() => { if (frame.current) return; frame.current = requestAnimationFrame(() => { frame.current = 0; const next = measure(); if (!next) return; if (lock.current) { if (lock.current === next) release(); return; } setActiveId((prev) => (prev === next ? prev : next)); }); }, [measure, release]); useEffect(() => { const container = root?.current ?? null; const scroller: EventTarget = container ?? window; const abandon = () => { if (lock.current) release(); }; scroller.addEventListener("scroll", sync, { passive: true }); window.addEventListener("resize", sync); window.addEventListener("wheel", abandon, { passive: true }); window.addEventListener("touchstart", abandon, { passive: true }); const observer = new ResizeObserver(sync); observer.observe(container ?? document.documentElement); for (const id of key ? key.split("|") : []) { const node = document.getElementById(id); if (node) observer.observe(node); } sync(); return () => { scroller.removeEventListener("scroll", sync); window.removeEventListener("resize", sync); window.removeEventListener("wheel", abandon); window.removeEventListener("touchstart", abandon); observer.disconnect(); cancelAnimationFrame(frame.current); frame.current = 0; if (lockTimer.current) clearTimeout(lockTimer.current); }; }, [sync, release, key, root]); useEffect(() => { if (!activeId) return; emit.current?.(activeId); if (!started.current) { started.current = true; return; } settleTimer.current = setTimeout(() => { const item = list.current.find((s) => s.id === activeId); setAnnounce(item ? item.label : ""); }, SETTLE); return () => { if (settleTimer.current) clearTimeout(settleTimer.current); }; }, [activeId]); const scrollTo = useCallback( (id: string) => { const node = document.getElementById(id); if (!node) return; lock.current = id; setActiveId(id); const container = root?.current ?? null; const behavior: ScrollBehavior = reduced ? "auto" : "smooth"; const rect = node.getBoundingClientRect(); const viewport = container ? container.clientHeight : window.innerHeight; const max = container ? Math.max(0, container.scrollHeight - container.clientHeight) : Math.max( 0, document.documentElement.scrollHeight - window.innerHeight, ); const H = container ? rect.top - container.getBoundingClientRect().top + container.scrollTop : rect.top + window.scrollY; const usable = Math.max(0, viewport - offset - 1); const top = max > 0 ? Math.min(max, Math.max(0, (H - offset) / (1 + usable / max))) : 0; if (container) container.scrollTo({ top, behavior }); else window.scrollTo({ top, behavior }); if (!node.hasAttribute("tabindex")) node.setAttribute("tabindex", "-1"); node.focus({ preventScroll: true }); if (lockTimer.current) clearTimeout(lockTimer.current); lockTimer.current = setTimeout(() => { lock.current = null; lockTimer.current = null; sync(); }, RELEASE); }, [offset, reduced, root, sync], ); const getLinkProps = useCallback( (id: string) => ({ href: `#${id}`, "aria-current": id === activeId ? ("location" as const) : undefined, onClick: (e: React.MouseEvent) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return; e.preventDefault(); scrollTo(id); }, }), [activeId, scrollTo], ); const activeIndex = sections.findIndex((s) => s.id === activeId); return { activeId, activeIndex, scrollTo, getLinkProps, announce }; } export type ScrollSpyProps = { sections: ScrollSpySection[]; offset?: number; root?: React.RefObject; onChange?: (id: string) => void; label?: string; className?: string; }; export function ScrollSpy({ sections, offset = 96, root, onChange, label = "On this page", className = "", }: ScrollSpyProps) { const { activeId, getLinkProps, announce } = useScrollSpy({ sections, offset, root, onChange, }); const reduced = useReducedMotion(); const thumbId = useId(); const chips = useRef(new Map()); useEffect(() => { chips.current.get(activeId)?.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "nearest", inline: "nearest", }); }, [activeId, reduced]); return (

{ if (el) chips.current.set(section.id, el); else chips.current.delete(section.id); }} className="relative flex-[1_0_auto]" > {active ? ( ) : null} {section.label} {section.label}

{announce}

); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/scroll-spy.tsx","content":"$52","type":"registry:ui","target":"components/interior/scroll-spy.tsx"}],"className":"h-[70svh] min-h-80"}]]}]