doccupine 0.0.109 → 0.0.111

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

@@ -1 +1 @@
-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 (deferred to next frame)\n    const hashId = window.location.hash ? window.location.hash.slice(1) : null;\n    // Run initial scroll check on next frame to avoid synchronous setState in effect\n    const rafId = requestAnimationFrame(() => {\n      if (hashId) {\n        setActiveId(hashId);\n      }\n      handleScroll();\n    });\n    // Re-check after browser finishes scrolling to hash target on new 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        <li aria-hidden=\"true\">\n          <StyledIndexSidebarLabel>On this page</StyledIndexSidebarLabel>\n          <Space $size={15} />\n        </li>\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";
+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 (deferred to next frame)\n    const hashId = window.location.hash ? window.location.hash.slice(1) : null;\n    // Run initial scroll check on next frame to avoid synchronous setState in effect\n    const rafId = requestAnimationFrame(() => {\n      if (hashId) {\n        setActiveId(hashId);\n      }\n      handleScroll();\n    });\n    // Re-check after browser finishes scrolling to hash target on new 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    // Animate the scroll, but honor users who opt out of motion.\n    const behavior = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n      .matches\n      ? \"auto\"\n      : \"smooth\";\n    if (elRect.bottom + pad > cRect.bottom) {\n      container.scrollBy({\n        top: elRect.bottom - cRect.bottom + pad,\n        behavior,\n      });\n    } else if (elRect.top - pad < cRect.top) {\n      container.scrollBy({\n        top: elRect.top - cRect.top - pad,\n        behavior,\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        <li aria-hidden=\"true\">\n          <StyledIndexSidebarLabel>On this page</StyledIndexSidebarLabel>\n          <Space $size={15} />\n        </li>\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

@@ -112,15 +112,20 @@ export function DocsSideBar({ headings }: { headings: Heading[] }) {
     const elRect = el.getBoundingClientRect();
     const cRect = container.getBoundingClientRect();
     const pad = 140;
+    // Animate the scroll, but honor users who opt out of motion.
+    const behavior = window.matchMedia("(prefers-reduced-motion: reduce)")
+      .matches
+      ? "auto"
+      : "smooth";
     if (elRect.bottom + pad > cRect.bottom) {
       container.scrollBy({
         top: elRect.bottom - cRect.bottom + pad,
-        behavior: "smooth",
+        behavior,
       });
     } else if (elRect.top - pad < cRect.top) {
       container.scrollBy({
         top: elRect.top - cRect.top - pad,
-        behavior: "smooth",
+        behavior,
       });
     }
   }, [activeId]);

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 { Flex, Space, ThemeToggle } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarGroupButton,\n  StyledSidebarGroupRow,\n  StyledSidebarGroupLink,\n  StyledSidebarGroupChevron,\n  StyledSidebarGroupContent,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\n// A link can be a leaf (slug + title) or a group with nested children. Both the\n// category icon and the per-link icon are optional Lucide names.\ntype NavItemLink = {\n  slug?: string;\n  title: string;\n  icon?: string;\n  links?: NavItemLink[];\n};\n\ntype NavItem = {\n  label: string;\n  icon?: string;\n  links: NavItemLink[];\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction linkContainsActivePath(link: NavItemLink, pathname: string): boolean {\n  if (link.slug !== undefined && pathname === `/${link.slug}`) {\n    return true;\n  }\n  return (link.links ?? []).some((child) =>\n    linkContainsActivePath(child, pathname),\n  );\n}\n\nfunction SidebarNavLink({\n  link,\n  depth,\n  pathname,\n  onNavigate,\n}: {\n  link: NavItemLink;\n  depth: number;\n  pathname: string;\n  onNavigate: () => void;\n}) {\n  const children = link.links ?? [];\n  const hasChildren = children.length > 0;\n  const href = link.slug !== undefined ? `/${link.slug}` : undefined;\n  const isActive = href !== undefined && pathname === href;\n  const indent = { paddingLeft: `${20 + depth * 14}px` };\n\n  // Open collapsible groups that contain the active page so deep links land\n  // with their ancestors already expanded.\n  const [isOpen, setIsOpen] = useState(\n    hasChildren\n      ? children.some((child) => linkContainsActivePath(child, pathname))\n      : false,\n  );\n\n  if (!hasChildren) {\n    return (\n      <StyledSidebarListItem>\n        <StyledSidebarListItemLink\n          href={href ?? \"#\"}\n          $isActive={isActive}\n          onClick={onNavigate}\n          style={indent}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n        </StyledSidebarListItemLink>\n      </StyledSidebarListItem>\n    );\n  }\n\n  const toggle = () => setIsOpen((prev) => !prev);\n  const toggleLabel = isOpen\n    ? `Collapse ${link.title}`\n    : `Expand ${link.title}`;\n  const groupActive = linkContainsActivePath(link, pathname);\n\n  return (\n    <li>\n      {href !== undefined ? (\n        <StyledSidebarGroupRow\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n        >\n          <StyledSidebarGroupLink href={href} onClick={onNavigate}>\n            {link.icon && <Icon name={link.icon} size={16} />}\n            {link.title}\n          </StyledSidebarGroupLink>\n          <StyledSidebarGroupChevron\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={isOpen}\n            aria-label={toggleLabel}\n          >\n            <Icon name=\"chevron-right\" size={16} />\n          </StyledSidebarGroupChevron>\n        </StyledSidebarGroupRow>\n      ) : (\n        <StyledSidebarGroupButton\n          type=\"button\"\n          onClick={toggle}\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n          aria-expanded={isOpen}\n          aria-label={toggleLabel}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n          <Icon name=\"chevron-right\" size={16} />\n        </StyledSidebarGroupButton>\n      )}\n      <StyledSidebarGroupContent $isOpen={isOpen}>\n        {children.map((child: NavItemLink, index: number) => (\n          <SidebarNavLink\n            key={index}\n            link={child}\n            depth={depth + 1}\n            pathname={pathname}\n            onNavigate={onNavigate}\n          />\n        ))}\n      </StyledSidebarGroupContent>\n    </li>\n  );\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        aria-label={\n          isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"\n        }\n        aria-expanded={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>\n                    {item.icon && <Icon name={item.icon} size={16} />}\n                    {item.label}\n                  </StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => (\n                    <SidebarNavLink\n                      key={indexChild}\n                      link={link}\n                      depth={0}\n                      pathname={pathname}\n                      onNavigate={() => setIsMobileMenuOpen(false)}\n                    />\n                  ))}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <ThemeToggle />\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";
+export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space, ThemeToggle } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarGroupButton,\n  StyledSidebarGroupRow,\n  StyledSidebarGroupLink,\n  StyledSidebarGroupChevron,\n  StyledSidebarGroupContent,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\n// A link can be a leaf (slug + title) or a group with nested children. Both the\n// category icon and the per-link icon are optional Lucide names.\ntype NavItemLink = {\n  slug?: string;\n  title: string;\n  icon?: string;\n  links?: NavItemLink[];\n};\n\ntype NavItem = {\n  label: string;\n  icon?: string;\n  links: NavItemLink[];\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction linkContainsActivePath(link: NavItemLink, pathname: string): boolean {\n  if (link.slug !== undefined && pathname === `/${link.slug}`) {\n    return true;\n  }\n  return (link.links ?? []).some((child) =>\n    linkContainsActivePath(child, pathname),\n  );\n}\n\nfunction SidebarNavLink({\n  link,\n  depth,\n  pathname,\n  onNavigate,\n}: {\n  link: NavItemLink;\n  depth: number;\n  pathname: string;\n  onNavigate: () => void;\n}) {\n  const children = link.links ?? [];\n  const hasChildren = children.length > 0;\n  const href = link.slug !== undefined ? `/${link.slug}` : undefined;\n  const isActive = href !== undefined && pathname === href;\n  const indent = { paddingLeft: `${20 + depth * 14}px` };\n\n  // Open collapsible groups that contain the active page so deep links land\n  // with their ancestors already expanded.\n  const [isOpen, setIsOpen] = useState(\n    hasChildren\n      ? children.some((child) => linkContainsActivePath(child, pathname))\n      : false,\n  );\n\n  if (!hasChildren) {\n    return (\n      <StyledSidebarListItem>\n        <StyledSidebarListItemLink\n          href={href ?? \"#\"}\n          $isActive={isActive}\n          aria-current={isActive ? \"page\" : undefined}\n          onClick={onNavigate}\n          style={indent}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n        </StyledSidebarListItemLink>\n      </StyledSidebarListItem>\n    );\n  }\n\n  const toggle = () => setIsOpen((prev) => !prev);\n  const toggleLabel = isOpen\n    ? `Collapse ${link.title}`\n    : `Expand ${link.title}`;\n  const groupActive = linkContainsActivePath(link, pathname);\n\n  return (\n    <li>\n      {href !== undefined ? (\n        <StyledSidebarGroupRow\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n        >\n          <StyledSidebarGroupLink\n            href={href}\n            aria-current={pathname === href ? \"page\" : undefined}\n            onClick={onNavigate}\n          >\n            {link.icon && <Icon name={link.icon} size={16} />}\n            {link.title}\n          </StyledSidebarGroupLink>\n          <StyledSidebarGroupChevron\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={isOpen}\n            aria-label={toggleLabel}\n          >\n            <Icon name=\"chevron-right\" size={16} />\n          </StyledSidebarGroupChevron>\n        </StyledSidebarGroupRow>\n      ) : (\n        <StyledSidebarGroupButton\n          type=\"button\"\n          onClick={toggle}\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n          aria-expanded={isOpen}\n          aria-label={toggleLabel}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n          <Icon name=\"chevron-right\" size={16} />\n        </StyledSidebarGroupButton>\n      )}\n      <StyledSidebarGroupContent $isOpen={isOpen}>\n        {children.map((child: NavItemLink, index: number) => (\n          <SidebarNavLink\n            key={index}\n            link={child}\n            depth={depth + 1}\n            pathname={pathname}\n            onNavigate={onNavigate}\n          />\n        ))}\n      </StyledSidebarGroupContent>\n    </li>\n  );\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n  const navRef = useRef<HTMLElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  // Bring the current page's link into view within the sidebar's own scroll\n  // area when it starts off-screen (deep pages, in-content links, search).\n  // Scoped to the nav via scrollTo so the main document never jumps.\n  useEffect(() => {\n    const nav = navRef.current;\n    if (!nav) return;\n    const active = nav.querySelector<HTMLElement>('[aria-current=\"page\"]');\n    if (!active) return;\n\n    const navRect = nav.getBoundingClientRect();\n    const activeRect = active.getBoundingClientRect();\n\n    // The theme-toggle footer is sticky over the bottom of the scroll area\n    // (~60px tall), so links underneath it are covered rather than visible.\n    // Clamp the visible bottom to the footer's top edge when it's pinned.\n    const footerRect = footerRef.current?.getBoundingClientRect();\n    const visibleBottom = footerRect\n      ? Math.min(navRect.bottom, footerRect.top)\n      : navRect.bottom;\n\n    const isOutOfView =\n      activeRect.top < navRect.top || activeRect.bottom > visibleBottom;\n    if (!isOutOfView) return;\n\n    // Center within the visible band (nav top .. footer top), not the full\n    // nav height, so the link never settles behind the footer.\n    const visibleHeight = visibleBottom - navRect.top;\n    const target =\n      nav.scrollTop +\n      (activeRect.top - navRect.top) -\n      (visibleHeight - active.clientHeight) / 2;\n\n    // Animate the scroll, but honor users who opt out of motion.\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    nav.scrollTo({\n      top: Math.max(0, target),\n      behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\n    });\n  }, [pathname]);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n        aria-label={\n          isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"\n        }\n        aria-expanded={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        ref={navRef}\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>\n                    {item.icon && <Icon name={item.icon} size={16} />}\n                    {item.label}\n                  </StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => (\n                    <SidebarNavLink\n                      key={indexChild}\n                      link={link}\n                      depth={0}\n                      pathname={pathname}\n                      onNavigate={() => setIsMobileMenuOpen(false)}\n                    />\n                  ))}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter ref={footerRef}>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <ThemeToggle />\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";

package/dist/templates/components/SideBar.js

@@ -1,5 +1,5 @@
 export const sideBarTemplate = `"use client";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { usePathname } from "next/navigation";
 import { Flex, Space, ThemeToggle } from "cherry-styled-components";
 import {
@@ -81,6 +81,7 @@ function SidebarNavLink({
         <StyledSidebarListItemLink
           href={href ?? "#"}
           $isActive={isActive}
+          aria-current={isActive ? "page" : undefined}
           onClick={onNavigate}
           style={indent}
         >
@@ -105,7 +106,11 @@ function SidebarNavLink({
           $isOpen={isOpen}
           style={indent}
         >
-          <StyledSidebarGroupLink href={href} onClick={onNavigate}>
+          <StyledSidebarGroupLink
+            href={href}
+            aria-current={pathname === href ? "page" : undefined}
+            onClick={onNavigate}
+          >
             {link.icon && <Icon name={link.icon} size={16} />}
             {link.title}
           </StyledSidebarGroupLink>
@@ -152,9 +157,53 @@ function SideBar({ result }: SideBarProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const hasSectionBar = useContext(SectionBarContext);
   const pathname = usePathname();
+  const navRef = useRef<HTMLElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
 
   useLockBodyScroll(isMobileMenuOpen);
 
+  // Bring the current page's link into view within the sidebar's own scroll
+  // area when it starts off-screen (deep pages, in-content links, search).
+  // Scoped to the nav via scrollTo so the main document never jumps.
+  useEffect(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const active = nav.querySelector<HTMLElement>('[aria-current="page"]');
+    if (!active) return;
+
+    const navRect = nav.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+
+    // The theme-toggle footer is sticky over the bottom of the scroll area
+    // (~60px tall), so links underneath it are covered rather than visible.
+    // Clamp the visible bottom to the footer's top edge when it's pinned.
+    const footerRect = footerRef.current?.getBoundingClientRect();
+    const visibleBottom = footerRect
+      ? Math.min(navRect.bottom, footerRect.top)
+      : navRect.bottom;
+
+    const isOutOfView =
+      activeRect.top < navRect.top || activeRect.bottom > visibleBottom;
+    if (!isOutOfView) return;
+
+    // Center within the visible band (nav top .. footer top), not the full
+    // nav height, so the link never settles behind the footer.
+    const visibleHeight = visibleBottom - navRect.top;
+    const target =
+      nav.scrollTop +
+      (activeRect.top - navRect.top) -
+      (visibleHeight - active.clientHeight) / 2;
+
+    // Animate the scroll, but honor users who opt out of motion.
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+    nav.scrollTo({
+      top: Math.max(0, target),
+      behavior: prefersReducedMotion ? "auto" : "smooth",
+    });
+  }, [pathname]);
+
   return (
     <DocsSidebar>
       <StyleMobileBar
@@ -169,6 +218,7 @@ function SideBar({ result }: SideBarProps) {
       </StyleMobileBar>
 
       <StyledSidebar
+        ref={navRef}
         $isActive={isMobileMenuOpen}
         $hasSectionBar={hasSectionBar}
       >
@@ -201,7 +251,7 @@ function SideBar({ result }: SideBarProps) {
               </StyledSidebarList>
             );
           })}
-        <StyledSidebarFooter>
+        <StyledSidebarFooter ref={footerRef}>
           <Flex $xsJustifyContent="flex-start" $lgJustifyContent="flex-end">
             <ThemeToggle />
           </Flex>

package/dist/templates/eslint.config.d.ts

@@ -1 +1 @@
-export declare const eslintConfigTemplate = "import nextConfig from \"eslint-config-next\";\n\n// Find the config object that already has @typescript-eslint plugin registered\nconst tsConfigIndex = nextConfig.findIndex(\n  (c) => c.plugins && \"@typescript-eslint\" in c.plugins,\n);\n\nconst config = nextConfig.map((c, i) => {\n  if (i === tsConfigIndex) {\n    return {\n      ...c,\n      rules: {\n        ...c.rules,\n        \"@typescript-eslint/no-explicit-any\": \"warn\",\n        \"@typescript-eslint/no-unused-vars\": [\n          \"warn\",\n          { argsIgnorePattern: \"^_\", varsIgnorePattern: \"^_\" },\n        ],\n      },\n    };\n  }\n  return c;\n});\n\nconfig.push({\n  rules: {\n    \"no-console\": [\"warn\", { allow: [\"warn\", \"error\"] }],\n  },\n});\n\nexport default config;\n";
+export declare const eslintConfigTemplate = "import globals from \"globals\";\nimport nextPlugin from \"@next/eslint-plugin-next\";\nimport reactPlugin from \"eslint-plugin-react\";\nimport reactHooksPlugin from \"eslint-plugin-react-hooks\";\nimport jsxA11yPlugin from \"eslint-plugin-jsx-a11y\";\nimport importPlugin from \"eslint-plugin-import\";\nimport tsParser from \"@typescript-eslint/parser\";\nimport tsPlugin from \"@typescript-eslint/eslint-plugin\";\n\n// Hand-rolled replacement for `eslint-config-next`'s default config.\n//\n// We don't use eslint-config-next under ESLint 10: its React version detection\n// (`settings.react.version: \"detect\"`) calls `context.getFilename()`, which\n// ESLint 10 removed, so it crashes on load. Composing the same plugins\n// ourselves lets us pin `react.version` (below) and stay in control.\n//\n// The recommended rule sets below mirror what eslint-config-next enables:\n// React, React Hooks, Next.js and jsx-a11y. On top of that we keep a few\n// project-specific rules (no-console and two @typescript-eslint rules).\n\nconst config = [\n  {\n    // node_modules/ and .git/ are ignored by default.\n    ignores: [\".next/**\", \"out/**\", \"build/**\", \"next-env.d.ts\"],\n  },\n  {\n    name: \"doccupine/base\",\n    files: [\"**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}\"],\n    plugins: {\n      react: reactPlugin,\n      \"react-hooks\": reactHooksPlugin,\n      import: importPlugin,\n      \"jsx-a11y\": jsxA11yPlugin,\n      \"@next/next\": nextPlugin,\n      \"@typescript-eslint\": tsPlugin,\n    },\n    languageOptions: {\n      parser: tsParser,\n      parserOptions: {\n        sourceType: \"module\",\n        ecmaFeatures: { jsx: true },\n      },\n      globals: { ...globals.browser, ...globals.node },\n    },\n    settings: {\n      // Pinned (not \"detect\") on purpose: eslint-plugin-react 7.37.x's version\n      // detection calls the ESLint-10-removed `context.getFilename()`. Pinning\n      // skips that code path. Keep roughly in sync with the installed React.\n      react: { version: \"19.2\" },\n    },\n    rules: {\n      ...reactPlugin.configs.recommended.rules,\n      ...reactHooksPlugin.configs.recommended.rules,\n      ...nextPlugin.configs.recommended.rules,\n      \"import/no-anonymous-default-export\": \"warn\",\n      \"react/no-unknown-property\": \"off\",\n      \"react/react-in-jsx-scope\": \"off\",\n      \"react/prop-types\": \"off\",\n      \"jsx-a11y/alt-text\": [\"warn\", { elements: [\"img\"], img: [\"Image\"] }],\n      \"jsx-a11y/aria-props\": \"warn\",\n      \"jsx-a11y/aria-proptypes\": \"warn\",\n      \"jsx-a11y/aria-unsupported-elements\": \"warn\",\n      \"jsx-a11y/role-has-required-aria-props\": \"warn\",\n      \"jsx-a11y/role-supports-aria-props\": \"warn\",\n      \"react/jsx-no-target-blank\": \"off\",\n      \"no-console\": [\"warn\", { allow: [\"warn\", \"error\"] }],\n      \"@typescript-eslint/no-explicit-any\": \"warn\",\n      \"@typescript-eslint/no-unused-vars\": [\n        \"warn\",\n        { argsIgnorePattern: \"^_\", varsIgnorePattern: \"^_\" },\n      ],\n    },\n  },\n];\n\nexport default config;\n";

package/dist/templates/eslint.config.js

@@ -1,32 +1,77 @@
-export const eslintConfigTemplate = `import nextConfig from "eslint-config-next";
+export const eslintConfigTemplate = `import globals from "globals";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
+import importPlugin from "eslint-plugin-import";
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
 
-// Find the config object that already has @typescript-eslint plugin registered
-const tsConfigIndex = nextConfig.findIndex(
-  (c) => c.plugins && "@typescript-eslint" in c.plugins,
-);
+// Hand-rolled replacement for \`eslint-config-next\`'s default config.
+//
+// We don't use eslint-config-next under ESLint 10: its React version detection
+// (\`settings.react.version: "detect"\`) calls \`context.getFilename()\`, which
+// ESLint 10 removed, so it crashes on load. Composing the same plugins
+// ourselves lets us pin \`react.version\` (below) and stay in control.
+//
+// The recommended rule sets below mirror what eslint-config-next enables:
+// React, React Hooks, Next.js and jsx-a11y. On top of that we keep a few
+// project-specific rules (no-console and two @typescript-eslint rules).
 
-const config = nextConfig.map((c, i) => {
-  if (i === tsConfigIndex) {
-    return {
-      ...c,
-      rules: {
-        ...c.rules,
-        "@typescript-eslint/no-explicit-any": "warn",
-        "@typescript-eslint/no-unused-vars": [
-          "warn",
-          { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
-        ],
+const config = [
+  {
+    // node_modules/ and .git/ are ignored by default.
+    ignores: [".next/**", "out/**", "build/**", "next-env.d.ts"],
+  },
+  {
+    name: "doccupine/base",
+    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}"],
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+      import: importPlugin,
+      "jsx-a11y": jsxA11yPlugin,
+      "@next/next": nextPlugin,
+      "@typescript-eslint": tsPlugin,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        sourceType: "module",
+        ecmaFeatures: { jsx: true },
       },
-    };
-  }
-  return c;
-});
-
-config.push({
-  rules: {
-    "no-console": ["warn", { allow: ["warn", "error"] }],
+      globals: { ...globals.browser, ...globals.node },
+    },
+    settings: {
+      // Pinned (not "detect") on purpose: eslint-plugin-react 7.37.x's version
+      // detection calls the ESLint-10-removed \`context.getFilename()\`. Pinning
+      // skips that code path. Keep roughly in sync with the installed React.
+      react: { version: "19.2" },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      ...nextPlugin.configs.recommended.rules,
+      "import/no-anonymous-default-export": "warn",
+      "react/no-unknown-property": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "jsx-a11y/alt-text": ["warn", { elements: ["img"], img: ["Image"] }],
+      "jsx-a11y/aria-props": "warn",
+      "jsx-a11y/aria-proptypes": "warn",
+      "jsx-a11y/aria-unsupported-elements": "warn",
+      "jsx-a11y/role-has-required-aria-props": "warn",
+      "jsx-a11y/role-supports-aria-props": "warn",
+      "react/jsx-no-target-blank": "off",
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+    },
   },
-});
+];
 
 export default config;
 `;

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

@@ -1 +1 @@
-export declare const accordionMdxTemplate = "---\ntitle: \"Accordion\"\ndescription: \"Interactive panels for toggling visibility of content.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 4\n---\n\n# Accordion\n\nInteractive panels for toggling visibility of content.\n\nAccordion elements help organize information by letting users show or hide sections as needed. They\u2019re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.\n\n## Accordion Usage\n\nYou can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:\n\n````mdx\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n```java HelloWorld.java\n class HelloWorld {\n     public static void main(String[] args) {\n         System.out.println(\"Hello, World!\");\n     }\n }\n```\n\n</Accordion>\n````\n\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n```java HelloWorld.java\n class HelloWorld {\n     public static void main(String[] args) {\n         System.out.println(\"Hello, World!\");\n     }\n }\n```\n\n</Accordion>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the accordion.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the accordion.\n</Field>";
+export declare const accordionMdxTemplate = "---\ntitle: \"Accordion\"\ndescription: \"Interactive panels for toggling visibility of content.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 4\n---\n\n# Accordion\n\nInteractive panels for toggling visibility of content.\n\nAccordion elements help organize information by letting users show or hide sections as needed. They\u2019re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.\n\n## Accordion Usage\n\nYou can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:\n\n````html\n<Accordion title=\"What is MDX?\">\n  You can put any content in here, including other components, like code:\n\n  ```java\n  class HelloWorld {\n    public static void main(String[] args) {\n      System.out.println(\"Hello, World!\");\n    }\n  }\n  ```\n</Accordion>\n````\n\n<Accordion title=\"What is MDX?\">\n  You can put any content in here, including other components, like code:\n\n  ```java\n  class HelloWorld {\n    public static void main(String[] args) {\n      System.out.println(\"Hello, World!\");\n    }\n  }\n  ```\n</Accordion>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the accordion.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the accordion.\n</Field>";

package/dist/templates/mdx/accordion.mdx.js

@@ -17,32 +17,30 @@ Accordion elements help organize information by letting users show or hide secti
 
 You can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:
 
-\`\`\`\`mdx
+\`\`\`\`html
 <Accordion title="What is MDX?">
-    You can put any content in here, including other components, like code:
-
-\`\`\`java HelloWorld.java
- class HelloWorld {
-     public static void main(String[] args) {
-         System.out.println("Hello, World!");
-     }
- }
-\`\`\`
-
+  You can put any content in here, including other components, like code:
+
+  \`\`\`java
+  class HelloWorld {
+    public static void main(String[] args) {
+      System.out.println("Hello, World!");
+    }
+  }
+  \`\`\`
 </Accordion>
 \`\`\`\`
 
 <Accordion title="What is MDX?">
-    You can put any content in here, including other components, like code:
-
-\`\`\`java HelloWorld.java
- class HelloWorld {
-     public static void main(String[] args) {
-         System.out.println("Hello, World!");
-     }
- }
-\`\`\`
-
+  You can put any content in here, including other components, like code:
+
+  \`\`\`java
+  class HelloWorld {
+    public static void main(String[] args) {
+      System.out.println("Hello, World!");
+    }
+  }
+  \`\`\`
 </Accordion>
 
 ## Properties

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

@@ -1 +1 @@
-export declare const buttonsMdxTemplate = "---\ntitle: \"Buttons\"\ndescription: \"A flexible action component supporting variants, sizes, icons, and links.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n\n# Buttons\n\nA flexible action component supporting variants, sizes, icons, and links.\n\nButtons help users initiate actions or navigate to other pages. Use variants to convey emphasis, size for hierarchy, and icons to add clarity.\n\n## Button Usage\n\nYou can use the Button component directly within your MDX files without any import. The following examples show basic usage:\n\n```mdx\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n```\n\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n\n### Sizes\n\n```mdx\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n```\n\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n\n### Outline\n\n```mdx\n<Button outline>Outlined</Button>\n```\n\n<Button outline>Outlined</Button>\n\n### Full width\n\n```mdx\n<Button fullWidth>Full width button</Button>\n```\n\n<Button fullWidth>Full width button</Button>\n\n### With icon\n\n```mdx\n<Button icon=\"arrow-right\" iconPosition=\"left\">\n  With left icon\n</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">\n  With right icon\n</Button>\n```\n\n<Button icon=\"arrow-right\" iconPosition=\"left\">With left icon</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">With right icon</Button>\n\n### As a link\n\nButtons can render as links when you provide an `href`.\n\n```mdx\n<Button href=\"/\">Home</Button>\n```\n\n<Button href=\"/\">Home</Button>\n\n## Properties\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the button.\n</Field>\n\n<Field value=\"variant\" type=\"string\">\n  Controls visual emphasis.\n</Field>\n\n- **primary**\n- **secondary**\n- **tertiary**\n\n<Field value=\"size\" type=\"string\">\n  Controls the size of the button.\n</Field>\n\n- **default**\n- **big**\n\n<Field value=\"outline\" type=\"boolean\">\n  When true, renders the outlined style of the selected variant.\n</Field>\n\n<Field value=\"fullWidth\" type=\"boolean\">\n  When true, the button expands to the full width of its container.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional icon to display inside the button.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name or icon node\n\n<Field value=\"iconPosition\" type=\"string\">\n  The position of the icon relative to the text.\n</Field>\n\n- **left**\n- **right**\n\n<Field value=\"href\" type=\"string\">\n  When provided, the button renders as a link (`<a>`), enabling navigation.\n</Field>";
+export declare const buttonsMdxTemplate = "---\ntitle: \"Buttons\"\ndescription: \"A flexible action component supporting variants, sizes, icons, and links.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n\n# Buttons\n\nA flexible action component supporting variants, sizes, icons, and links.\n\nButtons help users initiate actions or navigate to other pages. Use variants to convey emphasis, size for hierarchy, and icons to add clarity.\n\n## Button Usage\n\nYou can use the Button component directly within your MDX files without any import. The following examples show basic usage:\n\n```html\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n```\n\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n\n### Sizes\n\n```html\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n```\n\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n\n### Outline\n\n```html\n<Button outline>Outlined</Button>\n```\n\n<Button outline>Outlined</Button>\n\n### Full width\n\n```html\n<Button fullWidth>Full width button</Button>\n```\n\n<Button fullWidth>Full width button</Button>\n\n### With icon\n\n```html\n<Button icon=\"arrow-right\" iconPosition=\"left\">\n  With left icon\n</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">\n  With right icon\n</Button>\n```\n\n<Button icon=\"arrow-right\" iconPosition=\"left\">With left icon</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">With right icon</Button>\n\n### As a link\n\nButtons can render as links when you provide an `href`.\n\n```html\n<Button href=\"/\">Home</Button>\n```\n\n<Button href=\"/\">Home</Button>\n\n## Properties\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the button.\n</Field>\n\n<Field value=\"variant\" type=\"string\">\n  Controls visual emphasis.\n</Field>\n\n- **primary**\n- **secondary**\n- **tertiary**\n\n<Field value=\"size\" type=\"string\">\n  Controls the size of the button.\n</Field>\n\n- **default**\n- **big**\n\n<Field value=\"outline\" type=\"boolean\">\n  When true, renders the outlined style of the selected variant.\n</Field>\n\n<Field value=\"fullWidth\" type=\"boolean\">\n  When true, the button expands to the full width of its container.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional icon to display inside the button.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name or icon node\n\n<Field value=\"iconPosition\" type=\"string\">\n  The position of the icon relative to the text.\n</Field>\n\n- **left**\n- **right**\n\n<Field value=\"href\" type=\"string\">\n  When provided, the button renders as a link (`<a>`), enabling navigation.\n</Field>";

package/dist/templates/mdx/buttons.mdx.js

@@ -17,7 +17,7 @@ Buttons help users initiate actions or navigate to other pages. Use variants to
 
 You can use the Button component directly within your MDX files without any import. The following examples show basic usage:
 
-\`\`\`mdx
+\`\`\`html
 <Button>Primary</Button>
 <Button variant="secondary">Secondary</Button>
 <Button variant="tertiary">Tertiary</Button>
@@ -29,7 +29,7 @@ You can use the Button component directly within your MDX files without any impo
 
 ### Sizes
 
-\`\`\`mdx
+\`\`\`html
 <Button size="default">Default size</Button>
 <Button size="big">Big size</Button>
 \`\`\`
@@ -39,7 +39,7 @@ You can use the Button component directly within your MDX files without any impo
 
 ### Outline
 
-\`\`\`mdx
+\`\`\`html
 <Button outline>Outlined</Button>
 \`\`\`
 
@@ -47,7 +47,7 @@ You can use the Button component directly within your MDX files without any impo
 
 ### Full width
 
-\`\`\`mdx
+\`\`\`html
 <Button fullWidth>Full width button</Button>
 \`\`\`
 
@@ -55,7 +55,7 @@ You can use the Button component directly within your MDX files without any impo
 
 ### With icon
 
-\`\`\`mdx
+\`\`\`html
 <Button icon="arrow-right" iconPosition="left">
   With left icon
 </Button>
@@ -71,7 +71,7 @@ You can use the Button component directly within your MDX files without any impo
 
 Buttons can render as links when you provide an \`href\`.
 
-\`\`\`mdx
+\`\`\`html
 <Button href="/">Home</Button>
 \`\`\`
 

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

@@ -1 +1 @@
-export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Make your content stand out by using callouts for extra emphasis.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n\n# Callouts\n\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\n\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n```mdx\n<Callout type=\"note\">This is a note callout</Callout>\n\n<Callout type=\"warning\">This is a warning callout</Callout>\n\n<Callout type=\"info\">This is an info callout</Callout>\n\n<Callout type=\"danger\">This is a danger callout</Callout>\n\n<Callout type=\"success\">This is a success callout</Callout>\n```\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n\n## Properties\n\n<Field value=\"type\" type=\"string\">\n  The type of the callout: `note`, `info`, `warning`, `danger`, or `success`.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A custom [Lucide](https://lucide.dev/icons) icon name. Overrides the default icon for the callout type.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the callout.\n</Field>";
+export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Make your content stand out by using callouts for extra emphasis.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n\n# Callouts\n\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\n\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n```html\n<Callout type=\"note\">This is a note callout</Callout>\n<Callout type=\"warning\">This is a warning callout</Callout>\n<Callout type=\"info\">This is an info callout</Callout>\n<Callout type=\"danger\">This is a danger callout</Callout>\n<Callout type=\"success\">This is a success callout</Callout>\n```\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n\n## Properties\n\n<Field value=\"type\" type=\"string\">\n  The type of the callout: `note`, `info`, `warning`, `danger`, or `success`.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A custom [Lucide](https://lucide.dev/icons) icon name. Overrides the default icon for the callout type.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the callout.\n</Field>";

package/dist/templates/mdx/callouts.mdx.js

@@ -17,34 +17,26 @@ You can format them as Note, Warning, Info, Danger and Success.
 
 You can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:
 
-\`\`\`mdx
+\`\`\`html
 <Callout type="note">This is a note callout</Callout>
-
 <Callout type="warning">This is a warning callout</Callout>
-
 <Callout type="info">This is an info callout</Callout>
-
 <Callout type="danger">This is a danger callout</Callout>
-
 <Callout type="success">This is a success callout</Callout>
 \`\`\`
 
 <Callout type="note">
   This is a note callout
 </Callout>
-
 <Callout type="warning">
   This is a warning callout
 </Callout>
-
 <Callout type="info">
   This is an info callout
 </Callout>
-
 <Callout type="danger">
   This is a danger callout
 </Callout>
-
 <Callout type="success">
  This is a success callout
 </Callout>

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

@@ -1 +1 @@
-export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n\n# Cards\n\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\n\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n```mdx\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your\n  Doccupine project. It provides a simple and intuitive interface for creating\n  and configuring your project.\n</Card>\n```\n\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n\n## Link Card\n\nPass a `href` prop to turn the card into a clickable link. The card will display interactive hover and focus styles automatically.\n\n```mdx\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n```\n\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the card.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  The [Lucide](https://lucide.dev/icons) icon name to display in the card.\n</Field>\n\n<Field value=\"href\" type=\"string\">\n  A URL or path to link to. When provided, the card becomes a clickable link with interactive styles.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the card.\n</Field>";
+export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n\n# Cards\n\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\n\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n```html\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your\n  Doccupine project. It provides a simple and intuitive interface for creating\n  and configuring your project.\n</Card>\n```\n\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n\n## Link Card\n\nPass a `href` prop to turn the card into a clickable link. The card will display interactive hover and focus styles automatically.\n\n```html\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n```\n\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the card.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  The [Lucide](https://lucide.dev/icons) icon name to display in the card.\n</Field>\n\n<Field value=\"href\" type=\"string\">\n  A URL or path to link to. When provided, the card becomes a clickable link with interactive styles.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the card.\n</Field>";

package/dist/templates/mdx/cards.mdx.js

@@ -17,7 +17,7 @@ Cards act as visual containers for your content, giving you flexibility to combi
 
 You can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:
 
-\`\`\`mdx
+\`\`\`html
 <Card title="Note" icon="badge-info">
   Doccupine CLI is a command-line tool that helps you create and manage your
   Doccupine project. It provides a simple and intuitive interface for creating
@@ -33,7 +33,7 @@ You can use the Cards component directly within your MDX files without any impor
 
 Pass a \`href\` prop to turn the card into a clickable link. The card will display interactive hover and focus styles automatically.
 
-\`\`\`mdx
+\`\`\`html
 <Card title="Getting Started" icon="rocket" href="/cards">
   Learn how to set up Doccupine and create your first documentation site.
 </Card>

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

@@ -1 +1 @@
-export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Learn how to display inline code and code blocks in documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n\n# Code\n\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\n\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\n\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\n\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n````text\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n````\n\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n\n## Highlighting Diffs\n\nShow a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red. Set the language to `diff` and prefix each changed line with `+` or `-`:\n\n````text\n```diff\nfunction calculateTotal(items) {\n-  return items.reduce((sum, item) => sum + item.price, 0);\n+  const total = items.reduce((sum, item) => sum + item.price, 0);\n+  return Math.round(total * 100) / 100;\n}\n```\n````\n\n```diff\nfunction calculateTotal(items) {\n-  return items.reduce((sum, item) => sum + item.price, 0);\n+  const total = items.reduce((sum, item) => sum + item.price, 0);\n+  return Math.round(total * 100) / 100;\n}\n```\n\n## File Names\n\nAdd a `title` to a code block to display a file name in the window bar, styled to match the GitHub-style header. Pass it through the `<Code />` component:\n\n```text\n<Code title=\"package.json\" language=\"json\" code={`{\\n  \"name\": \"my-app\",\\n  \"version\": \"1.0.0\"\\n}`} />\n```\n\n<Code title=\"package.json\" language=\"json\" code={`{\\n  \"name\": \"my-app\",\\n  \"version\": \"1.0.0\"\\n}`} />\n\n## Tabbed Code Blocks\n\nUse `<CodeTabs />` to show several variants of the same snippet - for example the same install command across package managers. Each tab is a keyboard-accessible button, and the copy button copies whichever tab is active. Each tab may set a `language` for highlighting (defaults to `bash`).\n\n```text\n<CodeTabs tabs={[{ label: \"npm\", code: \"npm install doccupine\" }, { label: \"pnpm\", code: \"pnpm add doccupine\" }, { label: \"yarn\", code: \"yarn add doccupine\" }]} />\n```\n\n<CodeTabs tabs={[{ label: \"npm\", code: \"npm install doccupine\" }, { label: \"pnpm\", code: \"pnpm add doccupine\" }, { label: \"yarn\", code: \"yarn add doccupine\" }]} />";
+export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Learn how to display inline code and code blocks in documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n\n# Code\n\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\n\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\n\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\n\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n````text\n```java\nclass HelloWorld {\n  public static void main(String[] args) {\n    System.out.println(\"Hello, World!\");\n  }\n}\n```\n````\n\n```java\nclass HelloWorld {\n  public static void main(String[] args) {\n    System.out.println(\"Hello, World!\");\n  }\n}\n```\n\n## Highlighting Diffs\n\nShow a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red. Set the language to `diff` and prefix each changed line with `+` or `-`:\n\n````text\n```diff\nfunction calculateTotal(items) {\n-  return items.reduce((sum, item) => sum + item.price, 0);\n+  const total = items.reduce((sum, item) => sum + item.price, 0);\n+  return Math.round(total * 100) / 100;\n}\n```\n````\n\n```diff\nfunction calculateTotal(items) {\n-  return items.reduce((sum, item) => sum + item.price, 0);\n+  const total = items.reduce((sum, item) => sum + item.price, 0);\n+  return Math.round(total * 100) / 100;\n}\n```\n\n## File Names\n\nAdd a `title` to a code block to display a file name in the window bar, styled to match the GitHub-style header. Pass it through the `<Code />` component:\n\n```html\n<Code title=\"package.json\" language=\"json\" code={`{\\n  \"name\": \"my-app\",\\n  \"version\": \"1.0.0\"\\n}`} />\n```\n\n<Code title=\"package.json\" language=\"json\" code={`{\\n  \"name\": \"my-app\",\\n  \"version\": \"1.0.0\"\\n}`} />\n\n## Tabbed Code Blocks\n\nUse `<CodeTabs />` to show several variants of the same snippet - for example the same install command across package managers. Each tab is a keyboard-accessible button, and the copy button copies whichever tab is active. Each tab may set a `language` for highlighting (defaults to `bash`).\n\n```html\n<CodeTabs tabs={[{ label: \"npm\", code: \"npm install doccupine\" }, { label: \"pnpm\", code: \"pnpm add doccupine\" }, { label: \"yarn\", code: \"yarn add doccupine\" }]} />\n```\n\n<CodeTabs tabs={[{ label: \"npm\", code: \"npm install doccupine\" }, { label: \"pnpm\", code: \"pnpm add doccupine\" }, { label: \"yarn\", code: \"yarn add doccupine\" }]} />";

package/dist/templates/mdx/code.mdx.js

@@ -34,18 +34,18 @@ You may specify the language for highlighting:
 \`\`\`\`text
 \`\`\`java
 class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
+  public static void main(String[] args) {
+    System.out.println("Hello, World!");
+  }
 }
 \`\`\`
 \`\`\`\`
 
 \`\`\`java
 class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
+  public static void main(String[] args) {
+    System.out.println("Hello, World!");
+  }
 }
 \`\`\`
 
@@ -75,7 +75,7 @@ function calculateTotal(items) {
 
 Add a \`title\` to a code block to display a file name in the window bar, styled to match the GitHub-style header. Pass it through the \`<Code />\` component:
 
-\`\`\`text
+\`\`\`html
 <Code title="package.json" language="json" code={\`{\\n  "name": "my-app",\\n  "version": "1.0.0"\\n}\`} />
 \`\`\`
 
@@ -85,7 +85,7 @@ Add a \`title\` to a code block to display a file name in the window bar, styled
 
 Use \`<CodeTabs />\` to show several variants of the same snippet - for example the same install command across package managers. Each tab is a keyboard-accessible button, and the copy button copies whichever tab is active. Each tab may set a \`language\` for highlighting (defaults to \`bash\`).
 
-\`\`\`text
+\`\`\`html
 <CodeTabs tabs={[{ label: "npm", code: "npm install doccupine" }, { label: "pnpm", code: "pnpm add doccupine" }, { label: "yarn", code: "yarn add doccupine" }]} />
 \`\`\`
 

package/dist/templates/mdx/color-swatches.mdx.d.ts

@@ -1 +1 @@
-export declare const colorSwatchesMdxTemplate = "---\ntitle: \"Color Swatches\"\ndescription: \"Display color palettes with labeled swatches to document your theme colors.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 15\n---\n\n# Color Swatches\n\nDisplay color palettes with labeled swatches to document your theme colors.\n\nThe `ColorSwatch` component renders a visual preview of a color alongside its token name, and `ColorSwatchGroup` arranges multiple swatches in a responsive grid.\n\n## Usage\n\nYou can use the ColorSwatch components directly within your MDX files without any import:\n\n```mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n```\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n\n## Dark Colors\n\nText color automatically adapts based on the background luminance, so dark swatches display white text:\n\n```mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n```\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n\n## ColorSwatch Properties\n\n<Field value=\"token\" type=\"string\" required>\n  The name or label displayed below the color preview (e.g. a design token name).\n</Field>\n\n<Field value=\"value\" type=\"string\" required>\n  A hex color value (e.g. `#6366F1`). Displayed inside the color preview and used as the background.\n</Field>\n\n## ColorSwatchGroup Properties\n\n<Field value=\"children\" type=\"node\" required>\n  One or more `ColorSwatch` components to display in a responsive grid.\n</Field>";
+export declare const colorSwatchesMdxTemplate = "---\ntitle: \"Color Swatches\"\ndescription: \"Display color palettes with labeled swatches to document your theme colors.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 15\n---\n\n# Color Swatches\n\nDisplay color palettes with labeled swatches to document your theme colors.\n\nThe `ColorSwatch` component renders a visual preview of a color alongside its token name, and `ColorSwatchGroup` arranges multiple swatches in a responsive grid.\n\n## Usage\n\nYou can use the ColorSwatch components directly within your MDX files without any import:\n\n```html\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n```\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n\n## Dark Colors\n\nText color automatically adapts based on the background luminance, so dark swatches display white text:\n\n```html\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n```\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n\n## ColorSwatch Properties\n\n<Field value=\"token\" type=\"string\" required>\n  The name or label displayed below the color preview (e.g. a design token name).\n</Field>\n\n<Field value=\"value\" type=\"string\" required>\n  A hex color value (e.g. `#6366F1`). Displayed inside the color preview and used as the background.\n</Field>\n\n## ColorSwatchGroup Properties\n\n<Field value=\"children\" type=\"node\" required>\n  One or more `ColorSwatch` components to display in a responsive grid.\n</Field>";

package/dist/templates/mdx/color-swatches.mdx.js

@@ -17,7 +17,7 @@ The \`ColorSwatch\` component renders a visual preview of a color alongside its
 
 You can use the ColorSwatch components directly within your MDX files without any import:
 
-\`\`\`mdx
+\`\`\`html
 <ColorSwatchGroup>
   <ColorSwatch token="primary" value="#6366F1" />
   <ColorSwatch token="secondary" value="#EC4899" />
@@ -41,7 +41,7 @@ You can use the ColorSwatch components directly within your MDX files without an
 
 Text color automatically adapts based on the background luminance, so dark swatches display white text:
 
-\`\`\`mdx
+\`\`\`html
 <ColorSwatchGroup>
   <ColorSwatch token="dark" value="#1E1E2E" />
   <ColorSwatch token="grayDark" value="#374151" />

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

@@ -1 +1 @@
-export declare const columnsMdxTemplate = "---\ntitle: \"Columns\"\ndescription: \"Columns are used to organize content in a grid-like structure.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n\n# Columns\n\nArrange multiple cards neatly in a side-by-side grid layout.\n\nThe `Columns` component helps you organize several `Card` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.\n\n## Columns Usage\n\nYou can use the `Columns` component to create a grid of cards with a specified number of columns.\n\n```mdx\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n```\n\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n\n## Properties\n\n<Field value=\"cols\" type=\"number\">\n  The number of columns in the grid. Defaults to 1.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the columns.\n</Field>";
+export declare const columnsMdxTemplate = "---\ntitle: \"Columns\"\ndescription: \"Columns are used to organize content in a grid-like structure.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n\n# Columns\n\nArrange multiple cards neatly in a side-by-side grid layout.\n\nThe `Columns` component helps you organize several `Card` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.\n\n## Columns Usage\n\nYou can use the `Columns` component to create a grid of cards with a specified number of columns.\n\n```html\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n```\n\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n\n## Properties\n\n<Field value=\"cols\" type=\"number\">\n  The number of columns in the grid. Defaults to 1.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the columns.\n</Field>";

package/dist/templates/mdx/columns.mdx.js

@@ -17,12 +17,11 @@ The \`Columns\` component helps you organize several \`Card\` elements into a vi
 
 You can use the \`Columns\` component to create a grid of cards with a specified number of columns.
 
-\`\`\`mdx
+\`\`\`html
 <Columns cols={2}>
   <Card title="Getting Started" icon="rocket">
     Kick off your project using our easy quickstart guide.
   </Card>
-
   <Card title="API Reference" icon="code">
     Browse all endpoints, parameters, and code examples for your API integration.
   </Card>
@@ -33,7 +32,6 @@ You can use the \`Columns\` component to create a grid of cards with a specified
   <Card title="Getting Started" icon="rocket">
     Kick off your project using our easy quickstart guide.
   </Card>
-
   <Card title="API Reference" icon="code">
     Browse all endpoints, parameters, and code examples for your API integration.
   </Card>

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

@@ -1 +1 @@
-export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"Configure parameters for your API or SDK documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n\n# Fields\n\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\n\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n\n```mdx\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n  The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n  The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n  Whether the field is required.\n</Field>";
+export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"Configure parameters for your API or SDK documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n\n# Fields\n\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\n\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n\n```html\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n  The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n  The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n  Whether the field is required.\n</Field>";

package/dist/templates/mdx/fields.mdx.js

@@ -21,7 +21,7 @@ Use the \`<Field>\` component to declare API or SDK parameters, or define the re
   Example definition of a parameter field.
 </Field>
 
-\`\`\`mdx
+\`\`\`html
 <Field value="param" type="string" required>
   Example definition of a parameter field.
 </Field>

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

@@ -1 +1 @@
-export declare const iconsMdxTemplate = "---\ntitle: \"Icons\"\ndescription: \"Integrate visual icons from well-known libraries to enrich your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\n---\n\n# Icons\n\nIntegrate visual icons from well-known libraries to enrich your documentation.\n\nIcons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.\n\n<Icon name=\"flag\" size={32} />\n\n```mdx\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\n\nYou can use icons directly within text to highlight information or add visual context.\n\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n\n```mdx\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n```\n\n## Properties\n\n<Field value=\"name\" type=\"string\" required>\n  The icon to display.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"size\" type=\"number\">\n  The size of the icon in pixels.\n</Field>\n\n<Field value=\"color\" type=\"string\">\n  The color of the icon as a hex code (for example, `#FF5733`).\n</Field>";
+export declare const iconsMdxTemplate = "---\ntitle: \"Icons\"\ndescription: \"Integrate visual icons from well-known libraries to enrich your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\n---\n\n# Icons\n\nIntegrate visual icons from well-known libraries to enrich your documentation.\n\nIcons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.\n\n<Icon name=\"flag\" size={32} />\n\n```html\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\n\nYou can use icons directly within text to highlight information or add visual context.\n\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n\n```html\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n```\n\n## Properties\n\n<Field value=\"name\" type=\"string\" required>\n  The icon to display.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"size\" type=\"number\">\n  The size of the icon in pixels.\n</Field>\n\n<Field value=\"color\" type=\"string\">\n  The color of the icon as a hex code (for example, `#FF5733`).\n</Field>";

package/dist/templates/mdx/icons.mdx.js

@@ -15,7 +15,7 @@ Icons can be sourced from Lucide, SVG elements, external URLs, or local files wi
 
 <Icon name="flag" size={32} />
 
-\`\`\`mdx
+\`\`\`html
 <Icon name="flag" size={32} />
 \`\`\`
 
@@ -25,7 +25,7 @@ You can use icons directly within text to highlight information or add visual co
 
 <Icon name="flag" size={16} /> Build your documentation seamlessly.
 
-\`\`\`mdx
+\`\`\`html
 <Icon name="flag" size={16} /> Build your documentation seamlessly.
 \`\`\`
 

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

@@ -1 +1 @@
-export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 14\n---\n\n# Steps\n\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\n\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```mdx\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n<Step title=\"Step 2\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A [Lucide](https://lucide.dev/icons) icon name shown next to the step title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>";
+export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 14\n---\n\n# Steps\n\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\n\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```html\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A [Lucide](https://lucide.dev/icons) icon name shown next to the step title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>";

package/dist/templates/mdx/steps.mdx.js

@@ -17,16 +17,14 @@ The Steps component is perfect for organizing procedures or workflows in a clear
 
 You can use the \`Steps\` component to create a step-by-step guide. Each step is represented by a \`Step\` component, which includes a title and content.
 
-\`\`\`mdx
+\`\`\`html
 <Steps>
   <Step title="Step 1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
-
-<Step title="Step 2">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</Step>
-
+  <Step title="Step 2">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Step>
   <Step title="Step 3">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
@@ -37,11 +35,9 @@ You can use the \`Steps\` component to create a step-by-step guide. Each step is
   <Step title="Step 1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
-
   <Step title="Step 2">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
-
   <Step title="Step 3">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>

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

@@ -1 +1 @@
-export declare const tabsMdxTemplate = "---\ntitle: \"Tabs\"\ndescription: \"Use the Tabs component to display different content sections in a switchable panel layout.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 5\n---\n\n# Tabs\n\nUse the Tabs component to display different content sections in a switchable panel layout.\n\nTabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.\n\n## Tabs Usage\n\nYou can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:\n\n````mdx\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n      class HelloWorld {\n          public static void main(String[] args) {\n              System.out.println(\"Hello, World!\");\n          }\n      }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n````\n\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n\nEach tab also accepts an optional `icon` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.\n\n## Properties\n\n<Field value=\"title\" type=\"string\">\n  The title of the tab.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.\n  `rocket`) shown next to the tab title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the tabs.\n</Field>";
+export declare const tabsMdxTemplate = "---\ntitle: \"Tabs\"\ndescription: \"Use the Tabs component to display different content sections in a switchable panel layout.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 5\n---\n\n# Tabs\n\nUse the Tabs component to display different content sections in a switchable panel layout.\n\nTabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.\n\n## Tabs Usage\n\nYou can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:\n\n````html\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n      public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n      }\n    }\n    ```\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n````\n\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n      public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n      }\n    }\n    ```\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n\nEach tab also accepts an optional `icon` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.\n\n## Properties\n\n<Field value=\"title\" type=\"string\">\n  The title of the tab.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.\n  `rocket`) shown next to the tab title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the tabs.\n</Field>";

package/dist/templates/mdx/tabs.mdx.js

@@ -17,20 +17,19 @@ Tabs are useful for grouping related information while keeping the interface tid
 
 You can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:
 
-\`\`\`\`mdx
+\`\`\`\`html
 <Tabs>
   <TabContent title="First tab" icon="code">
     ☝️ This is the content shown only when the first tab is active.
 
     Tabs can include all kinds of components. For example, a simple Java program:
     \`\`\`java
-      class HelloWorld {
-          public static void main(String[] args) {
-              System.out.println("Hello, World!");
-          }
+    class HelloWorld {
+      public static void main(String[] args) {
+        System.out.println("Hello, World!");
       }
+    }
     \`\`\`
-
   </TabContent>
   <TabContent title="Second tab" icon="book-open">
     ✌️ Content inside this second tab is separate from the first.
@@ -48,12 +47,11 @@ You can use the Tabs component directly within your MDX files without any import
     Tabs can include all kinds of components. For example, a simple Java program:
     \`\`\`java
     class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
+      public static void main(String[] args) {
+        System.out.println("Hello, World!");
+      }
     }
     \`\`\`
-
   </TabContent>
   <TabContent title="Second tab" icon="book-open">
     ✌️ Content inside this second tab is separate from the first.

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

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

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

@@ -18,36 +18,34 @@ Each \`Update\` label is added to the "On this page" sidebar and gets its own an
 <Update label="v0.0.1" description="Example">
   ## Example entry
 
-You can include anything here - images, code snippets, or a bullet list of modifications.
+  You can include anything here - images, code snippets, or a bullet list of modifications.
 
-![Demo Image](https://docs.doccupine.com/demo.png)
+  ![Demo Image](https://docs.doccupine.com/demo.png)
 
-### Key additions
-
-- Fully responsive layout
-- Individual anchor for each update
-- Automatic RSS feed entry generation
+  ### Key additions
 
+  - Fully responsive layout
+  - Individual anchor for each update
+  - Automatic RSS feed entry generation
 </Update>
 
 ## Update Usage
 
 You can combine multiple \`Update\` components to build complete changelogs.
 
-\`\`\`mdx
+\`\`\`html
 <Update label="v0.0.1" description="Example">
   ## Example entry
 
-You can include anything here - images, code snippets, or a bullet list of modifications.
-
-![Demo Image](https://docs.doccupine.com/demo.png)
+  You can include anything here - images, code snippets, or a bullet list of modifications.
 
-### Key additions
+  ![Demo Image](https://docs.doccupine.com/demo.png)
 
-- Fully responsive layout
-- Individual anchor for each update
-- Automatic RSS feed entry generation
+  ### Key additions
 
+  - Fully responsive layout
+  - Individual anchor for each update
+  - Automatic RSS feed entry generation
 </Update>
 \`\`\`
 

package/dist/templates/package.js

@@ -8,6 +8,7 @@ export const packageJsonTemplate = JSON.stringify({
         start: "next start",
         lint: "eslint .",
         format: "prettier --write .",
+        "type-check": "tsgo --noEmit",
     },
     dependencies: {
         "@langchain/anthropic": "^1.5.1",
@@ -17,14 +18,14 @@ export const packageJsonTemplate = JSON.stringify({
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@posthog/react": "^1.10.3",
-        "cherry-styled-components": "^0.2.9",
+        "cherry-styled-components": "^0.2.10",
         langchain: "^1.5.2",
         "lucide-react": "^1.23.0",
         minisearch: "^7.2.0",
         next: "16.2.10",
         "next-mdx-remote": "^6.0.0",
-        "posthog-js": "^1.398.0",
-        "posthog-node": "^5.39.4",
+        "posthog-js": "^1.398.6",
+        "posthog-node": "^5.40.0",
         react: "19.2.7",
         "react-dom": "19.2.7",
         "rehype-highlight": "^7.0.2",
@@ -36,13 +37,20 @@ export const packageJsonTemplate = JSON.stringify({
         zod: "^4.4.3",
     },
     devDependencies: {
+        "@next/eslint-plugin-next": "16.2.10",
         "@types/node": "^26",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "baseline-browser-mapping": "^2.10.42",
-        eslint: "^9",
-        "eslint-config-next": "16.2.10",
+        "@typescript-eslint/eslint-plugin": "^8.63.0",
+        "@typescript-eslint/parser": "^8.63.0",
+        "@typescript/native-preview": "^7.0.0-dev.20260707.2",
+        eslint: "^10",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        globals: "^17.7.0",
         prettier: "^3.9.4",
-        typescript: "^6",
+        typescript: "npm:@typescript/typescript6@^6.0.2",
     },
 }, null, 2) + "\n";

package/dist/templates/prettierignore.d.ts

@@ -1 +1 @@
-export declare const prettierignoreTemplate = "node_modules\nconvex/_generated\npackage.json\npackage-lock.json\npnpm-lock.yaml\npnpm-workspace.yaml\n";
+export declare const prettierignoreTemplate = "node_modules\nconvex/_generated\npublic\npackage.json\npackage-lock.json\npnpm-lock.yaml\npnpm-workspace.yaml\n";

package/dist/templates/prettierignore.js

@@ -1,5 +1,6 @@
 export const prettierignoreTemplate = `node_modules
 convex/_generated
+public
 package.json
 package-lock.json
 pnpm-lock.yaml

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {
@@ -46,11 +46,11 @@
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^26.1.0",
+    "@types/node": "^26.1.1",
     "@types/prompts": "^2.4.9",
     "prettier": "^3.9.4",
-    "typescript": "^6.0.3",
-    "vitest": "^4.1.9"
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10"
   },
   "files": [
     "dist/**/*"