@sportsdataverse/sdvtables 0.0.0-stage → 0.2.0

package/dist/engine-BFIPJUlC.d.ts

@@ -0,0 +1,190 @@
+import { RowFilter } from '@sportsdataverse/sdvplot';
+import { T as TableSpec, C as ColumnSpec } from './spec-A88vJX5A.js';
+
+type SortDir = "asc" | "desc";
+interface Sort {
+    readonly col: string;
+    readonly dir: SortDir;
+}
+/** A column filter as a function: tests the column's cell `value` (the whole `row` comes along for context). */
+type ValuePredicate<Row> = (value: unknown, row: Row) => boolean;
+/** What `setFilter` takes for a column: a predicate on its value, a case-insensitive substring, or an exact number or boolean. */
+type FilterValue<Row> = ValuePredicate<Row> | string | number | boolean;
+type Comparator = (a: unknown, b: unknown) => number;
+/** J31: what `subscribe` listeners receive. Every mutation emits exactly one event. */
+type TableEvent = {
+    readonly type: "change";
+} | {
+    readonly type: "hover";
+    readonly id: string | null;
+} | {
+    readonly type: "select";
+    readonly ids: ReadonlySet<string>;
+};
+/**
+ * Task 10 (A45, A48): the keyboard cursor of an interactive table. `row` is the body row holding the grid's one tab
+ * stop, as a page-relative index (that row's `data-row`); `col` is the column `s` sorts, null until `h`/`l` picks one.
+ */
+interface TableCursor {
+    readonly row: number;
+    readonly col: string | null;
+}
+/** The whole user-controlled state of a table: sort, filters, page, hidden columns, and the J31 link fields. Immutable; every mutation replaces it. */
+interface TableState<Row> {
+    readonly sort: Sort | null;
+    readonly filters: Readonly<Record<string, FilterValue<Row>>>;
+    readonly globalFilter: string;
+    /** 0-based */
+    readonly page: number;
+    /** positive integer, or Infinity for "all rows" */
+    readonly pageSize: number;
+    /** column keys hidden by toggleColumn */
+    readonly hidden: readonly string[];
+    /** J31: set by setExternalFilter; ANDed with the column and global filters */
+    readonly externalFilter: RowFilter<Row> | null;
+    /** J31: row ids (see `rowId`); NOT pruned to the rows present, so a linked store's ids round-trip intact */
+    readonly selection: ReadonlySet<string>;
+    /** Task 10: the keyboard cursor; its row is kept on the current page */
+    readonly cursor: TableCursor;
+}
+/** What `Table.getSnapshot()` returns: the state plus the derived visible page. Referentially stable until the next mutation. */
+interface TableSnapshot<Row> {
+    readonly state: TableState<Row>;
+    /** the visible page: filtered → sorted → sliced */
+    readonly rows: readonly Row[];
+    readonly filteredCount: number;
+    /** always at least 1 */
+    readonly pageCount: number;
+}
+/** Initial state for `createTable`; `pageSize` beats `spec.interactive.pageSize`, and `sort` must name a spec column. */
+interface TableOptions {
+    readonly pageSize?: number;
+    readonly sort?: Sort;
+}
+/**
+ * The headless table engine: holds the rows and a `TableState`, derives the visible page, and notifies subscribers.
+ * Renderers (static HTML, hydrate, React) read `rows`/`columns` and call the setters; nothing here touches the DOM.
+ *
+ * @example A hover set before any view attaches: the view lights it when it does (getHover)
+ * ```ts
+ * import { createTable, defineTable } from "@sportsdataverse/sdvtables";
+ * import { hydrate, renderHTML } from "@sportsdataverse/sdvtables/html";
+ *
+ * // 2024 AFC: Kansas City 15 wins, Buffalo 13
+ * const spec = defineTable<{ team: string; wins: number }>()
+ *   .columns((c) => [c.text("team"), c.int("wins")])
+ *   .rowKey("team")
+ *   .build();
+ * const table = createTable(spec, [
+ *   { team: "KC", wins: 15 },
+ *   { team: "BUF", wins: 13 },
+ * ]);
+ * table.setHover("BUF"); // a linked figure's hover, before the table is on the page
+ * table.getHover(); // "BUF"
+ * const root = document.createElement("div");
+ * root.innerHTML = renderHTML(table, { fonts: false });
+ * hydrate(root, table); // Buffalo's row gets sdvt-hover as it attaches
+ * root;
+ * ```
+ */
+interface Table<Row> {
+    readonly spec: TableSpec<Row>;
+    /** the source rows: the ones given to `createTable`, or the last `setRows` */
+    readonly allRows: readonly Row[];
+    readonly state: TableState<Row>;
+    readonly rows: readonly Row[];
+    readonly filteredCount: number;
+    readonly pageCount: number;
+    /** visible columns in spec order */
+    readonly columns: readonly ColumnSpec<Row>[];
+    setSort(col: string, dir: SortDir | null): void;
+    setFilter(col: string, filter: FilterValue<Row> | null | undefined): void;
+    setGlobalFilter(text: string): void;
+    setPage(n: number): void;
+    setPageSize(n: number): void;
+    toggleColumn(col: string, visible?: boolean): void;
+    /**
+     * Replace the source rows (a React parent's new array, a live feed). Sort, filters, the external filter, hidden
+     * columns and selection are kept; the page is clamped to the new page count; one `"change"` event. Without a
+     * `rowKey`, row ids are indices into the NEW rows, so a kept selection means the rows at those positions.
+     */
+    setRows(rows: readonly Row[]): void;
+    /** J31: `String(row[spec.rowKey])` ("" when missing), else the row's index in `allRows` */
+    rowId(row: Row): string;
+    /** J31: same function again is a no-op; a new one resets the page */
+    setExternalFilter(filter: RowFilter<Row> | null): void;
+    /** J31: emits `{ type: "select" }`; an equal set is a no-op */
+    setSelection(ids: ReadonlySet<string>): void;
+    getSelection(): ReadonlySet<string>;
+    /** J31: emits `{ type: "hover" }` without changing state; the same id twice in a row is a no-op */
+    setHover(id: string | null): void;
+    /**
+     * J31: the last `setHover` id, or null. A view that attaches (`hydrate`) or mounts (`<SdvTable table/>`) after a
+     * hover reads it, since no event comes until the hover changes.
+     */
+    getHover(): string | null;
+    /**
+     * Task 10: move the keyboard cursor. `row` is clamped to the current page; `col` must name a spec column, or be
+     * null. One `"change"` event; an equal cursor (after clamping) is a no-op, and a non-finite `row` is ignored.
+     */
+    setCursor(row: number, col: string | null): void;
+    subscribe(fn: (event: TableEvent) => void): () => void;
+    /** referentially stable until the next mutation — what useSyncExternalStore reads */
+    getSnapshot(): TableSnapshot<Row>;
+}
+/** Phase 4 column kinds whose values sort numerically. */
+declare const NUMERIC_KINDS: ReadonlySet<string>;
+/** null, undefined, "", NaN, and an invalid `Date` are missing; `withMissingLast` sorts them last. */
+declare function isMissing(v: unknown): boolean;
+/**
+ * The comparator `applySort` uses for `col`: its own `compare`, else numeric for a numeric kind or numeric samples, by
+ * time for `Date` samples, else `en`-locale text.
+ * Engine plumbing for custom renderers: it may change before 1.0.
+ *
+ * @beta
+ */
+declare function comparatorFor<Row>(col: ColumnSpec<Row>, rows: readonly Row[]): Comparator;
+/** Missing values sort last in BOTH directions; never returns NaN. */
+declare function withMissingLast(cmp: Comparator, dir: SortDir): Comparator;
+/**
+ * The spec's column with this key; throws `TableSpecError` naming every column when there is none.
+ * Engine plumbing for custom renderers: it may change before 1.0.
+ *
+ * @beta
+ */
+declare function findColumn<Row>(spec: TableSpec<Row>, key: string): ColumnSpec<Row>;
+/**
+ * A sorted copy of `rows` (stable; missing values last in both directions); `sort` null keeps the input order.
+ * Engine plumbing for custom renderers: it may change before 1.0.
+ *
+ * @beta
+ */
+declare function applySort<Row>(spec: TableSpec<Row>, rows: readonly Row[], sort: Sort | null): Row[];
+/**
+ * The rows `state` keeps, in input order: its external filter, every column filter and the global search over the
+ * visible columns, all ANDed.
+ * Engine plumbing for custom renderers: it may change before 1.0.
+ *
+ * @beta
+ */
+declare function applyFilters<Row>(spec: TableSpec<Row>, rows: readonly Row[], state: TableState<Row>): Row[];
+/**
+ * Page `page` (0-based, clamped to the pages there are) of `rows` at `pageSize` (Infinity: all of them), and the
+ * page count, at least 1.
+ * Engine plumbing for custom renderers: it may change before 1.0.
+ *
+ * @beta
+ */
+declare function paginate<Row>(rows: readonly Row[], page: number, pageSize: number): {
+    rows: Row[];
+    pageCount: number;
+};
+/** Header-click cycle shared by hydrate and React: asc → desc → none. */
+declare function nextSortDir(current: Sort | null, col: string): SortDir | null;
+/**
+ * Build a headless `Table` over `rows`: sort, filter, paginate, hide columns, and subscribe to changes.
+ * Throws `TableSpecError` for an unknown column or an invalid page size; never mutates `rows`.
+ */
+declare function createTable<Row>(spec: TableSpec<Row>, rows: readonly Row[], options?: TableOptions): Table<Row>;
+
+export { type Comparator as C, type FilterValue as F, NUMERIC_KINDS as N, type Sort as S, type TableCursor as T, type ValuePredicate as V, type Table as a, type SortDir as b, createTable as c, type TableEvent as d, type TableOptions as e, type TableSnapshot as f, type TableState as g, applyFilters as h, applySort as i, comparatorFor as j, findColumn as k, isMissing as l, nextSortDir as n, paginate as p, withMissingLast as w };

package/dist/export.d.ts

@@ -0,0 +1,88 @@
+import { Aspect, Gravity } from '@sportsdataverse/sdvplot/export';
+import { T as TableSpec } from './spec-A88vJX5A.js';
+import '@sportsdataverse/sdvplot';
+
+type TableItem<Row> = {
+    spec: TableSpec<Row>;
+    rows: readonly Row[];
+} | string;
+interface ComposeOptions {
+    title?: string;
+    subtitle?: string;
+    caption?: string;
+    sourceNote?: string;
+    captionRule?: boolean;
+}
+interface GridOptions extends ComposeOptions {
+    ncol?: number;
+    gap?: number;
+    align?: "top" | "center" | "bottom";
+    labels?: readonly string[];
+}
+interface StackOptions extends ComposeOptions {
+    gap?: number;
+    align?: "left" | "center" | "right";
+}
+/**
+ * A group value as `batchToPNG` puts it in a file name (Python `gt_save_batch`): each run of characters outside
+ * `A-Za-z0-9._-` becomes "-", the ends are trimmed of "-", and it is lower-cased.
+ * Export plumbing: it may change before 1.0.
+ *
+ * @beta
+ */
+declare function slug(value: unknown): string;
+/** Title/subtitle above, caption/source note below — the shared frame of gt_grid and gt_stack_tables. */
+declare function composePage(body: string, { title, subtitle, caption, sourceNote, captionRule }?: ComposeOptions): string;
+/** Port of gt_grid: small multiples, `ncol` across, rows follow from the count. */
+declare function gridTables<Row>(items: readonly TableItem<Row>[], { ncol, gap, align, labels, ...compose }?: GridOptions): string;
+/** Port of gt_stack_tables: a vertical stack. */
+declare function stackTables<Row>(items: readonly TableItem<Row>[], { gap, align, ...compose }?: StackOptions): string;
+
+/**
+ * Options for {@link htmlToPNG} and {@link tableToPNG}; defaults are Python `gt_save_crop`'s. Its `expand` (the page
+ * captured before trimming) is fixed here, as it only has to leave background around the content. (The HTML itself
+ * takes `RenderOptions` from `@sportsdataverse/sdvtables/html`.)
+ */
+interface PNGOptions {
+    /** the final image width in pixels, the height following (Python `width`); absent: the rendered width */
+    width?: number;
+    /** the rendering zoom (Python `zoom`); default 2, a sharp (retina) image */
+    deviceScaleFactor?: number;
+    /** the color around the content; default "white" */
+    background?: string;
+    /** image pixels of `background` left around the trimmed content (Python `whitespace`, truncated to an integer); default 50 */
+    whitespace?: number;
+    /** stylesheet URLs (Google Fonts) awaited via document.fonts.ready */
+    fontLinks?: readonly string[];
+    /** also write the PNG here (must end in .png) */
+    file?: string;
+}
+/** Options for {@link socialCrop}; defaults are Python `gt_social_crop`'s (whitespace 60). */
+interface SocialCropOptions extends PNGOptions {
+    aspect?: Aspect;
+    gravity?: Gravity;
+}
+/** Options for {@link batchToPNG}, as Python `gt_save_batch` (no `width`; each file is named by its group). */
+interface BatchOptions extends Omit<PNGOptions, "width" | "file"> {
+    dir: string;
+    matchWidth?: boolean;
+}
+/**
+ * gt_save_crop for any HTML: rendered at `deviceScaleFactor`, trimmed to its content, `whitespace` image pixels of
+ * `background` put back around it, then scaled to `width` when given. An image past Chromium's canvas limit (65,535
+ * px a side, 268,435,456 px in all; near 1,000 plain rows at zoom 2) throws `SdvplotError` naming its size, before
+ * anything is drawn or written.
+ */
+declare function htmlToPNG(html: string, options?: PNGOptions): Promise<Uint8Array>;
+/** gt_save_crop: {@link htmlToPNG} of the rendered table. */
+declare function tableToPNG<Row>(spec: TableSpec<Row>, rows: readonly Row[], options?: PNGOptions): Promise<Uint8Array>;
+/** gt_social_crop: the trimmed, padded table on a fixed-ratio canvas placed by `gravity`; the table is never cropped. */
+declare function socialCrop<Row>(spec: TableSpec<Row>, rows: readonly Row[], { aspect, gravity, ...rest }?: SocialCropOptions): Promise<Uint8Array>;
+/**
+ * gt_save_batch: one image per group value, `{group}` in the file name replaced by `slug(value)`. A group whose table
+ * fails to build (`build` or the spec throws) is skipped and named in one warning at the end; when none builds, the
+ * error lists every failure. Python's `quiet` progress lines are not ported.
+ */
+declare function batchToPNG<Row, G extends keyof Row>(rows: readonly Row[], group: G, build: (groupRows: Row[], value: Row[G]) => TableItem<Row>, filePattern: string, { dir, matchWidth, ...rest }: BatchOptions): Promise<string[]>;
+
+export { type BatchOptions, type ComposeOptions, type GridOptions, type PNGOptions, type SocialCropOptions, type StackOptions, type TableItem, batchToPNG, composePage, gridTables, htmlToPNG, slug, socialCrop, stackTables, tableToPNG };

package/dist/export.js

@@ -0,0 +1,310 @@
+import { renderHTML } from './chunk-VLF2S6VW.js';
+import './chunk-3TJR7TKS.js';
+import { escapeHtml, escapeAttr } from './chunk-R375P3MN.js';
+import './chunk-UTOVFIFT.js';
+import { mkdir, writeFile } from 'fs/promises';
+import { join } from 'path';
+import { InputError, SdvplotError, warn, OptionalDependencyError } from '@sportsdataverse/sdvplot';
+import { parseAspect, parseGravity, checkColor, peerMissing, canvasFor, offsetFor } from '@sportsdataverse/sdvplot/export';
+
+var COMPOSE_CSS = ".sdvt-compose{display:inline-block;font-family:system-ui,-apple-system,sans-serif}.sdvt-compose-title{font-size:28px;font-weight:700;color:#111111;text-align:center;margin:0 0 4px}.sdvt-compose-title:last-child{margin-bottom:12px}.sdvt-compose-subtitle{font-size:16px;font-weight:400;color:#666666;text-align:center;margin:0 0 12px}.sdvt-compose-caption{font-size:12px;font-weight:400;color:#8A8A8A;text-align:center;margin:10px 0 0}.sdvt-compose-source{font-size:12px;font-weight:400;color:#8A8A8A;text-align:right;margin:6px 0 0}.sdvt-compose-rule{border-bottom:1px solid #8A8A8A;padding-bottom:6px}.sdvt-compose-label{font-size:12px;font-weight:600;color:#555555;text-align:left;margin:0 0 6px}";
+function slug(value) {
+  return String(value).replace(/[^A-Za-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+}
+function itemHTML(item) {
+  return typeof item === "string" ? item : renderHTML(item.spec, item.rows);
+}
+function checkItems(items) {
+  if (items.length === 0) throw new InputError("at least one table is required");
+}
+function checkPixels(name, value) {
+  if (!(Number.isFinite(value) && value >= 0))
+    throw new InputError(`${name} must be a non-negative number of pixels, got ${String(value)}`);
+}
+function placeOf(align, places) {
+  const place = places[align];
+  if (place === void 0)
+    throw new InputError(
+      `align must be one of ${Object.keys(places).join(", ")}, got ${JSON.stringify(align)}`
+    );
+  return place;
+}
+var WRAPPER = /<div class="sdvt [^"]*" id="([A-Za-z][\w-]*)"/g;
+function uniqueIds(body) {
+  const starts = [...body.matchAll(WRAPPER)];
+  const taken = new Set(starts.map((m) => m[1]));
+  if (taken.size === starts.length) return body;
+  const seen = /* @__PURE__ */ new Set();
+  let out = body.slice(0, starts[0]?.index);
+  starts.forEach((m, i) => {
+    const id = m[1];
+    let table = body.slice(m.index, starts[i + 1]?.index);
+    if (seen.has(id)) {
+      let n2 = 2;
+      while (taken.has(`${id}-${n2}`)) n2++;
+      const to = `${id}-${n2}`;
+      taken.add(to);
+      table = table.replace(new RegExp(`(\\s(?:id|for)=")${id}(?=["-])`, "g"), `$1${to}`).replace(
+        /<style>[\s\S]*?<\/style>/g,
+        (css) => (
+          // a selector only: the next brace is the rule's `{`, so a color equal to the id (`#fade;`) is left alone
+          css.replace(new RegExp(`#${id}(?![\\w-])(?=[^{}]*\\{)`, "g"), `#${to}`)
+        )
+      );
+    }
+    seen.add(id);
+    out += table;
+  });
+  return out;
+}
+function composePage(body, { title, subtitle, caption, sourceNote, captionRule = false } = {}) {
+  const head = title || subtitle ? `<header class="sdvt-compose-head">${title ? `<div class="sdvt-compose-title">${escapeHtml(title)}</div>` : ""}${subtitle ? `<p class="sdvt-compose-subtitle">${escapeHtml(subtitle)}</p>` : ""}</header>` : "";
+  const foot = caption || sourceNote ? `<footer class="sdvt-compose-foot">${caption ? `<p class="sdvt-compose-caption${captionRule ? " sdvt-compose-rule" : ""}">${escapeHtml(caption)}</p>` : ""}${sourceNote ? `<p class="sdvt-compose-source">${escapeHtml(sourceNote)}</p>` : ""}</footer>` : "";
+  return `<div class="sdvt-compose"><style>${COMPOSE_CSS}</style>${head}${uniqueIds(body)}${foot}</div>`;
+}
+function gridTables(items, { ncol = 2, gap = 24, align = "top", labels, ...compose } = {}) {
+  checkItems(items);
+  if (!Number.isInteger(ncol) || ncol < 1)
+    throw new InputError(`ncol must be an integer of at least 1, got ${String(ncol)}`);
+  const place = placeOf(align, { top: "start", center: "center", bottom: "end" });
+  checkPixels("gap", gap);
+  if (labels !== void 0 && labels.length === 0)
+    throw new InputError("labels must be non-empty; omit it for no labels");
+  const cells = items.map((item, i) => {
+    const label = labels === void 0 ? "" : `<div class="sdvt-compose-label">${escapeHtml(labels[i % labels.length] ?? "")}</div>`;
+    return `<div class="sdvt-compose-cell">${label}${itemHTML(item)}</div>`;
+  });
+  const grid = `<div class="sdvt-grid" style="display:grid;grid-template-columns:repeat(${ncol},max-content);gap:${gap}px;align-items:${place};justify-content:center">${cells.join("")}</div>`;
+  return composePage(grid, compose);
+}
+function stackTables(items, { gap = 16, align = "center", ...compose } = {}) {
+  checkItems(items);
+  const place = placeOf(align, { left: "flex-start", center: "center", right: "flex-end" });
+  checkPixels("gap", gap);
+  const stack = `<div class="sdvt-stack" style="display:flex;flex-direction:column;gap:${gap}px;align-items:${place}">${items.map(itemHTML).join("")}</div>`;
+  return composePage(stack, compose);
+}
+
+// src/export/index.ts
+var VIEWPORT = 1200;
+var EXPAND = 5;
+var MAX_SIDE = 65535;
+var MAX_AREA = 32768 * 8192;
+var REMEDY = "put fewer rows in each image (rows.slice() a page at a time, batchToPNG by a group column, or gridTables to set tables side by side), or lower deviceScaleFactor";
+var n = (v) => v.toLocaleString("en-US");
+function checkCanvas(what, w, h, o) {
+  if (w <= MAX_SIDE && h <= MAX_SIDE && w * h <= MAX_AREA) return;
+  throw new SdvplotError(
+    `${what} ${n(w)} \xD7 ${n(h)} px at deviceScaleFactor ${o.deviceScaleFactor}, past Chromium's canvas limit of ${n(MAX_SIDE)} px a side and ${n(MAX_AREA)} px in all; ${REMEDY}`
+  );
+}
+var checkPng = (file) => {
+  if (!/\.png$/i.test(file)) throw new InputError(`file must end in .png, got ${JSON.stringify(file)}`);
+};
+function resolve({
+  width,
+  deviceScaleFactor = 2,
+  background = "white",
+  whitespace = 50,
+  fontLinks = [],
+  file
+}) {
+  if (width !== void 0 && !(Number.isInteger(width) && width > 0))
+    throw new InputError(`width must be a positive integer of pixels, got ${String(width)}`);
+  if (!(Number.isFinite(deviceScaleFactor) && deviceScaleFactor > 0))
+    throw new InputError(`deviceScaleFactor must be a positive number, got ${String(deviceScaleFactor)}`);
+  if (!(Number.isFinite(whitespace) && whitespace >= 0))
+    throw new InputError(`whitespace must be a non-negative number of pixels, got ${String(whitespace)}`);
+  checkColor("background", background);
+  if (file !== void 0) checkPng(file);
+  return { width, deviceScaleFactor, background, whitespace: Math.trunc(whitespace), fontLinks, file };
+}
+async function launch() {
+  const pw = await import('playwright').catch((e) => {
+    throw new OptionalDependencyError(
+      peerMissing(e, "playwright") ? "sdvtables/export needs the optional peer playwright, which is not installed: pnpm add -D playwright && pnpm exec playwright install chromium" : `sdvtables/export could not load the optional peer playwright (installed, but it failed to load): ${String(e)}`,
+      { cause: e }
+    );
+  });
+  try {
+    return await pw.chromium.launch();
+  } catch (e) {
+    if (e instanceof Error && /Executable doesn't exist/.test(e.message))
+      throw new OptionalDependencyError(
+        "sdvtables/export found playwright but not its chromium browser: pnpm exec playwright install chromium",
+        { cause: e }
+      );
+    throw e;
+  }
+}
+function page(body, o) {
+  const links = o.fontLinks.map((href) => `<link rel="stylesheet" href="${escapeAttr(href)}">`).join("");
+  return `<!doctype html><html><head><meta charset="utf-8">${links}<style>html,body{margin:0;background:${o.background}}#sdv-root{display:inline-block;padding:${EXPAND}px;background:${o.background}}</style></head><body><div id="sdv-root">${body}</div></body></html>`;
+}
+async function trimBox(png) {
+  const img = new Image();
+  img.src = `data:image/png;base64,${png}`;
+  await img.decode();
+  const c = document.createElement("canvas");
+  c.width = img.width;
+  c.height = img.height;
+  const g = c.getContext("2d");
+  g.drawImage(img, 0, 0);
+  const px = new Uint32Array(g.getImageData(0, 0, c.width, c.height).data.buffer);
+  const bg = px[0];
+  let [x0, y0, x1, y1] = [c.width, c.height, -1, -1];
+  for (let y = 0, i = 0; y < c.height; y++)
+    for (let x = 0; x < c.width; x++, i++)
+      if (px[i] !== bg) {
+        if (x < x0) x0 = x;
+        if (x > x1) x1 = x;
+        if (y < y0) y0 = y;
+        y1 = y;
+      }
+  return x1 < 0 ? [0, 0, c.width, c.height] : [x0, y0, x1 - x0 + 1, y1 - y0 + 1];
+}
+async function drawPNG(a) {
+  const img = new Image();
+  img.src = `data:image/png;base64,${a.png}`;
+  await img.decode();
+  const c = document.createElement("canvas");
+  c.width = a.w;
+  c.height = a.h;
+  const g = c.getContext("2d");
+  g.fillStyle = a.bg;
+  g.fillRect(0, 0, a.w, a.h);
+  const [x, y, tw, th] = a.trim;
+  g.drawImage(img, x, y, tw, th, a.dx, a.dy, tw, th);
+  let out = c;
+  if (a.fw !== a.w || a.fh !== a.h) {
+    out = document.createElement("canvas");
+    out.width = a.fw;
+    out.height = a.fh;
+    const s = out.getContext("2d");
+    s.imageSmoothingQuality = "high";
+    s.drawImage(c, 0, 0, a.fw, a.fh);
+  }
+  return out.toDataURL("image/png").slice("data:image/png;base64,".length);
+}
+async function snap(p, html, o) {
+  await p.setViewportSize({ width: VIEWPORT, height: 800 });
+  await p.setContent(page(html, o), { waitUntil: "load" });
+  await p.evaluate(() => document.fonts.ready);
+  const root = p.locator("#sdv-root");
+  const box = await root.boundingBox();
+  if (box) {
+    const z = o.deviceScaleFactor;
+    checkCanvas("the table renders", Math.ceil(box.width * z), Math.ceil(box.height * z), o);
+  }
+  if (box && box.width > VIEWPORT) await p.setViewportSize({ width: Math.ceil(box.width), height: 800 });
+  const png = Buffer.from(await root.screenshot({ type: "png" })).toString("base64");
+  return { png, trim: await p.evaluate(trimBox, png) };
+}
+async function finish(p, shot, o, { minWidth = 0, ratio, gravity = "center" } = {}) {
+  const [, , tw, th] = shot.trim;
+  const ws = o.whitespace;
+  let [w, h] = [Math.max(tw, minWidth) + 2 * ws, th + 2 * ws];
+  let [dx, dy] = [Math.floor((w - 2 * ws - tw) / 2) + ws, ws];
+  if (ratio !== void 0) {
+    const [cw, ch] = canvasFor(w, h, ratio);
+    const [ox, oy] = offsetFor(cw - w, ch - h, gravity);
+    [w, h, dx, dy] = [cw, ch, dx + ox, dy + oy];
+  }
+  const [fw, fh] = o.width === void 0 ? [w, h] : [o.width, Math.max(1, Math.floor(h * o.width / w + 0.5))];
+  checkCanvas("the image would be", w, h, o);
+  checkCanvas("the image scaled to `width` would be", fw, fh, o);
+  const b64 = await p.evaluate(drawPNG, {
+    png: shot.png,
+    trim: shot.trim,
+    w,
+    h,
+    dx,
+    dy,
+    fw,
+    fh,
+    bg: o.background
+  });
+  if (b64 === "")
+    throw new SdvplotError(`Chromium returned an empty image for ${n(fw)} \xD7 ${n(fh)} px; ${REMEDY}`);
+  const png = new Uint8Array(Buffer.from(b64, "base64"));
+  if (o.file !== void 0) await writeFile(o.file, png);
+  return png;
+}
+async function withPage(o, fn) {
+  const browser = await launch();
+  try {
+    return await fn(await browser.newPage({ deviceScaleFactor: o.deviceScaleFactor }));
+  } finally {
+    await browser.close();
+  }
+}
+async function htmlToPNG(html, options = {}) {
+  const o = resolve(options);
+  return withPage(o, async (p) => finish(p, await snap(p, html, o), o));
+}
+function tableToPNG(spec, rows, options = {}) {
+  return htmlToPNG(renderHTML(spec, rows), options);
+}
+async function socialCrop(spec, rows, { aspect = "1:1", gravity = "center", ...rest } = {}) {
+  const ratio = parseAspect(aspect);
+  const place = parseGravity(gravity);
+  const o = resolve({ whitespace: 60, ...rest });
+  const html = renderHTML(spec, rows);
+  return withPage(o, async (p) => finish(p, await snap(p, html, o), o, { ratio, gravity: place }));
+}
+async function batchToPNG(rows, group, build, filePattern, { dir, matchWidth = true, ...rest }) {
+  if (!filePattern.includes("{group}"))
+    throw new InputError(`filePattern must contain "{group}", got ${filePattern}`);
+  checkPng(filePattern);
+  const o = resolve(rest);
+  const groups = /* @__PURE__ */ new Map();
+  for (const r of rows) {
+    const v = r[group];
+    if (v === null || v === void 0) continue;
+    const bucket = groups.get(v);
+    if (bucket) bucket.push(r);
+    else groups.set(v, [r]);
+  }
+  if (groups.size === 0) throw new InputError(`no non-missing values in column ${String(group)}`);
+  const names = [...groups.keys()].map((v) => filePattern.replace("{group}", slug(v)));
+  const shared = [...new Set(names.filter((n2, i) => names.indexOf(n2) !== i))].sort();
+  if (shared.length > 0)
+    throw new InputError(
+      `group values write to the same file name: ${shared.join(", ")}; rename the values first`
+    );
+  const items = [];
+  const failed = [];
+  [...groups].forEach(([v, rs], i) => {
+    try {
+      const built = build(rs, v);
+      items.push({
+        file: join(dir, names[i]),
+        html: typeof built === "string" ? built : renderHTML(built.spec, built.rows)
+      });
+    } catch (e) {
+      failed.push(`${String(v)}: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  });
+  if (items.length === 0) throw new SdvplotError(`No group built successfully:
+${failed.join("\n")}`);
+  await mkdir(dir, { recursive: true });
+  const out = await withPage(o, async (p) => {
+    const shots = [];
+    for (const it of items) shots.push(await snap(p, it.html, o));
+    const minWidth = matchWidth ? Math.max(...shots.map((s) => s.trim[2])) : 0;
+    for (const [i, it] of items.entries())
+      await finish(p, shots[i], { ...o, file: it.file }, { minWidth });
+    return items.map((it) => it.file);
+  });
+  if (failed.length > 0)
+    warn(
+      `sdvtables:batch:${filePattern}:${failed.join("|")}`,
+      `${failed.length} group(s) failed and were skipped:
+${failed.join("\n")}`
+    );
+  return out;
+}
+
+export { batchToPNG, composePage, gridTables, htmlToPNG, slug, socialCrop, stackTables, tableToPNG };
+//# sourceMappingURL=export.js.map
+//# sourceMappingURL=export.js.map