@h-ai/ui 0.1.0-alpha.33 → 0.1.0-alpha.35

package/dist/components/scenes/ai/AiDocumentEditor.svelte

@@ -26,6 +26,7 @@
     MarkdownTextAlignKind,
   } from './document-types.js'
   import { tick } from 'svelte'
+  import { SvelteMap } from 'svelte/reactivity'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
@@ -37,7 +38,12 @@
   import { resolveDocumentMarkdownContent } from './document-download.js'
   import { renderMarkdownDocument } from './document-parse.js'
   import { parseMarkdown } from './markdown-parse.js'
-  import { renderMermaidDiagram } from './mermaid-render.js'
+  import {
+    createMermaidSourceSignature,
+    getMermaidHostRenderAction,
+    isCurrentMermaidRenderToken,
+  } from './mermaid-host-sync.js'
+  import { renderMermaidDiagram, stripMermaidSvgStyleElements } from './mermaid-render.js'
 
   interface SelectionToolbarPosition {
     /** 选区工具条相对滚动容器的 top 坐标。 */
@@ -59,6 +65,17 @@
     error?: string
   }
 
+  interface MermaidRenderCacheEntry {
+    /** 当前 Mermaid 源码签名。 */
+    signature: string
+    /** 当前 Mermaid 渲染状态。 */
+    status: 'rendering' | 'ready' | 'error'
+    /** 渲染成功后的 SVG 内容。 */
+    html?: string
+    /** 渲染失败时展示的错误摘要。 */
+    error?: string
+  }
+
   interface SelectionFormatState {
     /** 当前选区所在段落样式，用于标题/正文下拉默认值。 */
     blockFormat: MarkdownBlockStyleKind
@@ -226,6 +243,7 @@
   // 复制前后的图标以内联 SVG 缓存，避免每次点击都重新拼接按钮内容。
   const COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`
   const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
+  const MERMAID_SYNC_IDLE_DELAY_MS = 220
 
   let {
     // 暴露给外层的滚动容器引用，用于同步滚动或定位选区工具条。
@@ -367,6 +385,12 @@
   let copyFeedbackTimer: number | undefined = $state()
   // 每个代码块的运行状态和预览结果，key 为 codeBlockId。
   let codePreviews = $state<Record<string, CodePreviewState>>({})
+  // Mermaid host 会随 {@html} 重建，渲染缓存必须独立于 DOM 节点保存。
+  const mermaidRenderCache = new SvelteMap<string, MermaidRenderCacheEntry>()
+  // 流式输出会高频重建 {@html}，Mermaid 同步必须合并到内容静默后执行。
+  let mermaidSyncTimer: number | undefined
+  let mermaidSyncFrame: number | undefined
+  let scheduledMermaidRenderSignature = ''
   // selectionFormatState 跟随真实 DOM 选区，负责驱动按钮按下态与下拉默认值。
   let selectionFormatState = $state<SelectionFormatState>({
     ...DEFAULT_SELECTION_FORMAT_STATE,
@@ -419,8 +443,13 @@
       allowHtmlTags,
     }),
   )
-  // html 是最终注入正文的内容。
-  const html = $derived(renderResult.html)
+  // Mermaid 占位 HTML 在流式阶段可能不变，必须额外订阅源码签名变化。
+  const mermaidRenderSignature = $derived(
+    renderResult.blocks
+      .filter(block => block.kind === 'mermaid')
+      .map(block => block.signature)
+      .join('\n'),
+  )
   // outline 是左侧目录的原始数据源。
   const outline = $derived(renderResult.outline)
   // outlineHasContent 用来区分“目录被收起”和“正文确实没有标题”。
@@ -492,14 +521,26 @@
   }
 
   $effect(() => {
-    void html
+    void renderResult.blocks
+    void mermaidRenderSignature
     if (typeof window === 'undefined' || !previewHost) {
+      cancelMermaidHostsSync()
       return
     }
 
+    if (!mermaidRenderSignature) {
+      scheduledMermaidRenderSignature = ''
+      cancelMermaidHostsSync()
+    }
+    else if (
+      mermaidRenderSignature !== scheduledMermaidRenderSignature
+    ) {
+      scheduledMermaidRenderSignature = mermaidRenderSignature
+      scheduleMermaidHostsSync()
+    }
+
     requestAnimationFrame(() => {
       syncCodePreviewHosts()
-      syncMermaidHosts()
       syncActiveHeadingFromScroll()
       syncPinnedTitleVisibility()
     })
@@ -939,10 +980,16 @@
       : ''
 
     if (result.kind === 'mermaid') {
-      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-mermaid"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-mermaid hai-md-mermaid-preview"></div></div>`
+      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-mermaid"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-mermaid hai-md-mermaid-preview" contenteditable="false"></div></div>`
       const mermaidEl = host.querySelector<HTMLElement>('.hai-md-mermaid-preview')
       if (mermaidEl) {
-        void renderMermaidHost(mermaidEl, result.content)
+        const signature = createMermaidSourceSignature('preview', result.content)
+        void renderMermaidHost(
+          mermaidEl,
+          result.content,
+          signature,
+          `preview:${signature}`,
+        )
       }
       return
     }
@@ -974,6 +1021,43 @@
    * mermaid 图表位于 `{@html}` 注入的 DOM 内部，渲染是异步的。
    * 阅读态的图表块和 code 模式预览槽都复用这里把源码渲染为 SVG。
    */
+  function scheduleMermaidHostsSync(): void {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    if (mermaidSyncTimer !== undefined) {
+      window.clearTimeout(mermaidSyncTimer)
+    }
+    if (mermaidSyncFrame !== undefined) {
+      window.cancelAnimationFrame(mermaidSyncFrame)
+      mermaidSyncFrame = undefined
+    }
+
+    mermaidSyncTimer = window.setTimeout(() => {
+      mermaidSyncTimer = undefined
+      mermaidSyncFrame = window.requestAnimationFrame(() => {
+        mermaidSyncFrame = undefined
+        syncMermaidHosts()
+      })
+    }, MERMAID_SYNC_IDLE_DELAY_MS)
+  }
+
+  function cancelMermaidHostsSync(): void {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    if (mermaidSyncTimer !== undefined) {
+      window.clearTimeout(mermaidSyncTimer)
+      mermaidSyncTimer = undefined
+    }
+    if (mermaidSyncFrame !== undefined) {
+      window.cancelAnimationFrame(mermaidSyncFrame)
+      mermaidSyncFrame = undefined
+    }
+  }
+
   function syncMermaidHosts(): void {
     if (!previewHost) {
       return
@@ -981,13 +1065,6 @@
 
     const hosts = previewHost.querySelectorAll<HTMLElement>('[data-mermaid-host]')
     for (const host of hosts) {
-      if (
-        host.dataset.mermaidStatus === 'ready'
-        || host.dataset.mermaidStatus === 'rendering'
-      ) {
-        continue
-      }
-
       const blockId = host.dataset.mermaidHost
       if (!blockId) {
         continue
@@ -998,7 +1075,19 @@
         continue
       }
 
-      void renderMermaidHost(host, block.code)
+      const nextSignature = createMermaidSourceSignature(block.id, block.code)
+      const cached = mermaidRenderCache.get(blockId)
+      const action = getMermaidHostRenderAction({
+        status: cached?.status ?? host.dataset.mermaidStatus,
+        renderedSignature: cached?.signature ?? host.dataset.mermaidSourceSignature,
+        nextSignature,
+      })
+      if (!action.shouldRender) {
+        applyCachedMermaidRender(host, cached)
+        continue
+      }
+
+      void renderMermaidHost(host, block.code, action.token, blockId)
     }
   }
 
@@ -1006,16 +1095,98 @@
    * 把单个 mermaid 源码渲染进目标节点；语法错误时展示本地化错误提示。
    * `mermaidStatus` 既避免同一帧重复渲染，也兜住多次 effect 触发。
    */
-  async function renderMermaidHost(host: HTMLElement, code: string): Promise<void> {
+  async function renderMermaidHost(
+    host: HTMLElement,
+    code: string,
+    renderToken: string,
+    cacheKey: string,
+  ): Promise<void> {
+    const cached = mermaidRenderCache.get(cacheKey)
+    if (
+      cached
+      && (cached.status === 'ready' || cached.status === 'rendering' || cached.status === 'error')
+      && cached.signature === renderToken
+    ) {
+      applyCachedMermaidRender(host, cached)
+      return
+    }
+
     host.dataset.mermaidStatus = 'rendering'
+    host.dataset.mermaidSourceSignature = renderToken
+    mermaidRenderCache.set(cacheKey, {
+      signature: renderToken,
+      status: 'rendering',
+    })
     try {
       const svg = await renderMermaidDiagram(code)
-      host.innerHTML = svg
-      host.dataset.mermaidStatus = 'ready'
+      if (!isCurrentMermaidRenderToken(renderToken, mermaidRenderCache.get(cacheKey)?.signature)) {
+        return
+      }
+
+      const entry: MermaidRenderCacheEntry = {
+        signature: renderToken,
+        status: 'ready',
+        html: stripMermaidSvgStyleElements(svg),
+      }
+      mermaidRenderCache.set(cacheKey, entry)
+      applyCachedMermaidRender(host, entry)
+      applyCachedMermaidRenderToCurrentHosts(cacheKey, entry)
     }
     catch (error) {
-      host.dataset.mermaidStatus = 'error'
-      host.innerHTML = `<div class="hai-md-mermaid-error">${escapePreviewText(error instanceof Error ? error.message : uiM('markdown_mermaid_failed'))}</div>`
+      if (!isCurrentMermaidRenderToken(renderToken, mermaidRenderCache.get(cacheKey)?.signature)) {
+        return
+      }
+
+      const message = error instanceof Error ? error.message : uiM('markdown_mermaid_failed')
+      const entry: MermaidRenderCacheEntry = {
+        signature: renderToken,
+        status: 'error',
+        error: message,
+      }
+      mermaidRenderCache.set(cacheKey, entry)
+      applyCachedMermaidRender(host, entry)
+      applyCachedMermaidRenderToCurrentHosts(cacheKey, entry)
+    }
+  }
+
+  function applyCachedMermaidRender(
+    host: HTMLElement,
+    entry: MermaidRenderCacheEntry | undefined,
+  ): void {
+    if (!entry) {
+      return
+    }
+
+    host.dataset.mermaidStatus = entry.status
+    host.dataset.mermaidSourceSignature = entry.signature
+    if (host.dataset.mermaidAppliedSignature === entry.signature) {
+      return
+    }
+
+    if (entry.status === 'ready' && entry.html !== undefined) {
+      host.innerHTML = entry.html
+      host.dataset.mermaidAppliedSignature = entry.signature
+      return
+    }
+
+    if (entry.status === 'error') {
+      host.innerHTML = `<div class="hai-md-mermaid-error">${escapePreviewText(entry.error ?? uiM('markdown_mermaid_failed'))}</div>`
+      host.dataset.mermaidAppliedSignature = entry.signature
+    }
+  }
+
+  function applyCachedMermaidRenderToCurrentHosts(
+    cacheKey: string,
+    entry: MermaidRenderCacheEntry,
+  ): void {
+    if (!previewHost) {
+      return
+    }
+
+    for (const host of previewHost.querySelectorAll<HTMLElement>('[data-mermaid-host]')) {
+      if (host.dataset.mermaidHost === cacheKey) {
+        applyCachedMermaidRender(host, entry)
+      }
     }
   }
 
@@ -3172,8 +3343,18 @@
             oninput={handlePreviewInput}
             onblur={handlePreviewBlur}
           >
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 渲染 -->
-            {@html html}
+            {#each renderResult.blocks as block (block.id)}
+              {#if block.kind === 'html'}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 块渲染 -->
+                {@html block.html}
+              {:else}
+                <div
+                  class='hai-md-mermaid'
+                  contenteditable='false'
+                  data-mermaid-host={block.codeBlockId}
+                ></div>
+              {/if}
+            {/each}
           </article>
         </div>
       </section>

package/dist/components/scenes/ai/document-download.js

@@ -13,6 +13,22 @@ const BROWSER_PDF_PAGE_BREAK_SAMPLE_STEP_PX = 4;
 const BROWSER_PDF_PAGE_BREAK_WHITE_THRESHOLD = 246;
 const BROWSER_PDF_PAGE_BREAK_ALPHA_THRESHOLD = 12;
 const BROWSER_PDF_PAGE_BREAK_EMPTY_ROW_MAX_INK = 1;
+function escapeExportHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function renderDocumentBlocksForExport(blocks) {
+    return blocks.map((block) => {
+        if (block.kind === 'html') {
+            return block.html;
+        }
+        return `<pre><code class="language-${escapeExportHtml(block.language)}">${escapeExportHtml(block.code)}</code></pre>`;
+    }).join('\n');
+}
 /**
  * code 类型产物通常只有裸代码正文。
  * 下载和预览都通过同一份规范化逻辑包装成 fenced markdown，避免两边导出的结构不一致。
@@ -75,14 +91,15 @@ export async function downloadAiDocument(request) {
         showRunButton: false,
         breaks: true,
     });
-    const exportHtml = buildDocumentExportHtml(exportTitle, rendered.html);
+    const renderedHtml = renderDocumentBlocksForExport(rendered.blocks);
+    const exportHtml = buildDocumentExportHtml(exportTitle, renderedHtml);
     if (builtIn.id === 'word') {
         downloadBlob(new Blob([`\uFEFF${exportHtml}`], {
             type: 'application/msword;charset=utf-8',
         }), `${baseName}.doc`);
         return;
     }
-    await downloadDocumentAsPdf(htmlToPdfFilename(exportTitle), rendered.html);
+    await downloadDocumentAsPdf(htmlToPdfFilename(exportTitle), renderedHtml);
 }
 function createBuiltInDownloadAction(format) {
     switch (format) {

package/dist/components/scenes/ai/document-parse.d.ts

@@ -25,12 +25,35 @@ export interface MarkdownDocumentParseOptions {
     allowHtmlTags?: boolean;
 }
 export interface MarkdownRenderResult {
-    /** Rendered HTML output. */
-    html: string;
     /** Extracted outline items for navigation. */
     outline: MarkdownOutlineItem[];
     /** Extracted code blocks for run/copy features. */
     codeBlocks: MarkdownCodeBlockItem[];
+    /** 阅读态使用的稳定块列表，避免流式更新销毁重型块 DOM。 */
+    blocks: MarkdownDocumentBlock[];
+}
+export type MarkdownDocumentBlock = MarkdownDocumentHtmlBlock | MarkdownDocumentMermaidBlock;
+export interface MarkdownDocumentHtmlBlock {
+    /** 普通 Markdown HTML 块。 */
+    kind: 'html';
+    /** 稳定块 id，用于 Svelte keyed each。 */
+    id: string;
+    /** 已按现有安全策略渲染后的 HTML。 */
+    html: string;
+}
+export interface MarkdownDocumentMermaidBlock {
+    /** 已闭合 Mermaid fence 块。 */
+    kind: 'mermaid';
+    /** 稳定块 id，用于 Svelte keyed each。 */
+    id: string;
+    /** 对应 codeBlocks 中的代码块 id。 */
+    codeBlockId: string;
+    /** Mermaid 源码。 */
+    code: string;
+    /** 原始 fence info string。 */
+    language: string;
+    /** Mermaid 源码签名，源码变化时才需要重渲染。 */
+    signature: string;
 }
 /**
  * Render markdown into HTML and extract outline + code block metadata.

package/dist/components/scenes/ai/document-parse.js

@@ -28,6 +28,41 @@ function readHtmlTokenSource(token) {
         ? token.text
         : '';
 }
+/**
+ * 判断 fenced code block 是否已经输出闭合 fence。
+ *
+ * marked 在流式半截内容里也会把未闭合 fence 识别成 code token；如果此时提前
+ * 调用 Mermaid，会把临时语法错误渲染成错误 SVG 并残留在界面上。
+ */
+function isClosedFencedCodeBlock(token) {
+    const firstLineEnd = token.raw.indexOf('\n');
+    const firstLine = firstLineEnd === -1
+        ? token.raw
+        : token.raw.slice(0, firstLineEnd);
+    const openingStart = firstLine.search(/\S/);
+    if (openingStart === -1 || openingStart > 3) {
+        return true;
+    }
+    const markerChar = firstLine[openingStart];
+    if (markerChar !== '`' && markerChar !== '~') {
+        return true;
+    }
+    let markerLength = 0;
+    for (let index = openingStart; firstLine[index] === markerChar; index += 1) {
+        markerLength += 1;
+    }
+    if (markerLength < 3) {
+        return true;
+    }
+    const trimmedRaw = token.raw.trimEnd();
+    const lastLineStart = trimmedRaw.lastIndexOf('\n');
+    if (lastLineStart === -1) {
+        return false;
+    }
+    const closingFence = trimmedRaw.slice(lastLineStart + 1).trim();
+    return closingFence.length >= markerLength
+        && [...closingFence].every(char => char === markerChar);
+}
 /**
  * Create a URL-safe heading slug while keeping letters and digits.
  */
@@ -98,18 +133,21 @@ function createRendererObject(options, state) {
             const headingHtml = this.parser.parseInline(token.tokens);
             return `<h${depth} id="${escapeHtml(id)}" data-heading-id="${escapeHtml(id)}">${headingHtml}</h${depth}>`;
         },
-        code({ text, lang }) {
+        code(token) {
+            const { text, lang } = token;
             // rawLanguage is the original info string from the fence.
             const rawLanguage = lang?.trim() || '';
             // mermaid 块在阅读态自动渲染为图表；只有 code 模式的代码/预览切换才保留源码视图。
-            if (isMermaidLanguage(rawLanguage) && !options.showCodePreviewToggle) {
+            if (isMermaidLanguage(rawLanguage)
+                && !options.showCodePreviewToggle
+                && isClosedFencedCodeBlock(token)) {
                 const mermaidBlockId = `hai-md-code-${state.codeBlocks.length + 1}`;
                 state.codeBlocks.push({
                     id: mermaidBlockId,
                     code: text,
                     language: rawLanguage,
                 });
-                return `<div class="hai-md-mermaid" data-mermaid-host="${escapeHtml(mermaidBlockId)}"></div>`;
+                return `<div class="hai-md-mermaid" contenteditable="false" data-mermaid-host="${escapeHtml(mermaidBlockId)}"></div>`;
             }
             // highlightLanguage is validated against supported languages.
             const highlightLanguage = rawLanguage && isLanguageSupported(rawLanguage)
@@ -236,16 +274,105 @@ function createMarkedInstance(options, state) {
         breaks: options.breaks,
     });
 }
+function createMermaidSourceSignature(blockId, code) {
+    return JSON.stringify([blockId, code]);
+}
+function createEmptyRenderResult() {
+    return {
+        outline: [],
+        codeBlocks: [],
+        blocks: [],
+    };
+}
+function createHtmlBlock(id, html) {
+    return html
+        ? {
+            kind: 'html',
+            id,
+            html,
+        }
+        : null;
+}
+function renderMarkdownDocumentHtmlChunk(content, options, state) {
+    const marked = createMarkedInstance(options, state);
+    const result = marked.parse(content);
+    return {
+        html: typeof result === 'string' ? result : '',
+        codeBlocks: state.codeBlocks,
+    };
+}
+function isClosedMermaidToken(token, options) {
+    if (token.type !== 'code'
+        || !('text' in token)
+        || typeof token.text !== 'string') {
+        return false;
+    }
+    const codeToken = token;
+    const rawLanguage = codeToken.lang?.trim() || '';
+    return isMermaidLanguage(rawLanguage)
+        && !options.showCodePreviewToggle
+        && isClosedFencedCodeBlock(codeToken);
+}
+function renderMarkdownDocumentBlocks(content, options) {
+    const marked = new Marked({
+        extensions: createEditorMarkdownExtensions(),
+        gfm: true,
+        breaks: options.breaks,
+    });
+    const tokens = marked.lexer(content);
+    const blocks = [];
+    let htmlTokens = [];
+    const state = {
+        outline: [],
+        codeBlocks: [],
+        headingIds: new Map(),
+    };
+    let nextBlockIndex = 1;
+    function flushHtmlTokens() {
+        if (htmlTokens.length === 0) {
+            return;
+        }
+        const chunk = htmlTokens.map(token => token.raw).join('');
+        const result = renderMarkdownDocumentHtmlChunk(chunk, options, state);
+        const block = createHtmlBlock(`hai-md-block-${nextBlockIndex}`, result.html);
+        if (block) {
+            blocks.push(block);
+            nextBlockIndex += 1;
+        }
+        htmlTokens = [];
+    }
+    for (const token of tokens) {
+        if (!isClosedMermaidToken(token, options)) {
+            htmlTokens.push(token);
+            continue;
+        }
+        flushHtmlTokens();
+        const codeBlockId = `hai-md-code-${state.codeBlocks.length + 1}`;
+        const rawLanguage = token.lang?.trim() || '';
+        state.codeBlocks.push({
+            id: codeBlockId,
+            code: token.text,
+            language: rawLanguage,
+        });
+        blocks.push({
+            kind: 'mermaid',
+            id: `hai-md-block-${nextBlockIndex}`,
+            codeBlockId,
+            code: token.text,
+            language: rawLanguage,
+            signature: createMermaidSourceSignature(codeBlockId, token.text),
+        });
+        nextBlockIndex += 1;
+    }
+    flushHtmlTokens();
+    return blocks;
+}
 /**
  * Render markdown into HTML and extract outline + code block metadata.
  */
 export function renderMarkdownDocument(content, options) {
     if (!content) {
-        return {
-            html: '',
-            outline: [],
-            codeBlocks: [],
-        };
+        return createEmptyRenderResult();
     }
     // mergedOptions ensures defaults are always applied.
     const mergedOptions = {
@@ -260,11 +387,10 @@ export function renderMarkdownDocument(content, options) {
     };
     // marked instance is scoped to this render call.
     const marked = createMarkedInstance(mergedOptions, state);
-    // result can be sync string or async promise; only sync string is used.
-    const result = marked.parse(content);
+    marked.parse(content);
     return {
-        html: typeof result === 'string' ? result : '',
         outline: createNumberedOutline(state.outline),
         codeBlocks: state.codeBlocks,
+        blocks: renderMarkdownDocumentBlocks(content, mergedOptions),
     };
 }

package/dist/components/scenes/ai/index.d.ts

@@ -10,7 +10,7 @@ export { default as AiDocumentEditor } from './AiDocumentEditor.svelte';
 export { downloadAiDocument, resolveDocumentDownloadActions, resolveDocumentMarkdownContent, } from './document-download.js';
 export type { AiDocumentDownloadFormat, AiDocumentDownloadRequest, AiDocumentResolvedDownloadAction, } from './document-download.js';
 export { renderMarkdownDocument } from './document-parse.js';
-export type { MarkdownDocumentParseOptions, MarkdownRenderResult, } from './document-parse.js';
+export type { MarkdownDocumentBlock, MarkdownDocumentHtmlBlock, MarkdownDocumentMermaidBlock, MarkdownDocumentParseOptions, MarkdownRenderResult, } from './document-parse.js';
 export type { AiDocumentEditorProps, MarkdownBlockFormatKind, MarkdownBlockStyleKind, MarkdownCodeBlockItem, MarkdownCodeRunRequest, MarkdownCodeRunResult, MarkdownColorFormatRequest, MarkdownInlineFormatKind, MarkdownOutlineItem, MarkdownRewriteAction, MarkdownRewriteRequest, MarkdownTextAlignKind, MarkdownToolbarDownloadAction, } from './document-types.js';
 export { parseMarkdown } from './markdown-parse.js';
 export type { MarkdownParseOptions } from './markdown-parse.js';

package/dist/components/scenes/ai/mermaid-host-sync.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Mermaid host 同步状态工具。
+ *
+ * Mermaid 图表通过 {@html} 插入占位节点后异步渲染。流式输出时，HTML 占位可能不变，
+ * 但源码正文会持续变化，因此必须用源码签名判断是否需要重渲染。
+ */
+export interface MermaidHostRenderActionInput {
+    /** 当前 host 上记录的渲染状态。 */
+    status?: string;
+    /** 当前 host 上一次渲染使用的源码签名。 */
+    renderedSignature?: string;
+    /** 本次 Markdown 解析得到的最新源码签名。 */
+    nextSignature: string;
+}
+export type MermaidHostRenderAction = {
+    shouldRender: false;
+} | {
+    shouldRender: true;
+    token: string;
+};
+/**
+ * 为 Mermaid block 生成稳定签名。
+ *
+ * 签名同时包含 block id 与源码正文，避免流式阶段占位 HTML 未变化时漏掉源码更新。
+ */
+export declare function createMermaidSourceSignature(blockId: string, code: string): string;
+/**
+ * 判断 Mermaid host 是否需要发起一次新的异步渲染。
+ */
+export declare function getMermaidHostRenderAction(input: MermaidHostRenderActionInput): MermaidHostRenderAction;
+/**
+ * 判断异步 Mermaid 渲染结果是否仍对应当前 host 源码。
+ */
+export declare function isCurrentMermaidRenderToken(renderToken: string, currentSignature: string | undefined): boolean;

package/dist/components/scenes/ai/mermaid-host-sync.js

@@ -0,0 +1,35 @@
+/**
+ * Mermaid host 同步状态工具。
+ *
+ * Mermaid 图表通过 {@html} 插入占位节点后异步渲染。流式输出时，HTML 占位可能不变，
+ * 但源码正文会持续变化，因此必须用源码签名判断是否需要重渲染。
+ */
+/**
+ * 为 Mermaid block 生成稳定签名。
+ *
+ * 签名同时包含 block id 与源码正文，避免流式阶段占位 HTML 未变化时漏掉源码更新。
+ */
+export function createMermaidSourceSignature(blockId, code) {
+    return JSON.stringify([blockId, code]);
+}
+/**
+ * 判断 Mermaid host 是否需要发起一次新的异步渲染。
+ */
+export function getMermaidHostRenderAction(input) {
+    const status = input.status?.trim();
+    const renderedSignature = input.renderedSignature?.trim();
+    if ((status === 'ready' || status === 'rendering' || status === 'error')
+        && renderedSignature === input.nextSignature) {
+        return { shouldRender: false };
+    }
+    return {
+        shouldRender: true,
+        token: input.nextSignature,
+    };
+}
+/**
+ * 判断异步 Mermaid 渲染结果是否仍对应当前 host 源码。
+ */
+export function isCurrentMermaidRenderToken(renderToken, currentSignature) {
+    return renderToken === currentSignature;
+}

package/dist/components/scenes/ai/mermaid-render.d.ts

@@ -12,3 +12,8 @@ export declare function isMermaidLanguage(language: string | undefined | null):
  * 把 mermaid 源码渲染为 SVG 字符串；语法错误时抛出由调用方兜底展示。
  */
 export declare function renderMermaidDiagram(code: string): Promise<string>;
+/**
+ * Mermaid 11.x 会在 SVG 内写入很长的 style 标签内容；在 contenteditable 预览区里，
+ * 部分浏览器会把这些 CSS 当成正文显示。这里保留 SVG 图形，剥离内联样式文本。
+ */
+export declare function stripMermaidSvgStyleElements(svg: string): string;