@textui/widgets 0.1.0 → 0.3.0

package/dist/data/feed.js

@@ -19,7 +19,7 @@ import { FeedEntry, FeedScrollbar } from './shared.js';
  * list of things that are not one line tall".
  */
 export const Feed = defineComponent('Feed', (props) => {
-    const { children, follow: followProp, onFollowChange, selectedIndex, onSelect, onActivate, scrollbar = true, focusable = true, autoFocus, focusId, id, ...rest } = props;
+    const { children, follow: followProp, onFollowChange, selectedIndex, onSelect, onActivate, pageKeys = 'focused', scrollbar = true, focusable = true, autoFocus, focusId, id, ...rest } = props;
     const focus = useFocus({
         ...(focusId ? { id: focusId } : {}),
         disabled: !focusable,
@@ -28,6 +28,20 @@ export const Feed = defineComponent('Feed', (props) => {
     const measured = useMeasure();
     const extent = useScrollExtent();
     const heights = useRef([]);
+    /**
+     * The width those heights were measured at.
+     *
+     * A height is a statement about a width - what a paragraph wrapped to in a
+     * pane this wide - so a resize does not make them stale, it makes them
+     * about a layout that no longer exists. Kept and compared rather than
+     * ignored, because the alternative is a feed that scrolls to the wrong
+     * place for ever after the window is dragged.
+     */
+    const heightsAt = useRef(-1);
+    /** One handler for every entry, so an entry's props do not change with it. */
+    const report = useRef((index, height) => {
+        heights.current[index] = height;
+    });
     // The catalog's rule, and this has to follow it like every other viewport:
     // given `flex`, a `height`, a `maxHeight` or a `basis`, the layout decided
     // the size and the feed fills it and scrolls; given none of those, the
@@ -41,7 +55,17 @@ export const Feed = defineComponent('Feed', (props) => {
     // is how a log ends up frozen three lines from the bottom.
     const [internalTop, setInternalTop] = useState(null);
     const [internalIndex, setInternalIndex] = useState(0);
-    const entries = (Array.isArray(children) ? children : [children]).filter((c) => c != null);
+    /*
+     * Flattened, because a feed counts entries and JSX groups them.
+     *
+     * `{caption}{items.map(...)}` arrives as `[caption, [a, b, c]]` - two
+     * children, one of which is an array - so a feed of twenty entries with
+     * anything written beside the map counted two. The cursor then clamped to
+     * the second, every key after the first did nothing, and the scroll never
+     * moved. It reads as a dead list and is an arity bug.
+     */
+    const entries = (Array.isArray(children) ? children.flat(Infinity) : [children])
+        .filter((c) => c != null);
     const count = entries.length;
     const selects = onSelect !== undefined || selectedIndex !== undefined;
     const index = Math.max(0, Math.min(count - 1, selectedIndex ?? internalIndex));
@@ -143,10 +167,70 @@ export const Feed = defineComponent('Feed', (props) => {
             default: return false;
         }
     }, { focusId: focus.id, enabled: focusable });
+    /*
+     * The page keys, from wherever the keyboard happens to be.
+     *
+     * `global` handlers run only after the focused node has declined the key,
+     * so a field that pages its own content still keeps them - this is the one
+     * that catches what nothing else wanted.
+     */
+    useInput((event) => {
+        if (event.name !== 'pageup' && event.name !== 'pagedown')
+            return false;
+        if (chorded(event))
+            return false;
+        const page = Math.max(1, measured.height - 2);
+        scrollTo(event.name === 'pageup' ? top - page : top + page);
+        return true;
+    }, { global: true, enabled: pageKeys === 'always' });
+    if (measured.width !== heightsAt.current) {
+        heightsAt.current = measured.width;
+        heights.current = [];
+    }
+    /*
+     * Which entries are far enough away not to be worth drawing.
+     *
+     * A feed lays out every entry it holds, and laying one out means wrapping
+     * its text - so a viewport thirty rows tall over a transcript of six
+     * hundred entries spent every frame measuring the five hundred and seventy
+     * nobody can see. That cost is paid per *frame*, not per change: a
+     * keystroke in a field elsewhere on the screen, a caret blinking, a
+     * spinner. It is why a long conversation is heavy to type into and a short
+     * one is not.
+     *
+     * An entry is skipped only once it has been measured, which is what keeps
+     * this honest: the first frame draws everything and learns every height,
+     * and from then on the ones outside the window are replaced by a box of
+     * exactly the height they had. Nothing is estimated, so the extent, the
+     * scrollbar and the position of every entry are what they would have been
+     * had all of them been drawn.
+     *
+     * A screenful either side, so scrolling and paging land on something that
+     * is already there rather than on a frame of blanks.
+     */
+    const view = Math.max(1, measured.height);
+    const skipped = [];
+    {
+        let y = 0;
+        for (let i = 0; i < count; i++) {
+            const height = heights.current[i];
+            // Zero is not a height that has been learned, whatever wrote it: an
+            // entry standing in for itself at nothing tall is one that can never
+            // be drawn again to find out how tall it is.
+            if (height === undefined || height <= 0) {
+                skipped[i] = false;
+                continue;
+            }
+            skipped[i] = fills && (y + height < top - view || y > top + view + view);
+            y += height;
+        }
+    }
     const drawn = entries.map((entry, i) => h(FeedEntry, {
         key: i,
-        onHeight: (height) => { heights.current[i] = height; },
-    }, entry));
+        index: i,
+        onHeight: report.current,
+        ...(skipped[i] ? { placeholder: true, height: heights.current[i] } : {}),
+    }, skipped[i] ? null : entry));
     // Content-sized: draw everything and let the box grow. Clamping to a
     // measurement here would clamp to how tall this happened to be last frame,
     // which for a box sized *by* its own content is nothing at all - the entries

package/dist/data/list.d.ts

@@ -1,4 +1,4 @@
-import type { BoxProps, SemanticVariant } from '@textui/core';
+import type { BoxProps, RenderOutput, SemanticVariant } from '@textui/core';
 export interface ListItem {
     id: string;
     label: string;
@@ -8,15 +8,38 @@ export interface ListItem {
     meta?: string;
     disabled?: boolean;
 }
-export interface ListProps extends BoxProps {
-    items: ListItem[];
+/** How a row stands at the moment it is asked to draw itself. */
+export interface ListItemState {
+    /** The row the selection is on. */
+    selected: boolean;
+    /**
+     * ...and the list itself has the keyboard.
+     *
+     * Both, and not one: a selected row in a list that has lost focus is a
+     * *remembered* choice, and drawing it as loudly as a live one makes two
+     * panes look like they both have the cursor.
+     */
+    focused: boolean;
+    disabled: boolean;
+}
+export interface ListProps<T extends ListItem = ListItem> extends BoxProps {
+    /**
+     * The rows.
+     *
+     * `T` is whatever the caller's own row type is, so long as it is a
+     * `ListItem` - which is what the built-in row needs and what `id` being the
+     * selection's name needs. Passing plain `ListItem`s is the ordinary case and
+     * `T` costs nothing there; a caller with a `renderItem` gets its own fields
+     * back on the way in rather than a lookup by id.
+     */
+    items: T[];
     selectedId?: string;
-    onSelect?(id: string, item: ListItem): void;
-    onActivate?(id: string, item: ListItem): void;
+    onSelect?(id: string, item: T): void;
+    onActivate?(id: string, item: T): void;
     /** Rows visible at once. Scrolls when there are more. */
     visibleRows?: number;
     emptyMessage?: string;
-    /** Draw a marker column for the selected row. */
+    /** Draw a marker column for the selected row. Drawn either way. */
     marker?: boolean;
     focusable?: boolean;
     autoFocus?: boolean;
@@ -26,6 +49,36 @@ export interface ListProps extends BoxProps {
      * nothing outside the render can know.
      */
     focusId?: string;
+    /**
+     * Draw one row's contents.
+     *
+     * The built-in row - icon, title, description, meta, on one line - is the
+     * shape most catalogues are, and it is what you get by leaving this alone.
+     * The moment a caller wants a different one, the repair is *not* another
+     * field on `ListItem` and another flag saying where to put it: that road
+     * ends with a component whose props are a small layout language, and it
+     * still cannot draw the row after next.
+     *
+     * So the row is the caller's, and everything a row cannot do for itself
+     * stays here: the selection, the keys that move it, the window that scrolls,
+     * the highlight, the marker column and the click. `state` is what the row
+     * cannot know - whether it is the selected one, and whether that selection
+     * is live.
+     *
+     * A row taller than one line has to say so with `itemHeight`.
+     */
+    renderItem?(item: T, state: ListItemState): RenderOutput;
+    /**
+     * Lines one row occupies, when `renderItem` draws more than one.
+     *
+     * The list scrolls by arithmetic rather than by measurement - it decides how
+     * many rows fit *before* anything is drawn, which is the only way a thousand
+     * rows cost the same as ten. That arithmetic is in lines, so a row that is
+     * two of them has to be declared, not discovered.
+     */
+    itemHeight?: number;
 }
-export declare const List: (props: ListProps) => import("@textui/core").RenderOutput;
+declare function ListView<T extends ListItem>(props: ListProps<T>): RenderOutput;
+export declare const List: typeof ListView;
+export {};
 //# sourceMappingURL=list.d.ts.map

package/dist/data/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/data/list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAgB9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,UAAU,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9C,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,IAAI,2DAsGf,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/data/list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAgB5E,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iEAAiE;AACjE,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,QAAQ;IACxE;;;;;;;;OAQG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,UAAU,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,CAAC;IACzD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,YAAY,CA+HvE;AAED,eAAO,MAAM,IAAI,EAA8E,OAAO,QAAQ,CAAC"}

package/dist/data/list.js

@@ -2,9 +2,9 @@ import { chorded, defineComponent, h, useFocus, useInput, useMeasure, useState,
 import { EmptyState } from '../display/index.js';
 import { TONE } from '../tone.js';
 import { viewportRows } from '../viewport.js';
-export const List = defineComponent('List', (props) => {
+function ListView(props) {
     const theme = useTheme();
-    const { items, selectedId, onSelect, onActivate, visibleRows, emptyMessage = 'Nothing here', marker = true, focusable = true, autoFocus, focusId, ...rest } = props;
+    const { items, selectedId, onSelect, onActivate, visibleRows, emptyMessage = 'Nothing here', marker = true, focusable = true, autoFocus, focusId, renderItem, itemHeight = 1, ...rest } = props;
     const focus = useFocus({
         ...(focusId ? { id: focusId } : {}),
         disabled: !focusable,
@@ -13,7 +13,20 @@ export const List = defineComponent('List', (props) => {
     const measured = useMeasure();
     const [internalId, setInternalId] = useState(items.find((i) => !i.disabled)?.id ?? null);
     const currentId = selectedId ?? internalId;
-    const pageSize = viewportRows(props, measured, 10, { requested: visibleRows });
+    /**
+     * How many *rows* fit, when what was measured is lines.
+     *
+     * `visibleRows` is already a count of rows, so it stands as given. Anything
+     * else comes from the space the list was handed, and a two-line row buys
+     * half as many of them.
+     */
+    const lines = Math.max(1, itemHeight);
+    const fit = (content) => {
+        if (visibleRows !== undefined)
+            return Math.max(1, visibleRows);
+        return Math.max(1, Math.floor(viewportRows(props, measured, content * lines) / lines));
+    };
+    const pageSize = fit(10);
     const index = Math.max(0, items.findIndex((i) => i.id === currentId));
     /**
      * Move to `target`, skipping past anything unselectable on the way.
@@ -73,11 +86,20 @@ export const List = defineComponent('List', (props) => {
     // Unstated, the row count comes from the space the list was given rather
     // than from how many items it holds - a thousand-row list must not decide
     // how tall its own pane is.
-    const rows = viewportRows(props, measured, items.length, { requested: visibleRows });
+    const rows = fit(items.length);
     const start = Math.max(0, Math.min(index - Math.floor(rows / 2), items.length - rows));
     const window = items.slice(start, start + rows);
     return h('box', { id: focus.id, role: 'list', direction: 'column', ...rest }, ...window.map((item) => {
         const active = item.id === currentId;
+        const state = {
+            selected: active,
+            focused: focus.focused,
+            disabled: item.disabled === true,
+        };
+        // `item.id` is the key as well as the selection's name, and deliberately
+        // the same string: a row that reconciled under one identity while the
+        // selection pointed at another would be a highlight on the wrong row,
+        // and no amount of looking at either one would show why.
         return h('box', {
             key: item.id,
             role: 'listitem',
@@ -85,6 +107,9 @@ export const List = defineComponent('List', (props) => {
             selected: active,
             direction: 'row',
             gap: 1,
+            // One background over the whole row, however many lines it draws: a
+            // highlight that stopped after the first would split the row it is
+            // highlighting in two.
             bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
             fg: item.disabled ? 'disabled' : active && focus.focused ? 'inverted' : undefined,
             onClick: () => {
@@ -94,11 +119,42 @@ export const List = defineComponent('List', (props) => {
                     setInternalId(item.id);
                 onSelect?.(item.id, item);
             },
-        }, marker
-            ? h('text', { content: active ? theme.glyphs.chevronRight : ' ' })
-            : null, item.icon ? h('text', { content: item.icon, fg: item.tone ? TONE[item.tone] : undefined }) : null, h('text', { content: item.label, flex: 1, truncate: 'end' }), 
+        }, 
+        // The marker stays here even when the contents are the caller's. It
+        // belongs to the selection rather than to the row, and a column that
+        // every row has to remember to draw is a column that goes crooked.
+        marker
+            ? h('text', { content: active ? theme.glyphs.chevronRight : ' ', shrink: 0 })
+            : null, ...(renderItem
+            ? [h('box', { direction: 'column', flex: 1 }, renderItem(item, state))]
+            : defaultRow(item, active)));
+    }));
+}
+export const List = defineComponent('List', ListView);
+/**
+ * The row you get for free: an icon, a title, an elaboration, a state.
+ *
+ * One line, because a list of a thousand of them has to cost what a list of
+ * ten does, and because most catalogues are exactly this. Anything else is
+ * `renderItem`.
+ */
+function defaultRow(item, active) {
+    return [
+        item.icon ? h('text', { content: item.icon, fg: item.tone ? TONE[item.tone] : undefined }) : null,
+        h('text', { content: item.label, flex: 1, truncate: 'end' }),
         // The secondary columns keep the row's colour once it is selected;
         // `muted` on a selected background is unreadable.
-        item.description ? h('text', { content: item.description, fg: active ? undefined : 'muted', truncate: 'end' }) : null, item.meta ? h('text', { content: item.meta, fg: active ? undefined : 'muted' }) : null);
-    }));
-});
+        //
+        // The description yields first, and by a lot: it is the elaboration,
+        // and a row reading "brb_fram…" beside a status cut to "waiting on y…"
+        // has spent the width on the wrong two things. `meta` gives up none of
+        // it - a status is three words at most, and it is the column the row
+        // is being scanned for.
+        item.description
+            ? h('text', { content: item.description, fg: active ? undefined : 'muted', truncate: 'end', shrink: 8 })
+            : null,
+        item.meta
+            ? h('text', { content: item.meta, fg: active ? undefined : 'muted', shrink: 0 })
+            : null,
+    ];
+}

package/dist/data/markdown-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-view.d.ts","sourceRoot":"","sources":["../../src/data/markdown-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAA0C,MAAM,cAAc,CAAC;AAclG,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,mEAsHvB,CAAC"}
+{"version":3,"file":"markdown-view.d.ts","sourceRoot":"","sources":["../../src/data/markdown-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAA0C,MAAM,cAAc,CAAC;AAclG,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,mEA8KvB,CAAC"}

package/dist/data/markdown-view.js

@@ -24,6 +24,9 @@ export const MarkdownView = defineComponent('MarkdownView', (props) => {
         bullet: theme.glyphs.bulletFilled,
         quoteBar: theme.borderChars().left,
         ruled,
+        // How many rules a table gets is the theme's, but *where* they go is a
+        // question about rows, so it is answered in the layout rather than here.
+        tableRules: theme.tableRules,
     }), [given, content, width, theme, ruled]);
     const first = slice?.first ?? 0;
     const shown = slice ? laid.slice(first, first + slice.count) : laid;
@@ -89,6 +92,52 @@ export const MarkdownView = defineComponent('MarkdownView', (props) => {
             i = end;
             continue;
         }
+        if (row.kind === 'table') {
+            /*
+             * A table is ruled even where nothing else is.
+             *
+             * `theme.border` being `none` is a theme saying "do not box things" -
+             * panels, fences, dialogs. It is not saying "do not tell these columns
+             * apart": the rules in a table are its structure, not its decoration,
+             * and without them it is text that happens to line up, with nothing to
+             * say where it ended. So a borderless theme still gets a table, drawn
+             * in the plainest set there is.
+             *
+             * Asked for by name rather than taken from `borderChars()`, which is
+             * the same request routed through the terminal's own limits: on a
+             * console that cannot draw box characters this comes back as `+`, `-`
+             * and `|` rather than as something it would print as a row of boxes.
+             */
+            const chars = theme.borderChars(theme.border === 'none' ? 'single' : theme.border);
+            const fg = 'borderSubtle';
+            if (row.part !== 'head' && row.part !== 'body') {
+                const [left, joint, right] = row.part === 'top' ? [chars.topLeft, chars.teeTop, chars.topRight]
+                    : row.part === 'bottom' ? [chars.bottomLeft, chars.teeBottom, chars.bottomRight]
+                        : [chars.teeRight, chars.cross, chars.teeLeft];
+                const bar = row.part === 'bottom' ? chars.bottom : chars.top;
+                // Every column plus the space either side of it, which is what the
+                // cell rows spend - an edge measured off the cells alone is an edge
+                // two cells short per column.
+                out.push(h('text', {
+                    key,
+                    content: left
+                        + row.widths.map((w) => repeatToWidth(bar, w + 2)).join(joint)
+                        + right,
+                    fg,
+                    wrap: 'none',
+                }));
+                i++;
+                continue;
+            }
+            // The cells arrive padded to their column, so nothing here measures
+            // anything: a row is its cells with a rule between each pair.
+            out.push(h('box', { key, direction: 'row', overflow: 'hidden' }, ...row.cells.flatMap((cell, c) => [
+                h('text', { key: `s${c}`, content: c === 0 ? `${chars.left} ` : ` ${chars.left} `, fg, wrap: 'none' }),
+                h('box', { key: `c${c}`, direction: 'row', overflow: 'hidden' }, ...runNodes(cell, quiet ? { fg: 'muted' } : {})),
+            ]), h('text', { key: 'end', content: ` ${chars.right}`, fg, wrap: 'none' })));
+            i++;
+            continue;
+        }
         if (row.kind === 'rule') {
             out.push(h('box', { key, height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }));
             i++;

package/dist/data/shared.d.ts

@@ -4,9 +4,26 @@ import type { BoxProps } from '@textui/core';
  *
  * Through a ref rather than state, deliberately: a height arriving must not
  * schedule a render, or every measurement would cause the next measurement.
+ *
+ * It reports its `index` to one shared handler rather than taking a closure
+ * that already knows it. A closure per entry is a new prop on every entry
+ * every time the feed itself re-renders, and a changed prop is a re-render -
+ * so a feed that redrew for its own reasons dragged every entry it holds
+ * along with it, however little any of them had changed.
  */
 export declare const FeedEntry: (props: BoxProps & {
-    onHeight(height: number): void;
+    index: number;
+    /**
+     * Standing in for an entry that is not drawn, at the height it had.
+     *
+     * A stand-in must not answer the question it is an answer to. Its height is
+     * one the feed already knows - it is where it came from - and reporting it
+     * back is how a measurement gets to depend on itself: a round where a
+     * stand-in came out any shorter would teach the feed that it *was* shorter,
+     * and the next round would place the rest of them on top of each other.
+     */
+    placeholder?: boolean;
+    onHeight(index: number, height: number): void;
 }) => import("@textui/core").RenderOutput;
 export declare const FeedScrollbar: (props: Record<string, never>) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=shared.d.ts.map

package/dist/data/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/data/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;GAKG;AACH,eAAO,MAAM,SAAS;qBAAiD,MAAM,GAAG,IAAI;yCAQnF,CAAC;AAEF,eAAO,MAAM,aAAa,uEAGxB,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/data/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS;WACb,MAAM;IACb;;;;;;;;OAQG;kBACW,OAAO;oBACL,MAAM,UAAU,MAAM,GAAG,IAAI;yCAY9C,CAAC;AAEF,eAAO,MAAM,aAAa,uEAGxB,CAAC"}

package/dist/data/shared.js

@@ -4,11 +4,21 @@ import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/cor
  *
  * Through a ref rather than state, deliberately: a height arriving must not
  * schedule a render, or every measurement would cause the next measurement.
+ *
+ * It reports its `index` to one shared handler rather than taking a closure
+ * that already knows it. A closure per entry is a new prop on every entry
+ * every time the feed itself re-renders, and a changed prop is a re-render -
+ * so a feed that redrew for its own reasons dragged every entry it holds
+ * along with it, however little any of them had changed.
  */
 export const FeedEntry = defineComponent('FeedEntry', (props) => {
-    const { onHeight, children, ...rest } = props;
+    const { index, placeholder, onHeight, children, ...rest } = props;
     const measured = useMeasure();
-    useEffect(() => { onHeight(measured.height); }, [measured.height]);
+    useEffect(() => {
+        if (placeholder)
+            return;
+        onHeight(index, measured.height);
+    }, [measured.height, placeholder]);
     return h('box', { direction: 'column', ...rest }, children);
 });
 export const FeedScrollbar = defineComponent('FeedScrollbar', () => {

package/dist/display/color-text.d.ts

@@ -0,0 +1,158 @@
+import type { CellStyle, Color, RenderContext, StyleColor, TextProps } from '@textui/core';
+/**
+ * One cell, as the ink sees it.
+ *
+ * Both a column and an index, because they are not the same number and which
+ * one is wanted depends on the question. `col` is where the cell lands - a
+ * wide character advances it by two - so a gradient stays vertical over CJK
+ * and emoji. `index` counts graphemes, which is what "the fourth letter"
+ * means. Colouring by `index` and painting at `col` is the bug this pair
+ * exists to prevent.
+ */
+export interface InkCell {
+    /** The grapheme cluster about to be painted. */
+    char: string;
+    /** Column within the line, in cells. */
+    col: number;
+    /** Line index, after wrapping. */
+    line: number;
+    /** Grapheme index within the line. */
+    index: number;
+    /** Grapheme index within the whole block. */
+    offset: number;
+    /** Cells in this line. */
+    width: number;
+    /** Lines in the block. */
+    height: number;
+    /** Cells in the widest line of the block. */
+    blockWidth: number;
+}
+/**
+ * An ink written as code. Returns a colour, a whole cell style, or nothing.
+ *
+ * Nothing means "leave this cell to the component's own style", which is what
+ * makes an ink that colours one thing - the vowels, the column under the
+ * cursor - a two-line function rather than an exhaustive one.
+ */
+export type InkFn = (cell: InkCell, ctx: RenderContext) => StyleColor | CellStyle | undefined;
+/** A ramp between colour stops. */
+export interface GradientInk {
+    /** Two or more stops. One stop is a flat colour, none is nothing. */
+    gradient: StyleColor[];
+    /** Across, down, or corner to corner. */
+    axis?: 'x' | 'y' | 'xy';
+    /**
+     * What the ramp is measured against.
+     *
+     * `block` is the widest line, so every line of a banner shares one ramp and
+     * the colours line up down the block. `line` restarts the ramp on each line,
+     * which is what a paragraph of ragged lines wants - under `block` a short
+     * line would stop halfway through the ramp and look unfinished.
+     */
+    per?: 'block' | 'line';
+}
+/**
+ * What advances the colour.
+ *
+ * `cell` counts columns, so bands stay vertical across the lines of a block -
+ * the reason it is the default. `grapheme` counts every cluster including
+ * spaces, `letter` counts only the ones that print, and `word` and `line`
+ * are what they say.
+ */
+export type InkUnit = 'cell' | 'grapheme' | 'letter' | 'word' | 'line';
+/** A palette walked in order and repeated. */
+export interface CycleInk {
+    cycle: StyleColor[];
+    /**
+     * How much of the text each colour takes.
+     *
+     * A number is a fixed run. An array is a repeating pattern of runs, so
+     * `[4, 3]` gives four cells of the first colour, three of the second, four
+     * of the third, and keeps going in fours and threes.
+     */
+    every?: number | number[];
+    unit?: InkUnit;
+    /**
+     * Whether the count carries across a line break. Off by default: a run that
+     * restarts on every line keeps the bands of a block aligned, and a run that
+     * carries over puts them on a diagonal.
+     */
+    continuous?: boolean;
+}
+/**
+ * How a `ColorText` is coloured.
+ *
+ * An array is the short spelling of one colour per line. The two object forms
+ * are data, so a screen written as JSON can carry them; the function form
+ * cannot be serialized and is the escape hatch - the same trade `canvas`
+ * makes with `draw`.
+ */
+export type Ink = StyleColor[] | GradientInk | CycleInk | InkFn;
+/**
+ * Everything a `text` takes, plus the ink.
+ *
+ * The same props on purpose: `wrap`, `truncate`, `textAlign` and the style
+ * keys all mean here what they mean there, so swapping one for the other is a
+ * change of colour and nothing else.
+ */
+export interface ColorTextProps extends TextProps {
+    /** Left unset, this is an ordinary block of text. */
+    ink?: Ink;
+    /**
+     * Align the block as one thing, rather than each line on its own.
+     *
+     * `textAlign` centres every line over its own middle, which is right for
+     * prose and shears a picture: five rows of block letters do not have equal
+     * widths once the trailing spaces are gone, so each row lands somewhere
+     * slightly different and the letters lean. Under this, the whole block is
+     * placed once and the lines keep their offsets from each other.
+     *
+     * Off by default, because that is what `text` does and the two are supposed
+     * to mean the same thing by the same prop.
+     */
+    alignBlock?: boolean;
+}
+/**
+ * Multiline text coloured cell by cell.
+ *
+ * A `text` takes one colour for the whole run, which is the right answer for
+ * nearly everything and no answer at all for the cases where the colour *is*
+ * the content - a banner, a ramp across a title, a palette walked down a
+ * block of ascii art. This is that case, and only that case: it is still just
+ * text, and the alternative to it is a `text` node.
+ *
+ * It paints on a `canvas`, and the price of the escape hatch is that inherited
+ * colour stops here. A cell the ink declines takes this component's own `fg`
+ * rather than the one a parent row would have handed a `text`, so a
+ * `ColorText` inside something that recolours its children when selected has
+ * to be told about it. Everything an ink does paint is unaffected.
+ *
+ * ```tsx
+ * <ColorText ink={{ gradient: ['cyan', 'magenta'] }}>{banner}</ColorText>
+ * <ColorText ink={['danger', 'warning', 'success']}>{lines}</ColorText>
+ * <ColorText ink={{ cycle: palette, every: [4, 3] }}>{title}</ColorText>
+ * <ColorText ink={(cell) => (cell.line === cell.col ? 'accent' : undefined)}>{grid}</ColorText>
+ * ```
+ *
+ * The colour is decoration and never the message: a 16-colour session flattens
+ * a three-stop ramp into a couple of bands, and a piped log loses all of it.
+ */
+export declare const ColorText: (props: ColorTextProps) => import("@textui/core").RenderOutput;
+/**
+ * A colour a fraction of the way along a set of stops.
+ *
+ * Exported because an ink written by hand wants it and the alternative is
+ * unpacking colours in application code. `t` outside 0..1 is clamped rather
+ * than extrapolated - a ramp has ends.
+ */
+export declare function gradientAt(stops: Color[], t: number): Color;
+/** Two colours mixed. `t` of 0 is `a`, 1 is `b`. Tokens must be resolved first. */
+export declare function blend(a: Color, b: Color, t: number): Color;
+/**
+ * An ink in any of its spellings, as the one function paint uses.
+ *
+ * Exported so a component that paints its own cells - a chart, a viewer with a
+ * heat column - can take an `Ink` and mean the same thing by it.
+ */
+export declare function painterOf(ink: Ink | undefined, ctx: RenderContext): (cell: InkCell) => CellStyle | undefined;
+//# sourceMappingURL=color-text.d.ts.map

package/dist/display/color-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-text.d.ts","sourceRoot":"","sources":["../../src/display/color-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAAE,KAAK,EAChB,aAAa,EAAE,UAAU,EAAE,SAAS,EACrC,MAAM,cAAc,CAAC;AAOtB;;;;;;;;;GASG;AACH,MAAM,WAAW,OAAO;IACtB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9F,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,yCAAyC;IACzC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACxB;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvE,8CAA8C;AAC9C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,GAAG,GAAG,UAAU,EAAE,GAAG,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,gEAyEpB,CAAC;AAIH;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAM3D;AAED,mFAAmF;AACnF,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAE1D;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,GAAG,GAAG,SAAS,EACpB,GAAG,EAAE,aAAa,GACjB,CAAC,IAAI,EAAE,OAAO,KAAK,SAAS,GAAG,SAAS,CA2D1C"}