doccupine 0.0.104 → 0.0.106

package/dist/templates/components/Chat.d.ts

@@ -1 +1 @@
-export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Button } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n  StyledSmallButton,\n  interactiveStyles,\n  thinScrollbar,\n} from \"@/components/layout/SharedStyled\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100dvh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  opacity: 1;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n      opacity: 0;\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 12px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 40%, transparent)`};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 60%, transparent)`};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) => theme.colors.surface};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n  opacity: 0;\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      opacity: 1;\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledGlowSmallButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  isolation: isolate;\n  margin-right: 0;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 0;\n\n  &::before {\n    content: \"\";\n    inset: -2px;\n    border-radius: 8px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: -1;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -2;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:hover::after {\n    opacity: 1;\n  }\n\n  & span {\n    padding: 6px 8px;\n    display: flex;\n    background: ${({ theme }) => theme.colors.light};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    gap: 6px;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & ol {\n    & > li {\n      padding-left: 20px;\n\n      &::before {\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledSources = styled.div`\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin: -5px 0 20px;\n`;\n\nconst StyledSourceLink = styled(Link)<{ theme: Theme }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.primary};\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  & * {\n    margin: auto 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\nconst StyledChatCloseButton = styled.button<{ theme: Theme }>`\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  color: ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\ntype Source = {\n  id: string;\n  path: string;\n  uri: string;\n  score: number;\n};\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n  sources?: Source[];\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  inputRef,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        ref={inputRef}\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction ChatButtonCTA() {\n  const { setIsOpen, isOpen, answer, setAnswer, chatInputRef } =\n    useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={() => {\n        const next = !isOpen;\n        setIsOpen(next);\n        if (next) {\n          if (answer.length === 0) {\n            setAnswer([\n              { text: \"Hey there, how can I assist you?\", answer: true },\n            ]);\n          }\n          setTimeout(() => {\n            chatInputRef.current?.focus();\n          }, 350);\n        }\n      }}\n      aria-label=\"Ask AI Assistant\"\n      $hasContent={isOpen}\n      type=\"button\"\n    >\n      <span>\n        <Sparkles size={16} />\n        Ask AI\n      </span>\n    </StyledGlowSmallButton>\n  );\n}\n\nfunction Chat() {\n  const {\n    isOpen,\n    question,\n    setQuestion,\n    loading,\n    error,\n    answer,\n    ask,\n    closeChat,\n    resetChat,\n    chatInputRef,\n  } = useContext(ChatContext);\n  const endRef = useRef<HTMLDivElement | null>(null);\n\n  useLockBodyScroll(isOpen);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      chatInputRef.current?.focus();\n    }\n  }, [answer, chatInputRef]);\n\n  return (\n    <>\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatTitleIconWrapper>\n            <StyledChatCloseButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw size={18} />\n            </StyledChatCloseButton>\n            <StyledChatCloseButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </StyledChatCloseButton>\n          </StyledChatTitleIconWrapper>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <React.Fragment key={i}>\n              <StyledAnswer $isAnswer={a.answer ?? false}>\n                {a.answer && a.mdx ? (\n                  <MDXRemote {...a.mdx} components={mdxComponents} />\n                ) : (\n                  a.text\n                )}\n              </StyledAnswer>\n              {a.answer && a.sources && a.sources.length > 0 && (\n                <StyledSources>\n                  {a.sources.map((src) => {\n                    const slug = src.uri\n                      .replace(\"docs://\", \"\")\n                      .replace(/^\\/+/, \"\");\n                    const href = slug ? `/${slug}/` : \"/\";\n                    const label = slug\n                      ? slug\n                          .split(\"/\")\n                          .pop()!\n                          .replace(/-/g, \" \")\n                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())\n                      : \"Home\";\n                    return (\n                      <StyledSourceLink\n                        key={src.id}\n                        href={href}\n                        onClick={() => {\n                          if (window.innerWidth <= 992) {\n                            closeChat();\n                          }\n                        }}\n                      >\n                        {label}\n                      </StyledSourceLink>\n                    );\n                  })}\n                </StyledSources>\n              )}\n            </React.Fragment>\n          ))}\n        {loading && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          inputRef={chatInputRef}\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  isChatActive: boolean;\n  question: string;\n  setQuestion: (q: string) => void;\n  loading: boolean;\n  error: string | null;\n  answer: Answer[];\n  setAnswer: (answers: Answer[]) => void;\n  ask: (e: React.FormEvent) => void;\n  closeChat: () => void;\n  resetChat: () => void;\n  chatInputRef: React.RefObject<HTMLInputElement | null>;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n  question: \"\",\n  setQuestion: () => {},\n  loading: false,\n  error: null,\n  answer: [],\n  setAnswer: () => {},\n  ask: () => {},\n  closeChat: () => {},\n  resetChat: () => {},\n  chatInputRef: { current: null },\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const abortRef = useRef<AbortController | null>(null);\n  const chatInputRef = useRef<HTMLInputElement | null>(null);\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    const currentQuestion = question;\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const mergedQuestions =\n      answer.length > 0\n        ? [...answer, { text: currentQuestion, answer: false }]\n        : [{ text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      const history = answer\n        .filter((a) => a.text.trim() !== \"\")\n        .map((a) => ({\n          role: a.answer ? (\"assistant\" as const) : (\"user\" as const),\n          content: a.text,\n        }));\n\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion, history }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        const errorData = await res.json();\n        throw new Error(errorData.error || \"Request failed\");\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      let sources: Source[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      const streamingAnswerIndex = mergedQuestions.length;\n      setAnswer([...mergedQuestions, { text: \"\", answer: true }]);\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"metadata\") {\n                const allSources: Source[] = data.data?.sources ?? [];\n                const seen = new Set<string>();\n                sources = allSources.filter((s: Source) => {\n                  if (s.score < 0.4 || seen.has(s.uri)) return false;\n                  seen.add(s.uri);\n                  return true;\n                });\n              } else if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  function closeChat() {\n    setIsOpen(false);\n  }\n\n  function resetChat() {\n    abortRef.current?.abort();\n    setLoading(false);\n    setError(null);\n    setAnswer([{ text: \"Hey there, how can I assist you?\", answer: true }]);\n  }\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n        question,\n        setQuestion,\n        loading,\n        error,\n        answer,\n        setAnswer,\n        ask,\n        closeChat,\n        resetChat,\n        chatInputRef,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext, ChatButtonCTA };\n";
+export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Button, IconButton } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n  StyledSmallButton,\n  interactiveStyles,\n  thinScrollbar,\n} from \"@/components/layout/SharedStyled\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100dvh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  opacity: 1;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n      opacity: 0;\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 12px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 40%, transparent)`};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 60%, transparent)`};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) => theme.colors.surface};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n  opacity: 0;\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      opacity: 1;\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledGlowSmallButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  isolation: isolate;\n  margin-right: 0;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 0;\n\n  &::before {\n    content: \"\";\n    inset: -2px;\n    border-radius: 8px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: -1;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -2;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:hover::after {\n    opacity: 1;\n  }\n\n  & span {\n    padding: 6px 8px;\n    display: flex;\n    background: ${({ theme }) => theme.colors.light};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    gap: 6px;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & ol {\n    & > li {\n      padding-left: 20px;\n\n      &::before {\n        position: absolute;\n        top: 0;\n        left: 0;\n      }\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledSources = styled.div`\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin: -5px 0 20px;\n`;\n\nconst StyledSourceLink = styled(Link)<{ theme: Theme }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.primary};\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  & * {\n    margin: auto 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\ntype Source = {\n  id: string;\n  path: string;\n  uri: string;\n  score: number;\n};\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n  sources?: Source[];\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  inputRef,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        ref={inputRef}\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction ChatButtonCTA() {\n  const { setIsOpen, isOpen, answer, setAnswer, chatInputRef } =\n    useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={() => {\n        const next = !isOpen;\n        setIsOpen(next);\n        if (next) {\n          if (answer.length === 0) {\n            setAnswer([\n              { text: \"Hey there, how can I assist you?\", answer: true },\n            ]);\n          }\n          setTimeout(() => {\n            chatInputRef.current?.focus();\n          }, 350);\n        }\n      }}\n      aria-label=\"Ask AI Assistant\"\n      $hasContent={isOpen}\n      type=\"button\"\n    >\n      <span>\n        <Sparkles size={16} />\n        Ask AI\n      </span>\n    </StyledGlowSmallButton>\n  );\n}\n\nfunction Chat() {\n  const {\n    isOpen,\n    question,\n    setQuestion,\n    loading,\n    error,\n    answer,\n    ask,\n    closeChat,\n    resetChat,\n    chatInputRef,\n  } = useContext(ChatContext);\n  const endRef = useRef<HTMLDivElement | null>(null);\n\n  useLockBodyScroll(isOpen);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      chatInputRef.current?.focus();\n    }\n  }, [answer, chatInputRef]);\n\n  return (\n    <>\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatTitleIconWrapper>\n            <IconButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw />\n            </IconButton>\n            <IconButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </IconButton>\n          </StyledChatTitleIconWrapper>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <React.Fragment key={i}>\n              <StyledAnswer $isAnswer={a.answer ?? false}>\n                {a.answer && a.mdx ? (\n                  <MDXRemote {...a.mdx} components={mdxComponents} />\n                ) : (\n                  a.text\n                )}\n              </StyledAnswer>\n              {a.answer && a.sources && a.sources.length > 0 && (\n                <StyledSources>\n                  {a.sources.map((src) => {\n                    const slug = src.uri\n                      .replace(\"docs://\", \"\")\n                      .replace(/^\\/+/, \"\");\n                    const href = slug ? `/${slug}/` : \"/\";\n                    const label = slug\n                      ? slug\n                          .split(\"/\")\n                          .pop()!\n                          .replace(/-/g, \" \")\n                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())\n                      : \"Home\";\n                    return (\n                      <StyledSourceLink\n                        key={src.id}\n                        href={href}\n                        onClick={() => {\n                          if (window.innerWidth <= 992) {\n                            closeChat();\n                          }\n                        }}\n                      >\n                        {label}\n                      </StyledSourceLink>\n                    );\n                  })}\n                </StyledSources>\n              )}\n            </React.Fragment>\n          ))}\n        {loading && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          inputRef={chatInputRef}\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  isChatActive: boolean;\n  question: string;\n  setQuestion: (q: string) => void;\n  loading: boolean;\n  error: string | null;\n  answer: Answer[];\n  setAnswer: (answers: Answer[]) => void;\n  ask: (e: React.FormEvent) => void;\n  closeChat: () => void;\n  resetChat: () => void;\n  chatInputRef: React.RefObject<HTMLInputElement | null>;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  isChatActive: false,\n  question: \"\",\n  setQuestion: () => {},\n  loading: false,\n  error: null,\n  answer: [],\n  setAnswer: () => {},\n  ask: () => {},\n  closeChat: () => {},\n  resetChat: () => {},\n  chatInputRef: { current: null },\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const abortRef = useRef<AbortController | null>(null);\n  const chatInputRef = useRef<HTMLInputElement | null>(null);\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    const currentQuestion = question;\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const mergedQuestions =\n      answer.length > 0\n        ? [...answer, { text: currentQuestion, answer: false }]\n        : [{ text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      const history = answer\n        .filter((a) => a.text.trim() !== \"\")\n        .map((a) => ({\n          role: a.answer ? (\"assistant\" as const) : (\"user\" as const),\n          content: a.text,\n        }));\n\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion, history }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        const errorData = await res.json();\n        throw new Error(errorData.error || \"Request failed\");\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      let sources: Source[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      const streamingAnswerIndex = mergedQuestions.length;\n      setAnswer([...mergedQuestions, { text: \"\", answer: true }]);\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"metadata\") {\n                const allSources: Source[] = data.data?.sources ?? [];\n                const seen = new Set<string>();\n                sources = allSources.filter((s: Source) => {\n                  if (s.score < 0.4 || seen.has(s.uri)) return false;\n                  seen.add(s.uri);\n                  return true;\n                });\n              } else if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  function closeChat() {\n    setIsOpen(false);\n  }\n\n  function resetChat() {\n    abortRef.current?.abort();\n    setLoading(false);\n    setError(null);\n    setAnswer([{ text: \"Hey there, how can I assist you?\", answer: true }]);\n  }\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        isChatActive,\n        question,\n        setQuestion,\n        loading,\n        error,\n        answer,\n        setAnswer,\n        ask,\n        closeChat,\n        resetChat,\n        chatInputRef,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext, ChatButtonCTA };\n";

package/dist/templates/components/Chat.js

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from "react";
 import styled, { css, keyframes } from "styled-components";
-import { Button } from "cherry-styled-components";
+import { Button, IconButton } from "cherry-styled-components";
 import { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from "lucide-react";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -669,24 +669,6 @@ const StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>\`
   color: \${({ theme }) => theme.colors.dark};
 \`;
 
-const StyledChatCloseButton = styled.button<{ theme: Theme }>\`
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  color: \${({ theme }) => theme.colors.primary};
-
-  &:hover {
-    color: \${({ theme }) => theme.colors.primaryDark};
-    transform: scale(1.05);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-\`;
-
 type Source = {
   id: string;
   path: string;
@@ -854,20 +836,20 @@ function Chat() {
             <h3>AI Assistant</h3>
           </StyledChatTitleIconWrapper>
           <StyledChatTitleIconWrapper>
-            <StyledChatCloseButton
+            <IconButton
               onClick={resetChat}
               aria-label="Reset chat history"
               title="Reset chat history"
             >
-              <RotateCcw size={18} />
-            </StyledChatCloseButton>
-            <StyledChatCloseButton
+              <RotateCcw />
+            </IconButton>
+            <IconButton
               onClick={closeChat}
               aria-label="Close chat"
               title="Close chat"
             >
               <X />
-            </StyledChatCloseButton>
+            </IconButton>
           </StyledChatTitleIconWrapper>
         </StyledChatTitle>
         {answer &&

package/dist/templates/components/SearchModalContent.d.ts

@@ -1 +1 @@
-export declare const searchModalContentTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Search } from \"lucide-react\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { Spinner } from \"@/components/Spinner\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\nexport interface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\nexport interface MergedResult {\n  page: PageItem;\n  snippet?: string;\n}\n\nexport interface SearchModalContentProps {\n  isClosing: boolean;\n  closeSearch: () => void;\n  onCloseAnimationEnd: () => void;\n  query: string;\n  setQuery: (q: string) => void;\n  activeIndex: number;\n  setActiveIndex: (i: number | ((prev: number) => number)) => void;\n  resultsRef: React.RefObject<HTMLUListElement | null>;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  merged: MergedResult[];\n  sectionLabels: Record<string, string>;\n  isSearching: boolean;\n  navigate: (slug: string) => void;\n}\n\nconst ANIMATION_MS = 150;\n\nconst backdropIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst backdropOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst modalIn = keyframes`\n  from { opacity: 0; transform: scale(0.96) translateY(-8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n`;\n\nconst modalOut = keyframes`\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to { opacity: 0; transform: scale(0.96) translateY(-8px); }\n`;\n\nconst StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  position: fixed;\n  inset: 0;\n  z-index: 9999;\n  /* Backdrop is intentionally near-black in both modes \u2014 covers everything\n     behind the modal regardless of the user's theme. */\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 20px;\n  animation: ${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    padding: 120px 20px 20px 20px;\n  }\n`;\n\nconst StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.xs};\n  width: 100%;\n  max-width: 560px;\n  max-height: calc(100dvh - 40px);\n  display: flex;\n  flex-direction: column;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding-bottom: 8px;\n  animation: ${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    max-height: calc(100dvh - 240px);\n  }\n`;\n\nconst StyledInputWrapper = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  flex-shrink: 0;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg.lucide {\n    color: ${({ theme }) => theme.colors.gray};\n    flex-shrink: 0;\n  }\n`;\n\nconst StyledInput = styled.input<{ theme: Theme }>`\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  color: ${({ theme }) => theme.colors.dark};\n  font-family: inherit;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.colors.gray};\n  }\n`;\n\nconst StyledResults = styled.ul<{ theme: Theme }>`\n  list-style: none;\n  margin: 8px 0 0 0;\n  padding: 0 8px;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  -webkit-overflow-scrolling: touch;\n  ${thinScrollbar};\n`;\n\nconst StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>`\n  padding: 10px 12px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  transition: background 0.15s ease;\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      background: color-mix(\n        in srgb,\n        ${theme.colors.primaryLight} 20%,\n        transparent\n      );\n    `}\n\n  &:hover {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 15%, transparent)`};\n  }\n`;\n\nconst StyledResultTitle = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.dark};\n  display: block;\n`;\n\nconst StyledResultMeta = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n  display: block;\n  margin-top: 2px;\n`;\n\nconst StyledSnippet = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: block;\n  margin-top: 4px;\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & mark {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 35%, transparent)`};\n    color: inherit;\n    border-radius: 4px;\n    padding: 0 1px;\n  }\n`;\n\nconst StyledEmpty = styled.div<{ theme: Theme }>`\n  padding: 20px 20px 12px;\n  min-height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledKbd = styled.kbd<{ theme: Theme }>`\n  font-size: 11px;\n  font-family: inherit;\n  background: ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.grayDark};\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: auto;\n  font-weight: 600;\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: initial;\n  }\n`;\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction highlightMatch(snippet: string, query: string): string {\n  const escaped = escapeHtml(snippet);\n  if (!query.trim()) return escaped;\n  const q = escapeHtml(query.trim());\n  const regex = new RegExp(\n    `(${q.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`,\n    \"gi\",\n  );\n  return escaped.replace(regex, \"<mark>$1</mark>\");\n}\n\nexport function SearchModalContent({\n  isClosing,\n  closeSearch,\n  onCloseAnimationEnd,\n  query,\n  setQuery,\n  activeIndex,\n  setActiveIndex,\n  resultsRef,\n  onKeyDown,\n  merged,\n  sectionLabels,\n  isSearching,\n  navigate,\n}: SearchModalContentProps) {\n  return (\n    <StyledBackdrop\n      $isClosing={isClosing}\n      onClick={closeSearch}\n      onAnimationEnd={onCloseAnimationEnd}\n    >\n      <StyledModal $isClosing={isClosing} onClick={(e) => e.stopPropagation()}>\n        <StyledInputWrapper>\n          <Search size={18} />\n          <StyledInput\n            autoFocus\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n              setActiveIndex(0);\n            }}\n            onKeyDown={onKeyDown}\n            placeholder=\"Search docs...\"\n            autoComplete=\"off\"\n            spellCheck={false}\n          />\n          <StyledKbd>Esc</StyledKbd>\n        </StyledInputWrapper>\n        {merged.length > 0 ? (\n          <StyledResults ref={resultsRef}>\n            {merged.map((result, index) => (\n              <StyledResultItem\n                key={result.page.slug + result.page.section}\n                $isActive={index === activeIndex}\n                onClick={() => navigate(result.page.slug)}\n                onMouseEnter={() => setActiveIndex(index)}\n              >\n                <StyledResultTitle>{result.page.title}</StyledResultTitle>\n                <StyledResultMeta>\n                  {result.page.section\n                    ? `${sectionLabels[result.page.section] || result.page.section} / `\n                    : \"\"}\n                  {result.page.category}\n                </StyledResultMeta>\n                {result.snippet && (\n                  <StyledSnippet\n                    dangerouslySetInnerHTML={{\n                      __html: highlightMatch(result.snippet, query),\n                    }}\n                  />\n                )}\n              </StyledResultItem>\n            ))}\n          </StyledResults>\n        ) : (\n          <StyledEmpty>\n            {isSearching ? <Spinner size={18} /> : \"No results found\"}\n          </StyledEmpty>\n        )}\n      </StyledModal>\n    </StyledBackdrop>\n  );\n}\n";
+export declare const searchModalContentTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Search, X } from \"lucide-react\";\nimport { IconButton } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { Spinner } from \"@/components/Spinner\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\nexport interface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\nexport interface MergedResult {\n  page: PageItem;\n  snippet?: string;\n}\n\nexport interface SearchModalContentProps {\n  isClosing: boolean;\n  closeSearch: () => void;\n  onCloseAnimationEnd: () => void;\n  query: string;\n  setQuery: (q: string) => void;\n  activeIndex: number;\n  setActiveIndex: (i: number | ((prev: number) => number)) => void;\n  resultsRef: React.RefObject<HTMLUListElement | null>;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  merged: MergedResult[];\n  sectionLabels: Record<string, string>;\n  isSearching: boolean;\n  navigate: (slug: string) => void;\n}\n\nconst ANIMATION_MS = 150;\n\nconst backdropIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst backdropOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst modalIn = keyframes`\n  from { opacity: 0; transform: scale(0.96) translateY(-8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n`;\n\nconst modalOut = keyframes`\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to { opacity: 0; transform: scale(0.96) translateY(-8px); }\n`;\n\nconst StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  position: fixed;\n  inset: 0;\n  z-index: 9999;\n  /* Backdrop is intentionally near-black in both modes \u2014 covers everything\n     behind the modal regardless of the user's theme. */\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 20px;\n  animation: ${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    padding: 120px 20px 20px 20px;\n  }\n`;\n\nconst StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.xs};\n  width: 100%;\n  max-width: 560px;\n  max-height: calc(100dvh - 40px);\n  display: flex;\n  flex-direction: column;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding-bottom: 8px;\n  animation: ${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    max-height: calc(100dvh - 240px);\n  }\n`;\n\nconst StyledInputWrapper = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  flex-shrink: 0;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg.lucide {\n    color: ${({ theme }) => theme.colors.gray};\n    flex-shrink: 0;\n  }\n`;\n\nconst StyledInput = styled.input<{ theme: Theme }>`\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  color: ${({ theme }) => theme.colors.dark};\n  font-family: inherit;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.colors.gray};\n  }\n`;\n\nconst StyledResults = styled.ul<{ theme: Theme }>`\n  list-style: none;\n  margin: 8px 0 0 0;\n  padding: 0 8px;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  -webkit-overflow-scrolling: touch;\n  ${thinScrollbar};\n\n  /* The results list is a keyboard-focusable scroll container; frame it with\n     the app focus ring (inset so it hugs the visible viewport and isn't clipped\n     by the scroll overflow) instead of the browser's default outline. */\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nconst StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>`\n  padding: 10px 12px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  transition: background 0.15s ease;\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      background: color-mix(\n        in srgb,\n        ${theme.colors.primaryLight} 20%,\n        transparent\n      );\n    `}\n\n  &:hover {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 15%, transparent)`};\n  }\n`;\n\nconst StyledResultTitle = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.dark};\n  display: block;\n`;\n\nconst StyledResultMeta = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n  display: block;\n  margin-top: 2px;\n`;\n\nconst StyledSnippet = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: block;\n  margin-top: 4px;\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & mark {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 35%, transparent)`};\n    color: inherit;\n    border-radius: 4px;\n    padding: 0 1px;\n  }\n`;\n\nconst StyledEmpty = styled.div<{ theme: Theme }>`\n  padding: 20px 20px 12px;\n  min-height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction highlightMatch(snippet: string, query: string): string {\n  const escaped = escapeHtml(snippet);\n  if (!query.trim()) return escaped;\n  const q = escapeHtml(query.trim());\n  const regex = new RegExp(\n    `(${q.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`,\n    \"gi\",\n  );\n  return escaped.replace(regex, \"<mark>$1</mark>\");\n}\n\nexport function SearchModalContent({\n  isClosing,\n  closeSearch,\n  onCloseAnimationEnd,\n  query,\n  setQuery,\n  activeIndex,\n  setActiveIndex,\n  resultsRef,\n  onKeyDown,\n  merged,\n  sectionLabels,\n  isSearching,\n  navigate,\n}: SearchModalContentProps) {\n  return (\n    <StyledBackdrop\n      $isClosing={isClosing}\n      onClick={closeSearch}\n      onAnimationEnd={onCloseAnimationEnd}\n    >\n      <StyledModal $isClosing={isClosing} onClick={(e) => e.stopPropagation()}>\n        <StyledInputWrapper>\n          <Search size={18} />\n          <StyledInput\n            autoFocus\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n              setActiveIndex(0);\n            }}\n            onKeyDown={onKeyDown}\n            placeholder=\"Search docs...\"\n            autoComplete=\"off\"\n            spellCheck={false}\n          />\n          <IconButton\n            onClick={closeSearch}\n            aria-label=\"Close search\"\n            title=\"Close search\"\n          >\n            <X />\n          </IconButton>\n        </StyledInputWrapper>\n        {merged.length > 0 ? (\n          <StyledResults ref={resultsRef}>\n            {merged.map((result, index) => (\n              <StyledResultItem\n                key={result.page.slug + result.page.section}\n                $isActive={index === activeIndex}\n                onClick={() => navigate(result.page.slug)}\n                onMouseEnter={() => setActiveIndex(index)}\n              >\n                <StyledResultTitle>{result.page.title}</StyledResultTitle>\n                <StyledResultMeta>\n                  {result.page.section\n                    ? `${sectionLabels[result.page.section] || result.page.section} / `\n                    : \"\"}\n                  {result.page.category}\n                </StyledResultMeta>\n                {result.snippet && (\n                  <StyledSnippet\n                    dangerouslySetInnerHTML={{\n                      __html: highlightMatch(result.snippet, query),\n                    }}\n                  />\n                )}\n              </StyledResultItem>\n            ))}\n          </StyledResults>\n        ) : (\n          <StyledEmpty>\n            {isSearching ? <Spinner size={18} /> : \"No results found\"}\n          </StyledEmpty>\n        )}\n      </StyledModal>\n    </StyledBackdrop>\n  );\n}\n";

package/dist/templates/components/SearchModalContent.js

@@ -1,7 +1,8 @@
 export const searchModalContentTemplate = `"use client";
 import React from "react";
 import styled, { css, keyframes } from "styled-components";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
+import { IconButton } from "cherry-styled-components";
 import { mq, Theme } from "@/app/theme";
 import { Spinner } from "@/components/Spinner";
 import { thinScrollbar } from "@/components/layout/SharedStyled";
@@ -135,6 +136,15 @@ const StyledResults = styled.ul<{ theme: Theme }>\`
   min-height: 0;
   -webkit-overflow-scrolling: touch;
   \${thinScrollbar};
+
+  /* The results list is a keyboard-focusable scroll container; frame it with
+     the app focus ring (inset so it hugs the visible viewport and isn't clipped
+     by the scroll overflow) instead of the browser's default outline. */
+  &:focus-visible {
+    outline: none;
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    box-shadow: inset 0 0 0 2px \${({ theme }) => theme.colors.primaryLight};
+  }
 \`;
 
 const StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>\`
@@ -203,22 +213,6 @@ const StyledEmpty = styled.div<{ theme: Theme }>\`
   color: \${({ theme }) => theme.colors.gray};
 \`;
 
-const StyledKbd = styled.kbd<{ theme: Theme }>\`
-  font-size: 11px;
-  font-family: inherit;
-  background: \${({ theme }) => theme.colors.grayLight};
-  color: \${({ theme }) => theme.colors.grayDark};
-  padding: 2px 6px;
-  border-radius: 4px;
-  margin-left: auto;
-  font-weight: 600;
-  display: none;
-
-  \${mq("lg")} {
-    display: initial;
-  }
-\`;
-
 function escapeHtml(str: string): string {
   return str
     .replace(/&/g, "&amp;")
@@ -274,7 +268,13 @@ export function SearchModalContent({
             autoComplete="off"
             spellCheck={false}
           />
-          <StyledKbd>Esc</StyledKbd>
+          <IconButton
+            onClick={closeSearch}
+            aria-label="Close search"
+            title="Close search"
+          >
+            <X />
+          </IconButton>
         </StyledInputWrapper>
         {merged.length > 0 ? (
           <StyledResults ref={resultsRef}>

package/dist/templates/components/layout/Accordion.d.ts

@@ -1 +1 @@
-export declare const accordionTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledAccordion = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)};\n  width: 100%;\n`;\n\nconst StyledAccordionTitle = styled.h3<{ theme: Theme; $isOpen: boolean }>`\n  cursor: pointer;\n  margin: 0;\n  padding: 0 40px 0 0;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.primary};\n  transition: color 0.3s ease;\n  position: relative;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n  }\n\n  & .lucide-chevron-down {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: translateY(-50%) rotate(180deg);\n      `}\n  }\n`;\n\nconst StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      margin: 20px 0 0;\n      height: auto;\n    `}\n`;\n\ninterface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n}\n\nfunction Accordion({ children, title }: AccordionProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <StyledAccordion>\n      <StyledAccordionTitle\n        onClick={() => setIsOpen(!isOpen)}\n        $isOpen={isOpen}\n        role=\"button\"\n        aria-expanded={isOpen}\n      >\n        {title} <Icon name=\"ChevronDown\" />\n      </StyledAccordionTitle>\n      <StyledAccordionContent $isOpen={isOpen}>\n        {children}\n      </StyledAccordionContent>\n    </StyledAccordion>\n  );\n}\n\nexport { Accordion };\n";
+export declare const accordionTemplate = "\"use client\";\nimport { useId, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledAccordion = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)};\n  width: 100%;\n`;\n\nconst StyledAccordionTitle = styled.button<{ theme: Theme; $isOpen: boolean }>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  border: none;\n  background: none;\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n  margin: 0;\n  padding: 0 40px 0 0;\n  ${({ theme }) => styledText(theme)};\n  font-weight: 700;\n  color: ${({ theme }) => theme.colors.primary};\n  transition: color 0.3s ease;\n  position: relative;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\n  }\n\n  & .lucide-chevron-down {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: translateY(-50%) rotate(180deg);\n      `}\n  }\n`;\n\nconst StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      margin: 20px 0 0;\n      height: auto;\n    `}\n`;\n\ninterface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n}\n\nfunction Accordion({ children, title }: AccordionProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const contentId = useId();\n\n  return (\n    <StyledAccordion>\n      <StyledAccordionTitle\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        $isOpen={isOpen}\n        aria-expanded={isOpen}\n        aria-controls={contentId}\n      >\n        {title} <Icon name=\"ChevronDown\" />\n      </StyledAccordionTitle>\n      <StyledAccordionContent id={contentId} role=\"region\" $isOpen={isOpen}>\n        {children}\n      </StyledAccordionContent>\n    </StyledAccordion>\n  );\n}\n\nexport { Accordion };\n";

package/dist/templates/components/layout/Accordion.js

@@ -1,5 +1,5 @@
 export const accordionTemplate = `"use client";
-import { useState } from "react";
+import { useId, useState } from "react";
 import styled, { css } from "styled-components";
 import { styledText } from "cherry-styled-components";
 import { Theme } from "@/app/theme";
@@ -15,11 +15,19 @@ const StyledAccordion = styled.div<{ theme: Theme }>\`
   width: 100%;
 \`;
 
-const StyledAccordionTitle = styled.h3<{ theme: Theme; $isOpen: boolean }>\`
+const StyledAccordionTitle = styled.button<{ theme: Theme; $isOpen: boolean }>\`
+  appearance: none;
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  text-align: left;
+  font: inherit;
   cursor: pointer;
   margin: 0;
   padding: 0 40px 0 0;
   \${({ theme }) => styledText(theme)};
+  font-weight: 700;
   color: \${({ theme }) => theme.colors.primary};
   transition: color 0.3s ease;
   position: relative;
@@ -70,18 +78,20 @@ interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
 
 function Accordion({ children, title }: AccordionProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const contentId = useId();
 
   return (
     <StyledAccordion>
       <StyledAccordionTitle
+        type="button"
         onClick={() => setIsOpen(!isOpen)}
         $isOpen={isOpen}
-        role="button"
         aria-expanded={isOpen}
+        aria-controls={contentId}
       >
         {title} <Icon name="ChevronDown" />
       </StyledAccordionTitle>
-      <StyledAccordionContent $isOpen={isOpen}>
+      <StyledAccordionContent id={contentId} role="region" $isOpen={isOpen}>
         {children}
       </StyledAccordionContent>
     </StyledAccordion>

package/dist/templates/components/layout/Button.d.ts

@@ -1 +1 @@
-export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  rel?: string;\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\n// Cherry's buttonStyles picks filled-button text via `isDark ? colors.dark : colors.light`.\n// Our theme's isDark is a stub (false) because mode switching lives in CSS vars, so\n// the fallback resolves to --color-light (black in dark mode). Re-pin to `surface`,\n// which resolves to white in both modes, for the filled, non-disabled case.\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, $error, disabled }) =>\n    buttonStyles(\n      theme,\n      $variant,\n      $size,\n      $outline,\n      $fullWidth,\n      $error,\n      disabled,\n    )}\n\n  ${({ theme, $outline, disabled }) =>\n    !disabled && !$outline && `color: ${theme.colors.surface};`}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, $error, disabled }) =>\n    buttonStyles(\n      theme,\n      $variant,\n      $size,\n      $outline,\n      $fullWidth,\n      $error,\n      disabled,\n    )}\n\n  ${({ theme, $outline, disabled }) =>\n    !disabled && !$outline && `color: ${theme.colors.surface};`}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  target,\n  rel,\n  ...props\n}: LinkButtonProps) {\n  const isExternal = typeof href === \"string\" && /^(https?:)?\\/\\//i.test(href);\n  const resolvedTarget = target ?? (isExternal ? \"_blank\" : undefined);\n  const resolvedRel =\n    rel ?? (resolvedTarget === \"_blank\" ? \"noopener noreferrer\" : undefined);\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        target={resolvedTarget}\n        rel={resolvedRel}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";
+export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  rel?: string;\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\n// Cherry's buttonStyles picks filled-button text via `isDark ? colors.dark : colors.light`.\n// Our theme's isDark is a stub (false) because mode switching lives in CSS vars, so\n// the fallback resolves to --color-light (black in dark mode). Re-pin to `surface`,\n// which resolves to white in both modes, for the filled, non-disabled case.\n// The \"button-link\" class opts this anchor out of the global a:focus-visible\n// ring (see GlobalStyles) so Cherry's buttonStyles owns the button's focus look.\nconst StyledLinkButton = styled(Link).attrs({\n  className: \"button-link\",\n})<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, $error, disabled }) =>\n    buttonStyles(\n      theme,\n      $variant,\n      $size,\n      $outline,\n      $fullWidth,\n      $error,\n      disabled,\n    )}\n\n  ${({ theme, $outline, disabled }) =>\n    !disabled && !$outline && `color: ${theme.colors.surface};`}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, $error, disabled }) =>\n    buttonStyles(\n      theme,\n      $variant,\n      $size,\n      $outline,\n      $fullWidth,\n      $error,\n      disabled,\n    )}\n\n  ${({ theme, $outline, disabled }) =>\n    !disabled && !$outline && `color: ${theme.colors.surface};`}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  target,\n  rel,\n  ...props\n}: LinkButtonProps) {\n  const isExternal = typeof href === \"string\" && /^(https?:)?\\/\\//i.test(href);\n  const resolvedTarget = target ?? (isExternal ? \"_blank\" : undefined);\n  const resolvedRel =\n    rel ?? (resolvedTarget === \"_blank\" ? \"noopener noreferrer\" : undefined);\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        target={resolvedTarget}\n        rel={resolvedRel}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";

package/dist/templates/components/layout/Button.js

@@ -25,7 +25,11 @@ interface LinkButtonProps extends ButtonProps {
 // Our theme's isDark is a stub (false) because mode switching lives in CSS vars, so
 // the fallback resolves to --color-light (black in dark mode). Re-pin to \`surface\`,
 // which resolves to white in both modes, for the filled, non-disabled case.
-const StyledLinkButton = styled(Link)<LinkButtonProps>\`
+// The "button-link" class opts this anchor out of the global a:focus-visible
+// ring (see GlobalStyles) so Cherry's buttonStyles owns the button's focus look.
+const StyledLinkButton = styled(Link).attrs({
+  className: "button-link",
+})<LinkButtonProps>\`
   \${({ theme, $variant, $size, $outline, $fullWidth, $error, disabled }) =>
     buttonStyles(
       theme,

package/dist/templates/components/layout/Code.d.ts

@@ -1 +1 @@
-export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo, useId } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  interactiveStyles,\n  resetButton,\n  styledCode,\n} from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  title?: string;\n  theme?: Theme;\n}\n\ninterface CodeTab {\n  label: string;\n  code: string;\n  language?: string;\n}\n\ninterface CodeTabsProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  tabs: CodeTab[];\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  position: relative;\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\n/* Icon-only copy button. interactiveStyles supplies the border highlight on\n   hover plus the focus/active rings (no scale effect); the GitHub-style\n   copied/base colors stay fixed like the rest of the code block. The dark\n   block re-declares the hover border because its higher-specificity\n   :root.dark & border-color would otherwise override the mixin's hover. */\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  ${resetButton}\n  ${interactiveStyles}\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border-color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\n/* Centered file name in the TopBar. Sits absolutely over the flex row so the\n   dots and copy button keep their edge alignment. Monospace + muted GitHub\n   grays, swapped via :root.dark like the rest of the block. pointer-events off\n   so clicks fall through to nothing and never steal focus from the buttons. */\nconst TopBarTitle = styled.span<{ theme: Theme }>`\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 60%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 2;\n  color: #57606a;\n\n  :root.dark & {\n    color: #8b949e;\n  }\n`;\n\n/* Segmented control living in the TopBar for CodeTabs. Scrolls horizontally\n   with the thin scrollbar when the labels overflow the 33px bar. */\nconst TabList = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin-left: -6px;\n`;\n\n/* Individual tab button. Active tab reads as part of the window: a light body\n   fill (#ffffff) that echoes the code area, with a soft border. Inactive tabs\n   are muted and transparent. resetButton strips native styling; focus-visible\n   uses the brand primary ring for keyboard users. All colors stay fixed and\n   swap purely via :root.dark, matching the no-re-render palette approach. */\nconst CodeTab = styled.button<{ theme: Theme; $active: boolean }>`\n  ${resetButton}\n  flex: 0 0 auto;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 1;\n  padding: 5px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    color 0.15s ease,\n    background 0.15s ease,\n    border-color 0.15s ease;\n  border: solid 1px\n    ${({ $active }) => ($active ? \"rgba(0, 0, 0, 0.1)\" : \"transparent\")};\n  background: ${({ $active }) => ($active ? \"#ffffff\" : \"transparent\")};\n  color: ${({ $active }) => ($active ? \"#24292f\" : \"#57606a\")};\n\n  &:hover {\n    color: #24292f;\n    background: ${({ $active }) =>\n      $active ? \"#ffffff\" : \"rgba(0, 0, 0, 0.04)\"};\n  }\n\n  &:focus-visible {\n    outline: solid 2px ${({ theme }) => theme.colors.primary};\n    outline-offset: 1px;\n  }\n\n  :root.dark & {\n    border-color: ${({ $active }) =>\n      $active ? \"rgba(255, 255, 255, 0.15)\" : \"transparent\"};\n    background: ${({ $active }) => ($active ? \"#161b22\" : \"transparent\")};\n    color: ${({ $active }) => ($active ? \"#e6edf3\" : \"#8b949e\")};\n\n    &:hover {\n      color: #e6edf3;\n      background: ${({ $active }) =>\n        $active ? \"#161b22\" : \"rgba(255, 255, 255, 0.06)\"};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n    min-width: min-content;\n    width: 100%;\n    display: block;\n    padding-right: 20px;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${thinScrollbar};\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  /* Diff lines: highlight.js wraps each +/- line in a single span, so\n     stretching it to the full row reads like a GitHub diff. inline-block keeps\n     the trailing newline as the line break instead of adding an empty row. */\n  & .hljs-addition,\n  & .hljs-deletion {\n    display: inline-table;\n    width: 100%;\n  }\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({\n  code,\n  language = \"javascript\",\n  title,\n  theme,\n  className,\n}: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        {title ? <TopBarTitle theme={theme}>{title}</TopBarTitle> : null}\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\n/* Multi-variant code block (npm / pnpm / yarn, etc). Tabs replace the macOS\n   dots in the TopBar as a keyboard-accessible tablist; the copy button copies\n   whichever tab is active and resets its copied state when the tab changes. */\nfunction CodeTabs({ tabs, theme, className }: CodeTabsProps) {\n  const baseId = useId();\n  const [active, setActive] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const safeActive = active < tabs.length ? active : 0;\n  const activeTab = tabs[safeActive];\n\n  const highlightedCode = useMemo(\n    () =>\n      activeTab\n        ? highlightCode(activeTab.code, activeTab.language ?? \"bash\")\n        : \"\",\n    [activeTab],\n  );\n\n  const handleSelect = useCallback((index: number) => {\n    setActive(index);\n    setCopied(false);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!activeTab) return;\n    try {\n      await navigator.clipboard.writeText(activeTab.code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [activeTab]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      let next = safeActive;\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        next = (safeActive + 1) % tabs.length;\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        next = (safeActive - 1 + tabs.length) % tabs.length;\n      } else if (event.key === \"Home\") {\n        next = 0;\n      } else if (event.key === \"End\") {\n        next = tabs.length - 1;\n      } else {\n        return;\n      }\n      event.preventDefault();\n      handleSelect(next);\n      const target = document.getElementById(`${baseId}-tab-${next}`);\n      if (target) target.focus();\n    },\n    [baseId, handleSelect, safeActive, tabs.length],\n  );\n\n  if (!tabs || tabs.length === 0) return null;\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <TabList role=\"tablist\" aria-label=\"Code variants\">\n          {tabs.map((tab, index) => (\n            <CodeTab\n              key={`${tab.label}-${index}`}\n              type=\"button\"\n              role=\"tab\"\n              id={`${baseId}-tab-${index}`}\n              aria-selected={index === safeActive}\n              aria-controls={`${baseId}-panel`}\n              tabIndex={index === safeActive ? 0 : -1}\n              onClick={() => handleSelect(index)}\n              onKeyDown={handleKeyDown}\n              $active={index === safeActive}\n              theme={theme}\n            >\n              {tab.label}\n            </CodeTab>\n          ))}\n        </TabList>\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        id={`${baseId}-panel`}\n        role=\"tabpanel\"\n        aria-labelledby={`${baseId}-tab-${safeActive}`}\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code, CodeTabs };\n";
+export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo, useId } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  interactiveStyles,\n  resetButton,\n  styledCode,\n} from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  title?: string;\n  theme?: Theme;\n}\n\ninterface CodeTab {\n  label: string;\n  code: string;\n  language?: string;\n}\n\ninterface CodeTabsProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  tabs: CodeTab[];\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  position: relative;\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\n/* Icon-only copy button. interactiveStyles supplies the border highlight on\n   hover plus the focus/active rings (no scale effect); the GitHub-style\n   copied/base colors stay fixed like the rest of the code block. The dark\n   block re-declares the hover border because its higher-specificity\n   :root.dark & border-color would otherwise override the mixin's hover. */\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  ${resetButton}\n  ${interactiveStyles}\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border-color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\n/* Centered file name in the TopBar. Sits absolutely over the flex row so the\n   dots and copy button keep their edge alignment. Monospace + muted GitHub\n   grays, swapped via :root.dark like the rest of the block. pointer-events off\n   so clicks fall through to nothing and never steal focus from the buttons. */\nconst TopBarTitle = styled.span<{ theme: Theme }>`\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 60%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 2;\n  color: #57606a;\n\n  :root.dark & {\n    color: #8b949e;\n  }\n`;\n\n/* Segmented control living in the TopBar for CodeTabs. Scrolls horizontally\n   with the thin scrollbar when the labels overflow the 33px bar. */\nconst TabList = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin-left: -6px;\n`;\n\n/* Individual tab button. Active tab reads as part of the window: a light body\n   fill (#ffffff) that echoes the code area, with a soft border. Inactive tabs\n   are muted and transparent. resetButton strips native styling; focus-visible\n   draws an inset brand primary ring on a pseudo-element so the scrolling\n   TabList can't clip it. All colors stay fixed and swap purely via :root.dark,\n   matching the no-re-render palette approach. */\nconst CodeTab = styled.button<{ theme: Theme; $active: boolean }>`\n  ${resetButton}\n  flex: 0 0 auto;\n  position: relative;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 1;\n  padding: 5px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    color 0.15s ease,\n    background 0.15s ease,\n    border-color 0.15s ease;\n  border: solid 1px\n    ${({ $active }) => ($active ? \"rgba(0, 0, 0, 0.1)\" : \"transparent\")};\n  background: ${({ $active }) => ($active ? \"#ffffff\" : \"transparent\")};\n  color: ${({ $active }) => ($active ? \"#24292f\" : \"#57606a\")};\n\n  &:hover {\n    color: #24292f;\n    background: ${({ $active }) =>\n      $active ? \"#ffffff\" : \"rgba(0, 0, 0, 0.04)\"};\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border: solid 2px ${({ theme }) => theme.colors.primary};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    pointer-events: none;\n  }\n\n  :root.dark & {\n    border-color: ${({ $active }) =>\n      $active ? \"rgba(255, 255, 255, 0.15)\" : \"transparent\"};\n    background: ${({ $active }) => ($active ? \"#161b22\" : \"transparent\")};\n    color: ${({ $active }) => ($active ? \"#e6edf3\" : \"#8b949e\")};\n\n    &:hover {\n      color: #e6edf3;\n      background: ${({ $active }) =>\n        $active ? \"#161b22\" : \"rgba(255, 255, 255, 0.06)\"};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n    min-width: min-content;\n    width: 100%;\n    display: block;\n    padding-right: 20px;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${thinScrollbar};\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  /* Diff lines: highlight.js wraps each +/- line in a single span, so\n     stretching it to the full row reads like a GitHub diff. inline-block keeps\n     the trailing newline as the line break instead of adding an empty row. */\n  & .hljs-addition,\n  & .hljs-deletion {\n    display: inline-table;\n    width: 100%;\n  }\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({\n  code,\n  language = \"javascript\",\n  title,\n  theme,\n  className,\n}: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        {title ? <TopBarTitle theme={theme}>{title}</TopBarTitle> : null}\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\n/* Multi-variant code block (npm / pnpm / yarn, etc). Tabs replace the macOS\n   dots in the TopBar as a keyboard-accessible tablist; the copy button copies\n   whichever tab is active and resets its copied state when the tab changes. */\nfunction CodeTabs({ tabs, theme, className }: CodeTabsProps) {\n  const baseId = useId();\n  const [active, setActive] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const safeActive = active < tabs.length ? active : 0;\n  const activeTab = tabs[safeActive];\n\n  const highlightedCode = useMemo(\n    () =>\n      activeTab\n        ? highlightCode(activeTab.code, activeTab.language ?? \"bash\")\n        : \"\",\n    [activeTab],\n  );\n\n  const handleSelect = useCallback((index: number) => {\n    setActive(index);\n    setCopied(false);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!activeTab) return;\n    try {\n      await navigator.clipboard.writeText(activeTab.code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [activeTab]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      let next = safeActive;\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        next = (safeActive + 1) % tabs.length;\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        next = (safeActive - 1 + tabs.length) % tabs.length;\n      } else if (event.key === \"Home\") {\n        next = 0;\n      } else if (event.key === \"End\") {\n        next = tabs.length - 1;\n      } else {\n        return;\n      }\n      event.preventDefault();\n      handleSelect(next);\n      const target = document.getElementById(`${baseId}-tab-${next}`);\n      if (target) target.focus();\n    },\n    [baseId, handleSelect, safeActive, tabs.length],\n  );\n\n  if (!tabs || tabs.length === 0) return null;\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <TabList role=\"tablist\" aria-label=\"Code variants\">\n          {tabs.map((tab, index) => (\n            <CodeTab\n              key={`${tab.label}-${index}`}\n              type=\"button\"\n              role=\"tab\"\n              id={`${baseId}-tab-${index}`}\n              aria-selected={index === safeActive}\n              aria-controls={`${baseId}-panel`}\n              tabIndex={index === safeActive ? 0 : -1}\n              onClick={() => handleSelect(index)}\n              onKeyDown={handleKeyDown}\n              $active={index === safeActive}\n              theme={theme}\n            >\n              {tab.label}\n            </CodeTab>\n          ))}\n        </TabList>\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        id={`${baseId}-panel`}\n        role=\"tabpanel\"\n        aria-labelledby={`${baseId}-tab-${safeActive}`}\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code, CodeTabs };\n";

package/dist/templates/components/layout/Code.js

@@ -167,11 +167,13 @@ const TabList = styled.div<{ theme: Theme }>\`
 /* Individual tab button. Active tab reads as part of the window: a light body
    fill (#ffffff) that echoes the code area, with a soft border. Inactive tabs
    are muted and transparent. resetButton strips native styling; focus-visible
-   uses the brand primary ring for keyboard users. All colors stay fixed and
-   swap purely via :root.dark, matching the no-re-render palette approach. */
+   draws an inset brand primary ring on a pseudo-element so the scrolling
+   TabList can't clip it. All colors stay fixed and swap purely via :root.dark,
+   matching the no-re-render palette approach. */
 const CodeTab = styled.button<{ theme: Theme; $active: boolean }>\`
   \${resetButton}
   flex: 0 0 auto;
+  position: relative;
   font-family: \${({ theme }) => theme.fonts.mono};
   font-size: 12px;
   line-height: 1;
@@ -195,8 +197,16 @@ const CodeTab = styled.button<{ theme: Theme; $active: boolean }>\`
   }
 
   &:focus-visible {
-    outline: solid 2px \${({ theme }) => theme.colors.primary};
-    outline-offset: 1px;
+    outline: none;
+  }
+
+  &:focus-visible::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    border: solid 2px \${({ theme }) => theme.colors.primary};
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    pointer-events: none;
   }
 
   :root.dark & {

package/dist/templates/components/layout/DocsComponents.d.ts

@@ -1 +1 @@
-export declare const docsComponentsTemplate = "\"use client\";\nimport React, { createContext, useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  focusRing,\n  styledAnchor,\n  styledTable,\n  stylesLists,\n} from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst SectionBarContext = createContext(false);\n\nfunction SectionBarProvider({\n  hasSectionBar,\n  children,\n}: {\n  hasSectionBar: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <SectionBarContext.Provider value={hasSectionBar}>\n      {children}\n    </SectionBarContext.Provider>\n  );\n}\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.main<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>`\n  position: relative;\n  padding: 0 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n    hyphens: auto;\n  }\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n  max-width: 640px;\n  margin: auto;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n  $isOpen?: boolean;\n  $hasSectionBar?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(\n    100dvh - ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px\n  );\n  width: 100%;\n  z-index: 99;\n  top: ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  display: flex;\n  flex-direction: column;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n    transition: none;\n    max-height: 100dvh;\n    width: 220px;\n    background: transparent;\n    padding: 82px 20px 20px 20px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n    top: 0;\n    width: 280px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarFooter = styled.div`\n  padding: 22px 20px;\n  position: sticky;\n  border-top: 1px solid ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n  margin: 0 -20px -20px;\n  bottom: -20px;\n  backdrop-filter: blur(10px);\n\n  ${mq(\"lg\")} {\n    padding: 16px 20px;\n  }\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 280px;\n  height: 100dvh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 82px 20px 20px 20px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLi = styled.li<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    height: 20px;\n    width: 1px;\n    background: transparent;\n    transition: all 0.3s ease;\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      &::before {\n        background: ${theme.colors.primary};\n      }\n    `}\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n  ${focusRing};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &:last-of-type {\n    margin-bottom: auto;\n  }\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n  color: ${({ theme }) => theme.colors.accentStrong};\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n  & svg {\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\n// Shared appearance for every sidebar row - leaf links AND nested group\n// headers - so hover, active state, and the left rail read identically.\nconst sidebarRowStyles = css<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1.6;\n  color: ${({ theme }) => theme.colors.accentMuted};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${focusRing};\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      color: ${theme.colors.accentStrong};\n      border-color: ${theme.colors.primary};\n      font-weight: 600;\n    `};\n`;\n\n// The collapse chevron points right when closed and rotates to point down\n// when the group is open.\nconst sidebarChevron = css<Props>`\n  & .lucide-chevron-right {\n    margin-left: auto;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: rotate(90deg);\n      `}\n  }\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  ${sidebarRowStyles};\n`;\n\n// Nested navigation group. The header shares the link appearance/hover; a\n// non-navigable group is a single toggle button, while a group that is also a\n// page pairs a link with a chevron toggle. Children live in\n// StyledSidebarGroupContent, which animates open/closed via height 0 <-> auto\n// (enabled by interpolate-size in GlobalStyles, same as the Accordion).\nexport const StyledSidebarGroupButton = styled.button<Props>`\n  ${resetButton};\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n  width: 100%;\n  text-align: left;\n`;\n\nexport const StyledSidebarGroupRow = styled.div<Props>`\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n\n  /* The row is a plain div, so it never matches :focus-visible itself. Ring the\n     whole row when its inner link or chevron takes keyboard focus instead, to\n     match the leaf-row focus treatment. */\n  &:has(:focus-visible) {\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const StyledSidebarGroupLink = styled(Link)`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  /* Ring is drawn on the parent row via :has(:focus-visible). */\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nexport const StyledSidebarGroupChevron = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n\n  /* Ring is drawn on the parent row via :has(:focus-visible). */\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nexport const StyledSidebarGroupContent = styled.ul<Props>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      height: auto;\n    `}\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 999;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 10px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed;`};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n  transform: scale(0.8);\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.surface};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledMissingComponent = styled.div`\n  background: ${({ theme }) => theme.colors.error};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.surface};\n  font-weight: 600;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n`;\n\ninterface DocsWrapperProps {\n  children: React.ReactNode;\n}\n\nfunction DocsWrapper({ children }: DocsWrapperProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  const { isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledDocsContainer $isChatOpen={isOpen}>{children}</StyledDocsContainer>\n  );\n}\n\nexport {\n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  SectionBarContext,\n  SectionBarProvider,\n};\n";
+export declare const docsComponentsTemplate = "\"use client\";\nimport React, { createContext, useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n} from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\n\nconst SectionBarContext = createContext(false);\n\nfunction SectionBarProvider({\n  hasSectionBar,\n  children,\n}: {\n  hasSectionBar: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <SectionBarContext.Provider value={hasSectionBar}>\n      {children}\n    </SectionBarContext.Provider>\n  );\n}\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.main<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme; $isChatOpen?: boolean }>`\n  position: relative;\n  padding: 0 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 0 300px 80px 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 80px 300px;\n      `}\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n    hyphens: auto;\n  }\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n  max-width: 640px;\n  margin: auto;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n  $isOpen?: boolean;\n  $hasSectionBar?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(\n    100dvh - ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px\n  );\n  width: 100%;\n  z-index: 99;\n  top: ${({ $hasSectionBar }) => ($hasSectionBar ? 104 : 62)}px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  display: flex;\n  flex-direction: column;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n    transition: none;\n    max-height: 100dvh;\n    width: 220px;\n    background: transparent;\n    padding: 82px 20px 20px 20px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n    top: 0;\n    width: 280px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarFooter = styled.div`\n  padding: 22px 20px;\n  position: sticky;\n  border-top: 1px solid ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 5%, transparent)`};\n  margin: 0 -20px -20px;\n  bottom: -20px;\n  backdrop-filter: blur(10px);\n\n  ${mq(\"lg\")} {\n    padding: 16px 20px;\n  }\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 280px;\n  height: 100dvh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 82px 20px 20px 20px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  -webkit-overflow-scrolling: touch;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLi = styled.li<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    height: 20px;\n    width: 1px;\n    background: transparent;\n    transition: all 0.3s ease;\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      &::before {\n        background: ${theme.colors.primary};\n      }\n    `}\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &:last-of-type {\n    margin-bottom: auto;\n  }\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n  color: ${({ theme }) => theme.colors.accentStrong};\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n  & svg {\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\n// Shared appearance for every sidebar row - leaf links AND nested group\n// headers - so hover, active state, and the left rail read identically.\nconst sidebarRowStyles = css<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1.6;\n  color: ${({ theme }) => theme.colors.accentMuted};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      color: ${theme.colors.accentStrong};\n      border-color: ${theme.colors.primary};\n      font-weight: 600;\n    `};\n`;\n\n// The collapse chevron points right when closed and rotates to point down\n// when the group is open.\nconst sidebarChevron = css<Props>`\n  & .lucide-chevron-right {\n    margin-left: auto;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: rotate(90deg);\n      `}\n  }\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  ${sidebarRowStyles};\n`;\n\n// Nested navigation group. The header shares the link appearance/hover; a\n// non-navigable group is a single toggle button, while a group that is also a\n// page pairs a link with a chevron toggle. Children live in\n// StyledSidebarGroupContent, which animates open/closed via height 0 <-> auto\n// (enabled by interpolate-size in GlobalStyles, same as the Accordion).\nexport const StyledSidebarGroupButton = styled.button<Props>`\n  ${resetButton};\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n  width: 100%;\n  text-align: left;\n\n  /* Buttons aren't covered by the global a:focus-visible ring, so this\n     nav-row toggle carries its own copy of it. */\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const StyledSidebarGroupRow = styled.div<Props>`\n  ${sidebarRowStyles};\n  ${sidebarChevron};\n\n  /* The row is a plain div, so it never matches :focus-visible itself. Ring the\n     whole row when its inner link or chevron takes keyboard focus instead, to\n     match the leaf-row focus treatment. */\n  &:has(:focus-visible) {\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const StyledSidebarGroupLink = styled(Link)`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  /* Ring is drawn on the parent row via :has(:focus-visible); suppress the\n     global a:focus-visible glow so it isn't drawn twice. */\n  &:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n`;\n\nexport const StyledSidebarGroupChevron = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n\n  /* Ring is drawn on the parent row via :has(:focus-visible). */\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nexport const StyledSidebarGroupContent = styled.ul<Props>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      height: auto;\n    `}\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 999;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 10px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed;`};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n  transform: scale(0.8);\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.surface};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledMissingComponent = styled.div`\n  background: ${({ theme }) => theme.colors.error};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.surface};\n  font-weight: 600;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n`;\n\ninterface DocsWrapperProps {\n  children: React.ReactNode;\n}\n\nfunction DocsWrapper({ children }: DocsWrapperProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  const { isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledDocsContainer $isChatOpen={isOpen}>{children}</StyledDocsContainer>\n  );\n}\n\nexport {\n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  SectionBarContext,\n  SectionBarProvider,\n};\n";

package/dist/templates/components/layout/DocsComponents.js

@@ -11,7 +11,6 @@ import {
 import Link from "next/link";
 import { mq, Theme } from "@/app/theme";
 import {
-  focusRing,
   styledAnchor,
   styledTable,
   stylesLists,
@@ -253,7 +252,6 @@ export const StyledIndexSidebarLink = styled.a<{
   font-weight: \${({ $isActive }) => ($isActive ? "600" : "400")};
   text-decoration: none;
   transition: all 0.3s ease;
-  \${focusRing};
 
   &:hover {
     color: \${({ theme }) => theme.colors.primary};
@@ -314,8 +312,6 @@ const sidebarRowStyles = css<Props>\`
     border-color: \${({ theme }) => theme.colors.primary};
   }
 
-  \${focusRing};
-
   \${({ $isActive, theme }) =>
     $isActive &&
     css\`
@@ -355,6 +351,14 @@ export const StyledSidebarGroupButton = styled.button<Props>\`
   \${sidebarChevron};
   width: 100%;
   text-align: left;
+
+  /* Buttons aren't covered by the global a:focus-visible ring, so this
+     nav-row toggle carries its own copy of it. */
+  &:focus-visible {
+    outline: none;
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    box-shadow: 0 0 0 2px \${({ theme }) => theme.colors.primaryLight};
+  }
 \`;
 
 export const StyledSidebarGroupRow = styled.div<Props>\`
@@ -366,7 +370,7 @@ export const StyledSidebarGroupRow = styled.div<Props>\`
      match the leaf-row focus treatment. */
   &:has(:focus-visible) {
     border-radius: \${({ theme }) => theme.spacing.radius.xs};
-    box-shadow: 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+    box-shadow: 0 0 0 2px \${({ theme }) => theme.colors.primaryLight};
   }
 \`;
 
@@ -383,9 +387,11 @@ export const StyledSidebarGroupLink = styled(Link)\`
     flex-shrink: 0;
   }
 
-  /* Ring is drawn on the parent row via :has(:focus-visible). */
+  /* Ring is drawn on the parent row via :has(:focus-visible); suppress the
+     global a:focus-visible glow so it isn't drawn twice. */
   &:focus-visible {
     outline: none;
+    box-shadow: none;
   }
 \`;
 

package/dist/templates/components/layout/Footer.d.ts

@@ -1 +1 @@
-export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\nimport { focusRing } from \"@/components/layout/SharedStyled\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) => theme.colors.accent};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n    ${focusRing};\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primary};\n    }\n\n    /* The GitHub logo is an icon-only link - round its focus ring to match. */\n    &:has(svg):focus-visible {\n      border-radius: 100%;\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by{\" \"}\n            <a\n              href=\"https://doccupine.com\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Doccupine\n            </a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            aria-label=\"Doccupine on GitHub\"\n          >\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";
+export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) => theme.colors.accent};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primary};\n    }\n\n    /* The GitHub logo is an icon-only link - round the global focus ring so it\n       hugs the icon instead of drawing a rectangle. */\n    &:has(svg):focus-visible {\n      border-radius: 100%;\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by{\" \"}\n            <a\n              href=\"https://doccupine.com\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Doccupine\n            </a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            aria-label=\"Doccupine on GitHub\"\n          >\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";

package/dist/templates/components/layout/Footer.js

@@ -6,7 +6,6 @@ import { Space, styledSmall } from "cherry-styled-components";
 import { ChatContext } from "@/components/Chat";
 import { mq, Theme } from "@/app/theme";
 import { GitHubLogo } from "@/components/layout/Pictograms";
-import { focusRing } from "@/components/layout/SharedStyled";
 import linksData from "@/links.json";
 
 interface LinkProps {
@@ -61,13 +60,13 @@ const StyledFooterInner = styled.div<{ theme: Theme }>\`
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-flex;
-    \${focusRing};
 
     &:hover {
       color: \${({ theme }) => theme.colors.primary};
     }
 
-    /* The GitHub logo is an icon-only link - round its focus ring to match. */
+    /* The GitHub logo is an icon-only link - round the global focus ring so it
+       hugs the icon instead of drawing a rectangle. */
     &:has(svg):focus-visible {
       border-radius: 100%;
     }

package/dist/templates/components/layout/GlobalStyles.d.ts

@@ -1 +1 @@
-export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\nimport {\n  colorsLight,\n  colorsDark,\n  shadowsLight,\n  shadowsDark,\n} from \"@/app/theme\";\n\n// Build \"name: value;\" lines for every entry in a record. Used to emit\n// :root and :root.dark blocks from the resolved hex objects in theme.ts.\n// Custom theme.json overrides flow through automatically because they are\n// already merged into colorsLight / colorsDark.\nfunction toCssVars<T extends object>(prefix: string, record: T): string {\n  return Object.entries(record)\n    .map(([k, v]) => `  --${prefix}-${k}: ${v};`)\n    .join(\"\\n\");\n}\n\nconst lightVars = [\n  toCssVars(\"color\", colorsLight),\n  toCssVars(\"shadow\", shadowsLight),\n  // Semantic tokens \u2014 derived from the brand palette per mode. See the\n  // SemanticColors interface in theme.ts for the intent of each.\n  // These reference the palette via var() (not baked hex) so that any\n  // runtime override of --color-primary* (e.g. the DemoTheme presets)\n  // cascades into the semantic tokens automatically.\n  `  --color-accent: var(--color-primaryDark);`,\n  // accentStrong = accent shifted ~10% toward black (light mode) or white (dark\n  // mode). color-mix in sRGB is not identical to polished's HSL darken/lighten\n  // but the visual difference at 10% on a UI accent is imperceptible.\n  `  --color-accentStrong: color-mix(in srgb, var(--color-primaryDark) 90%, black);`,\n  `  --color-accentMuted: var(--color-primary);`,\n  `  --color-surface: var(--color-light);`,\n].join(\"\\n\");\n\nconst darkVars = [\n  toCssVars(\"color\", colorsDark),\n  toCssVars(\"shadow\", shadowsDark),\n  `  --color-accent: var(--color-primaryLight);`,\n  `  --color-accentStrong: color-mix(in srgb, var(--color-primaryLight) 90%, white);`,\n  `  --color-accentMuted: var(--color-grayDark);`,\n  `  --color-surface: var(--color-dark);`,\n].join(\"\\n\");\n\nconst GlobalStyles = createGlobalStyle`\n:root {\n${lightVars}\n}\n\n:root.dark {\n${darkVars}\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: var(--color-light);\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px var(--color-grayLight);\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: var(--color-dark);\n}\n\na {\n  color: var(--color-primary);\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}\n\n/* Mode-conditional visibility helpers. ThemeToggle uses these to swap Sun\n   and Moon icons; Header uses them to swap light/dark logos. Pure CSS so\n   the swap happens via the active <html> class without JS or re-render. */\n:root.dark .light-only {\n  display: none !important;\n}\n:root:not(.dark) .dark-only {\n  display: none !important;\n}\n`;\n\nexport { GlobalStyles };\n";
+export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\nimport {\n  colorsLight,\n  colorsDark,\n  shadowsLight,\n  shadowsDark,\n} from \"@/app/theme\";\n\n// Build \"name: value;\" lines for every entry in a record. Used to emit\n// :root and :root.dark blocks from the resolved hex objects in theme.ts.\n// Custom theme.json overrides flow through automatically because they are\n// already merged into colorsLight / colorsDark.\nfunction toCssVars<T extends object>(prefix: string, record: T): string {\n  return Object.entries(record)\n    .map(([k, v]) => `  --${prefix}-${k}: ${v};`)\n    .join(\"\\n\");\n}\n\nconst lightVars = [\n  toCssVars(\"color\", colorsLight),\n  toCssVars(\"shadow\", shadowsLight),\n  // Semantic tokens \u2014 derived from the brand palette per mode. See the\n  // SemanticColors interface in theme.ts for the intent of each.\n  // These reference the palette via var() (not baked hex) so that any\n  // runtime override of --color-primary* (e.g. the DemoTheme presets)\n  // cascades into the semantic tokens automatically.\n  `  --color-accent: var(--color-primaryDark);`,\n  // accentStrong = accent shifted ~10% toward black (light mode) or white (dark\n  // mode). color-mix in sRGB is not identical to polished's HSL darken/lighten\n  // but the visual difference at 10% on a UI accent is imperceptible.\n  `  --color-accentStrong: color-mix(in srgb, var(--color-primaryDark) 90%, black);`,\n  `  --color-accentMuted: var(--color-primary);`,\n  `  --color-surface: var(--color-light);`,\n].join(\"\\n\");\n\nconst darkVars = [\n  toCssVars(\"color\", colorsDark),\n  toCssVars(\"shadow\", shadowsDark),\n  `  --color-accent: var(--color-primaryLight);`,\n  `  --color-accentStrong: color-mix(in srgb, var(--color-primaryLight) 90%, white);`,\n  `  --color-accentMuted: var(--color-grayDark);`,\n  `  --color-surface: var(--color-dark);`,\n].join(\"\\n\");\n\nconst GlobalStyles = createGlobalStyle`\n:root {\n${lightVars}\n}\n\n:root.dark {\n${darkVars}\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: var(--color-light);\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px var(--color-grayLight);\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: var(--color-dark);\n}\n\na {\n  color: var(--color-primary);\n}\n\n/* Keyboard-focus ring, defined once globally so links don't each re-declare it.\n   :focus-visible keeps it keyboard-only (no ring on mouse click); box-shadow\n   gives a soft primaryLight glow that follows the element's border-radius. The\n   6px radius mirrors theme.spacing.radius.xs so the ring rounds on links that\n   have no radius of their own. Cherry link-buttons (.button-link) are excluded\n   via :where() so the exclusion adds no specificity - this keeps the selector\n   at (0,1,1) so bespoke per-component :focus-visible rules (inline content\n   links, the section bar, the sidebar group rows) still override it. */\na:focus-visible:where(:not(.button-link)) {\n  outline: none;\n  border-radius: 6px;\n  box-shadow: 0 0 0 2px var(--color-primaryLight);\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}\n\n/* Mode-conditional visibility helpers. ThemeToggle uses these to swap Sun\n   and Moon icons; Header uses them to swap light/dark logos. Pure CSS so\n   the swap happens via the active <html> class without JS or re-render. */\n:root.dark .light-only {\n  display: none !important;\n}\n:root:not(.dark) .dark-only {\n  display: none !important;\n}\n`;\n\nexport { GlobalStyles };\n";

package/dist/templates/components/layout/GlobalStyles.js

@@ -118,6 +118,20 @@ a {
   color: var(--color-primary);
 }
 
+/* Keyboard-focus ring, defined once globally so links don't each re-declare it.
+   :focus-visible keeps it keyboard-only (no ring on mouse click); box-shadow
+   gives a soft primaryLight glow that follows the element's border-radius. The
+   6px radius mirrors theme.spacing.radius.xs so the ring rounds on links that
+   have no radius of their own. Cherry link-buttons (.button-link) are excluded
+   via :where() so the exclusion adds no specificity - this keeps the selector
+   at (0,1,1) so bespoke per-component :focus-visible rules (inline content
+   links, the section bar, the sidebar group rows) still override it. */
+a:focus-visible:where(:not(.button-link)) {
+  outline: none;
+  border-radius: 6px;
+  box-shadow: 0 0 0 2px var(--color-primaryLight);
+}
+
 ol,
 ul {
   list-style: none;

package/dist/templates/components/layout/Header.d.ts

@@ -1 +1 @@
-export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { focusRing } from \"@/components/layout/SharedStyled\";\nimport { useOnClickOutside } from \"cherry-styled-components\";\nimport { Search } from \"lucide-react\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext, ChatButtonCTA } 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<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\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    ${focusRing};\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      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\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\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    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\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 && <ChatButtonCTA />}\n        </StyledLeftWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";
+export declare const headerTemplate = "\"use client\";\nimport React from \"react\";\nimport { useCallback, useContext, useRef, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useOnClickOutside } from \"cherry-styled-components\";\nimport { Search } from \"lucide-react\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport { ChatContext, ChatButtonCTA } 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<{ theme: Theme; $hasChildren: boolean }>`\n  position: sticky;\n  top: 0;\n  margin: 0;\n  z-index: 1000;\n  width: 100%;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\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      & path[fill] {\n        fill: ${({ theme }) => theme.colors.primary};\n      }\n    }\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\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    <StyledHeader $hasChildren={children ? true : false} id=\"header\">\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 && <ChatButtonCTA />}\n        </StyledLeftWrapper>\n      </StyledHeaderInner>\n    </StyledHeader>\n  );\n}\n\nexport { Header };\n";

package/dist/templates/components/layout/Header.js

@@ -4,7 +4,6 @@ import { useCallback, useContext, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import Link from "next/link";
 import { mq, Theme } from "@/app/theme";
-import { focusRing } from "@/components/layout/SharedStyled";
 import { useOnClickOutside } from "cherry-styled-components";
 import { Search } from "lucide-react";
 import { Logo } from "@/components/layout/Pictograms";
@@ -60,7 +59,6 @@ const StyledHeader = styled.header<{ theme: Theme; $hasChildren: boolean }>\`
   & .logo {
     display: flex;
     min-width: max-content;
-    \${focusRing};
 
     & svg,
     & img {

package/dist/templates/components/layout/SectionBar.d.ts

@@ -1 +1 @@
-export declare const sectionBarTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface SectionConfig {\n  label: string;\n  slug: string;\n  directory?: string;\n}\n\ninterface SectionBarProps {\n  sections: SectionConfig[];\n}\n\nconst StyledSectionBar = styled.nav<{ theme: Theme }>`\n  display: flex;\n  order: 3;\n  width: calc(100% + 20px);\n  margin: 0 0 0 -10px;\n  padding: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    padding: 0 10px;\n    order: unset;\n    width: 100%;\n    margin: 0;\n    justify-content: flex-end;\n  }\n`;\n\nconst StyledSectionLink = styled(Link)<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  text-decoration: none;\n  padding: 16px 10px;\n  white-space: nowrap;\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"500\")};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.gray};\n  border-bottom: solid 2px\n    ${({ theme, $isActive }) =>\n      $isActive ? theme.colors.primary : \"transparent\"};\n  transition: all 0.3s ease;\n  min-width: fit-content;\n\n  /* Inset ring (not the shared outset focusRing): the scrolling section bar\n     clips overflow, so an outset glow gets cropped top/bottom. Drawing it inside\n     the link's padding keeps the primaryLight focus look fully visible. */\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nfunction SectionBar({ sections }: SectionBarProps) {\n  const pathname = usePathname();\n  const currentPath = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const activeSection = sections.find((section) => {\n    if (section.slug === \"\") return false;\n    return (\n      currentPath === section.slug || currentPath.startsWith(section.slug + \"/\")\n    );\n  });\n\n  const activeSectionSlug = activeSection ? activeSection.slug : \"\";\n\n  return (\n    <StyledSectionBar>\n      {sections.map((section) => (\n        <StyledSectionLink\n          key={section.slug}\n          href={section.slug === \"\" ? \"/\" : `/${section.slug}`}\n          $isActive={activeSectionSlug === section.slug}\n        >\n          {section.label}\n        </StyledSectionLink>\n      ))}\n    </StyledSectionBar>\n  );\n}\n\nexport { SectionBar };\n";
+export declare const sectionBarTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface SectionConfig {\n  label: string;\n  slug: string;\n  directory?: string;\n}\n\ninterface SectionBarProps {\n  sections: SectionConfig[];\n}\n\nconst StyledSectionBar = styled.nav<{ theme: Theme }>`\n  display: flex;\n  order: 3;\n  width: calc(100% + 20px);\n  margin: 0 0 0 -10px;\n  padding: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${mq(\"lg\")} {\n    padding: 0 10px;\n    order: unset;\n    width: 100%;\n    margin: 0;\n    justify-content: flex-end;\n  }\n`;\n\nconst StyledSectionLink = styled(Link)<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  text-decoration: none;\n  padding: 16px 10px;\n  white-space: nowrap;\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"500\")};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.gray};\n  border-bottom: solid 2px\n    ${({ theme, $isActive }) =>\n      $isActive ? theme.colors.primary : \"transparent\"};\n  transition: all 0.3s ease;\n  min-width: fit-content;\n  position: relative;\n\n  /* The section bar scrolls horizontally, and overflow-x:auto makes it clip\n     vertically too, so an edge-drawn ring gets shaved top and bottom. Draw the\n     ring on an inset pseudo-element so it sits fully inside the link and can't\n     be clipped on any side. */\n  &:focus-visible {\n    outline: none;\n    /* Opt out of the global a:focus-visible ring; the ::after below draws it\n       inset so the scroll container can't clip it. */\n    box-shadow: none;\n  }\n\n  &:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 3px;\n    border: solid 2px ${({ theme }) => theme.colors.primaryLight};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    pointer-events: none;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nfunction SectionBar({ sections }: SectionBarProps) {\n  const pathname = usePathname();\n  const currentPath = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const activeSection = sections.find((section) => {\n    if (section.slug === \"\") return false;\n    return (\n      currentPath === section.slug || currentPath.startsWith(section.slug + \"/\")\n    );\n  });\n\n  const activeSectionSlug = activeSection ? activeSection.slug : \"\";\n\n  return (\n    <StyledSectionBar>\n      {sections.map((section) => (\n        <StyledSectionLink\n          key={section.slug}\n          href={section.slug === \"\" ? \"/\" : `/${section.slug}`}\n          $isActive={activeSectionSlug === section.slug}\n        >\n          {section.label}\n        </StyledSectionLink>\n      ))}\n    </StyledSectionBar>\n  );\n}\n\nexport { SectionBar };\n";

package/dist/templates/components/layout/SectionBar.js

@@ -54,14 +54,26 @@ const StyledSectionLink = styled(Link)<{
       $isActive ? theme.colors.primary : "transparent"};
   transition: all 0.3s ease;
   min-width: fit-content;
+  position: relative;
 
-  /* Inset ring (not the shared outset focusRing): the scrolling section bar
-     clips overflow, so an outset glow gets cropped top/bottom. Drawing it inside
-     the link's padding keeps the primaryLight focus look fully visible. */
+  /* The section bar scrolls horizontally, and overflow-x:auto makes it clip
+     vertically too, so an edge-drawn ring gets shaved top and bottom. Draw the
+     ring on an inset pseudo-element so it sits fully inside the link and can't
+     be clipped on any side. */
   &:focus-visible {
     outline: none;
+    /* Opt out of the global a:focus-visible ring; the ::after below draws it
+       inset so the scroll container can't clip it. */
+    box-shadow: none;
+  }
+
+  &:focus-visible::after {
+    content: "";
+    position: absolute;
+    inset: 3px;
+    border: solid 2px \${({ theme }) => theme.colors.primaryLight};
     border-radius: \${({ theme }) => theme.spacing.radius.xs};
-    box-shadow: inset 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+    pointer-events: none;
   }
 
   &:hover {

package/dist/templates/components/layout/SharedStyles.d.ts

@@ -1 +1 @@
-export declare const sharedStyledTemplate = "\"use client\";\nimport { styledSmall, styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport styled, { css } from \"styled-components\";\n\n/** Slim, theme-aware scrollbar for internal scroll areas (code blocks,\n    modals, tables) so the chunky native bar doesn't stand out, especially\n    in dark mode. */\nexport const thinScrollbar = css<{ theme: Theme }>`\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors.grayLight} transparent;\n`;\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\n/** Keyboard-focus ring for bare navigation links (header links, sidebar rows,\n    footer links) that don't carry the full interactiveStyles treatment. Mirrors\n    the primaryLight glow from interactiveStyles, but uses :focus-visible so the\n    ring only shows for keyboard users - not on mouse click. Pair with an element\n    that already has a transition for a smooth fade. The small border-radius\n    rounds the ring, so don't apply this to elements that set their own radius. */\nexport const focusRing = css<{ theme: Theme }>`\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]):not(:has(img)) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.accent};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n\n    /* Same primaryLight focus glow as focusRing, but layered over the link's\n       own box-shadow underline (same property) so the underline is preserved. */\n    &:focus-visible {\n      outline: none;\n      border-radius: ${({ theme }) => theme.spacing.radius.xs};\n      box-shadow:\n        0 2px 0 0 ${({ theme }) => theme.colors.primary},\n        0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      ${mq(\"lg\")} {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\n    ${thinScrollbar};\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.accent};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";
+export declare const sharedStyledTemplate = "\"use client\";\nimport { styledSmall, styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport styled, { css } from \"styled-components\";\n\n/** Slim, theme-aware scrollbar for internal scroll areas (code blocks,\n    modals, tables) so the chunky native bar doesn't stand out, especially\n    in dark mode. */\nexport const thinScrollbar = css<{ theme: Theme }>`\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors.grayLight} transparent;\n`;\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]):not(:has(img)) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.accent};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n\n    /* Same primaryLight focus glow as the global a:focus-visible ring, but\n       layered over the link's own box-shadow underline (same property) so the\n       underline is preserved. */\n    &:focus-visible {\n      outline: none;\n      border-radius: ${({ theme }) => theme.spacing.radius.xs};\n      box-shadow:\n        0 2px 0 0 ${({ theme }) => theme.colors.primary},\n        0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      ${mq(\"lg\")} {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\n    ${thinScrollbar};\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n`;\n\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.accent};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";

package/dist/templates/components/layout/SharedStyles.js

@@ -30,20 +30,6 @@ export const interactiveStyles = css<{ theme: Theme }>\`
   }
 \`;
 
-/** Keyboard-focus ring for bare navigation links (header links, sidebar rows,
-    footer links) that don't carry the full interactiveStyles treatment. Mirrors
-    the primaryLight glow from interactiveStyles, but uses :focus-visible so the
-    ring only shows for keyboard users - not on mouse click. Pair with an element
-    that already has a transition for a smooth fade. The small border-radius
-    rounds the ring, so don't apply this to elements that set their own radius. */
-export const focusRing = css<{ theme: Theme }>\`
-  &:focus-visible {
-    outline: none;
-    border-radius: \${({ theme }) => theme.spacing.radius.xs};
-    box-shadow: 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
-  }
-\`;
-
 export const styledAnchor = css<{ theme: Theme }>\`
   & a:not([class]):not(:has(img)) {
     color: inherit;
@@ -56,14 +42,15 @@ export const styledAnchor = css<{ theme: Theme }>\`
       box-shadow: 0 1px 0 0 \${({ theme }) => theme.colors.primary};
     }
 
-    /* Same primaryLight focus glow as focusRing, but layered over the link's
-       own box-shadow underline (same property) so the underline is preserved. */
+    /* Same primaryLight focus glow as the global a:focus-visible ring, but
+       layered over the link's own box-shadow underline (same property) so the
+       underline is preserved. */
     &:focus-visible {
       outline: none;
       border-radius: \${({ theme }) => theme.spacing.radius.xs};
       box-shadow:
         0 2px 0 0 \${({ theme }) => theme.colors.primary},
-        0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
+        0 0 0 2px \${({ theme }) => theme.colors.primaryLight};
     }
   }
 \`;

package/dist/templates/mdx/update.mdx.d.ts

@@ -1 +1 @@
-export declare const updateMdxTemplate = "---\ntitle: \"Update\"\ndescription: \"Easily manage and present change history.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 12\n---\n\n# Update\n\nEasily manage and present change history.\n\nThe `Update` component helps you display release notes, version details, and changelogs in a standardized format.\n\nEach `Update` label is added to the \"On this page\" sidebar and gets its own anchor, so you can link directly to a specific entry.\n\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\nYou can include anything here - images, code snippets, or a bullet list of modifications.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n### Key additions\n\n- Fully responsive layout\n- Individual anchor for each update\n- Automatic RSS feed entry generation\n\n</Update>\n\n## Update Usage\n\nYou can combine multiple `Update` components to build complete changelogs.\n\n```mdx\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\nYou can include anything here - images, code snippets, or a bullet list of modifications.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n### Key additions\n\n- Fully responsive layout\n- Individual anchor for each update\n- Automatic RSS feed entry generation\n\n</Update>\n```\n\n## Properties\n\n<Field value=\"label\" type=\"string\" required>\n  The label of the update. It also appears in the page's \"On this page\"\n  navigation and acts as a deep-link anchor to this entry.\n</Field>\n\n<Field value=\"description\" type=\"string\" required>\n  The description of the update.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the update.\n</Field>";
+export declare const updateMdxTemplate = "---\ntitle: \"Update\"\ndescription: \"Easily manage and present change history.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 12\n---\n\n# Update\n\nEasily manage and present change history.\n\nThe `Update` component helps you display release notes, version details, and changelogs in a standardized format.\n\nEach `Update` label is added to the \"On this page\" sidebar and gets its own anchor, so you can link directly to a specific entry.\n\n<Update label=\"v0.0.1\" description=\"Example\">\n  ## Example entry\n\nYou can include anything here - images, code snippets, or a bullet list of modifications.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n### Key additions\n\n- Fully responsive layout\n- Individual anchor for each update\n- Automatic RSS feed entry generation\n\n</Update>\n\n## Update Usage\n\nYou can combine multiple `Update` components to build complete changelogs.\n\n```mdx\n<Update label=\"v0.0.1\" description=\"Example\">\n  ## Example entry\n\nYou can include anything here - images, code snippets, or a bullet list of modifications.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n### Key additions\n\n- Fully responsive layout\n- Individual anchor for each update\n- Automatic RSS feed entry generation\n\n</Update>\n```\n\n## Properties\n\n<Field value=\"label\" type=\"string\" required>\n  The label of the update. It also appears in the page's \"On this page\"\n  navigation and acts as a deep-link anchor to this entry.\n</Field>\n\n<Field value=\"description\" type=\"string\" required>\n  The description of the update.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the update.\n</Field>";

package/dist/templates/mdx/update.mdx.js

@@ -15,7 +15,7 @@ The \`Update\` component helps you display release notes, version details, and c
 
 Each \`Update\` label is added to the "On this page" sidebar and gets its own anchor, so you can link directly to a specific entry.
 
-<Update label="Example" description="v0.0.1">
+<Update label="v0.0.1" description="Example">
   ## Example entry
 
 You can include anything here - images, code snippets, or a bullet list of modifications.
@@ -35,7 +35,7 @@ You can include anything here - images, code snippets, or a bullet list of modif
 You can combine multiple \`Update\` components to build complete changelogs.
 
 \`\`\`mdx
-<Update label="Example" description="v0.0.1">
+<Update label="v0.0.1" description="Example">
   ## Example entry
 
 You can include anything here - images, code snippets, or a bullet list of modifications.

package/dist/templates/package.js

@@ -17,7 +17,7 @@ export const packageJsonTemplate = JSON.stringify({
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@posthog/react": "^1.10.3",
-        "cherry-styled-components": "^0.2.8",
+        "cherry-styled-components": "^0.2.9",
         langchain: "^1.5.2",
         "lucide-react": "^1.23.0",
         minisearch: "^7.2.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {