@pyreon/document 0.0.1

package/src/renderers/svg.ts

@@ -0,0 +1,254 @@
+import type {
+  DocChild,
+  DocNode,
+  DocumentRenderer,
+  RenderOptions,
+  TableColumn,
+} from '../types'
+
+/**
+ * SVG renderer — generates a standalone SVG document from the node tree.
+ * Useful for thumbnails, social cards, and preview images.
+ * No external dependencies — pure SVG string generation.
+ */
+
+function resolveColumn(col: string | TableColumn): TableColumn {
+  return typeof col === 'string' ? { header: col } : col
+}
+
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function getTextContent(children: DocChild[]): string {
+  return children
+    .map((c) =>
+      typeof c === 'string' ? c : getTextContent((c as DocNode).children),
+    )
+    .join('')
+}
+
+interface RenderContext {
+  y: number
+  width: number
+  padding: number
+}
+
+function renderNode(node: DocNode, ctx: RenderContext): string {
+  const p = node.props
+  const contentWidth = ctx.width - ctx.padding * 2
+  let svg = ''
+
+  switch (node.type) {
+    case 'document':
+    case 'page':
+    case 'section':
+    case 'row':
+    case 'column':
+      for (const child of node.children) {
+        if (typeof child !== 'string') {
+          svg += renderNode(child, ctx)
+        }
+      }
+      break
+
+    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 text = escapeXml(getTextContent(node.children))
+      ctx.y += size + 8
+      svg += `<text x="${ctx.padding}" y="${ctx.y}" font-size="${size}" font-weight="bold" fill="${color}" font-family="system-ui, -apple-system, sans-serif">${text}</text>`
+      ctx.y += 12
+      break
+    }
+
+    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 text = escapeXml(getTextContent(node.children))
+      ctx.y += size + 4
+      svg += `<text x="${ctx.padding}" y="${ctx.y}" font-size="${size}" font-weight="${weight}" font-style="${style}" fill="${color}" font-family="system-ui, -apple-system, sans-serif">${text}</text>`
+      ctx.y += 10
+      break
+    }
+
+    case 'link': {
+      const href = p.href as string
+      const text = escapeXml(getTextContent(node.children))
+      const color = (p.color as string) ?? '#4f46e5'
+      ctx.y += 18
+      svg += `<a href="${escapeXml(href)}"><text x="${ctx.padding}" y="${ctx.y}" font-size="14" fill="${color}" text-decoration="underline" font-family="system-ui, -apple-system, sans-serif">${text}</text></a>`
+      ctx.y += 10
+      break
+    }
+
+    case 'image': {
+      const width = (p.width as number) ?? Math.min(contentWidth, 400)
+      const height = (p.height as number) ?? 200
+      const src = p.src as string
+
+      if (src.startsWith('data:') || src.startsWith('http')) {
+        svg += `<image x="${ctx.padding}" y="${ctx.y}" width="${width}" height="${height}" href="${escapeXml(src)}" />`
+      } else {
+        // Placeholder rectangle for local paths
+        svg += `<rect x="${ctx.padding}" y="${ctx.y}" width="${width}" height="${height}" fill="#f0f0f0" stroke="#ddd" rx="4" />`
+        svg += `<text x="${ctx.padding + width / 2}" y="${ctx.y + height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999" font-family="system-ui, sans-serif">${escapeXml((p.alt as string) ?? 'Image')}</text>`
+      }
+      ctx.y += height + 8
+
+      if (p.caption) {
+        ctx.y += 14
+        svg += `<text x="${ctx.padding}" y="${ctx.y}" font-size="12" fill="#666" font-style="italic" font-family="system-ui, sans-serif">${escapeXml(p.caption as string)}</text>`
+        ctx.y += 8
+      }
+      break
+    }
+
+    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 }
+        | undefined
+      const striped = p.striped as boolean | undefined
+
+      const colWidth = contentWidth / columns.length
+      const rowHeight = 28
+      const headerBg = hs?.background ?? '#f5f5f5'
+      const headerColor = hs?.color ?? '#000000'
+
+      // Header
+      svg += `<rect x="${ctx.padding}" y="${ctx.y}" width="${contentWidth}" height="${rowHeight}" fill="${headerBg}" />`
+      for (let i = 0; i < columns.length; i++) {
+        const col = columns[i]
+        if (!col) continue
+        svg += `<text x="${ctx.padding + i * colWidth + 8}" y="${ctx.y + 18}" font-size="12" font-weight="bold" fill="${headerColor}" font-family="system-ui, sans-serif">${escapeXml(col.header)}</text>`
+      }
+      ctx.y += rowHeight
+
+      // Rows
+      for (let r = 0; r < rows.length; r++) {
+        if (striped && r % 2 === 1) {
+          svg += `<rect x="${ctx.padding}" y="${ctx.y}" width="${contentWidth}" height="${rowHeight}" fill="#f9f9f9" />`
+        }
+        for (let c = 0; c < columns.length; c++) {
+          svg += `<text x="${ctx.padding + c * colWidth + 8}" y="${ctx.y + 18}" font-size="12" fill="#333" font-family="system-ui, sans-serif">${escapeXml(String(rows[r]?.[c] ?? ''))}</text>`
+        }
+        ctx.y += rowHeight
+      }
+
+      // Bottom border
+      svg += `<line x1="${ctx.padding}" y1="${ctx.y}" x2="${ctx.padding + contentWidth}" y2="${ctx.y}" stroke="#ddd" stroke-width="1" />`
+      ctx.y += 12
+      break
+    }
+
+    case 'list': {
+      const ordered = p.ordered as boolean | undefined
+      const items = node.children.filter(
+        (c): c is DocNode => typeof c !== 'string',
+      )
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        if (!item) continue
+        const prefix = ordered ? `${i + 1}.` : '•'
+        const text = escapeXml(getTextContent(item.children))
+        ctx.y += 18
+        svg += `<text x="${ctx.padding + 16}" y="${ctx.y}" font-size="13" fill="#333" font-family="system-ui, sans-serif">${prefix} ${text}</text>`
+      }
+      ctx.y += 10
+      break
+    }
+
+    case 'code': {
+      const text = getTextContent(node.children)
+      const lines = text.split('\n')
+      const codeHeight = lines.length * 18 + 16
+      svg += `<rect x="${ctx.padding}" y="${ctx.y}" width="${contentWidth}" height="${codeHeight}" fill="#f5f5f5" rx="4" />`
+      for (let i = 0; i < lines.length; i++) {
+        svg += `<text x="${ctx.padding + 12}" y="${ctx.y + 20 + i * 18}" font-size="12" fill="#333" font-family="monospace">${escapeXml(lines[i] ?? '')}</text>`
+      }
+      ctx.y += codeHeight + 8
+      break
+    }
+
+    case 'divider': {
+      const color = (p.color as string) ?? '#ddd'
+      const thickness = (p.thickness as number) ?? 1
+      ctx.y += 12
+      svg += `<line x1="${ctx.padding}" y1="${ctx.y}" x2="${ctx.padding + contentWidth}" y2="${ctx.y}" stroke="${color}" stroke-width="${thickness}" />`
+      ctx.y += 12
+      break
+    }
+
+    case 'page-break':
+      ctx.y += 16
+      svg += `<line x1="${ctx.padding}" y1="${ctx.y}" x2="${ctx.padding + contentWidth}" y2="${ctx.y}" stroke="#ccc" stroke-width="2" stroke-dasharray="8,4" />`
+      ctx.y += 16
+      break
+
+    case 'spacer':
+      ctx.y += (p.height as number) ?? 12
+      break
+
+    case 'button': {
+      const bg = (p.background as string) ?? '#4f46e5'
+      const color = (p.color as string) ?? '#ffffff'
+      const text = escapeXml(getTextContent(node.children))
+      const btnWidth = Math.min(text.length * 10 + 48, contentWidth)
+      const btnHeight = 40
+      ctx.y += 8
+      svg += `<rect x="${ctx.padding}" y="${ctx.y}" width="${btnWidth}" height="${btnHeight}" fill="${bg}" rx="4" />`
+      svg += `<text x="${ctx.padding + btnWidth / 2}" y="${ctx.y + 25}" text-anchor="middle" font-size="14" font-weight="bold" fill="${color}" font-family="system-ui, sans-serif">${text}</text>`
+      ctx.y += btnHeight + 12
+      break
+    }
+
+    case 'quote': {
+      const borderColor = (p.borderColor as string) ?? '#ddd'
+      const text = escapeXml(getTextContent(node.children))
+      ctx.y += 4
+      svg += `<rect x="${ctx.padding}" y="${ctx.y}" width="4" height="20" fill="${borderColor}" />`
+      svg += `<text x="${ctx.padding + 16}" y="${ctx.y + 15}" font-size="13" fill="#555" font-style="italic" font-family="system-ui, sans-serif">${text}</text>`
+      ctx.y += 28
+      break
+    }
+  }
+
+  return svg
+}
+
+export const svgRenderer: DocumentRenderer = {
+  async render(node: DocNode, options?: RenderOptions): Promise<string> {
+    const width = 800
+    const padding = 40
+    const ctx: RenderContext = { y: padding, width, padding }
+
+    const content = renderNode(node, ctx)
+    const height = ctx.y + padding
+
+    const dir = options?.direction === 'rtl' ? ' direction="rtl"' : ''
+
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"${dir}>
+<rect width="${width}" height="${height}" fill="#ffffff" />
+${content}
+</svg>`
+  },
+}

package/src/renderers/teams.ts

@@ -0,0 +1,234 @@
+import type {
+  DocChild,
+  DocNode,
+  DocumentRenderer,
+  RenderOptions,
+  TableColumn,
+} from '../types'
+
+/**
+ * Microsoft Teams renderer — outputs Adaptive Cards JSON.
+ * Can be posted via Teams Webhooks, Bot Framework, or Power Automate.
+ */
+
+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 AdaptiveElement {
+  type: string
+  [key: string]: unknown
+}
+
+function nodeToElements(node: DocNode): AdaptiveElement[] {
+  const p = node.props
+  const elements: AdaptiveElement[] = []
+
+  switch (node.type) {
+    case 'document':
+    case 'page':
+    case 'section':
+    case 'row':
+    case 'column':
+      for (const child of node.children) {
+        if (typeof child !== 'string') {
+          elements.push(...nodeToElements(child))
+        }
+      }
+      break
+
+    case 'heading': {
+      const level = (p.level as number) ?? 1
+      const sizeMap: Record<number, string> = {
+        1: 'extraLarge',
+        2: 'large',
+        3: 'medium',
+        4: 'default',
+        5: 'small',
+        6: 'small',
+      }
+      elements.push({
+        type: 'TextBlock',
+        text: getTextContent(node.children),
+        size: sizeMap[level] ?? 'large',
+        weight: 'bolder',
+        wrap: true,
+      })
+      break
+    }
+
+    case 'text': {
+      let text = getTextContent(node.children)
+      if (p.bold) text = `**${text}**`
+      if (p.italic) text = `_${text}_`
+      if (p.strikethrough) text = `~~${text}~~`
+      elements.push({
+        type: 'TextBlock',
+        text,
+        wrap: true,
+        ...(p.color ? { color: 'default' } : {}),
+        ...(p.size
+          ? { size: (p.size as number) >= 18 ? 'large' : 'default' }
+          : {}),
+      })
+      break
+    }
+
+    case 'link': {
+      const href = p.href as string
+      const text = getTextContent(node.children)
+      elements.push({
+        type: 'TextBlock',
+        text: `[${text}](${href})`,
+        wrap: true,
+      })
+      break
+    }
+
+    case 'image': {
+      const src = p.src as string
+      if (src.startsWith('http')) {
+        elements.push({
+          type: 'Image',
+          url: src,
+          altText: (p.alt as string) ?? 'Image',
+          size: 'large',
+        })
+      }
+      break
+    }
+
+    case 'table': {
+      const columns = ((p.columns ?? []) as (string | TableColumn)[]).map(
+        resolveColumn,
+      )
+      const rows = (p.rows ?? []) as (string | number)[][]
+
+      // Adaptive Cards have native Table support (schema 1.5+)
+      const tableColumns = columns.map((col) => ({
+        type: 'Column',
+        width: 'stretch',
+        items: [
+          {
+            type: 'TextBlock',
+            text: `**${col.header}**`,
+            weight: 'bolder',
+            wrap: true,
+          },
+          ...rows.map((row, i) => ({
+            type: 'TextBlock',
+            text: String(row[columns.indexOf(col)] ?? ''),
+            wrap: true,
+            separator: i === 0,
+          })),
+        ],
+      }))
+
+      elements.push({
+        type: 'ColumnSet',
+        columns: tableColumns,
+      })
+      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')
+      elements.push({
+        type: 'TextBlock',
+        text: items,
+        wrap: true,
+      })
+      break
+    }
+
+    case 'code': {
+      const text = getTextContent(node.children)
+      elements.push({
+        type: 'TextBlock',
+        text: `\`\`\`\n${text}\n\`\`\``,
+        fontType: 'monospace',
+        wrap: true,
+      })
+      break
+    }
+
+    case 'divider':
+    case 'page-break':
+      elements.push({
+        type: 'TextBlock',
+        text: ' ',
+        separator: true,
+      })
+      break
+
+    case 'spacer':
+      elements.push({
+        type: 'TextBlock',
+        text: ' ',
+        spacing: 'large',
+      })
+      break
+
+    case 'button': {
+      elements.push({
+        type: 'ActionSet',
+        actions: [
+          {
+            type: 'Action.OpenUrl',
+            title: getTextContent(node.children),
+            url: p.href as string,
+            style: 'positive',
+          },
+        ],
+      })
+      break
+    }
+
+    case 'quote': {
+      const text = getTextContent(node.children)
+      elements.push({
+        type: 'Container',
+        style: 'emphasis',
+        items: [
+          {
+            type: 'TextBlock',
+            text: `_${text}_`,
+            wrap: true,
+            isSubtle: true,
+          },
+        ],
+      })
+      break
+    }
+  }
+
+  return elements
+}
+
+export const teamsRenderer: DocumentRenderer = {
+  async render(node: DocNode, _options?: RenderOptions): Promise<string> {
+    const body = nodeToElements(node)
+    const card = {
+      type: 'AdaptiveCard',
+      $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+      version: '1.5',
+      body,
+    }
+    return JSON.stringify(card, null, 2)
+  },
+}

package/src/renderers/telegram.ts

@@ -0,0 +1,137 @@
+import type {
+  DocChild,
+  DocNode,
+  DocumentRenderer,
+  RenderOptions,
+  TableColumn,
+} from '../types'
+
+/**
+ * Telegram renderer — outputs HTML using Telegram's supported subset.
+ * Telegram Bot API supports: <b>, <i>, <u>, <s>, <a>, <code>, <pre>, <blockquote>.
+ * No tables, no images inline — images sent separately via sendPhoto.
+ */
+
+function resolveColumn(col: string | TableColumn): TableColumn {
+  return typeof col === 'string' ? { header: col } : col
+}
+
+function esc(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function getTextContent(children: DocChild[]): string {
+  return children
+    .map((c) =>
+      typeof c === 'string' ? c : getTextContent((c as DocNode).children),
+    )
+    .join('')
+}
+
+function renderNode(node: DocNode): string {
+  const p = node.props
+
+  switch (node.type) {
+    case 'document':
+    case 'page':
+    case 'section':
+    case 'row':
+    case 'column':
+      return node.children
+        .map((c) => (typeof c === 'string' ? esc(c) : renderNode(c)))
+        .join('')
+
+    case 'heading': {
+      const text = esc(getTextContent(node.children))
+      return `<b>${text}</b>\n\n`
+    }
+
+    case 'text': {
+      let text = esc(getTextContent(node.children))
+      if (p.bold) text = `<b>${text}</b>`
+      if (p.italic) text = `<i>${text}</i>`
+      if (p.underline) text = `<u>${text}</u>`
+      if (p.strikethrough) text = `<s>${text}</s>`
+      return `${text}\n\n`
+    }
+
+    case 'link': {
+      const href = p.href as string
+      const text = esc(getTextContent(node.children))
+      return `<a href="${esc(href)}">${text}</a>\n\n`
+    }
+
+    case 'image':
+      // Telegram doesn't support inline images in HTML
+      // Images need to be sent separately via sendPhoto
+      return ''
+
+    case 'table': {
+      const columns = ((p.columns ?? []) as (string | TableColumn)[]).map(
+        resolveColumn,
+      )
+      const rows = (p.rows ?? []) as (string | number)[][]
+
+      // Render as preformatted text since Telegram has no table support
+      const header = columns.map((c) => c.header).join(' | ')
+      const separator = columns.map(() => '---').join('-+-')
+      const body = rows
+        .map((row) => row.map((c) => String(c ?? '')).join(' | '))
+        .join('\n')
+
+      return `<pre>${esc(header)}\n${esc(separator)}\n${esc(body)}</pre>\n\n`
+    }
+
+    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} ${esc(getTextContent(item.children))}`
+        })
+        .join('\n')
+      return `${items}\n\n`
+    }
+
+    case 'code': {
+      const lang = (p.language as string) ?? ''
+      const text = esc(getTextContent(node.children))
+      if (lang) {
+        return `<pre><code class="language-${esc(lang)}">${text}</code></pre>\n\n`
+      }
+      return `<pre>${text}</pre>\n\n`
+    }
+
+    case 'divider':
+    case 'page-break':
+      return '───────────\n\n'
+
+    case 'spacer':
+      return '\n'
+
+    case 'button': {
+      const href = p.href as string
+      const text = esc(getTextContent(node.children))
+      return `<a href="${esc(href)}">${text}</a>\n\n`
+    }
+
+    case 'quote': {
+      const text = esc(getTextContent(node.children))
+      return `<blockquote>${text}</blockquote>\n\n`
+    }
+
+    default:
+      return ''
+  }
+}
+
+export const telegramRenderer: DocumentRenderer = {
+  async render(node: DocNode, _options?: RenderOptions): Promise<string> {
+    return renderNode(node).trim()
+  },
+}