@pyreon/document 0.10.0 → 0.11.0

package/src/renderers/svg.ts

@@ -1,11 +1,5 @@
-import { sanitizeColor, sanitizeHref, sanitizeImageSrc } from '../sanitize'
-import type {
-  DocChild,
-  DocNode,
-  DocumentRenderer,
-  RenderOptions,
-  TableColumn,
-} from '../types'
+import { sanitizeColor, sanitizeHref, sanitizeImageSrc } from "../sanitize"
+import type { DocChild, DocNode, DocumentRenderer, RenderOptions, TableColumn } from "../types"
 
 /**
  * SVG renderer — generates a standalone SVG document from the node tree.
@@ -14,23 +8,21 @@ import type {
  */
 
 function resolveColumn(col: string | TableColumn): TableColumn {
-  return typeof col === 'string' ? { header: col } : col
+  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;')
+    .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('')
+    .map((c) => (typeof c === "string" ? c : getTextContent((c as DocNode).children)))
+    .join("")
 }
 
 interface RenderContext {
@@ -42,22 +34,22 @@ interface RenderContext {
 function renderNode(node: DocNode, ctx: RenderContext): string {
   const p = node.props
   const contentWidth = ctx.width - ctx.padding * 2
-  let svg = ''
+  let svg = ""
 
   switch (node.type) {
-    case 'document':
-    case 'page':
-    case 'section':
-    case 'row':
-    case 'column':
+    case "document":
+    case "page":
+    case "section":
+    case "row":
+    case "column":
       for (const child of node.children) {
-        if (typeof child !== 'string') {
+        if (typeof child !== "string") {
           svg += renderNode(child, ctx)
         }
       }
       break
 
-    case 'heading': {
+    case "heading": {
       const level = (p.level as number) ?? 1
       const sizes: Record<number, number> = {
         1: 28,
@@ -68,7 +60,7 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
         6: 14,
       }
       const size = sizes[level] ?? 24
-      const color = sanitizeColor((p.color as string) ?? '#000000')
+      const color = sanitizeColor((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>`
@@ -76,11 +68,11 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case 'text': {
+    case "text": {
       const size = (p.size as number) ?? 14
-      const color = sanitizeColor((p.color as string) ?? '#333333')
-      const weight = p.bold ? 'bold' : 'normal'
-      const style = p.italic ? 'italic' : 'normal'
+      const color = sanitizeColor((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>`
@@ -88,27 +80,27 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case 'link': {
+    case "link": {
       const href = sanitizeHref(p.href as string)
       const text = escapeXml(getTextContent(node.children))
-      const color = sanitizeColor((p.color as string) ?? '#4f46e5')
+      const color = sanitizeColor((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': {
+    case "image": {
       const width = (p.width as number) ?? Math.min(contentWidth, 400)
       const height = (p.height as number) ?? 200
       const src = sanitizeImageSrc(p.src as string)
 
-      if (src.startsWith('data:') || src.startsWith('http')) {
+      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>`
+        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
 
@@ -120,20 +112,16 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case 'table': {
-      const columns = ((p.columns ?? []) as (string | TableColumn)[]).map(
-        resolveColumn,
-      )
+    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 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 = sanitizeColor(hs?.background ?? '#f5f5f5')
-      const headerColor = sanitizeColor(hs?.color ?? '#000000')
+      const headerBg = sanitizeColor(hs?.background ?? "#f5f5f5")
+      const headerColor = sanitizeColor(hs?.color ?? "#000000")
 
       // Header
       svg += `<rect x="${ctx.padding}" y="${ctx.y}" width="${contentWidth}" height="${rowHeight}" fill="${headerBg}" />`
@@ -150,7 +138,7 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
           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>`
+          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
       }
@@ -161,15 +149,13 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case 'list': {
+    case "list": {
       const ordered = p.ordered as boolean | undefined
-      const items = node.children.filter(
-        (c): c is DocNode => typeof c !== 'string',
-      )
+      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 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>`
@@ -178,20 +164,20 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case 'code': {
+    case "code": {
       const text = getTextContent(node.children)
-      const lines = text.split('\n')
+      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>`
+        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 = sanitizeColor((p.color as string) ?? '#ddd')
+    case "divider": {
+      const color = sanitizeColor((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}" />`
@@ -199,19 +185,19 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case 'page-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':
+    case "spacer":
       ctx.y += (p.height as number) ?? 12
       break
 
-    case 'button': {
-      const bg = sanitizeColor((p.background as string) ?? '#4f46e5')
-      const color = sanitizeColor((p.color as string) ?? '#ffffff')
+    case "button": {
+      const bg = sanitizeColor((p.background as string) ?? "#4f46e5")
+      const color = sanitizeColor((p.color as string) ?? "#ffffff")
       const text = escapeXml(getTextContent(node.children))
       const btnWidth = Math.min(text.length * 10 + 48, contentWidth)
       const btnHeight = 40
@@ -222,8 +208,8 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case 'quote': {
-      const borderColor = sanitizeColor((p.borderColor as string) ?? '#ddd')
+    case "quote": {
+      const borderColor = sanitizeColor((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}" />`
@@ -245,7 +231,7 @@ export const svgRenderer: DocumentRenderer = {
     const content = renderNode(node, ctx)
     const height = ctx.y + padding
 
-    const dir = options?.direction === 'rtl' ? ' direction="rtl"' : ''
+    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" />

package/src/renderers/teams.ts

@@ -1,11 +1,5 @@
-import { sanitizeHref, sanitizeImageSrc } from '../sanitize'
-import type {
-  DocChild,
-  DocNode,
-  DocumentRenderer,
-  RenderOptions,
-  TableColumn,
-} from '../types'
+import { sanitizeHref, sanitizeImageSrc } from "../sanitize"
+import type { DocChild, DocNode, DocumentRenderer, RenderOptions, TableColumn } from "../types"
 
 /**
  * Microsoft Teams renderer — outputs Adaptive Cards JSON.
@@ -13,15 +7,13 @@ import type {
  */
 
 function resolveColumn(col: string | TableColumn): TableColumn {
-  return typeof col === 'string' ? { header: col } : col
+  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('')
+    .map((c) => (typeof c === "string" ? c : getTextContent((c as DocNode).children)))
+    .join("")
 }
 
 interface AdaptiveElement {
@@ -34,99 +26,95 @@ function nodeToElements(node: DocNode): AdaptiveElement[] {
   const elements: AdaptiveElement[] = []
 
   switch (node.type) {
-    case 'document':
-    case 'page':
-    case 'section':
-    case 'row':
-    case 'column':
+    case "document":
+    case "page":
+    case "section":
+    case "row":
+    case "column":
       for (const child of node.children) {
-        if (typeof child !== 'string') {
+        if (typeof child !== "string") {
           elements.push(...nodeToElements(child))
         }
       }
       break
 
-    case 'heading': {
+    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',
+        1: "extraLarge",
+        2: "large",
+        3: "medium",
+        4: "default",
+        5: "small",
+        6: "small",
       }
       elements.push({
-        type: 'TextBlock',
+        type: "TextBlock",
         text: getTextContent(node.children),
-        size: sizeMap[level] ?? 'large',
-        weight: 'bolder',
+        size: sizeMap[level] ?? "large",
+        weight: "bolder",
         wrap: true,
       })
       break
     }
 
-    case 'text': {
+    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',
+        type: "TextBlock",
         text,
         wrap: true,
-        ...(p.color ? { color: 'default' } : {}),
-        ...(p.size
-          ? { size: (p.size as number) >= 18 ? 'large' : 'default' }
-          : {}),
+        ...(p.color ? { color: "default" } : {}),
+        ...(p.size ? { size: (p.size as number) >= 18 ? "large" : "default" } : {}),
       })
       break
     }
 
-    case 'link': {
+    case "link": {
       const href = sanitizeHref(p.href as string)
       const text = getTextContent(node.children)
       elements.push({
-        type: 'TextBlock',
+        type: "TextBlock",
         text: `[${text}](${href})`,
         wrap: true,
       })
       break
     }
 
-    case 'image': {
+    case "image": {
       const src = sanitizeImageSrc(p.src as string)
-      if (src.startsWith('http')) {
+      if (src.startsWith("http")) {
         elements.push({
-          type: 'Image',
+          type: "Image",
           url: src,
-          altText: (p.alt as string) ?? 'Image',
-          size: 'large',
+          altText: (p.alt as string) ?? "Image",
+          size: "large",
         })
       }
       break
     }
 
-    case 'table': {
-      const columns = ((p.columns ?? []) as (string | TableColumn)[]).map(
-        resolveColumn,
-      )
+    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',
+        type: "Column",
+        width: "stretch",
         items: [
           {
-            type: 'TextBlock',
+            type: "TextBlock",
             text: `**${col.header}**`,
-            weight: 'bolder',
+            weight: "bolder",
             wrap: true,
           },
           ...rows.map((row, i) => ({
-            type: 'TextBlock',
-            text: String(row[columns.indexOf(col)] ?? ''),
+            type: "TextBlock",
+            text: String(row[columns.indexOf(col)] ?? ""),
             wrap: true,
             separator: i === 0,
           })),
@@ -134,80 +122,80 @@ function nodeToElements(node: DocNode): AdaptiveElement[] {
       }))
 
       elements.push({
-        type: 'ColumnSet',
+        type: "ColumnSet",
         columns: tableColumns,
       })
       break
     }
 
-    case 'list': {
+    case "list": {
       const ordered = p.ordered as boolean | undefined
       const items = node.children
-        .filter((c): c is DocNode => typeof c !== 'string')
+        .filter((c): c is DocNode => typeof c !== "string")
         .map((item, i) => {
-          const prefix = ordered ? `${i + 1}.` : '•'
+          const prefix = ordered ? `${i + 1}.` : "•"
           return `${prefix} ${getTextContent(item.children)}`
         })
-        .join('\n')
+        .join("\n")
       elements.push({
-        type: 'TextBlock',
+        type: "TextBlock",
         text: items,
         wrap: true,
       })
       break
     }
 
-    case 'code': {
+    case "code": {
       const text = getTextContent(node.children)
       elements.push({
-        type: 'TextBlock',
+        type: "TextBlock",
         text: `\`\`\`\n${text}\n\`\`\``,
-        fontType: 'monospace',
+        fontType: "monospace",
         wrap: true,
       })
       break
     }
 
-    case 'divider':
-    case 'page-break':
+    case "divider":
+    case "page-break":
       elements.push({
-        type: 'TextBlock',
-        text: ' ',
+        type: "TextBlock",
+        text: " ",
         separator: true,
       })
       break
 
-    case 'spacer':
+    case "spacer":
       elements.push({
-        type: 'TextBlock',
-        text: ' ',
-        spacing: 'large',
+        type: "TextBlock",
+        text: " ",
+        spacing: "large",
       })
       break
 
-    case 'button': {
+    case "button": {
       elements.push({
-        type: 'ActionSet',
+        type: "ActionSet",
         actions: [
           {
-            type: 'Action.OpenUrl',
+            type: "Action.OpenUrl",
             title: getTextContent(node.children),
             url: sanitizeHref(p.href as string),
-            style: 'positive',
+            style: "positive",
           },
         ],
       })
       break
     }
 
-    case 'quote': {
+    case "quote": {
       const text = getTextContent(node.children)
       elements.push({
-        type: 'Container',
-        style: 'emphasis',
+        type: "Container",
+        style: "emphasis",
         items: [
           {
-            type: 'TextBlock',
+            type: "TextBlock",
             text: `_${text}_`,
             wrap: true,
             isSubtle: true,
@@ -225,9 +213,9 @@ 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',
+      type: "AdaptiveCard",
+      $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
+      version: "1.5",
       body,
     }
     return JSON.stringify(card, null, 2)