opentui-markdown-render 0.0.0-stage → 0.2.0

package/src/theme/syntax.ts

@@ -0,0 +1,96 @@
+import { SyntaxStyle, type RGBA, type ThemeTokenStyle } from "@opentui/core"
+import { defaultHeadingStyles, headingColor, headingLevels, type HeadingStyles } from "../headings"
+import type { HeadingLevel, Theme } from "./types"
+
+export function generateSyntax(theme: Theme, headings: HeadingStyles = defaultHeadingStyles, defaultColor: RGBA = theme.text.base) {
+  const { markdown, syntax, text } = theme
+  const feedback = text.feedback
+
+  // A heading level is one colour and one set of attributes, so the levels
+  // read as a hierarchy. The scope names are the ones the Markdown parser
+  // reports for a heading.
+  const headingStyle = (level: HeadingLevel) => {
+    const style = headings[level]
+    return {
+      bold: style.bold,
+      italic: style.italic,
+      underline: style.underline,
+      dim: style.dim,
+    }
+  }
+  const headingRules = headingLevels.map((level) =>
+    rule([`markup.heading.${level}`], headingColor(theme, level), headingStyle(level)),
+  )
+
+  return SyntaxStyle.fromTheme([
+    rule(["default"], defaultColor),
+    rule(["prompt"], theme.accent),
+    rule(["comment", "comment.documentation"], syntax.comment, { italic: true }),
+    rule(["string", "symbol", "character.special", "character"], syntax.string),
+    rule(["number", "boolean", "constant", "float"], syntax.number),
+    rule(["keyword.return", "keyword.conditional", "keyword.repeat", "keyword.coroutine"], syntax.keyword, {
+      italic: true,
+    }),
+    rule(["keyword.type"], syntax.type, { bold: true, italic: true }),
+    rule(["keyword.function", "function.method"], syntax.function),
+    rule(["keyword"], syntax.keyword, { italic: true }),
+    rule(["keyword.import", "string.escape", "string.regexp", "tag.attribute", "keyword.export"], syntax.keyword),
+    rule(["operator", "keyword.operator", "punctuation.delimiter", "keyword.conditional.ternary"], syntax.operator),
+    rule(
+      ["variable", "variable.parameter", "function.method.call", "function.call", "property", "parameter", "field"],
+      syntax.variable,
+    ),
+    rule(["variable.member", "function", "constructor"], syntax.function),
+    rule(["type", "module", "class", "namespace"], syntax.type),
+    rule(["type.definition"], syntax.type, { bold: true }),
+    rule(["punctuation", "punctuation.bracket"], syntax.punctuation),
+    rule(
+      ["variable.builtin", "type.builtin", "function.builtin", "module.builtin", "constant.builtin", "variable.super"],
+      feedback.error,
+    ),
+    rule(["keyword.directive", "keyword.modifier", "keyword.exception"], syntax.keyword, { italic: true }),
+    rule(["punctuation.special", "tag.delimiter"], syntax.operator),
+    // Every level has its own rule, so the scope the parser reports for a
+    // heading decides how it looks. The generic scope is the fallback for a
+    // heading whose level the parser did not report.
+    rule(["markup.heading"], headingColor(theme, 1), headingStyle(1)),
+    ...headingRules,
+    rule(["markup.bold", "markup.strong"], markdown.strong, { bold: true }),
+    rule(["markup.italic"], markdown.emphasis, { italic: true }),
+    // OpenTUI emits markup.list for both bullet and numbered markers. A
+    // dedicated node renderer handles numbered markers when their colour differs.
+    rule(["markup.list"], markdown.listItem),
+    rule(["markup.list.enumeration"], markdown.listEnumeration),
+    rule(["markup.quote"], markdown.blockQuote, { italic: true }),
+    rule(["markup.raw"], markdown.code),
+    rule(["markup.raw.block"], markdown.codeBlock),
+    rule(["markup.raw.inline"], markdown.code, { background: theme.background.base }),
+    rule(["markup.link", "markup.link.url", "string.special", "string.special.url"], markdown.link, {
+      underline: true,
+    }),
+    rule(["markup.link.label"], markdown.linkText, { underline: true }),
+    rule(["label"], markdown.linkText),
+    rule(["markup.underline"], text.base, { underline: true }),
+    rule(["markup.strikethrough", "markup.list.unchecked", "debug"], text.muted),
+    rule(["markup.list.checked"], feedback.success),
+    rule(["comment.error"], feedback.error, { italic: true, bold: true }),
+    rule(["comment.warning"], feedback.warning, { italic: true, bold: true }),
+    rule(["comment.todo", "comment.note"], feedback.info, { italic: true, bold: true }),
+    rule(["attribute", "annotation"], feedback.warning),
+    rule(["tag"], feedback.error),
+    rule(["diff.plus"], theme.diff.text.added, { background: theme.diff.background.added }),
+    rule(["diff.minus"], theme.diff.text.removed, { background: theme.diff.background.removed }),
+    rule(["diff.delta"], theme.diff.text.context, { background: theme.diff.background.context }),
+    rule(["error"], feedback.error, { bold: true }),
+    rule(["warning"], feedback.warning, { bold: true }),
+    rule(["info"], feedback.info),
+  ])
+}
+
+function rule(
+  scope: string[],
+  foreground: RGBA,
+  style: Omit<ThemeTokenStyle["style"], "foreground"> = {},
+): ThemeTokenStyle {
+  return { scope, style: { foreground, ...style } }
+}

package/src/theme/types.ts

@@ -0,0 +1,151 @@
+import type { ColorInput, RGBA } from "@opentui/core"
+
+export type ThemeMode = "light" | "dark"
+// A palette selects the colours; mode on the resolved Theme remains the
+// light/dark semantic used by components such as the status line.
+export type ThemePreset = ThemeMode | "solarized-light" | "solarized-dark"
+
+// The six heading levels a Markdown document can have.
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+export type Theme = {
+  readonly mode: ThemeMode
+  // When present, generated diagram colours are snapped to these fixed swatches.
+  readonly palette?: readonly RGBA[]
+  readonly accent: RGBA
+  readonly categorical: readonly RGBA[]
+  readonly text: {
+    readonly base: RGBA
+    readonly muted: RGBA
+    readonly feedback: {
+      readonly error: RGBA
+      readonly warning: RGBA
+      readonly success: RGBA
+      readonly info: RGBA
+    }
+    readonly action: {
+      readonly primary: { readonly focused: RGBA }
+    }
+  }
+  readonly background: {
+    readonly base: RGBA
+  }
+  readonly border: {
+    readonly base: RGBA
+  }
+  // The frame (viewer window) colours. Optional so a theme built by hand keeps
+  // working; the frame falls back to the border and the muted text.
+  readonly frame?: FrameTheme
+  // Colours of the status line bar. Optional so a host that builds a theme by
+  // hand keeps working; the bar falls back to colours derived from the theme.
+  readonly statusline?: StatusLineTheme
+  readonly markdown: {
+    readonly text: RGBA
+    readonly heading: RGBA
+    // The colour of each heading level. `heading` is the base colour every
+    // level falls back to, so a theme that only knows one heading colour keeps
+    // working.
+    readonly headingLevels: readonly [RGBA, RGBA, RGBA, RGBA, RGBA, RGBA]
+    readonly link: RGBA
+    readonly linkText: RGBA
+    readonly code: RGBA
+    readonly blockQuote: RGBA
+    readonly emphasis: RGBA
+    readonly strong: RGBA
+    readonly horizontalRule: RGBA
+    readonly listItem: RGBA
+    readonly listEnumeration: RGBA
+    readonly image: RGBA
+    readonly imageText: RGBA
+    readonly codeBlock: RGBA
+  }
+  readonly syntax: {
+    readonly comment: RGBA
+    readonly keyword: RGBA
+    readonly function: RGBA
+    readonly variable: RGBA
+    readonly string: RGBA
+    readonly number: RGBA
+    readonly type: RGBA
+    readonly operator: RGBA
+    readonly punctuation: RGBA
+  }
+  readonly diff: {
+    readonly text: { readonly added: RGBA; readonly removed: RGBA; readonly context: RGBA }
+    readonly background: { readonly added: RGBA; readonly removed: RGBA; readonly context: RGBA }
+  }
+}
+
+// The status line bar has its own background so it reads as a separate strip
+// instead of another line of the page.
+export type StatusLineTheme = {
+  readonly background: RGBA
+  readonly foreground: RGBA
+  readonly title: RGBA
+  readonly muted: RGBA
+  readonly border: RGBA
+}
+
+export type StatusLineThemeOverride = {
+  readonly background?: ColorInput
+  readonly foreground?: ColorInput
+  readonly title?: ColorInput
+  readonly muted?: ColorInput
+  readonly border?: ColorInput
+}
+
+// The frame is the window around the document: its border and the label carved
+// into the top edge.
+export type FrameTheme = {
+  readonly border: RGBA
+  readonly title: RGBA
+}
+
+export type FrameThemeOverride = {
+  readonly border?: ColorInput
+  readonly title?: ColorInput
+}
+
+// The colours of the Markdown surface. `heading1`..`heading6` override the
+// colour of a single heading level; `heading` overrides the colour of every
+// level that has no colour of its own.
+export type MarkdownThemeOverride = {
+  readonly [K in Exclude<keyof Theme["markdown"], "headingLevels">]?: ColorInput
+} & {
+  readonly heading1?: ColorInput
+  readonly heading2?: ColorInput
+  readonly heading3?: ColorInput
+  readonly heading4?: ColorInput
+  readonly heading5?: ColorInput
+  readonly heading6?: ColorInput
+}
+
+// Host-side theme APIs accept a partial color-input override. JSON/JSONC
+// application config selects a complete theme file by name instead.
+export type ThemeOverride = {
+  readonly mode?: ThemePreset
+  readonly palette?: readonly ColorInput[]
+  readonly accent?: ColorInput
+  readonly categorical?: readonly ColorInput[]
+  readonly text?: {
+    readonly base?: ColorInput
+    readonly muted?: ColorInput
+    readonly feedback?: {
+      readonly error?: ColorInput
+      readonly warning?: ColorInput
+      readonly success?: ColorInput
+      readonly info?: ColorInput
+    }
+    readonly action?: { readonly primary?: { readonly focused?: ColorInput } }
+  }
+  readonly background?: { readonly base?: ColorInput }
+  readonly border?: { readonly base?: ColorInput }
+  readonly frame?: FrameThemeOverride
+  readonly statusline?: StatusLineThemeOverride
+  readonly markdown?: MarkdownThemeOverride
+  readonly syntax?: { readonly [K in keyof Theme["syntax"]]?: ColorInput }
+  readonly diff?: {
+    readonly text?: { readonly added?: ColorInput; readonly removed?: ColorInput; readonly context?: ColorInput }
+    readonly background?: { readonly added?: ColorInput; readonly removed?: ColorInput; readonly context?: ColorInput }
+  }
+}

package/src/view/code.tsx

@@ -0,0 +1,27 @@
+import { infoStringToFiletype } from "@opentui/core"
+import { generateSyntax } from "../theme/syntax"
+import type { Theme } from "../theme/types"
+import type { HeadingStyles } from "../headings"
+
+export type CodeBlockProps = {
+  content: string
+  language: string | null
+  theme: Theme
+  headings: HeadingStyles
+}
+
+export function CodeBlock(props: CodeBlockProps) {
+  return (
+    <code
+      content={props.content}
+      filetype={infoStringToFiletype(props.language ?? "")}
+      syntaxStyle={generateSyntax(props.theme, props.headings, props.theme.markdown.codeBlock)}
+      fg={props.theme.markdown.codeBlock}
+      bg={props.theme.background.base}
+      conceal={false}
+      drawUnstyledText={true}
+      streaming={false}
+      width="100%"
+    />
+  )
+}

package/src/view/document-slots.ts

@@ -0,0 +1,111 @@
+import { createSignal } from "solid-js"
+import type { Block, SourceRange } from "../core/document"
+
+export type Slot = {
+  kind: Block["type"]
+  // Rendering observes block; unit metadata observes latest. Moving a source
+  // range must not recreate a stateful rendered block.
+  block: () => Block
+  update: (b: Block) => void
+  latest: () => Block
+  updateLatest: (b: Block) => void
+}
+
+function sameKind(old: Block, next: Block): boolean {
+  if (old.type !== next.type) return false
+  return old.type !== "mermaid" || (next.type === "mermaid" && old.language === next.language)
+}
+
+function sameValue(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false
+  if (Array.isArray(a)) {
+    const other = b as unknown[]
+    return a.length === other.length && a.every((value, index) => sameValue(value, other[index]))
+  }
+  const left = a as Record<string, unknown>
+  const right = b as Record<string, unknown>
+  const keys = Object.keys(left)
+  const otherKeys = Object.keys(right)
+  return keys.filter((key) => key !== "source").length === otherKeys.filter((key) => key !== "source").length &&
+    keys.every((key) => key === "source" || (Object.prototype.hasOwnProperty.call(right, key) && sameValue(left[key], right[key])))
+}
+
+function sameBlock(old: Block, next: Block): boolean {
+  return sameValue(old, next)
+}
+
+function sameRange(old: SourceRange | null | undefined, next: SourceRange | null | undefined): boolean {
+  return old?.start === next?.start && old?.end === next?.end
+}
+
+function sameUnitRanges(old: Block, next: Block): boolean {
+  if (!sameRange(old.source, next.source)) return false
+  if (old.type !== "list" || next.type !== "list") return true
+  return old.items.length === next.items.length &&
+    old.items.every((item, index) => sameRange(item.source, next.items[index]?.source))
+}
+
+function refresh(slot: Slot, next: Block): void {
+  const changed = !sameBlock(slot.block(), next)
+  if (changed) slot.update(next)
+  // Even when the render tree is identical, the host needs current offsets.
+  if (changed || !sameUnitRanges(slot.latest(), next)) slot.updateLatest(next)
+}
+
+function createSlot(block: Block): Slot {
+  const [get, set] = createSignal(block)
+  const [latest, updateLatest] = createSignal(block)
+  return { kind: block.type, block: get, update: set, latest, updateLatest }
+}
+
+export function reconcileSlots(prev: Slot[], next: Block[]): Slot[] {
+  if (prev.length === 0) {
+    return next.map(createSlot)
+  }
+  // prefix
+  let prefix = 0
+  while (prefix < prev.length && prefix < next.length) {
+    const old = prev[prefix].block()
+    const incoming = next[prefix]
+    if (!sameKind(old, incoming) || old.raw !== incoming.raw) break
+    refresh(prev[prefix], incoming)
+    prefix++
+  }
+  // suffix
+  let suffix = 0
+  while (
+    suffix < prev.length - prefix &&
+    suffix < next.length - prefix
+  ) {
+    const old = prev[prev.length - 1 - suffix].block()
+    const incoming = next[next.length - 1 - suffix]
+    if (!sameKind(old, incoming) || old.raw !== incoming.raw) break
+    refresh(prev[prev.length - 1 - suffix], incoming)
+    suffix++
+  }
+  const result: Slot[] = []
+  // prefix
+  for (let i = 0; i < prefix; i++) result.push(prev[i])
+  // middle
+  if (prev.length - prefix - suffix === 1 && next.length - prefix - suffix === 1) {
+    // reuse slot
+    const slot = prev[prefix]
+    const incoming = next[prefix]
+    if (sameKind(slot.block(), incoming)) {
+      refresh(slot, incoming)
+      result.push(slot)
+    } else {
+      result.push(createSlot(incoming))
+    }
+  } else {
+    for (let i = prefix; i < next.length - suffix; i++) {
+      const b = next[i]
+      result.push(createSlot(b))
+    }
+  }
+  // suffix
+  for (let i = prev.length - suffix; i < prev.length; i++) result.push(prev[i])
+  return result
+}

package/src/view/document-table.tsx

@@ -0,0 +1,98 @@
+import { TextAttributes, TextTableRenderable, type RenderContext, type RGBA, type TextChunk, type TextTableContent } from "@opentui/core"
+import { extend } from "@opentui/solid"
+import { resolveTableOptions, type ResolvedTableOptions } from "../core/tables"
+import type { Block } from "../core/document"
+import { ScrollableTableRenderable } from "./table"
+import { toTableChunks } from "./inline-style"
+import type { HeadingStyles } from "../headings"
+import type { Theme } from "../theme/types"
+
+export type DocumentTableOptions = {
+  tableData: TextTableContent
+  resolved: ResolvedTableOptions
+  foreground: RGBA
+  background: RGBA
+  tableBorderColor: RGBA
+}
+
+export class MarkdownTableRenderable extends ScrollableTableRenderable {
+  constructor(ctx: RenderContext, _options?: Partial<DocumentTableOptions> & { id?: string }) {
+    const defaults = resolveTableOptions()
+    const table = new TextTableRenderable(ctx, {
+      content: [],
+      columnWidthMode: defaults.widthMode,
+      columnFitter: defaults.columnFitter,
+      cellPaddingX: defaults.cellPaddingX,
+      wrapMode: defaults.wrapMode,
+      showBorders: true, border: true, outerBorder: true, borderStyle: "single",
+      selectable: true,
+    })
+    super(ctx, table)
+  }
+
+  // The Solid reconciler stringifies every `content` prop. Use a different
+  // public setter so TextChunk[][] reaches the OpenTUI table intact.
+  get tableData(): TextTableContent { return this.table.content }
+  set tableData(value: TextTableContent) {
+    this.table.content = value
+    this.syncOverflowState()
+  }
+
+  get resolved(): ResolvedTableOptions {
+    return {
+      widthMode: this.table.columnWidthMode,
+      columnFitter: this.table.columnFitter,
+      cellPaddingX: this.table.cellPaddingX,
+      wrapMode: this.table.wrapMode === "none" ? "none" : "word",
+      overflow: this.panEnabled ? "scroll" : "wrap",
+    }
+  }
+  set resolved(value: ResolvedTableOptions) {
+    this.table.columnWidthMode = value.widthMode
+    this.table.columnFitter = value.columnFitter
+    this.table.cellPaddingX = value.cellPaddingX
+    this.table.wrapMode = value.wrapMode
+    this.panEnabled = value.widthMode === "content" && value.overflow === "scroll"
+    this.syncOverflowState()
+  }
+
+  get foreground(): RGBA { return this.table.fg }
+  set foreground(value: RGBA) { this.table.fg = value; this.syncOverflowState() }
+  get tableBorderColor(): RGBA { return this.table.borderColor }
+  set tableBorderColor(value: RGBA) { this.table.borderColor = value }
+  get background(): RGBA { return this.backgroundColor }
+  set background(value: RGBA) {
+    this.backgroundColor = value
+    this.syncOverflowState()
+  }
+}
+
+// Register once, through the public Solid extension API.
+extend({ md_text_table: MarkdownTableRenderable })
+
+declare module "@opentui/solid" {
+  interface OpenTUIComponents {
+    md_text_table: typeof MarkdownTableRenderable
+  }
+}
+
+export function TableBlock(props: {
+  block: Extract<Block, { type: "table" }>
+  options: ResolvedTableOptions
+  theme: Theme
+  headings: HeadingStyles
+  hyperlinks?: boolean
+}) {
+  const cell = (inlines: readonly import("../core/document").Inline[], header: boolean): TextChunk[] => {
+    const chunks = toTableChunks(inlines, props.theme, props.headings, props.hyperlinks)
+    if (!header) return chunks
+    return chunks.map((chunk) => ({ ...chunk, fg: props.theme.markdown.heading, attributes: TextAttributes.BOLD }))
+  }
+  const content = (): TextTableContent => [
+    props.block.header.map((value) => cell(value.children, true)),
+    ...props.block.rows.map((row) => row.map((value) => cell(value.children, false))),
+  ]
+  return <md_text_table tableData={content()} resolved={props.options}
+    foreground={props.theme.markdown.text} background={props.theme.background.base}
+    tableBorderColor={props.theme.border.base} />
+}

package/src/view/document.tsx

@@ -0,0 +1,195 @@
+import { createMemo, For, type Accessor, type JSX } from "solid-js"
+import stringWidth from "string-width"
+import { type TextChunk } from "@opentui/core"
+import { assertNever, type Block, type Document, type ListItem, type UnitInfo } from "../core/document"
+import type { ResolvedTableOptions } from "../core/tables"
+import type { ImagesConfig, MermaidConfig } from "../config/types"
+import type { CanvasGraphics } from "../graphics"
+import { headingLevels, type HeadingStyles } from "../headings"
+import { LocalImage } from "../media"
+import type { Theme } from "../theme/types"
+import { CodeBlock } from "./code"
+import { reconcileSlots, type Slot } from "./document-slots"
+import { TableBlock } from "./document-table"
+import { InlineFlow } from "./inline-flow"
+import { DisplayMath } from "./math"
+import { MermaidDiagramView } from "./mermaid"
+
+type ListBlock = Extract<Block, { type: "list" }>
+
+export type RenderUnit = (info: Accessor<UnitInfo>, content: JSX.Element) => JSX.Element
+
+export type DocumentViewProps = {
+  document: Document
+  columns: number
+  theme: Theme
+  headings: HeadingStyles
+  graphics: CanvasGraphics
+  surface: () => string
+  assetBase: () => string | undefined
+  imageLimits?: ImagesConfig
+  tableOptions: ResolvedTableOptions
+  mermaidOptions?: MermaidConfig
+  onDiagnostic?: (diagnostic: { level: "warning" | "error"; message: string }) => void
+  renderUnit?: RenderUnit
+}
+
+function listMarker(list: ListBlock, index: number, item: ListItem): string {
+  const bullet = list.ordered ? `${list.start + index}.` : "-"
+  return item.task ? `${bullet} ${item.checked ? "[x]" : "[ ]"}` : bullet
+}
+
+export function DocumentView(props: DocumentViewProps) {
+  let previous: Slot[] = []
+  const slots = createMemo(() => {
+    previous = reconcileSlots(previous, [...props.document.blocks])
+    return previous
+  })
+
+  function flow(
+    children: Extract<Block, { type: "paragraph" }>["children"],
+    columns: number,
+    quote: boolean | undefined,
+    prefix?: (index: number) => string,
+    prefixColor?: () => Theme["text"]["base"],
+    prefixChunks?: (index: number) => TextChunk[],
+  ) {
+    return <InlineFlow inlines={children} columns={columns} theme={props.theme} headings={props.headings}
+      graphics={props.graphics} surface={props.surface} quote={quote} prefix={prefix}
+      prefixColor={prefixColor} prefixChunks={prefixChunks} />
+  }
+
+  function BlockView(input: { block: () => Block; columns: number; quote?: boolean }) {
+    // A reused Mermaid slot must retain this component's local last-good state
+    // while its fenced source changes. The other variants can remount on edit.
+    if (input.block().type === "mermaid") {
+      return <MermaidDiagramView source={(input.block() as Extract<Block, { type: "mermaid" }>).content}
+        theme={props.theme} columns={input.columns} mermaidOptions={props.mermaidOptions}
+        headings={props.headings} onDiagnostic={props.onDiagnostic} />
+    }
+    const view = createMemo(() => {
+      const block = input.block()
+      const columns = Math.max(1, input.columns)
+      switch (block.type) {
+        case "paragraph": return flow(block.children, columns, input.quote)
+        case "heading": {
+          const level = headingLevels[block.level - 1]
+          const style = props.headings[level]
+          const children = style.uppercase ? block.children.map((child) => child.type === "text" ? { ...child, text: child.text.toUpperCase() } : child) : block.children
+          return <box width="100%" flexDirection="column" flexShrink={0} marginTop={style.marginTop} marginBottom={style.marginBottom}>
+            <InlineFlow inlines={children} columns={columns} theme={props.theme} headings={props.headings}
+              graphics={props.graphics} surface={props.surface} heading={{ level }}
+              prefix={(index) => index === 0 ? `${"#".repeat(level)} ` : " ".repeat(level + 1)} prefixColor={() => props.theme.text.muted} />
+          </box>
+        }
+        case "rule": return <box height={1} width="100%" border={["top"]} borderColor={props.theme.markdown.horizontalRule} />
+        case "image": return <LocalImage href={block.href} alt={block.alt} base={props.assetBase}
+          columns={() => columns} cell={props.graphics.cell} background={props.surface}
+          labelColor={() => props.theme.markdown.image} textColor={() => props.theme.markdown.imageText}
+          limits={props.imageLimits} />
+        case "display-math": return <DisplayMath content={block.content} open={block.open} close={block.close}
+          maxWidth={() => columns} theme={() => props.theme} graphics={props.graphics} surface={props.surface} />
+        case "quote": return <box border={columns > 2 ? ["left"] : []} borderColor={props.theme.markdown.blockQuote}
+          paddingLeft={columns > 2 ? 1 : 0} width="100%" flexDirection="column">
+          <For each={block.blocks}>{(child) => <BlockView block={() => child}
+            columns={columns > 2 ? columns - 2 : columns} quote />}</For>
+        </box>
+        case "list": return <ListBlockView block={() => block} columns={columns} quote={input.quote} wrapItems={false} />
+        case "code": return <CodeBlock content={block.content} language={block.language} theme={props.theme} headings={props.headings} />
+        case "mermaid": return <MermaidDiagramView source={block.content} theme={props.theme} columns={columns}
+          mermaidOptions={props.mermaidOptions} headings={props.headings} onDiagnostic={props.onDiagnostic} />
+        case "table": return <TableBlock block={block} options={props.tableOptions} theme={props.theme} headings={props.headings}
+          hyperlinks={props.graphics.hyperlinks?.() ?? true} />
+        case "literal": return <text fg={props.theme.markdown.text} wrapMode="word" content={block.text} />
+        default: return assertNever(block)
+      }
+    })
+    return <box width="100%" flexDirection="column" flexShrink={0}>{view()}</box>
+  }
+
+  function ListItemView(input: {
+    block: () => ListBlock
+    latest: () => ListBlock
+    item: () => ListItem
+    index: Accessor<number>
+    markerWidth: Accessor<number>
+    columns: number
+    quote?: boolean
+    wrapUnit: boolean
+  }) {
+    const list = input.block
+    const item = input.item
+    const markerWidth = input.markerWidth
+    const hanging = () => markerWidth() + 1
+    const marker = () => listMarker(list(), input.index(), item())
+
+    const content = <box flexDirection="column" width="100%" flexShrink={0}
+      marginBottom={list().loose && input.index() < list().items.length - 1 ? 1 : 0}>
+      <For each={item().blocks}>{(child, childIndex) => childIndex() === 0 && child.type === "paragraph"
+        ? flow(child.children, input.columns, input.quote, (row) => row === 0
+            ? `${marker().padEnd(markerWidth())} ` : " ".repeat(hanging()),
+          () => list().ordered ? props.theme.markdown.listEnumeration : props.theme.markdown.listItem,
+          item().task ? (row) => row === 0
+            ? [
+                { __isChunk: true, text: `${list().ordered ? `${list().start + input.index()}.` : "-"} `,
+                  fg: list().ordered ? props.theme.markdown.listEnumeration : props.theme.markdown.listItem },
+                { __isChunk: true, text: `${item().checked ? "[x]" : "[ ]"}${" ".repeat(markerWidth() - stringWidth(marker()) + 1)}`,
+                  fg: item().checked ? props.theme.text.feedback.success : props.theme.text.muted },
+              ] : [{ __isChunk: true, text: " ".repeat(hanging()), fg: props.theme.text.muted }]
+            : undefined)
+        : childIndex() === 0
+          ? <box flexDirection="row" width="100%" flexShrink={0}>
+              <text width={hanging()} flexShrink={0}
+                fg={list().ordered ? props.theme.markdown.listEnumeration : props.theme.markdown.listItem}>
+                {`${marker().padEnd(markerWidth())} `}
+              </text>
+              <BlockView block={() => child} columns={Math.max(1, input.columns - hanging())} quote={input.quote} />
+            </box>
+        : <box marginLeft={hanging()} width={Math.max(1, input.columns - hanging())} flexDirection="column">
+            <BlockView block={() => child} columns={Math.max(1, input.columns - hanging())} quote={input.quote} />
+          </box>}
+      </For>
+      {item().blocks.length === 0 && <text fg={props.theme.markdown.listItem}>{marker()}</text>}
+    </box>
+
+    const info = () => {
+      const current = item()
+      const source = input.latest().items[input.index()]?.source ?? null
+      return { kind: "list-item" as const, item: current.source === source ? current : { ...current, source }, source }
+    }
+    return <>{input.wrapUnit && props.renderUnit ? props.renderUnit(info, content) : content}</>
+  }
+
+  function ListBlockView(input: { block: () => ListBlock; latest?: () => ListBlock; columns: number; quote?: boolean; wrapItems: boolean }) {
+    const markerWidth = createMemo(() => {
+      const list = input.block()
+      return Math.max(1, ...list.items.map((entry, index) => stringWidth(listMarker(list, index, entry))))
+    })
+    return <box flexDirection="column" width="100%" flexShrink={0}>
+      <For each={input.block().items}>{(item, index) => <ListItemView block={input.block}
+        latest={input.latest ?? input.block} markerWidth={markerWidth}
+        item={() => input.block().items[index()] ?? item} index={index} columns={input.columns}
+        quote={input.quote} wrapUnit={input.wrapItems} />}</For>
+    </box>
+  }
+
+  function TopLevelSlot(input: { slot: Slot; columns: number }) {
+    const block = input.slot.block
+    if (block().type === "list") {
+      return <ListBlockView block={() => block() as ListBlock} latest={() => input.slot.latest() as ListBlock}
+        columns={input.columns} wrapItems />
+    }
+    const info = () => {
+      const current = block()
+      if (current.type === "list") throw new Error("A top-level list is rendered as list items, not as a block unit")
+      const source = input.slot.latest().source ?? null
+      return { kind: "block" as const, block: current.source === source ? current : { ...current, source }, source }
+    }
+    const content = <BlockView block={block} columns={input.columns} />
+    return <>{props.renderUnit ? props.renderUnit(info, content) : content}</>
+  }
+
+  return <box width="100%" flexDirection="column" flexShrink={0}>
+    <For each={slots()}>{(slot) => <TopLevelSlot slot={slot} columns={props.columns} />}</For>
+  </box>
+}