boltdocs 2.2.0 → 2.3.0

package/src/client/components/primitives/skeleton.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@client/utils/cn'
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'rect' | 'circle'
+}
+
+/**
+ * A flexible skeleton component that mimics the shape of content
+ * while it is loading. Features a smooth pulse animation.
+ */
+export function Skeleton({
+  className,
+  variant = 'rect',
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse bg-bg-muted',
+        variant === 'circle' ? 'rounded-full' : 'rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/client/components/ui-base/loading.tsx

@@ -1,85 +1,55 @@
-import { useEffect, useState } from 'react'
+import { cn } from '@client/utils/cn'
+import { Skeleton } from '@primitives/skeleton'
 
 /**
- * A premium loading component that includes an SVG fill animation
- * and a synchronized progress indicator.
- *
- * It features a glassmorphism container and a Bolt-style SVG logo
- * with a dynamic fill effect.
+ * A premium loading component that only skeletons the markdown content area.
+ * Designed to be used as a Suspense fallback within a persistent layout.
  */
 export function Loading() {
-  const [progress, setProgress] = useState(0)
-
-  useEffect(() => {
-    let currentProgress = 0
-    let up = true
+  return (
+    <div
+      className={cn(
+        'w-full h-full relative overflow-y-auto transition-opacity duration-300 animate-fade-in',
+      )}
+    >
+      <div className="mx-auto max-w-(--spacing-content-max) px-4 py-8 space-y-10">
+        {/* Breadcrumbs */}
+        <div className="flex gap-2">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-24" />
+        </div>
 
-    const interval = setInterval(() => {
-      if (up) {
-        currentProgress += 1
-        if (currentProgress >= 100) {
-          currentProgress = 100
-          up = false
-        }
-      } else {
-        currentProgress -= 1
-        if (currentProgress <= 0) {
-          currentProgress = 0
-          up = true
-        }
-      }
-      setProgress(currentProgress)
-    }, 20)
+        {/* Page Title */}
+        <Skeleton className="h-10 w-[60%] sm:h-12" />
 
-    return () => clearInterval(interval)
-  }, [])
+        {/* Intro Paragraph */}
+        <div className="space-y-3">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-[95%]" />
+          <Skeleton className="h-4 w-[40%]" />
+        </div>
 
-  const clipPathValue = `inset(${100 - progress}% 0 0 0)`
+        {/* Section 1 */}
+        <div className="space-y-6 pt-4">
+          <Skeleton className="h-7 w-32" />
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-[98%]" />
+            <Skeleton className="h-4 w-[92%]" />
+            <Skeleton className="h-4 w-[60%]" />
+          </div>
+        </div>
 
-  return (
-    <div className="flex flex-col items-center justify-center min-h-[60vh] p-4 text-center">
-      <div className="relative group">
-        <div className="relative inline-block">
-          {/* SVG Background (Dimmed Base) */}
-          <svg
-            className="w-24 h-auto opacity-10 filter grayscale brightness-50"
-            viewBox="0 0 60 51"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            role="img"
-            aria-hidden="true"
-          >
-            <title>Loading indicator background</title>
-            <path
-              d="M29.4449 0H19.4449V16.5L29.4449 6.5V0Z"
-              fill="currentColor"
-            />
-            <path
-              d="M26.9449 22.7265C26.9449 22.5077 21.2201 27.0658 16.9449 28.5C13.7491 29.5721 12.3156 29.5038 8.94486 29.5C5.59532 29.4963 0 28.5 0 28.5C0 28.5 5.57953 28.5146 8.94486 27.5C12.5409 26.4158 14.8203 25.5843 17.9449 23.5C23.3445 19.898 29.4449 11.5 29.4449 11.5L29.9449 18C29.9449 18 33.5825 15.8308 36.4449 15C39.4452 14.1291 44.4449 14 44.4449 14C44.4449 14 36.9449 19 34.4449 21.5C31.5322 24.4126 29.8582 26.9017 29.4449 31C29.1217 34.2041 29.4771 36.4508 31.4449 39C33.5792 41.765 35.952 43.0183 39.4449 43C42.677 42.9831 45.3003 42.4182 47.4449 40C49.7406 37.4113 50.2495 34.4466 49.9449 31C49.6603 27.7804 48.4876 25.4953 45.9449 23.5C43.2931 21.4191 36.4449 24 36.4449 24L47.9449 15C47.9449 15 51.5761 16.771 53.4449 18.5C55.711 20.5967 56.7467 22.1546 57.9449 25C59.1784 27.9295 59.4832 29.8216 59.4449 33C59.4089 35.9867 59.179 37.78 57.9449 40.5C56.8475 42.9185 55.8511 44.6507 53.9449 46.5C51.9236 48.4609 50.5803 49.0076 47.9449 50C45.5414 50.9051 44.0131 51 41.4449 51C38.8766 51 37.3235 50.9685 34.9449 50C32.4851 48.9985 29.4449 46 29.4449 46V51H19.4449V37.9904L22.9449 31.4226L26.9449 22.7265Z"
-              fill="currentColor"
-            />
-          </svg>
+        {/* Code Block Placeholder */}
+        <Skeleton className="h-32 w-full rounded-lg bg-bg-muted/50" />
 
-          {/* SVG Animated (Vibrant Fill Overlay) */}
-          <svg
-            className="absolute top-0 left-0 w-24 h-auto text-primary-500 drop-shadow-[0_0_20px_rgba(var(--primary-rgb),0.5)] transition-[clip-path] duration-100 ease-linear"
-            style={{ clipPath: clipPathValue }}
-            viewBox="0 0 60 51"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            role="img"
-            aria-hidden="true"
-          >
-            <title>Loading indicator animated fill</title>
-            <path
-              d="M29.4449 0H19.4449V16.5L29.4449 6.5V0Z"
-              fill="currentColor"
-            />
-            <path
-              d="M26.9449 22.7265C26.9449 22.5077 21.2201 27.0658 16.9449 28.5C13.7491 29.5721 12.3156 29.5038 8.94486 29.5C5.59532 29.4963 0 28.5 0 28.5C0 28.5 5.57953 28.5146 8.94486 27.5C12.5409 26.4158 14.8203 25.5843 17.9449 23.5C23.3445 19.898 29.4449 11.5 29.4449 11.5L29.9449 18C29.9449 18 33.5825 15.8308 36.4449 15C39.4452 14.1291 44.4449 14 44.4449 14C44.4449 14 36.9449 19 34.4449 21.5C31.5322 24.4126 29.8582 26.9017 29.4449 31C29.1217 34.2041 29.4771 36.4508 31.4449 39C33.5792 41.765 35.952 43.0183 39.4449 43C42.677 42.9831 45.3003 42.4182 47.4449 40C49.7406 37.4113 50.2495 34.4466 49.9449 31C49.6603 27.7804 48.4876 25.4953 45.9449 23.5C43.2931 21.4191 36.4449 24 36.4449 24L47.9449 15C47.9449 15 51.5761 16.771 53.4449 18.5C55.711 20.5967 56.7467 22.1546 57.9449 25C59.1784 27.9295 59.4832 29.8216 59.4449 33C59.4089 35.9867 59.179 37.78 57.9449 40.5C56.8475 42.9185 55.8511 44.6507 53.9449 46.5C51.9236 48.4609 50.5803 49.0076 47.9449 50C45.5414 50.9051 44.0131 51 41.4449 51C38.8766 51 37.3235 50.9685 34.9449 50C32.4851 48.9985 29.4449 46 29.4449 46V51H19.4449V37.9904L22.9449 31.4226L26.9449 22.7265Z"
-              fill="currentColor"
-            />
-          </svg>
+        {/* Section 2 */}
+        <div className="space-y-6 pt-4">
+          <Skeleton className="h-7 w-48" />
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-[85%]" />
+          </div>
         </div>
       </div>
     </div>

package/src/client/components/ui-base/navbar.tsx

@@ -33,12 +33,14 @@ export function Navbar() {
     <NavbarPrimitive.NavbarRoot className={hasTabs ? 'border-b-0' : ''}>
       <NavbarPrimitive.Content>
         <NavbarPrimitive.NavbarLeft>
-          <NavbarPrimitive.NavbarLogo
-            src={logo ?? ''}
-            alt={logoProps?.alt || title}
-            width={logoProps?.width ?? 24}
-            height={logoProps?.height ?? 24}
-          />
+          {logo && (
+            <NavbarPrimitive.NavbarLogo
+              src={logo}
+              alt={logoProps?.alt || title}
+              width={logoProps?.width ?? 24}
+              height={logoProps?.height ?? 24}
+            />
+          )}
           <NavbarPrimitive.Title>{title}</NavbarPrimitive.Title>
 
           {config.versions && currentVersion && <NavbarVersion />}

package/src/client/components/ui-base/page-nav.tsx

@@ -3,6 +3,7 @@ import PageNavPrimitive from '@components/primitives/page-nav'
 
 /**
  * Component to display the previous and next page navigation buttons.
+ * Enhanced with subtle entrance animations and a modern card layout.
  */
 export function PageNav() {
   const { prevPage, nextPage } = usePageNav()
@@ -10,7 +11,7 @@ export function PageNav() {
   if (!prevPage && !nextPage) return null
 
   return (
-    <PageNavPrimitive.PageNavRoot>
+    <PageNavPrimitive.PageNavRoot className="animate-in fade-in slide-in-from-bottom-4 duration-700">
       {prevPage ? (
         <PageNavPrimitive.PageNavLink to={prevPage.path} direction="prev">
           <PageNavPrimitive.PageNavLink.Title>

package/src/client/components/ui-base/powered-by.tsx

@@ -14,7 +14,10 @@ export function PoweredBy() {
           fill="currentColor"
         />
         <span className="text-[11px] font-medium text-text-muted group-hover:text-text-main transition-colors duration-300 tracking-wide">
-          Powered by <strong className="font-bold text-text-main/80 group-hover:text-text-main">Boltdocs</strong>
+          Powered by{' '}
+          <strong className="font-bold text-text-main/80 group-hover:text-text-main">
+            Boltdocs
+          </strong>
         </span>
       </a>
     </div>

package/src/client/components/ui-base/search-dialog.tsx

@@ -12,8 +12,17 @@ import {
 } from '@components/primitives/search-dialog'
 import Navbar from '@components/primitives/navbar'
 import { useNavigate } from 'react-router-dom'
+import type { ComponentRoute } from '@client/types'
+interface SearchResult {
+  id: string
+  title: string
+  path: string
+  bio: string
+  groupTitle?: string
+  isHeading?: boolean
+}
 
-export function SearchDialog({ routes }: { routes: any[] }) {
+export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
   const { isOpen, setIsOpen, query, setQuery, list } = useSearch(routes)
   const navigate = useNavigate()
 
@@ -58,10 +67,12 @@ export function SearchDialog({ routes }: { routes: any[] }) {
         <SearchDialogAutocomplete onSelectionChange={handleSelect}>
           <SearchDialogInput
             value={query}
-            onChange={(e: any) => setQuery(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setQuery(e.target.value)
+            }
           />
-          <SearchDialogList items={list}>
-            {(item: any) => (
+          <SearchDialogList items={list as SearchResult[]}>
+            {(item: SearchResult) => (
               <SearchDialogItemRoot
                 key={item.id}
                 onPress={() => handleSelect(item.id)}
@@ -70,7 +81,7 @@ export function SearchDialog({ routes }: { routes: any[] }) {
                 <SearchDialogItemIcon isHeading={item.isHeading} />
                 <div className="flex flex-col justify-center gap-0.5">
                   <SearchDialogItemTitle>{item.title}</SearchDialogItemTitle>
-                  <SearchDialogItemBio>{item.groupTitle}</SearchDialogItemBio>
+                  <SearchDialogItemBio>{item.bio}</SearchDialogItemBio>
                 </div>
               </SearchDialogItemRoot>
             )}

package/src/client/components/ui-base/sidebar.tsx

@@ -48,7 +48,8 @@ function CollapsibleSidebarGroup({
     >
       {group.routes.map((route: ComponentRoute) => {
         const isCurrent =
-          activePath === (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
+          activePath ===
+          (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
         return (
           <SidebarPrimitive.SidebarLink
             key={route.path}
@@ -80,7 +81,8 @@ export function Sidebar({
         <SidebarPrimitive.SidebarGroup className="mb-6">
           {ungrouped.map((route) => {
             const isCurrent =
-              activePath === (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
+              activePath ===
+              (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
             return (
               <SidebarPrimitive.SidebarLink
                 key={route.path}

package/src/client/hooks/use-i18n.ts

@@ -29,7 +29,7 @@ export function useI18n(): UseI18nReturn {
 
   const handleLocaleChange = (locale: string) => {
     if (!i18n || locale === currentLocale) return
-    
+
     // Update store
     setLocale(locale)
 
@@ -87,7 +87,8 @@ export function useI18n(): UseI18nReturn {
     navigate(targetPath)
   }
 
-  const currentLocaleConfig = config.i18n?.localeConfigs?.[currentLocale as string]
+  const currentLocaleConfig =
+    config.i18n?.localeConfigs?.[currentLocale as string]
   const currentLocaleLabel =
     currentLocaleConfig?.label ||
     config.i18n?.locales[currentLocale as string] ||

package/src/client/hooks/use-localized-to.ts

@@ -8,10 +8,11 @@ import { useRoutes } from './use-routes'
  */
 export function useLocalizedTo(to: RouterLinkProps['to']) {
   const config = useConfig()
-  const { currentLocale: activeLocale, currentVersion: activeVersion } = useRoutes()
+  const { currentLocale: activeLocale, currentVersion: activeVersion } =
+    useRoutes()
 
   if (!config || typeof to !== 'string') return to
-  
+
   // External or absolute links don't need localization
   if (to.startsWith('http') || to.startsWith('//')) return to
 
@@ -22,7 +23,7 @@ export function useLocalizedTo(to: RouterLinkProps['to']) {
 
   // 1. Identify the input intent
   const isDocLink = to.startsWith('/docs')
-  
+
   // 3. Clean the 'to' path of ANY existing prefixes to avoid stacking
   const parts = to.split('/').filter(Boolean)
   let pIdx = 0
@@ -32,7 +33,7 @@ export function useLocalizedTo(to: RouterLinkProps['to']) {
 
   // Strip versions if present
   if (versions && parts.length > pIdx) {
-    const vMatch = versions.versions.find(v => v.path === parts[pIdx])
+    const vMatch = versions.versions.find((v) => v.path === parts[pIdx])
     if (vMatch) pIdx++
   }
 
@@ -62,7 +63,7 @@ export function useLocalizedTo(to: RouterLinkProps['to']) {
   resultParts.push(...routeContent)
 
   const finalPath = `/${resultParts.join('/')}`
-  
+
   // Cleanup trailing slashes unless it's just root
   if (finalPath.length > 1 && finalPath.endsWith('/')) {
     return finalPath.slice(0, -1)

package/src/client/hooks/use-page-nav.ts

@@ -1,18 +1,39 @@
+import { useLocation } from 'react-router-dom'
 import { useRoutes } from './use-routes'
 
 /**
  * Hook to manage the previous and next button functionality for documentation pages.
+ * Intelligent: respects current locale, version, and tab to keep navigation logical.
  */
 export function usePageNav() {
-  const { routes } = useRoutes()
-  const currentPath = window.location.pathname
+  const { routes, currentRoute } = useRoutes()
+  const location = useLocation()
 
-  const currentIndex = routes.findIndex((r) => r.path === currentPath)
-  const currentRoute = routes[currentIndex]
+  if (!currentRoute) {
+    return {
+      prevPage: null,
+      nextPage: null,
+      currentRoute: null,
+    }
+  }
+
+  const activeTabId = currentRoute.tab?.toLowerCase()
+
+  // Subset of routes that match the current context (locale and version are already filtered by useRoutes)
+  // We further filter by tab to keep the user in the same logical section
+  const contextRoutes = activeTabId
+    ? routes.filter((r) => r.tab?.toLowerCase() === activeTabId)
+    : routes.filter((r) => !r.tab)
+
+  const currentIndex = contextRoutes.findIndex(
+    (r) => r.path === location.pathname,
+  )
 
-  const prevPage = currentIndex > 0 ? routes[currentIndex - 1] : null
+  const prevPage = currentIndex > 0 ? contextRoutes[currentIndex - 1] : null
   const nextPage =
-    currentIndex < routes.length - 1 ? routes[currentIndex + 1] : null
+    currentIndex !== -1 && currentIndex < contextRoutes.length - 1
+      ? contextRoutes[currentIndex + 1]
+      : null
 
   return {
     prevPage,

package/src/client/hooks/use-routes.ts

@@ -71,7 +71,8 @@ export function useRoutes() {
   })
 
   // Labels and lists for UI convenience
-  const currentLocaleConfig = config.i18n?.localeConfigs?.[currentLocale as string]
+  const currentLocaleConfig =
+    config.i18n?.localeConfigs?.[currentLocale as string]
   const currentLocaleLabel =
     currentLocaleConfig?.label ||
     config.i18n?.locales[currentLocale as string] ||

package/src/client/hooks/use-search.ts

@@ -1,77 +1,98 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useEffect } from 'react'
+import { Index } from 'flexsearch'
 import { useRoutes } from './use-routes'
 import type { ComponentRoute } from '@client/types'
+// @ts-ignore
+import searchData from 'virtual:boltdocs-search'
+
+interface SearchDataItem {
+  id: string
+  title: string
+  content: string
+  url: string
+  display: string
+  locale?: string
+  version?: string
+}
 
 export function useSearch(routes: ComponentRoute[]) {
   const { currentLocale, currentVersion } = useRoutes()
   const [isOpen, setIsOpen] = useState(false)
   const [query, setQuery] = useState('')
+  const [index, setIndex] = useState<Index | null>(null)
 
-  const list = useMemo(() => {
-    // 0. Filter routes by active context
-    const activeRoutes = routes.filter((r) => {
-      const localeMatch = !currentLocale || r.locale === currentLocale
-      const versionMatch = !currentVersion || r.version === currentVersion
-      return localeMatch && versionMatch
+  // Initialize FlexSearch index once
+  useEffect(() => {
+    if (!isOpen || index) return
+
+    const newIndex = new Index({
+      preset: 'match',
+      tokenize: 'full',
+      resolution: 9,
+      cache: true,
     })
 
-    if (!query) {
-      return activeRoutes.slice(0, 10).map((r) => ({
-        id: r.path,
-        title: r.title,
-        path: r.path,
-        bio: r.description || '',
-        groupTitle: r.groupTitle,
-      }))
+    // Index all documents
+    for (const doc of searchData as SearchDataItem[]) {
+      newIndex.add(doc.id, `${doc.title} ${doc.content}`)
     }
 
-    const results: {
-      id: string
-      title: string | undefined
-      path: string
-      bio: string
-      groupTitle: string | undefined
-      isHeading?: boolean
-    }[] = []
-    const lowerQuery = query.toLowerCase()
-
-    for (const route of activeRoutes) {
-      if (route.title?.toLowerCase().includes(lowerQuery)) {
-        results.push({
-          id: route.path,
-          title: route.title,
-          path: route.path,
-          bio: route.description || '',
-          groupTitle: route.groupTitle,
+    setIndex(newIndex)
+  }, [isOpen, index])
+
+  const list = useMemo(() => {
+    if (!query) {
+      // Default results: just active routes
+      return routes
+        .filter((r) => {
+          const localeMatch = !currentLocale || r.locale === currentLocale
+          const versionMatch = !currentVersion || r.version === currentVersion
+          return localeMatch && versionMatch
         })
-      }
-
-      if (route.headings) {
-        for (const heading of route.headings) {
-          if (heading.text.toLowerCase().includes(lowerQuery)) {
-            results.push({
-              id: `${route.path}#${heading.id}`,
-              title: heading.text,
-              path: `${route.path}#${heading.id}`,
-              bio: `Heading in ${route.title}`,
-              groupTitle: route.title,
-              isHeading: true,
-            })
-          }
-        }
-      }
+        .slice(0, 10)
+        .map((r) => ({
+          id: r.path,
+          title: r.title,
+          path: r.path,
+          bio: r.description || '',
+          groupTitle: r.groupTitle,
+        }))
     }
 
-    // Deduplicate by path
-    const seen = new Set()
-    return results
-      .filter((r) => {
-        if (seen.has(r.path)) return false
-        seen.add(r.path)
-        return true
+    if (!index) return []
+
+    const searchResults = index.search(query, {
+      limit: 20,
+      suggest: true,
+    })
+
+    const results: any[] = []
+    const seen = new Set<string>()
+
+    for (const id of searchResults) {
+      const doc = (searchData as SearchDataItem[]).find((d) => d.id === id)
+      if (!doc) continue
+
+      // Filter by locale and version
+      const localeMatch = !currentLocale || doc.locale === currentLocale
+      const versionMatch = !currentVersion || doc.version === currentVersion
+      if (!localeMatch || !versionMatch) continue
+
+      if (seen.has(doc.url)) continue
+      seen.add(doc.url)
+
+      results.push({
+        id: doc.url,
+        title: doc.title,
+        path: doc.url,
+        bio: doc.display,
+        groupTitle: doc.display.split(' > ')[0],
+        isHeading: doc.url.includes('#'),
       })
-      .slice(0, 10)
-  }, [routes, query, currentLocale, currentVersion])
+    }
+
+    return results.slice(0, 10)
+  }, [query, index, currentLocale, currentVersion, routes])
 
   return {
     isOpen,
@@ -81,7 +102,8 @@ export function useSearch(routes: ComponentRoute[]) {
     list,
     input: {
       value: query,
-      onChange: (e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value),
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+        setQuery(e.target.value),
     },
   }
 }

package/src/client/hooks/use-sidebar.ts

@@ -7,7 +7,8 @@ export function useSidebar(routes: ComponentRoute[]) {
   const location = useLocation()
 
   // Find active route and tab
-  const normalize = (p: string) => (p.endsWith('/') && p.length > 1 ? p.slice(0, -1) : p)
+  const normalize = (p: string) =>
+    p.endsWith('/') && p.length > 1 ? p.slice(0, -1) : p
   const currentPath = normalize(location.pathname)
 
   const activeRoute = routes.find((r) => normalize(r.path) === currentPath)

package/src/client/store/use-boltdocs-store.ts

@@ -5,7 +5,7 @@ interface BoltdocsState {
   currentLocale: string | undefined
   currentVersion: string | undefined
   hasHydrated: boolean
-  
+
   // Actions
   setLocale: (locale: string | undefined) => void
   setVersion: (version: string | undefined) => void
@@ -22,9 +22,10 @@ export const useBoltdocsStore = create<BoltdocsState>()(
       currentLocale: undefined,
       currentVersion: undefined,
       hasHydrated: false,
-      
+
       setLocale: (locale: string | undefined) => set({ currentLocale: locale }),
-      setVersion: (version: string | undefined) => set({ currentVersion: version }),
+      setVersion: (version: string | undefined) =>
+        set({ currentVersion: version }),
       setHasHydrated: (val: boolean) => set({ hasHydrated: val }),
     }),
     {
@@ -38,6 +39,6 @@ export const useBoltdocsStore = create<BoltdocsState>()(
       onRehydrateStorage: () => (state?: BoltdocsState) => {
         state?.setHasHydrated(true)
       },
-    }
-  )
+    },
+  ),
 )

package/src/client/theme/neutral.css

@@ -67,6 +67,35 @@
   --spacing-sidebar: 16rem;
   --spacing-toc: 14rem;
   --spacing-content-max: 48rem;
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out forwards;
 }
 
 :root[data-theme="dark"],