boltdocs 1.7.0 → 1.8.0

package/dist/client/ssr.mjs

@@ -1,6 +1,6 @@
 import {
   AppShell
-} from "../chunk-MULKZFVN.mjs";
+} from "../chunk-SFVOGJ2W.mjs";
 import "../chunk-FMTOYQLO.mjs";
 
 // src/client/ssr.tsx

package/dist/node/index.d.mts

@@ -80,6 +80,8 @@ interface RouteMeta {
     icon?: string;
     /** The tab this route belongs to, if tabs are configured */
     tab?: string;
+    /** The extracted plain-text content of the page for search indexing */
+    _content?: string;
 }
 
 declare function boltdocs(options?: BoltdocsPluginOptions): Promise<Plugin[]>;

package/dist/node/index.d.ts

@@ -80,6 +80,8 @@ interface RouteMeta {
     icon?: string;
     /** The tab this route belongs to, if tabs are configured */
     tab?: string;
+    /** The extracted plain-text content of the page for search indexing */
+    _content?: string;
 }
 
 declare function boltdocs(options?: BoltdocsPluginOptions): Promise<Plugin[]>;

package/dist/node/index.js

@@ -529,6 +529,7 @@ function parseDocFile(file, docsDir, basePath, config) {
   }
   const sanitizedBadge = data.badge ? data.badge : void 0;
   const icon = data.icon ? String(data.icon) : void 0;
+  const plainText = content.replace(/^#+.*$/gm, "").replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1").replace(/<[^>]+>/g, "").replace(/\{[^\}]+\}/g, "").replace(/[_*`]/g, "").replace(/\n+/g, " ").trim();
   return {
     route: {
       path: finalPath,
@@ -542,7 +543,8 @@ function parseDocFile(file, docsDir, basePath, config) {
       version,
       badge: sanitizedBadge,
       icon,
-      tab: inferredTab
+      tab: inferredTab,
+      _content: plainText
     },
     relativeDir: cleanDirName,
     isGroupIndex,
@@ -586,6 +588,7 @@ function compareByGroupPosition(a, b) {
 // src/node/routes/index.ts
 async function generateRoutes(docsDir, config, basePath = "/docs") {
   docCache.load();
+  docCache.invalidateAll();
   const files = await (0, import_fast_glob.default)(["**/*.md", "**/*.mdx"], {
     cwd: docsDir,
     absolute: true

package/dist/node/index.mjs

@@ -111,6 +111,7 @@ function parseDocFile(file, docsDir, basePath, config) {
   }
   const sanitizedBadge = data.badge ? data.badge : void 0;
   const icon = data.icon ? String(data.icon) : void 0;
+  const plainText = content.replace(/^#+.*$/gm, "").replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1").replace(/<[^>]+>/g, "").replace(/\{[^\}]+\}/g, "").replace(/[_*`]/g, "").replace(/\n+/g, " ").trim();
   return {
     route: {
       path: finalPath,
@@ -124,7 +125,8 @@ function parseDocFile(file, docsDir, basePath, config) {
       version,
       badge: sanitizedBadge,
       icon,
-      tab: inferredTab
+      tab: inferredTab,
+      _content: plainText
     },
     relativeDir: cleanDirName,
     isGroupIndex,
@@ -168,6 +170,7 @@ function compareByGroupPosition(a, b) {
 // src/node/routes/index.ts
 async function generateRoutes(docsDir, config, basePath = "/docs") {
   docCache.load();
+  docCache.invalidateAll();
   const files = await fastGlob(["**/*.md", "**/*.mdx"], {
     cwd: docsDir,
     absolute: true

package/dist/{types-CviV0GbX.d.ts → types-BbceAHA0.d.mts}

@@ -44,6 +44,8 @@ interface ComponentRoute {
     };
     /** Optional icon for the route's group */
     groupIcon?: string;
+    /** The extracted plain-text content of the page for search indexing */
+    _content?: string;
 }
 /**
  * Configuration options for initializing the Boltdocs client app.

package/dist/{types-CviV0GbX.d.mts → types-BbceAHA0.d.ts}

@@ -44,6 +44,8 @@ interface ComponentRoute {
     };
     /** Optional icon for the route's group */
     groupIcon?: string;
+    /** The extracted plain-text content of the page for search indexing */
+    _content?: string;
 }
 /**
  * Configuration options for initializing the Boltdocs client app.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boltdocs",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "A lightweight documentation generator for React projects.",
   "main": "dist/node/index.js",
   "module": "dist/node/index.mjs",

package/src/client/app/index.tsx

@@ -216,26 +216,27 @@ function ScrollHandler() {
   const { pathname, hash } = useLocation();
 
   useLayoutEffect(() => {
-    // Only scroll if we are not in a pending transition state (if we were using useTransition)
-    // For now, we ensure the scroll happens.
+    const container = document.querySelector(".boltdocs-content");
+    if (!container) return;
+
     if (hash) {
       const id = hash.replace("#", "");
       const element = document.getElementById(id);
       if (element) {
         const offset = 80;
-        const bodyRect = document.body.getBoundingClientRect().top;
+        const containerRect = container.getBoundingClientRect().top;
         const elementRect = element.getBoundingClientRect().top;
-        const elementPosition = elementRect - bodyRect;
-        const offsetPosition = elementPosition - offset;
+        const elementPosition = elementRect - containerRect;
+        const offsetPosition = elementPosition - offset + container.scrollTop;
 
-        window.scrollTo({
+        container.scrollTo({
           top: offsetPosition,
           behavior: "smooth",
         });
         return;
       }
     }
-    window.scrollTo(0, 0);
+    container.scrollTo(0, 0);
   }, [pathname, hash]);
 
   return null;

package/src/client/index.ts

@@ -30,6 +30,7 @@ export {
   List,
   FileTree,
   Table,
+  Field,
 } from "./theme/components/mdx";
 export type {
   ButtonProps,
@@ -42,4 +43,5 @@ export type {
   ListProps,
   FileTreeProps,
   TableProps,
+  FieldProps,
 } from "./theme/components/mdx";

package/src/client/theme/components/mdx/Field.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+export interface FieldProps {
+  /** The name of the property or field */
+  name: string;
+  /** The data type of the field (e.g., "string", "number", "boolean") */
+  type?: string;
+  /** The default value if not provided */
+  defaultValue?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Description or additional content */
+  children: React.ReactNode;
+  /** Optional anchor ID for linking */
+  id?: string;
+  /** Optional extra class name */
+  className?: string;
+}
+
+/**
+ * A highly aesthetic and readable component for documenting API fields/properties.
+ */
+export function Field({
+  name,
+  type,
+  defaultValue,
+  required = false,
+  children,
+  id,
+  className = "",
+}: FieldProps) {
+  return (
+    <div className={`ld-field ${className}`.trim()} id={id}>
+      <div className="ld-field__header">
+        <div className="ld-field__signature">
+          <code className="ld-field__name">{name}</code>
+          {type && (
+            <span className="ld-field__type-badge">
+              {type}
+            </span>
+          )}
+          {required && (
+            <span className="ld-field__required-badge">required</span>
+          )}
+        </div>
+        
+        {defaultValue && (
+          <div className="ld-field__default">
+            <span className="ld-field__default-label">Default:</span>
+            <code className="ld-field__default-value">{defaultValue}</code>
+          </div>
+        )}
+      </div>
+      
+      <div className="ld-field__content">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/client/theme/components/mdx/Table.tsx

@@ -1,23 +1,72 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
+import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 
 export interface TableProps {
   headers?: string[];
   data?: (string | React.ReactNode)[][];
   children?: React.ReactNode;
   className?: string;
+  sortable?: boolean;
+  paginated?: boolean;
+  pageSize?: number;
 }
 
-/**
- * A consistent, themed table component for documentation.
- * Can be used by passing structured 'headers' and 'data' props,
- * or by wrapping standard <thead>/<tbody> elements.
- */
 export function Table({
   headers,
   data,
   children,
   className = "",
+  sortable = false,
+  paginated = false,
+  pageSize = 10,
 }: TableProps) {
+  const [sortConfig, setSortConfig] = useState<{ key: number; direction: 'asc' | 'desc' } | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const processedData = useMemo(() => {
+    if (!data) return [];
+    let items = [...data];
+
+    if (sortable && sortConfig !== null) {
+      items.sort((a, b) => {
+        const aVal = a[sortConfig.key];
+        const bVal = b[sortConfig.key];
+        
+        // Simple string comparison for sorting
+        const aStr = typeof aVal === 'string' ? aVal : '';
+        const bStr = typeof bVal === 'string' ? bVal : '';
+
+        if (aStr < bStr) return sortConfig.direction === 'asc' ? -1 : 1;
+        if (aStr > bStr) return sortConfig.direction === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    return items;
+  }, [data, sortConfig, sortable]);
+
+  const totalPages = Math.ceil(processedData.length / pageSize);
+  const paginatedData = useMemo(() => {
+    if (!paginated) return processedData;
+    const start = (currentPage - 1) * pageSize;
+    return processedData.slice(start, start + pageSize);
+  }, [processedData, paginated, currentPage, pageSize]);
+
+  const requestSort = (index: number) => {
+    if (!sortable) return;
+    let direction: 'asc' | 'desc' = 'asc';
+    if (sortConfig && sortConfig.key === index && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key: index, direction });
+  };
+
+  const renderSortIcon = (index: number) => {
+    if (!sortable) return null;
+    if (sortConfig?.key !== index) return <ChevronDown size={14} className="ld-table-sort-icon ld-table-sort-icon--hidden" />;
+    return sortConfig.direction === 'asc' ? <ChevronUp size={14} className="ld-table-sort-icon" /> : <ChevronDown size={14} className="ld-table-sort-icon" />;
+  };
+
   const tableContent = children ? (
     children
   ) : (
@@ -26,14 +75,23 @@ export function Table({
         <thead>
           <tr>
             {headers.map((header, i) => (
-              <th key={i}>{header}</th>
+              <th 
+                key={i} 
+                onClick={() => requestSort(i)}
+                className={sortable ? "ld-table-header--sortable" : ""}
+              >
+                <div className="ld-table-header-content">
+                  {header}
+                  {renderSortIcon(i)}
+                </div>
+              </th>
             ))}
           </tr>
         </thead>
       )}
-      {data && (
+      {paginatedData && (
         <tbody>
-          {data.map((row, i) => (
+          {paginatedData.map((row, i) => (
             <tr key={i}>
               {row.map((cell, j) => (
                 <td key={j}>{cell}</td>
@@ -47,7 +105,47 @@ export function Table({
 
   return (
     <div className={`ld-table-container ${className}`.trim()}>
-      <table className="ld-table">{tableContent}</table>
+      <div className="ld-table-wrapper">
+        <table className="ld-table">{tableContent}</table>
+      </div>
+      
+      {paginated && totalPages > 1 && (
+        <div className="ld-table-pagination">
+          <div className="ld-table-pagination-info">
+            Page {currentPage} of {totalPages}
+          </div>
+          <div className="ld-table-pagination-controls">
+            <button 
+              onClick={() => setCurrentPage(1)} 
+              disabled={currentPage === 1}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronsLeft size={16} />
+            </button>
+            <button 
+              onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} 
+              disabled={currentPage === 1}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronLeft size={16} />
+            </button>
+            <button 
+              onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} 
+              disabled={currentPage === totalPages}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronRight size={16} />
+            </button>
+            <button 
+              onClick={() => setCurrentPage(totalPages)} 
+              disabled={currentPage === totalPages}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronsRight size={16} />
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

package/src/client/theme/components/mdx/index.ts

@@ -22,3 +22,6 @@ export type { FileTreeProps } from "./FileTree";
 
 export { Table } from "./Table";
 export type { TableProps } from "./Table";
+
+export { Field } from "./Field";
+export type { FieldProps } from "./Field";

package/src/client/theme/components/mdx/mdx-components.css

@@ -547,7 +547,13 @@
   border-radius: var(--ld-radius-lg);
   overflow: hidden;
   background: var(--ld-bg-soft);
+  display: flex;
+  flex-direction: column;
+}
+
+.ld-table-wrapper {
   overflow-x: auto;
+  scrollbar-width: thin;
 }
 
 .ld-table {
@@ -570,6 +576,36 @@
   font-size: 0.8125rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.ld-table-header--sortable {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.ld-table-header--sortable:hover {
+  background-color: var(--ld-bg-soft);
+}
+
+.ld-table-header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ld-table-sort-icon {
+  opacity: 0.8;
+  color: var(--ld-color-primary);
+  transition: opacity 0.2s;
+}
+
+.ld-table-sort-icon--hidden {
+  opacity: 0;
+}
+
+.ld-table-header--sortable:hover .ld-table-sort-icon--hidden {
+  opacity: 0.3;
 }
 
 .ld-table td {
@@ -588,3 +624,141 @@
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
 }
+
+/* Pagination */
+.ld-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: var(--ld-bg-mute);
+  border-top: 1px solid var(--ld-border-subtle);
+  font-size: 0.75rem;
+  color: var(--ld-text-dim);
+}
+
+.ld-table-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ld-table-pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--ld-radius-md);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  color: var(--ld-text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ld-table-pagination-btn:hover:not(:disabled) {
+  background: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+  border-color: var(--ld-border-strong);
+}
+
+.ld-table-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+/* ─── Field ───────────────────────────────────────────────── */
+.ld-field {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ld-field:hover {
+  border-color: var(--ld-color-primary);
+  box-shadow: 0 4px 20px -8px rgba(127, 19, 236, 0.15);
+}
+
+.ld-field__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+
+.ld-field__signature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ld-field__name {
+  font-family: var(--ld-font-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--ld-text-main);
+  background: rgba(127, 19, 236, 0.08);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: -0.01em;
+}
+
+.ld-field__type-badge {
+  font-family: var(--ld-font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ld-color-primary);
+  background: var(--ld-color-primary-muted);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--ld-radius-full);
+  border: 1px solid rgba(127, 19, 236, 0.2);
+}
+
+.ld-field__required-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--ld-ui-danger-text);
+  background: var(--ld-ui-danger-bg);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: 0.05em;
+}
+
+.ld-field__default {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.ld-field__default-label {
+  color: var(--ld-text-dim);
+  font-weight: 500;
+}
+
+.ld-field__default-value {
+  font-family: var(--ld-font-mono);
+  color: var(--ld-text-main);
+  background: var(--ld-bg-mute);
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+}
+
+.ld-field__content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ld-text-muted);
+}
+
+.ld-field__content p {
+  margin: 0;
+}

package/src/client/theme/styles/variables.css

@@ -41,7 +41,7 @@
   --ld-code-text: #1f2937;
 
   /* ─ Customization ─ */
-  --ld-navbar-bg: rgba(255, 255, 255, 0.82);
+  --ld-navbar-bg: #ffffff;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
@@ -160,4 +160,28 @@
   --ld-radius-md: 8px;
   --ld-radius-lg: 12px;
   --ld-radius-full: 9999px;
+
+  /* ─ Custom Scrollbar ─ */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ld-border-strong) transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--ld-border-strong);
+  border-radius: 20px;
+  border: transparent;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ld-text-dim);
 }

package/src/client/theme/ui/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error in Boltdocs Layout:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <div className="boltdocs-error-boundary">
+          <div className="boltdocs-error-title">Something went wrong</div>
+          <p className="boltdocs-error-message">
+            {this.state.error?.message || "An unexpected error occurred while rendering this page."}
+          </p>
+          <button 
+            className="boltdocs-error-retry"
+            onClick={() => this.setState({ hasError: false })}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/client/theme/ui/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export * from "./ErrorBoundary";

package/src/client/theme/ui/Layout/Layout.tsx

@@ -18,6 +18,8 @@ import { OnThisPage } from "../OnThisPage";
 import { Head } from "../Head";
 import { Breadcrumbs } from "../Breadcrumbs";
 import { BackgroundGradient } from "../BackgroundGradient";
+import { ProgressBar } from "../ProgressBar";
+import { ErrorBoundary } from "../ErrorBoundary";
 import "../../styles.css";
 
 export interface ThemeLayoutProps {
@@ -108,6 +110,7 @@ export function ThemeLayout({
 
   return (
     <div className={`boltdocs-layout ${className}`} style={style}>
+      <ProgressBar />
       {background !== undefined ? background : <BackgroundGradient />}
       {head !== undefined ? (
         head
@@ -142,7 +145,11 @@ export function ThemeLayout({
           ) : (
             <Breadcrumbs routes={filteredRoutes} config={config} />
           )}
-          <div className="boltdocs-page">{children}</div>
+          <div className="boltdocs-page">
+            <ErrorBoundary>
+              {children}
+            </ErrorBoundary>
+          </div>
 
           {/* Prev / Next Navigation */}
           {(prevPage || nextPage) && (