boltdocs 2.2.0 → 2.4.1

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

@@ -20,7 +20,7 @@ export function MenuTrigger(props: MenuTriggerProps) {
   return (
     <RAC.MenuTrigger {...props}>
       {trigger as any}
-      <Popover placement={props.placement} className="min-w-[200px]">
+      <Popover placement={props.placement} className="min-w-35">
         {menu as any}
       </Popover>
     </RAC.MenuTrigger>
@@ -52,7 +52,10 @@ export function Menu<T extends object>(props: RAC.MenuProps<T>) {
     <RAC.Menu
       {...props}
       className={RAC.composeRenderProps(props.className, (className) =>
-        cn('p-1.5 outline-none max-h-[inherit] overflow-auto', className),
+        cn(
+          'p-1.5 outline-none max-h-[inherit] overflow-auto max-w-75',
+          className,
+        ),
       )}
     />
   )
@@ -74,11 +77,14 @@ export function MenuItem(props: RAC.MenuItemProps) {
         props.className,
         (className, { isFocused, isPressed, isDisabled }) =>
           cn(
-            'group relative flex flex-row items-center gap-2.5 px-3 py-1.5 rounded-lg outline-none cursor-default transition-all duration-200',
-            'text-text-main text-[0.8125rem]',
-            isFocused && 'bg-primary-500/10 text-primary-600 shadow-sm',
-            isPressed && 'scale-[0.98] bg-primary-500/15',
-            isDisabled && 'opacity-40 grayscale pointer-events-none',
+            'group relative flex flex-row items-center gap-2 px-2 py-1 rounded-lg outline-none cursor-default hover:cursor-pointer transition-none',
+            'text-text-main text-[12px]',
+            {
+              'bg-bg-surface-elevated text-primary-600 ring-1 ring-border-strong/5':
+                isFocused,
+              'bg-bg-surface-elevanted': isPressed,
+              'opacity-40 grayscale pointer-events-none': isDisabled,
+            },
             className,
           ),
       )}
@@ -88,20 +94,20 @@ export function MenuItem(props: RAC.MenuItemProps) {
         (children, { selectionMode, isSelected, hasSubmenu }) => (
           <>
             {selectionMode !== 'none' && (
-              <span className="flex items-center w-4 h-4 shrink-0 justify-center">
+              <span className="flex items-center size-4 shrink-0 justify-center">
                 {isSelected && selectionMode === 'multiple' && (
-                  <Check className="w-3.5 h-3.5 stroke-[2.5px] text-primary-500 animate-in zoom-in-50 duration-200" />
+                  <Check className="size-3.5 stroke-[2.5px] text-primary-500 animate-in zoom-in-50 duration-200" />
                 )}
                 {isSelected && selectionMode === 'single' && (
-                  <Dot className="w-6 h-6 text-primary-500 animate-in zoom-in-50 duration-200" />
+                  <Dot className="size-5 text-primary-500 animate-in zoom-in-50 duration-200" />
                 )}
               </span>
             )}
-            <div className="flex-1 flex flex-row items-center gap-2.5 truncate font-medium">
+            <div className="flex flex-row w-full transition-colors items-center gap-2 py-1 px-1">
               {children}
             </div>
             {hasSubmenu && (
-              <ChevronRight className="w-4 h-4 ml-auto text-text-muted group-focused:text-primary-500/70 transition-colors" />
+              <ChevronRight className="size-4 ml-auto text-text-muted group-focused:text-primary-500/70 transition-colors" />
             )}
           </>
         ),

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

@@ -1,16 +1,7 @@
 import { type ReactNode, useState, useEffect } from 'react'
-import {
-  Button,
-  Separator,
-  ToggleButton,
-  Link,
-  Menu,
-  MenuItem,
-  MenuTrigger,
-  cn,
-} from './index'
+import { Separator, ToggleButton, Link, cn } from './index'
 import { Button as ButtonRAC } from 'react-aria-components'
-import { Search, Sun, Moon, ExternalLink, ChevronDown } from 'lucide-react'
+import { Search, Sun, Moon, ExternalLink } from 'lucide-react'
 import * as IconsSocials from '@components/icons-dev'
 import type { ComponentBase } from './types'
 import type { BoltdocsSocialLink } from '@node/config'
@@ -39,21 +30,6 @@ export interface NavbarThemeProps {
   onThemeChange: (isSelected: boolean) => void
 }
 
-export interface NavbarMenuProps extends ComponentBase {
-  label: ReactNode
-  icon?: ReactNode
-}
-
-export interface NavbarVersionProps extends ComponentBase {
-  current: string
-}
-
-export interface NavbarItemProps extends Omit<ComponentBase, 'children'> {
-  label: string
-  onPress?: () => void
-  isCurrent?: boolean
-}
-
 export interface NavbarSocialsProps extends ComponentBase {
   icon: string
   link: string
@@ -92,13 +68,25 @@ export const NavbarContent = ({ children, className }: ComponentBase) => {
 
 export const NavbarLeft = ({ children, className }: ComponentBase) => {
   return (
-    <div className={cn('flex items-center gap-4', className)}>{children}</div>
+    <div
+      className={cn(
+        'flex flex-1 items-center justify-start gap-4 min-w-0',
+        className,
+      )}
+    >
+      {children}
+    </div>
   )
 }
 
 export const NavbarRight = ({ children, className }: ComponentBase) => {
   return (
-    <div className={cn('flex items-center gap-2 md:gap-4', className)}>
+    <div
+      className={cn(
+        'flex flex-1 items-center justify-end gap-2 md:gap-4 min-w-0',
+        className,
+      )}
+    >
       {children}
     </div>
   )
@@ -108,7 +96,7 @@ export const NavbarCenter = ({ children, className }: ComponentBase) => {
   return (
     <div
       className={cn(
-        'hidden lg:flex flex-1 justify-center items-center gap-4 px-4',
+        'hidden lg:flex flex-1 justify-center items-center gap-4 px-4 min-w-0 w-full',
         className,
       )}
     >
@@ -144,14 +132,16 @@ export const NavbarLogo = ({
 
 export const NavbarTitle = ({ children, className }: ComponentBase) => {
   return (
-    <span
-      className={cn(
-        'text-lg font-bold tracking-tight hidden sm:inline-block',
-        className,
-      )}
-    >
-      {children}
-    </span>
+    <Link href="/">
+      <span
+        className={cn(
+          'text-lg font-bold tracking-tight hidden sm:inline-block',
+          className,
+        )}
+      >
+        {children}
+      </span>
+    </Link>
   )
 }
 
@@ -180,10 +170,10 @@ export const NavbarLink = ({
       href={href}
       target={to === 'external' ? '_blank' : undefined}
       className={cn(
-        'transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
+        'transition-colors outline-none font-medium focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
         {
-          'text-primary-500 font-bold': active,
-          'text-text-muted hover:text-text-main font-medium': !active,
+          'text-primary-500': active,
+          'text-text-muted hover:text-text-main': !active,
         },
         className,
       )}
@@ -214,9 +204,9 @@ export const NavbarSearchTrigger = ({
       onPress={onPress}
       className={cn(
         'flex items-center gap-2 rounded-full border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-muted outline-none cursor-pointer',
-        'transition-colors hover:border-border-strong hover:text-text-main',
+        'transition-all duration-200 hover:border-border-strong hover:text-text-main hover:bg-bg-muted hover:shadow-sm active:scale-[0.98]',
         'focus-visible:ring-2 focus-visible:ring-primary-500/30',
-        'w-full max-w-[320px] justify-between',
+        'w-full max-w-[720px] justify-between',
         className,
       )}
     >
@@ -246,8 +236,8 @@ export const NavbarTheme = ({
       isSelected={theme === 'dark'}
       onChange={onThemeChange}
       className={cn(
-        'rounded-md p-2 text-text-muted outline-none cursor-pointer transition-colors',
-        'hover:bg-bg-surface hover:text-text-main',
+        'rounded-md p-2 text-text-muted outline-none cursor-pointer',
+        'transition-all duration-300 hover:bg-bg-surface hover:text-text-main hover:rotate-12 active:scale-90',
         'focus-visible:ring-2 focus-visible:ring-primary-500/30',
         className,
       )}
@@ -258,54 +248,6 @@ export const NavbarTheme = ({
   )
 }
 
-export const NavbarMenu = ({
-  label,
-  children,
-  className,
-  icon,
-}: NavbarMenuProps) => {
-  return (
-    <MenuTrigger placement="bottom end">
-      <Button
-        variant="ghost"
-        className={cn(
-          'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-text-muted outline-none cursor-pointer transition-colors',
-          'hover:bg-bg-surface hover:text-text-main',
-          'focus-visible:ring-2 focus-visible:ring-primary-500/30',
-          className,
-        )}
-      >
-        {icon && <span className="flex items-center shrink-0">{icon}</span>}
-        <span className="text-[13px] font-bold uppercase tracking-wide">
-          {label}
-        </span>
-        <ChevronDown size={14} className="ml-0.5 opacity-50" />
-      </Button>
-      <Menu className="min-w-[180px]">{children as any}</Menu>
-    </MenuTrigger>
-  )
-}
-
-export const NavbarItem = ({
-  label,
-  className,
-  onPress,
-  isCurrent,
-}: NavbarItemProps) => {
-  return (
-    <MenuItem
-      onAction={onPress}
-      className={cn(
-        isCurrent &&
-          'bg-primary-500 text-white font-medium hover:bg-primary-600 focus:bg-primary-600 focus:text-white',
-        className,
-      )}
-    >
-      {label}
-    </MenuItem>
-  )
-}
-
 export const Icon = ({ name }: { name: BoltdocsSocialLink['icon'] }) => {
   if (name === 'github') return <IconsSocials.Github />
   if (name === 'discord') return <IconsSocials.Discord />
@@ -355,7 +297,6 @@ export default {
   Link: NavbarLink,
   SearchTrigger: NavbarSearchTrigger,
   Theme: NavbarTheme,
-  Item: NavbarItem,
   Socials: NavbarSocials,
   Split: NavbarSplit,
   Content: NavbarContent,

package/src/client/components/primitives/on-this-page.tsx

@@ -12,8 +12,8 @@ import React, {
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { cn } from '../../utils/cn'
 import { useOnChange } from '../../utils/use-on-change'
-import type { ComponentBase, CompoundComponent } from './types'
-import { getItemId } from './helpers/observer'
+import type { ComponentBase } from './types'
+import { getItemId, Observer } from './helpers/observer'
 
 export interface TOCItemType {
   title: ReactNode
@@ -74,120 +74,6 @@ export interface OnThisPageIndicatorProps extends ComponentBase {
 const ItemsContext = createContext<TOCItemInfo[] | null>(null)
 const ScrollContext = createContext<RefObject<HTMLElement | null> | null>(null)
 
-class Observer {
-  items: TOCItemInfo[] = []
-  single = false
-  private observer: IntersectionObserver | null = null
-  onChange?: () => void
-
-  private callback(entries: IntersectionObserverEntry[]) {
-    if (entries.length === 0) return
-
-    let hasActive = false
-    this.items = this.items.map((item) => {
-      const entry = entries.find((entry) => entry.target.id === item.id)
-      let active = entry ? entry.isIntersecting : item.active && !item.fallback
-      if (this.single && hasActive) active = false
-
-      if (item.active !== active) {
-        item = {
-          ...item,
-          t: Date.now(),
-          active,
-          fallback: false,
-        }
-      }
-
-      if (active) hasActive = true
-      return item
-    })
-
-    if (!hasActive && entries[0].rootBounds) {
-      const viewTop = entries[0].rootBounds.top
-      let min = Number.MAX_VALUE
-      let fallbackIdx = -1
-
-      for (let i = 0; i < this.items.length; i++) {
-        const element = document.getElementById(this.items[i].id)
-        if (!element) continue
-
-        const d = Math.abs(viewTop - element.getBoundingClientRect().top)
-        if (d < min) {
-          fallbackIdx = i
-          min = d
-        }
-      }
-
-      if (fallbackIdx !== -1) {
-        this.items[fallbackIdx] = {
-          ...this.items[fallbackIdx],
-          active: true,
-          fallback: true,
-          t: Date.now(),
-        }
-      }
-    }
-
-    this.onChange?.()
-  }
-
-  setItems(newItems: TOCItemType[]) {
-    const observer = this.observer
-    if (observer) {
-      for (const item of this.items) {
-        const element = document.getElementById(item.id)
-        if (!element) continue
-        observer.unobserve(element)
-      }
-    }
-
-    this.items = []
-    for (const item of newItems) {
-      const id = getItemId(item.url)
-      if (!id) continue
-
-      this.items.push({
-        id,
-        active: false,
-        fallback: false,
-        t: 0,
-        original: item,
-      })
-    }
-    this.watchItems()
-
-    // In an SPA, the TOC might update before the MDX content is in the DOM.
-    // We perform a few delayed scans to ensure we catch those elements.
-    if (typeof window !== 'undefined') {
-      setTimeout(() => this.watchItems(), 100)
-      setTimeout(() => this.watchItems(), 500)
-      setTimeout(() => this.watchItems(), 1000)
-    }
-
-    this.onChange?.()
-  }
-
-  watch(options?: IntersectionObserverInit) {
-    if (this.observer) return
-    this.observer = new IntersectionObserver(this.callback.bind(this), options)
-    this.watchItems()
-  }
-
-  private watchItems() {
-    if (!this.observer) return
-    for (const item of this.items) {
-      const element = document.getElementById(item.id)
-      if (!element) continue
-      this.observer.observe(element)
-    }
-  }
-
-  unwatch() {
-    this.observer?.disconnect()
-    this.observer = null
-  }
-}
-
 export function useItems() {
   const ctx = use(ItemsContext)
   if (!ctx)
@@ -197,40 +83,6 @@ export function useItems() {
   return ctx
 }
 
-export function useScrollStatus(ref: RefObject<HTMLElement | null>) {
-  const [status, setStatus] = useState({
-    isOverflowing: false,
-    isAtBottom: false,
-  })
-
-  useEffect(() => {
-    const el = ref.current
-    if (!el) return
-
-    const checkStatus = () => {
-      const isOverflowing = el.scrollHeight > el.clientHeight
-      // We use a 2px threshold for floating point math issues
-      const isAtBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 2
-      setStatus({ isOverflowing, isAtBottom })
-    }
-
-    checkStatus()
-    el.addEventListener('scroll', checkStatus, { passive: true })
-    window.addEventListener('resize', checkStatus)
-
-    const mutationObserver = new MutationObserver(checkStatus)
-    mutationObserver.observe(el, { childList: true, subtree: true })
-
-    return () => {
-      el.removeEventListener('scroll', checkStatus)
-      window.removeEventListener('resize', checkStatus)
-      mutationObserver.disconnect()
-    }
-  }, [ref])
-
-  return status
-}
-
 export function useActiveAnchor(): string | undefined {
   const items = useItems()
   return useMemo(() => {
@@ -282,9 +134,11 @@ export function AnchorProvider({
   }, [observer, toc])
 
   useEffect(() => {
+    // We use a rootMargin that acts as an activation "line" near the top.
+    // headings are "intersecting" (active=true) when they are BELOW this line.
     observer.watch({
-      rootMargin: '0px',
-      threshold: 0.98,
+      rootMargin: '-100px 0% 0% 0%',
+      threshold: 0,
     })
     observer.onChange = () => setItems([...observer.items])
 
@@ -339,18 +193,10 @@ export const OnThisPageContent = ({
 
   useImperativeHandle(ref, () => internalRef.current!)
 
-  const { isOverflowing, isAtBottom } = useScrollStatus(internalRef)
-
   return (
     <div
       ref={internalRef}
-      className={cn(
-        'relative overflow-y-auto boltdocs-otp-content',
-        isOverflowing &&
-          !isAtBottom &&
-          'mask-[linear-gradient(to_bottom,black_85%,transparent_100%)]',
-        className,
-      )}
+      className={cn('relative overflow-y-auto boltdocs-otp-content', className)}
       {...props}
     >
       {children}

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

@@ -24,8 +24,7 @@ export const Popover = ({
       {...props}
       className={RAC.composeRenderProps(className, (className) =>
         cn(
-          'z-50 overflow-auto rounded-xl border border-border-subtle bg-bg-surface/80 shadow-xl backdrop-blur-md outline-none',
-          'entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards',
+          'z-50 overflow-auto rounded-xl border border-border-subtle bg-bg-surface/80 shadow-xl backdrop-blur-md outline-none transition-none',
           className,
         ),
       )}

package/src/client/components/primitives/search-dialog.tsx

@@ -50,12 +50,12 @@ export const SearchDialogRoot = ({
   )
 }
 
-export const SearchDialogAutocomplete = ({
+export const SearchDialogAutocomplete = <T extends object>({
   children,
   className,
   onSelectionChange,
   ...props
-}: RAC.AutocompleteProps<object> & {
+}: RAC.AutocompleteProps<T> & {
   className?: string
   onSelectionChange?: (key: RAC.Key) => void
 }) => {
@@ -98,11 +98,11 @@ export const SearchDialogInput = ({
   )
 }
 
-export const SearchDialogList = ({
+export const SearchDialogList = <T extends object>({
   children,
   className,
   ...props
-}: RAC.ListBoxProps<object> & { className?: string }) => {
+}: RAC.ListBoxProps<T> & { className?: string }) => {
   return (
     <RAC.ListBox
       {...props}

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

@@ -122,11 +122,12 @@ export const SidebarLink = ({
     <Link
       href={href}
       className={cn(
-        'group flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors',
+        'group flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none',
+        'transition-all duration-200 ease-in-out',
         'focus-visible:ring-2 focus-visible:ring-primary-500/30',
         active
           ? 'bg-primary-500/10 text-primary-500 font-medium'
-          : 'text-text-muted hover:bg-bg-surface hover:text-text-main',
+          : 'text-text-muted hover:bg-bg-surface hover:text-text-main hover:translate-x-1',
         className,
       )}
     >

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/copy-markdown.tsx

@@ -80,25 +80,19 @@ export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
             )}
           />
           <Menu className="w-52">
-            <MenuItem
-              onAction={handleCopy}
-              className="flex flex-row items-start gap-2.5 group"
-            >
+            <MenuItem onAction={handleCopy}>
               <Copy
                 size={16}
-                className="w-4 h-4 shrink-0 mt-0.5 transition-transform duration-200 group-hover:-translate-y-0.5 text-text-muted group-hover:text-primary-500"
+                className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
               />
               <span className="font-medium text-[0.8125rem]">
                 Copy Markdown
               </span>
             </MenuItem>
-            <MenuItem
-              onAction={handleOpenRaw}
-              className="flex flex-row items-start gap-2.5 group"
-            >
+            <MenuItem onAction={handleOpenRaw}>
               <ExternalLink
                 size={16}
-                className="w-4 h-4 shrink-0 mt-0.5 transition-transform duration-200 group-hover:-translate-y-0.5 text-text-muted group-hover:text-primary-500"
+                className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
               />
               <span className="font-medium text-[0.8125rem]">
                 View as Markdown

package/src/client/components/ui-base/index.ts

@@ -10,7 +10,6 @@ export { NotFound } from './not-found'
 export { OnThisPage } from './on-this-page'
 export { PageNav } from './page-nav'
 export { PoweredBy } from './powered-by'
-export { ProgressBar } from './progress-bar'
 export { SearchDialog } from './search-dialog'
 export { Sidebar } from './sidebar'
 export { Tabs } from './tabs'