vitepress-plugin-file-tree 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# vitepress-plugin-file-tree
+
+Render file tree structure in your VitePress site.
+
+在 VitePress 中渲染文件树结构。
+
+## Usage
+
+### With Vitepress-tuck
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-tuck vitepress-plugin-file-tree
+# pnpm
+pnpm add -D vitepress-tuck vitepress-plugin-file-tree
+# yarn
+yarn add -D vitepress-tuck vitepress-plugin-file-tree
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import fileTree from 'vitepress-plugin-file-tree'
+import { defineConfig } from 'vitepress-tuck'
+
+export default defineConfig({
+  plugins: [fileTree()],
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import enhanceApp from 'virtual:enhance-app'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceApp(ctx)
+  },
+} satisfies Theme
+```
+
+### With Vitepress
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-plugin-file-tree
+# pnpm
+pnpm add -D vitepress-plugin-file-tree
+# yarn
+yarn add -D vitepress-plugin-file-tree
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { fileTreeMarkdownPlugin } from 'vitepress-plugin-file-tree'
+
+export default defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(fileTreeMarkdownPlugin)
+    },
+  },
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import { enhanceAppWithFileTree } from 'vitepress-plugin-file-tree/client'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceAppWithFileTree(ctx)
+  },
+} satisfies Theme
+```
+
+## Syntax
+
+Use `::: file-tree` container to create a file tree.
+
+```md
+::: file-tree title="Project Structure"
+- src/
+  - components/
+    - Button.vue
+    - Input.vue
+  - index.ts
+- package.json
+- README.md
+:::
+```
+
+### Node Annotations
+
+| Syntax                 | Description                              |
+| ---------------------- | ---------------------------------------- |
+| `- filename`           | Regular file                             |
+| `- filename/`          | Folder (trailing slash)                  |
+| `- **filename**`       | Highlighted file                         |
+| `- ++ filename`        | Added file (diff add, green `+` mark)    |
+| `- -- filename`        | Removed file (diff remove, red `-` mark) |
+| `- filename # comment` | File with comment                        |
+| `- …` or `- ...`       | Placeholder (non-clickable)              |
+
+Indentation uses 2 spaces per level. A copy button is included to copy the file tree as command-line style text.

package/dist/client/browser/index.d.ts

@@ -0,0 +1,51 @@
+import { EnhanceAppContext } from "vitepress/client";
+
+//#region src/client/VPFileTree.vue.d.ts
+type __VLS_Props$1 = {
+  title?: string;
+  text: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots$1 = {} & {
+  default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/VPFileTreeNode.vue.d.ts
+type __VLS_Props = {
+  type: 'file' | 'folder';
+  filename: string;
+  level: number;
+  diff?: 'add' | 'remove';
+  expanded?: boolean;
+  focus?: boolean;
+  filepath?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+  comment?: (props: typeof __VLS_1) => any;
+} & {
+  default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$1: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithFileTree({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPFileTree, _default$1 as VPFileTreeNode, enhanceAppWithFileTree };

package/dist/client/browser/index.js

@@ -0,0 +1,99 @@
+import "../style.css";
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
+import { VPCopyButton } from "vitepress-plugin-toolkit/client";
+//#region src/client/VPFileTree.vue
+const _hoisted_1$1 = { class: "vp-file-tree has-copy" };
+const _hoisted_2$1 = {
+	key: 0,
+	class: "vp-file-tree-title"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPFileTree",
+	props: {
+		title: {},
+		text: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				__props.title ? (openBlock(), createElementBlock("p", _hoisted_2$1, toDisplayString(__props.title), 1)) : createCommentVNode("v-if", true),
+				createVNode(unref(VPCopyButton), { text: __props.text }, null, 8, ["text"]),
+				renderSlot(_ctx.$slots, "default")
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/client/VPFileTreeNode.vue
+const _hoisted_1 = { class: "vp-file-tree-node" };
+const _hoisted_2 = ["data-filename"];
+const _hoisted_3 = {
+	key: 1,
+	class: "comment"
+};
+const _hoisted_4 = {
+	key: 0,
+	class: "group"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "VPFileTreeNode",
+	props: {
+		type: {},
+		filename: {},
+		level: {},
+		diff: {},
+		expanded: { type: Boolean },
+		focus: { type: Boolean },
+		filepath: {}
+	},
+	setup(__props) {
+		const activeFileTreeNode = inject("active-file-tree-node", ref(""));
+		const onNodeClick = inject("on-file-tree-node-click", () => {});
+		const active = ref(__props.expanded);
+		function nodeClick() {
+			if (__props.filename === "…" || __props.filename === "...") return;
+			onNodeClick(__props.filepath || __props.filename, __props.type);
+		}
+		function toggle(ev) {
+			if (__props.type === "folder") {
+				if (!ev.target.matches(".comment, .comment *")) {
+					active.value = !active.value;
+					nodeClick();
+				}
+			} else nodeClick();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("p", mergeProps({
+				class: ["vp-file-tree-info", {
+					[__props.type]: true,
+					focus: __props.focus,
+					expanded: __props.type === "folder" ? active.value : false,
+					active: __props.type === "file" ? unref(activeFileTreeNode) === __props.filepath : false,
+					diff: __props.diff,
+					add: __props.diff === "add",
+					remove: __props.diff === "remove"
+				}],
+				style: { "--file-tree-level": -__props.level }
+			}, { onClick: toggle }), [
+				__props.filename !== "…" && __props.filename !== "..." ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["vp-icon", {
+						expanded: __props.type === "folder" ? active.value : false,
+						[__props.type]: true
+					}]),
+					"data-filename": __props.filename
+				}, null, 10, _hoisted_2)) : createCommentVNode("v-if", true),
+				createElementVNode("span", { class: normalizeClass(["name", [__props.type]]) }, toDisplayString(__props.filename), 3),
+				_ctx.$slots.comment ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "comment")])) : createCommentVNode("v-if", true)
+			], 16), __props.type === "folder" ? withDirectives((openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, active.value]]) : createCommentVNode("v-if", true)]);
+		};
+	}
+});
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithFileTree({ app }) {
+	app.component("VPFileTree", _sfc_main);
+	app.component("VPFileTreeNode", _sfc_main$1);
+}
+//#endregion
+export { _sfc_main as VPFileTree, _sfc_main$1 as VPFileTreeNode, enhanceAppWithFileTree };

package/dist/client/ssr/index.d.ts

@@ -0,0 +1,51 @@
+import { EnhanceAppContext } from "vitepress/client";
+
+//#region src/client/VPFileTree.vue.d.ts
+type __VLS_Props$1 = {
+  title?: string;
+  text: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots$1 = {} & {
+  default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/VPFileTreeNode.vue.d.ts
+type __VLS_Props = {
+  type: 'file' | 'folder';
+  filename: string;
+  level: number;
+  diff?: 'add' | 'remove';
+  expanded?: boolean;
+  focus?: boolean;
+  filepath?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+  comment?: (props: typeof __VLS_1) => any;
+} & {
+  default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$1: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithFileTree({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPFileTree, _default$1 as VPFileTreeNode, enhanceAppWithFileTree };

package/dist/client/ssr/index.js

@@ -0,0 +1,106 @@
+import { defineComponent, inject, mergeProps, ref, unref, useSSRContext } from "vue";
+import { ssrInterpolate, ssrRenderAttr, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrRenderSlot, ssrRenderStyle } from "vue/server-renderer";
+import { VPCopyButton } from "vitepress-plugin-toolkit/client";
+//#region src/client/VPFileTree.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPFileTree",
+	__ssrInlineRender: true,
+	props: {
+		title: {},
+		text: {}
+	},
+	setup(__props) {
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({ class: "vp-file-tree has-copy" }, _attrs))}>`);
+			if (__props.title) _push(`<p class="vp-file-tree-title">${ssrInterpolate(__props.title)}</p>`);
+			else _push(`<!---->`);
+			_push(ssrRenderComponent(unref(VPCopyButton), { text: __props.text }, null, _parent));
+			ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
+			_push(`</div>`);
+		};
+	}
+});
+const _sfc_setup$1 = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/VPFileTree.vue");
+	return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/VPFileTreeNode.vue
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "VPFileTreeNode",
+	__ssrInlineRender: true,
+	props: {
+		type: {},
+		filename: {},
+		level: {},
+		diff: {},
+		expanded: { type: Boolean },
+		focus: { type: Boolean },
+		filepath: {}
+	},
+	setup(__props) {
+		const activeFileTreeNode = inject("active-file-tree-node", ref(""));
+		const onNodeClick = inject("on-file-tree-node-click", () => {});
+		const active = ref(__props.expanded);
+		function nodeClick() {
+			if (__props.filename === "…" || __props.filename === "...") return;
+			onNodeClick(__props.filepath || __props.filename, __props.type);
+		}
+		function toggle(ev) {
+			if (__props.type === "folder") {
+				if (!ev.target.matches(".comment, .comment *")) {
+					active.value = !active.value;
+					nodeClick();
+				}
+			} else nodeClick();
+		}
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({ class: "vp-file-tree-node" }, _attrs))}><p${ssrRenderAttrs(mergeProps({
+				class: ["vp-file-tree-info", {
+					[__props.type]: true,
+					focus: __props.focus,
+					expanded: __props.type === "folder" ? active.value : false,
+					active: __props.type === "file" ? unref(activeFileTreeNode) === __props.filepath : false,
+					diff: __props.diff,
+					add: __props.diff === "add",
+					remove: __props.diff === "remove"
+				}],
+				style: { "--file-tree-level": -__props.level }
+			}, { onClick: toggle }))}>`);
+			if (__props.filename !== "…" && __props.filename !== "...") _push(`<span class="${ssrRenderClass([{
+				expanded: __props.type === "folder" ? active.value : false,
+				[__props.type]: true
+			}, "vp-icon"])}"${ssrRenderAttr("data-filename", __props.filename)}></span>`);
+			else _push(`<!---->`);
+			_push(`<span class="${ssrRenderClass([[__props.type], "name"])}">${ssrInterpolate(__props.filename)}</span>`);
+			if (_ctx.$slots.comment) {
+				_push(`<span class="comment">`);
+				ssrRenderSlot(_ctx.$slots, "comment", {}, null, _push, _parent);
+				_push(`</span>`);
+			} else _push(`<!---->`);
+			_push(`</p>`);
+			if (__props.type === "folder") {
+				_push(`<div class="group" style="${ssrRenderStyle(active.value ? null : { display: "none" })}">`);
+				ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
+				_push(`</div>`);
+			} else _push(`<!---->`);
+			_push(`</div>`);
+		};
+	}
+});
+const _sfc_setup = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/VPFileTreeNode.vue");
+	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithFileTree({ app }) {
+	app.component("VPFileTree", _sfc_main);
+	app.component("VPFileTreeNode", _sfc_main$1);
+}
+//#endregion
+export { _sfc_main as VPFileTree, _sfc_main$1 as VPFileTreeNode, enhanceAppWithFileTree };

package/dist/client/style.css

@@ -0,0 +1,194 @@
+@import url("vitepress-plugin-toolkit/styles/copy-button.css");
+
+:root {
+  --vp-file-tree-bg: var(--vp-code-block-bg);
+
+  --vp-file-tree-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.55.55 0 0 1 0-.771a.53.53 0 0 1 .759 0l4.61 4.684a1.65 1.65 0 0 1 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0a.55.55 0 0 1 0-.771'/%3E%3C/svg%3E");
+  --vp-file-tree-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%23c5c5c5' d='M20.414 2H5v28h22V8.586ZM7 28V4h12v6h6v18Z'/%3E%3C/svg%3E");
+  --vp-file-tree-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%23c09553' d='M27.5 5.5h-9.3l-2.1 4.2H4.4v16.8h25.2v-21Zm0 4.2h-8.2l1.1-2.1h7.1Z'/%3E%3C/svg%3E");
+  --vp-file-tree-icon-folder-expanded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%23dcb67a' d='M27.4 5.5h-9.2l-2.1 4.2H4.3v16.8h25.2v-21Zm0 18.7H6.6V11.8h20.8Zm0-14.5h-8.2l1-2.1h7.1v2.1Z'/%3E%3Cpath fill='%23dcb67a' d='M25.7 13.7H.5l3.8 12.8h25.2z'/%3E%3C/svg%3E");
+}
+
+.vp-file-tree {
+  position: relative;
+  max-width: 100%;
+  padding: 16px;
+  overflow: auto hidden;
+  font-size: 14px;
+  background-color: var(--vp-file-tree-bg);
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+  transition: border 0.25s ease, background-color 0.25s ease;
+}
+
+.vp-file-tree .vp-file-tree-title {
+  padding-block: 8px;
+  padding-inline: 16px;
+  margin-block: -16px 8px;
+  margin-inline: -16px;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: color 0.25s ease, border-color 0.25s ease;
+}
+
+.vp-file-tree .vp-file-tree-title + .vp-copy {
+  top: calc(45px + 1em) !important;
+}
+
+.vp-file-tree .vp-file-tree-info {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: max-content;
+  height: 28px;
+  padding-block: 2px;
+  margin-block: 0;
+  margin-inline-start: 16px;
+  line-height: 24px;
+  text-wrap: nowrap;
+}
+
+.vp-file-tree .vp-file-tree-info::after {
+  position: absolute;
+  top: 0;
+  right: -16px;
+  bottom: 0;
+  left: calc(var(--file-tree-level) * 10.5px - 32px);
+  z-index: 0;
+  display: block;
+  pointer-events: none;
+  content: "";
+  background-color: transparent;
+  transition: background-color 0.25s ease;
+}
+
+.vp-file-tree .vp-file-tree-info.active::after,
+.vp-file-tree .vp-file-tree-info:not(.diff):hover::after {
+  background-color: var(--vp-c-default-soft);
+}
+
+.vp-file-tree .vp-file-tree-info.diff::after {
+  padding-inline-start: 4px;
+  font-size: 1.25em;
+}
+
+.vp-file-tree .vp-file-tree-info.diff.add::after {
+  color: var(--vp-c-success-1);
+  content: "+";
+  background-color: var(--vp-c-success-soft);
+}
+
+.vp-file-tree .vp-file-tree-info.diff.remove::after {
+  padding-inline-start: 6px;
+  color: var(--vp-c-danger-1);
+  content: "-";
+  background-color: var(--vp-c-danger-soft);
+}
+
+.vp-file-tree .vp-file-tree-info.folder {
+  cursor: pointer;
+}
+
+.vp-file-tree .vp-file-tree-info.folder::before {
+  position: absolute;
+  top: 8px;
+  left: -16px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  content: "";
+  background-color: currentcolor;
+  -webkit-mask: var(--vp-file-tree-icon-arrow) no-repeat;
+  mask: var(--vp-file-tree-icon-arrow) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  transition: color 0.25s ease, transform 0.25s ease;
+  transform: rotate(0);
+}
+
+.vp-file-tree .vp-file-tree-info.folder.expanded::before {
+  transform: rotate(90deg);
+}
+
+.vp-file-tree .vp-file-tree-info .name {
+  position: relative;
+  flex-shrink: 99;
+  min-width: 0;
+  font-family: var(--vp-font-family-mono);
+}
+
+.vp-file-tree .vp-file-tree-info.folder .name {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s ease;
+}
+
+.vp-file-tree .vp-file-tree-info.focus .name {
+  padding-inline: 4px;
+  margin-block: 0;
+  margin-inline: -4px;
+  font-weight: bold;
+  color: var(--vp-c-bg);
+  background-color: var(--vp-c-brand-2);
+  border-radius: 4px;
+  transition: color 0.25s ease, background-color 0.25s ease;
+}
+
+.vp-file-tree .vp-file-tree-info.active .name {
+  color: var(--vp-c-brand-1);
+}
+
+.vp-file-tree .vp-file-tree-info:not(.focus).folder .name:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.vp-file-tree .vp-file-tree-info .comment {
+  display: inline-block;
+  flex: 1 2;
+  height: 28px;
+  padding-inline: 20px 16px;
+  margin-block: -2px;
+  line-height: 28px;
+  color: var(--vp-c-text-3);
+  cursor: auto;
+  transition: color 0.25s ease;
+}
+
+.vp-file-tree .vp-file-tree-node .group {
+  position: relative;
+  min-width: max-content;
+  margin-inline-start: 10px;
+}
+
+.vp-file-tree .vp-file-tree-node .group::before {
+  position: absolute;
+  top: 0;
+  left: -4.5px;
+  width: 1px;
+  height: 100%;
+  content: "";
+  background-color: var(--vp-c-divider);
+  transition: background-color 0.25s ease;
+}
+
+.vp-file-tree .vp-icon {
+  width: 1.2em;
+  height: 1.2em;
+  margin: 0;
+}
+
+.vp-file-tree .vp-icon:where(.file) {
+  --icon: var(--vp-file-tree-icon-file);
+}
+
+.vp-file-tree .vp-icon:where(.folder) {
+  --icon: var(--vp-file-tree-icon-folder);
+}
+
+.vp-file-tree .vp-icon:where(.expanded.folder) {
+  --icon: var(--vp-file-tree-icon-folder-expanded);
+}

package/dist/node/index.d.ts

@@ -0,0 +1,64 @@
+import { PluginSimple } from "markdown-it";
+
+//#region src/node/fileTreePlugin.d.ts
+/**
+ * File tree node structure
+ *
+ * 文件树节点结构
+ */
+interface FileTreeNode {
+  filename: string;
+  comment?: string;
+  focus?: boolean;
+  expanded?: boolean;
+  type: 'folder' | 'file';
+  diff?: 'add' | 'remove';
+  level: number;
+  children: FileTreeNode[];
+}
+/**
+ * File tree container attributes
+ *
+ * 文件树容器属性
+ */
+interface FileTreeAttrs {
+  title?: string;
+}
+/**
+ * Parse raw file tree content to node tree structure
+ *
+ * 解析原始文件树内容为节点树结构
+ *
+ * @param content - Raw file tree text content / 文件树的原始文本内容
+ * @returns File tree node array / 文件树节点数组
+ */
+declare function parseFileTreeRawContent(content: string): FileTreeNode[];
+/**
+ * Parse single node info string, extract filename, comment, type, etc.
+ *
+ * 解析单个节点的 info 字符串，提取文件名、注释、类型等属性
+ *
+ * @param info - Node description string / 节点描述字符串
+ * @returns File tree node props / 文件树节点属性
+ */
+declare function parseFileTreeNodeInfo(info: string): Omit<FileTreeNode, 'children' | 'level'>;
+/**
+ * @example
+ * ```ts
+ * import { fileTreeMarkdownPlugin } from 'vitepress-plugin-file-tree'
+ * import { defineConfig } from 'vitepress'
+ * export default defineConfig({
+ *   markdown: {
+ *     config: (md) => {
+ *       md.use(fileTreeMarkdownPlugin)
+ *     },
+ *   },
+ * })
+ * ```
+ */
+declare const fileTreeMarkdownPlugin: PluginSimple;
+//#endregion
+//#region src/node/index.d.ts
+declare const _default: (option?: unknown) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+export { type FileTreeAttrs, type FileTreeNode, _default as default, fileTreeMarkdownPlugin, parseFileTreeNodeInfo, parseFileTreeRawContent };

package/dist/node/index.js

@@ -0,0 +1,176 @@
+import { definePlugin } from "vitepress-tuck";
+import { removeTrailingSlash } from "@pengzhanbo/utils";
+import { createContainerSyntaxPlugin, stringifyAttrs } from "vitepress-plugin-toolkit";
+//#region src/node/fileTreePlugin.ts
+/**
+* Parse raw file tree content to node tree structure
+*
+* 解析原始文件树内容为节点树结构
+*
+* @param content - Raw file tree text content / 文件树的原始文本内容
+* @returns File tree node array / 文件树节点数组
+*/
+function parseFileTreeRawContent(content) {
+	const root = {
+		level: -1,
+		children: []
+	};
+	const stack = [root];
+	const lines = content.trimEnd().split("\n");
+	const spaceLength = lines[0]?.match(/^\s*/)?.[0].length ?? 0;
+	for (const line of lines) {
+		const match = line.match(/^(\s*)-(.*)$/);
+		if (!match) continue;
+		const level = Math.floor((match[1].length - spaceLength) / 2);
+		const info = match[2].trim();
+		while (stack.length > 0 && stack[stack.length - 1].level >= level) stack.pop();
+		const parent = stack[stack.length - 1];
+		const node = {
+			level,
+			children: [],
+			...parseFileTreeNodeInfo(info)
+		};
+		parent.children.push(node);
+		stack.push(node);
+	}
+	return root.children;
+}
+/**
+* Regex for focus marker
+*
+* 高亮标记正则
+*/
+const RE_FOCUS = /^\*\*(.*)\*\*(?:$|\s+)/;
+/**
+* Parse single node info string, extract filename, comment, type, etc.
+*
+* 解析单个节点的 info 字符串，提取文件名、注释、类型等属性
+*
+* @param info - Node description string / 节点描述字符串
+* @returns File tree node props / 文件树节点属性
+*/
+function parseFileTreeNodeInfo(info) {
+	let filename = "";
+	let comment = "";
+	let focus = false;
+	let expanded = true;
+	let type = "file";
+	let diff;
+	if (info.startsWith("++")) {
+		info = info.slice(2).trim();
+		diff = "add";
+	} else if (info.startsWith("--")) {
+		info = info.slice(2).trim();
+		diff = "remove";
+	}
+	info = info.replace(RE_FOCUS, (_, matched) => {
+		filename = matched;
+		focus = true;
+		return "";
+	});
+	if (filename === "" && !focus) {
+		const sharpIndex = info.indexOf("#");
+		filename = info.slice(0, sharpIndex === -1 ? info.length : sharpIndex).trim();
+		info = sharpIndex === -1 ? "" : info.slice(sharpIndex);
+	}
+	comment = info.trim();
+	if (filename.endsWith("/")) {
+		type = "folder";
+		expanded = false;
+		filename = removeTrailingSlash(filename);
+	}
+	return {
+		filename,
+		comment,
+		focus,
+		expanded,
+		type,
+		diff
+	};
+}
+/**
+* Convert file tree to command line text format
+*
+* 将文件树转换为命令行文本格式
+*
+* @param nodes - File tree nodes / 文件树节点
+* @param prefix - Line prefix / 行前缀
+* @returns CMD text / CMD 文本
+*/
+function fileTreeToCMDText(nodes, prefix = "") {
+	let content = prefix ? "" : ".\n";
+	for (let i = 0, l = nodes.length; i < l; i++) {
+		const { filename, children } = nodes[i];
+		content += `${prefix + (i === l - 1 ? "└── " : "├── ")}${filename}\n`;
+		const child = children.filter((n) => n.filename !== "…");
+		if (child.length) content += fileTreeToCMDText(child, prefix + (i === l - 1 ? "    " : "│   "));
+	}
+	return content;
+}
+/**
+* @example
+* ```ts
+* import { fileTreeMarkdownPlugin } from 'vitepress-plugin-file-tree'
+* import { defineConfig } from 'vitepress'
+* export default defineConfig({
+*   markdown: {
+*     config: (md) => {
+*       md.use(fileTreeMarkdownPlugin)
+*     },
+*   },
+* })
+* ```
+*/
+const fileTreeMarkdownPlugin = (md) => {
+	/**
+	* Recursively render file tree nodes
+	*
+	* 递归渲染文件树节点
+	*/
+	const renderFileTree = (nodes, meta) => nodes.map((node) => {
+		const { level, children, filename, comment, focus, expanded, type, diff } = node;
+		if (children.length === 0 && type === "folder") children.push({
+			level: level + 1,
+			children: [],
+			filename: "…",
+			type: "file"
+		});
+		const nodeType = children.length > 0 ? "folder" : type;
+		const renderedComment = comment ? `<template #comment>${md.renderInline(comment.replaceAll("#", "#"))}</template>` : "";
+		return `<VPFileTreeNode${stringifyAttrs({
+			expanded: nodeType === "folder" ? expanded : false,
+			focus,
+			type: nodeType,
+			diff,
+			filename,
+			level
+		}, false, ["filename"])}>
+${renderedComment}${children.length > 0 ? renderFileTree(children, meta) : ""}
+</VPFileTreeNode>`;
+	}).join("\n");
+	createContainerSyntaxPlugin(md, "file-tree", (tokens, index) => {
+		const token = tokens[index];
+		const nodes = parseFileTreeRawContent(token.content);
+		const meta = token.meta;
+		const text = fileTreeToCMDText(nodes).trim();
+		return `<VPFileTree${stringifyAttrs({
+			title: meta.title,
+			text
+		})}>${renderFileTree(nodes, meta)}</VPFileTree>`;
+	});
+};
+//#endregion
+//#region src/node/index.ts
+var node_default = definePlugin(() => ({
+	name: "vitepress-plugin-file-tree",
+	client: { enhance: "enhanceAppWithFileTree" },
+	markdown: { config: (md) => {
+		md.use(fileTreeMarkdownPlugin);
+	} },
+	vite: {
+		optimizeDeps: { exclude: ["@pengzhanbo/utils"] },
+		ssr: { noExternal: ["vitepress-plugin-file-tree"] }
+	}
+}));
+//#endregion
+export { node_default as default, fileTreeMarkdownPlugin, parseFileTreeNodeInfo, parseFileTreeRawContent };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "vitepress-plugin-file-tree",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Render file tree structure in your VitePress site.",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
+  "license": "MIT",
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "file-tree"
+  ],
+  "exports": {
+    ".": "./dist/node/index.js",
+    "./client": {
+      "browser": "./dist/client/browser/index.js",
+      "default": "./dist/client/ssr/index.js"
+    },
+    "./style.css": "./dist/client/style.css"
+  },
+  "module": "./dist/node/index.js",
+  "types": "./dist/node/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1.6.4 || ^2.0.0-alpha.17",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@pengzhanbo/utils": "^3.7.3",
+    "@vueuse/core": "^14.3.0",
+    "vitepress-plugin-toolkit": "0.1.0",
+    "vitepress-tuck": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf --glob ./dist",
+    "dev": "pnpm '/(tsdown|copy):watch/'",
+    "build": "pnpm tsdown && pnpm copy",
+    "copy": "cpx \"src/**/*.css\" dist",
+    "copy:watch": "pnpm copy -w",
+    "tsdown": "tsdown --config-loader unrun",
+    "tsdown:watch": "pnpm tsdown -w"
+  }
+}