reslop 0.2.0 → 0.2.3

package/lib/render/diff.js

@@ -78,8 +78,8 @@ const STAGED_STYLES = {
 };
 
 const SOFT_WRAP = ['warn', 'note'];
-const DEL_CHAR_BG = ansi.bg(THEME.delCharBg);
-const ADD_CHAR_BG = ansi.bg(THEME.addCharBg);
+const delCharBg = () => ansi.bg(THEME.delCharBg);
+const addCharBg = () => ansi.bg(THEME.addCharBg);
 
 const paintSpans = (pieces, lineStyle, budget, color) => {
   let out = '';
@@ -298,8 +298,8 @@ const paintBodyDiff = (view, width, color) => {
 };
 
 module.exports = {
-  DEL_CHAR_BG,
-  ADD_CHAR_BG,
+  delCharBg,
+  addCharBg,
   paintDiffLine,
   codeInnerWidth,
   paintBodyDiff,

package/lib/render/frame.js

@@ -8,18 +8,20 @@ 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,6 +30,7 @@ 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';
@@ -47,6 +50,7 @@ const BODY_PAINT = {
   files: paintBodyFiles,
   branches: paintBodyBranches,
   commits: paintBodyCommits,
+  npm: paintBodyNpm,
   empty: paintBodyEmpty,
   todo: paintBodyTodo,
   diff: paintBodyDiff,
@@ -75,6 +79,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;
@@ -88,6 +119,7 @@ const mapBodyCursor = (cursor, shift, scroll, headerLines, shown) => {
 const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
   const sourceBody = paintedBody.body;
   const sourceOwners = paintedBody.todoOwners;
+  const sourceChecks = paintedBody.todoChecks ?? [];
   const splitBody = paintedBody.splitBody === true;
   const pane = view.pane ?? 'diff';
   const listPane = LIST_PANES.includes(pane);
@@ -109,9 +141,19 @@ const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
   for (let i = 0; i < sourceOwners.length; i++) {
     todoOwners[ownerAt++] = sourceOwners[i];
   }
+  const checkLead = lead && sourceChecks.length;
+  const todoChecks = new Array(sourceChecks.length + (checkLead ? 1 : 0));
+  let checkAt = 0;
+  if (checkLead) todoChecks[checkAt++] = false;
+  for (let i = 0; i < sourceChecks.length; i++) {
+    todoChecks[checkAt++] = sourceChecks[i];
+  }
   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);
@@ -120,7 +162,11 @@ const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
   for (let i = 0; i < copied; i++) {
     const owner = todoOwners[scroll + i];
     if (owner === undefined || owner === null) continue;
-    todoHits.push({ y: headerLines + i + 1, cursor: owner });
+    const y = headerLines + i + 1;
+    if (todoChecks[scroll + i]) {
+      todoHits.push({ y, cursor: owner, x0: 1, x1: 4, check: true });
+    }
+    todoHits.push({ y, cursor: owner });
   }
   const cursor = mapBodyCursor(
     paintedBody.cursor,
@@ -153,7 +199,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);
 };
 
@@ -195,7 +241,7 @@ const renderFrame = (view, options = {}) => {
   return {
     text,
     rows: painted,
-    buttons: layout.hits,
+    buttons: footerHits(view, layout),
     fileHits,
     todoHits,
     templateHits,

package/lib/render/notes.js

@@ -11,7 +11,7 @@ const { THEME, visibleWidth, truncateVisible, seq, EL, RESET, BOLD } = ansi;
 const { paintBar, paintCheckBar, windowRows } = primitives;
 const { LIST_PANES, CHECK_LEAD, paneResult } = primitives;
 
-const NOTE_COMPOSE = ['feedback', 'commit'];
+const NOTE_COMPOSE = ['feedback'];
 const INPUT_MAX = 4;
 const NOTE_MAX = 4;
 const NOTE_PAD = 1;
@@ -57,6 +57,7 @@ const paintTodoList = (texts, focus, width, color, edit) => {
   const inner = todoInnerWidth(width);
   const rows = [];
   const owners = [];
+  const checks = [];
   let cursor = null;
   for (let i = 0; i < texts.length; i++) {
     const selected = i === focus;
@@ -65,14 +66,22 @@ const paintTodoList = (texts, focus, width, color, edit) => {
     const text = texts[i];
     const wrapped = wrapTodoItem(text, inner);
     const rowStart = rows.length;
-    for (const line of wrapped) {
-      rows.push(paintCheckBar(` ${line}`, width, fgRgb, bgRgb, color));
+    for (let line = 0; line < wrapped.length; line++) {
+      const painted = paintCheckBar(
+        ` ${wrapped[line]}`,
+        width,
+        fgRgb,
+        bgRgb,
+        color,
+      );
+      rows.push(painted);
       owners.push(i);
+      checks.push(line === 0);
     }
     if (!edit || !selected) continue;
     cursor = todoCursor(text, edit, inner, rowStart);
   }
-  return { rows, owners, cursor };
+  return { rows, owners, checks, cursor };
 };
 
 const noteInnerWidth = (width) => Math.max(1, width - NOTE_PAD * 2);
@@ -184,13 +193,21 @@ const paintBodyTodo = (view, width, color) => {
   const caption = paintTodoCaption(width, color);
   const body = [caption, ...painted.rows];
   const todoOwners = [null, ...painted.owners];
+  const todoChecks = [false, ...painted.checks];
   let cursor = null;
   if (painted.cursor) {
     cursor = { x: painted.cursor.x, row: painted.cursor.row + 1 };
   }
   const fileHits = [];
   const splitBody = false;
-  return paneResult({ body, fileHits, todoOwners, cursor, splitBody });
+  return paneResult({
+    body,
+    fileHits,
+    todoOwners,
+    todoChecks,
+    cursor,
+    splitBody,
+  });
 };
 
 module.exports = {

package/lib/render/npm.js

@@ -0,0 +1,228 @@
+'use strict';
+
+const ansi = require('../ansi.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 { TABLE_KEY, TABLE_VAL } = npmCommands;
+const { fill, FILE_MARK, paneResult, paintCursorList } = primitives;
+const { paintListEdit } = primitives;
+
+const EDGE = 2;
+const TAIL = 1;
+const LOG_PAD_Y = 1;
+const LOG_PAD_X = 2;
+const NPM_NAME_MAX = 24;
+
+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;
+  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 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;
+  const tail = ' '.repeat(TAIL);
+  const edge = fill(EDGE, fgRgb, THEME.ctxBg, color);
+  if (!color) return `${left}${tail}${edge}`;
+  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);
+  return out + edge;
+};
+
+const paintNpmList = (view, width, color, bodyH, headerLines) => {
+  const commands = view.npmCommands ?? [];
+  const nameW = npmNameWidth(commands);
+  const cursor = view.npmCursor ?? 0;
+  const compose = view.compose;
+  const editing = compose && compose.kind === 'npm';
+  const paintRow = (entry, rowWidth, rowColor, selected) =>
+    paintNpmRow(entry, rowWidth, rowColor, selected, nameW);
+  let extra = null;
+  if (editing) {
+    const painted = paintListEdit(compose, width, color, EDGE);
+    const at = view.npmEditName ? 'replace' : 'end';
+    extra = { row: painted.row, cursor: painted.cursor, at, index: cursor };
+  }
+  const painted = paintCursorList(
+    commands,
+    cursor,
+    width,
+    color,
+    bodyH,
+    headerLines,
+    paintRow,
+    extra,
+    view.listScroll,
+  );
+  return paneResult({
+    body: painted.body,
+    fileHits: painted.fileHits,
+    todoOwners: [],
+    cursor: painted.cursor,
+    splitBody: false,
+    listScroll: painted.offset,
+  });
+};
+
+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 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 tableTone = (index) => {
+  const lift = index % 2 === 0 ? 0.035 : 0.07;
+  const valueBg = mixRgb(THEME.ctxBg, THEME.chromeFg, lift);
+  const keyBg = mixRgb(THEME.ctxBg, THEME.chromeFg, lift + 0.025);
+  const frame = mixRgb(THEME.ctxBg, THEME.chromeFg, lift * 0.4);
+  return { valueBg, keyBg, frame };
+};
+
+const tableIndex = (lines, index) => {
+  let at = index;
+  let row = 0;
+  while (at > 0 && isTableLine(lines[at - 1])) {
+    at -= 1;
+    row += 1;
+  }
+  return row;
+};
+
+const paintTableLine = (line, width, index) => {
+  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 valueW = Math.max(0, inner - keyW - gapW);
+  const shown = truncateVisible(value, valueW);
+  const pad = ' '.repeat(Math.max(0, 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 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);
+  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}`;
+  return `${out}${RESET}`;
+};
+
+const paintRunBar = (width, color, frame) => {
+  const label = formatBusyStatus('running', frame);
+  return paintLogLine(label, width, color, THEME.chromeFg);
+};
+
+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 rows = logViewRows(bodyH);
+  const padY = bodyH - rows;
+  const top = padY ? 1 : 0;
+  const start = logStart(view, count, rows);
+  const blank = fill(width, THEME.ctxFg, THEME.ctxBg, color);
+  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);
+    }
+  }
+  for (let i = 0; i < padY - top; i++) body.push(blank);
+  return paneResult({
+    body,
+    fileHits: [],
+    todoOwners: [],
+    cursor: null,
+    splitBody: false,
+  });
+};
+
+const paintBodyNpm = (view, width, color, bodyH, headerLines) => {
+  if (view.npmView) return paintNpmLog(view, width, color, bodyH);
+  return paintNpmList(view, width, color, bodyH, headerLines);
+};
+
+module.exports = { paintBodyNpm, logViewRows };

package/lib/render/primitives.js

@@ -8,7 +8,7 @@ const GUTTER_W = 2;
 const FILE_MARK = '▶';
 const FILE_LIST_PAD = 1;
 const CHECK_DONE = 'xX';
-const LIST_PANES = ['files', 'branches', 'commits'];
+const LIST_PANES = ['files', 'branches', 'commits', 'npm'];
 const CHECK_TOKEN = /\[([ xX])\]/;
 const CHECK_LEAD = /^\[[ xX]\] /;
 
@@ -104,6 +104,13 @@ const listWindowStart = (focus, offset, listH, count) => {
   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 paintCursorList = (
   items,
   cursor,
@@ -112,15 +119,16 @@ const paintCursorList = (
   bodyH,
   headerLines,
   paintRow,
-  tail,
+  extraRow,
   offset = 0,
 ) => {
   const pad = bodyH >= FILE_LIST_PAD * 2 + 1 ? FILE_LIST_PAD : 0;
   const listH = bodyH - pad * 2;
-  const extra = tail ? 1 : 0;
+  const inserting = extraRow && extraRow.at === 'start';
+  const extra = extraRow && extraRow.at !== 'replace' ? 1 : 0;
   const count = items.length + extra;
-  const last = count - 1;
-  const focus = extra ? last : cursor;
+  const extraAt = extraIdx(extraRow, cursor, items.length);
+  const focus = extraRow ? extraAt : cursor;
   const start = listWindowStart(focus, offset, listH, count);
   const blank = paintBodyFill(width, color, 'files');
   const body = [];
@@ -129,52 +137,57 @@ const paintCursorList = (
   if (pad) body.push(blank);
   for (let i = 0; i < listH; i++) {
     const idx = start + i;
-    if (tail && idx === items.length) {
-      body.push(tail.row);
-      if (tail.cursor) {
-        textCursor = { x: tail.cursor.x, row: body.length - 1 };
+    if (extraRow && idx === extraAt) {
+      body.push(extraRow.row);
+      if (extraRow.cursor) {
+        textCursor = { x: extraRow.cursor.x, row: body.length - 1 };
       }
       continue;
     }
-    const entry = items[idx];
+    const itemIdx = inserting ? idx - 1 : idx;
+    const entry = items[itemIdx];
     if (!entry) break;
-    const selected = extra ? false : idx === cursor;
+    const selected = extraRow ? false : itemIdx === cursor;
     body.push(paintRow(entry, width, color, selected));
     const y = headerLines + pad + i + 1;
-    fileHits.push({ y, cursor: idx });
+    fileHits.push({ y, cursor: itemIdx });
   }
   if (pad) body.push(blank);
   return { body, fileHits, cursor: textCursor, offset: start };
 };
 
-const branchLabel = (name) => {
-  const branch = `${name ?? ''}`.trim();
-  if (!branch) return '';
-  return `[${branch}]`;
-};
-
-const splitBracketName = (label) => {
-  const text = `${label ?? ''}`;
-  const open = text.startsWith('[') ? '[' : '';
-  const rest = open ? text.slice(1) : text;
-  const close = rest.endsWith(']') ? ']' : '';
-  const name = close ? rest.slice(0, -1) : rest;
-  return { open, name, close };
-};
+const branchLabel = (name) => `${name ?? ''}`.trim();
 
-const paintBracketName = (label, nameFg, wrapFg, bgRgb, color, nameBold) => {
-  const { open, name, close } = splitBracketName(label);
-  return (
-    paint(open, wrapFg, bgRgb, color, true) +
-    paint(name, nameFg, bgRgb, color, nameBold) +
-    paint(close, wrapFg, bgRgb, color, true)
-  );
+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 clipped = truncateVisible(text, rest);
+  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 col = Math.min(compose.cursor ?? 0, visibleWidth(clipped));
+  return { row, cursor: { x: prefixW + col + 1 } };
 };
 
 const paneResult = (fields) => ({
   body: fields.body,
   fileHits: fields.fileHits,
   todoOwners: fields.todoOwners,
+  todoChecks: fields.todoChecks ?? [],
   cursor: fields.cursor ?? null,
   splitBody: fields.splitBody === true,
   listScroll: fields.listScroll ?? 0,
@@ -238,8 +251,9 @@ module.exports = {
   paintSplitRule,
   paintBodyFill,
   windowRows,
+  listWindowStart,
   paintCursorList,
+  paintListEdit,
   branchLabel,
-  paintBracketName,
   paneResult,
 };

package/lib/render/render.js

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