@h-ai/ui 0.1.0-alpha.11 → 0.1.0-alpha.13

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

@@ -21,8 +21,10 @@
     MarkdownColorFormatRequest,
     MarkdownInlineFormatKind,
     MarkdownRewriteAction,
+    MarkdownSelectionSnapshot,
     MarkdownTextAlignKind,
   } from './document-types.js'
+  import { tick } from 'svelte'
   import { uiM } from '../../../messages.js'
   import { cn } from '../../../utils.js'
   import AiDocumentDownloadMenu from './AiDocumentDownloadMenu.svelte'
@@ -33,7 +35,7 @@
   interface SelectionToolbarPosition {
     /** 选区工具条相对滚动容器的 top 坐标。 */
     top: number
-    /** 选区工具条中心点相对滚动容器的 left 坐标。 */
+    /** 选区工具条左侧边缘相对滚动容器的 left 坐标。 */
     left: number
     /** 选区工具条应该出现在选区上方还是下方，避免遮挡正文。 */
     placement: 'top' | 'bottom'
@@ -84,6 +86,28 @@
     text: string
   }
 
+  interface ColorSwatchOption {
+    /** 颜色值；为空表示恢复默认或清除当前维度。 */
+    value: string | null
+    /** 展示标题，用于 hover / a11y。 */
+    titleKey: 'markdown_background_none'
+  }
+
+  interface HoveredLinkState {
+    /** 当前悬停的链接元素。 */
+    element: HTMLAnchorElement
+    /** 浏览器可直接打开的绝对链接地址。 */
+    href: string
+    /** 编辑时优先回填原始 href 属性，避免相对地址被强制绝对化。 */
+    rawHref: string
+    /** 悬停浮层相对滚动容器的 top 坐标。 */
+    top: number
+    /** 悬停浮层左侧边缘相对滚动容器的 left 坐标。 */
+    left: number
+    /** 浮层出现在链接上方还是下方。 */
+    placement: 'top' | 'bottom'
+  }
+
   type SelectionMenuKind = 'rewrite' | 'block' | 'align' | 'link' | 'color'
 
   const BLOCK_FORMAT_OPTIONS: Array<{
@@ -94,6 +118,8 @@
       | 'markdown_format_heading_2'
       | 'markdown_format_heading_3'
       | 'markdown_format_heading_4'
+      | 'markdown_format_ordered_list'
+      | 'markdown_format_bullet_list'
     shortLabel: string
   }> = [
     {
@@ -116,6 +142,16 @@
       labelKey: 'markdown_format_heading_3',
       shortLabel: 'H3',
     },
+    {
+      value: 'orderedList',
+      labelKey: 'markdown_format_ordered_list',
+      shortLabel: '1.',
+    },
+    {
+      value: 'bulletList',
+      labelKey: 'markdown_format_bullet_list',
+      shortLabel: '•',
+    },
     {
       value: 'heading4',
       labelKey: 'markdown_format_heading_4',
@@ -158,6 +194,13 @@
     '#f3f4f6',
     '#e2e8f0',
   ] as const
+  const BACKGROUND_COLOR_OPTIONS: readonly (typeof BACKGROUND_COLOR_PRESETS[number] | ColorSwatchOption)[] = [
+    { value: null, titleKey: 'markdown_background_none' },
+    ...BACKGROUND_COLOR_PRESETS,
+  ] as const
+  const FALLBACK_BLOCK_FORMAT_OPTION = BLOCK_FORMAT_OPTIONS.find(
+    option => option.value === 'paragraph',
+  ) ?? BLOCK_FORMAT_OPTIONS[0]
 
   const DEFAULT_SELECTION_FORMAT_STATE: SelectionFormatState = {
     blockFormat: 'paragraph',
@@ -176,7 +219,6 @@
   // 复制前后的图标以内联 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 HTML_SNIPPET_REGEX = /<!doctype html>|<html[\s>]|<body[\s>]|<div[\s>]|<main[\s>]/i
 
   let {
     // 暴露给外层的滚动容器引用，用于同步滚动或定位选区工具条。
@@ -197,6 +239,10 @@
     showCopyButton = true,
     // 是否显示代码块运行按钮与预览占位。
     showRunButton = false,
+    // 是否在代码块头部显示“代码/预览”切换。
+    showCodePreviewToggle = false,
+    // 代码预览切换模式下展示在语言标签旁的提示文案。
+    codePreviewHint = '',
     // 是否启用语法高亮。
     enableHighlight = true,
     // 是否把换行渲染为 <br>。
@@ -286,6 +332,10 @@
     placement: 'top',
     alignment: 'center',
   })
+  // 窄容器下目录会改成悬浮覆盖模式，保存 DOM 引用后才能在定位工具条时主动避让。
+  let outlinePanelEl = $state<HTMLElement | null>(null)
+  // chrome 节点同时包住主工具条和下拉面板，方便判断焦点是否仍留在浮层内部。
+  let selectionChromeEl = $state<HTMLDivElement | null>(null)
   // 选区工具条自身 DOM，用于根据真实尺寸修正贴边位置。
   let selectionToolbarEl = $state<HTMLDivElement | null>(null)
   // 当前展开菜单对应的触发按钮，用来把面板锚定到具体按钮下方/上方。
@@ -306,24 +356,48 @@
   })
   // linkDraft 只在链接弹层里暂存输入值，避免每次打开都丢掉正在编辑的链接。
   let linkDraft = $state('')
+  // 链接输入框允许接管焦点，但格式动作仍需要恢复到正文的最后一个有效选区。
+  let linkInputEl = $state<HTMLInputElement | null>(null)
+  // 链接按钮 DOM 用来在“悬停编辑链接”场景下复用现有链接弹层定位。
+  let selectionLinkButtonEl = $state<HTMLButtonElement | null>(null)
+  // 原始 DOM Range 在结构没变时恢复最快，也能保留浏览器原生的精确边界。
+  let savedSelectionRange = $state<Range | null>(null)
+  // 纯文本快照用于 DOM 被局部重建后的兜底恢复，避免只靠 Range 引用失效。
+  let savedSelectionSnapshot = $state<MarkdownSelectionSnapshot | null>(null)
   // 真实尺寸修正只需要排队一帧，避免反复触发 handleSelectionChange 形成抖动。
   let selectionToolbarMeasurePending = false
   // 选区刷新统一合并到同一帧，避免 selectionchange / mouseup / blur 连续触发时抖动。
   let selectionRefreshFrame: number | undefined
+  // 同一帧内任一来源要求重新量尺时，都要把这次刷新升级成 remeasure 版本。
   let selectionRefreshNeedsRemeasure = false
   // 浏览器在滚动到底部或切换焦点时会短暂给出空选区，这里延迟一拍再关闭工具条。
   let selectionToolbarCloseTimer: number | undefined
+  // 悬停到已配置链接时显示快捷浮层，便于直接打开或编辑。
+  let hoveredLinkState = $state<HoveredLinkState | null>(null)
+  // 悬停浮层需要拿到真实尺寸后再二次校正位置。
+  let hoveredLinkPopoverEl = $state<HTMLDivElement | null>(null)
+  // 鼠标从正文移动到悬停浮层时给一小段缓冲，避免浮层闪烁。
+  let hoveredLinkHideTimer: number | undefined
 
   // code 类型产物通常只有裸代码文本，这里统一包成 fenced block 进入同一条渲染链路。
   const documentContent = $derived(
     resolveDocumentMarkdownContent(content, sourceKind, codeLanguage),
   )
   // 渲染结果同时提供 HTML、目录和代码块元数据，供顶部目录与代码预览共用。
+  const codePreviewToggleEnabled = $derived(
+    showCodePreviewToggle && sourceKind === 'code',
+  )
+  // hint 文案统一做 trim，避免只传空格时仍把占位区域撑开。
+  const normalizedCodePreviewHint = $derived(codePreviewHint.trim())
   const renderResult = $derived(
     renderMarkdownDocument(documentContent, {
       enableHighlight,
       showCopyButton,
       showRunButton,
+      showCodePreviewToggle: codePreviewToggleEnabled,
+      codeViewCodeLabel: uiM('markdown_format_code'),
+      codeViewPreviewLabel: uiM('file_list_preview'),
+      codePreviewHint: normalizedCodePreviewHint,
       breaks,
     }),
   )
@@ -337,6 +411,10 @@
   const resolvedRewriteActions = $derived(
     resolveRewriteActions(rewriteActions, onrewrite),
   )
+  // 只有一个改写动作时直接渲染成按钮，多动作才保留菜单，减少一次点击。
+  const directRewriteAction = $derived(
+    resolvedRewriteActions.length === 1 ? resolvedRewriteActions[0] : null,
+  )
   // 新版工具条支持 paragraph / heading1-4，优先走细粒度回调，避免把旧接口误当成新接口调用。
   const richBlockFormattingEnabled = $derived(Boolean(onapplyblockstyle))
   // 旧版 heading / bullet 回调仍然保留，用于兼容外部还没迁移的调用方。
@@ -364,13 +442,14 @@
   const activeBlockFormatOption = $derived(
     BLOCK_FORMAT_OPTIONS.find(
       option => option.value === selectionFormatState.blockFormat,
-    ) ?? BLOCK_FORMAT_OPTIONS[0],
+    ) ?? FALLBACK_BLOCK_FORMAT_OPTION,
   )
   // readerDocumentClass 只负责正文文章区域，不和外层容器类名混用。
   const readerDocumentClass = $derived(
     cn(
       'hai-markdown',
       'hai-markdown-document',
+      sourceKind === 'code' ? 'hai-markdown-code-only' : '',
       editable ? 'hai-markdown-editable' : '',
     ),
   )
@@ -416,7 +495,9 @@
 
   $effect(() => {
     void documentContent
-    closeSelectionToolbar()
+    codePreviews = {}
+    hoveredLinkState = null
+    queueSelectionRefresh(true)
   })
 
   $effect(() => {
@@ -441,6 +522,10 @@
       if (selectionToolbarCloseTimer) {
         window.clearTimeout(selectionToolbarCloseTimer)
       }
+
+      if (hoveredLinkHideTimer) {
+        window.clearTimeout(hoveredLinkHideTimer)
+      }
     }
   })
 
@@ -463,6 +548,64 @@
     }
   })
 
+  $effect(() => {
+    if (
+      typeof document === 'undefined'
+      || !selectionToolbarVisible
+    ) {
+      return
+    }
+
+    const handleDocumentPointerDown = (event: MouseEvent): void => {
+      const target = event.target
+      if (!(target instanceof Node)) {
+        return
+      }
+
+      if (selectionChromeEl?.contains(target)) {
+        return
+      }
+
+      closeSelectionToolbar()
+    }
+
+    document.addEventListener('mousedown', handleDocumentPointerDown, true)
+
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentPointerDown, true)
+    }
+  })
+
+  $effect(() => {
+    if (typeof window === 'undefined' || activeSelectionMenu !== 'link' || !linkInputEl) {
+      return
+    }
+
+    const nextLinkInput = linkInputEl
+    const focusFrame = window.requestAnimationFrame(() => {
+      nextLinkInput.focus()
+      nextLinkInput.select()
+    })
+
+    return () => {
+      window.cancelAnimationFrame(focusFrame)
+    }
+  })
+
+  $effect(() => {
+    if (typeof window === 'undefined' || !hoveredLinkState || !hoveredLinkPopoverEl) {
+      return
+    }
+
+    const measureFrame = window.requestAnimationFrame(() => {
+      syncHoveredLinkPosition()
+    })
+
+    return () => {
+      window.cancelAnimationFrame(measureFrame)
+    }
+  })
+
   function resolveRewriteActions(
     actions: MarkdownRewriteAction[],
     handler?: AiDocumentEditorProps['onrewrite'],
@@ -483,6 +626,8 @@
     ]
   }
 
+  const HTML_DOCUMENT_PATTERN = /<!doctype html>|<html[\s>]|<body[\s>]|<div[\s>]|<main[\s>]/i
+
   async function copyRawContent(): Promise<boolean> {
     try {
       await navigator.clipboard.writeText(content)
@@ -549,9 +694,7 @@
   }
 
   function looksLikeHtml(code: string): boolean {
-    return HTML_SNIPPET_REGEX.test(
-      code,
-    )
+    return HTML_DOCUMENT_PATTERN.test(code)
   }
 
   function buildJavaScriptPreview(code: string): string {
@@ -668,6 +811,38 @@ ${safeCode}
     return undefined
   }
 
+  function formatPreviewLanguageLabel(language: string | undefined): string | null {
+    const normalized = language?.trim().toLocaleLowerCase()
+    if (!normalized) {
+      return null
+    }
+
+    if (
+      normalized === 'javascript'
+      || normalized === 'js'
+      || normalized === 'mjs'
+    ) {
+      return 'JavaScript'
+    }
+
+    if (normalized === 'markdown' || normalized === 'md') {
+      return 'Markdown'
+    }
+
+    return normalized.toUpperCase()
+  }
+
+  function resolvePreviewUnavailableMessage(language: string | undefined): string {
+    const languageLabel = formatPreviewLanguageLabel(language)
+    if (!languageLabel) {
+      return uiM('markdown_run_unavailable')
+    }
+
+    return uiM('markdown_run_unavailable_language', {
+      language: languageLabel,
+    })
+  }
+
   async function runCodeBlock(blockId: string): Promise<void> {
     const codeBlock = lookupCodeBlock(blockId)
     if (!codeBlock) {
@@ -698,7 +873,7 @@ ${safeCode}
           ...codePreviews,
           [blockId]: {
             status: 'error',
-            error: uiM('markdown_run_unavailable'),
+            error: resolvePreviewUnavailableMessage(request.language),
           },
         }
         return
@@ -724,6 +899,24 @@ ${safeCode}
     }
   }
 
+  function setCodeBlockView(
+    codeBlock: HTMLElement,
+    view: 'code' | 'preview',
+  ): void {
+    codeBlock.dataset.codeView = view
+    const toggleButtons = codeBlock.querySelectorAll<HTMLButtonElement>(
+      '[data-code-view-toggle]',
+    )
+    for (const button of toggleButtons) {
+      const isActive = button.dataset.codeView === view
+      button.setAttribute('aria-pressed', isActive ? 'true' : 'false')
+    }
+  }
+
+  /**
+   * 统一承接正文里通过 `{@html}` 注入的交互节点点击。
+   * 这些按钮和链接不受 Svelte 逐个绑定管理，因此在容器级别做代理更稳妥。
+   */
   async function handleClick(event: MouseEvent): Promise<void> {
     const target = event.target as HTMLElement
     const copyButton = target.closest(
@@ -734,12 +927,48 @@ ${safeCode}
       return
     }
 
+    const viewButton = target.closest(
+      '[data-code-view-toggle]',
+    ) as HTMLButtonElement | null
+    const viewCodeBlock = viewButton?.closest<HTMLElement>('.hai-md-code-block')
+    const viewCodeBlockId = viewButton?.dataset.codeBlockId
+    const nextView = viewButton?.dataset.codeView === 'preview'
+      ? 'preview'
+      : 'code'
+    if (viewButton && viewCodeBlock) {
+      setCodeBlockView(viewCodeBlock, nextView)
+      if (
+        nextView === 'preview'
+        && viewCodeBlockId
+        && codePreviews[viewCodeBlockId]?.status !== 'ready'
+      ) {
+        await runCodeBlock(viewCodeBlockId)
+      }
+      return
+    }
+
     const runButton = target.closest(
       '[data-run-code]',
     ) as HTMLButtonElement | null
     const codeBlockId = runButton?.dataset.codeBlockId
     if (runButton && codeBlockId) {
       await runCodeBlock(codeBlockId)
+      return
+    }
+
+    const link = target.closest('a[href]') as HTMLAnchorElement | null
+    if (editable && link && previewHost?.contains(link)) {
+      const href = link.href.trim()
+      if (!href) {
+        return
+      }
+
+      event.preventDefault()
+      window.open(
+        href,
+        link.target || '_blank',
+        'noopener,noreferrer',
+      )
     }
   }
 
@@ -775,12 +1004,12 @@ ${safeCode}
     }
 
     if (preview.status === 'running') {
-      host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${escapePreviewText(uiM('markdown_running'))}</div><div class="hai-md-preview-loading"></div></div>`
+      host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-empty"><div class="hai-md-preview-empty-title">${escapePreviewText(uiM('markdown_running'))}</div><div class="hai-md-preview-loading"></div></div></div>`
       return
     }
 
     if (preview.status === 'error') {
-      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-error"><div class="hai-md-preview-head">${escapePreviewText(uiM('markdown_run_failed'))}</div><pre>${escapePreviewText(preview.error ?? uiM('markdown_run_failed'))}</pre></div>`
+      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-error"><div class="hai-md-preview-empty"><div class="hai-md-preview-empty-title">${escapePreviewText(uiM('markdown_run_failed'))}</div><p class="hai-md-preview-empty-text">${escapePreviewText(preview.error ?? uiM('markdown_run_failed'))}</p></div></div>`
       return
     }
 
@@ -881,7 +1110,18 @@ ${safeCode}
   }
 
   function readBlockFormat(element: HTMLElement | null): MarkdownBlockStyleKind {
-    const tagName = getClosestBlockElement(element)?.tagName.toLowerCase()
+    const block = getClosestBlockElement(element)
+    const tagName = block?.tagName.toLowerCase()
+
+    if (tagName === 'li') {
+      const listTag = block?.parentElement?.tagName.toLowerCase()
+      if (listTag === 'ol') {
+        return 'orderedList'
+      }
+      if (listTag === 'ul') {
+        return 'bulletList'
+      }
+    }
 
     if (tagName === 'h1') {
       return 'heading1'
@@ -1008,6 +1248,370 @@ ${safeCode}
     }
   }
 
+  /**
+   * 下面这组 helper 在 contenteditable DOM 与“正文纯文本偏移”之间来回映射。
+   * 选区工具条一旦失焦或内容局部重渲染，就靠它们把原选区重新定位回来。
+   */
+  function getNodeTextLength(node: Node | null | undefined): number {
+    if (!node) {
+      return 0
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent?.length ?? 0
+    }
+
+    let length = 0
+    for (const childNode of Array.from(node.childNodes)) {
+      length += getNodeTextLength(childNode)
+    }
+
+    return length
+  }
+
+  function getTextOffsetWithinNode(node: Node, offset: number): number {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return Math.max(0, Math.min(offset, node.textContent?.length ?? 0))
+    }
+
+    const childNodes = Array.from(node.childNodes)
+    const nextOffset = Math.max(0, Math.min(offset, childNodes.length))
+    let length = 0
+
+    for (const childNode of childNodes.slice(0, nextOffset)) {
+      length += getNodeTextLength(childNode)
+    }
+
+    return length
+  }
+
+  function getTextOffsetBeforeNode(root: Node, target: Node): number | null {
+    let length = 0
+
+    const visit = (node: Node): boolean => {
+      if (node === target) {
+        return true
+      }
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        length += node.textContent?.length ?? 0
+        return false
+      }
+
+      for (const childNode of Array.from(node.childNodes)) {
+        if (visit(childNode)) {
+          return true
+        }
+      }
+
+      return false
+    }
+
+    return visit(root) ? length : null
+  }
+
+  function getTextOffsetInPreview(node: Node, offset: number): number | null {
+    if (!previewHost || (node !== previewHost && !previewHost.contains(node))) {
+      return null
+    }
+
+    const prefixLength = getTextOffsetBeforeNode(previewHost, node)
+    if (prefixLength === null) {
+      return null
+    }
+
+    return prefixLength + getTextOffsetWithinNode(node, offset)
+  }
+
+  function resolveTextPositionInPreview(
+    offset: number,
+  ): { node: Node, offset: number } | null {
+    if (!previewHost) {
+      return null
+    }
+
+    const targetOffset = Math.max(0, offset)
+    const walker = document.createTreeWalker(previewHost, NodeFilter.SHOW_TEXT)
+    let current = walker.nextNode()
+    let accumulatedLength = 0
+    let lastTextNode: Node | null = null
+
+    while (current) {
+      const textLength = current.textContent?.length ?? 0
+      if (targetOffset <= accumulatedLength + textLength) {
+        return {
+          node: current,
+          offset: Math.max(0, targetOffset - accumulatedLength),
+        }
+      }
+
+      accumulatedLength += textLength
+      lastTextNode = current
+      current = walker.nextNode()
+    }
+
+    if (lastTextNode) {
+      return {
+        node: lastTextNode,
+        offset: lastTextNode.textContent?.length ?? 0,
+      }
+    }
+
+    return {
+      node: previewHost,
+      offset: Math.min(targetOffset, previewHost.childNodes.length),
+    }
+  }
+
+  /**
+   * 把当前 Range 压缩成纯文本偏移快照。
+   * 只记录非空选区，避免工具条动作把折叠光标也当成可恢复选区。
+   */
+  function capturePreviewSelectionSnapshot(
+    range: Range,
+  ): MarkdownSelectionSnapshot | null {
+    if (!previewHost) {
+      return null
+    }
+
+    const start = getTextOffsetInPreview(range.startContainer, range.startOffset)
+    const end = getTextOffsetInPreview(range.endContainer, range.endOffset)
+    const text = range.toString()
+
+    if (start === null || end === null || end <= start || !text.trim()) {
+      return null
+    }
+
+    return { start, end, text }
+  }
+
+  /**
+   * 用快照重新读取一遍当前正文中的文本，用来判断 DOM 变化后原 offsets 是否仍然可信。
+   */
+  function readTextFromSnapshot(
+    snapshot: MarkdownSelectionSnapshot,
+  ): string | null {
+    const startPosition = resolveTextPositionInPreview(snapshot.start)
+    const endPosition = resolveTextPositionInPreview(snapshot.end)
+    if (!startPosition || !endPosition) {
+      return null
+    }
+
+    try {
+      const range = document.createRange()
+      range.setStart(startPosition.node, startPosition.offset)
+      range.setEnd(endPosition.node, endPosition.offset)
+      return range.toString()
+    }
+    catch {
+      return null
+    }
+  }
+
+  /**
+   * 当原 offsets 对应的文本已经变了时，按“离旧起点最近”的同文本片段回退。
+   * 这样比只取第一个命中更接近用户刚才真实操作的位置。
+   */
+  function findClosestSelectionOffsets(
+    snapshot: MarkdownSelectionSnapshot,
+  ): { start: number, end: number } | null {
+    if (!previewHost || !snapshot.text) {
+      return null
+    }
+
+    const textContent = previewHost.textContent ?? ''
+    let bestMatchStart = -1
+    let smallestDistance = Number.POSITIVE_INFINITY
+    let searchIndex = textContent.indexOf(snapshot.text)
+
+    while (searchIndex >= 0) {
+      const distance = Math.abs(searchIndex - snapshot.start)
+      if (distance < smallestDistance) {
+        smallestDistance = distance
+        bestMatchStart = searchIndex
+      }
+
+      searchIndex = textContent.indexOf(snapshot.text, searchIndex + 1)
+    }
+
+    if (bestMatchStart < 0) {
+      return null
+    }
+
+    return {
+      start: bestMatchStart,
+      end: bestMatchStart + snapshot.text.length,
+    }
+  }
+
+  /**
+   * 优先按纯文本偏移恢复选区；如果 DOM 结构变动导致 offsets 漂移，再退回最近文本片段。
+   * 这一步会主动把焦点拉回正文，保证后续格式化命令仍作用于内容区。
+   */
+  function restoreSelectionFromSnapshot(
+    snapshot: MarkdownSelectionSnapshot,
+  ): boolean {
+    if (typeof window === 'undefined' || !previewHost) {
+      return false
+    }
+
+    const selection = window.getSelection()
+    if (!selection || snapshot.end <= snapshot.start) {
+      return false
+    }
+
+    let nextOffsets = {
+      start: snapshot.start,
+      end: snapshot.end,
+    }
+    const currentText = readTextFromSnapshot(snapshot)
+    if (snapshot.text && currentText !== snapshot.text) {
+      const matchedOffsets = findClosestSelectionOffsets(snapshot)
+      if (!matchedOffsets) {
+        return false
+      }
+
+      nextOffsets = matchedOffsets
+    }
+
+    const startPosition = resolveTextPositionInPreview(nextOffsets.start)
+    const endPosition = resolveTextPositionInPreview(nextOffsets.end)
+    if (!startPosition || !endPosition) {
+      return false
+    }
+
+    try {
+      const range = document.createRange()
+      range.setStart(startPosition.node, startPosition.offset)
+      range.setEnd(endPosition.node, endPosition.offset)
+      previewHost.focus()
+      selection.removeAllRanges()
+      selection.addRange(range)
+      return true
+    }
+    catch {
+      return false
+    }
+  }
+
+  /**
+   * 纯文本匹配是最后一道兜底，只在 Range 和偏移快照都失效时使用。
+   * 它无法区分完全相同的多个片段，所以只适合作为尽力恢复方案。
+   */
+  function restoreSelectionByTextMatch(text: string): boolean {
+    if (typeof window === 'undefined' || !previewHost || !text.trim()) {
+      return false
+    }
+
+    const selection = window.getSelection()
+    if (!selection) {
+      return false
+    }
+
+    const walker = document.createTreeWalker(previewHost, NodeFilter.SHOW_TEXT)
+    let current = walker.nextNode()
+
+    while (current) {
+      const content = current.textContent ?? ''
+      const start = content.indexOf(text)
+      if (start >= 0) {
+        try {
+          const range = document.createRange()
+          range.setStart(current, start)
+          range.setEnd(current, start + text.length)
+          previewHost.focus()
+          selection.removeAllRanges()
+          selection.addRange(range)
+          return true
+        }
+        catch {
+          return false
+        }
+      }
+
+      current = walker.nextNode()
+    }
+
+    return false
+  }
+
+  /**
+   * 工具条包含输入框和下拉面板，焦点落在内部时不应把“正文失焦”误判成关闭信号。
+   */
+  function isSelectionChromeFocused(): boolean {
+    if (typeof document === 'undefined' || !selectionChromeEl) {
+      return false
+    }
+
+    const activeElement = document.activeElement
+    return activeElement instanceof HTMLElement && selectionChromeEl.contains(activeElement)
+  }
+
+  /**
+   * 同时保存浏览器原生 Range 和纯文本快照。
+   * 前者恢复精度更高，后者能跨 DOM 重建，两者组合能覆盖大多数编辑场景。
+   */
+  function rememberPreviewSelection(range: Range): void {
+    savedSelectionRange = range.cloneRange()
+    savedSelectionSnapshot = capturePreviewSelectionSnapshot(range)
+  }
+
+  /**
+   * 选区恢复按“快照 -> 原始 Range -> 文本兜底”三层顺序尝试。
+   * 这样既优先命中最精确的位置，也能在内容轻微重排后保留工具条操作连续性。
+   */
+  function restoreSavedPreviewSelection(): boolean {
+    if (savedSelectionSnapshot && restoreSelectionFromSnapshot(savedSelectionSnapshot)) {
+      return true
+    }
+
+    if (typeof window === 'undefined' || !previewHost || !savedSelectionRange) {
+      const fallbackText = savedSelectionSnapshot?.text || selectedText
+      return restoreSelectionByTextMatch(fallbackText)
+    }
+
+    const selection = window.getSelection()
+    if (!selection) {
+      return false
+    }
+
+    try {
+      const restoredRange = savedSelectionRange.cloneRange()
+      if (
+        !previewHost.contains(restoredRange.startContainer)
+        || !previewHost.contains(restoredRange.endContainer)
+      ) {
+        return false
+      }
+
+      previewHost.focus()
+      selection.removeAllRanges()
+      selection.addRange(restoredRange)
+      return true
+    }
+    catch {
+      const fallbackText = savedSelectionSnapshot?.text || selectedText
+      return restoreSelectionByTextMatch(fallbackText)
+    }
+  }
+
+  /**
+   * 工具条动作触发前先同步一次真实选区，避免点击按钮后浏览器把正文选区清掉。
+   */
+  function syncSelectionForToolbarAction(): boolean {
+    const previewSelection = readPreviewSelectionState()
+    if (previewSelection) {
+      rememberPreviewSelection(previewSelection.range)
+      selectedText = previewSelection.text
+      return true
+    }
+
+    return restoreSavedPreviewSelection()
+  }
+
+  /**
+   * 所有关闭动作都走同一个 timer，方便菜单 hover、输入框 focus 等场景随时撤销关闭。
+   */
   function clearPendingSelectionToolbarClose(): void {
     if (typeof window === 'undefined' || !selectionToolbarCloseTimer) {
       return
@@ -1017,6 +1621,10 @@ ${safeCode}
     selectionToolbarCloseTimer = undefined
   }
 
+  /**
+   * 关闭工具条刻意延后一小拍，给菜单 hover、输入框 focus 和选区回流留出时间。
+   * 只要子菜单还开着，或焦点仍在 chrome 里，就继续保留当前工具条。
+   */
   function scheduleSelectionToolbarClose(): void {
     if (typeof window === 'undefined') {
       closeSelectionToolbar()
@@ -1028,15 +1636,26 @@ ${safeCode}
       return
     }
 
+    if (activeSelectionMenu) {
+      return
+    }
+
     clearPendingSelectionToolbarClose()
     selectionToolbarCloseTimer = window.setTimeout(() => {
       selectionToolbarCloseTimer = undefined
+      if (activeSelectionMenu || isSelectionChromeFocused()) {
+        return
+      }
+
       if (!readPreviewSelectionState()) {
         closeSelectionToolbar()
       }
-    }, 120)
+    }, 600)
   }
 
+  /**
+   * 选区变化可能在一帧内收到多次事件，这里统一合并，避免定位和状态读取来回抖动。
+   */
   function queueSelectionRefresh(remeasured = false): void {
     if (typeof window === 'undefined') {
       return
@@ -1055,6 +1674,9 @@ ${safeCode}
     })
   }
 
+  /**
+   * 子菜单首次打开前拿不到真实宽度，先给一个稳定的经验值参与贴边计算。
+   */
   function estimateSelectionMenuWidth(menu: SelectionMenuKind): number {
     if (menu === 'color' || menu === 'link') {
       return 256
@@ -1067,6 +1689,9 @@ ${safeCode}
     return 288
   }
 
+  /**
+   * 下拉面板以触发按钮为锚点，但最终位置要限制在工具条宽度内，避免菜单越界裁切。
+   */
   function updateSelectionMenuAnchor(menu: SelectionMenuKind): void {
     if (!selectionToolbarEl || !activeSelectionMenuTrigger) {
       selectionMenuLeft = 0
@@ -1104,6 +1729,9 @@ ${safeCode}
     selectionMenuAlignment = 'center'
   }
 
+  /**
+   * 工具条初次出现时尺寸还没稳定，下一帧再量一次可以避免首帧贴边位置偏差。
+   */
   function scheduleSelectionToolbarMeasurement(): void {
     if (
       typeof window === 'undefined'
@@ -1122,7 +1750,11 @@ ${safeCode}
     })
   }
 
+  /**
+   * 子菜单统一从这里开关，顺手记录触发按钮和链接初始值，保证定位与默认值一致。
+   */
   function toggleSelectionMenu(menu: SelectionMenuKind, event?: MouseEvent): void {
+    clearPendingSelectionToolbarClose()
     const opening = activeSelectionMenu !== menu
     activeSelectionMenu = opening ? menu : null
     activeSelectionMenuTrigger = opening && event?.currentTarget instanceof HTMLElement
@@ -1136,6 +1768,9 @@ ${safeCode}
     }
   }
 
+  /**
+   * 关闭时把选区相关缓存一并清干净，避免下一次打开还误用上一次的链接和格式状态。
+   */
   function closeSelectionToolbar(): void {
     clearPendingSelectionToolbarClose()
     selectionToolbarVisible = false
@@ -1145,9 +1780,249 @@ ${safeCode}
     selectionMenuAlignment = 'center'
     selectedText = ''
     linkDraft = ''
+    savedSelectionRange = null
+    savedSelectionSnapshot = null
     selectionFormatState = { ...DEFAULT_SELECTION_FORMAT_STATE }
   }
 
+  /**
+   * 面板上的按钮点击不应让浏览器先把正文选区清掉。
+   * 但输入框要保留原生 focus 行为，方便直接编辑链接。
+   */
+  function handleSelectionPanelMouseDown(event: MouseEvent): void {
+    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+      return
+    }
+
+    event.preventDefault()
+  }
+
+  function clearPendingHoveredLinkHide(): void {
+    if (typeof window === 'undefined' || !hoveredLinkHideTimer) {
+      return
+    }
+
+    window.clearTimeout(hoveredLinkHideTimer)
+    hoveredLinkHideTimer = undefined
+  }
+
+  function closeHoveredLink(): void {
+    clearPendingHoveredLinkHide()
+    hoveredLinkState = null
+  }
+
+  function scheduleHoveredLinkHide(): void {
+    if (typeof window === 'undefined') {
+      closeHoveredLink()
+      return
+    }
+
+    clearPendingHoveredLinkHide()
+    hoveredLinkHideTimer = window.setTimeout(() => {
+      hoveredLinkHideTimer = undefined
+      hoveredLinkState = null
+    }, 140)
+  }
+
+  function resolveHoveredLinkTargets(
+    link: HTMLAnchorElement,
+  ): { href: string, rawHref: string } | null {
+    const rawHref = link.getAttribute('href')?.trim() ?? ''
+    const href = link.href.trim() || rawHref
+    if (!href) {
+      return null
+    }
+
+    return {
+      href,
+      rawHref: rawHref || href,
+    }
+  }
+
+  function measureHoveredLinkPopover(): { width: number, height: number } {
+    const width = hoveredLinkPopoverEl
+      ? Math.max(
+        hoveredLinkPopoverEl.offsetWidth,
+        hoveredLinkPopoverEl.clientWidth,
+      )
+      : 92
+    const height = hoveredLinkPopoverEl
+      ? Math.max(
+        hoveredLinkPopoverEl.offsetHeight,
+        hoveredLinkPopoverEl.clientHeight,
+      )
+      : 40
+
+    return { width, height }
+  }
+
+  function buildHoveredLinkState(
+    link: HTMLAnchorElement,
+  ): HoveredLinkState | null {
+    if (!editorScrollHost || !previewHost || !previewHost.contains(link)) {
+      return null
+    }
+
+    const targets = resolveHoveredLinkTargets(link)
+    if (!targets) {
+      return null
+    }
+
+    const hostRect = editorScrollHost.getBoundingClientRect()
+    const linkRect = link.getBoundingClientRect()
+    const { width, height } = measureHoveredLinkPopover()
+    const offset = 8
+    const horizontalPadding = 16
+    const topSpace = linkRect.top - hostRect.top
+    const bottomSpace = hostRect.bottom - linkRect.bottom
+    const placement: HoveredLinkState['placement']
+      = topSpace >= height + offset || bottomSpace < height + offset
+        ? 'top'
+        : 'bottom'
+    const center = linkRect.left - hostRect.left + linkRect.width / 2
+    const maxLeft = Math.max(
+      horizontalPadding,
+      editorScrollHost.clientWidth - horizontalPadding - width,
+    )
+    const left = Math.min(
+      Math.max(center - width / 2, horizontalPadding),
+      maxLeft,
+    )
+    const top = placement === 'top'
+      ? editorScrollHost.scrollTop + linkRect.top - hostRect.top - height - offset
+      : editorScrollHost.scrollTop + linkRect.bottom - hostRect.top + offset
+
+    return {
+      element: link,
+      href: targets.href,
+      rawHref: targets.rawHref,
+      top: Math.max(8, top),
+      left,
+      placement,
+    }
+  }
+
+  function syncHoveredLinkPosition(): void {
+    if (!hoveredLinkState) {
+      return
+    }
+
+    if (!hoveredLinkState.element.isConnected) {
+      closeHoveredLink()
+      return
+    }
+
+    const nextState = buildHoveredLinkState(hoveredLinkState.element)
+    if (!nextState) {
+      closeHoveredLink()
+      return
+    }
+
+    hoveredLinkState = nextState
+  }
+
+  function resolveColorOptionValue(colorOption: string | ColorSwatchOption): string | null {
+    return typeof colorOption === 'string' ? colorOption : colorOption.value
+  }
+
+  function updateHoveredLink(link: HTMLAnchorElement | null): void {
+    if (!editable || !onapplylink || selectionToolbarVisible) {
+      closeHoveredLink()
+      return
+    }
+
+    if (!link) {
+      scheduleHoveredLinkHide()
+      return
+    }
+
+    const nextState = buildHoveredLinkState(link)
+    if (!nextState) {
+      scheduleHoveredLinkHide()
+      return
+    }
+
+    clearPendingHoveredLinkHide()
+    hoveredLinkState = nextState
+  }
+
+  function openHoveredLink(): void {
+    if (typeof window === 'undefined' || !hoveredLinkState?.href) {
+      return
+    }
+
+    window.open(
+      hoveredLinkState.href,
+      hoveredLinkState.element.target || '_blank',
+      'noopener,noreferrer',
+    )
+  }
+
+  function createRangeForLinkText(link: HTMLAnchorElement): Range {
+    const range = document.createRange()
+    const walker = document.createTreeWalker(link, NodeFilter.SHOW_TEXT)
+    let current = walker.nextNode()
+    let firstTextNode: Node | null = null
+    let lastTextNode: Node | null = null
+
+    while (current) {
+      if ((current.textContent ?? '').length > 0) {
+        firstTextNode ??= current
+        lastTextNode = current
+      }
+
+      current = walker.nextNode()
+    }
+
+    if (!firstTextNode || !lastTextNode) {
+      range.selectNodeContents(link)
+      return range
+    }
+
+    range.setStart(firstTextNode, 0)
+    range.setEnd(lastTextNode, lastTextNode.textContent?.length ?? 0)
+    return range
+  }
+
+  async function editHoveredLink(): Promise<void> {
+    if (
+      typeof window === 'undefined'
+      || !previewHost
+      || !onapplylink
+      || !hoveredLinkState
+    ) {
+      return
+    }
+
+    const link = hoveredLinkState.element
+    const linkHref = hoveredLinkState.rawHref
+    if (!previewHost.contains(link)) {
+      closeHoveredLink()
+      return
+    }
+
+    const selection = window.getSelection()
+    if (!selection) {
+      return
+    }
+
+    const range = createRangeForLinkText(link)
+    previewHost.focus()
+    selection.removeAllRanges()
+    selection.addRange(range)
+    rememberPreviewSelection(range)
+    selectedText = range.toString().trim()
+    closeHoveredLink()
+    handleSelectionChange(true)
+    await tick()
+    linkDraft = linkHref || 'https://'
+    activeSelectionMenu = 'link'
+    activeSelectionMenuTrigger = selectionLinkButtonEl
+    if (selectionLinkButtonEl) {
+      updateSelectionMenuAnchor('link')
+    }
+  }
+
   /**
    * 目录高亮不依赖 IntersectionObserver，而是按滚动容器内标题的相对位置推断。
    * 这样正文持续流式刷新时不需要反复重建 observer，也更容易和目录点击滚动保持一致。
@@ -1211,6 +2086,7 @@ ${safeCode}
   function handleDocumentScroll(event: Event): void {
     syncActiveHeadingFromScroll()
     syncPinnedTitleVisibility()
+    syncHoveredLinkPosition()
     if (selectionToolbarVisible) {
       queueSelectionRefresh(true)
     }
@@ -1250,11 +2126,16 @@ ${safeCode}
 
     const previewSelection = readPreviewSelectionState()
     if (!previewSelection) {
+      if (savedSelectionRange && isSelectionChromeFocused()) {
+        return
+      }
+
       scheduleSelectionToolbarClose()
       return
     }
 
     const { selection, range, text } = previewSelection
+    hoveredLinkState = null
     const rect = range.getBoundingClientRect()
     const hostRect = editorScrollHost.getBoundingClientRect()
     // 浮层尺寸在首次渲染前拿不到精确高度，这里用稳定的经验值决定上下避让方向，避免直接盖住选中文本。
@@ -1269,31 +2150,47 @@ ${safeCode}
         : 'bottom'
     const center = rect.left - hostRect.left + rect.width / 2
     const horizontalPadding = 16
-    const measuredToolbarHalfWidth = selectionToolbarEl
-      ? selectionToolbarEl.offsetWidth / 2
-      : 320
-    const estimatedToolbarHalfWidth = Math.min(
-      Math.max(132, measuredToolbarHalfWidth),
-      Math.max(132, (editorScrollHost.clientWidth - horizontalPadding * 2) / 2),
+    const outlineOverlap = outlinePanelEl
+      ? Math.max(
+        0,
+        Math.min(
+          outlinePanelEl.getBoundingClientRect().right,
+          hostRect.right,
+        ) - hostRect.left,
+      )
+      : 0
+    const minLeft = Math.max(
+      horizontalPadding,
+      outlineOverlap > 24 ? outlineOverlap + 12 : horizontalPadding,
+    )
+    const measuredToolbarWidth = selectionChromeEl
+      ? Math.max(selectionChromeEl.offsetWidth, selectionChromeEl.clientWidth)
+      : selectionToolbarEl
+      ? Math.max(selectionToolbarEl.offsetWidth, selectionToolbarEl.clientWidth)
+      : 360
+    const maxToolbarWidth = Math.max(
+      220,
+      editorScrollHost.clientWidth - minLeft - horizontalPadding,
     )
-    const minCenter = horizontalPadding + estimatedToolbarHalfWidth
-    const maxCenter = editorScrollHost.clientWidth - minCenter
+    const toolbarWidth = Math.min(measuredToolbarWidth, maxToolbarWidth)
+    const maxLeft = Math.max(
+      minLeft,
+      editorScrollHost.clientWidth - horizontalPadding - toolbarWidth,
+    )
+    const unclampedLeft = center - toolbarWidth / 2
+    const toolbarLeft = Math.min(Math.max(unclampedLeft, minLeft), maxLeft)
     const alignment: SelectionToolbarPosition['alignment']
-      = center <= minCenter
+      = toolbarLeft <= minLeft + 0.5
         ? 'left'
-        : center >= maxCenter
+        : toolbarLeft >= maxLeft - 0.5
         ? 'right'
         : 'center'
-    const toolbarLeft = alignment === 'left'
-      ? horizontalPadding
-      : alignment === 'right'
-      ? editorScrollHost.clientWidth - horizontalPadding
-      : center
     const toolbarTop = placement === 'top'
       ? editorScrollHost.scrollTop + rect.top - hostRect.top - estimatedToolbarHeight - offset
       : editorScrollHost.scrollTop + rect.bottom - hostRect.top + offset
 
     selectedText = text
+    rememberPreviewSelection(range)
     selectionToolbarVisible = true
     selectionFormatState = readSelectionFormatState(selection)
     toolbarPosition = {
@@ -1328,6 +2225,10 @@ ${safeCode}
   }
 
   function applyBlockFormat(kind: MarkdownBlockFormatKind): void {
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
     onapplyblockformat?.(kind)
     activeSelectionMenu = null
     activeSelectionMenuTrigger = null
@@ -1335,66 +2236,160 @@ ${safeCode}
   }
 
   function applyBlockStyle(kind: MarkdownBlockStyleKind): void {
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
     onapplyblockstyle?.(kind)
     activeSelectionMenu = null
     activeSelectionMenuTrigger = null
     queueSelectionRefresh()
   }
 
+  /**
+   * 行内样式按钮允许连续点按，因此这里不主动关掉工具条，只刷新状态。
+   */
   function applyInlineFormat(kind: MarkdownInlineFormatKind): void {
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
+    clearPendingSelectionToolbarClose()
     onapplyinlineformat?.(kind)
     queueSelectionRefresh()
   }
 
   function applyAlignment(kind: MarkdownTextAlignKind): void {
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
     onapplyalignment?.(kind)
     activeSelectionMenu = null
     activeSelectionMenuTrigger = null
     queueSelectionRefresh()
   }
 
+  /**
+   * 链接菜单提交时总是以恢复后的正文选区为准，避免输入框焦点把目标文本丢掉。
+   */
   function applyLink(): void {
-    onapplylink?.(linkDraft.trim() || null)
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
+    onapplylink?.(
+      linkDraft.trim() || null,
+      savedSelectionSnapshot
+        ? {
+          ...savedSelectionSnapshot,
+        }
+        : undefined,
+      selectedText.trim() || undefined,
+    )
     activeSelectionMenu = null
     activeSelectionMenuTrigger = null
     queueSelectionRefresh()
   }
 
   function removeLink(): void {
-    onapplylink?.(null)
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
+    onapplylink?.(
+      null,
+      savedSelectionSnapshot
+        ? {
+          ...savedSelectionSnapshot,
+        }
+        : undefined,
+      selectedText.trim() || undefined,
+    )
     activeSelectionMenu = null
     activeSelectionMenuTrigger = null
     queueSelectionRefresh()
   }
 
+  /**
+   * 颜色动作除了颜色值，还会把当前选中文本一起带给外层，供宿主侧做兜底选区恢复。
+   */
   function applyColor(request: MarkdownColorFormatRequest): void {
-    onapplycolor?.(request)
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
+    onapplycolor?.({
+      ...request,
+      selectedText: selectedText.trim() || undefined,
+      selectionSnapshot: savedSelectionSnapshot
+        ? {
+          ...savedSelectionSnapshot,
+        }
+        : undefined,
+    })
     queueSelectionRefresh()
   }
 
   async function copySelection(): Promise<void> {
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
     await oncopyselection?.()
     activeSelectionMenu = null
     activeSelectionMenuTrigger = null
   }
 
   async function annotateSelection(): Promise<void> {
+    if (!syncSelectionForToolbarAction()) {
+      return
+    }
+
     await onannotation?.()
     activeSelectionMenu = null
     activeSelectionMenuTrigger = null
   }
 
+  function handlePreviewMouseMove(event: MouseEvent): void {
+    const target = event.target
+    const link = target instanceof Element
+      ? target.closest<HTMLAnchorElement>('a[href]')
+      : null
+
+    updateHoveredLink(link && previewHost?.contains(link) ? link : null)
+  }
+
+  function handlePreviewMouseLeave(): void {
+    scheduleHoveredLinkHide()
+  }
+
+  /**
+   * mouseup 比 selectionchange 更接近用户“完成一次选中”的时机，适合触发工具条刷新。
+   */
   function handlePreviewMouseUp(): void {
     queueSelectionRefresh()
     onpreviewmouseup?.()
   }
 
+  /**
+   * 输入事件本身只透传给宿主；选区状态交给 selectionchange/mouseup 统一管理。
+   */
   function handlePreviewInput(event: Event): void {
     onpreviewinput?.(event)
   }
 
-  function handlePreviewBlur(): void {
+  /**
+   * 正文失焦时先观察焦点是否转移到工具条内部，避免点击链接输入框时误触发提交或收起。
+   */
+  function handlePreviewBlur(event: FocusEvent): void {
     queueSelectionRefresh(true)
+
+    const nextTarget = event.relatedTarget
+    if (nextTarget instanceof Node && selectionChromeEl?.contains(nextTarget)) {
+      return
+    }
+
     onpreviewblur?.()
   }
 </script>
@@ -1539,11 +2534,11 @@ ${safeCode}
     {/if}
 
     <div
-      class:hai-ai-doc-layout-collapsed={outlineCollapsed}
+      class:hai-ai-doc-layout-collapsed={!showOutline || outlineCollapsed}
       class='hai-ai-doc-layout'
     >
       {#if showOutline && !outlineCollapsed}
-        <aside class='hai-ai-doc-outline'>
+        <aside bind:this={outlinePanelEl} class='hai-ai-doc-outline'>
           <div class='hai-ai-doc-outline-head'>
             <strong>{uiM('markdown_outline')}</strong>
 
@@ -1599,7 +2594,10 @@ ${safeCode}
               style={`top:${toolbarPosition.top}px; left:${toolbarPosition.left}px;`}
             >
               <div
+                bind:this={selectionChromeEl}
                 class='hai-ai-doc-selection-chrome'
+                onmouseenter={clearPendingSelectionToolbarClose}
+                onmouseleave={() => scheduleSelectionToolbarClose()}
               >
                 <div
                   bind:this={selectionToolbarEl}
@@ -1613,12 +2611,19 @@ ${safeCode}
                       type='button'
                       class={cn(
                         'hai-ai-doc-selection-chip',
-                        activeSelectionMenu === 'rewrite'
+                        (!directRewriteAction && activeSelectionMenu === 'rewrite')
                           ? 'hai-ai-doc-selection-chip--active'
                           : '',
                       )}
                       disabled={rewritePending}
-                      onclick={event => toggleSelectionMenu('rewrite', event)}
+                      onclick={(event) => {
+                        if (directRewriteAction) {
+                          void applyRewrite(directRewriteAction.id)
+                          return
+                        }
+
+                        toggleSelectionMenu('rewrite', event)
+                      }}
                     >
                       <svg viewBox='0 0 24 24' aria-hidden='true'>
                         <path
@@ -1756,7 +2761,7 @@ ${safeCode}
                       title={uiM('markdown_format_strike')}
                       onclick={() => applyInlineFormat('strike')}
                     >
-                      S
+                      <s>S</s>
                     </button>
                     <button
                       type='button'
@@ -1782,12 +2787,13 @@ ${safeCode}
                       title={uiM('markdown_format_underline')}
                       onclick={() => applyInlineFormat('underline')}
                     >
-                      U
+                      <u>U</u>
                     </button>
                   {/if}
 
                   {#if onapplylink || onapplyinlineformat}
                     <button
+                      bind:this={selectionLinkButtonEl}
                       type='button'
                       class={cn(
                         'hai-ai-doc-selection-btn',
@@ -1804,10 +2810,18 @@ ${safeCode}
                           ? toggleSelectionMenu('link', event)
                           : applyInlineFormat('link')}
                     >
-                      <svg viewBox='0 0 24 24' aria-hidden='true'>
-                        <path
-                          d='M7.78 15.72a3.75 3.75 0 0 1 0-5.3l2.47-2.47a3.75 3.75 0 0 1 5.3 5.3l-.97.98a.75.75 0 0 1-1.06-1.06l.98-.97a2.25 2.25 0 0 0-3.19-3.19l-2.47 2.47a2.25 2.25 0 1 0 3.18 3.18l.49-.49a.75.75 0 0 1 1.06 1.06l-.49.49a3.75 3.75 0 0 1-5.3 0Zm8.44-7.44a.75.75 0 0 1 0 1.06l-8 8a.75.75 0 0 1-1.06-1.06l8-8a.75.75 0 0 1 1.06 0Z'
-                        ></path>
+                      <svg
+                        viewBox='0 0 24 24'
+                        aria-hidden='true'
+                        fill='none'
+                        stroke='currentColor'
+                        stroke-width='2'
+                        stroke-linecap='round'
+                        stroke-linejoin='round'
+                      >
+                        <path d='M9.5 14.5 14.5 9.5'></path>
+                        <path d='M7.6 16.4 6.3 17.7a3 3 0 1 1-4.24-4.24l3-3a3 3 0 0 1 4.24 0'></path>
+                        <path d='M16.4 7.6 17.7 6.3a3 3 0 1 1 4.24 4.24l-3 3a3 3 0 0 1-4.24 0'></path>
                       </svg>
                     </button>
                   {/if}
@@ -1826,19 +2840,6 @@ ${safeCode}
                     >
                       &lt;/&gt;
                     </button>
-                    <button
-                      type='button'
-                      class={cn(
-                        'hai-ai-doc-selection-btn',
-                        selectionFormatState.highlight
-                          ? 'hai-ai-doc-selection-btn--active'
-                          : '',
-                      )}
-                      title={uiM('markdown_format_highlight')}
-                      onclick={() => applyInlineFormat('highlight')}
-                    >
-                      <span class='hai-ai-doc-selection-highlight-icon'>A</span>
-                    </button>
                   {/if}
 
                   {#if onapplycolor}
@@ -1905,14 +2906,14 @@ ${safeCode}
                   {/if}
                 </div>
 
-                {#if activeSelectionMenu === 'rewrite' && resolvedRewriteActions.length > 0}
+                {#if activeSelectionMenu === 'rewrite' && resolvedRewriteActions.length > 1}
                   <div
                     class='hai-ai-doc-rewrite-menu'
                     data-menu-alignment={selectionMenuAlignment}
                     role='menu'
                     tabindex='-1'
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
-                    onmousedown={event => event.preventDefault()}
+                    onmousedown={handleSelectionPanelMouseDown}
                   >
                     {#each resolvedRewriteActions as action}
                       <button
@@ -1932,7 +2933,7 @@ ${safeCode}
                     role='menu'
                     tabindex='-1'
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
-                    onmousedown={event => event.preventDefault()}
+                    onmousedown={handleSelectionPanelMouseDown}
                   >
                     {#each BLOCK_FORMAT_OPTIONS as option}
                       <button
@@ -1964,7 +2965,7 @@ ${safeCode}
                     role='menu'
                     tabindex='-1'
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
-                    onmousedown={event => event.preventDefault()}
+                    onmousedown={handleSelectionPanelMouseDown}
                   >
                     {#each ALIGN_OPTIONS as option}
                       <button
@@ -1992,9 +2993,10 @@ ${safeCode}
                     aria-label={uiM('markdown_link_dialog_label')}
                     tabindex='-1'
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
-                    onmousedown={event => event.preventDefault()}
+                    onmousedown={handleSelectionPanelMouseDown}
                   >
                     <input
+                      bind:this={linkInputEl}
                       class='hai-ai-doc-selection-input'
                       bind:value={linkDraft}
                       aria-label={uiM('markdown_link_input_label')}
@@ -2032,7 +3034,7 @@ ${safeCode}
                     aria-label={uiM('markdown_color_dialog_label')}
                     tabindex='-1'
                     style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
-                    onmousedown={event => event.preventDefault()}
+                    onmousedown={handleSelectionPanelMouseDown}
                   >
                     <div class='hai-ai-doc-color-group'>
                       <div class='hai-ai-doc-color-group-title'>
@@ -2062,23 +3064,34 @@ ${safeCode}
                         {uiM('markdown_background_color')}
                       </div>
                       <div class='hai-ai-doc-color-grid'>
-                        {#each BACKGROUND_COLOR_PRESETS as color}
+                        {#each BACKGROUND_COLOR_OPTIONS as colorOption}
                           <button
                             type='button'
                             class={cn(
                               'hai-ai-doc-color-swatch',
-                              selectionFormatState.backgroundColor === color
+                              selectionFormatState.backgroundColor === resolveColorOptionValue(colorOption)
                                 ? 'hai-ai-doc-color-swatch--active'
                                 : '',
                             )}
-                            title={color}
+                            data-empty={typeof colorOption === 'string'
+                              ? undefined
+                              : 'true'}
+                            title={typeof colorOption === 'string'
+                              ? colorOption
+                              : uiM(colorOption.titleKey)}
                             onclick={() =>
                               applyColor({
                                 target: 'background',
-                                value: color,
+                                value: typeof colorOption === 'string'
+                                  ? colorOption
+                                  : colorOption.value,
                               })}
                           >
-                            <span style={`background:${color};`}></span>
+                            <span
+                              style={typeof colorOption === 'string'
+                                ? `background:${colorOption};`
+                                : undefined}
+                            ></span>
                           </button>
                         {/each}
                       </div>
@@ -2099,11 +3112,87 @@ ${safeCode}
             </div>
           {/if}
 
+          {#if hoveredLinkState}
+            <div
+              bind:this={hoveredLinkPopoverEl}
+              class='hai-ai-doc-link-hover'
+              data-placement={hoveredLinkState.placement}
+              style={`top:${hoveredLinkState.top}px; left:${hoveredLinkState.left}px;`}
+              onmouseenter={clearPendingHoveredLinkHide}
+              onmouseleave={handlePreviewMouseLeave}
+            >
+              <button
+                type='button'
+                class='hai-ai-doc-link-hover-btn'
+                title={uiM('markdown_link_open')}
+                aria-label={uiM('markdown_link_open')}
+                onmousedown={event => event.preventDefault()}
+                onclick={openHoveredLink}
+              >
+                <svg viewBox='0 0 24 24' aria-hidden='true'>
+                  <path
+                    d='M13.75 5.75h4.5v4.5'
+                    fill='none'
+                    stroke='currentColor'
+                    stroke-width='1.9'
+                    stroke-linecap='round'
+                    stroke-linejoin='round'
+                  ></path>
+                  <path
+                    d='M18 6 11 13'
+                    fill='none'
+                    stroke='currentColor'
+                    stroke-width='1.9'
+                    stroke-linecap='round'
+                    stroke-linejoin='round'
+                  ></path>
+                  <path
+                    d='M10.25 7.75h-2.5A2.5 2.5 0 0 0 5.25 10.25v6A2.5 2.5 0 0 0 7.75 18.75h6a2.5 2.5 0 0 0 2.5-2.5v-2.5'
+                    fill='none'
+                    stroke='currentColor'
+                    stroke-width='1.9'
+                    stroke-linecap='round'
+                    stroke-linejoin='round'
+                  ></path>
+                </svg>
+              </button>
+              <button
+                type='button'
+                class='hai-ai-doc-link-hover-btn'
+                title={uiM('markdown_link_edit')}
+                aria-label={uiM('markdown_link_edit')}
+                onmousedown={event => event.preventDefault()}
+                onclick={() => void editHoveredLink()}
+              >
+                <svg viewBox='0 0 24 24' aria-hidden='true'>
+                  <path
+                    d='M4.75 16.88V19.25h2.37l9.96-9.96-2.37-2.37-9.96 9.96Z'
+                    fill='none'
+                    stroke='currentColor'
+                    stroke-width='1.9'
+                    stroke-linecap='round'
+                    stroke-linejoin='round'
+                  ></path>
+                  <path
+                    d='M13.96 7.92 16.33 5.55a1.68 1.68 0 0 1 2.37 2.37l-2.37 2.37'
+                    fill='none'
+                    stroke='currentColor'
+                    stroke-width='1.9'
+                    stroke-linecap='round'
+                    stroke-linejoin='round'
+                  ></path>
+                </svg>
+              </button>
+            </div>
+          {/if}
+
           <article
             bind:this={previewHost}
             class={readerDocumentClass}
             contenteditable={editable}
             role='document'
+            onmousemove={handlePreviewMouseMove}
+            onmouseleave={handlePreviewMouseLeave}
             onmouseup={handlePreviewMouseUp}
             oninput={handlePreviewInput}
             onblur={handlePreviewBlur}
@@ -2126,8 +3215,12 @@ ${safeCode}
     );
     --hai-ai-doc-selection-fg: oklch(var(--bc, 0.22 0 0));
     display: flex;
+    width: 100%;
+    min-width: 0;
     min-height: 0;
     height: 100%;
+    container-type: inline-size;
+    container-name: ai-doc-editor;
     flex-direction: column;
     border: 1px solid oklch(var(--bc) / 0.08);
     border-radius: 1.5rem;
@@ -2141,8 +3234,10 @@ ${safeCode}
   }
 
   .hai-ai-doc-shell {
-    display: grid;
-    grid-template-rows: auto auto 1fr;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
     min-height: 0;
     height: 100%;
   }
@@ -2336,18 +3431,23 @@ ${safeCode}
   }
 
   .hai-ai-doc-layout {
+    width: 100%;
     min-height: 0;
-    display: grid;
-    grid-template-columns: 220px minmax(0, 1fr);
+    min-width: 0;
+    flex: 1 1 auto;
+    display: flex;
+    align-items: stretch;
     position: relative;
     overflow: hidden;
   }
 
   .hai-ai-doc-layout.hai-ai-doc-layout-collapsed {
-    grid-template-columns: minmax(0, 1fr);
+    display: flex;
   }
 
   .hai-ai-doc-outline {
+    width: 220px;
+    flex: 0 0 220px;
     min-height: 0;
     display: grid;
     grid-template-rows: auto 1fr;
@@ -2446,18 +3546,28 @@ ${safeCode}
   }
 
   .hai-ai-doc-reader {
+    width: 100%;
+    flex: 1 1 auto;
     min-width: 0;
     min-height: 0;
     position: relative;
     z-index: 2;
     isolation: isolate;
+    display: flex;
+    flex-direction: column;
   }
 
   .hai-ai-doc-scroll {
     position: relative;
+    width: 100%;
+    min-width: 0;
     height: 100%;
     overflow: auto;
     padding: 0.5rem 0 1.75rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
   }
 
   .hai-ai-doc-selection-layer {
@@ -2466,21 +3576,17 @@ ${safeCode}
     display: block;
     width: fit-content;
     max-width: calc(100% - 2rem);
-    transform: translateX(-50%);
     transition:
       top 0.14s cubic-bezier(0.2, 0.85, 0.24, 1),
-      left 0.14s cubic-bezier(0.2, 0.85, 0.24, 1),
-      transform 0.14s cubic-bezier(0.2, 0.85, 0.24, 1);
+      left 0.14s cubic-bezier(0.2, 0.85, 0.24, 1);
     pointer-events: none;
   }
 
   .hai-ai-doc-selection-layer[data-alignment='left'] {
-    transform: translateX(0);
     justify-items: start;
   }
 
   .hai-ai-doc-selection-layer[data-alignment='right'] {
-    transform: translateX(-100%);
     justify-items: end;
   }
 
@@ -2495,6 +3601,55 @@ ${safeCode}
     max-width: min(100%, calc(100vw - 2rem));
   }
 
+  .hai-ai-doc-link-hover {
+    position: absolute;
+    z-index: 58;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.18rem;
+    padding: 0.22rem;
+    border-radius: 9999px;
+    background: color-mix(in srgb, oklch(var(--b1, 1 0 0)) 94%, white 6%);
+    border: 1px solid color-mix(in srgb, oklch(var(--bc, 0.22 0 0)) 12%, white 88%);
+    box-shadow:
+      0 20px 36px -26px rgb(15 23 42 / 0.26),
+      0 10px 18px -16px rgb(15 23 42 / 0.18);
+    pointer-events: auto;
+    transition:
+      top 0.14s cubic-bezier(0.2, 0.85, 0.24, 1),
+      left 0.14s cubic-bezier(0.2, 0.85, 0.24, 1);
+  }
+
+  .hai-ai-doc-link-hover-btn {
+    width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 9999px;
+    background: transparent;
+    color: oklch(var(--bc) / 0.76);
+    cursor: pointer;
+    transition:
+      background-color 0.14s ease,
+      color 0.14s ease,
+      transform 0.14s ease;
+  }
+
+  .hai-ai-doc-link-hover-btn:hover {
+    background: oklch(var(--bc) / 0.06);
+    color: oklch(var(--bc));
+    transform: translateY(-1px);
+  }
+
+  .hai-ai-doc-link-hover-btn svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: currentColor;
+  }
+
   .hai-ai-doc-selection-toolbar {
     display: flex;
     align-items: center;
@@ -2863,6 +4018,20 @@ ${safeCode}
     border: 1px solid rgb(15 23 42 / 0.08);
   }
 
+  .hai-ai-doc-color-swatch[data-empty='true'] span {
+    position: relative;
+    border-color: oklch(var(--bc) / 0.18);
+    background:
+      linear-gradient(
+        135deg,
+        transparent calc(50% - 0.75px),
+        oklch(var(--bc) / 0.34) calc(50% - 0.75px),
+        oklch(var(--bc) / 0.34) calc(50% + 0.75px),
+        transparent calc(50% + 0.75px)
+      ),
+      color-mix(in srgb, oklch(var(--b1)) 96%, white 4%);
+  }
+
   .hai-ai-doc-rewrite-menu-btn {
     justify-content: center;
   }
@@ -2875,12 +4044,28 @@ ${safeCode}
   }
 
   .hai-markdown-document {
+    width: 100%;
+    min-width: 0;
     max-width: 52.5rem;
     margin: 0 auto;
     padding: 1.25rem 2rem 6rem;
     outline: none;
   }
 
+  .hai-markdown-document.hai-markdown-code-only {
+    max-width: none !important;
+    width: 100% !important;
+    min-width: 0;
+    margin: 0 !important;
+    height: 100%;
+    min-height: 100%;
+    padding: 0.5rem 0.75rem 0.75rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+  }
+
   :global(.hai-markdown-document ::selection) {
     background: var(--hai-ai-doc-selection-bg, rgb(59 130 246 / 0.22));
     color: var(--hai-ai-doc-selection-fg, inherit);
@@ -2956,6 +4141,10 @@ ${safeCode}
     font-weight: 500;
   }
 
+  .hai-markdown-editable :global(a[href]) {
+    cursor: pointer;
+  }
+
   .hai-markdown :global(a:hover) {
     text-decoration: underline;
   }
@@ -3019,6 +4208,7 @@ ${safeCode}
     gap: 0.75rem;
     padding: 0.65rem 1rem;
     min-height: 2.5rem;
+    line-height: 1.2;
     background: oklch(var(--n) / 0.94);
     border-bottom: 1px solid oklch(var(--nc) / 0.1);
   }
@@ -3027,6 +4217,7 @@ ${safeCode}
     min-width: 0;
     display: flex;
     align-items: center;
+    gap: 0.55rem;
   }
 
   .hai-markdown :global(.hai-md-code-actions) {
@@ -3038,12 +4229,54 @@ ${safeCode}
   .hai-markdown :global(.hai-md-code-lang) {
     font-size: 0.75rem;
     font-weight: 600;
+    line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: oklch(var(--nc) / 0.6);
     user-select: none;
   }
 
+  .hai-markdown :global(.hai-md-code-view-switch) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.16rem;
+    padding: 0.15rem;
+    border-radius: 9999px;
+    border: 1px solid oklch(var(--nc) / 0.16);
+    background: oklch(var(--nc) / 0.08);
+    flex-shrink: 0;
+  }
+
+  .hai-markdown :global(.hai-md-code-view-btn) {
+    min-height: 1.7rem;
+    padding: 0 0.72rem;
+    border: none;
+    border-radius: 9999px;
+    background: transparent;
+    color: oklch(var(--nc) / 0.72);
+    font-size: 0.86rem;
+    font-weight: 600;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+
+  .hai-markdown :global(.hai-md-code-view-btn[aria-pressed='true']) {
+    background: oklch(var(--nc) / 0.2);
+    color: oklch(var(--nc));
+  }
+
+  .hai-markdown :global(.hai-md-code-preview-hint) {
+    font-size: 0.75rem;
+    line-height: 1;
+    color: oklch(var(--nc) / 0.48);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .hai-markdown :global(.hai-md-code-lang-empty) {
     opacity: 0.7;
   }
@@ -3083,8 +4316,21 @@ ${safeCode}
       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
       'Liberation Mono', monospace;
     font-size: 0.875rem;
-    line-height: 1.6;
+    line-height: 1.45;
     tab-size: 2;
+
+    /* Shiki CSS Variables 主题（由 highlight.ts 的 createCssVariablesTheme 引用） */
+    --hai-hl-foreground: oklch(var(--nc));
+    --hai-hl-background: transparent;
+    --hai-hl-token-keyword: oklch(0.7 0.15 280);
+    --hai-hl-token-string: oklch(0.75 0.12 150);
+    --hai-hl-token-string-expression: oklch(0.75 0.12 150);
+    --hai-hl-token-constant: oklch(0.78 0.12 70);
+    --hai-hl-token-comment: oklch(var(--nc) / 0.45);
+    --hai-hl-token-function: oklch(0.72 0.14 220);
+    --hai-hl-token-parameter: oklch(0.72 0.12 35);
+    --hai-hl-token-punctuation: oklch(var(--nc) / 0.7);
+    --hai-hl-token-link: oklch(0.7 0.15 280);
   }
 
   .hai-markdown :global(.hai-md-code-preview-slot) {
@@ -3092,6 +4338,76 @@ ${safeCode}
     background: oklch(var(--b1));
   }
 
+  .hai-markdown :global(.hai-md-code-block[data-code-view='code'] .hai-md-code-preview-slot) {
+    display: none;
+  }
+
+  .hai-markdown :global(.hai-md-code-block[data-code-view='preview'] pre) {
+    display: none;
+  }
+
+  .hai-markdown :global(.hai-md-code-block[data-code-view='preview'] .hai-md-code-preview-slot) {
+    display: block;
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-block) {
+    width: 100% !important;
+    max-width: none !important;
+    min-width: 0;
+    margin: 0;
+    height: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    display: flex !important;
+    align-self: stretch;
+    align-items: stretch;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-header),
+  .hai-markdown-code-only :global(.hai-md-code-block pre),
+  .hai-markdown-code-only :global(.hai-md-code-preview-slot) {
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    box-sizing: border-box;
+  }
+
+  /* 代码/预览切换时统一固定 header 高度，避免视觉抖动。 */
+  .hai-markdown-code-only :global(.hai-md-code-header) {
+    flex: 0 0 3.1rem;
+    height: 3.1rem;
+    min-height: 3.1rem;
+    padding: 0 1rem;
+    align-items: center;
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-block pre),
+  .hai-markdown-code-only :global(.hai-md-code-preview-slot) {
+    flex: 1 1 auto;
+    height: auto;
+    min-height: 0;
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-block pre) {
+    overflow: auto;
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-preview-slot) {
+    background: oklch(var(--n));
+    color: oklch(var(--nc));
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview']) {
+    flex: 1 1 auto;
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview'] .hai-md-code-preview-slot) {
+    flex: 1 1 auto;
+    display: flex;
+  }
+
   .hai-markdown :global(blockquote) {
     margin: 1em 0;
     padding: 0.65em 1.1em;
@@ -3209,14 +4525,29 @@ ${safeCode}
     box-shadow: inset 0 -1px 0 oklch(var(--bc) / 0.1);
   }
 
-  .hai-md-preview-card {
+  :global(.hai-md-preview-card) {
     margin: 0;
     padding: 1rem;
     background: oklch(var(--b1));
     color: oklch(var(--bc));
   }
 
-  .hai-md-preview-head {
+  .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview'] .hai-md-preview-card) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 0.95rem 1rem;
+    background: oklch(var(--n));
+    color: oklch(var(--nc));
+  }
+
+  .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview'] .hai-md-preview-head),
+  .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview'] .hai-md-preview-desc) {
+    display: none;
+  }
+
+  :global(.hai-md-preview-head) {
     font-size: 0.8rem;
     font-weight: 700;
     letter-spacing: 0.04em;
@@ -3224,12 +4555,43 @@ ${safeCode}
     color: oklch(var(--bc) / 0.7);
   }
 
-  .hai-md-preview-desc {
+  :global(.hai-md-preview-desc) {
     margin: 0.5rem 0 0;
     font-size: 0.875rem;
     color: oklch(var(--bc) / 0.7);
   }
 
+  :global(.hai-md-preview-empty) {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.62rem;
+  }
+
+  :global(.hai-md-preview-empty-title) {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    color: oklch(var(--bc) / 0.85);
+  }
+
+  :global(.hai-md-preview-empty-text) {
+    margin: 0;
+    font-size: 0.84rem;
+    line-height: 1.58;
+    white-space: pre-wrap;
+    color: oklch(var(--bc) / 0.74);
+  }
+
+  .hai-markdown-code-only :global(.hai-md-preview-empty-title) {
+    color: oklch(var(--nc) / 0.88);
+  }
+
+  .hai-markdown-code-only :global(.hai-md-preview-empty-text) {
+    color: oklch(var(--nc) / 0.72);
+  }
+
   :global(.hai-md-preview-card pre) {
     margin: 0.85rem 0 0;
     padding: 0.85rem 1rem;
@@ -3243,7 +4605,7 @@ ${safeCode}
     color: oklch(var(--er));
   }
 
-  .hai-md-preview-frame {
+  :global(.hai-md-preview-frame) {
     display: block;
     width: 100%;
     min-height: 280px;
@@ -3253,10 +4615,19 @@ ${safeCode}
     background: white;
   }
 
-  .hai-md-preview-loading {
+  .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview'] .hai-md-preview-frame) {
+    flex: 1 1 auto;
+    height: 100%;
+    min-height: 0;
+    margin-top: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  :global(.hai-md-preview-loading) {
     width: 100%;
     height: 4px;
-    margin-top: 0.85rem;
+    margin-top: 0.5rem;
     border-radius: 9999px;
     background: linear-gradient(
       90deg,
@@ -3268,27 +4639,10 @@ ${safeCode}
     animation: hai-md-loading 1.2s linear infinite;
   }
 
-  .hai-md-preview-rendered :global(:first-child) {
+  :global(.hai-md-preview-rendered > :first-child) {
     margin-top: 0.85rem;
   }
 
-  /* Shiki CSS Variables 主题 — 代码高亮 token 颜色 */
-  .hai-markdown :global(.hai-md-code-block code) {
-    --hai-hl-fg: oklch(var(--nc));
-    --hai-hl-bg: transparent;
-
-    /* token 颜色 */
-    --hai-hl-token-keyword: oklch(0.7 0.15 280);
-    --hai-hl-token-string: oklch(0.75 0.12 150);
-    --hai-hl-token-string-expression: oklch(0.75 0.12 150);
-    --hai-hl-token-constant: oklch(0.78 0.12 70);
-    --hai-hl-token-comment: oklch(var(--nc) / 0.45);
-    --hai-hl-token-function: oklch(0.72 0.14 220);
-    --hai-hl-token-parameter: oklch(0.72 0.12 35);
-    --hai-hl-token-punctuation: oklch(var(--nc) / 0.7);
-    --hai-hl-token-link: oklch(0.7 0.15 280);
-  }
-
   @keyframes hai-md-loading {
     from {
       background-position: 220px 0;
@@ -3299,16 +4653,31 @@ ${safeCode}
     }
   }
 
-  @media (max-width: 960px) {
-    .hai-ai-doc-layout,
-    .hai-ai-doc-layout.hai-ai-doc-layout-collapsed {
-      grid-template-columns: minmax(0, 1fr);
+  @container ai-doc-editor (max-width: 800px) {
+    .hai-ai-doc-layout {
+      display: flex;
+      min-height: 0;
     }
 
     .hai-ai-doc-outline {
-      display: none;
+      position: absolute;
+      top: 0.65rem;
+      left: 0.65rem;
+      bottom: 0.85rem;
+      width: min(220px, calc(100% - 1.3rem));
+      max-width: 220px;
+      z-index: 14;
+      padding: 0.5rem 0.625rem 0.9rem 0.75rem;
+      border: 1px solid oklch(var(--bc) / 0.12);
+      border-radius: 0.95rem;
+      background:
+        linear-gradient(180deg, oklch(var(--b2) / 0.84), oklch(var(--b1) / 0.92));
+      box-shadow: 0 20px 40px -28px oklch(var(--bc) / 0.35);
+      backdrop-filter: blur(8px);
     }
+  }
 
+  @media (max-width: 960px) {
     .hai-ai-doc-topbar {
       padding-left: 1rem;
       padding-right: 1rem;