boltdocs 2.7.10 → 2.8.0

package/src/client/components/primitives/code-block.tsx

@@ -1,120 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cn } from '../../utils/cn'
-
-interface CodeBlockRootProps extends ComponentProps<'div'> {
-  /**
-   * Whether the code block is in plain mode (no borders/padding)
-   * @default false
-   */
-  plain?: boolean
-}
-
-export interface CodeBlockHeaderProps extends ComponentProps<'div'> {}
-export interface CodeBlockGroupProps extends ComponentProps<'div'> {}
-export interface CodeBlockContentProps extends ComponentProps<'div'> {
-  /**
-   * Whether the code content should be truncated with an expand button
-   * @default false
-   */
-  shouldTruncate?: boolean
-}
-
-/**
- * Root component for code blocks.
- * Handles background, borders, and general layout.
- */
-const CodeBlock = ({
-  children,
-  className,
-  plain = false,
-  ...props
-}: CodeBlockRootProps) => {
-  return (
-    <div
-      className={cn(
-        'not-prose boltdocs-code-block',
-        'group relative overflow-hidden bg-(--color-code-bg)',
-        'contain-layout contain-paint',
-        {
-          'my-6 rounded-xl border border-subtle': !plain,
-        },
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-/**
- * Header section of the code block.
- * Usually contains the title, language label, and action buttons.
- */
-const CodeBlockHeader = ({
-  children,
-  className,
-  ...props
-}: CodeBlockHeaderProps) => {
-  return (
-    <div
-      className={cn(
-        'flex h-9 items-center justify-between px-4 py-1.5',
-        'text-[13px] font-medium text-muted',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-/**
- * Horizontal group for organizing items within the header (e.g., logo + label).
- */
-const CodeBlockGroup = ({
-  children,
-  className,
-  ...props
-}: CodeBlockGroupProps) => {
-  return (
-    <div className={cn('flex items-center space-x-2', className)} {...props}>
-      {children}
-    </div>
-  )
-}
-
-/**
- * Content area of the code block.
- * Wraps the `<pre>` or `<div>` containing the code.
- */
-const CodeBlockContent = ({
-  className,
-  children,
-  shouldTruncate = false,
-  ...props
-}: CodeBlockContentProps) => {
-  return (
-    <div
-      className={cn(
-        'relative',
-        {
-          '[&>pre]:max-h-[300px] [&>pre]:overflow-hidden [&>div>pre]:max-h-[300px] [&>div>pre]:overflow-hidden':
-            shouldTruncate,
-        },
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-// Assign sub-components
-CodeBlock.Header = CodeBlockHeader
-CodeBlock.Group = CodeBlockGroup
-CodeBlock.Content = CodeBlockContent
-
-export { CodeBlock, CodeBlockHeader, CodeBlockGroup, CodeBlockContent }

package/src/client/components/primitives/docs-layout.tsx

@@ -1,125 +0,0 @@
-import { cn } from '../../utils/cn'
-import { SearchHighlight } from '../ui-base/search-highlight'
-
-/**
- * Props shared by all layout slot components.
- */
-interface SlotProps {
-  children?: React.ReactNode
-  className?: string
-  style?: React.CSSProperties
-}
-
-/**
- * Root layout shell. Renders a full-height flex column.
- *
- * Usage:
- * ```tsx
- * <DocsLayout>
- *   <Navbar />
- *   <DocsLayout.Body>...</DocsLayout.Body>
- * </DocsLayout>
- * ```
- */
-function DocsLayoutRoot({ children, className, style }: SlotProps) {
-  return (
-    <div
-      className={cn(
-        'h-screen flex flex-col overflow-hidden bg-main text-body',
-        className,
-      )}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-}
-
-/**
- * Horizontal flex container for sidebar + content + toc.
- */
-function Body({ children, className, style }: SlotProps) {
-  return (
-    <div
-      className={cn(
-        'mx-auto flex flex-1 w-full max-w-(--breakpoint-3xl) bg-main overflow-hidden',
-        className,
-      )}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-}
-
-/**
- * Main scrollable content area.
- */
-function Content({ children, className, style }: SlotProps) {
-  return (
-    <main
-      className={cn(
-        'boltdocs-content flex-1 min-w-0 overflow-y-auto',
-        'contain-layout', // Optimization: isolate main content layout
-        className,
-      )}
-      style={style}
-    >
-      {children}
-    </main>
-  )
-}
-
-/**
- * MDX Content wrapper with standard page padding and max-width logic.
- */
-function ContentMdx({ children, className, style }: SlotProps) {
-  return (
-    <div
-      className={cn('boltdocs-page mx-auto pt-4 pb-20 px-4 sm:px-8', className)}
-      style={style}
-    >
-      <SearchHighlight />
-      {children}
-    </div>
-  )
-}
-
-/**
- * Content header area (breadcrumbs, title, description, etc).
- */
-function Header({ children, className, style }: SlotProps) {
-  return (
-    <header className={cn('mb-10', className)} style={style}>
-      {children}
-    </header>
-  )
-}
-
-/**
- * Footer area inside the content section (page nav).
- */
-function Footer({ children, className, style }: SlotProps) {
-  return (
-    <div className={cn('mt-20', className)} style={style}>
-      {children}
-    </div>
-  )
-}
-
-interface DocsLayoutComponent extends React.FC<SlotProps> {
-  Body: typeof Body
-  Content: typeof Content
-  ContentMdx: typeof ContentMdx
-  Header: typeof Header
-  Footer: typeof Footer
-}
-
-// Attach sub-components to the root
-export const DocsLayout = Object.assign(DocsLayoutRoot, {
-  Body,
-  Content,
-  ContentMdx,
-  Header,
-  Footer,
-}) as DocsLayoutComponent

package/src/client/components/primitives/error-boundary.tsx

@@ -1,107 +0,0 @@
-import * as React from 'react'
-import type { ErrorInfo, ComponentType, ReactNode } from 'react'
-import { Component } from 'react'
-import { Button } from './button'
-
-export interface FallbackProps {
-  error: Error
-  resetErrorBoundary: () => void
-}
-
-export interface ErrorBoundaryProps {
-  children?: ReactNode
-  fallback?: ReactNode
-  FallbackComponent?: ComponentType<FallbackProps>
-  onError?: (error: Error, info: ErrorInfo) => void
-  onReset?: () => void
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean
-  error: Error | null
-}
-
-export class ErrorBoundary extends Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  public state: ErrorBoundaryState = { hasError: false, error: null }
-
-  public static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error }
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    if (this.props.onError) {
-      this.props.onError(error, errorInfo)
-    } else {
-      console.error(
-        'ErrorBoundary caught an unhandled error:',
-        error,
-        errorInfo,
-      )
-    }
-  }
-
-  public resetErrorBoundary = () => {
-    if (this.props.onReset) {
-      this.props.onReset()
-    }
-    this.setState({ hasError: false, error: null })
-  }
-
-  public render() {
-    const { hasError, error } = this.state
-    const { children, fallback, FallbackComponent } = this.props
-
-    if (hasError && error) {
-      if (FallbackComponent) {
-        return (
-          <FallbackComponent
-            error={error}
-            resetErrorBoundary={this.resetErrorBoundary}
-          />
-        )
-      }
-      if (fallback) {
-        return fallback
-      }
-      return (
-        <ErrorBoundaryFallback
-          error={error}
-          resetErrorBoundary={this.resetErrorBoundary}
-        />
-      )
-    }
-
-    return children
-  }
-}
-
-export interface ErrorBoundaryFallbackProps {
-  error: Error
-  resetErrorBoundary: () => void
-}
-
-export function ErrorBoundaryFallback({
-  error,
-  resetErrorBoundary,
-}: ErrorBoundaryFallbackProps) {
-  return (
-    <div className="flex flex-col items-center justify-center min-h-[40vh] text-center gap-4 px-6 py-8 border border-subtle bg-surface rounded-2xl max-w-lg mx-auto shadow-xs">
-      <div className="text-lg font-bold text-rose-600 dark:text-rose-400">
-        Something went wrong
-      </div>
-      <p className="text-sm text-muted max-w-sm leading-relaxed">
-        {error?.message ||
-          'An unexpected error occurred while rendering this page.'}
-      </p>
-      <Button
-        className="rounded-xl border border-subtle bg-main px-6 py-2.5 text-xs font-semibold text-body hover:bg-primary-50/50 hover:border-primary-500/50 transition-all duration-300 cursor-pointer outline-none select-none"
-        onPress={resetErrorBoundary}
-      >
-        Try again
-      </Button>
-    </div>
-  )
-}

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

@@ -1,128 +0,0 @@
-import * as React from 'react'
-import { Link as LucideLink } from '../ui-base/icons'
-import { Link } from './link'
-import { cn } from '../../utils/cn'
-
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  level: 1 | 2 | 3 | 4 | 5 | 6
-  id?: string
-  /** Whether to show the anchor icon/link. Defaults to true if id is provided. */
-  showAnchor?: boolean
-  /** Position of the anchor link relative to children. Defaults to 'wrap'. */
-  anchorPosition?: 'wrap' | 'after' | 'before'
-  /** Custom icon to display for the anchor. */
-  anchorIcon?: React.ReactNode
-  /** Custom classes for the anchor link wrapper. */
-  anchorClassName?: string
-}
-
-export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
-  (
-    {
-      level,
-      id,
-      children,
-      className,
-      showAnchor = true,
-      anchorPosition = 'wrap',
-      anchorIcon,
-      anchorClassName,
-      ...props
-    },
-    ref,
-  ) => {
-    const safeLevel = Math.min(Math.max(Math.floor(level), 1), 6) as
-      | 1
-      | 2
-      | 3
-      | 4
-      | 5
-      | 6
-    const Tag = `h${safeLevel}` as const
-
-    const hasAnchor = !!(id && showAnchor)
-
-    // Default icon with hover transition
-    const defaultIcon = (
-      <LucideLink
-        className={cn(
-          'transition-all duration-200',
-          anchorPosition === 'wrap'
-            ? 'opacity-0 ml-2 text-muted/50 group-hover:text-primary-500 group-hover:opacity-100'
-            : 'text-muted/50 hover:text-primary-500',
-        )}
-        size={16}
-      />
-    )
-
-    const icon = anchorIcon ?? defaultIcon
-
-    const renderContent = () => {
-      if (!hasAnchor) {
-        return children
-      }
-
-      if (anchorPosition === 'wrap') {
-        return (
-          <Link
-            href={`#${id}`}
-            className={cn(
-              'header-anchor flex flex-row items-center no-underline text-inherit',
-              anchorClassName,
-            )}
-            aria-label="Anchor"
-          >
-            {children}
-            {icon}
-          </Link>
-        )
-      }
-
-      return (
-        <>
-          {anchorPosition === 'before' && (
-            <Link
-              href={`#${id}`}
-              className={cn(
-                'header-anchor mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200',
-                anchorClassName,
-              )}
-              aria-label="Anchor"
-            >
-              {icon}
-            </Link>
-          )}
-          {children}
-          {anchorPosition === 'after' && (
-            <Link
-              href={`#${id}`}
-              className={cn(
-                'header-anchor ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200',
-                anchorClassName,
-              )}
-              aria-label="Anchor"
-            >
-              {icon}
-            </Link>
-          )}
-        </>
-      )
-    }
-
-    return (
-      <Tag
-        ref={ref}
-        id={id}
-        className={cn(
-          'boltdocs-heading relative group flex items-center scroll-mt-24',
-          className,
-        )}
-        {...props}
-      >
-        {renderContent()}
-      </Tag>
-    )
-  },
-)
-
-Heading.displayName = 'Heading'

package/src/client/components/primitives/helpers/observer.ts

@@ -1,141 +0,0 @@
-import type { TOCItemInfo, TOCItemType } from '../on-this-page'
-
-export function getItemId(url: string) {
-  if (url.startsWith('#')) return url.slice(1)
-  return null
-}
-
-export class Observer {
-  items: TOCItemInfo[] = []
-  single = false
-  private observer: IntersectionObserver | null = null
-  onChange?: () => void
-
-  private callback(_entries: IntersectionObserverEntry[]) {
-    // For each item, check if it's currently in viewport
-    for (const item of this.items) {
-      const element = document.getElementById(item.id)
-      if (!element) {
-        item.active = false
-        item.fallback = false
-        continue
-      }
-
-      const rect = element.getBoundingClientRect()
-      const viewportHeight =
-        typeof window !== 'undefined' ? window.innerHeight : 1000
-
-      // Check if element is currently in viewport (visible)
-      // rect.bottom > 0
-      // rect.top < viewportHeight:
-      const isInViewport = rect.bottom > 0 && rect.top < viewportHeight
-
-      // Update active state based on current position
-      item.active = isInViewport
-
-      // Fallback: element has scrolled past but is still near viewport
-      item.fallback =
-        !isInViewport && rect.top > 0 && rect.top < viewportHeight * 2
-    }
-
-    // 3. Determine which items should be active based on single mode
-    if (this.single) {
-      // Single mode: only ONE active item (the one closest to the top of viewport)
-      let highlightIdx = -1
-
-      // Find all visible items and pick the one closest to the top of viewport
-      const visibleItems = this.items
-        .map((item, idx) => ({ item, idx }))
-        .filter(({ item }) => item.active)
-
-      if (visibleItems.length > 0) {
-        // Take the first one (closest to top of viewport)
-        highlightIdx = visibleItems[0].idx
-      } else {
-        // If nothing visible, check fallback items
-        const fallbackItems = this.items
-          .map((item, idx) => ({ item, idx }))
-          .filter(({ item }) => item.fallback)
-
-        if (fallbackItems.length > 0) {
-          highlightIdx = fallbackItems[0].idx
-        } else if (this.items.length > 0) {
-          highlightIdx = 0
-        }
-      }
-
-      // Map back to UI state - only one active
-      this.items = this.items.map((item, idx) => ({
-        ...item,
-        active: idx === highlightIdx,
-        t: idx === highlightIdx ? Date.now() : item.t,
-      }))
-    } else {
-      // Multi mode: items active when they are in viewport
-      // This ensures items activate when visible and deactivate when they leave viewport
-      this.items = this.items.map((item, idx) => ({
-        ...item,
-        active: item.active,
-        t: item.active ? Date.now() : item.t,
-      }))
-    }
-
-    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
-  }
-}

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

@@ -1,26 +0,0 @@
-import type { ImgHTMLAttributes } from 'react'
-import { useTheme } from '../../app/theme-context'
-import { cn } from '../../utils/cn'
-
-export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
-  theme?: 'light' | 'dark'
-}
-
-/**
- * A responsive image component that automatically supports dark and light theme variations
- * via the `theme` prop.
- */
-export function Image({ theme, className, ...props }: ImageProps) {
-  const { resolvedTheme } = useTheme()
-
-  if (theme && theme !== resolvedTheme) {
-    return null
-  }
-
-  return (
-    <img
-      className={cn('max-w-full h-auto rounded-lg my-8', className)}
-      {...props}
-    />
-  )
-}