@promptctl/rich-js 0.24.1 → 0.25.0

package/dist/renderables/table.js

@@ -11,6 +11,7 @@ import { Padding, normalizePadding } from "./padding.js";
 import { exactWeights, ratioDistribute, ratioReduce } from "./ratio.js";
 import { getStyle, render, stackedHeight, withBoundedWidth, withCellWidth } from "../core/protocol.js";
 import { Measurement } from "../core/measure.js";
+import { ListState, State } from "../core/state.js";
 /** A `want` no budget can satisfy: the column takes every cell its weight earns. */
 const UNBOUNDED = Number.MAX_SAFE_INTEGER;
 /**
@@ -256,10 +257,9 @@ export class Column {
     noWrap;
     overflow;
     highlight;
-    _cells;
     constructor(options) {
-        this.header = options?.header;
-        this.footer = options?.footer;
+        this._header = new State(embed(options?.header));
+        this._footer = new State(embed(options?.footer));
         this.headerStyle = options?.headerStyle ?? NULL_STYLE;
         this.footerStyle = options?.footerStyle ?? NULL_STYLE;
         this.style = options?.style ?? NULL_STYLE;
@@ -271,7 +271,6 @@ export class Column {
         this.noWrap = options?.noWrap ?? false;
         this.overflow = options?.overflow ?? "ellipsis";
         this.highlight = options?.highlight ?? false;
-        this._cells = [];
     }
     /**
      * The two stamped cells, stamped on assignment rather than at the constructor.
@@ -291,30 +290,30 @@ export class Column {
      * which is why the setters take `undefined` rather than defaulting around it.
      */
     get header() {
-        return this._header;
+        return this._header.get();
     }
     set header(content) {
-        this._header = embed(content);
+        this._header.set(embed(content));
     }
     get footer() {
-        return this._footer;
+        return this._footer.get();
     }
     set footer(content) {
-        this._footer = embed(content);
+        this._footer.set(embed(content));
     }
     get flexible() {
         return columnShare(this) > 0;
     }
-    /** @internal */
-    addCell(cell) {
-        this._cells.push(cell);
-    }
-    /** @internal */
-    getCells() {
-        return this._cells;
-    }
     copy() {
-        const col = new Column({
+        return new Column({
+            // Shared, not copied, as a row's cells are: `embed` already copied a
+            // caller's `RichText`, what it hands back is never changed, and `embed`
+            // passes a renderable through.
+            header: this.header,
+            footer: this.footer,
+            headerStyle: this.headerStyle,
+            footerStyle: this.footerStyle,
+            style: this.style,
             justify: this.justify,
             width: this.width,
             minWidth: this.minWidth,
@@ -324,14 +323,6 @@ export class Column {
             overflow: this.overflow,
             highlight: this.highlight,
         });
-        col.headerStyle = this.headerStyle;
-        col.footerStyle = this.footerStyle;
-        col.style = this.style;
-        // Shared, not copied, as a row's cells are: `embed` already copied a
-        // caller's `RichText`, and what it hands back is never changed.
-        col._header = this._header;
-        col._footer = this._footer;
-        return col;
     }
 }
 // A row's cell in column `index`: a column the row is short of draws a blank one.
@@ -339,8 +330,9 @@ function cellAt(row, index) {
     return row.cells[index] ?? new EmbeddedText(undefined);
 }
 export class Table {
-    _columns;
-    _rows;
+    // Rich's Table grows by addColumn and addRow after it is built.
+    _columns = new ListState();
+    _rows = new ListState();
     box;
     _title;
     _caption;
@@ -371,8 +363,6 @@ export class Table {
         return this._caption;
     }
     constructor(options) {
-        this._columns = [];
-        this._rows = [];
         this.box = options?.box !== undefined ? options.box : HEAVY_HEAD;
         // An empty title draws no row, as the reference's `if self.title` draws
         // none; markup that styles nothing is a title, and draws a blank one.
@@ -405,10 +395,10 @@ export class Table {
         this.highlight = options?.highlight ?? false;
     }
     get columns() {
-        return this._columns;
+        return this._columns.get();
     }
     get rowCount() {
-        return this._rows.length;
+        return this._rows.get().length;
     }
     addColumn(header, options) {
         const col = new Column({ ...options, header: header ?? options?.header, highlight: options?.highlight ?? this.highlight });
@@ -437,20 +427,18 @@ export class Table {
         // behind. [LAW:no-ambient-temporal-coupling]
         const resolved = cells.map(embed);
         // Auto-create columns if needed
-        while (this._columns.length < resolved.length) {
+        while (this._columns.get().length < resolved.length) {
             this.addColumn();
         }
-        this._rows.push({ cells: resolved, endSection });
+        this._rows.push({ cells: resolved, endSection: new State(endSection) });
         return this;
     }
     addSection() {
-        if (this._rows.length > 0) {
-            this._rows[this._rows.length - 1].endSection = true;
-        }
+        this._rows.get().at(-1)?.endSection.set(true);
         return this;
     }
     *render(rawOptions) {
-        if (this._columns.length === 0) {
+        if (this._columns.get().length === 0) {
             yield Segment.line();
             return;
         }
@@ -483,17 +471,17 @@ export class Table {
         // once per cell, as the reference's `_get_cells` does per column.
         const headerStyle = getStyle(options, this.headerStyle);
         const footerStyle = getStyle(options, this.footerStyle);
-        const columnStyles = this._columns.map((c) => getStyle(options, c.style));
+        const columnStyles = this._columns.get().map((c) => getStyle(options, c.style));
         const stripes = this.rowStyles.map((s) => getStyle(options, s));
         // Each row's padding above and below, by where it stands among every row
         // the table draws, header and footer included, as the reference counts them.
         const firstBody = this.showHeader ? 1 : 0;
-        const lastRow = firstBody + this._rows.length + (this.showFooter ? 1 : 0) - 1;
+        const lastRow = firstBody + this._rows.get().length + (this.showFooter ? 1 : 0) - 1;
         const rowPadding = (position) => this._rowPadding(position === 0, position === lastRow);
         // Header row
         if (this.showHeader) {
-            const headerCells = this._columns.map((c) => c.header);
-            const headerStyles = this._columns.map((c) => headerStyle.add(getStyle(options, c.headerStyle)));
+            const headerCells = this._columns.get().map((c) => c.header);
+            const headerStyles = this._columns.get().map((c) => headerStyle.add(getStyle(options, c.headerStyle)));
             yield* this._renderRow(options, headerCells, headerStyles, NULL_STYLE, geometry, rowPadding(0), box, "head", border);
             // Header separator
             if (box) {
@@ -501,15 +489,15 @@ export class Table {
             }
         }
         // Data rows
-        for (let rowIdx = 0; rowIdx < this._rows.length; rowIdx++) {
-            const row = this._rows[rowIdx];
+        for (let rowIdx = 0; rowIdx < this._rows.get().length; rowIdx++) {
+            const row = this._rows.get()[rowIdx];
             const rowCells = this._rowCells(row);
             const rowStyle = stripes[rowIdx % stripes.length] ?? NULL_STYLE;
             const cellStyles = columnStyles.map((s) => s.add(rowStyle));
             yield* this._renderRow(options, rowCells, cellStyles, rowStyle, geometry, rowPadding(firstBody + rowIdx), box, "row", border);
             // Row separator
-            const showSep = this.showLines || row.endSection;
-            if (showSep && box && rowIdx < this._rows.length - 1) {
+            const showSep = this.showLines || row.endSection.get();
+            if (showSep && box && rowIdx < this._rows.get().length - 1) {
                 yield* box.getRow(geometry.cellWidths, "row", border, edge);
             }
         }
@@ -518,8 +506,8 @@ export class Table {
             if (box) {
                 yield* box.getRow(geometry.cellWidths, "foot", border, edge);
             }
-            const footerCells = this._columns.map((c) => c.footer);
-            const footerStyles = this._columns.map((c) => footerStyle.add(getStyle(options, c.footerStyle)));
+            const footerCells = this._columns.get().map((c) => c.footer);
+            const footerStyles = this._columns.get().map((c) => footerStyle.add(getStyle(options, c.footerStyle)));
             yield* this._renderRow(options, footerCells, footerStyles, NULL_STYLE, geometry, rowPadding(lastRow), box, "foot", border);
         }
         // Bottom border
@@ -644,9 +632,9 @@ export class Table {
         const frame = this._frame();
         const inner = {
             ...options,
-            maxWidth: Math.max(0, outerWidth - frame.edge * 2 - frame.divider * Math.max(0, this._columns.length - 1)),
+            maxWidth: Math.max(0, outerWidth - frame.edge * 2 - frame.divider * Math.max(0, this._columns.get().length - 1)),
         };
-        return this._columns.map((col, index) => {
+        return this._columns.get().map((col, index) => {
             const sizing = this._columnSizing(col, index, inner, this._columnPadding(index));
             const floor = sizing.want === 0 ? 1 : 0;
             return { ...sizing, minimum: sizing.minimum + floor, want: sizing.want + floor, floor };
@@ -752,7 +740,7 @@ export class Table {
     _columnPadding(index) {
         const [, right, , left] = this.padding;
         const first = index === 0;
-        const last = index === this._columns.length - 1;
+        const last = index === this._columns.get().length - 1;
         const collapsed = this.collapsePadding && !first ? Math.max(0, left - right) : left;
         return [!this.padEdge && first ? 0 : collapsed, !this.padEdge && last ? 0 : right];
     }
@@ -761,18 +749,8 @@ export class Table {
         const collapsed = this.collapsePadding && !last ? Math.max(0, top - bottom) : bottom;
         return [!this.padEdge && first ? 0 : top, !this.padEdge && last ? 0 : collapsed];
     }
-    // Every cell `render` draws, in the order it draws them: row by row, the
-    // header and footer when it shows them.
-    *contents() {
-        if (this.showHeader)
-            yield* this._columns.map((c) => c.header);
-        for (const row of this._rows)
-            yield* this._rowCells(row);
-        if (this.showFooter)
-            yield* this._columns.map((c) => c.footer);
-    }
     _rowCells(row) {
-        return this._columns.map((_, index) => cellAt(row, index));
+        return this._columns.get().map((_, index) => cellAt(row, index));
     }
     /**
      * Every cell column `index` draws, in draw order.
@@ -788,7 +766,7 @@ export class Table {
     *_columnCells(col, index) {
         if (this.showHeader)
             yield col.header;
-        for (const row of this._rows)
+        for (const row of this._rows.get())
             yield cellAt(row, index);
         if (this.showFooter)
             yield col.footer;
@@ -850,7 +828,7 @@ export class Table {
         // width could not seat are absent from `cellWidths` and so are never
         // rendered at all.
         const cellLines = cellWidths.map((cellWidth, index) => {
-            const col = this._columns[index];
+            const col = this._columns.get()[index];
             const [left, right] = this._columnPadding(index);
             // [LAW:single-enforcer] The padding on every side is part of the cell,
             // drawn by `Padding` as the reference's `_get_cells` wraps each cell in

package/dist/renderables/traceback.d.ts

@@ -18,14 +18,14 @@
 import { Segment } from "../core/segment.js";
 import { type Renderable, type RenderOptions } from "../core/protocol.js";
 export interface TracebackOptions {
-    suppress?: string[];
+    suppress?: readonly string[];
     maxFrames?: number;
 }
 export declare class Traceback implements Renderable {
     /** What was caught, as it was handed in. */
     readonly error: unknown;
     readonly maxFrames: number;
-    readonly suppress: string[];
+    readonly suppress: readonly string[];
     private readonly caught;
     constructor(error: unknown, options?: TracebackOptions);
     render(options: RenderOptions): Iterable<Segment>;

package/dist/renderables/traceback.js

@@ -20,6 +20,7 @@ import { RichText } from "../core/text.js";
 import { Pretty, UNSEEN_DATA_BOUNDS } from "../core/pretty.js";
 import { render } from "../core/protocol.js";
 import { paddedContentWidth } from "./padding.js";
+import { pattern } from "../core/pattern.js";
 /**
  * [LAW:parse-dont-validate] The checkpoint between whatever a `catch` caught —
  * JavaScript lets a program throw any value — and the report. Anything with a
@@ -141,13 +142,13 @@ function parseStack(stack, name, message) {
  * any name, so it is read and dropped; the lookahead keeps `at async (…)` — a
  * function named `async` — a name.
  */
-const V8_FRAME = /^at\s+(?:async\s+(?!\())?(.*)$/;
+const V8_FRAME = pattern(/^at\s+(?:async\s+(?!\())?(.*)$/);
 /**
  * SpiderMonkey and JavaScriptCore write `[fn]@location`, Firefox prefixing an
  * awaited call's name with a cause up to a `*` (`async*`, `promise callback*`),
  * which is dropped as V8's `async` is.
  */
-const AT_SIGN_FRAME = /^(?:[^@]*\*)?([^@]*)@(.*)$/;
+const AT_SIGN_FRAME = pattern(/^(?:[^@]*\*)?([^@]*)@(.*)$/);
 function parseFrame(text) {
     const v8 = V8_FRAME.exec(text);
     if (v8) {
@@ -188,9 +189,9 @@ function openingParen(body) {
  * the code to it (`file line 8 > eval:1:1`).
  */
 const LOCATIONS = [
-    /^eval at [^]*?\(([^()]+):(\d+):\d+\)/,
-    /^(.*?) line (\d+) > (?:eval|Function)/,
-    /^(.*?):(\d+)(?::\d+)?$/,
+    pattern(/^eval at [^]*?\(([^()]+):(\d+):\d+\)/),
+    pattern(/^(.*?) line (\d+) > (?:eval|Function)/),
+    pattern(/^(.*?):(\d+)(?::\d+)?$/),
 ];
 function locate(fn, location) {
     for (const shape of LOCATIONS) {

package/dist/renderables/tree.d.ts

@@ -4,24 +4,26 @@
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
 import { RichText } from "../core/text.js";
-import type { Composite, Renderable, Measurable, RenderOptions } from "../core/protocol.js";
+import type { Renderable, Measurable, RenderOptions } from "../core/protocol.js";
 export interface TreeOptions {
     expanded?: boolean;
     hideRoot?: boolean;
     guide_style?: string | Style;
     style?: string | Style;
 }
-export declare class Tree implements Renderable, Measurable, Composite {
+export declare class Tree implements Renderable, Measurable {
     readonly label: Renderable;
-    readonly children: Tree[];
-    expanded: boolean;
+    private readonly _children;
+    private readonly _expanded;
     readonly hideRoot: boolean;
     readonly guideStyle: string | Style;
     readonly style: string | Style;
     constructor(label: string | RichText | Renderable, options?: TreeOptions);
     add(label: string | RichText | Renderable, options?: TreeOptions): Tree;
+    get children(): readonly Tree[];
+    get expanded(): boolean;
+    set expanded(value: boolean);
     render(rawOptions: RenderOptions): Iterable<Segment>;
-    contents(): Iterable<Renderable>;
     /**
      * The rows `render` and `measure` both read, entered in exactly one place so
      * the two cannot start the walk differently. A hidden root takes its own row
@@ -30,7 +32,8 @@ export declare class Tree implements Renderable, Measurable, Composite {
      */
     private _walk;
     /**
-     * The tree walked into the rows it emits, one row per label, guides first.
+     * This node's subtree walked into the rows it emits, one row per label,
+     * guides first, each guide column counted from this node.
      *
      * [LAW:one-source-of-truth] The walk that decides which rows exist and what
      * leads them is here and only here. `render` turns each row into segments and
@@ -39,35 +42,34 @@ export declare class Tree implements Renderable, Measurable, Composite {
      * them run — which they would the moment a second walk existed.
      *
      * [LAW:dataflow-not-control-flow] Every node, at every depth, is walked by
-     * this one recursion: its children get the columns above it, settled, plus a
-     * branch of their own, so no depth is drawn by a rule of its own. A node's
-     * style and its guide style are handed down the same way, as one more entry
-     * on the stack its ancestors built.
+     * this one recursion: each child's rows get a branch column of their own,
+     * settled below the first of them drawn, so no depth is drawn by a rule of
+     * its own. A node's style and its guide style are handed down the same way,
+     * as one more entry on the stack its ancestors built.
+     *
+     * The branch is chosen once every child is drawn: a subtree that draws no row
+     * takes no place among its siblings, so the last one that draws a row ends
+     * the branch, and the branch stands on a subtree's first drawn row — a child
+     * that drew nothing above children that did leaves them on its branch, not
+     * the sibling's before it. Rich chooses it from the children alone, and
+     * draws a fork over a last child that drew nothing — an element not yet
+     * arrived, or gone.
      */
     private _rows;
+    /** Each of this node's children walked into its rows, `columns` of guide before each child's own. */
+    private _subtrees;
     /**
-     * One row of the tree: its label in whatever width the guides left, each of
-     * the label's lines led by the guides.
-     *
-     * [LAW:single-enforcer] The row's width is divided in exactly one place, here.
-     * Before this, each call site emitted its guides and then handed the label
-     * `options` unchanged — the label was told it had the whole outer width while
-     * the guides had already spent four cells of it, so a tree at maxWidth 5
-     * emitted rows of 9. That is the same defect Panel and Table were fixed for,
-     * and the same fix: divide the requested width once and let every part read
-     * its share off the division. `options` arrives parsed from `render`.
+     * One row of the tree: each of the label's lines led by the guides.
      *
-     * [LAW:single-enforcer] Tree also owns its row boundaries here rather than
+     * [LAW:single-enforcer] Tree owns its row boundaries here rather than
      * depending on label renderables to invent trailing newlines: the label's
      * output is cut into lines and every line ends where Tree ends it. A label
      * that emits nothing — one left no column, say — has no row, and one
      * that ends in a newline of its own gets the blank row that line is, as in
      * Rich — padded to the label's width when the label is justified.
      *
-     * The node's style sits under the label's own, as Rich's `Styled` puts it, so
-     * markup in the label still wins; its background alone reaches under the
-     * guides, so a row with a background is filled from its first guide to the
-     * end of its label.
+     * The node's background alone reaches under the guides, so a row with a
+     * background is filled from its first guide to the end of its label.
      */
     private _renderRow;
     measure(options: RenderOptions): {

package/dist/renderables/tree.js

@@ -7,6 +7,7 @@ import { Style, NULL_STYLE } from "../core/style.js";
 import { embed } from "./embed.js";
 import { drawable, getStyle, render, stackedHeight, withBoundedWidth, withCellWidth } from "../core/protocol.js";
 import { Measurement } from "../core/measure.js";
+import { ListState, State } from "../core/state.js";
 /** Every glyph of every set is this wide, so a row's guides are as wide however they are drawn. */
 const GUIDE_CELLS = 4;
 const LIGHT_GUIDES = { fork: "├── ", end: "└── ", continue: "│   ", space: "    " };
@@ -28,21 +29,38 @@ function glyphsFor(options, style) {
     const weight = style.bold === true ? HEAVY_GUIDES : style.underline2 === true ? DOUBLE_GUIDES : LIGHT_GUIDES;
     return drawable(options, weight, ASCII_GUIDES, guideGlyphs);
 }
+/** A row a label is known to draw, unread. */
+const A_ROW = [[]];
+/** The cells a row with `columns` of guide leaves its label. */
+const labelRoom = (options, columns) => Math.max(0, options.maxWidth - columns * GUIDE_CELLS);
+/**
+ * `label` drawn in `width` cells, as both `render` and `measure` draw it, so
+ * whether it draws a row is answered once. Cropped, so a label that ignores the
+ * width it is handed cannot push the row past the offer the guides were fitted
+ * into. No highlighter: a label is drawn plain, as Rich's `Tree` hands its
+ * labels `highlight=False`.
+ */
+function drawLabel(options, label, width) {
+    const labelOptions = { ...options, highlight: false, maxWidth: width, height: stackedHeight(options.height) };
+    return Segment.cropLines(render(label, labelOptions), width);
+}
 /** How wide a label wants to be. */
 function labelWidth(options, label) {
     return Measurement.get(options, label).maximum;
 }
+/** Whether a row is drawn: a subtree with one takes a place among its siblings. */
+const isDrawn = (row) => row.lines.length > 0;
 export class Tree {
     label;
-    children;
-    expanded;
+    // Rich's Tree grows by `add` and is expanded or collapsed after it is built.
+    _children = new ListState();
+    _expanded;
     hideRoot;
     guideStyle;
     style;
     constructor(label, options) {
         this.label = embed(label);
-        this.children = [];
-        this.expanded = options?.expanded !== false;
+        this._expanded = new State(options?.expanded !== false);
         this.hideRoot = options?.hideRoot ?? false;
         this.guideStyle = options?.guide_style ?? NULL_STYLE;
         this.style = options?.style ?? NULL_STYLE;
@@ -53,33 +71,51 @@ export class Tree {
             style: options?.style,
             expanded: options?.expanded,
         });
-        this.children.push(child);
+        this._children.push(child);
         return child;
     }
+    get children() {
+        return this._children.get();
+    }
+    get expanded() {
+        return this._expanded.get();
+    }
+    set expanded(value) {
+        this._expanded.set(value);
+    }
     *render(rawOptions) {
         const options = withBoundedWidth(rawOptions, this);
-        for (const row of this._walk()) {
-            yield* this._renderRow(options, row);
+        const resolve = (styles) => Style.combine(styles.map((style) => getStyle(options, style)));
+        // [LAW:single-enforcer] The row's width is divided in exactly one place,
+        // here. Before this, each call site emitted its guides and then handed the
+        // label `options` unchanged — the label was told it had the whole outer
+        // width while the guides had already spent four cells of it, so a tree at
+        // maxWidth 5 emitted rows of 9. That is the same defect Panel and Table
+        // were fixed for, and the same fix: divide the requested width once and
+        // let every part read its share off the division.
+        //
+        // The guides are cropped by `cellFit`, the label by `drawLabel`. The
+        // node's style sits under the label's own, as Rich's `Styled` puts it, so
+        // markup in the label still wins.
+        const draw = (label, styles, columns) => Segment.splitLines(Segment.applyStyle(drawLabel(options, label, labelRoom(options, columns)), resolve(styles)));
+        for (const row of this._walk(draw)) {
+            yield* this._renderRow(options, resolve, row);
         }
     }
-    // Every label `render` draws, from the same walk. Not `children`, which is
-    // the subtrees, as Rich names them.
-    *contents() {
-        for (const row of this._walk())
-            yield row.label;
-    }
     /**
      * The rows `render` and `measure` both read, entered in exactly one place so
      * the two cannot start the walk differently. A hidden root takes its own row
      * and the column its children hang from with it, as Rich does — its children
      * stand at the left edge, and its guide style still reaches their guides.
      */
-    _walk() {
-        const rows = [...this._rows([], [], [])];
-        return this.hideRoot ? rows.slice(1).map((row) => ({ ...row, guides: row.guides.slice(1) })) : rows;
+    _walk(draw) {
+        return this.hideRoot
+            ? this._subtrees(0, draw, [this.guideStyle], [this.style]).flat()
+            : this._rows(0, draw, [], []);
     }
     /**
-     * The tree walked into the rows it emits, one row per label, guides first.
+     * This node's subtree walked into the rows it emits, one row per label,
+     * guides first, each guide column counted from this node.
      *
      * [LAW:one-source-of-truth] The walk that decides which rows exist and what
      * leads them is here and only here. `render` turns each row into segments and
@@ -88,50 +124,54 @@ export class Tree {
      * them run — which they would the moment a second walk existed.
      *
      * [LAW:dataflow-not-control-flow] Every node, at every depth, is walked by
-     * this one recursion: its children get the columns above it, settled, plus a
-     * branch of their own, so no depth is drawn by a rule of its own. A node's
-     * style and its guide style are handed down the same way, as one more entry
-     * on the stack its ancestors built.
+     * this one recursion: each child's rows get a branch column of their own,
+     * settled below the first of them drawn, so no depth is drawn by a rule of
+     * its own. A node's style and its guide style are handed down the same way,
+     * as one more entry on the stack its ancestors built.
+     *
+     * The branch is chosen once every child is drawn: a subtree that draws no row
+     * takes no place among its siblings, so the last one that draws a row ends
+     * the branch, and the branch stands on a subtree's first drawn row — a child
+     * that drew nothing above children that did leaves them on its branch, not
+     * the sibling's before it. Rich chooses it from the children alone, and
+     * draws a fork over a last child that drew nothing — an element not yet
+     * arrived, or gone.
      */
-    *_rows(guides, inheritedGuideStyles, inheritedStyles) {
+    _rows(columns, draw, inheritedGuideStyles, inheritedStyles) {
         const styles = [...inheritedStyles, this.style];
-        yield { guides, label: this.label, styles };
-        const children = this.expanded ? this.children : [];
         const guideStyles = [...inheritedGuideStyles, this.guideStyle];
-        const above = guides.map((guide) => ({ ...guide, first: guide.rest }));
-        for (let i = 0; i < children.length; i++) {
-            const branch = i === children.length - 1
-                ? { first: "end", rest: "space", styles: guideStyles }
-                : { first: "fork", rest: "continue", styles: guideStyles };
-            yield* children[i]._rows([...above, branch], guideStyles, styles);
-        }
+        const own = { guides: [], label: this.label, styles, lines: draw(this.label, styles, columns) };
+        const subtrees = this._subtrees(columns + 1, draw, guideStyles, styles);
+        const firsts = subtrees.map((rows) => rows.findIndex(isDrawn));
+        const last = firsts.reduce((found, first, i) => (first >= 0 ? i : found), -1);
+        const branched = subtrees.flatMap((rows, i) => {
+            const branch = i < last
+                ? { first: "fork", rest: "continue", styles: guideStyles }
+                : { first: "end", rest: "space", styles: guideStyles };
+            const settled = { ...branch, first: branch.rest };
+            return rows.map((row, r) => ({ ...row, guides: [r === firsts[i] ? branch : settled, ...row.guides] }));
+        });
+        return [own, ...branched];
+    }
+    /** Each of this node's children walked into its rows, `columns` of guide before each child's own. */
+    _subtrees(columns, draw, guideStyles, styles) {
+        const children = this.expanded ? this.children : [];
+        return children.map((child) => child._rows(columns, draw, guideStyles, styles));
     }
     /**
-     * One row of the tree: its label in whatever width the guides left, each of
-     * the label's lines led by the guides.
+     * One row of the tree: each of the label's lines led by the guides.
      *
-     * [LAW:single-enforcer] The row's width is divided in exactly one place, here.
-     * Before this, each call site emitted its guides and then handed the label
-     * `options` unchanged — the label was told it had the whole outer width while
-     * the guides had already spent four cells of it, so a tree at maxWidth 5
-     * emitted rows of 9. That is the same defect Panel and Table were fixed for,
-     * and the same fix: divide the requested width once and let every part read
-     * its share off the division. `options` arrives parsed from `render`.
-     *
-     * [LAW:single-enforcer] Tree also owns its row boundaries here rather than
+     * [LAW:single-enforcer] Tree owns its row boundaries here rather than
      * depending on label renderables to invent trailing newlines: the label's
      * output is cut into lines and every line ends where Tree ends it. A label
      * that emits nothing — one left no column, say — has no row, and one
      * that ends in a newline of its own gets the blank row that line is, as in
      * Rich — padded to the label's width when the label is justified.
      *
-     * The node's style sits under the label's own, as Rich's `Styled` puts it, so
-     * markup in the label still wins; its background alone reaches under the
-     * guides, so a row with a background is filled from its first guide to the
-     * end of its label.
+     * The node's background alone reaches under the guides, so a row with a
+     * background is filled from its first guide to the end of its label.
      */
-    *_renderRow(options, row) {
-        const resolve = (styles) => Style.combine(styles.map((style) => getStyle(options, style)));
+    *_renderRow(options, resolve, row) {
         const style = resolve(row.styles);
         const drawn = row.guides.map((guide) => {
             const guideStyle = resolve(guide.styles);
@@ -140,13 +180,7 @@ export class Tree {
                 style: style.backgroundStyle.add(guideStyle).add(REMOVE_GUIDE_STYLES),
             };
         });
-        const width = Math.max(0, options.maxWidth - row.guides.length * GUIDE_CELLS);
-        // The guides are cropped by `cellFit`; the label is cropped too, so a label
-        // that ignores the width it is handed cannot push the row past the offer the
-        // guides were fitted into. No highlighter: a label is drawn plain, as
-        // Rich's `Tree` hands its labels `highlight=False`.
-        const labelOptions = { ...options, highlight: false, maxWidth: width, height: stackedHeight(options.height) };
-        const lines = Segment.splitLines(Segment.applyStyle(Segment.cropLines(render(row.label, labelOptions), width), style));
+        const lines = row.lines;
         for (let i = 0; i < lines.length; i++) {
             let left = options.maxWidth;
             for (let g = 0; g < row.guides.length; g++) {
@@ -168,10 +202,22 @@ export class Tree {
         // The widest row the walk emits, not the offer. Reported as the offer, a
         // tree told any parent that asked "I want all of it" — so `Panel` in fit
         // mode drew a 40-cell frame around nine cells of tree, and an unbounded
-        // offer came back unbounded.
+        // offer came back unbounded. A row the walk does not draw wants nothing.
+        // A label that wants cells draws them, so only one that wants none can
+        // draw no row, and only that one is drawn to ask — in the one column it
+        // wants, as its row does, because under one column nothing draws. A label
+        // of no width that does draw is a blank row, as wide as its guides and that
+        // column: the width the tree, drawn at what this reports, hands it.
+        const widths = new Map();
+        const widthOf = (label) => {
+            const width = widths.get(label) ?? labelWidth(parsed, label);
+            widths.set(label, width);
+            return width;
+        };
+        const draw = (label, _styles, columns) => widthOf(label) > 0 ? A_ROW : Segment.splitLines(drawLabel(parsed, label, Math.min(labelRoom(parsed, columns), 1)));
         let natural = 0;
-        for (const row of this._walk()) {
-            natural = Math.max(natural, row.guides.length * GUIDE_CELLS + labelWidth(parsed, row.label));
+        for (const row of this._walk(draw).filter(isDrawn)) {
+            natural = Math.max(natural, row.guides.length * GUIDE_CELLS + Math.max(1, widthOf(row.label)));
         }
         const maximum = Math.min(natural, ceiling);
         // A row is its guides plus at least one cell of label — but never more than