export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { ChatLauncher, useOnClickOutside } from \"cherry-styled-components\";\nimport { Search } from \"lucide-react\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext } from \"@/components/Chat\";\nimport {\n  SearchContext,\n  SearchKbd,\n  StyledSearchButton,\n} from \"@/components/SearchDocs\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n  logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{\n  theme: Theme;\n  $hasChildren: boolean;\n  $pinned: boolean;\n}>`\n  /* In normal flow at the top of the page, fixed only once the page scrolls.\n     iOS Safari refuses to color its toolbar from the theme-color meta while\n     a sticky or fixed element touches the top edge - whatever that element's\n     background (transparent, frosted, or opaque; the Doccupine platform\n     site's header is position: relative on its app pages for the same\n     reason). At scroll position zero an in-flow header occupies exactly the\n     place a sticky one would, so the swap is invisible; while scrolled, the\n     toolbar is collapsed anyway. StyledHeaderShell holds the header's\n     measured height while it is fixed, so pinning never shifts the page. */\n  position: relative;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${({ $pinned }) =>\n    $pinned &&\n    css`\n      position: fixed;\n      left: 0;\n    `}\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      ${mq(\"lg\")} {\n        padding-bottom: 16px;\n        padding-top: 16px;\n      }\n    `}\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    background: ${({ theme }) => theme.colors.light};\n    z-index: -2;\n  }\n\n  &::after {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n    z-index: -1;\n  }\n\n  & .logo {\n    display: flex;\n    min-width: max-content;\n\n    & svg,\n    & img {\n      margin: auto;\n      height: auto;\n      width: fit-content;\n      min-width: fit-content;\n      max-width: 182px;\n      max-height: 30px;\n\n      & [fill]:not(.ignore-fill) {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n`;\n\n/**\n * In-flow placeholder that owns the header's space. While the header is\n * pinned (position: fixed, out of flow), the shell keeps the header's\n * measured height so pinning never shifts the page; at the top of the page\n * it collapses to its content.\n */\nconst StyledHeaderShell = styled.div<{ $pinned: boolean; $height: number }>`\n  ${({ $pinned, $height }) =>\n    $pinned &&\n    $height > 0 &&\n    css`\n      height: ${$height}px;\n    `}\n`;\n\nconst StyledHeaderInner = styled.div<{ $hasChildren: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: 16px 0 0 20px;\n\n  ${({ $hasChildren }) =>\n    !$hasChildren &&\n    css`\n      padding-bottom: 16px;\n    `}\n\n  ${mq(\"lg\")} {\n    flex-wrap: nowrap;\n    padding: 0 20px;\n  }\n`;\n\nconst StyledLeftWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: fit-content;\n  padding-right: 20px;\n\n  ${mq(\"lg\")} {\n    padding-right: 0;\n  }\n`;\n\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nfunction Header({ children }: HeaderProps) {\n  const [isOptionActive, setIsOptionActive] = useState(false);\n  const [isLangActive, setIsLangActive] = useState(false);\n  const [isPinned, setIsPinned] = useState(false);\n  const [headerHeight, setHeaderHeight] = useState(0);\n  const headerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const onScroll = () => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.getBoundingClientRect().height);\n      }\n      setIsPinned(window.scrollY > 0);\n    };\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onScroll);\n    return () => {\n      window.removeEventListener(\"scroll\", onScroll);\n      window.removeEventListener(\"resize\", onScroll);\n    };\n  }, []);\n\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const elmRef = useRef<HTMLDivElement>(null);\n  const langRef = useRef<HTMLSpanElement>(null);\n  const closeMenu = useCallback(() => {\n    setIsOptionActive(false);\n    setIsLangActive(false);\n  }, []);\n\n  useOnClickOutside(\n    [elmRef, wrapperRef],\n    isOptionActive ? closeMenu : () => {},\n  );\n  useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n  const { isChatActive } = useContext(ChatContext);\n  const { openSearch } = useContext(SearchContext);\n\n  return (\n    <StyledHeaderShell $pinned={isPinned} $height={headerHeight}>\n      <StyledHeader\n        $hasChildren={children ? true : false}\n        $pinned={isPinned}\n        id=\"header\"\n        ref={headerRef}\n      >\n        <StyledHeaderInner $hasChildren={children ? true : false}>\n          <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n            {customThemeJson.logo ? (\n              <>\n                {/* Both logos render; .light-only and .dark-only classes in\n                    GlobalStyles hide the inactive one based on the \"dark\" class\n                    on <html>. Avoids a JS-driven swap so no flash on first load. */}\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  className=\"light-only\"\n                  src={customThemeJson.logo.light}\n                  alt=\"Logo\"\n                  width=\"100\"\n                  height=\"100\"\n                />\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  className=\"dark-only\"\n                  src={customThemeJson.logo.dark}\n                  alt=\"Logo\"\n                  width=\"100\"\n                  height=\"100\"\n                />\n              </>\n            ) : (\n              <Logo />\n            )}\n          </Link>\n          {children}\n          <StyledLeftWrapper>\n            <StyledSearchButton onClick={openSearch} aria-label=\"Search docs\">\n              <Search size={14} />\n              <SearchKbd>&#8984;K</SearchKbd>\n            </StyledSearchButton>\n            {isChatActive && <ChatLauncher $glow />}\n          </StyledLeftWrapper>\n        </StyledHeaderInner>\n      </StyledHeader>\n    </StyledHeaderShell>\n  );\n}\n\nexport { Header };\n";