@hraness/dawg 0.6.0 → 0.7.0

package/tui/play-strip.ts

@@ -1,21 +1,31 @@
 /**
- * Play mode's two fixed rows: the header (`PLAY  C3–F4  vel 100  ● REC
+ * Play mode's two fixed rows: the header (`PLAY MODE  ▶ 120 BPM · lead ·
+ * rev 3  C3–F4  vel 100  ● REC
  * click ✓` plus a beat flash) and a one-line keyboard strip with the keys
  * that are sounding lit. Both repaint in place every frame, so playing never
  * scrolls the transcript.
  */
 import type { CellBuffer } from "./screen.ts";
 import { displayWidth, truncate } from "./text.ts";
-import { onBackground, type Theme } from "./theme.ts";
+import { onBackground, type Style, type Theme } from "./theme.ts";
 
 export type PlayStripKey = Readonly<{
   key: string;
   label: string;
   black: boolean;
   lit: boolean;
+  /** Chord mode: the label names the chord this key plays. */
+  chord?: boolean | undefined;
+  /** That chord is built on a degree of the song's key. */
+  diatonic?: boolean | undefined;
 }>;
 
 export type PlayHeaderView = Readonly<{
+  /**
+   * The song header compressed to the left of the row while play mode
+   * covers it: `▶ 120 BPM · drums · rev 1`.
+   */
+  context?: string | undefined;
   /** `C3–F4`. */
   range: string;
   velocity: number;
@@ -51,7 +61,8 @@ export type ChordLegendCell = Readonly<{
 /** Text of the header row, for tests and narrow terminals. */
 export function playHeaderText(view: PlayHeaderView, unicode = true): string {
   const parts = [
-    "PLAY",
+    "PLAY MODE",
+    view.context ?? "",
     view.range,
     view.armed
       ? `${unicode ? "●" : "*"} ${view.recording ? "REC" : "rec armed"}${view.replace ? " replace" : ""}`
@@ -87,8 +98,12 @@ export function paintPlayHeader(
     );
     x += buffer.text(x, y, "  ", panel);
   };
-  put(" PLAY ", roles.pillSteer);
-  put(view.range, { ...roles.text, bold: true });
+  put(" PLAY MODE ", roles.pillSteer);
+  const context = fitContext(view, width, unicode);
+  if (context) put(context, roles.muted);
+  // A kit names its range by the track already in the context.
+  if (!context.includes(" · ") || view.range !== "drums")
+    put(view.range, { ...roles.text, bold: true });
   if (view.armed)
     put(
       `${unicode ? "●" : "*"} ${view.recording ? "REC" : "rec armed"}${view.replace ? " replace" : ""}`,
@@ -99,7 +114,8 @@ export function paintPlayHeader(
   if (view.sustain) put("SUSTAIN", roles.pillQueue);
   if (view.chords) put(view.chords, roles.hit);
   if (view.countIn) put(view.countIn, roles.warning);
-  if (view.beat) {
+  const hintWidth = displayWidth("? keys · esc leave");
+  if (view.beat && x + view.beat.of + 2 <= width - 1 - hintWidth) {
     const cells = Array.from({ length: view.beat.of }, (_, index) =>
       index + 1 === view.beat!.index
         ? unicode
@@ -136,6 +152,31 @@ export function paintPlayHeader(
   if (right > x) buffer.text(right, y, hint, onBackground(roles.faint, panel));
 }
 
+/**
+ * The compressed song header (`▶ 120 BPM · bass · rev 1`). It is reserved
+ * first: the beat dots and the status give way before it does, and only a
+ * terminal too narrow for it with the badge and the way out shortens it to
+ * its first clause.
+ */
+function fitContext(
+  view: PlayHeaderView,
+  width: number,
+  unicode: boolean,
+): string {
+  if (!view.context) return "";
+  const rest = displayWidth(
+    playHeaderText(
+      { ...view, context: undefined, status: undefined, beat: undefined },
+      unicode,
+    ),
+  );
+  // Badge padding, the right-hand hint and the gaps between parts.
+  const room = width - 2 - displayWidth("? keys · esc leave") - 4 - rest;
+  for (const candidate of [view.context, view.context.split(" · ")[0]!])
+    if (displayWidth(candidate) + 2 <= room) return candidate;
+  return "";
+}
+
 /** Chord mode's number row: `1 dim  2 min … 9 block  b bass off  n next`. */
 export function paintChordLegend(
   buffer: CellBuffer,
@@ -162,7 +203,11 @@ export function paintChordLegend(
   }
 }
 
-/** `a C3 │ w C#3 …`: each key with its note; lit keys reversed. */
+/**
+ * `A C3  W C#3 …`: each key with what it plays. The key letter is muted so
+ * the music reads first; a chord label is bold, and chords in the song's
+ * key are lit (they always fit). Sounding keys are reversed.
+ */
 export function paintPlayStrip(
   buffer: CellBuffer,
   y: number,
@@ -174,15 +219,24 @@ export function paintPlayStrip(
   buffer.fill(0, y, width, 1, roles.canvas);
   let x = 1;
   for (const key of keys) {
-    const cell = `${key.key.toUpperCase()} ${key.label}`;
-    const cellWidth = displayWidth(cell) + 1;
+    const letter = key.key.toUpperCase();
+    const cellWidth = displayWidth(letter) + 1 + displayWidth(key.label) + 1;
     if (x + cellWidth > width - 1) break;
-    const style = key.lit
+    const labelStyle: Style = key.lit
       ? { ...(key.black ? roles.selected : roles.hit), reverse: true }
+      : key.chord
+        ? { ...(key.diatonic ? roles.hit : roles.text), bold: true }
+        : key.black
+          ? roles.muted
+          : roles.text;
+    const letterStyle: Style = key.lit
+      ? labelStyle
       : key.black
-        ? roles.muted
-        : roles.text;
-    buffer.text(x, y, cell, style);
-    x += cellWidth;
+        ? roles.faint
+        : roles.muted;
+    x += buffer.text(x, y, letter, letterStyle);
+    x += buffer.text(x, y, " ", key.lit ? labelStyle : roles.canvas);
+    x += buffer.text(x, y, key.label, labelStyle);
+    x += 1;
   }
 }

package/tui/prompt.ts

@@ -316,7 +316,7 @@ export function applyPromptKey(
   }
   switch (keyInput.toUpperCase()) {
     case "ENTER":
-      // The mode pill decides what Enter does: STEER runs now, QUEUE waits.
+      // The mode pill decides what Enter does: NOW runs now, NEXT waits.
       return submit(state, state.mode === "queue" ? "queue" : "submit");
     case "ALT+ENTER":
       return submit(state, "queue");

package/tui/screen.ts

@@ -8,7 +8,12 @@
  */
 
 import { graphemes, graphemeWidth } from "./text.ts";
-import { styleSgr, type Style, type TerminalCapabilities } from "./theme.ts";
+import {
+  foregroundSgr,
+  styleSgr,
+  type Style,
+  type TerminalCapabilities,
+} from "./theme.ts";
 
 export interface Cell {
   /** Grapheme text; "" marks the trailing half of a wide character. */
@@ -17,6 +22,8 @@ export interface Cell {
 }
 
 const EMPTY: Style = {};
+/** Unchanged cells that split a row into two writes (a CUP is ~8 bytes). */
+const SPAN_GAP = 6;
 
 export class CellBuffer {
   readonly width: number;
@@ -107,6 +114,77 @@ export class CellBuffer {
     return rows;
   }
 
+  /**
+   * The columns `[from, to)` of row `y` that differ from `other`, widened so
+   * neither edge splits a wide character, or undefined when the row matches.
+   */
+  rowSpan(
+    other: CellBuffer,
+    y: number,
+  ): Readonly<{ from: number; to: number }> | undefined {
+    if (other.width !== this.width) return { from: 0, to: this.width };
+    const offset = y * this.width;
+    const differs = (x: number) => {
+      const left = this.cells[offset + x]!;
+      const right = other.cells[offset + x]!;
+      if (left.ch !== right.ch) return true;
+      // Two blanks look the same whatever their foreground.
+      if (isBlank(left) && isBlank(right)) return false;
+      return !sameStyle(left.style, right.style);
+    };
+    let from = 0;
+    while (from < this.width && !differs(from)) from += 1;
+    if (from === this.width) return undefined;
+    let to = this.width;
+    while (to > from && !differs(to - 1)) to -= 1;
+    // A continuation cell ("") belongs to the wide character on its left.
+    while (from > 0 && this.cells[offset + from]!.ch === "") from -= 1;
+    while (to < this.width && this.cells[offset + to]!.ch === "") to += 1;
+    return { from, to };
+  }
+
+  /**
+   * The changed runs of row `y`, split wherever at least `gap` unchanged
+   * cells separate them (a cursor move is cheaper than repainting those),
+   * each widened so no edge splits a wide character.
+   */
+  rowSpans(
+    other: CellBuffer,
+    y: number,
+    gap = SPAN_GAP,
+  ): Array<{ from: number; to: number }> {
+    const whole = this.rowSpan(other, y);
+    if (!whole) return [];
+    if (other.width !== this.width) return [whole];
+    const offset = y * this.width;
+    const spans: Array<{ from: number; to: number }> = [];
+    let start = -1;
+    let lastDiff = -1;
+    for (let x = whole.from; x < whole.to; x += 1) {
+      const left = this.cells[offset + x]!;
+      const right = other.cells[offset + x]!;
+      const changed =
+        left.ch !== right.ch ||
+        (!(isBlank(left) && isBlank(right)) &&
+          !sameStyle(left.style, right.style));
+      if (!changed) continue;
+      if (start < 0) start = x;
+      else if (x - lastDiff - 1 >= gap) {
+        spans.push({ from: start, to: lastDiff + 1 });
+        start = x;
+      }
+      lastDiff = x;
+    }
+    if (start >= 0) spans.push({ from: start, to: lastDiff + 1 });
+    for (const span of spans) {
+      while (span.from > 0 && this.cells[offset + span.from]!.ch === "")
+        span.from -= 1;
+      while (span.to < this.width && this.cells[offset + span.to]!.ch === "")
+        span.to += 1;
+    }
+    return spans;
+  }
+
   rowEquals(other: CellBuffer, y: number): boolean {
     if (other.width !== this.width) return false;
     const offset = y * this.width;
@@ -155,22 +233,65 @@ function sameColor(left: Style["fg"], right: Style["fg"]): boolean {
   return left.r === right.r && left.g === right.g && left.b === right.b;
 }
 
-/** Serialise one row with minimal SGR changes. */
+/** True when only the foreground could differ and none of it shows. */
+function invisibleStyle(style: Style | undefined): boolean {
+  return !style || (!style.bg && !style.reverse && !style.underline);
+}
+
+/** A space whose style draws nothing: its foreground never shows. */
+export function isBlank(cell: Cell): boolean {
+  return cell.ch === " " && invisibleStyle(cell.style);
+}
+
+/**
+ * Serialise one row with minimal SGR changes: a blank keeps the current
+ * colour instead of resetting, and a colour-only change writes just the
+ * foreground code. Playback rows are mostly dim rules between spaces, so
+ * this halves the bytes a frame costs.
+ */
 export function encodeRow(
   buffer: CellBuffer,
   y: number,
   capabilities: TerminalCapabilities,
+  from = 0,
+  to = buffer.width,
+): string {
+  return encodeSpans(buffer, y, capabilities, [{ from, to }], false);
+}
+
+/**
+ * Serialise several runs of one row; each run after the first (or every
+ * run, with `address`) starts with a cursor move. The colour state carries
+ * across runs, since a cursor move leaves it alone.
+ */
+export function encodeSpans(
+  buffer: CellBuffer,
+  y: number,
+  capabilities: TerminalCapabilities,
+  spans: ReadonlyArray<{ from: number; to: number }>,
+  address = true,
 ): string {
   let out = "";
   let current: Style | undefined | null = null;
-  for (let x = 0; x < buffer.width; x += 1) {
-    const cell = buffer.get(x, y)!;
-    if (cell.ch === "") continue;
-    if (current === null || !sameStyle(current, cell.style)) {
-      out += styleSgr(cell.style ?? EMPTY, capabilities);
-      current = cell.style;
+  for (const [index, span] of spans.entries()) {
+    if (address || index > 0) out += `\u001b[${y + 1};${span.from + 1}H`;
+    for (let x = span.from; x < span.to; x += 1) {
+      const cell = buffer.get(x, y)!;
+      if (cell.ch === "") continue;
+      if (current !== null && isBlank(cell) && invisibleStyle(current)) {
+        out += " ";
+        continue;
+      }
+      if (current === null || !sameStyle(current, cell.style)) {
+        const next = cell.style ?? EMPTY;
+        out +=
+          (current !== null &&
+            foregroundSgr(current ?? EMPTY, next, capabilities)) ||
+          styleSgr(next, capabilities);
+        current = cell.style;
+      }
+      out += cell.ch;
     }
-    out += cell.ch;
   }
   if (capabilities.attributes !== false) out += "\u001b[0m";
   return out;
@@ -193,9 +314,10 @@ export interface CursorPosition {
 }
 
 /**
- * Differential writer: emits cursor-addressed rewrites for changed rows only.
- * Output is wrapped in synchronized-update markers, which capable terminals
- * use to avoid tearing and others ignore.
+ * Differential writer: emits one cursor-addressed rewrite per changed row,
+ * covering only that row's changed run of cells. Each frame is one string
+ * wrapped in synchronized-update markers, which capable terminals use to
+ * avoid tearing and others ignore.
  */
 export class ScreenWriter {
   private previous: CellBuffer | undefined;
@@ -227,8 +349,16 @@ export class ScreenWriter {
     let rows = 0;
     if (full) body += "\u001b[0m\u001b[2J";
     for (let y = 0; y < buffer.height; y += 1) {
-      if (!full && this.previous!.rowEquals(buffer, y)) continue;
-      body += `\u001b[${y + 1};1H${encodeRow(buffer, y, this.capabilities)}`;
+      if (full) {
+        body += `\u001b[${y + 1};1H${encodeRow(buffer, y, this.capabilities)}`;
+        rows += 1;
+        continue;
+      }
+      // Only the changed run of cells: a moving playhead or a ticking meter
+      // rewrites a few columns, not the whole row.
+      const spans = buffer.rowSpans(this.previous!, y);
+      if (spans.length === 0) continue;
+      body += encodeSpans(buffer, y, this.capabilities, spans);
       rows += 1;
     }
     const cursorKey = cursor ? `${cursor.x},${cursor.y}` : "hidden";

package/tui/theme.ts

@@ -425,6 +425,33 @@ export function styleSgr(
   return sequence;
 }
 
+/**
+ * The shortest SGR that moves the terminal from `from` to `to` when they
+ * differ only in foreground colour: `38;…` or `39`, never a full reset.
+ * Undefined when anything else differs (the caller emits `styleSgr`).
+ */
+export function foregroundSgr(
+  from: Style,
+  to: Style,
+  capabilities: TerminalCapabilities,
+): string | undefined {
+  if (capabilities.attributes === false) return "";
+  if (
+    !!from.bold !== !!to.bold ||
+    !!from.dim !== !!to.dim ||
+    !!from.italic !== !!to.italic ||
+    !!from.underline !== !!to.underline ||
+    !!from.reverse !== !!to.reverse
+  )
+    return undefined;
+  const fromBg = from.bg && colorCode(from.bg, capabilities.colorDepth, true);
+  const toBg = to.bg && colorCode(to.bg, capabilities.colorDepth, true);
+  if (fromBg !== toBg) return undefined;
+  if (!to.fg) return "\u001b[39m";
+  const code = colorCode(to.fg, capabilities.colorDepth, false);
+  return code ? `\u001b[${code}m` : "\u001b[39m";
+}
+
 /** Resolve the effective theme: no-color terminals always use attributes only. */
 export function effectiveTheme(
   name: ThemeName,