reslop 0.2.6 → 0.3.0

package/lib/render/diff.js

@@ -1,21 +1,17 @@
 'use strict';
 
-const ansi = require('../ansi.js');
-const diff = require('../diff/diff.js');
-const highlight = require('../highlight.js');
-const detect = require('../detect.js');
-const files = require('../files.js');
-const wrap = require('../wrap.js');
+const { clamp } = require('../common/utilities.js');
+const ansi = require('../term/ansi.js');
+const { displayLines } = require('../diff/diff.js');
+const highlight = require('../highlight/highlight.js');
+const { tokenize, overlayTokens, detectLang } = highlight;
+const { itemPath } = require('../common/files.js');
+const { wrapPlain } = require('../term/wrap.js');
 const primitives = require('./primitives.js');
 
-const { displayLines } = diff;
-const { detectLang } = detect;
-const { itemPath } = files;
-const { tokenize, overlayTokens } = highlight;
-const { wrapPlain } = wrap;
 const { THEME, CODE_FG, codeFg, paint, visibleWidth, truncateVisible } = ansi;
 const { GUTTER_W, fill, splitWidths, paintSplitRule } = primitives;
-const { paneResult, sliceVisible } = primitives;
+const { paneResult, lazyRows, sliceVisible } = primitives;
 
 const lineStyle = (baseFg, baseBg, chBg = baseBg, mark = ' ') => ({
   baseFg,
@@ -54,9 +50,80 @@ const STAGED_STYLES = {
   ),
 };
 
-const gutterWidth = (width) => Math.min(GUTTER_W, Math.max(0, width));
+const numberCols = (digits) => (digits > 0 ? digits + 1 : 0);
 
-const textWidth = (width) => Math.max(1, width - gutterWidth(width));
+const paintNumberFill = (width, color, digits, split) => {
+  const half = (lineW) => {
+    const cols = clamp(lineW, 0, numberCols(digits));
+    const rest = Math.max(0, lineW - cols);
+    const gutter = fill(cols, THEME.lineNoFg, THEME.lineNoBg, color);
+    const code = fill(rest, THEME.ctxFg, THEME.ctxBg, color);
+    return gutter + code;
+  };
+  if (!split) return half(width);
+  const { leftW, rightW } = splitWidths(width);
+  const rule = paintSplitRule(color);
+  return half(leftW) + rule + half(rightW);
+};
+
+const gutterWidth = (width, digits = 0) => {
+  const want = GUTTER_W + numberCols(digits);
+  return Math.min(want, Math.max(0, width));
+};
+
+const textWidth = (width, digits = 0) =>
+  Math.max(1, width - gutterWidth(width, digits));
+
+const digitsForMax = (max) => {
+  const n = Math.max(1, max || 1);
+  return Math.max(2, String(n).length);
+};
+
+const hunkDigits = (hunk) => {
+  if (!hunk) return digitsForMax(1);
+  const end = (start, count) => {
+    if (!start || start < 1) return 0;
+    return start + Math.max(count || 1, 1) - 1;
+  };
+  const oldEnd = end(hunk.oldStart, hunk.oldCount);
+  const newEnd = end(hunk.newStart, hunk.newCount);
+  return digitsForMax(Math.max(oldEnd, newEnd, 1));
+};
+
+const overlayDigits = (view, hunk, fromHunk) => {
+  const text = view.codeOverlay && view.codeOverlay.text;
+  if (typeof text !== 'string') return fromHunk;
+  const count = text ? text.split('\n').length : 1;
+  const start = hunk && hunk.newStart > 0 ? hunk.newStart : 1;
+  return Math.max(fromHunk, digitsForMax(start + count - 1));
+};
+
+const viewDigits = (view) => {
+  if (!view || view.lineNumbers !== true) return 0;
+  if (view.pane === 'unit') {
+    let max = 1;
+    for (const line of view.unitLines ?? []) {
+      max = Math.max(max, line.newNo || 0);
+    }
+    return digitsForMax(max);
+  }
+  const hunk = view.item && view.item.hunk;
+  return overlayDigits(view, hunk, hunkDigits(hunk));
+};
+
+const activeDigits = (ui) => {
+  if (!ui || ui.lineNumbers !== true) return 0;
+  if (typeof ui.view !== 'function') return 0;
+  return viewDigits(ui.view());
+};
+
+const lineNumber = (line, side) => {
+  if (!line) return 0;
+  if (side === 'left') return line.oldNo || 0;
+  if (side === 'right') return line.newNo || 0;
+  if (line.type === 'del') return line.oldNo || 0;
+  return line.newNo || 0;
+};
 
 const clipPieces = (pieces, skip) => {
   if (skip <= 0) return pieces;
@@ -91,45 +158,79 @@ const paintSpans = (pieces, style, budget, color) => {
   return out + fill(budget - used, CODE_FG.plain, style.baseBg, color);
 };
 
-const paintAuditNote = (line, width, color) => {
+const paintNumber = (line, digits, side, color) => {
+  if (!digits) return '';
+  const value = lineNumber(line, side);
+  const label = value ? String(value) : '';
+  const text = `${label.padStart(digits, ' ')} `;
+  return paint(text, THEME.lineNoFg, THEME.lineNoBg, color);
+};
+
+const paintAuditNote = (line, width, color, digits = 0) => {
   const { baseFg, baseBg, mark } = STYLES.note;
-  const gutterW = gutterWidth(width);
-  const label = `${mark} `.slice(0, gutterW);
+  const gutterW = gutterWidth(width, digits);
+  const numbers = paintNumber(line, digits, '', color);
+  const markW = Math.max(0, gutterW - numberCols(digits));
+  const label = `${mark} `.slice(0, markW);
   const budget = Math.max(0, width - gutterW);
   const text = truncateVisible(line.text ?? '', budget);
-  let out = paint(label, baseFg, baseBg, color);
+  let out = numbers + paint(label, baseFg, baseBg, color);
   out += paint(text, baseFg, baseBg, color);
   return out + fill(budget - visibleWidth(text), baseFg, baseBg, color);
 };
 
-const paintAuditRule = (width, color) => {
+const paintAuditRule = (width, color, digits = 0) => {
   const { baseFg, baseBg } = STYLES.noteSep;
-  return paint('─'.repeat(Math.max(0, width)), baseFg, baseBg, color);
+  const cols = clamp(width, 0, numberCols(digits));
+  const gutter = fill(cols, THEME.lineNoFg, THEME.lineNoBg, color);
+  const rule = '─'.repeat(Math.max(0, width - cols));
+  return gutter + paint(rule, baseFg, baseBg, color);
 };
 
-const paintDiffLine = (line, width, color, origin, lang, scrollCol = 0) => {
-  if (line.type === 'noteSep') return paintAuditRule(width, color);
-  if (line.type === 'note') return paintAuditNote(line, width, color);
+const paintDiffLine = (line, width, color, origin, lang, col, places, edge) => {
+  const scrollCol = col ?? 0;
+  const digits = places ?? 0;
+  const side = edge ?? '';
+  if (line.type === 'noteSep') return paintAuditRule(width, color, digits);
+  if (line.type === 'note') return paintAuditNote(line, width, color, digits);
   const styles = origin === 'staged' ? STAGED_STYLES : STYLES;
   const style = styles[line.type] ?? styles.ctx;
   const diffSpans = line.spans ?? [{ text: line.text, changed: false }];
   const tokens = tokenize(lang, line.text ?? '');
   const pieces = clipPieces(overlayTokens(tokens, diffSpans), scrollCol);
-  const gutterW = gutterWidth(width);
-  const label = `${line.mark ?? style.mark} `.slice(0, gutterW);
+  const gutterW = gutterWidth(width, digits);
+  const numbers = paintNumber(line, digits, side, color);
+  const markW = Math.max(0, gutterW - numberCols(digits));
+  const label = `${line.mark ?? style.mark} `.slice(0, markW);
   const gutter = paint(label, CODE_FG.punct, style.baseBg, color);
   const budget = Math.max(0, width - gutterW);
-  return gutter + paintSpans(pieces, style, budget, color);
+  return numbers + gutter + paintSpans(pieces, style, budget, color);
 };
 
-const paintSplitRow = (row, width, color, origin, lang, scrollCol) => {
+const emptySide = () => ({
+  type: 'ctx',
+  text: '',
+  spans: [{ text: '', changed: false }],
+});
+
+const paintSplitRow = (row, width, color, origin, lang, scrollCol, digits) => {
   const { leftW, rightW } = splitWidths(width);
-  const half = (line, halfW) => {
-    if (!line) return fill(halfW, THEME.ctxFg, THEME.ctxBg, color);
-    return paintDiffLine(line, halfW, color, origin, lang, scrollCol);
+  const half = (line, halfW, side) => {
+    const shown = line || (digits ? emptySide() : null);
+    if (!shown) return fill(halfW, THEME.ctxFg, THEME.ctxBg, color);
+    return paintDiffLine(
+      shown,
+      halfW,
+      color,
+      origin,
+      lang,
+      scrollCol,
+      digits,
+      side,
+    );
   };
-  const left = half(row.left, leftW);
-  const right = half(row.right, rightW);
+  const left = half(row.left, leftW, 'left');
+  const right = half(row.right, rightW, 'right');
   return `${left}${paintSplitRule(color)}${right}`;
 };
 
@@ -181,8 +282,8 @@ const cutSpans = (spans, count) => {
   return { taken, rest };
 };
 
-const wrapSoftLine = (line, width) => {
-  const rows = wrapPlain(line.text ?? '', textWidth(width));
+const wrapSoftLine = (line, width, digits = 0) => {
+  const rows = wrapPlain(line.text ?? '', textWidth(width, digits));
   const changed = line.wrap === true;
   let used = 0;
   let spans = line.spans ?? [{ text: line.text ?? '', changed }];
@@ -192,6 +293,10 @@ const wrapSoftLine = (line, width) => {
     spans = cut.rest;
     const nextSpans = cut.taken.length ? cut.taken : [{ text, changed }];
     const next = { ...line, text, spans: nextSpans, editLast: last };
+    if (index > 0) {
+      next.oldNo = 0;
+      next.newNo = 0;
+    }
     if (line.editStart !== undefined) {
       next.editStart = line.editStart + used;
       next.editEnd = last ? line.editEnd : next.editStart + text.length;
@@ -201,12 +306,13 @@ const wrapSoftLine = (line, width) => {
   });
 };
 
-const expandSoftRows = (lines, width, split, wrapView) => {
+const expandSoftRows = (lines, width, split, wrapView, digits = 0) => {
   const { leftW, rightW } = splitWidths(width);
   const partsOf = (line, lineW) => {
     if (!wrapView || !line || line.type === 'noteSep') return [line];
-    if (visibleWidth(line.text ?? '') <= textWidth(lineW)) return [line];
-    return wrapSoftLine(line, lineW);
+    const fits = visibleWidth(line.text ?? '') <= textWidth(lineW, digits);
+    if (fits) return [line];
+    return wrapSoftLine(line, lineW, digits);
   };
   if (!split) return lines.flatMap((line) => partsOf(line, width));
   const out = [];
@@ -221,11 +327,11 @@ const expandSoftRows = (lines, width, split, wrapView) => {
   return out;
 };
 
-const codeHits = (rows, split, width, overlay, editing, scrollCol) => {
+const codeHits = (rows, split, width, overlay, editing, scrollCol, digits) => {
   const { leftW, rightW } = splitWidths(width);
   const lineW = split ? rightW : width;
   const x0 = split ? leftW + 1 : 0;
-  const textX = x0 + gutterWidth(lineW) + 1;
+  const textX = x0 + gutterWidth(lineW, digits) + 1;
   const at = overlay ? overlay.cursor : null;
   const hasCursor = at !== null && at !== undefined;
   const editHits = [];
@@ -256,8 +362,10 @@ const codeHits = (rows, split, width, overlay, editing, scrollCol) => {
   return { cursor, editHits };
 };
 
-const codeInnerWidth = (width, layout = 'unified') =>
-  textWidth(layout === 'side' ? splitWidths(width).rightW : width);
+const codeInnerWidth = (width, layout = 'unified', digits = 0) => {
+  const lineW = layout === 'side' ? splitWidths(width).rightW : width;
+  return textWidth(lineW, digits);
+};
 
 const paintBodyDiff = (view, width, color) => {
   const { item, codeOverlay: overlay } = view;
@@ -267,18 +375,31 @@ const paintBodyDiff = (view, width, color) => {
   const editing = typeof overlay?.cursor === 'number';
   const scrollCol = (editing ? overlay.scrollCol : 0) ?? 0;
   const raw = dropLeadingEmpty(bodyLines(item, layout, overlay), splitBody);
-  const lines = expandSoftRows(raw, width, splitBody, !editing);
+  const digits = viewDigits(view);
+  const lines = expandSoftRows(raw, width, splitBody, !editing, digits);
   const paintRow = splitBody ? paintSplitRow : paintDiffLine;
-  const body = lines.map((line) =>
-    paintRow(line, width, color, item.origin, lang, scrollCol),
+  const body = lazyRows(lines.length, (index) => {
+    const line = lines[index];
+    return paintRow(line, width, color, item.origin, lang, scrollCol, digits);
+  });
+  const hits = codeHits(
+    lines,
+    splitBody,
+    width,
+    overlay,
+    editing,
+    scrollCol,
+    digits,
   );
-  const hits = codeHits(lines, splitBody, width, overlay, editing, scrollCol);
   return paneResult({ body, splitBody, ...hits });
 };
 
 module.exports = {
   paintDiffLine,
   codeInnerWidth,
+  activeDigits,
+  viewDigits,
+  paintNumberFill,
   paintBodyDiff,
   expandSoftRows,
   codeHits,

package/lib/render/field.js

@@ -0,0 +1,131 @@
+'use strict';
+
+const ansi = require('../term/ansi.js');
+
+const { THEME, paint, graphemes, graphemeWidth, visibleWidth } = ansi;
+const { fileMatches } = require('../common/find.js');
+
+const pieceKind = (index, cursor, lo, hi) => {
+  if (index === cursor) return 'caret';
+  if (lo >= 0 && index >= lo && index < hi) return 'select';
+  return 'plain';
+};
+
+const pushPiece = (pieces, kind, ch) => {
+  const last = pieces[pieces.length - 1];
+  if (last && last.kind === kind) last.text += ch;
+  else pieces.push({ kind, text: ch });
+};
+
+const fieldPieces = (text, cursor, anchor, scroll, room) => {
+  const raw = `${text ?? ''}`;
+  const selected = typeof anchor === 'number' && anchor !== cursor;
+  const lo = selected ? Math.min(anchor, cursor) : -1;
+  const hi = selected ? Math.max(anchor, cursor) : -1;
+  const pieces = [];
+  let index = 0;
+  let col = 0;
+  for (const ch of graphemes(raw)) {
+    const width = graphemeWidth(ch, col);
+    const startCol = col;
+    const start = index;
+    index += ch.length;
+    col += width;
+    if (col <= scroll) continue;
+    if (startCol >= scroll + room) break;
+    const kind = pieceKind(start, cursor, lo, hi);
+    pushPiece(pieces, kind, ch);
+  }
+  const caretAt = visibleWidth(raw.slice(0, Math.min(cursor, raw.length)));
+  const atEnd = cursor >= raw.length;
+  const caretFits = caretAt >= scroll && caretAt < scroll + room;
+  if (atEnd && caretFits) pushPiece(pieces, 'caret', ' ');
+  return pieces;
+};
+
+const paintField = (text, editor, room, color, tones) => {
+  const cursor = editor ? editor.cursor : `${text ?? ''}`.length;
+  const anchor = editor ? editor.anchor : null;
+  const scroll = editor ? editor.scrollCol : 0;
+  const pieces = fieldPieces(text, cursor, anchor, scroll, room);
+  let used = 0;
+  let out = '';
+  for (const piece of pieces) {
+    used += visibleWidth(piece.text);
+    const tone = tones[piece.kind] ?? tones.plain;
+    const painted = paint(piece.text, tone.fg, tone.bg, color);
+    out += color ? painted : piece.text;
+  }
+  const pad = ' '.repeat(Math.max(0, room - used));
+  const plain = tones.plain;
+  if (!color) return out + pad;
+  return out + paint(pad, plain.fg, plain.bg, color);
+};
+
+const paintPlanFace = (view, face, fgRgb, bgRgb, color) => {
+  const editor = view.planEditor;
+  if (!editor || !view.planQuery) {
+    return paint(face, fgRgb, bgRgb, color, true);
+  }
+  const room = visibleWidth(face);
+  if (room) editor.reveal(room);
+  const tones = {
+    plain: { fg: THEME.searchFg, bg: THEME.searchBg },
+    select: { fg: THEME.chromeFg, bg: THEME.checkBg },
+    caret: { fg: THEME.searchOnFg, bg: THEME.searchOnBg },
+  };
+  return paintField(view.planQuery, editor, room, color, tones);
+};
+
+const fieldTones = (fgRgb, bgRgb) => ({
+  plain: { fg: fgRgb, bg: bgRgb },
+  select: { fg: THEME.searchFg, bg: THEME.searchBg },
+  caret: { fg: THEME.searchOnFg, bg: THEME.searchOnBg },
+});
+
+const paintPromptLine = (lead, leadFg, text, editor, width, color, fgRgb) => {
+  const room = Math.max(0, width - lead.length);
+  if (editor && room) editor.reveal(room);
+  const bgRgb = THEME.chromeBg;
+  const body = paintField(text, editor, room, color, fieldTones(fgRgb, bgRgb));
+  if (!color) return `${lead}${body}`;
+  return paint(lead, leadFg, bgRgb, color, true) + body;
+};
+
+const paintImportStatus = (view, width, color) => {
+  const state = view.import ?? {};
+  const query = state.url ?? '';
+  return paintPromptLine(
+    ' url ',
+    THEME.warnFg,
+    query,
+    state.editor,
+    width,
+    color,
+    THEME.chromeFg,
+  );
+};
+
+const paintFindStatus = (view, width, color) => {
+  const find = view.find ?? {};
+  const query = find.query ?? '';
+  const hits = fileMatches(view.files ?? [], query);
+  const miss = query.length > 0 && hits.length === 0;
+  const tone = miss ? THEME.errorFg : THEME.chromeFg;
+  return paintPromptLine(
+    ' /',
+    THEME.warnFg,
+    query,
+    find.editor,
+    width,
+    color,
+    tone,
+  );
+};
+
+module.exports = {
+  paintField,
+  paintPlanFace,
+  paintImportStatus,
+  paintFindStatus,
+};

package/lib/render/files.js

@@ -1,13 +1,14 @@
 'use strict';
 
-const ansi = require('../ansi.js');
-const files = require('../files.js');
+const ansi = require('../term/ansi.js');
+const { isTasksEntry } = require('../common/files.js');
+const { shortAge } = require('../common/format.js');
 const primitives = require('./primitives.js');
 
-const { isTasksEntry, shortAge } = files;
 const { THEME, paint, visibleWidth, trimVisible, seq, EL } = ansi;
 const { fill, markPrefix, paintCursorList } = primitives;
-const { measureColumns, padColumns } = primitives;
+const { measureColumns, padColumns, paintPathText } = primitives;
+const { activeHit, spansFor } = require('../common/find.js');
 
 const FILE_STATUS_FG = {
   unstaged: THEME.delLineFg,
@@ -56,7 +57,13 @@ const paintFileMeta = (parts, fgRgb, bgRgb, color) => {
   return out + paint(parts.m, fgRgb, bgRgb, color);
 };
 
-const paintFileRow = (entry, width, color, selected, cols) => {
+const rowSpans = (entry, path, marks) => {
+  if (!marks || !marks.query) return [];
+  const hit = marks.hit && marks.hit.index === marks.index ? marks.hit : null;
+  return spansFor(path, entry.path ?? '', marks.query, hit);
+};
+
+const paintFileRow = (entry, width, color, selected, cols, marks) => {
   const tasks = isTasksEntry(entry);
   const inner = Math.max(1, width - 1);
   const prefix = markPrefix(selected);
@@ -72,8 +79,11 @@ const paintFileRow = (entry, width, color, selected, cols) => {
   const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
   const edge = fill(1, fgRgb, bgRgb, color);
   if (!color) return `${left}${meta}${date}${edge}`;
+  const spans = rowSpans(entry, path, marks);
   let out = `${seq(fgRgb, bgRgb)}${EL}`;
-  out += paint(left, fgRgb, bgRgb, color, tasks);
+  out += paint(prefix, fgRgb, bgRgb, color, tasks);
+  out += paintPathText(path, fgRgb, bgRgb, color, tasks, spans);
+  out += paint(pad, fgRgb, bgRgb, color, tasks);
   if (tasks) out += paint(meta, fgRgb, bgRgb, color, true);
   else out += paintFileMeta(parts, fgRgb, bgRgb, color);
   if (date) {
@@ -88,8 +98,12 @@ const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
   const cols = measureColumns(entries, fileRowFields, FILE_COL_ALIGN);
   const cursor = view.fileCursor ?? 0;
   const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
-  const paintRow = (entry, selected) =>
-    paintFileRow(entry, width, color, selected, cols);
+  const hit = activeHit(entries, view.find);
+  const query = view.find && view.find.query ? view.find.query : '';
+  const paintRow = (entry, selected, index) => {
+    const marks = { query, hit, index };
+    return paintFileRow(entry, width, color, selected, cols, marks);
+  };
   return paintCursorList(entries, cursor, pane, paintRow);
 };