boltdocs 1.3.2 → 1.4.0

package/dist/client/ssr.js

@@ -611,7 +611,7 @@ async function getStarsRepo(repo) {
     return "0";
   }
 }
-var formatStars;
+var formatStars, copyToClipboard;
 var init_utils = __esm({
   "src/client/utils.ts"() {
     "use strict";
@@ -621,6 +621,22 @@ var init_utils = __esm({
         compactDisplay: "short"
       }).format(count);
     };
+    copyToClipboard = async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+        return true;
+      }
+    };
   }
 });
 
@@ -1703,37 +1719,20 @@ function CodeBlock({ children, ...props }) {
   }
   const handleCopy = (0, import_react13.useCallback)(async () => {
     const code = preRef.current?.textContent || "";
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = code;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
+    copyToClipboard(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "code-block-wrapper", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "code-block-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "code-block-lang", children: language || "code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        "button",
-        {
-          className: `code-block-copy ${copied ? "copied" : ""}`,
-          onClick: handleCopy,
-          type: "button",
-          "aria-label": "Copy code",
-          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.Check, { size: 20 }) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.Copy, { size: 20 }) })
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "button",
+      {
+        className: `code-block-copy ${copied ? "copied" : ""}`,
+        onClick: handleCopy,
+        "aria-label": "Copy code",
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.Copy, { size: 16 })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { ref: preRef, ...props, children })
   ] });
 }
@@ -1743,6 +1742,7 @@ var init_CodeBlock = __esm({
     "use strict";
     import_react13 = __toESM(require("react"));
     import_lucide_react12 = require("lucide-react");
+    init_utils();
     import_jsx_runtime20 = require("react/jsx-runtime");
   }
 });
@@ -2099,22 +2099,9 @@ function PackageManagerTabs({
   const [copied, setCopied] = (0, import_react15.useState)(false);
   const activeCommand = getCommandForManager(activeTab, command, pkg);
   const handleCopy = (0, import_react15.useCallback)(async () => {
-    try {
-      await navigator.clipboard.writeText(activeCommand);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = activeCommand;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
+    copyToClipboard(activeCommand);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
   }, [activeCommand]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `pkg-tabs-wrapper ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pkg-tabs-header", children: MANAGERS.map((mgr) => {
@@ -2136,19 +2123,16 @@ function PackageManagerTabs({
       );
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "code-block-wrapper pkg-tabs-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "code-block-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "code-block-lang", children: "bash" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          "button",
-          {
-            className: `code-block-copy ${copied ? "copied" : ""}`,
-            onClick: handleCopy,
-            type: "button",
-            "aria-label": "Copy code",
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.Check, { size: 12 }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.Copy, { size: 12 }) })
-          }
-        )
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "button",
+        {
+          className: `code-block-copy ${copied ? "copied" : ""}`,
+          onClick: handleCopy,
+          type: "button",
+          "aria-label": "Copy code",
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.Copy, { size: 14 })
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("code", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "line", children: activeCommand }) }) })
     ] })
   ] });
@@ -2163,6 +2147,7 @@ var init_PackageManagerTabs = __esm({
     init_pnpm();
     init_bun();
     init_deno();
+    init_utils();
     import_jsx_runtime26 = require("react/jsx-runtime");
     MANAGERS = [
       { id: "npm", label: "npm", icon: NPM },

package/dist/client/ssr.mjs

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

package/package.json

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

package/src/client/index.ts

@@ -1,5 +1,6 @@
 export type { BoltdocsConfig, BoltdocsThemeConfig } from "../node/config";
 export type { ComponentRoute, CreateBoltdocsAppOptions } from "./types";
+import { PackageManagerTabs } from "./theme/components/PackageManagerTabs";
 export { createBoltdocsApp } from "./app";
 export { ThemeLayout } from "./theme/ui/Layout";
 export { Navbar } from "./theme/ui/Navbar";

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

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useCallback } from "react";
 import { Copy, Check } from "lucide-react";
+import { copyToClipboard } from "../../../utils";
 
 interface CodeBlockProps {
   children?: React.ReactNode;
@@ -28,46 +29,20 @@ export function CodeBlock({ children, ...props }: CodeBlockProps) {
 
   const handleCopy = useCallback(async () => {
     const code = preRef.current?.textContent || "";
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback
-      const textarea = document.createElement("textarea");
-      textarea.value = code;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
+    copyToClipboard(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
   }, []);
 
   return (
     <div className="code-block-wrapper">
-      <div className="code-block-header">
-        <span className="code-block-lang">{language || "code"}</span>
-        <button
-          className={`code-block-copy ${copied ? "copied" : ""}`}
-          onClick={handleCopy}
-          type="button"
-          aria-label="Copy code"
-        >
-          {copied ? (
-            <>
-              <Check size={20} />
-            </>
-          ) : (
-            <>
-              <Copy size={20} />
-            </>
-          )}
-        </button>
-      </div>
+      <button
+        className={`code-block-copy ${copied ? "copied" : ""}`}
+        onClick={handleCopy}
+        aria-label="Copy code"
+      >
+        {copied ? <Check size={16} /> : <Copy size={16} />}
+      </button>
       <pre ref={preRef} {...props}>
         {children}
       </pre>

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

@@ -4,6 +4,7 @@ import { NPM } from "../../icons/npm";
 import { Pnpm } from "../../icons/pnpm";
 import { Bun } from "../../icons/bun";
 import { Deno } from "../../icons/deno";
+import { copyToClipboard } from "../../../utils";
 
 interface PackageManagerTabsProps {
   command: string;
@@ -82,22 +83,9 @@ export function PackageManagerTabs({
   const activeCommand = getCommandForManager(activeTab, command, pkg);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(activeCommand);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = activeCommand;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
+    copyToClipboard(activeCommand);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
   }, [activeCommand]);
 
   return (
@@ -124,25 +112,14 @@ export function PackageManagerTabs({
 
       {/* Code Block Content */}
       <div className="code-block-wrapper pkg-tabs-content">
-        <div className="code-block-header">
-          <span className="code-block-lang">bash</span>
-          <button
-            className={`code-block-copy ${copied ? "copied" : ""}`}
-            onClick={handleCopy}
-            type="button"
-            aria-label="Copy code"
-          >
-            {copied ? (
-              <>
-                <Check size={12} />
-              </>
-            ) : (
-              <>
-                <Copy size={12} />
-              </>
-            )}
-          </button>
-        </div>
+        <button
+          className={`code-block-copy ${copied ? "copied" : ""}`}
+          onClick={handleCopy}
+          type="button"
+          aria-label="Copy code"
+        >
+          {copied ? <Check size={14} /> : <Copy size={14} />}
+        </button>
         <pre>
           <code>
             <span className="line">{activeCommand}</span>

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

@@ -1,4 +1,10 @@
 import React, { useState, Children, isValidElement, useRef } from "react";
+import { CodeBlock } from "../CodeBlock";
+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 {
@@ -15,7 +21,17 @@ export interface TabProps {
  * ```
  */
 export function Tab({ children }: TabProps) {
-  return <div className="ld-tab-panel">{children}</div>;
+  // If children is a simple string, wrap it in a CodeBlock for syntax highlighting
+  const content =
+    typeof children === "string" ? (
+      <CodeBlock className="language-bash">
+        <code>{children.trim()}</code>
+      </CodeBlock>
+    ) : (
+      children
+    );
+
+  return <div className="ld-tab-panel">{content}</div>;
 }
 
 /* ─── Tabs (container) ────────────────────────────────────── */
@@ -25,6 +41,16 @@ export interface TabsProps {
   children: React.ReactNode;
 }
 
+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("bun")) return <Bun />;
+  if (l.includes("deno")) return <Deno />;
+  return null;
+};
+
 /**
  * Tab container that manages active state.
  *
@@ -64,6 +90,7 @@ export function Tabs({ defaultIndex = 0, children }: TabsProps) {
       <div className="ld-tabs__bar" role="tablist" onKeyDown={handleKeyDown}>
         {tabs.map((child, i) => {
           const label = (child as React.ReactElement<TabProps>).props.label;
+          const Icon = getIconForLabel(label);
           return (
             <button
               key={i}
@@ -72,11 +99,16 @@ export function Tabs({ defaultIndex = 0, children }: TabsProps) {
               aria-controls={`tabpanel-${i}`}
               id={`tab-${i}`}
               tabIndex={i === active ? 0 : -1}
-              ref={(el) => { tabRefs.current[i] = el; }}
-              className={`ld-tabs__trigger ${i === active ? "ld-tabs__trigger--active" : ""}`}
+              ref={(el) => {
+                tabRefs.current[i] = el;
+              }}
+              className={`ld-tabs__trigger ${
+                i === active ? "ld-tabs__trigger--active" : ""
+              }`}
               onClick={() => setActive(i)}
             >
-              {label}
+              {Icon}
+              <span>{label}</span>
             </button>
           );
         })}

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

@@ -276,6 +276,9 @@
 
 .ld-tabs__trigger {
   position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   padding: 0.65rem 1.25rem;
   background: none;
   border: none;
@@ -288,6 +291,11 @@
   transition: all 0.2s ease;
   white-space: nowrap;
 }
+
+.ld-tabs__trigger svg {
+  width: 1rem;
+  height: 1rem;
+}
 .ld-tabs__trigger:hover {
   color: var(--ld-text-main);
   background-color: rgba(255, 255, 255, 0.03);

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

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const Yarn = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 256">
+    <path
+      fill="#2C8EBB"
+      d="M128 0C57.307 0 0 57.307 0 128s57.307 128 128 128 128-57.307 128-128S198.693 0 128 0zm0 234.667C69.195 234.667 21.333 186.805 21.333 128S69.195 21.333 128 21.333 234.667 69.195 234.667 128 186.805 234.667 128 234.667z"
+    />
+    <path
+      fill="#2C8EBB"
+      d="M173.045 74.053c-4.632-4.632-12.144-4.632-16.776 0L128 102.323l-28.269-28.27c-4.632-4.632-12.144-4.632-16.776 0-4.632 4.632-4.632 12.144 0 16.776L111.224 119.1l-28.269 28.269c-4.632 4.632-4.632 12.144 0 16.776 2.316 2.316 5.352 3.474 8.388 3.474s6.072-1.158 8.388-3.474L128 135.877l28.269 28.268c2.316 2.316 5.352 3.474 8.388 3.474s6.072-1.158 8.388-3.474c4.632-4.632 4.632-12.144 0-16.776L144.776 119.1l28.269-28.271 c4.632-4.632 4.632-12.144 0-16.776z"
+    />
+  </svg>
+);
+
+export { Yarn };

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

@@ -206,55 +206,52 @@
   overflow: hidden;
   border: 1px solid var(--ld-border-subtle);
   background-color: var(--ld-code-bg);
-}
-
-.code-block-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1.25rem;
-  background-color: var(--ld-code-header);
-  border-bottom: 1px solid var(--ld-border-subtle);
-  font-size: 0.75rem;
-}
-
-.code-block-lang {
-  color: var(--ld-text-dim);
-  font-family: var(--ld-font-mono);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  position: relative;
 }
 
 .code-block-copy {
   display: flex;
   align-items: center;
-  gap: 0.35rem;
-  padding: 0.2rem 0.55rem;
-  background: none;
+  justify-content: center;
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 50;
+  padding: 0.4rem;
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   border: 1px solid var(--ld-border-subtle);
-  border-radius: 5px;
+  border-radius: 6px;
   color: var(--ld-text-dim);
-  font-family: var(--ld-font-sans);
-  font-size: 0.6875rem;
   cursor: pointer;
-  transition: all 0.2s;
+  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 {
   color: var(--ld-text-main);
   border-color: var(--ld-border-strong);
-  background-color: rgba(255, 255, 255, 0.04);
+  background-color: rgba(255, 255, 255, 0.08);
 }
 
 .code-block-copy.copied {
   color: #22c55e;
-  border-color: rgba(34, 197, 94, 0.3);
+  border-color: rgba(34, 197, 94, 0.4);
+  opacity: 1;
 }
 
 .code-block-copy svg {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .code-block-wrapper pre {

package/src/client/utils.ts

@@ -24,3 +24,26 @@ const formatStars = (count: number): string => {
     compactDisplay: "short",
   }).format(count);
 };
+
+/**
+ * Copy text to clipboard.
+ * @param text - The text to copy.
+ * @returns True if the text was copied successfully.
+ */
+export const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Fallback
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return true;
+  }
+};

package/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "ES2022",
         "module": "ESNext",
-        "moduleResolution": "Node",
+        "moduleResolution": "Bundler",
         "esModuleInterop": true,
         "strict": true,
         "skipLibCheck": true,

package/dist/CodeBlock-V3Z5EKGR.mjs

@@ -1,6 +0,0 @@
-import {
-  CodeBlock
-} from "./chunk-2YRDWM6O.mjs";
-export {
-  CodeBlock
-};

package/dist/chunk-2YRDWM6O.mjs

@@ -1,56 +0,0 @@
-// src/client/theme/components/CodeBlock/CodeBlock.tsx
-import React, { useState, useRef, useCallback } from "react";
-import { Copy, Check } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function CodeBlock({ children, ...props }) {
-  const [copied, setCopied] = useState(false);
-  const preRef = useRef(null);
-  let language = "";
-  if (React.isValidElement(children)) {
-    const childProps = children.props;
-    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 || "";
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = code;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
-  }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "code-block-wrapper", children: [
-    /* @__PURE__ */ jsxs("div", { className: "code-block-header", children: [
-      /* @__PURE__ */ jsx("span", { className: "code-block-lang", children: language || "code" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: `code-block-copy ${copied ? "copied" : ""}`,
-          onClick: handleCopy,
-          type: "button",
-          "aria-label": "Copy code",
-          children: copied ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Check, { size: 20 }) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Copy, { size: 20 }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("pre", { ref: preRef, ...props, children })
-  ] });
-}
-
-export {
-  CodeBlock
-};