@svgrid/enterprise 1.2.0 → 2.0.0

package/src/export-pdf.test.ts

@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest'
+import { buildPdfDocDefinition } from './export-pdf'
+
+const columns = [
+  { header: 'Company', align: 'left' as const },
+  { header: 'Price', align: 'right' as const },
+]
+const rows = [
+  ['ACME', '$19.95'],
+  ['Globex', '$1,000.00'],
+  ['Initech', '$42.00'],
+]
+const now = new Date('2026-07-10T12:00:00Z')
+
+describe('buildPdfDocDefinition', () => {
+  it('builds a table with a bold, filled, repeated header row', () => {
+    const def = buildPdfDocDefinition({ columns, rows, now })
+    const table = (def.content.at(-1) as any).table
+    expect(table.headerRows).toBe(1)
+    expect(table.body).toHaveLength(4) // header + 3 rows
+    const header = table.body[0]
+    expect(header[0]).toMatchObject({ text: 'Company', bold: true, fillColor: '#334155' })
+    expect(header[1].alignment).toBe('right')
+  })
+
+  it('carries per-column alignment into body cells', () => {
+    const def = buildPdfDocDefinition({ columns, rows, now })
+    const table = (def.content.at(-1) as any).table
+    expect(table.body[1][0]).toMatchObject({ text: 'ACME', alignment: 'left' })
+    expect(table.body[1][1]).toMatchObject({ text: '$19.95', alignment: 'right' })
+  })
+
+  it('zebra-stripes even body rows but not the header', () => {
+    const def = buildPdfDocDefinition({ columns, rows, now })
+    const layout = (def.content.at(-1) as any).layout
+    expect(layout.fillColor(0)).toBeNull() // header
+    expect(layout.fillColor(1)).toBeNull() // odd body row
+    expect(layout.fillColor(2)).toBe('#f1f5f9') // even body row
+  })
+
+  it('defaults A4 portrait, auto-landscape for wide grids', () => {
+    const narrow = buildPdfDocDefinition({ columns, rows, now })
+    expect(narrow.pageSize).toBe('A4')
+    expect(narrow.pageOrientation).toBe('portrait')
+
+    const wideCols = Array.from({ length: 10 }, (_, i) => ({ header: `C${i}` }))
+    const wide = buildPdfDocDefinition({ columns: wideCols, rows: [], now })
+    expect(wide.pageOrientation).toBe('landscape')
+
+    const forced = buildPdfDocDefinition({ columns: wideCols, rows: [], opts: { pageOrientation: 'portrait' }, now })
+    expect(forced.pageOrientation).toBe('portrait')
+  })
+
+  it('renders title / subtitle / logo before the table', () => {
+    const def = buildPdfDocDefinition({
+      columns,
+      rows,
+      opts: { title: 'Orders', subtitle: 'Q3', logo: 'data:image/png;base64,AAAA' },
+      now,
+    })
+    expect((def.content[0] as any).image).toBe('data:image/png;base64,AAAA')
+    expect((def.content[1] as any).text).toBe('Orders')
+    expect((def.content[2] as any).text).toBe('Q3')
+  })
+
+  it('emits a "Page X of Y" + date footer by default, suppressible', () => {
+    const def = buildPdfDocDefinition({ columns, rows, now })
+    expect(def.footer).toBeTypeOf('function')
+    const footer = def.footer!(2, 5) as any
+    expect(footer.columns[0].text).toBe('2026-07-10')
+    expect(footer.columns[1].text).toBe('Page 2 of 5')
+
+    const noFooter = buildPdfDocDefinition({ columns, rows, opts: { showPageNumbers: false }, now })
+    expect(noFooter.footer).toBeUndefined()
+  })
+
+  it('renders a structured body with group + subtotal rows', () => {
+    const def = buildPdfDocDefinition({
+      columns,
+      body: [
+        { kind: 'group', label: 'Region: North (2)', level: 0 },
+        { kind: 'data', cells: ['ACME', '$19.95'] },
+        { kind: 'data', cells: ['Globex', '$1,000.00'] },
+        { kind: 'subtotal', cells: ['Subtotal', '$1,019.95'] },
+      ],
+      now,
+    })
+    const table = (def.content.at(-1) as any).table
+    expect(table.body).toHaveLength(5) // header + group + 2 data + subtotal
+    // Group header spans all columns, bold + filled.
+    expect(table.body[1][0]).toMatchObject({ text: 'Region: North (2)', colSpan: 2, bold: true })
+    // Subtotal row is bold + filled.
+    expect(table.body[4][1]).toMatchObject({ text: '$1,019.95', bold: true, fillColor: '#f8fafc' })
+    // Zebra only stripes plain data rows, never group / subtotal.
+    const layout = (def.content.at(-1) as any).layout
+    expect(layout.fillColor(1)).toBeNull() // group row
+    expect(layout.fillColor(4)).toBeNull() // subtotal row
+  })
+
+  it('applies dataCellStyle (conditional formatting) to data cells only', () => {
+    const def = buildPdfDocDefinition({
+      columns,
+      rows,
+      dataCellStyle: (r, c) =>
+        r === 0 && c === 1 ? { fill: '#fee2e2', color: '#991b1b', bold: true } : undefined,
+      now,
+    })
+    const table = (def.content.at(-1) as any).table
+    expect(table.body[1][1]).toMatchObject({ fillColor: '#fee2e2', color: '#991b1b', bold: true })
+    expect(table.body[2][1].fillColor).toBeUndefined() // other cells untouched
+  })
+
+  it('adds a hyperlink to a data cell', () => {
+    const def = buildPdfDocDefinition({
+      columns,
+      rows,
+      dataCellLink: (r, c) => (r === 0 && c === 0 ? 'https://x.test' : undefined),
+      now,
+    })
+    const table = (def.content.at(-1) as any).table
+    expect(table.body[1][0]).toMatchObject({ link: 'https://x.test', decoration: 'underline' })
+    expect(table.body[2][0].link).toBeUndefined()
+  })
+
+  it('honors explicit column widths + margins + theme colors', () => {
+    const def = buildPdfDocDefinition({
+      columns,
+      rows,
+      opts: { columnWidths: [80, '*'], margins: [10, 10, 10, 10], headerColor: '#111827', zebra: false },
+      now,
+    })
+    const table = (def.content[0] as any).table
+    expect(table.widths).toEqual([80, '*'])
+    expect(def.pageMargins).toEqual([10, 10, 10, 10])
+    expect(table.body[0][0].fillColor).toBe('#111827')
+    expect((def.content[0] as any).layout.fillColor(2)).toBeNull() // zebra off
+  })
+})

package/src/export-pdf.ts

@@ -0,0 +1,245 @@
+/**
+ * PDF export via our own pdfmake document definition, instead of the vendored
+ * Smart exporter's basic table dump. This gives real control over the page:
+ * size / orientation / margins, a repeated header row on every page, automatic
+ * "Page X of Y" + generated-date footer, per-column alignment and widths, an
+ * optional title / subtitle / logo, and theme colors (header fill + zebra).
+ *
+ * `buildPdfDocDefinition` is a PURE function (no pdfmake, no DOM) returning the
+ * docDefinition object, so it's fully unit-testable; `exportGrid` feeds the
+ * result to `pdfMake.createPdf(def).download(...)`.
+ */
+
+export type PdfPageSize = 'A4' | 'A3' | 'A5' | 'LETTER' | 'LEGAL'
+
+export type PdfExportOptions = {
+  pageSize?: PdfPageSize
+  pageOrientation?: 'portrait' | 'landscape'
+  /** [left, top, right, bottom] in pt. Default [28, 34, 28, 34]. */
+  margins?: [number, number, number, number]
+  /** Document title rendered above the table. */
+  title?: string
+  /** Smaller line under the title. */
+  subtitle?: string
+  /** Logo as a data URL, rendered top-left above the title. */
+  logo?: string
+  /** Logo width in pt (height auto). Default 90. */
+  logoWidth?: number
+  /** Base font size in pt. Default 8. */
+  fontSize?: number
+  /** Header row fill color. Default '#334155'. */
+  headerColor?: string
+  /** Header row text color. Default '#ffffff'. */
+  headerTextColor?: string
+  /** Zebra-stripe alternate rows. Default true. */
+  zebra?: boolean
+  /** Zebra fill color. Default '#f1f5f9'. */
+  zebraColor?: string
+  /** Repeat the header row on every page. Default true. */
+  repeatHeader?: boolean
+  /** Show the "Page X of Y" + date footer. Default true. */
+  showPageNumbers?: boolean
+  /**
+   * Column widths: '*' (fill, default), 'auto', or an explicit array of
+   * pt numbers / 'auto' / '*' per column.
+   */
+  columnWidths?: '*' | 'auto' | Array<number | 'auto' | '*'>
+  /** Switch to landscape automatically when column count exceeds this (and no
+   *  explicit orientation was set). Default 8. */
+  autoLandscapeThreshold?: number
+  /** Group header row fill color. Default '#e2e8f0'. */
+  groupColor?: string
+  /** Group header row text color. Default '#0f172a'. */
+  groupTextColor?: string
+  /** Subtotal row fill color. Default '#f8fafc'. */
+  subtotalColor?: string
+}
+
+/**
+ * A body row for the PDF table. `data` is a normal row; `group` is a bold,
+ * full-width group header (from grid grouping); `subtotal` is a per-group
+ * summary row (bold, aligned like the data).
+ */
+export type PdfBodyRow =
+  | { kind: 'data'; cells: ReadonlyArray<string> }
+  | { kind: 'group'; label: string; level?: number }
+  | { kind: 'subtotal'; cells: ReadonlyArray<string> }
+
+type PdfCell = {
+  text: string
+  bold?: boolean
+  alignment?: 'left' | 'center' | 'right'
+  color?: string
+  fillColor?: string
+  colSpan?: number
+  margin?: [number, number, number, number]
+  link?: string
+  decoration?: string
+}
+
+export type PdfDocDefinition = {
+  pageSize: PdfPageSize
+  pageOrientation: 'portrait' | 'landscape'
+  pageMargins: [number, number, number, number]
+  defaultStyle: { fontSize: number }
+  content: unknown[]
+  footer?: (currentPage: number, pageCount: number) => unknown
+}
+
+/**
+ * Build a pdfmake docDefinition from resolved columns + formatted string rows.
+ * `now` is injected for a deterministic footer date in tests.
+ */
+export function buildPdfDocDefinition(params: {
+  columns: ReadonlyArray<{ header: string; align?: 'left' | 'center' | 'right' }>
+  /** Data rows as pre-formatted strings, in column order (no header row).
+   *  Convenience for the flat (ungrouped) case. */
+  rows?: ReadonlyArray<ReadonlyArray<string>>
+  /** Structured body with group headers + subtotals. Takes precedence over
+   *  `rows` when provided (used for grouped exports). */
+  body?: ReadonlyArray<PdfBodyRow>
+  /** Per-data-cell visual override (conditional formatting). `dataRowIdx` is
+   *  the 0-based index among data rows. */
+  dataCellStyle?: (dataRowIdx: number, colIdx: number) => { fill?: string; color?: string; bold?: boolean } | undefined
+  /** Per-data-cell hyperlink URL. */
+  dataCellLink?: (dataRowIdx: number, colIdx: number) => string | undefined
+  opts?: PdfExportOptions
+  now?: Date
+}): PdfDocDefinition {
+  const { columns } = params
+  const o = params.opts ?? {}
+  const now = params.now ?? new Date(0)
+
+  const fontSize = o.fontSize ?? 8
+  const headerColor = o.headerColor ?? '#334155'
+  const headerTextColor = o.headerTextColor ?? '#ffffff'
+  const zebra = o.zebra ?? true
+  const zebraColor = o.zebraColor ?? '#f1f5f9'
+  const groupColor = o.groupColor ?? '#e2e8f0'
+  const groupTextColor = o.groupTextColor ?? '#0f172a'
+  const subtotalColor = o.subtotalColor ?? '#f8fafc'
+  const repeatHeader = o.repeatHeader ?? true
+
+  const orientation: 'portrait' | 'landscape' =
+    o.pageOrientation ??
+    (columns.length > (o.autoLandscapeThreshold ?? 8) ? 'landscape' : 'portrait')
+
+  const widths: Array<number | 'auto' | '*'> = Array.isArray(o.columnWidths)
+    ? o.columnWidths
+    : columns.map(() => (o.columnWidths === 'auto' ? 'auto' : '*'))
+
+  // Header row.
+  const headerRow: PdfCell[] = columns.map((c) => ({
+    text: c.header,
+    bold: true,
+    alignment: c.align ?? 'left',
+    color: headerTextColor,
+    fillColor: headerColor,
+  }))
+
+  // Normalize to a structured body: `body` wins, else wrap flat `rows`.
+  const model: ReadonlyArray<PdfBodyRow> =
+    params.body ?? (params.rows ?? []).map((cells) => ({ kind: 'data', cells }))
+
+  // Track which body-row indices are plain data rows, so zebra striping only
+  // hits those (group / subtotal rows carry their own fill).
+  const dataCellStyle = params.dataCellStyle
+  const dataCellLink = params.dataCellLink
+  let dataOrdinal = 0
+  const dataRowIdx = new Set<number>()
+  const bodyCells: PdfCell[][] = [headerRow]
+  model.forEach((row, i) => {
+    const bi = i + 1 // +1 for the header row
+    if (row.kind === 'group') {
+      const first: PdfCell = {
+        text: row.label,
+        bold: true,
+        color: groupTextColor,
+        fillColor: groupColor,
+        colSpan: columns.length,
+        margin: [(row.level ?? 0) * 12, 2, 0, 2],
+      }
+      const rest: PdfCell[] = Array.from({ length: Math.max(0, columns.length - 1) }, () => ({ text: '' }))
+      bodyCells.push([first, ...rest])
+    } else if (row.kind === 'subtotal') {
+      bodyCells.push(
+        columns.map((c, ci) => ({
+          text: row.cells[ci] ?? '',
+          bold: true,
+          alignment: c.align ?? 'left',
+          fillColor: subtotalColor,
+        })),
+      )
+    } else {
+      dataRowIdx.add(bi)
+      const ord = dataOrdinal++
+      bodyCells.push(
+        columns.map((c, ci) => {
+          const cell: PdfCell = { text: row.cells[ci] ?? '', alignment: c.align ?? 'left' }
+          const s = dataCellStyle?.(ord, ci)
+          if (s) {
+            if (s.fill) cell.fillColor = s.fill
+            if (s.color) cell.color = s.color
+            if (s.bold) cell.bold = true
+          }
+          const href = dataCellLink?.(ord, ci)
+          if (href) {
+            cell.link = href
+            cell.decoration = 'underline'
+            if (!s?.color) cell.color = '#2563eb'
+          }
+          return cell
+        }),
+      )
+    }
+  })
+
+  const table = {
+    table: {
+      headerRows: repeatHeader ? 1 : 0,
+      dontBreakRows: true,
+      widths,
+      body: bodyCells,
+    },
+    layout: {
+      // Zebra fill: only plain data rows (group / subtotal have their own).
+      fillColor: (rowIndex: number) =>
+        zebra && rowIndex > 0 && rowIndex % 2 === 0 && dataRowIdx.has(rowIndex) ? zebraColor : null,
+      hLineWidth: () => 0.5,
+      vLineWidth: () => 0.5,
+      hLineColor: () => '#e2e8f0',
+      vLineColor: () => '#e2e8f0',
+      paddingTop: () => 3,
+      paddingBottom: () => 3,
+      paddingLeft: () => 5,
+      paddingRight: () => 5,
+    },
+  }
+
+  const content: unknown[] = []
+  if (o.logo) content.push({ image: o.logo, width: o.logoWidth ?? 90, margin: [0, 0, 0, 8] })
+  if (o.title) content.push({ text: o.title, fontSize: fontSize + 8, bold: true, margin: [0, 0, 0, 2] })
+  if (o.subtitle) content.push({ text: o.subtitle, fontSize: fontSize + 1, color: '#64748b', margin: [0, 0, 0, 8] })
+  content.push(table)
+
+  const def: PdfDocDefinition = {
+    pageSize: o.pageSize ?? 'A4',
+    pageOrientation: orientation,
+    pageMargins: o.margins ?? [28, 34, 28, 34],
+    defaultStyle: { fontSize },
+    content,
+  }
+
+  if (o.showPageNumbers ?? true) {
+    const dateStr = now.toISOString().slice(0, 10)
+    def.footer = (currentPage: number, pageCount: number) => ({
+      margin: [28, 6, 28, 0],
+      columns: [
+        { text: dateStr, alignment: 'left', fontSize: 7, color: '#94a3b8' },
+        { text: `Page ${currentPage} of ${pageCount}`, alignment: 'right', fontSize: 7, color: '#94a3b8' },
+      ],
+    })
+  }
+
+  return def
+}

package/src/export-print.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { buildPrintDocument } from './export-print'
+
+const columns = [
+  { header: 'Company', align: 'left' as const },
+  { header: 'Price', align: 'right' as const },
+]
+const rows = [
+  ['ACME', '$19.95'],
+  ['Globex', '$1,000.00'],
+]
+
+describe('buildPrintDocument', () => {
+  it('repeats the header, aligns columns, sets page size, and zebra-stripes', () => {
+    const html = buildPrintDocument({
+      columns,
+      rows,
+      opts: { title: 'Orders', orientation: 'landscape', pageSize: 'A4' },
+    })
+    expect(html).toContain('display: table-header-group') // repeated header
+    expect(html).toContain('@page { size: A4 landscape;')
+    expect(html).toContain('<th style="text-align:right">Price</th>')
+    expect(html).toContain('<td style="text-align:right">$19.95</td>')
+    expect(html).toContain('<h1>Orders</h1>')
+    expect(html).toContain('nth-child(even)')
+  })
+
+  it('escapes HTML and supports subtitle / logo / no-zebra', () => {
+    const html = buildPrintDocument({
+      columns,
+      rows: [['<b>x</b>', '1']],
+      opts: { zebra: false, subtitle: 'Q3', logo: 'data:image/png;base64,AA' },
+    })
+    expect(html).toContain('&lt;b&gt;x&lt;/b&gt;')
+    expect(html).not.toContain('nth-child(even)')
+    expect(html).toContain('<p class="subtitle">Q3</p>')
+    expect(html).toContain('src="data:image/png;base64,AA"')
+  })
+
+  it('defaults to portrait with a 14mm margin', () => {
+    const html = buildPrintDocument({ columns, rows })
+    expect(html).toContain('@page { size: portrait; margin: 14mm;')
+  })
+
+  it('renders hyperlinks from a cellLink hook', () => {
+    const html = buildPrintDocument({
+      columns,
+      rows,
+      cellLink: (r, c) => (r === 0 && c === 0 ? 'https://x.test' : undefined),
+    })
+    expect(html).toContain('<a href="https://x.test">ACME</a>')
+  })
+
+  it('applies conditional-format cell styles + icon prefix', () => {
+    const html = buildPrintDocument({
+      columns,
+      rows,
+      cellStyle: (r, c) =>
+        r === 0 && c === 1 ? { fill: '#dcfce7', color: '#166534', bold: true, icon: '↑' } : undefined,
+    })
+    expect(html).toContain('background:#dcfce7')
+    expect(html).toContain('color:#166534')
+    expect(html).toContain('font-weight:700')
+    expect(html).toContain('↑ $19.95')
+  })
+})

package/src/export-print.ts

@@ -0,0 +1,132 @@
+/**
+ * Pure HTML builder for the print view. `printGrid` opens this document in a
+ * new window and calls `window.print()`, so the user can print or "Save as
+ * PDF" using the browser's own engine (great font + CSS fidelity, CJK / RTL,
+ * zero dependency). Kept pure (no DOM) so it's unit-testable.
+ *
+ * The upgrades over a plain table dump: page size / orientation / margins via
+ * `@page`, a header row that repeats on every printed page
+ * (`display: table-header-group`), per-column alignment, zebra striping, and an
+ * optional title / subtitle / logo band. Browsers add their own page-number
+ * header/footer through the print dialog.
+ */
+
+export type PrintDocOptions = {
+  title?: string
+  subtitle?: string
+  /** Logo data URL, shown above the title. */
+  logo?: string
+  /** Logo width in px. Default 120. */
+  logoWidth?: number
+  orientation?: 'portrait' | 'landscape'
+  /** `@page size` keyword, e.g. 'A4' | 'Letter'. Combined with orientation. */
+  pageSize?: string
+  /** `@page margin`, e.g. '14mm'. Default '14mm'. */
+  margin?: string
+  /** Zebra-stripe rows. Default true. */
+  zebra?: boolean
+  zebraColor?: string
+  /** Header row background. Default '#f1f5f9'. */
+  headerColor?: string
+  headerTextColor?: string
+  /** Body font size in pt. Default 9. */
+  fontSize?: number
+}
+
+const HTML_ESCAPE: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+}
+function esc(value: unknown): string {
+  const s = value == null ? '' : String(value)
+  return s.replace(/[&<>"']/g, (c) => HTML_ESCAPE[c]!)
+}
+
+/**
+ * Build a standalone, print-ready HTML document from resolved columns +
+ * pre-formatted string rows.
+ */
+export type PrintCellVisual = { fill?: string; color?: string; bold?: boolean; icon?: string }
+
+export function buildPrintDocument(params: {
+  columns: ReadonlyArray<{ header: string; align?: 'left' | 'center' | 'right' }>
+  rows: ReadonlyArray<ReadonlyArray<string>>
+  /** Per-data-cell conditional-format visual. */
+  cellStyle?: (rowIdx: number, colIdx: number) => PrintCellVisual | undefined
+  /** Per-data-cell hyperlink URL. */
+  cellLink?: (rowIdx: number, colIdx: number) => string | undefined
+  opts?: PrintDocOptions
+}): string {
+  const { columns, rows } = params
+  const cellStyle = params.cellStyle
+  const cellLink = params.cellLink
+  const o = params.opts ?? {}
+  const orientation = o.orientation ?? 'portrait'
+  const size = o.pageSize ? `${o.pageSize} ${orientation}` : orientation
+  const margin = o.margin ?? '14mm'
+  const zebra = o.zebra ?? true
+  const zebraColor = o.zebraColor ?? '#f6f8fa'
+  const headerColor = o.headerColor ?? '#f1f5f9'
+  const headerTextColor = o.headerTextColor ?? '#0f172a'
+  const fontSize = o.fontSize ?? 9
+
+  const alignStyle = (a?: 'left' | 'center' | 'right') =>
+    a && a !== 'left' ? ` style="text-align:${a}"` : ''
+
+  const thead =
+    '<thead><tr>' +
+    columns.map((c) => `<th${alignStyle(c.align)}>${esc(c.header)}</th>`).join('') +
+    '</tr></thead>'
+
+  const cellHtml = (c: { align?: 'left' | 'center' | 'right' }, value: string, ri: number, ci: number) => {
+    const styles: string[] = []
+    if (c.align && c.align !== 'left') styles.push(`text-align:${c.align}`)
+    const cf = cellStyle?.(ri, ci)
+    if (cf?.fill) styles.push(`background:${cf.fill}`)
+    if (cf?.color) styles.push(`color:${cf.color}`)
+    if (cf?.bold) styles.push('font-weight:700')
+    const style = styles.length ? ` style="${styles.join(';')}"` : ''
+    let text = cf?.icon ? `${esc(cf.icon)} ${esc(value)}` : esc(value)
+    const href = cellLink?.(ri, ci)
+    if (href) text = `<a href="${esc(href)}">${text}</a>`
+    return `<td${style}>${text}</td>`
+  }
+  const tbody =
+    '<tbody>' +
+    rows
+      .map(
+        (r, ri) =>
+          '<tr>' + columns.map((c, ci) => cellHtml(c, r[ci] ?? '', ri, ci)).join('') + '</tr>',
+      )
+      .join('') +
+    '</tbody>'
+
+  const band: string[] = []
+  if (o.logo) band.push(`<img class="logo" src="${esc(o.logo)}" alt="" />`)
+  if (o.title) band.push(`<h1>${esc(o.title)}</h1>`)
+  if (o.subtitle) band.push(`<p class="subtitle">${esc(o.subtitle)}</p>`)
+
+  return `<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>${esc(o.title ?? 'Grid')}</title>
+<style>
+  @page { size: ${size}; margin: ${margin}; }
+  @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
+  body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #111; margin: 0; }
+  .logo { max-height: ${o.logoWidth ? '' : '48px'}; width: ${o.logoWidth ? `${o.logoWidth}px` : 'auto'}; display: block; margin-bottom: 8px; }
+  h1 { font-size: 16pt; margin: 0 0 2px 0; }
+  .subtitle { font-size: 10pt; color: #64748b; margin: 0 0 10px 0; }
+  table { border-collapse: collapse; width: 100%; font-size: ${fontSize}pt; }
+  thead { display: table-header-group; }
+  tr { break-inside: avoid; }
+  th, td { border: 1px solid #cbd5e1; padding: 4px 7px; text-align: left; }
+  th { background: ${headerColor}; color: ${headerTextColor}; font-weight: 700; }
+  ${zebra ? `tbody tr:nth-child(even) { background: ${zebraColor}; }` : ''}
+</style></head>
+<body>
+  ${band.join('\n  ')}
+  <table>${thead}${tbody}</table>
+</body></html>`
+}

package/src/export-serialize.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from 'vitest'
+import { serializeDelimited, serializeHtml } from './export-serialize'
+
+const header = { name: 'Name', note: 'Note', amount: 'Amount' }
+const fields = ['name', 'note', 'amount']
+
+describe('serializeDelimited (CSV)', () => {
+  it('writes a BOM + CRLF rows by default', async () => {
+    const out = await serializeDelimited([header, { name: 'A', note: 'x', amount: '1' }], fields)
+    expect(out.charCodeAt(0)).toBe(0xfeff) // BOM
+    expect(out).toContain('Name,Note,Amount\r\nA,x,1')
+  })
+
+  it('RFC-4180 quotes values with commas, quotes, and newlines', async () => {
+    const rows = [
+      header,
+      { name: 'Doe, John', note: 'say "hi"', amount: 'line1\nline2' },
+    ]
+    const out = await serializeDelimited(rows, fields, { csv: { bom: false } })
+    expect(out).toContain('"Doe, John"')
+    expect(out).toContain('"say ""hi"""')
+    expect(out).toContain('"line1\nline2"')
+  })
+
+  it('honors a custom delimiter and no-BOM (TSV-style)', async () => {
+    const out = await serializeDelimited([header, { name: 'A', note: 'b', amount: 'c' }], fields, {
+      csv: { delimiter: '\t', bom: false },
+    })
+    expect(out.startsWith('Name\tNote\tAmount')).toBe(true)
+  })
+
+  it('reports progress and can be aborted', async () => {
+    const many = [header, ...Array.from({ length: 20 }, (_, i) => ({ name: `n${i}`, note: '', amount: `${i}` }))]
+    const onProgress = vi.fn()
+    await serializeDelimited(many, fields, { onProgress, chunkRows: 5 })
+    expect(onProgress).toHaveBeenCalled()
+    expect(onProgress.mock.calls.at(-1)![0].ratio).toBe(1)
+
+    const ctrl = new AbortController()
+    ctrl.abort()
+    await expect(serializeDelimited(many, fields, { signal: ctrl.signal })).rejects.toMatchObject({
+      name: 'AbortError',
+    })
+  })
+})
+
+describe('serializeHtml', () => {
+  it('escapes HTML and applies column alignment', async () => {
+    const rows = [header, { name: '<b>A</b>', note: 'x & y', amount: '10' }]
+    const out = await serializeHtml(rows, fields, { align: { amount: 'right' } })
+    expect(out).toContain('&lt;b&gt;A&lt;/b&gt;')
+    expect(out).toContain('x &amp; y')
+    expect(out).toContain('<td style="text-align:right">10</td>')
+    expect(out).toContain('<th>Name</th>')
+  })
+})

package/src/export-serialize.ts

@@ -0,0 +1,24 @@
+/**
+ * The text serializers + delivery helpers moved into the FREE grid package
+ * (CSV / TSV / JSON export + clipboard now ship in @svgrid/grid). Enterprise
+ * re-uses that one implementation for its richer paths (styled HTML, xls, the
+ * xlsx/pdf blob download) instead of maintaining a second copy.
+ *
+ * Kept as a thin re-export from the Svelte-free `@svgrid/grid/format` subpath
+ * so existing imports (and the test mocks that target this module path) keep
+ * working unchanged.
+ */
+export {
+  serializeDelimited,
+  serializeJson,
+  serializeHtml,
+  serializeMarkdown,
+  serializeXml,
+  downloadBlobFile,
+  downloadTextFile,
+  copyTextToClipboard,
+  type CsvOptions,
+  type SerializeOptions,
+  type SerializeProgress,
+  type ExportCellVisual,
+} from '@svgrid/grid/format'