@valyrianjs/terminal 0.2.2 → 0.2.4

package/src/ansi.ts

@@ -1,4 +1,4 @@
-import { terminalCellWidth, terminalGraphemes } from "./text.js";
+import { dropTerminalCells, terminalCellWidth, terminalGraphemes } from "./text.js";
 import { resolveTerminalStyle, resolveTerminalStyleToken } from "./theme.js";
 import type { CursorPosition, TerminalFrame, TerminalStyleSpan, TerminalTheme } from "./types.js";
 
@@ -29,12 +29,28 @@ function spanLayerPriority(span: TerminalStyleSpan) {
   return span.kind === "focus" ? 0 : 1;
 }
 
-function lineSpans(spans: TerminalStyleSpan[], y: number) {
+type RowSpanEntry = {
+  span: TerminalStyleSpan;
+  index: number;
+};
+
+function compareSpanStart(a: RowSpanEntry, b: RowSpanEntry) {
+  return a.span.x1 - b.span.x1 || compareSpanPaintOrder(a, b) || b.span.x2 - a.span.x2;
+}
+
+function compareSpanPaintOrder(a: RowSpanEntry, b: RowSpanEntry) {
+  return spanLayerPriority(a.span) - spanLayerPriority(b.span) || a.index - b.index;
+}
+
+function lineSpanEntries(spans: TerminalStyleSpan[], y: number) {
   return spans
     .map((span, index) => ({ span, index }))
     .filter(({ span }) => span.y === y)
-    .sort((a, b) => a.span.x1 - b.span.x1 || spanLayerPriority(a.span) - spanLayerPriority(b.span) || b.span.x2 - a.span.x2 || a.index - b.index)
-    .map(({ span }) => span);
+    .sort(compareSpanStart);
+}
+
+function lineSpans(spans: TerminalStyleSpan[], y: number) {
+  return lineSpanEntries(spans, y).map(({ span }) => span);
 }
 
 function tokenStyle(token: ReturnType<typeof resolveTerminalStyleToken>) {
@@ -95,65 +111,110 @@ function colorAnsi(value: string | undefined, background: boolean) {
   return `\u001b[${background ? 48 : 38};2;${red};${green};${blue}m`;
 }
 
-function renderAnsiLine(line: string, spans: TerminalStyleSpan[], y: number, theme?: TerminalTheme) {
-  let output = "";
-  let visibleColumn = 1;
-  const rowSpans = lineSpans(spans, y);
-  let activeSpanIndex = 0;
+function sameActiveAnsiStack(previous: RowSpanEntry[], next: RowSpanEntry[]) {
+  if (previous.length !== next.length) {
+    return false;
+  }
+  return previous.every((entry, index) => entry.index === next[index]?.index);
+}
 
-  for (const grapheme of terminalGraphemes(line)) {
-    while (rowSpans[activeSpanIndex]?.x1 === visibleColumn) {
-      output += spanAnsiOpen(rowSpans[activeSpanIndex], theme);
-      activeSpanIndex += 1;
-    }
+function spanContains(container: TerminalStyleSpan, contained: TerminalStyleSpan) {
+  return container.y === contained.y && container.x1 <= contained.x1 && container.x2 >= contained.x2 && (container.x1 < contained.x1 || container.x2 > contained.x2);
+}
 
-    if (grapheme === "|") {
-      continue;
-    }
+function hasLaterContainedSpan(entry: RowSpanEntry, rowEntries: RowSpanEntry[]) {
+  return rowEntries.some((candidate) => candidate.index > entry.index && spanContains(entry.span, candidate.span));
+}
 
-    output += grapheme;
-    visibleColumn += terminalCellWidth(grapheme);
+function compareActiveSpanPaintOrder(rowEntries: RowSpanEntry[], a: RowSpanEntry, b: RowSpanEntry) {
+  const priority = spanLayerPriority(a.span) - spanLayerPriority(b.span);
+  if (priority !== 0) {
+    return priority;
+  }
 
-    let closedSpan = false;
-    for (const span of rowSpans) {
-      if (span.x2 === visibleColumn) {
-        if (span.kind !== "focus") {
-          output += spanAnsiClose(span, theme);
-          closedSpan = true;
-        }
-      }
+  const aContainsB = spanContains(a.span, b.span);
+  const bContainsA = spanContains(b.span, a.span);
+  if (aContainsB && !bContainsA) {
+    if (a.index < b.index) {
+      return -1;
     }
-    for (const span of rowSpans) {
-      if (span.x2 === visibleColumn && span.kind === "focus") {
-        output += spanAnsiClose(span, theme);
-        closedSpan = true;
-      }
-    }
-    if (closedSpan && visibleColumn <= terminalCellWidth(line)) {
-      for (const span of rowSpans) {
-        if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
-          output += spanAnsiOpen(span, theme);
-        }
-      }
+    return hasLaterContainedSpan(a, rowEntries) ? 1 : -1;
+  }
+  if (bContainsA && !aContainsB) {
+    if (b.index < a.index) {
+      return 1;
     }
+    return hasLaterContainedSpan(b, rowEntries) ? -1 : 1;
   }
 
-  for (const span of rowSpans) {
-    if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
-      if (span.kind !== "focus") {
-        output += spanAnsiClose(span, theme);
-      }
+  return a.index - b.index;
+}
+
+function activeAnsiStack(rowEntries: RowSpanEntry[], column: number) {
+  return rowEntries
+    .filter(({ span }) => span.x1 <= column && span.x2 > column)
+    .sort((a, b) => compareActiveSpanPaintOrder(rowEntries, a, b));
+}
+
+function commonAnsiStackPrefixLength(previous: RowSpanEntry[], next: RowSpanEntry[]) {
+  const length = Math.min(previous.length, next.length);
+  for (let index = 0; index < length; index += 1) {
+    if (previous[index]?.index !== next[index]?.index) {
+      return index;
     }
   }
-  for (const span of rowSpans) {
-    if (span.x1 < visibleColumn && span.x2 > visibleColumn && span.kind === "focus") {
-      output += spanAnsiClose(span, theme);
+  return length;
+}
+
+function compareAnsiCloseOrder(a: RowSpanEntry, b: RowSpanEntry) {
+  const aFocus = a.span.kind === "focus" ? 1 : 0;
+  const bFocus = b.span.kind === "focus" ? 1 : 0;
+  return aFocus - bFocus || a.index - b.index;
+}
+
+function switchAnsiStack(previous: RowSpanEntry[], next: RowSpanEntry[], theme?: TerminalTheme) {
+  if (sameActiveAnsiStack(previous, next)) {
+    return "";
+  }
+
+  const commonPrefixLength = commonAnsiStackPrefixLength(previous, next);
+  const removed = previous.slice(commonPrefixLength).sort(compareAnsiCloseOrder);
+  const commonPrefix = previous.slice(0, commonPrefixLength);
+  return [
+    ...removed.map(({ span }) => spanAnsiClose(span, theme)),
+    ...(removed.length > 0 ? commonPrefix.map(({ span }) => spanAnsiOpen(span, theme)) : []),
+    ...next.slice(commonPrefixLength).map(({ span }) => spanAnsiOpen(span, theme))
+  ].join("");
+}
+
+function renderAnsiLineFromColumn(line: string, spans: TerminalStyleSpan[], y: number, startColumn: number, theme?: TerminalTheme) {
+  let output = "";
+  let visibleColumn = Math.max(1, startColumn);
+  const rowEntries = lineSpanEntries(spans, y);
+  let currentStack: RowSpanEntry[] = [];
+
+  for (const grapheme of terminalGraphemes(dropTerminalCells(line, visibleColumn - 1))) {
+    const nextStack = activeAnsiStack(rowEntries, visibleColumn);
+    output += switchAnsiStack(currentStack, nextStack, theme);
+    currentStack = nextStack;
+
+    if (grapheme === "|") {
+      continue;
     }
+
+    output += grapheme;
+    visibleColumn += terminalCellWidth(grapheme);
   }
 
+  output += switchAnsiStack(currentStack, [], theme);
+
   return output;
 }
 
+function renderAnsiLine(line: string, spans: TerminalStyleSpan[], y: number, theme?: TerminalTheme) {
+  return renderAnsiLineFromColumn(line, spans, y, 1, theme);
+}
+
 function hasPlainAffordance(token: ReturnType<typeof resolveTerminalStyleToken>) {
   return typeof token !== "undefined" && ("plainPrefix" in token || "plainSuffix" in token);
 }
@@ -234,6 +295,70 @@ export function toAnsiFrame(lines: string[], cursor: CursorPosition | null, span
   return `\u001b[?25l\u001b[H${ansiLines.join("\n")}${cursorCode}`;
 }
 
+function commonPrefixCellWidth(previousLine: string, nextLine: string) {
+  const previousGraphemes = terminalGraphemes(previousLine);
+  const nextGraphemes = terminalGraphemes(nextLine);
+  const length = Math.min(previousGraphemes.length, nextGraphemes.length);
+  let width = 0;
+
+  for (let index = 0; index < length; index += 1) {
+    if (previousGraphemes[index] !== nextGraphemes[index]) {
+      return width;
+    }
+    if (previousGraphemes[index] !== "|") {
+      width += terminalCellWidth(previousGraphemes[index]);
+    }
+  }
+
+  return width;
+}
+
+function renderAnsiLineSuffix(line: string, spans: TerminalStyleSpan[], y: number, startColumn: number, theme?: TerminalTheme) {
+  return renderAnsiLineFromColumn(line, spans, y, startColumn, theme);
+}
+
+
+function sameSpanStyle(previous: TerminalStyleSpan["style"], next: TerminalStyleSpan["style"]) {
+  if (previous === next) {
+    return true;
+  }
+  if (!previous || !next) {
+    return false;
+  }
+  return previous.color === next.color
+    && previous.background === next.background
+    && previous.plainPrefix === next.plainPrefix
+    && previous.plainSuffix === next.plainSuffix
+    && JSON.stringify(previous.border) === JSON.stringify(next.border)
+    && JSON.stringify(previous.padding) === JSON.stringify(next.padding);
+}
+
+function sameLineSpans(previousSpans: TerminalStyleSpan[], nextSpans: TerminalStyleSpan[], y: number) {
+  if (previousSpans.length === 0 && nextSpans.length === 0) {
+    return true;
+  }
+
+  const previousRowSpans = lineSpans(previousSpans, y);
+  const nextRowSpans = lineSpans(nextSpans, y);
+  if (previousRowSpans.length !== nextRowSpans.length) {
+    return false;
+  }
+
+  for (let index = 0; index < previousRowSpans.length; index += 1) {
+    const previous = previousRowSpans[index];
+    const next = nextRowSpans[index];
+    if (previous.kind !== next.kind
+      || previous.x1 !== next.x1
+      || previous.x2 !== next.x2
+      || previous.y !== next.y
+      || !sameSpanStyle(previous.style, next.style)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 export function createAnsiFrameDiff(
   previousAnsiLines: string[],
   nextAnsiLines: string[],
@@ -267,13 +392,77 @@ export function createAnsiFrameDiff(
   };
 }
 
+function createAnsiFramePatch(
+  previousLines: string[],
+  previousAnsiLines: string[],
+  nextLines: string[],
+  previousSpans: TerminalStyleSpan[],
+  nextSpans: TerminalStyleSpan[],
+  cursor: CursorPosition | null,
+  options: AnsiFrameOptions = {}
+): AnsiFrameDiffResult & { nextAnsiLines: string[] } {
+  const nextAnsiLines: string[] = [];
+  const changedLineIndexes: number[] = [];
+  const writes: string[] = ["\u001b[?25l"];
+  const maxLines = Math.max(previousAnsiLines.length, nextLines.length);
+
+  for (let i = 0; i < maxLines; i += 1) {
+    const previousLine = previousLines[i] || "";
+    const nextLine = nextLines[i] || "";
+    const previousAnsiLine = previousAnsiLines[i] || "";
+    const spansMatch = sameLineSpans(previousSpans, nextSpans, i + 1);
+    const nextAnsiLine = i < nextLines.length && previousLine === nextLine && spansMatch
+      ? previousAnsiLine
+      : i < nextLines.length
+        ? renderAnsiLine(nextLine, nextSpans, i + 1, options.theme)
+        : "";
+    nextAnsiLines[i] = nextAnsiLine;
+    if (nextAnsiLine === previousAnsiLine) {
+      continue;
+    }
+
+    changedLineIndexes.push(i);
+    const canPatchSuffix = cursor?.y === i + 1
+      && lineSpans(previousSpans, i + 1).length === 0
+      && lineSpans(nextSpans, i + 1).length === 0;
+    const prefixWidth = canPatchSuffix && i < previousLines.length && i < nextLines.length && previousLine !== nextLine
+      ? commonPrefixCellWidth(previousLine, nextLine)
+      : 0;
+
+    if (prefixWidth > 0) {
+      const startColumn = prefixWidth + 1;
+      const suffix = renderAnsiLineSuffix(nextLine, nextSpans, i + 1, startColumn, options.theme);
+      writes.push(`\u001b[${i + 1};${startColumn}H${suffix}\u001b[0m\u001b[K`);
+    } else {
+      writes.push(`\u001b[${i + 1};1H${nextAnsiLine}\u001b[0m\u001b[K`);
+    }
+  }
+
+  if (cursor) {
+    writes.push(`\u001b[${cursor.y};${cursor.x}H`);
+  }
+  if (options.showCursor !== false || (options.showCursorWhenFrameHasCursor === true && cursor)) {
+    writes.push(ANSI_SHOW_CURSOR);
+  }
+
+  return {
+    changedLineIndexes,
+    outputChunk: writes.join(""),
+    restoresCursor: Boolean(cursor),
+    nextAnsiLines: nextAnsiLines.slice(0, nextLines.length)
+  };
+}
+
 export function createAnsiDiffWriter(options: AnsiFrameOptions = {}) {
+  let previousLines: string[] = [];
   let previousAnsiLines: string[] = [];
+  let previousSpans: TerminalStyleSpan[] = [];
 
   return function toAnsiDiff(lines: string[], cursor: CursorPosition | null, spans: TerminalStyleSpan[] = []) {
-    const ansiLines = lines.map((line, index) => renderAnsiLine(line, spans, index + 1, options.theme));
-    const diff = createAnsiFrameDiff(previousAnsiLines, ansiLines, cursor, options);
-    previousAnsiLines = ansiLines.slice();
+    const diff = createAnsiFramePatch(previousLines, previousAnsiLines, lines, previousSpans, spans, cursor, options);
+    previousLines = lines.slice();
+    previousAnsiLines = diff.nextAnsiLines.slice();
+    previousSpans = spans.map((span) => ({ ...span }));
     return diff.outputChunk;
   };
 }

package/src/layout.ts

@@ -242,6 +242,8 @@ function overlayMetric(value: number, name: string) {
   return metric;
 }
 
+const MODAL_OVERLAY_HITBOX_ID = "\u0000valyrian-overlay-modal-shield";
+
 function nextPointerLayer(hitboxes: TerminalHitbox[]) {
   let layer = 0;
   for (const box of hitboxes) {
@@ -250,7 +252,7 @@ function nextPointerLayer(hitboxes: TerminalHitbox[]) {
   return layer + 1;
 }
 
-export function overlayFrame(base: TerminalFrame, overlay: TerminalFrame, options: { x: number; y: number; width: number; height: number }): TerminalFrame {
+export function overlayFrame(base: TerminalFrame, overlay: TerminalFrame, options: { x: number; y: number; width: number; height: number; backdropSpans?: TerminalStyleSpan[] }): TerminalFrame {
   const x = overlayMetric(options.x, "Overlay x");
   const y = overlayMetric(options.y, "Overlay y");
   const width = overlayMetric(options.width, "Overlay width");
@@ -289,9 +291,18 @@ export function overlayFrame(base: TerminalFrame, overlay: TerminalFrame, option
     ...box,
     pointerLayer: overlayLayer + (box.pointerLayer ?? 0)
   }));
+  const overlayShield = {
+    id: MODAL_OVERLAY_HITBOX_ID,
+    tag: "terminal-overlay" as const,
+    x1: 1,
+    x2: Math.max(1, getFrameWidth(base)),
+    y1: 1,
+    y2: Math.max(1, getFrameHeight(base)),
+    pointerLayer: overlayLayer - 0.5
+  };
   const cursor = visibleOverlay.cursor || base.cursor;
 
-  return createFrame(lines, [...overlayHitboxes, ...base.hitboxes], cursor, [...base.spans, ...visibleOverlay.spans]);
+  return createFrame(lines, [...overlayHitboxes, overlayShield, ...base.hitboxes], cursor, [...base.spans, ...(options.backdropSpans ?? []), ...visibleOverlay.spans]);
 }
 
 export function cropFrame(frame: TerminalFrame, offset: number, height: number) {