opentui-markdown-render 0.0.0-stage → 0.2.0

package/src/media.tsx

@@ -0,0 +1,267 @@
+import { NativeImage, imageInfo, parseColor, type ColorInput, type RGBA } from "@opentui/core"
+import { decompressFrames, parseGIF } from "gifuct-js"
+import path from "node:path"
+import { createEffect, createResource, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
+
+const maxRows = 32
+// Allow larger images for better resolution in kitty/modern terminals
+export const maxColumns = 80
+
+const TRANSPARENT_BACKGROUND = "#000000"
+
+export type ImageLimits = {
+  readonly maxColumns?: number
+  readonly maxRows?: number
+}
+
+type Rgb = readonly [number, number, number]
+
+function isRgba(value: unknown): value is RGBA {
+  return typeof value === "object" && value !== null && "r" in value && "g" in value && "b" in value
+}
+
+// `parseColor` cannot read a plain object, and an OpenTUI `RGBA` reaches us both
+// as a live instance and as a JSON round-trip inside the resource key, so the
+// channel values are normalized here instead of trusted to `parseColor`.
+export function resolveBackground(input: ColorInput | RGBA | undefined): Rgb {
+  if (input === undefined) return [0, 0, 0]
+  if (isRgba(input)) {
+    const channel = (value: number) => Math.round(Math.max(0, Math.min(1, Number(value) || 0)) * 255)
+    return [channel(input.r), channel(input.g), channel(input.b)]
+  }
+  try {
+    const color = parseColor(input)
+    const channel = (value: number) => Math.round(Math.max(0, Math.min(1, value)) * 255)
+    return [channel(color.r), channel(color.g), channel(color.b)]
+  } catch {
+    const color = parseColor(TRANSPARENT_BACKGROUND)
+    return [Math.round(color.r * 255), Math.round(color.g * 255), Math.round(color.b * 255)]
+  }
+}
+
+export function rgbToHex(color: Rgb) {
+  const channel = (value: number) => Math.round(value).toString(16).padStart(2, "0")
+  return `#${channel(color[0])}${channel(color[1])}${channel(color[2])}`
+}
+
+type AnimatedFrame = { readonly image: NativeImage; readonly delay: number }
+type Media = { readonly box: { columns: number; rows: number }; readonly image?: NativeImage; readonly frames?: readonly AnimatedFrame[] }
+
+export { standaloneImage, type MarkdownImage } from "./core/image"
+
+export function resolveLocalImage(base: string | undefined, href: string) {
+  if (!base) return { error: "No asset base is configured" }
+  if (/^[a-z][a-z\d+.-]*:/i.test(href) || href.startsWith("//")) return { error: "Only local image paths are supported" }
+  const root = path.resolve(base)
+  const target = path.resolve(root, href)
+  if (target !== root && !target.startsWith(`${root}${path.sep}`)) return { error: "Image path escapes the asset root" }
+  return { path: target }
+}
+
+export function imageBox(
+  width: number,
+  height: number,
+  columns: number,
+  cellAspectRatio: number,
+  limits?: ImageLimits,
+) {
+  const ratio = width / height
+  // A 0 (or non-finite) cell aspect means the terminal never reported pixel
+  // dimensions; the common 2:1 cell is the safe default.
+  const aspect = Number.isFinite(cellAspectRatio) && cellAspectRatio > 0 ? cellAspectRatio : 2
+  const columnLimit = Math.max(1, limits?.maxColumns ?? maxColumns)
+  const rowLimit = Math.max(1, limits?.maxRows ?? maxRows)
+  const clamped = Math.max(1, Math.min(Math.max(1, columns), columnLimit))
+  const naturalRows = Math.max(1, Math.ceil(clamped / (ratio * aspect)))
+  if (naturalRows <= rowLimit) return { columns: clamped, rows: naturalRows }
+  return { columns: Math.max(1, Math.round(ratio * rowLimit * aspect)), rows: rowLimit }
+}
+
+export function LocalImage(props: {
+  readonly href: string
+  readonly alt: string
+  readonly base: () => string | undefined
+  readonly columns: () => number
+  readonly cell: () => { width: number; height: number } | null | undefined
+  readonly background: () => ColorInput | RGBA | undefined
+  readonly labelColor?: () => RGBA
+  readonly textColor?: () => RGBA
+  readonly limits?: ImageLimits
+}) {
+  const [failure, setFailure] = createSignal<string>()
+  // The cell size is part of the key so the image is reloaded and re-fitted once
+  // the terminal reports its pixel resolution (kitty queries it after startup).
+  const [loaded] = createResource(
+    () =>
+      JSON.stringify({
+        href: props.href,
+        base: props.base(),
+        columns: props.columns(),
+        cell: props.cell() ?? null,
+        background: rgbToHex(resolveBackground(props.background())),
+        limits: props.limits ?? null,
+      }),
+    async (key): Promise<Media | { error: string }> => {
+      const input = JSON.parse(key) as {
+        href: string
+        base?: string
+        columns: number
+        cell?: { width: number; height: number } | null
+        background?: string
+        limits?: ImageLimits | null
+      }
+      const resolved = resolveLocalImage(input.base, input.href)
+      if (resolved.path === undefined) return { error: resolved.error ?? "Image path is invalid" }
+      const file = Bun.file(resolved.path)
+      if (!(await file.exists())) return { error: `Image does not exist: ${input.href}` }
+      try {
+        const bytes = new Uint8Array(await file.arrayBuffer())
+        const info = imageInfo(bytes)
+        const box = imageBox(
+          info.width,
+          info.height,
+          Math.max(1, input.columns),
+          input.cell ? input.cell.height / input.cell.width : 2,
+          input.limits ?? undefined,
+        )
+        const target = { width: Math.max(1, Math.round(box.columns * (input.cell?.width ?? 8))), height: Math.max(1, Math.round(box.rows * (input.cell?.height ?? 16))) }
+        const background = resolveBackground(input.background)
+        if (info.format === "gif") return loadGif(bytes, box, target, background)
+        return { box, image: prepareImage(NativeImage.decode(bytes), target, background) }
+      } catch (error) {
+        return { error: error instanceof Error ? error.message : String(error) }
+      }
+    },
+  )
+  const media = () => {
+    const value = loaded()
+    return value && !("error" in value) ? value : undefined
+  }
+  const error = () => {
+    const value = loaded()
+    return failure() ?? (value && "error" in value ? value.error : undefined)
+  }
+  const [frame, setFrame] = createSignal<NativeImage>()
+
+  createEffect(() => {
+    const value = media()
+    if (!value?.frames?.length) {
+      setFrame(value?.image)
+      return
+    }
+    let index = 0
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const next = () => {
+      const current = value.frames![index]!
+      setFrame(current.image)
+      index = (index + 1) % value.frames!.length
+      timer = setTimeout(next, current.delay)
+    }
+    next()
+    onCleanup(() => {
+      if (timer) clearTimeout(timer)
+    })
+  })
+  createEffect(() => {
+    const value = media()
+    onCleanup(() => disposeMedia(value))
+  })
+
+  return (
+    <box width="100%" flexDirection="column" flexShrink={0} overflow="hidden">
+      <Switch>
+        <Match when={loaded.loading}>
+          <box width="100%" flexDirection="row">
+            <text fg={props.labelColor?.()} flexShrink={0}>Loading image: </text>
+            <text fg={props.textColor?.()} wrapMode="word" flexGrow={1}>{props.alt || props.href}</text>
+          </box>
+        </Match>
+        <Match when={error()}>
+          <box width="100%" flexDirection="row">
+            <text fg={props.labelColor?.()} flexShrink={0}>Could not render image </text>
+            <text fg={props.textColor?.()} wrapMode="word" flexGrow={1}>{`${props.alt || props.href}: ${error()}`}</text>
+          </box>
+        </Match>
+        <Match when={media() && frame()}>
+          <image
+            id={`opentui-markdown-image-${props.href}`}
+            source={frame()!}
+            fit="fit"
+            protocol="auto"
+            width={media()!.box.columns}
+            height={media()!.box.rows}
+            onError={(error) => setFailure(error instanceof Error ? error.message : String(error))}
+          />
+        </Match>      </Switch>
+    </box>
+  )
+}
+
+function loadGif(bytes: Uint8Array, box: { columns: number; rows: number }, target: { width: number; height: number }, background: Rgb) {
+  const gif = parseGIF(bytes.slice().buffer as ArrayBuffer)
+  const width = gif.lsd.width
+  const height = gif.lsd.height
+  const canvas = new Uint8Array(width * height * 4)
+  const frames = decompressFrames(gif, true).map((frame) => {
+    const before = canvas.slice()
+    drawPatch(canvas, width, height, frame.patch, frame.dims.left, frame.dims.top, frame.dims.width, frame.dims.height)
+    const image = prepareImage(NativeImage.fromRgba(canvas.slice(), width, height), target, background)
+    if (frame.disposalType === 2) clearPatch(canvas, width, frame.dims.left, frame.dims.top, frame.dims.width, frame.dims.height)
+    if (frame.disposalType === 3) canvas.set(before)
+    return { image, delay: Math.max(50, frame.delay || 100) }
+  })
+  if (!frames.length) throw new Error("GIF contains no frames")
+  return { box, frames }
+}
+
+function drawPatch(canvas: Uint8Array, width: number, height: number, patch: Uint8ClampedArray, left: number, top: number, patchWidth: number, patchHeight: number) {
+  for (let y = 0; y < patchHeight; y++) {
+    if (top + y < 0 || top + y >= height) continue
+    for (let x = 0; x < patchWidth; x++) {
+      if (left + x < 0 || left + x >= width) continue
+      const source = (y * patchWidth + x) * 4
+      const target = ((top + y) * width + left + x) * 4
+      const alpha = patch[source + 3]! / 255
+      const inverse = 1 - alpha
+      canvas[target] = Math.round(patch[source]! * alpha + canvas[target]! * inverse)
+      canvas[target + 1] = Math.round(patch[source + 1]! * alpha + canvas[target + 1]! * inverse)
+      canvas[target + 2] = Math.round(patch[source + 2]! * alpha + canvas[target + 2]! * inverse)
+      canvas[target + 3] = Math.round((alpha + canvas[target + 3]! / 255 * inverse) * 255)
+    }
+  }
+}
+
+function clearPatch(canvas: Uint8Array, width: number, left: number, top: number, patchWidth: number, patchHeight: number) {
+  for (let y = 0; y < patchHeight; y++) {
+    for (let x = 0; x < patchWidth; x++) canvas.fill(0, ((top + y) * width + left + x) * 4, ((top + y) * width + left + x + 1) * 4)
+  }
+}
+
+function prepareImage(image: NativeImage, target: { width: number; height: number }, background: Rgb) {
+  const targetWidth = Math.max(1, Math.round(target.width))
+  const targetHeight = Math.max(1, Math.round(target.height))
+  const scale = Math.min(targetWidth / image.width, targetHeight / image.height)
+  const newWidth = Math.max(1, Math.round(image.width * scale))
+  const newHeight = Math.max(1, Math.round(image.height * scale))
+  const resized = scale !== 1 ? image.resize({ width: newWidth, height: newHeight }) : image
+  if (resized !== image) image.dispose()
+  if (!resized.info().hasAlpha) return resized
+  const raw = resized.raw()
+  const pixels = new Uint8Array(raw.width * raw.height * 4)
+  const color = background
+  for (let index = 0; index < pixels.length; index += 4) {
+    const alpha = raw.data[index + 3]! / 255
+    pixels[index] = Math.round(raw.data[index]! * alpha + color[0]! * (1 - alpha))
+    pixels[index + 1] = Math.round(raw.data[index + 1]! * alpha + color[1]! * (1 - alpha))
+    pixels[index + 2] = Math.round(raw.data[index + 2]! * alpha + color[2]! * (1 - alpha))
+    pixels[index + 3] = 255
+  }
+  const composited = NativeImage.fromRgba(pixels, raw.width, raw.height)
+  resized.dispose()
+  return composited
+}
+
+function disposeMedia(media: Media | undefined) {
+  media?.image?.dispose()
+  media?.frames?.forEach((frame) => frame.image.dispose())
+}

package/src/merman/class/dagre-layout.ts

@@ -0,0 +1,171 @@
+import { Graph, layout, type EdgeLabel, type GraphLabel, type NodeLabel, type Point } from "@dagrejs/dagre"
+import { diagramTextWidth, splitDiagramLines } from "../core/text.js"
+import { translateDiagramBounds, type DiagramBounds, type DiagramPoint } from "../core/geometry.js"
+import { classLabelAnchor } from "./labels.js"
+import {
+  finalizeClassDiagramLayout,
+  makeClassBox,
+  measureClassBox,
+  type ClassBox,
+  type ClassDiagramLayout,
+  type ClassEdge,
+} from "./layout.js"
+import type { ClassDiagram, ClassDiagramDirection } from "./types.js"
+
+type Side = "top" | "bottom" | "left" | "right"
+
+function attachment(box: DiagramBounds, center: Point, size: { width: number; height: number }, point: Point): DiagramPoint {
+  const sides: Array<[Side, number]> = [
+    ["top", Math.abs(point.y - (center.y - size.height / 2))],
+    ["bottom", Math.abs(point.y - (center.y + size.height / 2))],
+    ["left", Math.abs(point.x - (center.x - size.width / 2))],
+    ["right", Math.abs(point.x - (center.x + size.width / 2))],
+  ]
+  const side = sides.reduce((best, entry) => entry[1] < best[1] ? entry : best)[0]
+  const x = Math.max(box.left + 1, Math.min(box.left + box.width - 2, Math.round(point.x)))
+  const y = Math.max(box.top + 1, Math.min(box.top + box.height - 2, Math.round(point.y)))
+  if (side === "top") return { x, y: box.top - 1 }
+  if (side === "bottom") return { x, y: box.top + box.height }
+  if (side === "left") return { x: box.left - 1, y }
+  return { x: box.left + box.width, y }
+}
+
+function intersectsBox(from: DiagramPoint, to: DiagramPoint, box: DiagramBounds): boolean {
+  const right = box.left + box.width - 1
+  const bottom = box.top + box.height - 1
+  if (from.y === to.y) return from.y >= box.top && from.y <= bottom &&
+    Math.max(from.x, to.x) >= box.left && Math.min(from.x, to.x) <= right
+  return from.x >= box.left && from.x <= right &&
+    Math.max(from.y, to.y) >= box.top && Math.min(from.y, to.y) <= bottom
+}
+
+function orthogonalize(
+  points: readonly DiagramPoint[],
+  boxes: readonly ClassBox[],
+  vertical: boolean,
+): DiagramPoint[] {
+  const result: DiagramPoint[] = [points[0]!]
+  for (const to of points.slice(1)) {
+    const from = result[result.length - 1]!
+    if (from.x !== to.x && from.y !== to.y) {
+      const candidates = vertical
+        ? [{ x: from.x, y: to.y }, { x: to.x, y: from.y }]
+        : [{ x: to.x, y: from.y }, { x: from.x, y: to.y }]
+      const cost = (bend: DiagramPoint): number => boxes.reduce((total, box) =>
+        total + Number(intersectsBox(from, bend, box.bounds)) + Number(intersectsBox(bend, to, box.bounds)), 0)
+      const bend = cost(candidates[1]!) < cost(candidates[0]!) ? candidates[1]! : candidates[0]!
+      if (from.x !== bend.x || from.y !== bend.y) result.push(bend)
+    }
+    if (result.at(-1)!.x !== to.x || result.at(-1)!.y !== to.y) result.push(to)
+  }
+  return result
+}
+
+function selfLoop(box: DiagramBounds, vertical: boolean, offset: number, labelWidth: number): DiagramPoint[] {
+  const left = box.left
+  const right = box.left + box.width - 1
+  const top = box.top
+  const bottom = box.top + box.height - 1
+  if (vertical) {
+    const portX = right - 1
+    const outsideX = right + Math.max(3, labelWidth + 3) + offset * 2
+    return [
+      { x: portX, y: bottom + 1 },
+      { x: portX, y: bottom + 3 + offset },
+      { x: outsideX, y: bottom + 3 + offset },
+      { x: outsideX, y: top - 3 - offset },
+      { x: portX, y: top - 3 - offset },
+      { x: portX, y: top - 1 },
+    ]
+  }
+  const portY = bottom - 1
+  const outsideY = bottom + 3 + offset * 2
+  return [
+    { x: right + 1, y: portY },
+    { x: right + 3 + offset, y: portY },
+    { x: right + 3 + offset, y: outsideY },
+    { x: left - 3 - offset, y: outsideY },
+    { x: left - 3 - offset, y: portY },
+    { x: left - 1, y: portY },
+  ]
+}
+
+export function layoutDagreClassDiagram(diagram: ClassDiagram, direction: ClassDiagramDirection): ClassDiagramLayout {
+  if (diagram.classes.length === 0) return { direction, boxes: [], edges: [], width: 0, height: 0 }
+  const graph = new Graph<GraphLabel, NodeLabel, EdgeLabel>({ multigraph: true })
+  graph.setGraph({ rankdir: direction, nodesep: 8, ranksep: 10, edgesep: 4 })
+  graph.setDefaultEdgeLabel(() => ({}))
+  const metrics = new Map(diagram.classes.map((definition) => [definition.id, measureClassBox(definition)]))
+  for (const definition of diagram.classes) {
+    const size = metrics.get(definition.id)!
+    graph.setNode(definition.id, { width: size.width, height: size.height })
+  }
+  diagram.relationships.forEach((edge, index) => {
+    const width = edge.label ? Math.max(...splitDiagramLines(edge.label).map(diagramTextWidth)) + 2 : 0
+    const height = edge.label ? splitDiagramLines(edge.label).length + 1 : 0
+    graph.setEdge(edge.from, edge.to, { width, height, weight: edge.kind === "inheritance" ? 2 : 1 }, String(index))
+  })
+  layout(graph)
+
+  const boxes = diagram.classes.map((definition) => {
+    const node = graph.node(definition.id)
+    const size = metrics.get(definition.id)!
+    return makeClassBox(definition, Math.round(node.x! - size.width / 2), Math.round(node.y! - size.height / 2), size)
+  })
+  const boxById = new Map(boxes.map((box) => [box.definition.id, box]))
+  const vertical = direction === "TB" || direction === "BT"
+  const loopCounts = new Map<string, number>()
+  const edges: ClassEdge[] = diagram.relationships.map((relationship, index) => {
+    const from = boxById.get(relationship.from)!.bounds
+    const to = boxById.get(relationship.to)!.bounds
+    if (relationship.from === relationship.to) {
+      const offset = loopCounts.get(relationship.from) ?? 0
+      loopCounts.set(relationship.from, offset + 1)
+      return { relationship, fromId: relationship.from, toId: relationship.to, from, to,
+        path: selfLoop(from, vertical, offset,
+          relationship.label ? Math.max(...splitDiagramLines(relationship.label).map(diagramTextWidth)) : 0) }
+    }
+    const waypoints = graph.edge({ v: relationship.from, w: relationship.to, name: String(index) })?.points ?? []
+    const source = graph.node(relationship.from)
+    const target = graph.node(relationship.to)
+    const first = waypoints[0] ?? { x: source.x!, y: source.y! }
+    const last = waypoints.at(-1) ?? { x: target.x!, y: target.y! }
+    const start = attachment(from, { x: source.x!, y: source.y! }, metrics.get(relationship.from)!, first)
+    const end = attachment(to, { x: target.x!, y: target.y! }, metrics.get(relationship.to)!, last)
+    const direct = (start.x === end.x || start.y === end.y) &&
+      boxes.every((box) => !intersectsBox(start, end, box.bounds))
+    const path = direct ? [start, end] : orthogonalize([
+      start,
+      ...waypoints.slice(1, -1).map((point) => ({ x: Math.round(point.x), y: Math.round(point.y) })),
+      end,
+    ], boxes, vertical)
+    return { relationship, fromId: relationship.from, toId: relationship.to, from, to, path }
+  })
+  const result = finalizeClassDiagramLayout(boxes, edges, direction)
+  let minX = 0
+  let minY = 0
+  let maxX = result.width
+  let maxY = result.height
+  for (const edge of result.edges) {
+    if (!edge.relationship.label) continue
+    const lines = splitDiagramLines(edge.relationship.label)
+    const width = Math.max(...lines.map(diagramTextWidth))
+    const anchor = classLabelAnchor(edge.path, lines.length, width, vertical)
+    minX = Math.min(minX, anchor.x - 1)
+    minY = Math.min(minY, anchor.y)
+    maxX = Math.max(maxX, anchor.x + width + 2)
+    maxY = Math.max(maxY, anchor.y + lines.length + 1)
+  }
+  const dx = -minX
+  const dy = -minY
+  if (dx || dy) {
+    for (const box of result.boxes) translateDiagramBounds(box.bounds, dx, dy)
+    for (const edge of result.edges) for (const point of edge.path) {
+      point.x += dx
+      point.y += dy
+    }
+  }
+  result.width = maxX + dx
+  result.height = maxY + dy
+  return result
+}

package/src/merman/class/diagram.ts

@@ -0,0 +1,8 @@
+import { drawClassDiagramGrid } from "./drawing.js"
+import { parseMermaidClassDiagram } from "./parser.js"
+import { renderClassGridText } from "./render-grid.js"
+import type { ClassDiagramRenderOptions } from "./types.js"
+
+export function renderClassDiagram(content: string, options: ClassDiagramRenderOptions = {}): string {
+  return renderClassGridText(drawClassDiagramGrid(parseMermaidClassDiagram(content), options))
+}