@hackersheet/next-document-content-components 0.1.0-alpha.2 → 0.1.0-alpha.21

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

@@ -1,8 +1,14 @@
 "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))
@@ -11,12 +17,49 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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 src_exports = {};
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./components"), module.exports);
+var index_exports = {};
+__export(index_exports, {
+  CodeBlock: () => import_code_block.default,
+  DirectoryTree: () => import_directory_tree.default,
+  Gist: () => import_gist.default,
+  Heading: () => import_heading.default,
+  Image: () => import_image.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(index_exports);
+var import_code_block = __toESM(require("./components/code-block/code-block"));
+var import_directory_tree = __toESM(require("./components/code-block/directory-tree"));
+var import_gist = __toESM(require("./components/gist/gist"));
+var import_heading = __toESM(require("./components/heading/heading"));
+var import_image = __toESM(require("./components/image/image"));
+var import_link = __toESM(require("./components/link/link"));
+var import_link_card = __toESM(require("./components/link-card/link-card"));
+var import_mermaid = __toESM(require("./components/mermaid/mermaid"));
+var import_x_post = __toESM(require("./components/x-post/x-post"));
+var import_youtube = __toESM(require("./components/youtube/youtube"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./components")
+  CodeBlock,
+  DirectoryTree,
+  Gist,
+  Heading,
+  Image,
+  Link,
+  LinkCard,
+  Mermaid,
+  XPost,
+  Youtube
 });

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

@@ -1,8 +1,19 @@
 import React from 'react';
 
-interface CodeBlockCopyButtonProps {
+type CodeBlockCopyButtonProps = {
     code: string;
-}
+};
+/**
+ * コードブロック用のコピー ボタンコンポーネント。
+ *
+ * 与えられた code をクリップボードに書き込み、コピー完了時にアイコンをチェックに切り替えます。
+ *
+ * @param props.code コピー対象のコード文字列（Shiki 注釈が含まれている可能性あり）。
+ * @returns コピー用ボタンの React 要素。
+ *
+ * @remarks
+ * ブラウザの navigator.clipboard を使用します。ユーザーの環境によっては権限や HTTPS が必要です。
+ */
 declare function CodeBlockCopyButton({ code }: CodeBlockCopyButtonProps): React.JSX.Element;
 
 export { type CodeBlockCopyButtonProps, CodeBlockCopyButton as default };

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

@@ -1,16 +1,16 @@
 "use client";
 import React, { useState } from "react";
 import { HiOutlineClipboardDocumentList, HiCheck } from "react-icons/hi2";
+const removeShikiCode = (code) => code.replace(/ *\/\/.*\[!code[^\]]+\]/gm, "").trim();
 function CodeBlockCopyButton({ code }) {
   const [copied, setCopied] = useState(false);
-  const removeShikiCode = (code2) => code2.replace(/ *\/\/.*\[!code[^\]]+\]/gm, "").trim();
   const handleClick = () => {
     navigator.clipboard.writeText(removeShikiCode(code)).then(() => {
       setCopied(true);
       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-icon.d.mts

@@ -1,8 +1,42 @@
-import React from 'react';
+import { JSX } from 'react';
 
-interface CodeBlockIconProps {
+/**
+ * CodeBlockIcon コンポーネントの props 型定義。
+ *
+ * `language` プロパティに基づいて、コードブロックに表示する代表的なアイコンを返します。
+ * 小文字の言語識別子（例: `"typescript"`, `"bash"`, `"json"`, `"markdown"`）を想定しています。
+ * 未知の値やサポート外の値は汎用のコードアイコンにフォールバックします。
+ */
+type CodeBlockIconProps = {
+    /**
+     * アイコン選択に用いる言語識別子（小文字推奨）。例: 'typescript', 'bash', 'json'
+     */
     language: string;
-}
-declare function CodeBlockIcon({ language }: CodeBlockIconProps): React.JSX.Element;
+};
+/**
+ * 指定された言語に対応するアイコンを返すコンポーネント。
+ *
+ * 共通の言語識別子を `react-icons` のアイコンにマッピングします。
+ * 認識できない言語は汎用の括弧（コード）アイコンに置き換わります。
+ *
+ * 使用例:
+ *
+ * ```tsx
+ * <CodeBlockIcon language="typescript" />
+ * ```
+ *
+ * サポート例（非網羅）:
+ * - 'bash' | 'sh' -> ターミナルアイコン
+ * - 'typescript' -> TypeScript アイコン
+ * - 'tsx' -> React アイコン
+ * - 'json' -> JSON アイコン
+ * - 'markdown' -> Markdown アイコン
+ * - 'hcl' -> Terraform アイコン
+ * - 'php', 'ruby', 'yaml', 'text' など
+ *
+ * @param props.language アイコン選択に用いる小文字の言語名
+ * @returns 選択されたアイコンを含む JSX 要素
+ */
+declare function CodeBlockIcon({ language }: CodeBlockIconProps): JSX.Element;
 
 export { type CodeBlockIconProps, CodeBlockIcon as default };

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

@@ -1,7 +1,19 @@
 import React from "react";
 import { FaTerminal, FaReact } from "react-icons/fa6";
 import { HiCodeBracket } from "react-icons/hi2";
-import { SiTypescript, SiTerraform, SiMarkdown, SiPhp, SiRuby, SiYaml } from "react-icons/si";
+import {
+  SiTypescript,
+  SiTerraform,
+  SiMarkdown,
+  SiPhp,
+  SiRuby,
+  SiYaml,
+  SiJavascript,
+  SiPython,
+  SiKotlin,
+  SiGo,
+  SiRust
+} from "react-icons/si";
 import { TbTxt } from "react-icons/tb";
 import { VscJson } from "react-icons/vsc";
 function CodeBlockIcon({ language }) {
@@ -9,6 +21,18 @@ function CodeBlockIcon({ language }) {
     case "sh":
     case "bash":
       return /* @__PURE__ */ React.createElement(FaTerminal, null);
+    case "js":
+    case "javascript":
+      return /* @__PURE__ */ React.createElement(SiJavascript, null);
+    case "py":
+    case "python":
+      return /* @__PURE__ */ React.createElement(SiPython, null);
+    case "kotlin":
+      return /* @__PURE__ */ React.createElement(SiKotlin, null);
+    case "go":
+      return /* @__PURE__ */ React.createElement(SiGo, null);
+    case "rust":
+      return /* @__PURE__ */ React.createElement(SiRust, null);
     case "hcl":
       return /* @__PURE__ */ React.createElement(SiTerraform, null);
     case "typescript":

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-item.d.mts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TreeNode } from './parse-tree-output.mjs';
+
+type DirectoryTreeItemProps = {
+    node: TreeNode;
+};
+/**
+ * 単一のツリーノード（ディレクトリまたはファイル）をレンダリングするコンポーネント。
+ * 再帰的に自身を呼び出して子ノードを描画します。
+ *
+ * @param props.node - 表示対象の TreeNode
+ */
+declare function DirectoryTreeItem({ node }: DirectoryTreeItemProps): React.JSX.Element;
+
+export { DirectoryTreeItem as default };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { LuFolder, LuFile } from "react-icons/lu";
+function DirectoryTreeItem({ node }) {
+  return /* @__PURE__ */ React.createElement("li", { key: node.id, 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) => /* @__PURE__ */ React.createElement(DirectoryTreeItem, { key: child.id, node: child }))));
+}
+export {
+  DirectoryTreeItem as default
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DirectoryTreeComponentProps } from '@hackersheet/react-document-content';
+
+/**
+ * code ブロック内の `tree` コマンド出力をパースしてツリーをレンダリングするコンポーネント。
+ * ヘッダにはツリーアイコン、ファイル名（language のコロン以降）、コピー用ボタンを表示します。
+ *
+ * @param props.code - `tree` コマンドの出力テキスト
+ * @param props.language - 言語／ファイル名情報（形式: "xxx:filename"）
+ */
+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,13 @@
+import React from "react";
+import { LuFolderTree } from "react-icons/lu";
+import CodeBlockCopyButton from "./code-block-copy-button";
+import DirectoryTreeItem from "./directory-tree-item";
+import parseTreeOutput from "./parse-tree-output";
+async function DirectoryTree({ code, ...props }) {
+  const [, filename] = props.language.split(":");
+  const treeNode = parseTreeOutput(code);
+  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" }, /* @__PURE__ */ React.createElement(DirectoryTreeItem, { node: treeNode })) : /* @__PURE__ */ React.createElement("pre", null, code)));
+}
+export {
+  DirectoryTree as default
+};

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

@@ -0,0 +1,26 @@
+type TreeNode = {
+    id: string;
+    name: string;
+    type: 'file' | 'directory';
+    extension?: string;
+    level: number;
+    children?: TreeNode[];
+};
+/**
+ * `tree` コマンドの出力（box-drawing を含むテキスト）をパースして TreeNode のツリー構造を返します。
+ *
+ * @remarks
+ * - 入力は Linux/macOS の `tree` コマンドの標準出力を想定しています。
+ * - 行先頭の箱線文字（`│`, `├`, `└`, `─`）や 4 スペースインデントを解析して階層を決定します。
+ * - 最後に出力されるサマリ行（例: `3 directories, 5 files`）は自動的に除外します。
+ * - 子要素が存在する行のみをディレクトリと見なすルールを採用しています（子要素が無ければファイル）。
+ * - 解析中に例外が発生した場合は `null` を返します（呼び出し元でフォールバック処理を行ってください）。
+ *
+ * @param treeOutput - `tree` コマンドで得られたテキスト全体
+ * @returns 解析に成功した場合はルート `TreeNode`、失敗または空入力の場合は `null`
+ *
+ * @complexity O(n) - 入力行数 n に対して一度の走査で処理します（追加で逆順集計を行うためメモリは O(n)）。
+ */
+declare function parseTreeOutput(treeOutput: string): TreeNode | null;
+
+export { type TreeNode, parseTreeOutput as default, parseTreeOutput };

package/dist/esm/components/code-block/parse-tree-output.mjs

@@ -0,0 +1,87 @@
+import { createHash } from "crypto";
+function encryptSha256(str) {
+  const hash = createHash("sha256");
+  hash.update(str);
+  return hash.digest("hex");
+}
+function parseTreeOutput(treeOutput) {
+  const raw = treeOutput.replace(/\r/g, "").trim();
+  if (!raw) return null;
+  const lines = raw.split("\n");
+  const filteredLines = lines.filter(
+    (l) => !/^\s*(?:\d+\s+directories?,\s*\d+\s+files?|\d+\s+directories?|\d+\s+files?)\s*$/i.test(l)
+  );
+  const idPrefix = "tree-" + encryptSha256(raw) + "-";
+  const rootNode = {
+    id: idPrefix + "root",
+    name: "",
+    type: "directory",
+    level: 0,
+    children: []
+  };
+  const stack = [{ node: rootNode, level: 0 }];
+  const getExtension = (filename) => filename.match(/\.(\w+)$/)?.[1];
+  const cleanNodeName = (name) => name.replace(/^[\s│├└─]+/, "").trim();
+  try {
+    const treeLineRegex = /^(?<prefix>(?:│\s{3}|\s{4})*)(?<connector>├── |└── )?(?<name>.*)$/;
+    const lineInfos = filteredLines.map((ln) => {
+      const normalized = ln.replace(/\t/g, "    ");
+      const m = normalized.match(treeLineRegex);
+      if (m && m.groups) {
+        const prefix = m.groups["prefix"] || "";
+        const connector = m.groups["connector"] || "";
+        const name = (m.groups["name"] || "").trim();
+        const groupMatches = prefix.match(/(?:│\s{3}|\s{4})/g);
+        const level = (groupMatches ? groupMatches.length : 0) + (connector ? 1 : 0);
+        return { rawLine: normalized, level, cleanedName: cleanNodeName(name) };
+      }
+      return { rawLine: normalized, level: 0, cleanedName: cleanNodeName(normalized.trim()) };
+    });
+    const reduceResult = lineInfos.reduceRight(
+      (acc, info) => ({
+        lastLevel: info.rawLine.trim() ? info.level : acc.lastLevel,
+        nextLevels: [acc.lastLevel, ...acc.nextLevels]
+      }),
+      { lastLevel: null, nextLevels: [] }
+    );
+    const nextNonEmptyLevel = reduceResult.nextLevels;
+    lineInfos.forEach((info, index) => {
+      const level = info.level;
+      const cleanedLine = info.cleanedName;
+      if (level === 0 && rootNode.name === "") {
+        rootNode.name = cleanedLine;
+        return;
+      }
+      const nextLevelForLine = nextNonEmptyLevel[index];
+      const isDirectory = nextLevelForLine != null && nextLevelForLine > level;
+      const newNode = {
+        id: idPrefix + "node-" + index,
+        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 {
+    return null;
+  }
+}
+var parse_tree_output_default = parseTreeOutput;
+export {
+  parse_tree_output_default as default,
+  parseTreeOutput
+};

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

@@ -1,26 +1,39 @@
-import { transformerNotationDiff, transformerNotationWordHighlight } from "@shikijs/transformers";
+import {
+  transformerNotationDiff,
+  transformerNotationWordHighlight,
+  transformerRemoveNotationEscape,
+  transformerNotationHighlight
+} from "@shikijs/transformers";
 import { cache } from "react";
-import { bundledLanguages, bundledThemes, getSingletonHighlighter } from "shiki";
+import { bundledLanguages, getSingletonHighlighterCore } from "shiki/bundle/web";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 async function highlighteCode(code, language) {
   const highlighter = await getShikiHighlighter();
-  const shikiLang = Object.keys(bundledLanguages).find((lang) => lang === language);
+  const shikiLangs = highlighter.getLoadedLanguages();
+  const shikiLang = shikiLangs.find((lang) => lang === 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;
 }
 const getShikiHighlighter = cache(async () => {
-  return getSingletonHighlighter({
-    themes: Object.keys(bundledThemes),
-    langs: Object.keys(bundledLanguages)
+  return getSingletonHighlighterCore({
+    themes: [import("@shikijs/themes/github-light"), import("@shikijs/themes/github-dark-dimmed")],
+    langs: Object.values(bundledLanguages),
+    engine: createJavaScriptRegexEngine()
   });
 });
 export {

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}`, prefetch: false }, /* @__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/image/image.mjs

@@ -1,7 +1,6 @@
-import NextImage from "next/image";
 import React from "react";
 function Image({ src, width, height, alt }) {
-  return /* @__PURE__ */ React.createElement(NextImage, { src, width, height, alt });
+  return /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement("img", { src, width, height, alt }));
 }
 export {
   Image as default

package/dist/esm/components/link/link.mjs

@@ -1,7 +1,7 @@
 import NextLink from "next/link";
 import React from "react";
 function Link({ href, id, children }) {
-  return /* @__PURE__ */ React.createElement(NextLink, { href, id }, children);
+  return /* @__PURE__ */ React.createElement(NextLink, { href, id, prefetch: false }, children);
 }
 export {
   Link as default

package/dist/esm/components/link-card/link-card.mjs

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import React from "react";
 function LinkCard({
   domain,
@@ -10,7 +9,7 @@ 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__ */ React.createElement("a", { href: url, className: "link-card" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-main" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-title" }, title), /* @__PURE__ */ React.createElement("div", { className: "link-card-description" }, description), /* @__PURE__ */ React.createElement("div", { className: "link-card-domain" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement("img", { src: faviconUrl, alt: `${domain} favicon`, width: 16, height: 16 })), /* @__PURE__ */ React.createElement("div", null, domain))), imageUrl && /* @__PURE__ */ React.createElement("div", { className: "link-card-image" }, /* @__PURE__ */ React.createElement(Image, { alt: title, src: imageUrl, height: imageHeight, width: imageWidth })));
+  return /* @__PURE__ */ React.createElement("a", { href: url, className: "link-card" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-main" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-title-container" }, /* @__PURE__ */ React.createElement("div", { className: "link-card-title" }, title)), /* @__PURE__ */ React.createElement("div", { className: "link-card-description" }, description), /* @__PURE__ */ React.createElement("div", { className: "link-card-domain" }, /* @__PURE__ */ React.createElement("picture", null, /* @__PURE__ */ React.createElement("img", { src: faviconUrl, alt: `${domain} favicon`, width: 16, height: 16 })), /* @__PURE__ */ React.createElement("div", null, domain))), imageUrl && /* @__PURE__ */ React.createElement("picture", { className: "link-card-image" }, /* @__PURE__ */ React.createElement("img", { alt: title, src: imageUrl, height: imageHeight, width: imageWidth })));
 }
 export {
   LinkCard as default

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

@@ -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/esm/components/{code-block/code-block-mermaid.mjs → mermaid/mermaid.mjs}

@@ -8,7 +8,7 @@ function createId(code) {
   hash.update(code);
   return "id-" + hash.digest("hex");
 }
-function CodeBlockMermaid({ code }) {
+function Mermaid({ code }) {
   const ref = useRef(null);
   const [mounted, setMounted] = useState(false);
   const [svg, setSvg] = useState("");
@@ -32,10 +32,11 @@ function CodeBlockMermaid({ code }) {
     };
     renderMermaid();
   }, [mounted, code, id, theme, systemTheme, setSvg, setMounted]);
-  if (!mounted)
-    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, "Loading..."));
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: svg }, ref }));
+  if (!mounted) {
+    return /* @__PURE__ */ React.createElement("div", { className: "mermaid-block mermaid-loading" }, /* @__PURE__ */ React.createElement("div", null, "Loading..."));
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "mermaid-block", dangerouslySetInnerHTML: { __html: svg }, ref });
 }
 export {
-  CodeBlockMermaid as default
+  Mermaid as default
 };