boltdocs 1.3.2 → 1.4.0

package/dist/client/index.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 },
@@ -2627,10 +2612,46 @@ function Card({
 
 // src/client/theme/components/mdx/Tabs.tsx
 var import_react20 = require("react");
+init_CodeBlock2();
+init_npm();
+init_pnpm();
+init_bun();
+init_deno();
+
+// src/client/theme/icons/yarn.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var Yarn = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { ...props, viewBox: "0 0 256 256", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "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"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "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"
+    }
+  )
+] });
+
+// src/client/theme/components/mdx/Tabs.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Tab({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ld-tab-panel", children });
+  const content = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CodeBlock, { className: "language-bash", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("code", { children: children.trim() }) }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ld-tab-panel", children: content });
 }
+var getIconForLabel = (label) => {
+  const l = label.toLowerCase();
+  if (l.includes("npm")) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NPM, {});
+  if (l.includes("pnpm")) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pnpm, {});
+  if (l.includes("yarn")) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Yarn, {});
+  if (l.includes("bun")) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Bun, {});
+  if (l.includes("deno")) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Deno, {});
+  return null;
+};
 function Tabs({ defaultIndex = 0, children }) {
   const [active, setActive] = (0, import_react20.useState)(defaultIndex);
   const tabRefs = (0, import_react20.useRef)([]);
@@ -2649,10 +2670,11 @@ function Tabs({ defaultIndex = 0, children }) {
       tabRefs.current[newIndex]?.focus();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ld-tabs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ld-tabs__bar", role: "tablist", onKeyDown: handleKeyDown, children: tabs.map((child, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ld-tabs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ld-tabs__bar", role: "tablist", onKeyDown: handleKeyDown, children: tabs.map((child, i) => {
       const label = child.props.label;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      const Icon = getIconForLabel(label);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "button",
         {
           role: "tab",
@@ -2665,12 +2687,15 @@ function Tabs({ defaultIndex = 0, children }) {
           },
           className: `ld-tabs__trigger ${i === active ? "ld-tabs__trigger--active" : ""}`,
           onClick: () => setActive(i),
-          children: label
+          children: [
+            Icon,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: label })
+          ]
         },
         i
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: "ld-tabs__content",
@@ -2685,13 +2710,13 @@ function Tabs({ defaultIndex = 0, children }) {
 
 // src/client/theme/components/mdx/Admonition.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ICON_MAP2 = {
-  note: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.Bookmark, { size: 18 }),
-  tip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.Lightbulb, { size: 18 }),
-  info: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.Info, { size: 18 }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.AlertTriangle, { size: 18 }),
-  danger: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ShieldAlert, { size: 18 })
+  note: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Bookmark, { size: 18 }),
+  tip: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Lightbulb, { size: 18 }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Info, { size: 18 }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.AlertTriangle, { size: 18 }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.ShieldAlert, { size: 18 })
 };
 var LABEL_MAP = {
   note: "Note",
@@ -2707,35 +2732,35 @@ function Admonition({
   className = "",
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: `ld-admonition ld-admonition--${type} ${className}`.trim(),
       role: type === "warning" || type === "danger" ? "alert" : "note",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ld-admonition__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ld-admonition__icon", children: ICON_MAP2[type] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ld-admonition__title", children: title || LABEL_MAP[type] })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ld-admonition__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ld-admonition__icon", children: ICON_MAP2[type] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ld-admonition__title", children: title || LABEL_MAP[type] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ld-admonition__body", children })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ld-admonition__body", children })
       ]
     }
   );
 }
-var Note = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Admonition, { type: "note", ...props });
-var Tip = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Admonition, { type: "tip", ...props });
-var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Admonition, { type: "warning", ...props });
-var Danger = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Admonition, { type: "danger", ...props });
-var InfoBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Admonition, { type: "info", ...props });
+var Note = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Admonition, { type: "note", ...props });
+var Tip = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Admonition, { type: "tip", ...props });
+var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Admonition, { type: "warning", ...props });
+var Danger = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Admonition, { type: "danger", ...props });
+var InfoBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Admonition, { type: "info", ...props });
 
 // src/client/theme/components/mdx/List.tsx
 var import_react21 = __toESM(require("react"));
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var ICON_MAP3 = {
-  checked: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.Check, { size: 14, className: "ld-list__icon" }),
-  arrow: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react17.ChevronRight, { size: 14, className: "ld-list__icon" })
+  checked: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.Check, { size: 14, className: "ld-list__icon" }),
+  arrow: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.ChevronRight, { size: 14, className: "ld-list__icon" })
 };
 function List({
   variant = "default",
@@ -2744,14 +2769,14 @@ function List({
   ...rest
 }) {
   if (variant === "default") {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: `ld-list ${className}`.trim(), ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: `ld-list ${className}`.trim(), ...rest, children });
   }
   const icon = ICON_MAP3[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: `ld-list ld-list--${variant} ${className}`.trim(), ...rest, children: import_react21.Children.map(children, (child) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: `ld-list ld-list--${variant} ${className}`.trim(), ...rest, children: import_react21.Children.map(children, (child) => {
     if (!import_react21.default.isValidElement(child)) return child;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "ld-list__item", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "ld-list__item", children: [
       icon,
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ld-list__text", children: child.props.children })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ld-list__text", children: child.props.children })
     ] });
   }) });
 }

package/dist/client/index.mjs

@@ -9,13 +9,20 @@ import {
   Sidebar,
   ThemeLayout,
   createBoltdocsApp
-} from "../chunk-NS7WHDYA.mjs";
+} from "../chunk-D7YBQG6H.mjs";
 import {
   CodeBlock
-} from "../chunk-2YRDWM6O.mjs";
+} from "../chunk-KS5B3O6W.mjs";
 import {
   Video
 } from "../chunk-Z7JHYNAS.mjs";
+import {
+  Bun,
+  Deno,
+  NPM,
+  Pnpm
+} from "../chunk-S5G55FBI.mjs";
+import "../chunk-FMTOYQLO.mjs";
 
 // src/client/theme/components/Playground/Playground.tsx
 import React, { useState } from "react";
@@ -186,10 +193,41 @@ function Card({
 
 // src/client/theme/components/mdx/Tabs.tsx
 import { useState as useState2, Children, isValidElement, useRef } from "react";
+
+// src/client/theme/icons/yarn.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Yarn = (props) => /* @__PURE__ */ jsxs3("svg", { ...props, viewBox: "0 0 256 256", children: [
+  /* @__PURE__ */ jsx5(
+    "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"
+    }
+  ),
+  /* @__PURE__ */ jsx5(
+    "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"
+    }
+  )
+] });
+
+// src/client/theme/components/mdx/Tabs.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Tab({ children }) {
-  return /* @__PURE__ */ jsx5("div", { className: "ld-tab-panel", children });
+  const content = typeof children === "string" ? /* @__PURE__ */ jsx6(CodeBlock, { className: "language-bash", children: /* @__PURE__ */ jsx6("code", { children: children.trim() }) }) : children;
+  return /* @__PURE__ */ jsx6("div", { className: "ld-tab-panel", children: content });
 }
+var getIconForLabel = (label) => {
+  const l = label.toLowerCase();
+  if (l.includes("npm")) return /* @__PURE__ */ jsx6(NPM, {});
+  if (l.includes("pnpm")) return /* @__PURE__ */ jsx6(Pnpm, {});
+  if (l.includes("yarn")) return /* @__PURE__ */ jsx6(Yarn, {});
+  if (l.includes("bun")) return /* @__PURE__ */ jsx6(Bun, {});
+  if (l.includes("deno")) return /* @__PURE__ */ jsx6(Deno, {});
+  return null;
+};
 function Tabs({ defaultIndex = 0, children }) {
   const [active, setActive] = useState2(defaultIndex);
   const tabRefs = useRef([]);
@@ -208,10 +246,11 @@ function Tabs({ defaultIndex = 0, children }) {
       tabRefs.current[newIndex]?.focus();
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { className: "ld-tabs", children: [
-    /* @__PURE__ */ jsx5("div", { className: "ld-tabs__bar", role: "tablist", onKeyDown: handleKeyDown, children: tabs.map((child, i) => {
+  return /* @__PURE__ */ jsxs4("div", { className: "ld-tabs", children: [
+    /* @__PURE__ */ jsx6("div", { className: "ld-tabs__bar", role: "tablist", onKeyDown: handleKeyDown, children: tabs.map((child, i) => {
       const label = child.props.label;
-      return /* @__PURE__ */ jsx5(
+      const Icon = getIconForLabel(label);
+      return /* @__PURE__ */ jsxs4(
         "button",
         {
           role: "tab",
@@ -224,12 +263,15 @@ function Tabs({ defaultIndex = 0, children }) {
           },
           className: `ld-tabs__trigger ${i === active ? "ld-tabs__trigger--active" : ""}`,
           onClick: () => setActive(i),
-          children: label
+          children: [
+            Icon,
+            /* @__PURE__ */ jsx6("span", { children: label })
+          ]
         },
         i
       );
     }) }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         className: "ld-tabs__content",
@@ -250,13 +292,13 @@ import {
   ShieldAlert,
   Bookmark
 } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var ICON_MAP = {
-  note: /* @__PURE__ */ jsx6(Bookmark, { size: 18 }),
-  tip: /* @__PURE__ */ jsx6(Lightbulb, { size: 18 }),
-  info: /* @__PURE__ */ jsx6(Info, { size: 18 }),
-  warning: /* @__PURE__ */ jsx6(AlertTriangle, { size: 18 }),
-  danger: /* @__PURE__ */ jsx6(ShieldAlert, { size: 18 })
+  note: /* @__PURE__ */ jsx7(Bookmark, { size: 18 }),
+  tip: /* @__PURE__ */ jsx7(Lightbulb, { size: 18 }),
+  info: /* @__PURE__ */ jsx7(Info, { size: 18 }),
+  warning: /* @__PURE__ */ jsx7(AlertTriangle, { size: 18 }),
+  danger: /* @__PURE__ */ jsx7(ShieldAlert, { size: 18 })
 };
 var LABEL_MAP = {
   note: "Note",
@@ -272,35 +314,35 @@ function Admonition({
   className = "",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: `ld-admonition ld-admonition--${type} ${className}`.trim(),
       role: type === "warning" || type === "danger" ? "alert" : "note",
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: "ld-admonition__header", children: [
-          /* @__PURE__ */ jsx6("span", { className: "ld-admonition__icon", children: ICON_MAP[type] }),
-          /* @__PURE__ */ jsx6("span", { className: "ld-admonition__title", children: title || LABEL_MAP[type] })
+        /* @__PURE__ */ jsxs5("div", { className: "ld-admonition__header", children: [
+          /* @__PURE__ */ jsx7("span", { className: "ld-admonition__icon", children: ICON_MAP[type] }),
+          /* @__PURE__ */ jsx7("span", { className: "ld-admonition__title", children: title || LABEL_MAP[type] })
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "ld-admonition__body", children })
+        /* @__PURE__ */ jsx7("div", { className: "ld-admonition__body", children })
       ]
     }
   );
 }
-var Note = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "note", ...props });
-var Tip = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "tip", ...props });
-var Warning = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "warning", ...props });
-var Danger = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "danger", ...props });
-var InfoBox = (props) => /* @__PURE__ */ jsx6(Admonition, { type: "info", ...props });
+var Note = (props) => /* @__PURE__ */ jsx7(Admonition, { type: "note", ...props });
+var Tip = (props) => /* @__PURE__ */ jsx7(Admonition, { type: "tip", ...props });
+var Warning = (props) => /* @__PURE__ */ jsx7(Admonition, { type: "warning", ...props });
+var Danger = (props) => /* @__PURE__ */ jsx7(Admonition, { type: "danger", ...props });
+var InfoBox = (props) => /* @__PURE__ */ jsx7(Admonition, { type: "info", ...props });
 
 // src/client/theme/components/mdx/List.tsx
 import React3, { Children as Children2 } from "react";
 import { Check as Check2, ChevronRight } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var ICON_MAP2 = {
-  checked: /* @__PURE__ */ jsx7(Check2, { size: 14, className: "ld-list__icon" }),
-  arrow: /* @__PURE__ */ jsx7(ChevronRight, { size: 14, className: "ld-list__icon" })
+  checked: /* @__PURE__ */ jsx8(Check2, { size: 14, className: "ld-list__icon" }),
+  arrow: /* @__PURE__ */ jsx8(ChevronRight, { size: 14, className: "ld-list__icon" })
 };
 function List({
   variant = "default",
@@ -309,14 +351,14 @@ function List({
   ...rest
 }) {
   if (variant === "default") {
-    return /* @__PURE__ */ jsx7("ul", { className: `ld-list ${className}`.trim(), ...rest, children });
+    return /* @__PURE__ */ jsx8("ul", { className: `ld-list ${className}`.trim(), ...rest, children });
   }
   const icon = ICON_MAP2[variant];
-  return /* @__PURE__ */ jsx7("ul", { className: `ld-list ld-list--${variant} ${className}`.trim(), ...rest, children: Children2.map(children, (child) => {
+  return /* @__PURE__ */ jsx8("ul", { className: `ld-list ld-list--${variant} ${className}`.trim(), ...rest, children: Children2.map(children, (child) => {
     if (!React3.isValidElement(child)) return child;
-    return /* @__PURE__ */ jsxs5("li", { className: "ld-list__item", children: [
+    return /* @__PURE__ */ jsxs6("li", { className: "ld-list__item", children: [
       icon,
-      /* @__PURE__ */ jsx7("span", { className: "ld-list__text", children: child.props.children })
+      /* @__PURE__ */ jsx8("span", { className: "ld-list__text", children: child.props.children })
     ] });
   }) });
 }

package/dist/client/ssr.css

@@ -1061,49 +1061,47 @@ a {
   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 {
   margin: 0 !important;
@@ -1446,6 +1444,9 @@ a {
 }
 .ld-tabs__trigger {
   position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   padding: 0.65rem 1.25rem;
   background: none;
   border: none;
@@ -1458,6 +1459,10 @@ a {
   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);