export declare const docsSideBarTemplate = "\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Space } from \"cherry-styled-components\";\nimport {\n  StyledIndexSidebar,\n  StyledIndexSidebarLink,\n  StyledIndexSidebarLabel,\n  StyledIndexSidebarLi,\n} from \"@/components/layout/DocsComponents\";\n\ninterface Heading {\n  id: string;\n  text: string;\n  level: number;\n}\n\nconst FALLBACK_OFFSET = 60;\n\nfunction getOffset() {\n  const header = document.getElementById(\"header\");\n  return (header ? header.offsetHeight : FALLBACK_OFFSET) + 20;\n}\n\nexport function DocsSideBar({ headings }: { headings: Heading[] }) {\n  const [activeId, setActiveId] = useState<string>(\"\");\n  const activeRef = useRef<HTMLLIElement>(null);\n\n  const handleScroll = useCallback(() => {\n    if (headings.length === 0) return;\n\n    const headingElements = headings\n      .map((heading) => document.getElementById(heading.id))\n      .filter((el): el is HTMLElement => el !== null);\n\n    if (headingElements.length === 0) return;\n\n    const windowHeight = window.innerHeight;\n\n    const visibleHeadings = headingElements.filter((element) => {\n      const rect = element.getBoundingClientRect();\n      const elementTop = rect.top;\n      const elementBottom = rect.bottom;\n      return elementTop < windowHeight && elementBottom > -50;\n    });\n\n    if (visibleHeadings.length > 0) {\n      let closestHeading = visibleHeadings[0];\n      let closestDistance = Math.abs(\n        closestHeading.getBoundingClientRect().top - getOffset(),\n      );\n      for (const heading of visibleHeadings) {\n        const distance = Math.abs(\n          heading.getBoundingClientRect().top - getOffset(),\n        );\n        if (\n          distance < closestDistance &&\n          heading.getBoundingClientRect().top <= windowHeight * 0.3\n        ) {\n          closestDistance = distance;\n          closestHeading = heading;\n        }\n      }\n      setActiveId(closestHeading.id);\n      return;\n    }\n\n    let currentActiveId = headings[0].id;\n    for (const element of headingElements) {\n      const rect = element.getBoundingClientRect();\n      if (rect.top <= getOffset()) {\n        currentActiveId = element.id;\n      } else {\n        break;\n      }\n    }\n    setActiveId(currentActiveId);\n  }, [headings]);\n\n  useEffect(() => {\n    if (headings.length === 0) return;\n    // Set active heading from URL hash immediately on mount (deferred to next frame)\n    const hashId = window.location.hash ? window.location.hash.slice(1) : null;\n    // Run initial scroll check on next frame to avoid synchronous setState in effect\n    const rafId = requestAnimationFrame(() => {\n      if (hashId) {\n        setActiveId(hashId);\n      }\n      handleScroll();\n    });\n    // Re-check after browser finishes scrolling to hash target on new page load\n    const delayedId = setTimeout(handleScroll, 300);\n    let timeoutId: NodeJS.Timeout;\n    const throttledHandleScroll = () => {\n      clearTimeout(timeoutId);\n      timeoutId = setTimeout(handleScroll, 50);\n    };\n    window.addEventListener(\"scroll\", throttledHandleScroll);\n    window.addEventListener(\"resize\", handleScroll);\n    return () => {\n      window.removeEventListener(\"scroll\", throttledHandleScroll);\n      window.removeEventListener(\"resize\", handleScroll);\n      cancelAnimationFrame(rafId);\n      clearTimeout(delayedId);\n      clearTimeout(timeoutId);\n    };\n  }, [handleScroll, headings]);\n\n  useEffect(() => {\n    const el = activeRef.current;\n    const container = el?.closest(\"[data-sidebar]\") as HTMLElement | null;\n    if (!el || !container) return;\n    const elRect = el.getBoundingClientRect();\n    const cRect = container.getBoundingClientRect();\n    const pad = 140;\n    // Animate the scroll, but honor users who opt out of motion.\n    const behavior = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n      .matches\n      ? \"auto\"\n      : \"smooth\";\n    if (elRect.bottom + pad > cRect.bottom) {\n      container.scrollBy({\n        top: elRect.bottom - cRect.bottom + pad,\n        behavior,\n      });\n    } else if (elRect.top - pad < cRect.top) {\n      container.scrollBy({\n        top: elRect.top - cRect.top - pad,\n        behavior,\n      });\n    }\n  }, [activeId]);\n\n  const handleHeadingClick = (headingId: string) => {\n    const element = document.getElementById(headingId);\n    if (element) {\n      const elementPosition =\n        element.getBoundingClientRect().top + window.scrollY;\n      window.scrollTo({\n        top: elementPosition - getOffset(),\n        behavior: \"smooth\",\n      });\n    }\n  };\n\n  return (\n    <StyledIndexSidebar data-sidebar data-markdown-ignore>\n      {headings?.length > 0 && (\n        <li aria-hidden=\"true\">\n          <StyledIndexSidebarLabel>On this page</StyledIndexSidebarLabel>\n          <Space $size={15} />\n        </li>\n      )}\n      {headings.map((heading, index) => (\n        <StyledIndexSidebarLi\n          key={index}\n          ref={activeId === heading.id ? activeRef : null}\n          $isActive={activeId === heading.id}\n          style={{ paddingLeft: `${(heading.level - 1) * 16}px` }}\n        >\n          <StyledIndexSidebarLink\n            href={`#${heading.id}`}\n            onClick={(e) => {\n              e.preventDefault();\n              handleHeadingClick(heading.id);\n            }}\n            $isActive={activeId === heading.id}\n          >\n            {heading.text}\n          </StyledIndexSidebarLink>\n        </StyledIndexSidebarLi>\n      ))}\n    </StyledIndexSidebar>\n  );\n}\n";