@promptctl/rich-js 0.24.0 → 0.24.1

package/dist/core/protocol.d.ts

@@ -3,7 +3,7 @@
  * [LAW:one-source-of-truth] These interfaces are the single authority for the rendering contract.
  */
 import type { Segment } from "./segment.js";
-import { type Style, type StyleSyntaxError, type Theme } from "./style.js";
+import { Style, type StyleSyntaxError, type Theme } from "./style.js";
 import { ColorDepth } from "./color.js";
 import type { Highlighter } from "./highlighter.js";
 /**
@@ -87,15 +87,21 @@ export interface RenderOptions {
      */
     onStyleError?: StyleErrorHandler;
     /**
-     * Told of each owner that stamps its output (`core/anchor`) as it starts to
-     * render, so the calls arrive in document order: a container's children in
-     * the order it renders them, an owner before the owners nested in it. A
-     * container forwards it by passing its options on, which every container
-     * does. An owner rendered twice is told twice. A render made to measure is
-     * not drawing and is not told (`measuring`).
+     * Told of every renderable `render` is asked for, as it is asked, so the
+     * calls arrive in document order: a container before what it holds, its
+     * contents in the order it renders them. `"drawn"` is a renderable drawn at
+     * the width it was handed; `"held"` is one handed no column, which is still
+     * in the view but has nothing drawn for it (`render`). A renderable rendered
+     * twice is told twice. A render made to measure is not drawing and is not
+     * told (`measuring`).
      */
-    onDraw?: (owner: object) => void;
+    onPresent?: (renderable: Renderable, presence: Presence) => void;
 }
+/**
+ * Whether a renderable the view holds was drawn, or held: in the view, handed
+ * no column, and so not drawn (`render`).
+ */
+export type Presence = "drawn" | "held";
 /** Whether `text` is all ASCII — what an `asciiOnly` output can draw. */
 export declare const isAscii: (text: string) => boolean;
 /**
@@ -210,7 +216,10 @@ export declare function getStyle(options: RenderOptions, style: string | Style):
  * every bundled theme. So where the depth would turn a fixed colour of the
  * pair into a slot, the pair is dropped and the run is drawn on the
  * terminal's own foreground and background, which its theme does make
- * readable; its attributes still set it apart. A style whose colours are
+ * readable; its attributes still set it apart. Both are named, not left
+ * unset, so the colour of whatever the run sits in — a quote, a link — does
+ * not show through: Rich's code keeps its own colours inside a quote, and the
+ * terminal's are the ones it keeps here. A style whose colours are
  * slots already (`white on blue`), or that paints no ground (`bold magenta`),
  * was written for the terminal's own colours and is drawn as written. Rich
  * draws a highlighted line number the same way below 256 colours
@@ -238,6 +247,40 @@ export declare function groundedStyle(options: RenderOptions, style: Style): Sty
  * ignored the request and emitted its full natural width.
  */
 export declare function withCellWidth(options: RenderOptions): RenderOptions;
+/** Under one column there is nothing to draw, or to measure. */
+export declare function drawsNothing(options: {
+    readonly maxWidth: number;
+}): boolean;
+/**
+ * `renderable` drawn under `options`: Rich's `Console.render`, which every
+ * renderable there is drawn through, so under one column nothing is.
+ *
+ * [LAW:single-enforcer] The one place that rule is kept. Every call of a
+ * `Renderable`'s `render` in `src/` goes through here — a container drawing
+ * its child, a renderable drawing the text it built, a host drawing a frame —
+ * and `test/seam/render-calls.test.ts` fails on one that does not. Before
+ * this, each container asked `drawsNothing` itself, and the ones that forgot
+ * drew a child handed no column anyway.
+ *
+ * It is also the one reporter of what the view holds (`onPresent`). Under one
+ * column a renderable is held, not drawn: what it holds (`Composite`) is
+ * walked and reported held in turn, and nothing renders, so no renderable
+ * that keeps state while it renders — a `Viewport`'s offset, a `TextInput`'s
+ * scroll window — ever commits it at a width that is not shown. The walk runs
+ * whether or not anyone listens. Drawing the squeezed subtree at one column
+ * instead, and dropping what it drew, did commit that state.
+ */
+export declare function render(renderable: Renderable, options: RenderOptions): Iterable<Segment>;
+/**
+ * `options` as a measurement is asked with. A `measure` that renders to learn
+ * its shape draws nothing on the frame, so it reports nothing to `onPresent` —
+ * one that did would put a widget in the view at the moment a container
+ * measured it, and keep one the frame then cropped away.
+ *
+ * [LAW:single-enforcer] Every measurement starts here: `Measurement.get` and
+ * `withBoundedWidth` ask through it, and each `measure` passes it on.
+ */
+export declare function measuring(options: RenderOptions): RenderOptions;
 /**
  * The options a renderable should *lay out against*: `withCellWidth`, with an
  * unbounded offer resolved to the renderable's own natural width.
@@ -273,16 +316,6 @@ export declare function withCellWidth(options: RenderOptions): RenderOptions;
  * rather than zero, and saying so names the cause — where `String.repeat` and
  * `new Array` only ever name their own argument.
  */
-/**
- * `options` as a measurement is asked with. A `measure` that renders to learn
- * its shape draws nothing on the frame, so it reports no owner to `onDraw` —
- * one that did would put a widget in document order at the moment a
- * container measured it, and keep one the frame then cropped away.
- *
- * [LAW:single-enforcer] Every measurement starts here: `Measurement.get` and
- * `withBoundedWidth` ask through it, and each `measure` passes it on.
- */
-export declare function measuring(options: RenderOptions): RenderOptions;
 export declare function withBoundedWidth(options: RenderOptions, self: Measurable): RenderOptions;
 export interface Renderable {
     render(options: RenderOptions): Iterable<Segment>;
@@ -293,6 +326,26 @@ export interface Measurable {
         maximum: number;
     };
 }
+/**
+ * A container: a renderable that draws other renderables. `contents` is what
+ * its `render` hands to `render`, in that order where the order is not a
+ * width's, decided as the render decides it — and so it is how a container
+ * handed no column still reports what it holds (`render`). It takes no
+ * options: what a container holds may depend on its state (a hidden `Layout`
+ * holds nothing) but never on a width, because under one column there is none.
+ * It commits no state, and yields only renderables: text a container builds
+ * from a string it holds holds nothing.
+ *
+ * [LAW:one-source-of-truth] A second description of each container's
+ * traversal, so `test/renderables/contents.test.ts` holds every exported
+ * renderable's `contents` to what its `render` reports.
+ *
+ * A consumer's container that does not implement it reports nothing it holds
+ * while it is handed no column.
+ */
+export interface Composite {
+    contents(): Iterable<Renderable>;
+}
 /**
  * What the wheel scrolls: an owner of anchors on the frame (`./anchor.ts`)
  * that moves by lines. `canScrollBy` says whether `scrollBy` with the same
@@ -305,3 +358,4 @@ export interface Scrollable {
 export declare function isRenderable(obj: unknown): obj is Renderable;
 export declare function isMeasurable(obj: unknown): obj is Measurable;
 export declare function isScrollable(obj: object): obj is Scrollable;
+export declare function isComposite(obj: object): obj is Composite;

package/dist/core/protocol.js

@@ -3,7 +3,7 @@
  * [LAW:one-source-of-truth] These interfaces are the single authority for the rendering contract.
  */
 import { cellCount } from "./cells.js";
-import { DEFAULT_THEME } from "./style.js";
+import { DEFAULT_THEME, Style } from "./style.js";
 /** Whether `text` is all ASCII — what an `asciiOnly` output can draw. */
 export const isAscii = (text) => /^[\x00-\x7F]*$/.test(text);
 export function drawable(options, chosen, ascii, glyphs = String) {
@@ -61,6 +61,8 @@ export function fitHeight(lines, height) {
 export function getStyle(options, style) {
     return (options.theme ?? DEFAULT_THEME).resolve(style);
 }
+/** The terminal's own foreground on its own background. */
+const TERMINAL_GROUND = Style.parse("default on default");
 /**
  * `style` as the depth the render is encoded at can draw it. A style that
  * paints its own ground in fixed colours chose its ink and ground as a pair;
@@ -69,7 +71,10 @@ export function getStyle(options, style) {
  * every bundled theme. So where the depth would turn a fixed colour of the
  * pair into a slot, the pair is dropped and the run is drawn on the
  * terminal's own foreground and background, which its theme does make
- * readable; its attributes still set it apart. A style whose colours are
+ * readable; its attributes still set it apart. Both are named, not left
+ * unset, so the colour of whatever the run sits in — a quote, a link — does
+ * not show through: Rich's code keeps its own colours inside a quote, and the
+ * terminal's are the ones it keeps here. A style whose colours are
  * slots already (`white on blue`), or that paints no ground (`bold magenta`),
  * was written for the terminal's own colours and is drawn as written. Rich
  * draws a highlighted line number the same way below 256 colours
@@ -79,7 +84,7 @@ export function groundedStyle(options, style) {
     const drawn = style.drawnColors(options.colorSystem ?? undefined);
     const lost = (written, shown) => written?.fixedValue !== undefined && shown?.fixedValue === undefined;
     const pairLost = style.bgcolor !== undefined && (lost(style.color, drawn.color) || lost(style.bgcolor, drawn.bgcolor));
-    return pairLost ? style.withoutColor : style;
+    return pairLost ? style.add(TERMINAL_GROUND) : style;
 }
 /**
  * The options a renderable should work from: the caller's, with `maxWidth`
@@ -104,6 +109,51 @@ export function groundedStyle(options, style) {
 export function withCellWidth(options) {
     return { ...options, maxWidth: cellCount(options.maxWidth) };
 }
+/** Under one column there is nothing to draw, or to measure. */
+export function drawsNothing(options) {
+    return cellCount(options.maxWidth) < 1;
+}
+/**
+ * `renderable` drawn under `options`: Rich's `Console.render`, which every
+ * renderable there is drawn through, so under one column nothing is.
+ *
+ * [LAW:single-enforcer] The one place that rule is kept. Every call of a
+ * `Renderable`'s `render` in `src/` goes through here — a container drawing
+ * its child, a renderable drawing the text it built, a host drawing a frame —
+ * and `test/seam/render-calls.test.ts` fails on one that does not. Before
+ * this, each container asked `drawsNothing` itself, and the ones that forgot
+ * drew a child handed no column anyway.
+ *
+ * It is also the one reporter of what the view holds (`onPresent`). Under one
+ * column a renderable is held, not drawn: what it holds (`Composite`) is
+ * walked and reported held in turn, and nothing renders, so no renderable
+ * that keeps state while it renders — a `Viewport`'s offset, a `TextInput`'s
+ * scroll window — ever commits it at a width that is not shown. The walk runs
+ * whether or not anyone listens. Drawing the squeezed subtree at one column
+ * instead, and dropping what it drew, did commit that state.
+ */
+export function render(renderable, options) {
+    const presence = drawsNothing(options) ? "held" : "drawn";
+    options.onPresent?.(renderable, presence);
+    if (presence === "drawn")
+        return renderable.render(options);
+    if (isComposite(renderable))
+        for (const content of renderable.contents())
+            render(content, options);
+    return [];
+}
+/**
+ * `options` as a measurement is asked with. A `measure` that renders to learn
+ * its shape draws nothing on the frame, so it reports nothing to `onPresent` —
+ * one that did would put a widget in the view at the moment a container
+ * measured it, and keep one the frame then cropped away.
+ *
+ * [LAW:single-enforcer] Every measurement starts here: `Measurement.get` and
+ * `withBoundedWidth` ask through it, and each `measure` passes it on.
+ */
+export function measuring(options) {
+    return { ...options, onPresent: undefined };
+}
 /**
  * The options a renderable should *lay out against*: `withCellWidth`, with an
  * unbounded offer resolved to the renderable's own natural width.
@@ -139,18 +189,6 @@ export function withCellWidth(options) {
  * rather than zero, and saying so names the cause — where `String.repeat` and
  * `new Array` only ever name their own argument.
  */
-/**
- * `options` as a measurement is asked with. A `measure` that renders to learn
- * its shape draws nothing on the frame, so it reports no owner to `onDraw` —
- * one that did would put a widget in document order at the moment a
- * container measured it, and keep one the frame then cropped away.
- *
- * [LAW:single-enforcer] Every measurement starts here: `Measurement.get` and
- * `withBoundedWidth` ask through it, and each `measure` passes it on.
- */
-export function measuring(options) {
-    return { ...options, onDraw: undefined };
-}
 export function withBoundedWidth(options, self) {
     const parsed = withCellWidth(options);
     if (Number.isFinite(parsed.maxWidth))
@@ -182,3 +220,6 @@ export function isScrollable(obj) {
         "scrollBy" in obj &&
         typeof obj.scrollBy === "function");
 }
+export function isComposite(obj) {
+    return "contents" in obj && typeof obj.contents === "function";
+}

package/dist/core/render.js

@@ -42,6 +42,7 @@
  * `Style.render` returns bare text for a null colour system.
  */
 import { ColorDepth, resolveDestination } from "./color.js";
+import { render } from "./protocol.js";
 import { OSC8_CLOSE, osc8Open } from "./osc8.js";
 const DEFAULT_WIDTH = 80;
 /**
@@ -101,5 +102,5 @@ export function renderToString(renderable, options) {
         // so a renderable measures what this very call will draw.
         colorSystem: destination.colorSystem,
     };
-    return segmentsToString(renderable.render(renderOptions), destination);
+    return segmentsToString(render(renderable, renderOptions), destination);
 }

package/dist/core/segment.d.ts

@@ -42,6 +42,15 @@ export declare class Segment {
      * whatever drew it, and its anchor says so; see `./anchor.ts`.
      */
     splitCells(position: CellCol): [Segment, Segment];
+    /**
+     * Cuts at each of `positions`, non-decreasing and inside this segment's
+     * cells: one piece more than there are positions, each exactly as wide as
+     * the distance between its cuts, the way `splitCells` cuts at one.
+     *
+     * [LAW:single-enforcer] Each piece but the first starts that many cells
+     * further into whatever drew it, and its anchor says so; see `./anchor.ts`.
+     */
+    private cutAt;
     private static _line;
     static line(): Segment;
     /**
@@ -150,7 +159,15 @@ export declare class Segment {
      */
     static removeColor(segments: Iterable<Segment>): Iterable<Segment>;
     /**
-     * Divides segments at cell positions. Yields arrays of segments for each section.
+     * Divides segments at cell positions: a section ending at each cut, and the
+     * cells after the last cut when there are any. A segment wider than zero
+     * that starts at a cut opens the section after it; one with no cells stays
+     * in the section it ends.
+     *
+     * One walk, and each segment is cut once at every cut that falls inside it:
+     * cutting what is left of it again at each cut re-measures and copies the
+     * rest every time, so a long line wrapped into many rows took time quadratic
+     * in its length.
      */
     static divide(segments: Segment[], cuts: number[]): Segment[][];
     /**

package/dist/core/segment.js

@@ -59,11 +59,10 @@ export class Segment {
             return [this, new Segment("")];
         if (position <= 0)
             return [new Segment(""), this];
-        const [leftText, rightText] = cutCells(this.text, position);
-        return [
-            new Segment(leftText, this.style),
-            new Segment(rightText, this.style?.shiftedBy(position)),
-        ];
+        return this.cutAt([position]);
+    }
+    cutAt(positions) {
+        return cutCells(this.text, positions).map((text, piece) => new Segment(text, piece === 0 ? this.style : this.style?.shiftedBy(positions[piece - 1])));
     }
     // --- Static factories ---
     static _line;
@@ -129,8 +128,11 @@ export class Segment {
      */
     static *applyStyle(segments, style, postStyle) {
         // Applying no style is the identity, so the segments pass through as they
-        // are instead of each being copied into an equal one.
-        if (!style && !postStyle) {
+        // are instead of each being copied into an equal one. A null style — a
+        // theme's plain entry, such as `markdown.item` — is no style.
+        const pre = style?.isNull ? undefined : style;
+        const post = postStyle?.isNull ? undefined : postStyle;
+        if (!pre && !post) {
             yield* segments;
             return;
         }
@@ -140,10 +142,10 @@ export class Segment {
                 continue;
             }
             let s = segment.style;
-            if (style)
-                s = style.add(s);
-            if (postStyle)
-                s = s ? s.add(postStyle) : postStyle;
+            if (pre)
+                s = pre.add(s);
+            if (post)
+                s = s ? s.add(post) : post;
             yield new Segment(segment.text, s, segment.control);
         }
     }
@@ -398,45 +400,44 @@ export class Segment {
         }
     }
     /**
-     * Divides segments at cell positions. Yields arrays of segments for each section.
+     * Divides segments at cell positions: a section ending at each cut, and the
+     * cells after the last cut when there are any. A segment wider than zero
+     * that starts at a cut opens the section after it; one with no cells stays
+     * in the section it ends.
+     *
+     * One walk, and each segment is cut once at every cut that falls inside it:
+     * cutting what is left of it again at each cut re-measures and copies the
+     * rest every time, so a long line wrapped into many rows took time quadratic
+     * in its length.
      */
     static divide(segments, cuts) {
         if (cuts.length === 0)
             return [segments];
-        const result = [];
-        let segmentIndex = 0;
-        let cellOffset = 0;
-        let currentSegment = segments[segmentIndex];
-        for (const cut of cuts) {
-            const section = [];
-            while (currentSegment && cellOffset + currentSegment.cellLength <= cut) {
-                section.push(currentSegment);
-                cellOffset += currentSegment.cellLength;
-                segmentIndex++;
-                currentSegment = segments[segmentIndex];
-            }
-            if (currentSegment && !currentSegment.isControl && cellOffset < cut) {
-                const splitAt = asCellCol(cut - cellOffset);
-                const [left, right] = currentSegment.splitCells(splitAt);
-                if (left.hasText)
-                    section.push(left);
-                cellOffset += left.cellLength;
-                currentSegment = right;
+        const sections = [[]];
+        let offset = 0;
+        let next = 0;
+        for (const segment of segments) {
+            const end = offset + segment.cellLength;
+            const inside = [];
+            for (; next < cuts.length && cuts[next] < end; next++) {
+                const cut = cuts[next];
+                if (cut <= offset)
+                    sections.push([]);
+                else
+                    inside.push(asCellCol(cut - offset));
             }
-            result.push(section);
-        }
-        // Remaining segments
-        const tail = [];
-        if (currentSegment?.hasText)
-            tail.push(currentSegment);
-        segmentIndex++;
-        while (segmentIndex < segments.length) {
-            tail.push(segments[segmentIndex]);
-            segmentIndex++;
+            const [head, ...rest] = inside.length === 0 ? [segment] : segment.cutAt(inside);
+            sections[sections.length - 1].push(head);
+            // A piece between two cuts at one cell has no text: the section it is holds nothing.
+            for (const piece of rest)
+                sections.push(piece.hasText ? [piece] : []);
+            offset = end;
         }
-        if (tail.length > 0)
-            result.push(tail);
-        return result;
+        for (; next < cuts.length; next++)
+            sections.push([]);
+        if (sections[sections.length - 1].length === 0)
+            sections.pop();
+        return sections;
     }
     // --- Layout helpers ---
     /**

package/dist/core/strip.d.ts

@@ -28,7 +28,7 @@
 import type { Anchor } from "./anchor.js";
 import { Segment } from "./segment.js";
 import { Style } from "./style.js";
-import { type Measurable, type Renderable, type RenderOptions } from "./protocol.js";
+import { type Composite, type Measurable, type Renderable, type RenderOptions } from "./protocol.js";
 /**
  * Items in a `Strip` expose their per-edge style so joiners can paint the
  * transition glyph at each boundary.
@@ -97,11 +97,12 @@ export declare function drawJoin<T extends StyledRenderable>(joiner: Joiner<T>,
  * item.
  */
 export declare function drawItem(item: StyledRenderable): Renderable;
-export declare class Strip<T extends StyledRenderable = StyledRenderable> implements Renderable, Measurable {
+export declare class Strip<T extends StyledRenderable = StyledRenderable> implements Renderable, Measurable, Composite {
     readonly items: readonly T[];
     readonly joiner: Joiner<T>;
     constructor(items: readonly T[], joiner: Joiner<T>);
     render(options: RenderOptions): Iterable<Segment>;
+    contents(): Iterable<Renderable>;
     /**
      * [LAW:one-source-of-truth] The width of the one row it draws, and that is
      * both bounds: the row never wraps and no item is offered less than the whole

package/dist/core/strip.js

@@ -31,7 +31,7 @@ import { ColorDepth, ColorSpec, SURFACE_BLACK } from "./color.js";
 import { Oklch } from "./oklch.js";
 import { cellLen } from "./cells.js";
 import { fnv1a } from "./fnv1a.js";
-import { drawable, getStyle, isAscii } from "./protocol.js";
+import { drawable, getStyle, isAscii, render } from "./protocol.js";
 /**
  * The owner every cell a strip's joiner draws is stamped with
  * (`Segment.anchorLines`), whatever the joiner: a seam is told by what drew
@@ -80,7 +80,7 @@ export function colorsOwnedBy(anchor, owners) {
  */
 export function drawJoin(joiner, left, right, context) {
     const join = joiner.join(left, right, context);
-    return { render: (options) => Segment.anchorLines([[...join.render(options)]], JOIN)[0] };
+    return { render: (options) => Segment.anchorLines([[...render(join, options)]], JOIN)[0] };
 }
 /**
  * [LAW:single-enforcer] What `item` draws, every cell stamped as the item's,
@@ -89,7 +89,7 @@ export function drawJoin(joiner, left, right, context) {
  * item.
  */
 export function drawItem(item) {
-    return { render: (options) => Segment.anchorLines([[...item.render(options)]], item)[0] };
+    return { render: (options) => Segment.anchorLines([[...render(item, options)]], item)[0] };
 }
 // --- Strip ---
 export class Strip {
@@ -112,12 +112,12 @@ export class Strip {
         // `left` fills the canvas, and the first item would pad over the rest of
         // the row. Where the row sits in the width is its container's to say.
         const row = { ...options, justify: undefined };
-        yield* drawJoin(this.joiner, null, items[0], { index: 0 }).render(row);
+        yield* render(drawJoin(this.joiner, null, items[0], { index: 0 }), row);
         for (let i = 0; i < items.length; i++) {
             const item = items[i];
-            yield* drawItem(item).render(row);
+            yield* render(drawItem(item), row);
             const next = i + 1 < items.length ? items[i + 1] : null;
-            yield* drawJoin(this.joiner, item, next, { index: i + 1 }).render(row);
+            yield* render(drawJoin(this.joiner, item, next, { index: i + 1 }), row);
         }
         // [LAW:one-source-of-truth] `Strip`'s sibling `FlexStrip` ends every line
         // it emits, including the last, and the other block-level renderables
@@ -131,6 +131,10 @@ export class Strip {
         // of which renderables end their own line and which are fragments.
         yield Segment.line();
     }
+    // The items; a join is drawn from what the joiner emits for it, not held.
+    contents() {
+        return this.items;
+    }
     /**
      * [LAW:one-source-of-truth] The width of the one row it draws, and that is
      * both bounds: the row never wraps and no item is offered less than the whole
@@ -140,7 +144,7 @@ export class Strip {
      */
     measure(options) {
         let width = 0;
-        for (const segment of this.render(options))
+        for (const segment of render(this, options))
             width += segment.cellLength;
         return { minimum: width, maximum: width };
     }

package/dist/core/style.js

@@ -129,7 +129,8 @@ export class Style {
         this.frame = options.frame;
         this.encircle = options.encircle;
         this.overline = options.overline;
-        this.link = options.link;
+        // As the reference's `self._link`, read only for truth: an empty URL is no link.
+        this.link = options.link || undefined;
         this.meta = options.meta;
         this.anchor = options.anchor;
     }
@@ -695,16 +696,26 @@ export const DEFAULT_STYLES = {
     "syntax.line_number.highlight": Style.parse("bold grey93 on grey27"),
     // Markdown
     "markdown.h1": Style.parse("bold underline"),
-    "markdown.h2": Style.parse("bold"),
-    "markdown.h3": Style.parse("bold dim"),
-    "markdown.h4": Style.parse("bold dim italic"),
+    "markdown.h2": Style.parse("underline magenta"),
+    "markdown.h3": Style.parse("bold magenta"),
+    "markdown.h4": Style.parse("italic magenta"),
+    "markdown.h5": Style.parse("italic"),
+    "markdown.h6": Style.parse("dim"),
     // A fixed cyan, not the theme's: `cyan` is dark enough on some themes to
     // sink into grey11. Bold, as Rich's is: at 16 colours a renderable draws it
     // without its pair (`groundedStyle`), and bold is what still marks code.
     "markdown.code": Style.parse("bold dark_turquoise on grey11"),
-    "markdown.hr": Style.parse("yellow"),
+    "markdown.em": Style.parse("italic"),
+    "markdown.strong": Style.parse("bold"),
+    "markdown.s": Style.parse("strike"),
+    "markdown.kbd": Style.parse("bold bright_yellow"),
+    "markdown.block_quote": Style.parse("magenta"),
+    "markdown.hr": Style.parse("dim"),
+    "markdown.item": NULL_STYLE,
+    "markdown.item.bullet": Style.parse("bold"),
+    "markdown.item.number": Style.parse("cyan"),
     "markdown.link": Style.parse("bright_blue"),
-    "markdown.link_url": Style.parse("blue"),
+    "markdown.link_url": Style.parse("underline blue"),
     "markdown.table.border": Style.parse("cyan"),
     "markdown.table.header": Style.parse("not bold cyan"),
     // Progress

package/dist/core/text.js

@@ -9,10 +9,20 @@ import { stripOscTerminators } from "./osc8.js";
 import { drawable, getStyle, withBoundedWidth } from "./protocol.js";
 // Every C0 control and DEL except \t and \n. Rich's `Text` strips only
 // `STRIP_CONTROL_CODES` (BEL, BS, VT, FF, CR); the rest of the set is the
-// port's extension, so no C0 byte of content can start an escape sequence or
-// move the cursor on the wire. C1 controls (U+0080–U+009F) pass, as in Rich.
-// [LAW:single-enforcer] Single place where control chars are sanitized
-const CONTROL_CHARS_RE = /[\x00-\x08\x0B-\x1F\x7F]/g;
+// port's extension, so no byte of content can start an escape sequence or move
+// the cursor on the wire: the C1 controls (U+0080–U+009F) go as well, since a
+// terminal reads U+009B as CSI and U+009D as OSC (TextInput refuses them for
+// the same reason). So do the format controls that hold state past the text,
+// also the port's extension: the bidi embeddings and overrides with their
+// closer PDF (U+202A–U+202E), the isolates with their closer PDI
+// (U+2066–U+2069), and the deprecated shaping and swapping switches
+// (U+206A–U+206F). An opener left unclosed in content reverses whatever is
+// drawn after it on the line, and a closer whose opener is gone closes
+// nothing of the text's own. The bidi marks (LRM, RLM, ALM) hold no state and
+// pass, since right-to-left text needs them.
+// [LAW:single-enforcer] Single place where control chars are sanitized: every
+// string that becomes part of a Text's characters passes here.
+const CONTROL_CHARS_RE = /[\x00-\x08\x0B-\x1F\x7F-\x9F\u202A-\u202E\u2066-\u206F]/g;
 export function stripControlChars(text) {
     return text.replace(CONTROL_CHARS_RE, "");
 }
@@ -473,10 +483,9 @@ export class RichText {
         return this;
     }
     pad(count, char) {
-        const c = char ?? " ";
-        const padding = c.repeat(count);
-        // Shift all spans to the right
-        this._spans = this._spans.map((s) => s.move(count));
+        const padding = stripControlChars(char ?? " ").repeat(count);
+        // Shift all spans right by what the left side gained.
+        this._spans = this._spans.map((s) => s.move(padding.length));
         this._text = padding + this._text + padding;
         return this;
     }
@@ -492,14 +501,13 @@ export class RichText {
         return this;
     }
     padLeft(count, char) {
-        const c = char ?? " ";
-        this._spans = this._spans.map((s) => s.move(count));
-        this._text = c.repeat(count) + this._text;
+        const padding = stripControlChars(char ?? " ").repeat(count);
+        this._spans = this._spans.map((s) => s.move(padding.length));
+        this._text = padding + this._text;
         return this;
     }
     padRight(count, char) {
-        const c = char ?? " ";
-        this._text += c.repeat(count);
+        this._text += stripControlChars(char ?? " ").repeat(count);
         return this;
     }
     setLength(length) {
@@ -558,7 +566,7 @@ export class RichText {
         // value, so width 0 and a marker wider than the width run the same walk
         // as every other call: what is drawn plus what is kept is `cells` wide.
         const cells = cellCount(width);
-        const marker = cellFit(options?.marker ?? "\u2026", cells);
+        const marker = cellFit(stripControlChars(options?.marker ?? "\u2026"), cells);
         const budget = asCellCol(cells - cellLen(marker));
         if (mode === "right") {
             this._cropRightTo(budget);