boltdocs 1.4.1 → 1.6.0

package/dist/client/ssr.mjs

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

package/dist/{config-BD5ZHz15.d.mts → config-DkZg5aCf.d.mts}

@@ -54,6 +54,8 @@ interface BoltdocsThemeConfig {
     githubRepo?: string;
     /** Whether to show the 'Powered by LiteDocs' badge in the sidebar (default: true) */
     poweredBy?: boolean;
+    /** Whether to show a preview tooltip on internal links hover (default: true) */
+    linkPreview?: boolean;
     /** Granular layout customization props */
     layoutProps?: {
         navbar?: any;

package/dist/{config-BD5ZHz15.d.ts → config-DkZg5aCf.d.ts}

@@ -54,6 +54,8 @@ interface BoltdocsThemeConfig {
     githubRepo?: string;
     /** Whether to show the 'Powered by LiteDocs' badge in the sidebar (default: true) */
     poweredBy?: boolean;
+    /** Whether to show a preview tooltip on internal links hover (default: true) */
+    linkPreview?: boolean;
     /** Granular layout customization props */
     layoutProps?: {
         navbar?: any;

package/dist/node/index.d.mts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
-import { B as BoltdocsConfig } from '../config-BD5ZHz15.mjs';
-export { a as BoltdocsThemeConfig } from '../config-BD5ZHz15.mjs';
+import { B as BoltdocsConfig } from '../config-DkZg5aCf.mjs';
+export { a as BoltdocsThemeConfig } from '../config-DkZg5aCf.mjs';
 
 /**
  * Configuration options specifically for the Boltdocs Vite plugin.

package/dist/node/index.d.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
-import { B as BoltdocsConfig } from '../config-BD5ZHz15.js';
-export { a as BoltdocsThemeConfig } from '../config-BD5ZHz15.js';
+import { B as BoltdocsConfig } from '../config-DkZg5aCf.js';
+export { a as BoltdocsThemeConfig } from '../config-DkZg5aCf.js';
 
 /**
  * Configuration options specifically for the Boltdocs Vite plugin.

package/dist/node/index.js

@@ -514,7 +514,11 @@ function parseDocFile(file, docsDir, basePath, config) {
     headings.push({ level, text: escapeHtml(text), id });
   }
   const sanitizedTitle = data.title ? escapeHtml(data.title) : inferredTitle;
-  const sanitizedDescription = data.description ? escapeHtml(data.description) : "";
+  let sanitizedDescription = data.description ? escapeHtml(data.description) : "";
+  if (!sanitizedDescription && content) {
+    const summary = content.replace(/^#+.*$/gm, "").replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1").replace(/[_*`]/g, "").replace(/\n+/g, " ").trim().slice(0, 160);
+    sanitizedDescription = escapeHtml(summary);
+  }
   const sanitizedBadge = data.badge ? escapeHtml(data.badge) : void 0;
   return {
     route: {

package/dist/node/index.mjs

@@ -96,7 +96,11 @@ function parseDocFile(file, docsDir, basePath, config) {
     headings.push({ level, text: escapeHtml(text), id });
   }
   const sanitizedTitle = data.title ? escapeHtml(data.title) : inferredTitle;
-  const sanitizedDescription = data.description ? escapeHtml(data.description) : "";
+  let sanitizedDescription = data.description ? escapeHtml(data.description) : "";
+  if (!sanitizedDescription && content) {
+    const summary = content.replace(/^#+.*$/gm, "").replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1").replace(/[_*`]/g, "").replace(/\n+/g, " ").trim().slice(0, 160);
+    sanitizedDescription = escapeHtml(summary);
+  }
   const sanitizedBadge = data.badge ? escapeHtml(data.badge) : void 0;
   return {
     route: {

package/dist/{types-CvrzTbEX.d.mts → types-DGIo1VKD.d.mts}

@@ -27,6 +27,8 @@ interface ComponentRoute {
         text: string;
         id: string;
     }[];
+    /** The page summary or description */
+    description?: string;
     /** The locale this route belongs to, if i18n is configured */
     locale?: string;
     /** The version this route belongs to, if versioning is configured */

package/dist/{types-CvrzTbEX.d.ts → types-DGIo1VKD.d.ts}

@@ -27,6 +27,8 @@ interface ComponentRoute {
         text: string;
         id: string;
     }[];
+    /** The page summary or description */
+    description?: string;
     /** The locale this route belongs to, if i18n is configured */
     locale?: string;
     /** The version this route belongs to, if versioning is configured */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boltdocs",
-  "version": "1.4.1",
+  "version": "1.6.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

@@ -27,11 +27,7 @@ export function useConfig() {
   return useContext(ConfigContext);
 }
 
-const CodeBlock = lazy(() =>
-  import("../theme/components/CodeBlock").then((m) => ({
-    default: m.CodeBlock,
-  })),
-);
+import { CodeBlock } from "../theme/components/CodeBlock";
 const Video = lazy(() =>
   import("../theme/components/Video").then((m) => ({ default: m.Video })),
 );
@@ -77,13 +73,7 @@ const mdxComponents = {
   h4: (props: any) => <Heading level={4} {...props} />,
   h5: (props: any) => <Heading level={5} {...props} />,
   h6: (props: any) => <Heading level={6} {...props} />,
-  pre: (props: any) => {
-    return (
-      <Suspense fallback={<div className="code-block-skeleton" />}>
-        <CodeBlock {...props}>{props.children}</CodeBlock>
-      </Suspense>
-    );
-  },
+  pre: (props: any) => <CodeBlock {...props}>{props.children}</CodeBlock>,
   video: (props: any) => (
     <Suspense fallback={<div className="video-skeleton" />}>
       <Video {...props} />

package/src/client/app/preload.tsx

@@ -3,10 +3,12 @@ import { ComponentRoute } from "../types";
 
 interface PreloadContextType {
   preload: (path: string) => void;
+  routes: ComponentRoute[];
 }
 
 const PreloadContext = createContext<PreloadContextType>({
   preload: () => {},
+  routes: [],
 });
 
 export function usePreload() {
@@ -49,7 +51,7 @@ export function PreloadProvider({
   );
 
   return (
-    <PreloadContext.Provider value={{ preload }}>
+    <PreloadContext.Provider value={{ preload, routes }}>
       {children}
     </PreloadContext.Provider>
   );

package/src/client/index.ts

@@ -28,6 +28,7 @@ export {
   Danger,
   InfoBox,
   List,
+  FileTree,
 } from "./theme/components/mdx";
 export type {
   ButtonProps,
@@ -38,4 +39,5 @@ export type {
   TabProps,
   AdmonitionProps,
   ListProps,
+  FileTreeProps,
 } from "./theme/components/mdx";

package/src/client/theme/components/CodeBlock/CodeBlock.tsx

@@ -16,17 +16,6 @@ export function CodeBlock({ children, ...props }: CodeBlockProps) {
   const [copied, setCopied] = useState(false);
   const preRef = useRef<HTMLPreElement>(null);
 
-  // Extract language from the child <code> element's data-language or className
-  let language = "";
-  if (React.isValidElement(children)) {
-    const childProps = children.props as any;
-    language = childProps?.["data-language"] || "";
-    if (!language && childProps?.className) {
-      const match = childProps.className.match(/language-(\w+)/);
-      if (match) language = match[1];
-    }
-  }
-
   const handleCopy = useCallback(async () => {
     const code = preRef.current?.textContent || "";
     copyToClipboard(code);

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

@@ -0,0 +1,229 @@
+import React, { Children, isValidElement, useState } from "react";
+import {
+  Folder,
+  FileText,
+  File,
+  FileCode,
+  FileImage,
+  ChevronRight,
+} from "lucide-react";
+
+export interface FileTreeProps {
+  children: React.ReactNode;
+}
+
+function getTextContent(node: React.ReactNode): string {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return node.toString();
+  if (Array.isArray(node)) return node.map(getTextContent).join("");
+  if (isValidElement(node)) {
+    return getTextContent((node.props as any).children);
+  }
+  return "";
+}
+
+function getFileIcon(filename: string) {
+  const name = filename.toLowerCase();
+
+  if (
+    name.endsWith(".ts") ||
+    name.endsWith(".tsx") ||
+    name.endsWith(".js") ||
+    name.endsWith(".jsx") ||
+    name.endsWith(".json") ||
+    name.endsWith(".mjs") ||
+    name.endsWith(".cjs") ||
+    name.endsWith(".astro") ||
+    name.endsWith(".vue") ||
+    name.endsWith(".svelte")
+  ) {
+    return (
+      <FileCode size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
+    );
+  }
+
+  if (name.endsWith(".md") || name.endsWith(".mdx") || name.endsWith(".txt")) {
+    return (
+      <FileText size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
+    );
+  }
+
+  if (
+    name.endsWith(".png") ||
+    name.endsWith(".jpg") ||
+    name.endsWith(".jpeg") ||
+    name.endsWith(".svg") ||
+    name.endsWith(".gif")
+  ) {
+    return (
+      <FileImage
+        size={16}
+        strokeWidth={2}
+        className="ld-file-tree__icon-file"
+      />
+    );
+  }
+
+  return <File size={16} strokeWidth={2} className="ld-file-tree__icon-file" />;
+}
+
+// Helper to reliably check for ul and li elements, including MDX wrappers
+function isListElement(node: any, tag: "ul" | "li"): boolean {
+  if (typeof node.type === "string") {
+    return node.type === tag;
+  }
+  if (typeof node.type === "function") {
+    return node.type.name === tag || node.type.name?.toLowerCase() === tag;
+  }
+  // MDX specific wrapper detection
+  if (node.props && node.props.originalType === tag) {
+    return true;
+  }
+  if (node.props && node.props.mdxType === tag) {
+    return true;
+  }
+  return false;
+}
+
+function FolderNode({
+  labelText,
+  nestedNodes,
+  depth,
+}: {
+  labelText: string;
+  nestedNodes: React.ReactNode[];
+  depth: number;
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <li className="ld-file-tree__item">
+      <div
+        className="ld-file-tree__label ld-file-tree__label--folder"
+        onClick={() => setIsOpen(!isOpen)}
+        style={{ cursor: "pointer" }}
+      >
+        <span className="ld-file-tree__icon ld-file-tree__icon--chevron">
+          <ChevronRight
+            size={14}
+            className={`ld-file-tree__chevron ${isOpen ? "ld-file-tree__chevron--open" : ""}`}
+            strokeWidth={3}
+          />
+        </span>
+        <span className="ld-file-tree__icon">
+          <Folder
+            size={16}
+            strokeWidth={2}
+            className="ld-file-tree__icon-folder"
+            fill="currentColor"
+            fillOpacity={0.15}
+          />
+        </span>
+        <span className="ld-file-tree__name">{labelText}</span>
+      </div>
+      {isOpen && nestedNodes.length > 0 && (
+        <div className="ld-file-tree__nested">
+          {nestedNodes.map((child, index) => (
+            <React.Fragment key={index}>
+              {parseNode(child, depth)}
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+    </li>
+  );
+}
+
+function parseNode(node: React.ReactNode, depth: number = 0): React.ReactNode {
+  if (!isValidElement(node)) {
+    return node;
+  }
+
+  if (isListElement(node, "ul")) {
+    return (
+      <ul
+        className={`ld-file-tree__list ${depth === 0 ? "ld-file-tree__list--root" : ""}`}
+      >
+        {Children.map((node.props as any).children, (child, index) => (
+          <React.Fragment key={index}>
+            {parseNode(child, depth + 1)}
+          </React.Fragment>
+        ))}
+      </ul>
+    );
+  }
+
+  if (isListElement(node, "li")) {
+    const children = Children.toArray((node.props as any).children);
+
+    // Find nested list indicating a directory
+    const nestedListIndex = children.findIndex(
+      (child) => isValidElement(child) && isListElement(child, "ul"),
+    );
+    const hasNested = nestedListIndex !== -1;
+
+    // Separate text label from nested items
+    const labelNodes = hasNested
+      ? children.slice(0, nestedListIndex)
+      : children;
+    const nestedNodes = hasNested ? children.slice(nestedListIndex) : [];
+
+    const rawLabelContent = getTextContent(labelNodes).trim();
+    const isExplicitDir = rawLabelContent.endsWith("/");
+    const labelText = isExplicitDir
+      ? rawLabelContent.slice(0, -1)
+      : rawLabelContent;
+
+    const isFolder = hasNested || isExplicitDir;
+
+    if (isFolder) {
+      return (
+        <FolderNode
+          labelText={labelText}
+          nestedNodes={nestedNodes}
+          depth={depth}
+        />
+      );
+    }
+
+    return (
+      <li className="ld-file-tree__item">
+        <div className="ld-file-tree__label ld-file-tree__label--file">
+          <span className="ld-file-tree__icon ld-file-tree__icon--spacer"></span>
+          <span className="ld-file-tree__icon">{getFileIcon(labelText)}</span>
+          <span className="ld-file-tree__name">{labelText}</span>
+        </div>
+      </li>
+    );
+  }
+
+  // If node is e.g. a paragraph injected by MDX wrapping the list
+  if ((node.props as any).children) {
+    return Children.map((node.props as any).children, (child, index) => (
+      <React.Fragment key={index}>{parseNode(child, depth)}</React.Fragment>
+    ));
+  }
+
+  return node;
+}
+
+/**
+ * FileTree component displays a customized, styled tree structure for markdown lists.
+ *
+ * ```mdx
+ * <FileTree>
+ * - src/
+ *   - index.ts
+ *   - components/
+ *     - Button.tsx
+ * - package.json
+ * </FileTree>
+ * ```
+ */
+export function FileTree({ children }: FileTreeProps) {
+  return (
+    <div className="ld-file-tree" dir="ltr">
+      {Children.map(children, (child) => parseNode(child, 0))}
+    </div>
+  );
+}

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

@@ -4,7 +4,6 @@ import { NPM } from "../../icons/npm";
 import { Pnpm } from "../../icons/pnpm";
 import { Bun } from "../../icons/bun";
 import { Deno } from "../../icons/deno";
-import { Yarn } from "../../icons/yarn";
 
 /* ─── Tab (individual panel) ──────────────────────────────── */
 export interface TabProps {
@@ -43,9 +42,8 @@ export interface TabsProps {
 
 const getIconForLabel = (label: string) => {
   const l = label.toLowerCase();
-  if (l.includes("npm")) return <NPM />;
   if (l.includes("pnpm")) return <Pnpm />;
-  if (l.includes("yarn")) return <Yarn />;
+  if (l.includes("npm")) return <NPM />;
   if (l.includes("bun")) return <Bun />;
   if (l.includes("deno")) return <Deno />;
   return null;
@@ -58,7 +56,6 @@ const getIconForLabel = (label: string) => {
  * <Tabs>
  *   <Tab label="npm">npm install boltdocs</Tab>
  *   <Tab label="pnpm">pnpm add boltdocs</Tab>
- *   <Tab label="yarn">yarn add boltdocs</Tab>
  * </Tabs>
  * ```
  */

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

@@ -16,3 +16,6 @@ export type { AdmonitionProps } from "./Admonition";
 
 export { List } from "./List";
 export type { ListProps } from "./List";
+
+export { FileTree } from "./FileTree";
+export type { FileTreeProps } from "./FileTree";

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

@@ -430,3 +430,112 @@
 .ld-list--arrow .ld-list__icon {
   color: var(--ld-color-primary);
 }
+
+/* ─── FileTree ────────────────────────────────────────────── */
+.ld-file-tree {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  font-family: var(--ld-font-mono);
+  font-size: 0.875rem;
+  overflow-x: auto;
+}
+
+.ld-file-tree__list {
+  list-style: none !important;
+  margin: 0 !important;
+  padding: 0;
+  position: relative;
+}
+
+.ld-file-tree__list:not(.ld-file-tree__list--root) {
+  padding-left: 1.25rem;
+  margin-top: 0.25rem !important;
+  position: relative;
+}
+
+/* Vertical line for nested folders */
+.ld-file-tree__list:not(.ld-file-tree__list--root)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.45rem; /* align with folder icon */
+  width: 1px;
+  background-color: var(--ld-border-subtle);
+  z-index: 0;
+}
+
+.ld-file-tree__item {
+  position: relative;
+  margin: 0.2rem 0 !important;
+  padding: 0 !important;
+  display: block !important;
+}
+
+.ld-file-tree__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--ld-text-muted);
+  user-select: none;
+  border-radius: var(--ld-radius-sm);
+  padding: 0.25rem 0.6rem 0.25rem 0.4rem;
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.ld-file-tree__label:hover {
+  background: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+}
+
+.ld-file-tree__label--folder {
+  color: var(--ld-text-main);
+  font-weight: 500;
+}
+
+.ld-file-tree__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.ld-file-tree__icon-folder {
+  color: var(--ld-color-primary);
+}
+
+.ld-file-tree__name {
+  white-space: nowrap;
+}
+
+.ld-file-tree__icon--chevron {
+  width: 14px;
+  height: 14px;
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.ld-file-tree__label:hover .ld-file-tree__icon--chevron {
+  opacity: 1;
+}
+
+.ld-file-tree__chevron {
+  transition: transform 0.2s ease;
+}
+
+.ld-file-tree__chevron--open {
+  transform: rotate(90deg);
+}
+
+.ld-file-tree__icon--spacer {
+  width: 14px;
+}

package/src/client/theme/icons/pnpm.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { SVGProps } from "react";
 
 const Pnpm = (props: SVGProps<SVGSVGElement>) => (
   <svg
@@ -54,16 +54,16 @@ const Pnpm = (props: SVGProps<SVGSVGElement>) => (
         <use xlinkHref="#pnpm_dark__dqv5133G8" fill="#f9ad00" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__b1Lv79ypvm" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__b1Lv79ypvm" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__hy1IZWwLX" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__hy1IZWwLX" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__akQfjxQes" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__akQfjxQes" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__bdSrwE5pk" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__bdSrwE5pk" fill="#ffffff" />
       </g>
     </g>
   </svg>

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

@@ -218,7 +218,7 @@
   right: 0.75rem;
   z-index: 50;
   padding: 0.4rem;
-  background-color: rgba(20, 20, 30, 0.8);
+  background-color: var(--ld-surface);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid var(--ld-border-subtle);
@@ -227,14 +227,10 @@
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
 }
 
 .code-block-wrapper:hover .code-block-copy {
   opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
 }
 
 .code-block-copy:hover {