doccupine 0.0.63 → 0.0.65

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(\n          heading.getBoundingClientRect().top - getOffset(),\n        );\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({\n        top: elRect.bottom - cRect.bottom + pad,\n        behavior: \"smooth\",\n      });\n    } else if (elRect.top - pad < cRect.top) {\n      container.scrollBy({\n        top: elRect.top - cRect.top - pad,\n        behavior: \"smooth\",\n      });\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({\n        top: elementPosition - getOffset(),\n        behavior: \"smooth\",\n      });\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,12 @@ 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 +67,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 +102,51 @@ 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 +159,7 @@ export function DocsSideBar({ headings }: { headings: Heading[] }) {
           >
             {heading.text}
           </StyledIndexSidebarLink>
-        </li>
+        </StyledIndexSidebarLi>
       ))}
     </StyledIndexSidebar>
   );

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

@@ -0,0 +1 @@
+export declare const lockBodyScrollTemplate = "import { useEffect } from \"react\";\n\nexport function useLockBodyScroll(isActive: boolean) {\n  useEffect(() => {\n    const mql = window.matchMedia(\"(max-width: 992px)\");\n    function update() {\n      document.body.style.overflow = isActive && mql.matches ? \"hidden\" : \"\";\n    }\n    update();\n    mql.addEventListener(\"change\", update);\n    return () => {\n      mql.removeEventListener(\"change\", update);\n      document.body.style.overflow = \"\";\n    };\n  }, [isActive]);\n}\n";

package/dist/templates/components/LockBodyScroll.js

@@ -0,0 +1,17 @@
+export const lockBodyScrollTemplate = `import { useEffect } from "react";
+
+export function useLockBodyScroll(isActive: boolean) {
+  useEffect(() => {
+    const mql = window.matchMedia("(max-width: 992px)");
+    function update() {
+      document.body.style.overflow = isActive && mql.matches ? "hidden" : "";
+    }
+    update();
+    mql.addEventListener("change", update);
+    return () => {
+      mql.removeEventListener("change", update);
+      document.body.style.overflow = "";
+    };
+  }, [isActive]);
+}
+`;

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\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\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  useLockBodyScroll(isMobileMenuOpen);\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";

package/dist/templates/components/SideBar.js

@@ -1,7 +1,7 @@
 export const sideBarTemplate = `"use client";
-import { useContext, useState } from "react";
+import { useContext, useState, Suspense } from "react";
 import { usePathname } from "next/navigation";
-import { Space } from "cherry-styled-components";
+import { Flex, Space } from "cherry-styled-components";
 import {
   DocsSidebar,
   SectionBarContext,
@@ -13,6 +13,11 @@ import {
   StyleMobileBar,
   StyledMobileBurger,
 } from "@/components/layout/DocsComponents";
+import {
+  ToggleTheme,
+  ToggleThemeLoading,
+} from "@/components/layout/ThemeToggle";
+import { useLockBodyScroll } from "@/components/LockBodyScroll";
 
 type NavItem = {
   label: string;
@@ -33,6 +38,8 @@ function SideBar({ result }: SideBarProps) {
   const hasSectionBar = useContext(SectionBarContext);
   const pathname = usePathname();
 
+  useLockBodyScroll(isMobileMenuOpen);
+
   return (
     <DocsSidebar>
       <StyleMobileBar
@@ -74,6 +81,12 @@ function SideBar({ result }: SideBarProps) {
               </StyledSidebarList>
             );
           })}
+        <Space $xs={40} $lg={20} />
+        <Flex $xsJustifyContent="flex-start" $lgJustifyContent="flex-end">
+          <Suspense fallback={<ToggleThemeLoading />}>
+            <ToggleTheme />
+          </Suspense>
+        </Flex>
       </StyledSidebar>
     </DocsSidebar>
   );

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, Theme } from \"cherry-styled-components\";\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\nexport interface 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 { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components\";\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";

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

@@ -62,7 +62,7 @@ const StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>\`
     \`}
 \`;
 
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   title: string;
 }

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

@@ -1 +1 @@
-export declare const actionBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { SectionBarContext } from \"@/components/layout/DocsComponents\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n}>`\n  position: absolute;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 0 20px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: calc(100vw - 640px);\n    width: 100%;\n    padding: 0 20px 20px;\n    margin: 0;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 120px 20px 20px;\n      `}\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: transparent;\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n  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: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:hover {\n    border-color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div<{\n  theme: Theme;\n  $isChatActive?: boolean;\n  $isChatOpen?: boolean;\n  $hasSectionBar?: boolean;\n}>`\n  padding-top: 74px;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    ${({ $isChatActive }) =>\n      $isChatActive &&\n      css`\n        padding-top: 140px;\n      `}\n\n    ${({ $isChatOpen, $isChatActive }) =>\n      $isChatOpen &&\n      $isChatActive &&\n      css`\n        padding-top: 70px;\n      `}\n  }\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(\n      100vh - ${({ $hasSectionBar }) => ($hasSectionBar ? 219 : 178)}px\n    );\n\n    ${({ $isChatOpen, $isChatActive, $hasSectionBar }) =>\n      !$isChatOpen &&\n      $isChatActive &&\n      css`\n        min-height: calc(100vh - ${$hasSectionBar ? 288 : 246}px);\n      `}\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 176px);\n\n      ${({ $isChatOpen, $isChatActive }) =>\n        !$isChatOpen &&\n        $isChatActive &&\n        css`\n          min-height: calc(100vh - 242px);\n        `}\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const { isOpen, isChatActive } = useContext(ChatContext);\n  const hasSectionBar = useContext(SectionBarContext);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar $isChatOpen={isOpen}>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              <span>Copy Content</span>\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle Theme\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && (\n        <StyledContent\n          $isChatActive={isChatActive}\n          $isChatOpen={isOpen}\n          $hasSectionBar={hasSectionBar}\n        >\n          {children}\n        </StyledContent>\n      )}\n      {!isView && (\n        <StyledContent\n          $isChatActive={isChatActive}\n          $isChatOpen={isOpen}\n          $hasSectionBar={hasSectionBar}\n        >\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };\n";
+export declare const actionBarTemplate = "\"use client\";\nimport { useContext, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components\";\nimport { SectionBarContext } from \"@/components/layout/DocsComponents\";\nimport { StyledSmallButton } from \"@/components/layout/SharedStyled\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n}>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 12px 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 640px;\n  margin: auto;\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    padding: 12px 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $copied: boolean;\n}>`\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) =>\n      theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div<{\n  theme: Theme;\n  $hasSectionBar?: boolean;\n}>`\n  padding-top: 20px;\n  transition: all 0.3s ease;\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(\n      100vh - ${({ $hasSectionBar }) => ($hasSectionBar ? 202 : 160)}px\n    );\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 159px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              Copied!\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              Copy content\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle Theme\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>{children}</StyledContent>\n      )}\n      {!isView && (\n        <StyledContent $hasSectionBar={hasSectionBar}>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };\n";

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

@@ -5,8 +5,8 @@ import { Icon } from "@/components/layout/Icon";
 import { mq, Theme } from "@/app/theme";
 import { rgba } from "polished";
 import { resetButton, Textarea } from "cherry-styled-components";
-import { ChatContext } from "@/components/Chat";
 import { SectionBarContext } from "@/components/layout/DocsComponents";
+import { StyledSmallButton } from "@/components/layout/SharedStyled";
 
 interface ActionBarProps {
   children: React.ReactNode;
@@ -17,28 +17,18 @@ const StyledActionBar = styled.div<{
   theme: Theme;
   $isChatOpen?: boolean;
 }>\`
-  position: absolute;
   border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
   left: 0;
-  padding: 0 20px 20px;
+  padding: 12px 0;
   display: flex;
   justify-content: space-between;
   width: 100%;
+  max-width: 640px;
+  margin: auto;
   transition: all 0.3s ease;
 
   \${mq("lg")} {
-    left: 50%;
-    transform: translateX(-50%);
-    max-width: calc(100vw - 640px);
-    width: 100%;
-    padding: 0 20px 20px;
-    margin: 0;
-
-    \${({ $isChatOpen }) =>
-      $isChatOpen &&
-      css\`
-        padding: 0 120px 20px 20px;
-      \`}
+    padding: 12px 0;
   }
 \`;
 
@@ -46,38 +36,20 @@ const StyledActionBarContent = styled.div\`
   margin: auto 0;
 \`;
 
-const StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
-  background: transparent;
+const StyledCopyButton = styled(StyledSmallButton)<{
+  theme: Theme;
+  $copied: boolean;
+}>\`
   border: solid 1px
     \${({ theme, $copied }) =>
       $copied ? theme.colors.success : theme.colors.grayLight};
   color: \${({ theme, $copied }) =>
     $copied ? theme.colors.success : theme.colors.primary};
-  border-radius: \${({ theme }) => theme.spacing.radius.xs};
-  padding: 6px 8px;
-  font-size: 12px;
-  font-family: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-right: -6px;
 
   & svg.lucide {
     color: \${({ theme, $copied }) =>
       $copied ? theme.colors.success : theme.colors.primary};
   }
-
-  &:hover {
-    border-color: \${({ theme, $copied }) =>
-      $copied ? theme.colors.success : theme.colors.primary};
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
 \`;
 
 const StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>\`
@@ -150,53 +122,22 @@ const StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>\`
 
 const StyledContent = styled.div<{
   theme: Theme;
-  $isChatActive?: boolean;
-  $isChatOpen?: boolean;
   $hasSectionBar?: boolean;
 }>\`
-  padding-top: 74px;
+  padding-top: 20px;
   transition: all 0.3s ease;
 
-  \${mq("lg")} {
-    \${({ $isChatActive }) =>
-      $isChatActive &&
-      css\`
-        padding-top: 140px;
-      \`}
-
-    \${({ $isChatOpen, $isChatActive }) =>
-      $isChatOpen &&
-      $isChatActive &&
-      css\`
-        padding-top: 70px;
-      \`}
-  }
-
   & textarea {
     max-width: 640px;
     margin: auto;
     width: 100%;
     height: 100%;
     min-height: calc(
-      100vh - \${({ $hasSectionBar }) => ($hasSectionBar ? 219 : 178)}px
+      100vh - \${({ $hasSectionBar }) => ($hasSectionBar ? 202 : 160)}px
     );
 
-    \${({ $isChatOpen, $isChatActive, $hasSectionBar }) =>
-      !$isChatOpen &&
-      $isChatActive &&
-      css\`
-        min-height: calc(100vh - \${$hasSectionBar ? 288 : 246}px);
-      \`}
-
     \${mq("lg")} {
-      min-height: calc(100vh - 176px);
-
-      \${({ $isChatOpen, $isChatActive }) =>
-        !$isChatOpen &&
-        $isChatActive &&
-        css\`
-          min-height: calc(100vh - 242px);
-        \`}
+      min-height: calc(100vh - 159px);
     }
   }
 \`;
@@ -204,7 +145,6 @@ const StyledContent = styled.div<{
 function ActionBar({ children, content }: ActionBarProps) {
   const [isView, setIsView] = useState(true);
   const [copied, setCopied] = useState(false);
-  const { isOpen, isChatActive } = useContext(ChatContext);
   const hasSectionBar = useContext(SectionBarContext);
 
   const handleCopyContent = async () => {
@@ -219,17 +159,17 @@ function ActionBar({ children, content }: ActionBarProps) {
 
   return (
     <>
-      <StyledActionBar $isChatOpen={isOpen}>
+      <StyledActionBar>
         <StyledCopyButton onClick={handleCopyContent} $copied={copied}>
           {copied ? (
             <>
               <Icon name="check" size={16} />
-              <span>Copied!</span>
+              Copied!
             </>
           ) : (
             <>
               <Icon name="copy" size={16} />
-              <span>Copy Content</span>
+              Copy content
             </>
           )}
         </StyledCopyButton>
@@ -245,20 +185,10 @@ function ActionBar({ children, content }: ActionBarProps) {
         </StyledActionBarContent>
       </StyledActionBar>
       {isView && (
-        <StyledContent
-          $isChatActive={isChatActive}
-          $isChatOpen={isOpen}
-          $hasSectionBar={hasSectionBar}
-        >
-          {children}
-        </StyledContent>
+        <StyledContent $hasSectionBar={hasSectionBar}>{children}</StyledContent>
       )}
       {!isView && (
-        <StyledContent
-          $isChatActive={isChatActive}
-          $isChatOpen={isOpen}
-          $hasSectionBar={hasSectionBar}
-        >
+        <StyledContent $hasSectionBar={hasSectionBar}>
           <Textarea defaultValue={content} $fullWidth />
         </StyledContent>
       )}

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

@@ -1 +1 @@
-export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\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 }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  ${({ theme, $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: ${theme.isDark ? \"#0ea5e94d\" : \"#0ea5e933\"};\n      background: ${theme.isDark ? \"#0ea5e91a\" : \"#f0f9ff80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#bae6fd\" : \"#0c4a6e\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: ${theme.isDark ? \"#71717a4d\" : \"#71717a33\"};\n      background: ${theme.isDark ? \"#71717a1a\" : \"#fafafa80\"};\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: ${theme.isDark ? \"#e4e4e7\" : \"#18181b\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: ${theme.isDark ? \"#f59e0b4d\" : \"#f59e0b33\"};\n      background: ${theme.isDark ? \"#f59e0b1a\" : \"#fffbeb80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fde68a\" : \"#78350f\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: ${theme.isDark ? \"#ef44444d\" : \"#ef444433\"};\n      background: ${theme.isDark ? \"#ef44441a\" : \"#fef2f280\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fecaca\" : \"#7f1d1d\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: ${theme.isDark ? \"#10b9814d\" : \"#10b98133\"};\n      background: ${theme.isDark ? \"#10b9811a\" : \"#ecfdf580\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#a7f3d0\" : \"#064e3b\"};\n      }\n    `}\n`;\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      {children}\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";
+export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\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 }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  ${({ theme, $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: ${theme.isDark ? \"#0ea5e94d\" : \"#0ea5e933\"};\n      background: ${theme.isDark ? \"#0ea5e91a\" : \"#f0f9ff80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#bae6fd\" : \"#0c4a6e\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: ${theme.isDark ? \"#71717a4d\" : \"#71717a33\"};\n      background: ${theme.isDark ? \"#71717a1a\" : \"#fafafa80\"};\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: ${theme.isDark ? \"#e4e4e7\" : \"#18181b\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: ${theme.isDark ? \"#f59e0b4d\" : \"#f59e0b33\"};\n      background: ${theme.isDark ? \"#f59e0b1a\" : \"#fffbeb80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fde68a\" : \"#78350f\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: ${theme.isDark ? \"#ef44444d\" : \"#ef444433\"};\n      background: ${theme.isDark ? \"#ef44441a\" : \"#fef2f280\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fecaca\" : \"#7f1d1d\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: ${theme.isDark ? \"#10b9814d\" : \"#10b98133\"};\n      background: ${theme.isDark ? \"#10b9811a\" : \"#ecfdf580\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#a7f3d0\" : \"#064e3b\"};\n      }\n    `}\n`;\n\ninterface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      {children}\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";

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

@@ -84,7 +84,7 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
     \`}
 \`;
 
-export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   icon?: IconProps;
   type?: CalloutType;

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

@@ -1 +1 @@
-export declare const cardTemplate = "\"use client\";\nimport styled, { useTheme } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\nconst StyledCard = 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  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledCardTitle = styled.h3<{ theme: Theme }>`\n  margin: 5px 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n  icon?: IconProps;\n}\n\nfunction Card({ children, title, icon }: CardProps) {\n  const theme = useTheme() as Theme;\n\n  return (\n    <StyledCard>\n      {icon && <Icon name={icon} color={theme.colors.primary} />}\n      <StyledCardTitle>{title}</StyledCardTitle>\n      {children}\n    </StyledCard>\n  );\n}\n\nexport { Card };\n";
+export declare const cardTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst cardStyles = css<{ 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  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  ${cardStyles}\n`;\n\nconst StyledCardLink = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  ${cardStyles}\n  text-decoration: none;\n`;\n\nconst StyledCardTitle = styled.h3<{ theme: Theme }>`\n  margin: 5px 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n  icon?: IconProps;\n  href?: string;\n}\n\nfunction Card({ children, title, icon, href }: CardProps) {\n  const theme = useTheme() as Theme;\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} color={theme.colors.primary} />}\n      <StyledCardTitle>{title}</StyledCardTitle>\n      {children}\n    </>\n  );\n\n  if (href) {\n    return <StyledCardLink href={href}>{content}</StyledCardLink>;\n  }\n\n  return <StyledCard>{content}</StyledCard>;\n}\n\nexport { Card };\n";

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

@@ -1,9 +1,11 @@
 export const cardTemplate = `"use client";
-import styled, { useTheme } from "styled-components";
+import Link from "next/link";
+import styled, { css, useTheme } from "styled-components";
 import { styledText, Theme } from "cherry-styled-components";
 import { Icon, IconProps } from "@/components/layout/Icon";
+import { interactiveStyles } from "@/components/layout/SharedStyled";
 
-const StyledCard = styled.div<{ theme: Theme }>\`
+const cardStyles = css<{ theme: Theme }>\`
   background: \${({ theme }) => theme.colors.light};
   border: solid 1px \${({ theme }) => theme.colors.grayLight};
   border-radius: \${({ theme }) => theme.spacing.radius.lg};
@@ -13,28 +15,45 @@ const StyledCard = styled.div<{ theme: Theme }>\`
   color: \${({ theme }) => theme.colors.grayDark};
 \`;
 
+const StyledCard = styled.div<{ theme: Theme }>\`
+  \${cardStyles}
+\`;
+
+const StyledCardLink = styled(Link)<{ theme: Theme }>\`
+  \${interactiveStyles};
+  \${cardStyles}
+  text-decoration: none;
+\`;
+
 const StyledCardTitle = styled.h3<{ theme: Theme }>\`
   margin: 5px 0;
   color: \${({ theme }) => theme.colors.dark};
   \${({ theme }) => styledText(theme)};
 \`;
 
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   title: string;
   icon?: IconProps;
+  href?: string;
 }
 
-function Card({ children, title, icon }: CardProps) {
+function Card({ children, title, icon, href }: CardProps) {
   const theme = useTheme() as Theme;
 
-  return (
-    <StyledCard>
+  const content = (
+    <>
       {icon && <Icon name={icon} color={theme.colors.primary} />}
       <StyledCardTitle>{title}</StyledCardTitle>
       {children}
-    </StyledCard>
+    </>
   );
+
+  if (href) {
+    return <StyledCardLink href={href}>{content}</StyledCardLink>;
+  }
+
+  return <StyledCard>{content}</StyledCard>;
 }
 
 export { Card };

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

@@ -1 +1 @@
-export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { Theme, styledCode } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\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\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\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\n    ${({ theme }) =>\n      theme.isDark\n        ? rgba(theme.colors.dark, 0.2)\n        : rgba(theme.colors.dark, 0.1)};\n`;\n\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#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\n    ${({ theme }) =>\n      theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 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\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: ${({ theme }) =>\n    theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 0.1)};\n`;\n\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? rgba(\"#7ee787\", 0.2)\n        : rgba(\"#2da44e\", 0.1)\n      : \"transparent\"};\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.1)};\n  color: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? \"#7ee787\"\n        : \"#2da44e\"\n      : theme.isDark\n        ? \"#c9d1d9\"\n        : \"#57606a\"};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? \"#c9d1d9\"\n          : \"#57606a\"};\n  }\n\n  &:hover {\n    background: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? rgba(\"#7ee787\", 0.3)\n          : rgba(\"#2da44e\", 0.2)\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.05)};\n    border-color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.2)\n          : rgba(\"#000000\", 0.2)};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#ffffff\")};\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: ${({ theme }) => (theme.isDark ? \"#ffffff\" : \"#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(100svh - 400px);\n  ${({ theme }) => styledCode(theme)};\n\n  /* Dark mode syntax highlighting (GitHub Dark) */\n  ${({ theme }) =>\n    theme.isDark &&\n    `\n    & .hljs {\n      color: #c9d1d9;\n      background: #0d1117;\n    }\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\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #d2a8ff;\n    }\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\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #a5d6ff;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #ffa657;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #8b949e;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #7ee787;\n    }\n\n    & .hljs-subst {\n      color: #c9d1d9;\n    }\n\n    & .hljs-section {\n      color: #1f6feb;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #f2cc60;\n    }\n\n    & .hljs-emphasis {\n      color: #c9d1d9;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #c9d1d9;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #aff5b4;\n      background-color: #033a16;\n    }\n\n    & .hljs-deletion {\n      color: #ffdcd7;\n      background-color: #67060c;\n    }\n  `}\n\n  /* Light mode syntax highlighting (GitHub Light) */\n  ${({ theme }) =>\n    !theme.isDark &&\n    `\n    & .hljs {\n      color: #24292f;\n      background: #ffffff;\n    }\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\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #8250df;\n    }\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\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #0a3069;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #953800;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #6e7781;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #116329;\n    }\n\n    & .hljs-subst {\n      color: #24292f;\n    }\n\n    & .hljs-section {\n      color: #0550ae;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #953800;\n    }\n\n    & .hljs-emphasis {\n      color: #24292f;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #24292f;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #116329;\n      background-color: #dafbe1;\n    }\n\n    & .hljs-deletion {\n      color: #82071e;\n      background-color: #ffebe9;\n    }\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({ code, language = \"javascript\", theme, className }: 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        <CopyButton onClick={handleCopy} $copied={copied} theme={theme}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy</span>\n            </>\n          )}\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";
+export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { Theme, styledCode } from \"cherry-styled-components\";\nimport { rgba } from \"polished\";\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\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\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\n    ${({ theme }) =>\n      theme.isDark\n        ? rgba(theme.colors.dark, 0.2)\n        : rgba(theme.colors.dark, 0.1)};\n`;\n\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#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\n    ${({ theme }) =>\n      theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 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\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: ${({ theme }) =>\n    theme.isDark ? rgba(\"#ffffff\", 0.1) : rgba(\"#000000\", 0.1)};\n`;\n\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? rgba(\"#7ee787\", 0.2)\n        : rgba(\"#2da44e\", 0.1)\n      : \"transparent\"};\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.1)};\n  color: ${({ theme, $copied }) =>\n    $copied\n      ? theme.isDark\n        ? \"#7ee787\"\n        : \"#2da44e\"\n      : theme.isDark\n        ? \"#c9d1d9\"\n        : \"#57606a\"};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? \"#c9d1d9\"\n          : \"#57606a\"};\n  }\n\n  &:hover {\n    background: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? rgba(\"#7ee787\", 0.3)\n          : rgba(\"#2da44e\", 0.2)\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.1)\n          : rgba(\"#000000\", 0.05)};\n    border-color: ${({ theme, $copied }) =>\n      $copied\n        ? theme.isDark\n          ? \"#7ee787\"\n          : \"#2da44e\"\n        : theme.isDark\n          ? rgba(\"#ffffff\", 0.2)\n          : rgba(\"#000000\", 0.2)};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => (theme.isDark ? \"#0d1117\" : \"#ffffff\")};\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: ${({ theme }) => (theme.isDark ? \"#ffffff\" : \"#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  ${({ theme }) => styledCode(theme)};\n\n  /* Dark mode syntax highlighting (GitHub Dark) */\n  ${({ theme }) =>\n    theme.isDark &&\n    `\n    & .hljs {\n      color: #c9d1d9;\n      background: #0d1117;\n    }\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\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #d2a8ff;\n    }\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\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #a5d6ff;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #ffa657;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #8b949e;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #7ee787;\n    }\n\n    & .hljs-subst {\n      color: #c9d1d9;\n    }\n\n    & .hljs-section {\n      color: #1f6feb;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #f2cc60;\n    }\n\n    & .hljs-emphasis {\n      color: #c9d1d9;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #c9d1d9;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #aff5b4;\n      background-color: #033a16;\n    }\n\n    & .hljs-deletion {\n      color: #ffdcd7;\n      background-color: #67060c;\n    }\n  `}\n\n  /* Light mode syntax highlighting (GitHub Light) */\n  ${({ theme }) =>\n    !theme.isDark &&\n    `\n    & .hljs {\n      color: #24292f;\n      background: #ffffff;\n    }\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\n    & .hljs-title,\n    & .hljs-title.class_,\n    & .hljs-title.class_.inherited__,\n    & .hljs-title.function_ {\n      color: #8250df;\n    }\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\n    & .hljs-meta .hljs-string,\n    & .hljs-regexp,\n    & .hljs-string {\n      color: #0a3069;\n    }\n\n    & .hljs-built_in,\n    & .hljs-symbol {\n      color: #953800;\n    }\n\n    & .hljs-code,\n    & .hljs-comment,\n    & .hljs-formula {\n      color: #6e7781;\n    }\n\n    & .hljs-name,\n    & .hljs-quote,\n    & .hljs-selector-pseudo,\n    & .hljs-selector-tag {\n      color: #116329;\n    }\n\n    & .hljs-subst {\n      color: #24292f;\n    }\n\n    & .hljs-section {\n      color: #0550ae;\n      font-weight: 700;\n    }\n\n    & .hljs-bullet {\n      color: #953800;\n    }\n\n    & .hljs-emphasis {\n      color: #24292f;\n      font-style: italic;\n    }\n\n    & .hljs-strong {\n      color: #24292f;\n      font-weight: 700;\n    }\n\n    & .hljs-addition {\n      color: #116329;\n      background-color: #dafbe1;\n    }\n\n    & .hljs-deletion {\n      color: #82071e;\n      background-color: #ffebe9;\n    }\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({ code, language = \"javascript\", theme, className }: 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        <CopyButton onClick={handleCopy} $copied={copied} theme={theme}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy</span>\n            </>\n          )}\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";