npm - @pyreon/document - Versions diffs - 0.0.1 - Mend

@pyreon/document 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/LICENSE +21 -0
package/lib/analysis/index.js.html +5406 -0
package/lib/chunk-ErZ26oRB.js +48 -0
package/lib/confluence-Va8e7RxQ.js +192 -0
package/lib/confluence-Va8e7RxQ.js.map +1 -0
package/lib/csv-2c38ub-Y.js +32 -0
package/lib/csv-2c38ub-Y.js.map +1 -0
package/lib/discord-DAoUZqvE.js +134 -0
package/lib/discord-DAoUZqvE.js.map +1 -0
package/lib/dist-BsqdI2nY.js +20179 -0
package/lib/dist-BsqdI2nY.js.map +1 -0
package/lib/docx-CorFwEH9.js +450 -0
package/lib/docx-CorFwEH9.js.map +1 -0
package/lib/email-Bn_Brjdp.js +131 -0
package/lib/email-Bn_Brjdp.js.map +1 -0
package/lib/exceljs-BoIDUUaw.js +34377 -0
package/lib/exceljs-BoIDUUaw.js.map +1 -0
package/lib/google-chat-B6I017I1.js +125 -0
package/lib/google-chat-B6I017I1.js.map +1 -0
package/lib/html-De_iS_f0.js +151 -0
package/lib/html-De_iS_f0.js.map +1 -0
package/lib/index.js +619 -0
package/lib/index.js.map +1 -0
package/lib/markdown-BYC_3C9i.js +75 -0
package/lib/markdown-BYC_3C9i.js.map +1 -0
package/lib/notion-DHaQHO6P.js +187 -0
package/lib/notion-DHaQHO6P.js.map +1 -0
package/lib/pdf-CDPc5Itc.js +419 -0
package/lib/pdf-CDPc5Itc.js.map +1 -0
package/lib/pdfmake-DnmLxK4Q.js +55511 -0
package/lib/pdfmake-DnmLxK4Q.js.map +1 -0
package/lib/pptx-DKQU6bjq.js +252 -0
package/lib/pptx-DKQU6bjq.js.map +1 -0
package/lib/pptxgen.es-COcgXsyx.js +5697 -0
package/lib/pptxgen.es-COcgXsyx.js.map +1 -0
package/lib/slack-CJRJgkag.js +139 -0
package/lib/slack-CJRJgkag.js.map +1 -0
package/lib/svg-BM8biZmL.js +187 -0
package/lib/svg-BM8biZmL.js.map +1 -0
package/lib/teams-S99tonRG.js +176 -0
package/lib/teams-S99tonRG.js.map +1 -0
package/lib/telegram-CbEO_2PN.js +77 -0
package/lib/telegram-CbEO_2PN.js.map +1 -0
package/lib/text-B5U8ucRr.js +75 -0
package/lib/text-B5U8ucRr.js.map +1 -0
package/lib/types/index.d.ts +528 -0
package/lib/types/index.d.ts.map +1 -0
package/lib/vfs_fonts-Df1kkZ4Y.js +19 -0
package/lib/vfs_fonts-Df1kkZ4Y.js.map +1 -0
package/lib/whatsapp-DJ2D1jGG.js +64 -0
package/lib/whatsapp-DJ2D1jGG.js.map +1 -0
package/lib/xlsx-D47x-gZ5.js +199 -0
package/lib/xlsx-D47x-gZ5.js.map +1 -0
package/package.json +62 -0
package/src/builder.ts +266 -0
package/src/download.ts +76 -0
package/src/env.d.ts +17 -0
package/src/index.ts +98 -0
package/src/nodes.ts +315 -0
package/src/render.ts +222 -0
package/src/renderers/confluence.ts +231 -0
package/src/renderers/csv.ts +67 -0
package/src/renderers/discord.ts +192 -0
package/src/renderers/docx.ts +612 -0
package/src/renderers/email.ts +230 -0
package/src/renderers/google-chat.ts +211 -0
package/src/renderers/html.ts +225 -0
package/src/renderers/markdown.ts +144 -0
package/src/renderers/notion.ts +264 -0
package/src/renderers/pdf.ts +427 -0
package/src/renderers/pptx.ts +353 -0
package/src/renderers/slack.ts +192 -0
package/src/renderers/svg.ts +254 -0
package/src/renderers/teams.ts +234 -0
package/src/renderers/telegram.ts +137 -0
package/src/renderers/text.ts +154 -0
package/src/renderers/whatsapp.ts +121 -0
package/src/renderers/xlsx.ts +342 -0
package/src/tests/document.test.ts +2920 -0
package/src/types.ts +291 -0

package/src/renderers/email.ts ADDED Viewed

@@ -0,0 +1,230 @@
+import type {
+  DocChild,
+  DocNode,
+  DocumentRenderer,
+  RenderOptions,
+  TableColumn,
+} from '../types'
+/**
+ * Email renderer — generates table-based HTML with inline styles
+ * that works across Gmail, Outlook, Apple Mail, and other email clients.
+ *
+ * Key constraints:
+ * - No CSS classes (Gmail strips <style> tags)
+ * - Table-based layout (no flexbox/grid)
+ * - All styles inline
+ * - VML buttons for Outlook
+ * - Max width 600px for compatibility
+ */
+function esc(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+function resolveColumn(col: string | TableColumn): TableColumn {
+  return typeof col === 'string' ? { header: col } : col
+}
+function renderChild(child: DocChild): string {
+  if (typeof child === 'string') return esc(child)
+  return renderNode(child)
+}
+function renderChildren(children: DocChild[]): string {
+  return children.map(renderChild).join('')
+}
+function wrapInTable(content: string, style = ''): string {
+  return `<table width="100%" cellpadding="0" cellspacing="0" border="0"${style ? ` style="${style}"` : ''}><tr><td>${content}</td></tr></table>`
+}
+function renderNode(node: DocNode): string {
+  const p = node.props
+  switch (node.type) {
+    case 'document': {
+      const title = p.title ? `<title>${esc(p.title as string)}</title>` : ''
+      const preview = p.subject
+        ? `<div style="display:none;max-height:0;overflow:hidden">${esc(p.subject as string)}</div>`
+        : ''
+      return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${title}<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]--></head><body style="margin:0;padding:0;background-color:#f4f4f4;font-family:Arial,Helvetica,sans-serif">${preview}<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f4f4"><tr><td align="center" style="padding:20px 0"><table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;max-width:600px;width:100%"><tr><td>${renderChildren(node.children)}</td></tr></table></td></tr></table></body></html>`
+    }
+    case 'page':
+      // In email, pages are just content sections
+      return renderChildren(node.children)
+    case 'section': {
+      const bg = p.background ? `background-color:${p.background};` : ''
+      const pad = p.padding
+        ? `padding:${typeof p.padding === 'number' ? `${p.padding}px` : Array.isArray(p.padding) ? (p.padding as number[]).map((v) => `${v}px`).join(' ') : '0'}`
+        : 'padding:0'
+      const radius = p.borderRadius ? `border-radius:${p.borderRadius}px;` : ''
+      if (p.direction === 'row') {
+        // Row layout via nested table
+        const children = node.children.filter(
+          (c): c is DocNode => typeof c !== 'string',
+        )
+        const colWidth = Math.floor(100 / Math.max(children.length, 1))
+        return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="${bg}${radius}${pad}"><tr>${children.map((child) => `<td width="${colWidth}%" valign="top" style="padding:${(p.gap as number | undefined) ? `0 ${(p.gap as number) / 2}px` : '0'}">${renderNode(child)}</td>`).join('')}</tr></table>`
+      }
+      return wrapInTable(renderChildren(node.children), `${bg}${radius}${pad}`)
+    }
+    case 'row': {
+      const children = node.children.filter(
+        (c): c is DocNode => typeof c !== 'string',
+      )
+      const gap = (p.gap as number) ?? 0
+      return `<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>${children.map((child) => `<td valign="top" style="padding:0 ${gap / 2}px">${renderNode(child)}</td>`).join('')}</tr></table>`
+    }
+    case 'column':
+      return renderChildren(node.children)
+    case 'heading': {
+      const level = (p.level as number) ?? 1
+      const sizes: Record<number, number> = {
+        1: 28,
+        2: 24,
+        3: 20,
+        4: 18,
+        5: 16,
+        6: 14,
+      }
+      const size = sizes[level] ?? 24
+      const color = (p.color as string) ?? '#000000'
+      const align = (p.align as string) ?? 'left'
+      return `<h${level} style="margin:0 0 12px 0;font-size:${size}px;color:${color};text-align:${align};font-weight:bold;line-height:1.3">${renderChildren(node.children)}</h${level}>`
+    }
+    case 'text': {
+      const size = (p.size as number) ?? 14
+      const color = (p.color as string) ?? '#333333'
+      const weight = p.bold ? 'bold' : 'normal'
+      const style = p.italic ? 'italic' : 'normal'
+      const decoration = p.underline
+        ? 'underline'
+        : p.strikethrough
+          ? 'line-through'
+          : 'none'
+      const align = (p.align as string) ?? 'left'
+      const lh = (p.lineHeight as number) ?? 1.5
+      return `<p style="margin:0 0 12px 0;font-size:${size}px;color:${color};font-weight:${weight};font-style:${style};text-decoration:${decoration};text-align:${align};line-height:${lh}">${renderChildren(node.children)}</p>`
+    }
+    case 'link':
+      return `<a href="${esc(p.href as string)}" style="color:${(p.color as string) ?? '#4f46e5'};text-decoration:underline" target="_blank">${renderChildren(node.children)}</a>`
+    case 'image': {
+      const align = (p.align as string) ?? 'left'
+      const img = `<img src="${esc(p.src as string)}"${p.width ? ` width="${p.width}"` : ''}${p.height ? ` height="${p.height}"` : ''} alt="${esc((p.alt as string) ?? '')}" style="display:block;outline:none;border:none;text-decoration:none${p.width ? `;max-width:${p.width}px` : ''}" />`
+      if (p.caption) {
+        return `<table cellpadding="0" cellspacing="0" border="0"${align === 'center' ? ' align="center"' : ''}><tr><td>${img}</td></tr><tr><td style="font-size:12px;color:#666;padding-top:4px;text-align:center">${esc(p.caption as string)}</td></tr></table>`
+      }
+      if (align === 'center')
+        return `<div style="text-align:center">${img}</div>`
+      if (align === 'right') return `<div style="text-align:right">${img}</div>`
+      return img
+    }
+    case 'table': {
+      const columns = ((p.columns ?? []) as (string | TableColumn)[]).map(
+        resolveColumn,
+      )
+      const rows = (p.rows ?? []) as (string | number)[][]
+      const hs = p.headerStyle as
+        | { background?: string; color?: string; bold?: boolean }
+        | undefined
+      const striped = p.striped as boolean | undefined
+      let html =
+        '<table width="100%" cellpadding="8" cellspacing="0" border="0" style="border-collapse:collapse">'
+      if (p.caption)
+        html += `<caption style="font-size:12px;color:#666;padding:8px;text-align:left">${esc(p.caption as string)}</caption>`
+      html += '<tr>'
+      for (const col of columns) {
+        const bg = hs?.background
+          ? `background-color:${hs.background};`
+          : 'background-color:#f5f5f5;'
+        const color = hs?.color ? `color:${hs.color};` : ''
+        const align = col.align ? `text-align:${col.align};` : ''
+        const width = col.width
+          ? `width:${typeof col.width === 'number' ? `${col.width}px` : col.width};`
+          : ''
+        html += `<th style="${bg}${color}font-weight:bold;${align}${width}padding:8px;border-bottom:2px solid #ddd">${esc(col.header)}</th>`
+      }
+      html += '</tr>'
+      for (let i = 0; i < rows.length; i++) {
+        const bg = striped && i % 2 === 1 ? 'background-color:#f9f9f9;' : ''
+        html += '<tr>'
+        for (let j = 0; j < columns.length; j++) {
+          const col = columns[j]
+          const align = col?.align ? `text-align:${col.align};` : ''
+          html += `<td style="${bg}${align}padding:8px;border-bottom:1px solid #eee">${esc(String(rows[i]?.[j] ?? ''))}</td>`
+        }
+        html += '</tr>'
+      }
+      html += '</table>'
+      return html
+    }
+    case 'list': {
+      const tag = p.ordered ? 'ol' : 'ul'
+      return `<${tag} style="margin:0 0 12px 0;padding-left:24px">${renderChildren(node.children)}</${tag}>`
+    }
+    case 'list-item':
+      return `<li style="margin:0 0 4px 0;font-size:14px;color:#333">${renderChildren(node.children)}</li>`
+    case 'code':
+      return `<pre style="background-color:#f5f5f5;padding:12px;border-radius:4px;font-family:Courier New,monospace;font-size:13px;color:#333;overflow-x:auto;margin:0 0 12px 0"><code>${esc(renderChildren(node.children))}</code></pre>`
+    case 'divider': {
+      const color = (p.color as string) ?? '#dddddd'
+      const thickness = (p.thickness as number) ?? 1
+      return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:16px 0"><tr><td style="border-top:${thickness}px solid ${color};font-size:0;line-height:0">&nbsp;</td></tr></table>`
+    }
+    case 'page-break':
+      return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:24px 0"><tr><td style="border-top:2px solid #dddddd;font-size:0;line-height:0">&nbsp;</td></tr></table>`
+    case 'spacer':
+      return `<div style="height:${p.height}px;line-height:${p.height}px;font-size:0">&nbsp;</div>`
+    case 'button': {
+      const bg = (p.background as string) ?? '#4f46e5'
+      const color = (p.color as string) ?? '#ffffff'
+      const radius = (p.borderRadius as number) ?? 4
+      const href = esc(p.href as string)
+      const text = renderChildren(node.children)
+      const align = (p.align as string) ?? 'left'
+      // Bulletproof button — works in Outlook via VML, CSS everywhere else
+      return `<div style="text-align:${align};margin:12px 0"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${href}" style="height:44px;v-text-anchor:middle;width:200px" arcsize="10%" strokecolor="${bg}" fillcolor="${bg}"><w:anchorlock/><center style="color:${color};font-family:Arial,sans-serif;font-size:14px;font-weight:bold">${text}</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="${href}" style="display:inline-block;background-color:${bg};color:${color};padding:12px 24px;border-radius:${radius}px;text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,sans-serif" target="_blank">${text}</a><!--<![endif]--></div>`
+    }
+    case 'quote': {
+      const borderColor = (p.borderColor as string) ?? '#dddddd'
+      return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:12px 0"><tr><td style="border-left:4px solid ${borderColor};padding:12px 20px;color:#555555;font-style:italic">${renderChildren(node.children)}</td></tr></table>`
+    }
+    default:
+      return renderChildren(node.children)
+  }
+}
+export const emailRenderer: DocumentRenderer = {
+  async render(node: DocNode, _options?: RenderOptions): Promise<string> {
+    return renderNode(node)
+  },
+}

package/src/renderers/google-chat.ts ADDED Viewed

@@ -0,0 +1,211 @@
+import type {
+  DocChild,
+  DocNode,
+  DocumentRenderer,
+  RenderOptions,
+  TableColumn,
+} from '../types'
+/**
+ * Google Chat renderer — outputs Card V2 JSON for Google Chat API.
+ * Cards can be sent via webhooks, Chat API, or Apps Script.
+ */
+function resolveColumn(col: string | TableColumn): TableColumn {
+  return typeof col === 'string' ? { header: col } : col
+}
+function getTextContent(children: DocChild[]): string {
+  return children
+    .map((c) =>
+      typeof c === 'string' ? c : getTextContent((c as DocNode).children),
+    )
+    .join('')
+}
+interface CardWidget {
+  [key: string]: unknown
+}
+function nodeToWidgets(node: DocNode): CardWidget[] {
+  const p = node.props
+  const widgets: CardWidget[] = []
+  switch (node.type) {
+    case 'document':
+    case 'page':
+    case 'section':
+    case 'row':
+    case 'column':
+      for (const child of node.children) {
+        if (typeof child !== 'string') {
+          widgets.push(...nodeToWidgets(child))
+        }
+      }
+      break
+    case 'heading': {
+      const text = getTextContent(node.children)
+      widgets.push({
+        decoratedText: {
+          topLabel: '',
+          text: `<b>${text}</b>`,
+          wrapText: true,
+        },
+      })
+      break
+    }
+    case 'text': {
+      let text = getTextContent(node.children)
+      if (p.bold) text = `<b>${text}</b>`
+      if (p.italic) text = `<i>${text}</i>`
+      if (p.strikethrough) text = `<s>${text}</s>`
+      widgets.push({
+        textParagraph: { text },
+      })
+      break
+    }
+    case 'link': {
+      const href = p.href as string
+      const text = getTextContent(node.children)
+      widgets.push({
+        textParagraph: { text: `<a href="${href}">${text}</a>` },
+      })
+      break
+    }
+    case 'image': {
+      const src = p.src as string
+      if (src.startsWith('http')) {
+        widgets.push({
+          image: {
+            imageUrl: src,
+            altText: (p.alt as string) ?? 'Image',
+          },
+        })
+      }
+      break
+    }
+    case 'table': {
+      const columns = ((p.columns ?? []) as (string | TableColumn)[]).map(
+        resolveColumn,
+      )
+      const rows = (p.rows ?? []) as (string | number)[][]
+      // Google Chat Cards don't have native tables — use grid or formatted text
+      const header = columns.map((c) => `<b>${c.header}</b>`).join(' | ')
+      const body = rows
+        .map((row) => row.map((c) => String(c ?? '')).join(' | '))
+        .join('\n')
+      widgets.push({
+        textParagraph: { text: `${header}\n${body}` },
+      })
+      break
+    }
+    case 'list': {
+      const ordered = p.ordered as boolean | undefined
+      const items = node.children
+        .filter((c): c is DocNode => typeof c !== 'string')
+        .map((item, i) => {
+          const prefix = ordered ? `${i + 1}.` : '•'
+          return `${prefix} ${getTextContent(item.children)}`
+        })
+        .join('\n')
+      widgets.push({
+        textParagraph: { text: items },
+      })
+      break
+    }
+    case 'code': {
+      const text = getTextContent(node.children)
+      widgets.push({
+        textParagraph: {
+          text: `<font color="#333333"><code>${text}</code></font>`,
+        },
+      })
+      break
+    }
+    case 'divider':
+    case 'page-break':
+      widgets.push({ divider: {} })
+      break
+    case 'spacer':
+      // No direct equivalent — skip
+      break
+    case 'button': {
+      const href = p.href as string
+      const text = getTextContent(node.children)
+      widgets.push({
+        buttonList: {
+          buttons: [
+            {
+              text,
+              onClick: { openLink: { url: href } },
+              color: {
+                red: 0.31,
+                green: 0.27,
+                blue: 0.89,
+                alpha: 1,
+              },
+            },
+          ],
+        },
+      })
+      break
+    }
+    case 'quote': {
+      const text = getTextContent(node.children)
+      widgets.push({
+        textParagraph: { text: `<i>"${text}"</i>` },
+      })
+      break
+    }
+  }
+  return widgets
+}
+export const googleChatRenderer: DocumentRenderer = {
+  async render(node: DocNode, _options?: RenderOptions): Promise<string> {
+    const widgets = nodeToWidgets(node)
+    // Extract title from first heading or document title
+    let title = (node.props.title as string) ?? ''
+    if (!title) {
+      const firstHeading = node.children.find(
+        (c): c is DocNode => typeof c !== 'string' && c.type === 'heading',
+      )
+      if (firstHeading) title = getTextContent(firstHeading.children)
+    }
+    const card = {
+      cardsV2: [
+        {
+          cardId: 'document',
+          card: {
+            header: title
+              ? { title, subtitle: (node.props.subject as string) ?? undefined }
+              : undefined,
+            sections: [
+              {
+                widgets,
+              },
+            ],
+          },
+        },
+      ],
+    }
+    return JSON.stringify(card, null, 2)
+  },
+}

package/src/renderers/html.ts ADDED Viewed

@@ -0,0 +1,225 @@
+import type {
+  DocChild,
+  DocNode,
+  DocumentRenderer,
+  RenderOptions,
+  TableColumn,
+} from '../types'
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+function resolveColumn(col: string | TableColumn): TableColumn {
+  return typeof col === 'string' ? { header: col } : col
+}
+function styleStr(styles: Record<string, string | number | undefined>): string {
+  const parts: string[] = []
+  for (const [k, v] of Object.entries(styles)) {
+    if (v != null && v !== '') {
+      const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase()
+      parts.push(`${prop}:${typeof v === 'number' ? `${v}px` : v}`)
+    }
+  }
+  return parts.length > 0 ? ` style="${parts.join(';')}"` : ''
+}
+function padStr(
+  pad: number | [number, number] | [number, number, number, number] | undefined,
+): string | undefined {
+  if (pad == null) return undefined
+  if (typeof pad === 'number') return `${pad}px`
+  if (pad.length === 2) return `${pad[0]}px ${pad[1]}px`
+  return `${pad[0]}px ${pad[1]}px ${pad[2]}px ${pad[3]}px`
+}
+function renderChild(child: DocChild): string {
+  if (typeof child === 'string') return escapeHtml(child)
+  return renderNode(child)
+}
+function renderChildren(children: DocChild[]): string {
+  return children.map(renderChild).join('')
+}
+function renderNode(node: DocNode): string {
+  const p = node.props
+  switch (node.type) {
+    case 'document': {
+      const lang = (p.language as string) ?? 'en'
+      const title = p.title
+        ? `<title>${escapeHtml(p.title as string)}</title>`
+        : ''
+      return `<!DOCTYPE html><html lang="${lang}"><head><meta charset="utf-8">${title}<meta name="viewport" content="width=device-width,initial-scale=1"></head><body>${renderChildren(node.children)}</body></html>`
+    }
+    case 'page': {
+      const margin = padStr(p.margin as PageMargin)
+      return `<div${styleStr({ maxWidth: '800px', margin: margin ?? '0 auto', padding: margin ?? '40px' })}>${renderChildren(node.children)}</div>`
+    }
+    case 'section': {
+      const dir = (p.direction as string) ?? 'column'
+      return `<div${styleStr({
+        display: dir === 'row' ? 'flex' : 'block',
+        flexDirection: dir === 'row' ? 'row' : undefined,
+        gap: p.gap as number | undefined,
+        padding: padStr(p.padding as PageMargin),
+        background: p.background as string | undefined,
+        borderRadius: p.borderRadius as number | undefined,
+      })}>${renderChildren(node.children)}</div>`
+    }
+    case 'row':
+      return `<div${styleStr({ display: 'flex', gap: p.gap as number | undefined, alignItems: p.align as string | undefined })}>${renderChildren(node.children)}</div>`
+    case 'column':
+      return `<div${styleStr({ flex: p.width ? undefined : '1', width: p.width as string | undefined, textAlign: p.align as string | undefined })}>${renderChildren(node.children)}</div>`
+    case 'heading': {
+      const level = (p.level as number) ?? 1
+      const tag = `h${Math.min(Math.max(level, 1), 6)}`
+      return `<${tag}${styleStr({ color: p.color as string | undefined, textAlign: p.align as string | undefined })}>${renderChildren(node.children)}</${tag}>`
+    }
+    case 'text': {
+      return `<p${styleStr({
+        fontSize: p.size as number | undefined,
+        color: p.color as string | undefined,
+        fontWeight: p.bold ? 'bold' : undefined,
+        fontStyle: p.italic ? 'italic' : undefined,
+        textDecoration: p.underline
+          ? 'underline'
+          : p.strikethrough
+            ? 'line-through'
+            : undefined,
+        textAlign: p.align as string | undefined,
+        lineHeight: p.lineHeight as number | undefined,
+      })}>${renderChildren(node.children)}</p>`
+    }
+    case 'link':
+      return `<a href="${escapeHtml(p.href as string)}"${styleStr({ color: p.color as string | undefined })}>${renderChildren(node.children)}</a>`
+    case 'image': {
+      const alignStyle =
+        p.align === 'center'
+          ? 'display:block;margin:0 auto'
+          : p.align === 'right'
+            ? 'display:block;margin-left:auto'
+            : ''
+      const img = `<img src="${escapeHtml(p.src as string)}"${p.width ? ` width="${p.width}"` : ''}${p.height ? ` height="${p.height}"` : ''}${p.alt ? ` alt="${escapeHtml(p.alt as string)}"` : ''}${alignStyle ? ` style="${alignStyle}"` : ''} />`
+      if (p.caption) {
+        return `<figure${p.align === 'center' ? ' style="text-align:center"' : ''}>${img}<figcaption>${escapeHtml(p.caption as string)}</figcaption></figure>`
+      }
+      return img
+    }
+    case 'table': {
+      const columns = ((p.columns ?? []) as (string | TableColumn)[]).map(
+        resolveColumn,
+      )
+      const rows = (p.rows ?? []) as (string | number)[][]
+      const hs = p.headerStyle as
+        | { background?: string; color?: string; bold?: boolean }
+        | undefined
+      const striped = p.striped as boolean | undefined
+      const bordered = p.bordered as boolean | undefined
+      const borderStyle = bordered
+        ? 'border:1px solid #ddd;border-collapse:collapse;'
+        : 'border-collapse:collapse;'
+      let html = `<table style="width:100%;${borderStyle}">`
+      if (p.caption)
+        html += `<caption>${escapeHtml(p.caption as string)}</caption>`
+      html += '<thead><tr>'
+      for (const col of columns) {
+        const cellBorder = bordered ? 'border:1px solid #ddd;' : ''
+        const bgStyle = hs?.background ? `background:${hs.background};` : ''
+        const colorStyle = hs?.color ? `color:${hs.color};` : ''
+        const fontStyle = hs?.bold !== false ? 'font-weight:bold;' : ''
+        const alignStyle = col.align ? `text-align:${col.align};` : ''
+        const widthStyle = col.width
+          ? `width:${typeof col.width === 'number' ? `${col.width}px` : col.width};`
+          : ''
+        html += `<th style="${cellBorder}${bgStyle}${colorStyle}${fontStyle}${alignStyle}${widthStyle}padding:8px">${escapeHtml(col.header)}</th>`
+      }
+      html += '</tr></thead>'
+      html += '<tbody>'
+      for (let i = 0; i < rows.length; i++) {
+        const rowBg =
+          striped && i % 2 === 1 ? ' style="background:#f9f9f9"' : ''
+        html += `<tr${rowBg}>`
+        for (let j = 0; j < columns.length; j++) {
+          const cellBorder = bordered ? 'border:1px solid #ddd;' : ''
+          const col = columns[j]
+          const alignStyle = col?.align ? `text-align:${col.align};` : ''
+          html += `<td style="${cellBorder}${alignStyle}padding:8px">${escapeHtml(String(rows[i]?.[j] ?? ''))}</td>`
+        }
+        html += '</tr>'
+      }
+      html += '</tbody></table>'
+      return html
+    }
+    case 'list': {
+      const tag = p.ordered ? 'ol' : 'ul'
+      return `<${tag}>${renderChildren(node.children)}</${tag}>`
+    }
+    case 'list-item':
+      return `<li>${renderChildren(node.children)}</li>`
+    case 'code':
+      return `<pre style="background:#f5f5f5;padding:12px;border-radius:4px;overflow-x:auto"><code>${escapeHtml(renderChildren(node.children))}</code></pre>`
+    case 'divider': {
+      const color = (p.color as string) ?? '#ddd'
+      const thickness = (p.thickness as number) ?? 1
+      return `<hr style="border:none;border-top:${thickness}px solid ${color};margin:16px 0" />`
+    }
+    case 'page-break':
+      return '<div style="page-break-after:always;break-after:page"></div>'
+    case 'spacer':
+      return `<div style="height:${p.height}px"></div>`
+    case 'button': {
+      const bg = (p.background as string) ?? '#4f46e5'
+      const color = (p.color as string) ?? '#fff'
+      const radius = (p.borderRadius as number) ?? 4
+      const pad = padStr((p.padding ?? [12, 24]) as [number, number])
+      const align = (p.align as string) ?? 'left'
+      return `<div style="text-align:${align}"><a href="${escapeHtml(p.href as string)}" style="display:inline-block;background:${bg};color:${color};padding:${pad};border-radius:${radius}px;text-decoration:none;font-weight:bold">${renderChildren(node.children)}</a></div>`
+    }
+    case 'quote': {
+      const borderColor = (p.borderColor as string) ?? '#ddd'
+      return `<blockquote style="margin:0;padding:12px 20px;border-left:4px solid ${borderColor};color:#555">${renderChildren(node.children)}</blockquote>`
+    }
+    default:
+      return renderChildren(node.children)
+  }
+}
+type PageMargin = number | [number, number] | [number, number, number, number]
+export const htmlRenderer: DocumentRenderer = {
+  async render(node: DocNode, options?: RenderOptions): Promise<string> {
+    let html = renderNode(node)
+    if (options?.direction === 'rtl') {
+      html = html.replace('<body>', '<body dir="rtl" style="direction:rtl">')
+    }
+    return html
+  },
+}