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:T4c77,"use client" import * as React from "react" import { createContext, useContext, useRef, useState, useEffect, useMemo, useLayoutEffect, type ReactNode, type RefObject, type ComponentProps, type HTMLAttributes, } from "react" import { cn } from "@/lib/utils" // ============================================================================ // Types // ============================================================================ export interface TOCItemType { title: ReactNode url: string depth: number } export type TableOfContents = TOCItemType[] // ============================================================================ // Contexts // ============================================================================ const ActiveAnchorContext = createContext([]) const ScrollContext = createContext>({ current: null }) const TOCContext = createContext([]) // ============================================================================ // Hooks // ============================================================================ /** * The id of visible anchors */ export function useActiveAnchors(): string[] { return useContext(ActiveAnchorContext) } /** * The estimated active heading ID */ export function useActiveAnchor(): string | undefined { return useContext(ActiveAnchorContext)[0] } /** * Get TOC items from context */ export function useTOCItems(): TOCItemType[] { return useContext(TOCContext) } // ============================================================================ // Utility Functions // ============================================================================ function mergeRefs(...refs: (React.Ref | undefined)[]): React.RefCallback { return value => { refs.forEach(ref => { if (typeof ref === "function") { ref(value) } else if (ref != null) { ;(ref as React.MutableRefObject).current = value } }) } } /** * Find the active heading of page using IntersectionObserver */ function useAnchorObserver(watch: string[], single: boolean): string[] { const observerRef = useRef(null) const [activeAnchor, setActiveAnchor] = useState([]) const stateRef = useRef<{ visible: Set } | null>(null) const onChange = React.useCallback( (entries: IntersectionObserverEntry[]) => { stateRef.current ??= { visible: new Set() } const state = stateRef.current for (const entry of entries) { if (entry.isIntersecting) { state.visible.add(entry.target.id) } else { state.visible.delete(entry.target.id) } } if (state.visible.size === 0) { const viewTop = entries[0]?.rootBounds?.top ?? 0 let fallback: Element | undefined let min = -1 for (const id of watch) { const element = document.getElementById(id) if (!element) continue const d = Math.abs(viewTop - element.getBoundingClientRect().top) if (min === -1 || d < min) { fallback = element min = d } } setActiveAnchor(fallback ? [fallback.id] : []) } else { const items = watch.filter(item => state.visible.has(item)) setActiveAnchor(single ? items.slice(0, 1) : items) } }, [watch, single], ) useEffect(() => { if (observerRef.current) return observerRef.current = new IntersectionObserver(onChange, { rootMargin: "0px", threshold: 0.98, }) return () => { observerRef.current?.disconnect() observerRef.current = null } }, [onChange]) useEffect(() => { const observer = observerRef.current if (!observer) return const elements = watch.flatMap(heading => document.getElementById(heading) ?? []) for (const element of elements) observer.observe(element) return () => { for (const element of elements) observer.unobserve(element) } }, [watch]) return activeAnchor } // ============================================================================ // TOCProvider - Main context provider // ============================================================================ export interface TOCProviderProps { toc: TableOfContents /** * Only accept one active item at most * @defaultValue false */ single?: boolean children?: ReactNode } export function TOCProvider({ toc, single = false, children }: TOCProviderProps) { const headings = useMemo(() => { return toc.map(item => item.url.split("#")[1]) }, [toc]) const activeAnchors = useAnchorObserver(headings, single) return ( {children} ) } // ============================================================================ // TOCScrollArea - Scrollable container with auto-scroll support // ============================================================================ export function TOCScrollArea({ ref, className, ...props }: ComponentProps<"div">) { const viewRef = useRef(null) return (

{props.children}

) } // ============================================================================ // TOCThumb - Active indicator that shows current position // ============================================================================ type TocThumbValues = [top: number, height: number] interface TocThumbProps extends HTMLAttributes { containerRef: RefObject } function calcThumb(container: HTMLElement, active: string[]): TocThumbValues { if (active.length === 0 || container.clientHeight === 0) { return [0, 0] } let upper = Number.MAX_VALUE let lower = 0 for (const item of active) { const element = container.querySelector(`a[href="#${item}"]`) if (!element) continue const styles = getComputedStyle(element) upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop)) lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom)) } return [upper, lower - upper] } function updateThumb(element: HTMLElement, info: TocThumbValues): void { element.style.setProperty("--toc-top", `${info[0]}px`) element.style.setProperty("--toc-height", `${info[1]}px`) } function TocThumb({ containerRef, ...props }: TocThumbProps) { const thumbRef = useRef(null) const active = useActiveAnchors() useEffect(() => { if (!containerRef.current) return const container = containerRef.current const onUpdate = () => { if (!thumbRef.current) return updateThumb(thumbRef.current, calcThumb(container, active)) } const observer = new ResizeObserver(onUpdate) observer.observe(container) onUpdate() return () => { observer.disconnect() } }, [containerRef, active]) // Initial update if (containerRef.current && thumbRef.current) { updateThumb(thumbRef.current, calcThumb(containerRef.current, active)) } return

} // ============================================================================ // TOCItem - Individual TOC link item // ============================================================================ export interface TOCItemProps extends Omit, "href"> { href: string onActiveChange?: (v: boolean) => void } export function TOCItem({ ref, onActiveChange, ...props }: TOCItemProps) { const containerRef = useContext(ScrollContext) const anchorRef = useRef(null) const activeAnchors = useActiveAnchors() const activeOrder = activeAnchors.indexOf(props.href.slice(1)) const isActive = activeOrder !== -1 const shouldScroll = activeOrder === 0 useLayoutEffect(() => { const anchor = anchorRef.current const container = containerRef.current // ------------------------------------------------------------------------- // CUSTOM SCROLL IMPLEMENTATION // ------------------------------------------------------------------------- // This replaces the `scroll-into-view-if-needed` library used in fumadocs. // // LIBRARY ARCHITECTURE: // - `scroll-into-view-if-needed`: Options parsing, scroll execution, scroll-margin support // - `compute-scroll-into-view`: Core algorithm for boundary/position calculations // // The `compute-scroll-into-view` library provides sophisticated features: // - `alignNearest`: Algorithm that calculates minimum scroll needed (with edge cases) // - Scrollbar width/height handling in calculations // - Border width accounting for containers // - CSS transform scale handling // - Visual viewport support (for pinch-zoom) // - Multiple scrolling frames (scrolls all ancestors up to boundary) // // FEATURES WE DON'T IMPLEMENT (not needed for TOC use case): // - Shadow DOM support via isInDocument() check // - Custom scroll behavior callbacks (behavior: Function) // - Multiple scroll targets (only need single container) // - CSS scroll-margin-* properties (TOC items don't use these) // - `block: 'nearest'` alignNearest algorithm (we always center) // - Scrollbar width compensation (TOC uses scrollbar-width: none) // - Border width compensation (TOC container has no borders) // - CSS transform scale handling (TOC isn't scaled) // // FEATURES WE DO IMPLEMENT: // - Element connectivity check (isConnected) // - Boundary constraint (only scroll container, never page) // - Smooth scrolling behavior // - Center block alignment (block: 'center') // - "if-needed" scroll mode (only scroll if out of view) // // ORIGINAL FUMADOCS IMPLEMENTATION: // ``` // import scrollIntoView from 'scroll-into-view-if-needed' // // scrollIntoView(anchor, { // behavior: 'smooth', // block: 'center', // inline: 'center', // scrollMode: 'always', // boundary: container, // }) // ``` // // TO SWITCH TO THE LIBRARY: // 1. Install: `yarn add scroll-into-view-if-needed` // 2. Import: `import scrollIntoView from 'scroll-into-view-if-needed'` // 3. Replace the custom code below with the library call above // // Reference source code available at: // - reference/scroll-into-view-if-needed/ // - reference/compute-scroll-into-view/ // ------------------------------------------------------------------------- // Safety check: ensure elements are connected to the DOM if (!container || !anchor || !shouldScroll || !anchor.isConnected) { return } const containerRect = container.getBoundingClientRect() const anchorRect = anchor.getBoundingClientRect() // "if-needed" check: only scroll if anchor is outside the visible area const isAbove = anchorRect.top < containerRect.top const isBelow = anchorRect.bottom > containerRect.bottom if (isAbove || isBelow) { // Calculate scroll position to center the anchor in the container // This mimics `block: 'center'` from the library const anchorCenter = anchor.offsetTop - container.offsetTop + anchor.offsetHeight / 2 const containerCenter = container.clientHeight / 2 const scrollTop = anchorCenter - containerCenter // Scroll only the container (boundary constraint), not the page container.scrollTo({ top: Math.max(0, scrollTop), behavior: "smooth", }) } }, [containerRef, shouldScroll]) useEffect(() => { onActiveChange?.(isActive) }, [isActive, onActiveChange]) return ( {props.children} ) } // ============================================================================ // TOCItems - Simple TOC list with straight border line // ============================================================================ export interface TOCItemsProps extends ComponentProps<"div"> { /** * Text to display when there are no headings * @defaultValue "No Headings" */ emptyText?: string } export function TOCItems({ ref, className, emptyText = "No Headings", ...props }: TOCItemsProps) { const containerRef = useRef(null) const items = useTOCItems() if (items.length === 0) { return

{emptyText}

} return ( <>

{items.map(item => ( ))}

) } function SimpleTOCItem({ item }: { item: TOCItemType }) { return ( = 4 && "ps-8", )} > {item.title} ) } // ============================================================================ // ClerkTOCItems - TOC with depth-aware line that follows the hierarchy // ============================================================================ function getItemOffset(depth: number): number { if (depth <= 2) return 14 if (depth === 3) return 26 return 36 } function getLineOffset(depth: number): number { return depth >= 3 ? 10 : 0 } export interface ClerkTOCItemsProps extends ComponentProps<"div"> { /** * Text to display when there are no headings * @defaultValue "No Headings" */ emptyText?: string } export function ClerkTOCItems({ ref, className, emptyText = "No Headings", ...props }: ClerkTOCItemsProps) { const containerRef = useRef(null) const items = useTOCItems() const [svg, setSvg] = useState<{ path: string width: number height: number }>() useEffect(() => { if (!containerRef.current) return const container = containerRef.current function onResize(): void { if (container.clientHeight === 0) return let w = 0 let h = 0 const d: string[] = [] for (let i = 0; i < items.length; i++) { const element: HTMLElement | null = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`) if (!element) continue const styles = getComputedStyle(element) const offset = getLineOffset(items[i].depth) + 1 const top = element.offsetTop + parseFloat(styles.paddingTop) const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom) w = Math.max(offset, w) h = Math.max(h, bottom) d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`) d.push(`L${offset} ${bottom}`) } setSvg({ path: d.join(" "), width: w + 1, height: h, }) } const observer = new ResizeObserver(onResize) onResize() observer.observe(container) return () => { observer.disconnect() } }, [items]) if (items.length === 0) { return

{emptyText}

} return ( <> {svg ? (

`, )}")`, }} >

) : null}

{items.map((item, i) => ( ))}

) } function ClerkTOCItemElement({ item, upper = item.depth, lower = item.depth, }: { item: TOCItemType upper?: number lower?: number }) { const offset = getLineOffset(item.depth) const upperOffset = getLineOffset(upper) const lowerOffset = getLineOffset(lower) return ( {offset !== upperOffset ? ( ) : null}

{item.title} ) } // ============================================================================ // PageTOC & PageTOCItems - Convenience wrappers for page layout // ============================================================================ export interface PageTOCProps extends ComponentProps<"div"> { children?: ReactNode } export function PageTOC({ className, children, ...props }: PageTOCProps) { return (

{children}

) } export interface PageTOCItemsProps extends ComponentProps<"div"> { /** * TOC variant style * - "default": Simple straight border line * - "clerk": Depth-aware line that follows hierarchy * @defaultValue "default" */ variant?: "default" | "clerk" /** * Text to display when there are no headings * @defaultValue "No Headings" */ emptyText?: string } export function PageTOCItems({ variant = "default", emptyText, ...props }: PageTOCItemsProps) { return ( {variant === "clerk" ? ( ) : ( )} ) } 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/abui/ui/toc.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]