@orbit-work/ui 0.1.2-preview.0 → 0.1.2

package/src/components/composite/Markdown/index.tsx

@@ -1,702 +0,0 @@
-"use client"
-
-import { Fragment, useEffect, useMemo, useState } from "react"
-import { splitLocalPathSegments } from "../../../utils/localPathInline"
-import {
-  type LocalLinkTargetOptions,
-  cleanFileLabel,
-  collectMarkdownFileRefs,
-  localMarkdownLinkTarget,
-  safeHref,
-} from "../../../utils/markdownFileRefs"
-import {
-  Attachment,
-  type AttachmentItem,
-  AttachmentList,
-  type AttachmentMenuOption,
-} from "../../domain/chat/Attachment"
-import { Button } from "../../primitives"
-import { CodeBlock } from "../CodeBlock"
-
-// Markdown is a small, dependency-free renderer for the common subset of
-// markdown that skill introductions use: headings, paragraphs, bold/italic,
-// inline code, fenced code blocks, and ordered/unordered lists. It renders via
-// React elements (no dangerouslySetInnerHTML), so all text stays escaped.
-
-type Block =
-  | { kind: "heading"; level: number; text: string }
-  | { kind: "para"; text: string }
-  | { kind: "code"; text: string; language?: string }
-  | { kind: "list"; ordered: boolean; items: string[] }
-  | { kind: "table"; headers: string[]; rows: string[][]; aligns: TableAlign[] }
-  | { kind: "quote"; paragraphs: string[] }
-  | { kind: "imageGallery"; images: MarkdownImageItem[] }
-
-// Blockquote marker: "> " or a bare ">" on an otherwise empty line.
-const QUOTE_LINE_RE = /^\s{0,3}>\s?/
-
-type TableAlign = "left" | "center" | "right"
-
-// Shell-ish fence languages that get a "run in terminal" affordance when the
-// host passes onRunCommand.
-const RUNNABLE_SHELL_LANGUAGES = new Set(["bash", "sh", "zsh", "shell", "shellscript"])
-
-function isRunnableShellLanguage(language: string | undefined): boolean {
-  return Boolean(language && RUNNABLE_SHELL_LANGUAGES.has(language.toLowerCase()))
-}
-// Resolved local media a Markdown image/link target maps to. Exported as the
-// single source of truth so every surface that threads image preview through
-// Markdown (chat bubble, message actions, preview modal) shares one shape.
-export type LocalMarkdownPreview = { kind: "image" | "video"; name: string; url: string }
-// Resolver a host passes down to turn a local/relative image target (e.g.
-// images/poster.png) into previewable media, or null when it cannot.
-export type LocalImagePreviewResolver = (path: string) => Promise<LocalMarkdownPreview | null>
-type MarkdownImageItem = { alt: string; target: string }
-type InlineRenderOptions = {
-  onLocalPathClick?: (path: string) => void
-  // Opens an inline local path through the same handler as the file reference
-  // cards below the message, so both surfaces resolve previews identically.
-  onLocalFileOpen?: (item: AttachmentItem) => void
-  onLocalImagePreview?: LocalImagePreviewResolver
-  localPathBaseDir?: string
-}
-type LocalPathOpener = (path: string, label?: string) => void
-
-// Inline local paths and the file reference cards must open the same way. When
-// a host provides the card handler, route inline clicks through it with the
-// same AttachmentItem shape collectLocalFileRefs builds.
-function resolveLocalPathOpener(options: InlineRenderOptions): LocalPathOpener | undefined {
-  const { onLocalFileOpen, onLocalPathClick } = options
-  if (onLocalFileOpen) return (path, label) => onLocalFileOpen({ name: cleanFileLabel(label ?? "", path), path })
-  if (onLocalPathClick) return (path) => onLocalPathClick(path)
-  return undefined
-}
-
-// Relative link targets only resolve when the host knows the session's project
-// directory — the main process needs that base dir to turn out/report.md into a
-// real path (and to reject anything escaping the project).
-function localLinkOptions(options: InlineRenderOptions): LocalLinkTargetOptions {
-  return { allowRelative: Boolean(options.localPathBaseDir) }
-}
-
-function parseBlocks(src: string): Block[] {
-  const lines = src.replace(/\r\n/g, "\n").split("\n")
-  const blocks: Block[] = []
-  let i = 0
-  while (i < lines.length) {
-    const line = lines[i] ?? ""
-    // Fenced code block.
-    if (line.trimStart().startsWith("```")) {
-      const language = line.trimStart().slice(3).trim().split(/\s+/)[0] || undefined
-      const body: string[] = []
-      i += 1
-      while (i < lines.length && !(lines[i] ?? "").trimStart().startsWith("```")) {
-        body.push(lines[i] ?? "")
-        i += 1
-      }
-      i += 1 // skip closing fence
-      blocks.push({ kind: "code", text: body.join("\n"), language })
-      continue
-    }
-    // Blank line.
-    if (line.trim() === "") {
-      i += 1
-      continue
-    }
-    // Heading.
-    const heading = line.match(/^(#{1,6})\s+(.*)$/)
-    if (heading) {
-      blocks.push({ kind: "heading", level: heading[1]?.length ?? 1, text: heading[2] ?? "" })
-      i += 1
-      continue
-    }
-    // Blockquote — consume contiguous "> " lines; a blank quoted line splits
-    // paragraphs inside the quote.
-    if (QUOTE_LINE_RE.test(line)) {
-      const quoted: string[] = []
-      while (i < lines.length && QUOTE_LINE_RE.test(lines[i] ?? "")) {
-        quoted.push((lines[i] ?? "").replace(QUOTE_LINE_RE, ""))
-        i += 1
-      }
-      const paragraphs: string[] = []
-      let buffer: string[] = []
-      for (const quotedLine of quoted) {
-        if (quotedLine.trim() === "") {
-          if (buffer.length > 0) paragraphs.push(buffer.join(" "))
-          buffer = []
-        } else {
-          buffer.push(quotedLine)
-        }
-      }
-      if (buffer.length > 0) paragraphs.push(buffer.join(" "))
-      blocks.push({ kind: "quote", paragraphs })
-      continue
-    }
-    // GitHub-style table. Requires a header row and a separator row.
-    if (isTableHeader(lines, i)) {
-      const headers = splitTableRow(lines[i] ?? "")
-      const aligns = parseTableAligns(splitTableRow(lines[i + 1] ?? ""), headers.length)
-      const rows: string[][] = []
-      i += 2
-      while (i < lines.length && isTableRow(lines[i] ?? "")) {
-        rows.push(normalizeTableRow(splitTableRow(lines[i] ?? ""), headers.length))
-        i += 1
-      }
-      blocks.push({ kind: "table", headers, rows, aligns })
-      continue
-    }
-    // List (ordered or unordered) — consume contiguous item lines.
-    if (/^\s*([-*]|\d+\.)\s+/.test(line)) {
-      const ordered = /^\s*\d+\.\s+/.test(line)
-      const items: string[] = []
-      while (i < lines.length && /^\s*([-*]|\d+\.)\s+/.test(lines[i] ?? "")) {
-        items.push((lines[i] ?? "").replace(/^\s*([-*]|\d+\.)\s+/, ""))
-        i += 1
-      }
-      blocks.push({ kind: "list", ordered, items })
-      continue
-    }
-    const imageGallery = collectImageGallery(lines, i)
-    if (imageGallery) {
-      blocks.push({ kind: "imageGallery", images: imageGallery.images })
-      i = imageGallery.nextIndex
-      continue
-    }
-    // Paragraph — consume contiguous non-blank, non-structural lines.
-    const para: string[] = []
-    while (
-      i < lines.length &&
-      (lines[i] ?? "").trim() !== "" &&
-      !(lines[i] ?? "").trimStart().startsWith("```") &&
-      !/^#{1,6}\s+/.test(lines[i] ?? "") &&
-      !isTableHeader(lines, i) &&
-      !QUOTE_LINE_RE.test(lines[i] ?? "") &&
-      !/^\s*([-*]|\d+\.)\s+/.test(lines[i] ?? "")
-    ) {
-      para.push(lines[i] ?? "")
-      i += 1
-    }
-    blocks.push({ kind: "para", text: para.join(" ") })
-  }
-  return blocks
-}
-
-function collectImageGallery(
-  lines: string[],
-  startIndex: number,
-): { images: MarkdownImageItem[]; nextIndex: number } | null {
-  const images: MarkdownImageItem[] = []
-  let i = startIndex
-  while (i < lines.length) {
-    const line = lines[i] ?? ""
-    if (line.trim() === "") {
-      const nextNonBlankIndex = findNextNonBlankLine(lines, i + 1)
-      if (images.length > 0 && nextNonBlankIndex >= 0 && parseImageOnlyLine(lines[nextNonBlankIndex] ?? "")) {
-        i += 1
-        continue
-      }
-      break
-    }
-    const image = parseImageOnlyLine(line)
-    if (!image) break
-    images.push(image)
-    i += 1
-  }
-  return images.length > 0 ? { images, nextIndex: i } : null
-}
-
-function findNextNonBlankLine(lines: string[], startIndex: number): number {
-  for (let i = startIndex; i < lines.length; i += 1) {
-    if ((lines[i] ?? "").trim() !== "") return i
-  }
-  return -1
-}
-
-function parseImageOnlyLine(line: string): MarkdownImageItem | null {
-  const match = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/)
-  if (!match) return null
-  return { alt: match[1] ?? "", target: match[2] ?? "" }
-}
-
-function isTableHeader(lines: string[], index: number): boolean {
-  const current = lines[index] ?? ""
-  const next = lines[index + 1] ?? ""
-  if (!isTableRow(current) || !isTableRow(next)) return false
-  const headers = splitTableRow(current)
-  const separators = splitTableRow(next)
-  return (
-    headers.length > 0 &&
-    separators.length >= headers.length &&
-    separators.slice(0, headers.length).every((cell) => /^:?-{3,}:?$/.test(cell.trim()))
-  )
-}
-
-function isTableRow(line: string): boolean {
-  return line.includes("|") && line.trim() !== ""
-}
-
-function splitTableRow(line: string): string[] {
-  const trimmed = line.trim().replace(/^\|/, "").replace(/\|$/, "")
-  return trimmed.split("|").map((cell) => cell.trim())
-}
-
-function normalizeTableRow(row: string[], length: number): string[] {
-  return Array.from({ length }, (_, index) => row[index] ?? "")
-}
-
-function parseTableAligns(cells: string[], length: number): TableAlign[] {
-  return Array.from({ length }, (_, index) => {
-    const cell = cells[index]?.trim() ?? ""
-    if (cell.startsWith(":") && cell.endsWith(":")) return "center"
-    if (cell.endsWith(":")) return "right"
-    return "left"
-  })
-}
-
-// renderInline handles **bold**, *italic*/_italic_, `code`, ![alt](url),
-// [text](url), and bare http(s) URLs.
-function renderInline(text: string, options: InlineRenderOptions = {}): React.ReactNode[] {
-  const nodes: React.ReactNode[] = []
-  const openLocalPath = resolveLocalPathOpener(options)
-  const re =
-    /(\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*|_([^_]+)_|!\[([^\]]*)\]\(([^)]+)\)|\[([^\]]+)\]\(([^)]+)\)|(https?:\/\/[^\s<>()]+))/g
-  let last = 0
-  let key = 0
-  let m: RegExpExecArray | null
-  while ((m = re.exec(text)) !== null) {
-    if (m.index > last) nodes.push(...renderText(text.slice(last, m.index), key++, openLocalPath))
-    if (m[2] !== undefined) nodes.push(<strong key={key++}>{renderText(m[2], key++, openLocalPath)}</strong>)
-    else if (m[3] !== undefined) nodes.push(<code key={key++}>{m[3]}</code>)
-    else if (m[4] !== undefined) nodes.push(<em key={key++}>{renderText(m[4], key++, openLocalPath)}</em>)
-    else if (m[5] !== undefined) nodes.push(<em key={key++}>{renderText(m[5], key++, openLocalPath)}</em>)
-    else if (m[6] !== undefined && m[7] !== undefined) {
-      nodes.push(
-        <MarkdownImage
-          key={key++}
-          alt={m[6]}
-          target={m[7]}
-          openLocalPath={openLocalPath}
-          onLocalImagePreview={options.onLocalImagePreview}
-          localPathBaseDir={options.localPathBaseDir}
-        />,
-      )
-    } else if (m[8] !== undefined && m[9] !== undefined) {
-      const localPath = localMarkdownLinkTarget(m[9], localLinkOptions(options))
-      const href = localPath ? null : safeHref(m[9])
-      const label = m[8]
-      // Untrusted skill content: render as a link only when the protocol is
-      // safe; otherwise downgrade to plain text so javascript:/data: etc. can't
-      // be clicked in the Electron renderer.
-      nodes.push(
-        localPath && openLocalPath ? (
-          <Button
-            variant="unstyled"
-            key={key++}
-            type="button"
-            className="md__local-path"
-            title={localPath}
-            onClick={() => openLocalPath(localPath, label)}
-          >
-            {renderLinkLabel(label, key++)}
-          </Button>
-        ) : href ? (
-          <a key={key++} href={href} target="_blank" rel="noreferrer noopener">
-            {renderLinkLabel(label, key++)}
-          </a>
-        ) : (
-          <Fragment key={key++}>{renderLinkLabel(label, key++)}</Fragment>
-        ),
-      )
-    } else if (m[10] !== undefined) {
-      const { href, trailing } = splitTrailingUrlPunctuation(m[10])
-      const safe = safeHref(href)
-      nodes.push(
-        safe ? (
-          <a key={key++} href={safe} target="_blank" rel="noreferrer noopener">
-            {href}
-          </a>
-        ) : (
-          <Fragment key={key++}>{href}</Fragment>
-        ),
-      )
-      if (trailing) nodes.push(...renderText(trailing, key++, openLocalPath))
-    }
-    last = m.index + m[0].length
-  }
-  if (last < text.length) nodes.push(...renderText(text.slice(last), key++, openLocalPath))
-  return nodes
-}
-
-// Link labels carry their own emphasis markup (agents commonly emit
-// [**`file.txt`**](/abs/path)). Parse the safe inline subset here — no nested
-// links or images — so the markers do not leak into the visible label.
-function renderLinkLabel(label: string, keySeed: number): React.ReactNode[] {
-  const nodes: React.ReactNode[] = []
-  const re = /(\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*|_([^_]+)_)/g
-  let last = 0
-  let key = keySeed
-  let m: RegExpExecArray | null
-  while ((m = re.exec(label)) !== null) {
-    if (m.index > last) nodes.push(...renderEmojiText(label.slice(last, m.index), key++))
-    if (m[2] !== undefined) nodes.push(<strong key={`lb-${key++}`}>{renderLinkLabel(m[2], key++)}</strong>)
-    else if (m[3] !== undefined) nodes.push(<code key={`lb-${key++}`}>{m[3]}</code>)
-    else if (m[4] !== undefined) nodes.push(<em key={`lb-${key++}`}>{renderLinkLabel(m[4], key++)}</em>)
-    else if (m[5] !== undefined) nodes.push(<em key={`lb-${key++}`}>{renderLinkLabel(m[5], key++)}</em>)
-    last = m.index + m[0].length
-  }
-  if (last < label.length) nodes.push(...renderEmojiText(label.slice(last), key++))
-  return nodes
-}
-
-function MarkdownImage({
-  alt,
-  target,
-  openLocalPath,
-  onLocalImagePreview,
-  localPathBaseDir,
-  variant = "inline",
-}: {
-  alt: string
-  target: string
-  openLocalPath?: LocalPathOpener
-  onLocalImagePreview?: LocalImagePreviewResolver
-  localPathBaseDir?: string
-  variant?: "inline" | "gallery"
-}): React.ReactElement {
-  const cleanTarget = target.trim()
-  const [preview, setPreview] = useState<LocalMarkdownPreview | null>(null)
-  const remoteHref = safeRemoteImageHref(cleanTarget)
-  const shouldResolveLocal = !remoteHref && isLikelyLocalImageTarget(cleanTarget) && Boolean(onLocalImagePreview)
-  const imageClassName = variant === "gallery" ? "md__image md__image--gallery" : "md__image"
-  const buttonClassName = variant === "gallery" ? "md__image-button md__image-button--gallery" : "md__image-button"
-
-  useEffect(() => {
-    if (!shouldResolveLocal || !onLocalImagePreview) {
-      setPreview(null)
-      return
-    }
-    let canceled = false
-    setPreview(null)
-    onLocalImagePreview(cleanTarget)
-      .then((result) => {
-        if (!canceled) setPreview(result?.kind === "image" ? result : null)
-      })
-      .catch(() => {
-        if (!canceled) setPreview(null)
-      })
-    return () => {
-      canceled = true
-    }
-  }, [cleanTarget, onLocalImagePreview, shouldResolveLocal])
-
-  if (remoteHref) {
-    return <img className={imageClassName} src={remoteHref} alt={alt} />
-  }
-
-  if (preview) {
-    return (
-      <Button
-        variant="unstyled"
-        type="button"
-        className={buttonClassName}
-        title={alt || preview.name}
-        data-md-image-target={cleanTarget}
-        data-md-image-base-dir={localPathBaseDir || undefined}
-        data-md-image-name={alt || preview.name}
-        onClick={() => openLocalPath?.(cleanTarget, alt)}
-      >
-        <img className={imageClassName} src={preview.url} alt={alt || preview.name} />
-      </Button>
-    )
-  }
-
-  const label = alt || cleanTarget
-  if (openLocalPath && isLikelyLocalImageTarget(cleanTarget)) {
-    return (
-      <Button
-        variant="unstyled"
-        type="button"
-        className="md__image-fallback"
-        title={cleanTarget}
-        onClick={() => openLocalPath(cleanTarget, alt)}
-      >
-        {label}
-      </Button>
-    )
-  }
-  return <span className="md__image-fallback">{label}</span>
-}
-
-function ImageGallery({
-  images,
-  options,
-}: {
-  images: MarkdownImageItem[]
-  options: InlineRenderOptions
-}): React.ReactElement {
-  const openLocalPath = resolveLocalPathOpener(options)
-  return (
-    <div
-      className={`md__image-gallery md__image-gallery--${imageGallerySizeClass(images.length)}`}
-      data-image-count={images.length}
-    >
-      {images.map((image, index) => (
-        <MarkdownImage
-          key={`${image.target}-${index}`}
-          alt={image.alt}
-          target={image.target}
-          openLocalPath={openLocalPath}
-          onLocalImagePreview={options.onLocalImagePreview}
-          localPathBaseDir={options.localPathBaseDir}
-          variant="gallery"
-        />
-      ))}
-    </div>
-  )
-}
-
-function imageGallerySizeClass(count: number): string {
-  if (count <= 1) return "count-1"
-  if (count === 2) return "count-2"
-  if (count === 3) return "count-3"
-  return "count-many"
-}
-
-function renderText(text: string, keySeed: number, openLocalPath?: LocalPathOpener): React.ReactNode[] {
-  if (openLocalPath) return renderLocalPaths(text, keySeed, openLocalPath)
-  return renderEmojiText(text, keySeed)
-}
-
-function renderLocalPaths(text: string, keySeed: number, openLocalPath: LocalPathOpener): React.ReactNode[] {
-  const nodes: React.ReactNode[] = []
-  let key = keySeed
-  for (const segment of splitLocalPathSegments(text)) {
-    if (segment.kind === "text") {
-      nodes.push(...renderEmojiText(segment.text, key++))
-      continue
-    }
-    nodes.push(
-      <Button
-        variant="unstyled"
-        key={`path-${key++}`}
-        type="button"
-        className="md__local-path"
-        title={segment.path}
-        onClick={() => openLocalPath(segment.path)}
-      >
-        {segment.path}
-      </Button>,
-    )
-    if (segment.trailing) nodes.push(...renderEmojiText(segment.trailing, key++))
-  }
-  return nodes
-}
-
-function collectLocalFileRefs(blocks: Block[], linkOptions: LocalLinkTargetOptions): AttachmentItem[] {
-  const seen = new Set<string>()
-  const refs: AttachmentItem[] = []
-  const collect = (text: string) => collectMarkdownFileRefs(text, seen, refs, linkOptions)
-  for (const block of blocks) {
-    if (block.kind === "code" || block.kind === "imageGallery") continue
-    if (block.kind === "heading" || block.kind === "para") collect(block.text)
-    if (block.kind === "list") block.items.forEach(collect)
-    if (block.kind === "quote") block.paragraphs.forEach(collect)
-    if (block.kind === "table") {
-      block.headers.forEach(collect)
-      block.rows.forEach((row) => row.forEach(collect))
-    }
-  }
-  return refs
-}
-
-function renderEmojiText(text: string, keySeed: number): React.ReactNode[] {
-  const nodes: React.ReactNode[] = []
-  const re = /:([a-zA-Z0-9_+-]+):/g
-  let last = 0
-  let key = keySeed
-  let m: RegExpExecArray | null
-  while ((m = re.exec(text)) !== null) {
-    if (m.index > last) nodes.push(<Fragment key={`t-${key++}`}>{text.slice(last, m.index)}</Fragment>)
-    const emoji = EMOJI_SHORTCODES[m[1] ?? ""]
-    nodes.push(<Fragment key={`t-${key++}`}>{emoji ?? m[0]}</Fragment>)
-    last = m.index + m[0].length
-  }
-  if (last < text.length) nodes.push(<Fragment key={`t-${key++}`}>{text.slice(last)}</Fragment>)
-  return nodes
-}
-
-const EMOJI_SHORTCODES: Record<string, string> = {
-  smile: "😄",
-  smiley: "😃",
-  grinning: "😀",
-  joy: "😂",
-  blush: "😊",
-  wink: "😉",
-  thinking: "🤔",
-  rocket: "🚀",
-  tada: "🎉",
-  sparkles: "✨",
-  fire: "🔥",
-  warning: "⚠️",
-  white_check_mark: "✅",
-  check: "✅",
-  x: "❌",
-  cross_mark: "❌",
-  memo: "📝",
-  bulb: "💡",
-  link: "🔗",
-  book: "📖",
-  calendar: "📅",
-  clock: "🕒",
-  robot: "🤖",
-  eyes: "👀",
-  point_right: "👉",
-  point_left: "👈",
-  thumbsup: "👍",
-  thumbsdown: "👎",
-}
-
-function splitTrailingUrlPunctuation(raw: string): { href: string; trailing: string } {
-  const match = raw.match(/^(.*?)([.,!?;:，。！？；：、]+)?$/)
-  return {
-    href: match?.[1] || raw,
-    trailing: match?.[2] || "",
-  }
-}
-
-function safeRemoteImageHref(raw: string): string | null {
-  const href = safeHref(raw)
-  if (!href) return null
-  return /^https?:\/\//i.test(href) ? href : null
-}
-
-function isLikelyLocalImageTarget(raw: string): boolean {
-  return /\.(png|jpe?g|gif|webp|bmp|svg|heic|heif|tiff?)(?:[?#].*)?$/i.test(raw.trim())
-}
-
-export type MarkdownProps = {
-  source: string
-  className?: string
-  onLocalPathClick?: (path: string) => void
-  onLocalFileCardOpen?: (item: AttachmentItem) => void
-  onRequestLocalFileOpenWithOptions?: (item: AttachmentItem) => Promise<AttachmentMenuOption[]> | AttachmentMenuOption[]
-  onLocalFileCardOpenWith?: (item: AttachmentItem, option: AttachmentMenuOption) => void
-  onLocalFileCardOpenWithMenu?: (item: AttachmentItem) => void
-  onLocalImagePreview?: LocalImagePreviewResolver
-  localPathBaseDir?: string
-  /** When set, shell code blocks show a run button that invokes this with the code. */
-  onRunCommand?: (code: string) => void
-}
-
-export function Markdown({
-  source,
-  className,
-  onLocalPathClick,
-  onLocalFileCardOpen,
-  onRequestLocalFileOpenWithOptions,
-  onLocalFileCardOpenWith,
-  onLocalFileCardOpenWithMenu,
-  onLocalImagePreview,
-  localPathBaseDir,
-  onRunCommand,
-}: MarkdownProps): React.ReactElement {
-  const blocks = useMemo(() => parseBlocks(source), [source])
-  // Inline local paths share onLocalFileCardOpen with the cards below so both
-  // resolve the same preview surface (browser sidebar, in-app viewer, or OS).
-  const inlineOptions = {
-    onLocalPathClick,
-    onLocalFileOpen: onLocalFileCardOpen,
-    onLocalImagePreview,
-    localPathBaseDir,
-  }
-  const localFileRefs = useMemo(
-    () => (onLocalPathClick ? collectLocalFileRefs(blocks, { allowRelative: Boolean(localPathBaseDir) }) : []),
-    [blocks, localPathBaseDir, onLocalPathClick],
-  )
-  return (
-    <div className={className ? `md ${className}` : "md"}>
-      {blocks.map((block, idx) => {
-        if (block.kind === "heading") {
-          const Tag = `h${Math.min(block.level, 6)}` as "h1"
-          return <Tag key={idx}>{renderInline(block.text, inlineOptions)}</Tag>
-        }
-        if (block.kind === "code") {
-          const runnable = onRunCommand && isRunnableShellLanguage(block.language)
-          return (
-            <CodeBlock
-              key={idx}
-              language={block.language || "text"}
-              onRun={runnable ? () => onRunCommand(block.text) : undefined}
-            >
-              {block.text}
-            </CodeBlock>
-          )
-        }
-        if (block.kind === "list") {
-          const items = block.items.map((it, j) => <li key={j}>{renderInline(it, inlineOptions)}</li>)
-          return block.ordered ? <ol key={idx}>{items}</ol> : <ul key={idx}>{items}</ul>
-        }
-        if (block.kind === "table") {
-          return (
-            <div key={idx} className="md__table-wrap">
-              <table>
-                <thead>
-                  <tr>
-                    {block.headers.map((cell, j) => (
-                      <th key={j} className={`al-${block.aligns[j] ?? "left"}`}>
-                        {renderInline(cell, inlineOptions)}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {block.rows.map((row, rowIndex) => (
-                    <tr key={rowIndex}>
-                      {row.map((cell, cellIndex) => (
-                        <td key={cellIndex} className={`al-${block.aligns[cellIndex] ?? "left"}`}>
-                          {renderInline(cell, inlineOptions)}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )
-        }
-        if (block.kind === "quote") {
-          return (
-            <blockquote key={idx}>
-              {block.paragraphs.map((text, j) => (
-                <p key={j}>{renderInline(text, inlineOptions)}</p>
-              ))}
-            </blockquote>
-          )
-        }
-        if (block.kind === "imageGallery")
-          return <ImageGallery key={idx} images={block.images} options={inlineOptions} />
-        return <p key={idx}>{renderInline(block.text, inlineOptions)}</p>
-      })}
-      {onLocalPathClick && localFileRefs.length > 0 && (
-        <AttachmentList layout="stack" className="md-file-cards" aria-label="本地文件引用">
-          {localFileRefs.map((item) => (
-            <Attachment
-              key={item.id ?? item.path}
-              variant="card"
-              name={item.name}
-              path={item.path}
-              // 卡本身就是打开入口，推断出的类型文案只会重复扩展名；业务传的 typeLabel 留着。
-              meta={item.typeLabel ?? ""}
-              onOpen={() => (onLocalFileCardOpen ?? ((ref: AttachmentItem) => onLocalPathClick(ref.path)))(item)}
-              onNativeActionsMenu={onLocalFileCardOpenWithMenu ? () => onLocalFileCardOpenWithMenu(item) : undefined}
-              onRequestActions={
-                onRequestLocalFileOpenWithOptions ? () => onRequestLocalFileOpenWithOptions(item) : undefined
-              }
-              onAction={onLocalFileCardOpenWith ? (option) => onLocalFileCardOpenWith(item, option) : undefined}
-            />
-          ))}
-        </AttachmentList>
-      )}
-    </div>
-  )
-}