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:T4d01,"use client" import * as React from "react" import { ChevronDown, ListTree } from "lucide-react" import { Button } from "@/components/ui/button" import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible" import { ItemGroup } from "@/components/ui/item" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { type TableOfContentsItem as TocItemData } from "@/hooks/use-table-of-contents" import { buildTocPath, getDepthOffset, getDepthPadding, measureLinkMetrics, type TocLinkMetrics, } from "@/lib/toc-path" import { cn } from "@/lib/utils" type TableOfContentsContextValue = { items: TocItemData[] activeId?: string activeIndex: number onItemClick?: (id: string) => void } const TableOfContentsContext = React.createContext(null) const tableOfContentsStyles = { shell: "relative pl-1", header: "mb-3 flex items-center gap-2 font-mono text-[0.6875rem] leading-4 tracking-wide text-muted-foreground uppercase", icon: "size-3.5 shrink-0", separator: "mb-3 opacity-30", track: "text-muted-foreground/25", activeTrack: "text-foreground", item: "relative z-[1] block w-fit scroll-m-4 rounded-sm py-1 pr-2 text-[0.8125rem] leading-5 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", itemActive: "text-foreground", itemTrail: "text-foreground", itemIdle: "text-muted-foreground/60 hover:text-muted-foreground", mobileHeader: "border-b bg-background/80 backdrop-blur-sm transition-colors", mobileHeaderOpen: "shadow-lg", mobileButton: "flex h-11 w-full items-center gap-2.5 px-4 py-2.5 text-start text-sm font-normal text-muted-foreground [&_svg]:size-4", mobileScrollArea: "max-h-[50vh] px-4 pb-4", mobileList: "pt-2 [&_a]:w-full [&_a]:py-2", } function useTableOfContentsContext() { const context = React.useContext(TableOfContentsContext) if (!context) { throw new Error( "TableOfContents components must be used within TableOfContents" ) } return context } type TableOfContentsProps = React.ComponentProps<"nav"> & { items: TocItemData[] activeId?: string onItemClick?: (id: string) => void } function TableOfContents({ items, activeId, onItemClick, className, children, ...props }: TableOfContentsProps) { const activeIndex = activeId ? items.findIndex((item) => item.id === activeId) : -1 const contextValue = React.useMemo( () => ({ items, activeId, activeIndex, onItemClick, }), [items, activeId, activeIndex, onItemClick] ) return ( ) } function TableOfContentsContent() { return (

) } type TableOfContentsHeaderProps = React.ComponentProps<"div"> & { title?: string } function TableOfContentsHeader({ title = "On this page", className, children, ...props }: TableOfContentsHeaderProps) { return (

{children ?? ( <> {title} )}

) } function TableOfContentsIcon({ className }: { className?: string }) { return } type IndicatorState = { path: string metrics: TocLinkMetrics[] width: number height: number } function getTocAnchor( container: HTMLElement, id: string ): HTMLAnchorElement | null { return container.querySelector( `[data-toc-id="${CSS.escape(id)}"]` ) } function TableOfContentsList({ className, ...props }: React.ComponentProps<"div">) { const { items, activeIndex } = useTableOfContentsContext() const fadeId = React.useId().replace(/:/g, "") const fadeGradientId = `${fadeId}-toc-line-fade-gradient` const trackMaskId = `${fadeId}-toc-track-fade` const activeTrackMaskId = `${fadeId}-toc-active-track-fade` const containerRef = React.useRef(null) const clipRef = React.useRef(null) const [indicator, setIndicator] = React.useState(null) const measurePath = React.useCallback(() => { const container = containerRef.current if (!container || container.clientHeight === 0) { return } const metrics: TocLinkMetrics[] = [] let width = 0 let height = 0 for (const item of items) { const anchor = getTocAnchor(container, item.id) if (!anchor) { continue } const { top, bottom } = measureLinkMetrics(anchor) const x = getDepthOffset(item.depth ?? 2) + 0.5 width = Math.max(x + 8, width) height = Math.max(bottom, height) metrics.push({ x, top, bottom }) } setIndicator({ path: buildTocPath(metrics), metrics, width, height, }) }, [items]) const updateClip = React.useCallback(() => { const container = containerRef.current const clip = clipRef.current if (!container || !clip || activeIndex < 0) { return } let top = Number.POSITIVE_INFINITY let bottom = 0 for (let index = 0; index <= activeIndex; index += 1) { const anchor = getTocAnchor(container, items[index].id) if (!anchor) { continue } const metrics = measureLinkMetrics(anchor) top = Math.min(top, metrics.top) bottom = Math.max(bottom, metrics.bottom) } if (top === Number.POSITIVE_INFINITY) { return } clip.style.setProperty("--toc-top", `${top}px`) clip.style.setProperty("--toc-height", `${bottom - top}px`) }, [activeIndex, items]) React.useLayoutEffect(() => { measurePath() updateClip() const container = containerRef.current if (!container) { return } const resizeObserver = new ResizeObserver(() => { measurePath() updateClip() }) resizeObserver.observe(container) return () => resizeObserver.disconnect() }, [measurePath, updateClip]) React.useLayoutEffect(() => { updateClip() }, [updateClip, activeIndex, indicator]) return (

{indicator?.path ? ( <>

) : null} {items.map((item, index) => ( ))}

) } type TableOfContentsItemProps = { item: TocItemData index: number className?: string } function TableOfContentsItem({ item, index, className, }: TableOfContentsItemProps) { const { activeId, activeIndex, onItemClick } = useTableOfContentsContext() const depth = item.depth ?? 2 const isActive = item.id === activeId const inTrail = activeIndex >= 0 && index <= activeIndex const handleClick = React.useCallback( (event: React.MouseEvent) => { event.preventDefault() onItemClick?.(item.id) const element = document.getElementById(item.id) element?.scrollIntoView({ behavior: "smooth", block: "start" }) }, [item.id, onItemClick] ) return ( {item.title} ) } type TableOfContentsProgressProps = React.ComponentProps<"svg"> & { value: number } function TableOfContentsProgress({ value, className, ...props }: TableOfContentsProgressProps) { const strokeWidth = 2 const size = 16 const clamped = Math.min(1, Math.max(0, value)) const radius = (size - strokeWidth) / 2 const circumference = 2 * Math.PI * radius const offset = circumference - clamped * circumference return ( ) } type TableOfContentsMobileProps = React.ComponentProps<"div"> & { items: TocItemData[] activeId?: string onItemClick?: (id: string) => void title?: string } function TableOfContentsMobile({ items, activeId, onItemClick, title = "On this page", className, ...props }: TableOfContentsMobileProps) { const [open, setOpen] = React.useState(false) const mobileRef = React.useRef(null) const activeIndex = activeId ? items.findIndex((item) => item.id === activeId) : -1 const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined const progress = activeIndex >= 0 ? (activeIndex + 1) / Math.max(1, items.length) : 0 const showActiveTitle = activeIndex >= 0 && !open const handleItemClick = React.useCallback( (id: string) => { onItemClick?.(id) setOpen(false) }, [onItemClick] ) React.useEffect(() => { if (!open) { return } const handleClickOutside = (event: MouseEvent) => { const target = event.target if ( target instanceof HTMLElement && mobileRef.current && !mobileRef.current.contains(target) ) { setOpen(false) } } window.addEventListener("click", handleClickOutside) return () => window.removeEventListener("click", handleClickOutside) }, [open]) const contextValue = React.useMemo( () => ({ items, activeId, activeIndex, onItemClick: handleItemClick, }), [items, activeId, activeIndex, handleItemClick] ) return ( ) } type TableOfContentsMobileContentProps = { activeItemTitle?: string open: boolean progress: number showActiveTitle: boolean title: string } function TableOfContentsMobileContent({ activeItemTitle, open, progress, showActiveTitle, title, }: TableOfContentsMobileContentProps) { return (

) } export { TableOfContents, TableOfContentsHeader, TableOfContentsIcon, TableOfContentsItem, TableOfContentsList, TableOfContentsMobile, TableOfContentsProgress, } export type { TableOfContentsItem as TocItem } from "@/hooks/use-table-of-contents" export { useScrollSpy } from "@/hooks/use-table-of-contents" 52:T8f8,"use client" import * as React from "react" export type TableOfContentsItem = { id: string title: string depth?: number } export type UseScrollSpyOptions = { root?: Element | null /** Top offset in px. Headings above this line count as passed. */ rootMargin?: string } function parseTopOffset(rootMargin: string): number { const top = rootMargin.trim().split(/\s+/)[0] ?? "0px" const value = Number.parseFloat(top) if (Number.isNaN(value)) { return 0 } return Math.abs(value) } function getActiveIdFromScrollPosition( ids: string[], root: Element | null, offset: number ): string | undefined { if (ids.length === 0) { return undefined } const rootTop = root?.getBoundingClientRect().top ?? 0 let activeId: string | undefined = ids[0] for (const id of ids) { const element = document.getElementById(id) if (!element) { continue } const top = element.getBoundingClientRect().top - rootTop if (top <= offset) { activeId = id } } return activeId } export function useScrollSpy( ids: string[], options: UseScrollSpyOptions = {} ): string | undefined { const { root = null, rootMargin = "0px 0px -80% 0px" } = options const [activeId, setActiveId] = React.useState(ids[0]) const offset = parseTopOffset(rootMargin) React.useEffect(() => { if (ids.length === 0) { setActiveId(undefined) return } let frame = 0 const update = () => { const nextActiveId = getActiveIdFromScrollPosition(ids, root, offset) if (nextActiveId) { setActiveId(nextActiveId) } } const scheduleUpdate = () => { cancelAnimationFrame(frame) frame = requestAnimationFrame(update) } update() const scrollTarget = root ?? window scrollTarget.addEventListener("scroll", scheduleUpdate, { passive: true }) window.addEventListener("resize", scheduleUpdate, { passive: true }) return () => { cancelAnimationFrame(frame) scrollTarget.removeEventListener("scroll", scheduleUpdate) window.removeEventListener("resize", scheduleUpdate) } }, [ids, root, offset]) return activeId } 53:T5ff,export type TocLinkMetrics = { x: number top: number bottom: number } export function normalizeDepth(depth: number): number { if (depth <= 1) { return depth + 2 } return depth } export function getDepthOffset(depth: number): number { const level = normalizeDepth(depth) if (level <= 2) { return 8 } if (level === 3) { return 16 } return 24 } export function getDepthPadding(depth: number): number { const level = normalizeDepth(depth) if (level <= 2) { return 20 } if (level === 3) { return 32 } return 44 } export function measureLinkMetrics(anchor: HTMLAnchorElement): { top: number bottom: number } { const styles = getComputedStyle(anchor) return { top: anchor.offsetTop + Number.parseFloat(styles.paddingTop), bottom: anchor.offsetTop + anchor.clientHeight - Number.parseFloat(styles.paddingBottom), } } export function buildTocPath(metrics: TocLinkMetrics[]): string { if (metrics.length === 0) { return "" } let path = "" let previousX = 0 let previousBottom = 0 for (let index = 0; index < metrics.length; index += 1) { const { x, top, bottom } = metrics[index] if (index === 0) { path += `M ${x} ${top} L ${x} ${bottom}` } else { path += ` C ${previousX} ${top - 4} ${x} ${previousBottom + 4} ${x} ${top} L ${x} ${bottom}` } previousX = x previousBottom = bottom } return path } 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","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@toc-cn","registryDependencies":["button","collapsible","item","scroll-area","separator"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/new-york/blocks/table-of-contents/table-of-contents.tsx","content":"$51","type":"registry:component","target":"components/table-of-contents.tsx"},{"path":"hooks/use-table-of-contents.ts","content":"$52","type":"registry:hook","target":"hooks/use-table-of-contents.ts"},{"path":"lib/toc-path.ts","content":"$53","type":"registry:lib","target":"lib/toc-path.ts"}],"className":"h-[70svh] min-h-80"}]]}]