boltdocs 1.7.0 → 1.7.1

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.7.1",
   "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/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/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,46 @@
   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;
+}

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

@@ -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) && (

package/src/client/theme/ui/Navbar/Tabs.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Link } from "../Link";
 import * as Icons from "lucide-react";
@@ -16,15 +16,40 @@ interface TabsProps {
 
 export function Tabs({ tabs, routes }: TabsProps) {
   const location = useLocation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
+    opacity: 0,
+    transform: "translateX(0) scaleX(0)",
+    width: 0,
+  });
+
   const currentRoute = routes.find((r) => r.path === location.pathname);
   const currentTabId = currentRoute?.tab?.toLowerCase();
 
+  // Find the active index - default to 0 if no tab detected
+  const activeIndex = tabs.findIndex((tab) =>
+    currentTabId ? currentTabId === tab.id.toLowerCase() : false
+  );
+  
+  const finalActiveIndex = activeIndex === -1 ? 0 : activeIndex;
+
+  useEffect(() => {
+    const activeTab = tabRefs.current[finalActiveIndex];
+    if (activeTab) {
+      setIndicatorStyle({
+        opacity: 1,
+        width: activeTab.offsetWidth,
+        transform: `translateX(${activeTab.offsetLeft}px)`,
+      });
+    }
+  }, [finalActiveIndex, tabs, location.pathname]);
+
   if (!tabs || tabs.length === 0) return null;
 
   const renderTabIcon = (iconName?: string) => {
     if (!iconName) return null;
 
-    // 1. Raw SVG
     if (iconName.trim().startsWith("<svg")) {
       return (
         <span
@@ -34,33 +59,31 @@ export function Tabs({ tabs, routes }: TabsProps) {
       );
     }
 
-    // 2. Lucide Icon
     const LucideIcon = (Icons as any)[iconName];
     if (LucideIcon) {
       return <LucideIcon size={16} className="tab-icon lucide-icon" />;
     }
 
-    // 3. Fallback to image URL
     return <img src={iconName} alt="" className="tab-icon img-icon" />;
   };
 
   return (
     <div className="boltdocs-tabs-container">
-      <div className="boltdocs-tabs">
+      <div className="boltdocs-tabs" ref={containerRef}>
         {tabs.map((tab, index) => {
-          // If no tab is detected (e.g. root home page), default to the first tab (usually "Guides")
-          const isActive = currentTabId 
-            ? currentTabId === tab.id.toLowerCase()
-            : index === 0;
-          
-          // Find the first route for this tab to link to it
-          const firstRoute = routes.find(r => r.tab && r.tab.toLowerCase() === tab.id.toLowerCase());
+          const isActive = index === finalActiveIndex;
+          const firstRoute = routes.find(
+            (r) => r.tab && r.tab.toLowerCase() === tab.id.toLowerCase()
+          );
           const linkTo = firstRoute ? firstRoute.path : "#";
 
           return (
             <Link
               key={tab.id}
               to={linkTo}
+              ref={(el) => {
+                tabRefs.current[index] = el;
+              }}
               className={`boltdocs-tab-item ${isActive ? "active" : ""}`}
             >
               {renderTabIcon(tab.icon)}
@@ -68,6 +91,8 @@ export function Tabs({ tabs, routes }: TabsProps) {
             </Link>
           );
         })}
+        {/* Sliding Indicator */}
+        <div className="boltdocs-tab-indicator" style={indicatorStyle} />
       </div>
     </div>
   );

package/src/client/theme/ui/Navbar/navbar.css

@@ -250,10 +250,22 @@
 
 /* Tabs Styles */
 .boltdocs-tabs-container {
-  border-bottom: 1px solid var(--ld-border-subtle);
+  position: relative;
   background: var(--ld-navbar-bg);
   padding: 0;
-  height: 46px; /* 102px total = 56px navbar + 46px tabs */
+  height: 46px;
+}
+
+/* Border pseudo-element to allow indicator overlap */
+.boltdocs-tabs-container::after {
+  content: "";
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--ld-border-subtle);
+  z-index: 10;
 }
 
 .boltdocs-tabs {
@@ -264,6 +276,8 @@
   overflow-x: auto;
   scrollbar-width: none;
   padding: 0 1.5rem;
+  position: relative;
+  height: 100%;
 }
 
 .boltdocs-tabs::-webkit-scrollbar {
@@ -272,7 +286,7 @@
 
 .boltdocs-tab-item {
   padding: 0.85rem 0;
-  padding-bottom: calc(0.85rem + 1px); /* avoid clipping the indicator */
+  padding-bottom: calc(0.85rem + 1px);
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--ld-text-muted);
@@ -284,6 +298,7 @@
   align-items: center;
   gap: 0.6rem;
   opacity: 0.7;
+  z-index: 20;
 }
 
 .boltdocs-tab-item:hover {
@@ -317,23 +332,16 @@
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
 }
 
-.boltdocs-tab-item::after {
-  content: "";
+.boltdocs-tab-indicator {
   position: absolute;
-  bottom: 0px;
+  bottom: 0px; /* Aligned with the border pseudo-element */
   left: 0;
-  right: 0;
   height: 3px;
-  background: var(--ld-primary);
+  background: var(--ld-color-primary);
   border-radius: 2px 2px 0 0;
-  box-shadow: 0 0 12px rgba(var(--ld-primary-rgb), 0.6);
-  opacity: 0;
-  transform: scaleX(0);
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 10;
-}
-
-.boltdocs-tab-item.active::after {
-  opacity: 1;
-  transform: scaleX(1);
+  box-shadow: 0 -2px 15px var(--ld-color-primary-glow);
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+  z-index: 100; /* Higher than border pseudo-element */
+  pointer-events: none;
+  transform-origin: left;
 }