graphein 0.20.0 → 0.22.0

package/dist/charts/tableView/dom.js

@@ -1,299 +1,639 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { recordDomLabels } from "../../render/labelLedger.js";
-import { applyConditionalFormatting, applyNegativeStyle, gridBorderColor, rowBackground, setCellBaseStyles } from "./conditional.js";
-import { SKETCH_BORDER_RADIUS, computeFittedWidths, densityMetrics, normalizedHeaderRows, clampInt, setStyles, leftOffset, formatDisplayValue } from "./types.js";
+import { measureText } from "../../render/text.js";
+import {
+  BAR_LANE_ALPHA,
+  BAR_OVERLAY_ALPHA,
+  barFill,
+  barTrack,
+  buildColumnFormatter,
+  negativeTextColor
+} from "./conditional.js";
+import { buildSketchDataBar } from "./sketchBar.js";
+import { createSketchGridCanvas, paintSketchGridOverlay } from "./sketch.js";
+import { columnOffsets, layoutColumns } from "./layout.js";
+import { fontFor, resolveTableStyle, rowBackground, tableStylesheet } from "./style.js";
+import { sparklinePath } from "./sparkline.js";
+import {
+  SKETCH_BORDER_RADIUS,
+  cellText,
+  clampInt,
+  defaultRowInfo,
+  normalizedHeaderRows,
+  setStyles,
+  sumWidths
+} from "./types.js";
+const RENDER_ALL_CELLS = 2400;
+const RENDER_ALL_ROWS = 250;
+const BUFFER_ROWS = 6;
+const DEFAULT_FORMAT_KINDS = ["leaf"];
+let scopeSeq = 0;
 let cachedScrollbarWidth = null;
-function buildTable(opts) {
-  const { container, rect, tokens } = opts;
-  const reserve = willScrollVertically(opts) ? scrollbarWidth() : 0;
-  const available = Math.max(0, rect.width - 2 - reserve);
-  opts.widths = computeFittedWidths(opts.columns, available);
-  const tableWidth = Math.max(available, sumWidths(opts.widths));
-  setStyles(container, {
-    position: "absolute",
-    left: `${rect.x}px`,
-    top: `${rect.y}px`,
-    width: `${Math.max(0, rect.width)}px`,
-    height: `${Math.max(0, rect.height)}px`,
-    overflow: "auto",
-    pointerEvents: "auto",
-    boxSizing: "border-box",
-    border: `1px solid ${opts.sketch ? "transparent" : tokens.color.border}`,
-    borderRadius: opts.sketch ? SKETCH_BORDER_RADIUS : `${tokens.radius.sm}px`,
-    background: tokens.color.background
-  });
-  container.replaceChildren();
-  const table = document.createElement("table");
-  table.setAttribute("role", "table");
-  setStyles(table, {
-    width: `${tableWidth}px`,
-    minWidth: "100%",
-    borderCollapse: "separate",
-    borderSpacing: "0",
-    tableLayout: "fixed",
-    fontFamily: tokens.font.family,
-    fontSize: `${tokens.font.size.small}px`,
-    lineHeight: "1.35",
-    color: tokens.color.text
-  });
-  table.appendChild(buildColGroup(opts.widths));
-  table.appendChild(buildHeader(opts));
-  table.appendChild(buildBody(opts));
-  const footer = buildFooter(opts);
-  if (footer) table.appendChild(footer);
-  container.appendChild(table);
-  opts.refreshEvidence = () => recordTableDom(opts, table);
-  opts.refreshEvidence();
+function mountTable(opts) {
+  return new TableDom(opts);
 }
-function recordTableDom(opts, table) {
-  if (!opts.evidence) return;
-  const metrics = densityMetrics(opts.density);
-  const host = opts.container.getBoundingClientRect();
-  const origin = { x: host.left - opts.rect.x, y: host.top - opts.rect.y };
-  const rowHeight = opts.visibleRange?.rowHeight ?? metrics.rowHeight;
-  const headerHeight = normalizedHeaderRows(opts).length * metrics.headerHeight;
-  const first = opts.visibleRange ? clampInt(opts.visibleRange.start, 0, opts.rowCount) : 0;
-  const last = opts.visibleRange ? clampInt(opts.visibleRange.end, first, opts.rowCount) : opts.rowCount;
-  recordTableDataEvidence(opts, first, last);
-  const bodyRows = table.tBodies[0]?.rows;
-  if (!bodyRows) return;
-  let rowIndex = first;
-  for (let i = 0; i < bodyRows.length; i++) {
-    const tr = bodyRows[i];
-    if (tr.getAttribute("aria-hidden") === "true") continue;
-    let x = opts.rect.x - opts.container.scrollLeft;
-    for (let colIndex = 0; colIndex < tr.cells.length; colIndex++) {
-      const td = tr.cells[colIndex];
-      const actual = td.getBoundingClientRect();
-      const width = opts.widths?.[colIndex] ?? 0;
-      const measured = actual.width > 0 && actual.height > 0;
-      if (!measured) opts.evidence.partial("geometry", "text");
-      const box = measured ? { x: actual.left - origin.x, y: actual.top - origin.y, width: actual.width, height: actual.height } : { x, y: opts.rect.y + headerHeight + rowIndex * rowHeight - opts.container.scrollTop, width, height: rowHeight };
-      const color = td.style.color || opts.tokens.color.text;
-      const background = td.style.backgroundColor || opts.tokens.color.background;
-      const value = opts.getCell(rowIndex, colIndex);
-      if (opts.dataRepresentation !== "aggregate" || colIndex >= (opts.rowHeaderSpan ?? 0) && value.raw != null && Number.isFinite(value.raw)) {
-        opts.evidence.mark("cell", box.x, box.y, box.width, box.height, color, 1, opts.rect, 1, background);
-      }
-      if (measured) recordDomLabels(opts.labels, td, origin, background, "data-label", void 0, opts.rect);
-      x += width;
-    }
-    rowIndex++;
+class TableDom {
+  constructor(opts) {
+    __publicField(this, "host");
+    __publicField(this, "widths", []);
+    __publicField(this, "opts");
+    __publicField(this, "scope", `gtv-${++scopeSeq}`);
+    __publicField(this, "style");
+    __publicField(this, "formatters", []);
+    __publicField(this, "layout");
+    __publicField(this, "offsets", []);
+    __publicField(this, "baseClass", []);
+    __publicField(this, "table");
+    __publicField(this, "tbody");
+    __publicField(this, "topSpacer");
+    __publicField(this, "bottomSpacer");
+    __publicField(this, "pool", []);
+    __publicField(this, "start", 0);
+    __publicField(this, "end", 0);
+    __publicField(this, "windowed", false);
+    __publicField(this, "frame", 0);
+    __publicField(this, "mounted", false);
+    __publicField(this, "headerRowCount", 1);
+    __publicField(this, "hierarchy", false);
+    __publicField(this, "bodyFont", "");
+    __publicField(this, "boldFont", "");
+    __publicField(this, "textWidths", /* @__PURE__ */ new Map());
+    __publicField(this, "sketchCanvas", null);
+    this.opts = opts;
+    this.host = document.createElement("div");
+    this.host.className = `graphein-table ${this.scope}`;
+    opts.container.appendChild(this.host);
+    this.host.addEventListener("scroll", () => this.onScroll(), { passive: true });
+    this.build(true);
   }
-  for (const th of Array.from(table.querySelectorAll("th"))) {
-    if (!recordDomLabels(opts.labels, th, origin, opts.tokens.color.surface, "axis-label", "/columns", opts.rect)) opts.evidence.partial("text");
+  update(next, relayout = false) {
+    this.opts = next;
+    this.build(relayout || next.columns.length !== this.widths.length);
   }
-}
-function recordTableDataEvidence(opts, first, last) {
-  if (!opts.evidence) return;
-  if (opts.dataRepresentation === "rows") {
-    opts.evidence.data(
-      opts.columns.length ? last - first : 0,
-      "rows",
-      0,
-      opts.columns.length ? opts.rowCount - (last - first) : 0
-    );
-  } else if (opts.visibleRange && opts.dataRepresentation === "aggregate") {
-    const deferred = opts.columns.length ? Math.max(0, opts.rowCount - (last - first)) : 0;
-    opts.evidence.data(opts.sourceRepresentedRows ?? Math.max(0, opts.evidence.snapshot().data.inputRows - deferred), "aggregate", 0, deferred);
+  build(relayout) {
+    const o = this.opts;
+    this.style = resolveTableStyle(o.tokens, o.density, o.gridlines);
+    const m = this.style.metrics;
+    this.bodyFont = fontFor(this.style, this.style.weight.normal);
+    this.boldFont = fontFor(this.style, this.style.weight.bold);
+    this.formatters = o.formatters ?? o.columns.map((column, i) => buildColumnFormatter(column.conditionalFormat, o.conditionalDomains?.[i] ?? null, o.tokens, this.style.color.background));
+    const headerRows = normalizedHeaderRows(o);
+    this.headerRowCount = headerRows.length;
+    this.hierarchy = this.hasHierarchy();
+    const contentHeight = headerRows.length * m.headerHeight + o.rowCount * m.rowHeight + (o.footerRow ? m.rowHeight : 0) + 2;
+    const scrollsY = contentHeight > o.rect.height + 1;
+    if (relayout || !this.layout) {
+      const available = Math.max(0, o.rect.width - 2 - (scrollsY ? scrollbarWidth() : 0));
+      const measureInput = o.measure ? { ...o, ...o.measure } : o;
+      this.layout = layoutColumns(measureInput, this.style, this.formatters, available, "scroll");
+    }
+    this.widths = this.layout.widths;
+    o.widths = this.widths;
+    this.offsets = columnOffsets(this.widths);
+    this.windowed = o.rowCount > RENDER_ALL_ROWS || o.rowCount * Math.max(1, o.columns.length) > RENDER_ALL_CELLS;
+    const frozen = Math.min(o.frozenColumns ?? 0, o.columns.length);
+    this.baseClass = o.columns.map((column, i) => columnClass(column, i, frozen, this.windowed));
+    setStyles(this.host, {
+      position: "absolute",
+      left: `${o.rect.x}px`,
+      top: `${o.rect.y}px`,
+      width: `${Math.max(0, o.rect.width)}px`,
+      maxHeight: `${Math.max(0, o.rect.height)}px`,
+      overflow: "auto",
+      pointerEvents: "auto",
+      boxSizing: "border-box",
+      border: `1px solid ${o.sketch ? "transparent" : o.tokens.color.border}`,
+      borderRadius: o.sketch ? SKETCH_BORDER_RADIUS : `${this.style.radius}px`,
+      background: this.style.color.background,
+      overscrollBehavior: "contain"
+    });
+    const sheet = document.createElement("style");
+    sheet.textContent = tableStylesheet(this.style, {
+      scope: this.scope,
+      stickyHeader: o.stickyHeader !== false,
+      frozenOffsets: this.offsets.slice(0, frozen),
+      sketch: Boolean(o.sketch)
+    });
+    const table = document.createElement("table");
+    table.setAttribute("role", "table");
+    table.style.width = `${sumWidths(this.widths)}px`;
+    if (this.windowed) table.setAttribute("aria-rowcount", String(headerRows.length + o.rowCount + (o.footerRow ? 1 : 0)));
+    table.appendChild(this.buildColgroup());
+    table.appendChild(this.buildHeader(headerRows, frozen));
+    this.tbody = document.createElement("tbody");
+    this.topSpacer = spacerRow(o.columns.length);
+    this.bottomSpacer = spacerRow(o.columns.length);
+    this.tbody.addEventListener("click", (event) => this.onBodyClick(event));
+    this.tbody.addEventListener("keydown", (event) => this.onBodyKey(event));
+    this.host.classList.toggle("gtv-pick", Boolean(o.onRowClick));
+    table.appendChild(this.tbody);
+    const footer = this.buildFooter(headerRows.length);
+    if (footer) table.appendChild(footer);
+    this.table = table;
+    this.pool = [];
+    this.start = 0;
+    this.end = 0;
+    const restore = this.mounted ? { top: this.host.scrollTop || 0, left: this.host.scrollLeft || 0 } : { top: o.scrollTop ?? 0, left: o.scrollLeft ?? 0 };
+    this.mounted = true;
+    this.host.replaceChildren(sheet, table);
+    this.renderWindow(true, restore.top);
+    if (this.host.scrollTop !== restore.top) this.host.scrollTop = restore.top;
+    if (this.host.scrollLeft !== restore.left) this.host.scrollLeft = restore.left;
+    this.mountSketch(Math.min(o.rect.height, contentHeight));
+    this.recordEvidence();
   }
-}
-function scrollbarWidth() {
-  if (cachedScrollbarWidth != null) return cachedScrollbarWidth;
-  if (typeof document === "undefined" || !document.body) return 0;
-  const probe = document.createElement("div");
-  probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden";
-  document.body.appendChild(probe);
-  cachedScrollbarWidth = probe.offsetWidth - probe.clientWidth;
-  probe.remove();
-  return cachedScrollbarWidth;
-}
-function contentHeight(opts) {
-  const headerRows = opts.headerRows?.length ?? 1;
-  const metrics = densityMetrics(opts.density);
-  const rowHeight = opts.visibleRange?.rowHeight ?? metrics.rowHeight;
-  return headerRows * metrics.headerHeight + opts.rowCount * rowHeight + (opts.footerRow ? metrics.rowHeight : 0);
-}
-function willScrollVertically(opts) {
-  return contentHeight(opts) > opts.rect.height + 1;
-}
-function sumWidths(widths) {
-  return widths.reduce((sum, w) => sum + w, 0);
-}
-function buildColGroup(widths) {
-  const colgroup = document.createElement("colgroup");
-  for (const width of widths) {
-    const col = document.createElement("col");
-    col.style.width = `${width}px`;
-    colgroup.appendChild(col);
+  buildColgroup() {
+    const colgroup = document.createElement("colgroup");
+    for (const width of this.widths) {
+      const col = document.createElement("col");
+      col.style.width = `${width}px`;
+      colgroup.appendChild(col);
+    }
+    return colgroup;
   }
-  return colgroup;
-}
-function buildHeader(opts) {
-  const thead = document.createElement("thead");
-  if (opts.headerRows) {
-    opts.headerRows.forEach((row, rowIndex) => {
-      const tr2 = document.createElement("tr");
+  buildHeader(headerRows, frozen) {
+    const o = this.opts;
+    const m = this.style.metrics;
+    const thead = document.createElement("thead");
+    headerRows.forEach((row, rowIndex) => {
+      const tr = document.createElement("tr");
+      let cursor = 0;
       for (const cell of row) {
-        const th = makeHeaderCell(opts, cell.title, cell.colIndex, cell.align, rowIndex);
-        if (cell.colSpan && cell.colSpan > 1) th.colSpan = cell.colSpan;
-        if (cell.rowSpan && cell.rowSpan > 1) th.rowSpan = cell.rowSpan;
-        tr2.appendChild(th);
+        const start = cell.colIndex ?? cursor;
+        const span = Math.max(1, cell.colSpan ?? 1);
+        cursor = start + span;
+        const th = document.createElement("th");
+        th.scope = span > 1 ? "colgroup" : "col";
+        if (span > 1) th.colSpan = span;
+        if ((cell.rowSpan ?? 1) > 1) th.rowSpan = cell.rowSpan;
+        const classes = [];
+        const align = cell.align ?? "left";
+        if (align !== "left") classes.push(align === "right" ? "a-r" : "a-c");
+        if (cell.colIndex == null && span > 1) classes.push("gtv-hg");
+        if (start + span <= frozen) classes.push("fz", `fz${start}`);
+        if (start > 0 && o.columns[start]?.groupStart) classes.push("gs");
+        th.style.top = o.stickyHeader === false ? "" : `${rowIndex * m.headerHeight}px`;
+        if ((cell.rowSpan ?? 1) > 1) th.style.height = `${(cell.rowSpan ?? 1) * m.headerHeight}px`;
+        th.title = cell.title;
+        const colIndex = cell.colIndex;
+        const sorted = colIndex != null && o.sortState?.col === colIndex;
+        if (sorted) {
+          classes.push("sorted");
+          th.setAttribute("aria-sort", o.sortState?.dir === "desc" ? "descending" : "ascending");
+        }
+        th.className = classes.join(" ");
+        if (colIndex != null && o.onSort && o.columns[colIndex]?.sortable !== false) {
+          const button = document.createElement("button");
+          button.type = "button";
+          button.className = "gtv-sort";
+          button.addEventListener("click", () => o.onSort?.(colIndex));
+          const label = document.createElement("span");
+          label.className = "gtv-lbl";
+          label.textContent = cell.title;
+          const glyph = document.createElement("span");
+          glyph.className = "gtv-glyph";
+          glyph.setAttribute("aria-hidden", "true");
+          glyph.textContent = sorted ? o.sortState?.dir === "desc" ? "\u2193" : "\u2191" : "";
+          button.append(label, glyph);
+          th.appendChild(button);
+        } else {
+          th.textContent = cell.title;
+        }
+        tr.appendChild(th);
       }
-      thead.appendChild(tr2);
+      thead.appendChild(tr);
     });
     return thead;
   }
-  const tr = document.createElement("tr");
-  opts.columns.forEach((column, colIndex) => {
-    tr.appendChild(makeHeaderCell(opts, column.title, colIndex, column.align));
-  });
-  thead.appendChild(tr);
-  return thead;
-}
-function makeHeaderCell(opts, title, colIndex, align, rowIndex = 0) {
-  const th = document.createElement("th");
-  const metrics = densityMetrics(opts.density);
-  th.scope = "col";
-  th.textContent = title;
-  const isSorted = colIndex != null && opts.sortState?.col === colIndex;
-  if (isSorted) th.setAttribute("aria-sort", opts.sortState?.dir === "desc" ? "descending" : "ascending");
-  setCellBaseStyles(th, opts.tokens, align ?? "left", opts.stickyHeader !== false, metrics.padding, gridBorderColor(opts));
-  setStyles(th, {
-    top: `${rowIndex * metrics.headerHeight}px`,
-    zIndex: "4",
-    background: opts.tokens.color.surface,
-    color: opts.tokens.color.text,
-    fontWeight: String(opts.tokens.font.weight.bold),
-    borderBottom: `1px solid ${gridBorderColor(opts)}`,
-    userSelect: "none",
-    height: `${metrics.headerHeight}px`
-  });
-  if (colIndex != null && opts.onSort && opts.columns[colIndex]?.sortable !== false) {
-    th.textContent = "";
-    const button = document.createElement("button");
-    button.type = "button";
-    button.addEventListener("click", () => opts.onSort?.(colIndex));
-    setStyles(button, {
-      all: "unset",
-      boxSizing: "border-box",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start",
-      gap: "5px",
-      width: "100%",
-      cursor: "pointer",
-      color: "inherit",
-      font: "inherit"
+  buildFooter(headerRowCount) {
+    const o = this.opts;
+    if (!o.footerRow) return null;
+    const tfoot = document.createElement("tfoot");
+    const tr = document.createElement("tr");
+    if (this.windowed) tr.setAttribute("aria-rowindex", String(headerRowCount + o.rowCount + 1));
+    const kind = o.footerRow.kind === "grandtotal" ? "grandtotal" : "subtotal";
+    o.columns.forEach((column, col) => {
+      const el = document.createElement(column.rowHeader ? "th" : "td");
+      if (column.rowHeader) el.scope = "row";
+      const slot = { el, kind: "text", styled: false, titled: false };
+      const cell = o.footerRow?.cells[col] ?? { value: null, raw: null };
+      this.bindCell(slot, -1, col, { kind, depth: 0 }, cell);
+      tr.appendChild(el);
     });
-    const label = document.createElement("span");
-    label.textContent = title;
-    label.style.overflow = "hidden";
-    label.style.textOverflow = "ellipsis";
-    const glyph = document.createElement("span");
-    glyph.textContent = isSorted ? opts.sortState?.dir === "desc" ? "\u2193" : "\u2191" : "";
-    glyph.setAttribute("aria-hidden", "true");
-    glyph.style.color = opts.tokens.color.textMuted;
-    button.append(label, glyph);
-    th.appendChild(button);
+    tfoot.appendChild(tr);
+    return tfoot;
   }
-  applyStickyColumn(th, opts, colIndex, true);
-  return th;
-}
-function buildBody(opts) {
-  const tbody = document.createElement("tbody");
-  const range = opts.visibleRange;
-  const start = range ? clampInt(range.start, 0, opts.rowCount) : 0;
-  const end = range ? clampInt(range.end, start, opts.rowCount) : opts.rowCount;
-  if (range && start > 0) tbody.appendChild(makeSpacerRow(opts, start * range.rowHeight));
-  for (let rowIndex = start; rowIndex < end; rowIndex += 1) {
-    tbody.appendChild(makeBodyRow(opts, rowIndex, range?.rowHeight));
+  onScroll() {
+    this.opts.onScroll?.(this.host.scrollTop || 0, this.host.scrollLeft || 0);
+    if (this.frame !== 0) return;
+    let ran = false;
+    const run = () => {
+      ran = true;
+      this.frame = 0;
+      this.renderWindow(false);
+      this.paintSketch();
+    };
+    const id = typeof requestAnimationFrame === "function" ? requestAnimationFrame(run) : setTimeout(run, 16);
+    if (!ran) this.frame = id || -1;
   }
-  if (range && end < opts.rowCount) {
-    tbody.appendChild(makeSpacerRow(opts, (opts.rowCount - end) * range.rowHeight));
+  visibleRange(scrollTop = this.host.scrollTop || 0) {
+    const o = this.opts;
+    if (!this.windowed) return [0, o.rowCount];
+    const m = this.style.metrics;
+    const header = this.headerRowCount * m.headerHeight;
+    const viewport = o.rect.height;
+    const top = Math.max(0, scrollTop - header);
+    const start = Math.max(0, Math.floor(top / m.rowHeight) - BUFFER_ROWS);
+    const end = Math.min(o.rowCount, Math.ceil((top + viewport) / m.rowHeight) + BUFFER_ROWS);
+    return [start, Math.max(start, end)];
   }
-  return tbody;
-}
-function makeBodyRow(opts, rowIndex, rowHeight) {
-  const tr = document.createElement("tr");
-  const cls = opts.rowClass?.(rowIndex) ?? "normal";
-  const metrics = densityMetrics(opts.density);
-  if (rowHeight) tr.style.height = `${rowHeight}px`;
-  opts.columns.forEach((column, colIndex) => {
-    const td = document.createElement("td");
-    const cell = opts.getCell(rowIndex, colIndex);
-    const rowBg = rowBackground(opts, rowIndex, cls);
-    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding, gridBorderColor(opts));
-    setStyles(td, {
-      position: colIndex < (opts.rowHeaderSpan ?? 0) ? "sticky" : "relative",
-      background: rowBg,
-      fontWeight: cls === "normal" ? String(opts.tokens.font.weight.normal) : String(opts.tokens.font.weight.bold),
-      color: opts.tokens.color.text,
-      borderBottom: `1px solid ${gridBorderColor(opts)}`,
-      height: rowHeight ? `${rowHeight}px` : `${metrics.rowHeight}px`,
-      whiteSpace: column.wrap === true ? "normal" : "nowrap"
+  renderWindow(force, scrollTop) {
+    const [start, end] = this.visibleRange(scrollTop);
+    if (!force && start === this.start && end === this.end) return;
+    this.start = start;
+    this.end = end;
+    const count = end - start;
+    while (this.pool.length < count) this.pool.push(this.createRow());
+    while (this.pool.length > count) this.pool.pop().tr.remove();
+    const rh = this.style.metrics.rowHeight;
+    const info = this.opts.rowInfo ?? defaultRowInfo;
+    for (let i = 0; i < count; i++) this.bindRow(this.pool[i], start + i, info(start + i));
+    this.setSpacer(this.topSpacer, start * rh, true);
+    this.setSpacer(this.bottomSpacer, (this.opts.rowCount - end) * rh, false);
+  }
+  /** Spacer rows stand in for windowed-out rows and exist only while they have height. */
+  setSpacer(tr, height, top) {
+    if (height <= 0) {
+      tr.remove();
+      return;
+    }
+    const td = tr.firstElementChild;
+    const h = `${height}px`;
+    if (td.style.height !== h) td.style.height = h;
+    if (tr.parentNode !== this.tbody) {
+      if (top) this.tbody.insertBefore(tr, this.tbody.firstChild);
+      else this.tbody.appendChild(tr);
+    }
+  }
+  createRow() {
+    const tr = document.createElement("tr");
+    if (this.opts.onRowClick) tr.tabIndex = 0;
+    const cells = this.opts.columns.map((column) => {
+      const el = document.createElement(column.rowHeader ? "th" : "td");
+      if (column.rowHeader) el.scope = "row";
+      tr.appendChild(el);
+      return { el, kind: "text", styled: false, titled: false };
     });
-    const indent = opts.cellIndent?.(rowIndex, colIndex) ?? 0;
-    if (indent > 0) td.style.paddingLeft = `${metrics.paddingX + indent}px`;
-    applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg, rowIndex);
-    if (td.childNodes.length === 0) {
-      td.textContent = formatDisplayValue(cell.value, column);
-      applyNegativeStyle(td, cell.value, column);
+    this.tbody.insertBefore(tr, this.bottomSpacer.parentNode === this.tbody ? this.bottomSpacer : null);
+    return { tr, cells, row: -1 };
+  }
+  bindRow(slot, row, info) {
+    const o = this.opts;
+    slot.row = row;
+    const tr = slot.tr;
+    let cls = "gtv-r";
+    if (info.kind === "group") cls += " k-group";
+    else if (info.kind === "subtotal") cls += " k-sub";
+    else if (info.kind === "grandtotal") cls += " k-grand";
+    else if (o.striped && row % 2 === 1) cls += " s";
+    if (o.highlighted?.(row)) cls += " hl";
+    if (tr.className !== cls) tr.className = cls;
+    tr.dataset.row = String(row);
+    if (this.windowed) tr.setAttribute("aria-rowindex", String(this.headerRowCount + row + 1));
+    for (let col = 0; col < slot.cells.length; col++) this.bindCell(slot.cells[col], row, col, info, o.getCell(row, col));
+  }
+  bindCell(slot, row, col, info, cell) {
+    const o = this.opts;
+    const column = o.columns[col];
+    const el = slot.el;
+    const formatter = o.rowFormatters ? row >= 0 ? o.rowFormatters(row)?.[col] ?? null : null : (o.formatKinds ?? DEFAULT_FORMAT_KINDS).includes(info.kind) ? this.formatters[col] : null;
+    const paint = formatter ? formatter(cell) : null;
+    const text = paint?.showValue === false ? "" : cellText(cell, column);
+    const className = this.baseClass[col];
+    if (el.className !== className) el.className = className;
+    if (slot.styled) {
+      el.style.cssText = "";
+      slot.styled = false;
     }
-    applyStickyColumn(td, opts, colIndex, false);
-    tr.appendChild(td);
-  });
-  return tr;
-}
-function buildFooter(opts) {
-  if (!opts.footerRow) return null;
-  const tfoot = document.createElement("tfoot");
-  const tr = document.createElement("tr");
-  const metrics = densityMetrics(opts.density);
-  opts.columns.forEach((column, colIndex) => {
-    const td = document.createElement("td");
-    const cell = opts.footerRow?.cells[colIndex] ?? { value: null, raw: null };
-    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding, gridBorderColor(opts));
-    setStyles(td, {
-      position: colIndex < (opts.rowHeaderSpan ?? 0) ? "sticky" : "sticky",
-      bottom: "0",
-      zIndex: colIndex < (opts.rowHeaderSpan ?? 0) ? "5" : "4",
-      background: opts.tokens.color.surface,
-      color: opts.tokens.color.text,
-      fontWeight: String(opts.tokens.font.weight.bold),
-      borderTop: `1px solid ${gridBorderColor(opts)}`,
-      borderBottom: `1px solid ${gridBorderColor(opts)}`,
-      height: `${metrics.rowHeight}px`,
-      whiteSpace: column.wrap === true ? "normal" : "nowrap"
+    const color = paint?.color ?? negativeTextColor(cell.value, column, "", this.style.color.negative);
+    if (paint?.background) this.setStyle(slot, "background", paint.background);
+    if (color) this.setStyle(slot, "color", color);
+    if (paint?.weight) this.setStyle(slot, "fontWeight", String(paint.weight));
+    if (column.rowHeader) this.bindRowHeader(slot, info, text, row);
+    else if (column.sparkline && Array.isArray(cell.value)) this.bindSpark(slot, cell.value, column);
+    else if (paint?.bar) this.bindBar(slot, paint, text, col, row);
+    else if (paint?.icon) this.bindIcon(slot, paint, text);
+    else {
+      slot.kind = "text";
+      if (el.firstChild?.nodeType !== 3 || el.childNodes.length !== 1 || el.firstChild.nodeValue !== text) el.textContent = text;
+    }
+    this.syncTitle(slot, text, col, info.kind !== "leaf" || Boolean(paint?.weight), info.depth);
+  }
+  setStyle(slot, key, value) {
+    slot.el.style[key] = value;
+    slot.styled = true;
+  }
+  bindRowHeader(slot, info, text, row) {
+    const m = this.style.metrics;
+    if (slot.kind !== "rh") {
+      slot.el.replaceChildren();
+      slot.toggle = document.createElement("button");
+      slot.toggle.type = "button";
+      slot.toggle.className = "gtv-tog";
+      slot.toggle.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M2 3.5 5 6.5 8 3.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      slot.pad = document.createElement("span");
+      slot.pad.className = "gtv-pad";
+      slot.val = document.createElement("span");
+      slot.el.append(slot.toggle, slot.pad, slot.val);
+      slot.kind = "rh";
+    }
+    const indent = m.paddingX + info.depth * m.indent;
+    if (indent !== m.paddingX) this.setStyle(slot, "paddingLeft", `${indent}px`);
+    const expandable = Boolean(info.expandable) && row >= 0 && Boolean(this.opts.onToggle);
+    slot.toggle.style.display = expandable ? "" : "none";
+    slot.pad.style.display = expandable || !this.hierarchy ? "none" : "";
+    if (expandable) {
+      slot.toggle.setAttribute("aria-expanded", String(info.expanded !== false));
+      slot.toggle.setAttribute("aria-label", `${info.expanded !== false ? "Collapse" : "Expand"} ${text}`);
+    }
+    if (slot.val.textContent !== text) slot.val.textContent = text;
+  }
+  hasHierarchy() {
+    const info = this.opts.measure?.rowInfo ?? this.opts.rowInfo;
+    if (!info) return false;
+    const count = this.opts.measure?.rowCount ?? this.opts.rowCount;
+    for (let i = 0; i < Math.min(count, 200); i++) if (info(i).expandable) return true;
+    return false;
+  }
+  bindBar(slot, paint, text, col, row) {
+    const o = this.opts;
+    const bar = paint.bar;
+    const column = o.columns[col];
+    const track = barTrack(this.widths[col] ?? 0, this.style.metrics.paddingX, this.layout.valueWidths[col] ?? 0, column.align, paint.showValue !== false);
+    const left = track.left + bar.from * track.width;
+    const width = Math.max(0, (bar.to - bar.from) * track.width);
+    const fill = barFill(bar.color, track.overlay ? BAR_OVERLAY_ALPHA : BAR_LANE_ALPHA);
+    if (slot.kind !== "bar") {
+      slot.el.replaceChildren();
+      slot.bar = document.createElement("div");
+      slot.zero = document.createElement("div");
+      slot.zero.className = "gtv-zero";
+      slot.val = document.createElement("span");
+      slot.val.className = "gtv-val";
+      slot.el.append(slot.bar, slot.zero, slot.val);
+      slot.kind = "bar";
+    }
+    if (o.sketch) {
+      const seed = (o.sketch.seed ^ Math.imul(row + 2, 374761393) ^ Math.imul(col + 1, 668265263)) >>> 0;
+      const m = this.style.metrics;
+      const next = buildSketchDataBar(o.sketch, fill, left, width, m.barHeight, seed) ?? document.createElement("div");
+      slot.bar.replaceWith(next);
+      slot.bar = next;
+    } else {
+      const s = slot.bar.style;
+      if (slot.bar.className !== "gtv-bar") slot.bar.className = "gtv-bar";
+      s.left = `${left}px`;
+      s.width = `${width}px`;
+      s.background = fill;
+    }
+    slot.zero.style.display = bar.zero === void 0 ? "none" : "";
+    if (bar.zero !== void 0) slot.zero.style.left = `${Math.round(track.left + bar.zero * track.width)}px`;
+    if (slot.val.textContent !== text) slot.val.textContent = text;
+  }
+  bindIcon(slot, paint, text) {
+    if (slot.kind !== "icon") {
+      slot.el.replaceChildren();
+      const wrap2 = document.createElement("span");
+      wrap2.className = "gtv-flex";
+      slot.icon = document.createElement("span");
+      slot.icon.className = "gtv-icon";
+      slot.icon.setAttribute("aria-hidden", "true");
+      slot.val = document.createElement("span");
+      slot.val.className = "gtv-val";
+      wrap2.append(slot.icon, slot.val);
+      slot.el.appendChild(wrap2);
+      slot.kind = "icon";
+    }
+    const wrap = slot.icon.parentElement;
+    if (paint.iconPosition === "right") {
+      if (wrap.firstChild !== slot.val) wrap.insertBefore(slot.val, slot.icon);
+    } else if (wrap.firstChild !== slot.icon) wrap.insertBefore(slot.icon, slot.val);
+    slot.icon.textContent = paint.icon ?? "";
+    slot.icon.style.color = paint.iconColor ?? "";
+    if (slot.val.textContent !== text) slot.val.textContent = text;
+  }
+  bindSpark(slot, values, column) {
+    const spark = column.sparkline;
+    if (slot.kind !== "spark") {
+      slot.el.replaceChildren();
+      slot.el.innerHTML = '<svg class="gtv-spark" viewBox="0 0 100 20" preserveAspectRatio="none" aria-hidden="true"><path vector-effect="non-scaling-stroke"/><path vector-effect="non-scaling-stroke"/></svg>';
+      slot.kind = "spark";
+    }
+    const color = spark.color ?? this.opts.tokens.color.accent;
+    const shape = sparklinePath(values, spark, 100, 20);
+    const [fillPath, linePath] = Array.from(slot.el.querySelectorAll("path"));
+    fillPath.setAttribute("d", shape.area);
+    fillPath.setAttribute("fill", spark.type === "line" ? "none" : barFill(color, spark.type === "bar" ? 0.85 : 0.18));
+    fillPath.setAttribute("stroke", "none");
+    linePath.setAttribute("d", shape.line);
+    linePath.setAttribute("fill", "none");
+    linePath.setAttribute("stroke", spark.type === "bar" ? "none" : color);
+    linePath.setAttribute("stroke-width", "1.5");
+    linePath.setAttribute("stroke-linejoin", "round");
+    slot.el.setAttribute("aria-label", shape.summary);
+  }
+  /** Full text on hover for anything the column width cuts short. */
+  syncTitle(slot, text, col, strong, depth) {
+    const column = this.opts.columns[col];
+    let clipped = false;
+    if (text && !column.wrap) {
+      const m = this.style.metrics;
+      const font = strong ? this.boldFont : this.bodyFont;
+      const key = `${strong ? "b" : "n"}${text}`;
+      let w = this.textWidths.get(key);
+      if (w === void 0) {
+        w = measureText(text, font).width;
+        if (this.textWidths.size < 8192) this.textWidths.set(key, w);
+      }
+      const budget = (this.widths[col] ?? 0) - m.paddingX * 2 - (column.rowHeader ? depth * m.indent + m.toggle + 4 : 0);
+      clipped = w > budget + 0.5;
+    }
+    if (clipped) {
+      if (slot.el.title !== text) slot.el.title = text;
+      slot.titled = true;
+    } else if (slot.titled) {
+      slot.el.removeAttribute("title");
+      slot.titled = false;
+    }
+  }
+  onBodyClick(event) {
+    const target = event.target;
+    const tr = target?.closest("tr");
+    const row = tr?.dataset.row == null ? -1 : Number(tr.dataset.row);
+    if (row < 0 || !Number.isFinite(row)) return;
+    if (target?.closest(".gtv-tog")) {
+      this.opts.onToggle?.(row);
+      return;
+    }
+    const cell = target?.closest("td,th");
+    if (cell && this.opts.onRowClick) this.opts.onRowClick(row, cell.cellIndex, event);
+  }
+  /** Selectable rows are focusable; Enter or Space selects like a click. */
+  onBodyKey(event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    const tr = event.target;
+    if (!tr || tr.tagName !== "TR" || !this.opts.onRowClick) return;
+    const row = Number(tr.dataset.row);
+    if (!Number.isFinite(row) || row < 0) return;
+    event.preventDefault();
+    this.opts.onRowClick(row, 0, event);
+  }
+  mountSketch(height) {
+    const o = this.opts;
+    this.sketchCanvas?.canvas.remove();
+    this.sketchCanvas = null;
+    if (!o.sketch) return;
+    const overlay = createSketchGridCanvas({ ...o.rect, height });
+    o.container.appendChild(overlay.canvas);
+    this.sketchCanvas = overlay;
+    this.paintSketch();
+  }
+  paintSketch() {
+    const o = this.opts;
+    const canvas = this.sketchCanvas;
+    if (!o.sketch || !canvas?.ctx) return;
+    const height = parseFloat(canvas.canvas.style.height) || o.rect.height;
+    paintSketchGridOverlay(canvas.ctx, {
+      sketch: o.sketch,
+      tokens: o.tokens,
+      rect: { ...o.rect, height },
+      dpr: canvas.dpr,
+      columns: o.columns,
+      widths: this.widths,
+      rowCount: o.rowCount,
+      headerRowCount: this.headerRowCount,
+      hasFooter: Boolean(o.footerRow),
+      rowHeaderSpan: o.frozenColumns ?? 0,
+      metrics: this.style.metrics,
+      scrollLeft: this.host.scrollLeft || 0,
+      scrollTop: this.host.scrollTop || 0
     });
-    td.textContent = cell.label ? String(cell.value ?? "") : formatDisplayValue(cell.value, column);
-    applyNegativeStyle(td, cell.value, column);
-    applyStickyColumn(td, opts, colIndex, false);
-    tr.appendChild(td);
-  });
-  tfoot.appendChild(tr);
-  return tfoot;
+  }
+  recordEvidence() {
+    const o = this.opts;
+    const evidence = o.evidence;
+    if (!evidence) return;
+    const m = this.style.metrics;
+    const first = clampInt(this.start, 0, o.rowCount);
+    const last = clampInt(this.end, first, o.rowCount);
+    recordDataEvidence(o, first, last);
+    const host = this.host.getBoundingClientRect();
+    const origin = { x: host.left - o.rect.x, y: host.top - o.rect.y };
+    const headerHeight = this.headerRowCount * m.headerHeight;
+    const viewTop = this.host.scrollTop || 0;
+    const viewBottom = viewTop + (this.host.clientHeight || o.rect.height);
+    const info = o.rowInfo ?? defaultRowInfo;
+    for (const slot of this.pool) {
+      const row = slot.row;
+      if (row < first || row >= last) continue;
+      const kind = info(row).kind;
+      const y = headerHeight + row * m.rowHeight;
+      const inView = y + m.rowHeight >= viewTop - m.rowHeight && y <= viewBottom + m.rowHeight;
+      let x = o.rect.x - (this.host.scrollLeft || 0);
+      for (let col = 0; col < slot.cells.length; col++) {
+        const el = slot.cells[col].el;
+        const width = this.widths[col] ?? 0;
+        const cell = o.getCell(row, col);
+        const background = el.style.background || rowBackground(this.style, kind, o.striped === true && row % 2 === 1);
+        const color = el.style.color || this.style.color.text;
+        const actual = inView ? el.getBoundingClientRect() : null;
+        const measured = Boolean(actual && actual.width > 0 && actual.height > 0);
+        if (inView && !measured) evidence.partial("geometry", "text");
+        const box = measured && actual ? { x: actual.left - origin.x, y: actual.top - origin.y, width: actual.width, height: actual.height } : { x, y: o.rect.y + y - viewTop, width, height: m.rowHeight };
+        if (countsAsMark(o, col, cell)) evidence.mark("cell", box.x, box.y, box.width, box.height, color, 1, o.rect, 1, background);
+        if (measured) recordDomLabels(o.labels, el, origin, background, "data-label", void 0, o.rect);
+        x += width;
+      }
+    }
+    for (const th of Array.from(this.table.tHead?.querySelectorAll("th") ?? [])) {
+      if (!recordDomLabels(o.labels, th, origin, this.style.color.headerBg, "axis-label", "/columns", o.rect)) evidence.partial("text");
+    }
+    const foot = this.table.tFoot?.rows[0];
+    if (foot) {
+      for (let col = 0; col < foot.cells.length; col++) {
+        const el = foot.cells[col];
+        const actual = el.getBoundingClientRect();
+        if (actual.width <= 0 || actual.height <= 0) continue;
+        if (o.dataRepresentation === "aggregate" && countsAsMark(o, col, o.footerRow?.cells[col] ?? { value: null, raw: null })) {
+          evidence.mark(
+            "cell",
+            actual.left - origin.x,
+            actual.top - origin.y,
+            actual.width,
+            actual.height,
+            el.style.color || this.style.color.text,
+            1,
+            o.rect,
+            1,
+            el.style.background || this.style.color.totalBg
+          );
+        }
+        recordDomLabels(o.labels, el, origin, el.style.background || this.style.color.totalBg, "data-label", void 0, o.rect);
+      }
+    }
+  }
+}
+function countsAsMark(o, col, cell) {
+  if (o.dataRepresentation !== "aggregate") return true;
+  return !o.columns[col]?.rowHeader && typeof cell.raw === "number" && Number.isFinite(cell.raw);
+}
+function recordDataEvidence(o, first, last) {
+  const evidence = o.evidence;
+  if (!evidence) return;
+  const rendered = o.columns.length ? last - first : 0;
+  const deferred = o.columns.length ? Math.max(0, o.rowCount - rendered) : 0;
+  if (o.dataRepresentation === "rows") {
+    evidence.data(rendered, "rows", 0, deferred);
+  } else if (o.dataRepresentation === "aggregate") {
+    evidence.data(o.sourceRepresentedRows ?? Math.max(0, evidence.snapshot().data.inputRows - deferred), "aggregate", 0, deferred);
+  }
 }
-function makeSpacerRow(opts, height) {
+function columnClass(column, index, frozen, windowed) {
+  const classes = [];
+  if (column.align === "right") classes.push("a-r");
+  else if (column.align === "center") classes.push("a-c");
+  if (column.isMeasure || column.type === "quantitative") classes.push("num");
+  if (index < frozen) classes.push("fz", `fz${index}`);
+  if (index === frozen - 1) classes.push("fz-edge");
+  if (index > 0 && column.groupStart) classes.push("gs");
+  if (column.total) classes.push("tc");
+  if (column.wrap && !windowed) classes.push("wrap");
+  return classes.join(" ");
+}
+function spacerRow(columns) {
   const tr = document.createElement("tr");
+  tr.className = "gtv-sp";
   tr.setAttribute("aria-hidden", "true");
   const td = document.createElement("td");
-  td.colSpan = Math.max(1, opts.columns.length);
-  setStyles(td, {
-    height: `${Math.max(0, height)}px`,
-    padding: "0",
-    border: "0",
-    background: opts.tokens.color.background
-  });
+  td.colSpan = Math.max(1, columns);
   tr.appendChild(td);
   return tr;
 }
-function applyStickyColumn(cell, opts, colIndex, isHeader) {
-  if (colIndex == null || colIndex >= (opts.rowHeaderSpan ?? 0)) return;
-  cell.style.position = "sticky";
-  cell.style.left = `${leftOffset(opts, colIndex)}px`;
-  cell.style.zIndex = isHeader ? "6" : "3";
+function scrollbarWidth() {
+  if (cachedScrollbarWidth != null) return cachedScrollbarWidth;
+  if (typeof document === "undefined" || !document.body) return 0;
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden";
+  document.body.appendChild(probe);
+  cachedScrollbarWidth = probe.offsetWidth - probe.clientWidth;
+  probe.remove();
+  return cachedScrollbarWidth;
 }
 export {
-  buildTable
+  RENDER_ALL_CELLS,
+  RENDER_ALL_ROWS,
+  mountTable
 };
 //# sourceMappingURL=dom.js.map