vkusvill 0.0.0-dev.0

package/src/app.js

@@ -0,0 +1,328 @@
+// The application: tabs with page stacks, overlays, mouse routing, toasts and the render loop.
+
+import { appendFileSync, mkdirSync } from "node:fs";
+import path from "node:path";
+import { Screen } from "./term/screen.js";
+import { Input } from "./term/input.js";
+import { G, SPIN } from "./ui/draw.js";
+import { T, mix } from "./ui/theme.js";
+import { strWidth, truncate } from "./term/width.js";
+import { stats, onActivity, pruneCache, CACHE_DIR } from "./api.js";
+import { onImageLoad } from "./image.js";
+import { onUrlBlocked } from "./sys.js";
+import { store } from "./store.js";
+import { rub } from "./product.js";
+
+export const TABS = [
+  { id: "catalog", label: "Каталог" },
+  { id: "deals", label: "Акции" },
+  { id: "recipes", label: "Рецепты" },
+  { id: "shops", label: "Магазины" },
+  { id: "cart", label: "Корзина" },
+  { id: "profile", label: "Профиль" },
+];
+
+const MIN_W = 64, MIN_H = 18;
+export const LOG_FILE = path.join(CACHE_DIR, "vv-cli.log");
+
+function log(e) {
+  try {
+    mkdirSync(CACHE_DIR, { recursive: true, mode: 0o700 });
+    appendFileSync(LOG_FILE, `${new Date().toISOString()} ${e?.stack ?? e}\n`, { mode: 0o600 });
+  } catch {}
+}
+
+export class App {
+  constructor({ views, headless = false, size } = {}) {
+    this.headless = headless;
+    this.screen = new Screen(headless ? { columns: size?.[0] ?? 120, rows: size?.[1] ?? 36, write() {} } : process.stdout);
+    this.g = new G(this.screen, this);
+    this.views = views;
+    this.stacks = {};
+    this.overlays = [];
+    this.hits = [];
+    this.overlayHits = 0;
+    this.frame = 0;
+    this.toastMsg = null;
+    this.lastClick = { t: 0, x: -1, y: -1 };
+    this.compare = new Map();
+    for (const t of TABS) this.stacks[t.id] = [views[t.id](this)];
+    const saved = store.pref("tab");
+    this.tab = TABS.some((t) => t.id === saved) ? saved : "catalog";
+    onActivity(() => this.invalidate());
+    onImageLoad(() => this.invalidate());
+    onUrlBlocked(() => this.toast("Это не ссылка ВкусВилла — не открываю", T.red));
+    store.listeners.add(() => this.invalidate());
+  }
+
+  get page() { const s = this.stacks[this.tab]; return s[s.length - 1]; }
+
+  start() {
+    const s = this.screen;
+    let restored = false;
+    const restore = () => {
+      if (restored) return;
+      restored = true;
+      try { s.leave(); this.input?.stop(); } catch {}
+    };
+    this.restore = restore;
+    s.enter();
+    process.on("exit", restore);
+    for (const sig of ["SIGTERM", "SIGHUP", "SIGINT"]) process.on(sig, () => this.quit());
+    // A stray rejection must not kill the session: log it and say so
+    process.on("unhandledRejection", (e) => { log(e); this.toast(`⚠ ${e?.message ?? e}`, T.red); });
+    process.on("uncaughtException", (e) => {
+      log(e);
+      store.saveNow();
+      restore();
+      console.error(`vkusvill-cli упал: ${e?.message ?? e}\nподробности: ${LOG_FILE}`);
+      process.exit(1);
+    });
+    process.stdout.on("resize", () => { s.resize(process.stdout.columns, process.stdout.rows); this.render(); });
+    this.input = new Input(process.stdin, (ev) => this.onEvent(ev));
+    this.input.start();
+    store.watch();
+    if (store.warning) this.toast(store.warning, T.orange);
+    this.ticker = setInterval(() => this.tick(), 90);
+    setTimeout(() => pruneCache().catch(log), 4000).unref();
+    this.page.onShow?.();
+    this.render();
+  }
+
+  quit() {
+    store.saveNow();
+    store.unwatch();
+    clearInterval(this.ticker);
+    this.restore?.();
+    process.exit(0);
+  }
+
+  tick() {
+    this.frame++;
+    // Pages load more data here, never from draw(): rendering stays free of side effects
+    this.page.tick?.();
+    const top = this.overlays.at(-1);
+    if (stats.active || stats.queued || this.page.busy?.() || top?.animated || this.toastMsg || this.page.animated) this.invalidate();
+    if (this.toastMsg && Date.now() > this.toastMsg.until) { this.toastMsg = null; this.invalidate(); }
+  }
+
+  // Coalesces redraws to at most one per ~16 ms
+  invalidate() {
+    if (this.pending) return;
+    this.pending = true;
+    const since = Date.now() - (this.lastRender ?? 0);
+    setTimeout(() => { this.pending = false; this.render(); }, Math.max(0, 16 - since));
+  }
+
+  // Clickable area registered during render; handlers: click(ev), wheel(dir), passive
+  hit(x, y, w, h, handlers) { this.hits.push({ x, y, w, h, ...handlers }); }
+
+  toast(msg, color = T.lime) {
+    this.toastMsg = { msg: String(msg), color, until: Date.now() + 2600 };
+    this.invalidate();
+  }
+
+  // ——— Navigation ———
+
+  switchTab(id) {
+    // Menus, the palette and dialogs belong to the tab they were opened on
+    this.closeOverlays();
+    if (this.tab === id) return;
+    this.tab = id;
+    store.setPref("tab", id);
+    this.page.onShow?.();
+    this.invalidate();
+  }
+
+  push(view) {
+    this.stacks[this.tab].push(view);
+    view.onShow?.();
+    this.invalidate();
+  }
+
+  pop() {
+    const s = this.stacks[this.tab];
+    if (s.length < 2) return false;
+    s.pop()?.onHide?.();
+    this.page.onShow?.();
+    this.invalidate();
+    return true;
+  }
+
+  toggleCompare(p) {
+    if (this.compare.has(p.id)) {
+      this.compare.delete(p.id);
+      return this.toast(`Убрано из сравнения · ${this.compare.size}`, T.violet);
+    }
+    if (this.compare.size >= 4) return this.toast("Сравнивать можно до 4 товаров", T.orange);
+    this.compare.set(p.id, p);
+    this.toast(`⇄ В сравнении ${this.compare.size} · X — сравнить`, T.violet);
+  }
+
+  openCompare() {
+    if (this.compare.size < 2) return this.toast("Отметьте хотя бы 2 товара клавишей x", T.violet);
+    this.views.compare(this);
+  }
+
+  overlay(o) {
+    this.overlays.push(o);
+    this.invalidate();
+    return o;
+  }
+
+  closeOverlay(o) {
+    this.overlays = this.overlays.filter((x) => x !== o);
+    this.invalidate();
+  }
+
+  closeOverlays() {
+    for (const o of this.overlays) if (!o.persistent) o.onClose?.();
+    this.overlays = this.overlays.filter((o) => o.persistent);
+    this.invalidate();
+  }
+
+  // ——— Events ———
+
+  onEvent(ev) {
+    if (ev.type === "key" && ev.ctrl && ev.name === "c") return this.quit();
+    if (ev.type === "key" && ev.ctrl && ev.name === "l") { this.screen.invalidateAll(); return this.render(); }
+    if (ev.type === "mouse") return this.onMouse(ev);
+    const top = this.overlays.at(-1);
+    if (top) { top.key(ev, this); return this.invalidate(); }
+    if (ev.type === "key" && ev.ctrl && ev.name === "k") return this.views.palette(this);
+    if (this.page.key?.(ev)) return this.invalidate();
+    if (ev.type !== "key") return;
+    if (ev.name === "escape") return this.pop();
+    const k = ev.hot ?? ev.name;
+    const n = Number(ev.ch);
+    if (ev.ch && n >= 1 && n <= TABS.length) return this.switchTab(TABS[n - 1].id);
+    if (ev.name === "tab" || ev.name === "backtab") {
+      const i = TABS.findIndex((t) => t.id === this.tab);
+      return this.switchTab(TABS[(i + (ev.name === "tab" ? 1 : TABS.length - 1)) % TABS.length].id);
+    }
+    if (k === "q") return this.quit();
+    if (k === "?" || k === "&" || ev.name === "f1") return this.views.help(this);
+    if (k === ":" || k === "^") return this.views.palette(this);
+    if (k === "b") return this.views.barcode(this);
+    if (k === "c" && !ev.shift) return this.switchTab("cart");
+  }
+
+  onMouse(ev) {
+    const inside = (h) => ev.x >= h.x && ev.x < h.x + h.w && ev.y >= h.y && ev.y < h.y + h.h;
+    // An open overlay is modal: the mouse only sees its areas
+    const modal = this.overlays.length > 0;
+    const from = modal ? this.overlayHits : 0;
+    if (ev.action === "wheelup" || ev.action === "wheeldown") {
+      const dir = ev.action === "wheelup" ? -1 : 1;
+      for (let i = this.hits.length - 1; i >= from; i--) if (this.hits[i].wheel && inside(this.hits[i])) { this.hits[i].wheel(dir); break; }
+      return this.invalidate();
+    }
+    if (ev.action !== "down" || ev.button !== 0) return;
+    const now = Date.now();
+    ev.double = now - this.lastClick.t < 400 && this.lastClick.x === ev.x && this.lastClick.y === ev.y;
+    this.lastClick = { t: now, x: ev.x, y: ev.y };
+    let handled = false;
+    for (let i = this.hits.length - 1; i >= from; i--) {
+      const h = this.hits[i];
+      if (h.click && !h.passive && inside(h)) { h.click(ev); handled = true; break; }
+    }
+    // A click outside the overlay closes it; a click on the header also goes through (switching tabs)
+    if (modal && !handled && !this.overlays.at(-1)?.persistent) {
+      this.closeOverlays();
+      if (ev.y === 0) {
+        for (let i = from - 1; i >= 0; i--) {
+          const h = this.hits[i];
+          if (h.click && inside(h)) { h.click(ev); break; }
+        }
+      }
+    }
+    this.invalidate();
+  }
+
+  // ——— Rendering ———
+
+  render() {
+    this.lastRender = Date.now();
+    const g = this.g, s = this.screen;
+    this.hits = [];
+    s.clear(T.bg);
+    if (s.w < MIN_W || s.h < MIN_H) {
+      g.textC(0, s.w, Math.floor(s.h / 2) - 1, "ВкусВилл не помещается", { fg: T.lime, bold: true });
+      g.textC(0, s.w, Math.floor(s.h / 2) + 1, `нужно хотя бы ${MIN_W}×${MIN_H}, сейчас ${s.w}×${s.h}`, { fg: T.dim });
+      this.overlayHits = 0;
+      return s.flush();
+    }
+    this.drawHeader(g);
+    const body = { x: 0, y: 1, w: s.w, h: s.h - 2 };
+    s.pushClip(body.x, body.y, body.w, body.h);
+    this.page.draw(g, body);
+    s.popClip();
+    this.drawStatus(g);
+    this.overlayHits = this.hits.length;
+    for (const o of this.overlays) o.draw(g, this);
+    s.flush();
+  }
+
+  drawHeader(g) {
+    const w = g.w;
+    g.fill(0, 0, w, 1, T.header);
+    let labels = TABS.map((t, i) => ` ${i + 1} ${t.label}${t.id === "cart" && store.count ? ` ${store.count}` : ""} `);
+    const cartW = store.count ? strWidth(` ▣ ${rub(store.total)} `) + 1 : 0;
+    let tabsW = labels.reduce((sum, l) => sum + strWidth(l), 0);
+    // Too narrow: drop the leading space of every tab, then the wordmark
+    if (4 + tabsW + cartW > w) { labels = labels.map((l) => l.slice(1)); tabsW -= labels.length; }
+    const full = 15 + tabsW + cartW <= w;
+    let x = g.text(0, 0, " ◆ ", { fg: T.lime, bg: T.greenD, bold: true });
+    if (full) {
+      x = g.text(x, 0, "Вкус", { fg: T.white, bg: T.greenD, bold: true });
+      x = g.text(x, 0, "Вилл ", { fg: T.lime, bg: T.greenD, bold: true });
+    }
+    x = g.text(x, 0, "▶", { fg: T.greenD, bg: T.header });
+    if (full) x += 1;
+    TABS.forEach((t, i) => {
+      const active = t.id === this.tab;
+      const label = labels[i];
+      if (x + strWidth(label) > w - cartW) return;
+      const x0 = x;
+      x = g.text(x, 0, label, { fg: active ? T.bg : T.sub, bg: active ? T.green : T.header, bold: active });
+      this.hit(x0, 0, x - x0, 1, { click: () => this.switchTab(t.id) });
+    });
+    // Right side: network activity and the cart total
+    let rx = w - 1;
+    if (store.count) {
+      const t = ` ▣ ${rub(store.total)} `;
+      rx = g.textR(rx + 1, 0, t, { fg: T.bg, bg: T.lime, bold: true }) - 1;
+      this.hit(rx + 1, 0, strWidth(t), 1, { click: () => this.switchTab("cart") });
+    }
+    const room = Math.max(0, rx - x - 1);
+    if (stats.active || stats.queued || this.page.busy?.()) {
+      g.textR(rx, 0, truncate(`${SPIN[this.frame % SPIN.length]} ${stats.queued ? `очередь ${stats.queued}` : "ВкусВилл"}`, room), { fg: T.lime, bg: T.header });
+    } else if (store.saveError) {
+      g.textR(rx, 0, truncate(`⚠ не сохранилось: ${store.saveError}`, Math.min(room, 50)), { fg: T.red, bg: T.header });
+    } else if (stats.lastError) {
+      g.textR(rx, 0, truncate(`⚠ ${stats.lastError}`, Math.min(room, 44)), { fg: T.red, bg: T.header });
+    }
+  }
+
+  drawStatus(g) {
+    const y = g.h - 1;
+    g.fill(0, y, g.w, 1, T.header);
+    const top = this.overlays.at(-1);
+    const hints = top?.hints?.() ?? this.page.hints?.() ?? [];
+    const all = [...hints, ...(top ? [] : [["?", "помощь"], ["^K", "команды"]])];
+    // A toast takes the right end of the line; hints never run under it
+    let toastW = 0;
+    if (this.toastMsg) {
+      const m = truncate(` ${this.toastMsg.msg} `, Math.max(10, Math.floor(g.w * 0.6)));
+      toastW = strWidth(m);
+      const bg = mix(this.toastMsg.color, T.bg, 0.15);
+      g.text(g.w - toastW, y, m, { fg: T.bg, bg, bold: true });
+    }
+    let x = 1;
+    for (const [k, label] of all) {
+      const need = strWidth(k) + strWidth(label) + 4;
+      if (x + need > g.w - toastW - 1) break;
+      x = g.key(x, y, k, label);
+    }
+  }
+}

package/src/cli.js

@@ -0,0 +1,159 @@
+// Plain-output commands: tables, colored when stdout is a terminal, and --json for scripts.
+
+import qrcode from "qrcode-generator";
+import * as api from "./api.js";
+import { normalize, rub, compactNum, qtyText, lineTotal, plural } from "./product.js";
+import { store, CART_MAX, QTY_MAX } from "./store.js";
+import { padEnd, padStart } from "./term/width.js";
+import { openState } from "./views/shops.js";
+
+const color = process.stdout.isTTY && !process.env.NO_COLOR;
+const c = (code) => (s) => (color ? `\x1b[${code}m${s}\x1b[0m` : String(s));
+const green = c("38;5;77"), lime = c("38;5;155"), dim = c("2"), bold = c("1"), orange = c("38;5;215"), yellow = c("38;5;221"), red = c("38;5;203");
+const width = () => Math.min(process.stdout.columns || 100, 120);
+
+const out = (s = "") => process.stdout.write(s + "\n");
+
+function productTable(items) {
+  const w = width();
+  const nameW = Math.max(20, w - 40);
+  for (const it of items) {
+    const p = normalize(it);
+    const price = p.old ? orange(padStart(rub(p.price), 9)) : bold(padStart(rub(p.price), 9));
+    const off = p.off ? orange(padStart(`−${p.off}%`, 5)) : "     ";
+    const rating = p.rating ? yellow("★") + padEnd(p.rating.toFixed(1).replace(".", ","), 4) : "     ";
+    out(`${dim(padStart(String(p.id), 7))}  ${padEnd(p.name, nameW)} ${rating} ${off} ${price}`);
+  }
+}
+
+export async function search(q, { json, sort, page = 1 }) {
+  if (!q) throw new Error("Что искать? vv search творог");
+  const d = await api.search(q, { page, sort: sort ?? "popularity" });
+  if (json) return out(JSON.stringify(d, null, 2));
+  out(`${green("◆")} ${bold(`«${q}»`)} ${dim(`· ${d.meta?.total ?? 0} ${plural(d.meta?.total ?? 0, "товар", "товара", "товаров")} · стр. ${d.meta?.page}/${d.meta?.pages}`)}`);
+  productTable(d.items ?? []);
+  if (d.meta?.has_more) out(dim(`  ещё: vv search ${q} --page ${page + 1}`));
+}
+
+export async function deals({ json, type }) {
+  const d = await api.discounts({ type });
+  if (json) return out(JSON.stringify(d, null, 2));
+  out(`${orange("%")} ${bold(type === "card" ? "Скидки по карте" : "Скидки от нескольких штук")} ${dim(`· ${d.meta?.total ?? 0}`)}`);
+  productTable(d.items ?? []);
+}
+
+function card(p) {
+  out(bold(p.name));
+  out(`${p.old ? orange(rub(p.price)) + " " + dim(`было ${rub(p.old)}`) : lime(rub(p.price))}${p.unit === "кг" ? dim(" за кг") : ""}  ${p.rating ? yellow("★ " + String(p.rating).replace(".", ",")) + dim(` · ${compactNum(p.votes)}`) : ""}`);
+  if (p.offInfo) out(orange(p.offInfo));
+  if (p.kcal != null) out(`${dim("на 100 г")}  Б ${p.p ?? "—"} · Ж ${p.f ?? "—"} · У ${p.c ?? "—"} · ${lime(Math.round(p.kcal) + " ккал")}`);
+  if (p.comp) out(`${dim("Состав:")} ${p.comp}`);
+  out(dim(p.url));
+}
+
+export async function product(id, { json }) {
+  if (!id) throw new Error("Нужен id товара: vv product 27695");
+  const d = await api.details(id);
+  if (json) return out(JSON.stringify(d, null, 2));
+  card(normalize(d));
+}
+
+export async function barcode(code, { json }) {
+  if (!/^\d{13}$/.test(code ?? "")) throw new Error("Нужен штрихкод EAN-13: 13 цифр");
+  const d = await api.barcode(code);
+  if (json) return out(JSON.stringify(d, null, 2));
+  card(normalize(d));
+}
+
+export async function recipes(q, { json }) {
+  const d = await api.recipes({ q });
+  if (json) return out(JSON.stringify(d, null, 2));
+  out(`${green("◆")} ${bold("Рецепты")} ${dim(`· ${d.meta?.total ?? 0}`)}`);
+  for (const r of d.items ?? []) {
+    out(`${bold(r.name)}  ${dim([r.cooking_time?.name, r.complexity?.name, r.portions && `${r.portions} порц.`].filter(Boolean).join(" · "))}`);
+    out(dim(`  ${(r.ingredients ?? []).map((i) => i.name).join(", ")}`));
+  }
+}
+
+export async function shops(q, { json }) {
+  // Filter by a metro station or city name, looked up in the reference lists of the first page
+  const first = await api.shops({ page: 1 });
+  let f = {};
+  if (q) {
+    // Best match wins: exact name, then a name starting with the query, then one containing it;
+    // on a tie a city beats a region and a metro station ("Волгоград" is the city, not the avenue)
+    const norm = (s) => s.toLowerCase().replace(/ё/g, "е").replace(/^(г|п|пгт|с|д|рп)\.\s*/, "").replace(/\s+(обл|край|респ)\.?$/, "").trim();
+    const ql = norm(q);
+    const rank = { city: 0, region: 1, subway: 2 };
+    let best = null;
+    for (const def of first.meta?.filters ?? []) {
+      if (!(def.param in rank)) continue;
+      for (const item of def.items) {
+        const n = norm(item.name);
+        const score = n === ql ? 0 : n.startsWith(ql) ? 1 : n.includes(ql) ? 2 : -1;
+        if (score < 0) continue;
+        const key = score * 10 + rank[def.param];
+        if (!best || key < best.key) best = { key, param: def.param, id: item.id };
+      }
+    }
+    if (!best) throw new Error(`Не знаю метро или город «${q}»`);
+    f = { [best.param]: best.id };
+  }
+  const d = Object.keys(f).length ? await api.shops({ page: 1, ...f }) : first;
+  if (json) return out(JSON.stringify(d, null, 2));
+  for (const s of d.items ?? []) {
+    const st = openState(s.schedule);
+    out(`${st ? (st.open ? lime("●") : red("○")) : " "} ${bold(s.address)}  ${dim([s.subway?.name && `м. ${s.subway.name}`, s.city?.name].filter(Boolean).join(" · "))}`);
+    out(dim(`  ${st?.text ?? s.schedule ?? ""}${s.phone?.length ? " · " + s.phone.join(", ") : ""}`));
+  }
+  if (d.meta?.has_more) out(dim(`  …и ещё ${d.meta.total - (d.items?.length ?? 0)}`));
+}
+
+export function printQR(text) {
+  const q = qrcode(0, "L");
+  q.addData(text);
+  q.make();
+  const n = q.getModuleCount(), quiet = 2, size = n + quiet * 2;
+  const dark = (r, col) => r >= quiet && col >= quiet && r < n + quiet && col < n + quiet && q.isDark(r - quiet, col - quiet);
+  for (let y = 0; y < size; y += 2) {
+    let line = "  ";
+    for (let x = 0; x < size; x++) {
+      const top = dark(y, x), bot = y + 1 < size ? dark(y + 1, x) : false;
+      line += `\x1b[38;5;${top ? 16 : 231}m\x1b[48;5;${bot ? 16 : 231}m▀`;
+    }
+    out(line + "\x1b[0m");
+  }
+}
+
+export async function cart(args, { json }) {
+  const [sub, id, qty] = args;
+  if (sub === "add") {
+    if (!/^\d{1,9}$/.test(id ?? "")) throw new Error("vv cart add <id> [кол-во] — id товара числом");
+    const p = normalize(await api.details(id));
+    const q = qty === undefined ? (p.unit === "кг" ? 0.5 : 1) : Number(String(qty).replace(",", "."));
+    if (!Number.isFinite(q) || q <= 0 || q > QTY_MAX) throw new Error(`Количество — число от 0,01 до ${QTY_MAX}`);
+    if (!store.qty(p.id) && store.count >= CART_MAX) throw new Error(`В корзине уже ${CART_MAX} позиций — больше ВкусВилл не принимает`);
+    store.add(p, q);
+    store.saveNow();
+    return out(`${lime("✚")} ${p.name} ${dim(`· в корзине ${qtyText(p, store.qty(p.id))}`)}`);
+  }
+  if (sub === "clear") { store.clearCart(); store.saveNow(); return out("Корзина очищена"); }
+  if (sub === "link") {
+    if (!store.cart.length) throw new Error("Корзина пуста");
+    const d = await api.cartLink(store.cart.map((l) => ({ id: l.p.id, q: l.q })));
+    if (json) return out(JSON.stringify(d, null, 2));
+    out();
+    if (process.stdout.isTTY) printQR(d.link);
+    out();
+    out(`  ${lime(d.link)}`);
+    out(dim(`  ${store.count} ${plural(store.count, "позиция", "позиции", "позиций")} · ${rub(store.total)} · оплата и доставка — у ВкусВилла`));
+    return;
+  }
+  if (json) return out(JSON.stringify(store.cart.map((l) => ({ id: l.p.id, name: l.p.name, q: l.q, price: l.p.price })), null, 2));
+  if (!store.cart.length) return out(dim("Корзина пуста — npx vkusvill-cli, чтобы набрать"));
+  const nameW = Math.max(20, width() - 30);
+  for (const l of store.cart) out(`${padEnd(l.p.name, nameW)} ${padStart(qtyText(l.p, l.q), 8)} ${bold(padStart(rub(lineTotal(l.p, l.q)), 10))}`);
+  out(`${padEnd("Итого", nameW + 9)} ${lime(bold(padStart(rub(store.total), 10)))}`);
+  out(dim("vv cart link — ссылка и QR-код"));
+}
+

package/src/image.js

@@ -0,0 +1,144 @@
+// Product and recipe photos: WebP → RGBA (wasm, no system libraries) → pixels sized to terminal cells.
+// One pixel is half a cell: the top colour is the ▀ glyph, the bottom one is the cell background.
+
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { diskGet, diskPut } from "./api.js";
+import { safeUrl } from "./safe.js";
+
+const require = createRequire(import.meta.url);
+const MAX_BYTES = 8 * 1024 * 1024;   // larger downloads are refused
+const MAX_PIXELS = 25e6;             // larger decoded images are refused
+const KEEP_WIDTH = 480;              // decoded images are shrunk right away: we never draw wider than this
+const DECODED_LIMIT = 40;
+const RESIZED_LIMIT = 300;
+
+let decoder = null;
+function getDecoder() {
+  decoder ??= (async () => {
+    const mod = await import("@jsquash/webp/decode.js");
+    const wasm = require.resolve("@jsquash/webp/codec/dec/webp_dec.wasm");
+    await mod.init(await WebAssembly.compile(await readFile(wasm)));
+    return mod.default;
+  })();
+  return decoder;
+}
+
+const decoded = new Map(); // url → { w, h, data } | Promise | Error
+const resized = new Map(); // url|w|h|mode → { w, h, px }
+let onLoad = () => {};
+export function onImageLoad(fn) { onLoad = fn; }
+
+async function fetchBytes(url) {
+  const hit = await diskGet("img", url, 30 * 24 * 3600e3);
+  if (hit) return Buffer.from(hit, "base64");
+  const res = await fetch(url, { signal: AbortSignal.timeout(15e3) });
+  if (!res.ok) throw new Error(`photo ${res.status}`);
+  if (!safeUrl(res.url, "image")) throw new Error("photo redirected off VkusVill");
+  if (+(res.headers.get("content-length") ?? 0) > MAX_BYTES) throw new Error("photo too large");
+  const buf = Buffer.from(await res.arrayBuffer());
+  if (buf.length > MAX_BYTES) throw new Error("photo too large");
+  diskPut("img", url, buf.toString("base64"));
+  return buf;
+}
+
+// Box-filter downscale of RGBA to at most KEEP_WIDTH wide, alpha flattened onto white
+function shrink({ width, height, data }) {
+  const s = Math.min(1, KEEP_WIDTH / width);
+  const w = Math.max(1, Math.round(width * s)), h = Math.max(1, Math.round(height * s));
+  const out = new Uint8ClampedArray(w * h * 4);
+  for (let y = 0; y < h; y++) {
+    const y0 = Math.floor((y * height) / h), y1 = Math.max(y0 + 1, Math.floor(((y + 1) * height) / h));
+    for (let x = 0; x < w; x++) {
+      const x0 = Math.floor((x * width) / w), x1 = Math.max(x0 + 1, Math.floor(((x + 1) * width) / w));
+      let r = 0, g = 0, b = 0, n = 0;
+      for (let sy = y0; sy < y1; sy++) for (let sx = x0; sx < x1; sx++) {
+        const i = (sy * width + sx) * 4, a = data[i + 3] / 255;
+        r += data[i] * a + 255 * (1 - a); g += data[i + 1] * a + 255 * (1 - a); b += data[i + 2] * a + 255 * (1 - a); n++;
+      }
+      const o = (y * w + x) * 4;
+      out[o] = r / n; out[o + 1] = g / n; out[o + 2] = b / n; out[o + 3] = 255;
+    }
+  }
+  return { w, h, data: out };
+}
+
+async function load(url) {
+  const decode = await getDecoder();
+  const buf = await fetchBytes(url);
+  const img = await decode(buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength));
+  if (img.width * img.height > MAX_PIXELS) throw new Error("photo too large");
+  return shrink(img);
+}
+
+// Bounding box of the content inside a plain light margin: the product gets bigger on a dark screen
+function contentBox(img) {
+  const { w, h, data } = img;
+  const light = (i) => data[i] > 238 && data[i + 1] > 238 && data[i + 2] > 238;
+  let x0 = w, y0 = h, x1 = -1, y1 = -1;
+  for (let y = 0; y < h; y += 2) for (let x = 0; x < w; x += 2) {
+    if (!light((y * w + x) * 4)) { if (x < x0) x0 = x; if (x > x1) x1 = x; if (y < y0) y0 = y; if (y > y1) y1 = y; }
+  }
+  if (x1 < 0) return { x: 0, y: 0, w, h };
+  const pad = Math.round(Math.max(x1 - x0, y1 - y0) * 0.06);
+  x0 = Math.max(0, x0 - pad); y0 = Math.max(0, y0 - pad); x1 = Math.min(w - 1, x1 + pad); y1 = Math.min(h - 1, y1 + pad);
+  return { x: x0, y: y0, w: x1 - x0 + 1, h: y1 - y0 + 1 };
+}
+
+function remember(map, key, value, limit) {
+  map.delete(key);
+  map.set(key, value);
+  while (map.size > limit) map.delete(map.keys().next().value);
+}
+
+// Pixels for a maxW × maxH cell area; mode is "contain" (fit inside) or "cover" (fill, cropping).
+// Returns null while loading, { error: true } on failure.
+export function image(url, maxW, maxH, { mode = "contain", trim = true } = {}) {
+  if (!url || maxW < 2 || maxH < 1) return null;
+  if (!safeUrl(url, "image")) return { error: true };
+  const rkey = `${url}|${maxW}|${maxH}|${mode}`;
+  if (resized.has(rkey)) return resized.get(rkey);
+  const d = decoded.get(url);
+  if (!d) {
+    const p = load(url).then(
+      (img) => { remember(decoded, url, img, DECODED_LIMIT); onLoad(); },
+      (e) => { remember(decoded, url, e instanceof Error ? e : new Error(String(e)), DECODED_LIMIT); onLoad(); },
+    );
+    decoded.set(url, p);
+    return null;
+  }
+  if (d instanceof Promise) return null;
+  if (d instanceof Error) return { error: true };
+  const box = trim ? contentBox(d) : { x: 0, y: 0, w: d.w, h: d.h };
+  const pxH = maxH * 2;
+  let tw, th, sx = box.x, sy = box.y, sw = box.w, sh = box.h;
+  if (mode === "cover") {
+    tw = maxW; th = pxH;
+    const ar = tw / th;
+    if (sw / sh > ar) { const nw = sh * ar; sx += (sw - nw) / 2; sw = nw; } else { const nh = sw / ar; sy += (sh - nh) / 2; sh = nh; }
+  } else {
+    const s = Math.min(maxW / sw, pxH / sh);
+    tw = Math.max(1, Math.round(sw * s)); th = Math.max(2, Math.round(sh * s));
+    if (th % 2) th++;
+  }
+  const px = new Int32Array(tw * th);
+  const data = d.data, W = d.w;
+  // Average over the source area of every target pixel (sampled, up to 4×4 points)
+  for (let ty = 0; ty < th; ty++) {
+    const ya = sy + (ty * sh) / th, yb = sy + ((ty + 1) * sh) / th;
+    for (let tx = 0; tx < tw; tx++) {
+      const xa = sx + (tx * sw) / tw, xb = sx + ((tx + 1) * sw) / tw;
+      let r = 0, g = 0, b = 0, n = 0;
+      const stepY = Math.max(1, Math.floor((yb - ya) / 4)), stepX = Math.max(1, Math.floor((xb - xa) / 4));
+      for (let y = Math.floor(ya); y < Math.max(Math.floor(ya) + 1, Math.ceil(yb)); y += stepY)
+        for (let x = Math.floor(xa); x < Math.max(Math.floor(xa) + 1, Math.ceil(xb)); x += stepX) {
+          const i = (Math.min(d.h - 1, y) * W + Math.min(W - 1, x)) * 4;
+          r += data[i]; g += data[i + 1]; b += data[i + 2]; n++;
+        }
+      px[ty * tw + tx] = ((r / n) << 16) | ((g / n) << 8) | (b / n);
+    }
+  }
+  const out = { w: tw, h: th, px };
+  remember(resized, rkey, out, RESIZED_LIMIT);
+  return out;
+}