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:T12c4,"use client" import { cn } from '../utils' import { useEffect, useMemo, useState } from 'react' import { TableOfContentsIcon } from 'lucide-react' export interface TocItem { id: string title: string level?: number children?: TocItem[] } interface TableOfContentsProps { /** Markdown content to extract headings from */ content?: string /** Pre-defined items (alternative to content extraction) */ items?: TocItem[] /** Optional header slot (e.g., language selector) */ header?: React.ReactNode /** Optional footer slot (e.g., link to full docs) */ footer?: React.ReactNode className?: string } // Extract headings from markdown content (h2 and h3 only, h1 is page title) // Nests h3s under their preceding h2 function extractHeadings(content: string): TocItem[] { const result: TocItem[] = [] const lines = content.split('\n') let currentH2: TocItem | null = null for (const line of lines) { const match = line.match(/^(#{2,3})\s+(.+)$/) if (match) { const level = match[1].length const title = match[2].trim() // Create a URL-safe ID from the heading text const id = title .toLowerCase() .replace(/[^a-z0-9]+/g, '-') .replace(/(^-|-$)/g, '') if (level === 2) { currentH2 = { id, title, level, children: [] } result.push(currentH2) } else if (level === 3) { const item = { id, title, level } if (currentH2) { currentH2.children = currentH2.children || [] currentH2.children.push(item) } else { // h3 without preceding h2, add to root result.push(item) } } } } return result } // Flatten nested items for intersection observer function flattenItems(items: TocItem[]): TocItem[] { return items.flatMap(item => [item, ...(item.children || [])]) } export function TableOfContents({ content, items, header, footer, className }: TableOfContentsProps) { const [activeId, setActiveId] = useState('') // Use provided items or extract from markdown const tocItems = useMemo(() => { if (items) return items if (content) return extractHeadings(content) return [] }, [items, content]) // Flatten for observer const allItems = useMemo(() => flattenItems(tocItems), [tocItems]) useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setActiveId(entry.target.id) } }) }, { rootMargin: '-80px 0px -80% 0px', threshold: 0, } ) // Observe all heading elements allItems.forEach(({ id }) => { const element = document.getElementById(id) if (element) { observer.observe(element) } }) return () => observer.disconnect() }, [allItems]) if (tocItems.length === 0) { return null } const renderItem = (item: TocItem, isChild = false) => { const isActive = activeId === item.id const level = item.level || (isChild ? 3 : 2) return (

{ e.preventDefault() const element = document.getElementById(item.id) if (element) { element.scrollIntoView({ behavior: 'smooth' }) setActiveId(item.id) } }} className={cn( 'flex items-center text-[13px] py-1 -ml-px border-l transition-colors lowercase', !isChild && 'pl-3 font-medium', isChild && 'pl-4 text-xs', isActive ? 'border-brand-pink text-brand-pink' : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground' )} > {isChild && ( └ )} {item.title} {item.children && item.children.length > 0 && (

{item.children.map(child => renderItem(child, true))} )}

) } return ( ) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"docs/table-of-contents.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]