vkusvill 0.0.0-dev.0

package/src/views/browser.js

@@ -0,0 +1,251 @@
+// Product list with a detail pane on the right: the shared base for catalog, deals, analogs and favourites.
+// Loads pages as you scroll; filters and sorts what is already loaded in place.
+
+import { T } from "../ui/theme.js";
+import { ListView, Menu } from "../ui/widgets.js";
+import { productRow, productPane, perKg } from "../ui/product-ui.js";
+import { normalize, qtyText, qtyStep } from "../product.js";
+import { store } from "../store.js";
+import { productView } from "./product.js";
+import { openUrl } from "../sys.js";
+
+export const FILTERS = [
+  { id: "noSugar", label: "Без сахара в составе", test: (p) => p.comp && !p.flags.sugar },
+  { id: "noGluten", label: "Без глютена", test: (p) => p.comp && !p.flags.gluten },
+  { id: "noLactose", label: "Без лактозы", test: (p) => p.comp && !p.flags.lactose },
+  { id: "noAdd", label: "Без пищевых добавок", test: (p) => p.comp && !p.flags.additives },
+  { id: "noPalm", label: "Без пальмового масла", test: (p) => !p.flags.palm },
+  { id: "sale", label: "Только со скидкой", test: (p) => !!p.old },
+  { id: "top", label: "Рейтинг 4,8 и выше", test: (p) => p.rating >= 4.8 },
+  { id: "protein", label: "Белка 10 г и больше на 100 г", test: (p) => (p.p ?? 0) >= 10 },
+  { id: "light", label: "До 150 ккал на 100 г", test: (p) => p.kcal != null && p.kcal <= 150 },
+];
+
+export const LOCAL_SORTS = [
+  { id: "perkg", label: "Дешевле за кг", fn: (a, b) => (perKg(a) ?? a.price) - (perKg(b) ?? b.price) },
+  { id: "protein", label: "Больше белка на рубль", fn: (a, b) => protPerRub(b) - protPerRub(a) },
+  { id: "kcal", label: "Меньше калорий", fn: (a, b) => (a.kcal ?? 1e9) - (b.kcal ?? 1e9) },
+  { id: "off", label: "Самая большая скидка", fn: (a, b) => (b.off ?? 0) - (a.off ?? 0) },
+  { id: "votes", label: "Больше всего оценок", fn: (a, b) => b.votes - a.votes },
+];
+const protPerRub = (p) => (p.p && p.grams ? (p.p * p.grams) / 100 / p.price : p.p && p.unit === "кг" ? (p.p * 10) / p.price : 0);
+
+export const SERVER_SORTS = [
+  { id: "popularity", label: "Популярные" },
+  { id: "rating", label: "С высоким рейтингом" },
+  { id: "price_asc", label: "Сначала дешёвые" },
+  { id: "price_desc", label: "Сначала дорогие" },
+  { id: "new", label: "Новинки" },
+];
+
+export class ProductBrowser {
+  constructor(app, { title, loader, headerH = 0, drawHeader, emptyText = "Ничего не нашлось", serverSort = true, keyHook, hintsExtra = [], autoLoad = true, prefKey = null } = {}) {
+    this.app = app;
+    this.title = title;
+    this.loader = loader;
+    this.headerH = headerH;
+    this.drawHeaderFn = drawHeader;
+    this.emptyText = emptyText;
+    this.serverSort = serverSort;
+    this.keyHook = keyHook;
+    this.hintsExtra = hintsExtra;
+    this.autoLoad = autoLoad;
+    this.list = new ListView();
+    this.prefKey = prefKey;
+    // Sort and filters survive restarts for named browsers (catalog, deals)
+    const saved = prefKey ? store.pref(`browser.${prefKey}`, {}) : {};
+    this.filters = new Set((Array.isArray(saved.filters) ? saved.filters : []).filter((id) => FILTERS.some((f) => f.id === id)));
+    this.sort = SERVER_SORTS.some((s) => s.id === saved.sort) ? saved.sort : "popularity";
+    this.localSort = LOCAL_SORTS.some((s) => s.id === saved.localSort) ? saved.localSort : null;
+    this.reset();
+  }
+
+  reset() {
+    this.items = [];
+    this.page = 0;
+    this.total = null;
+    this.hasMore = true;
+    this.loading = false;
+    this.error = null;
+    this.req = (this.req ?? 0) + 1;
+    this.autoLoads = 0;
+    this.list.sel = 0;
+    this.list.top = 0;
+    this.loaded = false;
+  }
+
+  busy() { return this.loading; }
+
+  reload() { this.reset(); this.loadMore(); }
+
+  onShow() { if (!this.loaded && !this.loading) this.loadMore(); }
+
+  async loadMore() {
+    if (this.loading || !this.hasMore) return;
+    this.loading = true;
+    this.error = null;
+    const req = this.req;
+    try {
+      const res = await this.loader(this.page + 1, { sort: this.sort });
+      if (req !== this.req) return;
+      const seen = new Set(this.items.map((p) => p.id));
+      for (const it of res.items ?? []) { const p = normalize(it); if (!seen.has(p.id)) { this.items.push(p); seen.add(p.id); } }
+      this.page++;
+      this.total = res.total ?? this.items.length;
+      this.hasMore = !!res.hasMore;
+      this.facets = res.facets ?? this.facets;
+      this.loaded = true;
+    } catch (e) {
+      if (req !== this.req) return;
+      this.error = e.message;
+      this.hasMore = false;
+    } finally {
+      if (req === this.req) this.loading = false;
+      this.app.invalidate();
+    }
+  }
+
+  get visible() {
+    let v = this.items;
+    if (this.filters.size) v = v.filter((p) => [...this.filters].every((id) => FILTERS.find((f) => f.id === id).test(p)));
+    if (this.localSort) { const s = LOCAL_SORTS.find((x) => x.id === this.localSort); v = [...v].sort(s.fn); }
+    return v;
+  }
+
+  // Load more when the selection nears the end of the list or filters left too few items
+  tick() {
+    if (!this.autoLoad || !this.hasMore || this.loading || this.error || !this.items.length) return;
+    const n = this.visible.length;
+    const nearEnd = this.list.sel >= n - 6;
+    const sparse = n < this.list.height && this.autoLoads < 10;
+    if (nearEnd || sparse) { this.autoLoads++; this.loadMore(); }
+  }
+
+  get current() { return this.visible[this.list.sel]; }
+
+  open(p) {
+    if (!p) return;
+    store.viewed(p);
+    this.app.push(productView(this.app, p, { list: this.visible, index: this.visible.indexOf(p) }));
+  }
+
+  persist() {
+    if (this.prefKey) store.setPref(`browser.${this.prefKey}`, { sort: this.sort, localSort: this.localSort, filters: [...this.filters] });
+  }
+
+  sortMenu() {
+    const items = [];
+    if (this.serverSort) {
+      items.push({ label: "ВКУСВИЛЛ СОРТИРУЕТ", section: true });
+      for (const s of SERVER_SORTS) items.push({ label: s.label, value: { server: s.id }, checked: !this.localSort && this.sort === s.id });
+      items.push({ label: "ПО ЗАГРУЖЕННЫМ ТОВАРАМ", section: true });
+    }
+    for (const s of LOCAL_SORTS) items.push({ label: s.label, value: { local: s.id }, checked: this.localSort === s.id });
+    if (!this.serverSort) items.unshift({ label: "Как у ВкусВилла", value: { local: null }, checked: !this.localSort });
+    this.app.overlay(new Menu({
+      title: "Сортировка", items,
+      onPick: (it) => {
+        if (!it.value) return;
+        if (it.value.server) { this.localSort = null; if (this.sort !== it.value.server) { this.sort = it.value.server; this.reload(); } }
+        else { this.localSort = it.value.local; this.list.sel = 0; }
+        this.persist();
+      },
+    }));
+  }
+
+  filterMenu() {
+    this.app.overlay(new Menu({
+      title: "Фильтры по составу и цене", multi: true,
+      items: FILTERS.map((f) => ({ label: f.label, value: f.id, checked: this.filters.has(f.id) })),
+      onPick: (it) => { if (it.checked) this.filters.add(it.value); else this.filters.delete(it.value); this.list.sel = 0; this.autoLoads = 0; this.persist(); },
+    }));
+  }
+
+  sortLabel() {
+    if (this.localSort) return LOCAL_SORTS.find((s) => s.id === this.localSort).label.toLowerCase();
+    return SERVER_SORTS.find((s) => s.id === this.sort)?.label.toLowerCase() ?? "";
+  }
+
+  addToCart(p, sign = 1) {
+    if (!p) return;
+    const before = store.qty(p.id);
+    store.add(p, sign * qtyStep(p));
+    const q = store.qty(p.id);
+    if (sign > 0) this.app.toast(before ? `В корзине ${qtyText(p, q)} · ${p.title}` : `✚ ${p.title}`);
+    else this.app.toast(q ? `В корзине ${qtyText(p, q)}` : `Убрано: ${p.title}`, T.orange);
+  }
+
+  key(k) {
+    if (this.keyHook?.(k)) return true;
+    if (k.type !== "key") return false;
+    const vis = this.visible;
+    if (this.list.key(k, vis.length)) return true;
+    const p = vis[this.list.sel];
+    const h = k.hot ?? k.name;
+    if (k.name === "enter" || k.name === "right") { this.open(p); return true; }
+    if (h === "+" || h === "=") { this.addToCart(p, 1); return true; }
+    if (h === "-" || h === "_") { this.addToCart(p, -1); return true; }
+    if (h === "*" || h === "l") { if (p) this.app.toast(store.toggleFav(p) ? `♥ В избранном: ${p.title}` : "Убрано из избранного", T.pink); return true; }
+    if (h === "s") { this.sortMenu(); return true; }
+    if (h === "f") { this.filterMenu(); return true; }
+    if (h === "o" && p) { openUrl(p.url); this.app.toast("Открываю на сайте ВкусВилла"); return true; }
+    if (h === "x" && p) { this.app.toggleCompare(p); return true; }
+    if (h === "X") { this.app.openCompare(); return true; }
+    if (h === "R") { this.reload(); return true; }
+    return false;
+  }
+
+  hints() {
+    if (this.error && !this.items.length) return [["R", "попробовать снова"], ...this.hintsExtra];
+    return [["↑↓", "выбор"], ["⏎", "товар"], ["+ −", "корзина"], ...this.hintsExtra, ["s", "сорт"], ["f", "фильтры"], ["*", "избранное"], ["x", "сравнить"]];
+  }
+
+  draw(g, r) {
+    const app = this.app;
+    g.fill(r.x, r.y, r.w, r.h, T.bg);
+    let y = r.y;
+    if (this.drawHeaderFn) { this.drawHeaderFn(g, { x: r.x, y, w: r.w, h: this.headerH }); y += this.headerH; }
+    const h = r.y + r.h - y;
+    const showPane = r.w >= 96;
+    const paneW = showPane ? Math.max(38, Math.min(58, Math.floor(r.w * 0.38))) : 0;
+    const listW = r.w - paneW - (showPane ? 1 : 0);
+    const vis = this.visible;
+    // List header row
+    const lx = r.x + 1, lw = listW - 2;
+    g.fill(r.x, y, listW, h, T.panel);
+    const count = this.total != null ? `${vis.length}${this.filters.size ? ` из ${this.items.length}` : ""}${this.total > this.items.length ? ` · всего ${this.total}` : ""}` : "";
+    g.spans(lx + 1, y, [[this.title ?? "", { fg: T.lime, bold: true, bg: T.panel }], [count ? `  ${count}` : "", { fg: T.dim, bg: T.panel }]], lw - 30);
+    const meta = `↕ ${this.sortLabel()}${this.filters.size ? `  ⚑ ${this.filters.size}` : ""}`;
+    g.textR(lx + lw, y, meta, { fg: this.filters.size || this.localSort ? T.yellow : T.dim, bg: T.panel });
+    app.hit(lx + lw - meta.length, y, meta.length, 1, { click: () => this.sortMenu() });
+    g.hline(r.x, y + 1, listW, T.line);
+    const ly = y + 2, lh = h - 2;
+    if (!vis.length) {
+      const msg = this.loading ? "Загружаю…" : this.error ? `⚠ ${this.error}` : this.items.length ? "Все загруженные товары отсеяны фильтрами" : this.emptyText;
+      g.textC(r.x, listW, ly + Math.floor(lh / 2) - 1, msg, { fg: this.error ? T.red : T.dim, bg: T.panel });
+      if (this.error) g.textC(r.x, listW, ly + Math.floor(lh / 2) + 1, "R — попробовать снова", { fg: T.dim, bg: T.panel });
+      else if (this.loading) loader(g, r.x + Math.floor(listW / 2) - 6, ly + Math.floor(lh / 2) + 1, app.frame);
+    } else {
+      this.list.draw(g, app, lx - 1, ly, listW - 1, lh, vis, (p, i, ry, sel) => {
+        productRow(g, p, lx - 1, ry, listW - 1, { selected: sel, focused: this.focus !== "search", mark: app.compare.has(p.id) ? "⇄" : "" });
+      }, { onPick: (p) => this.open(p) });
+      if (this.loading) g.textC(r.x, listW, r.y + r.h - 1, ` ${"⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏"[app.frame % 10]} подгружаю… `, { fg: T.lime, bg: T.panel });
+    }
+    if (showPane) {
+      const px = r.x + listW + 1;
+      g.vline(r.x + listW, y, h, T.line, "│");
+      productPane(g, app, vis[this.list.sel], px, y, paneW - 1, h);
+      app.hit(px, y, paneW, h, { click: (ev) => { if (ev.double) this.open(vis[this.list.sel]); } });
+    }
+  }
+}
+
+// Running "caterpillar" loading indicator
+export function loader(g, x, y, frame) {
+  const n = 12;
+  for (let i = 0; i < n; i++) {
+    const d = Math.abs(((frame % (n * 2)) - n) - (i - n / 2));
+    g.text(x + i, y, "▬", { fg: d < 1.5 ? T.lime : d < 3 ? T.green : T.mute });
+  }
+}
+

package/src/views/cart.js

@@ -0,0 +1,306 @@
+// Cart: lines with quantity steppers, the total in large digits, savings, calories and macros of the whole cart,
+// a breakdown by category. Checkout is a VkusVill link plus a QR code right in the terminal.
+
+import { T, mix, ramp } from "../ui/theme.js";
+import { ListView, shadow } from "../ui/widgets.js";
+import { G } from "../ui/draw.js";
+import * as api from "../api.js";
+import { normalize, rub, qtyText, qtyStep, lineTotal, lineGrams, plural } from "../product.js";
+import { store, CART_MAX } from "../store.js";
+import { productView } from "./product.js";
+import { openUrl, copy } from "../sys.js";
+import { strWidth, truncate } from "../term/width.js";
+
+const STALE = 6 * 3600e3;
+
+const CAT_COLORS = [T.green, T.lime, T.blue, T.orange, T.violet, T.yellow, T.pink, T.mint];
+
+export function cartView(app) {
+  return new CartView(app);
+}
+
+class CartView {
+  constructor(app) {
+    this.app = app;
+    this.list = new ListView();
+    this.confirmClear = false;
+  }
+
+  get lines() { return store.cart; }
+
+  key(k) {
+    if (k.type !== "key") return false;
+    const lines = this.lines;
+    if (this.list.key(k, lines.length)) { this.confirmClear = false; return true; }
+    const line = lines[this.list.sel];
+    const h = k.hot ?? k.name;
+    if (line && (h === "+" || h === "=" || k.name === "right")) { store.add(line.p, qtyStep(line.p)); return true; }
+    if (line && (h === "-" || h === "_" || k.name === "left")) { store.add(line.p, -qtyStep(line.p)); return true; }
+    if (line && (k.name === "delete" || k.name === "backspace" || h === "d")) { store.remove(line.p.id); this.app.toast(`Убрано: ${line.p.title}`, T.orange); return true; }
+    if (line && k.name === "enter") { this.openLine(this.list.sel); return true; }
+    if (h === "o") { this.checkout(); return true; }
+    if (h === "D") {
+      if (!lines.length) return true;
+      if (this.confirmClear) { store.clearCart(); this.confirmClear = false; this.app.toast("Корзина очищена", T.orange); }
+      else { this.confirmClear = true; this.app.toast("Ещё раз Shift+D — очистить корзину", T.red); }
+      return true;
+    }
+    if (h === "u") { this.refresh(); return true; }
+    return false;
+  }
+
+  hints() {
+    if (!this.lines.length) return [["1", "в каталог"], ["2", "акции"], ["3", "рецепты"]];
+    return [["↑↓", "выбор"], ["← →", "кол-во"], ["d", "убрать"], ["⏎", "товар"], ["o", "оформить"], ["u", "обновить цены"], ["D", "очистить"]];
+  }
+
+  // A cart line opens with its neighbours, so [ and ] page through the cart
+  openLine(i) {
+    const lines = this.lines;
+    if (lines[i]) this.app.push(productView(this.app, lines[i].p, { list: lines.map((l) => l.p), index: i }));
+  }
+
+  // Prices in the cart are snapshots: lines older than STALE are re-checked quietly in the background when the cart opens
+  onShow() {
+    if (!this.refreshing && store.stale(STALE).length) this.refresh({ quiet: true });
+  }
+
+  busy() { return this.refreshing; }
+
+  async refresh({ quiet = false } = {}) {
+    if (this.refreshing) return;
+    const lines = quiet ? store.stale(STALE) : [...store.cart];
+    if (!lines.length) return;
+    this.refreshing = true;
+    if (!quiet) this.app.toast("Сверяю цены…");
+    let changed = 0, failed = 0;
+    await Promise.all(lines.map(async (l) => {
+      try {
+        const p = normalize(await api.call("vkusvill_product_details", { id: l.p.id }, { prio: "lo", fresh: true }));
+        if (store.refresh(l.p.id, p)) changed++;
+      } catch { failed++; }
+    }));
+    this.refreshing = false;
+    store.changed();
+    if (changed) this.app.toast(`Цены изменились у ${changed} ${plural(changed, "товара", "товаров", "товаров")}`, T.orange);
+    else if (!quiet) this.app.toast(failed ? `Не удалось сверить ${failed}` : "Цены актуальны", failed ? T.orange : T.lime);
+  }
+
+  checkout() {
+    if (!store.cart.length) return this.app.toast("Корзина пуста", T.orange);
+    this.app.overlay(new Checkout(this.app));
+  }
+
+  draw(g, r) {
+    const app = this.app;
+    g.fill(r.x, r.y, r.w, r.h, T.bg);
+    const lines = this.lines;
+    if (!lines.length) return this.drawEmpty(g, r);
+    const sideW = r.w >= 100 ? Math.min(52, Math.floor(r.w * 0.38)) : 0;
+    const lw = r.w - sideW - (sideW ? 1 : 0);
+    g.fill(r.x, r.y, lw, r.h, T.panel);
+    const n = lines.length;
+    g.spans(r.x + 2, r.y, [["Корзина", { fg: T.lime, bold: true, bg: T.panel }], [`  ${n} ${plural(n, "позиция", "позиции", "позиций")} · до ${CART_MAX}`, { fg: T.dim, bg: T.panel }]]);
+    g.hline(r.x, r.y + 1, lw, T.line);
+    // Table: product | − qty + | sum
+    const rowH = 2;
+    this.list.draw(g, app, r.x, r.y + 2, lw - 1, r.h - 2 - (sideW ? 0 : 1), lines, (l, i, y, sel) => {
+      const bg = sel ? T.selHi : T.panel;
+      g.fill(r.x, y, lw - 1, rowH, bg);
+      if (sel) { g.text(r.x, y, "▌", { fg: T.lime, bg }); g.text(r.x, y + 1, "▌", { fg: T.lime, bg }); }
+      const p = l.p;
+      const right = 30;
+      g.textW(r.x + 2, y, p.title, lw - right - 4, { fg: T.white, bold: sel, bg });
+      const sub = [p.pack, p.unit === "кг" ? `${rub(p.price)}/кг` : rub(p.price), p.old ? `было ${rub(p.old)}` : ""].filter(Boolean).join(" · ");
+      g.textW(r.x + 2, y + 1, sub, lw - right - 4, { fg: p.old ? T.orange : T.dim, bg });
+      // Stepper
+      const sx = r.x + lw - right;
+      g.text(sx, y, " − ", { fg: T.white, bg: sel ? T.orange : T.raise, bold: true });
+      app.hit(sx, y, 3, 1, { click: () => store.add(p, -qtyStep(p)) });
+      const qt = qtyText(p, l.q);
+      g.textC(sx + 3, 10, y, qt, { fg: T.white, bold: true, bg });
+      g.text(sx + 13, y, " + ", { fg: T.bg, bg: sel ? T.lime : T.green, bold: true });
+      app.hit(sx + 13, y, 3, 1, { click: () => store.add(p, qtyStep(p)) });
+      g.textR(r.x + lw - 2, y, rub(lineTotal(p, l.q)), { fg: T.lime, bold: true, bg });
+      g.text(r.x + lw - 3, y + 1, "×", { fg: T.mute, bg });
+      app.hit(r.x + lw - 3, y + 1, 1, 1, { click: () => store.remove(p.id) });
+    }, { rowH, onPick: (l, i) => this.openLine(i) });
+    if (sideW) this.drawSummary(g, { x: r.x + lw + 1, y: r.y, w: sideW - 1, h: r.h });
+    else {
+      const y = r.y + r.h - 1;
+      g.fill(r.x, y, r.w, 1, T.panel2);
+      g.spans(r.x + 2, y, [["Итого ", { fg: T.sub, bg: T.panel2 }], [rub(store.total), { fg: T.lime, bold: true, bg: T.panel2 }], [store.savings ? `  экономия ${rub(store.savings)}` : "", { fg: T.orange, bg: T.panel2 }]]);
+      const label = " o  ОФОРМИТЬ ▶ ";
+      g.textR(r.x + r.w - 1, y, label, { fg: T.bg, bg: T.lime, bold: true });
+      app.hit(r.x + r.w - 1 - strWidth(label), y, strWidth(label), 1, { click: () => this.checkout() });
+    }
+  }
+
+  drawSummary(g, r) {
+    const app = this.app;
+    g.fill(r.x, r.y, r.w, r.h, T.panel2);
+    let y = r.y + 1;
+    const x = r.x + 2, w = r.w - 4;
+    g.text(x, y++, "ИТОГО", { fg: T.dim, bold: true, bg: T.panel2 });
+    g.bigPrice(x, y, store.total, T.lime);
+    y += 6;
+    const sav = store.savings;
+    if (sav > 0) g.spans(x, y++, [["экономия по акциям ", { fg: T.sub, bg: T.panel2 }], [rub(sav), { fg: T.orange, bold: true, bg: T.panel2 }]]);
+    y++;
+    // Checkout button
+    const label = "  ОФОРМИТЬ ВО ВКУСВИЛЛЕ  ▶ ";
+    const bw = Math.min(w, strWidth(label));
+    const pulse = mix(T.green, T.lime, (Math.sin(app.frame / 4) + 1) / 4);
+    g.fill(x, y, bw, 3, pulse);
+    g.textC(x, bw, y + 1, label.trim(), { fg: T.bg, bg: pulse, bold: true });
+    app.hit(x, y, bw, 3, { click: () => this.checkout() });
+    this.animated = true;
+    y += 4;
+    g.textW(x, y++, "o — ссылка и QR-код для телефона", w, { fg: T.dim, bg: T.panel2 });
+    y++;
+    // Calories and macros of the cart
+    const tot = { p: 0, f: 0, c: 0, kcal: 0, g: 0 };
+    let known = 0;
+    for (const l of store.cart) {
+      const gr = lineGrams(l.p, l.q);
+      if (!gr || l.p.kcal == null) continue;
+      known++;
+      tot.g += gr;
+      for (const k of ["p", "f", "c", "kcal"]) tot[k] += ((l.p[k] ?? 0) * gr) / 100;
+    }
+    if (known && y + 6 < r.y + r.h) {
+      g.text(x, y++, `В КОРЗИНЕ · ${(tot.g / 1000).toFixed(1).replace(".", ",")} кг продуктов`, { fg: T.dim, bold: true, bg: T.panel2 });
+      const k = Math.round(tot.kcal).toLocaleString("ru-RU").replace(/\s/g, " ");
+      g.spans(x, y++, [[k, { fg: T.lime, bold: true, bg: T.panel2 }], [" ккал", { fg: T.sub, bg: T.panel2 }], [`  ≈ ${Math.max(1, Math.round(tot.kcal / 2000))} ${plural(Math.max(1, Math.round(tot.kcal / 2000)), "день", "дня", "дней")} по 2000`, { fg: T.dim, bg: T.panel2 }]], w);
+      const maxv = Math.max(tot.p, tot.f, tot.c, 1);
+      for (const [name, v, col] of [["белки", tot.p, T.blue], ["жиры", tot.f, T.yellow], ["углев.", tot.c, T.orange]]) {
+        g.text(x, y, name, { fg: T.sub, bg: T.panel2 });
+        g.bar(x + 8, y, w - 17, v / maxv, col, T.raise);
+        g.textR(x + w, y++, `${Math.round(v)} г`, { fg: T.text, bg: T.panel2 });
+      }
+      if (known < store.cart.length) g.text(x, y++, `без данных: ${store.cart.length - known}`, { fg: T.mute, bg: T.panel2 });
+      y++;
+    }
+    // By category
+    const byCat = new Map();
+    for (const l of store.cart) {
+      const c = l.p.category?.at(-1) ?? l.p.category?.[0] ?? "Другое";
+      byCat.set(c, (byCat.get(c) ?? 0) + lineTotal(l.p, l.q));
+    }
+    const cats = [...byCat.entries()].sort((a, b) => b[1] - a[1]);
+    if (cats.length && y + 3 < r.y + r.h) {
+      g.text(x, y++, "КУДА УХОДЯТ ДЕНЬГИ", { fg: T.dim, bold: true, bg: T.panel2 });
+      // Solid bar of shares
+      let bx = 0;
+      const total = store.total || 1;
+      cats.forEach(([, v], i) => {
+        const cw = i === cats.length - 1 ? w - bx : Math.round((v / total) * w);
+        g.text(x + bx, y, " ".repeat(Math.max(0, cw)), { bg: CAT_COLORS[i % CAT_COLORS.length] });
+        bx += cw;
+      });
+      y += 2;
+      for (const [i, [name, v]] of cats.entries()) {
+        if (y >= r.y + r.h - 1) break;
+        g.text(x, y, "■", { fg: CAT_COLORS[i % CAT_COLORS.length], bg: T.panel2 });
+        g.textW(x + 2, y, name, w - 14, { fg: T.sub, bg: T.panel2 });
+        g.textR(x + w, y++, `${Math.round((v / total) * 100)}% ${rub(v)}`, { fg: T.text, bg: T.panel2 });
+      }
+    }
+  }
+
+  drawEmpty(g, r) {
+    g.fill(r.x, r.y, r.w, r.h, T.bg);
+    // Empty trolley in box-drawing art
+    const art = [
+      "   ┌─────────────────────┐",
+      "───┤ ░░░░░░░░░░░░░░░░░░░ │",
+      "   │ ░░░░░░░░░░░░░░░░░░░ │",
+      "   │ ░░░░░░░░░░░░░░░░░░░ │",
+      "   └──┬───────────────┬──┘",
+      "      ◯               ◯",
+    ];
+    const ax = r.x + Math.floor((r.w - 26) / 2);
+    const ay = r.y + Math.floor(r.h / 2) - 6;
+    art.forEach((l, i) => g.text(ax, ay + i, l, { fg: i === 5 ? T.lime : T.green }));
+    g.textC(r.x, r.w, ay + 8, "Корзина пуста", { fg: T.white, bold: true });
+    g.textC(r.x, r.w, ay + 9, "найдите что-нибудь в каталоге (1) или загляните в акции (2)", { fg: T.dim });
+    g.textC(r.x, r.w, ay + 10, "в рецептах (3) можно положить в корзину все ингредиенты разом", { fg: T.dim });
+    this.animated = false;
+  }
+}
+
+// Checkout: VkusVill link + QR code for the phone
+class Checkout {
+  constructor(app) {
+    this.app = app;
+    this.link = null;
+    this.error = null;
+    this.animated = true;
+    this.make();
+  }
+
+  async make() {
+    try {
+      const products = store.cart.map((l) => ({ id: l.p.id, q: Math.round(l.q * 100) / 100 }));
+      const d = await api.cartLink(products);
+      this.link = d.link ?? d.url ?? null;
+      if (!this.link) throw new Error("ВкусВилл не вернул ссылку");
+    } catch (e) {
+      this.error = e.message;
+    }
+    this.animated = false;
+    this.app.invalidate();
+  }
+
+  key(k, app) {
+    const h = k.hot ?? k.name;
+    if (k.name === "escape" || h === "q") return app.closeOverlay(this);
+    if (!this.link) return;
+    if (h === "o" || k.name === "enter") { openUrl(this.link); app.toast("Открываю корзину ВкусВилла"); }
+    if (h === "y" || h === "c") copy(this.link).then(() => app.toast("Ссылка скопирована"));
+  }
+
+  hints() { return this.link ? [["o", "открыть в браузере"], ["y", "скопировать"], ["esc", "закрыть"]] : [["esc", "закрыть"]]; }
+
+  draw(g, app) {
+    const qs = this.link ? G.qrSize(this.link) : { w: 33, h: 17 };
+    const w = Math.min(g.w - 2, Math.max(qs.w + 6, 64));
+    const compact = qs.h + 10 > g.h - 2;
+    const h = Math.min(g.h - 2, compact ? qs.h + 4 : qs.h + 10);
+    const x = Math.floor((g.w - w) / 2), y = Math.max(1, Math.floor((g.h - h) / 2));
+    shadow(g, x, y, w, h);
+    g.box(x, y, w, h, { fg: T.lineHi, bg: T.panel2, title: "Корзина во ВкусВилле", titleFg: T.lime, style: "round" });
+    app.hit(x, y, w, h, { click: () => {} });
+    if (this.error) {
+      g.textC(x, w, y + Math.floor(h / 2) - 1, "⚠ Не получилось создать корзину", { fg: T.red, bold: true, bg: T.panel2 });
+      g.textC(x, w, y + Math.floor(h / 2), this.error, { fg: T.sub, bg: T.panel2 });
+      return;
+    }
+    if (!this.link) {
+      g.textC(x, w, y + Math.floor(h / 2) - 1, "Собираю корзину…", { fg: T.sub, bg: T.panel2 });
+      const n = 20;
+      for (let i = 0; i < n; i++) g.text(x + Math.floor((w - n) / 2) + i, y + Math.floor(h / 2) + 1, " ", { bg: ramp([T.greenD, T.lime, T.greenD], ((i + app.frame) % n) / n) });
+      return;
+    }
+    const qx = x + Math.floor((w - qs.w) / 2);
+    if (compact) {
+      if (qs.h + 4 <= h) g.qr(qx, y + 1, this.link);
+      else g.textC(x, w, y + 3, "окно мало для QR-кода — растяните терминал", { fg: T.dim, bg: T.panel2 });
+      g.textC(x, w, y + h - 3, truncate(this.link, w - 4), { fg: T.lime, underline: true, bg: T.panel2 });
+      g.textC(x, w, y + h - 2, `${rub(store.total)} · камера телефона → приложение ВкусВилла`, { fg: T.dim, bg: T.panel2 });
+      return;
+    }
+    g.qr(qx, y + 2, this.link);
+    g.textC(x, w, y + qs.h + 3, "наведите камеру телефона — откроется приложение ВкусВилла", { fg: T.sub, bg: T.panel2 });
+    const ly = y + h - 4;
+    g.textC(x, w, ly, truncate(this.link, w - 4), { fg: T.lime, underline: true, bg: T.panel2 });
+    app.hit(x + 2, ly, w - 4, 1, { click: () => openUrl(this.link) });
+    g.textC(x, w, ly + 1, `${store.count} ${plural(store.count, "позиция", "позиции", "позиций")} · ${rub(store.total)} · оплата и доставка — у ВкусВилла`, { fg: T.dim, bg: T.panel2 });
+    let bx = x + Math.floor((w - 40) / 2);
+    const btn = (label, fn, prim) => { g.pill(bx, ly + 2, label, { fg: prim ? T.bg : T.sub, bg: prim ? T.lime : T.raise, bold: prim }); app.hit(bx, ly + 2, strWidth(label) + 2, 1, { click: fn }); bx += strWidth(label) + 3; };
+    btn("o  открыть", () => openUrl(this.link), true);
+    btn("y  скопировать", () => copy(this.link).then(() => app.toast("Ссылка скопирована")));
+    btn("esc", () => app.closeOverlay(this));
+  }
+}
+