@promptctl/rich-js 0.18.1 → 0.19.0

package/dist/renderables/padding.d.ts

@@ -3,6 +3,7 @@
  */
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
+import type { RichText } from "../core/text.js";
 import type { Renderable, Measurable, RenderOptions } from "../core/protocol.js";
 export type PaddingDimensions = number | [number, number] | [number, number, number, number];
 /**
@@ -18,6 +19,25 @@ export type PaddingDimensions = number | [number, number] | [number, number, num
  * border and `Table` threw outright.
  */
 export declare function normalizePadding(padding: PaddingDimensions): [number, number, number, number];
+/** The three spans of a padded row, summing to exactly the requested width. */
+interface PaddingGeometry {
+    readonly left: number;
+    readonly contentWidth: number;
+    readonly right: number;
+}
+/**
+ * Divides the requested width once into the three spans a padded row is made
+ * of, in the order they are worth spending cells on.
+ *
+ * The three used to be derived separately and disagree where it matters:
+ * `render` took the canvas as `Math.max(1, maxWidth - left - right)`, which
+ * clamps *up*, so a padding of 1 inside a 2-cell request drew 3-cell content
+ * rows beside 2-cell blank rows — an open frame the terminal then soft-wraps.
+ * Content takes its first cell before padding takes any, for the reason
+ * `layoutPanel` gives: a squeeze should cost you the decoration, not the thing
+ * being decorated.
+ */
+export declare function layoutPadding(outerWidth: number, leftWanted: number, rightWanted: number): PaddingGeometry;
 export declare class Padding implements Renderable, Measurable {
     readonly renderable: Renderable;
     readonly top: number;
@@ -26,7 +46,7 @@ export declare class Padding implements Renderable, Measurable {
     readonly left: number;
     readonly style: string | Style;
     readonly expand: boolean;
-    constructor(renderable: Renderable, padding: PaddingDimensions, options?: {
+    constructor(content: string | RichText | Renderable, padding: PaddingDimensions, options?: {
         style?: string | Style;
         expand?: boolean;
     });
@@ -36,3 +56,4 @@ export declare class Padding implements Renderable, Measurable {
         maximum: number;
     };
 }
+export {};

package/dist/renderables/padding.js

@@ -5,7 +5,8 @@ import { Segment } from "../core/segment.js";
 import { cellCount } from "../core/cells.js";
 import { NULL_STYLE } from "../core/style.js";
 import { Measurement } from "../core/measure.js";
-import { fitHeight, getStyle, insetHeight, isMeasurable, withBoundedWidth, withCellWidth } from "../core/protocol.js";
+import { fitHeight, getStyle, insetHeight, withBoundedWidth, withCellWidth } from "../core/protocol.js";
+import { embed } from "./embed.js";
 /**
  * Parses the shapes a caller may write padding in — one number, a vertical/
  * horizontal pair, or all four sides — into the four-sided form every
@@ -51,7 +52,7 @@ export function normalizePadding(padding) {
  * `layoutPanel` gives: a squeeze should cost you the decoration, not the thing
  * being decorated.
  */
-function layoutPadding(outerWidth, leftWanted, rightWanted) {
+export function layoutPadding(outerWidth, leftWanted, rightWanted) {
     let budget = cellCount(outerWidth);
     const take = (want) => {
         const got = Math.min(want, budget);
@@ -75,9 +76,9 @@ export class Padding {
     left;
     style;
     expand;
-    constructor(renderable, padding, options) {
+    constructor(content, padding, options) {
         const [top, right, bottom, left] = normalizePadding(padding);
-        this.renderable = renderable;
+        this.renderable = embed(content);
         this.top = top;
         this.right = right;
         this.bottom = bottom;
@@ -87,16 +88,25 @@ export class Padding {
     }
     *render(rawOptions) {
         const options = withBoundedWidth(rawOptions, this);
-        const geometry = layoutPadding(options.maxWidth, this.left, this.right);
+        // `expand` decides how wide the block is, never whether its rows reach
+        // that width: as Rich's does, a padding that does not expand narrows to
+        // what it measures, and every row is then padded out to it. Deciding the
+        // rows instead left the content rows ragged under a full-width blank row,
+        // and a `style` ground with holes down its right-hand side.
+        const width = this.expand ? options.maxWidth : Measurement.get(options, this).maximum;
+        const geometry = layoutPadding(width, this.left, this.right);
         const innerOptions = {
             ...options,
             maxWidth: geometry.contentWidth,
             height: insetHeight(options.height, this.top + this.bottom),
         };
-        const segments = [...this.renderable.render(innerOptions)];
-        const lines = fitHeight(Segment.splitLines(segments), innerOptions.height);
         const resolved = getStyle(options, this.style);
         const style = resolved.isNull ? undefined : resolved;
+        // The style is the ground the content is drawn on, not only the spaces
+        // around it — Rich's `render_lines(..., style=style)`. Applied to the
+        // padding alone, a background left a hole behind the content.
+        const segments = [...Segment.applyStyle(this.renderable.render(innerOptions), style)];
+        const lines = fitHeight(Segment.splitLines(segments), innerOptions.height);
         // Zero-length spans need no branch to suppress: the wire boundary drops
         // empty segments, so a padding the width could not afford emits nothing.
         const leftPad = new Segment(" ".repeat(geometry.left), style);
@@ -108,10 +118,9 @@ export class Padding {
         }
         for (const line of lines) {
             yield leftPad;
-            // `expand` is the pad half of this call; the crop half is unconditional,
-            // because a child that ignored the canvas it was handed (a Table at its
-            // natural width) would otherwise burst the padding around it.
-            yield* Segment.adjustLineLength(line, geometry.contentWidth, style, this.expand);
+            // Crops as well as pads: a child that ignored the canvas it was handed
+            // (a Table at its natural width) would otherwise burst the padding.
+            yield* Segment.adjustLineLength(line, geometry.contentWidth, style);
             yield rightPad;
             yield Segment.line();
         }
@@ -124,18 +133,15 @@ export class Padding {
         const options = withCellWidth(rawOptions);
         const geometry = layoutPadding(options.maxWidth, this.left, this.right);
         const overhead = geometry.left + geometry.right;
-        if (isMeasurable(this.renderable)) {
-            const measurement = Measurement.get({ ...options, maxWidth: geometry.contentWidth }, this.renderable);
-            // The ceiling is what was offered, and it wins over what the child asks
-            // for: a range whose floor sits above its own ceiling — this returned
-            // {8, 8} for three cells of padding inside a two-cell offer — is one no
-            // parent layout can divide.
-            const maximum = Math.min(options.maxWidth, measurement.maximum + overhead);
-            return {
-                minimum: Math.min(measurement.minimum + overhead, maximum),
-                maximum,
-            };
-        }
-        return { minimum: overhead, maximum: options.maxWidth };
+        const measurement = Measurement.get({ ...options, maxWidth: geometry.contentWidth }, this.renderable);
+        // The ceiling is what was offered, and it wins over what the child asks
+        // for: a range whose floor sits above its own ceiling — this returned
+        // {8, 8} for three cells of padding inside a two-cell offer — is one no
+        // parent layout can divide.
+        const maximum = Math.min(options.maxWidth, measurement.maximum + overhead);
+        return {
+            minimum: Math.min(measurement.minimum + overhead, maximum),
+            maximum,
+        };
     }
 }

package/dist/renderables/panel.d.ts

@@ -9,8 +9,8 @@ import type { PaddingDimensions } from "./padding.js";
 import type { Renderable, Measurable, RenderOptions } from "../core/protocol.js";
 /**
  * A lazily-resolved border accessory. Strings render inline in the
- * border style; a `RichText` accessory contributes ONLY its wrapping
- * `style` (per-range spans within the RichText are not preserved — the
+ * border style; a `RichText` accessory lays ONLY its wrapping `style` over
+ * the border's (per-range spans within the RichText are not preserved — the
  * accessory is a small status indicator, not an arbitrary span carrier).
  * A function form is evaluated at render time, *after* content has been
  * rendered for the current frame — use this when the accessory mirrors
@@ -34,14 +34,13 @@ export interface PanelOptions {
     style?: string | Style;
     borderStyle?: string | Style;
     /**
-     * Style for the title text in the top border. Defaults to `borderStyle`
-     * (i.e. title inherits the border color). Set independently when the
-     * title should pop relative to the border.
+     * Style for the title text in the top border, laid over `borderStyle`:
+     * what it sets wins, and what it leaves unset the border's supplies.
      */
     titleStyle?: string | Style;
     /**
-     * Style for the subtitle text in the bottom border. Defaults to
-     * `borderStyle`.
+     * Style for the subtitle text in the bottom border, laid over
+     * `borderStyle` as `titleStyle` is.
      */
     subtitleStyle?: string | Style;
     width?: number;
@@ -60,6 +59,8 @@ export declare class Panel implements Renderable, Measurable {
     readonly subtitleStyle: string | Style | undefined;
     readonly width: number | undefined;
     readonly padding: [number, number, number, number];
+    private readonly _titleLabel;
+    private readonly _subtitleLabel;
     constructor(content: string | RichText | Renderable, options?: PanelOptions);
     render(rawOptions: RenderOptions): Iterable<Segment>;
     /**
@@ -70,44 +71,41 @@ export declare class Panel implements Renderable, Measurable {
      */
     private _renderContent;
     /**
-     * One row of the panel body: frame column, span, frame column.
+     * One row of the panel body, cut where Rich cuts it: frame column, left
+     * padding, the content line made exactly `contentWidth` wide, right padding,
+     * frame column — each its own segment, so each its own SGR run.
      *
-     * [LAW:single-enforcer] `adjustLineLength` is the one place a width is
-     * decided here, and it runs twice against two different widths. The first
-     * pass crops content that rendered wider than the canvas it was handed (a
-     * `Table` at its natural width, say) back to the canvas, so an oversized
-     * child is trimmed rather than allowed to eat the right-hand padding. The
-     * second fills the rest of the span, which is the trailing padding and any
-     * shortfall in one stroke.
+     * [LAW:single-enforcer] `adjustLineLength` is the one place the content's
+     * width is decided: content that rendered wider than its canvas (a `Table`
+     * at its natural width, say) is cropped back to it, and a short line is
+     * filled out to it, so the right padding always starts at the same column.
      */
     private _renderRow;
+    /**
+     * A row of vertical padding: one blank run across the whole span, as Rich's
+     * `Padding` draws its blank lines, not a content row with nothing in it.
+     */
+    private _renderPaddingRow;
     measure(rawOptions: RenderOptions): {
         minimum: number;
         maximum: number;
     };
-    /**
-     * The width this panel wants when nothing declared one for it: its content
-     * plus its own frame, both read off the division it will render against.
-     *
-     * [LAW:one-source-of-truth] `measure` and `_getPanelWidth` ask this same
-     * question, and each used to work it out itself — the same `layoutPanel`, the
-     * same `frameOverhead`, the same `Math.min(maxWidth, maximum + overhead)`,
-     * written twice. That is the pattern `_declaredWidth` below was extracted to
-     * stop, left standing for the fit case; changing how overhead is derived in
-     * one copy is all it would take to put `measure` and `render` back into the
-     * disagreement this epic spent itself closing.
-     */
-    private _fitRange;
+    /** The content plus its own frame, both read off the division it will render against. */
+    private _contentRange;
+    /** The cells the title's label takes, its padding included; none without a title. */
+    private _labelWidth;
     /**
      * The width this panel was told to be, as a count of cells.
      *
-     * [LAW:one-source-of-truth] `measure` and `_getPanelWidth` answer the same
-     * question about the same field, so they read it from here. Answered
-     * separately, `measure` reported nine cells of content while `render` drew the
-     * declared twelve, and the parent that divided space from the range got a
-     * panel three cells wider than the share it granted.
+     * [LAW:one-source-of-truth] `measure` and `_getPanelWidth` read the field
+     * from here, so neither can count it differently from the other.
      */
     private get _declaredWidth();
+    /**
+     * As Rich's `__rich_console__` sizes it: a declared width is a ceiling that
+     * `expand` fills and a fitted panel fits its content inside, and the title
+     * widens either.
+     */
     private _getPanelWidth;
     private _renderTopBorder;
     private _renderBottomBorder;

package/dist/renderables/panel.js

@@ -7,9 +7,9 @@ import { NULL_STYLE } from "../core/style.js";
 import { ROUNDED } from "../core/box.js";
 import { Measurement } from "../core/measure.js";
 import { RichText } from "../core/text.js";
-import { embed, inlineLabel } from "./embed.js";
+import { cutLabel, drawLabel, embed, inlineLabel } from "./embed.js";
 import { normalizePadding } from "./padding.js";
-import { fitHeight, getStyle, insetHeight, isMeasurable, withBoundedWidth, withCellWidth } from "../core/protocol.js";
+import { drawable, fitHeight, getStyle, insetHeight, withBoundedWidth, withCellWidth } from "../core/protocol.js";
 function layoutPanel(outerWidth, padding) {
     const [, padRightWanted, , padLeftWanted] = padding;
     // Panel's one division point, and the width reaching it is not always one
@@ -49,11 +49,58 @@ function frameOverhead(geometry) {
     return geometry.left + geometry.right + geometry.padLeft + geometry.padRight;
 }
 /**
- * The style of text set into a border: its own when one was given, the
- * border's otherwise — the one rule for "what colour is the title text in".
+ * How a title or subtitle string is read: always as markup and never
+ * highlighted, whatever the console says, because Rich's `Panel` reads its
+ * title with `Text.from_markup` rather than through the console.
  */
-function borderTextStyle(options, own, border) {
-    return own === undefined ? border : getStyle(options, own);
+function borderLabel(options) {
+    return { ...options, markup: true, highlight: false };
+}
+/** A title or subtitle as Rich's `Panel._title` sets it: read as a border reads it, a space either side. */
+function borderTitle(label, options) {
+    return label.text(borderLabel(options)).pad(1);
+}
+/**
+ * The style of text set into a border — title, subtitle and accessory alike:
+ * its own laid over the border's, the one rule for "what colour is the title
+ * text in". Laid over rather than in place of it, as Rich's `stylize_before`
+ * does, because the border's style carries the panel's own: a title that
+ * replaced it cut a hole in the panel's background on the top row.
+ */
+function borderTextStyle(border, own) {
+    return own.isNull ? border : (border ?? NULL_STYLE).add(own);
+}
+/**
+ * A border row: the opening corner, the rule across `span` cells with `label`
+ * centred in it, and `close` — the closing corner, or nothing when the caller
+ * sets something between the rule and its corner.
+ *
+ * Cut as Rich cuts it. An unlabelled rule is one run, corners included. A
+ * label is set into the `span - 2` cells between one rule cell either side,
+ * truncated to them as Rich's `align_text` truncates it — marked only when the
+ * label's own overflow is `"ellipsis"` — and centred with the rule filling the
+ * rest, so the row leaves as corner-and-rule, rule, label, rule,
+ * rule-and-corner. Rich draws no label in a span of two cells or fewer
+ * (`width <= 4`), where it would sit on the corners.
+ */
+function borderRow(options, edge, geometry, span, label, labelStyle, border, close) {
+    const corner = edge.left.repeat(geometry.left);
+    if (label === undefined || span <= 2) {
+        return [new Segment(corner + edge.horizontal.repeat(span) + close, border)];
+    }
+    const canvas = span - 2;
+    const text = borderTitle(label, options);
+    cutLabel(text, canvas, text.overflow === "ellipsis" ? drawable(options, "\u2026", ".") : "");
+    const fitted = drawLabel(text, borderLabel(options), labelStyle);
+    const excess = canvas - Segment.getLineLength(fitted);
+    const before = Math.floor(excess / 2);
+    return [
+        new Segment(corner + edge.horizontal, border),
+        new Segment(edge.horizontal.repeat(before), border),
+        ...fitted,
+        new Segment(edge.horizontal.repeat(excess - before), border),
+        new Segment(edge.horizontal + close, border),
+    ];
 }
 export class Panel {
     renderable;
@@ -68,11 +115,15 @@ export class Panel {
     subtitleStyle;
     width;
     padding;
+    _titleLabel;
+    _subtitleLabel;
     constructor(content, options) {
         this.renderable = embed(content);
         this.box = options?.box ?? ROUNDED;
         this.title = options?.title;
         this.subtitle = options?.subtitle;
+        this._titleLabel = inlineLabel(this.title);
+        this._subtitleLabel = inlineLabel(this.subtitle);
         this.bottomRightAccessory = options?.bottomRightAccessory;
         this.expand = options?.expand !== false;
         this.style = options?.style ?? NULL_STYLE;
@@ -85,26 +136,27 @@ export class Panel {
     *render(rawOptions) {
         const options = withBoundedWidth(rawOptions, this);
         const box = this.box.substitute(options);
-        const borderStyle = getStyle(options, this.borderStyle);
+        // [LAW:one-source-of-truth] `style` is the ground the whole panel is drawn
+        // on, as Rich's is: the frame's style is the border style laid over it,
+        // and the content is rendered on top of it. Applied to the padding alone,
+        // "white on dark_blue" drew a blue ring with a hole where the text was.
         const style = getStyle(options, this.style);
+        const borderStyle = style.add(getStyle(options, this.borderStyle));
         const border = borderStyle.isNull ? undefined : borderStyle;
         const contentStyle = style.isNull ? undefined : style;
         const geometry = layoutPanel(this._getPanelWidth(options), this.padding);
         const [padTop, , padBottom] = this.padding;
-        const contentLines = this._renderContent(options, geometry.contentWidth);
-        // Top border (with optional title)
+        const contentLines = this._renderContent(options, geometry.contentWidth, contentStyle);
         yield* this._renderTopBorder(options, box, geometry, border);
-        // Top padding — a padding row is a content row whose content is nothing.
         for (let i = 0; i < padTop; i++) {
-            yield* this._renderRow(box, geometry, [], border, contentStyle);
+            yield* this._renderPaddingRow(box, geometry, border, contentStyle);
         }
         for (const line of contentLines) {
             yield* this._renderRow(box, geometry, line, border, contentStyle);
         }
         for (let i = 0; i < padBottom; i++) {
-            yield* this._renderRow(box, geometry, [], border, contentStyle);
+            yield* this._renderPaddingRow(box, geometry, border, contentStyle);
         }
-        // Bottom border (with optional subtitle)
         yield* this._renderBottomBorder(options, box, geometry, border);
     }
     /**
@@ -113,137 +165,107 @@ export class Panel {
      * but the render still happens, because a `bottomRightAccessory` thunk
      * fires at every width and reads state this render populates.
      */
-    _renderContent(options, contentWidth) {
+    _renderContent(options, contentWidth, style) {
         // Two border rows and the vertical padding are the panel's own. Handed on
         // as a region, the rest is the panel's to shape, which is what stretches
         // its frame down a pane and keeps its bottom border inside one.
         const [padTop, , padBottom] = this.padding;
         const height = insetHeight(options.height, 2 + padTop + padBottom);
-        const innerOptions = { ...options, maxWidth: contentWidth, height };
-        const lines = fitHeight(Segment.splitLines([...this.renderable.render(innerOptions)]), height);
+        // No highlighter: what the panel holds is drawn plain, as Rich's `Panel`
+        // hands its body `highlight=False`.
+        const innerOptions = { ...options, highlight: false, maxWidth: contentWidth, height };
+        const lines = fitHeight(Segment.splitLines([...Segment.applyStyle(this.renderable.render(innerOptions), style)]), height);
         return contentWidth === 0 ? [] : lines;
     }
     /**
-     * One row of the panel body: frame column, span, frame column.
+     * One row of the panel body, cut where Rich cuts it: frame column, left
+     * padding, the content line made exactly `contentWidth` wide, right padding,
+     * frame column — each its own segment, so each its own SGR run.
      *
-     * [LAW:single-enforcer] `adjustLineLength` is the one place a width is
-     * decided here, and it runs twice against two different widths. The first
-     * pass crops content that rendered wider than the canvas it was handed (a
-     * `Table` at its natural width, say) back to the canvas, so an oversized
-     * child is trimmed rather than allowed to eat the right-hand padding. The
-     * second fills the rest of the span, which is the trailing padding and any
-     * shortfall in one stroke.
+     * [LAW:single-enforcer] `adjustLineLength` is the one place the content's
+     * width is decided: content that rendered wider than its canvas (a `Table`
+     * at its natural width, say) is cropped back to it, and a short line is
+     * filled out to it, so the right padding always starts at the same column.
      */
     *_renderRow(box, geometry, line, border, contentStyle) {
         const frame = box.getContentChars("row");
         yield new Segment(frame.left.repeat(geometry.left), border);
-        const content = Segment.adjustLineLength(line, geometry.contentWidth, contentStyle, false);
-        const span = [new Segment(" ".repeat(geometry.padLeft), contentStyle), ...content];
-        yield* Segment.adjustLineLength(span, geometry.spanWidth, contentStyle);
+        yield new Segment(" ".repeat(geometry.padLeft), contentStyle);
+        yield* Segment.adjustLineLength(line, geometry.contentWidth, contentStyle);
+        yield new Segment(" ".repeat(geometry.padRight), contentStyle);
+        yield new Segment(frame.right.repeat(geometry.right), border);
+        yield Segment.line();
+    }
+    /**
+     * A row of vertical padding: one blank run across the whole span, as Rich's
+     * `Padding` draws its blank lines, not a content row with nothing in it.
+     */
+    *_renderPaddingRow(box, geometry, border, contentStyle) {
+        const frame = box.getContentChars("row");
+        yield new Segment(frame.left.repeat(geometry.left), border);
+        yield new Segment(" ".repeat(geometry.spanWidth), contentStyle);
         yield new Segment(frame.right.repeat(geometry.right), border);
         yield Segment.line();
     }
     measure(rawOptions) {
         const options = withCellWidth(rawOptions);
+        // Rich's `__rich_measure__`, which is not its render's arithmetic: a
+        // declared width is the measurement whatever the panel then draws inside
+        // it, and a title counts as content beside the body, with the padding and
+        // frame around it, where the render holds it between one rule cell either
+        // side. A parent sizing from it sizes as Rich's parent does.
         const declared = this._declaredWidth;
         if (declared !== undefined) {
-            // A declared width is not a ceiling on the content, it is the answer:
-            // `_getPanelWidth` returns it before measuring anything, so the panel
-            // draws at this width whatever the content wants. Reported with a
-            // content-derived floor instead, `{width: 20}` around "hi" offered 100
-            // cells answered 6..20 and then drew 20 every time, and a parent
-            // dividing space from the floor under-provisioned it.
             const width = Math.min(options.maxWidth, declared);
             return { minimum: width, maximum: width };
         }
-        return this._fitRange(options);
+        const content = this._contentRange(options);
+        const overhead = frameOverhead(layoutPanel(options.maxWidth, this.padding));
+        const maximum = Math.min(options.maxWidth, Math.max(content.maximum, this._labelWidth(options) + overhead));
+        return { minimum: Math.min(content.minimum, maximum), maximum };
     }
-    /**
-     * The width this panel wants when nothing declared one for it: its content
-     * plus its own frame, both read off the division it will render against.
-     *
-     * [LAW:one-source-of-truth] `measure` and `_getPanelWidth` ask this same
-     * question, and each used to work it out itself — the same `layoutPanel`, the
-     * same `frameOverhead`, the same `Math.min(maxWidth, maximum + overhead)`,
-     * written twice. That is the pattern `_declaredWidth` below was extracted to
-     * stop, left standing for the fit case; changing how overhead is derived in
-     * one copy is all it would take to put `measure` and `render` back into the
-     * disagreement this epic spent itself closing.
-     */
-    _fitRange(options) {
+    /** The content plus its own frame, both read off the division it will render against. */
+    _contentRange(options) {
         const geometry = layoutPanel(options.maxWidth, this.padding);
         const overhead = frameOverhead(geometry);
-        if (isMeasurable(this.renderable)) {
-            const innerOptions = {
-                ...options,
-                maxWidth: geometry.contentWidth,
-            };
-            const measurement = Measurement.get(innerOptions, this.renderable);
-            const maximum = Math.min(options.maxWidth, measurement.maximum + overhead);
-            return {
-                minimum: Math.min(measurement.minimum + overhead, maximum),
-                maximum,
-            };
-        }
-        // Content that cannot measure itself leaves the panel with nothing to want,
-        // so it wants the offer — unbounded included, which `withBoundedWidth`
-        // reports rather than turning into a number nobody can defend.
-        return { minimum: Math.min(overhead, options.maxWidth), maximum: options.maxWidth };
+        const measurement = Measurement.get({ ...options, maxWidth: geometry.contentWidth }, this.renderable);
+        return {
+            minimum: measurement.minimum + overhead,
+            maximum: Math.min(options.maxWidth, measurement.maximum + overhead),
+        };
+    }
+    /** The cells the title's label takes, its padding included; none without a title. */
+    _labelWidth(options) {
+        return this._titleLabel === undefined ? 0 : borderTitle(this._titleLabel, options).cellLength;
     }
     /**
      * The width this panel was told to be, as a count of cells.
      *
-     * [LAW:one-source-of-truth] `measure` and `_getPanelWidth` answer the same
-     * question about the same field, so they read it from here. Answered
-     * separately, `measure` reported nine cells of content while `render` drew the
-     * declared twelve, and the parent that divided space from the range got a
-     * panel three cells wider than the share it granted.
+     * [LAW:one-source-of-truth] `measure` and `_getPanelWidth` read the field
+     * from here, so neither can count it differently from the other.
      */
     get _declaredWidth() {
         return this.width === undefined ? undefined : cellCount(this.width);
     }
+    /**
+     * As Rich's `__rich_console__` sizes it: a declared width is a ceiling that
+     * `expand` fills and a fitted panel fits its content inside, and the title
+     * widens either.
+     */
     _getPanelWidth(options) {
-        const declared = this._declaredWidth;
-        if (declared !== undefined)
-            return Math.min(declared, options.maxWidth);
-        if (this.expand)
-            return options.maxWidth;
-        return this._fitRange(options).maximum;
+        const ceiling = Math.min(options.maxWidth, this._declaredWidth ?? options.maxWidth);
+        const body = this.expand ? ceiling : this._contentRange({ ...options, maxWidth: ceiling }).maximum;
+        // The title holds its label whole between one rule cell either side —
+        // past a declared width too, up to the width the panel was offered.
+        const floor = this._titleLabel === undefined ? 0 : this._labelWidth(options) + 4;
+        return Math.min(options.maxWidth, Math.max(body, floor));
     }
     *_renderTopBorder(options, box, geometry, border) {
-        const innerBorderWidth = geometry.spanWidth;
-        const titleSeg = borderTextStyle(options, this.titleStyle, border);
-        const title = inlineLabel(this.title, options, titleSeg);
-        const titleWidth = Segment.getLineLength(title);
-        if (titleWidth === 0) {
-            yield new Segment(box.top.left.repeat(geometry.left), border);
-            yield new Segment(box.top.horizontal.repeat(innerBorderWidth), border);
-            yield new Segment(box.top.right.repeat(geometry.right), border);
-            yield Segment.line();
-            return;
-        }
-        yield new Segment(box.top.left.repeat(geometry.left), border);
-        if (titleWidth >= innerBorderWidth) {
-            // Title fills the border. [LAW:one-source-of-truth] adjustLineLength is
-            // cell-aware — a plain .slice would miscount wide chars and break border
-            // alignment.
-            yield* Segment.adjustLineLength(title, innerBorderWidth, titleSeg);
-        }
-        else {
-            // Center the title in the top border
-            const leftRuleWidth = Math.floor((innerBorderWidth - titleWidth) / 2);
-            const rightRuleWidth = innerBorderWidth - titleWidth - leftRuleWidth;
-            if (leftRuleWidth > 0)
-                yield new Segment(box.top.horizontal.repeat(leftRuleWidth), border);
-            yield* title;
-            if (rightRuleWidth > 0)
-                yield new Segment(box.top.horizontal.repeat(rightRuleWidth), border);
-        }
-        yield new Segment(box.top.right.repeat(geometry.right), border);
+        const titleStyle = borderTextStyle(border, getStyle(options, this.titleStyle ?? NULL_STYLE));
+        yield* borderRow(options, box.top, geometry, geometry.spanWidth, this._titleLabel, titleStyle, border, box.top.right.repeat(geometry.right));
         yield Segment.line();
     }
     *_renderBottomBorder(options, box, geometry, border) {
-        const innerBorderWidth = geometry.spanWidth;
         // Resolve the right accessory *now*. Function form evaluates after
         // content has been rendered (Panel.render collects content segments
         // before yielding any borders), so the thunk sees fresh widget state.
@@ -253,44 +275,18 @@ export class Panel {
             : typeof accessory === "string"
                 ? ` ${accessory} `
                 : ` ${accessory.plain} `;
-        const accessoryWidth = cellLen(accessoryDisplay);
+        // Cell-aware clip: the accessory never claims more than the span.
+        const accessoryText = setCellSize(accessoryDisplay, asCellCol(Math.min(cellLen(accessoryDisplay), geometry.spanWidth)));
         const accessoryOwn = accessory instanceof RichText ? accessory.resolvedStyle(options) : NULL_STYLE;
-        const accessoryStyle = accessoryOwn.isNull ? border : accessoryOwn;
-        yield new Segment(box.bottom.left.repeat(geometry.left), border);
-        // Space available for the centered subtitle / rule fill — the accessory
-        // (if any) hugs the right edge and the subtitle treats the remainder
-        // as its centering canvas.
-        const centerWidth = Math.max(0, innerBorderWidth - accessoryWidth);
-        const subtitleSeg = borderTextStyle(options, this.subtitleStyle, border);
-        const subtitle = inlineLabel(this.subtitle, options, subtitleSeg);
-        const subtitleWidth = Segment.getLineLength(subtitle);
-        if (subtitleWidth === 0) {
-            if (centerWidth > 0)
-                yield new Segment(box.bottom.horizontal.repeat(centerWidth), border);
-        }
-        else {
-            if (subtitleWidth >= centerWidth) {
-                // Cell-aware clip — see _renderTopBorder.
-                yield* Segment.adjustLineLength(subtitle, centerWidth, subtitleSeg);
-            }
-            else {
-                const leftRuleWidth = Math.floor((centerWidth - subtitleWidth) / 2);
-                const rightRuleWidth = centerWidth - subtitleWidth - leftRuleWidth;
-                if (leftRuleWidth > 0)
-                    yield new Segment(box.bottom.horizontal.repeat(leftRuleWidth), border);
-                yield* subtitle;
-                if (rightRuleWidth > 0)
-                    yield new Segment(box.bottom.horizontal.repeat(rightRuleWidth), border);
-            }
-        }
-        if (accessoryWidth > 0) {
-            // Cell-aware clip — see _renderTopBorder.
-            const fit = accessoryWidth > innerBorderWidth
-                ? setCellSize(accessoryDisplay, asCellCol(innerBorderWidth))
-                : accessoryDisplay;
-            yield new Segment(fit, accessoryStyle);
-        }
-        yield new Segment(box.bottom.right.repeat(geometry.right), border);
+        const subtitleStyle = borderTextStyle(border, getStyle(options, this.subtitleStyle ?? NULL_STYLE));
+        // The accessory hugs the bottom-right corner; the rule and subtitle are
+        // laid out, as Rich lays them, across the span it leaves. With no
+        // accessory the corner closes the rule's last run, as Rich's does.
+        const corner = box.bottom.right.repeat(geometry.right);
+        const [close, afterAccessory] = accessoryText === "" ? [corner, ""] : ["", corner];
+        yield* borderRow(options, box.bottom, geometry, geometry.spanWidth - cellLen(accessoryText), this._subtitleLabel, subtitleStyle, border, close);
+        yield new Segment(accessoryText, borderTextStyle(border, accessoryOwn));
+        yield new Segment(afterAccessory, border);
         yield Segment.line();
     }
     _resolveAccessory(a) {