@promptctl/rich-js 0.24.0 → 0.24.1

package/dist/renderables/effect.d.ts

@@ -2,24 +2,26 @@
  * Effected — a renderable whose finished cells' colours pass through an
  * effect at a moment `t`.
  *
- * An effect is one pure function in two stages: a time and what the element
- * draws in that frame in, a function of the frame out; and into that, a
- * cell's colours and where the cell is, the cell's new colours out. Whatever
- * holds for the whole frame is worked out in the first stage, once, and every
- * cell of the frame is handed to the second, but for those a wrapper keeps
- * back: `confined` hands over only the cells its owners drew, so a second
- * stage never counts on seeing them all. Shimmer, pulse, fade and
- * dissolve are all this one shape, differing by what the function does with
- * its inputs [LAW:one-type-per-behavior]; two effects stack by nesting one
- * wrapper in another, which is the same as calling one after the other but
- * for what the outer one measures: the inner one's output.
+ * An effect is, for what an element draws in a frame, an `Animation`
+ * (`core/animation.ts`) of what is done to its cells: its value at `t` is a
+ * function from a cell's colours and where the cell is to the cell's new
+ * colours (`EffectFrame`), and it says when that next changes as every
+ * animation does. Whatever holds for the whole frame is worked out once, in
+ * the effect and its `at(t)`, and every cell of the frame is handed to the
+ * function `at(t)` returns, but for those a wrapper keeps back: `confined`
+ * hands over only the cells its owners drew, so an effect never counts on
+ * seeing them all. Shimmer, pulse, fade and dissolve are all this one shape,
+ * differing by what the function does with its inputs
+ * [LAW:one-type-per-behavior]; two effects stack by nesting one wrapper in
+ * another, which is the same as calling one after the other but for what the
+ * outer one measures: the inner one's output.
  *
- * What the element draws (`Drawn`) — the cells the second stage will be
- * handed, and the colours of its words — is measured here, in the render, off
- * the same reading of each segment its cells are drawn from, and handed to the
- * effect's first stage, once a frame. It is what an effect keeping words legible is
- * settled against (`onColors`, `./effects.ts`), so no caller derives it a
- * second time from a render of its own.
+ * What the element draws (`Drawn`) — the cells the effect will be handed,
+ * and the colours of its words — is measured here, in the render, off the
+ * same reading of each segment its cells are drawn from, and handed to the
+ * effect once a frame. It is what an effect keeping words legible is settled
+ * against (`onColors`, `./effects.ts`), so no caller derives it a second time
+ * from a render of its own.
  *
  * [LAW:no-ambient-temporal-coupling] `t` is a constructor argument, not a
  * clock read. Whoever draws frames builds the view for each frame's `t`, so
@@ -49,9 +51,10 @@
  * what the child drew, so a sweep crosses the element, not the screen.
  */
 import { type Anchor } from "../core/anchor.js";
+import { Animation } from "../core/animation.js";
 import { ColorDepth, type ColorRgba, type TerminalTheme } from "../core/color.js";
 import type { Beat } from "../core/easing.js";
-import type { Measurable, Renderable, RenderOptions } from "../core/protocol.js";
+import type { Composite, Measurable, Renderable, RenderOptions } from "../core/protocol.js";
 import { Segment } from "../core/segment.js";
 /**
  * A cell's foreground and background as they appear on screen — the glyph's
@@ -119,7 +122,7 @@ export interface Drawn {
     /**
      * Every cell the element shows something in this frame — a glyph, a
      * ground that is not the terminal's, or a line its style draws — where it
-     * sits and who drew it, listed before the second stage is handed any: what
+     * sits and who drew it, listed before the effect is handed any: what
      * an effect spread over the element — a transition, which has its last cell
      * settle as it ends — is spread over. A blank cell on the terminal's ground
      * that draws no line is handed but not listed, since nothing in it shows.
@@ -138,42 +141,23 @@ export interface Drawn {
     /** The terminal the frame is drawn on. */
     readonly theme: TerminalTheme;
 }
+/** What an effect does to the cells of one frame: each cell's colours and where it is in, its colours out. Return `colors` to leave a cell be. */
+export type EffectFrame = (colors: CellColors, cell: EffectCell) => CellColors;
 /**
- * The frame at time `t`, in seconds, whose element draws `drawn`: each cell's
- * colours in that frame. Return `colors` to leave a cell be.
- * [LAW:types-are-the-program] Per-frame work is the outer stage, so it runs
- * once a frame by the shape of the call, never by a cache asking whether this
- * cell's frame is the last one's.
+ * For an element drawing `drawn`, the animation of what is done to its cells.
+ * [LAW:types-are-the-program] Per-frame work is `at(t)`, so it runs once a
+ * frame by the shape of the call, never by a cache asking whether this cell's
+ * frame is the last one's.
  *
- * An effect that knows when its frame next changes says so in `nextChange`,
- * asked with the same `t` and `drawn` its first stage is: a stepped one its
- * next step's start, a transition `t` until it is done and `Infinity` after,
- * a loop that holds every cell still at the frame's depth `Infinity` there.
- * [LAW:types-are-the-program] The answer is a fact about the frame, so it is
- * asked with everything the frame is drawn from; an answer asked with `t`
- * alone could not say that a frame is still because of its depth. A plain
- * function is an effect that moves every frame, and answers `t`
- * (`nextChangeOf`): the one true answer for a frame nothing has promised to
- * hold, so a loop needs no second shape.
+ * Its `nextChange` is when the frame next changes: a stepped effect its next
+ * step's start, a transition `t` until it is done and `Infinity` after, a
+ * loop that holds every cell still at the frame's depth `Infinity` there, and
+ * a loop that moves `t` (`Animation.continuous`). [LAW:types-are-the-program]
+ * The answer is a fact about the frame, so the animation is made from
+ * everything the frame is drawn from; one made from `t` alone could not say
+ * that a frame is still because of its depth.
  */
-export interface Effect {
-    (t: number, drawn: Drawn): (colors: CellColors, cell: EffectCell) => CellColors;
-    /** When the frame drawn at `t` of `drawn` next changes, in seconds on `t`'s timeline, never before `t`; absent, every frame. */
-    readonly nextChange?: (t: number, drawn: Drawn) => number;
-}
-/**
- * When `effect`'s frame at `t` of `drawn` next changes: what it says, or `t`
- * for an effect that says nothing. [LAW:single-enforcer] The one reading of
- * an absent `nextChange`, so no caller holds its own default.
- */
-export declare function nextChangeOf(effect: Effect, t: number, drawn: Drawn): number;
-/**
- * An effect drawing as `effect` does, with `nextChange` as its answer to when
- * its frame next changes, in place of whatever `effect` answered; `effect`
- * itself is left as it was. A composer whose answer depends on the inner
- * effect's reads it with `nextChangeOf`, as `onBeat` and `confined` do.
- */
-export declare function withNextChange(effect: Effect, nextChange: (t: number, drawn: Drawn) => number): Effect;
+export type Effect = (drawn: Drawn) => Animation<EffectFrame>;
 export interface EffectedOptions {
     /** The moment to draw, in seconds. */
     readonly t: number;
@@ -189,7 +173,7 @@ export interface EffectedOptions {
      */
     readonly theme: TerminalTheme;
 }
-export declare class Effected implements Renderable, Measurable {
+export declare class Effected implements Renderable, Measurable, Composite {
     readonly renderable: Renderable;
     readonly effect: Effect;
     readonly t: number;
@@ -197,6 +181,7 @@ export declare class Effected implements Renderable, Measurable {
     readonly theme: TerminalTheme;
     constructor(renderable: Renderable, effect: Effect, options: EffectedOptions);
     render(options: RenderOptions): Iterable<Segment>;
+    contents(): Iterable<Renderable>;
     private _moved;
     private _recolored;
     measure(options: RenderOptions): {
@@ -222,7 +207,7 @@ export declare class Effected implements Renderable, Measurable {
 }
 /**
  * `effect` sampled and held on `beat`: drawn at the moment the hold in
- * progress began (`Beat.start`), so within a hold every frame is the frame
+ * progress began (`Beat.lastChange`), so within a hold every frame is the frame
  * at its start, and at each hold's start it moves on. A continuous effect
  * given a short curve becomes one that steps — a `wheel` turning a sixth of
  * a turn once a second — and at one redraw a second a hold shorter than a
@@ -230,10 +215,10 @@ export declare class Effected implements Renderable, Measurable {
  * held time is a function of `t`, so the same `t` draws the same bytes at
  * any rate. The frame next changes at a hold's start, and only one the
  * sampled effect has moved by: the first hold start at or after what it
- * answers for the frame held now (`Beat.end`). An effect that moves every
- * frame makes the beat's own answer, the end of this hold; one that is done
- * and says never leaves the beat saying never too, since the hold after this
- * one would draw the same frame. The answer is read off what the effect
+ * answers for the frame held now (`Beat.nextChange`). An effect that moves
+ * every frame makes the beat's own answer, the end of this hold; one that is
+ * done and says never leaves the beat saying never too, since the hold after
+ * this one would draw the same frame. The answer is read off what the effect
  * says, never off a comparison of frames: an effect that steps and is back
  * on the same colour by the next hold still turns the beat there, an early
  * answer the contract allows.

package/dist/renderables/effect.js

@@ -2,24 +2,26 @@
  * Effected — a renderable whose finished cells' colours pass through an
  * effect at a moment `t`.
  *
- * An effect is one pure function in two stages: a time and what the element
- * draws in that frame in, a function of the frame out; and into that, a
- * cell's colours and where the cell is, the cell's new colours out. Whatever
- * holds for the whole frame is worked out in the first stage, once, and every
- * cell of the frame is handed to the second, but for those a wrapper keeps
- * back: `confined` hands over only the cells its owners drew, so a second
- * stage never counts on seeing them all. Shimmer, pulse, fade and
- * dissolve are all this one shape, differing by what the function does with
- * its inputs [LAW:one-type-per-behavior]; two effects stack by nesting one
- * wrapper in another, which is the same as calling one after the other but
- * for what the outer one measures: the inner one's output.
+ * An effect is, for what an element draws in a frame, an `Animation`
+ * (`core/animation.ts`) of what is done to its cells: its value at `t` is a
+ * function from a cell's colours and where the cell is to the cell's new
+ * colours (`EffectFrame`), and it says when that next changes as every
+ * animation does. Whatever holds for the whole frame is worked out once, in
+ * the effect and its `at(t)`, and every cell of the frame is handed to the
+ * function `at(t)` returns, but for those a wrapper keeps back: `confined`
+ * hands over only the cells its owners drew, so an effect never counts on
+ * seeing them all. Shimmer, pulse, fade and dissolve are all this one shape,
+ * differing by what the function does with its inputs
+ * [LAW:one-type-per-behavior]; two effects stack by nesting one wrapper in
+ * another, which is the same as calling one after the other but for what the
+ * outer one measures: the inner one's output.
  *
- * What the element draws (`Drawn`) — the cells the second stage will be
- * handed, and the colours of its words — is measured here, in the render, off
- * the same reading of each segment its cells are drawn from, and handed to the
- * effect's first stage, once a frame. It is what an effect keeping words legible is
- * settled against (`onColors`, `./effects.ts`), so no caller derives it a
- * second time from a render of its own.
+ * What the element draws (`Drawn`) — the cells the effect will be handed,
+ * and the colours of its words — is measured here, in the render, off the
+ * same reading of each segment its cells are drawn from, and handed to the
+ * effect once a frame. It is what an effect keeping words legible is settled
+ * against (`onColors`, `./effects.ts`), so no caller derives it a second time
+ * from a render of its own.
  *
  * [LAW:no-ambient-temporal-coupling] `t` is a constructor argument, not a
  * clock read. Whoever draws frames builds the view for each frame's `t`, so
@@ -49,30 +51,15 @@
  * what the child drew, so a sweep crosses the element, not the screen.
  */
 import { drawnBy, shiftAnchor } from "../core/anchor.js";
+import { Animation } from "../core/animation.js";
 import { cellLen, graphemes } from "../core/cells.js";
 import { ColorDepth, ColorSpec, SURFACE_BLACK } from "../core/color.js";
 import { fnv1a } from "../core/fnv1a.js";
 import { Measurement } from "../core/measure.js";
+import { render } from "../core/protocol.js";
 import { Segment } from "../core/segment.js";
 import { JOIN, colorsOwnedBy } from "../core/strip.js";
 import { Style } from "../core/style.js";
-/**
- * When `effect`'s frame at `t` of `drawn` next changes: what it says, or `t`
- * for an effect that says nothing. [LAW:single-enforcer] The one reading of
- * an absent `nextChange`, so no caller holds its own default.
- */
-export function nextChangeOf(effect, t, drawn) {
-    return effect.nextChange?.(t, drawn) ?? t;
-}
-/**
- * An effect drawing as `effect` does, with `nextChange` as its answer to when
- * its frame next changes, in place of whatever `effect` answered; `effect`
- * itself is left as it was. A composer whose answer depends on the inner
- * effect's reads it with `nextChangeOf`, as `onBeat` and `confined` do.
- */
-export function withNextChange(effect, nextChange) {
-    return Object.assign((t, drawn) => effect(t, drawn), { nextChange });
-}
 export class Effected {
     renderable;
     effect;
@@ -90,27 +77,28 @@ export class Effected {
         this.theme = options.theme;
     }
     render(options) {
-        const segments = this.renderable.render(options);
+        const segments = render(this.renderable, options);
         // With no colour output nothing the effect does is written, so the child
         // is what is shown, and it changes when the child says it does.
         if (options.colorSystem === null)
             return segments;
         return this._moved(segments, options);
     }
+    *contents() {
+        yield this.renderable;
+    }
     *_moved(segments, options) {
         // No depth named is no downgrade, as `drawnColors` reads it.
         const depth = options.colorSystem ?? ColorDepth.TRUECOLOR;
         // [LAW:one-source-of-truth] The frame is measured before any cell is
         // handed to the effect, off the same looks its cells are drawn from, and
-        // the one measure is what both stages and the effect's next change are
-        // asked with.
+        // the one measure is what the effect's animation is made from.
         const looked = looks(segments, depth, this.theme);
         const walked = walk(looked);
-        const drawn = measured(looked, () => walked, depth, this.theme);
-        const frame = this.effect(this.t, drawn);
+        const animation = this.effect(measured(looked, () => walked, depth, this.theme));
         // What the effect draws at `t` is drawn until its next change, and the
         // cells say so, under whatever the child already said (the sooner wins).
-        yield* Segment.applyStyle(this._recolored(walked, frame, depth), new Style({ nextChange: nextChangeOf(this.effect, this.t, drawn) }));
+        yield* Segment.applyStyle(this._recolored(walked, animation.at(this.t), depth), new Style({ nextChange: animation.nextChange(this.t) }));
     }
     *_recolored(walked, frame, depth) {
         for (const { segment, look, glyphs } of walked) {
@@ -256,7 +244,7 @@ function measured(looked, walked, depth, theme) {
 }
 /**
  * `effect` sampled and held on `beat`: drawn at the moment the hold in
- * progress began (`Beat.start`), so within a hold every frame is the frame
+ * progress began (`Beat.lastChange`), so within a hold every frame is the frame
  * at its start, and at each hold's start it moves on. A continuous effect
  * given a short curve becomes one that steps — a `wheel` turning a sixth of
  * a turn once a second — and at one redraw a second a hold shorter than a
@@ -264,24 +252,33 @@ function measured(looked, walked, depth, theme) {
  * held time is a function of `t`, so the same `t` draws the same bytes at
  * any rate. The frame next changes at a hold's start, and only one the
  * sampled effect has moved by: the first hold start at or after what it
- * answers for the frame held now (`Beat.end`). An effect that moves every
- * frame makes the beat's own answer, the end of this hold; one that is done
- * and says never leaves the beat saying never too, since the hold after this
- * one would draw the same frame. The answer is read off what the effect
+ * answers for the frame held now (`Beat.nextChange`). An effect that moves
+ * every frame makes the beat's own answer, the end of this hold; one that is
+ * done and says never leaves the beat saying never too, since the hold after
+ * this one would draw the same frame. The answer is read off what the effect
  * says, never off a comparison of frames: an effect that steps and is back
  * on the same colour by the next hold still turns the beat there, an early
  * answer the contract allows.
  */
 export function onBeat(effect, beat) {
-    return withNextChange((t, drawn) => effect(beat.start(t), drawn), (t, drawn) => {
-        const moved = nextChangeOf(effect, beat.start(t), drawn);
-        if (moved === Number.POSITIVE_INFINITY)
-            return moved;
-        const end = beat.end(t);
-        // The hold boundaries after `t` are `end`, then each hold's end in turn;
-        // the frame turns at the first one the effect has moved by.
-        return moved <= end ? end : beat.start(moved) === moved ? moved : beat.end(moved);
-    });
+    return (drawn) => {
+        const sampled = effect(drawn);
+        return {
+            at: (t) => sampled.at(beat.lastChange(t)),
+            nextChange(t) {
+                const moved = sampled.nextChange(beat.lastChange(t));
+                if (moved === Number.POSITIVE_INFINITY)
+                    return moved;
+                const end = beat.nextChange(t);
+                // The hold boundaries after `t` are `end`, then each hold's end in turn;
+                // the frame turns at the first one the effect has moved by.
+                return moved <= end ? end : beat.lastChange(moved) === moved ? moved : beat.nextChange(moved);
+            },
+            // The frame held now began at this hold's start at the latest: an early
+            // answer where the effect had not moved by it, which the contract allows.
+            lastChange: (t) => beat.lastChange(t),
+        };
+    };
 }
 /**
  * `effect` on the colours any of `owners` drew, itself or through an owner
@@ -302,16 +299,13 @@ export function confined(effect, ...owners) {
     // The frame as the effect sees it: the owners' cells alone. [LAW:one-source-of-truth] One narrowing, handed to both stages.
     const owned = (drawn) => ({ ...drawn, cells: () => drawn.cells().filter((cell) => any(ownedOf(cell))) });
     // The owners' cells change when the effect's frame does.
-    return withNextChange((t, drawn) => {
-        const frame = effect(t, owned(drawn));
-        return (colors, cell) => {
-            const owns = ownedOf(cell);
-            if (!any(owns))
-                return colors;
-            const moved = frame(colors, cell);
-            return { fg: owns.fg ? moved.fg : colors.fg, bg: owns.bg ? moved.bg : colors.bg };
-        };
-    }, (t, drawn) => nextChangeOf(effect, t, owned(drawn)));
+    return (drawn) => Animation.map(effect(owned(drawn)), (frame) => (colors, cell) => {
+        const owns = ownedOf(cell);
+        if (!any(owns))
+            return colors;
+        const moved = frame(colors, cell);
+        return { fg: owns.fg ? moved.fg : colors.fg, bg: owns.bg ? moved.bg : colors.bg };
+    });
 }
 /**
  * What `segments`, drawn at `depth` on `theme`, draw their words in, measured

package/dist/renderables/effects.d.ts

@@ -47,7 +47,7 @@
  * (`examples/effects-playground/programs.ts`), on the published library.
  */
 import { ColorRgba } from "../core/color.js";
-import { type Ease } from "../core/easing.js";
+import { type Timing } from "../core/easing.js";
 import { type Drawn, type Effect, type EffectCell } from "./effect.js";
 /** What a loop does to one colour at strength `w` in [0, 1]: at 0, nothing. */
 export type Touch = (color: ColorRgba, w: number) => ColorRgba;
@@ -104,12 +104,14 @@ export declare function onColors(loop: Loop, colors?: ReadonlySet<string>): Effe
  * says; a colour it gives none, and one the terminal supplies, stays as it is.
  */
 export declare function atShares(loop: Loop, share: (drawn: Drawn) => ReadonlyMap<string, number>): Effect;
-/** How the curves below are tuned: one period (or duration), ease and swing. */
-export interface Curve {
-    /** Seconds: a looping effect's period, a transition's duration. */
-    readonly seconds: number;
-    /** Intensity in [0, 1] to the fraction of `swing` applied. One that overshoots, as a CSS `cubic-bezier` may, saturates: an effect never acts past its swing. */
-    readonly ease: Ease;
+/**
+ * How the curves below are tuned: a `Timing` — seconds, a looping effect's
+ * period or a transition's duration, and an ease, intensity in [0, 1] to
+ * the fraction of `swing` applied; one that overshoots, as a CSS
+ * `cubic-bezier` may, saturates, since an effect never acts past its swing —
+ * and the swing itself.
+ */
+export interface Curve extends Timing {
     /** How far the move goes at full intensity, in [0, 1]; what 1 means is the effect's. */
     readonly swing: number;
 }
@@ -122,32 +124,32 @@ export interface Curve {
 export declare const EFFECT_CURVES: {
     readonly shimmer: {
         readonly seconds: 109;
-        readonly ease: Ease;
+        readonly ease: import("../core/easing.js").Ease;
         readonly swing: 0.9;
     };
     readonly pulse: {
         readonly seconds: 43;
-        readonly ease: Ease;
+        readonly ease: import("../core/easing.js").Ease;
         readonly swing: 0.85;
     };
     readonly sparkle: {
         readonly seconds: 139;
-        readonly ease: Ease;
+        readonly ease: import("../core/easing.js").Ease;
         readonly swing: 0.95;
     };
     readonly wheel: {
         readonly seconds: 907;
-        readonly ease: Ease;
+        readonly ease: import("../core/easing.js").Ease;
         readonly swing: 1;
     };
     readonly fade: {
         readonly seconds: 20;
-        readonly ease: Ease;
+        readonly ease: import("../core/easing.js").Ease;
         readonly swing: 1;
     };
     readonly dissolve: {
         readonly seconds: 30;
-        readonly ease: Ease;
+        readonly ease: import("../core/easing.js").Ease;
         readonly swing: 1;
     };
 };
@@ -308,7 +310,7 @@ export interface ColorStep {
  * The search is settled once for each ink, ground and step, so a frame
  * inside a step redoes none, and nor does a later pass of the beat: at sixty
  * frames a second a one-second step is sixty identical frames, and the
- * frame says it changes next when the step ends (`Beat.end`).
+ * frame changes when the beat does: the signal is the beat mapped to inks.
  * [LAW:no-ambient-temporal-coupling] The beat is `core/easing.ts`'s, and
  * nothing here reads a clock.
  */

package/dist/renderables/effects.js

@@ -46,13 +46,14 @@
  * cards runs this file's own declarations as the program a visitor edits
  * (`examples/effects-playground/programs.ts`), on the published library.
  */
+import { Animation } from "../core/animation.js";
 import { ColorDepth, ColorRgba, ColorSpec, contrastRatio, relativeLuminance } from "../core/color.js";
 import { EASES, Phase, beat } from "../core/easing.js";
 import { fbm, hash, noise, smoothstep } from "../core/noise.js";
 import { Memo } from "../core/memo.js";
 import { Oklch } from "../core/oklch.js";
 import { ensureContrast } from "../themes/colorMath.js";
-import { Effected, nextChangeOf, withNextChange } from "./effect.js";
+import { Effected } from "./effect.js";
 /** The contrast no touch takes a cell below, unless it rested below it: WCAG AA for body text. */
 const LEGIBLE = 4.5;
 /**
@@ -182,14 +183,16 @@ function pairKey({ fg, bg, terminal, reverse }) {
  * says; a colour it gives none, and one the terminal supplies, stays as it is.
  */
 export function atShares(loop, share) {
-    return (t, drawn) => {
+    return (drawn) => {
         const shared = share(drawn);
-        const field = loop.field(t, drawn);
-        return ({ fg, bg }, cell) => {
-            const w = Math.round(clamp01(field(cell)) * LEVELS) / LEVELS;
-            const moved = (color, terminal) => touchedAt(loop.touch, color, (terminal ? 0 : (shared.get(color.hex) ?? 0)) * w);
-            return { fg: moved(fg, cell.terminal.fg), bg: moved(bg, cell.terminal.bg) };
-        };
+        return Animation.continuous((t) => {
+            const field = loop.field(t, drawn);
+            return ({ fg, bg }, cell) => {
+                const w = Math.round(clamp01(field(cell)) * LEVELS) / LEVELS;
+                const moved = (color, terminal) => touchedAt(loop.touch, color, (terminal ? 0 : (shared.get(color.hex) ?? 0)) * w);
+                return { fg: moved(fg, cell.terminal.fg), bg: moved(bg, cell.terminal.bg) };
+            };
+        });
     };
 }
 /**
@@ -205,7 +208,7 @@ export function atShares(loop, share) {
  * loop on such a terminal draws it once.
  */
 function stillOnSlots(loop) {
-    return withNextChange((t, drawn) => (onlySlots(drawn.depth) ? (colors) => colors : loop(t, drawn)), (t, drawn) => (onlySlots(drawn.depth) ? Number.POSITIVE_INFINITY : nextChangeOf(loop, t, drawn)));
+    return (drawn) => (onlySlots(drawn.depth) ? Animation.constant((colors) => colors) : loop(drawn));
 }
 /** Whether `depth` writes nothing between the slots it has: the sixteen, at either sixteen-colour depth, or none. */
 function onlySlots(depth) {
@@ -554,18 +557,19 @@ export function sparkle(curve, glow, z) {
  * hiding — 1 reaches fully invisible. A cell wholly shown is returned as it was.
  */
 export function veiled(visibility, swing) {
-    return (t, drawn) => {
-        const { theme } = drawn;
-        const shows = visibility(t, drawn);
+    return (drawn) => {
         // [LAW:one-source-of-truth] The ground is the terminal `Effected` draws on, never a second one handed here.
-        const ground = Oklch.fromRgba(theme.backgroundColor);
-        return (colors, cell) => {
-            const hidden = swing * (1 - clamp01(shows(cell)));
-            if (hidden === 0)
-                return colors;
-            const bg = blend(Oklch.fromRgba(colors.bg), ground, hidden);
-            return { fg: blend(Oklch.fromRgba(colors.fg), bg, hidden).toRgba(), bg: bg.toRgba() };
-        };
+        const ground = Oklch.fromRgba(drawn.theme.backgroundColor);
+        return Animation.continuous((t) => {
+            const shows = visibility(t, drawn);
+            return (colors, cell) => {
+                const hidden = swing * (1 - clamp01(shows(cell)));
+                if (hidden === 0)
+                    return colors;
+                const bg = blend(Oklch.fromRgba(colors.bg), ground, hidden);
+                return { fg: blend(Oklch.fromRgba(colors.fg), bg, hidden).toRgba(), bg: bg.toRgba() };
+            };
+        });
     };
 }
 /**
@@ -588,7 +592,18 @@ function order(z) {
 }
 function transition(curve, effect) {
     const done = (t) => t >= curve.seconds;
-    return { effect: withNextChange(effect, (t) => (done(t) ? Number.POSITIVE_INFINITY : t)), done };
+    return {
+        effect: (drawn) => {
+            const moving = effect(drawn);
+            return {
+                at: (t) => moving.at(t),
+                nextChange: (t) => (done(t) ? Number.POSITIVE_INFINITY : moving.nextChange(t)),
+                // Done, the frame settled when the transition did; until then it is the effect's.
+                lastChange: (t) => (done(t) ? curve.seconds : moving.lastChange(t)),
+            };
+        },
+        done,
+    };
 }
 /**
  * Of a transition's `seconds`, how long each cell's own change takes. Under
@@ -735,7 +750,7 @@ export function wheel(curve, z) {
     };
     // A turned colour's bounds rest on what a frame draws, never on `t`: settled once for each.
     const settled = new WeakMap();
-    return stillOnSlots((t, drawn) => {
+    return stillOnSlots((drawn) => {
         const { colors, fills, depth, theme } = drawn;
         // Whether a slot shows one of the element's colours: never the terminal's, whatever its hex.
         const own = (terminal, color) => !terminal && colors.has(color.hex);
@@ -752,21 +767,23 @@ export function wheel(curve, z) {
         // 256 colours writes a turned colour as one it has an index for; truecolor
         // as one of the two either side of its luminance.
         const indexed = measuredIndexed(depth, theme);
-        const written = new Map();
-        const choose = (color, segment) => {
-            const turn = hueTurned(color, turned(segment, t));
-            return nearestWithin(turn.looks, color, depth === ColorDepth.TRUECOLOR ? turn.either.map(measured) : indexed, bounds.get(keyOf(color, segment)) ?? UNBOUNDED);
-        };
-        const write = (color, segment) => {
-            const found = written.get(keyOf(color, segment)) ?? choose(color, segment);
-            written.set(keyOf(color, segment), found);
-            return found;
-        };
-        return (shown, cell) => {
-            const mine = { fg: own(cell.terminal.fg, shown.fg), bg: own(cell.terminal.bg, shown.bg) };
-            const turn = (color, ours, other, theirs) => (ours ? write(color, segmentOf(color, other, theirs)) : color);
-            return { fg: turn(shown.fg, mine.fg, shown.bg, mine.bg), bg: turn(shown.bg, mine.bg, shown.fg, mine.fg) };
-        };
+        return Animation.continuous((t) => {
+            const written = new Map();
+            const choose = (color, segment) => {
+                const turn = hueTurned(color, turned(segment, t));
+                return nearestWithin(turn.looks, color, depth === ColorDepth.TRUECOLOR ? turn.either.map(measured) : indexed, bounds.get(keyOf(color, segment)) ?? UNBOUNDED);
+            };
+            const write = (color, segment) => {
+                const found = written.get(keyOf(color, segment)) ?? choose(color, segment);
+                written.set(keyOf(color, segment), found);
+                return found;
+            };
+            return (shown, cell) => {
+                const mine = { fg: own(cell.terminal.fg, shown.fg), bg: own(cell.terminal.bg, shown.bg) };
+                const turn = (color, ours, other, theirs) => (ours ? write(color, segmentOf(color, other, theirs)) : color);
+                return { fg: turn(shown.fg, mine.fg, shown.bg, mine.bg), bg: turn(shown.bg, mine.bg, shown.fg, mine.fg) };
+            };
+        });
     });
 }
 /**
@@ -890,7 +907,7 @@ function nearestOf(color, offered) {
  * The search is settled once for each ink, ground and step, so a frame
  * inside a step redoes none, and nor does a later pass of the beat: at sixty
  * frames a second a one-second step is sixty identical frames, and the
- * frame says it changes next when the step ends (`Beat.end`).
+ * frame changes when the beat does: the signal is the beat mapped to inks.
  * [LAW:no-ambient-temporal-coupling] The beat is `core/easing.ts`'s, and
  * nothing here reads a clock.
  */
@@ -900,15 +917,17 @@ export function steppedInk(steps) {
     // `steps` said whatever the caller does to its array.
     const inks = steps.map((step) => step.color);
     const settled = new WeakMap();
-    return withNextChange((t, { depth, theme }) => {
-        const step = inks[rhythm.at(t)];
+    return ({ depth, theme }) => {
         const memo = settled.get(theme) ?? new Memo();
         settled.set(theme, memo);
-        return (colors, cell) => {
-            const pair = { ...colors, terminal: cell.terminal, reverse: cell.reverse };
-            return { fg: memo.get(`${depth} ${pairKey(pair)} ${step.hex}`, () => legibleInk(step, pair, depth, theme)), bg: colors.bg };
-        };
-    }, (t) => rhythm.end(t));
+        return Animation.map(rhythm, (i) => {
+            const step = inks[i];
+            return (colors, cell) => {
+                const pair = { ...colors, terminal: cell.terminal, reverse: cell.reverse };
+                return { fg: memo.get(`${depth} ${pairKey(pair)} ${step.hex}`, () => legibleInk(step, pair, depth, theme)), bg: colors.bg };
+            };
+        });
+    };
 }
 /**
  * The colour nearest `step` the depth writes that reads on `pair`'s ground