@textui/widgets 0.1.0

package/src/data/index.ts

@@ -0,0 +1,243 @@
+import type { BoxProps, ComponentDefinition, RenderOutput, SemanticVariant } from '@textui/core';
+import {
+  chorded,
+  defineComponent,
+  fitTo,
+  h,
+  stringWidth,
+  useFocus,
+  useInput,
+  useMeasure,
+  useState,
+  useTheme,
+} from '@textui/core';
+import { EmptyState } from '../display/index.js';
+import { TONE } from '../tone.js';
+import { viewportRows } from '../viewport.js';
+import { CodeViewer } from './code-viewer.js';
+import { Feed } from './feed.js';
+import { List } from './list.js';
+import { LogViewer } from './log-viewer.js';
+import { MarkdownView } from './markdown-view.js';
+import { Pagination } from './pagination.js';
+import { Tree } from './tree.js';
+
+/**
+ * Lists, tables and trees.
+ *
+ * These are the components that own real interaction state - selection,
+ * keyboard navigation, scrolling - so they are the ones where a controlled and
+ * an uncontrolled mode both have to work. The rule throughout: if the caller
+ * passes the value, the caller owns it; otherwise the component keeps it.
+ */
+export * from './code-viewer.js';
+export * from './feed.js';
+export * from './list.js';
+export * from './log-viewer.js';
+export * from './markdown-view.js';
+export * from './pagination.js';
+export * from './scroll-thumb.js';
+export * from './tree.js';
+
+export interface TableColumn<T extends object = Record<string, unknown>> {
+  key: string;
+  header: string;
+  /** Fixed cell width. Omit to size from the content. */
+  width?: number;
+  align?: 'left' | 'center' | 'right';
+  /** Lower priority columns are dropped first as the table narrows. */
+  priority?: number;
+  /** Render a cell to a string. Defaults to `String(row[key])`. */
+  format?(value: unknown, row: T): string;
+  tone?(value: unknown, row: T): SemanticVariant | undefined;
+  /** Take the whole remaining width. At most one column should. */
+  flex?: boolean;
+}
+
+export interface TableProps<T extends object = Record<string, unknown>> extends BoxProps {
+  columns: TableColumn<T>[];
+  rows: T[];
+  /** Field used as the row key. Defaults to `id`. */
+  rowKey?: string;
+  selectedKey?: string;
+  onSelect?(key: string, row: T): void;
+  onActivate?(key: string, row: T): void;
+  visibleRows?: number;
+  showHeader?: boolean;
+  emptyMessage?: string;
+  focusable?: boolean;
+  /** Width below which low-priority columns start being dropped. */
+  responsive?: boolean;
+}
+
+/**
+ * A data table.
+ *
+ * Responsiveness is a column-priority problem, not a font-size problem: as the
+ * table narrows it drops the lowest-priority columns rather than squeezing
+ * every column until none of them is readable.
+ */
+const TableImpl = defineComponent<TableProps<Record<string, unknown>>>('Table', (props) => {
+  const theme = useTheme();
+  const {
+    columns, rows, rowKey = 'id', selectedKey, onSelect, onActivate,
+    visibleRows, showHeader = true, emptyMessage = 'No rows',
+    focusable = true, responsive = true, width, ...rest
+  } = props;
+
+  const focus = useFocus({ disabled: !focusable });
+  const measured = useMeasure();
+  const [internalKey, setInternalKey] = useState<string | null>(null);
+  const keyOf = (row: Record<string, unknown>): string => String(row[rowKey] ?? '');
+
+  // The header is a row of the pane too, so it comes out of the body's share.
+  const bodyRows = viewportRows(props, measured, rows.length, {
+    requested: visibleRows,
+    reserved: showHeader ? 1 : 0,
+  });
+  const pageSize = bodyRows;
+
+  const currentKey = selectedKey ?? internalKey ?? (rows[0] ? keyOf(rows[0]) : null);
+  const index = Math.max(0, rows.findIndex((r) => keyOf(r) === currentKey));
+
+  const select = (next: number): void => {
+    const row = rows[Math.max(0, Math.min(rows.length - 1, next))];
+    if (!row) return;
+    if (selectedKey === undefined) setInternalKey(keyOf(row));
+    onSelect?.(keyOf(row), row);
+  };
+
+  useInput(
+    (event) => {
+      if (rows.length === 0 || chorded(event)) return false;
+      switch (event.name) {
+        case 'up': select(index - 1); return true;
+        case 'down': select(index + 1); return true;
+        case 'home': select(0); return true;
+        case 'end': select(rows.length - 1); return true;
+        case 'pageup': select(index - pageSize); return true;
+        case 'pagedown': select(index + pageSize); return true;
+        case 'enter': {
+          const row = rows[index];
+          if (row) onActivate?.(keyOf(row), row);
+          return true;
+        }
+        default: return false;
+      }
+    },
+    { focusId: focus.id, enabled: focusable },
+  );
+
+  if (rows.length === 0) return h(EmptyState, { title: emptyMessage, ...rest });
+
+  // Column widths: fixed where stated, else the widest cell, capped.
+  const columnWidths = columns.map((col) => {
+    if (col.width !== undefined) return col.width;
+    const header = showHeader ? stringWidth(col.header) : 0;
+    const cells = rows.map((row) => {
+      const value = (row as Record<string, unknown>)[col.key];
+      return stringWidth(col.format ? col.format(value, row) : String(value ?? ''));
+    });
+    return Math.max(header, ...cells, 1);
+  });
+
+  const gap = theme.density === 'compact' ? 1 : 2;
+  const available = typeof width === 'number' ? width : Infinity;
+
+  // Drop the lowest-priority columns until what remains fits.
+  //
+  // Two rules keep this from making a table worse. A column that states no
+  // priority inherits its position - earlier columns matter more - so an
+  // unstated column never ties with one explicitly marked unimportant. And the
+  // first column is never dropped: it is what identifies the row, and a table
+  // of measurements with nothing to attach them to is not a smaller table, it
+  // is a useless one.
+  let shown = columns.map((col, i) => ({
+    col,
+    width: columnWidths[i] as number,
+    priority: col.priority ?? columns.length - i,
+    index: i,
+  }));
+
+  if (responsive && Number.isFinite(available)) {
+    const total = (): number =>
+      shown.reduce((sum, c) => sum + c.width, 0) + gap * Math.max(0, shown.length - 1);
+
+    while (total() > available && shown.length > 1) {
+      let worstAt = -1;
+      let worst = Infinity;
+      // Skip index 0, and prefer the rightmost on a tie.
+      for (let i = 1; i < shown.length; i++) {
+        const p = (shown[i] as { priority: number }).priority;
+        if (p <= worst) { worst = p; worstAt = i; }
+      }
+      if (worstAt === -1) break;
+      shown = shown.filter((_, i) => i !== worstAt);
+    }
+  }
+
+  const rowsWindow = (): { row: Record<string, unknown>; key: string }[] => {
+    const all = rows.map((row) => ({ row: row as Record<string, unknown>, key: keyOf(row) }));
+    if (all.length <= bodyRows) return all;
+    const start = Math.max(0, Math.min(index - Math.floor(bodyRows / 2), all.length - bodyRows));
+    return all.slice(start, start + bodyRows);
+  };
+
+  const cell = (text: string, entry: { col: TableColumn; width: number }, tone?: SemanticVariant): unknown =>
+    h('box', { key: entry.col.key, width: entry.col.flex ? undefined : entry.width, flex: entry.col.flex ? 1 : undefined },
+      h('text', {
+        content: fitTo(text, entry.width, entry.col.align ?? 'left'),
+        fg: tone ? TONE[tone] : undefined,
+        truncate: 'end',
+      }));
+
+  return h('box', { id: focus.id, role: 'table', direction: 'column', width, ...rest },
+    showHeader
+      ? h('box', { role: 'row', direction: 'row', gap, dim: true },
+          ...shown.map((entry) =>
+            h('box', { key: entry.col.key, width: entry.col.flex ? undefined : entry.width, flex: entry.col.flex ? 1 : undefined, role: 'columnheader' },
+              h('text', { content: fitTo(entry.col.header, entry.width, entry.col.align ?? 'left') }))))
+      : null,
+
+    ...rowsWindow().map(({ row, key }) => {
+      const active = key === currentKey;
+      return h('box', {
+        key,
+        role: 'row',
+        selected: active,
+        direction: 'row',
+        gap,
+        bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
+        fg: active && focus.focused ? 'inverted' : undefined,
+        onClick: () => {
+          if (selectedKey === undefined) setInternalKey(key);
+          onSelect?.(key, row);
+        },
+      },
+        ...shown.map((entry) => {
+          const value = row[entry.col.key];
+          const text = entry.col.format ? entry.col.format(value, row) : String(value ?? '');
+          return cell(text, entry, entry.col.tone?.(value, row));
+        }),
+      );
+    }),
+  );
+});
+
+/**
+ * Exported with its own generic signature so a caller's row type flows into
+ * `format` and `tone` - the alternative is every table taking
+ * `Record<string, unknown>` and every cell function starting with a cast.
+ */
+export const Table = TableImpl as <T extends object>(props: TableProps<T>) => RenderOutput;
+
+export const DATA_COMPONENTS: ComponentDefinition[] = [
+  { component: 'List', category: 'data', renderer: { kind: 'function', render: List }, role: 'list', description: 'Selectable rows with keyboard navigation.' },
+  { component: 'Table', category: 'data', renderer: { kind: 'function', render: TableImpl }, role: 'table', description: 'Columns that drop by priority as space runs out.' },
+  { component: 'Tree', category: 'data', renderer: { kind: 'function', render: Tree }, role: 'tree', description: 'Expandable hierarchy.' },
+  { component: 'Pagination', category: 'data', renderer: { kind: 'function', render: Pagination }, description: 'Page of pages.' },
+  { component: 'LogViewer', category: 'data', renderer: { kind: 'function', render: LogViewer }, role: 'log', description: 'Streaming lines that follow the tail until you scroll.' },
+  { component: 'CodeViewer', category: 'data', renderer: { kind: 'function', render: CodeViewer }, role: 'document', description: 'A scrolling, syntax-coloured file viewer.' },
+  { component: 'MarkdownView', category: 'data', renderer: { kind: 'function', render: MarkdownView }, role: 'document', description: 'Markdown drawn into the width it was given. Does not scroll.' },
+  { component: 'Feed', category: 'data', renderer: { kind: 'function', render: Feed }, role: 'list', description: 'A viewport over entries of any height, with a cursor and a tail it follows.' },
+];

package/src/data/list.ts

@@ -0,0 +1,149 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+import {
+  chorded,
+  defineComponent,
+  h,
+  useFocus,
+  useInput,
+  useMeasure,
+  useState,
+  useTheme,
+} from '@textui/core';
+import { EmptyState } from '../display/index.js';
+import { TONE } from '../tone.js';
+import { viewportRows } from '../viewport.js';
+
+
+export interface ListItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  tone?: SemanticVariant;
+  meta?: string;
+  disabled?: boolean;
+}
+
+export interface ListProps extends BoxProps {
+  items: ListItem[];
+  selectedId?: string;
+  onSelect?(id: string, item: ListItem): void;
+  onActivate?(id: string, item: ListItem): void;
+  /** Rows visible at once. Scrolls when there are more. */
+  visibleRows?: number;
+  emptyMessage?: string;
+  /** Draw a marker column for the selected row. */
+  marker?: boolean;
+  focusable?: boolean;
+  autoFocus?: boolean;
+  /**
+   * A stable focus id, so a command - or the screen that owns this - can put
+   * the reader here by name. Without one the id comes from the instance, which
+   * nothing outside the render can know.
+   */
+  focusId?: string;
+}
+
+export const List = defineComponent<ListProps>('List', (props) => {
+  const theme = useTheme();
+  const {
+    items, selectedId, onSelect, onActivate, visibleRows,
+    emptyMessage = 'Nothing here', marker = true, focusable = true,
+    autoFocus, focusId, ...rest
+  } = props;
+
+  const focus = useFocus({
+    ...(focusId ? { id: focusId } : {}),
+    disabled: !focusable,
+    ...(autoFocus ? { autoFocus } : {}),
+  });
+  const measured = useMeasure();
+  const [internalId, setInternalId] = useState<string | null>(
+    items.find((i) => !i.disabled)?.id ?? null,
+  );
+  const currentId = selectedId ?? internalId;
+  const pageSize = viewportRows(props, measured, 10, { requested: visibleRows });
+  const index = Math.max(0, items.findIndex((i) => i.id === currentId));
+
+  /**
+   * Move to `target`, skipping past anything unselectable on the way.
+   *
+   * The direction has to be given rather than inferred, because `home` and
+   * `end` land on an index without coming from one. Stopping at a disabled row
+   * instead of stepping over it makes a heading into a wall - which is what a
+   * grouped list is made of, so it could not be built at all.
+   */
+  const selectAt = (target: number, direction: 1 | -1): void => {
+    let i = Math.max(0, Math.min(items.length - 1, target));
+    while (i >= 0 && i < items.length && items[i]?.disabled === true) i += direction;
+    const item = items[i];
+    if (!item) return;
+    if (selectedId === undefined) setInternalId(item.id);
+    onSelect?.(item.id, item);
+  };
+
+  useInput(
+    (event) => {
+      if (items.length === 0 || chorded(event)) return false;
+      switch (event.name) {
+        case 'up': selectAt(index - 1, -1); return true;
+        case 'down': selectAt(index + 1, 1); return true;
+        case 'home': selectAt(0, 1); return true;
+        case 'end': selectAt(items.length - 1, -1); return true;
+        case 'pageup': selectAt(index - pageSize, -1); return true;
+        case 'pagedown': selectAt(index + pageSize, 1); return true;
+        case 'enter': {
+          const item = items[index];
+          if (item && item.disabled !== true) onActivate?.(item.id, item);
+          return true;
+        }
+        default: return false;
+      }
+    },
+    { focusId: focus.id, enabled: focusable },
+  );
+
+  if (items.length === 0) {
+    return h(EmptyState, { title: emptyMessage, ...rest });
+  }
+
+  // Keep the selection in view without moving it more than necessary.
+  //
+  // 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 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;
+      return h('box', {
+        key: item.id,
+        role: 'listitem',
+        label: item.label,
+        selected: active,
+        direction: 'row',
+        gap: 1,
+        bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
+        fg: item.disabled ? 'disabled' : active && focus.focused ? 'inverted' : undefined,
+        onClick: () => {
+          if (item.disabled) return;
+          if (selectedId === undefined) 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 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,
+      );
+    }),
+  );
+});

package/src/data/log-viewer.ts

@@ -0,0 +1,105 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+import {
+  chorded,
+  defineComponent,
+  h,
+  useFocus,
+  useInput,
+  useMeasure,
+  useState,
+} from '@textui/core';
+import { TONE } from '../tone.js';
+import { viewportRows } from '../viewport.js';
+
+export interface LogLine {
+  time?: string;
+  level?: 'debug' | 'info' | 'warn' | 'error';
+  source?: string;
+  message: string;
+}
+
+export interface LogViewerProps extends BoxProps {
+  lines: LogLine[];
+  /** Rows shown. Older lines scroll off the top. */
+  visibleRows?: number;
+  /** Stick to the newest line. Turned off when the reader scrolls up. */
+  follow?: boolean;
+  showTime?: boolean;
+  showLevel?: boolean;
+  onFollowChange?(follow: boolean): void;
+}
+
+const LEVEL_TONE: Record<string, SemanticVariant> = {
+  debug: 'muted', info: 'info', warn: 'warning', error: 'danger',
+};
+
+/**
+ * Streaming text.
+ *
+ * A log viewer follows the tail until the reader scrolls, then stops - the one
+ * behaviour that makes the difference between a log you can read and a log
+ * that yanks itself out from under you.
+ */
+export const LogViewer = defineComponent<LogViewerProps>('LogViewer', (props) => {
+  const {
+    lines, visibleRows: visibleRowsProp, follow: followProp, showTime = true,
+    showLevel = true, onFollowChange, ...rest
+  } = props;
+
+  const focus = useFocus({});
+  const measured = useMeasure();
+  const [offset, setOffset] = useState(0);
+  const [following, setFollowing] = useState(followProp ?? true);
+  const follow = followProp ?? following;
+
+  // Ten rows was a guess. The pane knows the answer.
+  const visibleRows = viewportRows(props, measured, visibleRowsProp ?? 10, {
+    requested: visibleRowsProp,
+  });
+  const maxOffset = Math.max(0, lines.length - visibleRows);
+  const top = follow ? maxOffset : Math.min(offset, maxOffset);
+
+  const scroll = (delta: number): void => {
+    const next = Math.max(0, Math.min(maxOffset, top + delta));
+    setOffset(next);
+    const nowFollowing = next >= maxOffset;
+    if (followProp === undefined) setFollowing(nowFollowing);
+    onFollowChange?.(nowFollowing);
+  };
+
+  useInput(
+    (event) => {
+      if (chorded(event)) return false;
+      switch (event.name) {
+        case 'up': scroll(-1); return true;
+        case 'down': scroll(1); return true;
+        case 'pageup': scroll(-visibleRows); return true;
+        case 'pagedown': scroll(visibleRows); return true;
+        case 'home': scroll(-lines.length); return true;
+        case 'end': scroll(lines.length); return true;
+        default: return false;
+      }
+    },
+    { focusId: focus.id },
+  );
+
+  const window = lines.slice(top, top + visibleRows);
+
+  return h('box', { id: focus.id, role: 'log', direction: 'column', ...rest },
+    ...window.map((line, i) =>
+      h('box', { key: top + i, direction: 'row', gap: 1 },
+        showTime && line.time ? h('text', { content: line.time, fg: 'subtle' }) : null,
+        showLevel && line.level
+          ? h('text', {
+              content: line.level.toUpperCase().padEnd(5),
+              fg: TONE[LEVEL_TONE[line.level] ?? 'muted'],
+            })
+          : null,
+        line.source ? h('text', { content: line.source, fg: 'muted' }) : null,
+        h('text', { content: line.message, flex: 1, truncate: 'end' }),
+      )),
+    !follow
+      ? h('text', { content: '  paused - end to follow', fg: 'warning', dim: true })
+      : null,
+  );
+});

package/src/data/markdown-view.ts

@@ -0,0 +1,182 @@
+import type { BoxProps, MarkdownRow, MarkdownRun, ResolvedTheme, StyleColor } from '@textui/core';
+import {
+  defineComponent,
+  h,
+  layoutMarkdown,
+  repeatToWidth,
+  useMeasure,
+  useMemo,
+  useTheme,
+} from '@textui/core';
+import { CodeViewer } from './code-viewer.js';
+
+// ------------------------------------------------------------------ markdown
+
+export interface MarkdownViewProps extends BoxProps {
+  /** The document. Ignored when `rows` is passed. */
+  content?: string;
+  /** Already laid out - for a viewer that windows the rows itself. */
+  rows?: MarkdownRow[];
+  /** Paint only this slice. The caller owns the scrolling when it passes one. */
+  window?: { first: number; count: number };
+  /** Collapse past this many rows, with a count of what is hidden. */
+  maxLines?: number;
+  /** Dim everything, for reasoning and other second-voice text. */
+  quiet?: boolean;
+}
+
+/**
+ * Markdown, drawn into the width it was given.
+ *
+ * It fills the space it is in and does not scroll: a document viewer owns its
+ * viewport and a message in a transcript does not, so scrolling belongs to
+ * whoever holds the rows, not to the thing that paints them. Pass `content`
+ * and it lays out what it measured; pass `rows` and a `window` and it paints
+ * that slice of somebody else's layout.
+ *
+ * Inline emphasis, code and links survive, because they are meaning rather
+ * than markup wherever the text was written by an agent or a service for a
+ * person to read.
+ */
+export const MarkdownView = defineComponent<MarkdownViewProps>('MarkdownView', (props) => {
+  const { content = '', rows: given, window: slice, maxLines, quiet, ...rest } = props;
+  const theme = useTheme();
+  const measured = useMeasure();
+  const width = measured.width > 0 ? measured.width : 0;
+  const ruled = theme.border !== 'none';
+
+  const laid = useMemo(
+    () => given ?? layoutMarkdown(content, {
+      width,
+      bullet: theme.glyphs.bulletFilled,
+      quoteBar: theme.borderChars().left,
+      ruled,
+    }),
+    [given, content, width, theme, ruled],
+  );
+
+  const first = slice?.first ?? 0;
+  const shown = slice ? laid.slice(first, first + slice.count) : laid;
+  const capped = maxLines !== undefined ? shown.slice(0, maxLines) : shown;
+  const hidden = shown.length - capped.length;
+
+  const out: unknown[] = [];
+  for (let i = 0; i < capped.length;) {
+    const row = capped[i] as MarkdownRow;
+    const key = first + i;
+
+    if (row.kind === 'fence') {
+      // A fence the window cuts through is still one box, with only the rules
+      // that are actually on screen.
+      let end = i;
+      while (end < capped.length) {
+        const next = capped[end] as MarkdownRow;
+        if (next.kind !== 'fence' || next.fence !== row.fence) break;
+        end++;
+      }
+      const group = capped.slice(i, end) as Extract<MarkdownRow, { kind: 'fence' }>[];
+      const code = group.filter((r) => r.part === 'code').map((r) => r.text ?? '');
+      const language = group.find((r) => r.language)?.language;
+
+      if (!ruled) {
+        out.push(h('box', { key, padding: [0, 1], bg: 'surfaceAlt' }, h(CodeViewer, {
+          content: code.join('\n'),
+          lineNumbers: false, scrollbar: false, showCaret: false, disabled: true,
+          ...(language ? { language } : {}),
+        })));
+      } else if (code.length === 0) {
+        // Only one edge of the box is on screen, and a box one row tall cannot
+        // say which. Drawn directly, so the seam is invisible as it scrolls.
+        out.push(h('text', {
+          key,
+          content: fenceEdge(theme, width, group.some((r) => r.part === 'open')),
+          fg: 'borderSubtle',
+          wrap: 'none',
+        }));
+      } else {
+        out.push(h('box', {
+          key,
+          border: {
+            style: theme.border,
+            color: 'borderSubtle',
+            sides: {
+              top: group.some((r) => r.part === 'open'),
+              bottom: group.some((r) => r.part === 'close'),
+              left: true,
+              right: true,
+            },
+          },
+          padding: [0, 1],
+        }, h(CodeViewer, {
+          content: code.join('\n'),
+          lineNumbers: false, scrollbar: false, showCaret: false,
+          // A fence inside a rendered document is typography, not a control.
+          // Focusable, every code block in a README becomes a tab stop.
+          disabled: true,
+          ...(language ? { language } : {}),
+        })));
+      }
+      i = end;
+      continue;
+    }
+
+    if (row.kind === 'rule') {
+      out.push(h('box', { key, height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }));
+      i++;
+      continue;
+    }
+
+    if (row.kind === 'heading') {
+      out.push(h('box', { key, direction: 'row', overflow: 'hidden' },
+        ...runNodes(row.runs, {
+          bold: row.level <= 2,
+          underline: row.level === 1,
+          fg: quiet ? 'muted' : row.level <= 2 ? 'text' : 'muted',
+        })));
+      i++;
+      continue;
+    }
+
+    const style = { ...(quiet ? { fg: 'muted' as StyleColor } : row.fg ? { fg: row.fg } : {}) };
+    if (row.prefix !== undefined) {
+      out.push(h('box', { key, direction: 'row', gap: 1, overflow: 'hidden' },
+        h('text', { content: row.prefix, fg: quiet ? 'subtle' : row.prefixFg ?? 'accent' }),
+        h('box', { direction: 'row', flex: 1, overflow: 'hidden' }, ...runNodes(row.runs, style))));
+      i++;
+      continue;
+    }
+
+    out.push(h('box', { key, direction: 'row', overflow: 'hidden' }, ...runNodes(row.runs, style)));
+    i++;
+  }
+
+  return h('box', { role: 'document', direction: 'column', ...rest },
+    ...out,
+    hidden > 0
+      ? h('text', { content: `${theme.glyphs.ellipsis} ${hidden} more lines`, fg: 'subtle' })
+      : null,
+  );
+});
+
+/** One `text` per run, so a bold half of a sentence stays bold after wrapping. */
+function runNodes(runs: MarkdownRun[], style: Record<string, unknown>): unknown[] {
+  return runs.map((run, i) => h('text', {
+    key: i,
+    content: run.text,
+    wrap: 'none',
+    ...style,
+    ...(run.bold ? { bold: true } : {}),
+    ...(run.italic ? { italic: true } : {}),
+    ...(run.code ? { fg: 'accent', bg: 'surfaceAlt' } : {}),
+    ...(run.link ? { underline: true, fg: 'info', link: run.link } : {}),
+  }));
+}
+
+/** The top or bottom edge of a fence, for when the window shows only that row. */
+function fenceEdge(theme: ResolvedTheme, width: number, top: boolean): string {
+  const chars = theme.borderChars();
+  const [left, mid, right] = top
+    ? [chars.topLeft, chars.top, chars.topRight]
+    : [chars.bottomLeft, chars.bottom, chars.bottomRight];
+  return `${left}${repeatToWidth(mid, Math.max(0, width - 2))}${right}`;
+}