reslop 0.2.5 → 0.2.7

package/lib/render/npm.js

@@ -1,16 +1,19 @@
 'use strict';
 
 const ansi = require('../ansi.js');
+const npmCommands = require('../npm-commands.js');
+const wrap = require('../wrap.js');
 const chrome = require('./chrome.js');
 const primitives = require('./primitives.js');
-const npmCommands = require('../npm-commands.js');
 
-const { THEME, paint, visibleWidth, truncateVisible, seq, EL } = ansi;
-const { clipAnsi, stripAnsi, RESET, foregroundOn } = ansi;
-const { formatBusyStatus } = chrome;
+const { THEME, CODE_FG, paint, visibleWidth, truncateVisible } = ansi;
+const { trimVisible, seq, EL, RESET, fg } = ansi;
+const { clipAnsi, stripAnsi, foregroundOn } = ansi;
 const { TABLE_KEY, TABLE_VAL } = npmCommands;
-const { fill, FILE_MARK, paneResult, paintCursorList } = primitives;
-const { fieldWindow } = primitives;
+const { wrapPlain } = wrap;
+const { formatBusyStatus } = chrome;
+const { fill, MARK_W, markPrefix, editSpan } = primitives;
+const { paneResult, paintCursorList, fieldWindow } = primitives;
 
 const EDGE = 2;
 const TAIL = 1;
@@ -18,152 +21,117 @@ const LOG_PAD_Y = 1;
 const LOG_PAD_X = 2;
 const NPM_NAME_MAX = 24;
 
+const TABLE_INK = {
+  actual: THEME.errorFg,
+  expected: THEME.addLineFg,
+  code: THEME.shaFg,
+  type: CODE_FG.className,
+  count: THEME.warnFg,
+  omitted: THEME.warnFg,
+};
+
+const COUNT_INK = {
+  failed: THEME.errorFg,
+  errors: THEME.errorFg,
+  passed: THEME.addLineFg,
+};
+
 const logViewRows = (bodyH) => {
   const height = Math.max(1, bodyH);
   if (height >= LOG_PAD_Y * 2 + 1) return height - LOG_PAD_Y * 2;
   return height;
 };
 
-const rowFg = (selected) => (selected ? THEME.chromeFg : THEME.mutedFg);
-
-const npmNameWidth = (commands) => {
-  let width = 0;
+const npmNameWidth = (commands, typed = '') => {
+  let width = visibleWidth(typed);
   for (const entry of commands) {
     width = Math.max(width, visibleWidth(`${entry.name ?? ''}`));
   }
   return Math.min(NPM_NAME_MAX, width);
 };
 
-const paintNpmRow = (entry, width, color, selected, nameCol = 0) => {
-  const inner = Math.max(1, width - EDGE - TAIL);
-  const mark = selected ? FILE_MARK : ' ';
-  const prefix = ` ${mark} `;
-  const prefixW = visibleWidth(prefix);
-  const rest = Math.max(1, inner - prefixW);
-  const detail = entry.kind === 'bin' ? 'bin' : entry.command;
-  const nameW = Math.min(Math.max(0, nameCol), rest);
-  const name = truncateVisible(entry.name, nameW);
+const npmColumns = (width, nameCol) => {
+  const rest = Math.max(1, width - EDGE - TAIL - MARK_W);
+  const nameW = Math.min(nameCol, rest);
   const gap = rest > nameW + 2 ? '  ' : '';
-  const detailW = Math.max(0, rest - nameW - visibleWidth(gap));
-  const shown = truncateVisible(detail, detailW);
-  const mid = `${name}${' '.repeat(Math.max(0, nameW - visibleWidth(name)))}`;
-  const after = `${gap}${shown}`;
-  const pad = Math.max(0, rest - visibleWidth(mid + after));
-  const left = `${prefix}${mid}${after}${' '.repeat(pad)}`;
-  const fgRgb = rowFg(selected);
-  const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
+  return { rest, nameW, gap, detailW: rest - nameW - gap.length };
+};
+
+const paintNpmLine = (cols, name, detail, color, selected, bin) => {
+  const prefix = markPrefix(selected);
+  const namePad = ' '.repeat(Math.max(0, cols.nameW - visibleWidth(name)));
+  const mid = `${name}${namePad}`;
+  const after = `${cols.gap}${detail}`;
+  const pad = ' '.repeat(Math.max(0, cols.rest - visibleWidth(mid + after)));
   const tail = ' '.repeat(TAIL);
+  const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
+  const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
   const edge = fill(EDGE, fgRgb, THEME.ctxBg, color);
-  if (!color) return `${left}${tail}${edge}`;
+  if (!color) return `${prefix}${mid}${after}${pad}${tail}${edge}`;
+  const nameFg = bin ? THEME.shaFg : THEME.buttonHotFg;
   let out = `${seq(fgRgb, bgRgb)}${EL}`;
   out += paint(prefix, fgRgb, bgRgb, color);
-  const bin = entry.kind === 'bin';
-  const nameFg = bin ? THEME.shaFg : THEME.buttonHotFg;
   out += paint(mid, nameFg, bgRgb, color, !bin);
-  out += paint(`${after}${' '.repeat(pad)}${tail}`, fgRgb, bgRgb, color);
+  out += paint(`${after}${pad}${tail}`, fgRgb, bgRgb, color);
   return out + edge;
 };
 
-const editNameSource = (view, compose, field) => {
-  if (field === 'name') return compose.text;
-  return view.npmDraftName ?? '';
+const paintNpmRow = (entry, width, color, selected, nameCol) => {
+  const cols = npmColumns(width, nameCol);
+  const bin = entry.kind === 'bin';
+  const name = trimVisible(entry.name, cols.nameW);
+  const detail = trimVisible(bin ? 'bin' : entry.command, cols.detailW);
+  return paintNpmLine(cols, name, detail, color, selected, bin);
 };
 
-const editNameWidth = (commands, live) => {
-  const typed = visibleWidth(`${live ?? ''}`);
-  return Math.min(NPM_NAME_MAX, Math.max(npmNameWidth(commands), typed));
+const editingName = (view) => view.npmEditField !== 'command';
+
+const editWindow = (compose, live, draft, width) => {
+  const value = `${(live ? compose.text : draft) ?? ''}`.replaceAll('\n', ' ');
+  const win = live
+    ? fieldWindow(value, compose.cursor, compose.scrollCol, width)
+    : fieldWindow(value, 0, 0, width);
+  return { ...win, value };
 };
 
-const paintNpmEdit = (view, width, color, nameW) => {
-  const compose = view.compose;
-  const field = view.npmEditField === 'command' ? 'command' : 'name';
-  const nameSource = editNameSource(view, compose, field);
-  const draft = view.npmDraftCommand ?? '';
-  const commandSource = field === 'command' ? compose.text : draft;
-  const inner = Math.max(1, width - EDGE - TAIL);
-  const prefix = ` ${FILE_MARK} `;
-  const prefixW = visibleWidth(prefix);
-  const rest = Math.max(1, inner - prefixW);
-  const colW = Math.min(Math.max(0, nameW), rest);
-  const flatName = `${nameSource ?? ''}`.replaceAll('\n', ' ');
-  const nameAt = field === 'name' ? compose.cursor : 0;
-  const nameScroll = field === 'name' ? compose.scrollCol : 0;
-  const nameWin = fieldWindow(flatName, nameAt, nameScroll, colW);
-  const name = nameWin.text;
-  const gap = rest > colW + 2 ? '  ' : '';
-  const gapW = visibleWidth(gap);
-  const detailW = Math.max(0, rest - colW - gapW);
-  const flatCommand = `${commandSource ?? ''}`.replaceAll('\n', ' ');
-  const commandAt = field === 'command' ? compose.cursor : 0;
-  const commandScroll = field === 'command' ? compose.scrollCol : 0;
-  const commandWin = fieldWindow(
-    flatCommand,
-    commandAt,
-    commandScroll,
-    detailW,
-  );
-  const command = commandWin.text;
-  const namePad = ' '.repeat(Math.max(0, colW - visibleWidth(name)));
-  const mid = `${name}${namePad}`;
-  const after = `${gap}${command}`;
-  const pad = Math.max(0, rest - visibleWidth(mid + after));
-  const tail = ' '.repeat(TAIL);
-  const left = `${prefix}${mid}${after}${' '.repeat(pad)}`;
-  const fgRgb = THEME.chromeFg;
-  const bgRgb = THEME.buttonBg;
-  const edge = fill(EDGE, fgRgb, THEME.ctxBg, color);
-  let row = `${left}${tail}${edge}`;
-  if (color) {
-    row = `${seq(fgRgb, bgRgb)}${EL}`;
-    row += paint(prefix, fgRgb, bgRgb, color);
-    row += paint(mid, THEME.buttonHotFg, bgRgb, color, true);
-    row += paint(`${after}${' '.repeat(pad)}${tail}`, fgRgb, bgRgb, color);
-    row += edge;
-  }
-  const active = field === 'name' ? nameWin : commandWin;
-  const lead = field === 'name' ? 0 : colW + gapW;
-  const nameX = prefixW + 1;
-  const commandX = prefixW + colW + gapW + 1;
+const paintNpmEdit = (view, width, color, nameCol) => {
+  const { compose } = view;
+  const isName = editingName(view);
+  const cols = npmColumns(width, nameCol);
+  const { npmDraftName: draftName, npmDraftCommand: draftCommand } = view;
+  const name = editWindow(compose, isName, draftName, cols.nameW);
+  const command = editWindow(compose, !isName, draftCommand, cols.detailW);
+  const row = paintNpmLine(cols, name.text, command.text, color, true, false);
+  const nameX = MARK_W + 1;
+  const commandX = nameX + cols.nameW + cols.gap.length;
+  const active = isName ? name : command;
+  const cursor = {
+    x: (isName ? nameX : commandX) + active.col,
+    scroll: active.scroll,
+  };
   const edits = [
     {
       field: 'name',
-      x0: 1,
-      textX: nameX,
-      x1: commandX,
-      start: 0,
-      text: flatName,
-      limit: flatName.length,
-      scroll: nameWin.scroll,
-      live: field === 'name',
+      ...editSpan(1, nameX, commandX, 0, name.value),
+      scroll: name.scroll,
+      live: isName,
     },
     {
       field: 'command',
-      x0: commandX,
-      textX: commandX,
-      x1: width + 1,
-      start: 0,
-      text: flatCommand,
-      limit: flatCommand.length,
-      scroll: commandWin.scroll,
-      live: field === 'command',
+      ...editSpan(commandX, commandX, width + 1, 0, command.value),
+      scroll: command.scroll,
+      live: !isName,
     },
   ];
-  const cursor = {
-    x: prefixW + lead + active.col + 1,
-    scroll: active.scroll,
-  };
   return { row, cursor, edits };
 };
 
 const paintNpmList = (view, width, color, bodyH, headerLines) => {
   const commands = view.npmCommands ?? [];
-  const compose = view.compose;
-  const editing = compose && compose.kind === 'npm';
-  const field = view.npmEditField === 'command' ? 'command' : 'name';
-  const live = editing ? editNameSource(view, compose, field) : '';
-  const nameW = editing
-    ? editNameWidth(commands, live)
-    : npmNameWidth(commands);
+  const { compose } = view;
+  const editing = compose?.kind === 'npm';
+  const typed = editingName(view) ? compose?.text : view.npmDraftName;
+  const nameW = npmNameWidth(commands, editing ? `${typed ?? ''}` : '');
   const cursor = view.npmCursor ?? 0;
   const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
   const paintRow = (entry, selected) =>
@@ -179,23 +147,14 @@ const paintNpmList = (view, width, color, bodyH, headerLines) => {
 
 const logStart = (view, count, rows) => {
   const maxStart = Math.max(0, count - rows);
-  let start = maxStart;
-  if (!view.npmFollow) start = view.npmScroll ?? 0;
-  if (start > maxStart) start = maxStart;
-  if (start < 0) start = 0;
-  return start;
+  const start = view.npmFollow ? maxStart : view.npmScroll;
+  return Math.max(0, Math.min(start ?? 0, maxStart));
 };
 
 const isTableLine = (line) => `${line ?? ''}`.startsWith(TABLE_KEY);
 
-const mixRgb = (from, to, part) => {
-  const out = [0, 0, 0];
-  for (let i = 0; i < 3; i++) {
-    const next = from[i] + (to[i] - from[i]) * part;
-    out[i] = Math.round(next);
-  }
-  return out;
-};
+const mixRgb = (from, to, part) =>
+  from.map((value, i) => Math.round(value + (to[i] - value) * part));
 
 const tableTone = (index) => {
   const lift = index % 2 === 0 ? 0.035 : 0.07;
@@ -206,65 +165,157 @@ const tableTone = (index) => {
 };
 
 const tableIndex = (lines, index) => {
-  let at = index;
   let row = 0;
-  while (at > 0 && isTableLine(lines[at - 1])) {
-    at -= 1;
-    row += 1;
-  }
+  while (index - row > 0 && isTableLine(lines[index - row - 1])) row += 1;
   return row;
 };
 
-const paintTableLine = (line, width, index) => {
+const tableInk = (key, value) => {
+  const name = key.trim();
+  if (Object.hasOwn(COUNT_INK, name)) {
+    return Number(value) > 0 ? COUNT_INK[name] : THEME.mutedFg;
+  }
+  return Object.hasOwn(TABLE_INK, name) ? TABLE_INK[name] : THEME.chromeFg;
+};
+
+const tableParts = (line, width) => {
   const raw = line.slice(TABLE_KEY.length);
   const at = raw.indexOf(TABLE_VAL);
   const key = at < 0 ? raw : raw.slice(0, at);
   const rest = at < 0 ? '' : raw.slice(at + TABLE_VAL.length);
   const gap = rest.startsWith('  ') ? '  ' : '';
   const value = rest.slice(gap.length);
-  const edge = 1;
-  const inner = Math.max(1, width - edge * 2);
-  const keyW = visibleWidth(key);
-  const gapW = visibleWidth(gap);
+  const edge = Math.min(1, Math.floor(width / 2));
+  const inner = Math.max(0, width - edge * 2);
+  const keyW = Math.min(visibleWidth(key), inner);
+  const gapW = Math.min(visibleWidth(gap), Math.max(0, inner - keyW));
   const valueW = Math.max(0, inner - keyW - gapW);
-  const shown = truncateVisible(value, valueW);
-  const pad = ' '.repeat(Math.max(0, valueW - visibleWidth(shown)));
+  return { key, gap, value, edge, keyW, gapW, valueW };
+};
+
+const wrapTableLine = (line, width) => {
+  const part = tableParts(line, width);
+  if (part.valueW < 1) return [line];
+  const trimmed = part.value.trimEnd();
+  const lead = trimmed.startsWith(' ') ? ' ' : '';
+  const body = trimmed.slice(lead.length);
+  const budget = Math.max(1, part.valueW - visibleWidth(lead));
+  if (visibleWidth(body) <= budget) return [line];
+  const blank = ' '.repeat(visibleWidth(part.key));
+  return wrapPlain(body, budget).map((piece, index) => {
+    const name = index === 0 ? part.key : blank;
+    return `${TABLE_KEY}${name}${TABLE_VAL}${part.gap}${lead}${piece}`;
+  });
+};
+
+const wrapLogText = (line, inner) => {
+  const mark = line.startsWith('│ ') ? '│ ' : '';
+  const rest = line.slice(mark.length);
+  const budget = Math.max(1, inner - visibleWidth(mark));
+  if (visibleWidth(rest) <= budget) return [line];
+  return wrapPlain(rest, budget).map((piece) => `${mark}${piece}`);
+};
+
+const expandLogLines = (text, width) => {
+  const lines = `${text ?? ''}`.split('\n');
+  if (lines.at(-1) === '') lines.pop();
+  const inner = Math.max(1, width - LOG_PAD_X * 2);
+  return lines.flatMap((line) => {
+    if (isTableLine(line)) return wrapTableLine(line, width);
+    return wrapLogText(line, inner);
+  });
+};
+
+const paintPlainTable = (line, width) => {
+  const part = tableParts(line, width);
+  const name = trimVisible(part.key, part.keyW);
+  const namePad = ' '.repeat(Math.max(0, part.keyW - visibleWidth(name)));
+  const shown = trimVisible(part.value, part.valueW);
+  const pad = ' '.repeat(Math.max(0, part.valueW - visibleWidth(shown)));
+  const edge = ' '.repeat(part.edge);
+  const gap = part.gap.slice(0, part.gapW);
+  return `${edge}${name}${namePad}${gap}${shown}${pad}${edge}`;
+};
+
+const paintTableLine = (line, width, index) => {
+  const part = tableParts(line, width);
+  const shownKey = trimVisible(part.key, part.keyW);
+  const shown = trimVisible(part.value, part.valueW);
+  const pad = ' '.repeat(Math.max(0, part.valueW - visibleWidth(shown)));
   const tone = tableTone(index);
   const ink = THEME.ctxFg;
-  let out = fill(edge, ink, tone.frame, true);
-  out += paint(key, ink, tone.keyBg, true);
-  out += paint(gap, ink, tone.frame, true);
-  out += paint(`${shown}${pad}`, ink, tone.valueBg, true);
-  return `${out}${fill(edge, ink, tone.frame, true)}`;
+  const valueFg = tableInk(part.key, part.value);
+  let out = fill(part.edge, ink, tone.frame, true);
+  out += paint(shownKey, ink, tone.keyBg, true);
+  out += paint(part.gap.slice(0, part.gapW), ink, tone.frame, true);
+  out += paint(`${shown}${pad}`, valueFg, tone.valueBg, true);
+  return out + fill(part.edge, ink, tone.frame, true);
+};
+
+const paintLogSource = (line) => {
+  if (line !== stripAnsi(line)) return line;
+  if (/^[✖✔△] /.test(line)) {
+    const ink = line[0] === '✔' ? THEME.addLineFg : THEME.errorFg;
+    const color = line[0] === '△' ? THEME.warnFg : ink;
+    return paint(line, color, THEME.ctxBg, true, true);
+  }
+  if (line.startsWith('│')) {
+    return `${fg(THEME.shaFg)}│${fg(THEME.ctxFg)}${line.slice(1)}`;
+  }
+  if (/^(Stack|Related failures|Stderr)$/.test(line)) {
+    return paint(line, THEME.chromeFg, THEME.ctxBg, true, true);
+  }
+  if (!/^\s+(at|↳)\s/.test(line)) return line;
+  const source = line.replace(
+    /([^\s()|]+)(:\d+:\d+)(?=[\s)|]|$)/g,
+    (match, file, position) => {
+      const path = `${fg(THEME.shaFg)}${file}`;
+      const point = `${fg(THEME.mutedFg)}${position}`;
+      return `${path}${point}${fg(THEME.ctxFg)}`;
+    },
+  );
+  const frame = /^(\s+at\s+)(.*?)(\s+\(.+\))$/.exec(source);
+  if (!frame) return source;
+  return (
+    `${fg(THEME.mutedFg)}${frame[1]}${fg(CODE_FG.function)}${frame[2]}` +
+    `${fg(THEME.ctxFg)}${frame[3]}`
+  );
 };
 
 const paintLogLine = (line, width, color, fgRgb = THEME.ctxFg) => {
   const inner = Math.max(1, width - LOG_PAD_X * 2);
-  const source = color ? `${line ?? ''}` : stripAnsi(line);
-  const clip = (value) =>
-    color ? clipAnsi(value, inner) : truncateVisible(value, inner);
-  const body = color ? foregroundOn(clip(source), THEME.ctxBg) : clip(source);
   const lead = ' '.repeat(LOG_PAD_X);
+  if (!color) {
+    const body = truncateVisible(stripAnsi(line), inner);
+    const pad = Math.max(0, width - LOG_PAD_X - visibleWidth(body));
+    return `${lead}${body}${' '.repeat(pad)}`;
+  }
+  const source = paintLogSource(`${line ?? ''}`);
+  const body = foregroundOn(clipAnsi(source, inner), THEME.ctxBg);
   const pad = Math.max(0, width - LOG_PAD_X - visibleWidth(body));
-  const tail = ' '.repeat(pad);
-  if (!color) return `${lead}${body}${tail}`;
   const base = seq(fgRgb, THEME.ctxBg);
   let out = `${base}${EL}${lead}${body}`;
-  if (pad) out += `${RESET}${base}${tail}`;
+  if (pad) out += `${RESET}${base}${' '.repeat(pad)}`;
   return `${out}${RESET}`;
 };
 
-const paintRunBar = (width, color, frame) => {
-  const label = formatBusyStatus('running', frame);
-  return paintLogLine(label, width, color, THEME.chromeFg);
+const paintLogRow = (view, lines, index, width, color) => {
+  if (index < lines.length) {
+    const line = lines[index];
+    if (!isTableLine(line)) return paintLogLine(line, width, color);
+    if (!color) return paintPlainTable(line, width);
+    return paintTableLine(line, width, tableIndex(lines, index));
+  }
+  if (view.npmRunning === true && index === lines.length) {
+    const label = formatBusyStatus('running', view.progressFrame ?? 0);
+    return paintLogLine(label, width, color, THEME.chromeFg);
+  }
+  return fill(width, THEME.ctxFg, THEME.ctxBg, color);
 };
 
 const paintNpmLog = (view, width, color, bodyH) => {
-  const text = view.npmOutput ?? '';
-  const lines = text.split('\n');
-  if (lines.length && lines.at(-1) === '') lines.pop();
-  const running = view.npmRunning === true;
-  const count = lines.length + (running ? 1 : 0);
+  const lines = expandLogLines(view.npmOutput ?? '', width);
+  const count = lines.length + (view.npmRunning === true ? 1 : 0);
   const rows = logViewRows(bodyH);
   const padY = bodyH - rows;
   const top = padY ? 1 : 0;
@@ -273,25 +324,10 @@ const paintNpmLog = (view, width, color, bodyH) => {
   const body = [];
   for (let i = 0; i < top; i++) body.push(blank);
   for (let i = 0; i < rows; i++) {
-    const index = start + i;
-    if (index < lines.length) {
-      const line = lines[index];
-      if (color && isTableLine(line)) {
-        const row = tableIndex(lines, index);
-        body.push(paintTableLine(line, width, row));
-      } else {
-        body.push(paintLogLine(line, width, color));
-      }
-    } else if (running && index === lines.length) {
-      body.push(paintRunBar(width, color, view.progressFrame ?? 0));
-    } else {
-      body.push(blank);
-    }
+    body.push(paintLogRow(view, lines, start + i, width, color));
   }
   for (let i = 0; i < padY - top; i++) body.push(blank);
-  return paneResult({
-    body,
-  });
+  return paneResult({ body });
 };
 
 const paintBodyNpm = (view, width, color, bodyH, headerLines) => {
@@ -299,4 +335,4 @@ const paintBodyNpm = (view, width, color, bodyH, headerLines) => {
   return paintNpmList(view, width, color, bodyH, headerLines);
 };
 
-module.exports = { paintBodyNpm, logViewRows };
+module.exports = { paintBodyNpm, logViewRows, expandLogLines };

package/lib/render/packages.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const ansi = require('../ansi.js');
+const { THEME, paint, visibleWidth } = ansi;
+const tiles = require('./tiles.js');
+const { paintSegments } = tiles;
+const blocks = require('./dash-blocks.js');
+const { npmContent } = blocks;
+const primitives = require('./primitives.js');
+const { MARK_W, markPrefix, paintCursorList, fieldWindow, editSpan } =
+  primitives;
+
+const TILE = { key: 'n', title: 'npm' };
+const TAIL = 1;
+const LIST_PAD = 1;
+
+const paintMarginRow = (line, width, color, selected) => {
+  const bg = selected ? THEME.buttonBg : THEME.ctxBg;
+  const fg = selected ? THEME.chromeFg : THEME.mutedFg;
+  const inner = Math.max(1, width - MARK_W - TAIL);
+  const body = paintSegments(line, inner, bg, color);
+  const prefix = markPrefix(selected);
+  const tail = ' '.repeat(TAIL);
+  if (!color) return `${prefix}${body}${tail}`;
+  return paint(prefix, fg, bg, color) + body + paint(tail, fg, bg, color);
+};
+
+const paintPackageEdit = (compose, width, color) => {
+  const prefix = markPrefix(true);
+  const rest = Math.max(1, width - MARK_W - TAIL);
+  const text = `${compose.text ?? ''}`.replaceAll('\n', ' ');
+  const win = fieldWindow(text, compose.cursor, compose.scrollCol, rest);
+  const gap = ' '.repeat(Math.max(0, rest - visibleWidth(win.text)));
+  const tail = ' '.repeat(TAIL);
+  const fg = THEME.chromeFg;
+  const bg = THEME.buttonBg;
+  let row = `${prefix}${win.text}${gap}${tail}`;
+  if (color) {
+    row = paint(prefix, fg, bg, color);
+    row += paint(win.text, THEME.buttonHotFg, bg, color);
+    row += paint(`${gap}${tail}`, fg, bg, color);
+  }
+  const textX = MARK_W + 1;
+  const edit = editSpan(1, textX, textX + rest, 0, text);
+  const cursor = { x: textX + win.col, scroll: win.scroll };
+  return { row, cursor, edits: [{ ...edit, scroll: win.scroll }] };
+};
+
+const paintBodyPackages = (view, width, color, bodyH, headerLines) => {
+  const ctx = { frame: view.progressFrame ?? 0 };
+  const inner = Math.max(1, width - MARK_W - TAIL);
+  const content = npmContent(view.packages, inner, null, ctx, TILE);
+  const headed = Boolean(content.titleLine) && content.lines.length > 0;
+  const rows = headed ? content.lines.slice(1) : content.lines;
+  const reserved = headed ? 1 : 0;
+  const last = Math.max(0, rows.length - 1);
+  const cursor = Math.min(view.packagesCursor ?? 0, last);
+  const pane = {
+    width,
+    color,
+    bodyH: Math.max(1, bodyH - reserved),
+    headerLines: headerLines + reserved,
+    offset: view.listScroll,
+  };
+  const paintRow = (line, selected) =>
+    paintMarginRow(line, width, color, selected);
+  const editing = view.compose && view.compose.kind === 'package';
+  const extra = editing
+    ? {
+        ...paintPackageEdit(view.compose, width, color),
+        at: 'index',
+        index: cursor,
+      }
+    : null;
+  const painted = paintCursorList(rows, cursor, pane, paintRow, extra);
+  if (!headed) return painted;
+  const head = paintMarginRow(content.lines[0], width, color, false);
+  const body = painted.body.slice();
+  const pad = pane.bodyH >= LIST_PAD * 2 + 1 ? LIST_PAD : 0;
+  body.splice(pad, 0, head);
+  const nudge = (point) => {
+    if (!point || point.row < pad) return point;
+    return { ...point, row: point.row + 1 };
+  };
+  return {
+    ...painted,
+    body,
+    editHits: painted.editHits.map(nudge),
+    cursor: nudge(painted.cursor),
+  };
+};
+
+module.exports = { paintBodyPackages };

package/lib/render/present.js

@@ -10,17 +10,10 @@ const presentCursor = (cursor) => {
 };
 
 const presentRows = (rows, options = {}) => {
-  const clear = options.clear === true;
-  const cursor = options.cursor;
-  const parts = [`${ESC}[?25l`, `${ESC}[?2026h`];
-  if (clear) parts.push(`${ESC}[H${ESC}[2J`);
-  for (let i = 0; i < rows.length; i++) {
-    parts.push(`${ESC}[${i + 1};1H`);
-    parts.push(rows[i]);
-  }
-  parts.push(`${ESC}[?2026l`);
-  parts.push(presentCursor(cursor));
-  return parts.join('');
+  let out = `${ESC}[?25l${ESC}[?2026h`;
+  if (options.clear === true) out += `${ESC}[H${ESC}[2J`;
+  for (let i = 0; i < rows.length; i++) out += `${ESC}[${i + 1};1H${rows[i]}`;
+  return `${out}${ESC}[?2026l${presentCursor(options.cursor)}`;
 };
 
 module.exports = { presentCursor, presentRows };