reslop 0.2.4 → 0.2.5

package/lib/render/frame.js

@@ -2,7 +2,7 @@
 
 const ansi = require('../ansi.js');
 const select = require('../select.js');
-const { overlayRows } = select;
+const { overlayRows, markEditorSelection } = select;
 const primitives = require('./primitives.js');
 const chrome = require('./chrome.js');
 const files = require('./files.js');
@@ -16,8 +16,7 @@ const unit = require('./unit.js');
 const { RESET } = ansi;
 const { LIST_PANES, paintBodyFill, paneResult } = primitives;
 const { paintHeader, paintFooter, footerHits, paintStatusLine } = chrome;
-const { layoutButtons, statusBranchHit, statusChoiceHits } = chrome;
-const { hiddenActions, dimFooterActions, extraFooterActions } = chrome;
+const { footerLayout, statusBranchHit, statusChoiceHits } = chrome;
 const { paintNotePanel, paintBodyTodo } = notes;
 const { paintBodyFiles } = files;
 const { paintBodyBranches } = branches;
@@ -34,7 +33,7 @@ const bodyKind = (view) => {
   if (pane === 'npm') return 'npm';
   if (pane === 'unit') return 'unit';
   if (!view.item) return 'empty';
-  if (view.item.origin === 'todo') return 'todo';
+  if (view.item.origin === 'task') return 'tasks';
   return 'diff';
 };
 
@@ -46,7 +45,7 @@ const BODY_PAINT = {
   commits: paintBodyCommits,
   npm: paintBodyNpm,
   empty: paintBodyEmpty,
-  todo: paintBodyTodo,
+  tasks: paintBodyTodo,
   diff: paintBodyDiff,
   unit: paintBodyUnit,
 };
@@ -100,145 +99,131 @@ const revealScroll = (owners, focus, height, prefer) => {
   return start;
 };
 
-const mapBodyCursor = (cursor, shift, scroll, headerLines, shown) => {
+const windowY = (win, row) => {
+  const at = row + win.shift - win.scroll;
+  if (at < 0 || at >= win.shown) return -1;
+  return win.headerLines + at + 1;
+};
+
+const mapEditHits = (hits, win) => {
+  const out = [];
+  for (const hit of hits) {
+    const y = windowY(win, hit.row);
+    if (y >= 0) out.push({ ...hit, y });
+  }
+  return out;
+};
+
+const mapBodyCursor = (cursor, win) => {
   if (!cursor) return null;
-  const row = cursor.row + shift;
-  if (row < scroll || row >= scroll + shown) return null;
-  return {
-    x: cursor.x,
-    y: headerLines + (row - scroll) + 1,
-  };
+  const y = windowY(win, cursor.row);
+  if (y < 0) return null;
+  const point = { x: cursor.x, y };
+  if (typeof cursor.scroll === 'number') point.scroll = cursor.scroll;
+  return point;
 };
 
-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);
-  const fillKind = bodyFillKind(listPane, splitBody);
+const windowBody = (view, paintedBody, frame) => {
+  const { width, color, bodyH, headerLines } = frame;
+  const listPane = LIST_PANES.includes(view.pane ?? 'diff');
+  const fillKind = bodyFillKind(listPane, paintedBody.splitBody);
   const filler = paintBodyFill(width, color, fillKind);
-  const lead = !listPane && sourceBody.length > 0;
-  const body = new Array(sourceBody.length + (lead ? 1 : 0));
-  let bodyAt = 0;
-  let shift = 0;
-  if (lead) {
-    body[bodyAt++] = filler;
-    shift = 1;
-  }
-  for (let i = 0; i < sourceBody.length; i++) body[bodyAt++] = sourceBody[i];
-  const ownerLead = lead && sourceOwners.length;
-  const todoOwners = new Array(sourceOwners.length + (ownerLead ? 1 : 0));
-  let ownerAt = 0;
-  if (ownerLead) todoOwners[ownerAt++] = null;
-  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 shift = !listPane && paintedBody.body.length > 0 ? 1 : 0;
+  const lead = (items, first) =>
+    shift && items.length ? [first, ...items] : items;
+  const body = lead(paintedBody.body, filler);
+  const taskOwners = lead(paintedBody.taskOwners, null);
+  const taskChecks = lead(paintedBody.taskChecks, false);
   const scrollMax = Math.max(0, body.length - bodyH);
-  let scroll = listPane ? 0 : Math.min(scrollRaw, scrollMax);
-  if (view.item && view.item.origin === 'todo') {
-    scroll = revealScroll(todoOwners, view.todoFocus ?? 0, bodyH, scroll);
+  let scroll = listPane ? 0 : Math.min(view.scroll ?? 0, scrollMax);
+  if (view.item && view.item.origin === 'task') {
+    scroll = revealScroll(taskOwners, view.tasksFocus ?? 0, bodyH, scroll);
   }
-  const end = Math.min(body.length, scroll + bodyH);
-  const copied = Math.max(0, end - scroll);
-  const slice = new Array(bodyH);
-  for (let i = 0; i < copied; i++) slice[i] = body[scroll + i];
-  const todoHits = [];
-  for (let i = 0; i < copied; i++) {
-    const owner = todoOwners[scroll + i];
+  const slice = body.slice(scroll, scroll + bodyH);
+  const win = { shift, scroll, shown: slice.length, headerLines };
+  const taskHits = [];
+  for (let i = 0; i < slice.length; i++) {
+    const owner = taskOwners[scroll + i];
     if (owner === undefined || owner === null) continue;
     const y = headerLines + i + 1;
-    if (todoChecks[scroll + i]) {
-      todoHits.push({ y, cursor: owner, x0: 1, x1: 4, check: true });
+    if (taskChecks[scroll + i]) {
+      taskHits.push({ y, cursor: owner, x0: 1, x1: 4, check: true });
     }
-    todoHits.push({ y, cursor: owner });
+    taskHits.push({ y, cursor: owner });
   }
-  const cursor = mapBodyCursor(
-    paintedBody.cursor,
-    shift,
+  const cursor = mapBodyCursor(paintedBody.cursor, win);
+  const editHits = mapEditHits(paintedBody.editHits, win);
+  while (slice.length < bodyH) slice.push(filler);
+  const { listScroll, fileHits } = paintedBody;
+  return {
+    slice,
     scroll,
-    headerLines,
-    copied,
-  );
-  for (let i = copied; i < bodyH; i++) slice[i] = filler;
-  const listScroll = paintedBody.listScroll ?? 0;
-  const fileHits = paintedBody.fileHits;
-  return { slice, scroll, scrollMax, listScroll, todoHits, fileHits, cursor };
+    scrollMax,
+    listScroll,
+    taskHits,
+    fileHits,
+    editHits,
+    cursor,
+  };
 };
 
-const notePointerHits = (notesWanted, noteRows, noteCursor, bodyH) => {
-  let cursor = null;
-  if (noteCursor) {
-    cursor = { x: noteCursor.x, y: 2 + bodyH + noteCursor.row };
-  }
+const notePointerHits = (notes, bodyH) => {
+  const { notesWanted, noteRows, noteCursor } = notes;
+  const top = 2 + bodyH;
+  const x = noteCursor ? noteCursor.x : 0;
+  const y = noteCursor ? top + noteCursor.row : 0;
+  const cursor = noteCursor ? { x, y } : null;
   const templateHits = [];
   for (const hit of notesWanted.templateHits ?? []) {
     if (hit.row >= noteRows.length) continue;
-    templateHits.push({ y: 2 + bodyH + hit.row, cursor: hit.cursor });
+    templateHits.push({ y: top + hit.row, cursor: hit.cursor });
   }
-  return { cursor, templateHits };
-};
-
-const stackFrame = (view, width, color, rows, layout, windowed, notes) => {
-  for (const row of windowed.slice) rows.push(row);
-  for (const row of notes.noteRows) rows.push(row);
-  const status = view.status ?? '';
-  rows.push(paintStatusLine(view, status, width, color));
-  rows.push(paintFooter(view, layout, width, color));
-  return overlayRows(rows, view.selection);
+  const editHits = [];
+  for (const hit of notesWanted.editHits ?? []) {
+    if (hit.row >= noteRows.length) continue;
+    editHits.push({ ...hit, y: top + hit.row });
+  }
+  return { cursor, templateHits, editHits };
 };
 
 const renderFrame = (view, options = {}) => {
   const width = Math.max(20, options.width ?? 80);
   const height = Math.max(6, options.height ?? 24);
   const color = options.color ?? true;
-  const rows = [paintHeader(view, width, color)];
-  const extra = extraFooterActions(view);
-  const hidden = hiddenActions(view);
-  const dimmed = dimFooterActions(view);
-  const layout = layoutButtons(width, false, hidden, extra, dimmed);
+  const header = paintHeader(view, width, color);
+  const layout = footerLayout(view, width);
   const notes = frameNotes(view, width, height, color);
-  const headerLines = rows.length;
-  const bodyH = notes.bodyH;
+  const headerLines = 1;
+  const { bodyH } = notes;
   const paintedBody = paintFrameBody(view, width, color, bodyH, headerLines);
-  const windowed = windowBody(
-    view,
-    width,
-    color,
-    bodyH,
-    headerLines,
-    paintedBody,
-  );
-  const painted = stackFrame(view, width, color, rows, layout, windowed, notes);
-  const text = painted.map((row) => (color ? row + RESET : row)).join('\n');
-  const hits = notePointerHits(
-    notes.notesWanted,
-    notes.noteRows,
-    notes.noteCursor,
-    bodyH,
-  );
+  const frame = { width, color, bodyH, headerLines };
+  const windowed = windowBody(view, paintedBody, frame);
+  const rows = [
+    header,
+    ...windowed.slice,
+    ...notes.noteRows,
+    paintStatusLine(view, view.status ?? '', width, color),
+    paintFooter(view, layout, width, color),
+  ];
+  const painted = overlayRows(rows, view.selection);
+  const hits = notePointerHits(notes, bodyH);
   const statusY = painted.length - 1;
   const branchHit = statusBranchHit(view, width, statusY);
   const statusHits = branchHit ? [branchHit] : statusChoiceHits(view, statusY);
-  const { fileHits, todoHits, scroll, scrollMax, listScroll } = windowed;
+  const { fileHits, taskHits, scroll, scrollMax, listScroll } = windowed;
   const { templateHits } = hits;
+  const editHits = [...windowed.editHits, ...hits.editHits];
+  const shown = markEditorSelection(painted, view, editHits, color);
+  const text = shown.map((row) => (color ? row + RESET : row)).join('\n');
   const footerY = painted.length;
   return {
     text,
-    rows: painted,
+    rows: shown,
     buttons: footerHits(view, layout),
     fileHits,
-    todoHits,
+    taskHits,
     templateHits,
+    editHits,
     statusHits,
     footerY,
     height: footerY,
@@ -250,4 +235,4 @@ const renderFrame = (view, options = {}) => {
   };
 };
 
-module.exports = { BODY_PAINT, renderFrame };
+module.exports = { renderFrame };

package/lib/render/notes.js

@@ -5,8 +5,8 @@ const wrap = require('../wrap.js');
 const files = require('../files.js');
 const primitives = require('./primitives.js');
 
-const { REPO_TODOS_LABEL } = files;
-const { wrapMultiline, cursorInWrap } = wrap;
+const { REPO_TASKS_LABEL } = files;
+const { wrapMultiline, wrapDoc, cursorInWrap } = wrap;
 const { THEME, truncateVisible } = ansi;
 const { paintBar, paintCheckBar, windowRows } = primitives;
 const { LIST_PANES, CHECK_LEAD, paneResult } = primitives;
@@ -53,11 +53,35 @@ const todoCursor = (text, edit, inner, rowStart) => {
   return { x: pos.col + lead + 2, row: rowStart + pos.row };
 };
 
+const taskEditHits = (text, inner, rowStart, width) => {
+  const lead = checkLeadLen(text);
+  const body = text.slice(lead);
+  const bodyWidth = Math.max(1, inner - lead);
+  const doc = wrapDoc(body, bodyWidth);
+  const textX = lead + 2;
+  const hits = [];
+  for (let line = 0; line < doc.length; line++) {
+    const piece = doc[line];
+    hits.push({
+      row: rowStart + line,
+      x0: lead + 1,
+      textX,
+      x1: width + 1,
+      start: piece.start,
+      text: piece.text,
+      limit: piece.start + piece.text.length,
+      live: true,
+    });
+  }
+  return hits;
+};
+
 const paintTodoList = (texts, focus, width, color, edit) => {
   const inner = todoInnerWidth(width);
   const rows = [];
   const owners = [];
   const checks = [];
+  const editHits = [];
   let cursor = null;
   for (let i = 0; i < texts.length; i++) {
     const selected = i === focus;
@@ -81,8 +105,10 @@ const paintTodoList = (texts, focus, width, color, edit) => {
     }
     if (!edit || !selected) continue;
     cursor = todoCursor(text, edit, inner, rowStart);
+    const hits = taskEditHits(text, inner, rowStart, width);
+    for (const hit of hits) editHits.push(hit);
   }
-  return { rows, owners, checks, cursor };
+  return { rows, owners, checks, cursor, editHits };
 };
 
 const noteInnerWidth = (width) => Math.max(1, width - NOTE_PAD * 2);
@@ -101,11 +127,23 @@ const paintTemplateRow = (text, selected, width, color) => {
   return paintNoteLine(text, width, fgRgb, bgRgb, color);
 };
 
+const noteEditHit = (piece, row, width) => ({
+  row,
+  x0: 1,
+  textX: NOTE_PAD + 1,
+  x1: width + 1,
+  start: piece.start,
+  text: piece.text,
+  limit: piece.start + piece.text.length,
+  live: true,
+});
+
 const paintComposeNote = (view, width, color, cap) => {
   const inner = noteInnerWidth(width);
   const bgRgb = THEME.noteBg;
   const compose = view.compose;
-  const wrapped = wrapMultiline(compose.text, inner);
+  const doc = wrapDoc(compose.text ?? '', inner);
+  const wrapped = doc.map((piece) => piece.text);
   const { row, col } = cursorInWrap(compose.text, compose.cursor ?? 0, inner);
   const shown = windowRows(wrapped, row, INPUT_MAX);
   const rows = [];
@@ -124,8 +162,19 @@ const paintComposeNote = (view, width, color, cap) => {
     }
   }
   const templateCount = rows.length;
-  for (const line of shown.rows) {
-    rows.push(paintNoteLine(line, width, THEME.chromeFg, bgRgb, color));
+  const editHits = [];
+  for (let i = 0; i < shown.rows.length; i++) {
+    const piece = doc[shown.offset + i];
+    const painted = paintNoteLine(
+      shown.rows[i],
+      width,
+      THEME.chromeFg,
+      bgRgb,
+      color,
+    );
+    rows.push(painted);
+    if (!piece) continue;
+    editHits.push(noteEditHit(piece, templateCount + i, width));
   }
   return {
     rows,
@@ -134,11 +183,12 @@ const paintComposeNote = (view, width, color, cap) => {
       row: templateCount + row - shown.offset,
     },
     templateHits,
+    editHits,
   };
 };
 
 const paintIdleNote = (view, width, color) => {
-  const empty = { rows: [], cursor: null, templateHits: [] };
+  const empty = { rows: [], cursor: null, templateHits: [], editHits: [] };
   const text = view.noteText;
   if (!text) return empty;
   const inner = noteInnerWidth(width);
@@ -159,7 +209,7 @@ const paintIdleNote = (view, width, color) => {
 };
 
 const paintNotePanel = (view, width, color, cap) => {
-  const empty = { rows: [], cursor: null, templateHits: [] };
+  const empty = { rows: [], cursor: null, templateHits: [], editHits: [] };
   const compose = view.compose;
   if (compose && NOTE_COMPOSE.includes(compose.kind)) {
     return paintComposeNote(view, width, color, cap);
@@ -170,34 +220,39 @@ const paintNotePanel = (view, width, color, cap) => {
 };
 
 const paintTodoCaption = (width, color) =>
-  paintBar(` ${REPO_TODOS_LABEL}`, width, THEME.mutedFg, THEME.ctxBg, color);
+  paintBar(` ${REPO_TASKS_LABEL}`, width, THEME.mutedFg, THEME.ctxBg, color);
 
 const paintBodyTodo = (view, width, color) => {
-  const texts = view.todos ?? [];
+  const texts = view.tasks ?? [];
   let lines = texts;
   if (!lines.length && view.noteText) lines = [view.noteText];
   const painted = paintTodoList(
     lines,
-    view.todoFocus ?? 0,
+    view.tasksFocus ?? 0,
     width,
     color,
-    view.todoEdit,
+    view.taskEdit,
   );
   const caption = paintTodoCaption(width, color);
   const body = [caption, ...painted.rows];
-  const todoOwners = [null, ...painted.owners];
-  const todoChecks = [false, ...painted.checks];
+  const taskOwners = [null, ...painted.owners];
+  const taskChecks = [false, ...painted.checks];
   let cursor = null;
   if (painted.cursor) {
     cursor = { x: painted.cursor.x, row: painted.cursor.row + 1 };
   }
+  const editHits = [];
+  for (const hit of painted.editHits) {
+    editHits.push({ ...hit, row: hit.row + 1 });
+  }
   const fileHits = [];
   const splitBody = false;
   return paneResult({
     body,
     fileHits,
-    todoOwners,
-    todoChecks,
+    editHits,
+    taskOwners,
+    taskChecks,
     cursor,
     splitBody,
   });

package/lib/render/npm.js

@@ -10,7 +10,7 @@ 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 { fieldWindow } = primitives;
 
 const EDGE = 2;
 const TAIL = 1;
@@ -64,31 +64,117 @@ const paintNpmRow = (entry, width, color, selected, nameCol = 0) => {
   return out + edge;
 };
 
+const editNameSource = (view, compose, field) => {
+  if (field === 'name') return compose.text;
+  return view.npmDraftName ?? '';
+};
+
+const editNameWidth = (commands, live) => {
+  const typed = visibleWidth(`${live ?? ''}`);
+  return Math.min(NPM_NAME_MAX, Math.max(npmNameWidth(commands), typed));
+};
+
+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 edits = [
+    {
+      field: 'name',
+      x0: 1,
+      textX: nameX,
+      x1: commandX,
+      start: 0,
+      text: flatName,
+      limit: flatName.length,
+      scroll: nameWin.scroll,
+      live: field === 'name',
+    },
+    {
+      field: 'command',
+      x0: commandX,
+      textX: commandX,
+      x1: width + 1,
+      start: 0,
+      text: flatCommand,
+      limit: flatCommand.length,
+      scroll: commandWin.scroll,
+      live: field === 'command',
+    },
+  ];
+  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 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);
+  const field = view.npmEditField === 'command' ? 'command' : 'name';
+  const live = editing ? editNameSource(view, compose, field) : '';
+  const nameW = editing
+    ? editNameWidth(commands, live)
+    : npmNameWidth(commands);
+  const cursor = view.npmCursor ?? 0;
+  const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
+  const paintRow = (entry, selected) =>
+    paintNpmRow(entry, width, color, selected, nameW);
   let extra = null;
   if (editing) {
-    const painted = paintListEdit(compose, width, color, EDGE);
+    const painted = paintNpmEdit(view, width, color, nameW);
     const at = view.npmEditName ? 'replace' : 'end';
-    extra = { row: painted.row, cursor: painted.cursor, at, index: cursor };
+    extra = { ...painted, at, index: cursor };
   }
-  return paintCursorList(
-    commands,
-    cursor,
-    width,
-    color,
-    bodyH,
-    headerLines,
-    paintRow,
-    extra,
-    view.listScroll,
-  );
+  return paintCursorList(commands, cursor, pane, paintRow, extra);
 };
 
 const logStart = (view, count, rows) => {