graphein 0.11.0 → 0.12.0

package/dist/index.js

@@ -10159,7 +10159,7 @@ function buildTable(opts) {
     overflow: "auto",
     pointerEvents: "auto",
     boxSizing: "border-box",
-    border: `1px solid ${tokens.color.border}`,
+    border: `1px solid ${opts.sketch ? "transparent" : tokens.color.border}`,
     borderRadius: opts.sketch ? SKETCH_BORDER_RADIUS2 : `${tokens.radius.sm}px`,
     background: tokens.color.background
   });
@@ -10190,14 +10190,23 @@ function paintTableCanvas(opts) {
   const available = Math.max(0, rect.width - 2);
   const widths = computeFittedWidths(opts.columns, available);
   opts.widths = widths;
+  const pen = opts.sketch ? new RoughPen(ctx, opts.sketch) : null;
+  const w = Math.max(0, rect.width);
+  const h = Math.max(0, rect.height);
   ctx.save();
   ctx.beginPath();
-  roundedRect(ctx, rect.x, rect.y, Math.max(0, rect.width), Math.max(0, rect.height), tokens.radius.sm);
-  ctx.fillStyle = tokens.color.background;
-  ctx.fill();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = tokens.color.border;
-  ctx.stroke();
+  if (pen) {
+    ctx.rect(rect.x, rect.y, w, h);
+    ctx.fillStyle = tokens.color.background;
+    ctx.fill();
+  } else {
+    roundedRect(ctx, rect.x, rect.y, w, h, tokens.radius.sm);
+    ctx.fillStyle = tokens.color.background;
+    ctx.fill();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = tokens.color.border;
+    ctx.stroke();
+  }
   ctx.clip();
   const headerRows = normalizedHeaderRows(opts);
   const headerHeight = headerRows.length * metrics.headerHeight;
@@ -10209,17 +10218,18 @@ function paintTableCanvas(opts) {
   const clipped = visibleRows < opts.rowCount;
   const cueReserve = clipped && opts.clippedCue !== false && visibleRows > 0 ? metrics.rowHeight : 0;
   const rowsToDraw = Math.max(0, visibleRows - (cueReserve > 0 ? 1 : 0));
-  paintHeaderCanvas(opts, widths, headerRows, metrics);
+  paintHeaderCanvas(opts, widths, headerRows, metrics, pen);
   for (let rowIndex = 0; rowIndex < rowsToDraw; rowIndex += 1) {
-    paintBodyRowCanvas(opts, widths, rowIndex, bodyTop + rowIndex * metrics.rowHeight, metrics);
+    paintBodyRowCanvas(opts, widths, rowIndex, bodyTop + rowIndex * metrics.rowHeight, metrics, pen);
   }
   if (cueReserve > 0) {
     paintClippedCueCanvas(opts, bodyTop + rowsToDraw * metrics.rowHeight, metrics, opts.rowCount - rowsToDraw);
   }
   if (opts.footerRow) {
-    paintFooterCanvas(opts, widths, rect.y + rect.height - metrics.rowHeight, metrics);
+    paintFooterCanvas(opts, widths, rect.y + rect.height - metrics.rowHeight, metrics, pen);
   }
   ctx.restore();
+  if (pen) pen.rect(rect.x, rect.y, w, h, { stroke: tokens.color.border });
 }
 var FILL_EPS = 0.5;
 var cachedScrollbarWidth = null;
@@ -10312,14 +10322,14 @@ function makeHeaderCell(opts, title2, colIndex, align, rowIndex = 0) {
   th.textContent = title2;
   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);
+  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 ${opts.tokens.color.border}`,
+    borderBottom: `1px solid ${gridBorderColor(opts)}`,
     userSelect: "none",
     height: `${metrics.headerHeight}px`
   });
@@ -10377,19 +10387,19 @@ function makeBodyRow(opts, rowIndex, rowHeight) {
     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);
+    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 ${opts.tokens.color.border}`,
+      borderBottom: `1px solid ${gridBorderColor(opts)}`,
       height: rowHeight ? `${rowHeight}px` : `${metrics.rowHeight}px`,
       whiteSpace: column.wrap === true ? "normal" : "nowrap"
     });
     const indent = opts.cellIndent?.(rowIndex, colIndex) ?? 0;
     if (indent > 0) td.style.paddingLeft = `${metrics.paddingX + indent}px`;
-    applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg);
+    applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg, rowIndex);
     if (td.childNodes.length === 0) {
       td.textContent = formatDisplayValue(cell.value, column);
       applyNegativeStyle(td, cell.value, column);
@@ -10407,7 +10417,7 @@ function buildFooter(opts) {
   opts.columns.forEach((column, colIndex) => {
     const td = document.createElement("td");
     const cell = opts.footerRow?.cells[colIndex] ?? { value: null};
-    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding);
+    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding, gridBorderColor(opts));
     setStyles(td, {
       position: colIndex < (opts.rowHeaderSpan ?? 0) ? "sticky" : "sticky",
       bottom: "0",
@@ -10415,8 +10425,8 @@ function buildFooter(opts) {
       background: opts.tokens.color.surface,
       color: opts.tokens.color.text,
       fontWeight: String(opts.tokens.font.weight.bold),
-      borderTop: `1px solid ${opts.tokens.color.border}`,
-      borderBottom: `1px solid ${opts.tokens.color.border}`,
+      borderTop: `1px solid ${gridBorderColor(opts)}`,
+      borderBottom: `1px solid ${gridBorderColor(opts)}`,
       height: `${metrics.rowHeight}px`,
       whiteSpace: column.wrap === true ? "normal" : "nowrap"
     });
@@ -10442,7 +10452,7 @@ function makeSpacerRow(opts, height) {
   tr.appendChild(td);
   return tr;
 }
-function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg) {
+function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg, rowIndex = 0) {
   const cf = column.conditionalFormat;
   const raw = cell.raw;
   const domain = opts.conditionalDomains?.[colIndex] ?? null;
@@ -10487,13 +10497,27 @@ function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg) {
   }
   if (!domain) return;
   const ratio = normalized(numeric, domain);
-  const bar = document.createElement("div");
   const diverging2 = cf.negativeColor !== void 0 || cf.baseline === "zero";
   const positive = numeric >= 0;
   const barColor = alphaColor(positive ? cf.color ?? opts.tokens.color.accent : cf.negativeColor ?? opts.tokens.color.negative, 0.85);
   const baseline = diverging2 ? normalized(0, domain) : 0;
   const left = diverging2 ? Math.min(baseline, normalized(numeric, domain)) : 0;
   const width = diverging2 ? Math.abs(normalized(numeric, domain) - baseline) : ratio;
+  const text = document.createElement("span");
+  text.textContent = cf.showValue === false ? "" : formatDisplayValue(cell.value, column);
+  setStyles(text, overlayTextStyles(opts.tokens.color.text));
+  td.style.background = rowBg;
+  if (opts.sketch) {
+    const colWidth = opts.widths?.[colIndex] ?? column.width ?? defaultColumnWidth(column);
+    const rowHeight = densityMetrics(opts.density).rowHeight;
+    const seed = (opts.sketch.seed ^ Math.imul(rowIndex + 1, 374761393) ^ Math.imul(colIndex + 1, 668265263)) >>> 0;
+    const canvas = buildSketchDataBar(opts.sketch, barColor, colWidth, rowHeight, left, width, seed);
+    if (canvas) td.appendChild(canvas);
+    td.appendChild(text);
+    applyNegativeStyle(text, cell.value, column);
+    return;
+  }
+  const bar = document.createElement("div");
   setStyles(bar, {
     position: "absolute",
     left: `calc(${Math.round(left * 1e3) / 10}% + 4px)`,
@@ -10505,14 +10529,38 @@ function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg) {
     opacity: "0.9",
     pointerEvents: "none"
   });
-  const text = document.createElement("span");
-  text.textContent = cf.showValue === false ? "" : formatDisplayValue(cell.value, column);
-  setStyles(text, overlayTextStyles(opts.tokens.color.text));
-  td.style.background = rowBg;
   td.append(bar, text);
   applyNegativeStyle(text, cell.value, column);
 }
-function setCellBaseStyles(cell, tokens, align, sticky, padding = "6px 10px") {
+function buildSketchDataBar(sketch, color, colWidth, rowHeight, leftRatio, widthRatio, seed) {
+  const avail = Math.max(0, colWidth - 8);
+  const barW = widthRatio * avail;
+  const barH = Math.max(0, rowHeight - 10);
+  if (barW <= 0.5 || barH <= 0) return null;
+  const pad3 = 3;
+  const leftPx = 4 + leftRatio * avail;
+  const dpr = getDevicePixelRatio();
+  const canvas = document.createElement("canvas");
+  const cssW = barW + pad3 * 2;
+  const cssH = barH + pad3 * 2;
+  canvas.width = Math.max(1, Math.round(cssW * dpr));
+  canvas.height = Math.max(1, Math.round(cssH * dpr));
+  setStyles(canvas, {
+    position: "absolute",
+    left: `${leftPx - pad3}px`,
+    top: `${5 - pad3}px`,
+    width: `${cssW}px`,
+    height: `${cssH}px`,
+    pointerEvents: "none"
+  });
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.scale(dpr, dpr);
+  const pen = new RoughPen(ctx, { ...sketch, seed });
+  pen.rect(pad3, pad3, barW, barH, { stroke: color, fill: color, fillAlpha: 0.9, strokeAlpha: 0.9 });
+  return canvas;
+}
+function setCellBaseStyles(cell, tokens, align, sticky, padding = "6px 10px", borderColor = tokens.color.border) {
   setStyles(cell, {
     boxSizing: "border-box",
     padding,
@@ -10520,11 +10568,14 @@ function setCellBaseStyles(cell, tokens, align, sticky, padding = "6px 10px") {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    borderRight: `1px solid ${tokens.color.border}`,
+    borderRight: `1px solid ${borderColor}`,
     verticalAlign: "middle"
   });
   if (sticky) cell.style.position = "sticky";
 }
+function gridBorderColor(opts) {
+  return opts.sketch ? "transparent" : opts.tokens.color.border;
+}
 function renderIconValue(td, icon, color, value, position) {
   const iconSpan = document.createElement("span");
   iconSpan.textContent = icon;
@@ -10578,7 +10629,7 @@ function normalizedHeaderRows(opts) {
     }))
   ];
 }
-function paintHeaderCanvas(opts, widths, rows, metrics) {
+function paintHeaderCanvas(opts, widths, rows, metrics, pen) {
   rows.forEach((row, rowIndex) => {
     let cursor = 0;
     for (const cell of row) {
@@ -10589,7 +10640,7 @@ function paintHeaderCanvas(opts, widths, rows, metrics) {
       const y = opts.rect.y + rowIndex * metrics.headerHeight;
       const w = sumWidths(widths.slice(start, start + colSpan));
       const h = metrics.headerHeight * rowSpan;
-      paintCellBox(opts.ctx, x, y, w, h, opts.tokens.color.surface, opts.tokens.color.border);
+      paintCellBox(opts.ctx, x, y, w, h, opts.tokens.color.surface, opts.tokens.color.border, false, pen);
       paintCellText(opts, {
         x,
         y,
@@ -10605,7 +10656,7 @@ function paintHeaderCanvas(opts, widths, rows, metrics) {
     }
   });
 }
-function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics) {
+function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics, pen) {
   const cls = opts.rowClass?.(rowIndex) ?? "normal";
   let x = opts.rect.x;
   for (let colIndex = 0; colIndex < opts.columns.length; colIndex += 1) {
@@ -10615,8 +10666,8 @@ function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics) {
     const baseBg = canvasRowBackground(opts, rowIndex, cls);
     const conditional = resolveCanvasConditional(opts, column, colIndex, cell, baseBg);
     const bg = conditional.background ?? baseBg;
-    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, bg, opts.tokens.color.border);
-    if (conditional.bar) paintDataBar(opts, x, y, width, metrics.rowHeight, conditional.bar);
+    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, bg, opts.tokens.color.border, false, pen);
+    if (conditional.bar) paintDataBar(opts, x, y, width, metrics.rowHeight, conditional.bar, pen);
     const indent = opts.cellIndent?.(rowIndex, colIndex) ?? 0;
     const text = conditional.showValue === false ? "" : formatDisplayValue(cell.value, column);
     const color = negativeTextColor(cell.value, column, conditional.color ?? opts.tokens.color.text);
@@ -10638,13 +10689,13 @@ function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics) {
     x += width;
   }
 }
-function paintFooterCanvas(opts, widths, y, metrics) {
+function paintFooterCanvas(opts, widths, y, metrics, pen) {
   let x = opts.rect.x;
   for (let colIndex = 0; colIndex < opts.columns.length; colIndex += 1) {
     const column = opts.columns[colIndex];
     const width = widths[colIndex] ?? 0;
     const cell = opts.footerRow?.cells[colIndex] ?? { value: null};
-    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, opts.tokens.color.surface, opts.tokens.color.border, true);
+    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, opts.tokens.color.surface, opts.tokens.color.border, true, pen);
     paintCellText(opts, {
       x,
       y,
@@ -10673,10 +10724,25 @@ function paintClippedCueCanvas(opts, y, metrics, remaining) {
     paddingX: metrics.paddingX
   });
 }
-function paintCellBox(ctx, x, y, width, height, background, border, topBorder = false) {
+function paintCellBox(ctx, x, y, width, height, background, border, topBorder = false, pen) {
   ctx.save();
   ctx.fillStyle = background;
   ctx.fillRect(x, y, width, height);
+  if (pen) {
+    pen.polyline(
+      [
+        { x: x + width, y },
+        { x: x + width, y: y + height },
+        { x, y: y + height }
+      ],
+      { stroke: border, strokeWidth: 1 }
+    );
+    if (topBorder) {
+      pen.polyline([{ x, y }, { x: x + width, y }], { stroke: border, strokeWidth: 1 });
+    }
+    ctx.restore();
+    return;
+  }
   ctx.strokeStyle = border;
   ctx.lineWidth = 1;
   ctx.beginPath();
@@ -10787,9 +10853,18 @@ function resolveCanvasConditional(opts, column, colIndex, cell, rowBg) {
   const color = alphaColor(positive ? cf.color ?? opts.tokens.color.accent : cf.negativeColor ?? opts.tokens.color.negative, 0.85);
   return { background: rowBg, showValue: cf.showValue !== false, bar: { leftRatio, widthRatio, color } };
 }
-function paintDataBar(opts, x, y, width, height, bar) {
+function paintDataBar(opts, x, y, width, height, bar, pen) {
   const left = x + 4 + bar.leftRatio * Math.max(0, width - 8);
   const barW = bar.widthRatio * Math.max(0, width - 8);
+  if (pen) {
+    pen.rect(left, y + 5, barW, Math.max(0, height - 10), {
+      stroke: bar.color,
+      fill: bar.color,
+      fillAlpha: 0.9,
+      strokeAlpha: 0.9
+    });
+    return;
+  }
   opts.ctx.save();
   opts.ctx.globalAlpha *= 0.9;
   opts.ctx.beginPath();
@@ -10798,6 +10873,72 @@ function paintDataBar(opts, x, y, width, height, bar) {
   opts.ctx.fill();
   opts.ctx.restore();
 }
+function createSketchGridCanvas(rect) {
+  const dpr = getDevicePixelRatio();
+  const w = Math.max(0, rect.width);
+  const h = Math.max(0, rect.height);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(w * dpr));
+  canvas.height = Math.max(1, Math.round(h * dpr));
+  setStyles(canvas, {
+    position: "absolute",
+    left: `${rect.x}px`,
+    top: `${rect.y}px`,
+    width: `${w}px`,
+    height: `${h}px`,
+    pointerEvents: "none"
+  });
+  return { canvas, ctx: canvas.getContext("2d"), dpr };
+}
+function paintSketchGridOverlay(ctx, o) {
+  const w = Math.max(0, o.rect.width);
+  const h = Math.max(0, o.rect.height);
+  ctx.save();
+  ctx.setTransform(o.dpr, 0, 0, o.dpr, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+  const metrics = densityMetrics(o.density);
+  const headerHeight = o.headerRowCount * metrics.headerHeight;
+  const footerHeight = o.hasFooter ? metrics.rowHeight : 0;
+  const bodyTop = headerHeight;
+  const bodyBottom = Math.max(bodyTop, h - footerHeight);
+  const border = o.tokens.color.border;
+  const base = o.sketch.seed >>> 0;
+  const stroke = (x1, y1, x2, y2, seed) => {
+    const pen = new RoughPen(ctx, { ...o.sketch, seed: seed >>> 0 });
+    pen.polyline(
+      [
+        { x: x1, y: y1 },
+        { x: x2, y: y2 }
+      ],
+      { stroke: border, strokeWidth: 1 }
+    );
+  };
+  let cursor = 0;
+  for (let i = 0; i < o.columns.length - 1; i += 1) {
+    cursor += o.widths[i] ?? 0;
+    const pinned = i < (o.rowHeaderSpan ?? 0);
+    const x = pinned ? cursor : cursor - o.scrollLeft;
+    if (x <= 0 || x >= w) continue;
+    stroke(x, 0, x, h, base ^ Math.imul(i + 1, 2246822519));
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(0, bodyTop, w, Math.max(0, bodyBottom - bodyTop));
+  ctx.clip();
+  const firstRow = Math.max(0, Math.floor(o.scrollTop / metrics.rowHeight) - 1);
+  for (let r = firstRow; r < o.rowCount; r += 1) {
+    const y = bodyTop + (r + 1) * metrics.rowHeight - o.scrollTop;
+    if (y <= bodyTop) continue;
+    if (y >= bodyBottom) break;
+    stroke(0, y, w, y, base ^ Math.imul(r + 1, 3266489917));
+  }
+  ctx.restore();
+  if (headerHeight > 0 && headerHeight < h) stroke(0, headerHeight, w, headerHeight, (base ^ 2654435769) >>> 0);
+  if (footerHeight > 0 && bodyBottom > bodyTop) stroke(0, bodyBottom, w, bodyBottom, (base ^ 2246822507) >>> 0);
+  const framePen = new RoughPen(ctx, { ...o.sketch, seed: base });
+  framePen.rect(1.5, 1.5, Math.max(0, w - 3), Math.max(0, h - 3), { stroke: border, strokeWidth: 1 });
+  ctx.restore();
+}
 function canvasRowBackground(opts, rowIndex, cls) {
   if (cls !== "normal") return opts.tokens.color.surface;
   if (opts.striped === true && rowIndex % 2 === 1) return subtleStripe(opts.tokens);
@@ -10900,7 +11041,7 @@ function drawTableCanvas(surface, spec, tokens, size) {
     headerRows: buildTableHeaderRows(columns),
     footerRow: buildTotalsRow(sortedRows, columns, read, spec),
     density: spec.density,
-    sketch: resolveSketch(spec) != null
+    sketch: resolveSketch(spec)
   });
 }
 function renderTable(surface, spec, tokens, size) {
@@ -10908,7 +11049,7 @@ function renderTable(surface, spec, tokens, size) {
   const data = spec.data ?? [];
   const columns = resolveColumns(data, spec);
   const read = columns.map((column) => accessor(column.key));
-  const sketch = resolveSketch(spec) != null;
+  const sketch = resolveSketch(spec);
   let sortState = initialSortState(spec, columns);
   let sortedRows = sortRows(data, columns, read, sortState);
   const domains = columns.map(
@@ -10919,6 +11060,9 @@ function renderTable(surface, spec, tokens, size) {
   );
   const host = document.createElement("div");
   surface.overlay.appendChild(host);
+  const headerRowCount = buildTableHeaderRows(columns)?.length ?? 1;
+  const overlay = sketch ? createSketchGridCanvas(rect) : null;
+  if (overlay) surface.overlay.appendChild(overlay.canvas);
   let frame = 0;
   const renderWindow = () => {
     const scrollTop = host.scrollTop || 0;
@@ -10926,7 +11070,8 @@ function renderTable(surface, spec, tokens, size) {
     const start = Math.max(0, Math.floor(scrollTop / rowHeight) - BUFFER_ROWS);
     const visible = Math.ceil(Math.max(rect.height, host.clientHeight || rect.height) / rowHeight) + BUFFER_ROWS * 2;
     const end = Math.min(sortedRows.length, start + visible);
-    buildTable({
+    const footerRow = buildTotalsRow(sortedRows, columns, read, spec);
+    const buildOpts = {
       container: host,
       tokens,
       rect,
@@ -10947,11 +11092,28 @@ function renderTable(surface, spec, tokens, size) {
       sortState: sortState ?? void 0,
       conditionalDomains: domains,
       headerRows: buildTableHeaderRows(columns),
-      footerRow: buildTotalsRow(sortedRows, columns, read, spec),
+      footerRow,
       density: spec.density,
       visibleRange: { start, end, rowHeight },
       sketch
-    });
+    };
+    buildTable(buildOpts);
+    if (sketch && overlay?.ctx) {
+      paintSketchGridOverlay(overlay.ctx, {
+        sketch,
+        tokens,
+        rect,
+        dpr: overlay.dpr,
+        columns,
+        widths: buildOpts.widths ?? [],
+        rowCount: sortedRows.length,
+        headerRowCount,
+        hasFooter: Boolean(footerRow),
+        density: spec.density,
+        scrollLeft: host.scrollLeft || 0,
+        scrollTop
+      });
+    }
   };
   host.addEventListener("scroll", () => {
     if (frame !== 0) return;
@@ -11108,15 +11270,16 @@ function drawMatrixCanvas(surface, spec, tokens, size) {
     conditionalDomains: prepared.bodyDomains,
     headerRows: prepared.headerRows,
     density: spec.density,
-    sketch: resolveSketch(spec) != null
+    sketch: resolveSketch(spec)
   });
 }
 function renderMatrix(surface, spec, tokens, size) {
   const rect = drawTitleBlock(surface, tokens, size, spec.title);
   const prepared = prepareMatrix(spec);
+  const sketch = resolveSketch(spec);
   const host = document.createElement("div");
   surface.overlay.appendChild(host);
-  buildTable({
+  const buildOpts = {
     container: host,
     tokens,
     rect,
@@ -11143,8 +11306,45 @@ function renderMatrix(surface, spec, tokens, size) {
     conditionalDomains: prepared.bodyDomains,
     headerRows: prepared.headerRows,
     density: spec.density,
-    sketch: resolveSketch(spec) != null
-  });
+    sketch
+  };
+  buildTable(buildOpts);
+  if (sketch) {
+    const overlay = createSketchGridCanvas(rect);
+    if (overlay.ctx) {
+      surface.overlay.appendChild(overlay.canvas);
+      const ctx = overlay.ctx;
+      const draw = () => {
+        paintSketchGridOverlay(ctx, {
+          sketch,
+          tokens,
+          rect,
+          dpr: overlay.dpr,
+          columns: prepared.columns,
+          widths: buildOpts.widths ?? [],
+          rowCount: prepared.rows.length,
+          headerRowCount: prepared.headerRows.length,
+          hasFooter: false,
+          rowHeaderSpan: 1,
+          density: spec.density,
+          scrollLeft: host.scrollLeft || 0,
+          scrollTop: host.scrollTop || 0
+        });
+      };
+      draw();
+      let frame = 0;
+      host.addEventListener("scroll", () => {
+        if (frame !== 0) return;
+        frame = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
+          frame = 0;
+          draw();
+        }) : window.setTimeout(() => {
+          frame = 0;
+          draw();
+        }, 16);
+      });
+    }
+  }
 }
 function prepareMatrix(spec) {
   const data = spec.data ?? [];