@textui/widgets 0.7.0 → 0.8.0

package/dist/display/pagga.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The `pagga` table, transcribed.
+ *
+ * Three rows of half cells on a `░` ground - which is the difference between
+ * this and `half`, and the whole reason for it. `half` draws letters and
+ * leaves the space around them empty; this draws them *on* something, so the
+ * banner is a block of texture with the letters knocked out of it rather than
+ * strokes floating on the terminal's background.
+ *
+ * That ground is why the glyphs are four columns rather than three. The first
+ * column of every one is the `░` gutter, so the letters butt together and the
+ * ground runs unbroken between them - and why the space is a glyph of its own
+ * rather than a gap, because a gap would be a hole in it.
+ *
+ * One case: the source has one set of letters and lowercase folds to it.
+ *
+ * The punctuation comes from two places and the table says which is which. The
+ * marks above the divider are transcribed - and the brackets among them took a
+ * correction, because the source lists three pairs with nothing saying which is
+ * which and shape alone does not settle it: the square-cornered pair reads as
+ * `(` `)` just as happily as `[` `]`, and it was the wrong one of the two.
+ *
+ * The marks below it are drawn to match, because the source has none of them
+ * at all - no full stop, no comma, no slash. Which is worth knowing when one
+ * of them looks out of place: it is not a transcription error, it is a
+ * judgement, and a paste would replace it.
+ */
+export declare const PAGGA: Record<string, string[]>;
+//# sourceMappingURL=pagga.d.ts.map

package/dist/display/pagga.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagga.d.ts","sourceRoot":"","sources":["../../src/display/pagga.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA0E1C,CAAC"}

package/dist/display/pagga.js

@@ -0,0 +1,101 @@
+/**
+ * The `pagga` table, transcribed.
+ *
+ * Three rows of half cells on a `░` ground - which is the difference between
+ * this and `half`, and the whole reason for it. `half` draws letters and
+ * leaves the space around them empty; this draws them *on* something, so the
+ * banner is a block of texture with the letters knocked out of it rather than
+ * strokes floating on the terminal's background.
+ *
+ * That ground is why the glyphs are four columns rather than three. The first
+ * column of every one is the `░` gutter, so the letters butt together and the
+ * ground runs unbroken between them - and why the space is a glyph of its own
+ * rather than a gap, because a gap would be a hole in it.
+ *
+ * One case: the source has one set of letters and lowercase folds to it.
+ *
+ * The punctuation comes from two places and the table says which is which. The
+ * marks above the divider are transcribed - and the brackets among them took a
+ * correction, because the source lists three pairs with nothing saying which is
+ * which and shape alone does not settle it: the square-cornered pair reads as
+ * `(` `)` just as happily as `[` `]`, and it was the wrong one of the two.
+ *
+ * The marks below it are drawn to match, because the source has none of them
+ * at all - no full stop, no comma, no slash. Which is worth knowing when one
+ * of them looks out of place: it is not a transcription error, it is a
+ * judgement, and a paste would replace it.
+ */
+export const PAGGA = {
+    0: ["░▄▀▄", "░█/█", "░░▀░"],
+    1: ["░▀█░", "░░█░", "░▀▀▀"],
+    2: ["░▀▀▄", "░▄▀░", "░▀▀▀"],
+    3: ["░▀▀█", "░░▀▄", "░▀▀░"],
+    4: ["░█░█", "░░▀█", "░░░▀"],
+    5: ["░█▀▀", "░▀▀▄", "░▀▀░"],
+    6: ["░▄▀▀", "░█▀▄", "░░▀░"],
+    7: ["░▀▀█", "░▄▀░", "░▀░░"],
+    8: ["░▄▀▄", "░▄▀▄", "░░▀░"],
+    9: ["░▄▀▄", "░░▀█", "░▀▀░"],
+    A: ["░█▀█", "░█▀█", "░▀░▀"],
+    B: ["░█▀▄", "░█▀▄", "░▀▀░"],
+    C: ["░█▀▀", "░█░░", "░▀▀▀"],
+    D: ["░█▀▄", "░█░█", "░▀▀░"],
+    E: ["░█▀▀", "░█▀▀", "░▀▀▀"],
+    F: ["░█▀▀", "░█▀▀", "░▀░░"],
+    G: ["░█▀▀", "░█░█", "░▀▀▀"],
+    H: ["░█░█", "░█▀█", "░▀░▀"],
+    I: ["░▀█▀", "░░█░", "░▀▀▀"],
+    J: ["░▀▀█", "░░░█", "░▀▀░"],
+    K: ["░█░█", "░█▀▄", "░▀░▀"],
+    L: ["░█░░", "░█░░", "░▀▀▀"],
+    M: ["░█▄█", "░█░█", "░▀░▀"],
+    N: ["░█▀█", "░█░█", "░▀░▀"],
+    O: ["░█▀█", "░█░█", "░▀▀▀"],
+    P: ["░█▀█", "░█▀▀", "░▀░░"],
+    Q: ["░▄▀▄", "░█\\█", "░░▀\\"],
+    R: ["░█▀▄", "░█▀▄", "░▀░▀"],
+    S: ["░█▀▀", "░▀▀█", "░▀▀▀"],
+    T: ["░▀█▀", "░░█░", "░░▀░"],
+    U: ["░█░█", "░█░█", "░▀▀▀"],
+    V: ["░█░█", "░▀▄▀", "░░▀░"],
+    W: ["░█░█", "░█▄█", "░▀░▀"],
+    X: ["░█░█", "░▄▀▄", "░▀░▀"],
+    Y: ["░█░█", "░░█░", "░░▀░"],
+    Z: ["░▀▀█", "░▄▀░", "░▀▀▀"],
+    "!": ["░█", "░▀", "░▀"],
+    "?": ["░▄▀▄", "░█▀▀", "░░▀░"],
+    "#": ["░▄█▄█▄", "░▄█▄█▄", "░░▀░▀░"],
+    "$": ["░▄█▀", "░▀██", "░▀▀░"],
+    "%": ["░▀░█", "░▄▀░", "░▀░▀"],
+    "&": ["░▄▀░", "░▄█▀", "░░▀▀"],
+    "*": ["░▄░▄", "░▄█▄", "░▄▀▄"],
+    "[": ["░█▀░", "░█░░", "░▀▀░"],
+    "]": ["░▀█░", "░░█░", "░▀▀░"],
+    "_": ["░░░░", "░░░░", "░▀▀▀"],
+    "+": ["░░░░", "░▄█▄", "░░▀░"],
+    "-": ["░░░░", "░▄▄▄", "░░░░"],
+    "=": ["░░░░", "░▀▀▀", "░▀▀▀"],
+    "\"": ["░▀░▀", "░░░░", "░░░░"],
+    "'": ["░▀", "░░", "░░"],
+    "(": ["░▄▀░", "░█░░", "░░▀░"],
+    ")": ["░▀▄░", "░░█░", "░▀░░"],
+    "{": ["░░█▀", "░▀▄░", "░░▀▀"],
+    "}": ["░▀█░", "░░▄▀", "░▀▀░"],
+    "<": ["░░▄▀", "░▀▄░", "░░░▀"],
+    ">": ["░▀▄░", "░░▄▀", "░▀░░"],
+    " ": ["░░░░", "░░░░", "░░░░"],
+    // Drawn to match, not transcribed: the source has none of these. A period
+    // is the top half of the last cell, sitting on the line, and a comma is the
+    // bottom half of it, hanging below - which is what those two marks are.
+    ".": ["░░", "░░", "░▀"],
+    ",": ["░░", "░░", "░▄"],
+    ":": ["░░", "░▀", "░▀"],
+    ";": ["░░", "░▀", "░▄"],
+    "/": ["░░▄▀", "░▄▀░", "░▀░░"],
+    "\\": ["░▀▄░", "░░▀▄", "░░░▀"],
+    "@": ["░▄▀▄", "░█▄█", "░░▀▀"],
+    "^": ["░▄▀▄", "░░░░", "░░░░"],
+    "`": ["░▀▄", "░░░", "░░░"],
+    "|": ["░█", "░█", "░▀"],
+    "~": ["░░░░", "░▄▀▄", "░░░░"],
+};

package/dist/display/pattern.d.ts

@@ -0,0 +1,117 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+import type { Ink } from './color-text.js';
+/**
+ * A tile, repeated.
+ *
+ * A texture for a box, or a motif over one: the tile is stamped across and
+ * down until the box runs out, and `asBackground` (the default) or `asOverlay`
+ * says which side of the children it lands on.
+ *
+ * The two modes are document order and not much else. Painting walks the tree
+ * in the order components were written, so a layer emitted before the children
+ * ends up under them and one emitted after ends up over them. `zIndex` looks
+ * like it should decide this and does not: it sorts the layout boxes, while
+ * `paintTree` walks the instance children, so the property is inert for
+ * painting today. Relying on order is what actually works.
+ */
+export interface PatternProps extends BoxProps {
+    /** The tile. One string per row, or one string with newlines in it. */
+    tile: string | string[];
+    /**
+     * The tile to draw on a terminal that cannot manage the first one.
+     *
+     * A pattern is the one component whose whole content is glyphs, so it is the
+     * one that breaks worst on an `unicode: 'ascii'` terminal - and unlike a
+     * border, the library cannot guess a fallback for a tile it has never seen.
+     * Whoever picks the glyphs picks the substitute.
+     */
+    ascii?: string | string[];
+    /**
+     * Repeats across.
+     *
+     * Unset or `0` draws the tile once. `-1` repeats until the box runs out.
+     * A positive number draws that many, and the box still clips it.
+     */
+    x?: number;
+    /** Repeats down. Same rules as `x`. */
+    y?: number;
+    /** Stop short of the box, in cells. Unset means the box decides. */
+    limit?: {
+        width?: number;
+        height?: number;
+    };
+    /**
+     * Cells added after each copy, before the next one starts.
+     *
+     * Unset is flush, which is what a texture wants. Spacing turns the same tile
+     * into a motif with air around it - the difference between wrapping paper
+     * and a wallpaper: `10 + 10 = 20`, and `spacing.x = 5` makes it `25`.
+     *
+     * Not `gap`. A box already has one, it means the space between *children*,
+     * and a component that used the same word for the space between copies of
+     * its own tile would be two different distances under one name.
+     */
+    spacing?: {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * Up to this many extra cells between copies, chosen at random per step.
+     *
+     * The standard name for it: a jitter is a random displacement applied to
+     * positions that would otherwise be regular, and breaking a lattice is what
+     * it is for. Not a deviation, which in statistics is a spread about a mean,
+     * and not a factor, which is what it multiplied before it was a limit.
+     *
+     * A limit, not a factor: `jitter.x = 6` is "somewhere between flush and six
+     * cells further on", dealt again for every step. Unset or `0` is the grid,
+     * every copy exactly a tile from the last, which is what the default
+     * preserves.
+     *
+     * It stacks with `spacing` rather than replacing it. Spacing is the air you
+     * always want and this is how much more of it is left to chance, so
+     * `spacing.x = 4, jitter.x = 6` steps by a tile plus four to ten.
+     *
+     * A jitter on `x` also stops the copies lining up into columns - see
+     * `offsets`, and the screenshot that made it necessary.
+     */
+    jitter?: {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * The deal, when there is a jitter.
+     *
+     * A pattern re-renders whenever its box changes, and one that reached for
+     * `Math.random()` while painting would shuffle itself on every frame - a
+     * texture that crawls. The seed makes the scatter a function of the props,
+     * so the same pattern is the same pattern until somebody changes the number.
+     */
+    seed?: number;
+    /**
+     * Cells holding this character are left unpainted, so whatever is behind
+     * shows through. `null` paints every cell, spaces included.
+     */
+    transparent?: string | null;
+    /**
+     * Colour the tile cell by cell, the way [`ColorText`](color-text.md) colours
+     * text: a ramp between stops, a palette walked in runs, or a function of the
+     * cell. The coordinates are the pattern's own - `col` and `line` count cells
+     * of the box it fills, not of one copy of the tile - so `{ gradient }` runs
+     * across the whole texture and `{ cycle, every }` walks it.
+     *
+     * Stated, the tile is painted on a canvas rather than drawn as text, and a
+     * canvas is not told what it was nested in: every cell takes this
+     * component's own `fg` where the ink declines one, not the colour of the row
+     * it happens to sit in. That is the trade `ColorText` makes for the same
+     * reason, and it is the only difference between an inked tile and a plain
+     * one.
+     */
+    ink?: Ink;
+    /** Paint under the children. The default, and what a texture wants. */
+    asBackground?: boolean;
+    /** Paint over the children instead. */
+    asOverlay?: boolean;
+}
+export declare const Pattern: (props: PatternProps) => RenderOutput;
+//# sourceMappingURL=pattern.d.ts.map

package/dist/display/pattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern.d.ts","sourceRoot":"","sources":["../../src/display/pattern.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAA+B,YAAY,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,uEAAuE;IACvE,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B;;;;;OAKG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;;;;;;;;;;;;OAaG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,uEAAuE;IACvE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA8HD,eAAO,MAAM,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,YA+L9C,CAAC"}

package/dist/display/pattern.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx } from "@textui/core/jsx-runtime";
+import { defineComponent, useCapabilities, useMeasure } from '@textui/core';
+import { inkCellStyle, inkOwnStyle, painterOf } from './color-text.js';
+/**
+ * The tile as equal-length rows. A ragged tile pads rather than tears.
+ *
+ * Only the blank rows at the ends go - those are how a string written across
+ * several lines begins and ends. A blank row in the middle is a row of
+ * transparent cells somebody drew on purpose, and dropping it silently
+ * shortens their tile.
+ */
+function rowsOf(tile) {
+    const rows = Array.isArray(tile) ? [...tile] : tile.split('\n');
+    while (rows.length > 0 && rows[0] === '')
+        rows.shift();
+    while (rows.length > 0 && rows[rows.length - 1] === '')
+        rows.pop();
+    const width = Math.max(0, ...rows.map((row) => [...row].length));
+    return rows.map((row) => row.padEnd(width, ' '));
+}
+/**
+ * How many copies to draw along one axis.
+ *
+ * Unset and zero mean the same thing - once, no repetition - because "repeat
+ * it zero times" and "do not repeat it" are the same request, and treating
+ * zero as *nothing at all* makes an unset prop and a computed one behave
+ * differently for no reason anyone would want.
+ *
+ * `-1` is "as many as fit", which with a gap or a deviation is not arithmetic
+ * any more - it is however many the walk gets through. The count is an upper
+ * bound there rather than the answer.
+ */
+function repeats(count, tile, room) {
+    if (count === undefined || count === 0)
+        return 1;
+    if (count < 0)
+        return tile > 0 ? Math.ceil(room / tile) : 1;
+    return count;
+}
+/**
+ * A small deterministic generator, so a deviation is a deal rather than a
+ * shuffle. `mulberry32`: the point is repeatability, not statistics.
+ */
+function random(seed) {
+    let state = seed >>> 0;
+    return () => {
+        state = (state + 0x6d2b79f5) >>> 0;
+        let t = state;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/**
+ * Where each copy starts along one axis.
+ *
+ * The step is a tile, plus whatever the gap and the deviation ask for:
+ *
+ * - neither - `tile`, which is the grid, and exactly what this drew before
+ *   either of them existed
+ * - spacing - `tile + spacing`, the same grid with air in it
+ * - a deviation - `tile + rand * deviation * tile`, so `1` can skip a whole
+ *   tile and land anywhere in the one after
+ * - both - `tile + rand * deviation * spacing`, because once there is a
+ *   spacing it is the spacing being shared out rather than the tile
+ *
+ * A jitter also moves where the walk *starts*, backwards, by up to a step.
+ *
+ * Without that, a tile as wide as the box is drawn once at zero and the
+ * jitter has nothing to act on - there is no second copy for the step to
+ * be different from, so every seed deals the same picture. It is the case a
+ * sparse tile is most likely to be in: a big tile with two marks on it is
+ * somebody scattering by hand, and the whole point of the seed there is that
+ * the scatter moves.
+ *
+ * Backwards rather than forwards, so the phase shows as a different slice of
+ * the pattern rather than as a blank margin down the left. The walk then needs
+ * one more copy to reach the far edge, which is why `fill` extends the count.
+ */
+function offsets(count, tile, room, spacing, 
+/** Up to this many extra cells per step. */
+jitter, next, 
+/** Repeating to fill, rather than drawing a stated number of copies. */
+fill) {
+    if (tile <= 0)
+        return [];
+    const out = [];
+    const step = tile + spacing;
+    // Only when filling. A caller who asked for three copies put them there;
+    // sliding those off the edge would be answering a different question.
+    const phase = fill && jitter > 0
+        ? -Math.round(next() * (step + jitter))
+        : 0;
+    let at = phase;
+    const total = phase < 0 ? count + 1 : count;
+    for (let i = 0; i < total && at < room; i++) {
+        out.push(at);
+        // A limit rather than a factor: the extra is somewhere in `0..jitter`,
+        // dealt again for every step.
+        at += step + (jitter > 0 ? Math.round(next() * jitter) : 0);
+    }
+    return out;
+}
+/** The runs of paintable cells in one row, so gaps stay see-through. */
+function runs(row, transparent) {
+    const cells = [...row];
+    if (transparent === null)
+        return cells.length > 0 ? [{ at: 0, text: row }] : [];
+    const out = [];
+    let start = -1;
+    for (let i = 0; i <= cells.length; i++) {
+        const paint = i < cells.length && cells[i] !== transparent;
+        if (paint && start < 0)
+            start = i;
+        else if (!paint && start >= 0) {
+            out.push({ at: start, text: cells.slice(start, i).join('') });
+            start = -1;
+        }
+    }
+    return out;
+}
+export const Pattern = defineComponent('Pattern', (props) => {
+    const { tile, ascii, x, y, limit, transparent = ' ', spacing, jitter, seed = 1, ink, asOverlay, asBackground: _asBackground, children, ...rest } = props;
+    const capabilities = useCapabilities();
+    // The box this pattern was given. Zero on the first pass, real on the
+    // second - which is why `-1` needs a frame to find its extent.
+    const measured = useMeasure();
+    const rows = rowsOf(capabilities.unicode === 'ascii' && ascii !== undefined ? ascii : tile);
+    const tileWidth = rows[0] ? [...rows[0]].length : 0;
+    const tileHeight = rows.length;
+    const room = {
+        width: Math.min(measured.width, limit?.width ?? Number.POSITIVE_INFINITY),
+        height: Math.min(measured.height, limit?.height ?? Number.POSITIVE_INFINITY),
+    };
+    const across = repeats(x, tileWidth, room.width);
+    const down = repeats(y, tileHeight, room.height);
+    // One generator for both axes, drawn from in a fixed order, so neither
+    // depends on the box's size.
+    const next = random(seed);
+    const lines = offsets(down, tileHeight, room.height, spacing?.y ?? 0, jitter?.y ?? 0, next, (y ?? 0) < 0);
+    /*
+     * A walk across for *each* row of copies, not one shared by all of them.
+     *
+     * This is what the difference between "irregular" and "not a lattice"
+     * turns out to be. With one set of column positions, every row starts its
+     * copies at the same offsets - so the copies still line up into columns,
+     * and a sky of stars drawn that way still has visible rows and columns no
+     * matter how uneven the spacing along each axis is. You can draw the grid
+     * on a screenshot with a ruler, which is exactly what happened.
+     *
+     * Re-dealing the walk per row costs one pass each and breaks the
+     * alignment, because row two's copies are nowhere near row one's.
+     * Without a jitter there is nothing to re-deal, so the walk is
+     * computed once and shared - and the output is the grid it always was.
+     */
+    const shared = (jitter?.x ?? 0) === 0
+        ? offsets(across, tileWidth, room.width, spacing?.x ?? 0, 0, next, (x ?? 0) < 0)
+        : null;
+    const columnsFor = () => shared ?? offsets(across, tileWidth, room.width, spacing?.x ?? 0, jitter?.x ?? 0, next, (x ?? 0) < 0);
+    /*
+     * Every copy placed on its own, not as a cell of a grid.
+     *
+     * Re-dealing the walk per row breaks the columns; it does not break the
+     * rows, because every copy in one row still shares a `top`. A sky drawn
+     * that way still has marks lined up in bands - which is visible the
+     * moment somebody puts a ruler on a screenshot.
+     *
+     * So a copy also wobbles up or down by its own amount, out of the same
+     * budget as the vertical step. That is the last thing holding the lattice
+     * together, and with it gone the placements are a scatter that happens to
+     * have been generated in reading order.
+     */
+    const wobble = jitter?.y ?? 0;
+    const placements = lines.flatMap((top) => columnsFor().map((left) => ({
+        left,
+        top: wobble > 0 ? top + Math.round(next() * wobble) - Math.round(wobble / 2) : top,
+    })));
+    const widest = Math.max(0, ...placements.map(({ left }) => left + tileWidth));
+    const last = {
+        x: Math.max(0, widest),
+        y: Math.max(0, (lines[lines.length - 1] ?? 0) + tileHeight),
+    };
+    const painted = {
+        width: Math.min(last.x, room.width),
+        height: Math.min(last.y, room.height),
+    };
+    /*
+     * Stamped into a grid, then split into runs.
+     *
+     * The rows used to be built by repeating the tile's own string, which is
+     * shorter and only works while every copy is exactly a tile from the last.
+     * With a gap or a deviation the copies are at arbitrary offsets, so the
+     * grid is composed first and read off afterwards - and the reading is the
+     * same `runs` split as before, which is what keeps a transparent cell
+     * transparent and adjacent cells in one `text` rather than one apiece.
+     *
+     * With neither prop set the offsets come out as `0, tile, 2*tile, ...` and
+     * the composed rows are identical to what the repeat produced.
+     */
+    const cells = [];
+    if (tileWidth > 0 && painted.width > 0 && painted.height > 0) {
+        const blank = transparent ?? ' ';
+        const grid = Array.from({ length: painted.height }, () => Array.from({ length: painted.width }, () => blank));
+        for (const { top, left } of placements) {
+            for (let r = 0; r < tileHeight; r++) {
+                // A phased or wobbled copy starts above and to the left of the box,
+                // so part of it is outside. Those cells are simply not written; the
+                // rest of the copy still lands.
+                const row = grid[top + r];
+                if (top + r < 0 || !row)
+                    continue;
+                const source = [...rows[r]];
+                for (let c = 0; c < tileWidth; c++) {
+                    const at = left + c;
+                    if (at >= 0 && at < painted.width)
+                        row[at] = source[c];
+                }
+            }
+        }
+        if (ink === undefined) {
+            grid.forEach((row, y1) => {
+                for (const run of runs(row.join(''), transparent)) {
+                    cells.push(_jsx("text", { position: "absolute", top: y1, left: run.at, content: run.text }, `${y1}:${run.at}`));
+                }
+            });
+        }
+        else {
+            // One cell at a time, because one colour at a time is the whole point
+            // of an ink. A cell the `transparent` character owns is skipped rather
+            // than painted over: it is not the tile's to draw.
+            cells.push(_jsx("canvas", { position: "absolute", top: 0, left: 0, width: painted.width, height: painted.height, draw: (surface, ctx) => {
+                    const ownProps = props;
+                    const base = inkCellStyle(inkOwnStyle(ownProps, ctx), ctx, props.link);
+                    const paint = painterOf(ink, ctx);
+                    for (let y1 = 0; y1 < grid.length; y1++) {
+                        const row = grid[y1];
+                        for (let x1 = 0; x1 < row.length; x1++) {
+                            const char = row[x1];
+                            if (transparent !== null && char === transparent)
+                                continue;
+                            const style = paint({
+                                char, col: x1, line: y1, index: x1,
+                                offset: y1 * painted.width + x1,
+                                width: painted.width, height: painted.height,
+                                blockWidth: painted.width,
+                            });
+                            surface.put(x1, y1, char, style ? { ...base, ...style } : base);
+                        }
+                    }
+                } }, "ink"));
+        }
+    }
+    // Absolute, so the pattern never pushes the children around, and hidden,
+    // so a partial tile at the edge is cut rather than allowed to overflow.
+    const layer = (_jsx("box", { position: "absolute", top: 0, left: 0, width: painted.width, height: painted.height, overflow: "hidden", children: cells }));
+    return (_jsx("box", { position: "relative", ...rest, children: asOverlay === true ? [children, layer] : [layer, children] }));
+});

package/dist/display/spinner.d.ts

@@ -2,6 +2,8 @@ import type { BoxProps, SemanticVariant } from '@textui/core';
 export interface SpinnerProps extends BoxProps {
     label?: string;
     tone?: SemanticVariant;
+    frames?: string[];
 }
+export declare const DEFAULT_FRAMES: string[];
 export declare const Spinner: (props: SpinnerProps) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=spinner.d.ts.map

package/dist/display/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/display/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,8DAUlB,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/display/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,UAAwB,CAAC;AAEpD,eAAO,MAAM,OAAO,8DAUlB,CAAC"}

package/dist/display/spinner.js

@@ -1,9 +1,10 @@
 import { defineComponent, h, useFrame, useTheme } from '@textui/core';
 import { TONE as TONE_COLOR } from '../tone.js';
-export const Spinner = defineComponent('Spinner', ({ label, tone = 'accent', ...rest }) => {
+export const DEFAULT_FRAMES = ['-', '\\', '|', '/'];
+export const Spinner = defineComponent('Spinner', ({ label, tone = 'accent', frames: customFrames, ...rest }) => {
     const theme = useTheme();
     const frame = useFrame(10);
-    const frames = theme.glyphs.spinner;
+    const frames = customFrames ?? theme.glyphs.spinner ?? DEFAULT_FRAMES;
     const glyph = frames[frame % frames.length] ?? frames[0] ?? '*';
     return h('box', { role: 'status', direction: 'row', gap: 1, ...rest }, h('text', { content: glyph, fg: TONE_COLOR[tone] }), label ? h('text', { content: label }) : null);
 });

package/dist/navigation/menu.d.ts

@@ -55,5 +55,7 @@ export interface MenuProps extends BoxProps {
      */
     interactive?: boolean;
 }
+/** The name a theme styles a menu row under. See `LIST`. */
+export declare const MENU = "Menu";
 export declare const Menu: (props: MenuProps) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=menu.d.ts.map

package/dist/navigation/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/navigation/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,IAAI,2DAmIf,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/navigation/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,4DAA4D;AAC5D,eAAO,MAAM,IAAI,SAAS,CAAC;AAE3B,eAAO,MAAM,IAAI,2DA8If,CAAC"}

package/dist/navigation/menu.js

@@ -1,6 +1,8 @@
 import { defineComponent, h, stringWidth, useFocus, useI18n, useInput, useState, useTheme } from '@textui/core';
 import { Marquee } from '../display/index.js';
 import { TONE } from '../tone.js';
+/** The name a theme styles a menu row under. See `LIST`. */
+export const MENU = 'Menu';
 export const Menu = defineComponent('Menu', (props) => {
     const theme = useTheme();
     const i18n = useI18n();
@@ -58,14 +60,19 @@ export const Menu = defineComponent('Menu', (props) => {
         // The description yields first, and by a lot. It is the elaboration;
         // the label is the thing being chosen, and a row reading "Accept ed…"
         // beside a full sentence has given up the wrong half.
+        //
+        // On the row under the cursor the foreground is `undefined`, not a
+        // token: what is written on a selection is the theme's, and a hard
+        // `onSelected` here would be a second answer to the same question that
+        // a theme restating `Menu.focused.fg` could not reach.
         item.description && !below
             ? h(Marquee, {
                 content: item.description,
                 active,
-                fg: active ? 'inverted' : 'muted',
+                fg: active ? undefined : 'muted',
                 shrink: 8,
             })
-            : null, item.shortcut ? h('text', { content: item.shortcut, fg: active ? 'inverted' : 'subtle' }) : null, 
+            : null, item.shortcut ? h('text', { content: item.shortcut, fg: active ? undefined : 'subtle' }) : null, 
         // Present but empty means "this opens something, contents unknown" -
         // which is what the command palette knows about an argument whose
         // choices it has not resolved yet.
@@ -74,12 +81,18 @@ export const Menu = defineComponent('Menu', (props) => {
             key: item.id,
             role: 'menuitem',
             label: item.label,
+            styleAs: MENU,
             selected: active,
+            // The keyboard is the menu's, so the row is told - which is what lets
+            // `Menu.selected` be the dimmer fill a menu shows when something else
+            // has taken the keyboard, and `Menu.focused` the one it shows while
+            // the reader is moving through it.
+            focused: active && focus.focused,
             direction: 'column',
             // One background over both lines: a highlight that stopped after the
-            // label would split the row it is highlighting in two.
-            bg: active ? 'selected' : undefined,
-            fg: item.disabled ? 'disabled' : active ? 'inverted' : item.tone ? TONE[item.tone] : undefined,
+            // label would split the row it is highlighting in two. What it is
+            // filled with is the theme's to say.
+            fg: item.disabled ? 'disabled' : active ? undefined : item.tone ? TONE[item.tone] : undefined,
             onClick: () => { if (!item.disabled)
                 onSelect?.(item.id, item); },
         }, head, 
@@ -94,7 +107,7 @@ export const Menu = defineComponent('Menu', (props) => {
             h(Marquee, {
                 content: item.description,
                 active,
-                fg: active ? 'inverted' : 'muted',
+                fg: active ? undefined : 'muted',
                 flex: 1,
             }))
             : null);

package/dist/navigation/tabs.d.ts

@@ -16,5 +16,7 @@ export interface TabsProps extends BoxProps {
     /** Take focus on mount, so the keyboard has somewhere to be. */
     autoFocus?: boolean;
 }
+/** The name a theme styles a tab under. See `LIST`. */
+export declare const TABS = "Tabs";
 export declare const Tabs: (props: TabsProps) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=tabs.d.ts.map

package/dist/navigation/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/navigation/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,2DAiDf,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/navigation/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,uDAAuD;AACvD,eAAO,MAAM,IAAI,SAAS,CAAC;AAE3B,eAAO,MAAM,IAAI,2DAyDf,CAAC"}