reslop 0.2.5 → 0.2.6

package/lib/render/primitives.js

@@ -2,68 +2,30 @@
 
 const ansi = require('../ansi.js');
 const actions = require('../session/actions.js');
-const { LIST_PANES } = actions;
 
-const { THEME, paint, visibleWidth, truncateVisible, seq, EL, RESET } = ansi;
-const { graphemes, graphemeWidth } = ansi;
+const { THEME, paint, visibleWidth, graphemes, graphemeWidth } = ansi;
+const { LIST_PANES } = actions;
 
 const GUTTER_W = 2;
 const FILE_MARK = '▶';
+const MARK_W = visibleWidth(` ${FILE_MARK} `);
 const LIST_PAD = 1;
-const CHECK_DONE = 'xX';
-const CHECK_TOKEN = /\[([ xX])\]/;
-const CHECK_LEAD = /^\[[ xX]\] /;
+const NO_EDITS = [];
 
 const fill = (width, fgRgb, bgRgb, color) =>
   paint(' '.repeat(Math.max(0, width)), fgRgb, bgRgb, color);
 
-const paintBar = (text, width, fgRgb, bgRgb, color) => {
-  const clipped = truncateVisible(text, width);
-  const pad = Math.max(0, width - visibleWidth(clipped));
-  const filled = clipped + ' '.repeat(pad);
-  if (!color) return filled;
-  return `${seq(fgRgb, bgRgb)}${EL}${filled}${RESET}`;
-};
+const markPrefix = (selected) => ` ${selected ? FILE_MARK : ' '} `;
 
-const splitCheck = (text) => {
-  const match = CHECK_TOKEN.exec(text);
-  if (!match) return null;
-  const start = match.index;
-  const token = match[0];
-  const before = text.slice(0, start);
-  const mark = match[1];
-  const after = text.slice(start + token.length);
-  return { before, mark, token, after };
-};
+const isListPane = (pane) => LIST_PANES.includes(pane) || pane === 'dashboard';
 
-const paintCheckBar = (text, width, fgRgb, bgRgb, color, plain = false) => {
-  const clipped = truncateVisible(text, width);
-  const parts = color ? splitCheck(clipped) : null;
-  if (!parts) return paintBar(text, width, fgRgb, bgRgb, color);
-  const pad = Math.max(0, width - visibleWidth(clipped));
-  const done = CHECK_DONE.includes(parts.mark);
-  let chipFg = THEME.checkFg;
-  let chipBg = THEME.checkBg;
-  if (plain) {
-    chipFg = fgRgb;
-    chipBg = bgRgb;
-  } else if (done) {
-    chipFg = THEME.checkDoneFg;
-    chipBg = THEME.checkDoneBg;
-  }
-  const after = `${parts.after}${' '.repeat(pad)}`;
-  let out = `${seq(fgRgb, bgRgb)}${EL}`;
-  if (parts.before) out += paint(parts.before, fgRgb, bgRgb, color);
-  out += paint(parts.token, chipFg, chipBg, color);
-  if (after) out += paint(after, fgRgb, bgRgb, color);
-  return out;
-};
+const isTaskView = (view) => view.item?.origin === 'task';
+
+const branchLabel = (name) => `${name ?? ''}`.trim();
 
 const padVisible = (text, width, align) => {
-  const n = Math.max(0, width - visibleWidth(text));
-  const gap = ' '.repeat(n);
-  if (align === 'end') return `${text}${gap}`;
-  return `${gap}${text}`;
+  const gap = ' '.repeat(Math.max(0, width - visibleWidth(text)));
+  return align === 'end' ? `${text}${gap}` : `${gap}${text}`;
 };
 
 const splitWidths = (width) => {
@@ -75,49 +37,12 @@ const splitWidths = (width) => {
 const paintSplitRule = (color) =>
   fill(1, THEME.splitGutterFg, THEME.splitGutterBg, color);
 
-const paintSplitBlank = (width, color) => {
-  const { leftW, rightW } = splitWidths(width);
-  return (
-    fill(leftW, THEME.ctxFg, THEME.ctxBg, color) +
-    paintSplitRule(color) +
-    fill(rightW, THEME.ctxFg, THEME.ctxBg, color)
-  );
-};
-
 const paintBodyFill = (width, color, kind) => {
-  if (kind === 'files') {
-    const inner = Math.max(1, width - 1);
-    const main = fill(inner, THEME.ctxFg, THEME.ctxBg, color);
-    const edge = fill(1, THEME.ctxFg, THEME.ctxBg, color);
-    return main + edge;
-  }
-  if (kind === 'split') return paintSplitBlank(width, color);
-  return fill(width, THEME.ctxFg, THEME.ctxBg, color);
-};
-
-const windowRows = (rows, focus, cap) => {
-  if (rows.length <= cap) return { rows, offset: 0 };
-  let start = focus - cap + 1;
-  if (start < 0) start = 0;
-  if (start + cap > rows.length) start = rows.length - cap;
-  return { rows: rows.slice(start, start + cap), offset: start };
-};
-
-const listWindowStart = (focus, offset, listH, count) => {
-  let start = offset ?? 0;
-  if (focus < start) start = focus;
-  if (focus >= start + listH) start = focus - listH + 1;
-  const maxStart = Math.max(0, count - listH);
-  if (start > maxStart) start = maxStart;
-  if (start < 0) start = 0;
-  return start;
-};
-
-const extraIdx = (extraRow, cursor, count) => {
-  if (!extraRow) return -1;
-  if (extraRow.at === 'start') return 0;
-  if (extraRow.at === 'replace') return extraRow.index ?? cursor;
-  return count;
+  const ctx = (n) => fill(n, THEME.ctxFg, THEME.ctxBg, color);
+  if (kind === 'files') return ctx(Math.max(1, width - 1)) + ctx(1);
+  if (kind !== 'split') return ctx(width);
+  const { leftW, rightW } = splitWidths(width);
+  return ctx(leftW) + paintSplitRule(color) + ctx(rightW);
 };
 
 const paneResult = (fields = {}) => ({
@@ -131,11 +56,29 @@ const paneResult = (fields = {}) => ({
   editHits: fields.editHits ?? [],
 });
 
-const NO_EDITS = [];
+const editSpan = (x0, textX, x1, start, text) => ({
+  x0,
+  textX,
+  x1,
+  start,
+  text,
+  limit: start + text.length,
+  live: true,
+});
 
-const listLine = (row, index, cursor = null, edits = NO_EDITS) => {
-  const hit = index >= 0;
-  return { row, index, hit, cursor, edits };
+const listLine = (row, index, cursor = null, edits = NO_EDITS) => ({
+  row,
+  index,
+  hit: index >= 0,
+  cursor,
+  edits,
+});
+
+const listWindowStart = (focus, offset, listH, count) => {
+  let start = offset ?? 0;
+  if (focus < start) start = focus;
+  if (focus >= start + listH) start = focus - listH + 1;
+  return Math.max(0, Math.min(start, count - listH));
 };
 
 const rowCursor = (cursor, row) => {
@@ -150,11 +93,10 @@ const paintListWindow = (count, focus, pane, lineAt) => {
   const listH = bodyH - pad * 2;
   const start = listWindowStart(focus, offset, listH, count);
   const blank = paintBodyFill(width, color, 'files');
-  const body = [];
+  const body = pad ? [blank] : [];
   const fileHits = [];
   const editHits = [];
   let cursor = null;
-  if (pad) body.push(blank);
   for (let i = 0; i < listH; i++) {
     const line = lineAt(start + i);
     if (!line) break;
@@ -169,30 +111,29 @@ const paintListWindow = (count, focus, pane, lineAt) => {
   return paneResult({ body, fileHits, editHits, cursor, listScroll: start });
 };
 
-const editLine = (extraRow) => {
-  const { row, cursor, edit, edits = [] } = extraRow;
-  return listLine(row, -1, cursor, edit ? [...edits, edit] : edits);
-};
-
-const paintCursorList = (items, cursor, pane, paintRow, extraRow = null) => {
-  const edit = extraRow ? editLine(extraRow) : null;
-  const inserting = edit !== null && extraRow.at === 'start';
-  const extra = edit && extraRow.at !== 'replace' ? 1 : 0;
-  const extraAt = extraIdx(extraRow, cursor, items.length);
-  const lineAt = (idx) => {
-    if (edit && idx === extraAt) return edit;
-    const index = inserting ? idx - 1 : idx;
+const paintCursorList = (items, cursor, pane, paintRow, extra = null) => {
+  const lineAt = (index) => {
     const entry = items[index];
     if (!entry) return null;
-    return listLine(paintRow(entry, !edit && index === cursor), index);
+    return listLine(paintRow(entry, !extra && index === cursor), index);
   };
-  const focus = edit ? extraAt : cursor;
-  return paintListWindow(items.length + extra, focus, pane, lineAt);
+  if (!extra) return paintListWindow(items.length, cursor, pane, lineAt);
+  const edit = listLine(extra.row, -1, extra.cursor, extra.edits);
+  if (extra.at === 'replace') {
+    const at = extra.index;
+    const replaced = (i) => (i === at ? edit : lineAt(i));
+    return paintListWindow(items.length, at, pane, replaced);
+  }
+  const first = extra.at === 'start';
+  const at = first ? 0 : items.length;
+  const shift = first ? 1 : 0;
+  const inserted = (i) => (i === at ? edit : lineAt(i - shift));
+  return paintListWindow(items.length + 1, at, pane, inserted);
 };
 
 const sliceVisible = (text, skip, width) => {
   if (width <= 0) return '';
-  const parts = graphemes(`${text ?? ''}`);
+  const parts = graphemes(text);
   let used = 0;
   let i = 0;
   const drop = Math.max(0, skip);
@@ -214,59 +155,16 @@ const sliceVisible = (text, skip, width) => {
 };
 
 const fieldWindow = (text, cursor, scroll, width) => {
-  const raw = `${text ?? ''}`;
   if (width <= 0) return { text: '', col: 0, scroll: 0 };
-  const at = Math.max(0, Math.min(cursor ?? 0, raw.length));
-  const col = visibleWidth(raw.slice(0, at));
-  let next = scroll ?? 0;
-  if (next < 0) next = 0;
+  const at = Math.max(0, Math.min(cursor ?? 0, text.length));
+  const col = visibleWidth(text.slice(0, at));
+  let next = Math.max(0, scroll ?? 0);
   if (col < next) next = col;
   if (col >= next + width) next = col - width + 1;
-  const shown = sliceVisible(raw, next, width);
+  const shown = sliceVisible(text, next, width);
   return { text: shown, col: col - next, scroll: next };
 };
 
-const branchLabel = (name) => `${name ?? ''}`.trim();
-
-const paintListEdit = (compose, width, color, edgeW = 0) => {
-  const inner = Math.max(1, width - edgeW);
-  const prefix = ` ${FILE_MARK} `;
-  const prefixW = visibleWidth(prefix);
-  const rest = Math.max(1, inner - prefixW);
-  const text = `${compose.text ?? ''}`.replaceAll('\n', ' ');
-  const win = fieldWindow(text, compose.cursor, compose.scrollCol, rest);
-  const clipped = win.text;
-  const pad = Math.max(0, rest - visibleWidth(clipped));
-  const left = `${prefix}${clipped}${' '.repeat(pad)}`;
-  const fgRgb = THEME.chromeFg;
-  const bgRgb = THEME.buttonBg;
-  const edge = fill(edgeW, fgRgb, THEME.ctxBg, color);
-  let row = `${left}${edge}`;
-  if (color) {
-    const gap = ' '.repeat(pad);
-    row = `${seq(fgRgb, bgRgb)}${EL}`;
-    row += paint(prefix, fgRgb, bgRgb, color);
-    row += paint(clipped, THEME.buttonHotFg, bgRgb, color);
-    row += paint(gap, fgRgb, bgRgb, color);
-    row += edge;
-  }
-  const flat = text;
-  return {
-    row,
-    cursor: { x: prefixW + win.col + 1, scroll: win.scroll },
-    edit: {
-      x0: 1,
-      textX: prefixW + 1,
-      x1: prefixW + 1 + rest,
-      start: 0,
-      text: flat,
-      limit: flat.length,
-      scroll: win.scroll,
-      live: true,
-    },
-  };
-};
-
 const measureColumns = (entries, rowFields, align) => {
   const keys = Object.keys(align);
   const widths = Object.fromEntries(keys.map((key) => [key, 0]));
@@ -282,7 +180,7 @@ const measureColumns = (entries, rowFields, align) => {
 const padColumns = (fields, widths, align) => {
   const parts = {};
   for (const key of Object.keys(align)) {
-    const width = widths?.[key] ?? visibleWidth(fields[key]);
+    const width = widths[key] ?? visibleWidth(fields[key]);
     parts[key] = padVisible(fields[key], width, align[key]);
   }
   return parts;
@@ -309,27 +207,27 @@ const paintColumns = (parts, widths, fgRgb, bgRgb, color, tones) => {
 };
 
 module.exports = {
-  measureColumns,
-  padColumns,
-  joinColumns,
-  paintColumns,
   GUTTER_W,
   FILE_MARK,
-  LIST_PANES,
-  CHECK_LEAD,
+  MARK_W,
   fill,
-  paintBar,
-  paintCheckBar,
+  markPrefix,
+  isListPane,
+  isTaskView,
+  branchLabel,
   padVisible,
   splitWidths,
   paintSplitRule,
   paintBodyFill,
-  windowRows,
+  paneResult,
+  editSpan,
   listLine,
   paintListWindow,
   paintCursorList,
-  paintListEdit,
+  sliceVisible,
   fieldWindow,
-  branchLabel,
-  paneResult,
+  measureColumns,
+  padColumns,
+  joinColumns,
+  paintColumns,
 };

package/lib/render/render.js

@@ -5,30 +5,21 @@ const notes = require('./notes.js');
 const diff = require('./diff.js');
 const present = require('./present.js');
 const frame = require('./frame.js');
-const { renderFrame } = frame;
 
-const { QUIT_PROMPT, PUSH_PROMPT } = chrome;
-const { updatePrompt, dropPrompt } = chrome;
 const { formatBusyStatus, headerText, layoutButtons } = chrome;
-const { delCharBg, addCharBg, paintDiffLine, codeInnerWidth } = diff;
-const { todoInnerWidth, todoBodyWidth, noteInnerWidth } = notes;
+const { todoBodyWidth, noteInnerWidth } = notes;
+const { paintDiffLine, codeInnerWidth } = diff;
 const { presentCursor, presentRows } = present;
+const { renderFrame } = frame;
 
 module.exports = {
-  QUIT_PROMPT,
-  PUSH_PROMPT,
-  updatePrompt,
-  dropPrompt,
-  delCharBg,
-  addCharBg,
-  paintDiffLine,
+  formatBusyStatus,
   headerText,
   layoutButtons,
-  todoInnerWidth,
   todoBodyWidth,
   noteInnerWidth,
+  paintDiffLine,
   codeInnerWidth,
-  formatBusyStatus,
   renderFrame,
   presentCursor,
   presentRows,

package/lib/render/report.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const commands = require('../npm-commands.js');
+const { formatTable } = commands;
+const reportRender = require('../report-render.js');
+const { summaryRows, problemRows, displayMessage, quoteLines } = reportRender;
+
+const reportProblem = (item) => {
+  const title = item.name || item.message || item.code || 'problem';
+  const mark = item.severity === 'warning' ? '△' : '✖';
+  const count = item.count > 1 ? `  × ${item.count}` : '';
+  const lines = ['', `${mark} ${title.split('\n')[0]}${count}`, ''];
+  lines.push(...formatTable(problemRows(item)));
+  const message = displayMessage(item);
+  if (message) lines.push('', ...quoteLines(message));
+  if (item.trace) {
+    lines.push('', 'Stack');
+    for (const row of item.trace.split(/\r?\n/)) {
+      const frame = row.trim().replace(/^at\s+/, '');
+      if (frame) lines.push(`  at ${frame}`);
+    }
+  }
+  if (item.related.length) {
+    lines.push('', 'Related failures');
+    for (const row of item.related) lines.push(`  ↳ ${row}`);
+  }
+  return lines;
+};
+
+const renderReport = (doc) => {
+  const lines = [];
+  for (const item of doc.reports) {
+    if (lines.length) lines.push('');
+    const mark = item.ok ? '✔' : '✖';
+    lines.push(`${mark} ${item.tool}  ·  exit ${doc.exit}`, '');
+    lines.push(...formatTable(summaryRows(item.summary)));
+    for (const entry of item.problems) lines.push(...reportProblem(entry));
+  }
+  if (doc.stderr) lines.push('', 'Stderr', doc.stderr);
+  return `${lines.join('\n')}\n`;
+};
+
+module.exports = { renderReport };

package/lib/render/tiles.js

@@ -0,0 +1,260 @@
+'use strict';
+
+const ansi = require('../ansi.js');
+const { THEME, paint, visibleWidth, truncateVisible } = ansi;
+
+const GAP_X = 2;
+const GAP_Y = 1;
+const MIN_W = 34;
+const MIN_H = 6;
+const MAX_COLS = 4;
+const RULE = '─';
+const ELLIPSIS = '…';
+const BAR_ON = '█';
+const BAR_OFF = '░';
+const SPARK = '▁▂▃▄▅▆▇█';
+const SPINNER = '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
+
+const seg = (text, tone = 'text', bold = false) => ({
+  text: `${text}`,
+  tone,
+  bold,
+});
+
+const toneColors = () => ({
+  text: THEME.chromeFg,
+  muted: THEME.mutedFg,
+  hot: THEME.buttonHotFg,
+  add: THEME.addLineFg,
+  del: THEME.delLineFg,
+  warn: THEME.warnFg,
+  error: THEME.errorFg,
+  sha: THEME.shaFg,
+  trend: THEME.dashTrendFg,
+  key: THEME.dashKeyFg,
+});
+
+const headColors = () => ({
+  ...toneColors(),
+  muted: THEME.dashHeadMuted,
+  del: THEME.dashDelFg,
+});
+
+const segmentsWidth = (segs) => {
+  let width = 0;
+  for (const item of segs) width += visibleWidth(item.text);
+  return width;
+};
+
+const clipSegments = (segs, width) => {
+  if (segmentsWidth(segs) <= width) {
+    return segs.map((item) => ({ ...item }));
+  }
+  const markW = visibleWidth(ELLIPSIS);
+  const budget = markW <= width ? width - markW : width;
+  const out = [];
+  let used = 0;
+  for (const item of segs) {
+    const room = budget - used;
+    if (room <= 0) break;
+    const text = truncateVisible(item.text, room);
+    if (!text) continue;
+    used += visibleWidth(text);
+    out.push({ ...item, text });
+    if (visibleWidth(text) < visibleWidth(item.text)) break;
+  }
+  if (markW > width) return out;
+  if (!out.length) return [seg(ELLIPSIS)];
+  out[out.length - 1].text += ELLIPSIS;
+  return out;
+};
+
+const paintSegments = (segs, width, bg, color, fill = ' ', colors = null) => {
+  const clipped = clipSegments(segs, width);
+  const pad = Math.max(0, width - segmentsWidth(clipped));
+  const ink = colors ?? toneColors();
+  if (!color) {
+    return clipped.map((item) => item.text).join('') + fill.repeat(pad);
+  }
+  let out = '';
+  for (const item of clipped) {
+    out += paint(item.text, ink[item.tone], bg, color, item.bold);
+  }
+  return out + paint(fill.repeat(pad), ink.muted, bg, color);
+};
+
+const barSegments = (ratio, width, tone = 'add') => {
+  const clamped = Math.min(1, Math.max(0, Number.isFinite(ratio) ? ratio : 0));
+  const on = Math.round(clamped * width);
+  return [
+    seg(BAR_ON.repeat(on), tone),
+    seg(BAR_OFF.repeat(width - on), 'muted'),
+  ];
+};
+
+const sparkline = (values, width) => {
+  const count = values.length;
+  if (!count || width < 1) return '';
+  const max = Math.max(...values);
+  const top = SPARK.length - 1;
+  let out = '';
+  for (let i = 0; i < width; i++) {
+    const span = width <= 1 ? count - 1 : (i * (count - 1)) / (width - 1);
+    const at = Math.round(span);
+    const level = max > 0 ? Math.round((values[at] / max) * top) : 0;
+    out += SPARK[level];
+  }
+  return out;
+};
+
+const spinner = (frame) => SPINNER[Math.abs(frame ?? 0) % SPINNER.length];
+
+const spread = (total, parts) => {
+  const base = Math.floor(total / parts);
+  const extra = total % parts;
+  return Array.from({ length: parts }, (_, i) => base + (i < extra ? 1 : 0));
+};
+
+const placeBand = (shown, from, size, width) => {
+  const room = Math.max(0, width - (size - 1) * GAP_X);
+  const widths = spread(room, size);
+  const tiles = [];
+  let x = 0;
+  for (let i = 0; i < size; i++) {
+    tiles.push({ id: shown[from + i].id, x, w: widths[i] });
+    x += widths[i] + GAP_X;
+  }
+  return tiles;
+};
+
+const placeTiles = (shown, cols, width, height) => {
+  const rows = Math.ceil(shown.length / cols);
+  const sizes = spread(shown.length, rows);
+  const heights = spread(height - (rows - 1) * GAP_Y, rows);
+  const bands = [];
+  let from = 0;
+  let y = 0;
+  for (let row = 0; row < rows; row++) {
+    const tiles = placeBand(shown, from, sizes[row], width);
+    bands.push({ y, h: Math.max(1, heights[row]), tiles });
+    from += sizes[row];
+    y += heights[row] + GAP_Y;
+  }
+  return bands;
+};
+
+const layoutTiles = (width, height, tiles) => {
+  const cap = Math.floor((width + GAP_X) / (MIN_W + GAP_X));
+  const maxCols = Math.max(1, Math.min(MAX_COLS, cap));
+  const ranked = [...tiles].sort((left, right) => left.rank - right.rank);
+  for (let count = tiles.length; count >= 1; count--) {
+    const keep = new Set(ranked.slice(0, count).map((tile) => tile.id));
+    const shown = tiles.filter((tile) => keep.has(tile.id));
+    const cols = Math.min(maxCols, count);
+    const rows = Math.ceil(count / cols);
+    const rowH = Math.floor((height - (rows - 1) * GAP_Y) / rows);
+    if (rowH >= MIN_H || count === 1) {
+      return placeTiles(shown, cols, width, height);
+    }
+  }
+  return [];
+};
+
+const titleSegments = (tile, badge = []) => {
+  const keyed = tile.title.startsWith(tile.key);
+  const rest = keyed ? tile.title.slice(tile.key.length) : ` ${tile.title}`;
+  const segs = [seg(tile.key, 'key', true), seg(rest)];
+  return badge.length ? [...segs, seg(' '), ...badge] : segs;
+};
+
+const paintFramed = (line, width, bg, color, fill = ' ', colors = null) => {
+  const edge = paintSegments([seg(' ')], 1, bg, color);
+  const inner = Math.max(0, width - 2);
+  return edge + paintSegments(line, inner, bg, color, fill, colors) + edge;
+};
+
+const paintHead = (tile, content, width, color) => {
+  const fill = color ? ' ' : RULE;
+  const bg = THEME.dashHeadBg;
+  const colors = headColors();
+  if (content.titleLine) {
+    return paintFramed(content.titleLine, width, bg, color, fill, colors);
+  }
+  const segs = [seg(' '), ...titleSegments(tile, content.badge)];
+  return paintSegments(segs, width, bg, color, fill, colors);
+};
+
+const rowBackground = (index, filled) => {
+  if (filled && index % 2 === 1) return THEME.dashRowBg;
+  return THEME.dashTileBg;
+};
+
+const paintTile = (tile, content, width, height, color) => {
+  const { lines, footer } = content;
+  const rows = [paintHead(tile, content, width, color)];
+  const bodyRoom = footer ? height - 2 : height - 1;
+  for (let i = 0; i < bodyRoom; i++) {
+    const bg = rowBackground(i, i < lines.length);
+    rows.push(paintFramed(lines[i] ?? [], width, bg, color));
+  }
+  if (footer && height > 1) {
+    const bg = rowBackground(bodyRoom, true);
+    rows.push(paintFramed(footer, width, bg, color));
+  }
+  return rows;
+};
+
+const pageFill = (width, color) =>
+  paint(' '.repeat(Math.max(0, width)), THEME.chromeFg, THEME.dashBg, color);
+
+const composeBands = (bands, painted, width, height, color) => {
+  const rows = [];
+  const blank = pageFill(width, color);
+  for (const band of bands) {
+    if (rows.length) {
+      for (let gap = 0; gap < GAP_Y; gap++) rows.push(blank);
+    }
+    const last = band.tiles.at(-1);
+    const rest = pageFill(width - last.x - last.w, color);
+    for (let line = 0; line < band.h; line++) {
+      let row = '';
+      for (let i = 0; i < band.tiles.length; i++) {
+        if (i) row += pageFill(GAP_X, color);
+        row += painted.get(band.tiles[i].id)[line];
+      }
+      rows.push(row + rest);
+    }
+  }
+  while (rows.length < height) rows.push(blank);
+  return rows.slice(0, height);
+};
+
+const tileHits = (bands, headerLines) => {
+  const hits = [];
+  for (const band of bands) {
+    for (const tile of band.tiles) {
+      for (let line = 0; line < band.h; line++) {
+        const y = headerLines + band.y + line + 1;
+        hits.push({ y, x0: tile.x, x1: tile.x + tile.w, cursor: tile.id });
+      }
+    }
+  }
+  return hits;
+};
+
+module.exports = {
+  GAP_X,
+  GAP_Y,
+  seg,
+  segmentsWidth,
+  clipSegments,
+  barSegments,
+  sparkline,
+  spinner,
+  titleSegments,
+  layoutTiles,
+  paintTile,
+  composeBands,
+  tileHits,
+  pageFill,
+};