@promptctl/rich-js 0.25.2 → 0.27.0

package/dist/index.d.ts

@@ -1,13 +1,14 @@
 export { cellLen, setCellSize, splitText, chopCells, cellFit, graphemes, asCellCol, asCodePoint, } from "./core/cells.js";
 export type { CellCol, CodeUnit, CodePoint } from "./core/cells.js";
-export { ColorRgba, ColorTable, ColorDepth, ColorSpec, ColorParseError, TerminalTheme, parseRgbHex, parseRgbaHex, parseHexColor, blendRgb, resolveColorSystem, detectColorSystem, resolveDestination, STANDARD_TABLE, EIGHT_BIT_TABLE, WINDOWS_TABLE, ANSI_COLOR_NAMES, } from "./core/color.js";
+export { ColorRgba, ColorTable, ColorDepth, ColorSpec, ColorParseError, TerminalTheme, type TerminalColors, parseRgbHex, parseRgbaHex, parseHexColor, blendRgb, resolveColorSystem, detectColorSystem, resolveDestination, STANDARD_TABLE, EIGHT_BIT_TABLE, WINDOWS_TABLE, ANSI_COLOR_NAMES, } from "./core/color.js";
 export type { ColorSystemName, DetectColorOptions, Destination, DestinationOptions } from "./core/color.js";
 export { Oklch, IDENTITY, INVERT_LIGHTNESS, isIdentityKey, } from "./core/oklch.js";
 export type { ThemeKey, OklchWeights } from "./core/oklch.js";
 export { Palette } from "./themes/palette.js";
+export type { AccentRole, BaseRole, PaletteRole, PaletteRoles, ShadedRole } from "./themes/palette.js";
 export { resolveColorRef, ColorRefError } from "./themes/colorRef.js";
 export { buildPalette } from "./themes/buildPalette.js";
-export type { BaseColors } from "./themes/buildPalette.js";
+export type { BaseColors, StatedRoles } from "./themes/buildPalette.js";
 export { DEFAULT_TERMINAL_THEME, MONOKAI, SVG_EXPORT_THEME, NORD, GRUVBOX, DRACULA, TOKYO_NIGHT, FLEXOKI, CYBERPUNK, CATPPUCCIN_MOCHA, CATPPUCCIN_LATTE, CATPPUCCIN_FRAPPE, CATPPUCCIN_MACCHIATO, SOLARIZED_DARK, SOLARIZED_LIGHT, ROSE_PINE, ROSE_PINE_MOON, ROSE_PINE_DAWN, ATOM_ONE_DARK, ATOM_ONE_LIGHT, TEXTUAL_DARK, TEXTUAL_LIGHT, TEXTUAL_ANSI, } from "./themes/terminalThemes.js";
 export { getThemePalette, listThemePalettes } from "./themes/registry.js";
 export type { ThemeName } from "./themes/registry.js";
@@ -33,7 +34,7 @@ export { Box } from "./core/box.js";
 export type { EdgeChars, ContentChars, RowLevel, SubstituteOptions } from "./core/box.js";
 export { ASCII, ASCII2, ASCII_DOUBLE_HEAD, SQUARE, SQUARE_DOUBLE_HEAD, MINIMAL, MINIMAL_HEAVY_HEAD, MINIMAL_DOUBLE_HEAD, SIMPLE, SIMPLE_HEAD, SIMPLE_HEAVY, HORIZONTALS, ROUNDED, HEAVY, HEAVY_EDGE, HEAVY_HEAD, DOUBLE, DOUBLE_EDGE, MARKDOWN, } from "./core/box.js";
 export { render, isRenderable, isMeasurable, withCellWidth, withBoundedWidth, insetHeight, stackedHeight, regionRows, fitHeight, getStyle, } from "./core/protocol.js";
-export type { RenderOptions, OverflowMethod, Height, Renderable, Measurable, Presence, StyleErrorHandler, FrameHost, } from "./core/protocol.js";
+export type { RenderOptions, OverflowMethod, Height, Renderable, Measurable, Presence, StyleErrorHandler, FrameHost, HostFrame, } from "./core/protocol.js";
 export type { Unsubscribe } from "./core/subscription.js";
 export { Measurement, measureRenderables } from "./core/measure.js";
 export { Span, RichText } from "./core/text.js";
@@ -61,13 +62,13 @@ export type { ConsoleOptions, ConsoleSink, ConsoleStream, ConsoleEnvironment, Li
 export type { Env } from "./core/env.js";
 export { Constrain } from "./renderables/constrain.js";
 export { Effected, confined, drawnOf } from "./renderables/effect.js";
-export type { CellAttributes, CellColors, CellLook, Drawn, Effect, EffectCell, EffectedOptions, EffectFrame, Pair, Placed } from "./renderables/effect.js";
+export type { CellAttributes, CellColors, CellLook, Drawn, Effect, EffectCell, EffectedOptions, EffectFrame, ListedCell, Pair, Placed } from "./renderables/effect.js";
 export { ATTRIBUTE_DEFAULTS, EFFECT_CATALOGUE, EFFECT_CURVES, EFFECT_LIGHTS, blink, dissolveOut, fadeIn, gradient, onBeat, onColors, pulse, shimmer, sparkle, steppedInk, wheel, } from "./renderables/effects.js";
 export type { AttributeLoopName, Blink, ColorStep, Curve, EffectTarget, Field, Loop, LoopName, Touch, Transition, TransitionName } from "./renderables/effects.js";
 export { crossfade, wipe } from "./renderables/change.js";
 export type { Between, Change } from "./renderables/change.js";
 export { lifecycle, throughColors, throughGlyphs } from "./renderables/lifecycle.js";
-export type { Lifecycle, LifecycleOptions, Veil } from "./renderables/lifecycle.js";
+export type { Half, Lifecycle, LifecycleOptions } from "./renderables/lifecycle.js";
 export { scroll } from "./renderables/scroll.js";
 export type { ScrollOptions } from "./renderables/scroll.js";
 export { GlyphEffected } from "./renderables/glyph-effect.js";

package/dist/renderables/effect.d.ts

@@ -71,7 +71,7 @@
 import { type Anchor } from "../core/anchor.js";
 import { Animation } from "../core/animation.js";
 import type { Hold } from "../core/style.js";
-import { ColorDepth, type ColorRgba, type TerminalTheme } from "../core/color.js";
+import { ColorDepth, type ColorRgba, type TerminalColors } from "../core/color.js";
 import type { Measurable, Renderable, RenderOptions } from "../core/protocol.js";
 import { Segment } from "../core/segment.js";
 import { type Attributes } from "../core/style.js";
@@ -125,6 +125,20 @@ export interface EffectCell {
 }
 /** Where a cell sits and who drew it: an `EffectCell` before it has a seed or colours. */
 export type Placed = Pick<EffectCell, "row" | "col" | "anchor">;
+/**
+ * A cell as `Drawn.all` lists it: where it sits and who drew it, the
+ * columns its glyph takes, its ink and ground as the screen shows them, and
+ * whether a strip's joiner drew it — a seam, no item's, whose colours are its
+ * neighbours' edges. Each is read off the one look and the one walk the cell
+ * is later handed with, so an effect that groups cells into the runs they
+ * are drawn in — `wheel`'s segments — reads what the frame hands, never a
+ * second measure. [LAW:one-source-of-truth]
+ */
+export interface ListedCell extends Placed {
+    readonly width: number;
+    readonly pair: Pair;
+    readonly seam: boolean;
+}
 /**
  * A cell's ink and ground as the screen shows them, which of the two are the
  * terminal's, and whether its style swaps them (`reverse`): what an `Effect`
@@ -149,19 +163,28 @@ export interface Pair extends CellColors {
  */
 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 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,
-     * and a strip's join cell painted from the items beside it is listed but
-     * never handed its own look, since it follows them: it is handed only a
-     * neighbour's edge the frame does not show, to be painted where the seam
-     * shows it. `confined` narrows it to the cells its owners drew. A call, so a
-     * frame whose effect does not ask lists none.
+     * Every cell the element draws this frame, shown or not — where it sits
+     * and who drew it, what it shows and how wide it is (`ListedCell`) — in
+     * the order it draws them, listed before the effect is handed any. A blank
+     * cell on the terminal's ground that draws no line is here: the effect is
+     * handed it, and its ink, unseen, is the ink of the words beside it, so an
+     * effect that turns the element's runs each at their own pace — `wheel` —
+     * reads the runs off this and a styled sentence is one run across its
+     * spaces. A strip's join cell painted from the items beside it is here,
+     * as a `seam`, but never handed its own look, since it follows them: it is
+     * handed only a neighbour's edge the frame does not show, to be painted
+     * where the seam shows it. `confined` narrows it to the cells its owners
+     * drew. A call, so a frame whose effect does not ask lists none.
+     */
+    all(): readonly ListedCell[];
+    /**
+     * Of `all`, every cell the element shows something in — a glyph, a ground
+     * that is not the terminal's, or a line its style draws: 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 here, since nothing in it shows.
      */
-    cells(): readonly Placed[];
+    cells(): readonly ListedCell[];
     /** Every distinct ink and ground of a word cell. */
     readonly pairs: readonly Pair[];
     /** The colours the element sets itself in its word cells, by hex: never the terminal's, whatever its hex. */
@@ -171,7 +194,7 @@ export interface Drawn {
     /** The depth the frame is written at: below truecolor a moved colour lands on a palette colour. */
     readonly depth: ColorDepth;
     /** The terminal the frame is drawn on. */
-    readonly theme: TerminalTheme;
+    readonly theme: TerminalColors;
 }
 /** What an effect does to the cells of one frame: each cell's look and where it is in, its look out. Return `look` to leave a cell be. */
 export type EffectFrame = (look: CellLook, cell: EffectCell) => CellLook;
@@ -201,7 +224,7 @@ export interface EffectedOptions {
      * drawn in, and the sixteen an ANSI colour names. The terminal's own palette
      * is never queried, so the caller says what it is.
      */
-    readonly theme: TerminalTheme;
+    readonly theme: TerminalColors;
 }
 /** A frame an effect drew at a moment, and the hold the effect says it is in there. */
 export interface Moved {
@@ -220,7 +243,7 @@ export declare class Recolored implements Renderable, Measurable {
     readonly effect: Effect;
     readonly t: number;
     readonly key: string;
-    readonly theme: TerminalTheme;
+    readonly theme: TerminalColors;
     constructor(renderable: Renderable, effect: Effect, options: EffectedOptions & {
         readonly t: number;
     });
@@ -264,7 +287,7 @@ export declare class Effected implements Animation<Renderable> {
     readonly renderable: Renderable;
     readonly effect: Effect;
     readonly key: string;
-    readonly theme: TerminalTheme;
+    readonly theme: TerminalColors;
     constructor(renderable: Renderable, effect: Effect, options: EffectedOptions);
     /** The element through the effect at `t`, unstamped. */
     at(t: number): Recolored;
@@ -285,7 +308,7 @@ export declare class Effected implements Animation<Renderable> {
      * [LAW:one-source-of-truth] Read through `movedSpecs`, the one writer a
      * moved slot is written with.
      */
-    static shows(pair: Pair, to: CellColors, depth: ColorDepth, theme: TerminalTheme): CellColors;
+    static shows(pair: Pair, to: CellColors, depth: ColorDepth, theme: TerminalColors): CellColors;
 }
 /**
  * A cell's seed: FNV-1a of the element's key and the cell's position, scaled
@@ -297,6 +320,8 @@ export declare function cellSeed(key: string, row: number, col: number): number;
 export interface WalkedGlyph {
     readonly glyph: string;
     readonly cell: Placed | undefined;
+    /** The columns the glyph takes: the one measure the walk steps by, so a listed cell's width is the walk's. [LAW:one-source-of-truth] */
+    readonly width: number;
 }
 /**
  * Each glyph of each of `segments`, where its cell sits: rows and columns
@@ -330,7 +355,7 @@ export declare function confined(effect: Effect, ...owners: readonly object[]):
  * as `Effected` measures its child for every frame. Measure an element's
  * output under an effect to read the contrast its words are left at.
  */
-export declare function drawnOf(segments: Iterable<Segment>, depth: ColorDepth, theme: TerminalTheme): Drawn;
+export declare function drawnOf(segments: Iterable<Segment>, depth: ColorDepth, theme: TerminalColors): Drawn;
 /**
  * The attributes a look carries, read off anything that sets them — a
  * `Style`, or a look a frame returned with more on it than `CellAttributes`

package/dist/renderables/effect.js

@@ -362,7 +362,7 @@ function looks(segments, depth, theme) {
         const slots = { fg: (wire.color ?? DEFAULT).getTruecolor(theme, true), bg: (wire.bgcolor ?? DEFAULT).getTruecolor(theme, false) };
         const reverse = style.reverse === true;
         const terminal = onScreen({ fg: wire.color?.isDefault ?? true, bg: wire.bgcolor?.isDefault ?? true }, reverse);
-        return { segment, look: { style, wire, slots, pair: { ...onScreen(slots, reverse), terminal, reverse }, attributes: cellAttributes(style) } };
+        return { segment, look: { style, wire, slots, pair: { ...onScreen(slots, reverse), terminal, reverse }, attributes: cellAttributes(style), seam: drawnBy(style.anchor, JOIN) } };
     });
 }
 /**
@@ -385,9 +385,10 @@ export function walkGlyphs(segments) {
         let into = 0;
         return [...graphemes(segment.text)].map((glyph) => {
             const cell = glyph === "\n" ? undefined : { row, col, anchor: anchor && shiftAnchor(anchor, into) };
-            [row, col] = glyph === "\n" ? [row + 1, 0] : [row, col + cellLen(glyph)];
-            into += cellLen(glyph);
-            return { glyph, cell };
+            const width = cellLen(glyph);
+            [row, col] = glyph === "\n" ? [row + 1, 0] : [row, col + width];
+            into += width;
+            return { glyph, cell, width };
         });
     });
 }
@@ -448,27 +449,33 @@ function drawsLines(style) {
     return [style.underline, style.underline2, style.strike, style.overline, style.frame, style.encircle].some((on) => on === true);
 }
 /**
- * What `looked` draws: `Drawn`'s measure, taken once per frame. Its `cells`
- * are listed off `walked` the first time they are asked for, since only an
- * effect spread over the element asks, and a glyph walk is what measuring the
- * words alone, a segment at a time, is spared (`drawnOf`).
+ * What `looked` draws: `Drawn`'s measure, taken once per frame. Its `all`
+ * and `cells` are listed off `walked` the first time either is asked for,
+ * since only an effect spread over the element or turning its runs asks, and
+ * a glyph walk is what measuring the words alone, a segment at a time, is
+ * spared (`drawnOf`).
  */
 function measured(looked, walked, depth, theme) {
     const ground = theme.backgroundColor.hex;
-    let listed;
+    // [LAW:one-source-of-truth] One listing, each cell with whether it shows; `all` and `cells` are read off it.
+    let everything;
     const list = () => walked().flatMap(({ look, glyphs }) => {
         if (look === undefined)
             return [];
         // A blank glyph shows its ground, and any line its style draws in its ink.
         const blankShows = look.pair.bg.hex !== ground || drawsLines(look.style);
-        return glyphs.flatMap(({ glyph, cell }) => (cell !== undefined && (inked(glyph) || blankShows) ? [cell] : []));
+        return glyphs.flatMap(({ glyph, cell, width }) => (cell === undefined ? [] : [{ cell: { ...cell, width, pair: look.pair, seam: look.seam }, shows: inked(glyph) || blankShows }]));
     });
-    const words = looked.flatMap(({ segment, look }) => (look !== undefined && inked(segment.text) && !drawnBy(look.style.anchor, JOIN) ? [look.pair] : []));
+    const listed = () => (everything ??= list());
+    let all;
+    let shown;
+    const words = looked.flatMap(({ segment, look }) => (look !== undefined && inked(segment.text) && !look.seam ? [look.pair] : []));
     const pairs = [...new Map(words.map((pair) => [`${pair.fg.hex}/${pair.bg.hex}/${pair.terminal.fg}/${pair.terminal.bg}/${pair.reverse}`, pair])).values()];
     // [LAW:one-source-of-truth] A slot the terminal fills is no colour of the element's, whatever its hex.
     const own = (slot) => pairs.flatMap((pair) => (pair.terminal[slot] ? [] : [pair[slot].hex]));
     return {
-        cells: () => (listed ??= list()),
+        all: () => (all ??= listed().map(({ cell }) => cell)),
+        cells: () => (shown ??= listed().flatMap(({ cell, shows }) => (shows ? [cell] : []))),
         pairs,
         colors: new Set([...own("fg"), ...own("bg")]),
         fills: new Set(own("bg")),
@@ -496,7 +503,7 @@ export function confined(effect, ...owners) {
         return false;
     };
     // The frame as the effect sees it: the owners' cells alone. [LAW:one-source-of-truth] One narrowing, handed to both stages.
-    const narrowed = (drawn) => ({ ...drawn, cells: () => drawn.cells().filter(owned) });
+    const narrowed = (drawn) => ({ ...drawn, all: () => drawn.all().filter(owned), cells: () => drawn.cells().filter(owned) });
     // The owners' cells change when the effect's frame does.
     return (drawn) => Animation.map(effect(narrowed(drawn)), (frame) => (look, cell) => (owned(cell) ? frame(look, cell) : look));
 }

package/dist/renderables/effects.d.ts

@@ -339,15 +339,21 @@ export declare function dissolveOut(curve: Curve, z: number): Transition;
  * way round once a period — far too slowly to be seen moving, so a glance
  * sees a steady palette and an hour's absence a different one — each
  * segment of the element at its own pace. Swing: how far the segments stray
- * from one another, 0–1, 1 being half a turn apart. A segment is a fill of
- * the element's own — one of `fills`, the colours it draws as a ground — and
- * it turns at its own pace wherever it is drawn: as the ground of its cells,
- * and as the ink of the seam glyph pointing out of it into the next, so a
- * powerline cap keeps the colour of the cell it caps. An ink that is no fill
- * turns with the ground it sits on, so a cell's words and fill turn
- * together; on the terminal's ground, a run of text's ink is a segment of
- * its own. A segment's stray is slow noise of its own, at `STRAY_PERIODS`,
- * so no two keep step, and the row never shows one spread of hues twice.
+ * from one another, 0–1, 1 being half a turn apart. A segment is a region
+ * of adjacent cells of one colour of the element's own, carried as their
+ * ground or, on the terminal's ground, as their ink (`segmentsOf`), and it
+ * paces by where it sits, not by its colour: two
+ * regions of one fill at two places turn apart, and each colour of the seam
+ * a joiner drew between them turns with the region of that colour beside
+ * it, so a powerline cap keeps the colour of the cell it caps. An ink that
+ * is no fill turns with the ground it sits on, so a cell's words and fill
+ * turn together. A segment's stray is slow noise at its place, at
+ * `STRAY_PERIODS` in time and `STRAY_SPREAD` across the element, so
+ * neighbours pace a little apart and distant segments on their own, the
+ * row never shows one spread of hues twice, and a segment that grows by a
+ * column moves its hue a little, and those it pushes along as little. Only the
+ * stray reads the place: a place in the shared turn would jump a growing
+ * run by `360·t·Δ/P`, without bound in `t`.
  * A colour keeps its luminance as it turns (`hueTurned`), so every pair of
  * words reads at the contrast it rested at; at 256 colours a turned colour
  * lands on a colour the depth writes, one that keeps every pair of words it

package/dist/renderables/effects.js

@@ -675,7 +675,7 @@ export class Transition {
         this.schedule = schedule;
     }
     done(t) {
-        return this.schedule.nextChange(t) === Number.POSITIVE_INFINITY;
+        return Animation.done(this.schedule, t);
     }
 }
 /**
@@ -685,8 +685,13 @@ export class Transition {
  * glyph effect (`./glyph-effects.ts`) alike.
  */
 export function transition(seconds, effect) {
-    // Moving every frame until `seconds`, then never: the sequence carries the switch.
-    const schedule = Animation.sequence(Animation.continuous(() => undefined), seconds, Animation.constant(undefined));
+    // Moving every frame until `seconds`, then never: the sequence carries the switch. [LAW:one-source-of-truth]
+    // Reduced, a one-shot cuts from its start to its end at 0, and its schedule says so too, the one word on
+    // when the reduced frames change, so a half that lends this schedule to its frames tells the same hold.
+    const schedule = Animation.of({
+        ...Animation.sequence(Animation.continuous(() => undefined), seconds, Animation.constant(undefined)),
+        reduced: () => Animation.cut(undefined, undefined),
+    });
     const ran = new Transition((drawn) => {
         const moving = effect(drawn);
         return Animation.of({
@@ -813,20 +818,135 @@ export function dissolveOut(curve, z) {
 const STRAY_PERIODS = [211, 337];
 /** How far a segment may stray from the shared turn at swing 1, in degrees: half a turn — fully apart. */
 const STRAY = 180;
+/**
+ * The columns between two places at which their strays no longer pace
+ * alike: the noise a stray rides on is sampled at the place over this many
+ * columns a unit, so a strip's items, a dozen columns apart, pace a little
+ * apart and segments a screen apart pace on their own. Rows are the same
+ * distance apart as columns.
+ */
+const STRAY_SPREAD = 24;
+/** `cell` as a place of its own, as wide as its glyph: where no region covers it. */
+const ownPlace = (cell, width) => ({ row: cell.row, centre: cell.col + width / 2 });
+/**
+ * The segments `drawn` draws, as where each colour of each cell turns: a
+ * segment is a region of adjacent cells — beside or above one another — of
+ * one colour of the element's own, each cell carrying it as its ground or,
+ * on the terminal's ground, as its ink, read off `Drawn.all` once a frame.
+ * So a panel's ground is one segment whatever words lie on it, a blank
+ * carrying the ink keeps a styled paragraph one segment across its spaces
+ * and lines, a caption in a bar's colour written under the bar turns with
+ * it, and a blank in the terminal's ink splits a segment. A seam a joiner
+ * drew is in none, since its colours are its neighbours' edges: each colour
+ * of a seam cell turns with the region of that colour past the seam on
+ * either side — a two-cell rail reads past its other cell — so a powerline
+ * cap keeps the colour of the cell it caps, a custom joiner's handed cap
+ * included, and with the cell's own place where none is beside it — a
+ * neighbour's edge the frame does not show, handed at the seam's cell. Any
+ * other cell's colours turn with the region covering it: a letter in a
+ * neighbour's fill colour is a word, not a cap. A cell the frame lists
+ * nowhere, which a hand-built `Drawn` hands, is one column wide. The place
+ * is the region's centre column from the element's left edge, with its
+ * centre row: a region that grows by a column moves its centre by half of
+ * one, and those it pushes along by a column theirs by one, where a share
+ * of the element's extent would move every region's place with any
+ * region's growth.
+ */
+function segmentsOf(drawn) {
+    const { colors } = drawn;
+    const at = (row, col) => `${row}:${col}`;
+    const listed = new Map();
+    // Every column a seam cell covers: what a seam's colours look past to the region beside the seam.
+    const seams = new Set();
+    // The colour a cell is a region of: its own ground, else on the terminal's ground its own ink, else none.
+    const regionColour = (cell) => {
+        if (cell.seam)
+            return undefined;
+        const own = (terminal, hex) => (!terminal && colors.has(hex) ? hex : undefined);
+        return own(cell.pair.terminal.bg, cell.pair.bg.hex) ?? own(cell.pair.terminal.fg, cell.pair.fg.hex);
+    };
+    // Every column a region's cell covers, in walk order, indexed by where it is.
+    const covered = [];
+    const index = new Map();
+    for (const cell of drawn.all()) {
+        listed.set(at(cell.row, cell.col), cell);
+        const hex = regionColour(cell);
+        for (let col = cell.col; col < cell.col + cell.width; col++) {
+            if (cell.seam)
+                seams.add(at(cell.row, col));
+            if (hex === undefined)
+                continue;
+            index.set(at(cell.row, col), covered.length);
+            covered.push({ row: cell.row, col, hex });
+        }
+    }
+    // Union-find over the covered columns: two of one colour beside or above one another are one region.
+    const parent = covered.map((_, i) => i);
+    const find = (i) => {
+        while (parent[i] !== i) {
+            parent[i] = parent[parent[i]];
+            i = parent[i];
+        }
+        return i;
+    };
+    const joinWith = (i, row, col) => {
+        const j = index.get(at(row, col));
+        if (j !== undefined && covered[j].hex === covered[i].hex)
+            parent[find(i)] = find(j);
+    };
+    covered.forEach(({ row, col }, i) => {
+        joinWith(i, row, col - 1);
+        joinWith(i, row - 1, col);
+    });
+    const regions = new Map();
+    covered.forEach(({ row, col, hex }, i) => {
+        const root = find(i);
+        const region = regions.get(root);
+        if (region === undefined)
+            regions.set(root, { hex, top: row, bottom: row, left: col, right: col });
+        else
+            [region.top, region.bottom, region.left, region.right] = [Math.min(region.top, row), Math.max(region.bottom, row), Math.min(region.left, col), Math.max(region.right, col)];
+    });
+    const regionAt = (row, col) => {
+        const i = index.get(at(row, col));
+        return i === undefined ? undefined : regions.get(find(i));
+    };
+    const placeOf = (region) => ({ row: (region.top + region.bottom) / 2, centre: (region.left + region.right + 1) / 2 });
+    // The region past the seam from `col` in `step`'s direction: what a seam's colour turns with.
+    const pastSeam = (row, col, step) => {
+        let past = col;
+        while (seams.has(at(row, past)))
+            past += step;
+        return regionAt(row, past);
+    };
+    return (cell, hex) => {
+        const own = listed.get(at(cell.row, cell.col));
+        const width = own?.width ?? 1;
+        const beside = (own?.seam === true ? [pastSeam(cell.row, cell.col - 1, -1), pastSeam(cell.row, cell.col + width, 1)] : []).find((region) => region?.hex === hex);
+        const region = beside ?? regionAt(cell.row, cell.col);
+        return region === undefined ? ownPlace(cell, width) : placeOf(region);
+    };
+}
 /**
  * Wheel, as the colour of daylight going round: every hue turning the whole
  * way round once a period — far too slowly to be seen moving, so a glance
  * sees a steady palette and an hour's absence a different one — each
  * segment of the element at its own pace. Swing: how far the segments stray
- * from one another, 0–1, 1 being half a turn apart. A segment is a fill of
- * the element's own — one of `fills`, the colours it draws as a ground — and
- * it turns at its own pace wherever it is drawn: as the ground of its cells,
- * and as the ink of the seam glyph pointing out of it into the next, so a
- * powerline cap keeps the colour of the cell it caps. An ink that is no fill
- * turns with the ground it sits on, so a cell's words and fill turn
- * together; on the terminal's ground, a run of text's ink is a segment of
- * its own. A segment's stray is slow noise of its own, at `STRAY_PERIODS`,
- * so no two keep step, and the row never shows one spread of hues twice.
+ * from one another, 0–1, 1 being half a turn apart. A segment is a region
+ * of adjacent cells of one colour of the element's own, carried as their
+ * ground or, on the terminal's ground, as their ink (`segmentsOf`), and it
+ * paces by where it sits, not by its colour: two
+ * regions of one fill at two places turn apart, and each colour of the seam
+ * a joiner drew between them turns with the region of that colour beside
+ * it, so a powerline cap keeps the colour of the cell it caps. An ink that
+ * is no fill turns with the ground it sits on, so a cell's words and fill
+ * turn together. A segment's stray is slow noise at its place, at
+ * `STRAY_PERIODS` in time and `STRAY_SPREAD` across the element, so
+ * neighbours pace a little apart and distant segments on their own, the
+ * row never shows one spread of hues twice, and a segment that grows by a
+ * column moves its hue a little, and those it pushes along as little. Only the
+ * stray reads the place: a place in the shared turn would jump a growing
+ * run by `360·t·Δ/P`, without bound in `t`.
  * A colour keeps its luminance as it turns (`hueTurned`), so every pair of
  * words reads at the contrast it rested at; at 256 colours a turned colour
  * lands on a colour the depth writes, one that keeps every pair of words it
@@ -839,46 +959,57 @@ export function wheel(curve, z) {
     requireCurve(curve);
     requireZ("wheel", z);
     const P = curve.seconds;
-    // A segment's seed, from the colour it is.
-    const seed = (hex) => hash(Number.parseInt(hex.slice(1), 16) * 1e-4, 17.3 + z);
-    const stray = (s, t) => noise(t / STRAY_PERIODS[0], 5.9 + 97 * s, z) + 0.5 * noise(t / STRAY_PERIODS[1], 2.3 + 89 * s, z + 7.1);
+    // A segment's stray at its place. The fractions of the `y` offsets, .9
+    // and .3, are ones no centre — a half-integer over `STRAY_SPREAD` columns
+    // — reaches, so no sample's `y` is whole: a sample with a whole `y` and
+    // `z` sits on a lattice line along `t`, where the noise is zero at every
+    // multiple of the period and every segment on it would return to the
+    // shared turn together. `z` needs no such offset; its two differ so the
+    // two noises are read from different fields.
+    const stray = ({ row, centre }, t) => noise(t / STRAY_PERIODS[0], centre / STRAY_SPREAD + 5.9, z + row / STRAY_SPREAD + 2.3) + 0.5 * noise(t / STRAY_PERIODS[1], centre / STRAY_SPREAD + 97.3, z + row / STRAY_SPREAD + 7.1);
     // Measured from where it stood at the start, as pulse's wander is, so the
     // first frame turns nothing and the second has turned only a frame's worth.
-    const turned = (hex, t) => {
-        const s = seed(hex);
-        return (360 * t) / P + curve.swing * STRAY * ((stray(s, t) - stray(s, 0)) / 1.5);
-    };
+    const turned = (place, t) => (360 * t) / P + curve.swing * STRAY * ((stray(place, t) - stray(place, 0)) / 1.5);
     // A turned colour's bounds rest on what a frame draws, never on `t`: settled once for each.
     const settled = new WeakMemo();
     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);
-        // The segment an own colour turns with: itself if a fill or beside no own colour, else the one beside it.
-        const segmentOf = (color, other, theirs) => (fills.has(color.hex) || !theirs ? color.hex : other.hex);
-        // A colour as it turns with a segment: written one way wherever it is drawn in a frame.
-        const keyOf = (color, segment) => `${color.hex} ${segment}`;
+        // The colour an own colour is bounded with, under which its bounds are
+        // kept: itself if a fill or beside no own colour, else the ground beside
+        // it. Where it turns is `segmentsOf`'s, not this.
+        const boundWith = (color, other, theirs) => (fills.has(color.hex) || !theirs ? color.hex : other.hex);
+        // The bounds a colour turns within, by the colour it is bounded with: one bound for every place a frame writes it at.
+        const keyOf = (color, bound) => `${color.hex} ${bound}`;
         const bounds = settled.get(theme, () => new Memo()).get(drawnKey(drawn), () => turnedBounds(drawn.pairs, depth, (pair, side) => {
             const other = side === "fg" ? "bg" : "fg";
-            return own(pair.terminal[side], pair[side]) ? keyOf(pair[side], segmentOf(pair[side], pair[other], own(pair.terminal[other], pair[other]))) : undefined;
+            return own(pair.terminal[side], pair[side]) ? keyOf(pair[side], boundWith(pair[side], pair[other], own(pair.terminal[other], pair[other]))) : undefined;
         }));
         // 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);
+        // Where each cell's colours turn, read off the frame's listing once.
+        const placeOf = segmentsOf(drawn);
         return Animation.continuous((t) => {
+            // [LAW:one-source-of-truth] A colour turned at a place within a
+            // segment's bounds is written once a frame, wherever it falls: the
+            // key is the bounds' key with the place, so one entry never serves
+            // two bounds.
             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 choose = (color, bound, place) => {
+                const turn = hueTurned(color, turned(place, t));
+                return nearestWithin(turn.looks, color, depth === ColorDepth.TRUECOLOR ? turn.either.map(measured) : indexed, bounds.get(keyOf(color, bound)) ?? UNBOUNDED);
             };
-            const write = (color, segment) => {
-                const found = written.get(keyOf(color, segment)) ?? choose(color, segment);
-                written.set(keyOf(color, segment), found);
+            const write = (color, bound, place) => {
+                const key = `${keyOf(color, bound)} ${place.row}:${place.centre}`;
+                const found = written.get(key) ?? choose(color, bound, place);
+                written.set(key, 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);
+                const turn = (color, ours, other, theirs) => ours ? write(color, boundWith(color, other, theirs), placeOf(cell, color.hex)) : color;
                 return { ...shown, fg: turn(shown.fg, mine.fg, shown.bg, mine.bg), bg: turn(shown.bg, mine.bg, shown.fg, mine.fg) };
             };
         });
@@ -937,9 +1068,10 @@ const ROUNDING_GAP = Math.log(1.031);
  * A pair's contrast to spare above its floor, as a gap between stops, is
  * shared out evenly between its sides that turn: the lighter may land that
  * much darker, the darker that much lighter, and never further. So a colour
- * written once for every pair it is drawn in is bounded by each of them at
- * once, and a frame writes it one way wherever it falls. A pair whose floor
- * is 1:1 holds however it is drawn, and bounds nothing.
+ * bounded once for every pair it is drawn in is bounded by each of them at
+ * once, and every way a frame writes it — the wheel turns it at each place
+ * it falls — lands within them. A pair whose floor is 1:1 holds however it
+ * is drawn, and bounds nothing.
  */
 function turnedBounds(pairs, depth, turnedAs) {
     const bounds = new Map();