@tnotesjs/core 0.3.0 → 0.4.1

package/dist/vitepress/config/index.js

@@ -17,6 +17,20 @@ import fs3 from "fs";
 import path5 from "path";
 import { defineConfig } from "vitepress";
 
+// vitepress/config/dependencyOptimization.ts
+var DEFAULT_OPTIMIZE_DEPS_INCLUDE = [
+  // VitePress 内部 CJS 依赖 —— 需要 Vite 预构建为 ESM
+  "vitepress > @vscode/markdown-it-katex",
+  "vitepress > @braintree/sanitize-url",
+  "vitepress > dayjs",
+  "vitepress > dayjs/plugin/utc",
+  "vitepress > dayjs/plugin/localizedFormat",
+  // Mermaid 11 的 ESM chunk 默认导入 CommonJS fastdom。pnpm 的严格
+  // 依赖布局下 Vite 无法从知识库根目录自动发现这条嵌套依赖，开发
+  // 模式会直接把 fastdom.js 当作 ESM 加载并导致整页白屏。
+  "@tnotesjs/core > mermaid > fastdom"
+];
+
 // vitepress/configs/constants.ts
 function getIgnoreList(config) {
   return [...config.ignore_dirs.map((dir) => `**/${dir}/**`)];
@@ -49,6 +63,103 @@ import markdownItContainer from "markdown-it-container";
 import mila from "markdown-it-link-attributes";
 import markdownItTaskLists from "markdown-it-task-lists";
 import path from "path";
+
+// vitepress/components/MindmapPreview/compat.ts
+function cleanHeadingText(value) {
+  return value.trim().replace(/\s+#+\s*$/, "").trim();
+}
+function promoteLegacyRootList(body, rootTitle) {
+  const firstContentIndex = body.findIndex((line) => line.trim() !== "");
+  if (firstContentIndex < 0) return body;
+  const firstItem = body[firstContentIndex].match(/^[-+*]\s+(.+?)\s*$/);
+  if (!firstItem || cleanHeadingText(firstItem[1]) !== rootTitle) return body;
+  const descendants = body.slice(firstContentIndex + 1);
+  if (descendants.some((line) => line.trim() !== "" && !/^\s{2,}/.test(line))) return body;
+  return [
+    ...body.slice(0, firstContentIndex),
+    ...descendants.map((line) => line.replace(/^ {2}/, ""))
+  ];
+}
+function parseMarkmapFence(openLine) {
+  const fenceBody = openLine.trim().replace(/^`+\s*/, "");
+  const nameMatch = fenceBody.match(/^(mindmap|markmap)(?=\s|\{|\[|$)/);
+  if (!nameMatch) return {};
+  let rest = fenceBody.slice(nameMatch[1].length).trim();
+  const options = {};
+  const titleMatch = rest.match(/\[([^\]]+)\]/);
+  if (titleMatch) {
+    options.title = titleMatch[1].trim();
+    rest = `${rest.slice(0, titleMatch.index)} ${rest.slice((titleMatch.index ?? 0) + titleMatch[0].length)}`.trim();
+  }
+  const braceMatch = rest.match(/\{([^}]*)\}/);
+  const paramPart = braceMatch ? braceMatch[1].trim() : rest;
+  const tokens = paramPart.match(/"[^"]*"|'[^']*'|\S+/g) ?? [];
+  for (const [index, token] of tokens.entries()) {
+    if (/^\d+$/.test(token) && index === 0) {
+      options.initialExpandLevel = Number(token);
+      continue;
+    }
+    const pair = token.match(/^([^=:\s]+)\s*(?:=|:)\s*(.+)$/);
+    if (!pair || pair[1] !== "initialExpandLevel") continue;
+    const value = pair[2].replace(/^['"]|['"]$/g, "");
+    if (/^\d+$/.test(value)) options.initialExpandLevel = Number(value);
+  }
+  return options;
+}
+function parseMindmapReference(line) {
+  const match = line.trim().match(/^<<<\s+(.+?)\s*$/);
+  if (!match) return null;
+  let rest = match[1].trim();
+  let title;
+  const titleMatch = rest.match(/\s+\[([^\]]+)\]\s*$/);
+  if (titleMatch) {
+    title = cleanHeadingText(titleMatch[1]) || void 0;
+    rest = rest.slice(0, titleMatch.index).trim();
+  }
+  const path6 = rest.replace(/^(?:"([\s\S]*)"|'([\s\S]*)')$/, "$1$2").trim();
+  return path6 ? { path: path6, title } : null;
+}
+function normalizeMindmapMarkdown(source, options = {}) {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  let existingTitle = "";
+  let rootIndex = -1;
+  for (let index = 0; index < lines.length; index++) {
+    const match = lines[index].match(/^\s{0,3}#(?!#)\s+(.+?)\s*$/);
+    if (!match) continue;
+    existingTitle = cleanHeadingText(match[1]);
+    rootIndex = index;
+    break;
+  }
+  const rootTitle = cleanHeadingText(options.title || existingTitle || options.defaultTitle || "root") || "root";
+  const body = [];
+  let headingDepth = null;
+  for (let index = 0; index < lines.length; index++) {
+    if (index === rootIndex) continue;
+    const line = lines[index];
+    const heading = line.match(/^\s{0,3}(#{2,6})\s+(.+?)\s*$/);
+    if (heading) {
+      headingDepth = heading[1].length - 2;
+      body.push(`${"  ".repeat(headingDepth)}- ${cleanHeadingText(heading[2])}`);
+      continue;
+    }
+    const listItem = line.match(/^(\s*)([-+*])\s+(.+)$/);
+    if (listItem && headingDepth !== null) {
+      body.push(`${"  ".repeat(headingDepth + 1)}${line}`);
+      continue;
+    }
+    body.push(line);
+  }
+  const normalizedBody = promoteLegacyRootList(body, rootTitle);
+  while (normalizedBody[0]?.trim() === "") normalizedBody.shift();
+  while (normalizedBody[normalizedBody.length - 1]?.trim() === "") normalizedBody.pop();
+  return normalizedBody.length > 0 ? `# ${rootTitle}
+
+${normalizedBody.join("\n")}
+` : `# ${rootTitle}
+`;
+}
+
+// vitepress/configs/markdown.config.ts
 function esc(s = "") {
   return s.replace(
     /[&<>"']/g,
@@ -80,12 +191,11 @@ var simpleMermaidMarkdown = (md) => {
     return fence(tokens, index, options, env, slf);
   };
 };
-function configureMarkMapContainer(md) {
+function configureMindmapContainer(md) {
   md.use(markdownItContainer, "markmap", {
     marker: "`",
     validate(params) {
-      const p = (params || "").trim();
-      return p.startsWith("markmap");
+      return (params || "").trim().startsWith("markmap");
     },
     render() {
       return "";
@@ -98,26 +208,34 @@ function configureMarkMapContainer(md) {
     for (let i = 0; i < tokens.length; i++) {
       const t = tokens[i];
       if (t.type === "container_markmap_open") {
+        const containerName = "markmap";
+        const closeType = "container_markmap_close";
         let j = i + 1;
-        while (j < tokens.length && tokens[j].type !== "container_markmap_close")
+        while (j < tokens.length && tokens[j].type !== closeType)
           j++;
         if (j >= tokens.length) continue;
         const open = t;
         const startLine = open.map ? open.map[0] + 1 : null;
         const endLine = open.map ? open.map[1] - 1 : null;
         const params = {};
+        let explicitTitle;
         if (open.map && typeof open.map[0] === "number") {
           const openLine = (lines[open.map[0]] || "").trim();
+          const fenceOptions = parseMarkmapFence(openLine);
+          explicitTitle = fenceOptions.title;
           let paramPart = "";
           const braceMatch = openLine.match(/\{([^}]*)\}/);
           if (braceMatch) {
             paramPart = braceMatch[1].trim();
           } else {
             const after = openLine.replace(/^`+\s*/, "");
-            if (after.startsWith("markmap")) {
-              paramPart = after.slice("markmap".length).trim();
+            if (after.startsWith(containerName)) {
+              paramPart = after.slice(containerName.length).trim();
             }
           }
+          if (fenceOptions.initialExpandLevel !== void 0) {
+            params.initialExpandLevel = fenceOptions.initialExpandLevel;
+          }
           if (paramPart) {
             const tokenArr = paramPart.match(/"[^"]*"|'[^']*'|\S+/g) || [];
             let startIdx = 0;
@@ -153,9 +271,11 @@ function configureMarkMapContainer(md) {
           }
         }
         const firstNonEmptyLine = (content || "").split("\n").find((ln) => ln.trim() !== "") || "";
-        const refMatch = firstNonEmptyLine.trim().match(/^<<<\s*(.+)$/);
-        if (refMatch) {
-          const refRaw = refMatch[1].trim().replace(/^['"]|['"]$/g, "");
+        const reference = parseMindmapReference(firstNonEmptyLine);
+        let referencedTitle;
+        if (reference) {
+          const refRaw = reference.path;
+          referencedTitle = reference.title;
           try {
             const env = state.env || {};
             const possibleRel = env.relativePath || env.path || env.filePath || env.file || "";
@@ -174,13 +294,13 @@ function configureMarkMapContainer(md) {
             content = fileContent;
           } catch (err) {
             const errorMsg = err instanceof Error ? err.message : String(err);
-            content = `Failed to load referenced file: ${esc(
-              String(refRaw)
-            )}
-
-Error: ${esc(errorMsg)}`;
+            content = `- Failed to load referenced file: ${esc(String(refRaw))}
+  - Error: ${esc(errorMsg)}`;
           }
         }
+        content = normalizeMindmapMarkdown(content, {
+          title: explicitTitle || referencedTitle
+        });
         const encodedContent = encodeURIComponent(content.trim());
         let propsStr = `content="${encodedContent}"`;
         for (const [k, v] of Object.entries(params)) {
@@ -191,7 +311,7 @@ Error: ${esc(errorMsg)}`;
             propsStr += ` ${k}="${safe}"`;
           }
         }
-        const html = `<MarkMap ${propsStr}></MarkMap>
+        const html = `<MindmapPreview ${propsStr}></MindmapPreview>
 `;
         const htmlToken = new state.Token("html_block", "", 0);
         htmlToken.content = html;
@@ -201,6 +321,40 @@ Error: ${esc(errorMsg)}`;
     return true;
   });
 }
+function configureMindmapFence(md) {
+  const fence = md.renderer.rules.fence ? md.renderer.rules.fence.bind(md.renderer.rules) : () => "";
+  md.renderer.rules.fence = (tokens, index, options, env, slf) => {
+    const token = tokens[index];
+    const info = token.info.trim();
+    if (!/^mindmap(?=\s|\{|\[|$)/.test(info)) {
+      return fence(tokens, index, options, env, slf);
+    }
+    const fenceOptions = parseMarkmapFence(info);
+    let content = token.content;
+    const firstNonEmptyLine = content.split("\n").find((line) => line.trim()) ?? "";
+    const reference = parseMindmapReference(firstNonEmptyLine);
+    if (reference) {
+      const possibleRel = env?.relativePath || env?.path || env?.filePath || env?.file || "";
+      const refFullPath = path.isAbsolute(reference.path) ? reference.path : path.resolve(process.cwd(), possibleRel ? path.dirname(possibleRel) : "", reference.path);
+      try {
+        content = fs.readFileSync(refFullPath, "utf8");
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        content = `- Failed to load referenced file: ${reference.path}
+  - Error: ${message}`;
+      }
+    }
+    content = normalizeMindmapMarkdown(content, {
+      title: fenceOptions.title || reference?.title
+    });
+    const props = [
+      `content="${encodeURIComponent(content.trim())}"`,
+      fenceOptions.initialExpandLevel === void 0 ? "" : `:initialExpandLevel="${fenceOptions.initialExpandLevel}"`
+    ].filter(Boolean).join(" ");
+    return `<MindmapPreview ${props}></MindmapPreview>
+`;
+  };
+}
 function configureSwiperContainer(md) {
   let __tn_swiper_uid = 0;
   let __tn_rules_stack = [];
@@ -269,7 +423,8 @@ function getMarkdownConfig() {
         return true;
       });
       simpleMermaidMarkdown(md);
-      configureMarkMapContainer(md);
+      configureMindmapContainer(md);
+      configureMindmapFence(md);
       md.use(markdownItTaskLists);
       md.use(mila, {
         attrs: {
@@ -1648,14 +1803,7 @@ function defineNotesConfig(overrides = {}) {
         ...overrideVite?.resolve
       },
       optimizeDeps: {
-        include: [
-          // VitePress 内部 CJS 依赖 —— 需要 Vite 预构建为 ESM
-          "vitepress > @vscode/markdown-it-katex",
-          "vitepress > @braintree/sanitize-url",
-          "vitepress > dayjs",
-          "vitepress > dayjs/plugin/utc",
-          "vitepress > dayjs/plugin/localizedFormat"
-        ],
+        include: [...DEFAULT_OPTIMIZE_DEPS_INCLUDE],
         ...overrideVite?.optimizeDeps
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/core",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "TNotes 知识库核心框架 —— 基于 VitePress 的笔记管理系统",
   "type": "module",
   "packageManager": "pnpm@10.17.1",
@@ -49,7 +49,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "d3": "^7.9.0",
+    "@tnotesjs/mindmap-core": "^0.2.0",
     "echarts": "^6.0.0",
     "github-slugger": "^2.0.0",
     "markdown-it-container": "^4.0.0",
@@ -57,11 +57,8 @@
     "markdown-it-mathjax3": "^4.3.2",
     "markdown-it-task-lists": "^2.1.1",
     "marked": "^15.0.11",
-    "minisearch": "^7.2.0",
-    "markmap-lib": "^0.18.12",
-    "markmap-toolbar": "^0.18.12",
-    "markmap-view": "^0.18.12",
     "mermaid": "^11.5.0",
+    "minisearch": "^7.2.0",
     "sass-embedded": "^1.90.0",
     "swiper": "^11.2.1",
     "uuid": "^11.1.0",

package/vitepress/components/MindmapPreview/InlineRuns.ts

@@ -0,0 +1,25 @@
+import { parseInlineSegments } from '@tnotesjs/mindmap-core'
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'MindmapInlineRuns',
+  props: {
+    raw: { type: String, default: '' },
+  },
+  setup(props) {
+    return () => h('span', { class: 'mindmap-inline-runs' }, parseInlineSegments(props.raw).map((segment) => {
+      const classes = Object.entries(segment.marks)
+        .filter(([, enabled]) => enabled)
+        .map(([name]) => `is-${name}`)
+      if (segment.link) {
+        return h('a', {
+          class: ['mindmap-inline-run', 'is-link', ...classes],
+          href: segment.link.url,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }, segment.text)
+      }
+      return h('span', { class: ['mindmap-inline-run', ...classes] }, segment.text)
+    }))
+  },
+})

package/vitepress/components/MindmapPreview/MindmapOutlineNode.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import InlineRuns from './InlineRuns'
+
+import type { MindmapNode } from '@tnotesjs/mindmap-core'
+
+defineOptions({ name: 'MindmapOutlineNode' })
+
+defineProps<{
+  node: MindmapNode
+  version: number
+  root?: boolean
+}>()
+
+defineEmits<{
+  toggle: [id: string]
+}>()
+</script>
+
+<template>
+  <li class="mindmap-outline-node" :class="{ 'is-root': root, 'is-done': node.content.checked === true }">
+    <div class="mindmap-outline-row">
+      <button
+        v-if="node.children.length > 0"
+        type="button"
+        class="mindmap-outline-toggle"
+        :aria-label="node.collapsed ? '展开主题' : '折叠主题'"
+        :aria-expanded="!node.collapsed"
+        @click="$emit('toggle', node.id)"
+      >
+        {{ node.collapsed ? '›' : '⌄' }}
+      </button>
+      <span v-else class="mindmap-outline-leaf" aria-hidden="true">•</span>
+      <input
+        v-if="node.content.checked !== null && !root"
+        class="mindmap-outline-checkbox"
+        type="checkbox"
+        :checked="node.content.checked"
+        disabled
+        aria-label="只读待办状态"
+      />
+      <span class="mindmap-outline-label">
+        <InlineRuns :raw="node.content.image ? node.content.text : node.content.raw" />
+      </span>
+    </div>
+    <img
+      v-if="node.content.image"
+      class="mindmap-outline-image"
+      :src="node.content.image.src"
+      :alt="node.content.image.alt"
+      :style="node.content.image.width ? { width: `${node.content.image.width}px` } : undefined"
+    />
+    <ul v-if="node.children.length > 0 && !node.collapsed" class="mindmap-outline-children">
+      <MindmapOutlineNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :version="version"
+        @toggle="$emit('toggle', $event)"
+      />
+    </ul>
+  </li>
+</template>

package/vitepress/components/MindmapPreview/MindmapPreview.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { CanvasViewer, MindmapSession } from '@tnotesjs/mindmap-core'
+import { onContentUpdated, useData } from 'vitepress'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+
+import { normalizeMindmapMarkdown } from './compat'
+import { applyInitialExpandLevel } from './expandLevel'
+import MindmapOutlineNode from './MindmapOutlineNode.vue'
+
+type PreviewView = 'mindmap' | 'outline' | 'source'
+
+const props = withDefaults(defineProps<{
+  content?: string
+  initialExpandLevel?: number
+}>(), {
+  content: '',
+  initialExpandLevel: 3,
+})
+
+const { isDark } = useData()
+const activeView = ref<PreviewView>('mindmap')
+const canvasHost = ref<HTMLElement | null>(null)
+const session = shallowRef<MindmapSession | null>(null)
+const renderVersion = ref(0)
+let viewer: CanvasViewer | null = null
+let mounted = false
+
+function decodeContent(value: string): string {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+const normalizedContent = computed(() => normalizeMindmapMarkdown(decodeContent(props.content)))
+
+function createViewer(): void {
+  if (!mounted || !canvasHost.value || !session.value || viewer) return
+  viewer = new CanvasViewer(canvasHost.value, session.value, {
+    theme: isDark.value ? 'dark' : 'light',
+  })
+}
+
+function rebuildSession(): void {
+  viewer?.destroy()
+  viewer = null
+  const next = new MindmapSession({
+    markdown: normalizedContent.value,
+    fileName: 'mindmap-preview.tn-mindmap.md',
+  })
+  applyInitialExpandLevel(next, props.initialExpandLevel)
+  const invalidate = () => { renderVersion.value += 1 }
+  next.on('collapseChange', invalidate)
+  next.on('focusChange', invalidate)
+  next.on('change', invalidate)
+  session.value = next
+  renderVersion.value += 1
+  void nextTick(createViewer)
+}
+
+function setView(view: PreviewView): void {
+  activeView.value = view
+  if (view === 'mindmap') void nextTick(() => viewer?.zoomToFit())
+}
+
+function toggleNode(id: string): void {
+  session.value?.toggleCollapse(id)
+}
+
+function exitFocusTo(index: number): void {
+  session.value?.exitFocusTo(index)
+}
+
+watch([normalizedContent, () => props.initialExpandLevel], rebuildSession, { immediate: true })
+watch(isDark, (dark) => viewer?.setTheme(dark ? 'dark' : 'light'))
+
+onMounted(() => {
+  mounted = true
+  createViewer()
+})
+
+onContentUpdated(() => {
+  if (activeView.value === 'mindmap') void nextTick(() => viewer?.zoomToFit())
+})
+
+onBeforeUnmount(() => {
+  mounted = false
+  viewer?.destroy()
+  viewer = null
+})
+</script>
+
+<template>
+  <section class="mindmap-preview" :class="{ 'is-dark': isDark }">
+    <header class="mindmap-preview-header">
+      <nav class="mindmap-preview-tabs" aria-label="脑图预览视图">
+        <button
+          v-for="item in ([['mindmap', '脑图'], ['outline', '大纲'], ['source', '源码']] as const)"
+          :key="item[0]"
+          type="button"
+          :class="{ 'is-active': activeView === item[0] }"
+          @click="setView(item[0])"
+        >
+          {{ item[1] }}
+        </button>
+      </nav>
+      <button v-if="activeView === 'mindmap'" type="button" class="mindmap-fit" @click="viewer?.zoomToFit()">
+        适应视口
+      </button>
+    </header>
+
+    <nav v-if="session && session.focusPath.length > 0" class="mindmap-focus-path" aria-label="当前主题路径">
+      <button type="button" @click="exitFocusTo(0)">全部</button>
+      <template v-for="(node, index) in session.focusPath" :key="node.id">
+        <span aria-hidden="true">/</span>
+        <button type="button" @click="exitFocusTo(index + 1)">{{ node.content.text }}</button>
+      </template>
+    </nav>
+
+    <div v-show="activeView === 'mindmap'" ref="canvasHost" class="mindmap-canvas-host" />
+
+    <div v-if="activeView === 'outline' && session" class="mindmap-outline" :data-version="renderVersion">
+      <ul class="mindmap-outline-root">
+        <MindmapOutlineNode
+          :node="session.focusRootNode"
+          :version="renderVersion"
+          root
+          @toggle="toggleNode"
+        />
+      </ul>
+    </div>
+
+    <pre v-if="activeView === 'source'" class="mindmap-source"><code>{{ normalizedContent }}</code></pre>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.mindmap-preview {
+  --mindmap-panel: var(--vp-c-bg-soft);
+  --mindmap-border: var(--vp-c-divider);
+  margin: 1.5rem 0;
+  overflow: hidden;
+  border: 1px solid var(--mindmap-border);
+  border-radius: 10px;
+  background: var(--vp-c-bg);
+}
+
+.mindmap-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 42px;
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--mindmap-border);
+  background: var(--mindmap-panel);
+}
+
+.mindmap-preview-tabs {
+  display: flex;
+  gap: 3px;
+
+  button {
+    padding: 5px 12px;
+    border-radius: 6px;
+    color: var(--vp-c-text-2);
+    font-size: 13px;
+    font-weight: 600;
+
+    &:hover,
+    &.is-active {
+      color: var(--vp-c-text-1);
+      background: var(--vp-c-bg);
+    }
+  }
+}
+
+.mindmap-fit,
+.mindmap-focus-path button {
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+
+  &:hover { color: var(--vp-c-brand-1); }
+}
+
+.mindmap-focus-path {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 12px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--mindmap-border);
+  white-space: nowrap;
+  color: var(--vp-c-text-3);
+}
+
+.mindmap-canvas-host {
+  position: relative;
+  width: 100%;
+  height: 440px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+  touch-action: none;
+  user-select: none;
+}
+
+.mindmap-canvas-host:deep(.mm-canvas),
+.mindmap-canvas-host:deep(.mm-overlay) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mindmap-canvas-host:deep(.mm-overlay) { pointer-events: none; }
+.mindmap-canvas-host:deep(.mm-editor) { outline: none; }
+
+.mindmap-outline {
+  max-height: 560px;
+  padding: 18px 22px 22px;
+  overflow: auto;
+}
+
+.mindmap-outline-root,
+.mindmap-outline :deep(ul) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mindmap-outline :deep(.mindmap-outline-children) {
+  margin-left: 10px;
+  padding-left: 19px;
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.mindmap-outline :deep(.mindmap-outline-row) {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  min-height: 30px;
+  padding: 3px 0;
+  color: var(--vp-c-text-1);
+  line-height: 24px;
+}
+
+.mindmap-outline :deep(.mindmap-outline-toggle),
+.mindmap-outline :deep(.mindmap-outline-leaf) {
+  flex: 0 0 18px;
+  width: 18px;
+  color: var(--vp-c-text-3);
+  text-align: center;
+}
+
+.mindmap-outline :deep(.mindmap-outline-toggle:hover) { color: var(--vp-c-brand-1); }
+.mindmap-outline :deep(.mindmap-outline-checkbox) { margin-top: 5px; }
+.mindmap-outline :deep(.mindmap-outline-label) { min-width: 0; overflow-wrap: anywhere; }
+.mindmap-outline :deep(.mindmap-outline-node.is-root > .mindmap-outline-row) { font-size: 18px; font-weight: 700; }
+.mindmap-outline :deep(.mindmap-outline-node.is-done > .mindmap-outline-row .mindmap-outline-label) { opacity: .58; text-decoration: line-through; }
+.mindmap-outline :deep(.mindmap-outline-image) { display: block; max-width: min(100%, 560px); max-height: 360px; margin: 5px 0 12px 25px; border-radius: 6px; }
+.mindmap-outline :deep(.is-bold) { font-weight: 700; }
+.mindmap-outline :deep(.is-italic) { font-style: italic; }
+.mindmap-outline :deep(.is-underline) { text-decoration: underline; }
+.mindmap-outline :deep(.is-strike) { text-decoration: line-through; }
+.mindmap-outline :deep(.is-highlight) { padding: 0 2px; border-radius: 2px; background: #ffe56b; color: #252525; }
+.mindmap-outline :deep(.is-code) { padding: 1px 5px; border-radius: 4px; background: var(--vp-c-bg-soft); color: var(--vp-c-danger-1); font-family: var(--vp-font-family-mono); }
+.mindmap-outline :deep(.is-link) { color: var(--vp-c-brand-1); text-decoration: underline; text-underline-offset: 3px; }
+
+.mindmap-source {
+  max-height: 560px;
+  margin: 0;
+  padding: 18px 22px;
+  overflow: auto;
+  border-radius: 0;
+  background: var(--vp-code-block-bg);
+  color: var(--vp-code-block-color);
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre;
+}
+
+@media (max-width: 768px) {
+  .mindmap-canvas-host { height: 360px; }
+  .mindmap-preview-tabs button { padding-inline: 9px; }
+  .mindmap-outline { padding-inline: 12px; }
+}
+</style>