export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useEffect, useId, useRef, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space, ThemeToggle } from \"cherry-styled-components\";\nimport { httpMethodBadgeColor } from \"@/components/layout/Badge\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarMethodTag,\n  StyledSidebarGroupButton,\n  StyledSidebarGroupRow,\n  StyledSidebarGroupLink,\n  StyledSidebarGroupChevron,\n  StyledSidebarGroupContent,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport { FocusModeToggle } from \"@/components/layout/FocusModeToggle\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\n// A link can be a leaf (slug + title) or a group with nested children. Both the\n// category icon and the per-link icon are optional Lucide names.\ntype NavItemLink = {\n  slug?: string;\n  title: string;\n  icon?: string;\n  httpMethod?: string;\n  links?: NavItemLink[];\n};\n\ntype NavItem = {\n  label: string;\n  icon?: string;\n  links: NavItemLink[];\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction linkContainsActivePath(link: NavItemLink, pathname: string): boolean {\n  if (link.slug !== undefined && pathname === `/${link.slug}`) {\n    return true;\n  }\n  return (link.links ?? []).some((child) =>\n    linkContainsActivePath(child, pathname),\n  );\n}\n\nfunction SidebarNavLink({\n  link,\n  depth,\n  pathname,\n  onNavigate,\n}: {\n  link: NavItemLink;\n  depth: number;\n  pathname: string;\n  onNavigate: () => void;\n}) {\n  const children = link.links ?? [];\n  const hasChildren = children.length > 0;\n  const href = link.slug !== undefined ? `/${link.slug}` : undefined;\n  const isActive = href !== undefined && pathname === href;\n  const indent = { paddingLeft: `${20 + depth * 14}px` };\n  const groupContentId = useId();\n\n  // Open collapsible groups that contain the active page so deep links land\n  // with their ancestors already expanded.\n  const [isOpen, setIsOpen] = useState(\n    hasChildren\n      ? children.some((child) => linkContainsActivePath(child, pathname))\n      : false,\n  );\n\n  if (!hasChildren) {\n    return (\n      <StyledSidebarListItem>\n        <StyledSidebarListItemLink\n          href={href ?? \"#\"}\n          $isActive={isActive}\n          aria-current={isActive ? \"page\" : undefined}\n          onClick={onNavigate}\n          style={indent}\n        >\n          {link.httpMethod && (\n            <StyledSidebarMethodTag\n              mono\n              solid={isActive}\n              size=\"xs\"\n              color={httpMethodBadgeColor(link.httpMethod)}\n            >\n              {link.httpMethod}\n            </StyledSidebarMethodTag>\n          )}\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n        </StyledSidebarListItemLink>\n      </StyledSidebarListItem>\n    );\n  }\n\n  const toggle = () => setIsOpen((prev) => !prev);\n  const toggleLabel = isOpen\n    ? `Collapse ${link.title}`\n    : `Expand ${link.title}`;\n  const groupActive = linkContainsActivePath(link, pathname);\n\n  return (\n    <li>\n      {href !== undefined ? (\n        <StyledSidebarGroupRow\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n        >\n          <StyledSidebarGroupLink\n            href={href}\n            aria-current={pathname === href ? \"page\" : undefined}\n            onClick={onNavigate}\n          >\n            {link.icon && <Icon name={link.icon} size={16} />}\n            {link.title}\n          </StyledSidebarGroupLink>\n          <StyledSidebarGroupChevron\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={isOpen}\n            aria-controls={groupContentId}\n            aria-label={toggleLabel}\n          >\n            <Icon name=\"chevron-right\" size={16} />\n          </StyledSidebarGroupChevron>\n        </StyledSidebarGroupRow>\n      ) : (\n        <StyledSidebarGroupButton\n          type=\"button\"\n          onClick={toggle}\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n          aria-expanded={isOpen}\n          aria-controls={groupContentId}\n          aria-label={toggleLabel}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n          <Icon name=\"chevron-right\" size={16} />\n        </StyledSidebarGroupButton>\n      )}\n      <StyledSidebarGroupContent id={groupContentId} $isOpen={isOpen}>\n        {children.map((child: NavItemLink, index: number) => (\n          <SidebarNavLink\n            key={index}\n            link={child}\n            depth={depth + 1}\n            pathname={pathname}\n            onNavigate={onNavigate}\n          />\n        ))}\n      </StyledSidebarGroupContent>\n    </li>\n  );\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n  const sidebarId = useId();\n  const navRef = useRef<HTMLElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  // Bring the current page's link into view within the sidebar's own scroll\n  // area when it starts off-screen (deep pages, in-content links, search).\n  // Scoped to the nav via scrollTo so the main document never jumps.\n  useEffect(() => {\n    const nav = navRef.current;\n    if (!nav) return;\n    const active = nav.querySelector<HTMLElement>('[aria-current=\"page\"]');\n    if (!active) return;\n\n    const navRect = nav.getBoundingClientRect();\n    const activeRect = active.getBoundingClientRect();\n\n    // The theme-toggle footer is sticky over the bottom of the scroll area\n    // (~60px tall), so links underneath it are covered rather than visible.\n    // Clamp the visible bottom to the footer's top edge when it's pinned.\n    const footerRect = footerRef.current?.getBoundingClientRect();\n    const visibleBottom = footerRect\n      ? Math.min(navRect.bottom, footerRect.top)\n      : navRect.bottom;\n\n    const isOutOfView =\n      activeRect.top < navRect.top || activeRect.bottom > visibleBottom;\n    if (!isOutOfView) return;\n\n    // Center within the visible band (nav top .. footer top), not the full\n    // nav height, so the link never settles behind the footer.\n    const visibleHeight = visibleBottom - navRect.top;\n    const target =\n      nav.scrollTop +\n      (activeRect.top - navRect.top) -\n      (visibleHeight - active.clientHeight) / 2;\n\n    // Animate the scroll, but honor users who opt out of motion.\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    nav.scrollTo({\n      top: Math.max(0, target),\n      behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\n    });\n  }, [pathname]);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n        aria-label={\n          isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"\n        }\n        aria-expanded={isMobileMenuOpen}\n        aria-controls={sidebarId}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        id={sidebarId}\n        ref={navRef}\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>\n                    {item.icon && <Icon name={item.icon} size={16} />}\n                    {item.label}\n                  </StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => (\n                    <SidebarNavLink\n                      key={indexChild}\n                      link={link}\n                      depth={0}\n                      pathname={pathname}\n                      onNavigate={() => setIsMobileMenuOpen(false)}\n                    />\n                  ))}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter ref={footerRef}>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <ThemeToggle $shortcut />\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n\n      {/* Outside StyledSidebar on purpose: focus mode slides that whole\n          column away, and the toggle has to survive it. */}\n      <FocusModeToggle />\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";