4e: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"] 4f:T1ddd,// Table of Contents from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; export interface TocItem { id: string; text: string; level: number; children?: TocItem[]; } const TOP_OFFSET = 56; /** Fraction of the viewport height a heading must scroll past to become active. */ const ACTIVATION_RATIO = 0.25; const useActiveHeading = (idsKey: string, enabled: boolean) => { const [activeId, setActiveId] = React.useState(null); React.useEffect(() => { if (!enabled) return; const ids = idsKey ? idsKey.split(' ') : []; const update = () => { if (window.scrollY === 0) { setActiveId(null); return; } const boxes = ids .flatMap((id) => { const el = document.getElementById(id); return el ? [{ id, top: el.getBoundingClientRect().top }] : []; }) .sort((a, b) => a.top - b.top); const { scrollHeight } = document.documentElement; const atBottom = scrollHeight > window.innerHeight && window.innerHeight + window.scrollY >= scrollHeight - 1; // At the bottom of the page the last headings can never reach the line, so the lowest visible one wins. const line = atBottom ? window.innerHeight : Math.max(TOP_OFFSET, window.innerHeight * ACTIVATION_RATIO); let current: string | null = null; for (const box of boxes) { if (box.top > line) break; current = box.id; } setActiveId(current); }; let frame = 0; const onScroll = () => { if (!frame) frame = requestAnimationFrame(() => ((frame = 0), update())); }; update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); return () => { cancelAnimationFrame(frame); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, [idsKey, enabled]); return activeId; }; interface TocContextValue { activeId: string | null; registerHeading: (id: string) => () => void; } const TocContext = React.createContext(null); const useTocContext = (component: string) => { const ctx = React.useContext(TocContext); if (!ctx) { throw new Error(`${component} must be used within .`); } return ctx; }; export interface TableOfContentsProps extends Omit, 'children'> { items?: TocItem[]; activeId?: string | null; label?: React.ReactNode; children?: React.ReactNode; } const TableOfContents = ({ items, activeId: controlledActiveId, label = 'On this page', className, children, 'aria-label': ariaLabel, ...props }: TableOfContentsProps) => { const headingCounts = React.useRef(new Map()); const [idsKey, setIdsKey] = React.useState(''); // Every link registers its target, so the items and compound forms both track the active heading. const registerHeading = React.useCallback((id: string) => { const counts = headingCounts.current; counts.set(id, (counts.get(id) ?? 0) + 1); setIdsKey([...counts.keys()].join(' ')); return () => { const next = (counts.get(id) ?? 1) - 1; if (next > 0) counts.set(id, next); else counts.delete(id); setIdsKey([...counts.keys()].join(' ')); }; }, []); const trackedActiveId = useActiveHeading(idsKey, controlledActiveId === undefined); const activeId = controlledActiveId !== undefined ? controlledActiveId : trackedActiveId; const contextValue = React.useMemo(() => ({ activeId, registerHeading }), [activeId, registerHeading]); const content = children ?? (items && items.length > 0 ? ( <> {label && {label}} ) : null); if (!content) return null; return ( ); }; export type TableOfContentsLabelProps = React.ComponentProps<'p'>; const TableOfContentsLabel = ({ className, ...props }: TableOfContentsLabelProps) => { return

; }; export interface TableOfContentsListProps extends Omit, 'children'> { items?: TocItem[]; level?: number; children?: React.ReactNode; } const TableOfContentsList = ({ items, level = 0, className, children, ...props }: TableOfContentsListProps) => { if (children === undefined && (!items || items.length === 0)) return null; return (

)}

); }; export interface TableOfContentsItemProps extends Omit, 'children'> { item: TocItem; level?: number; } const TableOfContentsItem = ({ item, level = 0, className, ...props }: TableOfContentsItemProps) => { return (

{item.text} {!!item.children?.length && }

); }; export interface TableOfContentsLinkProps extends React.ComponentProps<'a'> { level?: number; } const TableOfContentsLink = ({ href = '', level = 2, className, onClick, children, ...props }: TableOfContentsLinkProps) => { const { activeId, registerHeading } = useTocContext('TableOfContentsLink'); const id = href.startsWith('#') ? href.slice(1) : href; const isActive = id.length > 0 && activeId === id; const isHash = href.startsWith('#') && id.length > 0; React.useEffect(() => (isHash ? registerHeading(id) : undefined), [isHash, id, registerHeading]); const handleClick = (event: React.MouseEvent) => { onClick?.(event); const target = isHash && !event.defaultPrevented ? document.getElementById(id) : null; if (!target) return; event.preventDefault(); const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; target.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth' }); window.history.replaceState(null, '', `#${id}`); }; return ( = 4 && 'text-xs', className, )} {...props} > {children} ); }; export { TableOfContents, TableOfContentsLabel, TableOfContentsList, TableOfContentsItem, TableOfContentsLink }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/hirael/bases/radix/components/toc.tsx","content":"$4f","type":"registry:component","target":"components/toc.tsx"}],"className":"h-[70svh] min-h-80"}]]}]