@hackersheet/next-document-content-components 0.1.0-alpha.15 → 0.1.0-alpha.16

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,9 +34,9 @@ __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);

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/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

@@ -1,6 +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/directory-tree.js

@@ -31,72 +31,13 @@ __export(directory_tree_exports, {
   default: () => DirectoryTree
 });
 module.exports = __toCommonJS(directory_tree_exports);
-var import_crypto = require("crypto");
 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"));
+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 = parseTreeOutput(code);
-  const renderTree = (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) => 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 encryptSha256(str) {
-  const hash = (0, import_crypto.createHash)("sha256");
-  hash.update(str);
-  return hash.digest("hex");
-}
-function parseTreeOutput(treeOutput) {
-  const lines = treeOutput.trim().split("\n");
-  const idPrefix = "tree-" + encryptSha256(treeOutput.trim()) + "-";
-  const rootNode = {
-    id: idPrefix + "root",
-    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, index) => {
-      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 = {
-        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;
-  }
+  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/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,9 +1,9 @@
 "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);

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/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

@@ -1,6 +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

@@ -1,71 +1,12 @@
-import { createHash } from "crypto";
 import React from "react";
-import { LuFolder, LuFile, LuFolderTree } from "react-icons/lu";
+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);
-  const renderTree = (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) => 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 encryptSha256(str) {
-  const hash = createHash("sha256");
-  hash.update(str);
-  return hash.digest("hex");
-}
-function parseTreeOutput(treeOutput) {
-  const lines = treeOutput.trim().split("\n");
-  const idPrefix = "tree-" + encryptSha256(treeOutput.trim()) + "-";
-  const rootNode = {
-    id: idPrefix + "root",
-    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, index) => {
-      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 = {
-        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;
-  }
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackersheet/next-document-content-components",
-  "version": "0.1.0-alpha.15",
+  "version": "0.1.0-alpha.16",
   "description": "Hacker Sheet document content components for Next.js",
   "keywords": [],
   "repository": {
@@ -34,7 +34,7 @@
     "react-tweet": "^3.2.2",
     "shiki": "^3.13.0",
     "@hackersheet/core": "0.1.0-alpha.11",
-    "@hackersheet/react-document-content": "0.1.0-alpha.12"
+    "@hackersheet/react-document-content": "0.1.0-alpha.13"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",