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

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

@@ -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/cjs/components/code-block/code-block-copy-button.js

@@ -34,14 +34,14 @@ __export(code_block_copy_button_exports, {
 module.exports = __toCommonJS(code_block_copy_button_exports);
 var import_react = __toESM(require("react"));
 var import_hi2 = require("react-icons/hi2");
+const removeShikiCode = (code) => code.replace(/ *\/\/.*\[!code[^\]]+\]/gm, "").trim();
 function CodeBlockCopyButton({ code }) {
   const [copied, setCopied] = (0, import_react.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__ */ 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-icon.d.ts

@@ -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/cjs/components/code-block/code-block-icon.js

@@ -42,6 +42,18 @@ function CodeBlockIcon({ language }) {
     case "sh":
     case "bash":
       return /* @__PURE__ */ import_react.default.createElement(import_fa6.FaTerminal, null);
+    case "js":
+    case "javascript":
+      return /* @__PURE__ */ import_react.default.createElement(import_si.SiJavascript, null);
+    case "py":
+    case "python":
+      return /* @__PURE__ */ import_react.default.createElement(import_si.SiPython, null);
+    case "kotlin":
+      return /* @__PURE__ */ import_react.default.createElement(import_si.SiKotlin, null);
+    case "go":
+      return /* @__PURE__ */ import_react.default.createElement(import_si.SiGo, null);
+    case "rust":
+      return /* @__PURE__ */ import_react.default.createElement(import_si.SiRust, null);
     case "hcl":
       return /* @__PURE__ */ import_react.default.createElement(import_si.SiTerraform, null);
     case "typescript":

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

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

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

@@ -0,0 +1,38 @@
+"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_item_exports = {};
+__export(directory_tree_item_exports, {
+  default: () => DirectoryTreeItem
+});
+module.exports = __toCommonJS(directory_tree_item_exports);
+var import_react = __toESM(require("react"));
+var import_lu = require("react-icons/lu");
+function DirectoryTreeItem({ node }) {
+  return /* @__PURE__ */ import_react.default.createElement("li", { key: node.id, 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) => /* @__PURE__ */ import_react.default.createElement(DirectoryTreeItem, { key: child.id, node: child }))));
+}

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

@@ -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/cjs/components/code-block/{code-block-kifu.js → directory-tree.js}

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,40 +26,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var code_block_kifu_exports = {};
-__export(code_block_kifu_exports, {
-  default: () => CodeBlockKifu
+var directory_tree_exports = {};
+__export(directory_tree_exports, {
+  default: () => DirectoryTree
 });
-module.exports = __toCommonJS(code_block_kifu_exports);
-var import_kifu_for_js = require("kifu-for-js");
-var import_navigation = require("next/navigation");
+module.exports = __toCommonJS(directory_tree_exports);
 var import_react = __toESM(require("react"));
-function CodeBlockKifu({ kifu, filename }) {
-  const searchParams = (0, import_navigation.useSearchParams)();
-  const id = filename ? `user-content-${filename}` : void 0;
-  const [kifuStore] = (0, import_react.useState)(() => new import_kifu_for_js.KifuStore({ kifu }));
-  (0, import_react.useEffect)(() => {
-    initKifuUserSettings();
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const newPly = Number(searchParams.get("ply") ?? 0);
-    const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
-    if (hash === id) {
-      kifuStore.player.goto(newPly);
-    }
-  }, [searchParams, kifuStore, id]);
-  if (!kifuStore) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "my-4 flex justify-center", id }, /* @__PURE__ */ import_react.default.createElement(import_kifu_for_js.KifuLite, { style: { width: "100%" }, kifuStore }));
-}
-function initKifuUserSettings() {
-  const LOCALSTORAGE_KEY = "kifuforjs";
-  const defaultSettings = {
-    hapticFeedback: false
-  };
-  const settings = localStorage.getItem(LOCALSTORAGE_KEY);
-  if (!settings) {
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(defaultSettings));
-  }
+var import_lu = require("react-icons/lu");
+var import_code_block_copy_button = __toESM(require("./code-block-copy-button"));
+var import_directory_tree_item = __toESM(require("./directory-tree-item"));
+var import_parse_tree_output = __toESM(require("./parse-tree-output"));
+async function DirectoryTree({ code, ...props }) {
+  const [, filename] = props.language.split(":");
+  const treeNode = (0, import_parse_tree_output.default)(code);
+  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" }, /* @__PURE__ */ import_react.default.createElement(import_directory_tree_item.default, { node: treeNode })) : /* @__PURE__ */ import_react.default.createElement("pre", null, code)));
 }

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

@@ -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/cjs/components/code-block/parse-tree-output.js

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var parse_tree_output_exports = {};
+__export(parse_tree_output_exports, {
+  default: () => parse_tree_output_default,
+  parseTreeOutput: () => parseTreeOutput
+});
+module.exports = __toCommonJS(parse_tree_output_exports);
+var import_crypto = require("crypto");
+function encryptSha256(str) {
+  const hash = (0, import_crypto.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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  parseTreeOutput
+});

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

@@ -1,7 +1,9 @@
 "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)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 shiki_exports = {};
 __export(shiki_exports, {
@@ -23,27 +33,35 @@ __export(shiki_exports, {
 module.exports = __toCommonJS(shiki_exports);
 var import_transformers = require("@shikijs/transformers");
 var import_react = require("react");
-var import_shiki = require("shiki");
+var import_web = require("shiki/bundle/web");
+var import_javascript = require("shiki/engine/javascript");
 async function highlighteCode(code, language) {
   const highlighter = await getShikiHighlighter();
-  const shikiLang = Object.keys(import_shiki.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: [(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;
 }
 const getShikiHighlighter = (0, import_react.cache)(async () => {
-  return (0, import_shiki.getSingletonHighlighter)({
-    themes: Object.keys(import_shiki.bundledThemes),
-    langs: Object.keys(import_shiki.bundledLanguages)
+  return (0, import_web.getSingletonHighlighterCore)({
+    themes: [import("@shikijs/themes/github-light"), import("@shikijs/themes/github-dark-dimmed")],
+    langs: Object.values(import_web.bundledLanguages),
+    engine: (0, import_javascript.createJavaScriptRegexEngine)()
   });
 });
 // Annotate the CommonJS export names for ESM import in node:

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/{index.js → gist/gist.js}

@@ -26,31 +26,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var components_exports = {};
-__export(components_exports, {
-  CodeBlock: () => import_code_block.default,
-  Image: () => import_image.default,
-  KifuTo: () => import_kifu_to.default,
-  Link: () => import_link.default,
-  LinkCard: () => import_link_card.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_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_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,
-  Image,
-  KifuTo,
-  Link,
-  LinkCard,
-  XPost,
-  Youtube
+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}`, prefetch: false }, /* @__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/image/image.js

@@ -31,8 +31,7 @@ __export(image_exports, {
   default: () => Image
 });
 module.exports = __toCommonJS(image_exports);
-var import_image = __toESM(require("next/image"));
 var import_react = __toESM(require("react"));
 function Image({ src, width, height, alt }) {
-  return /* @__PURE__ */ import_react.default.createElement(import_image.default, { src, width, height, alt });
+  return /* @__PURE__ */ import_react.default.createElement("picture", null, /* @__PURE__ */ import_react.default.createElement("img", { src, width, height, alt }));
 }

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

@@ -34,5 +34,5 @@ module.exports = __toCommonJS(link_exports);
 var import_link = __toESM(require("next/link"));
 var import_react = __toESM(require("react"));
 function Link({ href, id, children }) {
-  return /* @__PURE__ */ import_react.default.createElement(import_link.default, { href, id }, children);
+  return /* @__PURE__ */ import_react.default.createElement(import_link.default, { href, id, prefetch: false }, children);
 }

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

@@ -31,7 +31,6 @@ __export(link_card_exports, {
   default: () => LinkCard
 });
 module.exports = __toCommonJS(link_card_exports);
-var import_image = __toESM(require("next/image"));
 var import_react = __toESM(require("react"));
 function LinkCard({
   domain,
@@ -43,5 +42,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("picture", { className: "link-card-image" }, /* @__PURE__ */ import_react.default.createElement("img", { 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 };