@zombie-mermaid/ascii-renderer 2.2.1

package/src/__tests__/ascii-shape-rounded.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { roundedRenderer } from '../shapes/rounded.ts'
+import { canvasToString } from '../canvas.ts'
+import type { ShapeRenderOptions } from '../shapes/types.ts'
+
+describe('roundedRenderer.render', () => {
+  it('draws Unicode rounded corners around a single-line label', () => {
+    const options: ShapeRenderOptions = { useAscii: false, padding: 1 }
+    const dimensions = roundedRenderer.getDimensions('Start', options)
+    const canvas = roundedRenderer.render('Start', dimensions, options)
+    const text = canvasToString(canvas)
+
+    const lines = text.split('\n')
+    expect(lines[0]!.startsWith('╭')).toBe(true)
+    expect(lines[0]!.endsWith('╮')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith('╰')).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith('╯')).toBe(true)
+    expect(text).toContain('Start')
+  })
+
+  it('draws ASCII rounded corners around a multi-line label', () => {
+    const options: ShapeRenderOptions = { useAscii: true, padding: 2 }
+    const label = 'Hello\nWorld'
+    const dimensions = roundedRenderer.getDimensions(label, options)
+    const canvas = roundedRenderer.render(label, dimensions, options)
+    const text = canvasToString(canvas)
+
+    const lines = text.split('\n')
+    expect(lines[0]!.startsWith('.')).toBe(true)
+    expect(lines[0]!.endsWith('.')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith("'")).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith("'")).toBe(true)
+    expect(text).toContain('Hello')
+    expect(text).toContain('World')
+  })
+})

package/src/__tests__/ascii-shapes-circle.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { circleRenderer } from '../shapes/circle.ts'
+import { canvasToString } from '../canvas.ts'
+import type { ShapeRenderOptions } from '../shapes/types.ts'
+
+function render(label: string, options: ShapeRenderOptions): string {
+  const dimensions = circleRenderer.getDimensions(label, options)
+  const canvas = circleRenderer.render(label, dimensions, options)
+  return canvasToString(canvas)
+}
+
+describe('circleRenderer', () => {
+  it('renders unicode circle corner markers around a short label', () => {
+    const output = render('Hi', { useAscii: false, padding: 1 })
+
+    expect(output).toBe(
+      ['◯────◯', '│    │', '│ Hi │', '│    │', '◯────◯'].join('\n'),
+    )
+  })
+
+  it('renders ascii circle corner markers around a short label', () => {
+    const output = render('Hi', { useAscii: true, padding: 1 })
+
+    expect(output).toBe(
+      ['o----o', '|    |', '| Hi |', '|    |', 'o----o'].join('\n'),
+    )
+  })
+
+  it('grows to fit a longer label and keeps it centered', () => {
+    const output = render('Longer Label', { useAscii: false, padding: 2 })
+    const lines = output.split('\n')
+
+    expect(lines[0]).toBe('◯' + '─'.repeat(16) + '◯')
+    expect(lines[lines.length - 1]).toBe('◯' + '─'.repeat(16) + '◯')
+    expect(lines.some((l) => l.includes('Longer Label'))).toBe(true)
+    for (const line of lines.slice(1, -1)) {
+      expect(line.startsWith('│')).toBe(true)
+      expect(line.endsWith('│')).toBe(true)
+    }
+  })
+})

package/src/__tests__/ascii-shapes-hexagon.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { hexagonRenderer } from '../shapes/hexagon.ts'
+import { canvasToString } from '../canvas.ts'
+import type { ShapeRenderOptions } from '../shapes/types.ts'
+
+describe('hexagonRenderer.render', () => {
+  it('draws Unicode hexagon corner markers around a single-line label', () => {
+    const options: ShapeRenderOptions = { useAscii: false, padding: 1 }
+    const dimensions = hexagonRenderer.getDimensions('Step', options)
+
+    const canvas = hexagonRenderer.render('Step', dimensions, options)
+    const text = canvasToString(canvas)
+    const lines = text.split('\n')
+
+    expect(lines[0]).toMatch(/^⌜─+⌝$/)
+    expect(lines[lines.length - 1]).toMatch(/^⌞─+⌟$/)
+    expect(text).toContain('Step')
+    for (const line of lines.slice(1, -1)) {
+      expect(line.startsWith('│')).toBe(true)
+      expect(line.endsWith('│')).toBe(true)
+    }
+  })
+
+  it('draws ASCII hexagon corner markers around a multi-line label', () => {
+    const options: ShapeRenderOptions = { useAscii: true, padding: 1 }
+    const label = 'Long\nLabel'
+    const dimensions = hexagonRenderer.getDimensions(label, options)
+
+    const canvas = hexagonRenderer.render(label, dimensions, options)
+    const text = canvasToString(canvas)
+    const lines = text.split('\n')
+
+    expect(lines[0]).toMatch(/^\*-+\*$/)
+    expect(lines[lines.length - 1]).toMatch(/^\*-+\*$/)
+    expect(text).toContain('Long')
+    expect(text).toContain('Label')
+    for (const line of lines.slice(1, -1)) {
+      expect(line.startsWith('|')).toBe(true)
+      expect(line.endsWith('|')).toBe(true)
+    }
+  })
+})

package/src/__tests__/ascii-shapes-special.test.ts

@@ -0,0 +1,344 @@
+/**
+ * Coverage for src/ascii/shapes/special.ts — the "special" flowchart node
+ * shapes: subroutine `[[text]]`, doublecircle `(((text)))`, cylinder
+ * `[(text)]`, asymmetric `>text]`, trapezoid `[/text\]`, and trapezoid-alt
+ * `[\text/]`. None of these shapes were exercised anywhere before this file.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { canvasToString } from '../canvas.ts'
+import { Up, Down, Left, Right } from '../types.ts'
+import {
+  subroutineRenderer,
+  doublecircleRenderer,
+  cylinderRenderer,
+  asymmetricRenderer,
+  trapezoidRenderer,
+  parallelogramRenderer,
+  parallelogramAltRenderer,
+  trapezoidAltRenderer,
+} from '../shapes/special.ts'
+import type { ShapeRenderOptions } from '../shapes/types.ts'
+
+const unicodeOpts: ShapeRenderOptions = { useAscii: false, padding: 1 }
+const asciiOpts: ShapeRenderOptions = { useAscii: true, padding: 1 }
+
+describe('subroutine shape [[text]]', () => {
+  it('renders with its distinctive corner markers in a flowchart', () => {
+    const src = `flowchart TD
+  A[[Subroutine]]`
+    const out = renderMermaidASCII(src, { useAscii: false })
+    expect(out).toContain('Subroutine')
+    expect(out).toContain('╟')
+    expect(out).toContain('╢')
+  })
+
+  it('renders the ASCII fallback in a flowchart', () => {
+    const src = `flowchart TD
+  A[[Task]]`
+    const out = renderMermaidASCII(src, { useAscii: true })
+    expect(out).toContain('Task')
+  })
+
+  it('computes dimensions with double borders on each side', () => {
+    const dims = subroutineRenderer.getDimensions('Hi', unicodeOpts)
+    expect(dims.gridColumns).toEqual([2, 4, 2])
+    expect(dims.gridRows).toEqual([1, 3, 1])
+    expect(dims.width).toBe(8)
+    expect(dims.height).toBe(5)
+  })
+
+  it('draws double vertical bars on each side and centers the label', () => {
+    const dims = subroutineRenderer.getDimensions('Hi', unicodeOpts)
+    const canvas = subroutineRenderer.render('Hi', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]).toBe('┌┬────┬┐')
+    expect(lines[lines.length - 1]).toBe('└┴────┴┘')
+    expect(lines.some((l) => l.includes('Hi'))).toBe(true)
+    for (const line of lines.slice(1, -1)) {
+      expect(line.slice(0, 2)).toBe('││')
+      expect(line.slice(-2)).toBe('││')
+    }
+  })
+
+  it('draws ASCII "+" borders when useAscii is set', () => {
+    const dims = subroutineRenderer.getDimensions('Hi', asciiOpts)
+    const canvas = subroutineRenderer.render('Hi', dims, asciiOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]).toBe('++----++')
+    expect(lines[lines.length - 1]).toBe('++----++')
+  })
+
+  it('stacks multiline labels centered vertically', () => {
+    const dims = subroutineRenderer.getDimensions('one\ntwo', unicodeOpts)
+    const canvas = subroutineRenderer.render('one\ntwo', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    expect(str).toContain('one')
+    expect(str).toContain('two')
+  })
+
+  it('clips label cells that fall outside the pre-computed box bounds', () => {
+    const dims = subroutineRenderer.getDimensions('Hi', unicodeOpts)
+    const canvas = subroutineRenderer.render(
+      'Much Too Wide For This Box',
+      dims,
+      unicodeOpts,
+    )
+    expect(() => canvasToString(canvas)).not.toThrow()
+  })
+
+  it('reuses the shared box attachment point logic', () => {
+    const dims = subroutineRenderer.getDimensions('Hi', unicodeOpts)
+    const base = { x: 0, y: 0 }
+    expect(subroutineRenderer.getAttachmentPoint(Down, dims, base)).toEqual({
+      x: Math.floor(dims.width / 2),
+      y: dims.height - 1,
+    })
+    expect(subroutineRenderer.getAttachmentPoint(Up, dims, base)).toEqual({
+      x: Math.floor(dims.width / 2),
+      y: 0,
+    })
+  })
+})
+
+describe('doublecircle shape (((text)))', () => {
+  it('renders concentric-circle corner markers in a flowchart', () => {
+    const src = `flowchart TD
+  A(((Final)))`
+    const out = renderMermaidASCII(src, { useAscii: false })
+    expect(out).toContain('Final')
+    expect(out).toContain('◎')
+  })
+
+  it('renders the ASCII fallback marker', () => {
+    const src = `flowchart TD
+  A(((Done)))`
+    const out = renderMermaidASCII(src, { useAscii: true })
+    expect(out).toContain('Done')
+    expect(out).toContain('@')
+  })
+
+  it('delegates to the shared box renderer with doublecircle corners', () => {
+    const dims = doublecircleRenderer.getDimensions('X', unicodeOpts)
+    const canvas = doublecircleRenderer.render('X', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]!.startsWith('◎')).toBe(true)
+    expect(lines[0]!.endsWith('◎')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith('◎')).toBe(true)
+  })
+})
+
+describe('cylinder shape [(text)]', () => {
+  it('renders a database cylinder in a flowchart', () => {
+    const src = `flowchart TD
+  A[(Database)]`
+    const out = renderMermaidASCII(src, { useAscii: false })
+    expect(out).toContain('Database')
+    expect(out).toMatch(/╭─+╮/)
+    expect(out).toMatch(/╰─+╯/)
+  })
+
+  it('renders ASCII-charset ellipse fallback characters', () => {
+    const src = `flowchart TD
+  A[(Store)]`
+    const out = renderMermaidASCII(src, { useAscii: true })
+    expect(out).toContain('Store')
+    expect(out).toMatch(/\.-+\./)
+    expect(out).toMatch(/'-+'/)
+  })
+
+  it('computes extra height for the curved top/bottom rows', () => {
+    const dims = cylinderRenderer.getDimensions('DB', unicodeOpts)
+    expect(dims.gridRows[0]).toBe(2)
+    expect(dims.gridRows[2]).toBe(2)
+    expect(dims.labelArea.y).toBe(3)
+  })
+
+  it('draws the double-row ellipse caps and centers the label', () => {
+    const dims = cylinderRenderer.getDimensions('DB', unicodeOpts)
+    const canvas = cylinderRenderer.render('DB', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]!.startsWith('╭')).toBe(true)
+    expect(lines[0]!.endsWith('╮')).toBe(true)
+    expect(lines[1]).toMatch(/^│─+│$/)
+    expect(lines[lines.length - 2]).toMatch(/^│─+│$/)
+    expect(lines[lines.length - 1]!.startsWith('╰')).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith('╯')).toBe(true)
+    expect(str).toContain('DB')
+  })
+
+  it('draws ASCII fallback caps', () => {
+    const dims = cylinderRenderer.getDimensions('DB', asciiOpts)
+    const canvas = cylinderRenderer.render('DB', dims, asciiOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]!.startsWith('.')).toBe(true)
+    expect(lines[0]!.endsWith('.')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith("'")).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith("'")).toBe(true)
+  })
+
+  it('stacks multiline labels inside the cylinder body', () => {
+    const dims = cylinderRenderer.getDimensions('one\ntwo', unicodeOpts)
+    const canvas = cylinderRenderer.render('one\ntwo', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    expect(str).toContain('one')
+    expect(str).toContain('two')
+  })
+
+  it('clips label cells that fall outside the pre-computed box bounds', () => {
+    const dims = cylinderRenderer.getDimensions('DB', unicodeOpts)
+    const canvas = cylinderRenderer.render(
+      'Much Too Wide For This Cylinder',
+      dims,
+      unicodeOpts,
+    )
+    expect(() => canvasToString(canvas)).not.toThrow()
+  })
+
+  it('reuses the shared box attachment point logic', () => {
+    const dims = cylinderRenderer.getDimensions('DB', unicodeOpts)
+    const base = { x: 2, y: 3 }
+    const left = cylinderRenderer.getAttachmentPoint(Left, dims, base)
+    const right = cylinderRenderer.getAttachmentPoint(Right, dims, base)
+    expect(left.x).toBe(base.x)
+    expect(right.x).toBe(base.x + dims.width - 1)
+  })
+})
+
+describe('asymmetric (flag) shape >text]', () => {
+  it('renders arrow markers on the left corners in a flowchart', () => {
+    const src = `flowchart TD
+  A>Flag]`
+    const out = renderMermaidASCII(src, { useAscii: false })
+    expect(out).toContain('Flag')
+    expect(out).toContain('▷')
+  })
+
+  it('renders the ASCII fallback marker', () => {
+    const src = `flowchart TD
+  A>Note]`
+    const out = renderMermaidASCII(src, { useAscii: true })
+    expect(out).toContain('Note')
+    expect(out).toContain('>')
+  })
+
+  it('delegates to the shared box renderer with asymmetric corners', () => {
+    const dims = asymmetricRenderer.getDimensions('X', unicodeOpts)
+    const canvas = asymmetricRenderer.render('X', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]!.startsWith('▷')).toBe(true)
+    expect(lines[0]!.endsWith('┐')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith('▷')).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith('┘')).toBe(true)
+  })
+})
+
+describe('trapezoid shape [/text\\]', () => {
+  it('renders slope markers on the top corners in a flowchart', () => {
+    const src = `flowchart TD
+  A[/Wide Bottom\\]`
+    const out = renderMermaidASCII(src, { useAscii: false })
+    expect(out).toContain('Wide Bottom')
+  })
+
+  it('delegates to the shared box renderer with trapezoid corners', () => {
+    const dims = trapezoidRenderer.getDimensions('X', unicodeOpts)
+    const canvas = trapezoidRenderer.render('X', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]!.startsWith('/')).toBe(true)
+    expect(lines[0]!.endsWith('\\')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith('└')).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith('┘')).toBe(true)
+  })
+})
+
+describe('trapezoid-alt shape [\\text/]', () => {
+  it('renders slope markers on the bottom corners in a flowchart', () => {
+    const src = `flowchart TD
+  A[\\Wide Top/]`
+    const out = renderMermaidASCII(src, { useAscii: false })
+    expect(out).toContain('Wide Top')
+  })
+
+  it('delegates to the shared box renderer with trapezoid-alt corners', () => {
+    const dims = trapezoidAltRenderer.getDimensions('X', unicodeOpts)
+    const canvas = trapezoidAltRenderer.render('X', dims, unicodeOpts)
+    const str = canvasToString(canvas)
+    const lines = str.split('\n')
+    expect(lines[0]!.startsWith('┌')).toBe(true)
+    expect(lines[0]!.endsWith('┐')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith('\\')).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith('/')).toBe(true)
+  })
+})
+
+describe('special shapes connected in a diagram', () => {
+  it('renders edges between multiple special shapes without diagonal artifacts', () => {
+    const src = `flowchart TD
+  A[[Sub]] --> B[(DB)]
+  B --> C(((Done)))
+  C --> D>Flag]
+  D --> E[/Trap\\]
+  E --> F[\\TrapAlt/]`
+    const out = renderMermaidASCII(src, { useAscii: false })
+    expect(out).toContain('Sub')
+    expect(out).toContain('DB')
+    expect(out).toContain('Done')
+    expect(out).toContain('Flag')
+    expect(out).toContain('Trap')
+    expect(out).toContain('TrapAlt')
+  })
+})
+
+describe('parallelogram shapes [/text/] and [\\text\\]', () => {
+  it('renders a lean-right parallelogram in a flowchart', () => {
+    const out = renderMermaidASCII('flowchart TD\n  A[/Lean Right/]', {
+      useAscii: false,
+    })
+    expect(out).toContain('Lean Right')
+  })
+
+  it('renders a lean-left parallelogram in a flowchart', () => {
+    const out = renderMermaidASCII('flowchart TD\n  A[\\Lean Left\\]', {
+      useAscii: false,
+    })
+    expect(out).toContain('Lean Left')
+  })
+
+  it('delegates to the shared box renderer with parallelogram corners', () => {
+    const dims = parallelogramRenderer.getDimensions('X', unicodeOpts)
+    const canvas = parallelogramRenderer.render('X', dims, unicodeOpts)
+    const lines = canvasToString(canvas).split('\n')
+    // Both sides slope the same way — that is what separates a parallelogram
+    // from a trapezoid, whose corners oppose.
+    expect(lines[0]!.startsWith('/')).toBe(true)
+    expect(lines[0]!.endsWith('/')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith('/')).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith('/')).toBe(true)
+  })
+
+  it('delegates to the shared box renderer with parallelogram-alt corners', () => {
+    const dims = parallelogramAltRenderer.getDimensions('X', unicodeOpts)
+    const canvas = parallelogramAltRenderer.render('X', dims, unicodeOpts)
+    const lines = canvasToString(canvas).split('\n')
+    expect(lines[0]!.startsWith('\\')).toBe(true)
+    expect(lines[0]!.endsWith('\\')).toBe(true)
+    expect(lines[lines.length - 1]!.startsWith('\\')).toBe(true)
+    expect(lines[lines.length - 1]!.endsWith('\\')).toBe(true)
+  })
+
+  it('reports the same dimensions as the other box-based shapes', () => {
+    // Parallelograms reuse getBoxDimensions, so their sizing must match
+    // trapezoid's for the same label — a divergence would misalign the grid.
+    expect(parallelogramRenderer.getDimensions('Label', unicodeOpts)).toEqual(
+      trapezoidRenderer.getDimensions('Label', unicodeOpts),
+    )
+  })
+})

package/src/__tests__/ascii-shapes-stadium.test.ts

@@ -0,0 +1,217 @@
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { stadiumRenderer } from '../shapes/stadium.ts'
+import type { Canvas } from '../types.ts'
+
+function canvasToLines(canvas: Canvas): string[] {
+  const height = canvas[0]?.length ?? 0
+  const lines: string[] = []
+  for (let y = 0; y < height; y++) {
+    let row = ''
+    for (let x = 0; x < canvas.length; x++) row += canvas[x]![y]
+    lines.push(row)
+  }
+  return lines
+}
+
+describe('stadium shape (flowchart integration)', () => {
+  it('renders a short single-line stadium label in unicode mode', () => {
+    const ascii = renderMermaidASCII('graph TD\n  A([Start])', {
+      useAscii: false,
+    })
+    expect(ascii).toContain('Start')
+    expect(ascii).toContain('(')
+    expect(ascii).toContain(')')
+  })
+
+  it('renders a short single-line stadium label in ascii mode', () => {
+    const ascii = renderMermaidASCII('graph TD\n  A([Start])', {
+      useAscii: true,
+    })
+    expect(ascii).toContain('Start')
+    expect(ascii).toContain('(')
+    expect(ascii).toContain(')')
+    expect(ascii).toContain('-')
+  })
+
+  it('sizes the stadium wider for a longer label', () => {
+    const shortAscii = renderMermaidASCII('graph TD\n  A([Hi])', {
+      useAscii: false,
+    })
+    const longAscii = renderMermaidASCII(
+      'graph TD\n  A([This is a fairly long stadium label])',
+      { useAscii: false },
+    )
+    const shortWidth = Math.max(...shortAscii.split('\n').map((l) => l.length))
+    const longWidth = Math.max(...longAscii.split('\n').map((l) => l.length))
+    expect(longAscii).toContain('This is a fairly long stadium label')
+    expect(longWidth).toBeGreaterThan(shortWidth)
+  })
+
+  it('renders a two-line stadium label with lines stacked in order', () => {
+    const ascii = renderMermaidASCII('graph TD\n  A([Line1<br>Line2])', {
+      useAscii: false,
+    })
+    expect(ascii).toContain('Line1')
+    expect(ascii).toContain('Line2')
+    const lines = ascii.split('\n')
+    const line1Row = lines.findIndex((l) => l.includes('Line1'))
+    const line2Row = lines.findIndex((l) => l.includes('Line2'))
+    expect(line2Row).toBeGreaterThan(line1Row)
+  })
+
+  it('renders a three-line stadium label in ascii mode', () => {
+    const ascii = renderMermaidASCII('graph TD\n  A([One<br>Two<br>Three])', {
+      useAscii: true,
+    })
+    expect(ascii).toContain('One')
+    expect(ascii).toContain('Two')
+    expect(ascii).toContain('Three')
+  })
+
+  it('connects an edge between two stadium nodes', () => {
+    const ascii = renderMermaidASCII('graph TD\n  A([Begin]) --> B([End])', {
+      useAscii: false,
+    })
+    expect(ascii).toContain('Begin')
+    expect(ascii).toContain('End')
+  })
+})
+
+describe('stadiumRenderer.getDimensions', () => {
+  it('sizes a single-line label with the given padding', () => {
+    const dims = stadiumRenderer.getDimensions('Start', {
+      useAscii: false,
+      padding: 1,
+    })
+    expect(dims).toEqual({
+      width: 11,
+      height: 5,
+      labelArea: { x: 3, y: 2, width: 5, height: 1 },
+      gridColumns: [2, 7, 2],
+      gridRows: [1, 3, 1],
+    })
+  })
+
+  it('collapses to the minimum 3-row height with zero padding', () => {
+    const dims = stadiumRenderer.getDimensions('Start', {
+      useAscii: false,
+      padding: 0,
+    })
+    expect(dims.height).toBe(3)
+    expect(dims.width).toBe(9)
+  })
+
+  it('grows height for multi-line labels', () => {
+    const dims = stadiumRenderer.getDimensions('Line1\nLine2', {
+      useAscii: false,
+      padding: 1,
+    })
+    expect(dims).toEqual({
+      width: 11,
+      height: 6,
+      labelArea: { x: 3, y: 2, width: 5, height: 2 },
+      gridColumns: [2, 7, 2],
+      gridRows: [1, 4, 1],
+    })
+  })
+
+  it('sizes width to the widest of several lines', () => {
+    const dims = stadiumRenderer.getDimensions('Short\nA much longer line', {
+      useAscii: false,
+      padding: 1,
+    })
+    expect(dims.labelArea.width).toBe('A much longer line'.length)
+  })
+})
+
+describe('stadiumRenderer.render', () => {
+  it('renders a single-row pill when height collapses to 3', () => {
+    const dims = stadiumRenderer.getDimensions('Start', {
+      useAscii: false,
+      padding: 0,
+    })
+    const canvas = stadiumRenderer.render('Start', dims, {
+      useAscii: false,
+      padding: 0,
+    })
+    expect(canvasToLines(canvas)).toEqual([
+      '         ',
+      '( Start )',
+      '         ',
+    ])
+  })
+
+  it('renders rounded corners for multi-row unicode mode', () => {
+    const dims = stadiumRenderer.getDimensions('Line1\nLine2', {
+      useAscii: false,
+      padding: 1,
+    })
+    const canvas = stadiumRenderer.render('Line1\nLine2', dims, {
+      useAscii: false,
+      padding: 1,
+    })
+    expect(canvasToLines(canvas)).toEqual([
+      '╭─────────╮',
+      '│         │',
+      '│         │',
+      '│  Line1  │',
+      '│  Line2  │',
+      '╰─────────╯',
+    ])
+  })
+
+  it('renders parentheses on all sides for multi-row ascii mode', () => {
+    const dims = stadiumRenderer.getDimensions('Line1\nLine2', {
+      useAscii: true,
+      padding: 1,
+    })
+    const canvas = stadiumRenderer.render('Line1\nLine2', dims, {
+      useAscii: true,
+      padding: 1,
+    })
+    expect(canvasToLines(canvas)).toEqual([
+      '(---------)',
+      '(         )',
+      '(         )',
+      '(  Line1  )',
+      '(  Line2  )',
+      '(---------)',
+    ])
+  })
+
+  it('centers an odd number of label lines around the vertical middle', () => {
+    const dims = stadiumRenderer.getDimensions('One\nTwo\nThree', {
+      useAscii: false,
+      padding: 1,
+    })
+    const canvas = stadiumRenderer.render('One\nTwo\nThree', dims, {
+      useAscii: false,
+      padding: 1,
+    })
+    expect(canvasToLines(canvas)).toEqual([
+      '╭─────────╮',
+      '│         │',
+      '│   One   │',
+      '│   Two   │',
+      '│  Three  │',
+      '│         │',
+      '╰─────────╯',
+    ])
+  })
+
+  it('clips label characters that fall outside the canvas bounds', () => {
+    const dims = {
+      width: 5,
+      height: 3,
+      labelArea: { x: 1, y: 1, width: 3, height: 1 },
+      gridColumns: [1, 3, 1] as [number, number, number],
+      gridRows: [1, 1, 1] as [number, number, number],
+    }
+    const canvas = stadiumRenderer.render('VeryLongLabelText', dims, {
+      useAscii: false,
+      padding: 0,
+    })
+    expect(canvasToLines(canvas)).toEqual(['     ', '(gLa)', '     '])
+  })
+})