@promptctl/rich-js 0.27.0 → 0.29.0

package/dist/renderables/embed.d.ts

@@ -107,7 +107,7 @@ export declare function cutLabel(text: RichText, width: number, marker: string):
  * `Text` are not, and markup that styles nothing is — it reads as empty text,
  * but the string that holds it is not empty.
  */
-export declare function present(content: string | RichText | undefined): content is string | RichText;
+export declare function mounted(content: string | RichText | undefined): content is string | RichText;
 /**
  * A label's text as one line of segments at its natural width, its own styles
  * laid over `base`. The caller has already cut it to its room, so it leaves as

package/dist/renderables/embed.js

@@ -159,7 +159,7 @@ export function cutLabel(text, width, marker) {
  * `Text` are not, and markup that styles nothing is — it reads as empty text,
  * but the string that holds it is not empty.
  */
-export function present(content) {
+export function mounted(content) {
     // Asked of what the content is rather than of what it is not, so a `null`
     // from untyped JS is no content, as Rich's `None` is.
     return typeof content === "string" ? content !== "" : content instanceof RichText && content.plain !== "";
@@ -180,5 +180,5 @@ export function drawLabel(text, options, base) {
  * label, which still opens a gap in the rule, as Rich's does.
  */
 export function inlineLabel(content) {
-    return present(content) ? new InlineLabel(content) : undefined;
+    return mounted(content) ? new InlineLabel(content) : undefined;
 }

package/dist/renderables/flexStrip.d.ts

@@ -2,10 +2,10 @@
  * FlexStrip — wrap-to-width horizontal layout for `StyledRenderable` items.
  *
  * Pack as many items as fit on a line, then break and continue. Each line is
- * an independent sub-strip: optional `Joiner` end-caps fire at every line
+ * an independent sub-strip: optional `Separator` end-caps fire at every line
  * boundary (not just the strip's first/last position), so a line break looks
- * the same as an endpoint to the joiner. Composes with the Strip + Joiner
- * primitive in `core/strip` — same `Joiner` protocol, no new join semantics.
+ * the same as an endpoint to the joiner. Composes with the Strip + Separator
+ * primitive in `core/strip` — same `Separator` protocol, no new join semantics.
  *
  * [LAW:dataflow-not-control-flow] The pack walk is the same shape every
  * render: measure each item, render every joiner form (start-cap, end-cap,
@@ -17,11 +17,11 @@
  */
 import { Segment } from "../core/segment.js";
 import type { Renderable, Measurable, RenderOptions } from "../core/protocol.js";
-import { type Joiner, type StyledRenderable } from "../core/strip.js";
+import { type Separator, type StyledRenderable } from "../core/strip.js";
 export type FlexAlign = "left" | "center" | "right" | "justify";
 export interface FlexStripOptions<T extends StyledRenderable> {
-    /** Joiner used between items within a line, and at line endpoints. */
-    joiner?: Joiner<T>;
+    /** Separator used between items within a line, and at line endpoints. */
+    separator?: Separator<T>;
     /** Cells of horizontal space inserted on each side of an inter-item joiner (default 0). */
     gap?: number;
     /** Line alignment when packed items don't fill the available width (default "left"). */
@@ -29,7 +29,7 @@ export interface FlexStripOptions<T extends StyledRenderable> {
 }
 export declare class FlexStrip<T extends StyledRenderable = StyledRenderable> implements Renderable, Measurable {
     readonly items: readonly T[];
-    readonly joiner: Joiner<T> | undefined;
+    readonly separator: Separator<T> | undefined;
     readonly gap: number;
     readonly align: FlexAlign;
     constructor(items: readonly T[], options?: FlexStripOptions<T>);

package/dist/renderables/flexStrip.js

@@ -2,10 +2,10 @@
  * FlexStrip — wrap-to-width horizontal layout for `StyledRenderable` items.
  *
  * Pack as many items as fit on a line, then break and continue. Each line is
- * an independent sub-strip: optional `Joiner` end-caps fire at every line
+ * an independent sub-strip: optional `Separator` end-caps fire at every line
  * boundary (not just the strip's first/last position), so a line break looks
- * the same as an endpoint to the joiner. Composes with the Strip + Joiner
- * primitive in `core/strip` — same `Joiner` protocol, no new join semantics.
+ * the same as an endpoint to the joiner. Composes with the Strip + Separator
+ * primitive in `core/strip` — same `Separator` protocol, no new join semantics.
  *
  * [LAW:dataflow-not-control-flow] The pack walk is the same shape every
  * render: measure each item, render every joiner form (start-cap, end-cap,
@@ -47,12 +47,12 @@ function computeSlotFills(align, isFinalLine, spare, itemCount) {
 }
 export class FlexStrip {
     items;
-    joiner;
+    separator;
     gap;
     align;
     constructor(items, options) {
         this.items = items;
-        this.joiner = options?.joiner;
+        this.separator = options?.separator;
         this.gap = options?.gap ?? 0;
         this.align = options?.align ?? "left";
     }
@@ -62,7 +62,7 @@ export class FlexStrip {
             return;
         const maxWidth = Math.max(1, options.maxWidth);
         const gap = this.gap;
-        const joiner = this.joiner;
+        const joiner = this.separator;
         // Pre-render every item and every joiner form we might need. Doing this
         // up-front turns packing into a pure data computation over widths.
         const itemBlocks = items.map((it) => renderToBlock(drawItem(it), options));
@@ -178,24 +178,24 @@ export class FlexStrip {
         let maximum = 0;
         for (let i = 0; i < items.length; i++) {
             const itemWidth = renderToBlock(items[i], options).width;
-            const sc = this.joiner
-                ? renderToBlock(drawJoin(this.joiner, null, items[i], { index: i }), options).width
+            const sc = this.separator
+                ? renderToBlock(drawJoin(this.separator, null, items[i], { index: i }), options).width
                 : 0;
-            const ec = this.joiner
-                ? renderToBlock(drawJoin(this.joiner, items[i], null, { index: i + 1 }), options).width
+            const ec = this.separator
+                ? renderToBlock(drawJoin(this.separator, items[i], null, { index: i + 1 }), options).width
                 : 0;
             minimum = Math.max(minimum, itemWidth + sc + ec);
             maximum += itemWidth;
             if (i > 0) {
                 maximum += this.gap * 2;
-                if (this.joiner) {
-                    maximum += renderToBlock(drawJoin(this.joiner, items[i - 1], items[i], { index: i }), options).width;
+                if (this.separator) {
+                    maximum += renderToBlock(drawJoin(this.separator, items[i - 1], items[i], { index: i }), options).width;
                 }
             }
         }
-        if (this.joiner) {
-            maximum += renderToBlock(drawJoin(this.joiner, null, items[0], { index: 0 }), options).width;
-            maximum += renderToBlock(drawJoin(this.joiner, items[items.length - 1], null, { index: items.length }), options).width;
+        if (this.separator) {
+            maximum += renderToBlock(drawJoin(this.separator, null, items[0], { index: 0 }), options).width;
+            maximum += renderToBlock(drawJoin(this.separator, items[items.length - 1], null, { index: items.length }), options).width;
         }
         return { minimum, maximum };
     }

package/dist/renderables/frames.d.ts

@@ -3,7 +3,7 @@
  * for its own seconds and looping, drawn as the one in progress at a time
  * the host hands in.
  *
- * An effect moves a cell's colours and may never change a glyph
+ * An effect moves a cell's colors and may never change a glyph
  * (`./effect.ts`: "It changes how cells look, never which cells exist or who
  * drew them"). A frame is the other kind of motion — what the element shows
  * changes — so it is its own primitive and not a wider `Effect`, and the two
@@ -30,7 +30,7 @@
  * placed sequence stamps them with its hold (`Style.hold`,
  * `placedRender` in `core/animation.ts`), which rides up
  * through every container to whoever holds the composed frame
- * (`Segment.nextChange`), so a host drawing at `t` knows when to draw again,
+ * (`Segment.validUntil`), so a host drawing at `t` knows when to draw again,
  * and one drawing slower than the frames turn can see that it is skipping
  * them. Nothing an animation's `at` returns carries a stamp of its own: the
  * stamp is put on where the frame's time is known.
@@ -45,8 +45,8 @@
  * children do.
  */
 import { Animation } from "../core/animation.js";
-import { type Beat } from "../core/easing.js";
-import type { Motion, RenderOptions } from "../core/protocol.js";
+import { type StepSequence } from "../core/easing.js";
+import type { RenderOptions } from "../core/protocol.js";
 import type { Segment } from "../core/segment.js";
 import { RichText } from "../core/text.js";
 /** One frame: what it shows, and how long it is held, in seconds. */
@@ -57,7 +57,7 @@ export interface Frame {
 /** A sequence of frames prepared to be drawn: built once, asked for the frame at a time. */
 export declare class FrameSequence implements Animation<RichText> {
     /** Which frame is in progress when: the holds are the frames' seconds, in order. */
-    readonly beat: Beat;
+    readonly stepSequence: StepSequence;
     /** The width every frame draws at: the widest frame's, in cells. */
     readonly width: number;
     private readonly _shown;
@@ -70,9 +70,9 @@ export declare class FrameSequence implements Animation<RichText> {
      */
     at(t: number): RichText;
     /** When the frame in progress at `t` gives way to the next: the beat's answer, its holds being the frames'. */
-    nextChange(t: number): number;
+    validUntil(t: number): number;
     /** When the frame in progress at `t` began: the beat's answer. */
-    lastChange(t: number): number;
+    validFrom(t: number): number;
     /** The frames with their motion taken out: the beat's first frame, held, a copy as `at`'s is. */
     reduced(): Animation<RichText>;
     render(options: RenderOptions): Iterable<Segment>;
@@ -86,12 +86,3 @@ export declare class FrameSequence implements Animation<RichText> {
         maximum: number;
     };
 }
-/**
- * The text frame `animation` shows at host time `t` under `motion`
- * (`shownAt`), copied and stamped with the hold it is in there: what the
- * template `frames` and `glyphs` functions, which know the reader's
- * preference before any render, splice into a line. The stamp is on the
- * base style, which an empty text still draws as its one piece of no width,
- * and on a copy, since an animation may hand back the one `RichText` it holds.
- */
-export declare function textFrameAt(animation: Animation<RichText>, t: number, motion: Motion): RichText;

package/dist/renderables/frames.js

@@ -3,7 +3,7 @@
  * for its own seconds and looping, drawn as the one in progress at a time
  * the host hands in.
  *
- * An effect moves a cell's colours and may never change a glyph
+ * An effect moves a cell's colors and may never change a glyph
  * (`./effect.ts`: "It changes how cells look, never which cells exist or who
  * drew them"). A frame is the other kind of motion — what the element shows
  * changes — so it is its own primitive and not a wider `Effect`, and the two
@@ -30,7 +30,7 @@
  * placed sequence stamps them with its hold (`Style.hold`,
  * `placedRender` in `core/animation.ts`), which rides up
  * through every container to whoever holds the composed frame
- * (`Segment.nextChange`), so a host drawing at `t` knows when to draw again,
+ * (`Segment.validUntil`), so a host drawing at `t` knows when to draw again,
  * and one drawing slower than the frames turn can see that it is skipping
  * them. Nothing an animation's `at` returns carries a stamp of its own: the
  * stamp is put on where the frame's time is known.
@@ -44,20 +44,19 @@
  * binding has no console for, so the frame arrives read, as a `Group`'s
  * children do.
  */
-import { Animation, holdOf, placedRender, shownAt, stamp } from "../core/animation.js";
-import { beat } from "../core/easing.js";
-import { layerStyle } from "../core/style.js";
+import { Animation, placedRender } from "../core/animation.js";
+import { stepSequence } from "../core/easing.js";
 import { setIntoLine } from "./embed.js";
 /** A sequence of frames prepared to be drawn: built once, asked for the frame at a time. */
 export class FrameSequence {
     /** Which frame is in progress when: the holds are the frames' seconds, in order. */
-    beat;
+    stepSequence;
     /** The width every frame draws at: the widest frame's, in cells. */
     width;
     // Each frame as it draws: a line fragment padded to `width`, made once.
     _shown;
     constructor(frames) {
-        this.beat = beat(frames.map((frame) => frame.seconds));
+        this.stepSequence = stepSequence(frames.map((frame) => frame.seconds));
         const texts = frames.map((frame) => setIntoLine(frame.text.copy()));
         const widths = texts.map((text) => text.cellLength);
         this.width = Math.max(...widths);
@@ -76,19 +75,19 @@ export class FrameSequence {
      * refuses a `t` that is not finite.
      */
     at(t) {
-        return this._shown[this.beat.at(t)].copy();
+        return this._shown[this.stepSequence.at(t)].copy();
     }
     /** When the frame in progress at `t` gives way to the next: the beat's answer, its holds being the frames'. */
-    nextChange(t) {
-        return this.beat.nextChange(t);
+    validUntil(t) {
+        return this.stepSequence.validUntil(t);
     }
     /** When the frame in progress at `t` began: the beat's answer. */
-    lastChange(t) {
-        return this.beat.lastChange(t);
+    validFrom(t) {
+        return this.stepSequence.validFrom(t);
     }
     /** The frames with their motion taken out: the beat's first frame, held, a copy as `at`'s is. */
     reduced() {
-        return Animation.map(this.beat.reduced(), (i) => this._shown[i].copy());
+        return Animation.map(this.stepSequence.reduced(), (i) => this._shown[i].copy());
     }
     render(options) {
         return placedRender(this, options);
@@ -102,17 +101,3 @@ export class FrameSequence {
         return { minimum: this.width, maximum: this.width };
     }
 }
-/**
- * The text frame `animation` shows at host time `t` under `motion`
- * (`shownAt`), copied and stamped with the hold it is in there: what the
- * template `frames` and `glyphs` functions, which know the reader's
- * preference before any render, splice into a line. The stamp is on the
- * base style, which an empty text still draws as its one piece of no width,
- * and on a copy, since an animation may hand back the one `RichText` it holds.
- */
-export function textFrameAt(animation, t, motion) {
-    const shown = shownAt(animation, t, motion);
-    const stamped = shown.value.copy();
-    stamped.style = layerStyle(stamped.style, stamp(holdOf(shown, t)));
-    return stamped;
-}

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

@@ -3,8 +3,8 @@
  * glyph effect at a moment `t`: the glyph half of `Effected` (`./effect.ts`),
  * built to its contract.
  *
- * A glyph effect is the colour effect's two-stage shape with a glyph where
- * the colours were: for the cells an element draws in a frame, an
+ * A glyph effect is the color effect's two-stage shape with a glyph where
+ * the colors were: for the cells an element draws in a frame, an
  * `Animation` (`../core/animation.ts`) of what is done to them. The first
  * stage is handed every cell once a frame (`GlyphCell`), blanks included —
  * rain and stars live there — and whether the output draws ASCII alone
@@ -14,15 +14,15 @@
  * scramble, a wave of case changes and particles on blank cells are all this
  * one shape (`./glyph-effects.ts`) [LAW:one-type-per-behavior].
  *
- * Colour and glyph are not two kinds of animation: each is an `Animation` of
+ * Color and glyph are not two kinds of animation: each is an `Animation` of
  * a per-cell map, and they differ only in what a cell is mapped to. The
- * wrappers are two because the stages are handed different facts. A colour
- * effect is settled against the depth, the terminal and the colours of the
- * words (`Drawn`), and with no colour output there is nothing for it to
+ * wrappers are two because the stages are handed different facts. A color
+ * effect is settled against the depth, the terminal and the colors of the
+ * words (`Drawn`), and with no color output there is nothing for it to
  * change. A glyph effect needs none of that, and is written at every depth,
- * with no colour too. Over one element the two compose by nesting:
- * `new Effected(new GlyphEffected(child, glyphs, …), colours, …)` moves the
- * colours of the glyphs the glyph effect left, since each wrapper measures
+ * with no color too. Over one element the two compose by nesting:
+ * `new Effected(new GlyphEffected(child, glyphs, …), colors, …)` moves the
+ * colors of the glyphs the glyph effect left, since each wrapper measures
  * what its child drew.
  *
  * A `GlyphEffected` is the element under its glyph effect over time, an
@@ -51,11 +51,11 @@
  * Positions are the child's own: row and column count from the top-left of
  * what the child drew.
  */
-import { Animation } from "../core/animation.js";
+import { Animation, type Reads } from "../core/animation.js";
 import type { Measurable, Renderable, RenderOptions } from "../core/protocol.js";
 import { Segment } from "../core/segment.js";
 import { type RichText } from "../core/text.js";
-import { type Moved, type Placed } from "./effect.js";
+import { type Placed } from "./effect.js";
 /**
  * A cell of the element a glyph effect wraps: the glyph it shows, where it
  * sits and who drew it, its place in reading order among the cells handed
@@ -85,7 +85,7 @@ export interface DrawnGlyphs {
 }
 /**
  * For an element drawing `drawn`, the animation of what is done to its
- * glyphs. Its `nextChange` is when the frame next changes, as an `Effect`'s is.
+ * glyphs. Its `validUntil` is when the frame next changes, as an `Effect`'s is.
  */
 export type GlyphEffect = (drawn: DrawnGlyphs) => Animation<GlyphFrame>;
 export interface GlyphEffectedOptions {
@@ -95,20 +95,18 @@ export interface GlyphEffectedOptions {
 /**
  * A `GlyphEffected` at `t`, or an element through a glyph effect at a time an
  * animation's `at` was handed: `renderable` with its cells' glyphs passed
- * through `effect` at `t`, saying nothing of when that changes, as a
- * `Recolored` is (`./effect.ts`). [LAW:one-type-per-behavior]
+ * through `effect` at `t`, telling the hold it drew in as a `Recolored` does
+ * (`RenderOptions.onReads`, `./effect.ts`). [LAW:one-type-per-behavior]
  */
 export declare class Reglyphed implements Renderable, Measurable {
     readonly renderable: Renderable;
     readonly effect: GlyphEffect;
-    readonly t: number;
+    private readonly _t;
     readonly key: string;
     constructor(renderable: Renderable, effect: GlyphEffect, options: GlyphEffectedOptions & {
         readonly t: number;
     });
     render(options: RenderOptions): Iterable<Segment>;
-    /** The frame the effect draws at `t`, and the hold it says that is in. */
-    moved(options: RenderOptions): Moved;
     measure(options: RenderOptions): {
         minimum: number;
         maximum: number;
@@ -116,9 +114,10 @@ export declare class Reglyphed implements Renderable, Measurable {
 }
 /**
  * `renderable` under a glyph effect over time, an `Animation<Renderable>`
- * as an `Effected` is (`./effect.ts`): its own answer is `t`, and placed,
- * its cells carry the glyph effect's exact hold at the frame's time and the
- * output's `asciiOnly`, under whatever the element already said.
+ * as an `Effected` is (`./effect.ts`): with nothing drawn its answer is `t`,
+ * and placed, on its own or as a part of any combinator, it says the glyph
+ * effect's exact hold at that time and the output's `asciiOnly`, which the
+ * frame's drawing told (`Reads`).
  */
 export declare class GlyphEffected implements Animation<Renderable> {
     readonly renderable: Renderable;
@@ -127,8 +126,8 @@ export declare class GlyphEffected implements Animation<Renderable> {
     constructor(renderable: Renderable, effect: GlyphEffect, options: GlyphEffectedOptions);
     /** The element through the glyph effect at `t`, unstamped. */
     at(t: number): Reglyphed;
-    nextChange(t: number): number;
-    lastChange(t: number): number;
+    validUntil(t: number, moves?: Reads): number;
+    validFrom(t: number, moves?: Reads): number;
     /** The element under the glyph effect with its motion taken out. */
     reduced(): GlyphEffected;
     /** Drawn at the frame's time, its cells stamped with the glyph effect's exact hold there. */
@@ -150,7 +149,7 @@ export declare class GlyphEffected implements Animation<Renderable> {
  * its every style and span, each moved to where its glyphs now sit, and a
  * frame that changes nothing hands the text back as it was. What it says of
  * when it changes is the effect's, unstamped: whoever draws it at a time
- * stamps it (`textFrameAt`).
+ * stamps it (`placed`), or marks it for the engine to (the template `glyphs`).
  */
 export declare function reglyphText(text: RichText, effect: GlyphEffect, options: {
     readonly key: string;

package/dist/renderables/glyph-effect.js

@@ -3,8 +3,8 @@
  * glyph effect at a moment `t`: the glyph half of `Effected` (`./effect.ts`),
  * built to its contract.
  *
- * A glyph effect is the colour effect's two-stage shape with a glyph where
- * the colours were: for the cells an element draws in a frame, an
+ * A glyph effect is the color effect's two-stage shape with a glyph where
+ * the colors were: for the cells an element draws in a frame, an
  * `Animation` (`../core/animation.ts`) of what is done to them. The first
  * stage is handed every cell once a frame (`GlyphCell`), blanks included —
  * rain and stars live there — and whether the output draws ASCII alone
@@ -14,15 +14,15 @@
  * scramble, a wave of case changes and particles on blank cells are all this
  * one shape (`./glyph-effects.ts`) [LAW:one-type-per-behavior].
  *
- * Colour and glyph are not two kinds of animation: each is an `Animation` of
+ * Color and glyph are not two kinds of animation: each is an `Animation` of
  * a per-cell map, and they differ only in what a cell is mapped to. The
- * wrappers are two because the stages are handed different facts. A colour
- * effect is settled against the depth, the terminal and the colours of the
- * words (`Drawn`), and with no colour output there is nothing for it to
+ * wrappers are two because the stages are handed different facts. A color
+ * effect is settled against the depth, the terminal and the colors of the
+ * words (`Drawn`), and with no color output there is nothing for it to
  * change. A glyph effect needs none of that, and is written at every depth,
- * with no colour too. Over one element the two compose by nesting:
- * `new Effected(new GlyphEffected(child, glyphs, …), colours, …)` moves the
- * colours of the glyphs the glyph effect left, since each wrapper measures
+ * with no color too. Over one element the two compose by nesting:
+ * `new Effected(new GlyphEffected(child, glyphs, …), colors, …)` moves the
+ * colors of the glyphs the glyph effect left, since each wrapper measures
  * what its child drew.
  *
  * A `GlyphEffected` is the element under its glyph effect over time, an
@@ -51,44 +51,40 @@
  * Positions are the child's own: row and column count from the top-left of
  * what the child drew.
  */
-import { Animation, frameTimeOf, holdOf, shownAt, stampFrame } from "../core/animation.js";
+import { Animation, placedRender, shownAt } from "../core/animation.js";
 import { cellLen, graphemes } from "../core/cells.js";
 import { Measurement } from "../core/measure.js";
 import { render } from "../core/protocol.js";
 import { Segment } from "../core/segment.js";
 import { finiteTime } from "../core/easing.js";
-import { stripControlChars } from "../core/text.js";
-import { cellSeed, walkGlyphs } from "./effect.js";
+import { sanitized } from "../core/text.js";
+import { cellSeed, validityOver, walkGlyphs } from "./effect.js";
 import { pattern } from "../core/pattern.js";
 /**
  * A `GlyphEffected` at `t`, or an element through a glyph effect at a time an
  * animation's `at` was handed: `renderable` with its cells' glyphs passed
- * through `effect` at `t`, saying nothing of when that changes, as a
- * `Recolored` is (`./effect.ts`). [LAW:one-type-per-behavior]
+ * through `effect` at `t`, telling the hold it drew in as a `Recolored` does
+ * (`RenderOptions.onReads`, `./effect.ts`). [LAW:one-type-per-behavior]
  */
 export class Reglyphed {
     renderable;
     effect;
-    t;
+    _t;
     key;
     constructor(renderable, effect, options) {
         this.renderable = renderable;
         this.effect = effect;
-        this.t = finiteTime("GlyphEffected", options.t);
+        this._t = finiteTime("GlyphEffected", options.t);
         this.key = options.key;
     }
     render(options) {
-        return this.moved(options).segments;
-    }
-    /** The frame the effect draws at `t`, and the hold it says that is in. */
-    moved(options) {
         const segments = [...render(this.renderable, options)];
         const { placed, cells } = placeGlyphs(segments, this.key);
         const animation = this.effect({ cells, asciiOnly: options.asciiOnly === true });
-        const frame = shownAt(animation, this.t, options);
+        const frame = shownAt(animation, this._t, options);
         const shown = showGlyphs(placed, frame.value);
-        const changed = segments.map((segment, i) => shown[i].every((text, j) => text === placed[i][j].glyph) ? segment : new Segment(shown[i].join(""), segment.style));
-        return { segments: changed, hold: holdOf(frame, this.t) };
+        options.onReads?.(this._t, this.key, validityOver(cells.length > 0, frame, this._t));
+        return segments.map((segment, i) => (shown[i].every((text, j) => text === placed[i][j].glyph) ? segment : new Segment(shown[i].join(""), segment.style)));
     }
     measure(options) {
         return Measurement.get(options, this.renderable);
@@ -96,9 +92,10 @@ export class Reglyphed {
 }
 /**
  * `renderable` under a glyph effect over time, an `Animation<Renderable>`
- * as an `Effected` is (`./effect.ts`): its own answer is `t`, and placed,
- * its cells carry the glyph effect's exact hold at the frame's time and the
- * output's `asciiOnly`, under whatever the element already said.
+ * as an `Effected` is (`./effect.ts`): with nothing drawn its answer is `t`,
+ * and placed, on its own or as a part of any combinator, it says the glyph
+ * effect's exact hold at that time and the output's `asciiOnly`, which the
+ * frame's drawing told (`Reads`).
  */
 export class GlyphEffected {
     renderable;
@@ -113,11 +110,11 @@ export class GlyphEffected {
     at(t) {
         return new Reglyphed(this.renderable, this.effect, { t, key: this.key });
     }
-    nextChange(t) {
-        return t;
+    validUntil(t, moves) {
+        return moves?.(t, this.key)?.validUntil ?? t;
     }
-    lastChange(t) {
-        return t;
+    validFrom(t, moves) {
+        return moves?.(t, this.key)?.validFrom ?? t;
     }
     /** The element under the glyph effect with its motion taken out. */
     reduced() {
@@ -126,8 +123,7 @@ export class GlyphEffected {
     }
     /** Drawn at the frame's time, its cells stamped with the glyph effect's exact hold there. */
     render(options) {
-        const { segments, hold } = this.at(frameTimeOf(options)).moved(options);
-        return stampFrame(segments, hold);
+        return placedRender(this, options);
     }
     measure(options) {
         return Measurement.get(options, this.renderable);
@@ -161,7 +157,7 @@ function showGlyphs(placed, frame) {
  * its every style and span, each moved to where its glyphs now sit, and a
  * frame that changes nothing hands the text back as it was. What it says of
  * when it changes is the effect's, unstamped: whoever draws it at a time
- * stamps it (`textFrameAt`).
+ * stamps it (`placed`), or marks it for the engine to (the template `glyphs`).
  */
 export function reglyphText(text, effect, options) {
     const { placed, cells } = placeGlyphs([new Segment(text.plain)], options.key);
@@ -193,7 +189,7 @@ function rewritten(text, glyphs, shown) {
         result.stylize(span.style, moved(span.start), moved(span.end));
     return result;
 }
-/** Line breaks and tabs, which `stripControlChars` leaves for a text's own lines and which no cell may hold. */
+/** Line breaks and tabs, which `sanitized` leaves for a text's own lines and which no cell may hold. */
 const BREAKS = pattern(/[\n\t]/);
 /**
  * What `frame` shows in `cell`, held to the contract: as many cells wide as
@@ -205,7 +201,7 @@ function shows(frame, cell) {
     const text = frame(cell);
     if (text === cell.glyph)
         return text;
-    if (cellLen(text) !== cellLen(cell.glyph) || BREAKS.test(text) || stripControlChars(text) !== text) {
+    if (cellLen(text) !== cellLen(cell.glyph) || BREAKS.test(text) || sanitized(text) !== text) {
         throw new RangeError(`a glyph effect turned ${JSON.stringify(cell.glyph)} at row ${cell.row}, column ${cell.col} into ${JSON.stringify(text)}: ` +
             `it must be ${cellLen(cell.glyph)} cell(s) wide, with no line break or control character`);
     }
@@ -218,18 +214,24 @@ function shows(frame, cell) {
  * wide as its glyph is `shows`'s check; this is the half no one cell can
  * see — a trailing zero-width joiner that fuses with the next emoji, or a
  * leading combining mark that draws on the glyph before it, is right alone
- * and wrong beside its neighbour. Only a changed text is asked, so a child
- * that splits a cluster across its own segments is drawn as it drew it.
+ * and wrong beside its neighbour. Only a join the effect made is asked, seam
+ * by seam, so a child that splits a cluster across its own segments is drawn
+ * as it drew it, whatever becomes of the glyph its mark sits on.
  */
 function standsApart(placed, shown) {
-    // A line break is no cell, and nothing joins across it.
-    const beside = (j) => (placed[j]?.cell === undefined ? "" : shown[j]);
+    const fuse = (left, right) => graphemes(left + right).length < graphemes(left).length + graphemes(right).length;
+    // Whether the text at `i` fuses across its left seam and across its right.
+    const seams = (texts, i) => {
+        // A line break is no cell, and nothing joins across it.
+        const beside = (j) => (placed[j]?.cell === undefined ? "" : texts(j));
+        const [before, text, after] = [beside(i - 1), texts(i), beside(i + 1)];
+        return [fuse(before, text + after), fuse(before + text, after)];
+    };
     shown.forEach((text, i) => {
         const { glyph, cell } = placed[i];
         if (cell === undefined || text === glyph)
             return;
-        const [before, after] = [beside(i - 1), beside(i + 1)];
-        if (graphemes(before + text + after).length !== graphemes(before).length + graphemes(text).length + graphemes(after).length) {
+        if (seams((j) => shown[j], i).some((fused, seam) => fused && !seams((j) => placed[j].glyph, i)[seam])) {
             throw new RangeError(`a glyph effect turned ${JSON.stringify(glyph)} at row ${cell.row}, column ${cell.col} into ${JSON.stringify(text)}, ` +
                 `which joins the cell beside it into one character`);
         }