export declare const actionBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  interactiveStyles,\n  resetButton,\n  Textarea,\n} from \"cherry-styled-components\";\nimport { SectionBarContext } from \"@/components/layout/DocsComponents\";\nimport { StyledSmallButton } from \"@/components/layout/SharedStyled\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n  // When set, an RSS button linking to this page's feed renders next to the\n  // copy pill.\n  rssHref?: string;\n}\n\nconst StyledActionBar = styled.div<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n}>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 12px 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 640px;\n  margin: auto;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 12px 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  display: flex;\n  gap: 12px;\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $copied: boolean;\n}>`\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n`;\n\n// StyledSmallButton carries a -6px right margin for edge alignment; inside\n// the pill group that would eat into the gap, so it is neutralized here.\nconst StyledActionBarGroup = styled.div`\n  display: flex;\n  gap: 12px;\n\n  & > * {\n    margin-right: 0;\n  }\n`;\n\nconst StyledRssLink = styled(StyledSmallButton)<{ theme: Theme }>`\n  text-decoration: none;\n  color: ${({ theme }) => theme.colors.primary};\n  padding: 2px 8px;\n\n  & svg.lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\n// Mirrors the geometry and interaction of Cherry's ThemeToggle so every pill\n// on this side of the bar looks identical: interactiveStyles supplies the\n// border highlight + focus/active rings (no scale effect), and the 30px\n// height with a fully rounded radius matches the toggle's knob track.\nconst actionPillStyles = (theme: Theme) => css`\n  height: 30px;\n  border-radius: 30px;\n  display: flex;\n  align-items: center;\n  margin: auto 0;\n  background: ${theme.colors.light};\n  border-color: ${theme.colors.grayLight};\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & svg[stroke] {\n    stroke: ${theme.colors.primary};\n  }\n\n  &:hover svg[stroke] {\n    stroke: ${theme.colors.accent};\n  }\n`;\n\nconst StyledMarkdownLink = styled.a<{ theme: Theme }>`\n  ${resetButton}\n  ${interactiveStyles}\n  ${({ theme }) => actionPillStyles(theme)}\n  width: 30px;\n  justify-content: center;\n  text-decoration: none;\n`;\n\n// The space-between layout with 6px padding puts each 16px icon's center\n// exactly where the 24px knob's center sits in its resting (left: 2px) and\n// active (translateX(26px)) positions.\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  ${interactiveStyles}\n  ${({ theme }) => actionPillStyles(theme)}\n  width: 56px;\n  justify-content: space-between;\n  padding: 0 6px;\n  position: relative;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(26px);\n      `}\n  }\n`;\n\n// The raw-content view renders a full-viewport textarea. That rule is scoped to\n// the raw view (`$raw`) so it never leaks into textareas rendered inside page\n// content - e.g. the API playground's request-body editor, which sits inside\n// this same ActionBar in the normal (view) mode.\nconst StyledContent = styled.div<{\n  theme: Theme;\n  $hasSectionBar?: boolean;\n  $raw?: boolean;\n}>`\n  padding-top: 20px;\n  transition: all 0.3s ease;\n\n  ${({ $raw, $hasSectionBar }) =>\n    $raw &&\n    css`\n      & textarea {\n        max-width: 640px;\n        margin: auto;\n        width: 100%;\n        height: 100%;\n        min-height: calc(100vh - ${$hasSectionBar ? 202 : 160}px);\n\n        ${mq(\"lg\")} {\n          min-height: calc(100vh - 159px);\n        }\n      }\n    `}\n`;\n\n// Every page ships a static markdown mirror under public/: \"/\" serves\n// \"/index.md\" and \"/{slug}\" serves \"/{slug}.md\".\nfunction toMarkdownHref(pathname: string) {\n  const base = pathname.endsWith(\"/\") ? pathname.slice(0, -1) : pathname;\n  return `${base === \"\" ? \"/index\" : base}.md`;\n}\n\nfunction ActionBar({ children, content, rssHref }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar data-markdown-ignore>\n        <StyledActionBarGroup>\n          <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n            {copied ? (\n              <>\n                <Icon name=\"check\" size={16} />\n                Copied!\n              </>\n            ) : (\n              <>\n                <Icon name=\"copy\" size={16} />\n                Copy content\n              </>\n            )}\n          </StyledCopyButton>\n          {rssHref && (\n            <StyledRssLink as=\"a\" href={rssHref} aria-label=\"RSS feed\">\n              <Icon name=\"rss\" size={16} />\n              RSS\n            </StyledRssLink>\n          )}\n        </StyledActionBarGroup>\n        <StyledActionBarContent>\n          <StyledMarkdownLink\n            href={toMarkdownHref(pathname)}\n            aria-label=\"View as Markdown\"\n            title=\"View as Markdown\"\n          >\n            <Icon name=\"FileText\" />\n          </StyledMarkdownLink>\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle View\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>{children}</StyledContent>\n      )}\n      {!isView && (\n        <StyledContent $hasSectionBar={hasSectionBar} $raw>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };\n";