reslop 0.2.1 → 0.2.4

package/lib/render/diff.js

@@ -1,9 +1,11 @@
 'use strict';
 
 const ansi = require('../ansi.js');
-const { displayLines } = require('../diff/diff.js');
+const diff = require('../diff/diff.js');
+const { displayLines } = diff;
 const highlight = require('../highlight.js');
-const { detectLang } = require('../detect.js');
+const detect = require('../detect.js');
+const { detectLang } = detect;
 const files = require('../files.js');
 const wrap = require('../wrap.js');
 const primitives = require('./primitives.js');
@@ -11,7 +13,8 @@ const primitives = require('./primitives.js');
 const { itemPath } = files;
 const { tokenize, overlayTokens } = highlight;
 const { wrapPlain } = wrap;
-const { THEME, CODE_FG, codeFg, paint, visibleWidth, truncateVisible } = ansi;
+const { THEME, CODE_FG, codeFg, paint, visibleWidth } = ansi;
+const { truncateVisible, graphemes, graphemeWidth } = ansi;
 const { GUTTER_W, fill, splitWidths, paintSplitRule, paneResult } = primitives;
 
 const STYLES = {
@@ -77,10 +80,43 @@ const STAGED_STYLES = {
   ctx: STYLES.ctx,
 };
 
-const SOFT_WRAP = ['warn', 'note'];
 const delCharBg = () => ansi.bg(THEME.delCharBg);
 const addCharBg = () => ansi.bg(THEME.addCharBg);
 
+const skipText = (text, skip) => {
+  if (skip <= 0) return text ?? '';
+  const parts = graphemes(text ?? '');
+  let used = 0;
+  let i = 0;
+  while (i < parts.length) {
+    const w = graphemeWidth(parts[i], used);
+    if (used + w > skip) break;
+    used += w;
+    i += 1;
+  }
+  let out = '';
+  for (; i < parts.length; i++) out += parts[i];
+  return out;
+};
+
+const clipPieces = (pieces, skip) => {
+  if (skip <= 0) return pieces;
+  const out = [];
+  let drop = skip;
+  for (const piece of pieces) {
+    const text = piece.text ?? '';
+    const width = visibleWidth(text);
+    if (drop >= width) {
+      drop -= width;
+      continue;
+    }
+    const shown = drop > 0 ? skipText(text, drop) : text;
+    drop = 0;
+    if (shown) out.push({ ...piece, text: shown });
+  }
+  return out;
+};
+
 const paintSpans = (pieces, lineStyle, budget, color) => {
   let out = '';
   let used = 0;
@@ -124,14 +160,14 @@ const paintAuditRule = (width, color) => {
   return paint(bar, style.baseFg, style.baseBg, color);
 };
 
-const paintDiffLine = (line, width, color, origin, lang) => {
+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 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 = overlayTokens(tokens, diffSpans);
+  const pieces = clipPieces(overlayTokens(tokens, diffSpans), scrollCol);
   const gutterW = Math.min(GUTTER_W, Math.max(0, width));
   const label = `${line.mark ?? style.mark} `.slice(0, gutterW);
   const gutter = paint(label, CODE_FG.punct, style.baseBg, color);
@@ -140,17 +176,24 @@ const paintDiffLine = (line, width, color, origin, lang) => {
   return gutter + rest;
 };
 
-const paintSplitHalf = (line, width, color, origin, lang) => {
+const paintSplitHalf = (line, width, color, origin, lang, scrollCol) => {
   if (!line || width <= 0) {
     return fill(width, THEME.ctxFg, THEME.ctxBg, color);
   }
-  return paintDiffLine(line, width, color, origin, lang);
+  return paintDiffLine(line, width, color, origin, lang, scrollCol);
 };
 
-const paintSplitRow = (row, width, color, origin, lang) => {
+const paintSplitRow = (row, width, color, origin, lang, scrollCol) => {
   const { leftW, rightW } = splitWidths(width);
-  const left = paintSplitHalf(row.left, leftW, color, origin, lang);
-  const right = paintSplitHalf(row.right, rightW, color, origin, lang);
+  const left = paintSplitHalf(row.left, leftW, color, origin, lang, scrollCol);
+  const right = paintSplitHalf(
+    row.right,
+    rightW,
+    color,
+    origin,
+    lang,
+    scrollCol,
+  );
   return `${left}${paintSplitRule(color)}${right}`;
 };
 
@@ -183,6 +226,34 @@ const dropLeadingEmpty = (lines, split) => {
   return i ? lines.slice(i) : lines;
 };
 
+const cutSpans = (spans, count) => {
+  const taken = [];
+  const rest = [];
+  let left = count;
+  let i = 0;
+  while (i < spans.length) {
+    const span = spans[i];
+    const text = span.text ?? '';
+    if (left <= 0) {
+      rest.push(span);
+      i += 1;
+      continue;
+    }
+    if (text.length <= left) {
+      taken.push(span);
+      left -= text.length;
+      i += 1;
+      continue;
+    }
+    const changed = span.changed === true;
+    taken.push({ text: text.slice(0, left), changed });
+    rest.push({ text: text.slice(left), changed });
+    left = 0;
+    i += 1;
+  }
+  return { taken, rest };
+};
+
 const wrapSoftLine = (line, width) => {
   const gutterW = Math.min(GUTTER_W, Math.max(0, width));
   const budget = Math.max(1, width - gutterW);
@@ -191,11 +262,14 @@ const wrapSoftLine = (line, width) => {
   const { length } = rows;
   const pieces = new Array(length);
   let used = 0;
+  let spans = line.spans ?? [{ text: line.text ?? '', changed }];
   for (let i = 0; i < length; i++) {
     const text = rows[i];
     const last = i === length - 1;
-    const spans = [{ text, changed }];
-    const next = { ...line, text, spans, editLast: last };
+    const cut = cutSpans(spans, text.length);
+    spans = cut.rest;
+    const nextSpans = cut.taken.length ? cut.taken : [{ text, changed }];
+    const next = { ...line, text, spans: nextSpans, editLast: last };
     if (line.editStart !== undefined) {
       next.editStart = line.editStart + used;
       if (last) next.editEnd = line.editEnd;
@@ -207,40 +281,30 @@ const wrapSoftLine = (line, width) => {
   return pieces;
 };
 
-const shouldWrap = (line) => {
-  if (!line) return false;
-  if (SOFT_WRAP.includes(line.type)) return true;
-  return line.wrap === true;
-};
-
-const expandSoftRows = (lines, width, split) => {
+const expandSoftRows = (lines, width, split, wrapView) => {
   const { leftW, rightW } = splitWidths(width);
   const out = [];
+  const partsOf = (line, lineW) => {
+    if (!wrapView || !line || line.type === 'noteSep') return [line];
+    const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
+    const budget = Math.max(1, lineW - gutterW);
+    if (visibleWidth(line.text ?? '') <= budget) return [line];
+    return wrapSoftLine(line, lineW);
+  };
   for (const row of lines) {
     if (!split) {
-      if (!shouldWrap(row)) {
-        out.push(row);
-        continue;
-      }
-      for (const part of wrapSoftLine(row, width)) out.push(part);
-      continue;
-    }
-    const right = row.right;
-    if (shouldWrap(right)) {
-      const parts = wrapSoftLine(right, rightW);
-      out.push({ left: row.left, right: parts[0] });
-      for (let i = 1; i < parts.length; i++) {
-        out.push({ left: null, right: parts[i] });
-      }
+      for (const part of partsOf(row, width)) out.push(part);
       continue;
     }
-    const left = row.left;
-    if (shouldWrap(left)) {
-      const parts = wrapSoftLine(left, leftW);
-      for (const part of parts) out.push({ left: part, right: part });
-      continue;
+    const leftParts = partsOf(row.left, leftW);
+    const rightParts = partsOf(row.right, rightW);
+    const n = Math.max(leftParts.length, rightParts.length);
+    for (let i = 0; i < n; i++) {
+      out.push({
+        left: leftParts[i] ?? null,
+        right: rightParts[i] ?? null,
+      });
     }
-    out.push(row);
   }
   return out;
 };
@@ -251,7 +315,7 @@ const onCodePiece = (line, cursor) => {
   return cursor <= line.editEnd;
 };
 
-const codeCursorInRows = (rows, split, width, cursor) => {
+const codeCursorInRows = (rows, split, width, cursor, scrollCol = 0) => {
   if (cursor === undefined || cursor === null) return null;
   const { leftW, rightW } = splitWidths(width);
   for (let i = 0; i < rows.length; i++) {
@@ -261,8 +325,9 @@ const codeCursorInRows = (rows, split, width, cursor) => {
     const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
     const take = Math.min(cursor - line.editStart, line.text.length);
     const col = visibleWidth(line.text.slice(0, take));
+    const shown = Math.max(0, col - scrollCol);
     const x0 = split ? leftW + 1 : 0;
-    return { x: x0 + gutterW + col + 1, row: i };
+    return { x: x0 + gutterW + shown + 1, row: i };
   }
   return null;
 };
@@ -279,22 +344,39 @@ const paintBodyDiff = (view, width, color) => {
   const overlay = view.codeOverlay;
   const lang = detectLang(itemPath(item));
   const splitBody = layout === 'side' && !item.file.isBinary;
+  const editing = Boolean(overlay && typeof overlay.cursor === 'number');
+  const picked = editing ? overlay.scrollCol : 0;
+  const scrollCol = picked ?? 0;
   const raw = dropLeadingEmpty(bodyLines(item, layout, overlay), splitBody);
-  const lines = expandSoftRows(raw, width, splitBody);
+  const lines = expandSoftRows(raw, width, splitBody, !editing);
   const { length } = lines;
   const body = new Array(length);
   if (splitBody) {
     for (let i = 0; i < length; i++) {
-      body[i] = paintSplitRow(lines[i], width, color, item.origin, lang);
+      body[i] = paintSplitRow(
+        lines[i],
+        width,
+        color,
+        item.origin,
+        lang,
+        scrollCol,
+      );
     }
   } else {
     for (let i = 0; i < length; i++) {
-      body[i] = paintDiffLine(lines[i], width, color, item.origin, lang);
+      body[i] = paintDiffLine(
+        lines[i],
+        width,
+        color,
+        item.origin,
+        lang,
+        scrollCol,
+      );
     }
   }
   const edit = overlay ? overlay.cursor : null;
-  const cursor = codeCursorInRows(lines, splitBody, width, edit);
-  return paneResult({ body, fileHits: [], todoOwners: [], cursor, splitBody });
+  const cursor = codeCursorInRows(lines, splitBody, width, edit, scrollCol);
+  return paneResult({ body, cursor, splitBody });
 };
 
 module.exports = {
@@ -304,4 +386,5 @@ module.exports = {
   codeInnerWidth,
   paintBodyDiff,
   codeCursorInRows,
+  expandSoftRows,
 };

package/lib/render/files.js

@@ -5,9 +5,9 @@ const files = require('../files.js');
 const primitives = require('./primitives.js');
 const { measureColumns, padColumns } = primitives;
 
-const { isTodosEntry } = files;
+const { isTodosEntry, shortAge } = files;
 const { THEME, paint, visibleWidth, truncateVisible, seq, EL } = ansi;
-const { fill, FILE_MARK, paneResult, paintCursorList } = primitives;
+const { fill, FILE_MARK, paintCursorList } = primitives;
 
 const FILE_STATUS_FG = {
   unstaged: THEME.delLineFg,
@@ -41,7 +41,7 @@ const fileRowFields = (entry) => {
   const status = entry.status ?? '';
   const n = `${staged ?? 0}`;
   const m = `${remaining ?? 0}`;
-  const date = entry.date ?? '';
+  const date = shortAge(entry.date ?? '');
   return { add, del, status, n, m, date };
 };
 
@@ -134,7 +134,7 @@ const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
   const cursor = view.fileCursor ?? 0;
   const paintRow = (entry, rowWidth, rowColor, selected) =>
     paintFileRow(entry, rowWidth, rowColor, selected, cols);
-  const painted = paintCursorList(
+  return paintCursorList(
     files,
     cursor,
     width,
@@ -145,14 +145,6 @@ const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
     null,
     view.listScroll,
   );
-  return paneResult({
-    body: painted.body,
-    fileHits: painted.fileHits,
-    todoOwners: [],
-    cursor: painted.cursor,
-    splitBody: false,
-    listScroll: painted.offset,
-  });
 };
 
 module.exports = { paintBodyFiles };

package/lib/render/frame.js

@@ -1,25 +1,28 @@
 'use strict';
 
 const ansi = require('../ansi.js');
-const { overlayRows } = require('../select.js');
+const select = require('../select.js');
+const { overlayRows } = select;
 const primitives = require('./primitives.js');
 const chrome = require('./chrome.js');
 const files = require('./files.js');
 const branches = require('./branches.js');
 const commits = require('./commits.js');
 const notes = require('./notes.js');
+const npm = require('./npm.js');
 const diff = require('./diff.js');
 const unit = require('./unit.js');
 
 const { RESET } = ansi;
 const { LIST_PANES, paintBodyFill, paneResult } = primitives;
-const { paintHeader, paintButtons, paintStatusLine } = chrome;
+const { paintHeader, paintFooter, footerHits, paintStatusLine } = chrome;
 const { layoutButtons, statusBranchHit, statusChoiceHits } = chrome;
 const { hiddenActions, dimFooterActions, extraFooterActions } = chrome;
 const { paintNotePanel, paintBodyTodo } = notes;
 const { paintBodyFiles } = files;
 const { paintBodyBranches } = branches;
 const { paintBodyCommits } = commits;
+const { paintBodyNpm } = npm;
 const { paintBodyDiff } = diff;
 const { paintBodyUnit } = unit;
 
@@ -28,25 +31,20 @@ const bodyKind = (view) => {
   if (pane === 'files' || pane === 'branches' || pane === 'commits') {
     return pane;
   }
+  if (pane === 'npm') return 'npm';
   if (pane === 'unit') return 'unit';
   if (!view.item) return 'empty';
   if (view.item.origin === 'todo') return 'todo';
   return 'diff';
 };
 
-const paintBodyEmpty = () =>
-  paneResult({
-    body: [],
-    fileHits: [],
-    todoOwners: [],
-    cursor: null,
-    splitBody: false,
-  });
+const paintBodyEmpty = () => paneResult();
 
 const BODY_PAINT = {
   files: paintBodyFiles,
   branches: paintBodyBranches,
   commits: paintBodyCommits,
+  npm: paintBodyNpm,
   empty: paintBodyEmpty,
   todo: paintBodyTodo,
   diff: paintBodyDiff,
@@ -75,6 +73,33 @@ const bodyFillKind = (listPane, splitBody) => {
   return 'plain';
 };
 
+const ownerSpan = (owners, focus) => {
+  let first = -1;
+  let last = -1;
+  for (let i = 0; i < owners.length; i++) {
+    if (owners[i] !== focus) continue;
+    if (first < 0) first = i;
+    last = i;
+  }
+  return { first, last };
+};
+
+const revealScroll = (owners, focus, height, prefer) => {
+  const span = ownerSpan(owners, focus);
+  if (span.first < 0) return prefer;
+  const room = Math.max(1, height);
+  let start = prefer;
+  if (span.first < start) start = span.first;
+  if (span.last >= start + room) {
+    const fits = span.last - span.first + 1 <= room;
+    start = fits ? span.last - room + 1 : span.first;
+  }
+  const maxStart = Math.max(0, owners.length - room);
+  if (start > maxStart) start = maxStart;
+  if (start < 0) start = 0;
+  return start;
+};
+
 const mapBodyCursor = (cursor, shift, scroll, headerLines, shown) => {
   if (!cursor) return null;
   const row = cursor.row + shift;
@@ -119,7 +144,10 @@ const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
   }
   const scrollRaw = view.scroll ?? 0;
   const scrollMax = Math.max(0, body.length - bodyH);
-  const scroll = listPane ? 0 : Math.min(scrollRaw, scrollMax);
+  let scroll = listPane ? 0 : Math.min(scrollRaw, scrollMax);
+  if (view.item && view.item.origin === 'todo') {
+    scroll = revealScroll(todoOwners, view.todoFocus ?? 0, bodyH, scroll);
+  }
   const end = Math.min(body.length, scroll + bodyH);
   const copied = Math.max(0, end - scroll);
   const slice = new Array(bodyH);
@@ -165,7 +193,7 @@ const stackFrame = (view, width, color, rows, layout, windowed, notes) => {
   for (const row of notes.noteRows) rows.push(row);
   const status = view.status ?? '';
   rows.push(paintStatusLine(view, status, width, color));
-  rows.push(paintButtons(layout, width, color));
+  rows.push(paintFooter(view, layout, width, color));
   return overlayRows(rows, view.selection);
 };
 
@@ -207,7 +235,7 @@ const renderFrame = (view, options = {}) => {
   return {
     text,
     rows: painted,
-    buttons: layout.hits,
+    buttons: footerHits(view, layout),
     fileHits,
     todoHits,
     templateHits,

package/lib/render/notes.js

@@ -7,7 +7,7 @@ const primitives = require('./primitives.js');
 
 const { REPO_TODOS_LABEL } = files;
 const { wrapMultiline, cursorInWrap } = wrap;
-const { THEME, visibleWidth, truncateVisible, seq, EL, RESET, BOLD } = ansi;
+const { THEME, truncateVisible } = ansi;
 const { paintBar, paintCheckBar, windowRows } = primitives;
 const { LIST_PANES, CHECK_LEAD, paneResult } = primitives;
 
@@ -73,6 +73,7 @@ const paintTodoList = (texts, focus, width, color, edit) => {
         fgRgb,
         bgRgb,
         color,
+        true,
       );
       rows.push(painted);
       owners.push(i);
@@ -168,16 +169,8 @@ const paintNotePanel = (view, width, color, cap) => {
   return paintIdleNote(view, width, color);
 };
 
-const paintTodoCaption = (width, color) => {
-  const text = ` ${REPO_TODOS_LABEL}`;
-  const clipped = truncateVisible(text, width);
-  const pad = Math.max(0, width - visibleWidth(clipped));
-  const filled = clipped + ' '.repeat(pad);
-  if (!color) return filled;
-  const fgRgb = THEME.buttonHotFg;
-  const bgRgb = THEME.ctxBg;
-  return `${BOLD}${seq(fgRgb, bgRgb)}${EL}${filled}${RESET}`;
-};
+const paintTodoCaption = (width, color) =>
+  paintBar(` ${REPO_TODOS_LABEL}`, width, THEME.mutedFg, THEME.ctxBg, color);
 
 const paintBodyTodo = (view, width, color) => {
   const texts = view.todos ?? [];