fumadocs-core 15.2.8 → 16.0.3

package/dist/mdx-plugins/index.js

@@ -1,17 +1,12 @@
 import {
-  flattenNode,
-  remarkHeading
-} from "../chunk-Y2774T3B.js";
-import {
-  joinPath,
-  slash
-} from "../chunk-XMCPKVJQ.js";
-import {
-  createStyleTransformer,
   defaultThemes,
   getHighlighter
-} from "../chunk-BUCUQ3WX.js";
-import "../chunk-MLKGABMK.js";
+} from "../chunk-XN2LKXFZ.js";
+import {
+  flattenNode,
+  remarkHeading
+} from "../chunk-QMATWJ5F.js";
+import "../chunk-U67V476Y.js";
 
 // src/mdx-plugins/index.ts
 import {
@@ -22,6 +17,7 @@ import {
 import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
 import {
   transformerNotationDiff,
+  transformerNotationFocus,
   transformerNotationHighlight,
   transformerNotationWordHighlight
 } from "@shikijs/transformers";
@@ -165,36 +161,101 @@ function transformerIcon(options = {}) {
       const iconName = lang in shortcuts ? shortcuts[lang] : lang;
       const icon = iconName in icons ? icons[iconName] : defaultIcon;
       if (icon) {
-        pre.properties.icon = `<svg viewBox="${icon.viewBox}"><path d="${icon.d}" fill="${icon.fill}" /></svg>`;
+        pre.properties.icon = typeof icon === "string" ? icon : `<svg viewBox="${icon.viewBox}"><path d="${icon.d}" fill="${icon.fill}" /></svg>`;
       }
       return pre;
     }
   };
 }
 
-// src/mdx-plugins/rehype-code.ts
-var metaValues = [
-  {
-    name: "title",
-    regex: /title="(?<value>[^"]*)"/
-  },
-  {
-    name: "custom",
-    regex: /custom="(?<value>[^"]+)"/
-  },
-  {
-    name: "tab",
-    regex: /tab="(?<value>[^"]+)"/
+// src/mdx-plugins/codeblock-utils.ts
+function generateCodeBlockTabs({
+  persist = false,
+  defaultValue,
+  triggers,
+  tabs,
+  ...options
+}) {
+  const attributes = [];
+  if (options.attributes) attributes.push(...options.attributes);
+  if (defaultValue) {
+    attributes.push({
+      type: "mdxJsxAttribute",
+      name: "defaultValue",
+      value: defaultValue
+    });
+  }
+  if (typeof persist === "object") {
+    attributes.push(
+      {
+        type: "mdxJsxAttribute",
+        name: "groupId",
+        value: persist.id
+      },
+      {
+        type: "mdxJsxAttribute",
+        name: "persist",
+        value: null
+      }
+    );
+  }
+  const children = [
+    {
+      type: "mdxJsxFlowElement",
+      name: "CodeBlockTabsList",
+      attributes: [],
+      children: triggers.map(
+        (trigger) => ({
+          type: "mdxJsxFlowElement",
+          attributes: [
+            { type: "mdxJsxAttribute", name: "value", value: trigger.value }
+          ],
+          name: "CodeBlockTabsTrigger",
+          children: trigger.children
+        })
+      )
+    }
+  ];
+  for (const tab of tabs) {
+    children.push({
+      type: "mdxJsxFlowElement",
+      name: "CodeBlockTab",
+      attributes: [
+        { type: "mdxJsxAttribute", name: "value", value: tab.value }
+      ],
+      children: tab.children
+    });
   }
-];
+  return {
+    type: "mdxJsxFlowElement",
+    name: "CodeBlockTabs",
+    attributes,
+    children
+  };
+}
+function parseCodeBlockAttributes(meta, allowedNames) {
+  let str = meta;
+  const StringRegex = /(?<=^|\s)(?<name>\w+)(?:=(?:"([^"]*)"|'([^']*)'))?/g;
+  const attributes = {};
+  str = str.replaceAll(StringRegex, (match, name, value_1, value_2) => {
+    if (allowedNames && !allowedNames.includes(name)) return match;
+    attributes[name] = value_1 ?? value_2 ?? null;
+    return "";
+  });
+  return {
+    rest: str,
+    attributes
+  };
+}
+
+// src/mdx-plugins/rehype-code.ts
 var rehypeCodeDefaultOptions = {
   lazy: true,
   themes: defaultThemes,
   defaultColor: false,
   defaultLanguage: "plaintext",
-  experimentalJSEngine: false,
+  engine: "js",
   transformers: [
-    createStyleTransformer(),
     transformerNotationHighlight({
       matchAlgorithm: "v3"
     }),
@@ -203,21 +264,27 @@ var rehypeCodeDefaultOptions = {
     }),
     transformerNotationDiff({
       matchAlgorithm: "v3"
+    }),
+    transformerNotationFocus({
+      matchAlgorithm: "v3"
     })
   ],
   parseMetaString(meta) {
-    const map = {};
-    for (const value of metaValues) {
-      meta = meta.replace(value.regex, (_, ...args) => {
-        const first = args.at(0);
-        map[value.name] = typeof first === "string" ? first : "";
-        return "";
-      });
-    }
-    map.__parsed_raw = meta;
-    return map;
+    const parsed = parseCodeBlockAttributes(meta, ["title", "tab"]);
+    const data = parsed.attributes;
+    parsed.rest = parseLineNumber(parsed.rest, data);
+    data.__parsed_raw = parsed.rest;
+    return data;
   }
 };
+function parseLineNumber(str, data) {
+  return str.replace(/lineNumbers=(\d+)|lineNumbers/, (_, ...args) => {
+    data["data-line-numbers"] = true;
+    if (args[0] !== void 0)
+      data["data-line-numbers-start"] = Number(args[0]);
+    return "";
+  });
+}
 function rehypeCode(_options = {}) {
   const options = {
     ...rehypeCodeDefaultOptions,
@@ -243,13 +310,11 @@ function rehypeCode(_options = {}) {
   if (options.tab !== false) {
     transformers.push(transformerTab());
   }
-  const highlighter = getHighlighter(
-    options.experimentalJSEngine ? "js" : "oniguruma",
-    {
-      themes: "themes" in options ? Object.values(options.themes).filter(Boolean) : [options.theme],
-      langs: options.langs ?? (options.lazy ? [] : Object.keys(bundledLanguages))
-    }
-  );
+  const highlighter = getHighlighter(options.engine ?? "js", {
+    themes: "themes" in options ? Object.values(options.themes).filter(Boolean) : [options.theme],
+    langs: options.langs ?? (options.lazy ? ["ts", "tsx"] : Object.keys(bundledLanguages)),
+    langAlias: options.langAlias
+  });
   const transformer = highlighter.then(
     (loaded) => rehypeShikiFromHighlighter(loaded, {
       ...options,
@@ -268,6 +333,9 @@ function transformerTab() {
     root(root) {
       const value = this.options.meta?.tab;
       if (typeof value !== "string") return root;
+      console.warn(
+        '[Fumadocs] For `tab="value" in codeblocks, please use `remarkCodeTab` plugin instead.'
+      );
       return {
         type: "root",
         children: [
@@ -287,78 +355,38 @@ function transformerTab() {
 }
 
 // src/mdx-plugins/remark-image.ts
-import * as path from "node:path";
+import * as path from "path";
 import { visit } from "unist-util-visit";
 import { imageSize } from "image-size";
 import { imageSizeFromFile } from "image-size/fromFile";
+import { fileURLToPath } from "url";
 var VALID_BLUR_EXT = [".jpeg", ".png", ".webp", ".avif", ".jpg"];
 var EXTERNAL_URL_REGEX = /^https?:\/\//;
 function remarkImage({
   placeholder = "blur",
   external = true,
   useImport = true,
+  onError = "error",
   publicDir = path.join(process.cwd(), "public")
 } = {}) {
   return async (tree, file) => {
     const importsToInject = [];
     const promises = [];
-    function getImportPath(src) {
-      if (!src.startsWith("/")) return src;
-      const to = path.join(publicDir, src);
-      if (file.dirname) {
-        const relative2 = slash(path.relative(file.dirname, to));
-        return relative2.startsWith("./") ? relative2 : `./${relative2}`;
-      }
-      return slash(to);
-    }
-    visit(tree, "image", (node) => {
-      const url = decodeURI(node.url);
-      if (!url) return;
-      const isExternal = EXTERNAL_URL_REGEX.test(url);
-      if (isExternal && external || !useImport) {
-        const task = getImageSize(url, publicDir).then((size) => {
-          if (!size.width || !size.height) return;
-          Object.assign(node, {
-            type: "mdxJsxFlowElement",
-            name: "img",
-            attributes: [
-              {
-                type: "mdxJsxAttribute",
-                name: "alt",
-                value: node.alt ?? "image"
-              },
-              {
-                type: "mdxJsxAttribute",
-                name: "src",
-                value: url
-              },
-              {
-                type: "mdxJsxAttribute",
-                name: "width",
-                value: size.width.toString()
-              },
-              {
-                type: "mdxJsxAttribute",
-                name: "height",
-                value: size.height.toString()
-              }
-            ]
-          });
-        }).catch((e) => {
-          console.error(
-            `[Remark Image] Failed obtain image size for ${url} with public directory ${publicDir}`
+    async function onImage(src, node) {
+      if (src.type === "file" && useImport) {
+        const variableName = `__img${importsToInject.length}`;
+        const hasBlur = placeholder === "blur" && VALID_BLUR_EXT.some((ext) => src.file.endsWith(ext));
+        if (!file.dirname) {
+          throw new Error(
+            "When `useImport` is enabled, you must specify `dirname` in the VFile passed to compiler."
           );
-          throw e;
-        });
-        promises.push(task);
-      } else if (!isExternal) {
-        const variableName = `__img${importsToInject.length.toString()}`;
-        const hasBlur = placeholder === "blur" && VALID_BLUR_EXT.some((ext) => url.endsWith(ext));
+        }
         importsToInject.push({
           variableName,
-          importPath: getImportPath(url)
+          importPath: getImportPath(src.file, file.dirname)
         });
-        Object.assign(node, {
+        const out = {
+          children: [],
           type: "mdxJsxFlowElement",
           name: "img",
           attributes: [
@@ -367,11 +395,6 @@ function remarkImage({
               name: "alt",
               value: node.alt ?? "image"
             },
-            hasBlur && {
-              type: "mdxJsxAttribute",
-              name: "placeholder",
-              value: "blur"
-            },
             {
               type: "mdxJsxAttribute",
               name: "src",
@@ -385,14 +408,83 @@ function remarkImage({
                         type: "ExpressionStatement",
                         expression: { type: "Identifier", name: variableName }
                       }
-                    ]
+                    ],
+                    type: "Program",
+                    sourceType: "script"
                   }
                 }
               }
             }
-          ].filter(Boolean)
-        });
+          ]
+        };
+        if (hasBlur) {
+          out.attributes.push({
+            type: "mdxJsxAttribute",
+            name: "placeholder",
+            value: "blur"
+          });
+        }
+        return out;
       }
+      if (src.type === "url" && !external) return;
+      const size = await getImageSize(src).catch((e) => {
+        throw new Error(
+          `[Remark Image] Failed obtain image size for ${node.url} (public directory configured as ${publicDir})`,
+          {
+            cause: e
+          }
+        );
+      });
+      return {
+        type: "mdxJsxFlowElement",
+        name: "img",
+        attributes: [
+          {
+            type: "mdxJsxAttribute",
+            name: "alt",
+            value: node.alt ?? "image"
+          },
+          {
+            type: "mdxJsxAttribute",
+            name: "src",
+            // `src` doesn't support file paths, we can use `node.url` for files and let the underlying framework handle it
+            value: src.type === "url" ? src.url.toString() : node.url
+          },
+          {
+            type: "mdxJsxAttribute",
+            name: "width",
+            value: size.width.toString()
+          },
+          {
+            type: "mdxJsxAttribute",
+            name: "height",
+            value: size.height.toString()
+          }
+        ],
+        children: []
+      };
+    }
+    visit(tree, "image", (node) => {
+      const src = parseSrc(decodeURI(node.url), publicDir, file.dirname);
+      if (!src) return;
+      const task = onImage(src, node).catch((e) => {
+        if (onError === "ignore" || node.url.endsWith(".svg")) {
+          return;
+        }
+        if (onError === "hide") {
+          return {
+            type: "mdxJsxFlowElement",
+            name: null,
+            attributes: [],
+            children: []
+          };
+        }
+        if (onError === "error") throw e;
+        onError(e);
+      }).then((res) => {
+        if (res) Object.assign(node, res);
+      });
+      promises.push(task);
     });
     await Promise.all(promises);
     if (importsToInject.length === 0) return;
@@ -420,20 +512,53 @@ function remarkImage({
     tree.children.unshift(...imports);
   };
 }
-async function getImageSize(src, dir) {
-  const isRelative = src.startsWith("/") || !path.isAbsolute(src);
-  let url;
+function getImportPath(file, dir) {
+  const relative2 = path.relative(dir, file).replaceAll(path.sep, "/");
+  return relative2.startsWith("../") ? relative2 : `./${relative2}`;
+}
+function parseSrc(src, publicDir, dir) {
+  if (src.startsWith("file:///"))
+    return { type: "file", file: fileURLToPath(src) };
   if (EXTERNAL_URL_REGEX.test(src)) {
-    url = src;
-  } else if (EXTERNAL_URL_REGEX.test(dir) && isRelative) {
-    const base = new URL(dir);
-    base.pathname = joinPath(base.pathname, src);
-    url = base.toString();
-  } else {
-    return imageSizeFromFile(isRelative ? path.join(dir, src) : src);
+    return {
+      type: "url",
+      url: new URL(src)
+    };
+  }
+  if (src.startsWith("/")) {
+    if (EXTERNAL_URL_REGEX.test(publicDir)) {
+      const url = new URL(publicDir);
+      const segs = [...url.pathname.split("/"), ...src.split("/")].filter(
+        (v) => v.length > 0
+      );
+      url.pathname = `/${segs.join("/")}`;
+      return { type: "url", url };
+    }
+    return {
+      type: "file",
+      file: path.join(publicDir, src)
+    };
+  }
+  if (!dir) {
+    console.warn(
+      `[Remark Image] found relative path ${src} but missing 'dirname' in VFile, this image will be skipped for now.`
+    );
+    return;
   }
-  const buffer = await fetch(url).then((res) => res.arrayBuffer());
-  return imageSize(new Uint8Array(buffer));
+  return {
+    type: "file",
+    file: path.join(dir, src)
+  };
+}
+async function getImageSize(src) {
+  if (src.type === "file") return imageSizeFromFile(src.file);
+  const res = await fetch(src.url);
+  if (!res.ok) {
+    throw new Error(
+      `[Remark Image] Failed to fetch ${src.url} (${res.status}): ${await res.text()}`
+    );
+  }
+  return imageSize(new Uint8Array(await res.arrayBuffer()));
 }
 
 // src/mdx-plugins/remark-structure.ts
@@ -441,7 +566,6 @@ import Slugger from "github-slugger";
 import { remark } from "remark";
 import remarkGfm from "remark-gfm";
 import { visit as visit2 } from "unist-util-visit";
-var slugger = new Slugger();
 function remarkStructure({
   types = [
     "heading",
@@ -450,8 +574,12 @@ function remarkStructure({
     "tableCell",
     "mdxJsxFlowElement"
   ],
-  allowedMdxAttributes = () => true
+  allowedMdxAttributes = (node) => {
+    if (!node.name) return false;
+    return ["TypeTable", "Callout"].includes(node.name);
+  }
 } = {}) {
+  const slugger = new Slugger();
   if (Array.isArray(allowedMdxAttributes)) {
     const arr = allowedMdxAttributes;
     allowedMdxAttributes = (_node, attribute) => attribute.type === "mdxJsxAttribute" && arr.includes(attribute.name);
@@ -463,7 +591,7 @@ function remarkStructure({
   return (node, file) => {
     slugger.reset();
     const data = { contents: [], headings: [] };
-    let lastHeading = "";
+    let lastHeading;
     if (file.data.frontmatter) {
       const frontmatter = file.data.frontmatter;
       if (frontmatter._openapi?.structuredData) {
@@ -498,18 +626,14 @@ function remarkStructure({
       }
       if (element.type === "mdxJsxFlowElement" && element.name) {
         data.contents.push(
-          {
-            heading: lastHeading,
-            content: element.name
-          },
           ...element.attributes.flatMap((attribute) => {
-            const valueStr = typeof attribute.value === "string" ? attribute.value : attribute.value?.value;
-            if (!valueStr) return [];
+            const value = typeof attribute.value === "string" ? attribute.value : attribute.value?.value;
+            if (!value || value.length === 0) return [];
             if (allowedMdxAttributes && !allowedMdxAttributes(element, attribute))
               return [];
             return {
               heading: lastHeading,
-              content: attribute.type === "mdxJsxAttribute" ? `${attribute.name}: ${valueStr}` : valueStr
+              content: attribute.type === "mdxJsxAttribute" ? `${attribute.name}: ${value}` : value
             };
           })
         );
@@ -620,7 +744,7 @@ function rehypeToc({ exportToc = true } = {}) {
     const output = [];
     visit4(tree, ["h1", "h2", "h3", "h4", "h5", "h6"], (element) => {
       const id = element.properties.id;
-      if (!id) return "skip";
+      if (typeof id !== "string") return "skip";
       let isTocOnly = false;
       const last = element.children.at(-1);
       if (last?.type === "text" && last.value.endsWith(TocOnlyTag)) {
@@ -740,91 +864,215 @@ function rehypeToc({ exportToc = true } = {}) {
 
 // src/mdx-plugins/remark-code-tab.ts
 import { visit as visit5 } from "unist-util-visit";
-var TabRegex = /tab="(.+?)"/;
-function toTab(nodes) {
-  const names = nodes.map((node, i) => {
-    let title = `Tab ${i + 1}`;
-    node.meta = node.meta?.replace(TabRegex, (_, value) => {
-      title = value;
-      return "";
-    });
-    return title;
-  });
-  const itemsArr = {
-    type: "ExpressionStatement",
-    expression: {
-      type: "ArrayExpression",
-      elements: names.map((name) => ({
-        type: "Literal",
-        value: name
-      }))
-    }
-  };
-  return {
-    type: "mdxJsxFlowElement",
-    name: "Tabs",
-    attributes: [
-      {
-        type: "mdxJsxAttribute",
-        name: "items",
-        value: {
-          type: "mdxJsxAttributeValueExpression",
-          data: {
-            estree: {
-              type: "Program",
-              sourceType: "module",
-              comments: [],
-              body: [itemsArr]
+var Tabs = {
+  convert(processor, nodes, withMdx = false, withParent = true) {
+    const tabs = Array.from(processTabValue(nodes).entries());
+    if (!withMdx) {
+      const children2 = tabs.map(([name, codes]) => {
+        return {
+          type: "mdxJsxFlowElement",
+          name: "Tab",
+          attributes: [
+            {
+              type: "mdxJsxAttribute",
+              name: "value",
+              value: name
             }
-          }
-        }
-      }
-    ],
-    children: nodes.map((node, i) => {
+          ],
+          children: codes
+        };
+      });
+      if (!withParent) return createFragment(children2);
       return {
         type: "mdxJsxFlowElement",
-        name: "Tab",
+        name: "Tabs",
         attributes: [
           {
             type: "mdxJsxAttribute",
-            name: "value",
-            value: names[i]
+            name: "items",
+            value: {
+              type: "mdxJsxAttributeValueExpression",
+              value: tabs.map(([name]) => name).join(", "),
+              data: {
+                estree: {
+                  type: "Program",
+                  sourceType: "module",
+                  comments: [],
+                  body: [
+                    {
+                      type: "ExpressionStatement",
+                      expression: {
+                        type: "ArrayExpression",
+                        elements: tabs.map(([name]) => ({
+                          type: "Literal",
+                          value: name
+                        }))
+                      }
+                    }
+                  ]
+                }
+              }
+            }
           }
         ],
-        children: [node]
+        children: children2
       };
-    })
-  };
-}
-function remarkCodeTab() {
+    }
+    const children = [
+      {
+        type: "mdxJsxFlowElement",
+        name: "TabsList",
+        attributes: [],
+        children: tabs.map(([name]) => ({
+          type: "mdxJsxFlowElement",
+          name: "TabsTrigger",
+          attributes: [
+            {
+              type: "mdxJsxAttribute",
+              name: "value",
+              value: name
+            }
+          ],
+          children: [mdxToAst(processor, name)]
+        }))
+      },
+      ...tabs.map(
+        ([name, codes]) => ({
+          type: "mdxJsxFlowElement",
+          name: "TabsContent",
+          attributes: [
+            {
+              type: "mdxJsxAttribute",
+              name: "value",
+              value: name
+            }
+          ],
+          children: codes
+        })
+      )
+    ];
+    if (!withParent) return createFragment(children);
+    return {
+      type: "mdxJsxFlowElement",
+      name: "Tabs",
+      attributes: [
+        {
+          type: "mdxJsxAttribute",
+          name: "defaultValue",
+          value: tabs[0][0]
+        }
+      ],
+      children
+    };
+  }
+};
+var CodeBlockTabs = {
+  convert(processor, nodes, withMdx = false, withParent = true) {
+    const tabs = Array.from(processTabValue(nodes).entries());
+    const node = generateCodeBlockTabs({
+      defaultValue: tabs[0][0],
+      triggers: tabs.map(([name]) => ({
+        value: name,
+        children: [
+          withMdx ? mdxToAst(processor, name) : {
+            type: "text",
+            value: name
+          }
+        ]
+      })),
+      tabs: tabs.map(([name, codes]) => ({
+        value: name,
+        children: codes
+      }))
+    });
+    if (!withParent) return createFragment(node.children);
+    return node;
+  }
+};
+var Types = {
+  CodeBlockTabs,
+  Tabs
+};
+function remarkCodeTab(options = {}) {
+  const { parseMdx = false, Tabs: Tabs2 = "CodeBlockTabs" } = options;
   return (tree) => {
+    const ignored = /* @__PURE__ */ new WeakSet();
     visit5(tree, (node) => {
-      if (!("children" in node)) return;
-      if (node.type === "mdxJsxFlowElement" && node.name === "Tabs") return;
+      if (!("children" in node) || ignored.has(node)) return "skip";
+      let localTabs = Tabs2;
+      let localParseMdx = parseMdx;
+      let withParent = true;
+      if (node.type === "mdxJsxFlowElement" && node.name && node.name in Types) {
+        withParent = false;
+        localTabs = node.name;
+        if (node.name === "Tabs" && localParseMdx) {
+          localParseMdx = node.attributes.every(
+            (attribute) => attribute.type !== "mdxJsxAttribute" || attribute.name !== "items"
+          );
+        }
+      }
       let start = -1;
-      let i = 0;
-      while (i < node.children.length) {
-        const child = node.children[i];
-        const isSwitcher = child.type === "code" && child.meta && child.meta.match(TabRegex);
-        if (isSwitcher && start === -1) {
-          start = i;
+      let end = 0;
+      const close = () => {
+        if (start === -1 || start === end) return;
+        const replacement = Types[localTabs].convert(
+          this,
+          node.children.slice(start, end),
+          localParseMdx,
+          withParent
+        );
+        ignored.add(replacement);
+        node.children.splice(start, end - start, replacement);
+        end = start;
+        start = -1;
+      };
+      for (; end < node.children.length; end++) {
+        const child = node.children[end];
+        if (child.type !== "code" || !child.meta) {
+          close();
+          continue;
         }
-        const isLast = i === node.children.length - 1;
-        if (start !== -1 && (isLast || !isSwitcher)) {
-          const end = isSwitcher ? i + 1 : i;
-          const targets = node.children.slice(start, end);
-          node.children.splice(
-            start,
-            end - start,
-            toTab(targets)
-          );
-          if (isLast) break;
-          i = start;
-          start = -1;
+        const meta = parseCodeBlockAttributes(child.meta, ["tab"]);
+        if (!meta.attributes.tab) {
+          close();
+          continue;
         }
-        i++;
+        if (start === -1) start = end;
+        child.meta = meta.rest;
+        child.data ??= {};
+        child.data.tab = meta.attributes.tab;
       }
+      close();
+    });
+  };
+}
+function processTabValue(nodes) {
+  const out = /* @__PURE__ */ new Map();
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const name = node.data?.tab ?? `Tab ${i + 1}`;
+    const li = out.get(name) ?? [];
+    li.push(node);
+    out.set(name, li);
+  }
+  return out;
+}
+function mdxToAst(processor, name) {
+  const node = processor.parse(name);
+  if (node.type === "root") {
+    node.children = node.children.flatMap((child) => {
+      if (child.type === "paragraph") return child.children;
+      return child;
     });
+  }
+  return node;
+}
+function createFragment(children) {
+  return {
+    type: "mdxJsxFlowElement",
+    name: null,
+    attributes: [],
+    children
   };
 }
 
@@ -877,7 +1125,6 @@ function remarkSteps({
       if (!("children" in parent) || parent.type === "heading") return;
       if (parent.data && "_fd_step" in parent.data) return "skip";
       let startIdx = -1;
-      let lastNumber = 0;
       let i = 0;
       const onEnd = () => {
         if (startIdx === -1) return;
@@ -909,17 +1156,169 @@ function remarkSteps({
           onEnd();
           continue;
         }
-        const num = Number(match[1]);
         head.value = match[2];
-        if (startIdx !== -1 && num !== lastNumber + 1) onEnd();
         if (startIdx === -1) startIdx = i;
-        lastNumber = num;
       }
       onEnd();
     });
   };
 }
+
+// src/mdx-plugins/remark-npm.ts
+import { visit as visit7 } from "unist-util-visit";
+import convert from "npm-to-yarn";
+var aliases = ["npm", "package-install"];
+function remarkNpm({
+  persist = false,
+  packageManagers = [
+    { command: (cmd) => convert(cmd, "npm"), name: "npm" },
+    { command: (cmd) => convert(cmd, "pnpm"), name: "pnpm" },
+    { command: (cmd) => convert(cmd, "yarn"), name: "yarn" },
+    { command: (cmd) => convert(cmd, "bun"), name: "bun" }
+  ]
+} = {}) {
+  return (tree) => {
+    visit7(tree, "code", (node) => {
+      if (!node.lang || !aliases.includes(node.lang)) return;
+      let code = node.value;
+      if (node.lang === "package-install" && !code.startsWith("npm") && !code.startsWith("npx")) {
+        code = `npm install ${code}`;
+      }
+      const options = {
+        persist,
+        tabs: [],
+        triggers: []
+      };
+      for (const manager of packageManagers) {
+        const value = manager.value ?? manager.name;
+        const command = manager.command(code);
+        if (!command || command.length === 0) continue;
+        options.defaultValue ??= value;
+        options.triggers.push({
+          value,
+          children: [{ type: "text", value: manager.name }]
+        });
+        options.tabs.push({
+          value,
+          children: [
+            {
+              type: "code",
+              lang: "bash",
+              meta: node.meta,
+              value: command
+            }
+          ]
+        });
+      }
+      Object.assign(node, generateCodeBlockTabs(options));
+      return "skip";
+    });
+  };
+}
+
+// src/mdx-plugins/remark-mdx-files.ts
+import { visit as visit8 } from "unist-util-visit";
+function parseFileTree(code) {
+  const lines = code.split(/\r?\n/);
+  const stack = /* @__PURE__ */ new Map();
+  for (const line of lines) {
+    let depth = 0;
+    let name = line;
+    let match;
+    while (match = /(?:├──|│|└──)\s*/.exec(name)) {
+      name = name.slice(match[0].length);
+      depth++;
+    }
+    if (!name) continue;
+    const node = name.endsWith("/") ? { type: "folder", name, children: [], depth } : { type: "file", name, depth };
+    let parent;
+    for (let i = depth - 1; i >= 0 && !parent; i--) {
+      parent = stack.get(i);
+    }
+    stack.set(depth, node);
+    if (!parent) continue;
+    if (parent.type === "file") {
+      Object.assign(parent, {
+        type: "folder",
+        children: []
+      });
+    }
+    parent.children.push(node);
+  }
+  return stack.get(0);
+}
+function defaultToMDX(node, depth = 0) {
+  if (depth === 0) {
+    return {
+      type: "mdxJsxFlowElement",
+      name: "Files",
+      attributes: [],
+      children: [defaultToMDX(node, depth + 1)]
+    };
+  }
+  const attributes = [
+    { type: "mdxJsxAttribute", name: "name", value: node.name }
+  ];
+  if (node.type === "file") {
+    return {
+      type: "mdxJsxFlowElement",
+      attributes,
+      children: [],
+      name: "File"
+    };
+  }
+  attributes.push({
+    type: "mdxJsxAttribute",
+    name: "defaultOpen",
+    value: null
+  });
+  return {
+    type: "mdxJsxFlowElement",
+    attributes,
+    name: "Folder",
+    children: node.children.map((item) => defaultToMDX(item, depth + 1))
+  };
+}
+function remarkMdxFiles(options = {}) {
+  const { lang = "files", toMdx = defaultToMDX } = options;
+  return (tree) => {
+    visit8(tree, "code", (node) => {
+      if (node.lang !== lang || !node.value) return;
+      const fileTree = parseFileTree(node.value);
+      if (!fileTree) return;
+      Object.assign(node, toMdx(fileTree));
+    });
+  };
+}
+
+// src/mdx-plugins/remark-mdx-mermaid.ts
+import { visit as visit9 } from "unist-util-visit";
+function toMDX(code) {
+  return {
+    type: "mdxJsxFlowElement",
+    name: "Mermaid",
+    attributes: [
+      {
+        type: "mdxJsxAttribute",
+        name: "chart",
+        value: code.trim()
+      }
+    ],
+    children: []
+  };
+}
+function remarkMdxMermaid(options = {}) {
+  const { lang = "mermaid" } = options;
+  return (tree) => {
+    visit9(tree, "code", (node) => {
+      if (node.lang !== lang || !node.value) return;
+      Object.assign(node, toMDX(node.value));
+    });
+  };
+}
 export {
+  generateCodeBlockTabs,
+  parseCodeBlockAttributes,
   rehypeCode,
   rehypeCodeDefaultOptions,
   rehypeToc,
@@ -928,6 +1327,9 @@ export {
   default2 as remarkGfm,
   remarkHeading,
   remarkImage,
+  remarkMdxFiles,
+  remarkMdxMermaid,
+  remarkNpm,
   remarkSteps,
   remarkStructure,
   structure,