@promptctl/rich-js 0.24.0 → 0.25.0

package/dist/renderables/markdown.js

@@ -1,666 +1,298 @@
 /**
  * Markdown — renders Markdown content to the terminal.
- * Uses built-in parsing (no external dependency).
  *
- * Block structure is read as CommonMark reads it: a blockquote and a list
- * item are both containers, their lines tokenized as Markdown of their own
- * once the container's marker or indentation is cut off, and drawn beside a
- * gutter — the quote's bar, the item's marker then its hang. A table, which
- * CommonMark has none of, and an HTML block are read as markdown-it — Rich's
- * parser — reads them. Where CommonMark leaves the drawing open, Rich's is
+ * `markdown-parse.ts` reads the source, once, when a `Markdown` is made; this
+ * module draws what it read. A blockquote and a list item are drawn beside a
+ * gutter — the quote's bar, the item's marker then its hang — and a table as
+ * Rich draws one. Where CommonMark leaves the drawing open, Rich's is
  * followed: HTML, a block of it or a tag inline, is drawn as Rich draws it,
  * not at all.
  */
-import { cellLen, expandTabs, parseTabSize } from "../core/cells.js";
+import { cellCount, cellLen } from "../core/cells.js";
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
 import { RichText, resolveStyle } from "../core/text.js";
 import { Rule } from "./rule.js";
+import { Padding } from "./padding.js";
+import { pyRstrip } from "./python-space.js";
+import { Syntax } from "./syntax.js";
 import { Table } from "./table.js";
+import { parseMarkdown } from "./markdown-parse.js";
 import { SIMPLE } from "../core/box.js";
-import { drawable, getStyle, groundedStyle, stackedHeight } from "../core/protocol.js";
-const HEADING = /^(#{1,6})\s+(.+)$/;
-/** A thematic break: three or more of one of `*`, `-` or `_`, spaces and tabs between them allowed. */
-const RULE = /^(?:(?:\*[ \t]*){3,}|(?:-[ \t]*){3,}|(?:_[ \t]*){3,})$/;
-const SETEXT = /^(=+|-+)[ \t]*$/;
-const FENCE = /^```(\w*)/;
-const QUOTE = /^>/;
-const ITEM_MARKER = /^(?:[*+-]|(\d{1,9})\.)/;
-const LEAD = /^[ \t]*/;
-const HARD_BREAK = /(?: {2,}|\\)$/;
-const BLOCK_STARTS = [HEADING, FENCE, QUOTE, RULE];
-/** A line that may be a table's delimiter row, screened as markdown-it screens one: pipes, dashes, colons and space only, and not a dash then a space, which opens a list item. */
-const DELIMITER_ROW = /^(?!-[ \t])[-:|][-:| \t]+$/;
-const DELIMITER_CELL = /^:?-+:?$/;
+import { drawable, getStyle, groundedStyle, render, stackedHeight, withCellWidth } from "../core/protocol.js";
 /**
- * How many empty cells a table's short rows may be filled out with before the
- * table ends, as markdown-it caps them: a header of many columns over many
- * one-cell rows would otherwise grow a few kilobytes of source into millions of cells.
+ * Every inline in `inlines` holding none, in document order, and each
+ * container's `leave` after its last, carrying the frame `open` made for it
+ * as `walk` reached it. A loop over a stack, not recursion: emphasis nests as
+ * deep as its source does, and Rich, walking markdown-it's flat token stream,
+ * draws ten thousand levels of it.
  */
-const MAX_AUTOCOMPLETED_CELLS = 0x10000;
-/** Indentation that makes a line indented code when it opens a block, as CommonMark counts it. */
-const CODE_INDENT = 4;
-/** The tab stop code is drawn with, as Rich's `Syntax` draws it. */
-const CODE_TAB_SIZE = parseTabSize(8);
-const BLANK_LINE = { text: "", margin: 0, lazy: false };
-/** The block-level element names an HTML block of the sixth kind opens with, as markdown-it-py lists them. */
-const HTML_BLOCK_NAMES = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|" +
-    "fieldset|figcaption|figure|footer|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|header|hr|html|iframe|legend|li|link|" +
-    "main|menu|menuitem|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|" +
-    "title|tr|track|ul";
-// The tag grammar of markdown-it-py's common/html_re, shared by the HTML block a lone tag opens and the inline HTML it reads in text.
-const HTML_ATTRIBUTE = String.raw `(?:\s+[a-zA-Z_:][a-zA-Z0-9:._-]*(?:\s*=\s*(?:[^"'=<>\`\x00-\x20]+|'[^']*'|"[^"]*"))?)`;
-const HTML_OPEN_TAG = String.raw `<[A-Za-z][A-Za-z0-9-]*${HTML_ATTRIBUTE}*\s*\/?>`;
-const HTML_CLOSE_TAG = String.raw `<\/[A-Za-z][A-Za-z0-9-]*\s*>`;
-const HTML_BLOCKS = [
-    { start: /^<(?:script|pre|style|textarea)(?=\s|>|$)/i, end: /<\/(?:script|pre|style|textarea)>/i, interrupts: true },
-    { start: /^<!--/, end: /-->/, interrupts: true },
-    { start: /^<\?/, end: /\?>/, interrupts: true },
-    // Uppercase only, as markdown-it-py has it, where markdown-it in JS and CommonMark 0.31 take `<!doctype` too.
-    { start: /^<![A-Z]/, end: />/, interrupts: true },
-    { start: /^<!\[CDATA\[/, end: /\]\]>/, interrupts: true },
-    { start: new RegExp(String.raw `^<\/?(?:${HTML_BLOCK_NAMES})(?=\s|\/?>|$)`, "i"), end: "blank", interrupts: true },
-    {
-        start: new RegExp(String.raw `^(?:${HTML_OPEN_TAG}|${HTML_CLOSE_TAG})\s*$`),
-        end: "blank",
-        interrupts: false,
-    },
-];
-/** The column `ws` ends at when it starts at column `from`, a tab reaching the next stop of 4 as CommonMark counts it. */
-function advance(from, ws) {
-    return [...ws].reduce((col, ch) => (ch === "\t" ? col + 4 - (col % 4) : col + 1), from);
-}
-/** The column `line`'s leading whitespace ends at. */
-function leadEnd(line) {
-    return advance(0, LEAD.exec(line.text)[0]);
-}
-/** How far `line` is indented inside its container. */
-function indentOf(line) {
-    return Math.max(0, leadEnd(line) - line.margin);
-}
-/** `line` from its first character that is not leading whitespace. */
-function body(line) {
-    return line.text.slice(LEAD.exec(line.text)[0].length);
-}
-function isBlank(line) {
-    return line.text.trim() === "";
-}
-/** Whether `line` sits less than a code indent into its container and its text matches `re`. */
-function startsWith(line, re) {
-    return indentOf(line) < CODE_INDENT && re.test(body(line));
-}
-/**
- * `line` from `n` columns into its container on: a block's own indentation
- * cut off, the rest as written. A tab straddling the cut leaves the columns
- * past it as spaces.
- */
-function dropColumns(line, n) {
-    const to = line.margin + n;
-    let col = 0;
-    let i = 0;
-    for (; i < line.text.length && col < to && (line.text[i] === " " || line.text[i] === "\t"); i++) {
-        const next = advance(col, line.text[i]);
-        if (next > to)
-            return " ".repeat(next - to) + line.text.slice(i + 1);
-        col = next;
-    }
-    return line.text.slice(i);
-}
-function itemStart(line) {
-    const text = body(line);
-    const m = ITEM_MARKER.exec(text);
-    if (!m || indentOf(line) >= CODE_INDENT || RULE.test(text))
-        return undefined;
-    const after = text.slice(m[0].length);
-    const spacing = LEAD.exec(after)[0];
-    const rest = after.slice(spacing.length);
-    if (spacing === "" && rest !== "")
-        return undefined;
-    const markerEnd = leadEnd(line) + m[0].length;
-    const spaced = advance(markerEnd, spacing) - markerEnd;
-    const content = rest === "" || spaced > CODE_INDENT ? markerEnd + 1 : markerEnd + spaced;
-    const lead = line.text.slice(0, line.text.length - text.length);
-    return {
-        bullet: m[1] === undefined ? m[0] : undefined,
-        start: m[1] === undefined ? 0 : parseInt(m[1], 10),
-        content,
-        first: rest === "" ? undefined : { text: lead + " ".repeat(m[0].length) + after, margin: content, lazy: false },
-    };
-}
-/** Whether `line` may be a table's row: a line of its container's own, neither lazy paragraph text nor indented code. */
-function tableLine(line) {
-    return !line.lazy && indentOf(line) < CODE_INDENT;
-}
-/**
- * A table row's cells, as markdown-it splits one: at every `|` no backslash escapes,
- * a pipe at either end of the row closing it rather than opening an empty
- * cell, and each cell trimmed. An escaped `\|` is a `|` in its cell, inside a
- * code span too.
- */
-function rowCells(row) {
-    const cells = [""];
-    for (const ch of row.trim()) {
-        const last = cells.length - 1;
-        if (ch !== "|")
-            cells[last] += ch;
-        else if (cells[last].endsWith("\\"))
-            cells[last] = `${cells[last].slice(0, -1)}|`;
+function* walk(inlines, open) {
+    // The containers open here, innermost last; `outside` is the level outside them all.
+    const outside = { inlines, next: 0 };
+    const stack = [];
+    for (;;) {
+        const top = stack[stack.length - 1] ?? outside;
+        const inline = top.inlines[top.next++];
+        if (inline === undefined) {
+            const left = stack.pop();
+            if (left === undefined)
+                return;
+            yield { kind: "leave", frame: left.frame };
+            continue;
+        }
+        if ("children" in inline)
+            stack.push({ inlines: inline.children, next: 0, frame: open(inline) });
         else
-            cells.push("");
+            yield { kind: "leaf", inline };
     }
-    const from = cells[0] === "" ? 1 : 0;
-    const to = cells.length > from && cells[cells.length - 1] === "" ? -1 : undefined;
-    return cells.slice(from, to).map((cell) => cell.trim());
-}
-/** The alignment of each column `line` declares, if it is a table's delimiter row: a run of dashes per column, a colon on the side its cells sit. */
-function alignments(line) {
-    const text = body(line);
-    if (!tableLine(line) || !DELIMITER_ROW.test(text))
-        return undefined;
-    const cells = rowCells(text);
-    if (!cells.every((cell) => DELIMITER_CELL.test(cell)))
-        return undefined;
-    return cells.map((cell) => (cell.endsWith(":") ? (cell.startsWith(":") ? "center" : "right") : cell.startsWith(":") ? "left" : undefined));
-}
-/**
- * The columns of the table opening at `start`, if one does, as markdown-it
- * reads one: a header row with a pipe in it, then a delimiter row naming as
- * many columns.
- */
-function tableAt(lines, start) {
-    const head = lines[start];
-    const delimiter = lines[start + 1];
-    if (delimiter === undefined || !tableLine(head) || !body(head).includes("|"))
-        return undefined;
-    const aligns = alignments(delimiter);
-    if (!aligns)
-        return undefined;
-    const headers = rowCells(body(head));
-    return headers.length === aligns.length ? headers.map((header, n) => ({ header, align: aligns[n] })) : undefined;
 }
-/** Whether two item starts belong to one list: the same bullet character, or both numbered. */
-function sameList(a, b) {
-    return a.bullet === b.bullet;
+/** The styles Rich enters for a link with hyperlinks on, outermost first. */
+function linkStyles(url) {
+    return [new Style({ link: url }), "markdown.link_url"];
 }
 /**
- * A `>` line as a line of its quote: the marker blanked, and the quote's
- * content starting past it and the one column of space that may follow it —
- * one column of a tab, when a tab follows it.
+ * Rich's one inline HTML tag that draws: `<kbd>` exactly as written pushes
+ * `entry()` onto `stack`, and `</kbd>` pops the top of it — whatever is
+ * there, as Rich's style stack pops, so a close that crosses an emphasis
+ * ends that emphasis's style and the emphasis ends the key's. Every other tag
+ * draws nothing. `stack` is one block's, or one table cell's: a key left open
+ * ends with it, and a close with no key open in it pops nothing. Rich's one
+ * stack spans the document, so there a key left open styles every block after
+ * it, a block's own close pops the key's entry and leaves the block's style
+ * behind for the rest, and a stray close pops whatever is left or, with
+ * nothing left, raises. An HTML parser closes an inline element where its
+ * block ends, and that is the reading kept here.
  */
-function quoted(line) {
-    const at = line.text.length - body(line).length;
-    const spaced = /[ \t]/.test(line.text[at + 1] ?? "");
-    return { text: `${line.text.slice(0, at)} ${line.text.slice(at + 1)}`, margin: leadEnd(line) + 1 + (spaced ? 1 : 0), lazy: false };
-}
-/** The kind of HTML block `line` opens, if it opens one: the first kind whose opening it matches, as markdown-it tries them in order. */
-function htmlBlockAt(line) {
-    return HTML_BLOCKS.find((kind) => startsWith(line, kind.start));
-}
-/**
- * Whether `line` opens a block of its own that may cut short the block before
- * it — a heading, a fence, a quote, a rule, a list item or an HTML block of
- * any kind but a lone tag. A line that does not is text, and under an open
- * paragraph it continues that paragraph.
- */
-function opensBlock(line) {
-    return BLOCK_STARTS.some((re) => startsWith(line, re)) || itemStart(line) !== undefined || htmlBlockAt(line)?.interrupts === true;
-}
-/**
- * Whether `line` ends a paragraph: `opensBlock`, read as CommonMark reads it
- * under a paragraph. Indented code cannot interrupt one; a list item does only
- * when it has text and, numbered, counts from 1, so prose wrapped onto "2024.
- * That year" stays prose; and a line of `=` or `-` is the paragraph's heading
- * underline.
- */
-function endsParagraph(line) {
-    if (line.lazy)
-        return false;
-    if (underline(line))
-        return true;
-    const item = itemStart(line);
-    return item ? item.first !== undefined && (item.bullet !== undefined || item.start === 1) : opensBlock(line);
-}
-/** The setext underline `line` is — a line of `=` or `-` under a paragraph — if it is one. A lazy line never is. */
-function underline(line) {
-    return line && !line.lazy && indentOf(line) < CODE_INDENT ? SETEXT.exec(body(line)) : null;
-}
-/** Whether the last block of `tokens`, followed into the containers it closes, is a paragraph still open. */
-function endsInParagraph(tokens) {
-    const last = tokens[tokens.length - 1];
-    switch (last?.type) {
-        case "paragraph":
-            return true;
-        case "list_item":
-        case "blockquote":
-            return endsInParagraph(last.children);
-        default:
-            return false;
-    }
-}
-/**
- * Whether `line`, short of a container's marker or indentation, still
- * belongs to it as a lazy continuation: CommonMark's paragraph continuation
- * text, which continues the paragraph open at the end of the container's
- * `inner` lines and opens no block of its own. Outside the container a line
- * is read without the paragraph under it, so any list item — whatever it
- * counts from — ends the container rather than continuing it. A line after a
- * lazy continuation finds that paragraph still open, so `afterLazy` answers
- * without reading `inner` again: a container's lazy lines cost one read of
- * it, not one each.
- */
-function continuesLazily(inner, line, afterLazy) {
-    return !isBlank(line) && !opensBlock(line) && (afterLazy || endsInParagraph(tokenize(inner)));
+function kbdTags(stack, entry) {
+    let open = 0;
+    return (tag) => {
+        if (tag === "<kbd>") {
+            open++;
+            stack.push(entry());
+        }
+        else if (tag === "</kbd>" && open > 0) {
+            open--;
+            stack.pop();
+        }
+    };
 }
-/**
- * The text of the paragraph begun at `start`, every line after it up to a
- * blank, a line that ends a paragraph or a table's header row, and the index of the line that ended
- * it. Soft-broken lines are joined by one space, as a Markdown renderer
- * reflows them, with their own indentation dropped; a line ending in two
- * spaces or a backslash breaks hard, and its break is kept.
- */
-function continuation(lines, start) {
-    const parts = [lines[start].text];
-    let i = start + 1;
-    for (; i < lines.length && !isBlank(lines[i]) && !endsParagraph(lines[i]) && !tableAt(lines, i); i++)
-        parts.push(lines[i].text);
-    const text = parts
-        .map((part, n) => {
-        const words = (n === parts.length - 1 ? part : part.replace(HARD_BREAK, "")).trim();
-        return n === 0 ? words : (HARD_BREAK.test(parts[n - 1]) ? "\n" : " ") + words;
-    })
-        .join("");
-    return { text, next: i };
+const KBD_STYLE = "markdown.kbd";
+/** The style a quote draws its bar in and lays under everything it holds. */
+const QUOTE_STYLE = "markdown.block_quote";
+function headingStyle(options, level) {
+    return getStyle(options, `markdown.h${level}`);
 }
 /**
- * The lines of the list item opened at `start` — every line after it that is
- * blank, indented to the content column, or a lazy continuation — and the
- * index of the line that ended it. Blank lines trailing the item are left to
- * whatever follows it, and an item that opens with a blank line ends at the
- * next one: it is empty.
+ * `inlines` appended to `result` as Rich draws each: emphasis, code and
+ * `<kbd>` in their styles, other inline HTML as nothing, an image as nothing
+ * where it sits — `drawImage` draws it, ahead of the block — and text as it is. A link's text
+ * is the link; or, without hyperlinks, nothing is, and its text is written
+ * plain with the URL after it, for a reader who cannot click it.
  */
-function itemLines(item, lines, start) {
-    const inner = item.first === undefined ? [] : [item.first];
-    let lazy = false;
-    let i = start + 1;
-    for (; i < lines.length; i++) {
-        const line = lines[i];
-        const blank = isBlank(line);
-        if (blank && inner.length === 0)
-            break;
-        const held = blank || leadEnd(line) >= item.content;
-        lazy = !held && continuesLazily(inner, line, lazy);
-        if (!held && !lazy)
-            break;
-        inner.push(held ? { text: line.text, margin: item.content, lazy: false } : { ...line, lazy: true });
-    }
-    for (; inner.length > 0 && isBlank(inner[inner.length - 1]); i--)
-        inner.pop();
-    return { inner, next: i };
-}
-/**
- * The list opened at `start`: each item as a token holding its blocks, and
- * between items the blank lines that separated them in the source. Numbers
- * count on from the first item's, as Rich draws them, right-aligned to the
- * widest so every item hangs at one column.
- */
-function list(first, lines, start) {
-    const items = [];
-    let i = start;
-    let gap = 0;
-    for (let item = first; item && sameList(first, item); item = i < lines.length ? itemStart(lines[i]) : undefined) {
-        const { inner, next } = itemLines(item, lines, i);
-        items.push({ gap, children: tokenize(inner.length === 0 ? [BLANK_LINE] : inner) });
-        let after = next;
-        while (after < lines.length && isBlank(lines[after]))
-            after++;
-        gap = after - next;
-        i = after;
-    }
-    // The blank lines after the last item belong to whatever follows the list.
-    const next = i - gap;
-    const width = String(first.start + items.length - 1).length + 1;
-    const tokens = items.flatMap(({ gap: blanks, children }, n) => [
-        ...Array.from({ length: blanks }, () => ({ type: "blank" })),
-        {
-            type: "list_item",
-            marker: first.bullet === undefined ? { kind: "number", label: `${first.start + n}.`.padStart(width) } : { kind: "bullet" },
-            children,
-        },
-    ]);
-    return { tokens, next };
-}
-function tokenize(lines) {
-    const tokens = [];
-    let i = 0;
-    while (i < lines.length) {
-        const line = lines[i];
-        // Blank line
-        if (isBlank(line)) {
-            tokens.push({ type: "blank" });
-            i++;
-            continue;
-        }
-        // Table: before every other block, as markdown-it tries it, so a header
-        // row that reads as a heading or a list item is still a header. Its body
-        // rows run to a blank line or a line that opens a block.
-        const columns = tableAt(lines, i);
-        if (columns) {
-            const rows = [];
-            let autocompleted = 0;
-            for (i += 2; i < lines.length && !isBlank(lines[i]) && tableLine(lines[i]) && !opensBlock(lines[i]); i++) {
-                const cells = rowCells(body(lines[i]));
-                autocompleted += columns.length - cells.length;
-                if (autocompleted > MAX_AUTOCOMPLETED_CELLS)
-                    break;
-                rows.push(columns.map((_, n) => cells[n] ?? ""));
-            }
-            tokens.push({ type: "table", columns, rows });
-            continue;
-        }
-        // Indented code: its lines, and the blank lines between them, with the indent cut off
-        if (indentOf(line) >= CODE_INDENT) {
-            const code = [];
-            for (; i < lines.length && (isBlank(lines[i]) || indentOf(lines[i]) >= CODE_INDENT); i++) {
-                code.push(dropColumns(lines[i], CODE_INDENT));
-            }
-            for (; code[code.length - 1].trim() === ""; i--)
-                code.pop();
-            tokens.push({ type: "code_block", code: code.join("\n") });
-            continue;
-        }
-        // Heading
-        const headingMatch = HEADING.exec(body(line));
-        if (headingMatch) {
-            tokens.push({ type: "heading", level: headingMatch[1].length, text: headingMatch[2] });
-            i++;
-            continue;
-        }
-        // Horizontal rule
-        if (startsWith(line, RULE)) {
-            tokens.push({ type: "hr" });
-            i++;
-            continue;
+function appendInline(result, inlines, settings, options) {
+    // Rich's style stack: each open construct's style laid over the styles it
+    // sits in, so every piece of text takes one span, the style on top, and a
+    // nest ten thousand deep costs one combination a level.
+    const stack = [Style.null()];
+    // Inside a link drawn without hyperlinks, whose text is styled whole as it closes, nothing is styled.
+    let plain = false;
+    // The style on top with `styles` laid over it.
+    const over = (styles) => styles.reduce((under, style) => under.add(resolveStyle(options, style)), stack[stack.length - 1]);
+    const kbd = kbdTags(stack, () => over([KBD_STYLE]));
+    // The text from `start` to the end in the style on top, with `styles` over it.
+    const paint = (start, styles = []) => {
+        if (!plain)
+            result.stylize(over(styles), start);
+    };
+    const write = (text, styles) => {
+        const start = result.length;
+        result.append(text);
+        paint(start, styles);
+    };
+    const enter = (styles) => {
+        stack.push(over(styles));
+        return () => stack.pop();
+    };
+    // A link to `url` opened here: its text is the link, or without hyperlinks
+    // is written plain, in `markdown.link`, with the URL after it when it closes.
+    const openLink = (url) => {
+        if (settings.hyperlinks)
+            return enter(linkStyles(url));
+        const [start, outer] = [result.length, plain];
+        plain = true;
+        return () => {
+            plain = outer;
+            paint(start, ["markdown.link"]);
+            write(" (");
+            write(url, ["markdown.link_url"]);
+            write(")");
+        };
+    };
+    // Each construct's frame is what closing it does.
+    const open = (container) => {
+        switch (container.kind) {
+            case "emphasis":
+                return enter([`markdown.${container.tag}`]);
+            case "link":
+                return openLink(container.url);
         }
-        // Fenced code block: its lines with the fence's own indentation cut off
-        if (startsWith(line, FENCE)) {
-            const indent = indentOf(line);
-            const codeLines = [];
-            for (i++; i < lines.length && !startsWith(lines[i], FENCE); i++)
-                codeLines.push(dropColumns(lines[i], indent));
-            i++; // skip closing ```
-            tokens.push({ type: "code_block", code: codeLines.join("\n") });
+    };
+    for (const step of walk(inlines, open)) {
+        if (step.kind === "leave") {
+            step.frame();
             continue;
         }
-        // Blockquote: Markdown of its own — its `>` lines with the marker blanked,
-        // and any unmarked line lazily continuing the paragraph open inside it
-        if (startsWith(line, QUOTE)) {
-            const inner = [];
-            let lazy = false;
-            for (; i < lines.length; i++) {
-                const next = lines[i];
-                const marked = startsWith(next, QUOTE);
-                lazy = !marked && continuesLazily(inner, next, lazy);
-                if (!marked && !lazy)
-                    break;
-                inner.push(marked ? quoted(next) : { ...next, lazy: true });
+        const inline = step.inline;
+        switch (inline.kind) {
+            case "text":
+                write(inline.text);
+                break;
+            // Rich writes a soft break as a space and a hard one as a newline.
+            case "softbreak":
+                write(" ");
+                break;
+            case "hardbreak":
+                write("\n");
+                break;
+            case "code":
+                write(inline.code, [groundedStyle(options, resolveStyle(options, settings.inlineCodeStyle))]);
+                break;
+            case "html":
+                kbd(inline.content);
+                break;
+            case "image":
+                break;
+            case "autolink": {
+                const close = openLink(inline.url);
+                write(inline.text);
+                close();
+                break;
             }
-            tokens.push({ type: "blockquote", children: tokenize(inner) });
-            continue;
-        }
-        // List: its items, each Markdown of its own, as a quote is
-        const item = itemStart(line);
-        if (item) {
-            const { tokens: items, next } = list(item, lines, i);
-            tokens.push(...items);
-            i = next;
-            continue;
         }
-        // HTML block: to the line that closes its kind, or to the end of its
-        // container when none does; a closing blank line is left to what follows
-        const html = htmlBlockAt(line);
-        if (html) {
-            const { end } = html;
-            const closes = end === "blank" ? isBlank : (closing) => end.test(body(closing));
-            while (i < lines.length && !closes(lines[i]))
-                i++;
-            if (i < lines.length && end !== "blank")
-                i++;
-            tokens.push({ type: "html_block" });
-            continue;
-        }
-        // Paragraph, or a setext heading when a line of `=` or `-` underlines it
-        const { text, next } = continuation(lines, i);
-        const setext = underline(lines[next]);
-        tokens.push(setext
-            ? { type: "heading", level: setext[1].startsWith("=") ? 1 : 2, text }
-            : { type: "paragraph", text });
-        i = setext ? next + 1 : next;
     }
-    return tokens;
-}
-const TICKS = /`+/y;
-const ANGLED_DESTINATION = /\(\s*<([^<>\n]*)>/y;
-const LINK_TAIL = /\s*(?:"[^"]*"|'[^']*'|\([^()]*\))?\s*\)/y;
-/** A backslash escape, as markdown-it reads one: the ASCII punctuation character after it, standing for itself. */
-const ESCAPE = /\\([!-\/:-@[-`{-~])/y;
-const ESCAPES = new RegExp(ESCAPE.source, "g");
-/** Inline HTML, as markdown-it-py's HTML_TAG_RE reads it: a tag, a comment, a processing instruction, a declaration or a CDATA section. */
-const HTML_TAG = new RegExp([
-    HTML_OPEN_TAG,
-    HTML_CLOSE_TAG,
-    String.raw `<!---?>|<!--(?:[^-]|-[^-]|--[^>])*-->`,
-    String.raw `<[?][\s\S]*?[?]>`,
-    String.raw `<![A-Za-z][^>]*>`,
-    String.raw `<!\[CDATA\[[\s\S]*?\]\]>`,
-].join("|"), "y");
-/** `re`, a sticky pattern, matched exactly at `i` in `text`. */
-function matchAt(re, text, i) {
-    re.lastIndex = i;
-    return re.exec(text);
 }
+const EXIT = { kind: "exit", newLine: true };
 /**
- * Each `[` in `text` that a `]` closes, to the index of that `]`: brackets
- * nest, a backslash escapes the character after it, and a bracket inside a
- * code span or inline HTML, which bind tighter than a link, is not one. One
- * pass, so a run of text full of brackets that close nothing costs no more
- * than one without.
+ * The steps in a block's text. An image is an element, Rich's `ImageItem`,
+ * which sets no `new_line`. Text with no inlines is one too: markdown-it
+ * leaves an empty inline token unflattened, and Rich exits it as an element
+ * it draws nothing for.
  */
-function bracketPairs(text) {
-    const pairs = new Map();
-    const open = [];
-    for (let i = 0; i < text.length; i++) {
-        if (text[i] === "\\")
-            i++;
-        else if (text[i] === "[")
-            open.push(i);
-        else if (text[i] === "]" && open.length > 0)
-            pairs.set(open.pop(), i);
-        // Neither construct reads the brackets, so the pairs found so far serve.
-        else if (text[i] === "`" || text[i] === "<")
-            i = (inlineAt(text, i, pairs)?.end ?? i + 1) - 1;
+function* inlineSteps(inlines, within, settings) {
+    if (inlines.length === 0)
+        yield EXIT;
+    // Rich's style stack: what each open construct entered, innermost last, one entry each as Rich pushes one.
+    const stack = [within];
+    const kbd = kbdTags(stack, () => [KBD_STYLE]);
+    // Each construct's frame is how many entries it pushed.
+    const open = (container) => {
+        switch (container.kind) {
+            case "emphasis":
+                stack.push([`markdown.${container.tag}`]);
+                return 1;
+            case "link": {
+                // Without hyperlinks Rich enters no style for a link.
+                const entered = settings.hyperlinks ? [linkStyles(container.url)] : [];
+                stack.push(...entered);
+                return entered.length;
+            }
+        }
+    };
+    for (const step of walk(inlines, open)) {
+        if (step.kind === "leave")
+            stack.length -= step.frame;
+        else if (step.inline.kind === "html")
+            kbd(step.inline.content);
+        else if (step.inline.kind === "image") {
+            yield { kind: "image", image: { alt: step.inline.alt, src: step.inline.src, styles: stack.flat() } };
+            yield { kind: "exit", newLine: false };
+        }
     }
-    return pairs;
 }
 /**
- * The `(destination "title")` of a link opening at `open`, as CommonMark reads
- * it: a destination in angle brackets, or a run of non-space characters whose
- * parentheses balance — so a URL may itself hold `(…)` — then an optional
- * quoted title, then the `)`. The destination, its backslash escapes read, and
- * the index past the `)`.
+ * The step Rich takes exiting `token`'s element: every element sets
+ * `new_line` but a rule, which draws its own blank row after it.
  */
-function linkDestination(text, open) {
-    if (text[open] !== "(")
-        return undefined;
-    const angled = matchAt(ANGLED_DESTINATION, text, open);
-    let i;
-    let url;
-    if (angled) {
-        url = angled[1];
-        i = open + angled[0].length;
-    }
-    else {
-        i = open + 1;
-        while (text[i] === " ")
-            i++;
-        const from = i;
-        for (let depth = 0; i < text.length && !/\s/.test(text[i]) && !(text[i] === ")" && depth === 0); i++) {
-            if (text[i] === "\\")
-                i++;
-            else if (text[i] === "(")
-                depth++;
-            else if (text[i] === ")")
-                depth--;
-        }
-        url = text.slice(from, i);
-    }
-    const tail = matchAt(LINK_TAIL, text, i);
-    return tail ? { url: url.replace(ESCAPES, "$1"), end: i + tail[0].length } : undefined;
+function exitStep(token) {
+    return { kind: "exit", newLine: token.type !== "hr" };
 }
 /**
- * The index of the `delimiter` that closes emphasis whose text starts at
- * `from`, after at least one character of it. Every other inline construct
- * binds tighter than emphasis, as CommonMark has it, so a delimiter inside an
- * escape, a code span, inline HTML or a link closes nothing.
+ * The steps inside `token`, up to and not including its own exit: Rich
+ * checks `new_line` ahead of drawing a block before it exits it. A table's
+ * cells are elements of their own, the header's first.
  */
-function emphasisClose(text, from, delimiter, brackets) {
-    for (let i = from; i < text.length;) {
-        if (i > from && text.startsWith(delimiter, i))
-            return i;
-        const tighter = text[i] === "*" ? undefined : inlineAt(text, i, brackets);
-        i = tighter ? tighter.end : i + 1;
-    }
-    return undefined;
-}
-/** The inline construct opening at `i` in `text`, if one does; `brackets` is `text`'s `bracketPairs`. */
-function inlineAt(text, i, brackets) {
-    switch (text[i]) {
-        case "`": {
-            const ticks = matchAt(TICKS, text, i)[0];
-            const close = new RegExp(`(?<!\`)${ticks}(?!\`)`, "g");
-            close.lastIndex = i + ticks.length;
-            const found = close.exec(text);
-            return found
-                ? { kind: "code", code: text.slice(i + ticks.length, found.index), end: found.index + ticks.length }
-                : { kind: "literal", text: ticks, end: i + ticks.length };
-        }
-        case "*": {
-            const strong = text.startsWith("**", i) ? emphasisClose(text, i + 2, "**", brackets) : undefined;
-            const delimiter = strong === undefined ? "*" : "**";
-            const close = strong ?? emphasisClose(text, i + 1, "*", brackets);
-            return close === undefined
-                ? undefined
-                : {
-                    kind: "emphasis",
-                    style: strong === undefined ? "italic" : "bold",
-                    inner: text.slice(i + delimiter.length, close),
-                    end: close + delimiter.length,
-                };
-        }
-        case "\\": {
-            const escape = matchAt(ESCAPE, text, i);
-            return escape ? { kind: "literal", text: escape[1], end: i + escape[0].length } : undefined;
+function* stepsInside(token, within, options, settings) {
+    const children = function* (blocks, inner) {
+        for (const child of blocks) {
+            yield* stepsInside(child, inner, options, settings);
+            yield exitStep(child);
         }
-        case "<": {
-            const tag = matchAt(HTML_TAG, text, i);
-            return tag ? { kind: "html", end: i + tag[0].length } : undefined;
-        }
-        case "!":
-        case "[": {
-            const image = text[i] === "!";
-            const open = image ? i + 1 : i;
-            const close = brackets.get(open);
-            const destination = close === undefined ? undefined : linkDestination(text, close + 1);
-            if (!destination)
-                return undefined;
-            const label = text.slice(open + 1, close);
-            return image
-                ? { kind: "image", alt: label, src: destination.url, end: destination.end }
-                : { kind: "link", inner: label, url: destination.url, end: destination.end };
-        }
-        default:
-            return undefined;
+    };
+    switch (token.type) {
+        case "paragraph":
+            yield* inlineSteps(token.text, within, settings);
+            break;
+        case "heading":
+            yield* inlineSteps(token.text, [...within, headingStyle(options, token.level)], settings);
+            break;
+        case "list":
+            for (const item of token.items) {
+                yield* children(item, within);
+                yield EXIT;
+            }
+            break;
+        case "blockquote":
+            yield* children(token.children, [...within, QUOTE_STYLE]);
+            break;
+        case "table":
+            for (const cell of [...token.columns.map(({ header }) => header), ...token.rows.flat()]) {
+                yield* inlineSteps(cell, within, settings);
+                yield EXIT;
+            }
+            break;
+        case "code_block":
+        case "html_block":
+        case "hr":
+            break;
     }
 }
 /**
- * `text` as inline Markdown in `style`: a text of its own whose style sits
- * under every style inside it, so appended where it goes it draws as Rich
- * draws a nested construct — the inner style on top.
+ * The steps of the whole document. Rich draws a block at the top of it as it
+ * exits, so a block is drawn where its exit is.
  */
-function styled(text, style, settings, options) {
-    const result = new RichText("", { style });
-    appendInline(result, text, settings, options);
-    return result;
+function* documentSteps(tokens, options, settings) {
+    for (const token of tokens) {
+        yield* stepsInside(token, [], options, settings);
+        yield { kind: "block", token };
+        yield exitStep(token);
+    }
 }
 /**
- * `text` as inline Markdown appended to `result`: code spans, emphasis, links
- * and images, the text inside emphasis, links and images parsed the same way,
- * a backslash escape as the character it escapes, inline HTML as nothing, and
- * everything else as it is.
+ * An image drawn as Rich's `ImageItem` draws one: a picture glyph, then the
+ * alt text in the styles it sits in — or, with none, the image's file name,
+ * unstyled — linked to the link those styles carry or else to the image, then a
+ * space, at the full width, ending no row — so whatever is drawn next carries
+ * on after it.
  */
-function appendInline(result, text, settings, options) {
-    const brackets = bracketPairs(text);
-    let plain = 0;
-    for (let i = 0; i < text.length;) {
-        const found = inlineAt(text, i, brackets);
-        if (!found) {
-            i++;
-            continue;
-        }
-        result.append(text.slice(plain, i));
-        switch (found.kind) {
-            case "code":
-                result.append(found.code, groundedStyle(options, resolveStyle(options, settings.inlineCodeStyle)));
-                break;
-            case "literal":
-                result.append(found.text);
-                break;
-            case "html":
-                // Rich draws nothing for inline HTML.
-                break;
-            case "emphasis":
-                result.append(styled(found.inner, found.style, settings, options));
-                break;
-            case "link": {
-                // As Rich draws it: without hyperlinks the URL is written out, and it
-                // is still the link, for a terminal that can click it.
-                const link = new RichText("", { style: new Style({ link: found.url }) });
-                if (settings.hyperlinks) {
-                    result.append(link.append(styled(found.inner, "markdown.link_url", settings, options)));
-                }
-                else {
-                    result
-                        .append(styled(found.inner, "markdown.link", settings, options))
-                        .append(" (")
-                        .append(link.append(found.url, "markdown.link_url"))
-                        .append(")");
-                }
-                break;
-            }
-            case "image": {
-                // Rich's ImageItem: a picture glyph, then the alt text — or, with
-                // none, the image's file name — linked to the image, then a space.
-                const title = found.alt || (found.src.replace(/\/+$/, "").split("/").pop() ?? "");
-                const link = settings.hyperlinks ? new Style({ link: found.src }) : "";
-                result.append(drawable(options, "🌆 ", "")).append(styled(title, link, settings, options)).append(" ");
-                break;
-            }
-        }
-        i = plain = found.end;
-    }
-    result.append(text.slice(plain));
+function drawImage(image, options, settings) {
+    // Rich reads the link off its style stack, so a link a crossed `</kbd>` left open still holds.
+    const style = image.styles.reduce((under, over) => under.add(resolveStyle(options, over)), Style.null());
+    const title = image.alt ? new RichText(image.alt).stylize(style) : new RichText(image.src.replace(/\/+$/, "").split("/").pop() ?? "");
+    if (settings.hyperlinks)
+        title.stylize(new Style({ link: style.link || image.src || undefined }));
+    return render(new RichText("", { end: "" }).append(drawable(options, "🌆 ", "")).append(title).append(" "), options);
 }
 /**
- * What `draw` renders in what is left of the width beside a gutter, each of
+ * What `content` renders in what is left of the width beside a gutter, each of
  * its rows ended. The first row's gutter is `first` and every later row's is
  * `rest`, so a list item's text hangs clear of its bullet and a quote's bar
  * runs its full height. A block with no gutter passes two empty segments:
- * every block is laid out the same way. What is drawn keeps at least one
- * column however wide the gutter, so a row may overrun its width but no gutter
- * swallows what it introduces.
+ * every block is laid out the same way. A gutter that leaves its content no
+ * column draws nothing beside it, since that content draws no rows.
  */
-function* guttered(draw, options, first, rest, style) {
-    const width = Math.max(1, options.maxWidth - cellLen(first.text));
-    const rows = Segment.splitLines(Segment.applyStyle([...draw({ ...options, maxWidth: width })], style));
+function* guttered(content, options, first, rest) {
+    const rows = Segment.splitLines(render(content, { ...options, maxWidth: options.maxWidth - cellLen(first.text) }));
     for (const [row, line] of rows.entries()) {
         yield row === 0 ? first : rest;
         yield* line;
@@ -674,85 +306,111 @@ function* guttered(draw, options, first, rest, style) {
  * and a heading's padding is not underlined.
  */
 function inline(text, settings, justify, style) {
-    return function* (options) {
-        const body = new RichText("", { end: "", style });
-        appendInline(body, text, settings, options);
-        // `append` lays the body's base style down as the first span.
-        yield* new RichText("", { end: "", justify }).append(body).render(options);
-        yield Segment.line();
+    return {
+        *render(options) {
+            const body = new RichText("", { end: "", style });
+            appendInline(body, text, settings, options);
+            // `append` lays the body's base style down as the first span.
+            yield* render(new RichText("", { end: "", justify }).append(body), options);
+            yield Segment.line();
+        },
     };
 }
 const NO_GUTTER = new Segment("");
+/**
+ * `tokens` drawn as Rich's `render_lines` draws a quote's or an item's
+ * content: in `style`, every row padded to the width in it and ended.
+ */
+function* renderLines(tokens, options, settings, style) {
+    for (const line of Segment.splitLines(Segment.applyStyle(renderTokens(tokens, options, settings), style))) {
+        yield* Segment.adjustLineLength(line, options.maxWidth, style);
+        yield Segment.line();
+    }
+}
 /**
  * Each block in `tokens`, every row it draws ended, body text placed by
  * `settings.justify`. A heading keeps its own placement whatever `settings`
- * or `options` say — Rich's: an h1 centred, every other level left — and its
- * style stops where its text does.
+ * or `options` say — Rich's `Heading.LEVEL_ALIGN`: an h1 centred, every other
+ * level left, each row padded to the width — and its style stops where its
+ * text does.
  */
 function* renderTokens(tokens, options, settings) {
-    for (const token of tokens) {
-        switch (token.type) {
-            case "heading": {
-                const style = getStyle(options, `markdown.h${Math.min(token.level, 4)}`);
-                const draw = inline(token.text, settings, token.level === 1 ? "center" : undefined, style);
-                yield* guttered(draw, { ...options, justify: undefined }, NO_GUTTER, NO_GUTTER);
-                break;
-            }
-            case "paragraph": {
-                yield* guttered(inline(token.text, settings, settings.justify), options, NO_GUTTER, NO_GUTTER);
-                break;
-            }
-            case "code_block": {
-                const codeStyle = groundedStyle(options, getStyle(options, "markdown.code"));
-                // Tabs expanded here, as `Syntax` expands them, since a terminal would
-                // count a raw one from its own column 0 and not the code's.
-                for (const line of expandTabs(token.code, CODE_TAB_SIZE).text.split("\n")) {
-                    yield new Segment(line, codeStyle);
-                    yield Segment.line();
-                }
-                break;
-            }
-            case "hr": {
-                const rule = new Rule(undefined, { style: "markdown.hr" });
-                yield* rule.render(options);
-                break;
-            }
-            case "list_item": {
-                const marker = token.marker.kind === "number" ? `${token.marker.label} ` : drawable(options, "  • ", "  * ");
-                const hang = new Segment(" ".repeat(cellLen(marker)));
-                const body = (inner) => renderTokens(token.children, inner, settings);
-                yield* guttered(body, options, new Segment(marker), hang);
-                break;
-            }
-            case "blockquote": {
-                const bar = new Segment(drawable(options, "▎ ", "| "), getStyle(options, "markdown.hr"));
-                const body = (inner) => renderTokens(token.children, inner, settings);
-                yield* guttered(body, options, bar, bar, Style.parse("dim italic"));
-                break;
-            }
-            case "table": {
-                // Rich's TableElement: each cell inline Markdown placed by its
-                // column's alignment, the header's in `markdown.table.header` on top.
-                const cell = (text, justify) => {
-                    const content = new RichText("", { justify });
-                    appendInline(content, text, settings, options);
-                    return content;
-                };
-                const table = new Table({ box: SIMPLE, padEdge: false, style: "markdown.table.border", showEdge: true, collapsePadding: true });
-                for (const { header, align } of token.columns)
-                    table.addColumn(cell(header, align).stylize("markdown.table.header"));
-                for (const row of token.rows)
-                    table.addRow(...row.map((text, n) => cell(text, token.columns[n].align)));
-                yield* table.render(options);
-                break;
+    for (const token of tokens)
+        yield* renderBlock(token, options, settings);
+}
+function* renderBlock(token, options, settings) {
+    switch (token.type) {
+        case "heading": {
+            const draw = inline(token.text, settings, token.level === 1 ? "center" : "left", headingStyle(options, token.level));
+            yield* guttered(draw, options, NO_GUTTER, NO_GUTTER);
+            break;
+        }
+        case "paragraph": {
+            yield* guttered(inline(token.text, settings, settings.justify), options, NO_GUTTER, NO_GUTTER);
+            break;
+        }
+        case "code_block": {
+            // Rich's CodeBlock: the code, its trailing whitespace dropped, handed to
+            // `Syntax` word-wrapped inside a padding of one cell all round — every
+            // cell of the block, padding and all, in the code's style.
+            const style = groundedStyle(options, getStyle(options, "markdown.code"));
+            const syntax = new Syntax(pyRstrip(token.code), "text", { wordWrap: true });
+            yield* render(new Padding(syntax, 1, { style }), options);
+            break;
+        }
+        case "hr": {
+            // Rich's HorizontalRule: the rule, drawn in `-` rather than Rule's own
+            // glyph, then a blank row of its own.
+            const rule = new Rule(undefined, { characters: "-", style: "markdown.hr" });
+            yield* render(rule, options);
+            yield Segment.line();
+            break;
+        }
+        case "list": {
+            // Rich's ListItem: a bullet, or the number without its `.` or `)`,
+            // right-aligned in a column sized for the number one past the last
+            // item's — Rich's `last_number` — and the hang under it in the marker's
+            // style.
+            const { start } = token;
+            const markerStyle = getStyle(options, start === undefined ? "markdown.item.bullet" : "markdown.item.number");
+            const width = start === undefined ? 3 : String(start + token.items.length).length + 2;
+            const hang = new Segment(" ".repeat(width), markerStyle);
+            for (const [n, item] of token.items.entries()) {
+                const marker = start === undefined ? drawable(options, " • ", " * ") : `${String(start + n).padStart(width - 1)} `;
+                const body = { render: (inner) => renderLines(item, inner, settings, getStyle(options, "markdown.item")) };
+                yield* guttered(body, options, new Segment(marker, markerStyle), hang);
             }
-            case "html_block":
-                // Rich draws nothing for one.
-                break;
-            case "blank":
-                yield Segment.line();
-                break;
+            break;
+        }
+        case "blockquote": {
+            // Rich's BlockQuote: the bar and everything the quote holds in the one
+            // style, the content laid out four cells short of the width beside a
+            // bar of two, so every row of a quote ends two cells short.
+            const style = getStyle(options, QUOTE_STYLE);
+            const bar = new Segment(drawable(options, "▌ ", "| "), style);
+            const body = { render: (inner) => renderLines(token.children, inner, settings, style) };
+            yield* guttered(body, { ...options, maxWidth: cellCount(options.maxWidth - 2) }, bar, bar);
+            break;
+        }
+        case "table": {
+            // Rich's TableElement: each cell inline Markdown placed by its
+            // column's alignment, the header's in `markdown.table.header` on top.
+            const cell = (text, justify) => {
+                const content = new RichText("", { justify });
+                appendInline(content, text, settings, options);
+                return content;
+            };
+            const table = new Table({ box: SIMPLE, padEdge: false, style: "markdown.table.border", showEdge: true, collapsePadding: true });
+            for (const { header, align } of token.columns)
+                table.addColumn(cell(header, align).stylize("markdown.table.header"));
+            for (const row of token.rows)
+                table.addRow(...row.map((text, n) => cell(text, token.columns[n].align)));
+            yield* render(table, options);
+            break;
         }
+        case "html_block":
+            // Rich draws nothing for it.
+            break;
     }
 }
 export class Markdown {
@@ -760,19 +418,34 @@ export class Markdown {
     inlineCodeStyle;
     hyperlinks;
     justify;
+    // Read once, as Rich's Markdown parses its markup when it is made: nothing a
+    // render is asked for changes how the source reads, and a Live redraws it
+    // every frame.
+    parsed;
     constructor(markdown, options) {
         this.markdown = markdown;
+        this.parsed = parseMarkdown(markdown);
         this.inlineCodeStyle = options?.inlineCodeStyle ?? "markdown.code";
         this.hyperlinks = options?.hyperlinks !== false;
         this.justify = options?.justify ?? "left";
     }
     *render(rawOptions) {
-        // Every block below is one of a stack.
-        const options = { ...rawOptions, height: stackedHeight(rawOptions.height) };
-        const lines = this.markdown.split(/\r?\n/).map((text) => ({ text, margin: 0, lazy: false }));
-        yield* renderTokens(tokenize(lines), options, this);
+        // The width parsed once, for every block below, each one of a stack.
+        const options = { ...withCellWidth(rawOptions), height: stackedHeight(rawOptions.height) };
+        // Rich's `new_line`: set by each element as it exits, read before anything is drawn.
+        let newLine = false;
+        for (const step of documentSteps(this.parsed, options, this)) {
+            if (step.kind === "exit") {
+                newLine = step.newLine;
+                continue;
+            }
+            if (newLine)
+                yield Segment.line();
+            yield* step.kind === "image" ? drawImage(step.image, options, this) : renderBlock(step.token, options, this);
+        }
     }
     measure(options) {
-        return { minimum: 1, maximum: options.maxWidth };
+        // Rich's Markdown has no `__rich_measure__`, so Rich measures it as nothing up to the width.
+        return { minimum: 0, maximum: options.maxWidth };
     }
 }