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

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,6 +50,129 @@
     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>`
@@ -123,8 +249,16 @@
     oncopydocument,
     // 块级格式动作回调。
     onapplyblockformat,
+    // 细粒度块样式动作回调。
+    onapplyblockstyle,
     // 行内格式动作回调。
     onapplyinlineformat,
+    // 对齐动作回调。
+    onapplyalignment,
+    // 链接设置动作回调。
+    onapplylink,
+    // 颜色设置动作回调。
+    onapplycolor,
     // 选区复制回调。
     oncopyselection,
     // 选区注释回调。
@@ -141,10 +275,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,12 +286,33 @@
     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(
@@ -182,16 +337,35 @@
   const resolvedRewriteActions = $derived(
     resolveRewriteActions(rewriteActions, onrewrite),
   )
+  // 新版工具条支持 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(
@@ -259,6 +433,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,
+      )
     }
   })
 
@@ -605,7 +806,6 @@ ${safeCode}
       const markdownHtml = parseMarkdown(result.content, {
         enableHighlight,
         showCopyButton: false,
-        showRunButton: false,
         breaks,
       })
 
@@ -629,10 +829,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 +1196,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 +1212,7 @@ ${safeCode}
     syncActiveHeadingFromScroll()
     syncPinnedTitleVisibility()
     if (selectionToolbarVisible) {
-      closeSelectionToolbar()
+      queueSelectionRefresh(true)
     }
     ondocumentscroll?.(event)
   }
@@ -724,7 +1236,7 @@ ${safeCode}
    * 选区工具条依赖真实 DOM 选区范围，因此只在 selection 落在当前正文容器内时显示。
    * 一旦内容刷新或滚动位置变化，就主动关闭，避免把旧选区动作误用到新内容上。
    */
-  function handleSelectionChange(): void {
+  function handleSelectionChange(remeasured = false): void {
     if (
       !selectionToolsEnabled
       || typeof window === 'undefined'
@@ -734,79 +1246,70 @@ ${safeCode}
       return
     }
 
-    const selection = window.getSelection()
-    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
-      closeSelectionToolbar()
-      return
-    }
+    clearPendingSelectionToolbarClose()
 
-    const anchorNode = selection.anchorNode
-    const focusNode = selection.focusNode
-    if (
-      !anchorNode
-      || !focusNode
-      || !previewHost.contains(anchorNode)
-      || !previewHost.contains(focusNode)
-    ) {
-      closeSelectionToolbar()
+    const previewSelection = readPreviewSelectionState()
+    if (!previewSelection) {
+      scheduleSelectionToolbarClose()
       return
     }
 
-    const text = selection.toString().trim()
-    if (!text) {
-      closeSelectionToolbar()
-      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 +1317,8 @@ ${safeCode}
       return
     }
 
-    rewriteMenuOpen = false
+    activeSelectionMenu = null
+    activeSelectionMenuTrigger = null
     await onrewrite({
       actionId,
       selectedText,
@@ -825,26 +1329,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 +1394,7 @@ ${safeCode}
   }
 
   function handlePreviewBlur(): void {
-    closeSelectionToolbar()
+    queueSelectionRefresh(true)
     onpreviewblur?.()
   }
 </script>
@@ -893,6 +1434,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 +1451,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 +1494,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')}
@@ -1046,14 +1589,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,178 +1599,503 @@ ${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}
+                <div
+                  bind:this={selectionToolbarEl}
+                  class='hai-ai-doc-selection-toolbar'
+                  role='toolbar'
+                  tabindex='-1'
+                  onmousedown={event => event.preventDefault()}
+                >
                   {#if onrewrite}
-                    <span class='hai-ai-doc-selection-divider'></span>
+                    <button
+                      type='button'
+                      class={cn(
+                        'hai-ai-doc-selection-chip',
+                        activeSelectionMenu === 'rewrite'
+                          ? 'hai-ai-doc-selection-chip--active'
+                          : '',
+                      )}
+                      disabled={rewritePending}
+                      onclick={event => toggleSelectionMenu('rewrite', event)}
+                    >
+                      <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}
-                  <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 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}
-                  <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>
+                    <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}
 
-                {#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 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 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 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 rewriteMenuOpen}
-                <div
-                  class='hai-ai-doc-rewrite-menu'
-                  role='menu'
-                  tabindex='-1'
-                  onmousedown={event => event.preventDefault()}
-                >
-                  {#each resolvedRewriteActions as action}
+                  {#if onapplycolor}
                     <button
                       type='button'
-                      disabled={rewritePending}
-                      onclick={() => applyRewrite(action.id)}
+                      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)}
                     >
-                      {action.label}
+                      <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>
-                  {/each}
+                  {/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}
+
+                {#if activeSelectionMenu === 'rewrite' && resolvedRewriteActions.length > 0}
+                  <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}
 
@@ -1394,9 +2255,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 +2268,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 +2281,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);
@@ -1574,7 +2449,8 @@ ${safeCode}
     min-width: 0;
     min-height: 0;
     position: relative;
-    z-index: 1;
+    z-index: 2;
+    isolation: isolate;
   }
 
   .hai-ai-doc-scroll {
@@ -1586,47 +2462,66 @@ ${safeCode}
 
   .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 +2535,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 +2550,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 +2571,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 +2583,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 +2649,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 +2660,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-rewrite-menu button:disabled {
+  .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-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;
@@ -1829,6 +2946,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 +2973,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;
@@ -2203,7 +3341,7 @@ ${safeCode}
 
     .hai-ai-doc-selection-toolbar {
       max-width: calc(100vw - 2rem);
-      overflow: auto;
+      overflow: hidden;
     }
   }
 </style>