@mdxui/terminal 2.0.0

package/src/renderers/markdown.ts

@@ -0,0 +1,950 @@
+/**
+ * Markdown Renderer
+ *
+ * Converts UINode trees to Markdown strings for AI agent consumption via MCP.
+ *
+ * The Markdown renderer outputs structured markdown that is:
+ * - Easily parseable by AI agents
+ * - Human-readable in raw form
+ * - Compatible with MCP (Model Context Protocol) text transport
+ *
+ * Markdown Tier (tier 2 of 6):
+ * Designed for AI agents that consume structured text via MCP protocols.
+ * More structured than TEXT tier, less visual than ASCII/UNICODE/ANSI.
+ */
+
+import type { UINode } from '../core/types'
+
+/**
+ * Markdown render options
+ */
+export interface MarkdownRenderOptions {
+  /** Maximum line width for wrapping (optional) */
+  width?: number
+  /** Whether to include navigation footer hints */
+  includeNavFooter?: boolean
+  /** Header level offset (e.g., 1 to start at H2 instead of H1) */
+  headerOffset?: number
+  /** Whether to escape special markdown characters in content */
+  escapeContent?: boolean
+}
+
+interface RenderState {
+  indent: number
+}
+
+/**
+ * Escape pipe characters in table cell content
+ */
+function escapePipes(content: string): string {
+  return content.replace(/\|/g, '\\|')
+}
+
+/**
+ * Escape brackets in link text
+ */
+function escapeBrackets(text: string): string {
+  return text.replace(/\[/g, '\\[').replace(/\]/g, '\\]')
+}
+
+/**
+ * Clamp header level to valid range (1-6)
+ */
+function clampHeaderLevel(level: number): number {
+  if (level < 1) return 1
+  if (level > 6) return 6
+  return level
+}
+
+/**
+ * Render text node with formatting
+ */
+function renderText(node: UINode): string {
+  const { content, bold, italic, code, strikethrough } = node.props as {
+    content?: string | null
+    bold?: boolean
+    italic?: boolean
+    code?: boolean
+    strikethrough?: boolean
+  }
+
+  if (content == null) return ''
+
+  let text = String(content)
+
+  // Apply formatting in order
+  if (code) {
+    text = `\`${text}\``
+  } else {
+    if (bold && italic) {
+      text = `***${text}***`
+    } else if (bold) {
+      text = `**${text}**`
+    } else if (italic) {
+      text = `*${text}*`
+    }
+
+    if (strikethrough) {
+      text = `~~${text}~~`
+    }
+  }
+
+  return text
+}
+
+/**
+ * Render header with # prefix
+ */
+function renderHeader(node: UINode): string {
+  const { level, content } = node.props as { level?: number; content?: string }
+  const headerLevel = clampHeaderLevel(level ?? 2)
+  const prefix = '#'.repeat(headerLevel)
+  return `${prefix} ${content ?? ''}\n`
+}
+
+/**
+ * Render list (unordered, ordered, or task list)
+ */
+function renderList(node: UINode, state: RenderState): string {
+  const { items, numbered, taskList, children: propsChildren } = node.props as {
+    items?: (string | { text: string; checked?: boolean })[]
+    numbered?: boolean
+    taskList?: boolean
+    children?: UINode[]
+  }
+
+  // Use children from props or from node.children
+  const nestedChildren = node.children || propsChildren
+  const indent = ' '.repeat(state.indent)
+  const lines: string[] = []
+
+  // Handle items prop
+  if (items && items.length > 0) {
+    items.forEach((item, index) => {
+      if (taskList && typeof item === 'object' && 'checked' in item) {
+        const checkbox = item.checked ? '[x]' : '[ ]'
+        lines.push(`${indent}- ${checkbox} ${item.text}`)
+      } else if (numbered) {
+        lines.push(`${indent}${index + 1}. ${typeof item === 'string' ? item : item.text}`)
+      } else {
+        lines.push(`${indent}- ${typeof item === 'string' ? item : item.text}`)
+      }
+    })
+  }
+
+  // Handle list-item children (TDD test format)
+  if (nestedChildren && Array.isArray(nestedChildren) && nestedChildren.length > 0) {
+    nestedChildren.forEach((child: UINode, index: number) => {
+      if (child.type === 'list-item') {
+        const content = child.props?.content as string ?? ''
+        const prefix = numbered ? `${index + 1}. ` : '- '
+        lines.push(`${indent}${prefix}${content}`)
+
+        // Handle nested children of list-item
+        if (child.children && Array.isArray(child.children) && child.children.length > 0) {
+          child.children.forEach((nestedChild: UINode) => {
+            const nestedOutput = renderNode(nestedChild, { indent: state.indent + 2 })
+            if (nestedOutput) {
+              lines.push(nestedOutput.trimEnd())
+            }
+          })
+        }
+      } else {
+        const childOutput = renderNode(child, { indent: state.indent + 2 })
+        if (childOutput) {
+          lines.push(childOutput.trimEnd())
+        }
+      }
+    })
+  }
+
+  if (lines.length === 0) return ''
+  return lines.join('\n') + '\n'
+}
+
+/**
+ * Render table with pipe-separated columns
+ */
+function renderTable(node: UINode): string {
+  const { columns } = node.props as {
+    columns?: { key: string; header: string; align?: 'left' | 'center' | 'right' }[]
+    data?: Record<string, unknown>[]
+  }
+  // Support data from node.data (TDD tests) or props.data (legacy)
+  const data = (node.data as Record<string, unknown>[] | undefined) ??
+               (node.props?.data as Record<string, unknown>[] | undefined)
+
+  if (!columns || columns.length === 0) return ''
+
+  const lines: string[] = []
+
+  // Header row
+  const headerCells = columns.map((col) => ` ${col.header} `)
+  lines.push(`|${headerCells.join('|')}|`)
+
+  // Separator row with alignment
+  const separatorCells = columns.map((col) => {
+    const base = '---'
+    if (col.align === 'center') return `:${base}:`
+    if (col.align === 'right') return `${base}:`
+    return `${base}` // left is default (no colon)
+  })
+  lines.push(`| ${separatorCells.join(' | ')} |`)
+
+  // Data rows
+  if (data && data.length > 0) {
+    for (const row of data) {
+      const cells = columns.map((col) => {
+        const value = row[col.key]
+        const cellContent = value != null ? String(value) : ''
+        return ` ${escapePipes(cellContent)} `
+      })
+      lines.push(`|${cells.join('|')}|`)
+    }
+  }
+
+  return lines.join('\n') + '\n'
+}
+
+/**
+ * Render code block with fences
+ */
+function renderCode(node: UINode): string {
+  const { code, language } = node.props as { code?: string; language?: string }
+
+  if (code == null) return ''
+
+  const lang = language ?? ''
+  return `\`\`\`${lang}\n${code}\n\`\`\`\n`
+}
+
+/**
+ * Render link
+ */
+function renderLink(node: UINode): string {
+  const { text, href } = node.props as { text?: string; href?: string }
+  return `[${escapeBrackets(text ?? '')}](${href ?? ''})`
+}
+
+/**
+ * Render button as link
+ */
+function renderButton(node: UINode): string {
+  const { label, action, hotkey } = node.props as {
+    label?: string
+    action?: string
+    hotkey?: string
+  }
+
+  const labelText = hotkey ? `${label} (${hotkey})` : (label ?? '')
+  return `[${labelText}](${action ?? ''})`
+}
+
+/**
+ * Render box/container
+ */
+function renderBox(node: UINode, state: RenderState): string {
+  const { title, border } = node.props as { title?: string; border?: string }
+  const lines: string[] = []
+
+  if (title) {
+    lines.push(`### ${title}\n`)
+  }
+
+  if (border) {
+    lines.push('---\n')
+  }
+
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    const childContent = node.children.map((child: UINode) => renderNode(child, state)).join('\n')
+    lines.push(childContent)
+  }
+
+  if (border) {
+    lines.push('\n---')
+  }
+
+  return lines.join('') + '\n'
+}
+
+/**
+ * Render panel
+ */
+function renderPanel(node: UINode, state: RenderState): string {
+  const { title, collapsible, collapsed } = node.props as {
+    title?: string
+    collapsible?: boolean
+    collapsed?: boolean
+  }
+
+  const lines: string[] = []
+
+  if (title) {
+    lines.push(`### ${title}\n`)
+  }
+
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    const childContent = node.children.map((child: UINode) => renderNode(child, state)).join('\n')
+    lines.push(childContent)
+  }
+
+  return lines.join('') + '\n'
+}
+
+/**
+ * Render card
+ */
+function renderCard(node: UINode, state: RenderState): string {
+  const { title, subtitle, badge, titleAction, pairs, actions } = node.props as {
+    title?: string
+    subtitle?: string
+    badge?: { content: string; variant?: string }
+    titleAction?: { label: string; action?: string }
+    pairs?: Array<{ key: string; value: unknown }>
+    actions?: Array<{ label: string; action?: string }>
+  }
+  const lines: string[] = []
+
+  // Title section
+  if (title) {
+    let titleLine = `### ${title}`
+    if (badge) {
+      titleLine += ` [${badge.content}]`
+    }
+    lines.push(titleLine)
+    if (titleAction) {
+      lines.push(`[${titleAction.label}](${titleAction.action ?? ''})`)
+    }
+    lines.push('')
+  }
+
+  if (subtitle) {
+    lines.push(`*${subtitle}*\n`)
+  }
+
+  // Key-value pairs
+  if (pairs && pairs.length > 0) {
+    for (const pair of pairs) {
+      const val = pair.value != null ? String(pair.value) : ''
+      lines.push(`**${pair.key}:** ${val}`)
+    }
+    lines.push('')
+  }
+
+  // Children content
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    const childContent = node.children.map((child: UINode) => renderNode(child, state)).join('\n')
+    lines.push(childContent)
+  }
+
+  // Actions
+  if (actions && actions.length > 0) {
+    for (const action of actions) {
+      lines.push(`[${action.label}](${action.action ?? ''})`)
+    }
+    lines.push('')
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render sidebar
+ */
+function renderSidebar(node: UINode): string {
+  const { nav, sections } = node.props as {
+    nav?: { label: string; href?: string; active?: boolean; children?: { label: string; href?: string }[] }[]
+    sections?: { title: string; items: { label: string; href?: string }[] }[]
+  }
+
+  const lines: string[] = []
+
+  if (sections) {
+    for (const section of sections) {
+      lines.push(`### ${section.title}\n`)
+      for (const item of section.items) {
+        lines.push(`- [${item.label}](${item.href ?? ''})`)
+      }
+      lines.push('')
+    }
+  }
+
+  if (nav) {
+    for (const item of nav) {
+      if (item.active) {
+        lines.push(`- **[${item.label}](${item.href ?? ''})**`)
+      } else {
+        lines.push(`- [${item.label}](${item.href ?? ''})`)
+      }
+
+      if (item.children) {
+        for (const child of item.children) {
+          lines.push(`  - [${child.label}](${child.href ?? ''})`)
+        }
+      }
+    }
+    lines.push('')
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render breadcrumb
+ */
+function renderBreadcrumb(node: UINode): string {
+  const { items, separator } = node.props as {
+    items?: { label: string; path?: string }[]
+    separator?: string
+  }
+
+  if (!items || items.length === 0) return ''
+
+  const sep = separator ?? ' > '
+  const parts = items.map((item, index) => {
+    const isLast = index === items.length - 1
+    if (isLast || !item.path) {
+      return item.label
+    }
+    return `[${item.label}](${item.path})`
+  })
+
+  return parts.join(sep) + '\n'
+}
+
+/**
+ * Render badge
+ */
+function renderBadge(node: UINode): string {
+  const { children, variant } = node.props as { children?: string; variant?: string }
+  return `[${children ?? ''}]`
+}
+
+/**
+ * Render dialog
+ */
+function renderDialog(node: UINode, state: RenderState): string {
+  const { title, open, actions } = node.props as {
+    title?: string
+    open?: boolean
+    actions?: { label: string; action: string }[]
+  }
+
+  // Don't render closed dialogs
+  if (open === false) return ''
+
+  const lines: string[] = []
+
+  if (title) {
+    lines.push(`### ${title}\n`)
+  }
+
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    const childContent = node.children.map((child: UINode) => renderNode(child, state)).join('\n')
+    lines.push(childContent)
+  }
+
+  if (actions && actions.length > 0) {
+    lines.push('')
+    for (const action of actions) {
+      lines.push(`[${action.label}](${action.action})`)
+    }
+  }
+
+  return lines.join('') + '\n'
+}
+
+/**
+ * Render spinner
+ */
+function renderSpinner(node: UINode): string {
+  const { label } = node.props as { label?: string }
+  return label ?? 'Loading...'
+}
+
+/**
+ * Render metrics (multiple metrics)
+ */
+function renderMetrics(node: UINode): string {
+  const { metrics } = node.props as {
+    metrics?: Array<{
+      label: string
+      value: unknown
+      format?: string
+      unit?: string
+      trend?: string
+    }>
+  }
+
+  if (!metrics || metrics.length === 0) return ''
+
+  const lines: string[] = []
+  for (const m of metrics) {
+    const val = m.value != null ? String(m.value) : ''
+    let formatted = val
+    if (m.format === 'percentage' && !val.includes('%')) {
+      formatted = `${val}%`
+    }
+    if (m.unit) {
+      formatted = `${formatted} ${m.unit}`
+    }
+    lines.push(`**${m.label}:** ${formatted}`)
+  }
+
+  return lines.join('\n') + '\n'
+}
+
+/**
+ * Render single metric
+ */
+function renderSingleMetric(node: UINode): string {
+  const { label, value, format, unit } = node.props as {
+    label?: string
+    value?: unknown
+    format?: string
+    unit?: string
+  }
+
+  if (!label) return ''
+
+  const val = value != null ? String(value) : ''
+  let formatted = val
+  if (format === 'percentage' && !val.includes('%')) {
+    formatted = `${val}%`
+  }
+  if (unit) {
+    formatted = `${formatted} ${unit}`
+  }
+
+  return `**${label}:** ${formatted}\n`
+}
+
+/**
+ * Render dashboard
+ */
+function renderDashboard(node: UINode, state: RenderState): string {
+  const { title, metrics } = node.props as {
+    title?: string
+    metrics?: { label: string; value: string | number; trend?: 'up' | 'down' }[]
+  }
+
+  const lines: string[] = []
+
+  if (title) {
+    lines.push(`# ${title}\n`)
+  }
+
+  if (metrics && metrics.length > 0) {
+    // Render metrics as a table
+    lines.push('| Metric | Value | Trend |')
+    lines.push('| :--- | :--- | :--- |')
+    for (const metric of metrics) {
+      const trend = metric.trend === 'up' ? 'Up' : metric.trend === 'down' ? 'Down' : ''
+      lines.push(`| ${metric.label} | ${metric.value} | ${trend} |`)
+    }
+    lines.push('')
+  }
+
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    const childContent = node.children.map((child: UINode) => renderNode(child, state)).join('\n')
+    lines.push(childContent)
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render settings
+ */
+function renderSettings(node: UINode, state: RenderState): string {
+  const { sections } = node.props as { sections?: string[] }
+
+  const lines: string[] = []
+
+  if (sections && sections.length > 0) {
+    for (const section of sections) {
+      lines.push(`### ${section.charAt(0).toUpperCase() + section.slice(1)}\n`)
+    }
+  }
+
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    const childContent = node.children.map((child: UINode) => renderNode(child, state)).join('\n')
+    lines.push(childContent)
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render input
+ */
+function renderInput(node: UINode): string {
+  const { label, value, placeholder, disabled } = node.props as {
+    label?: string
+    value?: string
+    placeholder?: string
+    disabled?: boolean
+  }
+
+  const displayValue = value ?? placeholder ?? ''
+  return `**${label ?? 'Input'}:** ${displayValue}`
+}
+
+/**
+ * Render select
+ */
+function renderSelect(node: UINode): string {
+  const { label, value, options } = node.props as {
+    label?: string
+    value?: string
+    options?: { label: string; value: string }[]
+  }
+
+  const lines: string[] = []
+
+  if (label) {
+    lines.push(`**${label}:**`)
+  }
+
+  if (options && options.length > 0) {
+    const selectedOption = options.find((opt) => opt.value === value)
+    if (selectedOption) {
+      lines.push(`Selected: ${selectedOption.label}`)
+    }
+    lines.push('Options:')
+    for (const opt of options) {
+      lines.push(`- ${opt.label}`)
+    }
+  }
+
+  return lines.join('\n') + '\n'
+}
+
+/**
+ * Render nav-footer
+ */
+function renderNavFooter(node: UINode): string {
+  const { actions } = node.props as {
+    actions?: { key: string; label: string }[]
+  }
+
+  if (!actions || actions.length === 0) return ''
+
+  const parts = actions.map((action) => `\`${action.key}\` ${action.label}`)
+  return parts.join(' | ') + '\n'
+}
+
+/**
+ * Render hero
+ */
+function renderHero(node: UINode): string {
+  const { title, subtitle, badge, callToAction, secondaryCallToAction, actions } = node.props as {
+    title?: string
+    subtitle?: string
+    badge?: string
+    callToAction?: string
+    secondaryCallToAction?: string
+    actions?: { primary?: string; secondary?: string }
+  }
+
+  const lines: string[] = []
+
+  if (badge) {
+    lines.push(`[${badge}]\n`)
+  }
+
+  if (title) {
+    lines.push(`# ${title}\n`)
+  }
+
+  if (subtitle) {
+    lines.push(`${subtitle}\n`)
+  }
+
+  if (callToAction) {
+    lines.push(`[${callToAction}](${actions?.primary ?? ''})`)
+  }
+
+  if (secondaryCallToAction) {
+    lines.push(`[${secondaryCallToAction}](${actions?.secondary ?? ''})`)
+  }
+
+  return lines.join('\n') + '\n'
+}
+
+/**
+ * Render features
+ */
+function renderFeatures(node: UINode): string {
+  const { title, features } = node.props as {
+    title?: string
+    features?: { title: string; description: string; icon?: string }[]
+  }
+
+  const lines: string[] = []
+
+  if (title) {
+    lines.push(`## ${title}\n`)
+  }
+
+  if (features && features.length > 0) {
+    for (const feature of features) {
+      lines.push(`### ${feature.title}`)
+      lines.push(feature.description)
+      lines.push('')
+    }
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render pricing
+ */
+function renderPricing(node: UINode): string {
+  const { tiers } = node.props as {
+    tiers?: {
+      name: string
+      price: string
+      features: string[]
+      highlighted?: boolean
+      callToAction?: string
+    }[]
+  }
+
+  if (!tiers || tiers.length === 0) return ''
+
+  const lines: string[] = []
+
+  for (const tier of tiers) {
+    lines.push(`### ${tier.name}`)
+    lines.push(`**${tier.price}**`)
+    lines.push('')
+    if (tier.features && tier.features.length > 0) {
+      for (const feature of tier.features) {
+        lines.push(`- ${feature}`)
+      }
+      lines.push('')
+    }
+    if (tier.callToAction) {
+      lines.push(`[${tier.callToAction}]()\n`)
+    }
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render FAQ
+ */
+function renderFAQ(node: UINode): string {
+  const { title, items } = node.props as {
+    title?: string
+    items?: { question: string; answer: string }[]
+  }
+
+  const lines: string[] = []
+
+  if (title) {
+    lines.push(`## ${title}\n`)
+  }
+
+  if (items && items.length > 0) {
+    for (const item of items) {
+      lines.push(`**${item.question}**`)
+      lines.push(item.answer)
+      lines.push('')
+    }
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render footer
+ */
+function renderFooter(node: UINode): string {
+  const { links, copyright, social } = node.props as {
+    links?: { title: string; links: { label: string; href: string }[] }[]
+    copyright?: string
+    social?: { platform: string; href: string }[]
+  }
+
+  const lines: string[] = []
+  lines.push('---\n')
+
+  if (links && links.length > 0) {
+    for (const section of links) {
+      lines.push(`### ${section.title}`)
+      for (const link of section.links) {
+        lines.push(`- [${link.label}](${link.href})`)
+      }
+      lines.push('')
+    }
+  }
+
+  if (social && social.length > 0) {
+    const socialLinks = social.map((s) => `[${s.platform}](${s.href})`).join(' | ')
+    lines.push(socialLinks)
+    lines.push('')
+  }
+
+  if (copyright) {
+    lines.push(`${copyright}\n`)
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render header (site header, not heading)
+ */
+function renderSiteHeader(node: UINode): string {
+  const { nav, callToAction, actions, breadcrumbs } = node.props as {
+    nav?: { label: string; href: string }[]
+    callToAction?: string
+    actions?: { primary?: string }
+    breadcrumbs?: { label: string; href?: string }[]
+  }
+
+  const lines: string[] = []
+
+  if (nav && nav.length > 0) {
+    const navLinks = nav.map((item) => `[${item.label}](${item.href})`).join(' | ')
+    lines.push(navLinks)
+  }
+
+  if (callToAction) {
+    lines.push(`[${callToAction}](${actions?.primary ?? ''})`)
+  }
+
+  if (breadcrumbs && breadcrumbs.length > 0) {
+    const crumbs = breadcrumbs.map((b, i) => {
+      if (b.href && i < breadcrumbs.length - 1) {
+        return `[${b.label}](${b.href})`
+      }
+      return b.label
+    }).join(' > ')
+    lines.push(crumbs)
+  }
+
+  return lines.join('\n') + '\n'
+}
+
+/**
+ * Main render function for a UINode
+ */
+function renderNode(node: UINode, state: RenderState = { indent: 0 }): string {
+  // Check for site header first (header with nav or breadcrumbs props)
+  if (node.type === 'header' && (node.props?.nav || node.props?.breadcrumbs || node.props?.callToAction)) {
+    return renderSiteHeader(node)
+  }
+
+  switch (node.type) {
+    case 'text':
+      return renderText(node)
+
+    case 'header':
+      return renderHeader(node)
+
+    case 'list':
+      return renderList(node, state)
+
+    case 'table':
+      return renderTable(node)
+
+    case 'code':
+      return renderCode(node)
+
+    case 'link':
+      return renderLink(node)
+
+    case 'button':
+      return renderButton(node)
+
+    case 'box':
+      return renderBox(node, state)
+
+    case 'panel':
+      return renderPanel(node, state)
+
+    case 'card':
+      return renderCard(node, state)
+
+    case 'sidebar':
+      return renderSidebar(node)
+
+    case 'breadcrumb':
+      return renderBreadcrumb(node)
+
+    case 'badge':
+      return renderBadge(node)
+
+    case 'dialog':
+      return renderDialog(node, state)
+
+    case 'spinner':
+      return renderSpinner(node)
+
+    case 'metrics':
+      return renderMetrics(node)
+
+    case 'metric':
+      return renderSingleMetric(node)
+
+    case 'dashboard':
+      return renderDashboard(node, state)
+
+    case 'settings':
+      return renderSettings(node, state)
+
+    case 'input':
+      return renderInput(node)
+
+    case 'select':
+      return renderSelect(node)
+
+    case 'nav-footer':
+      return renderNavFooter(node)
+
+    case 'hero':
+      return renderHero(node)
+
+    case 'features':
+      return renderFeatures(node)
+
+    case 'pricing':
+      return renderPricing(node)
+
+    case 'faq':
+      return renderFAQ(node)
+
+    case 'footer':
+      return renderFooter(node)
+
+    default: {
+      // Unknown type - render children if present
+      const defaultChildren: UINode[] = Array.isArray(node.children) ? node.children : []
+      if (defaultChildren.length > 0) {
+        return defaultChildren.map((child: UINode) => renderNode(child, state)).join('\n')
+      }
+      return ''
+    }
+  }
+}
+
+/**
+ * Renders a UINode tree to a Markdown string for AI agent consumption.
+ *
+ * @param node - The UINode tree to render
+ * @param options - Optional rendering configuration
+ * @returns Markdown string
+ */
+export function renderMarkdown(node: UINode, options?: MarkdownRenderOptions): string {
+  const result = renderNode(node, { indent: 0 })
+
+  // Clean up: remove trailing whitespace from each line
+  const lines = result.split('\n').map((line) => line.trimEnd())
+
+  return lines.join('\n')
+}