boltdocs 1.3.1 → 1.3.3

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/dist/node/index.js

@@ -57,7 +57,10 @@ function parseFrontmatter(filePath) {
   return { data, content };
 }
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&apos;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeXml(str) {
+  return escapeHtml(str);
 }
 function fileToRoutePath(relativePath) {
   let cleanedPath = relativePath.split("/").map(stripNumberPrefix).join("/");
@@ -722,26 +725,24 @@ var import_url2 = require("url");
 var import_module = require("module");
 
 // src/node/ssg/meta.ts
+init_utils();
 function replaceMetaTags(html, meta) {
-  return html.replace(/<title>.*?<\/title>/, `<title>${meta.title}</title>`).replace(
+  const title = escapeHtml(meta.title);
+  const description = escapeHtml(meta.description);
+  return html.replace(/<title>.*?<\/title>/, `<title>${title}</title>`).replace(
     /(<meta name="description" content=")[^"]*(")/,
-    `$1${meta.description}$2`
-  ).replace(
-    /(<meta property="og:title" content=")[^"]*(")/,
-    `$1${meta.title}$2`
-  ).replace(
+    `$1${description}$2`
+  ).replace(/(<meta property="og:title" content=")[^"]*(")/, `$1${title}$2`).replace(
     /(<meta property="og:description" content=")[^"]*(")/,
-    `$1${meta.description}$2`
-  ).replace(
-    /(<meta name="twitter:title" content=")[^"]*(")/,
-    `$1${meta.title}$2`
-  ).replace(
+    `$1${description}$2`
+  ).replace(/(<meta name="twitter:title" content=")[^"]*(")/, `$1${title}$2`).replace(
     /(<meta name="twitter:description" content=")[^"]*(")/,
-    `$1${meta.description}$2`
+    `$1${description}$2`
   );
 }
 
 // src/node/ssg/sitemap.ts
+init_utils();
 function generateSitemap(routePaths, config) {
   const baseUrl = config?.siteUrl?.replace(/\/$/, "") || "https://example.com";
   const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
@@ -770,7 +771,7 @@ function generateSitemap(routePaths, config) {
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 ${entries.map(
     (e) => `  <url>
-    <loc>${baseUrl}${e.url}</loc>
+    <loc>${escapeXml(baseUrl)}${escapeXml(e.url)}</loc>
     <lastmod>${today}</lastmod>
     <changefreq>${e.changefreq}</changefreq>
     <priority>${e.priority}</priority>

package/dist/node/index.mjs

@@ -3,13 +3,14 @@ import {
   TransformCache,
   capitalize,
   escapeHtml,
+  escapeXml,
   extractNumberPrefix,
   fileToRoutePath,
   isDocFile,
   normalizePath,
   parseFrontmatter,
   stripNumberPrefix
-} from "../chunk-GSYECEZY.mjs";
+} from "../chunk-CYBWLFOG.mjs";
 
 // src/node/plugin/index.ts
 import { loadEnv } from "vite";
@@ -307,21 +308,17 @@ import { createRequire } from "module";
 
 // src/node/ssg/meta.ts
 function replaceMetaTags(html, meta) {
-  return html.replace(/<title>.*?<\/title>/, `<title>${meta.title}</title>`).replace(
+  const title = escapeHtml(meta.title);
+  const description = escapeHtml(meta.description);
+  return html.replace(/<title>.*?<\/title>/, `<title>${title}</title>`).replace(
     /(<meta name="description" content=")[^"]*(")/,
-    `$1${meta.description}$2`
-  ).replace(
-    /(<meta property="og:title" content=")[^"]*(")/,
-    `$1${meta.title}$2`
-  ).replace(
+    `$1${description}$2`
+  ).replace(/(<meta property="og:title" content=")[^"]*(")/, `$1${title}$2`).replace(
     /(<meta property="og:description" content=")[^"]*(")/,
-    `$1${meta.description}$2`
-  ).replace(
-    /(<meta name="twitter:title" content=")[^"]*(")/,
-    `$1${meta.title}$2`
-  ).replace(
+    `$1${description}$2`
+  ).replace(/(<meta name="twitter:title" content=")[^"]*(")/, `$1${title}$2`).replace(
     /(<meta name="twitter:description" content=")[^"]*(")/,
-    `$1${meta.description}$2`
+    `$1${description}$2`
   );
 }
 
@@ -354,7 +351,7 @@ function generateSitemap(routePaths, config) {
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 ${entries.map(
     (e) => `  <url>
-    <loc>${baseUrl}${e.url}</loc>
+    <loc>${escapeXml(baseUrl)}${escapeXml(e.url)}</loc>
     <lastmod>${today}</lastmod>
     <changefreq>${e.changefreq}</changefreq>
     <priority>${e.priority}</priority>
@@ -433,7 +430,7 @@ async function generateStaticPages(options) {
   console.log(
     `[boltdocs] Generated ${routes.length} static pages + sitemap.xml`
   );
-  const { flushCache } = await import("../cache-EHR7SXRU.mjs");
+  const { flushCache } = await import("../cache-GQHF6BXI.mjs");
   await flushCache();
 }
 
@@ -615,7 +612,7 @@ function boltdocsPlugin(options = {}, passedConfig) {
         if (!isBuild) return;
         const outDir = viteConfig?.build?.outDir ? path4.resolve(viteConfig.root, viteConfig.build.outDir) : path4.resolve(process.cwd(), "dist");
         await generateStaticPages({ docsDir, outDir, config });
-        const { flushCache } = await import("../cache-EHR7SXRU.mjs");
+        const { flushCache } = await import("../cache-GQHF6BXI.mjs");
         await flushCache();
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boltdocs",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "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;
+  }
+};