minecodex 2.0.38 → 2.0.39

package/features/markdown-reading/codex-feature.json

@@ -15,7 +15,12 @@
     "script": "src/markdown-reading.mjs",
     "sourceFactory": "src/injection-source.mjs",
     "resources": {
-      "styles": "src/reading.css"
+      "styles": "src/reading.css",
+      "mermaidStyles": "src/mermaid/theme.css",
+      "qvLoadingStyles": "assets/qv-loading.css",
+      "qvExport": "assets/qv-export.js",
+      "qvTemplate": "assets/qv-template.json",
+      "qvDependencies": "assets/qv-dependencies.js"
     }
   },
   "icon": {

package/features/markdown-reading/src/adapters/codex/mermaid-viewer.mjs

@@ -0,0 +1,95 @@
+import { readQvTheme } from '../../mermaid/frame.mjs';
+export function createMarkdownMermaidControls(native) {
+  const { React, Actions, Button, CopyButton, Tooltip, ExpandIcon, DownloadIcon, downloadImage, TablePreview } = native;
+  const h = React.createElement, chinese = document.documentElement.lang.startsWith('zh');
+  const download = chinese ? '下载图表' : 'Download diagram';
+  const expand = chinese ? '放大图表' : 'Expand diagram';
+  function configureShell(area) {
+    const shell=area.parentElement.parentElement;
+    shell.style.paddingTop='64px';shell.style.paddingBottom='48px';
+    shell.style.paddingInline='clamp(16px, 4vw, 48px)';
+  }
+  function CanvasMeasure({onMeasured}) {
+    const ref=React.useRef(null);
+    React.useLayoutEffect(()=>{
+      const area=ref.current.closest('[data-testid="image-preview-dismiss-area"]');
+      configureShell(area);
+      let ticket=requestAnimationFrame(()=>{ticket=requestAnimationFrame(()=>onMeasured({width:area.clientWidth,height:area.clientHeight}));});
+      return ()=>cancelAnimationFrame(ticket);
+    },[onMeasured]);
+    return h('div',{ref});
+  }
+  function FrameView({ item, size, palette, onViewport }) {
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
+      const slot = ref.current, frame = item.controller.frame;
+      item.expanded = true;
+      slot.moveBefore(frame, null);
+      frame.style.width = size.width + 'px'; frame.style.height = size.height + 'px';
+      frame.style.transformOrigin = '0 0'; item.controller.mode('viewer');
+      const wrapper = slot.parentElement;
+      const area = slot.closest('[data-testid="image-preview-dismiss-area"]');
+      configureShell(area);
+      const update = () => { const scale=wrapper.getBoundingClientRect().width/size.width;frame.style.transform=`scale(${scale})`;frame.dataset.zoom=String(scale); };
+      const measure = () => {
+        const rect = area.getBoundingClientRect();
+        onViewport(previous => previous?.width === rect.width && previous?.height === rect.height
+          ? previous : { width: rect.width, height: rect.height });
+      };
+      const observer = new ResizeObserver(update); observer.observe(wrapper); update();
+      const viewportObserver = new ResizeObserver(measure); viewportObserver.observe(area); measure();
+      let drag = null;
+      item.controller.input(input => {
+        const rect = frame.getBoundingClientRect(), scale = rect.width / size.width;
+        if (input.kind === 'wheel') {
+          area.dispatchEvent(new WheelEvent('wheel',{bubbles:true,cancelable:true,ctrlKey:true,deltaY:input.deltaY,deltaMode:input.deltaMode,clientX:rect.left+input.x*scale,clientY:rect.top+input.y*scale}));
+        }
+        if (input.kind === 'start') drag = {left:area.scrollLeft,top:area.scrollTop};
+        if (input.kind === 'drag' && drag) { area.scrollLeft = drag.left-input.dx*scale; area.scrollTop = drag.top-input.dy*scale; }
+        if (input.kind === 'end') drag = null;
+        if (input.kind === 'pan') {area.scrollLeft+=input.dx;area.scrollTop+=input.dy;}
+      });
+      return () => {
+        observer.disconnect(); viewportObserver.disconnect(); item.controller.input(null); item.expanded = false;
+        if (item.slot.isConnected) item.slot.moveBefore(frame, null);
+        frame.style.transform = ''; frame.style.transformOrigin = ''; frame.style.width = '';
+        frame.style.height = item.height + 'px'; item.controller.mode('inline');
+      };
+    }, [item,size.width]);
+    React.useLayoutEffect(()=>{item.controller.frame.style.height=size.height+'px';},[item,size.height]);
+    return h('div',{ref,className:'mcx-reading-qv-slot',style:palette});
+  }
+  return function Controls({ item }) {
+    const [open,setOpen] = React.useState(false), [size,setSize] = React.useState(null);
+    const [downloading,setDownloading] = React.useState(false), [failed,setFailed] = React.useState(false);
+    const [measuring,setMeasuring] = React.useState(false);
+    const pendingMeasurement = React.useRef(null);
+    const onMeasured = React.useCallback(canvas=>{pendingMeasurement.current?.resolve(canvas);pendingMeasurement.current=null;setMeasuring(false);},[]);
+    React.useEffect(()=>()=>{pendingMeasurement.current?.reject(new Error('diagram-disposed'));},[]);
+    const [viewport,setViewport] = React.useState(null);
+    const [ready,setReady] = React.useState(item.ready), [palette,setPalette] = React.useState({});
+    const trigger = React.useRef(null);
+    React.useEffect(() => { item.setReady=setReady; item.setNaturalHeight=height=>setSize(size=>size&&size.height!==height?{...size,height}:size); item.close=()=>setOpen(false); return ()=>{item.setReady=null;item.setNaturalHeight=null;item.close=null;}; }, [item]);
+    const save = async () => {
+      if (downloading || !item.ready) return;
+      setDownloading(true);setFailed(false);
+      try {
+        const canvas = open && viewport ? viewport : await new Promise((resolve,reject)=>{pendingMeasurement.current={resolve,reject};setMeasuring(true);});
+        const blob = await item.export(canvas);
+        if (!await downloadImage({downloadSrc:blob,suggestedFilename:'mermaid-diagram.png'})) throw new Error('diagram-download-failed');
+      } catch { setFailed(true); }
+      finally { setDownloading(false); }
+    };
+    // 把占画幅 90% 的适配尺寸交给原生组件，作为其 100% 缩放基准。
+    const fit = viewport && size ? .9 * Math.min(viewport.width / size.width, viewport.height / size.height) : 1;
+    return h(React.Fragment,null,
+      h(Actions, { 'data-visible':true, 'data-markdown-copy':'exclude' },
+        h(CopyButton,{ariaLabel:chinese?'复制图表源码':'Copy diagram source',buttonText:chinese?'复制图表源码':'Copy diagram source',iconOnly:true,variant:'blockAction',onCopy:()=>navigator.clipboard.writeText(item.source).then(()=>true)}),
+        h(Tooltip,{tooltipContent:failed?(chinese?'下载失败，点击重试':'Download failed. Retry'):download,delayOpen:true},h(Button,{'aria-label':download,'aria-busy':downloading,disabled:!ready||downloading,color:'blockAction',radius:'full',size:'inputIcon',onClick:save},h(DownloadIcon,{className:'icon-xs'}))),
+        h(Tooltip,{tooltipContent:expand,delayOpen:true},h(Button,{ref:trigger,'aria-label':expand,'aria-expanded':open,disabled:!ready,color:'blockAction',radius:'full',size:'inputIcon',onClick:()=>{setFailed(false);const theme=readQvTheme(item.host);setPalette({background:theme.tokens['--background'],color:theme.tokens['--foreground']});setViewport(null);setSize(item.controller.size());setOpen(true);}},h(ExpandIcon)))),
+      measuring?h('div',{'aria-hidden':true,inert:true,style:{position:'fixed',inset:0,width:'100vw',height:'100dvh',visibility:'hidden',pointerEvents:'none',zIndex:-1}},
+        h(TablePreview,{src:'',alt:expand,open:true,inline:true,imageSurface:'card',showDownload:false,showZoomControls:true,onOpenChange:()=>{},zoomableContent:{width:1,height:1,content:h(CanvasMeasure,{onMeasured})}})):null,
+      open&&size?h(TablePreview,{src:'',alt:expand,open:true,dialogAriaLabel:expand,closeAriaLabel:chinese?'关闭图表预览':'Close diagram preview',imageSurface:'card',caption:failed?(chinese?'下载失败，请重试。':'Download failed. Please retry.'):undefined,showDownload:true,downloadAriaLabel:download,onDownload:save,showZoomControls:true,disableOpenAnimation:true,onOpenChange:setOpen,onOpenAutoFocus:event=>{event.preventDefault();item.controller.frame.focus({preventScroll:true});},onCloseAutoFocus:event=>{event.preventDefault();trigger.current?.focus({preventScroll:true});},
+        zoomableContent:{width:size.width*fit,height:size.height*fit,content:h(FrameView,{item,size,palette,onViewport:setViewport})}}):null);
+  };
+}

package/features/markdown-reading/src/adapters/codex/mermaid.mjs

@@ -0,0 +1,91 @@
+import { createQvResources, createQvFrame, readQvTheme } from '../../mermaid/frame.mjs';
+import { exportQvDiagram } from '../../mermaid/export.mjs';
+import { createQvLoading } from '../../mermaid/loading.mjs';
+import { captureMarkdownProviders } from './providers.mjs';
+import { createMarkdownMermaidControls } from './mermaid-viewer.mjs';
+
+export function installMarkdownMermaid(view, api, native, codex, resources, onStatus = () => {}) {
+  if (!Element.prototype.moveBefore) throw new Error('qv-state-preserving-move-unavailable');
+  const { Decoration, StateField, StateEffect, Compartment, WidgetType, Prec } = api;
+  const assets = createQvResources(resources), mounted = new Set();
+  const Controls = createMarkdownMermaidControls(native);
+  const withProviders = captureMarkdownProviders(view.dom, codex);
+  let disposed = false;
+  const available = () => [...mounted].every(item => item.ready);
+  const report = () => { if (!disposed) onStatus(available()); };
+  class Diagram extends WidgetType {
+    constructor(source) { super(); this.source = source; }
+    eq(other) { return this.source === other.source; }
+    toDOM() {
+      const host = document.createElement('div'), slot = document.createElement('div'), actions = document.createElement('div');
+      const status = document.createElement('div');
+      const chinese = document.documentElement.lang.startsWith('zh');
+      status.className = 'mcx-reading-qv-status'; status.setAttribute('role', 'status');
+      status.setAttribute('aria-label', chinese ? '正在加载图表…' : 'Loading diagram…');
+      host.className = 'mcx-reading-qv-widget'; slot.className = 'mcx-reading-qv-inline'; actions.className = 'mcx-reading-qv-actions';
+      host.append(actions, slot); slot.append(status);
+      const finishLoading = createQvLoading(status);
+      const item = { host, slot, source:this.source, height:280, ready:false, expanded:false };
+      slot.style.height = '280px';
+      item.controller = createQvFrame(this.source, assets, readQvTheme(view.dom), height => {
+        if (disposed || view.destroyed) return;
+        if (item.expanded) {item.setNaturalHeight?.(height);return;}
+        item.height = height; slot.style.height = height + 'px';
+        item.controller.frame.style.height = height + 'px'; view.requestMeasure();
+      }, state => {
+        finishLoading();
+        status.removeAttribute('aria-label');
+        item.ready = state === 'enhanced' || state === 'native';
+        status.hidden = item.ready;
+        if (!item.ready) status.textContent = chinese ? '图表加载失败，可复制源码查看。' : 'Diagram failed to load. Copy the source to inspect it.';
+        item.controller.frame.style.visibility = item.ready ? '' : 'hidden';
+        item.setReady?.(item.ready); report();
+      }, () => item.close?.());
+      item.controller.frame.style.visibility = 'hidden';
+      slot.append(item.controller.frame);
+      item.export = async canvas => exportQvDiagram(item.controller.frame, await assets.exporter(item.controller.frame.contentDocument),canvas);
+      const root = native.ReactDOM.createRoot(actions);
+      root.render(withProviders(native.React, native.React.createElement(Controls, {item})));
+      item.dispose = () => { finishLoading(); root.unmount(); item.controller.dispose(); mounted.delete(item); report(); };
+      host._mcxQv = item; mounted.add(item); report();
+      return host;
+    }
+    destroy(host) { host._mcxQv?.dispose(); }
+    ignoreEvent() { return true; }
+  }
+  function build(state) {
+    const ranges = [];
+    state.tree?.iterate({ enter(n) {
+      if (n.name !== 'FencedCode') return;
+      const node = n.node, info = node.getChild('CodeInfo');
+      if (!info || state.sliceDoc(info.from, info.to).split(/\s/,1)[0] !== 'mermaid'
+        || node.getChildren('CodeMark').length !== 2) return false;
+      const source = node.getChildren('CodeText').map(n=>state.sliceDoc(n.from,n.to)).join('');
+      if (source.length > 50000) return false;
+      ranges.push(Decoration.replace({ block:true, widget:new Diagram(source) })
+        .range(state.doc.lineAt(n.from).from, state.doc.lineAt(n.to).to));
+      return false;
+    } });
+    return Decoration.set(ranges, true);
+  }
+  const field = StateField.define({ create:build, update(value,tr) {
+    return tr.docChanged || tr.startState.tree !== tr.state.tree ? build(tr.state) : value;
+  }, provide:field=>view.constructor.decorations.from(field) });
+  const compartment = new Compartment();
+  view.dispatch({ effects:StateEffect.appendConfig.of(compartment.of(Prec.highest(field))) });
+  const themes = new MutationObserver(() => {
+    if (disposed) return;
+    const theme = readQvTheme(view.dom);
+    for (const item of mounted) item.controller.theme(theme);
+  });
+  themes.observe(document.documentElement,{attributes:true,attributeFilter:['class','style','data-theme']});
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true; themes.disconnect();
+    if (!view.destroyed) view.dispatch({effects:compartment.reconfigure([])});
+    for (const item of [...mounted]) item.dispose();
+    assets.dispose();
+  };
+  cleanup.available = available;
+  return cleanup;
+}

package/features/markdown-reading/src/adapters/codex/preview.mjs

@@ -1,7 +1,7 @@
 import { createMarkdownReadingRuntime } from './reading-runtime.mjs';
 
 // 当前原生 Markdown Preview 是 CodeMirror 视图；Source 与 Pages 不属于此契约。
-export function createMarkdownPreviewAdapter(codex) {
+export function createMarkdownPreviewAdapter(codex, resources) {
   let runtime;
   function preview(editor) {
     if (!editor.isConnected || !editor.closest('[data-editor-search-surface]')) return null;
@@ -31,7 +31,7 @@ export function createMarkdownPreviewAdapter(codex) {
     preview,
     previews,
     attach(item) {
-      runtime ??= createMarkdownReadingRuntime(codex);
+      runtime ??= createMarkdownReadingRuntime(codex, undefined, resources);
       return runtime.attach(item);
     },
   };

package/features/markdown-reading/src/adapters/codex/reading-runtime.mjs

@@ -5,6 +5,7 @@ import { loadNativeMarkdownToc } from './toc-native.mjs';
 import { installMarkdownToc } from './toc.mjs';
 import { loadNativeMarkdownTableActions, installMarkdownTableActions } from './table-actions.mjs';
 import { loadNativeMarkdownRichText, installMarkdownRichText } from './rich-text.mjs';
+import { installMarkdownMermaid } from './mermaid.mjs';
 
 // 每个 Preview 共用换行状态，虚拟滚动重挂载的块也读取当前值。
 export function createMarkdownWrapState() {
@@ -38,8 +39,10 @@ export function createMarkdownReadingRuntime(
     installMarkdownTableActions,
     loadNativeMarkdownRichText,
     installMarkdownRichText,
+    installMarkdownMermaid,
     installMarkdownMetadataScroll,
   },
+  resources = {},
 ) {
   const cached = new Map();
   function load(name, ...args) {
@@ -61,6 +64,7 @@ export function createMarkdownReadingRuntime(
       ['markdown-reading-toc', 'loading'],
       ['markdown-table-actions', 'loading'],
       ['markdown-reading-rich-text', 'loading'],
+      ['markdown-reading-mermaid', 'loading'],
     ]);
     const cleanups = [capabilities.installMarkdownMetadataScroll(editor, scroller)];
     let disposed = false;
@@ -99,6 +103,12 @@ export function createMarkdownReadingRuntime(
         if (!current()) return;
         cleanups.push(capabilities.installMarkdownTableActions(view, actions, codex, tables.controller));
         report('markdown-table-actions', true);
+        await stage('markdown-reading-mermaid', 'native-mermaid-adapter-unavailable', async () => {
+          const cleanup = capabilities.installMarkdownMermaid(view, api, actions, codex, resources,
+            available => report('markdown-reading-mermaid', available, available ? null : 'qv-renderer-not-ready'));
+          cleanups.push(cleanup);
+          report('markdown-reading-mermaid', cleanup.available?.() ?? true);
+        });
         await installRichText(api, actions);
       });
     }

package/features/markdown-reading/src/adapters/codex/table-actions.mjs

@@ -1,3 +1,4 @@
+import { saveQvDiagram } from '../../mermaid/export.mjs';
 import { loadNativeMarkdownRenderer } from './markdown-native.mjs';
 import { captureMarkdownProviders } from './providers.mjs';
 
@@ -92,8 +93,21 @@ export async function loadNativeMarkdownTableActions(native) {
     binding(icon[3]),
     loadNativeMarkdownRenderer(source, url, module),
   ]);
+  const preview = section('id:`imagePreviewDialog.label`');
+  const downloadName = preview.match(/([\w$]+)\(\{downloadSrc:[\w$]+,onDownloaded:/)?.[1];
+  const downloadSection = preview.slice(preview.indexOf('suggestedFilename:', preview.indexOf('downloadSrc:')));
+  const downloadIcon = downloadSection.match(/children:\(0,[\w$]+\.jsx\)\(([\w$]+),\{className:`icon-xs`\}/)?.[1];
+  if (!downloadName || !downloadIcon) throw new Error('native-diagram-download-unavailable');
+  const downloadSource = section('Failed to download image');
+  const requestName = downloadSource.match(/await ([\w$]+)\(`save-file`,/)?.[1];
+  if (!requestName) throw new Error('native-diagram-save-request-unavailable');
+  const [DownloadIcon, saveFile] = await Promise.all([binding(downloadIcon),binding(requestName)]);
   return {
     ...native,
+    async downloadImage({downloadSrc,suggestedFilename}) {
+      return saveQvDiagram(downloadSrc,saveFile,markdownDownloadsDirectory,suggestedFilename);
+    },
+    DownloadIcon,
     ...renderer,
     TablePreview: publicBinding(previewName),
     Table: publicBinding(tableName),

package/features/markdown-reading/src/injection-source.mjs

@@ -15,12 +15,27 @@ import {
 import { loadNativeMarkdownLinks, installMarkdownLinks } from './adapters/codex/links.mjs';
 import { loadNativeMarkdownToc } from './adapters/codex/toc-native.mjs';
 import { installMarkdownToc } from './adapters/codex/toc.mjs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
 import { readFile } from 'node:fs/promises';
 import { installMarkdownTables } from './adapters/codex/tables.mjs';
 import { loadMarkdownListAPI, installMarkdownLists } from './adapters/codex/lists.mjs';
 import { createMarkdownPreviewAdapter } from './adapters/codex/preview.mjs';
+import { createQvResources, createQvFrame, readQvTheme } from './mermaid/frame.mjs';
+import { exportQvDiagram, saveQvDiagram } from './mermaid/export.mjs';
+import { createQvLoading } from './mermaid/loading.mjs';
+import { createMarkdownMermaidControls } from './adapters/codex/mermaid-viewer.mjs';
+import { installMarkdownMermaid } from './adapters/codex/mermaid.mjs';
 export async function createPageScriptSource() {
   const bindings = [
+    exportQvDiagram,
+    saveQvDiagram,
+    createQvLoading,
+    createQvResources,
+    createQvFrame,
+    readQvTheme,
+    createMarkdownMermaidControls,
+    installMarkdownMermaid,
     collectMarkdownFootnotes,
     captureMarkdownProviders,
     createMarkdownReadingRuntime,
@@ -43,5 +58,5 @@ export async function createPageScriptSource() {
   ];
   const declarations = bindings.map((binding) => `const ${binding.name} = ${binding.toString()};`).join('\n');
   const entry = await readFile(new URL('./markdown-reading.mjs', import.meta.url), 'utf8');
-  return `${declarations}\n${entry}`;
+  return `const markdownDownloadsDirectory=${JSON.stringify(join(homedir(),'Downloads'))};\n${declarations}\n${entry}`;
 }

package/features/markdown-reading/src/markdown-reading.mjs

@@ -1,11 +1,13 @@
 const marker = 'data-minecodex-markdown-reading';
-const native = createMarkdownPreviewAdapter(config.codex);
+const native = createMarkdownPreviewAdapter(config.codex, config.resources);
 const styled = new Map();
 const sessions = new Map();
-const tokenNames = ['--font-content', '--text-document', '--leading-relaxed', '--font-weight-semibold'];
+const tokenNames = ['--font-content', '--text-document', '--leading-relaxed', '--font-weight-semibold',
+  '--color-token-main-surface-primary', '--color-token-bg-secondary', '--color-text-foreground',
+  '--color-text-foreground-secondary', '--color-border'];
 const style = document.createElement('style');
 style.setAttribute('data-minecodex-markdown-reading-styles', '');
-style.textContent = config.resources.styles;
+style.textContent = [config.resources.styles, config.resources.mermaidStyles, config.resources.qvLoadingStyles].filter(Boolean).join('\n');
 document.head.append(style);
 let disposed = false;
 let pending = null;

package/features/markdown-reading/src/mermaid/export.mjs

@@ -0,0 +1,83 @@
+// 导出副本保留原始排版；正文和原生查看器的缩放、滚动与动画不受影响。
+export async function exportQvDiagram(frame, toBlob, canvasSize) {
+  const doc = frame.contentDocument, root = doc.querySelector('.qv-mermaid');
+  await doc.fonts.ready;
+  await Promise.all((root.getAnimations?.({subtree:true})||[])
+    .filter(a=>a.playState==='running'&&Number.isFinite(a.effect?.getComputedTiming().endTime))
+    .map(a=>a.finished.catch(()=>{})));
+  // 雷达顶点由 rAF 更新属性；只等待正在变化的几何稳定，不修改原图。
+  if (root.classList?.contains('qv-radar')) {
+    let last='',stable=0;
+    for (let i=0;i<60&&stable<3;i++) {
+      const current=[...root.querySelectorAll('polygon')].map(n=>n.getAttribute('points')).join('|');
+      stable=current===last?stable+1:0;last=current;
+      if(stable<3)await new Promise(resolve=>setTimeout(resolve,20));
+    }
+  }
+  const scene = root.querySelector('.scene'), viewport = root.querySelector('.diagram-scroll');
+  const width = Math.ceil(Math.max(root.clientWidth, scene.offsetWidth));
+  const copy = root.cloneNode(true);
+  copy.classList.add('mcx-qv-export');
+  copy.querySelectorAll('.scope-nav,.edge-key,.scope-status,[popover],[role="tooltip"],.node-tip,.seq-tip,.qv-notice').forEach(node => node.remove());
+  copy.style.cssText += `;position:absolute;left:0;top:0;width:${width}px;max-width:none;margin:0;transform:translateX(-100000px);overflow:visible;`;
+  const copiedViewport = copy.querySelector('.diagram-scroll'), copiedScene = copy.querySelector('.scene');
+  copiedViewport.style.cssText += `;width:${viewport.offsetWidth}px;height:${scene.offsetHeight}px;overflow:visible;padding-bottom:0;transform:none;`;
+  copiedScene.style.cssText += `;width:${scene.offsetWidth}px;height:${scene.offsetHeight}px;min-width:${scene.offsetWidth}px;transform:none;`;
+  copy.querySelectorAll('svg [mask]').forEach(node => {
+    if(node.getAttribute('mask').includes('reveal'))node.removeAttribute('mask');
+  });
+  copy.querySelectorAll('svg [clip-path]').forEach(node => {
+    if(node.getAttribute('clip-path').includes('sankey-mask'))node.removeAttribute('clip-path');
+  });
+  const style = doc.createElement('style');
+  style.textContent = `#${root.id}.mcx-qv-export *{animation:none!important;transition:none!important}`;
+  copy.append(style);
+  doc.body.append(copy);
+  try {
+    // html-to-image 深拷贝 SVG 而不逐个解析其子节点样式；先冻结线条、文字和渐变。
+    const svgProperties=['fill','fill-opacity','stroke','stroke-width','stroke-opacity','stroke-dasharray','stroke-dashoffset','stroke-linecap','stroke-linejoin','vector-effect','opacity','visibility','font-family','font-size','font-weight','text-anchor','dominant-baseline','stop-color','stop-opacity','mask','clip-path'];
+    for(const node of copy.querySelectorAll('svg,svg *')) {
+      const computed=frame.contentWindow.getComputedStyle(node);
+      for(const name of svgProperties)node.style.setProperty(name,computed.getPropertyValue(name));
+    }
+    copy.querySelectorAll('svg style').forEach(node=>node.remove());
+    // 系统字体在 SVG 图像内的字宽可能有细微差异；冻结原本单行的文字，避免导出时多换一行。
+    for(const node of copy.querySelectorAll('*')) {
+      if(node.namespaceURI!=='http://www.w3.org/1999/xhtml'||![...node.childNodes].some(n=>n.nodeType===3&&n.textContent.trim()))continue;
+      const textStyle=frame.contentWindow.getComputedStyle(node),line=parseFloat(textStyle.lineHeight);
+      if(Number.isFinite(line)&&node.getBoundingClientRect().height<=line+.5)node.style.whiteSpace='nowrap';
+    }
+    const customProperties = new Set(Array.from(frame.contentWindow.getComputedStyle(root)).filter(name=>name.startsWith('--')));
+    for(const node of copy.querySelectorAll('*'))for(const name of node.style)if(name.startsWith('--'))customProperties.add(name);
+    const height = Math.ceil(Math.max(copy.offsetHeight,copy.scrollHeight||0));
+    const blob = await toBlob(copy, { width, height, pixelRatio:canvasSize?2*Math.max(1,.9*Math.min(canvasSize.width/width,canvasSize.height/height)):2, skipAutoScale:true, filter:node=>node.tagName!=='STYLE',
+      includeStyleProperties:['display','position','left','top','right','bottom','width','height','min-width','max-width','min-height','max-height','box-sizing','padding','margin','overflow','background-color','background-image','background-size','background-position','color','font-family','font-size','font-weight','font-style','line-height','letter-spacing','text-align','text-decoration','text-overflow','white-space','word-break','overflow-wrap','flex-direction','flex-wrap','flex-grow','flex-shrink','flex-basis','align-items','align-content','align-self','justify-content','gap','row-gap','column-gap','grid-template-columns','grid-template-rows','grid-auto-flow','vertical-align','border','border-top','border-right','border-bottom','border-left','border-radius','box-shadow','opacity','transform','transform-origin','z-index','visibility','fill','fill-opacity','stroke','stroke-width','stroke-opacity','stroke-dasharray','stroke-dashoffset','stroke-linecap','stroke-linejoin','vector-effect','mask','clip-path','stop-color','stop-opacity','color-scheme',...customProperties],
+      backgroundColor:frame.contentWindow.getComputedStyle(doc.body).backgroundColor,
+      style:{position:'relative',left:'0',top:'0',transform:'none'} });
+    if (!blob) throw new Error('diagram-export-empty');
+    if (!canvasSize) return blob;
+    const canvas=doc.createElement('canvas');
+    canvas.width=Math.round(canvasSize.width*2);canvas.height=Math.round(canvasSize.height*2);
+    const context=canvas.getContext('2d'),image=new frame.contentWindow.Image();
+    const url=frame.contentWindow.URL.createObjectURL(blob);
+    try {
+      await new Promise((resolve,reject)=>{image.onload=resolve;image.onerror=()=>reject(new Error('diagram-export-image-failed'));image.src=url;});
+      context.fillStyle=frame.contentWindow.getComputedStyle(doc.body).backgroundColor;
+      context.fillRect(0,0,canvas.width,canvas.height);
+      const fit=.9*Math.min(canvas.width/image.naturalWidth,canvas.height/image.naturalHeight);
+      const w=image.naturalWidth*fit,h=image.naturalHeight*fit;
+      context.drawImage(image,(canvas.width-w)/2,(canvas.height-h)/2,w,h);
+      const result=await new Promise(resolve=>canvas.toBlob(resolve,'image/png'));
+      if(!result)throw new Error('diagram-export-empty');
+      return result;
+    } finally {frame.contentWindow.URL.revokeObjectURL(url);}
+
+  } finally { copy.remove(); }
+}
+
+export async function saveQvDiagram(blob, saveFile, directory, filename) {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  let binary='';
+  for (let start=0;start<bytes.length;start+=32768) binary+=String.fromCharCode(...bytes.subarray(start,start+32768));
+  return saveFile('save-file',{params:{kind:'contents',suggestedFilename:directory+'/'+filename,contentsBase64:btoa(binary)}});
+}

package/features/markdown-reading/src/mermaid/frame.mjs

@@ -0,0 +1,109 @@
+export function markdownMermaidSource(fence) {
+  const match = String(fence || '').match(/^(`{3,}|~{3,})mermaid[ \t]*\r?\n([\s\S]*?)\r?\n\1\s*$/);
+  return match && match[2].length <= 50000 ? match[2] : null;
+}
+
+// 同一文档共享脚本 URL，减少源码复制和 Blob 创建，并允许浏览器复用编译缓存。
+// 各帧仍独立求值；URL 由引用计数持有，最后一个预览释放时回收。
+export function createQvResources(resources) {
+  if (!resources.qvTemplate?.script || !resources.qvDependencies) throw new Error('qv-resources-unavailable');
+  const store = (globalThis.__mcxQvScripts ??= new Map());
+  const acquire = (text) => {
+    const held = store.get(text);
+    if (held) { held.refs += 1; return held.url; }
+    const entry = { url: URL.createObjectURL(new Blob([text], { type: 'text/javascript' })), refs: 1 };
+    store.set(text, entry);
+    return entry.url;
+  };
+  const release = (url) => {
+    for (const [text, entry] of store) {
+      if (entry.url !== url) continue;
+      if (--entry.refs > 0) return;
+      URL.revokeObjectURL(entry.url);
+      store.delete(text);
+      return;
+    }
+  };
+  const dependencies = acquire(resources.qvDependencies);
+  const renderer = acquire(resources.qvTemplate.script);
+  let exporter;
+  return { template: resources.qvTemplate, dependencies, renderer,
+    async exporter(doc) {
+      if (!resources.qvExport) throw new Error('qv-export-unavailable');
+      exporter ??= acquire(resources.qvExport);
+      const child = doc.defaultView;
+      child.__mcxQVExportReady ??= new Promise((resolve,reject) => {
+        const script = doc.createElement('script');script.src=exporter;
+        script.onload=()=>{script.remove();resolve(child.__mcxQVExport);};
+        script.onerror=()=>{script.remove();delete child.__mcxQVExportReady;reject(new Error('qv-export-load-failed'));};
+        doc.head.append(script);
+      });
+      return (await child.__mcxQVExportReady).toBlob;
+    },
+    dispose() { release(dependencies); release(renderer); if (exporter) release(exporter); } };
+}
+
+export function createQvFrame(source, assets, theme, onHeight, onReady, onEscape) {
+  const frame = document.createElement('iframe'), token = crypto.randomUUID();
+  frame.className = 'mcx-reading-qv-frame';
+  frame.title = document.documentElement.lang.startsWith('zh') ? 'QV Mermaid 图表' : 'QV Mermaid diagram';
+  frame.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+  frame.style.height = '240px';
+  let disposed = false, height = 240, input = null;
+  const timeout = setTimeout(() => { if (!disposed) onReady('error'); }, 30000);
+  const config = { source, title: '', descriptions: {}, icons: 'auto', navigation: 'expanded', readingWidth: theme.readingWidth };
+  const encode = (value) => JSON.stringify(value).replace(/</g, '\\u003c');
+  const bootstrap = `const token=${encode(token)};window.__mcxDiagramConfig=${encode(config)};window.openai={displayMode:'inline',maxHeight:innerHeight};
+const send=()=>{const root=document.querySelector('.qv-mermaid');parent.postMessage({type:'mcx-qv',token,state:root.dataset.state,height:Math.ceil(root.offsetHeight)},'*');};
+const theme=value=>{for(const [key,v]of Object.entries(value.tokens))document.documentElement.style.setProperty(key,v);document.documentElement.style.colorScheme=value.scheme;document.body.style.fontFamily=value.font;document.body.style.fontSize=value.size;};theme(${encode(theme)});
+const load=value=>new Promise((resolve,reject)=>{const url=String(value);if(!/^blob:/.test(url))return reject(new Error('QV runtime unavailable'));const script=document.createElement('script');script.src=url;script.onload=()=>resolve();script.onerror=()=>reject(new Error('QV runtime unavailable'));document.body.append(script);});
+window.addEventListener('message',async event=>{const data=event.data;if(event.source!==parent||data?.token!==token)return;if(data.type==='boot'){try{await load(data.dependencies);await load(data.renderer);}catch(error){const root=document.querySelector('.qv-mermaid');root.dataset.state='error';root.querySelector('.qv-notice').hidden=false;root.querySelector('.qv-notice').textContent=error.message;send();}}if(data.type==='theme')theme(data.theme);if(data.type==='mode'){window.openai={displayMode:data.mode,maxHeight:innerHeight};dispatchEvent(new CustomEvent('openai:set_globals',{detail:{globals:window.openai}}));}});
+document.addEventListener('mcx:qv-viewer-input',event=>parent.postMessage({type:'mcx-qv-viewer-input',token,input:event.detail},'*'));
+document.addEventListener('qv:ready',()=>queueMicrotask(send));document.addEventListener('keydown',event=>{if(event.key==='Escape')parent.postMessage({type:'mcx-qv-escape',token},'*');});
+new ResizeObserver(send).observe(document.querySelector('.qv-mermaid'));parent.postMessage({type:'mcx-qv-bootstrap',token},'*');`;
+  const html = `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none';script-src blob: 'unsafe-inline';style-src 'unsafe-inline';img-src data: blob:;font-src data:;connect-src 'none'"><style>html,body{margin:0;overflow:hidden}body{color:var(--foreground);background:var(--background);font-size:14px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}button,input{font:inherit}.scope-toggle{display:flex;align-items:center;gap:8px}.form-check-input{accent-color:var(--viz-series-1)}</style></head><body>${assets.template.markup}<script>${bootstrap}</script></body></html>`;
+  frame.srcdoc = html;
+  function message(event) {
+    if (disposed || event.source !== frame.contentWindow || event.data?.token !== token) return;
+    if (event.data.type === 'mcx-qv-bootstrap') {
+      frame.contentWindow.postMessage({type:'boot',token,dependencies:assets.dependencies,renderer:assets.renderer},'*');
+      return;
+    }
+    if (event.data.type === 'mcx-qv-escape') { onEscape(); return; }
+    if (event.data.type === 'mcx-qv-viewer-input') { input?.(event.data.input); return; }
+    if (event.data.type !== 'mcx-qv' || event.data.state === 'loading') return;
+    clearTimeout(timeout);
+    onReady(event.data.state);
+    const next = event.data.height;
+    if (Number.isFinite(next) && next > 0 && next <= 100000 && next !== height) {
+      height = next; onHeight(next);
+    }
+  }
+  window.addEventListener('message', message);
+  return { frame, get height() { return height; },
+    size() {
+      const root = frame.contentDocument.querySelector('.qv-mermaid'), viewport = root.querySelector('.diagram-scroll'), scene = root.querySelector('.scene');
+      return { width:Math.max(root.clientWidth,scene.offsetWidth), height:root.offsetHeight-viewport.offsetHeight+scene.offsetHeight };
+    },
+    input(handler) { input = handler; },
+    mode(mode) { frame.contentWindow?.postMessage({ type: 'mode', token, mode }, '*'); },
+    theme(theme) { frame.contentWindow?.postMessage({ type: 'theme', token, theme }, '*'); },
+    dispose() { disposed = true; clearTimeout(timeout); window.removeEventListener('message', message); frame.remove(); } };
+}
+
+export function readQvTheme(element) {
+  const style = getComputedStyle(element), get = (name) => style.getPropertyValue(name).trim();
+  const background = get('--mcx-color-token-main-surface-primary'), foreground = get('--mcx-color-text-foreground');
+  const tokens = { '--background': background, '--foreground': foreground,
+    '--muted': get('--mcx-color-token-bg-secondary'), '--muted-foreground': get('--mcx-color-text-foreground-secondary'),
+    '--border': get('--mcx-color-border'), '--popover': background, '--popover-foreground': foreground,
+    '--secondary': get('--mcx-color-token-bg-secondary'), '--secondary-foreground': foreground };
+  const colors = ['#3b82f6','#10b981','#8b5cf6','#f59e0b','#ec4899','#06b6d4'];
+  colors.forEach((color, index) => tokens[`--viz-series-${index+1}`] = get(`--viz-series-${index+1}`) || color);
+  const probe = document.createElement('div');
+  probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;width:var(--mcx-reading-width);height:0';
+  element.append(probe);
+  const readingWidth = probe.getBoundingClientRect().width;
+  probe.remove();
+  return { readingWidth, tokens, scheme: style.colorScheme, font: style.fontFamily, size: style.fontSize };
+}

package/features/markdown-reading/src/mermaid/loading.mjs

@@ -0,0 +1,27 @@
+// 由 scripts/build-qv-mermaid.mjs 从 QV chart-loading.html 生成，请勿手改。
+export function createQvLoading(region) {
+const field=document.createElement('div'),canvas=document.createElement('canvas');
+field.className='qv-loading-field';canvas.className='qv-loading-canvas';field.setAttribute('aria-hidden','true');field.append(canvas);region.append(field);
+region.setAttribute('data-mcx-qv-loading','');region.setAttribute('aria-busy','true');
+const ctx=canvas.getContext('2d'),reduced=matchMedia('(prefers-reduced-motion: reduce)');
+let frame=0,last=0,start=0,done=false,geometry;
+const clamp=x=>Math.max(0,Math.min(1,x)),smooth=x=>x*x*(3-2*x),cubic=x=>x<.5?4*x*x*x:1-Math.pow(-2*x+2,3)/2,lerp=(a,b,t)=>a+(b-a)*t;
+const random=(a,b)=>lerp(a,b,Math.random()),cycle=t=>{const p=t%1;return p<.5?p*2:2-p*2;};
+// 对照本机 image-loading-state：固定点阵、双明暗场、30fps 与相同运动参数；不依赖宿主 React。
+const durations=[4500,6330,5600,5750,3600,2400].map(n=>n*1.2*random(1,1.35)),phases=durations.map(()=>Math.random());
+const bounds=[[random(.1,.32),random(.68,.9)],[random(.1,.32),random(.68,.9)],[random(.68,.9),random(.1,.32)],[random(.68,.9),random(.1,.32)],[random(.42,.52),random(.62,.75)],[random(.5,.62),random(.74,.9)]];
+function resize(){const {width,height}=field.getBoundingClientRect(),dpr=Math.max(1,devicePixelRatio||1),spacing=Math.max(1,12/dpr);canvas.width=Math.floor(width*dpr);canvas.height=Math.floor(height*dpr);geometry={width,height,dpr,spacing,cols:Math.max(1,Math.floor(width/spacing)),rows:Math.max(1,Math.floor(height/spacing))};schedule();}
+function paint(now){frame=0;if(done||document.hidden||!ctx)return;if(!reduced.matches&&now-last<1000/30){schedule();return;}last=now;if(!start)start=now;const t=reduced.matches?0:now-start,g=geometry;if(!g||!g.width||!g.height)return;
+const values=durations.map((d,i)=>lerp(...bounds[i],(i===0||i===2?cubic:smooth)(cycle(t/d+phases[i])))),[x1,y1,x2,y2]=values,r1=.78*values[4],r2=.78*values[5];
+ctx.setTransform(g.dpr,0,0,g.dpr,0,0);ctx.clearRect(0,0,g.width,g.height);ctx.fillStyle=getComputedStyle(field).color;
+const radius=Math.max(.8,g.spacing*.075),ox=(g.width-(g.cols-1)*g.spacing)/2,oy=(g.height-(g.rows-1)*g.spacing)/2;
+for(let y=0;y<g.rows;y++)for(let x=0;x<g.cols;x++){const nx=g.cols===1?.5:x/(g.cols-1),ny=g.rows===1?.5:y/(g.rows-1),a=Math.pow(clamp((1-smooth(clamp(Math.hypot(nx-x1,ny-y1)/r1)))*1.2+(1-smooth(clamp(Math.hypot(nx-x2,ny-y2)/r2)))*.82),1.18);if(a<=.03)continue;ctx.globalAlpha=a;ctx.beginPath();ctx.arc(ox+x*g.spacing,oy+y*g.spacing,radius,0,Math.PI*2);ctx.fill();}
+ctx.globalAlpha=1;if(!reduced.matches)schedule();}
+function schedule(){if(!done&&!frame&&!document.hidden)frame=requestAnimationFrame(paint);}
+const observer=new ResizeObserver(resize);observer.observe(field);
+function visibility(){if(document.hidden){cancelAnimationFrame(frame);frame=0;}else schedule();}
+function motion(){cancelAnimationFrame(frame);frame=0;schedule();}
+document.addEventListener('visibilitychange',visibility);reduced.addEventListener('change',motion);
+
+return function finish(){if(done)return;done=true;cancelAnimationFrame(frame);observer.disconnect();document.removeEventListener('visibilitychange',visibility);reduced.removeEventListener('change',motion);field.remove();region.removeAttribute('data-mcx-qv-loading');region.setAttribute('aria-busy','false');};
+}

package/features/markdown-reading/src/mermaid/theme.css

@@ -0,0 +1,8 @@
+.mcx-reading-qv-widget { position:relative; padding-top:44px; }
+.mcx-reading-qv-frame { display:block; width:100%; border:0; }
+.mcx-reading-qv-actions { position:absolute; inset:0 0 auto; height:44px; }
+.mcx-reading-qv-actions [data-block-actions] { opacity:1; pointer-events:auto; }
+.mcx-reading-qv-inline { position:relative; }
+.mcx-reading-qv-status:not([hidden]) { position:absolute; inset:0; display:grid; place-items:center; }
+.mcx-reading-qv-slot { position:relative; width:100%; height:100%; overflow:hidden; }
+.mcx-reading-qv-slot > iframe { position:absolute; inset:0 auto auto 0; max-width:none; }