@zombie-mermaid/ascii-renderer 2.2.1

package/src/shapes/circle.ts

@@ -0,0 +1,31 @@
+// ============================================================================
+// Circle shape renderer — uses corner decorators instead of curves
+// ============================================================================
+
+import type { ShapeRenderer } from './types.ts'
+import {
+  getBoxDimensions,
+  renderBox,
+  getBoxAttachmentPoint,
+} from './rectangle.ts'
+import { getCorners } from './corners.ts'
+
+/**
+ * Circle shape renderer.
+ * Uses circle markers (◯) at corners to indicate circular shape semantics.
+ *
+ * Renders as:
+ *   ◯─────────◯
+ *   │  Label  │
+ *   ◯─────────◯
+ */
+export const circleRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('circle', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}

package/src/shapes/corners.ts

@@ -0,0 +1,273 @@
+// ============================================================================
+// Corner character lookup table for shape rendering
+// ============================================================================
+//
+// All shapes are rendered as rectangles with distinctive corner characters
+// to indicate shape type. This eliminates diagonal characters while keeping
+// shapes visually distinguishable.
+
+import type { AsciiNodeShape } from '../types.ts'
+
+/**
+ * Corner characters for a shape in both Unicode and ASCII modes.
+ */
+export interface CornerChars {
+  /** Top-left corner */
+  tl: string
+  /** Top-right corner */
+  tr: string
+  /** Bottom-left corner */
+  bl: string
+  /** Bottom-right corner */
+  br: string
+}
+
+/**
+ * Shape corner configuration with both Unicode and ASCII variants.
+ */
+export interface ShapeCorners {
+  unicode: CornerChars
+  ascii: CornerChars
+}
+
+/**
+ * Corner character lookup table for all shape types.
+ *
+ * Design principles:
+ * - All shapes use orthogonal box structure (no diagonals)
+ * - Corner characters indicate shape semantics
+ * - ASCII fallbacks use available punctuation
+ */
+export const SHAPE_CORNERS: Record<AsciiNodeShape, ShapeCorners> = {
+  // Standard rectangular shapes
+  rectangle: {
+    unicode: { tl: '┌', tr: '┐', bl: '└', br: '┘' },
+    ascii: { tl: '+', tr: '+', bl: '+', br: '+' },
+  },
+  rounded: {
+    unicode: { tl: '╭', tr: '╮', bl: '╰', br: '╯' },
+    ascii: { tl: '.', tr: '.', bl: "'", br: "'" },
+  },
+
+  // Circular shapes - use circle markers at corners
+  circle: {
+    unicode: { tl: '◯', tr: '◯', bl: '◯', br: '◯' },
+    ascii: { tl: 'o', tr: 'o', bl: 'o', br: 'o' },
+  },
+  doublecircle: {
+    unicode: { tl: '◎', tr: '◎', bl: '◎', br: '◎' },
+    ascii: { tl: '@', tr: '@', bl: '@', br: '@' },
+  },
+
+  // Diamond - decision nodes
+  diamond: {
+    unicode: { tl: '◇', tr: '◇', bl: '◇', br: '◇' },
+    ascii: { tl: '<', tr: '>', bl: '<', br: '>' },
+  },
+
+  // Hexagon - process nodes (crop corners — monospace-safe, distinct from rectangle)
+  hexagon: {
+    unicode: { tl: '⌜', tr: '⌝', bl: '⌞', br: '⌟' },
+    ascii: { tl: '*', tr: '*', bl: '*', br: '*' },
+  },
+
+  // Stadium/pill shape
+  stadium: {
+    unicode: { tl: '(', tr: ')', bl: '(', br: ')' },
+    ascii: { tl: '(', tr: ')', bl: '(', br: ')' },
+  },
+
+  // Subroutine - double vertical bars
+  subroutine: {
+    unicode: { tl: '╟', tr: '╢', bl: '╟', br: '╢' },
+    ascii: { tl: '|', tr: '|', bl: '|', br: '|' },
+  },
+
+  // Cylinder/database
+  cylinder: {
+    unicode: { tl: '╭', tr: '╮', bl: '╰', br: '╯' },
+    ascii: { tl: '.', tr: '.', bl: "'", br: "'" },
+  },
+
+  // Asymmetric/flag - pointer on left side
+  asymmetric: {
+    unicode: { tl: '▷', tr: '┐', bl: '▷', br: '┘' },
+    ascii: { tl: '>', tr: '+', bl: '>', br: '+' },
+  },
+
+  // Trapezoid - wider at bottom (top corners slope inward)
+  trapezoid: {
+    unicode: { tl: '/', tr: '\\', bl: '└', br: '┘' },
+    ascii: { tl: '/', tr: '\\', bl: '+', br: '+' },
+  },
+
+  // Trapezoid-alt - wider at top (bottom corners slope inward)
+  'trapezoid-alt': {
+    unicode: { tl: '┌', tr: '┐', bl: '\\', br: '/' },
+    ascii: { tl: '+', tr: '+', bl: '\\', br: '/' },
+  },
+
+  // Parallelogram - leans right (both sides slope the same way)
+  parallelogram: {
+    unicode: { tl: '/', tr: '/', bl: '/', br: '/' },
+    ascii: { tl: '/', tr: '/', bl: '/', br: '/' },
+  },
+
+  // Parallelogram-alt - leans left
+  'parallelogram-alt': {
+    unicode: { tl: '\\', tr: '\\', bl: '\\', br: '\\' },
+    ascii: { tl: '\\', tr: '\\', bl: '\\', br: '\\' },
+  },
+
+  // State diagram pseudostates (special handling, not corner-based)
+  'state-start': {
+    unicode: { tl: '●', tr: '●', bl: '●', br: '●' },
+    ascii: { tl: '*', tr: '*', bl: '*', br: '*' },
+  },
+  'state-end': {
+    unicode: { tl: '◉', tr: '◉', bl: '◉', br: '◉' },
+    ascii: { tl: '@', tr: '@', bl: '@', br: '@' },
+  },
+
+  // --------------------------------------------------------------------
+  // Expanded-syntax shapes (`A@{ shape: ... }`).
+  //
+  // The ASCII grid has no diagonals and one glyph per corner, so these are
+  // distinguished by corner character alone. Shapes whose defining feature
+  // is interior (a rule, a cross, a notch) or whose outline the grid cannot
+  // express keep box corners and rely on their label — the alternative is a
+  // misleading outline, and docs/diagrams.md records which shapes render
+  // distinctly in ASCII.
+  // --------------------------------------------------------------------
+
+  // Document family — wavy bottom edge suggested by curve glyphs
+  document: {
+    unicode: { tl: '┌', tr: '┐', bl: '╰', br: '╮' },
+    ascii: { tl: '+', tr: '+', bl: "'", br: '~' },
+  },
+  'stacked-document': {
+    unicode: { tl: '┌', tr: '╗', bl: '╰', br: '╮' },
+    ascii: { tl: '+', tr: '#', bl: "'", br: '~' },
+  },
+  'stacked-process': {
+    unicode: { tl: '┌', tr: '╗', bl: '└', br: '╝' },
+    ascii: { tl: '+', tr: '#', bl: '+', br: '#' },
+  },
+
+  // Card — notched top-left corner
+  card: {
+    unicode: { tl: '╱', tr: '┐', bl: '└', br: '┘' },
+    ascii: { tl: '/', tr: '+', bl: '+', br: '+' },
+  },
+
+  // Interior-feature rectangles — box corners, feature not expressible
+  'lined-process': {
+    unicode: { tl: '┌', tr: '┐', bl: '└', br: '┘' },
+    ascii: { tl: '+', tr: '+', bl: '+', br: '+' },
+  },
+  'divided-process': {
+    unicode: { tl: '┌', tr: '┐', bl: '└', br: '┘' },
+    ascii: { tl: '+', tr: '+', bl: '+', br: '+' },
+  },
+  'window-pane': {
+    unicode: { tl: '┌', tr: '┐', bl: '└', br: '┘' },
+    ascii: { tl: '+', tr: '+', bl: '+', br: '+' },
+  },
+
+  // Triangles
+  triangle: {
+    unicode: { tl: '╱', tr: '╲', bl: '└', br: '┘' },
+    ascii: { tl: '/', tr: '\\', bl: '+', br: '+' },
+  },
+  'flipped-triangle': {
+    unicode: { tl: '┌', tr: '┐', bl: '╲', br: '╱' },
+    ascii: { tl: '+', tr: '+', bl: '\\', br: '/' },
+  },
+
+  // Circles
+  'filled-circle': {
+    unicode: { tl: '●', tr: '●', bl: '●', br: '●' },
+    ascii: { tl: '*', tr: '*', bl: '*', br: '*' },
+  },
+  'crossed-circle': {
+    unicode: { tl: '╳', tr: '╳', bl: '╳', br: '╳' },
+    ascii: { tl: 'X', tr: 'X', bl: 'X', br: 'X' },
+  },
+
+  // Fork/join bar
+  'fork-join': {
+    unicode: { tl: '━', tr: '━', bl: '━', br: '━' },
+    ascii: { tl: '=', tr: '=', bl: '=', br: '=' },
+  },
+
+  // Notched pentagon — clipped top corners
+  'notched-pentagon': {
+    unicode: { tl: '╱', tr: '╲', bl: '└', br: '┘' },
+    ascii: { tl: '/', tr: '\\', bl: '+', br: '+' },
+  },
+
+  // Sloped rectangle (manual input) — sloped top edge
+  'sloped-rectangle': {
+    unicode: { tl: '╱', tr: '┐', bl: '└', br: '┘' },
+    ascii: { tl: '/', tr: '+', bl: '+', br: '+' },
+  },
+
+  // Flag / paper tape — wavy top and bottom
+  flag: {
+    unicode: { tl: '╭', tr: '╮', bl: '╰', br: '╯' },
+    ascii: { tl: '~', tr: '~', bl: '~', br: '~' },
+  },
+
+  // Bow-tie rectangle (stored data) — concave sides
+  'bow-tie-rectangle': {
+    unicode: { tl: '╲', tr: '╱', bl: '╱', br: '╲' },
+    ascii: { tl: '\\', tr: '/', bl: '/', br: '\\' },
+  },
+
+  // Delay — one rounded end
+  'half-rounded-rectangle': {
+    unicode: { tl: '┌', tr: '╮', bl: '└', br: '╯' },
+    ascii: { tl: '+', tr: '.', bl: '+', br: "'" },
+  },
+
+  // Braces
+  brace: {
+    unicode: { tl: '╭', tr: '┐', bl: '╰', br: '┘' },
+    ascii: { tl: '{', tr: '+', bl: '{', br: '+' },
+  },
+  'brace-right': {
+    unicode: { tl: '┌', tr: '╮', bl: '└', br: '╯' },
+    ascii: { tl: '+', tr: '}', bl: '+', br: '}' },
+  },
+  braces: {
+    unicode: { tl: '╭', tr: '╮', bl: '╰', br: '╯' },
+    ascii: { tl: '{', tr: '}', bl: '{', br: '}' },
+  },
+
+  // Lightning bolt (communication link)
+  bolt: {
+    unicode: { tl: '╱', tr: '╲', bl: '╲', br: '╱' },
+    ascii: { tl: '/', tr: '\\', bl: '\\', br: '/' },
+  },
+
+  // Bare text and anchor — no visible outline
+  text: {
+    unicode: { tl: ' ', tr: ' ', bl: ' ', br: ' ' },
+    ascii: { tl: ' ', tr: ' ', bl: ' ', br: ' ' },
+  },
+  anchor: {
+    unicode: { tl: ' ', tr: ' ', bl: ' ', br: ' ' },
+    ascii: { tl: ' ', tr: ' ', bl: ' ', br: ' ' },
+  },
+}
+
+/**
+ * Get corner characters for a shape type.
+ */
+export function getCorners(
+  shape: AsciiNodeShape,
+  useAscii: boolean,
+): CornerChars {
+  const corners = SHAPE_CORNERS[shape] ?? SHAPE_CORNERS.rectangle
+  return useAscii ? corners.ascii : corners.unicode
+}

package/src/shapes/diamond.ts

@@ -0,0 +1,31 @@
+// ============================================================================
+// Diamond shape renderer — uses corner decorators instead of diagonals
+// ============================================================================
+
+import type { ShapeRenderer } from './types.ts'
+import {
+  getBoxDimensions,
+  renderBox,
+  getBoxAttachmentPoint,
+} from './rectangle.ts'
+import { getCorners } from './corners.ts'
+
+/**
+ * Diamond shape renderer.
+ * Uses diamond markers (◇) at corners to indicate decision node semantics.
+ *
+ * Renders as:
+ *   ◇─────────◇
+ *   │  Label  │
+ *   ◇─────────◇
+ */
+export const diamondRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('diamond', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}

package/src/shapes/hexagon.ts

@@ -0,0 +1,35 @@
+// ============================================================================
+// Hexagon shape renderer — uses corner decorators instead of diagonals
+// ============================================================================
+
+import type { ShapeRenderer } from './types.ts'
+import {
+  getBoxDimensions,
+  renderBox,
+  getBoxAttachmentPoint,
+} from './rectangle.ts'
+import { getCorners } from './corners.ts'
+
+/**
+ * Hexagon shape renderer.
+ * Uses crop-corner markers (⌜⌝⌞⌟, see corners.ts's `SHAPE_CORNERS.hexagon`)
+ * to indicate process node semantics — not the hexagon glyph ⬡ (U+2B21)
+ * this comment used to claim: JetBrains Mono NL has no glyph for ⬡ at all,
+ * and the renderer hasn't actually emitted it since corners.ts moved to
+ * the monospace-safe crop-corner style. See issue #1062.
+ *
+ * Renders as:
+ *   ⌜─────────⌝
+ *   │  Label  │
+ *   ⌞─────────⌟
+ */
+export const hexagonRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('hexagon', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}

package/src/shapes/index.ts

@@ -0,0 +1,123 @@
+// ============================================================================
+// Shape registry — pluggable ASCII shape renderers
+// ============================================================================
+
+import type {
+  AsciiNodeShape,
+  Canvas,
+  DrawingCoord,
+  Direction,
+} from '../types.ts'
+import type {
+  ShapeRenderer,
+  ShapeDimensions,
+  ShapeRenderOptions,
+  ShapeRegistry,
+} from './types.ts'
+
+// Import all shape renderers
+import { rectangleRenderer } from './rectangle.ts'
+import { diamondRenderer } from './diamond.ts'
+import { circleRenderer } from './circle.ts'
+import { stateStartRenderer, stateEndRenderer } from './state.ts'
+import { roundedRenderer } from './rounded.ts'
+import { stadiumRenderer } from './stadium.ts'
+import { hexagonRenderer } from './hexagon.ts'
+import {
+  subroutineRenderer,
+  doublecircleRenderer,
+  cylinderRenderer,
+  asymmetricRenderer,
+  trapezoidRenderer,
+  trapezoidAltRenderer,
+  parallelogramRenderer,
+  parallelogramAltRenderer,
+} from './special.ts'
+
+// Re-export types
+export type {
+  ShapeRenderer,
+  ShapeDimensions,
+  ShapeRenderOptions,
+  ShapeRegistry,
+}
+
+/**
+ * Global shape registry — maps shape types to their renderers.
+ * Rectangle is the default fallback for unregistered shapes.
+ */
+export const shapeRegistry: ShapeRegistry = new Map<
+  AsciiNodeShape,
+  ShapeRenderer
+>([
+  // Core shapes
+  ['rectangle', rectangleRenderer],
+  ['rounded', roundedRenderer],
+  ['diamond', diamondRenderer],
+  ['stadium', stadiumRenderer],
+  ['circle', circleRenderer],
+
+  // Batch 1 additions
+  ['subroutine', subroutineRenderer],
+  ['doublecircle', doublecircleRenderer],
+  ['hexagon', hexagonRenderer],
+
+  // Batch 2 additions
+  ['cylinder', cylinderRenderer],
+  ['asymmetric', asymmetricRenderer],
+  ['trapezoid', trapezoidRenderer],
+  ['trapezoid-alt', trapezoidAltRenderer],
+  ['parallelogram', parallelogramRenderer],
+  ['parallelogram-alt', parallelogramAltRenderer],
+
+  // State diagram pseudo-states
+  ['state-start', stateStartRenderer],
+  ['state-end', stateEndRenderer],
+])
+
+/**
+ * Get the renderer for a shape type, falling back to rectangle.
+ */
+export function getShapeRenderer(shape: AsciiNodeShape): ShapeRenderer {
+  return shapeRegistry.get(shape) ?? rectangleRenderer
+}
+
+/**
+ * Render a node shape to a canvas.
+ * This is the main entry point for shape rendering.
+ */
+export function renderShape(
+  shape: AsciiNodeShape,
+  label: string,
+  options: ShapeRenderOptions,
+): Canvas {
+  const renderer = getShapeRenderer(shape)
+  const dimensions = renderer.getDimensions(label, options)
+  return renderer.render(label, dimensions, options)
+}
+
+/**
+ * Get dimensions for a shape given a label.
+ * Used during layout to determine node size.
+ */
+export function getShapeDimensions(
+  shape: AsciiNodeShape,
+  label: string,
+  options: ShapeRenderOptions,
+): ShapeDimensions {
+  const renderer = getShapeRenderer(shape)
+  return renderer.getDimensions(label, options)
+}
+
+/**
+ * Get edge attachment point for a shape.
+ */
+export function getShapeAttachmentPoint(
+  shape: AsciiNodeShape,
+  dir: Direction,
+  dimensions: ShapeDimensions,
+  baseCoord: DrawingCoord,
+): DrawingCoord {
+  const renderer = getShapeRenderer(shape)
+  return renderer.getAttachmentPoint(dir, dimensions, baseCoord)
+}

package/src/shapes/rectangle.ts

@@ -0,0 +1,199 @@
+// ============================================================================
+// Rectangle shape renderer — standard box with corners
+// ============================================================================
+//
+// This module provides the base box rendering used by all rectangular shapes.
+// The renderBox() function accepts custom corner characters, allowing different
+// shapes to reuse the same rendering logic with different visual markers.
+
+import type { Canvas, DrawingCoord, Direction } from '../types.ts'
+import {
+  Up,
+  Down,
+  Left,
+  Right,
+  UpperLeft,
+  UpperRight,
+  LowerLeft,
+  LowerRight,
+} from '../types.ts'
+import { mkCanvas } from '../canvas.ts'
+import { splitLines } from '../multiline-utils.ts'
+import { displayWidth, toDisplayCells } from '../display-width.ts'
+import type {
+  ShapeRenderer,
+  ShapeDimensions,
+  ShapeRenderOptions,
+} from './types.ts'
+import { dirEquals } from '../edge-routing.ts'
+import { type CornerChars, getCorners } from './corners.ts'
+
+// ============================================================================
+// Shared dimension calculation
+// ============================================================================
+
+/**
+ * Calculate standard box dimensions for any rectangular shape.
+ * Used by rectangle, circle, diamond, hexagon, etc.
+ */
+export function getBoxDimensions(
+  label: string,
+  options: ShapeRenderOptions,
+): ShapeDimensions {
+  const lines = splitLines(label)
+  const maxLineWidth = Math.max(...lines.map((l) => displayWidth(l)), 0)
+  const lineCount = lines.length
+
+  // Width: 2*padding + maxLineWidth + 2 border chars
+  const innerWidth = 2 * options.padding + maxLineWidth
+  const width = innerWidth + 2
+
+  // Height: lineCount + 2*padding + 2 border chars
+  // Ensure innerHeight is odd for symmetric vertical centering
+  const rawInnerHeight = lineCount + 2 * options.padding
+  const innerHeight =
+    rawInnerHeight % 2 === 0 ? rawInnerHeight + 1 : rawInnerHeight
+  const height = innerHeight + 2
+
+  return {
+    width,
+    height,
+    labelArea: {
+      x: 1 + options.padding,
+      y: 1 + options.padding,
+      width: maxLineWidth,
+      height: lineCount,
+    },
+    // Grid layout: [border=1, content, border=1]
+    gridColumns: [1, innerWidth, 1],
+    gridRows: [1, innerHeight, 1],
+  }
+}
+
+// ============================================================================
+// Shared box rendering
+// ============================================================================
+
+/**
+ * Render a box with custom corner characters.
+ * This is the core rendering function used by all rectangular shapes.
+ *
+ * @param label - Text to display in the box
+ * @param dimensions - Pre-calculated dimensions
+ * @param corners - Corner characters (tl, tr, bl, br)
+ * @param useAscii - Whether to use ASCII or Unicode for lines
+ */
+export function renderBox(
+  label: string,
+  dimensions: ShapeDimensions,
+  corners: CornerChars,
+  useAscii: boolean,
+): Canvas {
+  const { width, height } = dimensions
+  const canvas = mkCanvas(width - 1, height - 1)
+
+  const from = { x: 0, y: 0 }
+  const to = { x: width - 1, y: height - 1 }
+
+  // Line characters
+  const hLine = useAscii ? '-' : '─'
+  const vLine = useAscii ? '|' : '│'
+
+  // Draw horizontal lines (top and bottom)
+  for (let x = from.x + 1; x < to.x; x++) {
+    canvas[x]![from.y] = hLine
+    canvas[x]![to.y] = hLine
+  }
+
+  // Draw vertical lines (left and right)
+  for (let y = from.y + 1; y < to.y; y++) {
+    canvas[from.x]![y] = vLine
+    canvas[to.x]![y] = vLine
+  }
+
+  // Draw corners
+  canvas[from.x]![from.y] = corners.tl
+  canvas[to.x]![from.y] = corners.tr
+  canvas[from.x]![to.y] = corners.bl
+  canvas[to.x]![to.y] = corners.br
+
+  // Center the multi-line label
+  const lines = splitLines(label)
+  const w = width - 1 // Match original grid-based width calculation
+  const h = height - 1
+  const centerY = Math.floor(h / 2)
+  const startY = centerY - Math.floor((lines.length - 1) / 2)
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]!
+    const textX = Math.floor(w / 2) - Math.ceil(displayWidth(line) / 2) + 1
+    const cells = toDisplayCells(line)
+    for (let j = 0; j < cells.length; j++) {
+      const x = textX + j
+      const y = startY + i
+      if (x >= 0 && x < canvas.length && y >= 0 && y < canvas[0]!.length) {
+        canvas[x]![y] = cells[j]!
+      }
+    }
+  }
+
+  return canvas
+}
+
+// ============================================================================
+// Shared attachment point calculation
+// ============================================================================
+
+/**
+ * Calculate edge attachment point for rectangular shapes.
+ * All box-based shapes use the same attachment logic.
+ */
+export function getBoxAttachmentPoint(
+  dir: Direction,
+  dimensions: ShapeDimensions,
+  baseCoord: DrawingCoord,
+): DrawingCoord {
+  const { width, height } = dimensions
+  const centerX = baseCoord.x + Math.floor(width / 2)
+  const centerY = baseCoord.y + Math.floor(height / 2)
+
+  if (dirEquals(dir, Up)) return { x: centerX, y: baseCoord.y }
+  if (dirEquals(dir, Down)) return { x: centerX, y: baseCoord.y + height - 1 }
+  if (dirEquals(dir, Left)) return { x: baseCoord.x, y: centerY }
+  if (dirEquals(dir, Right)) return { x: baseCoord.x + width - 1, y: centerY }
+  if (dirEquals(dir, UpperLeft)) return { x: baseCoord.x, y: baseCoord.y }
+  if (dirEquals(dir, UpperRight))
+    return { x: baseCoord.x + width - 1, y: baseCoord.y }
+  if (dirEquals(dir, LowerLeft))
+    return { x: baseCoord.x, y: baseCoord.y + height - 1 }
+  if (dirEquals(dir, LowerRight))
+    return { x: baseCoord.x + width - 1, y: baseCoord.y + height - 1 }
+  // Middle
+  return { x: centerX, y: centerY }
+}
+
+// ============================================================================
+// Rectangle renderer
+// ============================================================================
+
+/**
+ * Rectangle shape renderer — the default box shape.
+ * Renders as:
+ *   ┌─────────┐
+ *   │  Label  │
+ *   └─────────┘
+ */
+export const rectangleRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(
+    label: string,
+    dimensions: ShapeDimensions,
+    options: ShapeRenderOptions,
+  ): Canvas {
+    const corners = getCorners('rectangle', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}