@pyreon/document 0.11.4 → 0.11.6

package/src/renderers/svg.ts

@@ -1,5 +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.
@@ -8,21 +8,21 @@ import type { DocChild, DocNode, DocumentRenderer, RenderOptions, TableColumn }
  */
 
 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 {
@@ -34,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,
@@ -60,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>`
@@ -68,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>`
@@ -80,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
 
@@ -112,7 +112,7 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
       break
     }
 
-    case "table": {
+    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
@@ -120,8 +120,8 @@ function renderNode(node: DocNode, ctx: RenderContext): string {
 
       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}" />`
@@ -138,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
       }
@@ -149,13 +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>`
@@ -164,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}" />`
@@ -185,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
@@ -208,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}" />`
@@ -231,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,5 +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.
@@ -7,13 +7,13 @@ import type { DocChild, DocNode, DocumentRenderer, RenderOptions, TableColumn }
  */
 
 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 {
@@ -26,95 +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": {
+    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,
           })),
@@ -122,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,
@@ -213,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)