@promptctl/rich-js 0.18.0 → 0.19.0

package/dist/core/export-svg.js

@@ -0,0 +1,213 @@
+/**
+ * export-svg — recorded segments drawn as an SVG terminal window: rounded
+ * chrome with a title and three window buttons, the rows inside it, every
+ * glyph where its terminal cell was, and the text still selectable.
+ *
+ * An encoding of `export-lines` and nothing more, the same as `export-html`.
+ * What a run looks like under a theme is decided there; this module decides
+ * only where SVG puts it. It never sees a `Style`.
+ *
+ * The geometry is Rich's — a 20px character, a cell 0.61 of that wide, a row
+ * 1.22 of it tall, the same margin and padding — so a screenshot of the same
+ * program matches the library this ports. The frame's colour is not Rich's:
+ * Rich strokes it white at 35% whatever the theme, which vanishes around a
+ * light canvas. Here it is the theme's ink blended 35% into the canvas — over
+ * a black canvas the colour Rich draws — and opaque, so the half of the stroke
+ * lying outside the canvas does not take on the colour of the page around it.
+ *
+ * Nor is how a glyph lands on its cell. The exporter has no font engine and
+ * does not know which font the viewer will draw with, so no advance width can
+ * be trusted: a CJK character drawn from a fallback font is rarely two cells,
+ * and every glyph after it on the row drifts. So every chunk of a run is
+ * anchored at its own column and stretched to its own cells with
+ * `textLength`, and alignment is guaranteed by the numbers written here rather
+ * than by the font. Measured in headless Chromium on `"ab漢字cd😀ef é̂x"`:
+ * Rich's `textLength` (cell width × string length) was off by up to 12px, one
+ * `<text>` a run by 3.9px, this chunking by 0.
+ *
+ * Decorations are rectangles, not CSS `text-decoration`: SVG has no reliable
+ * double underline, and one `text-decoration` property cannot hold an
+ * underline and a strike with different styles.
+ */
+import { cellLen, graphemes } from "./cells.js";
+import { blendRgb } from "./color.js";
+import { fnv1a } from "./fnv1a.js";
+import { escapeAttribute, escapeText, exportCanvas, exportLines, } from "./export-lines.js";
+const CHAR_HEIGHT = 20;
+const CELL_WIDTH = CHAR_HEIGHT * 0.61;
+const LINE_HEIGHT = CHAR_HEIGHT * 1.22;
+const MARGIN = 1;
+const PADDING = { top: 40, right: 8, bottom: 8, left: 8 };
+/** A painted background sits 1.5px into its row and overlaps the next by a hair, so rows show no seam. */
+const CELL_TOP = 1.5;
+const CELL_HEIGHT = LINE_HEIGHT + 0.25;
+const LINE_THICKNESS = 1.5;
+const FONT_FAMILY = `"Fira Code", Menlo, Consolas, "DejaVu Sans Mono", monospace`;
+const FRAME_FADE = 0.35;
+const WINDOW_BUTTONS = ["#ff5f57", "#febc2e", "#28c840"];
+/** Coordinates to two decimals, so `3 × 12.2` is written `36.6` and not `36.599999999999994`. */
+const n = (value) => String(Math.round(value * 100) / 100);
+/**
+ * The blink keyframes every SVG defines identically, so one name serves them
+ * all: two inlined in one page define the same rule twice, and neither changes
+ * the other.
+ */
+const BLINK_KEYFRAMES = "rich-svg-blink";
+/**
+ * `text` cut into the pieces that are positioned one by one, starting at
+ * `column`: consecutive one-cell graphemes share a chunk, since the font's
+ * own advance is right for them to within what `textLength` corrects; every
+ * wider grapheme is a chunk of its own, since that advance is the one that
+ * drifts. A zero-cell grapheme joins the chunk before it so it can still
+ * combine, and only when a run opens with one does it stand as a chunk of no
+ * cells. Graphemes rather than code points, because `cellLen` measures a
+ * joined emoji as one glyph.
+ */
+function chunk(text, column) {
+    const pieces = [];
+    for (const grapheme of graphemes(text)) {
+        const cells = cellLen(grapheme);
+        const last = pieces[pieces.length - 1];
+        if (last !== undefined && (cells === 0 || (cells === 1 && last.narrow))) {
+            last.text += grapheme;
+            last.cells += cells;
+        }
+        else {
+            pieces.push({ text: grapheme, cells, narrow: cells === 1 });
+        }
+    }
+    let at = column;
+    return pieces.map(({ text, cells }) => {
+        const placed = { text, column: at, cells };
+        at += cells;
+        return placed;
+    });
+}
+/** Every run of every row at the column the runs before it on its row end at. */
+function place(rows) {
+    return rows.flatMap((runs, row) => {
+        let column = 0;
+        return runs.map(({ text, look }) => {
+            const chunks = chunk(text, column);
+            const cells = chunks.reduce((sum, c) => sum + c.cells, 0);
+            const placed = { row, column, cells, look, chunks };
+            column += cells;
+            return placed;
+        });
+    });
+}
+// [LAW:dataflow-not-control-flow] Each enum-valued field of a look is a table
+// from its values to what it draws, so `Record` makes a new value a compile
+// error until it has a row.
+const UNDERLINE_BELOW_BASELINE = {
+    none: [],
+    single: [2],
+    double: [2, 5],
+};
+const BLINK_PERIOD = {
+    none: null,
+    slow: "1s",
+    fast: "0.5s",
+};
+const OUTLINE_RADIUS = {
+    none: null,
+    frame: 0,
+    encircle: CELL_WIDTH,
+};
+/** The CSS a look's class carries: what a glyph's `fill` and font say, and its blink. */
+function lookCss(look) {
+    const period = BLINK_PERIOD[look.blink];
+    return [
+        `fill:${look.foreground.hex}`,
+        ...(look.bold ? ["font-weight:bold"] : []),
+        ...(look.italic ? ["font-style:italic"] : []),
+        ...(period === null ? [] : [`animation:${BLINK_KEYFRAMES} ${period} step-end infinite`]),
+    ].join(";");
+}
+const cellBox = (run) => `x="${n(run.column * CELL_WIDTH)}" y="${n(run.row * LINE_HEIGHT + CELL_TOP)}" ` +
+    `width="${n(run.cells * CELL_WIDTH)}" height="${n(CELL_HEIGHT)}"`;
+/** A run's painted background; a run showing the canvas paints nothing. */
+function backgroundSvg(run) {
+    return run.look.background === "canvas"
+        ? []
+        : [`<rect fill="${run.look.background.hex}" ${cellBox(run)} shape-rendering="crispEdges"/>`];
+}
+function textSvg({ text, column, cells }, baseline) {
+    // A chunk of no cells has no length to stretch to; it takes the font's.
+    const length = cells === 0 ? "" : ` textLength="${n(cells * CELL_WIDTH)}" lengthAdjust="spacingAndGlyphs"`;
+    return `<text x="${n(column * CELL_WIDTH)}" y="${n(baseline)}"${length} xml:space="preserve">${escapeText(text)}</text>`;
+}
+/**
+ * One run: its glyphs, then its lines and outline over them, in a group whose
+ * class carries the look — so the lines take the glyph's `fill` and blink
+ * with it. The outline is a stroke, so it names its colour itself.
+ */
+function runSvg(run, className) {
+    const { look } = run;
+    const top = run.row * LINE_HEIGHT;
+    const baseline = top + CHAR_HEIGHT;
+    const x = n(run.column * CELL_WIDTH);
+    const width = n(run.cells * CELL_WIDTH);
+    const lineYs = [
+        ...UNDERLINE_BELOW_BASELINE[look.underline].map((offset) => baseline + offset),
+        ...(look.strike ? [baseline - 6] : []),
+        ...(look.overline ? [top + CELL_TOP] : []),
+    ];
+    const radius = OUTLINE_RADIUS[look.outline];
+    const drawn = [
+        ...run.chunks.map((c) => textSvg(c, baseline)),
+        ...lineYs.map((y) => `<rect x="${x}" y="${n(y)}" width="${width}" height="${LINE_THICKNESS}"/>`),
+        ...(radius === null
+            ? []
+            : [`<rect ${cellBox(run)} rx="${n(radius)}" fill="none" stroke="${look.foreground.hex}" stroke-width="1"/>`]),
+    ].join("");
+    const group = `<g class="${className}">${drawn}</g>`;
+    return look.href === null ? group : `<a href="${escapeAttribute(look.href)}">${group}</a>`;
+}
+/**
+ * `segments` under `theme` as a standalone SVG document.
+ *
+ * Every background is painted before any glyph, so no run's paint covers its
+ * neighbour's text. Whitespace is emitted as real spaces under
+ * `xml:space="preserve"`, never as `&#160;`, so a selection copies what the
+ * terminal showed.
+ */
+export function encodeSvg(segments, { theme, title, width }) {
+    const canvas = exportCanvas(theme);
+    const rows = exportLines(segments, theme);
+    const runs = place(rows);
+    // The prefix every class name carries is a hash of the rules those classes
+    // define as well as of what is drawn, since a class is page-wide once the
+    // SVG is inlined: two exports that share a prefix define every rule alike, so
+    // the same recording under another theme cannot restyle this one.
+    const styled = runs.map((run) => ({ run, css: lookCss(run.look) }));
+    const rules = [...new Set(styled.map(({ css }) => css))];
+    const text = rows.map((row) => row.map((run) => run.text).join("")).join("\n");
+    const id = `terminal-${fnv1a(`${title.length}:${title}${text.length}:${text}${rules.join("\n")}`)}`;
+    const classOf = (css) => `${id}-r${rules.indexOf(css) + 1}`;
+    const drawnRuns = styled.map(({ run, css }) => runSvg(run, classOf(css)));
+    const columns = runs.reduce((widest, run) => Math.max(widest, run.column + run.cells), width);
+    const terminalWidth = Math.ceil(columns * CELL_WIDTH + PADDING.left + PADDING.right);
+    const terminalHeight = rows.length * LINE_HEIGHT + PADDING.top + PADDING.bottom;
+    const stylesheet = [
+        `.${id}-matrix{font-family:${FONT_FAMILY};font-size:${CHAR_HEIGHT}px}`,
+        `.${id}-title{font-size:18px;font-weight:bold;font-family:arial}`,
+        ...rules.map((css) => `.${classOf(css)}{${css}}`),
+        // Blink only for a reader who has not asked for reduced motion, as in HTML.
+        `@media (prefers-reduced-motion:no-preference){@keyframes ${BLINK_KEYFRAMES}{50%{fill:transparent}}}`,
+    ].join("\n");
+    return [
+        `<svg class="rich-terminal" viewBox="0 0 ${n(terminalWidth + 2 * MARGIN)} ${n(terminalHeight + 2 * MARGIN)}" xmlns="http://www.w3.org/2000/svg">`,
+        `<style>\n${stylesheet}\n</style>`,
+        `<rect fill="${canvas.background.hex}" stroke="${blendRgb(canvas.background, canvas.foreground, FRAME_FADE).hex}" stroke-width="1" ` +
+            `x="${MARGIN}" y="${MARGIN}" width="${n(terminalWidth)}" height="${n(terminalHeight)}" rx="8"/>`,
+        `<text class="${id}-title" fill="${canvas.foreground.hex}" text-anchor="middle" ` +
+            `x="${n(MARGIN + terminalWidth / 2)}" y="${MARGIN + CHAR_HEIGHT + 6}">${escapeText(title)}</text>`,
+        `<g transform="translate(26,22)">${WINDOW_BUTTONS.map((fill, i) => `<circle cx="${i * 22}" cy="0" r="7" fill="${fill}"/>`).join("")}</g>`,
+        `<g class="${id}-matrix" transform="translate(${MARGIN + PADDING.left},${MARGIN + PADDING.top})">`,
+        ...runs.flatMap(backgroundSvg),
+        ...drawnRuns,
+        `</g>`,
+        `</svg>`,
+    ].join("\n");
+}

package/dist/core/fnv1a.d.ts

@@ -0,0 +1,10 @@
+/**
+ * fnv1a — FNV-1a, 32-bit, over a string's UTF-8 bytes, as 8 lowercase hex
+ * digits: the short deterministic name this library derives wherever output
+ * needs an identifier that is a function of what it names — an OSC 8 link id,
+ * an SVG's class prefix — rather than of a counter or a clock.
+ *
+ * UTF-8 rather than UTF-16 code units, so any other runtime computing standard
+ * FNV-1a over the same text gets the same digits.
+ */
+export declare function fnv1a(text: string): string;

package/dist/core/fnv1a.js

@@ -0,0 +1,17 @@
+/**
+ * fnv1a — FNV-1a, 32-bit, over a string's UTF-8 bytes, as 8 lowercase hex
+ * digits: the short deterministic name this library derives wherever output
+ * needs an identifier that is a function of what it names — an OSC 8 link id,
+ * an SVG's class prefix — rather than of a counter or a clock.
+ *
+ * UTF-8 rather than UTF-16 code units, so any other runtime computing standard
+ * FNV-1a over the same text gets the same digits.
+ */
+const utf8 = new TextEncoder();
+export function fnv1a(text) {
+    let hash = 0x811c9dc5;
+    for (const byte of utf8.encode(text)) {
+        hash = Math.imul(hash ^ byte, 0x01000193);
+    }
+    return (hash >>> 0).toString(16).padStart(8, "0");
+}

package/dist/core/highlighter.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Highlighters — apply styled spans to RichText based on pattern matching.
+ */
+import { RichText } from "./text.js";
+export declare abstract class Highlighter {
+    abstract highlight(text: RichText): void;
+    call(input: string): RichText;
+}
+export declare class NullHighlighter extends Highlighter {
+    highlight(_text: RichText): void;
+}
+export declare class RegexHighlighter extends Highlighter {
+    static highlights: (string | RegExp)[];
+    /** Style applied to matches. When ending with "." it acts as a namespace
+     *  prefix: named groups become `baseStyle + groupName` (e.g. "repr." + "url"
+     *  → "repr.url"). Otherwise it's used as a literal style for all matches
+     *  (e.g. "bold red" applies "bold red" to every named group). */
+    static baseStyle: string;
+    highlight(text: RichText): void;
+}
+export declare class ReprHighlighter extends RegexHighlighter {
+    static baseStyle: string;
+    static highlights: RegExp[];
+}
+export declare class JSONHighlighter extends RegexHighlighter {
+    static baseStyle: string;
+    static highlights: RegExp[];
+    highlight(text: RichText): void;
+}
+export declare class ISO8601Highlighter extends RegexHighlighter {
+    static baseStyle: string;
+    static highlights: string[];
+}

package/dist/core/highlighter.js

@@ -0,0 +1,190 @@
+/**
+ * Highlighters — apply styled spans to RichText based on pattern matching.
+ */
+import { RichText } from "./text.js";
+// --- Base ---
+export class Highlighter {
+    call(input) {
+        const text = new RichText(input);
+        this.highlight(text);
+        return text;
+    }
+}
+// --- NullHighlighter ---
+export class NullHighlighter extends Highlighter {
+    highlight(_text) {
+        // No-op
+    }
+}
+// --- RegexHighlighter ---
+export class RegexHighlighter extends Highlighter {
+    static highlights = [];
+    /** Style applied to matches. When ending with "." it acts as a namespace
+     *  prefix: named groups become `baseStyle + groupName` (e.g. "repr." + "url"
+     *  → "repr.url"). Otherwise it's used as a literal style for all matches
+     *  (e.g. "bold red" applies "bold red" to every named group). */
+    static baseStyle = "";
+    highlight(text) {
+        const ctor = this.constructor;
+        const baseStyle = ctor.baseStyle;
+        // Namespace mode: "repr." + groupName → "repr.url"
+        // Literal mode: "bold red" → applied directly to every match
+        const isNamespace = baseStyle.endsWith(".");
+        for (const pattern of ctor.highlights) {
+            // `d` reports where each group matched, as Python's `match.span(name)`
+            // does; searching the match for the group's text finds the first copy
+            // of it, which is not always the one the group captured.
+            const source = pattern instanceof RegExp ? pattern.source : pattern;
+            const flags = new Set([...(pattern instanceof RegExp ? pattern.flags : ""), "g", "d"]);
+            for (const match of text.plain.matchAll(new RegExp(source, [...flags].join("")))) {
+                if (match.indices === undefined)
+                    throw new Error("a match of a `d`-flag pattern carries indices");
+                // Group definition order, as Rich's `groupdict()`: a later group's span
+                // lands on top of an earlier one's.
+                for (const [groupName, span] of Object.entries(match.indices.groups ?? {})) {
+                    if (span === undefined || span[1] <= span[0])
+                        continue;
+                    const style = isNamespace ? `${baseStyle}${groupName}` : baseStyle || groupName;
+                    text.stylize(style, span[0], span[1]);
+                }
+            }
+        }
+    }
+}
+// --- Python's regex classes ---
+// Rich compiles its patterns on a `str`, where Python's `\w`, `\b` and `\d` are
+// Unicode-aware; JavaScript's are ASCII even under `u`, so `café=1` would lose
+// its attribute name and `étrue` would gain a `true`. These spell Python's for
+// the `u` flag for ReprHighlighter and JSONHighlighter. `.` is spelled `[^\n]`
+// because Python's dot stops only at `\n`, JavaScript's at `\r`, U+2028 and
+// U+2029 too.
+const W = String.raw `\p{L}\p{N}_`;
+const WB = String.raw `(?:(?<=[${W}])(?![${W}])|(?<![${W}])(?=[${W}]))`;
+const NWB = String.raw `(?:(?<=[${W}])(?=[${W}])|(?<![${W}])(?![${W}]))`;
+const D = String.raw `\p{Nd}`;
+// Rich's `[0-9]+\.?[0-9]*`, the digits of a number with an optional fraction,
+// spelled so a digit run has one way to split. Rich's spelling can hand any
+// prefix of a run to `[0-9]+` and the rest to `[0-9]*`, and a run that fails
+// the boundary after it is retried at every split: quadratic in its length.
+// Both spellings match the same strings and try them in the same order.
+const DECIMAL = String.raw `[0-9]+(?:\.[0-9]*)?`;
+// --- ReprHighlighter ---
+// Rich 15.0.0's patterns.
+// [LAW:one-type-per-behavior] All repr patterns use the same RegexHighlighter mechanism
+export class ReprHighlighter extends RegexHighlighter {
+    static baseStyle = "repr.";
+    static highlights = [
+        // `tag_contents` runs to the text's last `>`, so only the text's first `<`
+        // can open a tag; the lookbehind starts the match there and nowhere else,
+        // where Rich retries every later `<` and rescans to the end each time. The
+        // lookahead asks once whether any `>` follows; without it, a `<` before a
+        // long name with no `>` rescans to the end for every length of the name.
+        new RegExp(String.raw `(?<tag_start><)(?<=^[^<]*<)(?=[^]*>)(?<tag_name>[\-${W}.:|]*)(?<tag_contents>[^]*)(?<tag_end>>)`, "u"),
+        new RegExp(String.raw `(?<attrib_name>[${W}]{1,50})=(?<attrib_value>"?[${W}]+"?)?`, "u"),
+        new RegExp(String.raw `(?<brace>[\][{}()])`, "u"),
+        // [LAW:dataflow-not-control-flow] One alternation, scanned once, as Rich's
+        // `_combine_regex` joins it: where two could match, the earlier claims it.
+        new RegExp([
+            String.raw `(?<ipv4>[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})`,
+            String.raw `(?<ipv6>([A-Fa-f0-9]{1,4}::?){1,7}[A-Fa-f0-9]{1,4})`,
+            String.raw `(?<eui64>(?:[0-9A-Fa-f]{1,2}-){7}[0-9A-Fa-f]{1,2}|(?:[0-9A-Fa-f]{1,2}:){7}[0-9A-Fa-f]{1,2}|(?:[0-9A-Fa-f]{4}\.){3}[0-9A-Fa-f]{4})`,
+            String.raw `(?<eui48>(?:[0-9A-Fa-f]{1,2}-){5}[0-9A-Fa-f]{1,2}|(?:[0-9A-Fa-f]{1,2}:){5}[0-9A-Fa-f]{1,2}|(?:[0-9A-Fa-f]{4}\.){2}[0-9A-Fa-f]{4})`,
+            String.raw `(?<uuid>[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12})`,
+            // Departs from Rich: a call name starts a word, so the run is scanned
+            // for its `(` once, not again from each of its characters. Rich also
+            // styles a name that starts where another match ended mid-word, the
+            // `foo` of `aa-bb-cc-dd-ee-fffoo(`; this leaves it to the patterns
+            // after this one, so it is plain or, as `true` in `-1.true(`, theirs.
+            String.raw `(?<call>(?<![${W}.])[${W}.]*?)\(`,
+            // JavaScript's `true`, `false`, `null` and `undefined` beside Python's
+            // names: `Pretty` draws JavaScript values through this highlighter.
+            String.raw `${WB}(?<bool_true>True|true)${WB}|${WB}(?<bool_false>False|false)${WB}|${WB}(?<none>None|null|undefined)${WB}`,
+            String.raw `(?<ellipsis>\.\.\.)`,
+            String.raw `(?<number_complex>(?<![${W}])(?:-?${DECIMAL}(?:e[\-+]?${D}+?)?)(?:[\-+](?:${DECIMAL}(?:e[\-+]?${D}+)?))?j)`,
+            String.raw `(?<number>(?<![${W}])-?${DECIMAL}(e[\-+]?${D}+?)?${WB}|0x[0-9a-fA-F]*)`,
+            String.raw `(?<path>${NWB}(\/[\-${W}._+]+)*\/)(?<filename>[\-${W}._+]*)?`,
+            String.raw `(?<![\\${W}])(?<str>b?'''[^\n]*?(?<!\\)'''|b?'[^\n]*?(?<!\\)'|b?"""[^\n]*?(?<!\\)"""|b?"[^\n]*?(?<!\\)")`,
+            String.raw `(?<url>(file|https|http|ws|wss):\/\/[\-0-9a-zA-Z$_+!\x60(),.?\/;:&=%#~@]*)`,
+        ].join("|"), "u"),
+    ];
+}
+// --- JSONHighlighter ---
+// A JSON string as Rich 15.0.0 matches one, `b` bytes prefix included: an
+// opening quote with no backslash or word character before it, through the
+// first quote with no backslash before it, so an escaped quote stays inside.
+const JSON_STR = String.raw `(?<![\\${W}])(?<str>b?"[^\n]*?(?<!\\)")`;
+export class JSONHighlighter extends RegexHighlighter {
+    static baseStyle = "json.";
+    // [LAW:dataflow-not-control-flow] One alternation, scanned once, as Rich's
+    // `_combine_regex` joins it. A token claims its characters where the scan
+    // meets it, so the `true` and `12` inside `"true 12"` belong to the string.
+    static highlights = [
+        new RegExp([
+            String.raw `(?<brace>[\{\[\(\)\]\}])`,
+            String.raw `${WB}(?<bool_true>true)${WB}|${WB}(?<bool_false>false)${WB}|${WB}(?<null>null)${WB}`,
+            String.raw `(?<number>(?<![${W}])-?${DECIMAL}(e[\-+]?${D}+?)?${WB}|0x[0-9a-fA-F]*)`,
+            JSON_STR,
+        ].join("|"), "u"),
+    ];
+    // A string followed by a colon is also a key. Its `json.key` span comes after
+    // its `json.str` span, so the key style lands on top. Each string is found on
+    // its own and then checked for a colon. One `string(?=:)` pattern would get
+    // this wrong: its lazy body can stretch past a value's closing quote to the
+    // next key's, marking `"b", "c"` in `{"a": "b", "c": 1}` as one key.
+    highlight(text) {
+        super.highlight(text);
+        const colon = /[ \n\r\t]*:/y;
+        for (const { index, 0: str } of text.plain.matchAll(new RegExp(JSON_STR, "gu"))) {
+            const end = index + str.length;
+            colon.lastIndex = end;
+            if (colon.test(text.plain))
+                text.stylize("json.key", index, end);
+        }
+    }
+}
+// --- ISO8601Highlighter ---
+// Rich 15.0.0's patterns, after the Regular Expressions Cookbook recipes it
+// cites. Each matches a whole string that is one ISO 8601 value, never a value
+// inside other text. Python's `$` also matches before a final `\n`, which
+// JavaScript's does not; `END` is Python's.
+const END = String.raw `(?=\n?$)`;
+const YEAR = String.raw `(?<year>[0-9]{4})`;
+const MONTH = String.raw `(?<month>1[0-2]|0[1-9])`;
+const DAY = String.raw `(?<day>3[01]|0[1-9]|[12][0-9])`;
+const HOUR = String.raw `(?<hour>2[0-3]|[01][0-9])`;
+const MINUTE = String.raw `(?<minute>[0-5][0-9])`;
+const SECOND = String.raw `(?<second>[0-5][0-9])`;
+const WEEK = String.raw `(?<week>5[0-3]|[1-4][0-9]|0[1-9])`;
+const TZ_HOUR = String.raw `[+-](?:2[0-3]|[01][0-9])`;
+const XSD_DATE = String.raw `(?<date>(?<year>-?(?:[1-9][0-9]*)?[0-9]{4})-${MONTH}-${DAY})`;
+const XSD_TZ = String.raw `(?<timezone>Z|${TZ_HOUR}:[0-5][0-9])?`;
+// The cookbook's designator, whose minutes and their colon are both optional.
+const TZ = String.raw `(?<timezone>Z|${TZ_HOUR}(?::?(?:[0-5][0-9]))?)`;
+const COMPACT_TIME = `(?<time>${HOUR}${MINUTE}${SECOND})`;
+export class ISO8601Highlighter extends RegexHighlighter {
+    static baseStyle = "iso8601.";
+    static highlights = [
+        // Dates
+        `^${YEAR}-${MONTH}${END}`,
+        `^(?<date>${YEAR}${MONTH}${DAY})${END}`,
+        String.raw `^(?<date>${YEAR}-?(?<day>36[0-6]|3[0-5][0-9]|[12][0-9]{2}|0[1-9][0-9]|00[1-9]))${END}`,
+        // Weeks
+        `^(?<date>${YEAR}-?W${WEEK})${END}`,
+        `^(?<date>${YEAR}-?W${WEEK}-?(?<day>[1-7]))${END}`,
+        // Times
+        `^(?<time>${HOUR}:?${MINUTE})${END}`,
+        `^${COMPACT_TIME}${END}`,
+        `^${TZ}${END}`,
+        `^${COMPACT_TIME}${TZ}${END}`,
+        // Date and time. Rich writes this as one pattern whose `-` and `:`
+        // separators are all present or all absent, keyed on a Python conditional
+        // group JavaScript lacks; it is the two spellings here, adjacent, so the
+        // one that matches lays its spans where Rich's single pattern would.
+        `^(?<date>${YEAR}(?<hyphen>-)${MONTH}-${DAY}) (?<time>${HOUR}:${MINUTE}:${SECOND})${END}`,
+        `^(?<date>${YEAR}${MONTH}${DAY}) ${COMPACT_TIME}${END}`,
+        // XML Schema date, time and dateTime
+        `^${XSD_DATE}${XSD_TZ}${END}`,
+        String.raw `^(?<time>${HOUR}:${MINUTE}:${SECOND}(?<frac>\.[0-9]+)?)${XSD_TZ}${END}`,
+        String.raw `^${XSD_DATE}T(?<time>${HOUR}:${MINUTE}:${SECOND}(?<ms>\.[0-9]+)?)${XSD_TZ}${END}`,
+    ];
+}

package/dist/core/json.d.ts

@@ -0,0 +1,27 @@
+/**
+ * JSON — renders JSON data with syntax highlighting and pretty-printing.
+ *
+ * Lives in `core/` for the reason `pretty.ts` does, argued in its header: it
+ * turns foreign input into `RichText`, composes no other renderable, and
+ * imports core primitives only. `Console.printJson` delegates here, so this is
+ * where the console can reach it without an upward edge. [LAW:one-way-deps]
+ */
+import { Segment } from "./segment.js";
+import { RichText } from "./text.js";
+import type { Renderable, Measurable, RenderOptions } from "./protocol.js";
+export interface JSONOptions {
+    indent?: number;
+    sortKeys?: boolean;
+    highlight?: boolean;
+}
+export declare class JSONRenderable implements Renderable, Measurable {
+    readonly text: RichText;
+    private constructor();
+    static fromString(jsonString: string, options?: JSONOptions): JSONRenderable;
+    static fromData(data: unknown, options?: JSONOptions): JSONRenderable;
+    render(options: RenderOptions): Iterable<Segment>;
+    measure(options: RenderOptions): {
+        minimum: number;
+        maximum: number;
+    };
+}

package/dist/core/json.js

@@ -0,0 +1,53 @@
+/**
+ * JSON — renders JSON data with syntax highlighting and pretty-printing.
+ *
+ * Lives in `core/` for the reason `pretty.ts` does, argued in its header: it
+ * turns foreign input into `RichText`, composes no other renderable, and
+ * imports core primitives only. `Console.printJson` delegates here, so this is
+ * where the console can reach it without an upward edge. [LAW:one-way-deps]
+ */
+import { RichText } from "./text.js";
+import { JSONHighlighter } from "./highlighter.js";
+const highlighter = new JSONHighlighter();
+export class JSONRenderable {
+    text;
+    constructor(text) {
+        this.text = text;
+    }
+    static fromString(jsonString, options) {
+        const indent = options?.indent ?? 2;
+        const sortKeys = options?.sortKeys ?? false;
+        // Parse and re-serialize for consistent formatting
+        const data = JSON.parse(jsonString);
+        return JSONRenderable.fromData(data, { ...options, indent, sortKeys });
+    }
+    static fromData(data, options) {
+        const indent = options?.indent ?? 2;
+        const sortKeys = options?.sortKeys ?? false;
+        const doHighlight = options?.highlight !== false;
+        const replacer = sortKeys
+            ? (_key, value) => {
+                if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+                    const sorted = {};
+                    for (const k of Object.keys(value).sort()) {
+                        sorted[k] = value[k];
+                    }
+                    return sorted;
+                }
+                return value;
+            }
+            : undefined;
+        const jsonStr = JSON.stringify(data, replacer, indent);
+        const text = new RichText(jsonStr);
+        if (doHighlight) {
+            highlighter.highlight(text);
+        }
+        return new JSONRenderable(text);
+    }
+    *render(options) {
+        yield* this.text.render(options);
+    }
+    measure(options) {
+        return this.text.measure(options);
+    }
+}