opentui-markdown-render 0.0.0-stage → 0.1.0

package/src/merman/core/render-grid.ts

@@ -0,0 +1,51 @@
+import { StyledText, type TextChunk } from "@opentui/core"
+import type { DiagramCanvas, DiagramCanvasRun, DiagramCanvasRunOptions } from "./canvas.js"
+
+export function renderDiagramGridStyledText<Style extends string, Metadata extends object = object>(
+  grid: DiagramCanvas<Style, Metadata>,
+  fg: (run: DiagramCanvasRun<Style, Metadata>) => TextChunk["fg"],
+  bg?: (run: DiagramCanvasRun<Style, Metadata>) => TextChunk["bg"],
+  options?: DiagramCanvasRunOptions<Style, Metadata> & {
+    attributes?: (run: DiagramCanvasRun<Style, Metadata>) => TextChunk["attributes"]
+  },
+): StyledText {
+  const chunks: TextChunk[] = []
+
+  grid.forEachRun(
+    (run) => {
+      chunks.push({
+        __isChunk: true,
+        text: run.text,
+        fg: fg(run),
+        bg: bg?.(run),
+        attributes: options?.attributes?.(run),
+      })
+    },
+    () => {
+      chunks.push({ __isChunk: true, text: "\n" })
+    },
+    options,
+  )
+
+  return new StyledText(chunks)
+}
+
+export function renderDiagramGridStyledTextByStyle<Style extends string, Metadata extends object = object>(
+  grid: DiagramCanvas<Style, Metadata>,
+  foregrounds: Readonly<Record<Style, TextChunk["fg"]>>,
+  backgrounds?: Readonly<Partial<Record<Style, TextChunk["bg"]>>>,
+  options?: DiagramCanvasRunOptions<Style, Metadata> & {
+    attributes?: (run: DiagramCanvasRun<Style, Metadata>) => TextChunk["attributes"]
+  },
+): StyledText {
+  const background =
+    backgrounds && Object.values(backgrounds).some((value) => value !== undefined)
+      ? (run: DiagramCanvasRun<Style, Metadata>) => (run.style ? backgrounds[run.style] : undefined)
+      : undefined
+  return renderDiagramGridStyledText(
+    grid,
+    (run) => (run.style ? foregrounds[run.style] : undefined),
+    background,
+    options,
+  )
+}

package/src/merman/core/spatial.ts

@@ -0,0 +1,243 @@
+import { orthogonalPathPoints, type DiagramBounds, type DiagramPoint } from "./geometry.js"
+
+export type SpatialRole = "body" | "boundary" | "terminal" | "route" | "label"
+
+export interface SpatialSpan {
+  readonly y: number
+  readonly fromX: number
+  readonly toX: number
+}
+
+export interface SpatialClaim {
+  readonly id: string
+  readonly owner: string
+  readonly role: SpatialRole
+  readonly spans: readonly SpatialSpan[]
+}
+
+export interface SpatialContact {
+  owner: string
+  points: readonly DiagramPoint[]
+}
+
+export interface SpatialConflict {
+  moving: SpatialClaim
+  existing: SpatialClaim
+  point: DiagramPoint
+}
+
+export interface SpatialClearance {
+  x: number
+  y: number
+}
+
+export interface SpatialCollisionPolicy {
+  contacts?: readonly SpatialContact[]
+  clearance?: number | SpatialClearance | Partial<Record<SpatialRole, number | SpatialClearance>>
+}
+
+function normalizedSpan(y: number, fromX: number, toX: number): SpatialSpan {
+  return { y, fromX: Math.min(fromX, toX), toX: Math.max(fromX, toX) }
+}
+
+function assertFiniteInteger(value: number, name: string): void {
+  if (!Number.isFinite(value) || !Number.isInteger(value)) throw new RangeError(`${name} must be a finite integer`)
+}
+
+export function spatialRectSpans(bounds: Pick<DiagramBounds, "left" | "top" | "width" | "height">): SpatialSpan[] {
+  assertFiniteInteger(bounds.left, "bounds.left")
+  assertFiniteInteger(bounds.top, "bounds.top")
+  assertFiniteInteger(bounds.width, "bounds.width")
+  assertFiniteInteger(bounds.height, "bounds.height")
+  if (bounds.width <= 0 || bounds.height <= 0) throw new RangeError("Spatial bounds must have positive dimensions")
+  return Array.from({ length: bounds.height }, (_, offset) =>
+    normalizedSpan(bounds.top + offset, bounds.left, bounds.left + bounds.width - 1),
+  )
+}
+
+export function spatialPathSpans(points: readonly DiagramPoint[]): SpatialSpan[] {
+  for (const [index, point] of points.entries()) {
+    assertFiniteInteger(point.x, `points[${index}].x`)
+    assertFiniteInteger(point.y, `points[${index}].y`)
+    if (index > 0 && point.x !== points[index - 1]!.x && point.y !== points[index - 1]!.y) {
+      throw new RangeError("Spatial paths must be orthogonal")
+    }
+  }
+  const cells = new Map<number, Set<number>>()
+  const add = (point: DiagramPoint): void => {
+    const row = cells.get(point.y) ?? new Set<number>()
+    row.add(point.x)
+    cells.set(point.y, row)
+  }
+
+  if (points.length === 1) add(points[0]!)
+  for (const point of orthogonalPathPoints(points)) add(point)
+
+  return [...cells.entries()]
+    .sort(([left], [right]) => left - right)
+    .flatMap(([y, xs]) => {
+      const sorted = [...xs].sort((left, right) => left - right)
+      const [first, ...rest] = sorted
+      if (first === undefined) return []
+      const spans: SpatialSpan[] = []
+      let start = first
+      let end = first
+      for (const x of rest) {
+        if (x === end + 1) {
+          end = x
+          continue
+        }
+        spans.push(normalizedSpan(y, start, end))
+        start = x
+        end = x
+      }
+      spans.push(normalizedSpan(y, start, end))
+      return spans
+    })
+}
+
+export function spatialRectClaim(
+  id: string,
+  owner: string,
+  role: SpatialRole,
+  bounds: Pick<DiagramBounds, "left" | "top" | "width" | "height">,
+): SpatialClaim {
+  return { id, owner, role, spans: spatialRectSpans(bounds) }
+}
+
+export function spatialPathClaim(
+  id: string,
+  owner: string,
+  role: Extract<SpatialRole, "boundary" | "route">,
+  points: readonly DiagramPoint[],
+): SpatialClaim {
+  return { id, owner, role, spans: spatialPathSpans(points) }
+}
+
+function compareClaims(left: SpatialClaim, right: SpatialClaim): number {
+  return left.id < right.id ? -1 : left.id > right.id ? 1 : 0
+}
+
+function sameClaim(left: SpatialClaim, right: SpatialClaim): boolean {
+  return (
+    left.id === right.id &&
+    left.owner === right.owner &&
+    left.role === right.role &&
+    left.spans.length === right.spans.length &&
+    left.spans.every(
+      (span, index) =>
+        span.y === right.spans[index]!.y &&
+        span.fromX === right.spans[index]!.fromX &&
+        span.toX === right.spans[index]!.toX,
+    )
+  )
+}
+
+function pointIsContact(point: DiagramPoint, existing: SpatialClaim, contacts: readonly SpatialContact[]): boolean {
+  return contacts.some(
+    (contact) =>
+      contact.owner === existing.owner &&
+      contact.points.some((candidate) => candidate.x === point.x && candidate.y === point.y),
+  )
+}
+
+function rolesMayOverlap(moving: SpatialClaim, existing: SpatialClaim): boolean {
+  if (moving.owner === existing.owner) return true
+  return moving.role === "route" && existing.role === "route"
+}
+
+function normalizeClearance(clearance: number | SpatialClearance | undefined): SpatialClearance {
+  const x = typeof clearance === "number" ? clearance : (clearance?.x ?? 0)
+  const y = typeof clearance === "number" ? clearance : (clearance?.y ?? 0)
+  assertFiniteInteger(x, "clearance.x")
+  assertFiniteInteger(y, "clearance.y")
+  if (x < 0 || y < 0) throw new RangeError("Spatial clearance cannot be negative")
+  return { x, y }
+}
+
+function inflateSpan(span: SpatialSpan, clearance: SpatialClearance): SpatialSpan {
+  return { y: span.y, fromX: span.fromX - clearance.x, toX: span.toX + clearance.x }
+}
+
+export class SpatialIndex {
+  static empty(): SpatialIndex {
+    return new SpatialIndex([])
+  }
+
+  readonly claims: readonly SpatialClaim[]
+
+  private constructor(claims: readonly SpatialClaim[]) {
+    this.claims = Object.freeze(
+      claims.map((claim) =>
+        Object.freeze({
+          ...claim,
+          spans: Object.freeze(
+            [...claim.spans]
+              .map((span) => Object.freeze({ ...span }))
+              .sort((left, right) => left.y - right.y || left.fromX - right.fromX || left.toX - right.toX),
+          ),
+        }),
+      ),
+    )
+  }
+
+  add(...claims: readonly SpatialClaim[]): SpatialIndex {
+    return this.overlay(new SpatialIndex(claims))
+  }
+
+  overlay(other: SpatialIndex): SpatialIndex {
+    const claims = new Map(this.claims.map((claim) => [claim.id, claim]))
+    for (const claim of other.claims) {
+      const existing = claims.get(claim.id)
+      if (existing && !sameClaim(existing, claim)) throw new Error(`Conflicting spatial claim id: ${claim.id}`)
+      claims.set(claim.id, claim)
+    }
+    return new SpatialIndex([...claims.values()].sort(compareClaims))
+  }
+
+  conflicts(moving: SpatialClaim, policy: SpatialCollisionPolicy = {}): SpatialConflict[] {
+    const contacts = policy.contacts ?? []
+    const conflicts: SpatialConflict[] = []
+
+    for (const existing of this.claims) {
+      if (rolesMayOverlap(moving, existing)) continue
+      const configuredClearance =
+        typeof policy.clearance === "number" || (policy.clearance && "x" in policy.clearance)
+          ? policy.clearance
+          : policy.clearance?.[existing.role]
+      const clearance = normalizeClearance(configuredClearance)
+      for (const movingSpan of moving.spans) {
+        for (let dy = -clearance.y; dy <= clearance.y; dy++) {
+          const inflated = inflateSpan({ ...movingSpan, y: movingSpan.y + dy }, clearance)
+          for (const existingSpan of existing.spans) {
+            if (inflated.y !== existingSpan.y) continue
+            const fromX = Math.max(inflated.fromX, existingSpan.fromX)
+            const toX = Math.min(inflated.toX, existingSpan.toX)
+            for (let x = fromX; x <= toX; x++) {
+              const point = { x, y: inflated.y }
+              const movingOccupiesPoint = moving.spans.some(
+                (span) => span.y === point.y && point.x >= span.fromX && point.x <= span.toX,
+              )
+              if (!(movingOccupiesPoint && pointIsContact(point, existing, contacts))) {
+                conflicts.push({ moving, existing, point })
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return conflicts
+  }
+
+  isFree(claim: SpatialClaim, policy: SpatialCollisionPolicy = {}): boolean {
+    return this.conflicts(claim, policy).length === 0
+  }
+
+  firstFit<T extends { claim: SpatialClaim }>(
+    candidates: readonly T[],
+    policy: SpatialCollisionPolicy = {},
+  ): T | undefined {
+    return candidates.find((candidate) => this.isFree(candidate.claim, policy))
+  }
+}

package/src/merman/core/text-lines.ts

@@ -0,0 +1,32 @@
+export interface DiagramTextRun {
+  text: string
+  italic: boolean
+}
+
+export interface DiagramTextLine {
+  text: string
+  runs: DiagramTextRun[]
+}
+
+export function parseDiagramTextLines(value: string): DiagramTextLine[] {
+  return value.split(/<br\s*\/?>/i).map((line) => {
+    const runs: DiagramTextRun[] = []
+    const source = line.trim()
+    const tag = /<\/?(?:i|em)\s*>/gi
+    let italic = false
+    let offset = 0
+
+    for (const match of source.matchAll(tag)) {
+      if (match.index > offset) runs.push({ text: source.slice(offset, match.index), italic })
+      italic = !match[0].startsWith("</")
+      offset = match.index + match[0].length
+    }
+    if (offset < source.length) runs.push({ text: source.slice(offset), italic })
+
+    return { text: runs.map((run) => run.text).join(""), runs }
+  })
+}
+
+export function splitDiagramLines(value: string): string[] {
+  return parseDiagramTextLines(value).map((line) => line.text)
+}

package/src/merman/core/text.ts

@@ -0,0 +1,44 @@
+import stringWidth from "string-width"
+import { splitDiagramLines } from "./text-lines.js"
+
+export { parseDiagramTextLines, splitDiagramLines } from "./text-lines.js"
+
+export interface DiagramTextBoxSize {
+  width: number
+  height: number
+  lines: string[]
+}
+
+export function diagramTextWidth(value: string): number {
+  return stringWidth(value)
+}
+
+export const DIAGRAM_LABEL_PADDING_X = 1
+
+export function padDiagramLabelLine(value: string): string {
+  const padding = " ".repeat(DIAGRAM_LABEL_PADDING_X)
+  return `${padding}${value}${padding}`
+}
+
+export function measureDiagramLabelWidth(value: string, measure = diagramTextWidth): number {
+  return Math.max(...splitDiagramLines(value).map((line) => measure(line) + DIAGRAM_LABEL_PADDING_X * 2))
+}
+
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" })
+
+export function* diagramTextGraphemes(value: string): Generator<string> {
+  for (const { segment } of graphemeSegmenter.segment(value)) yield segment
+}
+
+export function measureDiagramTextBox(
+  value: string,
+  options: { paddingX?: number; paddingY?: number; minInnerWidth?: number } = {},
+): DiagramTextBoxSize {
+  const lines = splitDiagramLines(value)
+  const innerWidth = Math.max(...lines.map(diagramTextWidth), options.minInnerWidth ?? 1)
+  return {
+    width: innerWidth + (options.paddingX ?? 0) * 2,
+    height: lines.length + (options.paddingY ?? 0) * 2,
+    lines,
+  }
+}

package/src/merman/detect.ts

@@ -0,0 +1,19 @@
+import type { MermaidDiagramKind } from "./diagnostics.js"
+import { isMermaidClassDiagram } from "./class/parser.js"
+import { isMermaidFlowchartDiagram } from "./flowchart/parser.js"
+import { isMermaidGanttDiagram } from "./gantt/parser.js"
+import { isMermaidGitGraphDiagram } from "./gitgraph/parser.js"
+import { isMermaidSequenceDiagram } from "./sequence/parser.js"
+import { isMermaidStateDiagram } from "./state/parser.js"
+import { isMermaidTimelineDiagram } from "./timeline/parser.js"
+
+export function detectMermaidDiagram(content: string): MermaidDiagramKind | undefined {
+  if (isMermaidClassDiagram(content)) return "classDiagram"
+  if (isMermaidFlowchartDiagram(content)) return "flowchart"
+  if (isMermaidGanttDiagram(content)) return "gantt"
+  if (isMermaidGitGraphDiagram(content)) return "gitGraph"
+  if (isMermaidSequenceDiagram(content)) return "sequence"
+  if (isMermaidStateDiagram(content)) return "state"
+  if (isMermaidTimelineDiagram(content)) return "timeline"
+  return undefined
+}

package/src/merman/diagnostics.ts

@@ -0,0 +1,16 @@
+export type MermaidDiagramKind = "classDiagram" | "flowchart" | "sequence" | "state" | "timeline" | "gitGraph" | "gantt"
+
+/** An otherwise valid diagram contains syntax that this renderer does not support. */
+export class MermaidSyntaxError extends Error {
+  readonly _tag = "MermaidSyntaxError"
+
+  constructor(
+    readonly kind: MermaidDiagramKind,
+    readonly lineNumber: number,
+    readonly sourceLine: string,
+    reason = "Unsupported syntax",
+  ) {
+    super(`${reason} in ${kind} diagram at line ${lineNumber}: "${sourceLine}"`)
+    this.name = "MermaidSyntaxError"
+  }
+}

package/src/merman/diagram.ts

@@ -0,0 +1,268 @@
+import {
+  parseColor,
+  StyledText,
+  type ColorInput,
+  type RGBA,
+} from "@opentui/core"
+import type { OpenCodeDiagramPalette } from "./palette.js"
+import { drawClassDiagramGrid } from "./class/drawing.js"
+import type { ClassLayoutEngine } from "./class/types.js"
+import { parseMermaidClassDiagram } from "./class/parser.js"
+import { renderClassGridStyledText } from "./class/render-grid.js"
+import { resolveClassStyleColors } from "./class/style.js"
+import { detectMermaidDiagram } from "./detect.js"
+import { drawFlowchartDiagramGrid } from "./flowchart/drawing.js"
+import { parseMermaidFlowchartDiagram } from "./flowchart/parser.js"
+import { renderGridStyledText, resolveFlowchartStyleColors } from "./flowchart/style.js"
+import { drawGanttDiagramGrid } from "./gantt/drawing.js"
+import { parseMermaidGanttDiagram } from "./gantt/parser.js"
+import { renderGanttGridStyledText } from "./gantt/render-grid.js"
+import { resolveGanttStyleColors } from "./gantt/style.js"
+import type { GanttDiagramRenderOptions } from "./gantt/types.js"
+import { drawGitGraphDiagramGrid } from "./gitgraph/drawing.js"
+import { parseMermaidGitGraphDiagram } from "./gitgraph/parser.js"
+import { renderGitGraphGridStyledText } from "./gitgraph/render-grid.js"
+import { resolveGitGraphStyleColors } from "./gitgraph/style.js"
+import { drawSequenceDiagramGrid } from "./sequence/drawing.js"
+import { parseMermaidSequenceDiagram } from "./sequence/parser.js"
+import { renderSequenceGridStyledText } from "./sequence/render-grid.js"
+import { resolveSequenceStyleColors } from "./sequence/style.js"
+import { drawStateDiagramGrid } from "./state/drawing.js"
+import { parseMermaidStateDiagram } from "./state/parser.js"
+import { renderStateGridStyledText } from "./state/render-grid.js"
+import { resolveStateStyleColors } from "./state/style.js"
+import { drawTimelineDiagramGrid } from "./timeline/drawing.js"
+import { parseMermaidTimelineDiagram } from "./timeline/parser.js"
+import { renderTimelineGridStyledText } from "./timeline/render-grid.js"
+import { resolveTimelineStyleColors } from "./timeline/style.js"
+
+type DiagramKind = NonNullable<ReturnType<typeof detectMermaidDiagram>>
+
+export interface PreparedDiagram {
+  readonly kind: DiagramKind
+  readonly source: string
+  readonly text: StyledText
+  readonly height: number
+}
+
+export interface MermaidDiagramOptions {
+  /** Use terminal-optimized diagram spacing. Defaults to true. */
+  compact?: boolean
+  /** Fold responsive horizontal diagrams that exceed this width. Defaults to 120 columns. */
+  layoutMaxWidth?: number
+  /** Class diagram layout engine. Defaults to builtin. */
+  classLayout?: ClassLayoutEngine
+  /** Gantt-specific terminal rendering options. */
+  gantt?: Omit<GanttDiagramRenderOptions, "layoutMaxWidth">
+  colors?: Partial<Record<keyof OpenCodeDiagramPalette, ColorInput>>
+  /** Restrict generated diagram colours to a fixed palette (e.g. Solarized). */
+  palette?: readonly RGBA[]
+}
+
+function color(value: ColorInput | undefined): RGBA | undefined {
+  return value === undefined ? undefined : parseColor(value)
+}
+
+function prepareDiagram(
+  kind: DiagramKind,
+  source: string,
+  options: MermaidDiagramOptions,
+  layoutMaxWidth: number,
+): PreparedDiagram {
+  const colors = options.colors ?? {}
+  const compact = options.compact ?? true
+  switch (kind) {
+    case "classDiagram": {
+      const grid = drawClassDiagramGrid(parseMermaidClassDiagram(source), { layoutMaxWidth, classLayout: options.classLayout })
+      const size = grid.getTextSize({ trimTop: true, trimBottom: true })
+      return {
+        kind,
+        source,
+        text: renderClassGridStyledText(
+          grid,
+          resolveClassStyleColors({
+            border: color(colors.boxBorder ?? colors.muted),
+            title: color(colors.boxText ?? colors.primary),
+            stereotype: color(colors.groupText ?? colors.group ?? colors.muted),
+            member: color(colors.text),
+            edge: color(colors.line ?? colors.secondary),
+            label: color(colors.text),
+          }),
+        ),
+        height: size.height,
+      }
+    }
+    case "flowchart": {
+      const grid = drawFlowchartDiagramGrid(parseMermaidFlowchartDiagram(source), {
+        compact,
+        layoutMaxWidth,
+      })
+      const size = grid.getTextSize({ trimTop: true, trimBottom: true })
+      return {
+        kind,
+        source,
+        text: renderGridStyledText(
+          grid,
+          resolveFlowchartStyleColors({
+            node: color(colors.boxText ?? colors.primary),
+            nodeBorder: color(colors.boxBorder ?? colors.muted),
+            database: color(colors.boxText ?? colors.primary),
+            databaseBorder: color(colors.boxBorder ?? colors.muted),
+            edge: color(colors.line ?? colors.secondary),
+            label: color(colors.text),
+            group: color(colors.group ?? colors.muted),
+            groupLabel: color(colors.groupText ?? colors.group ?? colors.muted),
+          }),
+          { label: color(colors.labelBackground) },
+        ),
+        height: size.height,
+      }
+    }
+    case "gitGraph": {
+      const grid = drawGitGraphDiagramGrid(parseMermaidGitGraphDiagram(source))
+      const size = grid.getTextSize({ trimBottom: true })
+      return {
+        kind,
+        source,
+        text: renderGitGraphGridStyledText(
+          grid,
+          resolveGitGraphStyleColors({
+            primary: color(colors.primary),
+            secondary: color(colors.secondary),
+            muted: color(colors.muted),
+            warning: color(colors.warning),
+            text: color(colors.text),
+          }),
+        ),
+        height: size.height,
+      }
+    }
+    case "gantt": {
+      const grid = drawGanttDiagramGrid(parseMermaidGanttDiagram(source), { ...options.gantt, layoutMaxWidth })
+      const size = grid.getTextSize({ trimBottom: true })
+      return {
+        kind,
+        source,
+        text: renderGanttGridStyledText(
+          grid,
+          resolveGanttStyleColors({
+            title: color(colors.text),
+            axis: color(colors.muted),
+            background: color(colors.background),
+            section: color(colors.secondary),
+            task: color(colors.primary),
+            active: color(colors.primary),
+            critical: color(colors.warning),
+            done: color(colors.muted),
+          }),
+        ),
+        height: size.height,
+      }
+    }
+    case "sequence": {
+      const grid = drawSequenceDiagramGrid(parseMermaidSequenceDiagram(source), { compact })
+      const size = grid.getTextSize()
+      return {
+        kind,
+        source,
+        text: renderSequenceGridStyledText(
+          grid,
+          resolveSequenceStyleColors({
+            participant: color(colors.primary),
+            lifeline: color(colors.muted),
+            group: color(colors.secondary),
+            request: color(colors.request ?? colors.primary),
+            response: color(colors.response ?? colors.primary),
+            fragment: color(colors.secondary),
+            fragmentLabelBg: color(colors.background),
+            note: color(colors.note ?? colors.warning),
+            noteBg: color(colors.noteBackground ?? colors.background),
+          }),
+        ),
+        height: size.height,
+      }
+    }
+    case "state": {
+      const grid = drawStateDiagramGrid(parseMermaidStateDiagram(source), { layoutMaxWidth })
+      const size = grid.getTextSize({ trimTop: true, trimBottom: true })
+      return {
+        kind,
+        source,
+        text: renderStateGridStyledText(
+          grid,
+          resolveStateStyleColors({
+            state: color(colors.boxText ?? colors.primary),
+            stateBorder: color(colors.boxBorder ?? colors.primary),
+            composite: color(colors.group ?? colors.muted),
+            compositeLabel: color(colors.groupText ?? colors.group ?? colors.muted),
+            transition: color(colors.line ?? colors.secondary),
+            label: color(colors.text),
+            noteBorder: color(colors.noteBorder ?? colors.warning),
+            noteText: color(colors.noteText ?? colors.warning),
+            noteConnector: color(colors.noteConnector ?? colors.muted),
+            start: color(colors.marker ?? colors.muted),
+            end: color(colors.marker ?? colors.muted),
+            choice: color(colors.marker ?? colors.secondary),
+          }),
+          { label: color(colors.labelBackground) },
+        ),
+        height: size.height,
+      }
+    }
+    case "timeline": {
+      const grid = drawTimelineDiagramGrid(parseMermaidTimelineDiagram(source))
+      const size = grid.getTextSize({ trimBottom: true })
+      return {
+        kind,
+        source,
+        text: renderTimelineGridStyledText(
+          grid,
+          resolveTimelineStyleColors({
+            title: color(colors.text),
+            section: color(colors.secondary),
+            period: color(colors.warning),
+            spine: color(colors.muted),
+            event: color(colors.primary),
+          }),
+        ),
+        height: size.height,
+      }
+    }
+  }
+}
+
+// The view and the tests both need the prepared diagram without a render
+// context. `undefined` means the fence is not a Mermaid diagram at all.
+export function measureMermaidDiagram(
+  source: string,
+  options: MermaidDiagramOptions = {},
+): PreparedDiagram | undefined {
+  const kind = detectMermaidDiagram(source)
+  if (!kind) return undefined
+  const configuredMaxWidth =
+    options.layoutMaxWidth === undefined ? 120 : Math.max(1, Math.trunc(options.layoutMaxWidth))
+  const prepared = prepareDiagram(kind, source, options, configuredMaxWidth)
+  const palette = options.palette
+  if (!palette?.length) return prepared
+  const nearest = (color: RGBA): RGBA => {
+    const [r, g, b] = color.toInts()
+    let closest = palette[0]!
+    let distance = Number.POSITIVE_INFINITY
+    for (const candidate of palette) {
+      const [cr, cg, cb] = candidate.toInts()
+      const difference = (r - cr) ** 2 + (g - cg) ** 2 + (b - cb) ** 2
+      if (difference < distance) { distance = difference; closest = candidate }
+    }
+    return closest
+  }
+  return {
+    ...prepared,
+    text: new StyledText(prepared.text.chunks.map((chunk) => ({
+      ...chunk,
+      fg: chunk.fg ? nearest(chunk.fg) : undefined,
+      // Transparent label overlays should remain transparent, not turn into
+      // opaque blocks when snapped to one of the 16 palette swatches.
+      bg: chunk.bg && chunk.bg.a >= 1 ? nearest(chunk.bg) : undefined,
+    }))),
+  }
+}