@zombie-mermaid/ascii-renderer 2.2.1

package/src/__tests__/ascii-sequence-notes.test.ts

@@ -0,0 +1,61 @@
+// ============================================================================
+// ASCII sequence diagram note tests
+// ============================================================================
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+describe('ASCII sequence diagrams – pre-message notes', () => {
+  it('renders a note placed before the first message (regression)', () => {
+    const result = renderMermaidASCII(`sequenceDiagram
+      participant A as Alice
+      participant B as Bob
+      Note over A: note 1
+      A->>B: Hello`)
+    expect(result).toContain('note 1')
+    expect(result).toContain('Hello')
+  })
+
+  it('renders a notes-only diagram (0 messages) without crashing', () => {
+    const result = renderMermaidASCII(`sequenceDiagram
+      participant A
+      Note over A: lonely note`)
+    expect(result).toContain('lonely note')
+  })
+})
+
+describe('ASCII sequence diagrams – note box vs. lifeline collision (regression)', () => {
+  // When a "Note over A,B" box is computed wide enough that its own right
+  // padding column lands exactly on B's lifeline x-position, the lifeline
+  // (drawn in an earlier pass) must not leak through as a second border
+  // character next to the note's real right border. 8-9 'x' characters is
+  // the exact width, given these actors' default spacing, that reproduces
+  // the collision — shorter or longer text misses the colliding column.
+  for (const n of [8, 9]) {
+    it(`does not double up border characters for a ${n}-char note spanning two actors`, () => {
+      const noteText = 'x'.repeat(n)
+      const result = renderMermaidASCII(
+        `sequenceDiagram
+      participant A
+      participant B
+      A->>B: hi
+      Note over A,B: ${noteText}`,
+        { colorMode: 'none' },
+      )
+      const lines = result.split('\n')
+      const contentLine = lines.find((l) => l.includes(noteText))
+      expect(contentLine).toBeDefined()
+
+      // No two border/line-drawing characters should sit directly adjacent
+      // with no space between them anywhere in the note's rows — that
+      // shape (e.g. "││") only occurs when a stale lifeline character
+      // leaks through an unblanked padding column next to a real border.
+      const noteLineIndex = lines.indexOf(contentLine!)
+      const topBorderLine = lines[noteLineIndex - 1]!
+      const bottomBorderLine = lines[noteLineIndex + 1]!
+      for (const line of [topBorderLine, contentLine!, bottomBorderLine]) {
+        expect(line).not.toMatch(/[│|┌┐└┘][│|┌┐└┘]/)
+      }
+    })
+  }
+})

package/src/__tests__/ascii-sequence-padding.test.ts

@@ -0,0 +1,119 @@
+// ============================================================================
+// ASCII sequence diagram padding tests (issue #343)
+//
+// `-x`/`-y`/`-p` (AsciiRenderOptions.paddingX/paddingY/boxBorderPadding)
+// previously only affected the flowchart/state grid layout — sequence
+// diagrams ignored them entirely and always used fixed internal spacing
+// constants. This file verifies the fix: padding now visibly widens/
+// tightens lifeline spacing, actor-box size, and vertical row spacing,
+// while a render with no explicit padding option still renders byte-for-
+// byte identical to before the fix (see the DEFAULT_PADDING_* comment in
+// src/ascii/types.ts for why that matters).
+// ============================================================================
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+const SEQ = `sequenceDiagram
+  participant A
+  participant B
+  A->>B: Hi`
+
+/** Column index of the first occurrence of `needle` on a given line. */
+function colOf(ascii: string, lineIndex: number, needle: string): number {
+  const line = ascii.split('\n')[lineIndex]
+  if (line === undefined) throw new Error(`no line ${lineIndex}`)
+  const idx = line.indexOf(needle)
+  if (idx === -1) throw new Error(`"${needle}" not found on line ${lineIndex}`)
+  return idx
+}
+
+/** Width (in chars) of the first `+---+`-style border run on a line. */
+function borderWidth(ascii: string, lineIndex: number): number {
+  const line = ascii.split('\n')[lineIndex]
+  if (line === undefined) throw new Error(`no line ${lineIndex}`)
+  const match = /\+-+\+/.exec(line)
+  if (!match) throw new Error(`no border run on line ${lineIndex}: ${line}`)
+  return match[0].length
+}
+
+function lineCount(ascii: string): number {
+  return ascii.split('\n').filter((l) => l.length > 0).length
+}
+
+describe('ASCII sequence diagrams — padding (issue #343)', () => {
+  it('renders identically with no padding options and with explicit defaults', () => {
+    const withoutOptions = renderMermaidASCII(SEQ, { useAscii: true })
+    const withDefaults = renderMermaidASCII(SEQ, {
+      useAscii: true,
+      paddingX: 5,
+      paddingY: 5,
+      boxBorderPadding: 1,
+    })
+    expect(withDefaults).toBe(withoutOptions)
+  })
+
+  it('paddingX widens the gap between lifelines (actor B shifts right)', () => {
+    const base = renderMermaidASCII(SEQ, { useAscii: true })
+    const wide = renderMermaidASCII(SEQ, { useAscii: true, paddingX: 25 })
+    const baseCol = colOf(base, 1, '| B |')
+    const wideCol = colOf(wide, 1, '| B |')
+    expect(wideCol).toBeGreaterThan(baseCol)
+    // Two independent step sizes from two different starting points produce
+    // the same shift — demonstrates paddingX scales lifeline spacing
+    // linearly rather than just "doing something" once.
+    const mid = renderMermaidASCII(SEQ, { useAscii: true, paddingX: 15 })
+    const midCol = colOf(mid, 1, '| B |')
+    expect(midCol - baseCol).toBe(wideCol - midCol)
+  })
+
+  it('a very small paddingX tightens lifeline spacing below the default', () => {
+    const base = renderMermaidASCII(SEQ, { useAscii: true })
+    const tight = renderMermaidASCII(SEQ, { useAscii: true, paddingX: -10 })
+    expect(colOf(tight, 1, '| B |')).toBeLessThan(colOf(base, 1, '| B |'))
+  })
+
+  it('paddingY adds extra blank rows (taller diagram)', () => {
+    const base = renderMermaidASCII(SEQ, { useAscii: true })
+    const tall = renderMermaidASCII(SEQ, { useAscii: true, paddingY: 25 })
+    expect(lineCount(tall)).toBeGreaterThan(lineCount(base))
+    // Same linearity check as paddingX above.
+    const mid = renderMermaidASCII(SEQ, { useAscii: true, paddingY: 15 })
+    expect(lineCount(mid) - lineCount(base)).toBe(
+      lineCount(tall) - lineCount(mid),
+    )
+  })
+
+  it('boxBorderPadding widens actor boxes by exactly 2 columns per unit', () => {
+    const base = renderMermaidASCII(SEQ, { useAscii: true })
+    const padded = renderMermaidASCII(SEQ, {
+      useAscii: true,
+      boxBorderPadding: 4,
+    })
+    // boxWidth = labelWidth + 2*boxBorderPadding + 2 (border chars) — going
+    // from the default (1) to 4 adds 2*(4-1) = 6 columns to each actor box.
+    expect(borderWidth(padded, 0) - borderWidth(base, 0)).toBe(6)
+  })
+
+  it('boxBorderPadding also widens note boxes and shifts note content', () => {
+    const withNote = `sequenceDiagram
+      participant A
+      Note over A: hello`
+    const base = renderMermaidASCII(withNote, { useAscii: true })
+    const padded = renderMermaidASCII(withNote, {
+      useAscii: true,
+      boxBorderPadding: 4,
+    })
+    // The note's own top border is the second '+---+' run rendered (the
+    // first belongs to the actor header box), so isolate it before
+    // comparing width.
+    const noteBorder = (ascii: string) => {
+      const line = ascii.split('\n')[4] // note top border row
+      const match = line ? /\+-+\+/.exec(line) : null
+      if (!match) throw new Error(`no note border found: ${line}`)
+      return match[0].length
+    }
+    expect(noteBorder(padded) - noteBorder(base)).toBe(6)
+    expect(colOf(padded, 5, 'hello')).toBeGreaterThan(colOf(base, 5, 'hello'))
+  })
+})

package/src/__tests__/ascii-sequence-self-arrow.test.ts

@@ -0,0 +1,206 @@
+// ============================================================================
+// ASCII sequence diagram — self-arrow regression tests (issue #68)
+//
+// Two bugs in the ASCII sequence-diagram renderer's handling of self-arrows
+// (A->>A: ...):
+//   1. <br/> in a self-arrow label wrote the raw string (with an embedded
+//      newline) onto a single canvas row instead of splitting it onto
+//      multiple rows, corrupting every column to the right for the rest of
+//      the diagram.
+//   2. A self-arrow inside an alt/loop/opt block could be drawn outside the
+//      block's wall because the wall's width was computed from lifeline
+//      positions only, ignoring the self-arrow's loop glyphs and label.
+// ============================================================================
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+describe('ASCII sequence diagrams – self-arrow labels (issue #68)', () => {
+  it('splits <br/> in a self-arrow label across rows without corrupting the canvas', () => {
+    const result = renderMermaidASCII(
+      `
+sequenceDiagram
+  participant A
+  participant B
+  A->>A: line one<br/>line two
+`,
+      { useAscii: false },
+    )
+
+    const lines = result.split('\n')
+    const line1Idx = lines.findIndex((l) => l.includes('line one'))
+    const line2Idx = lines.findIndex((l) => l.includes('line two'))
+
+    expect(line1Idx).toBeGreaterThan(-1)
+    expect(line2Idx).toBeGreaterThan(-1)
+    // Each line of the label gets its own row, immediately below the last.
+    expect(line2Idx).toBe(line1Idx + 1)
+
+    // A corrupted canvas dumps the raw "line one\nline two" string onto one
+    // cell: the terminal newline forces "line two" to print flush against
+    // column 0 (no box-drawing indentation) instead of as a properly
+    // positioned canvas row.
+    expect(lines[line2Idx]!.startsWith(' ')).toBe(true)
+
+    // B's lifeline must still be intact on both label rows — a corrupted
+    // canvas shifts every column right of the embedded newline down one
+    // row for the rest of the diagram, destroying the B column.
+    expect(lines[line1Idx]).toContain('│')
+    expect(lines[line2Idx]).toContain('│')
+
+    // The footer actor boxes must render correctly and stay aligned with
+    // the header boxes (proves later rows weren't shifted by the newline).
+    const bottomBorders = (result.match(/└───┘/g) || []).length
+    expect(bottomBorders).toBe(2) // one footer box per actor (A, B)
+  })
+
+  it('handles 3+ line self-arrow labels', () => {
+    const result = renderMermaidASCII(
+      `
+sequenceDiagram
+  participant A
+  A->>A: one<br/>two<br/>three
+`,
+      { useAscii: false },
+    )
+    const lines = result.split('\n')
+    const idxOne = lines.findIndex((l) => l.includes('one'))
+    const idxTwo = lines.findIndex((l) => l.includes('two'))
+    const idxThree = lines.findIndex((l) => l.includes('three'))
+    expect(idxTwo).toBe(idxOne + 1)
+    expect(idxThree).toBe(idxTwo + 1)
+  })
+
+  it("extends an alt block's wall past a self-arrow's loop and label", () => {
+    const result = renderMermaidASCII(
+      `
+sequenceDiagram
+  participant A
+  participant B
+  alt some condition
+    A->>A: a fairly long self-arrow label here
+  end
+`,
+      { useAscii: false },
+    )
+
+    // The block header label must not be clipped by an undersized wall.
+    expect(result).toContain('alt [some condition]')
+
+    // The self-arrow's loop corners must stay intact — a wall drawn too
+    // far left overwrites them with the wall's vertical-bar character.
+    expect(result).toContain('├───┐')
+    expect(result).toContain('◀───┘')
+
+    // The label and the block's right wall must coexist on the same row,
+    // with the wall to the right of (not through) the label.
+    const labelLine = result
+      .split('\n')
+      .find((l) => l.includes('a fairly long self-arrow label here'))
+    expect(labelLine).toBeDefined()
+    expect(labelLine!.trimEnd().endsWith('│')).toBe(true)
+  })
+
+  it("extends a loop block's wall past a self-arrow's loop and label", () => {
+    const result = renderMermaidASCII(
+      `
+sequenceDiagram
+  participant A
+  loop every request
+    A->>A: a fairly long self-arrow label for the loop block
+  end
+`,
+      { useAscii: false },
+    )
+
+    expect(result).toContain('loop [every request]')
+    expect(result).toContain('├───┐')
+    expect(result).toContain('◀───┘')
+
+    const labelLine = result
+      .split('\n')
+      .find((l) =>
+        l.includes('a fairly long self-arrow label for the loop block'),
+      )
+    expect(labelLine).toBeDefined()
+    expect(labelLine!.trimEnd().endsWith('│')).toBe(true)
+  })
+})
+
+// ============================================================================
+// Self-message autonumber badge (issue #342)
+//
+// `autonumber` consumed a sequence number for a self-message but never drew
+// the badge glyph on the loop — the counter still advanced correctly, but a
+// numbered self-message and an unnumbered one looked identical. Fixed by
+// widening the loop (see `selfLoopWidth` in sequence.ts) to make room for the
+// badge digits at the start of the top arm, without disturbing the corner
+// glyphs (├/┐ on top, ◀/┘ on bottom).
+// ============================================================================
+
+describe('ASCII sequence diagrams – self-message autonumber badge (issue #342)', () => {
+  it('draws the autonumber badge on a self-message loop', () => {
+    const result = renderMermaidASCII(
+      `sequenceDiagram
+      autonumber
+      A->>A: Reflect`,
+      { useAscii: false },
+    )
+    const lines = result.split('\n')
+    // The badge digit "1" sits on the loop's top arm, between the left
+    // junction and the top-right corner. (Actor boxes also contain "┐", so
+    // match on the junction character "├" to find the loop row specifically.)
+    const topArmLine = lines.find((l) => l.includes('├'))
+    expect(topArmLine).toBeDefined()
+    expect(topArmLine).toMatch(/├1─+┐/)
+    // The loop's corner glyphs must stay intact — a corrupted badge
+    // placement would overwrite the corner instead of just the dashes.
+    expect(result).toContain('┐')
+    expect(result).toContain('┘')
+    expect(result).toContain('Reflect')
+  })
+
+  it('keeps numbering in sequence across self-messages mixed with normal messages', () => {
+    const result = renderMermaidASCII(
+      `sequenceDiagram
+      participant A
+      participant B
+      autonumber
+      A->>B: First
+      A->>A: Self
+      A->>B: Third`,
+      { useAscii: false },
+    )
+    const lines = result.split('\n')
+
+    // First normal message numbered 1.
+    const firstArrowLine = lines.find((l) => l.includes('▶') && l.includes('1'))
+    expect(firstArrowLine).toBeDefined()
+
+    // Self-message numbered 2, badge drawn on its loop's top arm.
+    const selfTopArmLine = lines.find((l) => l.includes('├'))
+    expect(selfTopArmLine).toBeDefined()
+    expect(selfTopArmLine).toMatch(/├2─+┐/)
+
+    // Third message (also A->>B) numbered 3, appearing after the self
+    // message's rows.
+    const selfIdx = lines.indexOf(selfTopArmLine ?? '')
+    const thirdArrowLine = lines
+      .slice(selfIdx + 1)
+      .find((l) => l.includes('▶') && l.includes('3'))
+    expect(thirdArrowLine).toBeDefined()
+  })
+
+  it('renders a self-message without autonumber unchanged (no stray digits, no regression)', () => {
+    const result = renderMermaidASCII(
+      `sequenceDiagram
+      A->>A: Reflect`,
+      { useAscii: false },
+    )
+    // No autonumber active — the loop must render exactly as before: plain
+    // corners with no digit inserted into the top arm.
+    expect(result).toContain('├───┐')
+    expect(result).toContain('◀───┘')
+    expect(result).toContain('Reflect')
+  })
+})

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

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { diamondRenderer } from '../shapes/diamond.ts'
+import { canvasToString } from '../canvas.ts'
+import type { ShapeRenderOptions } from '../shapes/types.ts'
+
+describe('diamondRenderer.render', () => {
+  it('draws unicode diamond corner markers around a short label', () => {
+    const options: ShapeRenderOptions = { useAscii: false, padding: 1 }
+    const dimensions = diamondRenderer.getDimensions('Yes', options)
+    const canvas = diamondRenderer.render('Yes', 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('Yes')
+  })
+
+  it('draws ascii diamond corner markers around a multi-line label', () => {
+    const options: ShapeRenderOptions = { useAscii: true, padding: 1 }
+    const label = 'Retry?\nCheck'
+    const dimensions = diamondRenderer.getDimensions(label, options)
+    const canvas = diamondRenderer.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('Retry?')
+    expect(text).toContain('Check')
+  })
+})

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

@@ -0,0 +1,258 @@
+import { describe, it, expect } from 'vitest'
+import {
+  getBoxDimensions,
+  renderBox,
+  getBoxAttachmentPoint,
+  rectangleRenderer,
+} from '../shapes/rectangle.ts'
+import { canvasToString } from '../canvas.ts'
+import { getCorners } from '../shapes/corners.ts'
+import {
+  Up,
+  Down,
+  Left,
+  Right,
+  UpperLeft,
+  UpperRight,
+  LowerLeft,
+  LowerRight,
+  Middle,
+} from '../types.ts'
+import type { ShapeRenderOptions } from '../shapes/types.ts'
+
+const optsP0: ShapeRenderOptions = { useAscii: false, padding: 0 }
+const optsP1: ShapeRenderOptions = { useAscii: false, padding: 1 }
+const optsAsciiP0: ShapeRenderOptions = { useAscii: true, padding: 0 }
+
+describe('rectangle shape: getBoxDimensions', () => {
+  it('sizes a single-line label with zero padding', () => {
+    const dims = getBoxDimensions('Hi', optsP0)
+    expect(dims.width).toBe(4)
+    expect(dims.height).toBe(3)
+    expect(dims.labelArea).toEqual({ x: 1, y: 1, width: 2, height: 1 })
+    expect(dims.gridColumns).toEqual([1, 2, 1])
+    expect(dims.gridRows).toEqual([1, 1, 1])
+  })
+
+  it('grows width and height with padding', () => {
+    const dims = getBoxDimensions('Hi', optsP1)
+    expect(dims.width).toBe(6)
+    // rawInnerHeight = 1 + 2*1 = 3 (odd) -> innerHeight stays 3
+    expect(dims.height).toBe(5)
+    expect(dims.gridColumns).toEqual([1, 4, 1])
+    expect(dims.gridRows).toEqual([1, 3, 1])
+  })
+
+  it('bumps innerHeight to odd when line count makes it even', () => {
+    const dims = getBoxDimensions('One\nTwo', optsP0)
+    // lineCount=2, rawInnerHeight=2 (even) -> innerHeight=3
+    expect(dims.gridRows).toEqual([1, 3, 1])
+    expect(dims.height).toBe(5)
+    expect(dims.labelArea.height).toBe(2)
+  })
+
+  it('keeps innerHeight odd when line count already makes it odd', () => {
+    const dims = getBoxDimensions('One\nTwo\nThree', optsP0)
+    // lineCount=3, rawInnerHeight=3 (odd) -> innerHeight stays 3
+    expect(dims.gridRows).toEqual([1, 3, 1])
+    expect(dims.height).toBe(5)
+  })
+
+  it('uses the widest line to size width for multi-line labels', () => {
+    const dims = getBoxDimensions('Short\nA much longer line', optsP0)
+    const expectedWidth = 'A much longer line'.length + 2
+    expect(dims.width).toBe(expectedWidth)
+    expect(dims.labelArea.width).toBe('A much longer line'.length)
+  })
+
+  it('handles an empty label', () => {
+    const dims = getBoxDimensions('', optsP0)
+    expect(dims.labelArea.width).toBe(0)
+    expect(dims.labelArea.height).toBe(1)
+    expect(dims.width).toBe(2)
+  })
+})
+
+describe('rectangle shape: renderBox', () => {
+  it('draws unicode borders and corners for a single-line label', () => {
+    const dims = getBoxDimensions('Hi', optsP0)
+    const corners = getCorners('rectangle', false)
+    const canvas = renderBox('Hi', dims, corners, false)
+    const text = canvasToString(canvas)
+    expect(text).toContain('┌')
+    expect(text).toContain('┐')
+    expect(text).toContain('└')
+    expect(text).toContain('┘')
+    expect(text).toContain('─')
+    expect(text).toContain('│')
+    expect(text).toContain('Hi')
+  })
+
+  it('draws ascii borders and corners for a single-line label', () => {
+    const dims = getBoxDimensions('Hi', optsAsciiP0)
+    const corners = getCorners('rectangle', true)
+    const canvas = renderBox('Hi', dims, corners, true)
+    const text = canvasToString(canvas)
+    expect(text).toContain('+')
+    expect(text).toContain('-')
+    expect(text).toContain('|')
+    expect(text).not.toContain('┌')
+    expect(text).toContain('Hi')
+  })
+
+  it('centers a single-line label horizontally and vertically', () => {
+    const dims = getBoxDimensions('Hi', optsP1)
+    const corners = getCorners('rectangle', false)
+    const canvas = renderBox('Hi', dims, corners, false)
+    const lines = canvasToString(canvas).split('\n')
+    const labelRow = lines.findIndex((l) => l.includes('Hi'))
+    expect(labelRow).toBeGreaterThan(0)
+    expect(labelRow).toBeLessThan(lines.length - 1)
+    const col = lines[labelRow]!.indexOf('Hi')
+    expect(col).toBeGreaterThan(0)
+  })
+
+  it('stacks a multi-line label across separate rows in order', () => {
+    const dims = getBoxDimensions('One\nTwo\nThree', optsP0)
+    const corners = getCorners('rectangle', false)
+    const canvas = renderBox('One\nTwo\nThree', dims, corners, false)
+    const lines = canvasToString(canvas).split('\n')
+    const oneRow = lines.findIndex((l) => l.includes('One'))
+    const twoRow = lines.findIndex((l) => l.includes('Two'))
+    const threeRow = lines.findIndex((l) => l.includes('Three'))
+    expect(oneRow).toBeGreaterThan(-1)
+    expect(twoRow).toBeGreaterThan(oneRow)
+    expect(threeRow).toBeGreaterThan(twoRow)
+  })
+
+  it('centers an even number of label lines around the middle row', () => {
+    const dims = getBoxDimensions('One\nTwo', optsP0)
+    const corners = getCorners('rectangle', false)
+    const canvas = renderBox('One\nTwo', dims, corners, false)
+    const lines = canvasToString(canvas).split('\n')
+    const oneRow = lines.findIndex((l) => l.includes('One'))
+    const twoRow = lines.findIndex((l) => l.includes('Two'))
+    expect(twoRow).toBe(oneRow + 1)
+  })
+
+  it('clips label characters that fall outside the canvas bounds', () => {
+    const tinyDims = getBoxDimensions('', optsP0)
+    const corners = getCorners('rectangle', false)
+    const canvas = renderBox('Hello World', tinyDims, corners, false)
+    const text = canvasToString(canvas)
+    expect(text).not.toContain('Hello World')
+  })
+
+  it('uses custom corner characters when provided', () => {
+    const dims = getBoxDimensions('Hi', optsP0)
+    const canvas = renderBox(
+      'Hi',
+      dims,
+      { tl: '<', tr: '>', bl: '<', br: '>' },
+      false,
+    )
+    const text = canvasToString(canvas)
+    expect(text).toContain('<')
+    expect(text).toContain('>')
+  })
+})
+
+describe('rectangle shape: getBoxAttachmentPoint', () => {
+  const dims = getBoxDimensions('Hi', optsP1)
+  const base = { x: 10, y: 20 }
+
+  it('returns the top-center point for Up', () => {
+    expect(getBoxAttachmentPoint(Up, dims, base)).toEqual({
+      x: base.x + Math.floor(dims.width / 2),
+      y: base.y,
+    })
+  })
+
+  it('returns the bottom-center point for Down', () => {
+    expect(getBoxAttachmentPoint(Down, dims, base)).toEqual({
+      x: base.x + Math.floor(dims.width / 2),
+      y: base.y + dims.height - 1,
+    })
+  })
+
+  it('returns the left-middle point for Left', () => {
+    expect(getBoxAttachmentPoint(Left, dims, base)).toEqual({
+      x: base.x,
+      y: base.y + Math.floor(dims.height / 2),
+    })
+  })
+
+  it('returns the right-middle point for Right', () => {
+    expect(getBoxAttachmentPoint(Right, dims, base)).toEqual({
+      x: base.x + dims.width - 1,
+      y: base.y + Math.floor(dims.height / 2),
+    })
+  })
+
+  it('returns the top-left corner for UpperLeft', () => {
+    expect(getBoxAttachmentPoint(UpperLeft, dims, base)).toEqual({
+      x: base.x,
+      y: base.y,
+    })
+  })
+
+  it('returns the top-right corner for UpperRight', () => {
+    expect(getBoxAttachmentPoint(UpperRight, dims, base)).toEqual({
+      x: base.x + dims.width - 1,
+      y: base.y,
+    })
+  })
+
+  it('returns the bottom-left corner for LowerLeft', () => {
+    expect(getBoxAttachmentPoint(LowerLeft, dims, base)).toEqual({
+      x: base.x,
+      y: base.y + dims.height - 1,
+    })
+  })
+
+  it('returns the bottom-right corner for LowerRight', () => {
+    expect(getBoxAttachmentPoint(LowerRight, dims, base)).toEqual({
+      x: base.x + dims.width - 1,
+      y: base.y + dims.height - 1,
+    })
+  })
+
+  it('falls back to the center point for Middle', () => {
+    expect(getBoxAttachmentPoint(Middle, dims, base)).toEqual({
+      x: base.x + Math.floor(dims.width / 2),
+      y: base.y + Math.floor(dims.height / 2),
+    })
+  })
+})
+
+describe('rectangleRenderer', () => {
+  it('delegates getDimensions to getBoxDimensions', () => {
+    expect(rectangleRenderer.getDimensions('Hi', optsP0)).toEqual(
+      getBoxDimensions('Hi', optsP0),
+    )
+  })
+
+  it('renders unicode rectangle corners by default', () => {
+    const dims = rectangleRenderer.getDimensions('Hi', optsP0)
+    const canvas = rectangleRenderer.render('Hi', dims, optsP0)
+    const text = canvasToString(canvas)
+    expect(text).toContain('┌')
+    expect(text).toContain('┘')
+  })
+
+  it('renders ascii rectangle corners when useAscii is set', () => {
+    const dims = rectangleRenderer.getDimensions('Hi', optsAsciiP0)
+    const canvas = rectangleRenderer.render('Hi', dims, optsAsciiP0)
+    const text = canvasToString(canvas)
+    expect(text).toContain('+')
+    expect(text).not.toContain('┌')
+  })
+
+  it('delegates getAttachmentPoint to getBoxAttachmentPoint', () => {
+    const dims = rectangleRenderer.getDimensions('Hi', optsP0)
+    const base = { x: 3, y: 4 }
+    expect(rectangleRenderer.getAttachmentPoint(Down, dims, base)).toEqual(
+      getBoxAttachmentPoint(Down, dims, base),
+    )
+  })
+})