@promptctl/rich-js 0.27.0 → 0.29.0

package/dist/renderables/glyph-effects.d.ts

@@ -1,16 +1,17 @@
 /**
  * The glyph effect catalogue: a typewriter and a scramble, which run once and
  * are done, each with its way out for an element leaving (`backspace`,
- * `scrambleOut`), and a wave of case changes, rain and stars, which loop for as
- * long as they are drawn. Each is a `GlyphEffect` for `GlyphEffected`
- * (`./glyph-effect.ts`), built as the colour catalogue's are
- * (`./effects.ts`): one function each over the one shape, made by name, one
- * way, at the defaults in `GLYPH_DEFAULTS` (`GLYPH_EFFECT_CATALOGUE`).
+ * `scrambleOut`), and a wave of case changes, rain, stars and marching ants,
+ * which loop for as long as they are drawn. Each is a `GlyphEffect` for
+ * `GlyphEffected` (`./glyph-effect.ts`), built as the color catalogue's are
+ * (`./effects.ts`): one function each over the one shape, at the defaults in
+ * `GLYPH_DEFAULTS`. `GLYPH_EFFECT_CATALOGUE` makes by name those a template's
+ * `glyphs` takes.
  *
- * Where a colour loop glides, a glyph cannot: a cell shows one glyph or
+ * Where a color loop glides, a glyph cannot: a cell shows one glyph or
  * another, so every loop here moves in steps, on a `beat`, and says when its
  * next step is. The transitions are `Transition`s by the one rule the
- * colour transitions follow (`transition`): they move every frame until
+ * color transitions follow (`transition`): they move every frame until
  * their seconds are up, and never after.
  *
  * [LAW:no-ambient-temporal-coupling] No effect reads a clock, and what a cell
@@ -90,27 +91,41 @@ export interface Particles {
  * row a step, and one that holds still draws a fresh field each life.
  */
 export declare function particles(spec: Particles, z: number): GlyphEffect;
-/** The names of the glyph effects that loop. */
+/** How ants march: a step, in seconds, for the gaps to move one cell, and the most cells a gap may be from the next. */
+export interface MarchingAnts {
+    readonly step: number;
+    readonly every: number;
+}
+/**
+ * Marching ants: gaps blanked round each box the element draws, spaced as
+ * evenly as the ring allows and never more than `every` cells apart, walking
+ * one cell clockwise a `step`. The whole pattern turns, so a ring that `every`
+ * does not divide closes with no seam at its corner. The ring is whatever the box
+ * is (`Box.frame`), at any width and beside a title. A ring may draw blanks and
+ * they keep the count, but an element with no ink on any ring never changes.
+ */
+export declare function marchingAnts({ step, every }: MarchingAnts): GlyphEffect;
+/** The names a template's `glyphs` takes for an effect that loops. */
 export type GlyphLoopName = "wave" | "rain" | "stars";
-/** The names of the glyph effects that run once. */
+/** The names a template's `glyphs` takes for an effect that runs once. */
 export type GlyphTransitionName = "typewriter" | "scramble" | "backspace" | "scrambleOut";
-/** Each catalogue glyph effect's defaults, as first drawn in `examples/glyph-effects`. */
+/** Each glyph effect's defaults, as first drawn in `examples/glyph-effects`. */
 export declare const GLYPH_DEFAULTS: {
     readonly typewriter: {
         readonly seconds: 2;
-        readonly ease: import("../core/easing.js").Ease;
+        readonly ease: import("../core/easing.js").Easing;
     };
     readonly scramble: {
         readonly seconds: 2.5;
-        readonly ease: import("../core/easing.js").Ease;
+        readonly ease: import("../core/easing.js").Easing;
     };
     readonly backspace: {
         readonly seconds: 1.5;
-        readonly ease: import("../core/easing.js").Ease;
+        readonly ease: import("../core/easing.js").Easing;
     };
     readonly scrambleOut: {
         readonly seconds: 2.5;
-        readonly ease: import("../core/easing.js").Ease;
+        readonly ease: import("../core/easing.js").Easing;
     };
     readonly wave: {
         readonly step: 0.06;
@@ -132,6 +147,10 @@ export declare const GLYPH_DEFAULTS: {
         readonly drift: 0;
         readonly life: 1;
     };
+    readonly march: {
+        readonly step: 0.15;
+        readonly every: 3;
+    };
 };
 /**
  * Every glyph effect in the catalogue by name, each made the one way: for an

package/dist/renderables/glyph-effects.js

@@ -1,16 +1,17 @@
 /**
  * The glyph effect catalogue: a typewriter and a scramble, which run once and
  * are done, each with its way out for an element leaving (`backspace`,
- * `scrambleOut`), and a wave of case changes, rain and stars, which loop for as
- * long as they are drawn. Each is a `GlyphEffect` for `GlyphEffected`
- * (`./glyph-effect.ts`), built as the colour catalogue's are
- * (`./effects.ts`): one function each over the one shape, made by name, one
- * way, at the defaults in `GLYPH_DEFAULTS` (`GLYPH_EFFECT_CATALOGUE`).
+ * `scrambleOut`), and a wave of case changes, rain, stars and marching ants,
+ * which loop for as long as they are drawn. Each is a `GlyphEffect` for
+ * `GlyphEffected` (`./glyph-effect.ts`), built as the color catalogue's are
+ * (`./effects.ts`): one function each over the one shape, at the defaults in
+ * `GLYPH_DEFAULTS`. `GLYPH_EFFECT_CATALOGUE` makes by name those a template's
+ * `glyphs` takes.
  *
- * Where a colour loop glides, a glyph cannot: a cell shows one glyph or
+ * Where a color loop glides, a glyph cannot: a cell shows one glyph or
  * another, so every loop here moves in steps, on a `beat`, and says when its
  * next step is. The transitions are `Transition`s by the one rule the
- * colour transitions follow (`transition`): they move every frame until
+ * color transitions follow (`transition`): they move every frame until
  * their seconds are up, and never after.
  *
  * [LAW:no-ambient-temporal-coupling] No effect reads a clock, and what a cell
@@ -21,7 +22,7 @@
  */
 import { Animation } from "../core/animation.js";
 import { cellLen, graphemes } from "../core/cells.js";
-import { EASES, Phase, beat, positiveSeconds, settled } from "../core/easing.js";
+import { EASES, WrapMode, stepSequence, positiveSeconds, withSettlingTime } from "../core/easing.js";
 import { hash } from "../core/noise.js";
 import { drawable, isAscii } from "../core/protocol.js";
 import { inked } from "./effect.js";
@@ -50,6 +51,10 @@ function text(cells) {
     }
     return { length: place.size, place };
 }
+/** `n` wrapped into [0, `size`), for a count a timeline may run backwards past 0. */
+function wrapped(n, size) {
+    return ((n % size) + size) % size;
+}
 /** Of `n` cells, how many have arrived at eased progress `p`, an ease that overshoots held to the cells there are. */
 function arrived(n, p) {
     return Math.min(n, Math.max(0, Math.floor(n * p)));
@@ -62,11 +67,11 @@ function arrived(n, p) {
  * the change shows. The beat is made once, for every frame drawn on it.
  */
 function stepped(seconds) {
-    const pace = beat([seconds]);
+    const pace = stepSequence([seconds]);
     return (frame, still) => Animation.of({
-        at: (t) => frame(Math.round(pace.lastChange(t) / seconds)),
-        nextChange: (t) => pace.nextChange(t),
-        lastChange: (t) => pace.lastChange(t),
+        at: (t) => frame(Math.round(pace.validFrom(t) / seconds)),
+        validUntil: (t) => pace.validUntil(t),
+        validFrom: (t) => pace.validFrom(t),
         reduced: () => Animation.constant(still),
     });
 }
@@ -80,9 +85,9 @@ const AS_WRITTEN = (cell) => cell.glyph;
  * with are not text, so no second is spent on them.
  */
 export function typewriter(timing) {
-    const phase = Phase.once(0, timing.seconds);
+    const phase = WrapMode.once(0, timing.seconds);
     // Settled, so the last cell is typed at the seconds whatever ease was handed.
-    const ease = settled(timing.ease);
+    const ease = withSettlingTime(timing.ease);
     return transition(timing.seconds, ({ cells }) => {
         const { length, place } = text(cells);
         return Animation.continuous((t) => {
@@ -105,9 +110,9 @@ const FLICKER = 1 / 15;
  */
 export function scramble(timing, z) {
     requireZ("scramble", z);
-    const phase = Phase.once(0, timing.seconds);
+    const phase = WrapMode.once(0, timing.seconds);
     // Settled, so the last cell resolves at the seconds whatever ease was handed.
-    const ease = settled(timing.ease);
+    const ease = withSettlingTime(timing.ease);
     const flicker = stepped(FLICKER)((step) => step, 0);
     return transition(timing.seconds, ({ cells }) => {
         const { length, place } = text(cells);
@@ -129,9 +134,9 @@ function churned(cell, z, step) {
  * element ends blank and nothing is left to vanish when it goes.
  */
 export function backspace(timing) {
-    const phase = Phase.once(0, timing.seconds);
+    const phase = WrapMode.once(0, timing.seconds);
     // Settled, so the first cell is erased at the seconds whatever ease was handed.
-    const ease = settled(timing.ease);
+    const ease = withSettlingTime(timing.ease);
     return transition(timing.seconds, ({ cells }) => {
         const { length, place } = text(cells);
         return Animation.continuous((t) => {
@@ -151,9 +156,9 @@ const CHURN = 0.3;
  */
 export function scrambleOut(timing, z) {
     requireZ("scrambleOut", z);
-    const phase = Phase.once(0, timing.seconds);
+    const phase = WrapMode.once(0, timing.seconds);
     // Settled, so the last cell is blank at the seconds whatever ease was handed.
-    const ease = settled(timing.ease);
+    const ease = withSettlingTime(timing.ease);
     const flicker = stepped(FLICKER)((step) => step, 0);
     return transition(timing.seconds, ({ cells }) => {
         const { length, place } = text(cells);
@@ -200,7 +205,7 @@ export function caseWave({ step, width }, z) {
         const start = Math.floor(hash(z, 2.3) * span);
         return steps((s) => {
             // The column just past the band's right edge; it enters at the left.
-            const lead = (((s + start) % span) + span) % span;
+            const lead = wrapped(s + start, span);
             // A wide glyph is in the band if any of its columns is.
             return (cell) => (cell.col < lead && cell.col + cellLen(cell.glyph) > lead - width ? swapCase(cell.glyph) : cell.glyph);
         }, AS_WRITTEN);
@@ -250,7 +255,69 @@ export function particles(spec, z) {
         }, AS_WRITTEN);
     };
 }
-/** Each catalogue glyph effect's defaults, as first drawn in `examples/glyph-effects`. */
+/**
+ * Where each cell stands on the ring of the box frame that drew it, by
+ * `index`. A ring is the
+ * perimeter of the rectangle a frame's cells cover, read in the element's own
+ * rows and columns, so it is true wherever the box sits among them. A rule or
+ * divider inside that rectangle, as a table draws, is frame and no part of the
+ * ring, and a title set into the frame is no frame but keeps its places.
+ */
+function ringPlaces(cells) {
+    const frames = new Map();
+    for (const cell of cells) {
+        if (cell.boxFrame === undefined)
+            continue;
+        const ring = frames.get(cell.boxFrame);
+        if (ring === undefined)
+            frames.set(cell.boxFrame, [cell]);
+        else
+            ring.push(cell);
+    }
+    const places = new Map();
+    for (const ring of frames.values()) {
+        // Cells come in reading order, so the rows are the ring's two ends.
+        const [top, down] = [ring[0].row, ring[ring.length - 1].row - ring[0].row];
+        const left = ring.reduce((most, { col }) => Math.min(most, col), Infinity);
+        const across = ring.reduce((most, { col }) => Math.max(most, col), -Infinity) - left;
+        const size = Math.max(1, 2 * (across + down));
+        for (const cell of ring) {
+            const [y, x] = [cell.row - top, cell.col - left];
+            const place = y === 0 ? x : x === across ? across + y : y === down ? 2 * across + down - x : x === 0 ? 2 * (across + down) - y : undefined;
+            if (place !== undefined)
+                places.set(cell.index, { place, cells: size });
+        }
+    }
+    return places;
+}
+/**
+ * Marching ants: gaps blanked round each box the element draws, spaced as
+ * evenly as the ring allows and never more than `every` cells apart, walking
+ * one cell clockwise a `step`. The whole pattern turns, so a ring that `every`
+ * does not divide closes with no seam at its corner. The ring is whatever the box
+ * is (`Box.frame`), at any width and beside a title. A ring may draw blanks and
+ * they keep the count, but an element with no ink on any ring never changes.
+ */
+export function marchingAnts({ step, every }) {
+    positiveSeconds("marchingAnts step", step);
+    if (!(Number.isInteger(every) && every > 1))
+        throw new RangeError(`marchingAnts every must be a whole number of cells above 1, got ${every}`);
+    const steps = stepped(step);
+    return ({ cells }) => {
+        const places = ringPlaces(cells);
+        if (!cells.some((cell) => places.has(cell.index) && inked(cell.glyph)))
+            return Animation.constant(AS_WRITTEN);
+        return steps((s) => (cell) => {
+            const at = places.get(cell.index);
+            if (at === undefined)
+                return cell.glyph;
+            // Bresenham's line over the ring: of `cells` places, the `gaps` where a running count crosses a whole number.
+            const gaps = Math.ceil(at.cells / every);
+            return (wrapped(at.place - s, at.cells) * gaps) % at.cells < gaps ? blank(cell.glyph) : cell.glyph;
+        }, AS_WRITTEN);
+    };
+}
+/** Each glyph effect's defaults, as first drawn in `examples/glyph-effects`. */
 export const GLYPH_DEFAULTS = {
     typewriter: { seconds: 2, ease: EASES.linear },
     scramble: { seconds: 2.5, ease: EASES["ease-in"] },
@@ -259,6 +326,7 @@ export const GLYPH_DEFAULTS = {
     wave: { step: 0.06, width: 3 },
     rain: { glyphs: "│╎", ascii: "|:", density: 0.06, step: 0.08, drift: 1, life: Number.POSITIVE_INFINITY },
     stars: { glyphs: "·+*", ascii: ".+*", density: 0.04, step: 1.5, drift: 0, life: 1 },
+    march: { step: 0.15, every: 3 },
 };
 /**
  * Every glyph effect in the catalogue by name, each made the one way: for an

package/dist/renderables/html-entities.d.ts

@@ -5,4 +5,4 @@
  * `html.entities.html5`; regenerate rather than edit.
  */
 /** The characters `name`, a reference's name without its `&` and `;`, stands for, if it names any. */
-export declare function namedReference(name: string): string | undefined;
+export declare function namedCharacterReference(name: string): string | undefined;

package/dist/renderables/html-entities.js

@@ -380,7 +380,7 @@ const NAMED_REFERENCES = {
     zwnj: "\u200c",
 };
 /** The characters `name`, a reference's name without its `&` and `;`, stands for, if it names any. */
-export function namedReference(name) {
+export function namedCharacterReference(name) {
     // An own key only: `constructor` names nothing here, whatever the prototype holds.
     return Object.hasOwn(NAMED_REFERENCES, name) ? NAMED_REFERENCES[name] : undefined;
 }

package/dist/renderables/lifecycle.d.ts

@@ -23,15 +23,14 @@
  * them with its hold at the frame's time (`placedRender`). The exit is
  * drawn over whatever the arrival draws, so an element told to leave while
  * it is still arriving leaves from where it is, never shown whole first —
- * though a colour exit is spread over the cells each frame shows, so a cell
+ * though a color exit is spread over the cells each frame shows, so a cell
  * the arrival adds can move one already leaving back toward whole
  * (`ownChange`, `./effects.ts`). [LAW:dataflow-not-control-flow]
  *
- * A half draws the element through a colour transition (`throughColors`, a
+ * A half draws the element through a color transition (`throughColors`, a
  * `fadeIn`) or a glyph one (`throughGlyphs`, a `typewriter`): each binds its
- * transition to the one wrapper that draws it, and to what that wrapper
- * needs — a theme for colours, nothing for glyphs — so nothing here asks which
- * kind a half is, and a line can type itself in and dissolve out. A half
+ * transition to the one wrapper that draws it, so nothing here asks which kind
+ * a half is, and a line can type itself in and dissolve out. A half
  * written by hand is any function of that shape — an arrival that slides the
  * element in, which no effect draws. An exit is a half that ends with nothing
  * drawn — `dissolveOut`, `backspace`, `scrambleOut` — so the element has
@@ -43,7 +42,6 @@
  * backwards — it draws nothing too, but is not gone.
  */
 import { Animation } from "../core/animation.js";
-import type { TerminalTheme } from "../core/color.js";
 import type { Renderable } from "../core/protocol.js";
 import type { Transition } from "./effects.js";
 import type { GlyphTransition } from "./glyph-effects.js";
@@ -59,13 +57,13 @@ import type { GlyphTransition } from "./glyph-effects.js";
  * `throughColors` and `throughGlyphs` lend one the transition's schedule.
  */
 export type Half = (element: Renderable, key: string) => Animation<Renderable>;
-/** `transition`'s colours drawn over an element on `theme`, whose ground it arrives from and leaves to. */
-export declare function throughColors(transition: Transition, theme: TerminalTheme): Half;
-/** `transition`'s glyphs drawn over an element, at every depth, with no colour too. */
+/** `transition`'s colors drawn over an element, arriving from and leaving to the ground of the terminal the frame is drawn on. */
+export declare function throughColors(transition: Transition): Half;
+/** `transition`'s glyphs drawn over an element, at every depth, with no color too. */
 export declare function throughGlyphs(transition: GlyphTransition): Half;
 /** How an element arrives and leaves, and what it is named for their seeds. */
 export interface LifecycleOptions {
-    /** The half it arrives through — `throughColors(fadeIn(curve, z), theme)`. */
+    /** The half it arrives through — `throughColors(fadeIn(curve, z))`. */
     readonly enter: Half;
     /** The half it leaves through — `throughGlyphs(scrambleOut(timing, z))`. */
     readonly exit: Half;

package/dist/renderables/lifecycle.js

@@ -23,15 +23,14 @@
  * them with its hold at the frame's time (`placedRender`). The exit is
  * drawn over whatever the arrival draws, so an element told to leave while
  * it is still arriving leaves from where it is, never shown whole first —
- * though a colour exit is spread over the cells each frame shows, so a cell
+ * though a color exit is spread over the cells each frame shows, so a cell
  * the arrival adds can move one already leaving back toward whole
  * (`ownChange`, `./effects.ts`). [LAW:dataflow-not-control-flow]
  *
- * A half draws the element through a colour transition (`throughColors`, a
+ * A half draws the element through a color transition (`throughColors`, a
  * `fadeIn`) or a glyph one (`throughGlyphs`, a `typewriter`): each binds its
- * transition to the one wrapper that draws it, and to what that wrapper
- * needs — a theme for colours, nothing for glyphs — so nothing here asks which
- * kind a half is, and a line can type itself in and dissolve out. A half
+ * transition to the one wrapper that draws it, so nothing here asks which kind
+ * a half is, and a line can type itself in and dissolve out. A half
  * written by hand is any function of that shape — an arrival that slides the
  * element in, which no effect draws. An exit is a half that ends with nothing
  * drawn — `dissolveOut`, `backspace`, `scrambleOut` — so the element has
@@ -47,11 +46,11 @@ import { firstReaching } from "../core/easing.js";
 import { Timeline } from "../core/timeline.js";
 import { Effected } from "./effect.js";
 import { GlyphEffected } from "./glyph-effect.js";
-/** `transition`'s colours drawn over an element on `theme`, whose ground it arrives from and leaves to. */
-export function throughColors(transition, theme) {
-    return (element, key) => scheduled(new Effected(element, transition.effect, { key, theme }), transition.schedule);
+/** `transition`'s colors drawn over an element, arriving from and leaving to the ground of the terminal the frame is drawn on. */
+export function throughColors(transition) {
+    return (element, key) => scheduled(new Effected(element, transition.effect, { key }), transition.schedule);
 }
-/** `transition`'s glyphs drawn over an element, at every depth, with no colour too. */
+/** `transition`'s glyphs drawn over an element, at every depth, with no color too. */
 export function throughGlyphs(transition) {
     return (element, key) => scheduled(new GlyphEffected(element, transition.effect, { key }), transition.schedule);
 }
@@ -60,14 +59,14 @@ export function throughGlyphs(transition) {
  * `schedule`, the transition's own, says: its frames with the one word on
  * when they change that the transition has and the wrapper lacks, whose own
  * answer is "now" until it is drawn. [LAW:one-source-of-truth] Reduced,
- * both are reduced together, as `onBeat` steps both: a one-shot's effect
+ * both are reduced together, as `sampleAndHold` steps both: a one-shot's effect
  * and its schedule each reduce to a cut at 0 (`transition`, `./effects.ts`).
  */
 function scheduled(placed, schedule) {
     return Animation.of({
         at: (t) => placed.at(t),
-        nextChange: (t) => schedule.nextChange(t),
-        lastChange: (t) => schedule.lastChange(t),
+        validUntil: (t) => schedule.validUntil(t),
+        validFrom: (t) => schedule.validFrom(t),
         reduced: () => scheduled(placed.reduced(), schedule.reduced()),
     });
 }
@@ -107,7 +106,7 @@ function doneAt(half, start) {
  */
 function ending(half, role, key) {
     if (doneAt(half, 0) === Number.POSITIVE_INFINITY) {
-        throw new RangeError(`lifecycle "${key}": the ${role} half never ends: its animation never says it has stopped changing (Animation.done). An Effected or GlyphEffected on its own does not; throughColors(transition, theme) and throughGlyphs(transition) lend one the transition's schedule`);
+        throw new RangeError(`lifecycle "${key}": the ${role} half never ends: its animation never says it has stopped changing (Animation.done). An Effected or GlyphEffected on its own does not; throughColors(transition) and throughGlyphs(transition) lend one the transition's schedule`);
     }
     return half;
 }
@@ -121,7 +120,7 @@ function life(element, options, halves, entered, left) {
     const arriving = Timeline.run(Timeline.play(entered), arrival);
     // What the element draws by `t` if it is not leaving: arriving through `enter`, then itself.
     const shown = (t) => (t < arrived ? arrival.at(t - entered) : element);
-    const held = (schedule, t) => ({ last: schedule.lastChange(t), next: schedule.nextChange(t) });
+    const held = (schedule, t) => ({ last: schedule.validFrom(t), next: schedule.validUntil(t) });
     // [LAW:one-source-of-truth] Each phase's frame and its hold, side by side, so the two cannot disagree.
     // The frames say nothing of when they change — the hold does, stamped where the lifecycle is placed.
     const phase = (t) => {
@@ -147,16 +146,16 @@ function life(element, options, halves, entered, left) {
             : { frame: NOTHING, last: left, next: t < goneAt ? goneAt : Number.POSITIVE_INFINITY };
     const present = Animation.of({
         at: (t) => there(t).frame,
-        nextChange: (t) => there(t).next,
-        lastChange: (t) => there(t).last,
+        validUntil: (t) => there(t).next,
+        validFrom: (t) => there(t).last,
         reduced: () => present,
     });
     return Animation.of({
         entered,
         left,
         at: (t) => phase(t).frame,
-        nextChange: (t) => phase(t).next,
-        lastChange: (t) => phase(t).last,
+        validUntil: (t) => phase(t).next,
+        validFrom: (t) => phase(t).last,
         // Reduced, the element is there from when it entered until it is told to leave: no arrival or exit to show, and the times kept.
         reduced: () => present,
         // [LAW:one-source-of-truth] The moment `phase` draws nothing from, so an element not yet told to leave is never asked its exit at -Infinity.

package/dist/renderables/live.d.ts

@@ -14,7 +14,7 @@
  * when the display stops, as Rich's `Live` does.
  *
  * Live is not built on `App`, though both take a terminal, paint a frame over
- * the last and hand the terminal back. That much is the `Painter`'s, and both
+ * the last and hand the terminal back. That much is the `Renderer`'s, and both
  * hold one. The rest differs in who owns what. An `App` owns its terminal: it
  * starts and stops a `TerminalHost`, sets raw mode, reads keys and pointers,
  * suspends, and builds its own `Console` from the host. A `Live` owns none of
@@ -35,7 +35,7 @@ export interface LiveOptions {
      * positive and finite, fractional included. The next frame comes a frame
      * interval after the last one drawn, a `refresh()` of your own included,
      * or sooner when that frame's content says it changes sooner
-     * (`Segment.nextChange`).
+     * (`Segment.validUntil`).
      */
     refreshPerSecond?: number;
     /** What the auto-refresh waits on. The platform's, unless given. */

package/dist/renderables/live.js

@@ -14,7 +14,7 @@
  * when the display stops, as Rich's `Live` does.
  *
  * Live is not built on `App`, though both take a terminal, paint a frame over
- * the last and hand the terminal back. That much is the `Painter`'s, and both
+ * the last and hand the terminal back. That much is the `Renderer`'s, and both
  * hold one. The rest differs in who owns what. An `App` owns its terminal: it
  * starts and stops a `TerminalHost`, sets raw mode, reads keys and pointers,
  * suspends, and builds its own `Console` from the host. A `Live` owns none of
@@ -27,7 +27,7 @@
 import { frameRate, systemClock } from "../core/clock.js";
 import { Console } from "../core/console.js";
 import { Segment } from "../core/segment.js";
-import { FinalFramePainter, SurfacePainter } from "../core/paint.js";
+import { FinalFrameRenderer, SurfaceRenderer } from "../core/paint.js";
 import { fitHeight, render } from "../core/protocol.js";
 import { Timeline } from "../core/timeline.js";
 import { drawView, frameNow, hostView, undrawn } from "../core/view.js";
@@ -71,8 +71,8 @@ export class Live {
         // The final frame is a print, as in Rich, so a recording or a capture
         // holds it with everything else the console wrote.
         this._painter = this._console.isInteractive
-            ? new SurfacePainter(options?.altScreen ? "alternate" : "inline", (bytes) => void this._console.file.write(bytes))
-            : new FinalFramePainter((frame) => this._console.print(linesOf(frame)));
+            ? new SurfaceRenderer(options?.altScreen ? "alternate" : "inline", (bytes) => void this._console.file.write(bytes))
+            : new FinalFrameRenderer((frame) => this._console.print(linesOf(frame)));
     }
     /**
      * The console to print through while this Live runs: what it prints lands
@@ -177,7 +177,7 @@ export class Live {
         this._wake(held, said ?? undrawn(this._clock.now()));
     }
     // Arm the one wait for the next auto-refresh frame while `held`, from what
-    // the frame says: at its `nextChange` when it holds until a moment sooner
+    // the frame says: at its `validUntil` when it holds until a moment sooner
     // than the rate, and at the rate otherwise — every view is drawn from state
     // that may change without saying so, which the auto-refresh polls, as
     // Rich's does, a paused timeline's included. Every moment is measured from the
@@ -185,11 +185,11 @@ export class Live {
     // does not stretch by what a frame cost to draw, and a change that fell
     // due while it was drawn is drawn at once (`Clock.at` fires now for a time
     // already past).
-    _wake(held, { t, nextChange }) {
+    _wake(held, { t, validUntil }) {
         this._waking.get()?.stop();
         this._waking.set(undefined);
         const rate = t + this._rate.interval;
-        const at = nextChange <= t ? rate : Math.min(nextChange, rate);
+        const at = validUntil <= t ? rate : Math.min(validUntil, rate);
         if (!this._autoRefresh)
             return;
         // No caller is on the stack to run `stop()` for a frame that throws

package/dist/renderables/markdown-parse.js

@@ -13,7 +13,7 @@
  */
 import { linkHref, normalizeLinkText } from "./markdown-url.js";
 import { PY_WHITESPACE, pyStrip } from "./python-space.js";
-import { namedReference } from "./html-entities.js";
+import { namedCharacterReference } from "./html-entities.js";
 import { pattern } from "../core/pattern.js";
 /** A line of the source as the top level holds it. */
 function sourceLine(text) {
@@ -807,7 +807,7 @@ function referenceAt(text, i) {
     const named = matchAt(NAMED_REFERENCE, text, i);
     if (!named)
         return undefined;
-    const chars = namedReference(named[1]);
+    const chars = namedCharacterReference(named[1]);
     return chars === undefined ? undefined : { kind: "text", text: chars, end: i + named[0].length };
 }
 /**
@@ -821,7 +821,7 @@ function unescapeAll(text) {
         if (escaped !== undefined)
             return escaped;
         const numeric = DESTINATION_NUMERIC.exec(whole);
-        const chars = numeric ? referencedCharacter(referencedCode(numeric[1])) : namedReference(whole.slice(1, -1));
+        const chars = numeric ? referencedCharacter(referencedCode(numeric[1])) : namedCharacterReference(whole.slice(1, -1));
         return chars ?? whole;
     });
 }

package/dist/renderables/markdown.js

@@ -8,6 +8,7 @@
  * followed: HTML, a block of it or a tag inline, is drawn as Rich draws it,
  * not at all.
  */
+import { withoutExplicit } from "../core/bidi.js";
 import { cellCount, cellLen } from "../core/cells.js";
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
@@ -107,7 +108,8 @@ function appendInline(result, inlines, settings, options) {
     };
     const write = (text, styles) => {
         const start = result.length;
-        result.append(text);
+        // Each inline node is its own content, so what it holds open ends with it.
+        result.append(new RichText(text));
         paint(start, styles);
     };
     const enter = (styles) => {
@@ -156,7 +158,7 @@ function appendInline(result, inlines, settings, options) {
                 write("\n");
                 break;
             case "code":
-                write(inline.code, [groundedStyle(options, resolveStyle(options, settings.inlineCodeStyle))]);
+                write(withoutExplicit(inline.code), [groundedStyle(options, resolveStyle(options, settings.inlineCodeStyle))]);
                 break;
             case "html":
                 kbd(inline.content);

package/dist/renderables/panel.js

@@ -1,6 +1,7 @@
 /**
  * Panel — a bordered box that wraps content, with optional title and subtitle.
  */
+import { labeled } from "../core/orient.js";
 import { cellLen, setCellSize, asCellCol, cellCount } from "../core/cells.js";
 import { Segment } from "../core/segment.js";
 import { NULL_STYLE } from "../core/style.js";
@@ -39,13 +40,14 @@ function borderTitle(label, options) {
 }
 /**
  * The style of text set into a border — title, subtitle and accessory alike:
- * its own laid over the border's, the one rule for "what colour is the title
+ * its own laid over the border's, the one rule for "what color is the title
  * text in". Laid over rather than in place of it, as Rich's `stylize_before`
  * does, because the border's style carries the panel's own: a title that
- * replaced it cut a hole in the panel's background on the top row.
+ * replaced it cut a hole in the panel's background on the top row. The text
+ * is set into the frame and is not of it.
  */
 function borderTextStyle(border, own) {
-    return own.isNull ? border : (border ?? NULL_STYLE).add(own);
+    return border.add(own).withBoxFrame(undefined);
 }
 /**
  * A border row: the opening corner, the rule across `span` cells with `label`
@@ -129,7 +131,7 @@ export class Panel {
         // and the content is rendered on top of it. Applied to the padding alone,
         // "white on dark_blue" drew a blue ring with a hole where the text was.
         const borderStyle = getStyle(options, this.style).add(getStyle(options, this.borderStyle));
-        const border = borderStyle.isNull ? undefined : borderStyle;
+        const border = box.frame(borderStyle);
         const geometry = layoutPanel(this._getPanelWidth(options));
         const bodyLines = this._renderBody(options, geometry.spanWidth);
         yield* this._renderTopBorder(options, box, geometry, border);
@@ -241,7 +243,7 @@ export class Panel {
         const corner = box.bottom.right.repeat(geometry.right);
         const [close, afterAccessory] = accessoryText === "" ? [corner, ""] : ["", corner];
         yield* borderRow(options, box.bottom, geometry, geometry.spanWidth - cellLen(accessoryText), this._subtitleLabel, subtitleStyle, border, close);
-        yield new Segment(accessoryText, borderTextStyle(border, accessoryOwn));
+        yield* labeled("", accessoryText, "", borderTextStyle(border, accessoryOwn), options.textOrder);
         yield new Segment(afterAccessory, border);
         yield Segment.line();
     }

package/dist/renderables/progress.d.ts

@@ -89,7 +89,7 @@ export declare class BarColumn implements ProgressColumn {
      * toward, pulses, and a pulse draws no fill. Otherwise the bar is the
      * task's `fill` drawn at the frame's time, every cell stamped with when the
      * fill next moves, so a host draws while it eases and the bar asks for
-     * nothing once it lands. Its colour is the task's: an ease that overshoots
+     * nothing once it lands. Its color is the task's: an ease that overshoots
      * the total does not finish the bar, and one that dips back does not
      * unfinish it.
      */

package/dist/renderables/progress.js

@@ -113,7 +113,7 @@ export class BarColumn {
      * toward, pulses, and a pulse draws no fill. Otherwise the bar is the
      * task's `fill` drawn at the frame's time, every cell stamped with when the
      * fill next moves, so a host draws while it eases and the bar asks for
-     * nothing once it lands. Its colour is the task's: an ease that overshoots
+     * nothing once it lands. Its color is the task's: an ease that overshoots
      * the total does not finish the bar, and one that dips back does not
      * unfinish it.
      */

package/dist/renderables/progressBar.d.ts

@@ -44,9 +44,9 @@ export declare class ProgressBar implements Renderable, Measurable {
     set finished(value: boolean | undefined);
     render(options: RenderOptions): Iterable<Segment>;
     /**
-     * The shimmer over this bar's back colour as `Effected` sees it drawn at
-     * `depth`, toward `bar.pulse`. A bar has no words to keep legible, so its
-     * back takes the whole of the light.
+     * The shimmer over this bar's back color as `Effected` sees it drawn,
+     * toward `bar.pulse`. A bar has no words to keep legible, so its back takes
+     * the whole of the light.
      */
     private pulseEffect;
     /** Rich 9d8f9a3 `__rich_console__`: the fill is counted in half cells, and a total of zero is a bar already full. */