@hackersheet/next-document-content-components 0.1.0-alpha.1 → 0.1.0-alpha.10

package/dist/cjs/components/code-block/code-block-copy-button.js

@@ -43,5 +43,5 @@ function CodeBlockCopyButton({ code }) {
       setTimeout(() => setCopied(false), 1e3);
     });
   };
-  return /* @__PURE__ */ import_react.default.createElement("button", { onClick: handleClick }, copied ? /* @__PURE__ */ import_react.default.createElement(import_hi2.HiCheck, { size: 18 }) : /* @__PURE__ */ import_react.default.createElement(import_hi2.HiOutlineClipboardDocumentList, { size: 18 }));
+  return /* @__PURE__ */ import_react.default.createElement("button", { onClick: handleClick, "aria-label": "Copy code to clipboard" }, copied ? /* @__PURE__ */ import_react.default.createElement(import_hi2.HiCheck, { size: 18 }) : /* @__PURE__ */ import_react.default.createElement(import_hi2.HiOutlineClipboardDocumentList, { size: 18 }));
 }

package/dist/cjs/components/code-block/code-block.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CodeBlockComponentProps } from '@hackersheet/react-document-content';
 
-declare function CodeBlock({ code, language }: CodeBlockComponentProps): Promise<React.JSX.Element>;
+declare function CodeBlock({ code, ...props }: CodeBlockComponentProps): Promise<React.JSX.Element>;
 
 export { CodeBlock as default };

package/dist/cjs/components/code-block/code-block.js

@@ -34,15 +34,9 @@ module.exports = __toCommonJS(code_block_exports);
 var import_react = __toESM(require("react"));
 var import_code_block_copy_button = __toESM(require("./code-block-copy-button"));
 var import_code_block_icon = __toESM(require("./code-block-icon"));
-var import_code_block_kifu = __toESM(require("./code-block-kifu"));
-var import_code_block_mermaid = __toESM(require("./code-block-mermaid"));
 var import_shiki = require("./shiki");
-async function CodeBlock({ code, language }) {
-  const [lang, filename] = language.split(":");
-  const isMermaid = lang === "mermaid";
-  const isKifu = lang === "kifu";
-  if (isMermaid) return /* @__PURE__ */ import_react.default.createElement(import_code_block_mermaid.default, { code });
-  if (isKifu) return /* @__PURE__ */ import_react.default.createElement(import_code_block_kifu.default, { kifu: code, filename });
-  const html = await (0, import_shiki.highlighteCode)(code, lang);
+async function CodeBlock({ code, ...props }) {
+  const [language, filename] = props.language.split(":");
+  const html = await (0, import_shiki.highlighteCode)(code, language);
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block-header" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_code_block_icon.default, { language })), /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block-filename" }, filename), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_code_block_copy_button.default, { code }))), html && /* @__PURE__ */ import_react.default.createElement("div", { dangerouslySetInnerHTML: { __html: html } }), !html && /* @__PURE__ */ import_react.default.createElement("pre", null, code));
 }

package/dist/cjs/components/code-block/directory-tree.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DirectoryTreeComponentProps } from '@hackersheet/react-document-content';
+
+declare function DirectoryTree({ code, ...props }: DirectoryTreeComponentProps): Promise<React.JSX.Element>;
+
+export { DirectoryTree as default };

package/dist/cjs/components/code-block/directory-tree.js

@@ -0,0 +1,93 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var directory_tree_exports = {};
+__export(directory_tree_exports, {
+  default: () => DirectoryTree
+});
+module.exports = __toCommonJS(directory_tree_exports);
+var import_react = __toESM(require("react"));
+var import_lu = require("react-icons/lu");
+var import_code_block_copy_button = __toESM(require("./code-block-copy-button"));
+async function DirectoryTree({ code, ...props }) {
+  const [, filename] = props.language.split(":");
+  const treeNode = parseTreeOutput(code);
+  const renderTree = (node) => {
+    return /* @__PURE__ */ import_react.default.createElement("li", { className: `${node.type === "directory" ? "directory-tree-directory" : "directory-tree-file"}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "directory-tree-node-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "directory-tree-icon" }, node.type === "directory" && /* @__PURE__ */ import_react.default.createElement(import_lu.LuFolder, null), node.type === "file" && /* @__PURE__ */ import_react.default.createElement(import_lu.LuFile, null)), /* @__PURE__ */ import_react.default.createElement("div", null, node.name)), node.children && /* @__PURE__ */ import_react.default.createElement("ul", null, node.children.map((child) => renderTree(child))));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block-header" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_lu.LuFolderTree, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block-filename" }, filename), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_code_block_copy_button.default, { code }))), /* @__PURE__ */ import_react.default.createElement("div", null, treeNode ? /* @__PURE__ */ import_react.default.createElement("ul", { className: "directory-tree" }, renderTree(treeNode)) : /* @__PURE__ */ import_react.default.createElement("pre", null, code)));
+}
+function parseTreeOutput(treeOutput) {
+  const lines = treeOutput.trim().split("\n");
+  const rootNode = {
+    name: "",
+    type: "directory",
+    level: 0,
+    children: []
+  };
+  const stack = [{ node: rootNode, level: 0 }];
+  let rootNodeSet = false;
+  const getExtension = (filename) => filename.match(/\.(\w+)$/)?.[1];
+  const cleanNodeName = (name) => name.replace(/^[\s│├└─]+/, "").trim();
+  try {
+    lines.forEach((line) => {
+      const trimmedLine = line.trimStart();
+      const indent = (trimmedLine.match(/^[\s│├└─]+/) || [""])[0];
+      const level = indent.length / 4;
+      const cleanedLine = cleanNodeName(trimmedLine);
+      if (level === 0 && !rootNodeSet) {
+        rootNode.name = cleanedLine;
+        rootNodeSet = true;
+        return;
+      }
+      const isDirectory = !cleanedLine.includes(".");
+      const newNode = {
+        name: cleanedLine,
+        type: isDirectory ? "directory" : "file",
+        extension: isDirectory ? void 0 : getExtension(cleanedLine),
+        level,
+        children: isDirectory ? [] : void 0
+      };
+      while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+        stack.pop();
+      }
+      if (stack[stack.length - 1] === void 0) {
+        throw new Error("Tree parsing failed");
+      }
+      const parentNode = stack[stack.length - 1].node;
+      parentNode.children = parentNode.children || [];
+      parentNode.children.push(newNode);
+      if (newNode.type === "directory") {
+        stack.push({ node: newNode, level });
+      }
+    });
+    return rootNode;
+  } catch (e) {
+    return null;
+  }
+}

package/dist/cjs/components/code-block/shiki.js

@@ -30,13 +30,18 @@ async function highlighteCode(code, language) {
   if (shikiLang === void 0 && language !== "text") {
     return null;
   }
-  const html = highlighter.codeToHtml(code, {
+  const html = highlighter.codeToHtml(code.trim(), {
     lang: shikiLang || "text",
     themes: {
       light: "github-light",
       dark: "github-dark-dimmed"
     },
-    transformers: [(0, import_transformers.transformerNotationDiff)(), (0, import_transformers.transformerNotationWordHighlight)()]
+    transformers: [
+      (0, import_transformers.transformerNotationDiff)(),
+      (0, import_transformers.transformerNotationHighlight)(),
+      (0, import_transformers.transformerNotationWordHighlight)(),
+      (0, import_transformers.transformerRemoveNotationEscape)()
+    ]
   });
   return html;
 }

package/dist/cjs/components/gist/gist.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { GistComponentProps } from '@hackersheet/react-document-content';
+
+declare function Gist({ gistId, username, filename }: GistComponentProps): Promise<React.JSX.Element>;
+
+export { Gist as default };

package/dist/cjs/components/gist/gist.js

@@ -0,0 +1,55 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var gist_exports = {};
+__export(gist_exports, {
+  default: () => Gist
+});
+module.exports = __toCommonJS(gist_exports);
+var import_script = __toESM(require("next/script"));
+var import_react = __toESM(require("react"));
+async function Gist({ gistId, username, filename }) {
+  const gistUrl = (() => {
+    const base = `https://gist.github.com/${username}/${gistId}.json`;
+    if (filename) {
+      return base + `?file=${filename}`;
+    }
+    return base;
+  })();
+  const result = await fetch(gistUrl);
+  const json = await result.json();
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "gist-block",
+      dangerouslySetInnerHTML: {
+        __html: json.div
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_script.default, { stylesheets: [json.stylesheet] }));
+}

package/dist/cjs/components/heading/heading.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HeadingComponentProps } from '@hackersheet/react-document-content';
+
+declare function Heading({ HeadingTag, id, children }: HeadingComponentProps): React.JSX.Element;
+
+export { Heading as default };

package/dist/cjs/components/{kifu-to/kifu-to.js → heading/heading.js}

@@ -26,16 +26,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var kifu_to_exports = {};
-__export(kifu_to_exports, {
-  default: () => KifuTo
+var heading_exports = {};
+__export(heading_exports, {
+  default: () => Heading
 });
-module.exports = __toCommonJS(kifu_to_exports);
+module.exports = __toCommonJS(heading_exports);
 var import_link = __toESM(require("next/link"));
 var import_react = __toESM(require("react"));
-function KifuTo({ id, ply, label: defaultLabel }) {
-  const fullId = `user-content-${id}`;
-  const href = `?ply=${ply}#${fullId}`;
-  const label = defaultLabel ?? `${ply}\u624B\u76EE`;
-  return /* @__PURE__ */ import_react.default.createElement(import_link.default, { href }, label);
+var import_md = require("react-icons/md");
+function Heading({ HeadingTag, id, children }) {
+  return /* @__PURE__ */ import_react.default.createElement(HeadingTag, { id, className: "heading" }, /* @__PURE__ */ import_react.default.createElement(import_link.default, { href: `#${id}` }, /* @__PURE__ */ import_react.default.createElement("span", { className: "heading-label" }, children), /* @__PURE__ */ import_react.default.createElement("span", { className: "heading-link-icon" }, /* @__PURE__ */ import_react.default.createElement(import_md.MdLink, null))));
 }

package/dist/cjs/components/index.d.ts

@@ -1,8 +1,11 @@
 export { default as CodeBlock } from './code-block/code-block.js';
+export { default as DirectoryTree } from './code-block/directory-tree.js';
+export { default as Gist } from './gist/gist.js';
+export { default as Heading } from './heading/heading.js';
 export { default as Image } from './image/image.js';
-export { default as KifuTo } from './kifu-to/kifu-to.js';
 export { default as Link } from './link/link.js';
 export { default as LinkCard } from './link-card/link-card.js';
+export { default as Mermaid } from './mermaid/mermaid.js';
 export { default as XPost } from './x-post/x-post.js';
 export { default as Youtube } from './youtube/youtube.js';
 import 'react';

package/dist/cjs/components/index.js

@@ -29,28 +29,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_exports = {};
 __export(components_exports, {
   CodeBlock: () => import_code_block.default,
+  DirectoryTree: () => import_directory_tree.default,
+  Gist: () => import_gist.default,
+  Heading: () => import_heading.default,
   Image: () => import_image.default,
-  KifuTo: () => import_kifu_to.default,
   Link: () => import_link.default,
   LinkCard: () => import_link_card.default,
+  Mermaid: () => import_mermaid.default,
   XPost: () => import_x_post.default,
   Youtube: () => import_youtube.default
 });
 module.exports = __toCommonJS(components_exports);
 var import_code_block = __toESM(require("./code-block/code-block"));
+var import_directory_tree = __toESM(require("./code-block/directory-tree"));
+var import_gist = __toESM(require("./gist/gist"));
+var import_heading = __toESM(require("./heading/heading"));
 var import_image = __toESM(require("./image/image"));
-var import_kifu_to = __toESM(require("./kifu-to/kifu-to"));
 var import_link = __toESM(require("./link/link"));
 var import_link_card = __toESM(require("./link-card/link-card"));
+var import_mermaid = __toESM(require("./mermaid/mermaid"));
 var import_x_post = __toESM(require("./x-post/x-post"));
 var import_youtube = __toESM(require("./youtube/youtube"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CodeBlock,
+  DirectoryTree,
+  Gist,
+  Heading,
   Image,
-  KifuTo,
   Link,
   LinkCard,
+  Mermaid,
   XPost,
   Youtube
 });

package/dist/cjs/components/link-card/link-card.js

@@ -43,5 +43,5 @@ function LinkCard({
   imageWidth
 }) {
   const faviconUrl = `https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://${domain}&size=16`;
-  return /* @__PURE__ */ import_react.default.createElement("a", { href: url, className: "link-card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-main" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-title" }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-description" }, description), /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-domain" }, /* @__PURE__ */ import_react.default.createElement("picture", null, /* @__PURE__ */ import_react.default.createElement("img", { src: faviconUrl, alt: `${domain} favicon`, width: 16, height: 16 })), /* @__PURE__ */ import_react.default.createElement("div", null, domain))), imageUrl && /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-image" }, /* @__PURE__ */ import_react.default.createElement(import_image.default, { alt: title, src: imageUrl, height: imageHeight, width: imageWidth })));
+  return /* @__PURE__ */ import_react.default.createElement("a", { href: url, className: "link-card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-main" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-title-container" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-title" }, title)), /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-description" }, description), /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-domain" }, /* @__PURE__ */ import_react.default.createElement("picture", null, /* @__PURE__ */ import_react.default.createElement("img", { src: faviconUrl, alt: `${domain} favicon`, width: 16, height: 16 })), /* @__PURE__ */ import_react.default.createElement("div", null, domain))), imageUrl && /* @__PURE__ */ import_react.default.createElement("div", { className: "link-card-image" }, /* @__PURE__ */ import_react.default.createElement(import_image.default, { alt: title, src: imageUrl, height: imageHeight, width: imageWidth })));
 }

package/dist/cjs/components/mermaid/mermaid.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MermaidComponentProps } from '@hackersheet/react-document-content';
+
+declare function Mermaid({ code }: MermaidComponentProps): React.JSX.Element;
+
+export { Mermaid as default };

package/dist/cjs/components/{code-block/code-block-mermaid.js → mermaid/mermaid.js}

@@ -27,11 +27,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var code_block_mermaid_exports = {};
-__export(code_block_mermaid_exports, {
-  default: () => CodeBlockMermaid
+var mermaid_exports = {};
+__export(mermaid_exports, {
+  default: () => Mermaid
 });
-module.exports = __toCommonJS(code_block_mermaid_exports);
+module.exports = __toCommonJS(mermaid_exports);
 var import_crypto = require("crypto");
 var import_mermaid = __toESM(require("mermaid"));
 var import_next_themes = require("next-themes");
@@ -41,7 +41,7 @@ function createId(code) {
   hash.update(code);
   return "id-" + hash.digest("hex");
 }
-function CodeBlockMermaid({ code }) {
+function Mermaid({ code }) {
   const ref = (0, import_react.useRef)(null);
   const [mounted, setMounted] = (0, import_react.useState)(false);
   const [svg, setSvg] = (0, import_react.useState)("");
@@ -65,7 +65,8 @@ function CodeBlockMermaid({ code }) {
     };
     renderMermaid();
   }, [mounted, code, id, theme, systemTheme, setSvg, setMounted]);
-  if (!mounted)
-    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, "Loading..."));
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { dangerouslySetInnerHTML: { __html: svg }, ref }));
+  if (!mounted) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-block mermaid-loading" }, /* @__PURE__ */ import_react.default.createElement("div", null, "Loading..."));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-block", dangerouslySetInnerHTML: { __html: svg }, ref });
 }

package/dist/cjs/components/youtube/youtube.js

@@ -35,5 +35,5 @@ var import_google = require("@next/third-parties/google");
 var import_react = __toESM(require("react"));
 async function Youtube({ videoId, params, playLabel, ...props }) {
   const paramsString = params ? Object.entries(params).filter(([, value]) => value !== void 0).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&") : void 0;
-  return /* @__PURE__ */ import_react.default.createElement(import_google.YouTubeEmbed, { ...props, videoid: videoId, params: paramsString, playlabel: playLabel });
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "youtube-block" }, /* @__PURE__ */ import_react.default.createElement(import_google.YouTubeEmbed, { ...props, videoid: videoId, params: paramsString, playlabel: playLabel }));
 }

package/dist/cjs/index.d.ts

@@ -1,8 +1,11 @@
 export { default as CodeBlock } from './components/code-block/code-block.js';
+export { default as DirectoryTree } from './components/code-block/directory-tree.js';
+export { default as Gist } from './components/gist/gist.js';
+export { default as Heading } from './components/heading/heading.js';
 export { default as Image } from './components/image/image.js';
-export { default as KifuTo } from './components/kifu-to/kifu-to.js';
 export { default as Link } from './components/link/link.js';
 export { default as LinkCard } from './components/link-card/link-card.js';
+export { default as Mermaid } from './components/mermaid/mermaid.js';
 export { default as XPost } from './components/x-post/x-post.js';
 export { default as Youtube } from './components/youtube/youtube.js';
 import 'react';

package/dist/esm/components/code-block/code-block-copy-button.mjs

@@ -10,7 +10,7 @@ function CodeBlockCopyButton({ code }) {
       setTimeout(() => setCopied(false), 1e3);
     });
   };
-  return /* @__PURE__ */ React.createElement("button", { onClick: handleClick }, copied ? /* @__PURE__ */ React.createElement(HiCheck, { size: 18 }) : /* @__PURE__ */ React.createElement(HiOutlineClipboardDocumentList, { size: 18 }));
+  return /* @__PURE__ */ React.createElement("button", { onClick: handleClick, "aria-label": "Copy code to clipboard" }, copied ? /* @__PURE__ */ React.createElement(HiCheck, { size: 18 }) : /* @__PURE__ */ React.createElement(HiOutlineClipboardDocumentList, { size: 18 }));
 }
 export {
   CodeBlockCopyButton as default

package/dist/esm/components/code-block/code-block.d.mts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CodeBlockComponentProps } from '@hackersheet/react-document-content';
 
-declare function CodeBlock({ code, language }: CodeBlockComponentProps): Promise<React.JSX.Element>;
+declare function CodeBlock({ code, ...props }: CodeBlockComponentProps): Promise<React.JSX.Element>;
 
 export { CodeBlock as default };

package/dist/esm/components/code-block/code-block.mjs

@@ -1,16 +1,10 @@
 import React from "react";
 import CodeBlockCopyButton from "./code-block-copy-button";
 import CodeBlockIcon from "./code-block-icon";
-import CodeBlockKifu from "./code-block-kifu";
-import CodeBlockMermaid from "./code-block-mermaid";
 import { highlighteCode } from "./shiki";
-async function CodeBlock({ code, language }) {
-  const [lang, filename] = language.split(":");
-  const isMermaid = lang === "mermaid";
-  const isKifu = lang === "kifu";
-  if (isMermaid) return /* @__PURE__ */ React.createElement(CodeBlockMermaid, { code });
-  if (isKifu) return /* @__PURE__ */ React.createElement(CodeBlockKifu, { kifu: code, filename });
-  const html = await highlighteCode(code, lang);
+async function CodeBlock({ code, ...props }) {
+  const [language, filename] = props.language.split(":");
+  const html = await highlighteCode(code, language);
   return /* @__PURE__ */ React.createElement("div", { className: "code-block" }, /* @__PURE__ */ React.createElement("div", { className: "code-block-header" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(CodeBlockIcon, { language })), /* @__PURE__ */ React.createElement("div", { className: "code-block-filename" }, filename), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(CodeBlockCopyButton, { code }))), html && /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: html } }), !html && /* @__PURE__ */ React.createElement("pre", null, code));
 }
 export {

package/dist/esm/components/code-block/directory-tree.d.mts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DirectoryTreeComponentProps } from '@hackersheet/react-document-content';
+
+declare function DirectoryTree({ code, ...props }: DirectoryTreeComponentProps): Promise<React.JSX.Element>;
+
+export { DirectoryTree as default };

package/dist/esm/components/code-block/directory-tree.mjs

@@ -0,0 +1,63 @@
+import React from "react";
+import { LuFolder, LuFile, LuFolderTree } from "react-icons/lu";
+import CodeBlockCopyButton from "./code-block-copy-button";
+async function DirectoryTree({ code, ...props }) {
+  const [, filename] = props.language.split(":");
+  const treeNode = parseTreeOutput(code);
+  const renderTree = (node) => {
+    return /* @__PURE__ */ React.createElement("li", { className: `${node.type === "directory" ? "directory-tree-directory" : "directory-tree-file"}` }, /* @__PURE__ */ React.createElement("div", { className: "directory-tree-node-content" }, /* @__PURE__ */ React.createElement("div", { className: "directory-tree-icon" }, node.type === "directory" && /* @__PURE__ */ React.createElement(LuFolder, null), node.type === "file" && /* @__PURE__ */ React.createElement(LuFile, null)), /* @__PURE__ */ React.createElement("div", null, node.name)), node.children && /* @__PURE__ */ React.createElement("ul", null, node.children.map((child) => renderTree(child))));
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "code-block" }, /* @__PURE__ */ React.createElement("div", { className: "code-block-header" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(LuFolderTree, null)), /* @__PURE__ */ React.createElement("div", { className: "code-block-filename" }, filename), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(CodeBlockCopyButton, { code }))), /* @__PURE__ */ React.createElement("div", null, treeNode ? /* @__PURE__ */ React.createElement("ul", { className: "directory-tree" }, renderTree(treeNode)) : /* @__PURE__ */ React.createElement("pre", null, code)));
+}
+function parseTreeOutput(treeOutput) {
+  const lines = treeOutput.trim().split("\n");
+  const rootNode = {
+    name: "",
+    type: "directory",
+    level: 0,
+    children: []
+  };
+  const stack = [{ node: rootNode, level: 0 }];
+  let rootNodeSet = false;
+  const getExtension = (filename) => filename.match(/\.(\w+)$/)?.[1];
+  const cleanNodeName = (name) => name.replace(/^[\s│├└─]+/, "").trim();
+  try {
+    lines.forEach((line) => {
+      const trimmedLine = line.trimStart();
+      const indent = (trimmedLine.match(/^[\s│├└─]+/) || [""])[0];
+      const level = indent.length / 4;
+      const cleanedLine = cleanNodeName(trimmedLine);
+      if (level === 0 && !rootNodeSet) {
+        rootNode.name = cleanedLine;
+        rootNodeSet = true;
+        return;
+      }
+      const isDirectory = !cleanedLine.includes(".");
+      const newNode = {
+        name: cleanedLine,
+        type: isDirectory ? "directory" : "file",
+        extension: isDirectory ? void 0 : getExtension(cleanedLine),
+        level,
+        children: isDirectory ? [] : void 0
+      };
+      while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+        stack.pop();
+      }
+      if (stack[stack.length - 1] === void 0) {
+        throw new Error("Tree parsing failed");
+      }
+      const parentNode = stack[stack.length - 1].node;
+      parentNode.children = parentNode.children || [];
+      parentNode.children.push(newNode);
+      if (newNode.type === "directory") {
+        stack.push({ node: newNode, level });
+      }
+    });
+    return rootNode;
+  } catch (e) {
+    return null;
+  }
+}
+export {
+  DirectoryTree as default
+};

package/dist/esm/components/code-block/shiki.mjs

@@ -1,4 +1,9 @@
-import { transformerNotationDiff, transformerNotationWordHighlight } from "@shikijs/transformers";
+import {
+  transformerNotationDiff,
+  transformerNotationWordHighlight,
+  transformerRemoveNotationEscape,
+  transformerNotationHighlight
+} from "@shikijs/transformers";
 import { cache } from "react";
 import { bundledLanguages, bundledThemes, getSingletonHighlighter } from "shiki";
 async function highlighteCode(code, language) {
@@ -7,13 +12,18 @@ async function highlighteCode(code, language) {
   if (shikiLang === void 0 && language !== "text") {
     return null;
   }
-  const html = highlighter.codeToHtml(code, {
+  const html = highlighter.codeToHtml(code.trim(), {
     lang: shikiLang || "text",
     themes: {
       light: "github-light",
       dark: "github-dark-dimmed"
     },
-    transformers: [transformerNotationDiff(), transformerNotationWordHighlight()]
+    transformers: [
+      transformerNotationDiff(),
+      transformerNotationHighlight(),
+      transformerNotationWordHighlight(),
+      transformerRemoveNotationEscape()
+    ]
   });
   return html;
 }

package/dist/esm/components/gist/gist.d.mts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { GistComponentProps } from '@hackersheet/react-document-content';
+
+declare function Gist({ gistId, username, filename }: GistComponentProps): Promise<React.JSX.Element>;
+
+export { Gist as default };

package/dist/esm/components/gist/gist.mjs

@@ -0,0 +1,25 @@
+import Script from "next/script";
+import React from "react";
+async function Gist({ gistId, username, filename }) {
+  const gistUrl = (() => {
+    const base = `https://gist.github.com/${username}/${gistId}.json`;
+    if (filename) {
+      return base + `?file=${filename}`;
+    }
+    return base;
+  })();
+  const result = await fetch(gistUrl);
+  const json = await result.json();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "gist-block",
+      dangerouslySetInnerHTML: {
+        __html: json.div
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(Script, { stylesheets: [json.stylesheet] }));
+}
+export {
+  Gist as default
+};

package/dist/esm/components/heading/heading.d.mts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HeadingComponentProps } from '@hackersheet/react-document-content';
+
+declare function Heading({ HeadingTag, id, children }: HeadingComponentProps): React.JSX.Element;
+
+export { Heading as default };

package/dist/esm/components/heading/heading.mjs

@@ -0,0 +1,9 @@
+import Link from "next/link";
+import React from "react";
+import { MdLink } from "react-icons/md";
+function Heading({ HeadingTag, id, children }) {
+  return /* @__PURE__ */ React.createElement(HeadingTag, { id, className: "heading" }, /* @__PURE__ */ React.createElement(Link, { href: `#${id}` }, /* @__PURE__ */ React.createElement("span", { className: "heading-label" }, children), /* @__PURE__ */ React.createElement("span", { className: "heading-link-icon" }, /* @__PURE__ */ React.createElement(MdLink, null))));
+}
+export {
+  Heading as default
+};

package/dist/esm/components/index.d.mts

@@ -1,8 +1,11 @@
 export { default as CodeBlock } from './code-block/code-block.mjs';
+export { default as DirectoryTree } from './code-block/directory-tree.mjs';
+export { default as Gist } from './gist/gist.mjs';
+export { default as Heading } from './heading/heading.mjs';
 export { default as Image } from './image/image.mjs';
-export { default as KifuTo } from './kifu-to/kifu-to.mjs';
 export { default as Link } from './link/link.mjs';
 export { default as LinkCard } from './link-card/link-card.mjs';
+export { default as Mermaid } from './mermaid/mermaid.mjs';
 export { default as XPost } from './x-post/x-post.mjs';
 export { default as Youtube } from './youtube/youtube.mjs';
 import 'react';

package/dist/esm/components/index.mjs

@@ -1,16 +1,22 @@
 import CodeBlock from "./code-block/code-block";
+import DirectoryTree from "./code-block/directory-tree";
+import Gist from "./gist/gist";
+import Heading from "./heading/heading";
 import Image from "./image/image";
-import KifuTo from "./kifu-to/kifu-to";
 import Link from "./link/link";
 import LinkCard from "./link-card/link-card";
+import Mermaid from "./mermaid/mermaid";
 import XPost from "./x-post/x-post";
 import Youtube from "./youtube/youtube";
 export {
   CodeBlock,
+  DirectoryTree,
+  Gist,
+  Heading,
   Image,
-  KifuTo,
   Link,
   LinkCard,
+  Mermaid,
   XPost,
   Youtube
 };