vkusvill 0.0.0-dev.0

package/src/ui/product-ui.js

@@ -0,0 +1,192 @@
+// Product rendering: list row, side card, composition flags, macro energy split, ingredient highlighting.
+
+import { T, mix } from "./theme.js";
+import { RX, rub, compactNum, qtyText } from "../product.js";
+import { strWidth, truncate } from "../term/width.js";
+import { image } from "../image.js";
+import { richWrap, drawRich } from "./widgets.js";
+import { store } from "../store.js";
+
+export const perKg = (p) => (p.unit === "кг" ? null : p.grams ? Math.round((p.price / p.grams) * 1000) : null);
+
+// Composition flags → pills
+export function flagPills(p) {
+  if (!p.comp) return [];
+  const f = p.flags ?? {};
+  const out = [];
+  out.push(f.sugar ? ["сахар", T.red] : ["без сахара", T.green]);
+  if (f.gluten) out.push(["глютен", T.yellow]);
+  if (f.lactose) out.push(["лактоза", T.yellow]);
+  if (f.additives) out.push([`добавки ×${f.additives}`, T.orange]);
+  if (f.palm) out.push(["пальм. масло", T.red]);
+  if (!f.sugar && !f.additives && !f.palm && !f.gluten && !f.lactose) out.push(["чистый состав", T.lime]);
+  return out;
+}
+
+export function drawPills(g, x, y, w, pills) {
+  let cx = x;
+  let row = 0;
+  for (const [label, color] of pills) {
+    const pw = strWidth(label) + 2;
+    if (cx + pw > x + w) { row++; cx = x; }
+    g.pill(cx, y + row, label, { fg: color, bg: mix(color, T.panel, 0.82) });
+    cx += pw + 1;
+  }
+  return row + 1;
+}
+
+// Share of energy from protein, fat and carbs, as a single bar
+export function energyBar(g, x, y, w, p, bg = T.panel) {
+  const e = [(p.p ?? 0) * 4, (p.f ?? 0) * 9, (p.c ?? 0) * 4];
+  const sum = e[0] + e[1] + e[2];
+  if (!sum) { g.text(x, y, "нет данных о КБЖУ", { fg: T.dim, bg }); return; }
+  const cols = [T.blue, T.yellow, T.orange];
+  // Background fill rather than █: solid at any line spacing
+  for (let i = 0; i < w; i++) {
+    const t = ((i + 0.5) / w) * sum;
+    const k = t > e[0] + e[1] ? 2 : t > e[0] ? 1 : 0;
+    g.text(x + i, y, " ", { bg: cols[k] });
+  }
+}
+
+export function kbjuLine(g, x, y, w, p, bg) {
+  const n = (v) => (v == null ? "—" : String(Math.round(v * 10) / 10).replace(".", ","));
+  return g.spans(x, y, [
+    ["Б ", { fg: T.blue, bold: true, bg }], [n(p.p) + "  ", { fg: T.text, bg }],
+    ["Ж ", { fg: T.yellow, bold: true, bg }], [n(p.f) + "  ", { fg: T.text, bg }],
+    ["У ", { fg: T.orange, bold: true, bg }], [n(p.c) + "  ", { fg: T.text, bg }],
+    [p.kcal != null ? `${Math.round(p.kcal)} ккал` : "", { fg: T.lime, bold: true, bg }],
+  ], w);
+}
+
+// Ingredient highlighting: sugar and palm oil in red, additives in orange, gluten and lactose in yellow
+export function compositionLines(comp, w) {
+  const ranges = [];
+  const scan = (re, color) => {
+    const r = new RegExp(re.source, re.flags.includes("g") ? re.flags : re.flags + "g");
+    let m;
+    while ((m = r.exec(comp))) { ranges.push([m.index, m.index + m[0].length, color]); if (!m[0].length) r.lastIndex++; }
+  };
+  scan(RX.sugar, T.red); scan(RX.additives, T.orange); scan(RX.palm, T.red);
+  scan(RX.gluten, T.yellow); scan(RX.lactose, T.yellow);
+  return richWrap(comp, w, (i, s) => {
+    const hit = ranges.find(([a, b]) => a < i + s.length && b > i);
+    return hit ? { fg: hit[2], bold: true } : null;
+  });
+}
+
+// Product list row
+export function productRow(g, p, x, y, w, { selected, focused = true, mark, bg: rowBg } = {}) {
+  const bg = selected ? (focused ? T.selHi : T.sel) : rowBg ?? T.panel;
+  g.fill(x, y, w, 1, bg);
+  if (selected) g.text(x, y, "▌", { fg: focused ? T.lime : T.green, bg });
+  const q = store.qty(p.id);
+  const fav = store.isFav(p.id);
+  // Columns, right to left
+  let rx = x + w - 1;
+  const cartW = 6;
+  if (q) g.textR(rx, y, p.unit === "кг" ? `${+q.toFixed(1)}кг` : `×${q}`, { fg: T.lime, bg, bold: true });
+  else if (mark) g.textR(rx, y, mark, { fg: T.violet, bg, bold: true });
+  rx -= cartW;
+  g.textR(rx, y, rub(p.price) + (p.unit === "кг" ? "/кг" : ""), { fg: p.old ? T.orange : T.white, bg, bold: true });
+  rx -= 12;
+  if (w > 54) {
+    if (p.off) g.textR(rx, y, `−${p.off}%`, { fg: T.orange, bg, bold: true });
+    rx -= 6;
+  }
+  if (w > 74) {
+    const pk = perKg(p);
+    if (pk) g.textR(rx, y, `${pk.toLocaleString("ru-RU").replace(/\s/g, " ")} ₽/кг`, { fg: T.dim, bg });
+    rx -= 12;
+  }
+  if (w > 64) {
+    if (p.rating) g.spans(rx - 6, y, [["★ ", { fg: T.yellow, bg }], [p.rating.toFixed(1).replace(".", ","), { fg: T.sub, bg }]]);
+    rx -= 7;
+  }
+  let cx = x + 2;
+  if (fav) cx = g.text(cx, y, "♥ ", { fg: T.pink, bg });
+  const nameW = rx - cx;
+  if (nameW > 4) {
+    const t = truncate(p.title, nameW);
+    cx = g.text(cx, y, t, { fg: selected ? T.white : T.text, bg, bold: selected });
+    if (p.pack && strWidth(t) < nameW - 2 && t === p.title) g.textW(cx + 1, y, p.pack, nameW - strWidth(t) - 1, { fg: T.dim, bg });
+  }
+}
+
+// Side product card
+export function productPane(g, app, p, x, y, w, h, { compact = false } = {}) {
+  g.fill(x, y, w, h, T.panel);
+  if (!p) { g.textC(x, w, y + Math.floor(h / 2), "выберите товар", { fg: T.dim, bg: T.panel }); return; }
+  let cy = y;
+  const iw = w - 2;
+  const photoH = compact ? 0 : Math.max(0, Math.min(Math.floor(h * 0.36), Math.round(iw * 0.3)));
+  if (photoH >= 4) {
+    const img = image(p.thumb ?? p.images?.[0], iw, photoH);
+    if (img && !img.error) {
+      const ox = x + 1 + Math.floor((iw - img.w) / 2);
+      g.photo(ox, cy, img);
+      cy += Math.ceil(img.h / 2);
+    } else {
+      g.photoPlaceholder(x + 1, cy, iw, photoH, app.frame, img?.error ? "без фото" : "загружаю фото…");
+      cy += photoH;
+    }
+    cy++;
+  }
+  const end = y + h;
+  const left = () => end - cy;
+  // Title
+  cy += g.para(x + 1, cy, iw, 2, p.title, { fg: T.white, bold: true, bg: T.panel });
+  const meta = [p.pack, p.category?.at(-1)].filter(Boolean).join(" · ");
+  if (meta && left() > 0) g.textW(x + 1, cy++, meta, iw, { fg: T.dim, bg: T.panel });
+  cy++;
+  // Big price
+  if (left() > 7) {
+    const pw = g.bigPrice(x + 1, cy, p.price, p.old ? T.orange : T.lime);
+    let tx = x + 2 + pw + 1;
+    if (p.old && tx + 8 < x + w) {
+      g.text(tx, cy + 1, rub(p.old), { fg: T.dim, strike: true, bg: T.panel });
+      g.pill(tx, cy + 3, `−${p.off}%`, { fg: T.bg, bg: T.orange, bold: true });
+    } else if (p.unit === "кг" && tx + 6 < x + w) g.text(tx, cy + 4, "за кг", { fg: T.dim, bg: T.panel });
+    cy += 6;
+    if (p.offInfo && left() > 0) g.textW(x + 1, cy++, p.offInfo, iw, { fg: T.orange, bg: T.panel, italic: true });
+  } else {
+    g.text(x + 1, cy++, rub(p.price), { fg: T.lime, bold: true });
+  }
+  // Rating and price per kg
+  if (left() > 0) {
+    let cx = x + 1;
+    if (p.rating) {
+      cx = g.stars(cx, cy, p.rating, { bg: T.panel });
+      cx = g.text(cx + 1, cy, p.rating.toFixed(1).replace(".", ","), { fg: T.yellow, bold: true, bg: T.panel });
+      cx = g.text(cx + 1, cy, `· ${compactNum(p.votes)}`, { fg: T.dim, bg: T.panel });
+    }
+    const pk = perKg(p);
+    if (pk) g.textR(x + w - 1, cy, `${pk.toLocaleString("ru-RU").replace(/\s/g, " ")} ₽/кг`, { fg: T.sub, bg: T.panel });
+    cy += 2;
+  }
+  // Kcal and macros
+  if (left() > 2 && (p.kcal != null || p.p != null)) {
+    g.text(x + 1, cy, "на 100 г", { fg: T.dim, bg: T.panel });
+    kbjuLine(g, x + 10, cy++, iw - 9, p, T.panel);
+    energyBar(g, x + 1, cy++, iw, p);
+    cy++;
+  }
+  // Composition flags
+  const pills = flagPills(p);
+  if (pills.length && left() > 1) { cy += drawPills(g, x + 1, cy, iw, pills); cy++; }
+  // Ingredients
+  if (p.comp && left() > 1) {
+    g.text(x + 1, cy++, "СОСТАВ", { fg: T.dim, bold: true, bg: T.panel });
+    const lines = compositionLines(p.comp, iw);
+    const n = drawRich(g, x + 1, cy, iw, left(), lines, { fg: T.sub, bg: T.panel });
+    if (lines.length > n && n > 0) g.textR(x + w - 1, cy + n - 1, " …", { fg: T.dim, bg: T.panel });
+    cy += n;
+  } else if (p.description && left() > 1) {
+    cy += g.para(x + 1, cy, iw, left(), p.description, { fg: T.sub, bg: T.panel });
+  }
+  const q = store.qty(p.id);
+  if (q && h > 6) {
+    const label = ` в корзине: ${qtyText(p, q)} `;
+    g.textR(x + w - 1, y, label, { fg: T.bg, bg: T.lime, bold: true });
+  }
+}

package/src/ui/theme.js

@@ -0,0 +1,47 @@
+// Palette: VkusVill's dark greens. Colors are 0xRRGGBB.
+
+export const T = {
+  bg: 0x0b130e,
+  panel: 0x0f1a13,
+  panel2: 0x132219,
+  raise: 0x1a2e21,
+  line: 0x24402e,
+  lineHi: 0x3dbe55,
+  sel: 0x1c3a26,
+  selHi: 0x24502f,
+  text: 0xe4eee6,
+  sub: 0xa9bfae,
+  dim: 0x6f8a77,
+  mute: 0x41594a,
+  green: 0x3dbe55,
+  greenD: 0x1f7a32,
+  greenDD: 0x123f1d,
+  lime: 0xb5e853,
+  mint: 0x7ee0a1,
+  orange: 0xff9f43,
+  red: 0xff5d5d,
+  redD: 0x5a1e1e,
+  yellow: 0xffd166,
+  blue: 0x6cb4ff,
+  violet: 0xb39cff,
+  pink: 0xff7ab6,
+  white: 0xffffff,
+  black: 0x000000,
+  header: 0x0e2a17,
+};
+
+export function mix(a, b, t) {
+  const ar = (a >> 16) & 255, ag = (a >> 8) & 255, ab = a & 255;
+  const br = (b >> 16) & 255, bg = (b >> 8) & 255, bb = b & 255;
+  return (Math.round(ar + (br - ar) * t) << 16) | (Math.round(ag + (bg - ag) * t) << 8) | Math.round(ab + (bb - ab) * t);
+}
+
+// Gradient through a set of color stops, t ∈ [0, 1]
+export function ramp(stops, t) {
+  t = Math.max(0, Math.min(1, t));
+  const k = t * (stops.length - 1);
+  const i = Math.min(stops.length - 2, Math.floor(k));
+  return mix(stops[i], stops[i + 1], k - i);
+}
+
+export const BRAND = [0x1f7a32, 0x3dbe55, 0xb5e853, 0xfff27a, 0xb5e853, 0x3dbe55, 0x1f7a32];

package/src/ui/widgets.js

@@ -0,0 +1,236 @@
+// Text input, scrollable list, popup menu, and rich text wrapping with highlighting.
+
+import { T } from "./theme.js";
+import { strWidth, truncate, charWidth } from "../term/width.js";
+
+export class TextInput {
+  constructor({ placeholder = "", value = "", onChange, onSubmit, filter } = {}) {
+    this.value = value;
+    this.cursor = [...value].length;
+    this.placeholder = placeholder;
+    this.onChange = onChange;
+    this.onSubmit = onSubmit;
+    this.filter = filter; // (ch) → bool: which characters to accept
+  }
+
+  set(v) { this.value = v; this.cursor = [...v].length; }
+
+  key(k) {
+    const chars = [...this.value];
+    let changed = false;
+    if (k.type === "paste") {
+      const add = [...k.text.replace(/[\r\n\t]+/g, " ")].filter((c) => !this.filter || this.filter(c));
+      chars.splice(this.cursor, 0, ...add); this.cursor += add.length; changed = true;
+    } else if (k.name === "enter") { this.onSubmit?.(this.value); return true; }
+    else if (k.name === "backspace") { if (this.cursor > 0) { chars.splice(this.cursor - 1, 1); this.cursor--; changed = true; } else return true; }
+    else if (k.name === "delete" || (k.ctrl && k.name === "d")) { if (this.cursor < chars.length) { chars.splice(this.cursor, 1); changed = true; } else return true; }
+    else if (k.name === "left" && !k.alt) { this.cursor = Math.max(0, this.cursor - 1); return true; }
+    else if (k.name === "right" && !k.alt) { this.cursor = Math.min(chars.length, this.cursor + 1); return true; }
+    else if (k.name === "home" || (k.ctrl && k.name === "a")) { this.cursor = 0; return true; }
+    else if (k.name === "end" || (k.ctrl && k.name === "e")) { this.cursor = chars.length; return true; }
+    else if (k.ctrl && k.name === "u") { chars.splice(0, this.cursor); this.cursor = 0; changed = true; }
+    else if (k.ctrl && k.name === "k") { chars.splice(this.cursor); changed = true; }
+    else if ((k.ctrl && k.name === "w") || (k.alt && k.name === "backspace")) {
+      let i = this.cursor;
+      while (i > 0 && chars[i - 1] === " ") i--;
+      while (i > 0 && chars[i - 1] !== " ") i--;
+      chars.splice(i, this.cursor - i); this.cursor = i; changed = true;
+    } else if (k.ch && !k.ctrl && !k.alt) {
+      if (this.filter && !this.filter(k.ch)) return true;
+      chars.splice(this.cursor, 0, k.ch); this.cursor++; changed = true;
+    } else return false;
+    if (changed) { this.value = chars.join(""); this.onChange?.(this.value); }
+    return true;
+  }
+
+  draw(g, x, y, w, { focused = true, fg = T.text, bg, phFg = T.dim, blink = true } = {}) {
+    const chars = [...this.value];
+    if (!chars.length && !focused) { g.text(x, y, truncate(this.placeholder, w), { fg: phFg, bg, italic: true }); return; }
+    // Scroll so the cursor stays visible
+    let start = 0;
+    while (strWidth(chars.slice(start, this.cursor).join("")) > w - 1) start++;
+    let cx = x;
+    for (let i = start; i < chars.length; i++) {
+      const cw = charWidth(chars[i].codePointAt(0));
+      if (cx + cw > x + w) break;
+      const isCur = focused && i === this.cursor;
+      g.text(cx, y, chars[i], isCur ? { fg: T.bg, bg: T.lime } : { fg, bg });
+      cx += cw;
+    }
+    if (!chars.length) g.text(x + 1, y, truncate(this.placeholder, w - 1), { fg: phFg, bg, italic: true });
+    if (focused && this.cursor >= chars.length && blink) g.text(Math.min(cx, x + w - 1), y, " ", { bg: T.lime });
+  }
+}
+
+export class ListView {
+  constructor() {
+    this.sel = 0;
+    this.top = 0;
+    this.height = 10;
+  }
+
+  clamp(n) {
+    if (n === 0) { this.sel = 0; this.top = 0; return; }
+    this.sel = Math.max(0, Math.min(n - 1, this.sel));
+    if (this.sel < this.top) this.top = this.sel;
+    if (this.sel >= this.top + this.height) this.top = this.sel - this.height + 1;
+    this.top = Math.max(0, Math.min(this.top, Math.max(0, n - this.height)));
+  }
+
+  key(k, n) {
+    switch (k.name) {
+      case "up": this.sel--; break;
+      case "down": this.sel++; break;
+      case "pageup": this.sel -= this.height - 1; break;
+      case "pagedown": this.sel += this.height - 1; break;
+      case "home": this.sel = 0; break;
+      case "end": this.sel = n - 1; break;
+      default:
+        if (k.hot === "k" && !k.ctrl) { this.sel--; break; }
+        if (k.hot === "j" && !k.ctrl) { this.sel++; break; }
+        return false;
+    }
+    this.clamp(n);
+    return true;
+  }
+
+  wheel(dir, n) {
+    this.top = Math.max(0, Math.min(Math.max(0, n - this.height), this.top + dir * 3));
+    if (this.sel < this.top) this.sel = this.top;
+    if (this.sel >= this.top + this.height) this.sel = this.top + this.height - 1;
+    this.clamp(n);
+  }
+
+  // rowH is the row height; row(item, index, y, selected)
+  draw(g, app, x, y, w, h, items, row, { rowH = 1, onPick, scrollbar = true } = {}) {
+    this.height = Math.max(1, Math.floor(h / rowH));
+    this.clamp(items.length);
+    const end = Math.min(items.length, this.top + this.height);
+    for (let i = this.top; i < end; i++) {
+      const ry = y + (i - this.top) * rowH;
+      row(items[i], i, ry, i === this.sel);
+      app?.hit(x, ry, w, rowH, {
+        click: (ev) => { const again = this.sel === i; this.sel = i; this.clamp(items.length); if (again || ev.double) onPick?.(items[i], i); },
+      });
+    }
+    app?.hit(x, y, w, h, { wheel: (dir) => this.wheel(dir, items.length), passive: true });
+    if (scrollbar) g.scrollbar(x + w, y, h, this.top, this.height, items.length);
+  }
+}
+
+// Popup menu: single choice or checkboxes, with a filter field when there are many items
+export class Menu {
+  constructor({ title, items, multi = false, onPick, onClose, x, y, width, filter }) {
+    this.title = title;
+    this.items = items; // [{ label, value, checked, hint, color, section }]
+    this.multi = multi;
+    this.onPick = onPick;
+    this.onClose = onClose;
+    this.list = new ListView();
+    this.anchor = x !== undefined ? { x, y } : null;
+    this.width = width;
+    this.useFilter = filter ?? items.length > 12;
+    this.input = new TextInput({ placeholder: "фильтр…", onChange: () => { this.list.sel = 0; } });
+    const first = items.findIndex((i) => i.checked && !multi);
+    if (first > 0) this.list.sel = first;
+  }
+
+  get visible() {
+    const q = this.input.value.trim().toLowerCase();
+    return q ? this.items.filter((i) => i.label.toLowerCase().includes(q)) : this.items;
+  }
+
+  key(k, app) {
+    const vis = this.visible;
+    if (k.name === "escape") { app.closeOverlay(this); this.onClose?.(); return true; }
+    if (k.name === "enter") {
+      const it = vis[this.list.sel];
+      if (!it) return true;
+      if (this.multi) { it.checked = !it.checked; this.onPick?.(it, this.items); }
+      else { app.closeOverlay(this); this.onPick?.(it); }
+      return true;
+    }
+    if (k.name === "space" && this.multi) {
+      const it = vis[this.list.sel];
+      if (it) { it.checked = !it.checked; this.onPick?.(it, this.items); }
+      return true;
+    }
+    if (["up", "down", "pageup", "pagedown", "home", "end"].includes(k.name)) { this.list.key(k, vis.length); return true; }
+    if (this.useFilter && this.input.key(k)) return true;
+    if (!this.useFilter && (k.hot === "j" || k.hot === "k")) { this.list.key(k, vis.length); return true; }
+    return true;
+  }
+
+  draw(g, app) {
+    const vis = this.visible;
+    const labelW = Math.max(strWidth(this.title ?? "") + 4, ...this.items.map((i) => strWidth(i.label) + (i.hint ? strWidth(i.hint) + 3 : 0) + (this.multi ? 4 : 2)));
+    const w = Math.min(g.w - 4, Math.max(this.width ?? 0, labelW + 4, 30));
+    const rows = Math.min(vis.length, Math.max(3, g.h - 10), 18);
+    const h = rows + 2 + (this.useFilter ? 2 : 0) + (this.multi ? 1 : 0);
+    let x = this.anchor ? Math.min(this.anchor.x, g.w - w - 1) : Math.floor((g.w - w) / 2);
+    let y = this.anchor ? Math.min(this.anchor.y, g.h - h - 1) : Math.max(1, Math.floor((g.h - h) / 2));
+    x = Math.max(0, x); y = Math.max(0, y);
+    shadow(g, x, y, w, h);
+    g.box(x, y, w, h, { fg: T.lineHi, bg: T.panel2, title: this.title, titleFg: T.lime });
+    app.hit(x, y, w, h, { click: () => {}, wheel: (d) => this.list.wheel(d, vis.length) });
+    let ly = y + 1;
+    if (this.useFilter) {
+      g.text(x + 2, ly, "⌕", { fg: T.lime });
+      this.input.draw(g, x + 4, ly, w - 6, { bg: T.panel2 });
+      g.hline(x + 1, ly + 1, w - 2, T.line);
+      ly += 2;
+    }
+    this.list.draw(g, app, x + 1, ly, w - 3, rows, vis, (it, i, ry, sel) => {
+      const bg = sel ? T.selHi : T.panel2;
+      g.fill(x + 1, ry, w - 3, 1, bg);
+      let cx = x + 2;
+      if (it.section) { g.text(cx, ry, it.label, { fg: T.dim, bg, bold: true }); return; }
+      if (this.multi) cx = g.text(cx, ry, it.checked ? "◼ " : "◻ ", { fg: it.checked ? T.lime : T.dim, bg });
+      else cx = g.text(cx, ry, it.checked ? "● " : sel ? "▸ " : "  ", { fg: T.lime, bg });
+      g.textW(cx, ry, it.label, w - 6 - (cx - x) - (it.hint ? strWidth(it.hint) + 1 : 0), { fg: it.color ?? (sel ? T.white : T.text), bg, bold: sel });
+      if (it.hint) g.textR(x + w - 3, ry, it.hint, { fg: T.dim, bg });
+    }, {
+      onPick: (it) => {
+        if (this.multi) { it.checked = !it.checked; this.onPick?.(it, this.items); }
+        else { app.closeOverlay(this); this.onPick?.(it); }
+      },
+    });
+    if (!vis.length) g.textC(x, w, ly, "ничего не найдено", { fg: T.dim, bg: T.panel2 });
+    if (this.multi) g.textC(x, w, y + h - 1, " пробел — отметить · esc — готово ", { fg: T.dim, bg: T.panel2 });
+  }
+}
+
+export function shadow(g, x, y, w, h) {
+  g.tint(x + 1, y + h, w, 1, 0x050906);
+  g.tint(x + w, y + 1, 1, h, 0x050906);
+}
+
+// Text wrapping with per-character coloring: colorAt(i) → style or null
+export function richWrap(text, w, colorAt) {
+  const lines = [];
+  const words = [];
+  const re = /\S+/g;
+  let m;
+  while ((m = re.exec(text))) words.push({ s: m[0], i: m.index });
+  let line = [], lw = 0;
+  for (const word of words) {
+    const ww = strWidth(word.s);
+    if (lw && lw + 1 + ww > w) { lines.push(line); line = []; lw = 0; }
+    line.push(word);
+    lw += (lw ? 1 : 0) + ww;
+  }
+  if (line.length) lines.push(line);
+  return lines.map((ws) => ws.map((wd) => ({ ...wd, st: colorAt(wd.i, wd.s) })));
+}
+
+export function drawRich(g, x, y, w, maxLines, lines, base) {
+  const n = Math.min(lines.length, maxLines);
+  for (let j = 0; j < n; j++) {
+    let cx = x;
+    for (const wd of lines[j]) {
+      if (cx > x) cx = g.text(cx, y + j, " ", base);
+      cx = g.text(cx, y + j, truncate(wd.s, x + w - cx), wd.st ?? base);
+    }
+  }
+  return n;
+}