doccupine 0.0.63 → 0.0.64

package/dist/templates/components/Chat.js

@@ -1,3 +1,4 @@
+import { CHAT_WIDTH } from "../app/theme.js";
 export const chatTemplate = `"use client";
 import React, {
   createContext,
@@ -20,6 +21,7 @@ import {
   styledAnchor,
   styledTable,
   stylesLists,
+  StyledSmallButton,
 } from "@/components/layout/SharedStyled";
 
 const mdxComponents = getMDXComponents({});
@@ -49,6 +51,7 @@ const StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>\`
   transform: translateX(0);
   background: \${({ theme }) => theme.colors.light};
   -webkit-overflow-scrolling: touch;
+  opacity: 1;
 
   &::-webkit-scrollbar {
     display: none;
@@ -58,10 +61,11 @@ const StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>\`
     !$isVisible &&
     css\`
       transform: translateX(100%);
+      opacity: 0;
     \`}
 
   \${mq("lg")} {
-    width: 420px;
+    width: ${CHAT_WIDTH}px;
     border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
   }
 \`;
@@ -352,15 +356,17 @@ const StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>\`
   border-top: solid 1px \${({ theme }) => theme.colors.grayLight};
   transition: all 0.3s ease;
   transform: translateX(100%);
+  opacity: 0;
 
   \${mq("lg")} {
-    width: 420px;
+    width: ${CHAT_WIDTH}px;
     border-left: solid 1px \${({ theme }) => theme.colors.grayLight};
   }
 
   \${({ $isVisible }) =>
     $isVisible &&
     css\`
+      opacity: 1;
       transform: translateX(0);
     \`}
 
@@ -369,53 +375,94 @@ const StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>\`
   }
 \`;
 
-const StyledChatFixedForm = styled.form<{
+const StyledGlowSmallButton = styled(StyledSmallButton)<{
   theme: Theme;
-  $hide: boolean;
+  $hasContent: boolean;
 }>\`
-  transition: all 0.3s ease;
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  width: calc(100% - 115px);
-  z-index: 998;
-
-  \${mq("lg")} {
-    left: 50%;
-    transform: translateX(-50%) translateY(0);
-    bottom: initial;
-    position: absolute;
-    top: 153px;
-    width: calc(100% - 320px * 2 - 40px);
-    opacity: 1;
+  @property --gradient-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
   }
 
-  \${({ $hide }) =>
-    $hide &&
-    css\`
-      transform: translateX(-100px);
+  position: relative;
+  isolation: isolate;
+  margin-right: 0;
+  background: \${({ theme }) => theme.colors.light};
+  padding: 0;
 
-      \${mq("lg")} {
-        opacity: 0;
-        transform: translateX(-50%) translateY(-20px);
-      }
-    \`}
+  &::before {
+    content: "";
+    inset: -2px;
+    border-radius: 8px;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      #cc5555,
+      #d9a745,
+      #3ab0cc,
+      #cc7fc2,
+      #4380cc,
+      #4c1fa3,
+      #cc5555
+    );
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: \${rotateGradient} 3s linear infinite;
+    z-index: -1;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+  }
 
-  & .loading {
-    animation: \${loadingAnimation} 1s linear infinite;
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -8px;
+    border-radius: 14px;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      \${rgba("#ff6b6b", 0.4)},
+      \${rgba("#feca57", 0.4)},
+      \${rgba("#48dbfb", 0.4)},
+      \${rgba("#ff9ff3", 0.4)},
+      \${rgba("#54a0ff", 0.4)},
+      \${rgba("#5f27cd", 0.4)},
+      \${rgba("#ff6b6b", 0.4)}
+    );
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    animation:
+      \${rotateGradient} 3s linear infinite,
+      \${pulseGlow} 2s ease-in-out infinite;
+    z-index: -2;
+    pointer-events: none;
   }
-\`;
 
-const StyledChatFixedInner = styled.div\`
-  margin: auto;
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+  }
 
-  \${mq("lg")} {
-    max-width: 640px;
+  & span {
+    padding: 6px 8px;
+    display: flex;
+    background: \${({ theme }) => theme.colors.light};
+    border-radius: \${({ theme }) => theme.spacing.radius.xs};
+    gap: 6px;
   }
+
+  \${({ $hasContent }) =>
+    $hasContent &&
+    css\`
+      &::before {
+        opacity: 1;
+      }
+      &::after {
+        opacity: 1;
+      }
+    \`}
 \`;
 
 const StyledError = styled.div<{ theme: Theme }>\`
@@ -636,6 +683,7 @@ interface RainbowInputProps {
   placeholder?: string;
   autoComplete?: string;
   "aria-label"?: string;
+  inputRef?: React.Ref<HTMLInputElement>;
 }
 
 function RainbowInput({
@@ -645,6 +693,7 @@ function RainbowInput({
   placeholder,
   autoComplete,
   "aria-label": ariaLabel,
+  inputRef,
 }: RainbowInputProps) {
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -675,6 +724,7 @@ function RainbowInput({
         ))}
       </StyledSparkleContainer>
       <StyledRainbowInput
+        ref={inputRef}
         id={id}
         value={value}
         onChange={onChange}
@@ -688,14 +738,51 @@ function RainbowInput({
   );
 }
 
+function ChatButtonCTA() {
+  const { setIsOpen, isOpen, answer, setAnswer, chatInputRef } =
+    useContext(ChatContext);
+
+  return (
+    <StyledGlowSmallButton
+      onClick={() => {
+        const next = !isOpen;
+        setIsOpen(next);
+        if (next) {
+          if (answer.length === 0) {
+            setAnswer([
+              { text: "Hey there, how can I assist you?", answer: true },
+            ]);
+          }
+          setTimeout(() => {
+            chatInputRef.current?.focus();
+          }, 350);
+        }
+      }}
+      aria-label="Ask AI Assistant"
+      $hasContent={isOpen}
+      type="button"
+    >
+      <span>
+        <Sparkles size={16} />
+        Ask AI
+      </span>
+    </StyledGlowSmallButton>
+  );
+}
+
 function Chat() {
-  const [question, setQuestion] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [answer, setAnswer] = useState<Answer[]>([]);
+  const {
+    isOpen,
+    question,
+    setQuestion,
+    loading,
+    error,
+    answer,
+    ask,
+    clearChat,
+    chatInputRef,
+  } = useContext(ChatContext);
   const endRef = useRef<HTMLDivElement | null>(null);
-  const abortRef = useRef<AbortController | null>(null);
-  const { isOpen, setIsOpen } = useContext(ChatContext);
 
   useEffect(() => {
     endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
@@ -703,12 +790,111 @@ function Chat() {
 
   useEffect(() => {
     if (answer?.length > 0) {
-      const el = document.getElementById(
-        "chat-bottom-input",
-      ) as HTMLInputElement | null;
-      el?.focus();
+      chatInputRef.current?.focus();
     }
-  }, [answer]);
+  }, [answer, chatInputRef]);
+
+  return (
+    <>
+      <StyledChat $isVisible={isOpen}>
+        <StyledChatTitle>
+          <StyledChatTitleIconWrapper>
+            <Sparkles />
+            <h3>AI Assistant</h3>
+          </StyledChatTitleIconWrapper>
+          <StyledChatCloseButton onClick={clearChat} aria-label="Close chat">
+            <X />
+          </StyledChatCloseButton>
+        </StyledChatTitle>
+        {answer &&
+          answer.map((a, i) => (
+            <StyledAnswer key={i} $isAnswer={a.answer ?? false}>
+              {a.answer && a.mdx ? (
+                <MDXRemote {...a.mdx} components={mdxComponents} />
+              ) : (
+                a.text
+              )}
+            </StyledAnswer>
+          ))}
+        {loading && (
+          <StyledLoading>
+            Answering<span>.</span>
+            <span>.</span>
+            <span>.</span>
+          </StyledLoading>
+        )}
+        {error && (
+          <StyledError>
+            <strong>Error:</strong> {error}
+          </StyledError>
+        )}
+        <div ref={endRef} />
+      </StyledChat>
+
+      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>
+        <RainbowInput
+          id="chat-bottom-input"
+          inputRef={chatInputRef}
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          placeholder="Ask AI Assistant..."
+          autoComplete="off"
+          aria-label="Ask a follow-up question"
+        />
+        <StyledRainbowButton
+          type="submit"
+          disabled={loading || question.trim() === ""}
+          $hasContent={question.trim().length > 0}
+          aria-label={loading ? "Loading response" : "Submit question"}
+        >
+          {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
+        </StyledRainbowButton>
+      </StyledChatForm>
+    </>
+  );
+}
+
+const ChatContext = createContext<{
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  isChatActive: boolean;
+  question: string;
+  setQuestion: (q: string) => void;
+  loading: boolean;
+  error: string | null;
+  answer: Answer[];
+  setAnswer: (answers: Answer[]) => void;
+  ask: (e: React.FormEvent) => void;
+  clearChat: () => void;
+  chatInputRef: React.RefObject<HTMLInputElement | null>;
+}>({
+  isOpen: false,
+  setIsOpen: () => {},
+  isChatActive: false,
+  question: "",
+  setQuestion: () => {},
+  loading: false,
+  error: null,
+  answer: [],
+  setAnswer: () => {},
+  ask: () => {},
+  clearChat: () => {},
+  chatInputRef: { current: null },
+});
+
+interface ChatContextProviderProps {
+  children: React.ReactNode;
+  isChatActive: boolean;
+}
+
+const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [question, setQuestion] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [answer, setAnswer] = useState<Answer[]>([]);
+  const abortRef = useRef<AbortController | null>(null);
+  const chatInputRef = useRef<HTMLInputElement | null>(null);
 
   async function ask(e: React.FormEvent) {
     e.preventDefault();
@@ -730,7 +916,6 @@ function Chat() {
     abortRef.current = controller;
 
     try {
-      // Build conversation history from previous Q&A pairs
       const history = answer
         .filter((a) => a.text.trim() !== "")
         .map((a) => ({
@@ -757,7 +942,6 @@ function Chat() {
         throw new Error("Failed to get response reader");
       }
 
-      // Add a placeholder for the streaming answer
       const streamingAnswerIndex = mergedQuestions.length;
       setAnswer([...mergedQuestions, { text: "", answer: true }]);
 
@@ -768,7 +952,6 @@ function Chat() {
 
         buffer += decoder.decode(value, { stream: true });
         const parts = buffer.split("\\n");
-        // Keep the last (potentially incomplete) part in the buffer
         buffer = parts.pop() ?? "";
 
         for (const line of parts) {
@@ -792,7 +975,6 @@ function Chat() {
                 throw new Error(data.data);
               } else if (data.type === "done") {
                 const streamedContent = contentParts.join("");
-                // Finalize with MDX serialization
                 let mdxSource: MDXRemoteSerializeResult | null = null;
                 try {
                   mdxSource = await serialize(streamedContent, {
@@ -838,109 +1020,11 @@ function Chat() {
     }
   }
 
-  return (
-    <>
-      <StyledChatFixedForm onSubmit={ask} $hide={answer?.length > 0}>
-        <StyledChatFixedInner>
-          <RainbowInput
-            value={question}
-            onChange={(e) => setQuestion(e.target.value)}
-            placeholder="Ask AI Assistant..."
-            autoComplete="off"
-            aria-label="Ask a question about the documentation"
-          />
-          <StyledRainbowButton
-            type="submit"
-            disabled={loading}
-            $hasContent={question.trim().length > 0}
-            aria-label={loading ? "Loading response" : "Submit question"}
-          >
-            {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
-          </StyledRainbowButton>
-        </StyledChatFixedInner>
-      </StyledChatFixedForm>
-
-      <StyledChat $isVisible={isOpen}>
-        <StyledChatTitle>
-          <StyledChatTitleIconWrapper>
-            <Sparkles />
-            <h3>AI Assistant</h3>
-          </StyledChatTitleIconWrapper>
-          <StyledChatCloseButton
-            onClick={() => {
-              abortRef.current?.abort();
-              setAnswer([]);
-              setIsOpen(false);
-            }}
-            aria-label="Close chat"
-          >
-            <X />
-          </StyledChatCloseButton>
-        </StyledChatTitle>
-        {answer &&
-          answer.map((a, i) => (
-            <StyledAnswer key={i} $isAnswer={a.answer ?? false}>
-              {a.answer && a.mdx ? (
-                <MDXRemote {...a.mdx} components={mdxComponents} />
-              ) : (
-                a.text
-              )}
-            </StyledAnswer>
-          ))}
-        {loading && (
-          <StyledLoading>
-            Answering<span>.</span>
-            <span>.</span>
-            <span>.</span>
-          </StyledLoading>
-        )}
-        {error && (
-          <StyledError>
-            <strong>Error:</strong> {error}
-          </StyledError>
-        )}
-        <div ref={endRef} />
-      </StyledChat>
-
-      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>
-        <RainbowInput
-          id="chat-bottom-input"
-          value={question}
-          onChange={(e) => setQuestion(e.target.value)}
-          placeholder="Ask AI Assistant..."
-          autoComplete="off"
-          aria-label="Ask a follow-up question"
-        />
-        <StyledRainbowButton
-          type="submit"
-          disabled={loading || question.trim() === ""}
-          $hasContent={question.trim().length > 0}
-          aria-label={loading ? "Loading response" : "Submit question"}
-        >
-          {loading ? <LoaderPinwheel className="loading" /> : <ArrowUp />}
-        </StyledRainbowButton>
-      </StyledChatForm>
-    </>
-  );
-}
-
-const ChatContext = createContext<{
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  isChatActive: boolean;
-}>({
-  isOpen: false,
-  setIsOpen: () => {},
-  isChatActive: false,
-});
-
-interface ChatContextProviderProps {
-  children: React.ReactNode;
-  isChatActive: boolean;
-}
-
-const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  function clearChat() {
+    abortRef.current?.abort();
+    setAnswer([]);
+    setIsOpen(false);
+  }
 
   return (
     <ChatContext.Provider
@@ -948,6 +1032,15 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
         isOpen,
         setIsOpen,
         isChatActive,
+        question,
+        setQuestion,
+        loading,
+        error,
+        answer,
+        setAnswer,
+        ask,
+        clearChat,
+        chatInputRef,
       }}
     >
       {children}
@@ -955,5 +1048,5 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
   );
 };
 
-export { Chat, ChtProvider, ChatContext };
+export { Chat, ChtProvider, ChatContext, ChatButtonCTA };
 `;

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

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

package/dist/templates/components/DocsSideBar.js

@@ -1,22 +1,29 @@
 export const docsSideBarTemplate = `"use client";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Space } from "cherry-styled-components";
 import {
   StyledIndexSidebar,
   StyledIndexSidebarLink,
   StyledIndexSidebarLabel,
+  StyledIndexSidebarLi,
 } from "@/components/layout/DocsComponents";
 
-export interface Heading {
+interface Heading {
   id: string;
   text: string;
   level: number;
 }
 
-const OFFSET = 80;
+const FALLBACK_OFFSET = 60;
+
+function getOffset() {
+  const header = document.getElementById("header");
+  return (header ? header.offsetHeight : FALLBACK_OFFSET) + 20;
+}
 
 export function DocsSideBar({ headings }: { headings: Heading[] }) {
   const [activeId, setActiveId] = useState<string>("");
+  const activeRef = useRef<HTMLLIElement>(null);
 
   const handleScroll = useCallback(() => {
     if (headings.length === 0) return;
@@ -39,10 +46,10 @@ export function DocsSideBar({ headings }: { headings: Heading[] }) {
     if (visibleHeadings.length > 0) {
       let closestHeading = visibleHeadings[0];
       let closestDistance = Math.abs(
-        closestHeading.getBoundingClientRect().top - OFFSET,
+        closestHeading.getBoundingClientRect().top - getOffset(),
       );
       for (const heading of visibleHeadings) {
-        const distance = Math.abs(heading.getBoundingClientRect().top - OFFSET);
+        const distance = Math.abs(heading.getBoundingClientRect().top - getOffset());
         if (
           distance < closestDistance &&
           heading.getBoundingClientRect().top <= windowHeight * 0.3
@@ -58,7 +65,7 @@ export function DocsSideBar({ headings }: { headings: Heading[] }) {
     let currentActiveId = headings[0].id;
     for (const element of headingElements) {
       const rect = element.getBoundingClientRect();
-      if (rect.top <= OFFSET) {
+      if (rect.top <= getOffset()) {
         currentActiveId = element.id;
       } else {
         break;
@@ -93,26 +100,42 @@ export function DocsSideBar({ headings }: { headings: Heading[] }) {
     };
   }, [handleScroll, headings]);
 
+  useEffect(() => {
+    const el = activeRef.current;
+    const container = el?.closest("[data-sidebar]") as HTMLElement | null;
+    if (!el || !container) return;
+    const elRect = el.getBoundingClientRect();
+    const cRect = container.getBoundingClientRect();
+    const pad = 140;
+    if (elRect.bottom + pad > cRect.bottom) {
+      container.scrollBy({ top: elRect.bottom - cRect.bottom + pad, behavior: "smooth" });
+    } else if (elRect.top - pad < cRect.top) {
+      container.scrollBy({ top: elRect.top - cRect.top - pad, behavior: "smooth" });
+    }
+  }, [activeId]);
+
   const handleHeadingClick = (headingId: string) => {
     const element = document.getElementById(headingId);
     if (element) {
       const elementPosition =
         element.getBoundingClientRect().top + window.scrollY;
-      window.scrollTo({ top: elementPosition - OFFSET, behavior: "smooth" });
+      window.scrollTo({ top: elementPosition - getOffset(), behavior: "smooth" });
     }
   };
 
   return (
-    <StyledIndexSidebar>
+    <StyledIndexSidebar data-sidebar>
       {headings?.length > 0 && (
         <>
           <StyledIndexSidebarLabel>On this page</StyledIndexSidebarLabel>
-          <Space $size={20} />
+          <Space $size={15} />
         </>
       )}
       {headings.map((heading, index) => (
-        <li
+        <StyledIndexSidebarLi
           key={index}
+          ref={activeId === heading.id ? activeRef : null}
+          $isActive={activeId === heading.id}
           style={{ paddingLeft: \`\${(heading.level - 1) * 16}px\` }}
         >
           <StyledIndexSidebarLink
@@ -125,7 +148,7 @@ export function DocsSideBar({ headings }: { headings: Heading[] }) {
           >
             {heading.text}
           </StyledIndexSidebarLink>
-        </li>
+        </StyledIndexSidebarLi>
       ))}
     </StyledIndexSidebar>
   );

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

@@ -1 +1 @@
-export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Space } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\n\ntype NavItem = {\n  label: string;\n  links: NavItemLink[];\n};\n\ntype NavItemLink = {\n  slug: string;\n  title: string;\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => {\n                    return (\n                      <StyledSidebarListItem key={indexChild}>\n                        <StyledSidebarListItemLink\n                          href={`/${link.slug}`}\n                          $isActive={pathname === `/${link.slug}`}\n                          onClick={() => setIsMobileMenuOpen(false)}\n                        >\n                          {link.title}\n                        </StyledSidebarListItemLink>\n                      </StyledSidebarListItem>\n                    );\n                  })}\n                <Space $size={20} />\n              </StyledSidebarList>\n            );\n          })}\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";
+export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useState, Suspense } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport {\n  ToggleTheme,\n  ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\n\ntype NavItem = {\n  label: string;\n  links: NavItemLink[];\n};\n\ntype NavItemLink = {\n  slug: string;\n  title: string;\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => {\n                    return (\n                      <StyledSidebarListItem key={indexChild}>\n                        <StyledSidebarListItemLink\n                          href={`/${link.slug}`}\n                          $isActive={pathname === `/${link.slug}`}\n                          onClick={() => setIsMobileMenuOpen(false)}\n                        >\n                          {link.title}\n                        </StyledSidebarListItemLink>\n                      </StyledSidebarListItem>\n                    );\n                  })}\n                <Space $size={20} />\n              </StyledSidebarList>\n            );\n          })}\n        <Space $xs={40} $lg={20} />\n        <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n          <Suspense fallback={<ToggleThemeLoading />}>\n            <ToggleTheme />\n          </Suspense>\n        </Flex>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";