@h-ai/ui 0.1.0-alpha.10 → 0.1.0-alpha.12

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

@@ -14,11 +14,14 @@
   import type {
     AiDocumentEditorProps,
     MarkdownBlockFormatKind,
+    MarkdownBlockStyleKind,
     MarkdownCodeBlockItem,
     MarkdownCodeRunRequest,
     MarkdownCodeRunResult,
+    MarkdownColorFormatRequest,
     MarkdownInlineFormatKind,
     MarkdownRewriteAction,
+    MarkdownTextAlignKind,
   } from './document-types.js'
   import { uiM } from '../../../messages.js'
   import { cn } from '../../../utils.js'
@@ -47,10 +50,132 @@
     error?: string
   }
 
+  interface SelectionFormatState {
+    /** 当前选区所在段落样式，用于标题/正文下拉默认值。 */
+    blockFormat: MarkdownBlockStyleKind
+    /** 当前选区所在段落的对齐方式。 */
+    alignment: MarkdownTextAlignKind
+    /** 当前选区是否命中加粗样式。 */
+    bold: boolean
+    /** 当前选区是否命中删除线样式。 */
+    strike: boolean
+    /** 当前选区是否命中斜体样式。 */
+    italic: boolean
+    /** 当前选区是否命中下划线样式。 */
+    underline: boolean
+    /** 当前选区是否命中 `<mark>` 或自定义底色高亮。 */
+    highlight: boolean
+    /** 当前选区是否落在行内代码内。 */
+    code: boolean
+    /** 当前选区命中的链接地址；为空表示无链接。 */
+    linkHref: string
+    /** 当前选区前景色；为空表示使用默认文字颜色。 */
+    textColor: string | null
+    /** 当前选区背景色；为空表示使用默认背景。 */
+    backgroundColor: string | null
+  }
+
+  interface PreviewSelectionState {
+    /** 浏览器当前仍然有效的正文选区。 */
+    selection: Selection
+    /** 当前选区对应的 DOM Range，用于计算浮层定位。 */
+    range: Range
+    /** 归一化后的选中文本。 */
+    text: string
+  }
+
+  type SelectionMenuKind = 'rewrite' | 'block' | 'align' | 'link' | 'color'
+
+  const BLOCK_FORMAT_OPTIONS: Array<{
+    value: MarkdownBlockStyleKind
+    labelKey:
+      | 'markdown_format_paragraph'
+      | 'markdown_format_heading_1'
+      | 'markdown_format_heading_2'
+      | 'markdown_format_heading_3'
+      | 'markdown_format_heading_4'
+    shortLabel: string
+  }> = [
+    {
+      value: 'paragraph',
+      labelKey: 'markdown_format_paragraph',
+      shortLabel: 'T',
+    },
+    {
+      value: 'heading1',
+      labelKey: 'markdown_format_heading_1',
+      shortLabel: 'H1',
+    },
+    {
+      value: 'heading2',
+      labelKey: 'markdown_format_heading_2',
+      shortLabel: 'H2',
+    },
+    {
+      value: 'heading3',
+      labelKey: 'markdown_format_heading_3',
+      shortLabel: 'H3',
+    },
+    {
+      value: 'heading4',
+      labelKey: 'markdown_format_heading_4',
+      shortLabel: 'H4',
+    },
+  ]
+
+  const ALIGN_OPTIONS: Array<{
+    value: MarkdownTextAlignKind
+    labelKey:
+      | 'markdown_align_left'
+      | 'markdown_align_center'
+      | 'markdown_align_right'
+      | 'markdown_align_justify'
+  }> = [
+    { value: 'left', labelKey: 'markdown_align_left' },
+    { value: 'center', labelKey: 'markdown_align_center' },
+    { value: 'right', labelKey: 'markdown_align_right' },
+    { value: 'justify', labelKey: 'markdown_align_justify' },
+  ]
+
+  const TEXT_COLOR_PRESETS = [
+    '#0f172a',
+    '#475569',
+    '#b91c1c',
+    '#ea580c',
+    '#ca8a04',
+    '#15803d',
+    '#2563eb',
+    '#7c3aed',
+  ] as const
+
+  const BACKGROUND_COLOR_PRESETS = [
+    '#fee2e2',
+    '#ffedd5',
+    '#fef3c7',
+    '#dcfce7',
+    '#dbeafe',
+    '#ede9fe',
+    '#f3f4f6',
+    '#e2e8f0',
+  ] as const
+
+  const DEFAULT_SELECTION_FORMAT_STATE: SelectionFormatState = {
+    blockFormat: 'paragraph',
+    alignment: 'left',
+    bold: false,
+    strike: false,
+    italic: false,
+    underline: false,
+    highlight: false,
+    code: false,
+    linkHref: '',
+    textColor: null,
+    backgroundColor: null,
+  }
+
   // 复制前后的图标以内联 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 {
     // 暴露给外层的滚动容器引用，用于同步滚动或定位选区工具条。
@@ -71,6 +196,10 @@
     showCopyButton = true,
     // 是否显示代码块运行按钮与预览占位。
     showRunButton = false,
+    // 是否在代码块头部显示“代码/预览”切换。
+    showCodePreviewToggle = false,
+    // 代码预览切换模式下展示在语言标签旁的提示文案。
+    codePreviewHint = '',
     // 是否启用语法高亮。
     enableHighlight = true,
     // 是否把换行渲染为 <br>。
@@ -123,8 +252,16 @@
     oncopydocument,
     // 块级格式动作回调。
     onapplyblockformat,
+    // 细粒度块样式动作回调。
+    onapplyblockstyle,
     // 行内格式动作回调。
     onapplyinlineformat,
+    // 对齐动作回调。
+    onapplyalignment,
+    // 链接设置动作回调。
+    onapplylink,
+    // 颜色设置动作回调。
+    onapplycolor,
     // 选区复制回调。
     oncopyselection,
     // 选区注释回调。
@@ -141,10 +278,10 @@
   let selectedText = $state('')
   // 选区工具条显示开关。
   let selectionToolbarVisible = $state(false)
-  // 改写菜单显示开关。
-  let rewriteMenuOpen = $state(false)
+  // 选区工具条当前展开的子菜单，统一管理避免多个面板互相覆盖。
+  let activeSelectionMenu = $state<SelectionMenuKind | null>(null)
   // 文档头部标题只有在正文首个标题滚出可视区后才显示，避免双标题并排出现。
-  let showPinnedTitle = $state(Boolean(title))
+  let showPinnedTitle = $state(false)
   // 选区工具条在滚动容器中的定位坐标。
   let toolbarPosition = $state<SelectionToolbarPosition>({
     top: 0,
@@ -152,23 +289,52 @@
     placement: 'top',
     alignment: 'center',
   })
+  // 选区工具条自身 DOM，用于根据真实尺寸修正贴边位置。
+  let selectionToolbarEl = $state<HTMLDivElement | null>(null)
+  // 当前展开菜单对应的触发按钮，用来把面板锚定到具体按钮下方/上方。
+  let activeSelectionMenuTrigger = $state<HTMLElement | null>(null)
+  // 菜单面板相对工具条的水平锚点。
+  let selectionMenuLeft = $state(0)
+  // 菜单面板在锚点处的对齐方式，避免宽面板越过正文边界。
+  let selectionMenuAlignment = $state<'left' | 'center' | 'right'>('center')
   // documentCopied 只负责顶部复制按钮的瞬时反馈，不和正文内容状态混用。
   let documentCopied = $state(false)
   // copyFeedbackTimer 用来保证连续点击复制时，成功态能按最后一次操作重新计时。
-  let copyFeedbackTimer: ReturnType<typeof window.setTimeout> | undefined = $state()
+  let copyFeedbackTimer: number | undefined = $state()
   // 每个代码块的运行状态和预览结果，key 为 codeBlockId。
   let codePreviews = $state<Record<string, CodePreviewState>>({})
+  // selectionFormatState 跟随真实 DOM 选区，负责驱动按钮按下态与下拉默认值。
+  let selectionFormatState = $state<SelectionFormatState>({
+    ...DEFAULT_SELECTION_FORMAT_STATE,
+  })
+  // linkDraft 只在链接弹层里暂存输入值，避免每次打开都丢掉正在编辑的链接。
+  let linkDraft = $state('')
+  // 真实尺寸修正只需要排队一帧，避免反复触发 handleSelectionChange 形成抖动。
+  let selectionToolbarMeasurePending = false
+  // 选区刷新统一合并到同一帧，避免 selectionchange / mouseup / blur 连续触发时抖动。
+  let selectionRefreshFrame: number | undefined
+  let selectionRefreshNeedsRemeasure = false
+  // 浏览器在滚动到底部或切换焦点时会短暂给出空选区，这里延迟一拍再关闭工具条。
+  let selectionToolbarCloseTimer: number | undefined
 
   // code 类型产物通常只有裸代码文本，这里统一包成 fenced block 进入同一条渲染链路。
   const documentContent = $derived(
     resolveDocumentMarkdownContent(content, sourceKind, codeLanguage),
   )
   // 渲染结果同时提供 HTML、目录和代码块元数据，供顶部目录与代码预览共用。
+  const codePreviewToggleEnabled = $derived(
+    showCodePreviewToggle && sourceKind === 'code',
+  )
+  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,
     }),
   )
@@ -182,21 +348,44 @@
   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 回调仍然保留，用于兼容外部还没迁移的调用方。
+  const legacyBlockFormattingEnabled = $derived(
+    Boolean(onapplyblockformat) && !onapplyblockstyle,
+  )
+  // 这里统一判断是否存在任意块级格式能力，方便控制分隔线和浮层显隐。
+  const anyBlockFormattingEnabled = $derived(
+    richBlockFormattingEnabled || legacyBlockFormattingEnabled,
+  )
   // selectionToolsEnabled 统一判断选区工具条是否值得出现，避免正文只读展示时还露出空浮层。
   const selectionToolsEnabled = $derived(
     [
       onrewrite,
-      onapplyblockformat,
+      anyBlockFormattingEnabled,
       onapplyinlineformat,
+      onapplyalignment,
+      onapplylink,
+      onapplycolor,
       oncopyselection,
       onannotation,
     ].some(Boolean),
   )
+  // 当前段落样式的展示文案，直接来自 `selectionFormatState`，避免按钮标题和下拉选中值不同步。
+  const activeBlockFormatOption = $derived(
+    BLOCK_FORMAT_OPTIONS.find(
+      option => option.value === selectionFormatState.blockFormat,
+    ) ?? BLOCK_FORMAT_OPTIONS[0],
+  )
   // readerDocumentClass 只负责正文文章区域，不和外层容器类名混用。
   const readerDocumentClass = $derived(
     cn(
       'hai-markdown',
       'hai-markdown-document',
+      sourceKind === 'code' ? 'hai-markdown-code-only' : '',
       editable ? 'hai-markdown-editable' : '',
     ),
   )
@@ -242,6 +431,7 @@
 
   $effect(() => {
     void documentContent
+    codePreviews = {}
     closeSelectionToolbar()
   })
 
@@ -259,6 +449,33 @@
       if (copyFeedbackTimer) {
         window.clearTimeout(copyFeedbackTimer)
       }
+
+      if (selectionRefreshFrame) {
+        window.cancelAnimationFrame(selectionRefreshFrame)
+      }
+
+      if (selectionToolbarCloseTimer) {
+        window.clearTimeout(selectionToolbarCloseTimer)
+      }
+    }
+  })
+
+  $effect(() => {
+    if (typeof document === 'undefined' || !previewHost || !selectionToolsEnabled) {
+      return
+    }
+
+    const handleDocumentSelectionChange = (): void => {
+      queueSelectionRefresh()
+    }
+
+    document.addEventListener('selectionchange', handleDocumentSelectionChange)
+
+    return () => {
+      document.removeEventListener(
+        'selectionchange',
+        handleDocumentSelectionChange,
+      )
     }
   })
 
@@ -282,6 +499,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)
@@ -348,9 +567,7 @@
   }
 
   function looksLikeHtml(code: string): boolean {
-    return HTML_SNIPPET_REGEX.test(
-      code,
-    )
+    return HTML_DOCUMENT_PATTERN.test(code)
   }
 
   function buildJavaScriptPreview(code: string): string {
@@ -467,6 +684,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) {
@@ -497,7 +746,7 @@ ${safeCode}
           ...codePreviews,
           [blockId]: {
             status: 'error',
-            error: uiM('markdown_run_unavailable'),
+            error: resolvePreviewUnavailableMessage(request.language),
           },
         }
         return
@@ -523,6 +772,20 @@ ${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')
+    }
+  }
+
   async function handleClick(event: MouseEvent): Promise<void> {
     const target = event.target as HTMLElement
     const copyButton = target.closest(
@@ -533,6 +796,26 @@ ${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
@@ -574,12 +857,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
     }
 
@@ -605,7 +888,6 @@ ${safeCode}
       const markdownHtml = parseMarkdown(result.content, {
         enableHighlight,
         showCopyButton: false,
-        showRunButton: false,
         breaks,
       })
 
@@ -629,10 +911,323 @@ ${safeCode}
     return escapePreviewText(value).replace(/\n/g, '&#10;')
   }
 
+  function getSelectionAnchorElement(selection: Selection): HTMLElement | null {
+    const anchorNode = selection.anchorNode
+    if (!anchorNode) {
+      return null
+    }
+
+    return anchorNode instanceof HTMLElement
+      ? anchorNode
+      : anchorNode.parentElement
+  }
+
+  function getClosestBlockElement(element: HTMLElement | null): HTMLElement | null {
+    if (!element || !previewHost) {
+      return null
+    }
+
+    const block = element.closest('p, h1, h2, h3, h4, h5, h6, li')
+    return block instanceof HTMLElement && previewHost.contains(block)
+      ? block
+      : null
+  }
+
+  function readComputedInlineState(element: HTMLElement | null): Pick<
+    SelectionFormatState,
+    'bold' | 'italic' | 'strike' | 'underline'
+  > {
+    if (!element || typeof window === 'undefined') {
+      return {
+        bold: false,
+        italic: false,
+        strike: false,
+        underline: false,
+      }
+    }
+
+    const style = window.getComputedStyle(element)
+    const fontWeight = Number.parseInt(style.fontWeight, 10)
+    const decoration = `${style.textDecorationLine} ${style.textDecoration}`
+      .toLowerCase()
+
+    return {
+      bold: Number.isNaN(fontWeight)
+        ? ['bold', 'bolder'].includes(style.fontWeight.toLowerCase())
+        : fontWeight >= 600,
+      italic:
+        style.fontStyle === 'italic' || style.fontStyle.startsWith('oblique'),
+      strike: decoration.includes('line-through'),
+      underline: decoration.includes('underline'),
+    }
+  }
+
+  function readBlockFormat(element: HTMLElement | null): MarkdownBlockStyleKind {
+    const tagName = getClosestBlockElement(element)?.tagName.toLowerCase()
+
+    if (tagName === 'h1') {
+      return 'heading1'
+    }
+    if (tagName === 'h2') {
+      return 'heading2'
+    }
+    if (tagName === 'h3') {
+      return 'heading3'
+    }
+    if (tagName === 'h4') {
+      return 'heading4'
+    }
+
+    return 'paragraph'
+  }
+
+  function normalizeTextAlign(value: string | null | undefined): MarkdownTextAlignKind | null {
+    const normalized = value?.trim().toLowerCase()
+    if (!normalized) {
+      return null
+    }
+
+    if (normalized === 'start') {
+      return 'left'
+    }
+    if (normalized === 'end') {
+      return 'right'
+    }
+
+    return normalized === 'center'
+      || normalized === 'right'
+      || normalized === 'justify'
+      || normalized === 'left'
+      ? normalized
+      : null
+  }
+
+  function readAlignment(element: HTMLElement | null): MarkdownTextAlignKind {
+    const block = getClosestBlockElement(element)
+    if (!block || typeof window === 'undefined') {
+      return 'left'
+    }
+
+    // 对齐样式可能挂在外层 `<hai-align>` 容器上，单读 block 的 inline style 会丢失真实状态。
+    const alignHost = block.closest<HTMLElement>('.hai-md-align-block') || block
+    const computedAlign = normalizeTextAlign(
+      window.getComputedStyle(alignHost).textAlign,
+    )
+    const attributeAlignCandidate
+      = alignHost.dataset.haiAlign
+        || alignHost.getAttribute('align')
+        || block.getAttribute('align')
+    const attributeAlign = normalizeTextAlign(
+      attributeAlignCandidate,
+    )
+
+    return computedAlign || attributeAlign || 'left'
+  }
+
+  function readSelectionFormatState(selection: Selection): SelectionFormatState {
+    const anchorElement = getSelectionAnchorElement(selection)
+    const colorHost = anchorElement?.closest<HTMLElement>('[data-hai-color], [data-hai-bg]')
+    const linkHost = anchorElement?.closest<HTMLAnchorElement>('a[href]')
+    const codeHost = anchorElement?.closest<HTMLElement>('code')
+    const highlightHost = anchorElement?.closest<HTMLElement>('mark')
+    const inlineState = readComputedInlineState(anchorElement)
+    const hasHighlight = Boolean((highlightHost && previewHost?.contains(highlightHost)) || colorHost?.dataset.haiBg?.trim())
+    const textColor = colorHost?.dataset.haiColor?.trim()
+      || anchorElement?.closest<HTMLElement>('[data-hai-color]')?.dataset.haiColor
+      || null
+    const backgroundColor = colorHost?.dataset.haiBg?.trim()
+      || anchorElement?.closest<HTMLElement>('[data-hai-bg]')?.dataset.haiBg
+      || null
+
+    return {
+      blockFormat: readBlockFormat(anchorElement),
+      alignment: readAlignment(anchorElement),
+      bold: inlineState.bold,
+      strike: inlineState.strike,
+      italic: inlineState.italic,
+      underline: inlineState.underline,
+      highlight: hasHighlight,
+      code: Boolean(codeHost && previewHost?.contains(codeHost)),
+      linkHref:
+        linkHost && previewHost?.contains(linkHost)
+          ? (linkHost.getAttribute('href') ?? '')
+          : '',
+      textColor,
+      backgroundColor,
+    }
+  }
+
+  function readPreviewSelectionState(): PreviewSelectionState | null {
+    if (typeof window === 'undefined' || !previewHost) {
+      return null
+    }
+
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return null
+    }
+
+    const anchorNode = selection.anchorNode
+    const focusNode = selection.focusNode
+    if (
+      !anchorNode
+      || !focusNode
+      || !previewHost.contains(anchorNode)
+      || !previewHost.contains(focusNode)
+    ) {
+      return null
+    }
+
+    const text = selection.toString().trim()
+    if (!text) {
+      return null
+    }
+
+    return {
+      selection,
+      range: selection.getRangeAt(0),
+      text,
+    }
+  }
+
+  function clearPendingSelectionToolbarClose(): void {
+    if (typeof window === 'undefined' || !selectionToolbarCloseTimer) {
+      return
+    }
+
+    window.clearTimeout(selectionToolbarCloseTimer)
+    selectionToolbarCloseTimer = undefined
+  }
+
+  function scheduleSelectionToolbarClose(): void {
+    if (typeof window === 'undefined') {
+      closeSelectionToolbar()
+      return
+    }
+
+    if (!selectionToolbarVisible) {
+      closeSelectionToolbar()
+      return
+    }
+
+    clearPendingSelectionToolbarClose()
+    selectionToolbarCloseTimer = window.setTimeout(() => {
+      selectionToolbarCloseTimer = undefined
+      if (!readPreviewSelectionState()) {
+        closeSelectionToolbar()
+      }
+    }, 120)
+  }
+
+  function queueSelectionRefresh(remeasured = false): void {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    selectionRefreshNeedsRemeasure ||= remeasured
+    if (selectionRefreshFrame) {
+      return
+    }
+
+    selectionRefreshFrame = window.requestAnimationFrame(() => {
+      const nextRemeasured = selectionRefreshNeedsRemeasure
+      selectionRefreshFrame = undefined
+      selectionRefreshNeedsRemeasure = false
+      handleSelectionChange(nextRemeasured)
+    })
+  }
+
+  function estimateSelectionMenuWidth(menu: SelectionMenuKind): number {
+    if (menu === 'color' || menu === 'link') {
+      return 256
+    }
+
+    if (menu === 'rewrite') {
+      return 320
+    }
+
+    return 288
+  }
+
+  function updateSelectionMenuAnchor(menu: SelectionMenuKind): void {
+    if (!selectionToolbarEl || !activeSelectionMenuTrigger) {
+      selectionMenuLeft = 0
+      selectionMenuAlignment = 'center'
+      return
+    }
+
+    const toolbarWidth = Math.max(
+      selectionToolbarEl.offsetWidth,
+      selectionToolbarEl.clientWidth,
+    )
+    const triggerCenter
+      = activeSelectionMenuTrigger.offsetLeft
+        + activeSelectionMenuTrigger.offsetWidth / 2
+    const estimatedHalfWidth = Math.min(
+      estimateSelectionMenuWidth(menu) / 2,
+      Math.max(112, (toolbarWidth - 16) / 2),
+    )
+    const minCenter = 8 + estimatedHalfWidth
+    const maxCenter = Math.max(minCenter, toolbarWidth - 8 - estimatedHalfWidth)
+
+    if (triggerCenter <= minCenter) {
+      selectionMenuLeft = 0
+      selectionMenuAlignment = 'left'
+      return
+    }
+
+    if (triggerCenter >= maxCenter) {
+      selectionMenuLeft = toolbarWidth
+      selectionMenuAlignment = 'right'
+      return
+    }
+
+    selectionMenuLeft = triggerCenter
+    selectionMenuAlignment = 'center'
+  }
+
+  function scheduleSelectionToolbarMeasurement(): void {
+    if (
+      typeof window === 'undefined'
+      || selectionToolbarMeasurePending
+      || !selectionToolbarVisible
+    ) {
+      return
+    }
+
+    selectionToolbarMeasurePending = true
+    window.requestAnimationFrame(() => {
+      selectionToolbarMeasurePending = false
+      if (selectionToolbarVisible) {
+        handleSelectionChange(true)
+      }
+    })
+  }
+
+  function toggleSelectionMenu(menu: SelectionMenuKind, event?: MouseEvent): void {
+    const opening = activeSelectionMenu !== menu
+    activeSelectionMenu = opening ? menu : null
+    activeSelectionMenuTrigger = opening && event?.currentTarget instanceof HTMLElement
+      ? event.currentTarget
+      : null
+    if (opening) {
+      updateSelectionMenuAnchor(menu)
+    }
+    if (opening && menu === 'link') {
+      linkDraft = selectionFormatState.linkHref || 'https://'
+    }
+  }
+
   function closeSelectionToolbar(): void {
+    clearPendingSelectionToolbarClose()
     selectionToolbarVisible = false
-    rewriteMenuOpen = false
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
+    selectionMenuLeft = 0
+    selectionMenuAlignment = 'center'
     selectedText = ''
+    linkDraft = ''
+    selectionFormatState = { ...DEFAULT_SELECTION_FORMAT_STATE }
   }
 
   /**
@@ -683,9 +1278,8 @@ ${safeCode}
       return
     }
 
-    const firstHeading = previewHost.querySelector<HTMLElement>(
-      '[data-heading-id]',
-    )
+    const firstHeading
+      = previewHost.querySelector<HTMLElement>('[data-heading-id]')
     if (!firstHeading) {
       showPinnedTitle = true
       return
@@ -700,7 +1294,7 @@ ${safeCode}
     syncActiveHeadingFromScroll()
     syncPinnedTitleVisibility()
     if (selectionToolbarVisible) {
-      closeSelectionToolbar()
+      queueSelectionRefresh(true)
     }
     ondocumentscroll?.(event)
   }
@@ -724,7 +1318,7 @@ ${safeCode}
    * 选区工具条依赖真实 DOM 选区范围，因此只在 selection 落在当前正文容器内时显示。
    * 一旦内容刷新或滚动位置变化，就主动关闭，避免把旧选区动作误用到新内容上。
    */
-  function handleSelectionChange(): void {
+  function handleSelectionChange(remeasured = false): void {
     if (
       !selectionToolsEnabled
       || typeof window === 'undefined'
@@ -734,79 +1328,70 @@ ${safeCode}
       return
     }
 
-    const selection = window.getSelection()
-    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
-      closeSelectionToolbar()
-      return
-    }
-
-    const anchorNode = selection.anchorNode
-    const focusNode = selection.focusNode
-    if (
-      !anchorNode
-      || !focusNode
-      || !previewHost.contains(anchorNode)
-      || !previewHost.contains(focusNode)
-    ) {
-      closeSelectionToolbar()
-      return
-    }
+    clearPendingSelectionToolbarClose()
 
-    const text = selection.toString().trim()
-    if (!text) {
-      closeSelectionToolbar()
+    const previewSelection = readPreviewSelectionState()
+    if (!previewSelection) {
+      scheduleSelectionToolbarClose()
       return
     }
 
-    const range = selection.getRangeAt(0)
+    const { selection, range, text } = previewSelection
     const rect = range.getBoundingClientRect()
     const hostRect = editorScrollHost.getBoundingClientRect()
     // 浮层尺寸在首次渲染前拿不到精确高度，这里用稳定的经验值决定上下避让方向，避免直接盖住选中文本。
-    const estimatedToolbarHeight = rewriteMenuOpen ? 132 : 56
+    const estimatedToolbarHeight = 60
     const offset = 12
     const topSpace = rect.top - hostRect.top
     const bottomSpace = hostRect.bottom - rect.bottom
-    const placement
-      = topSpace >= estimatedToolbarHeight + offset || bottomSpace < estimatedToolbarHeight
+    const placement: SelectionToolbarPosition['placement']
+      = topSpace >= estimatedToolbarHeight + offset
+        || bottomSpace < estimatedToolbarHeight
         ? 'top'
         : 'bottom'
     const center = rect.left - hostRect.left + rect.width / 2
     const horizontalPadding = 16
+    const measuredToolbarHalfWidth = selectionToolbarEl
+      ? selectionToolbarEl.offsetWidth / 2
+      : 320
     const estimatedToolbarHalfWidth = Math.min(
-      272,
-      Math.max(
-        132,
-        (editorScrollHost.clientWidth - horizontalPadding * 2) / 2,
-      ),
+      Math.max(132, measuredToolbarHalfWidth),
+      Math.max(132, (editorScrollHost.clientWidth - horizontalPadding * 2) / 2),
     )
     const minCenter = horizontalPadding + estimatedToolbarHalfWidth
     const maxCenter = editorScrollHost.clientWidth - minCenter
-    const alignment
+    const alignment: SelectionToolbarPosition['alignment']
       = center <= minCenter
         ? 'left'
         : center >= maxCenter
         ? '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
+    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
     selectionToolbarVisible = true
-    rewriteMenuOpen = false
+    selectionFormatState = readSelectionFormatState(selection)
     toolbarPosition = {
       top: Math.max(12, toolbarTop),
       left: Math.max(horizontalPadding, toolbarLeft),
       placement,
       alignment,
     }
+
+    if (activeSelectionMenu) {
+      updateSelectionMenuAnchor(activeSelectionMenu)
+    }
+
+    if (!remeasured) {
+      scheduleSelectionToolbarMeasurement()
+    }
   }
 
   async function applyRewrite(actionId: string): Promise<void> {
@@ -814,7 +1399,8 @@ ${safeCode}
       return
     }
 
-    rewriteMenuOpen = false
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
     await onrewrite({
       actionId,
       selectedText,
@@ -825,26 +1411,63 @@ ${safeCode}
 
   function applyBlockFormat(kind: MarkdownBlockFormatKind): void {
     onapplyblockformat?.(kind)
-    closeSelectionToolbar()
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
+    queueSelectionRefresh()
+  }
+
+  function applyBlockStyle(kind: MarkdownBlockStyleKind): void {
+    onapplyblockstyle?.(kind)
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
+    queueSelectionRefresh()
   }
 
   function applyInlineFormat(kind: MarkdownInlineFormatKind): void {
     onapplyinlineformat?.(kind)
-    closeSelectionToolbar()
+    queueSelectionRefresh()
+  }
+
+  function applyAlignment(kind: MarkdownTextAlignKind): void {
+    onapplyalignment?.(kind)
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
+    queueSelectionRefresh()
+  }
+
+  function applyLink(): void {
+    onapplylink?.(linkDraft.trim() || null)
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
+    queueSelectionRefresh()
+  }
+
+  function removeLink(): void {
+    onapplylink?.(null)
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
+    queueSelectionRefresh()
+  }
+
+  function applyColor(request: MarkdownColorFormatRequest): void {
+    onapplycolor?.(request)
+    queueSelectionRefresh()
   }
 
   async function copySelection(): Promise<void> {
     await oncopyselection?.()
-    closeSelectionToolbar()
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
   }
 
   async function annotateSelection(): Promise<void> {
     await onannotation?.()
-    closeSelectionToolbar()
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
   }
 
   function handlePreviewMouseUp(): void {
-    handleSelectionChange()
+    queueSelectionRefresh()
     onpreviewmouseup?.()
   }
 
@@ -853,7 +1476,7 @@ ${safeCode}
   }
 
   function handlePreviewBlur(): void {
-    closeSelectionToolbar()
+    queueSelectionRefresh(true)
     onpreviewblur?.()
   }
 </script>
@@ -893,6 +1516,7 @@ ${safeCode}
                 type='button'
                 class='hai-ai-doc-toolbar-icon'
                 aria-label={uiM('markdown_undo')}
+                title={`${uiM('markdown_undo')} (Ctrl/Cmd+Z)`}
                 disabled={undoDisabled}
                 onclick={onundo}
               >
@@ -909,6 +1533,7 @@ ${safeCode}
                 type='button'
                 class='hai-ai-doc-toolbar-icon'
                 aria-label={uiM('markdown_redo')}
+                title={`${uiM('markdown_redo')} (Ctrl/Cmd+Shift+Z)`}
                 disabled={redoDisabled}
                 onclick={onredo}
               >
@@ -951,12 +1576,12 @@ ${safeCode}
             </button>
 
             <AiDocumentDownloadMenu
-              content={content}
-              title={title}
-              sourceKind={sourceKind}
-              codeLanguage={codeLanguage}
+              {content}
+              {title}
+              {sourceKind}
+              {codeLanguage}
               actions={downloadActions}
-              ondownload={ondownload}
+              {ondownload}
               showLabel={true}
               iconOnly={false}
               triggerTitle={uiM('markdown_download')}
@@ -996,7 +1621,7 @@ ${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}
@@ -1046,14 +1671,7 @@ ${safeCode}
           class='hai-ai-doc-scroll'
           onclick={handleClick}
           onscroll={handleDocumentScroll}
-          onkeyup={handleSelectionChange}
-          onfocusout={() => {
-            if (typeof window !== 'undefined') {
-              window.setTimeout(() => {
-                handleSelectionChange()
-              }, 0)
-            }
-          }}
+          onkeyup={() => handleSelectionChange()}
         >
           {#if selectionToolbarVisible}
             <div
@@ -1063,189 +1681,521 @@ ${safeCode}
               style={`top:${toolbarPosition.top}px; left:${toolbarPosition.left}px;`}
             >
               <div
-                class='hai-ai-doc-selection-toolbar'
-                role='toolbar'
-                tabindex='-1'
-                onmousedown={event => event.preventDefault()}
+                class='hai-ai-doc-selection-chrome'
               >
-                {#if onrewrite}
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-chip'
-                    disabled={rewritePending}
-                    onclick={() => (rewriteMenuOpen = !rewriteMenuOpen)}
-                  >
-                    <svg viewBox='0 0 24 24' aria-hidden='true'>
-                      <path
-                        d='M12 3.25a.75.75 0 0 1 .72.55l1.06 3.62 3.63 1.06a.75.75 0 0 1 0 1.44l-3.63 1.06-1.06 3.63a.75.75 0 0 1-1.44 0l-1.06-3.63-3.63-1.06a.75.75 0 0 1 0-1.44l3.63-1.06 1.06-3.62a.75.75 0 0 1 .72-.55Zm6.5 11.5a.75.75 0 0 1 .72.55l.42 1.43 1.43.42a.75.75 0 0 1 0 1.44l-1.43.42-.42 1.43a.75.75 0 0 1-1.44 0l-.42-1.43-1.43-.42a.75.75 0 0 1 0-1.44l1.43-.42.42-1.43a.75.75 0 0 1 .72-.55Z'
-                      ></path>
-                    </svg>
-                    <span>{uiM('markdown_rewrite')}</span>
-                  </button>
-                {/if}
-
-                {#if onapplyblockformat}
-                  {#if onrewrite}
-                    <span class='hai-ai-doc-selection-divider'></span>
-                  {/if}
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_heading')}
-                    onclick={() => applyBlockFormat('heading')}
-                  >
-                    <svg viewBox='0 0 24 24' aria-hidden='true'>
-                      <path
-                        d='M5 5.25a.75.75 0 0 1 .75.75V11h6.5V6a.75.75 0 0 1 1.5 0v12a.75.75 0 0 1-1.5 0v-5.5h-6.5V18a.75.75 0 0 1-1.5 0V6A.75.75 0 0 1 5 5.25Zm11.25 2.5a.75.75 0 0 1 0 1.5h3a.75.75 0 0 1 0 1.5H18.5v8.5a.75.75 0 0 1-1.5 0v-8.5h-.75a.75.75 0 0 1 0-1.5h3Z'
-                      ></path>
-                    </svg>
-                  </button>
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_bullet')}
-                    onclick={() => applyBlockFormat('bullet')}
-                  >
-                    <svg viewBox='0 0 24 24' aria-hidden='true'>
-                      <path
-                        d='M6.25 7.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm14 0a.75.75 0 0 1-.75.75H8.75a.75.75 0 0 1 0-1.5H19.5a.75.75 0 0 1 .75.75Zm-14 5.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm14 0a.75.75 0 0 1-.75.75H8.75a.75.75 0 0 1 0-1.5H19.5a.75.75 0 0 1 .75.75Zm-14 5.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm14 0a.75.75 0 0 1-.75.75H8.75a.75.75 0 0 1 0-1.5H19.5a.75.75 0 0 1 .75.75Z'
-                      ></path>
-                    </svg>
-                  </button>
-                {/if}
-
-                {#if onapplyinlineformat}
-                  {#if onapplyblockformat}
-                    <span class='hai-ai-doc-selection-divider'></span>
-                  {/if}
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_bold')}
-                    onclick={() => applyInlineFormat('bold')}
-                  >
-                    <strong>B</strong>
-                  </button>
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_strike')}
-                    onclick={() => applyInlineFormat('strike')}
-                  >
-                    S
-                  </button>
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_italic')}
-                    onclick={() => applyInlineFormat('italic')}
-                  >
-                    <em>I</em>
-                  </button>
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_underline')}
-                    onclick={() => applyInlineFormat('underline')}
-                  >
-                    U
-                  </button>
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_link')}
-                    onclick={() => 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>
-                  </button>
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_code')}
-                    onclick={() => applyInlineFormat('code')}
-                  >
-                    &lt;/&gt;
-                  </button>
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn'
-                    title={uiM('markdown_format_highlight')}
-                    onclick={() => applyInlineFormat('highlight')}
-                  >
-                    <span class='hai-ai-doc-selection-highlight-icon'>A</span>
-                  </button>
-                {/if}
-
-                {#if oncopyselection || onannotation}
-                  {#if onapplyinlineformat}
-                    <span class='hai-ai-doc-selection-divider'></span>
-                  {/if}
-                {/if}
-
-                {#if oncopyselection}
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn hai-ai-doc-selection-btn-wide'
-                    title={uiM('markdown_copy_selection')}
-                    onclick={copySelection}
-                  >
-                    <svg viewBox='0 0 24 24' aria-hidden='true'>
-                      <path
-                        d='M8.75 4.25A2.75 2.75 0 0 0 6 7v8.25A2.75 2.75 0 0 0 8.75 18h7.5A2.75 2.75 0 0 0 19 15.25V7a2.75 2.75 0 0 0-2.75-2.75h-7.5Zm-4 3A2.75 2.75 0 0 1 7.5 4.5a.75.75 0 0 0 0-1.5A4.25 4.25 0 0 0 3.25 7.25v8.5A4.25 4.25 0 0 0 7.5 20a.75.75 0 0 0 0-1.5 2.75 2.75 0 0 1-2.75-2.75v-8.5Z'
-                      ></path>
-                    </svg>
-                  </button>
-                {/if}
-
-                {#if onannotation}
-                  <button
-                    type='button'
-                    class='hai-ai-doc-selection-btn hai-ai-doc-selection-btn-wide'
-                    title={uiM('markdown_annotation')}
-                    onclick={annotateSelection}
-                  >
-                    <svg viewBox='0 0 24 24' aria-hidden='true'>
-                      <path
-                        d='M6.75 4.25A2.75 2.75 0 0 0 4 7v7.75A2.75 2.75 0 0 0 6.75 17.5h1.72l2.3 2.01a1.75 1.75 0 0 0 2.3 0l2.3-2.01h1.88A2.75 2.75 0 0 0 20 14.75V7a2.75 2.75 0 0 0-2.75-2.75H6.75Zm1.5 4a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75Zm0 3.5A.75.75 0 0 1 9 11h4a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75Z'
-                      ></path>
-                    </svg>
-                  </button>
-                {/if}
-              </div>
-
-              {#if rewriteMenuOpen}
                 <div
-                  class='hai-ai-doc-rewrite-menu'
-                  role='menu'
+                  bind:this={selectionToolbarEl}
+                  class='hai-ai-doc-selection-toolbar'
+                  role='toolbar'
                   tabindex='-1'
                   onmousedown={event => event.preventDefault()}
                 >
-                  {#each resolvedRewriteActions as action}
+                  {#if onrewrite}
                     <button
                       type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-chip',
+                        (!directRewriteAction && activeSelectionMenu === 'rewrite')
+                          ? 'hai-ai-doc-selection-chip--active'
+                          : '',
+                      )}
                       disabled={rewritePending}
-                      onclick={() => applyRewrite(action.id)}
+                      onclick={(event) => {
+                        if (directRewriteAction) {
+                          void applyRewrite(directRewriteAction.id)
+                          return
+                        }
+
+                        toggleSelectionMenu('rewrite', event)
+                      }}
                     >
-                      {action.label}
+                      <svg viewBox='0 0 24 24' aria-hidden='true'>
+                        <path
+                          d='M12 3.25a.75.75 0 0 1 .72.55l1.06 3.62 3.63 1.06a.75.75 0 0 1 0 1.44l-3.63 1.06-1.06 3.63a.75.75 0 0 1-1.44 0l-1.06-3.63-3.63-1.06a.75.75 0 0 1 0-1.44l3.63-1.06 1.06-3.62a.75.75 0 0 1 .72-.55Zm6.5 11.5a.75.75 0 0 1 .72.55l.42 1.43 1.43.42a.75.75 0 0 1 0 1.44l-1.43.42-.42 1.43a.75.75 0 0 1-1.44 0l-.42-1.43-1.43-.42a.75.75 0 0 1 0-1.44l1.43-.42.42-1.43a.75.75 0 0 1 .72-.55Z'
+                        ></path>
+                      </svg>
+                      <span>{uiM('markdown_rewrite')}</span>
                     </button>
-                  {/each}
-                </div>
-              {/if}
-            </div>
-          {/if}
+                  {/if}
 
-          <article
-            bind:this={previewHost}
-            class={readerDocumentClass}
-            contenteditable={editable}
-            role='document'
-            onmouseup={handlePreviewMouseUp}
-            oninput={handlePreviewInput}
-            onblur={handlePreviewBlur}
+                  {#if richBlockFormattingEnabled}
+                    {#if onrewrite}
+                      <span class='hai-ai-doc-selection-divider'></span>
+                    {/if}
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-trigger',
+                        activeSelectionMenu === 'block'
+                          ? 'hai-ai-doc-selection-trigger--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_format_heading')}
+                      onclick={event => toggleSelectionMenu('block', event)}
+                    >
+                      <span class='hai-ai-doc-selection-trigger-label'>
+                        {activeBlockFormatOption.shortLabel}
+                      </span>
+                      <svg
+                        viewBox='0 0 24 24'
+                        aria-hidden='true'
+                        class='hai-ai-doc-selection-trigger-chevron'
+                      >
+                        <path
+                          d='M6.97 8.47a.75.75 0 0 1 1.06 0L12 12.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06Z'
+                        ></path>
+                      </svg>
+                    </button>
+                  {:else if legacyBlockFormattingEnabled}
+                    {#if onrewrite}
+                      <span class='hai-ai-doc-selection-divider'></span>
+                    {/if}
+                    <button
+                      type='button'
+                      class='hai-ai-doc-selection-btn'
+                      title={uiM('markdown_format_heading')}
+                      onclick={() => applyBlockFormat('heading')}
+                    >
+                      <svg viewBox='0 0 24 24' aria-hidden='true'>
+                        <path
+                          d='M5 5.25a.75.75 0 0 1 .75.75V11h6.5V6a.75.75 0 0 1 1.5 0v12a.75.75 0 0 1-1.5 0v-5.5h-6.5V18a.75.75 0 0 1-1.5 0V6A.75.75 0 0 1 5 5.25Zm11.25 2.5a.75.75 0 0 1 0 1.5h3a.75.75 0 0 1 0 1.5H18.5v8.5a.75.75 0 0 1-1.5 0v-8.5h-.75a.75.75 0 0 1 0-1.5h3Z'
+                        ></path>
+                      </svg>
+                    </button>
+                    <button
+                      type='button'
+                      class='hai-ai-doc-selection-btn'
+                      title={uiM('markdown_format_bullet')}
+                      onclick={() => applyBlockFormat('bullet')}
+                    >
+                      <svg viewBox='0 0 24 24' aria-hidden='true'>
+                        <path
+                          d='M6.25 7.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm14 0a.75.75 0 0 1-.75.75H8.75a.75.75 0 0 1 0-1.5H19.5a.75.75 0 0 1 .75.75Zm-14 5.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm14 0a.75.75 0 0 1-.75.75H8.75a.75.75 0 0 1 0-1.5H19.5a.75.75 0 0 1 .75.75Zm-14 5.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm14 0a.75.75 0 0 1-.75.75H8.75a.75.75 0 0 1 0-1.5H19.5a.75.75 0 0 1 .75.75Z'
+                        ></path>
+                      </svg>
+                    </button>
+                  {/if}
+
+                  {#if onapplyalignment}
+                    {#if anyBlockFormattingEnabled || onrewrite}
+                      <span class='hai-ai-doc-selection-divider'></span>
+                    {/if}
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-trigger',
+                        activeSelectionMenu === 'align'
+                          ? 'hai-ai-doc-selection-trigger--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_align')}
+                      onclick={event => toggleSelectionMenu('align', event)}
+                    >
+                      <svg viewBox='0 0 24 24' aria-hidden='true'>
+                        {#if selectionFormatState.alignment === 'center'}
+                          <path d='M5 6.25a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 6.25Zm2.75 4.75a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm-2 4.75a.75.75 0 0 1 .75-.75h11a.75.75 0 0 1 0 1.5h-11a.75.75 0 0 1-.75-.75Z'></path>
+                        {:else if selectionFormatState.alignment === 'right'}
+                          <path d='M5.75 5.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H5.75Zm4 4.75a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Zm-4 4.75a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H5.75Z'></path>
+                        {:else if selectionFormatState.alignment === 'justify'}
+                          <path d='M5 6.25a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 6.25Zm0 4.75a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 11Zm0 4.75a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.75Z'></path>
+                        {:else}
+                          <path d='M5 6.25a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 6.25Zm0 4.75a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 5 11Zm0 4.75a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.75Z'></path>
+                        {/if}
+                      </svg>
+                      <svg
+                        viewBox='0 0 24 24'
+                        aria-hidden='true'
+                        class='hai-ai-doc-selection-trigger-chevron'
+                      >
+                        <path
+                          d='M6.97 8.47a.75.75 0 0 1 1.06 0L12 12.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06Z'
+                        ></path>
+                      </svg>
+                    </button>
+                  {/if}
+
+                  {#if onapplyinlineformat || onapplylink || onapplycolor}
+                    {#if anyBlockFormattingEnabled || onapplyalignment || onrewrite}
+                      <span class='hai-ai-doc-selection-divider'></span>
+                    {/if}
+                  {/if}
+
+                  {#if onapplyinlineformat}
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-btn',
+                        selectionFormatState.bold
+                          ? 'hai-ai-doc-selection-btn--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_format_bold')}
+                      onclick={() => applyInlineFormat('bold')}
+                    >
+                      <strong>B</strong>
+                    </button>
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-btn',
+                        selectionFormatState.strike
+                          ? 'hai-ai-doc-selection-btn--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_format_strike')}
+                      onclick={() => applyInlineFormat('strike')}
+                    >
+                      S
+                    </button>
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-btn',
+                        selectionFormatState.italic
+                          ? 'hai-ai-doc-selection-btn--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_format_italic')}
+                      onclick={() => applyInlineFormat('italic')}
+                    >
+                      <em>I</em>
+                    </button>
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-btn',
+                        selectionFormatState.underline
+                          ? 'hai-ai-doc-selection-btn--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_format_underline')}
+                      onclick={() => applyInlineFormat('underline')}
+                    >
+                      U
+                    </button>
+                  {/if}
+
+                  {#if onapplylink || onapplyinlineformat}
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-btn',
+                        selectionFormatState.linkHref
+                          ? 'hai-ai-doc-selection-btn--active'
+                          : '',
+                        activeSelectionMenu === 'link'
+                          ? 'hai-ai-doc-selection-btn--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_format_link')}
+                      onclick={event =>
+                        onapplylink
+                          ? 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>
+                    </button>
+                  {/if}
+
+                  {#if onapplyinlineformat}
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-btn',
+                        selectionFormatState.code
+                          ? 'hai-ai-doc-selection-btn--active'
+                          : '',
+                      )}
+                      title={uiM('markdown_format_code')}
+                      onclick={() => applyInlineFormat('code')}
+                    >
+                      &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}
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-trigger',
+                        activeSelectionMenu === 'color'
+                          ? 'hai-ai-doc-selection-trigger--active'
+                          : '',
+                      )}
+                      style={`--hai-ai-doc-current-color:${selectionFormatState.textColor ?? '#0f172a'};`}
+                      title={uiM('markdown_text_color')}
+                      onclick={event => toggleSelectionMenu('color', event)}
+                    >
+                      <span class='hai-ai-doc-selection-highlight-icon'>A</span>
+                      <svg
+                        viewBox='0 0 24 24'
+                        aria-hidden='true'
+                        class='hai-ai-doc-selection-trigger-chevron'
+                      >
+                        <path
+                          d='M6.97 8.47a.75.75 0 0 1 1.06 0L12 12.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06Z'
+                        ></path>
+                      </svg>
+                    </button>
+                  {/if}
+
+                  {#if oncopyselection || onannotation}
+                    {#if onapplyinlineformat || onapplylink || onapplycolor}
+                      <span class='hai-ai-doc-selection-divider'></span>
+                    {/if}
+                  {/if}
+
+                  {#if oncopyselection}
+                    <button
+                      type='button'
+                      class='hai-ai-doc-selection-btn hai-ai-doc-selection-btn-wide'
+                      title={uiM('markdown_copy_selection')}
+                      onclick={copySelection}
+                    >
+                      <svg viewBox='0 0 24 24' aria-hidden='true'>
+                        <path
+                          d='M8.75 4.25A2.75 2.75 0 0 0 6 7v8.25A2.75 2.75 0 0 0 8.75 18h7.5A2.75 2.75 0 0 0 19 15.25V7a2.75 2.75 0 0 0-2.75-2.75h-7.5Zm-4 3A2.75 2.75 0 0 1 7.5 4.5a.75.75 0 0 0 0-1.5A4.25 4.25 0 0 0 3.25 7.25v8.5A4.25 4.25 0 0 0 7.5 20a.75.75 0 0 0 0-1.5 2.75 2.75 0 0 1-2.75-2.75v-8.5Z'
+                        ></path>
+                      </svg>
+                      <span>{uiM('markdown_copy_selection')}</span>
+                    </button>
+                  {/if}
+
+                  {#if onannotation}
+                    <button
+                      type='button'
+                      class='hai-ai-doc-selection-btn hai-ai-doc-selection-btn-wide'
+                      title={uiM('markdown_annotation')}
+                      onclick={annotateSelection}
+                    >
+                      <svg viewBox='0 0 24 24' aria-hidden='true'>
+                        <path
+                          d='M6.75 4.25A2.75 2.75 0 0 0 4 7v7.75A2.75 2.75 0 0 0 6.75 17.5h1.72l2.3 2.01a1.75 1.75 0 0 0 2.3 0l2.3-2.01h1.88A2.75 2.75 0 0 0 20 14.75V7a2.75 2.75 0 0 0-2.75-2.75H6.75Zm1.5 4a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75Zm0 3.5A.75.75 0 0 1 9 11h4a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75Z'
+                        ></path>
+                      </svg>
+                    </button>
+                  {/if}
+                </div>
+
+                {#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()}
+                  >
+                    {#each resolvedRewriteActions as action}
+                      <button
+                        type='button'
+                        class='hai-ai-doc-rewrite-menu-btn'
+                        disabled={rewritePending}
+                        onclick={() => applyRewrite(action.id)}
+                      >
+                        {action.label}
+                      </button>
+                    {/each}
+                  </div>
+                {:else if activeSelectionMenu === 'block' && richBlockFormattingEnabled}
+                  <div
+                    class='hai-ai-doc-selection-panel'
+                    data-menu-alignment={selectionMenuAlignment}
+                    role='menu'
+                    tabindex='-1'
+                    style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
+                    onmousedown={event => event.preventDefault()}
+                  >
+                    {#each BLOCK_FORMAT_OPTIONS as option}
+                      <button
+                        type='button'
+                        class={cn(
+                          'hai-ai-doc-selection-menu-btn',
+                          selectionFormatState.blockFormat === option.value
+                            ? 'hai-ai-doc-selection-menu-btn--active'
+                            : '',
+                        )}
+                        onclick={() => applyBlockStyle(option.value)}
+                      >
+                        <span class='hai-ai-doc-selection-menu-label'>
+                          <span class='hai-ai-doc-selection-menu-short'>
+                            {option.shortLabel}
+                          </span>
+                          <span>{uiM(option.labelKey)}</span>
+                        </span>
+                        {#if selectionFormatState.blockFormat === option.value}
+                          <span class='hai-ai-doc-selection-menu-check'>✓</span>
+                        {/if}
+                      </button>
+                    {/each}
+                  </div>
+                {:else if activeSelectionMenu === 'align' && onapplyalignment}
+                  <div
+                    class='hai-ai-doc-selection-panel'
+                    data-menu-alignment={selectionMenuAlignment}
+                    role='menu'
+                    tabindex='-1'
+                    style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
+                    onmousedown={event => event.preventDefault()}
+                  >
+                    {#each ALIGN_OPTIONS as option}
+                      <button
+                        type='button'
+                        class={cn(
+                          'hai-ai-doc-selection-menu-btn',
+                          selectionFormatState.alignment === option.value
+                            ? 'hai-ai-doc-selection-menu-btn--active'
+                            : '',
+                        )}
+                        onclick={() => applyAlignment(option.value)}
+                      >
+                        <span>{uiM(option.labelKey)}</span>
+                        {#if selectionFormatState.alignment === option.value}
+                          <span class='hai-ai-doc-selection-menu-check'>✓</span>
+                        {/if}
+                      </button>
+                    {/each}
+                  </div>
+                {:else if activeSelectionMenu === 'link' && onapplylink}
+                  <div
+                    class='hai-ai-doc-selection-panel hai-ai-doc-selection-panel--link'
+                    data-menu-alignment={selectionMenuAlignment}
+                    role='dialog'
+                    aria-label={uiM('markdown_link_dialog_label')}
+                    tabindex='-1'
+                    style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
+                    onmousedown={event => event.preventDefault()}
+                  >
+                    <input
+                      class='hai-ai-doc-selection-input'
+                      bind:value={linkDraft}
+                      aria-label={uiM('markdown_link_input_label')}
+                      placeholder={uiM('markdown_link_placeholder')}
+                      onkeydown={(event) => {
+                        if (event.key === 'Enter') {
+                          event.preventDefault()
+                          applyLink()
+                        }
+                      }}
+                    />
+                    <div class='hai-ai-doc-selection-panel-actions'>
+                      <button
+                        type='button'
+                        class='hai-ai-doc-selection-panel-btn hai-ai-doc-selection-panel-btn--primary'
+                        onclick={applyLink}
+                      >
+                        {uiM('markdown_link_apply')}
+                      </button>
+                      <button
+                        type='button'
+                        class='hai-ai-doc-selection-panel-btn'
+                        disabled={!selectionFormatState.linkHref}
+                        onclick={removeLink}
+                      >
+                        {uiM('markdown_link_remove')}
+                      </button>
+                    </div>
+                  </div>
+                {:else if activeSelectionMenu === 'color' && onapplycolor}
+                  <div
+                    class='hai-ai-doc-selection-panel hai-ai-doc-selection-panel--color'
+                    data-menu-alignment={selectionMenuAlignment}
+                    role='dialog'
+                    aria-label={uiM('markdown_color_dialog_label')}
+                    tabindex='-1'
+                    style={`--hai-ai-doc-selection-menu-left:${selectionMenuLeft}px;`}
+                    onmousedown={event => event.preventDefault()}
+                  >
+                    <div class='hai-ai-doc-color-group'>
+                      <div class='hai-ai-doc-color-group-title'>
+                        {uiM('markdown_text_color')}
+                      </div>
+                      <div class='hai-ai-doc-color-grid'>
+                        {#each TEXT_COLOR_PRESETS as color}
+                          <button
+                            type='button'
+                            class={cn(
+                              'hai-ai-doc-color-swatch',
+                              selectionFormatState.textColor === color
+                                ? 'hai-ai-doc-color-swatch--active'
+                                : '',
+                            )}
+                            title={color}
+                            onclick={() =>
+                              applyColor({ target: 'text', value: color })}
+                          >
+                            <span style={`background:${color};`}></span>
+                          </button>
+                        {/each}
+                      </div>
+                    </div>
+                    <div class='hai-ai-doc-color-group'>
+                      <div class='hai-ai-doc-color-group-title'>
+                        {uiM('markdown_background_color')}
+                      </div>
+                      <div class='hai-ai-doc-color-grid'>
+                        {#each BACKGROUND_COLOR_PRESETS as color}
+                          <button
+                            type='button'
+                            class={cn(
+                              'hai-ai-doc-color-swatch',
+                              selectionFormatState.backgroundColor === color
+                                ? 'hai-ai-doc-color-swatch--active'
+                                : '',
+                            )}
+                            title={color}
+                            onclick={() =>
+                              applyColor({
+                                target: 'background',
+                                value: color,
+                              })}
+                          >
+                            <span style={`background:${color};`}></span>
+                          </button>
+                        {/each}
+                      </div>
+                    </div>
+                    <button
+                      type='button'
+                      class='hai-ai-doc-selection-panel-btn'
+                      onclick={() => {
+                        applyColor({ target: 'text', value: null })
+                        applyColor({ target: 'background', value: null })
+                      }}
+                    >
+                      {uiM('markdown_reset_default')}
+                    </button>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          {/if}
+
+          <article
+            bind:this={previewHost}
+            class={readerDocumentClass}
+            contenteditable={editable}
+            role='document'
+            onmouseup={handlePreviewMouseUp}
+            oninput={handlePreviewInput}
+            onblur={handlePreviewBlur}
           >
             <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 渲染 -->
             {@html html}
@@ -1265,8 +2215,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;
@@ -1280,8 +2234,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%;
   }
@@ -1394,9 +2350,9 @@ ${safeCode}
   }
 
   .hai-ai-doc-toolbar-icon:not(:disabled):hover,
-  :global(.hai-ai-doc-toolbar-icon:hover),
+  :global(.hai-ai-doc-toolbar-icon:not(:disabled):hover),
   .hai-ai-doc-toolbar-pill:not(:disabled):hover,
-  :global(.hai-ai-doc-toolbar-pill:hover),
+  :global(.hai-ai-doc-toolbar-pill:not(:disabled):hover),
   .hai-ai-doc-toolbar-action:hover,
   .hai-ai-doc-toolbar-close:not(:disabled):hover,
   .hai-ai-doc-version-toggle:hover,
@@ -1407,9 +2363,9 @@ ${safeCode}
   }
 
   .hai-ai-doc-toolbar-icon:not(:disabled):hover,
-  :global(.hai-ai-doc-toolbar-icon:hover),
+  :global(.hai-ai-doc-toolbar-icon:not(:disabled):hover),
   .hai-ai-doc-toolbar-pill:not(:disabled):hover,
-  :global(.hai-ai-doc-toolbar-pill:hover),
+  :global(.hai-ai-doc-toolbar-pill:not(:disabled):hover),
   .hai-ai-doc-toolbar-close:not(:disabled):hover {
     transform: translateY(-1px);
     box-shadow: 0 12px 28px -22px oklch(var(--bc) / 0.36);
@@ -1420,11 +2376,25 @@ ${safeCode}
   .hai-ai-doc-toolbar-pill:disabled,
   :global(.hai-ai-doc-toolbar-pill:disabled),
   .hai-ai-doc-toolbar-close:disabled {
-    opacity: 0.42;
+    opacity: 0.72;
+    color: oklch(var(--bc) / 0.36);
+    border-color: oklch(var(--bc) / 0.12);
+    background: oklch(var(--b2) / 0.58);
     cursor: not-allowed;
     box-shadow: none;
   }
 
+  .hai-ai-doc-toolbar-icon:disabled:hover,
+  :global(.hai-ai-doc-toolbar-icon:disabled:hover),
+  .hai-ai-doc-toolbar-pill:disabled:hover,
+  :global(.hai-ai-doc-toolbar-pill:disabled:hover),
+  .hai-ai-doc-toolbar-close:disabled:hover {
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+    filter: grayscale(0.18);
+  }
+
   .hai-ai-doc-toolbar-action,
   .hai-ai-doc-version-toggle {
     border: 1px solid oklch(var(--bc) / 0.08);
@@ -1461,18 +2431,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;
@@ -1571,62 +2546,92 @@ ${safeCode}
   }
 
   .hai-ai-doc-reader {
+    width: 100%;
+    flex: 1 1 auto;
     min-width: 0;
     min-height: 0;
     position: relative;
-    z-index: 1;
+    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 {
     position: absolute;
-    z-index: 30;
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-    width: min(max-content, calc(100% - 2rem));
+    z-index: 60;
+    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);
     pointer-events: none;
   }
 
-  .hai-ai-doc-selection-layer[data-placement='top'] {
-    flex-direction: column-reverse;
-  }
-
   .hai-ai-doc-selection-layer[data-alignment='left'] {
-    transform: none;
+    transform: translateX(0);
+    justify-items: start;
   }
 
   .hai-ai-doc-selection-layer[data-alignment='right'] {
     transform: translateX(-100%);
+    justify-items: end;
+  }
+
+  .hai-ai-doc-selection-layer[data-alignment='center'] {
+    justify-items: center;
+  }
+
+  .hai-ai-doc-selection-chrome {
+    position: relative;
+    display: inline-grid;
+    width: fit-content;
+    max-width: min(100%, calc(100vw - 2rem));
   }
 
   .hai-ai-doc-selection-toolbar {
     display: flex;
     align-items: center;
     gap: 0.25rem;
-    flex-wrap: wrap;
-    max-width: min(calc(100vw - 2rem), 34rem);
+    flex-wrap: nowrap;
+    width: fit-content;
+    max-width: calc(100% - 0.75rem);
+    white-space: nowrap;
     padding: 0.38rem;
     border-radius: 1.2rem;
-    background: #fff;
-    border: 1px solid color-mix(in srgb, oklch(var(--bc)) 9%, white 91%);
+    background-color: rgb(255 255 255 / 0.96);
+    background: color-mix(in srgb, oklch(var(--b1, 1 0 0)) 94%, white 6%);
+    border: 1px solid rgb(148 163 184 / 0.34);
+    border-color: color-mix(in srgb, oklch(var(--bc, 0.22 0 0)) 16%, white 84%);
     box-shadow:
       0 30px 60px -34px rgb(15 23 42 / 0.28),
       0 14px 26px -18px rgb(15 23 42 / 0.16),
       0 0 0 1px rgb(255 255 255 / 0.94) inset;
     pointer-events: auto;
     isolation: isolate;
+    position: relative;
+    z-index: 2;
   }
 
   .hai-ai-doc-selection-chip,
-  .hai-ai-doc-selection-btn {
+  .hai-ai-doc-selection-btn,
+  .hai-ai-doc-selection-trigger {
     min-height: 2.25rem;
     border-radius: 0.9rem;
     transition:
@@ -1640,6 +2645,7 @@ ${safeCode}
     display: inline-flex;
     align-items: center;
     gap: 0.48rem;
+    flex-shrink: 0;
     padding: 0 0.88rem;
     border: 1px solid oklch(var(--p) / 0.16);
     background: oklch(var(--p) / 0.1);
@@ -1654,9 +2660,16 @@ ${safeCode}
     fill: currentColor;
   }
 
+  .hai-ai-doc-selection-chip--active {
+    border-color: oklch(var(--p) / 0.28);
+    background: oklch(var(--p) / 0.16);
+    color: oklch(var(--bc));
+  }
+
   .hai-ai-doc-selection-chip:not(:disabled):hover,
   .hai-ai-doc-selection-btn:hover,
-  .hai-ai-doc-rewrite-menu button:hover {
+  .hai-ai-doc-selection-trigger:hover,
+  .hai-ai-doc-rewrite-menu-btn:hover {
     transform: translateY(-1px);
   }
 
@@ -1668,6 +2681,7 @@ ${safeCode}
   .hai-ai-doc-selection-btn {
     width: 2.25rem;
     min-width: 2.25rem;
+    flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -1679,21 +2693,61 @@ ${safeCode}
   }
 
   .hai-ai-doc-selection-btn-wide {
-    min-width: 2.25rem;
+    width: auto;
+    min-width: 4.6rem;
+    gap: 0.42rem;
+    padding: 0 0.74rem;
+  }
+
+  .hai-ai-doc-selection-trigger {
+    min-width: 3.4rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.34rem;
+    padding: 0 0.66rem;
+    border: 1px solid transparent;
+    background: transparent;
+    color: oklch(var(--bc) / 0.78);
+    cursor: pointer;
   }
 
-  .hai-ai-doc-selection-btn:hover {
+  .hai-ai-doc-selection-btn:hover,
+  .hai-ai-doc-selection-trigger:hover {
     border-color: oklch(var(--bc) / 0.1);
     background: oklch(var(--bc) / 0.045);
     color: oklch(var(--bc));
   }
 
+  .hai-ai-doc-selection-btn--active,
+  .hai-ai-doc-selection-trigger--active {
+    border-color: oklch(var(--p) / 0.22);
+    background: oklch(var(--p) / 0.12);
+    color: oklch(var(--bc));
+  }
+
   .hai-ai-doc-selection-btn svg {
     width: 1rem;
     height: 1rem;
     fill: currentColor;
   }
 
+  .hai-ai-doc-selection-trigger svg {
+    width: 1rem;
+    height: 1rem;
+    fill: currentColor;
+  }
+
+  .hai-ai-doc-selection-trigger-label {
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .hai-ai-doc-selection-trigger-chevron {
+    width: 0.8rem !important;
+    height: 0.8rem !important;
+    opacity: 0.72;
+  }
+
   .hai-ai-doc-selection-divider {
     width: 1px;
     height: 1.45rem;
@@ -1705,6 +2759,7 @@ ${safeCode}
   .hai-ai-doc-selection-highlight-icon {
     position: relative;
     font-weight: 700;
+    color: var(--hai-ai-doc-current-color, currentColor);
   }
 
   .hai-ai-doc-selection-highlight-icon::after {
@@ -1715,41 +2770,213 @@ ${safeCode}
     bottom: -0.02rem;
     height: 0.36rem;
     border-radius: 9999px;
-    background: oklch(var(--wa, 0.9 0.14 90) / 0.45);
+    background: color-mix(
+      in srgb,
+      var(--hai-ai-doc-current-color, oklch(var(--wa, 0.9 0.14 90))) 22%,
+      white 78%
+    );
     z-index: -1;
   }
 
+  .hai-ai-doc-selection-panel,
   .hai-ai-doc-rewrite-menu {
-    width: 13.75rem;
+    position: absolute;
+    left: var(--hai-ai-doc-selection-menu-left, 0px);
+    top: calc(100% + 0.45rem);
     display: grid;
-    gap: 0.375rem;
-    padding: 0.5rem;
-    border-radius: 1.125rem;
-    background: #fff;
-    border: 1px solid color-mix(in srgb, oklch(var(--bc)) 9%, white 91%);
+    gap: 0.34rem;
+    width: min(18rem, calc(100vw - 2rem));
+    max-width: calc(100vw - 2rem);
+    padding: 0.42rem;
+    border-radius: 1rem;
+    background-color: rgb(255 255 255 / 0.96);
+    background: color-mix(in srgb, oklch(var(--b1, 1 0 0)) 94%, white 6%);
+    border: 1px solid rgb(148 163 184 / 0.3);
+    border-color: color-mix(in srgb, oklch(var(--bc, 0.22 0 0)) 14%, white 86%);
     box-shadow:
-      0 30px 60px -34px rgb(15 23 42 / 0.28),
-      0 14px 26px -18px rgb(15 23 42 / 0.16),
-      0 0 0 1px rgb(255 255 255 / 0.94) inset;
+      0 24px 40px -28px rgb(15 23 42 / 0.25),
+      0 10px 20px -16px rgb(15 23 42 / 0.14);
     pointer-events: auto;
     isolation: isolate;
+    z-index: 3;
   }
 
-  .hai-ai-doc-rewrite-menu button {
-    text-align: left;
-    border: 1px solid transparent;
-    border-radius: 0.875rem;
-    padding: 0.7rem 0.8rem;
-    color: oklch(var(--bc) / 0.9);
-    background: transparent;
+  .hai-ai-doc-rewrite-menu {
+    width: fit-content;
+    max-width: min(22rem, calc(100vw - 2rem));
+    grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr));
+  }
+
+  .hai-ai-doc-selection-layer[data-placement='bottom'] .hai-ai-doc-selection-panel,
+  .hai-ai-doc-selection-layer[data-placement='bottom'] .hai-ai-doc-rewrite-menu {
+    top: auto;
+    bottom: calc(100% + 0.45rem);
+  }
+
+  .hai-ai-doc-selection-panel[data-menu-alignment='left'],
+  .hai-ai-doc-rewrite-menu[data-menu-alignment='left'] {
+    transform: translateX(0);
+  }
+
+  .hai-ai-doc-selection-panel[data-menu-alignment='center'],
+  .hai-ai-doc-rewrite-menu[data-menu-alignment='center'] {
+    transform: translateX(-50%);
+  }
+
+  .hai-ai-doc-selection-panel[data-menu-alignment='right'],
+  .hai-ai-doc-rewrite-menu[data-menu-alignment='right'] {
+    transform: translateX(-100%);
+  }
+
+  .hai-ai-doc-selection-panel--link,
+  .hai-ai-doc-selection-panel--color {
+    width: min(16rem, calc(100vw - 2rem));
+  }
+
+  .hai-ai-doc-selection-menu-btn,
+  .hai-ai-doc-selection-panel-btn,
+  .hai-ai-doc-rewrite-menu-btn {
+    min-height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.6rem;
+    width: 100%;
+    padding: 0 0.72rem;
+    border-radius: 0.8rem;
+    border: 1px solid oklch(var(--bc) / 0.14);
+    background: color-mix(in srgb, oklch(var(--b1)) 92%, white 8%);
+    color: oklch(var(--bc) / 0.86);
+    font-size: 0.82rem;
+    line-height: 1;
     cursor: pointer;
+    transition:
+      background-color 0.14s ease,
+      border-color 0.14s ease,
+      color 0.14s ease,
+      transform 0.14s ease;
+  }
+
+  .hai-ai-doc-selection-menu-btn--active,
+  .hai-ai-doc-selection-panel-btn--primary {
+    border-color: oklch(var(--p) / 0.28);
+    background: oklch(var(--p) / 0.12);
+    color: oklch(var(--bc));
+  }
+
+  .hai-ai-doc-selection-menu-btn:hover,
+  .hai-ai-doc-selection-panel-btn:hover,
+  .hai-ai-doc-rewrite-menu-btn:hover:not(:disabled) {
+    border-color: oklch(var(--bc) / 0.22);
+    background: color-mix(in srgb, oklch(var(--b2)) 68%, white 32%);
+    color: oklch(var(--bc));
+    transform: translateY(-1px);
+  }
+
+  .hai-ai-doc-selection-menu-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.62rem;
+  }
+
+  .hai-ai-doc-selection-menu-short {
+    min-width: 2rem;
+    color: oklch(var(--p) / 0.92);
+    font-weight: 700;
+  }
+
+  .hai-ai-doc-selection-menu-check {
+    color: oklch(var(--p) / 0.88);
+    font-weight: 700;
+  }
+
+  .hai-ai-doc-selection-input {
+    width: 100%;
+    min-height: 2.25rem;
+    padding: 0 0.78rem;
+    border-radius: 0.85rem;
+    border: 1px solid oklch(var(--bc) / 0.16);
+    background: color-mix(in srgb, oklch(var(--b1)) 94%, white 6%);
+    color: oklch(var(--bc));
+    font-size: 0.84rem;
+    outline: none;
   }
 
-  .hai-ai-doc-rewrite-menu button:disabled {
+  .hai-ai-doc-selection-input:focus {
+    border-color: oklch(var(--p) / 0.34);
+    box-shadow: 0 0 0 3px oklch(var(--p) / 0.12);
+  }
+
+  .hai-ai-doc-selection-panel-actions {
+    display: flex;
+    gap: 0.4rem;
+  }
+
+  .hai-ai-doc-selection-panel-actions .hai-ai-doc-selection-panel-btn {
+    flex: 1 1 0;
+  }
+
+  .hai-ai-doc-selection-panel-btn:disabled,
+  .hai-ai-doc-rewrite-menu-btn:disabled {
     opacity: 0.55;
     cursor: default;
   }
 
+  .hai-ai-doc-color-group {
+    display: grid;
+    gap: 0.42rem;
+  }
+
+  .hai-ai-doc-color-group-title {
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: oklch(var(--bc) / 0.68);
+  }
+
+  .hai-ai-doc-color-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0.42rem;
+  }
+
+  .hai-ai-doc-color-swatch {
+    width: 100%;
+    aspect-ratio: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.18rem;
+    border-radius: 0.7rem;
+    border: 1px solid oklch(var(--bc) / 0.12);
+    background: color-mix(in srgb, oklch(var(--b1)) 92%, white 8%);
+    cursor: pointer;
+    transition:
+      transform 0.14s ease,
+      border-color 0.14s ease,
+      box-shadow 0.14s ease;
+  }
+
+  .hai-ai-doc-color-swatch:hover {
+    transform: translateY(-1px);
+    border-color: oklch(var(--bc) / 0.2);
+  }
+
+  .hai-ai-doc-color-swatch--active {
+    border-color: oklch(var(--p) / 0.34);
+    box-shadow: 0 0 0 3px oklch(var(--p) / 0.12);
+  }
+
+  .hai-ai-doc-color-swatch span {
+    width: 100%;
+    height: 100%;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(15 23 42 / 0.08);
+  }
+
+  .hai-ai-doc-rewrite-menu-btn {
+    justify-content: center;
+  }
+
   .hai-markdown {
     line-height: 1.9;
     color: inherit;
@@ -1758,12 +2985,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);
@@ -1829,6 +3072,10 @@ ${safeCode}
     margin-bottom: 1em;
   }
 
+  .hai-markdown :global(.hai-md-align-block) {
+    width: 100%;
+  }
+
   .hai-markdown :global(a) {
     color: oklch(var(--p));
     text-decoration: none;
@@ -1852,6 +3099,23 @@ ${safeCode}
     color: oklch(var(--bc) / 0.55);
   }
 
+  .hai-markdown :global(u) {
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.14em;
+  }
+
+  .hai-markdown :global(mark) {
+    padding: 0 0.12em;
+    border-radius: 0.25rem;
+    background: oklch(var(--wa, 0.9 0.14 90) / 0.34);
+    color: inherit;
+  }
+
+  .hai-markdown :global(.hai-md-inline-style) {
+    border-radius: 0.2rem;
+    padding: 0 0.04em;
+  }
+
   .hai-markdown :global(:not(pre) > code) {
     padding: 0.2em 0.4em;
     margin: 0 0.1em;
@@ -1881,6 +3145,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);
   }
@@ -1889,6 +3154,7 @@ ${safeCode}
     min-width: 0;
     display: flex;
     align-items: center;
+    gap: 0.55rem;
   }
 
   .hai-markdown :global(.hai-md-code-actions) {
@@ -1900,12 +3166,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;
   }
@@ -1945,8 +3253,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) {
@@ -1954,6 +3275,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;
@@ -2071,14 +3462,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;
@@ -2086,12 +3492,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;
@@ -2105,7 +3542,7 @@ ${safeCode}
     color: oklch(var(--er));
   }
 
-  .hai-md-preview-frame {
+  :global(.hai-md-preview-frame) {
     display: block;
     width: 100%;
     min-height: 280px;
@@ -2115,10 +3552,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,
@@ -2130,27 +3576,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;
@@ -2161,16 +3590,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;
@@ -2203,7 +3647,7 @@ ${safeCode}
 
     .hai-ai-doc-selection-toolbar {
       max-width: calc(100vw - 2rem);
-      overflow: auto;
+      overflow: hidden;
     }
   }
 </style>