vkusvill 0.0.0-dev.0

package/src/term/screen.js

@@ -0,0 +1,204 @@
+// Cell-based screen: drawing goes into a buffer, and flush sends only the changed cells to the terminal.
+// Colors are 0xRRGGBB or -1 (terminal default). Terminals without truecolor get the nearest 256-palette color.
+
+import { charWidth } from "./width.js";
+
+export const A = { bold: 1, dim: 2, italic: 4, underline: 8, strike: 16 };
+
+const ESC = "\x1b[";
+
+function detectTruecolor() {
+  const env = process.env;
+  if (env.VV_COLOR === "256") return false;
+  if (env.VV_COLOR === "truecolor") return true;
+  if (/truecolor|24bit/i.test(env.COLORTERM ?? "")) return true;
+  if (/-direct|truecolor/.test(env.TERM ?? "")) return true;
+  if (env.TERM_PROGRAM === "Apple_Terminal") return false;
+  return ["iTerm.app", "WezTerm", "vscode", "ghostty", "Hyper", "Tabby", "rio"].includes(env.TERM_PROGRAM) || !!env.KITTY_WINDOW_ID || !!env.WT_SESSION;
+}
+
+// Nearest xterm-256 palette color: the 6×6×6 cube or the grayscale ramp
+const CUBE = [0, 95, 135, 175, 215, 255];
+function to256(c) {
+  const r = (c >> 16) & 255, g = (c >> 8) & 255, b = c & 255;
+  const idx = (v) => (v < 48 ? 0 : v < 115 ? 1 : Math.floor((v - 35) / 40));
+  const ri = idx(r), gi = idx(g), bi = idx(b);
+  const cr = CUBE[ri], cg = CUBE[gi], cb = CUBE[bi];
+  const dCube = (cr - r) ** 2 + (cg - g) ** 2 + (cb - b) ** 2;
+  const avg = (r + g + b) / 3;
+  const gi2 = Math.max(0, Math.min(23, Math.round((avg - 8) / 10)));
+  const gv = 8 + gi2 * 10;
+  const dGray = (gv - r) ** 2 + (gv - g) ** 2 + (gv - b) ** 2;
+  return dGray < dCube ? 232 + gi2 : 16 + 36 * ri + 6 * gi + bi;
+}
+
+export class Screen {
+  constructor(out = process.stdout) {
+    this.out = out;
+    this.truecolor = detectTruecolor();
+    this.w = 0;
+    this.h = 0;
+    this.clipStack = [];
+    this.resize(out.columns || 100, out.rows || 30);
+  }
+
+  resize(w, h) {
+    this.w = w;
+    this.h = h;
+    const n = w * h;
+    this.ch = new Array(n).fill(" ");
+    this.fg = new Int32Array(n).fill(-1);
+    this.bg = new Int32Array(n).fill(-1);
+    this.at = new Uint8Array(n);
+    this.pch = new Array(n).fill(null); // null: the terminal cell's state is unknown, redraw it
+    this.pfg = new Int32Array(n);
+    this.pbg = new Int32Array(n);
+    this.pat = new Uint8Array(n);
+    this.clip = { x0: 0, y0: 0, x1: w, y1: h };
+  }
+
+  invalidateAll() {
+    this.pch.fill(null);
+  }
+
+  pushClip(x, y, w, h) {
+    this.clipStack.push(this.clip);
+    const c = this.clip;
+    this.clip = { x0: Math.max(c.x0, x), y0: Math.max(c.y0, y), x1: Math.min(c.x1, x + w), y1: Math.min(c.y1, y + h) };
+  }
+
+  popClip() {
+    this.clip = this.clipStack.pop() ?? { x0: 0, y0: 0, x1: this.w, y1: this.h };
+  }
+
+  clear(bg = -1) {
+    this.ch.fill(" ");
+    this.fg.fill(-1);
+    this.bg.fill(bg);
+    this.at.fill(0);
+  }
+
+  // A single cell; s is the character, null is the continuation of a wide character to the left
+  cell(x, y, s, fg, bg, at) {
+    const c = this.clip;
+    if (x < c.x0 || y < c.y0 || x >= c.x1 || y >= c.y1) return;
+    const i = y * this.w + x;
+    // Overwriting half of a wide character: the other half becomes a space
+    if (this.ch[i] === null && x > 0 && s !== null) this.ch[i - 1] = " ";
+    if (s !== null && x + 1 < this.w && this.ch[i + 1] === null) this.ch[i + 1] = " ";
+    this.ch[i] = s;
+    if (fg !== undefined && fg !== null) this.fg[i] = fg;
+    if (bg !== undefined && bg !== null) this.bg[i] = bg;
+    this.at[i] = at ?? 0;
+  }
+
+  // Styled text; returns x after the text. Without bg, the cell's background is kept
+  put(x, y, str, st = {}) {
+    const at = (st.bold ? A.bold : 0) | (st.dim ? A.dim : 0) | (st.italic ? A.italic : 0) | (st.underline ? A.underline : 0) | (st.strike ? A.strike : 0);
+    const maxX = st.maxW !== undefined ? x + st.maxW : Infinity;
+    for (const ch of String(str)) {
+      const cp = ch.codePointAt(0);
+      const cw = charWidth(cp);
+      if (cw === 0) continue;
+      if (x + cw > maxX) break;
+      if (cw === 2 && x + 1 >= this.clip.x1) { this.cell(x, y, " ", st.fg, st.bg, at); x++; break; }
+      this.cell(x, y, ch, st.fg, st.bg, at);
+      if (cw === 2) this.cell(x + 1, y, null, st.fg, st.bg, at);
+      x += cw;
+    }
+    return x;
+  }
+
+  fill(x, y, w, h, bg, ch = " ", fg) {
+    for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) this.cell(i, j, ch, fg ?? -1, bg, 0);
+  }
+
+  // Background only; characters and their colors stay
+  tint(x, y, w, h, bg) {
+    const c = this.clip;
+    for (let j = Math.max(y, c.y0); j < Math.min(y + h, c.y1); j++)
+      for (let i = Math.max(x, c.x0); i < Math.min(x + w, c.x1); i++) this.bg[j * this.w + i] = bg;
+  }
+
+  color(c, isBg) {
+    if (c < 0) return isBg ? "49" : "39";
+    if (this.truecolor) return `${isBg ? 48 : 38};2;${(c >> 16) & 255};${(c >> 8) & 255};${c & 255}`;
+    return `${isBg ? 48 : 38};5;${to256(c)}`;
+  }
+
+  flush() {
+    let out = "";
+    let cx = -1, cy = -1, cfg = -2, cbg = -2, cat = -1;
+    const w = this.w;
+    for (let y = 0; y < this.h; y++) {
+      for (let x = 0; x < w; x++) {
+        const i = y * w + x;
+        const ch = this.ch[i];
+        if (ch === null) continue;
+        if (this.pch[i] === ch && this.pfg[i] === this.fg[i] && this.pbg[i] === this.bg[i] && this.pat[i] === this.at[i]) {
+          // a wide character with only its second half changed can't occur: the continuation is written together with it
+          continue;
+        }
+        if (cx !== x || cy !== y) out += `${ESC}${y + 1};${x + 1}H`;
+        const fg = this.fg[i], bg = this.bg[i], at = this.at[i];
+        if (fg !== cfg || bg !== cbg || at !== cat) {
+          let sgr = "0";
+          if (at & A.bold) sgr += ";1";
+          if (at & A.dim) sgr += ";2";
+          if (at & A.italic) sgr += ";3";
+          if (at & A.underline) sgr += ";4";
+          if (at & A.strike) sgr += ";9";
+          sgr += ";" + this.color(fg, false) + ";" + this.color(bg, true);
+          out += `${ESC}${sgr}m`;
+          cfg = fg; cbg = bg; cat = at;
+        }
+        out += ch;
+        const wide = x + 1 < w && this.ch[i + 1] === null;
+        this.pch[i] = ch; this.pfg[i] = fg; this.pbg[i] = bg; this.pat[i] = at;
+        if (wide) { this.pch[i + 1] = null; this.pfg[i + 1] = fg; this.pbg[i + 1] = bg; this.pat[i + 1] = at; }
+        cx = x + (wide ? 2 : 1);
+        cy = y;
+      }
+    }
+    if (out) this.out.write(`\x1b[?2026h${out}${ESC}0m\x1b[?2026l`);
+  }
+
+  enter() {
+    this.out.write("\x1b[?1049h\x1b[?25l\x1b[?1000h\x1b[?1002h\x1b[?1006h\x1b[?2004h\x1b[2J");
+  }
+
+  leave() {
+    this.out.write("\x1b[0m\x1b[?2004l\x1b[?1006l\x1b[?1002l\x1b[?1000l\x1b[?25h\x1b[?1049l");
+  }
+
+  // Buffer snapshot, for tests without a terminal
+  snapshot() {
+    const rows = [];
+    for (let y = 0; y < this.h; y++) {
+      let s = "";
+      for (let x = 0; x < this.w; x++) { const c = this.ch[y * this.w + x]; if (c !== null) s += c; }
+      rows.push(s);
+    }
+    return rows.join("\n");
+  }
+
+  // Snapshot as HTML, with colors
+  toHTML() {
+    const hex = (c, d) => (c < 0 ? d : "#" + c.toString(16).padStart(6, "0"));
+    let html = "";
+    for (let y = 0; y < this.h; y++) {
+      for (let x = 0; x < this.w; x++) {
+        const i = y * this.w + x;
+        const c = this.ch[i];
+        if (c === null) continue;
+        const wide = x + 1 < this.w && this.ch[i + 1] === null;
+        const at = this.at[i];
+        const style = `color:${hex(this.fg[i], "#ddd")};background:${hex(this.bg[i], "#111")}${at & A.bold ? ";font-weight:700" : ""}${at & A.dim ? ";opacity:.6" : ""}${at & A.italic ? ";font-style:italic" : ""}${at & A.underline ? ";text-decoration:underline" : ""}${at & A.strike ? ";text-decoration:line-through" : ""}${wide ? ";display:inline-block;width:2ch" : ""}`;
+        const e = c === "<" ? "&lt;" : c === "&" ? "&amp;" : c === ">" ? "&gt;" : c;
+        html += `<span style="${style}">${e}</span>`;
+      }
+      html += "\n";
+    }
+    return `<!doctype html><meta charset="utf-8"><title>vv snapshot</title><style>body{background:#111;margin:0;padding:12px}pre{font:14px/1.0 "SF Mono",Menlo,monospace;margin:0;letter-spacing:0}span{display:inline-block;width:1ch;height:1.15em;vertical-align:top}</style><pre>${html}</pre>`;
+  }
+}

package/src/term/width.js

@@ -0,0 +1,74 @@
+// Terminal cell width of a character: 0 for combining marks, 2 for CJK and emoji, 1 otherwise.
+
+const WIDE = [
+  [0x1100, 0x115f], [0x2e80, 0x303e], [0x3041, 0x33ff], [0x3400, 0x4dbf], [0x4e00, 0x9fff],
+  [0xa000, 0xa4cf], [0xac00, 0xd7a3], [0xf900, 0xfaff], [0xfe30, 0xfe4f], [0xff00, 0xff60],
+  [0xffe0, 0xffe6], [0x1f300, 0x1f64f], [0x1f680, 0x1f6ff], [0x1f900, 0x1f9ff], [0x1fa70, 0x1faff],
+  [0x20000, 0x3fffd],
+];
+
+export function charWidth(cp) {
+  // C0 controls, DEL and C1 (\x9b is CSI) are never printed
+  if (cp < 0x300) return cp < 32 || (cp >= 0x7f && cp < 0xa0) ? 0 : 1;
+  if ((cp >= 0x300 && cp <= 0x36f) || (cp >= 0x200b && cp <= 0x200f) || (cp >= 0x202a && cp <= 0x202e) || (cp >= 0x2066 && cp <= 0x2069) || cp === 0xfeff || cp === 0xfe0f || cp === 0xfe0e) return 0;
+  for (const [a, b] of WIDE) if (cp >= a && cp <= b) return 2;
+  return 1;
+}
+
+export function strWidth(s) {
+  let w = 0;
+  for (const ch of s) w += charWidth(ch.codePointAt(0));
+  return w;
+}
+
+// Truncates a string to width w, ending it with "…" if it doesn't fit
+export function truncate(s, w) {
+  if (w <= 0) return "";
+  if (strWidth(s) <= w) return s;
+  let out = "", cur = 0;
+  for (const ch of s) {
+    const cw = charWidth(ch.codePointAt(0));
+    if (cur + cw > w - 1) break;
+    out += ch;
+    cur += cw;
+  }
+  return out + "…";
+}
+
+export function padEnd(s, w) {
+  const t = truncate(s, w);
+  return t + " ".repeat(Math.max(0, w - strWidth(t)));
+}
+
+export function padStart(s, w) {
+  const t = truncate(s, w);
+  return " ".repeat(Math.max(0, w - strWidth(t))) + t;
+}
+
+// Word wrap; overlong words are split
+export function wrap(text, w) {
+  w = Math.max(1, Math.floor(w));
+  const lines = [];
+  for (const para of String(text).split("\n")) {
+    const start = lines.length;
+    let line = "";
+    for (const word of para.split(/\s+/).filter(Boolean)) {
+      let wd = word;
+      while (strWidth(wd) > w) {
+        if (line) { lines.push(line); line = ""; }
+        let cut = "";
+        for (const ch of wd) { if (strWidth(cut + ch) > w) break; cut += ch; }
+        if (!cut) cut = [...wd][0]; // a glyph wider than the line still has to go somewhere
+        lines.push(cut);
+        wd = wd.slice(cut.length);
+      }
+      if (!wd) continue;
+      if (!line) line = wd;
+      else if (strWidth(line) + 1 + strWidth(wd) <= w) line += " " + wd;
+      else { lines.push(line); line = wd; }
+    }
+    // An empty paragraph stays a blank line; a paragraph that ended on a split word adds nothing more
+    if (line || lines.length === start) lines.push(line);
+  }
+  return lines;
+}

package/src/ui/draw.js

@@ -0,0 +1,324 @@
+// Drawing on top of Screen: boxes, wrapped text, bars, stars, pills, pixel fonts,
+// half-block photos, a braille canvas and QR codes.
+
+import qrcode from "qrcode-generator";
+import { T, mix, ramp } from "./theme.js";
+import { strWidth, truncate, wrap } from "../term/width.js";
+
+const BOX = {
+  round: ["╭", "╮", "╰", "╯", "─", "│"],
+  sharp: ["┌", "┐", "└", "┘", "─", "│"],
+  heavy: ["┏", "┓", "┗", "┛", "━", "┃"],
+  double: ["╔", "╗", "╚", "╝", "═", "║"],
+};
+
+const EIGHTHS = ["", "▏", "▎", "▍", "▌", "▋", "▊", "▉"];
+export const SPIN = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+// 3–5×5 pixel font for big prices
+const DIGITS = {
+  "0": ["###", "#.#", "#.#", "#.#", "###"], "1": [".#.", "##.", ".#.", ".#.", "###"],
+  "2": ["###", "..#", "###", "#..", "###"], "3": ["###", "..#", ".##", "..#", "###"],
+  "4": ["#.#", "#.#", "###", "..#", "..#"], "5": ["###", "#..", "###", "..#", "###"],
+  "6": ["###", "#..", "###", "#.#", "###"], "7": ["###", "..#", "..#", ".#.", ".#."],
+  "8": ["###", "#.#", "###", "#.#", "###"], "9": ["###", "#.#", "###", "..#", "###"],
+  "₽": [".###.", ".#..#", "####.", ".#...", ".#..."], " ": ["..", "..", "..", "..", ".."],
+  ",": [".", ".", ".", ".", "#"], ".": [".", ".", ".", ".", "#"], "−": ["...", "...", "###", "...", "..."],
+  "%": ["#..#", "...#", "..#.", ".#..", "#..#"], "×": ["...", "#.#", ".#.", "#.#", "..."],
+};
+
+// Big digits in the style of the postal code on a Russian envelope: a 5×5 grid of two squares with diagonals.
+// t m b are horizontals; lu ld ru rd are vertical halves; du, dd are the diagonals of the upper and lower square
+const POSTAL = {
+  "0": "t b lu ld ru rd", "1": "du ru rd", "2": "t ru dd b", "3": "t du m rd b", "4": "lu m ru rd",
+  "5": "t lu m rd b", "6": "du ld m rd b", "7": "t du ld", "8": "t m b lu ld ru rd", "9": "t lu ru m dd",
+};
+const POSTAL_RUB = [".####", ".#..#", "####.", ".#...", ".#..."];
+
+function postalGlyph(c, W = 5, H = 5) {
+  if (c === "₽") return POSTAL_RUB.map((r) => [...r].map((ch) => ch === "#"));
+  const g = Array.from({ length: H }, () => Array(W).fill(false));
+  const M = (H - 1) / 2;
+  const P = { TL: [0, 0], TR: [W - 1, 0], ML: [0, M], MR: [W - 1, M], BL: [0, H - 1], BR: [W - 1, H - 1] };
+  const SEG = { t: ["TL", "TR"], m: ["ML", "MR"], b: ["BL", "BR"], lu: ["TL", "ML"], ld: ["ML", "BL"], ru: ["TR", "MR"], rd: ["MR", "BR"], du: ["TR", "ML"], dd: ["MR", "BL"] };
+  for (const seg of POSTAL[c].split(" ")) {
+    const [[x0, y0], [x1, y1]] = SEG[seg].map((k) => P[k]);
+    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));
+    for (let i = 0; i <= n; i++) g[Math.round(y0 + ((y1 - y0) * i) / n)][Math.round(x0 + ((x1 - x0) * i) / n)] = true;
+  }
+  return g;
+}
+const POSTAL_CACHE = new Map();
+
+// 5×7 pixel font for the logo
+const LOGO = {
+  "В": ["####.", "#...#", "#...#", "####.", "#...#", "#...#", "####."],
+  "К": ["#...#", "#..#.", "#.#..", "##...", "#.#..", "#..#.", "#...#"],
+  "У": ["#...#", "#...#", "#...#", ".####", "....#", "#...#", ".###."],
+  "С": [".###.", "#...#", "#....", "#....", "#....", "#...#", ".###."],
+  "И": ["#...#", "#...#", "#..##", "#.#.#", "##..#", "#...#", "#...#"],
+  "Л": ["..###", ".#..#", ".#..#", ".#..#", ".#..#", ".#..#", "##..#"],
+  "Д": ["..##.", ".#.#.", ".#.#.", ".#.#.", "#..#.", "#####", "#...#"],
+  "Е": ["#####", "#....", "#....", "####.", "#....", "#....", "#####"],
+  " ": ["...", "...", "...", "...", "...", "...", "..."],
+};
+
+export const LOGO_GLYPH = (c) => LOGO[c] ?? LOGO[" "];
+
+// VkusVill leaf, 10×7
+export const LEAF = [
+  ".......###",
+  ".....#####",
+  "...###.###",
+  "..###.####",
+  ".###.####.",
+  ".#.#####..",
+  "#.........",
+];
+
+export class G {
+  constructor(screen, app) {
+    this.s = screen;
+    this.app = app;
+  }
+
+  get w() { return this.s.w; }
+  get h() { return this.s.h; }
+
+  bgAt(x, y) {
+    if (x < 0 || y < 0 || x >= this.s.w || y >= this.s.h) return T.bg;
+    return this.s.bg[y * this.s.w + x];
+  }
+
+  text(x, y, str, st = {}) { return this.s.put(x, y, str, st); }
+
+  // Text truncated to width, ending with "…"
+  textW(x, y, str, w, st = {}) { return this.s.put(x, y, truncate(String(str), w), st); }
+
+  textR(xr, y, str, st = {}) { const w = strWidth(str); this.s.put(xr - w, y, str, st); return xr - w; }
+
+  textC(x, w, y, str, st = {}) { const t = truncate(str, w); this.s.put(x + Math.floor((w - strWidth(t)) / 2), y, t, st); }
+
+  fill(x, y, w, h, bg) { this.s.fill(x, y, w, h, bg); }
+  tint(x, y, w, h, bg) { this.s.tint(x, y, w, h, bg); }
+
+  // Differently styled runs in a row: [[text, style], …]
+  spans(x, y, parts, maxW = Infinity) {
+    const end = x + maxW;
+    for (const [t, st] of parts) {
+      if (x >= end) break;
+      x = this.s.put(x, y, truncate(String(t), end - x), st ?? {});
+    }
+    return x;
+  }
+
+  para(x, y, w, h, str, st = {}) {
+    const lines = wrap(str, w);
+    lines.slice(0, h).forEach((l, i) => this.s.put(x, y + i, i === h - 1 && lines.length > h ? truncate(l + " …", w) : l, st));
+    return Math.min(lines.length, h);
+  }
+
+  hline(x, y, w, fg = T.line, ch = "─") { this.s.put(x, y, ch.repeat(Math.max(0, w)), { fg }); }
+  vline(x, y, h, fg = T.line, ch = "│") { for (let i = 0; i < h; i++) this.s.put(x, y + i, ch, { fg }); }
+
+  box(x, y, w, h, { fg = T.line, bg, style = "round", title, titleFg = T.sub, right, rightFg = T.dim } = {}) {
+    if (w < 2 || h < 2) return;
+    const [tl, tr, bl, br, hz, vt] = BOX[style];
+    if (bg !== undefined) this.s.fill(x, y, w, h, bg);
+    this.s.put(x, y, tl + hz.repeat(w - 2) + tr, { fg });
+    for (let j = 1; j < h - 1; j++) { this.s.put(x, y + j, vt, { fg }); this.s.put(x + w - 1, y + j, vt, { fg }); }
+    this.s.put(x, y + h - 1, bl + hz.repeat(w - 2) + br, { fg });
+    if (title) this.s.put(x + 2, y, truncate(` ${title} `, w - 4), { fg: titleFg, bold: true });
+    if (right) { const r = truncate(` ${right} `, Math.max(0, w - 8 - (title ? strWidth(title) : 0))); this.s.put(x + w - 2 - strWidth(r), y, r, { fg: rightFg }); }
+  }
+
+  // Horizontal bar with 1/8-cell precision
+  // Full cells are background fill, solid at any line spacing; only the fractional tip is a ▏…▉ glyph
+  bar(x, y, w, frac, fg, bg = T.raise) {
+    frac = Math.max(0, Math.min(1, frac || 0));
+    const total = frac * w;
+    let full = Math.floor(total);
+    let rem = Math.round((total - full) * 8);
+    if (rem === 8) { full++; rem = 0; }
+    this.s.put(x, y, " ".repeat(w), { bg });
+    if (full) this.s.put(x, y, " ".repeat(full), { bg: fg });
+    if (rem && full < w) this.s.put(x + full, y, EIGHTHS[rem], { fg, bg });
+  }
+
+  // Gradient bar, same construction
+  gradBar(x, y, w, frac, stops, bg = T.raise) {
+    const total = Math.max(0, Math.min(1, frac)) * w;
+    for (let i = 0; i < w; i++) {
+      const c = ramp(stops, w > 1 ? i / (w - 1) : 0);
+      const rem = Math.round((total - i) * 8);
+      if (i + 1 <= total || rem >= 8) this.s.put(x + i, y, " ", { bg: c });
+      else if (i < total && rem > 0) this.s.put(x + i, y, EIGHTHS[rem], { fg: c, bg });
+      else this.s.put(x + i, y, " ", { bg });
+    }
+  }
+
+  stars(x, y, rating, { bg } = {}) {
+    return this.s.put(x, y, "★", { fg: rating ? T.yellow : T.mute, bg });
+  }
+
+  starsRow(x, y, rating, { bg } = {}) {
+    let out = x;
+    for (let i = 1; i <= 5; i++) {
+      const on = rating >= i - 0.25;
+      const half = !on && rating >= i - 0.75;
+      out = this.s.put(out, y, on || half ? "★" : "☆", { fg: on ? T.yellow : half ? mix(T.yellow, T.mute, 0.55) : T.mute, bg });
+    }
+    return out;
+  }
+
+  // Pill: a label on a fill, padded with spaces. Half-block rounded ends ▐▌ don't work:
+  // in some fonts they are wider than a cell and eat the last letter
+  pill(x, y, label, { fg = T.text, bg = T.raise, bold = false } = {}) {
+    return this.s.put(x, y, ` ${label} `, { fg, bg, bold });
+  }
+
+  pillWidth(label) { return strWidth(label) + 2; }
+
+  // A key in the hint bar
+  key(x, y, k, label, { active = false } = {}) {
+    x = this.s.put(x, y, ` ${k} `, { fg: active ? T.bg : T.lime, bg: active ? T.lime : T.raise, bold: true });
+    return this.s.put(x, y, ` ${label} `, { fg: T.sub });
+  }
+
+  // Bitmap drawn with half blocks: px(x, y) → color or -1 (transparent)
+  bitmap(x, y, pw, ph, px) {
+    for (let cy = 0; cy < Math.ceil(ph / 2); cy++) {
+      for (let cx = 0; cx < pw; cx++) {
+        const top = px(cx, cy * 2);
+        const bot = cy * 2 + 1 < ph ? px(cx, cy * 2 + 1) : -1;
+        if (top < 0 && bot < 0) continue;
+        const under = this.bgAt(x + cx, y + cy);
+        if (top >= 0 && bot >= 0) this.s.cell(x + cx, y + cy, top === bot ? " " : "▀", top, bot, 0);
+        else if (top >= 0) this.s.cell(x + cx, y + cy, "▀", top, under, 0);
+        else this.s.cell(x + cx, y + cy, "▄", bot, under, 0);
+      }
+    }
+  }
+
+  // Photo from image.js
+  photo(x, y, img) {
+    if (!img || img.error) return;
+    this.bitmap(x, y, img.w, img.h, (px, py) => img.px[py * img.w + px]);
+  }
+
+  // Placeholder while the photo loads: shimmering "dust"
+  photoPlaceholder(x, y, w, h, t = 0, label = "") {
+    for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) {
+      const v = (Math.sin(i * 0.35 + j * 0.6 + t * 0.12) + 1) / 2;
+      this.s.cell(x + i, y + j, "▒░·"[Math.floor(v * 2.99)], mix(T.panel2, T.line, v), T.panel, 0);
+    }
+    if (label && h > 0) this.textC(x, w, y + Math.floor(h / 2), ` ${label} `, { fg: T.dim, bg: T.panel });
+  }
+
+  // A line in a pixel font; color is color(px, py) or a number
+  pixelText(x, y, str, font, color, gap = 1) {
+    const rows = font === "logo" ? 7 : 5;
+    const map = font === "logo" ? LOGO : DIGITS;
+    const glyphs = [...str].map((c) => map[c] ?? map[" "]);
+    const width = glyphs.reduce((s, g) => s + g[0].length + gap, 0) - gap;
+    const col = typeof color === "function" ? color : () => color;
+    const grid = (px, py) => {
+      let ox = 0;
+      for (const g of glyphs) {
+        const gw = g[0].length;
+        if (px < ox + gw) return px >= ox && g[py]?.[px - ox] === "#" ? col(px, py, width) : -1;
+        ox += gw + gap;
+      }
+      return -1;
+    };
+    this.bitmap(x, y, width, rows, grid);
+    return width;
+  }
+
+  pixelWidth(str, font = "digits", gap = 1) {
+    const map = font === "logo" ? LOGO : DIGITS;
+    return [...str].reduce((s, c) => s + (map[c] ?? map[" "])[0].length + gap, 0) - gap;
+  }
+
+  // Big price "1 245 ₽" in postal-code digits, 5 rows. A pixel is a cell filled with background:
+  // the fill also covers the line spacing, so no terminal shows gaps
+  bigPrice(x, y, n, color = T.lime) {
+    const s = `${Math.round(n).toLocaleString("ru-RU").replace(/\s|\u00a0|\u202f/g, " ")} ₽`;
+    let cx = x;
+    for (const c of s) {
+      if (c === " ") { cx += 2; continue; }
+      if (!POSTAL_CACHE.has(c)) POSTAL_CACHE.set(c, postalGlyph(c));
+      const g = POSTAL_CACHE.get(c);
+      g.forEach((row, py) => row.forEach((on, px) => { if (on) this.s.cell(cx + px, y + py, " ", -1, color, 0); }));
+      cx += g[0].length + 1;
+    }
+    return cx - x - 1;
+  }
+
+  static bigPriceH = 5;
+
+  qr(x, y, text) {
+    const q = qrcode(0, "L");
+    q.addData(text);
+    q.make();
+    const n = q.getModuleCount();
+    const quiet = 2;
+    const size = n + quiet * 2;
+    this.bitmap(x, y, size, size + (size % 2), (px, py) => {
+      const r = py - quiet, c = px - quiet;
+      if (r < 0 || c < 0 || r >= n || c >= n) return T.white;
+      return q.isDark(r, c) ? T.black : T.white;
+    });
+    return { w: size, h: Math.ceil(size / 2) };
+  }
+
+  static qrSize(text) {
+    const q = qrcode(0, "L");
+    q.addData(text);
+    q.make();
+    const size = q.getModuleCount() + 4;
+    return { w: size, h: Math.ceil(size / 2) };
+  }
+
+  // Scrollbar to the right of a list
+  scrollbar(x, y, h, top, visible, total) {
+    if (total <= visible || h < 2) return;
+    const th = Math.max(1, Math.round((visible / total) * h));
+    const ty = Math.round((top / Math.max(1, total - visible)) * (h - th));
+    for (let i = 0; i < h; i++) this.s.put(x, y + i, i >= ty && i < ty + th ? "┃" : "│", { fg: i >= ty && i < ty + th ? T.green : T.line });
+  }
+}
+
+// Braille canvas: 2×4 dots per cell
+export class Braille {
+  constructor(w, h) {
+    this.w = w; this.h = h;
+    this.bits = new Uint8Array(w * h);
+    this.col = new Int32Array(w * h).fill(-1);
+    this.pri = new Uint8Array(w * h);
+  }
+  get pw() { return this.w * 2; }
+  get ph() { return this.h * 4; }
+  set(px, py, color, pri = 0) {
+    px = Math.floor(px); py = Math.floor(py);
+    if (px < 0 || py < 0 || px >= this.w * 2 || py >= this.h * 4) return;
+    const cx = px >> 1, cy = py >> 2, i = cy * this.w + cx;
+    const dx = px & 1, dy = py & 3;
+    const bit = dy === 3 ? (dx ? 0x80 : 0x40) : dx ? 0x08 << dy : 0x01 << dy;
+    this.bits[i] |= bit;
+    if (pri >= this.pri[i]) { this.col[i] = color; this.pri[i] = pri; }
+  }
+  line(x0, y0, x1, y1, color, pri) {
+    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0), 1);
+    for (let i = 0; i <= n; i++) this.set(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, color, pri);
+  }
+  draw(g, x, y) {
+    for (let j = 0; j < this.h; j++) this.drawRow(g, x, y + j, j);
+  }
+  drawRow(g, x, y, j) {
+    for (let i = 0; i < this.w; i++) {
+      const b = this.bits[j * this.w + i];
+      if (b) g.s.cell(x + i, y, String.fromCharCode(0x2800 + b), this.col[j * this.w + i], g.bgAt(x + i, y), 0);
+    }
+  }
+}