@sportsdataverse/sdvtables 0.1.0 → 0.2.0

package/dist/{chunk-UCRLJGDL.js → chunk-R375P3MN.js}

@@ -1,4 +1,4 @@
-import { resolveTheme, TableSpecError, nextSortDir, TOKEN_KEYS, toNumber, isBlank, secondaryOn, naturalDigits, RANK_PALETTE, formatValue, fontStack, formatNumber, selectRows, snakeAlign, matches, ordinal } from './chunk-4VKYHOHL.js';
+import { TableSpecError, formatNumber, naturalDigits, resolveTheme, TOKEN_KEYS, toNumber, checkChart, isBlank, secondaryOn, RANK_PALETTE, formatValue, fontStack, selectRows, snakeAlign, matches, ordinal, scaledNumber } from './chunk-UTOVFIFT.js';
 import { loadLeague, hex6, warn, resolveSync, onColor, mix, solid, contrast, teamColorsSync, headshotUrl, logoUrlSync } from '@sportsdataverse/sdvplot';
 
 var NAMES = /* @__PURE__ */ new Map();
@@ -23,13 +23,13 @@ var MAP = {
 };
 var escapeHtml = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => MAP[c]);
 var escapeAttr = escapeHtml;
-var CSS_UNSAFE = /[;{}<>"\\\n\r]/;
+var CSS_UNSAFE = /[;{}<>"\\\n\r]|url\(/i;
 var isCssValue = (v) => !CSS_UNSAFE.test(String(v));
 function cssValue(v, field) {
   const s = String(v);
   if (CSS_UNSAFE.test(s))
     throw new TableSpecError(
-      `${field} ${JSON.stringify(s)} is not a CSS value: it may not contain ; { } < > " \\ or a line break`
+      `${field} ${JSON.stringify(s)} is not a CSS value: it may not contain ; { } < > " \\ url( or a line break`
     );
   return s;
 }
@@ -47,6 +47,31 @@ function styleOf(decls) {
   return s ? ` style="${s}"` : "";
 }
 
+// src/html/icons.ts
+var PATHS = {
+  circle: "M8 1a7 7 0 1 0 0 14A7 7 0 1 0 8 1z",
+  square: "M2 2h12v12H2z",
+  diamond: "M8 0.5 15.5 8 8 15.5 0.5 8z",
+  star: "M8 0.8l2.2 4.6 5 .6-3.7 3.5.9 5L8 12l-4.4 2.5.9-5L.8 6l5-.6z",
+  "triangle-up": "M8 1.5 15 14.5H1z",
+  "triangle-down": "M1 1.5h14L8 14.5z",
+  "arrow-up": "M8 1 14 8H10v7H6V8H2z",
+  "arrow-down": "M6 1h4v7h4l-6 7-6-7h4z",
+  "arrow-right": "M1 6h7V2l7 6-7 6v-4H1z",
+  check: "M1.5 8.5 3.6 6.4 6.2 9 12.4 2.8 14.5 4.9 6.2 13.2z",
+  xmark: "M3.1 1 8 5.9 12.9 1 15 3.1 10.1 8 15 12.9 12.9 15 8 10.1 3.1 15 1 12.9 5.9 8 1 3.1z",
+  minus: "M1 6.5h14v3H1z",
+  plus: "M6.5 1h3v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5z",
+  heart: "M8 14.5 1.6 8.2A3.9 3.9 0 0 1 8 3.4a3.9 3.9 0 0 1 6.4 4.8z"
+};
+var ICON_NAMES = Object.keys(PATHS);
+function iconSvg(name, color, size) {
+  const d = Object.hasOwn(PATHS, name) ? PATHS[name] : void 0;
+  if (d === void 0)
+    throw new TableSpecError(`unknown icon ${JSON.stringify(name)}; icons are ${ICON_NAMES.join(", ")}`);
+  return `<svg class="sdvt-icon" viewBox="0 0 16 16" width="${size}" height="${size}" fill="${escapeAttr(color)}" aria-hidden="true" style="vertical-align:middle"><path d="${d}"/></svg>`;
+}
+
 // src/html/fonts.ts
 function fontsLink(fonts) {
   const byFamily = /* @__PURE__ */ new Map();
@@ -147,16 +172,43 @@ function BASE_CSS(sel) {
     // Task 10: the column `s` sorts
   ].join("\n");
 }
-function ramp(palette, [lo, hi]) {
+function ramp(palette, [lo, hi], bias = 1) {
   const k = palette.length - 1;
+  if (!(bias > 0)) throw new TableSpecError(`bias must be a positive number, got ${String(bias)}`);
+  const stops = palette.map((_, i) => k === 0 ? 0 : (i / k) ** bias);
   return (v) => {
     if (!(lo <= v && v <= hi)) return null;
     if (k === 0) return palette[0] ?? null;
     const t = hi === lo ? 0.5 : (v - lo) / (hi - lo);
-    const i = Math.min(Math.floor(t * k), k - 1);
-    return mix(palette[i], palette[i + 1], t * k - i);
+    if (bias === 1) {
+      const i2 = Math.min(Math.floor(t * k), k - 1);
+      return mix(palette[i2], palette[i2 + 1], t * k - i2);
+    }
+    let i = 0;
+    while (i < k - 1 && t > stops[i + 1]) i++;
+    const a = stops[i];
+    const b = stops[i + 1];
+    return mix(palette[i], palette[i + 1], Math.min(1, Math.max(0, (t - a) / (b - a))));
   };
 }
+function ntile(values, n) {
+  if (!(Number.isInteger(n) && n > 0))
+    throw new TableSpecError(`buckets must be a positive integer, got ${String(n)}`);
+  const order = values.map((v, i) => [v, i]).filter((p) => p[0] !== null).sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  const len = order.length;
+  const out = values.map(() => null);
+  const nLarger = len % n;
+  const larger = Math.ceil(len / n);
+  const smaller = Math.floor(len / n);
+  const threshold = larger * nLarger;
+  order.forEach(([, i], j) => {
+    const x = j + 1;
+    out[i] = Math.floor(
+      x <= threshold ? (x + larger - 1) / larger : (x - threshold + smaller - 1) / smaller + nLarger
+    );
+  });
+  return out;
+}
 function averageRanks(values, desc) {
   const idx = values.map((v, i) => [v, i]).filter((p) => p[0] !== null).sort((a, b) => a[0] - b[0] || a[1] - b[1]);
   const out = values.map(() => null);
@@ -195,6 +247,394 @@ function sampleSd(xs) {
   return Math.sqrt(xs.reduce((a, b) => a + (b - m) ** 2, 0) / (xs.length - 1));
 }
 
+// src/html/named-colors.ts
+var NAMED = new Map(
+  Object.entries({
+    aliceblue: "f0f8ff",
+    antiquewhite: "faebd7",
+    aqua: "00ffff",
+    aquamarine: "7fffd4",
+    azure: "f0ffff",
+    beige: "f5f5dc",
+    bisque: "ffe4c4",
+    black: "000000",
+    blanchedalmond: "ffebcd",
+    blue: "0000ff",
+    blueviolet: "8a2be2",
+    brown: "a52a2a",
+    burlywood: "deb887",
+    cadetblue: "5f9ea0",
+    chartreuse: "7fff00",
+    chocolate: "d2691e",
+    coral: "ff7f50",
+    cornflowerblue: "6495ed",
+    cornsilk: "fff8dc",
+    crimson: "dc143c",
+    cyan: "00ffff",
+    darkblue: "00008b",
+    darkcyan: "008b8b",
+    darkgoldenrod: "b8860b",
+    darkgray: "a9a9a9",
+    darkgreen: "006400",
+    darkgrey: "a9a9a9",
+    darkkhaki: "bdb76b",
+    darkmagenta: "8b008b",
+    darkolivegreen: "556b2f",
+    darkorange: "ff8c00",
+    darkorchid: "9932cc",
+    darkred: "8b0000",
+    darksalmon: "e9967a",
+    darkseagreen: "8fbc8f",
+    darkslateblue: "483d8b",
+    darkslategray: "2f4f4f",
+    darkslategrey: "2f4f4f",
+    darkturquoise: "00ced1",
+    darkviolet: "9400d3",
+    deeppink: "ff1493",
+    deepskyblue: "00bfff",
+    dimgray: "696969",
+    dimgrey: "696969",
+    dodgerblue: "1e90ff",
+    firebrick: "b22222",
+    floralwhite: "fffaf0",
+    forestgreen: "228b22",
+    fuchsia: "ff00ff",
+    gainsboro: "dcdcdc",
+    ghostwhite: "f8f8ff",
+    gold: "ffd700",
+    goldenrod: "daa520",
+    gray: "808080",
+    green: "008000",
+    greenyellow: "adff2f",
+    grey: "808080",
+    honeydew: "f0fff0",
+    hotpink: "ff69b4",
+    indianred: "cd5c5c",
+    indigo: "4b0082",
+    ivory: "fffff0",
+    khaki: "f0e68c",
+    lavender: "e6e6fa",
+    lavenderblush: "fff0f5",
+    lawngreen: "7cfc00",
+    lemonchiffon: "fffacd",
+    lightblue: "add8e6",
+    lightcoral: "f08080",
+    lightcyan: "e0ffff",
+    lightgoldenrodyellow: "fafad2",
+    lightgray: "d3d3d3",
+    lightgreen: "90ee90",
+    lightgrey: "d3d3d3",
+    lightpink: "ffb6c1",
+    lightsalmon: "ffa07a",
+    lightseagreen: "20b2aa",
+    lightskyblue: "87cefa",
+    lightslategray: "778899",
+    lightslategrey: "778899",
+    lightsteelblue: "b0c4de",
+    lightyellow: "ffffe0",
+    lime: "00ff00",
+    limegreen: "32cd32",
+    linen: "faf0e6",
+    magenta: "ff00ff",
+    maroon: "800000",
+    mediumaquamarine: "66cdaa",
+    mediumblue: "0000cd",
+    mediumorchid: "ba55d3",
+    mediumpurple: "9370db",
+    mediumseagreen: "3cb371",
+    mediumslateblue: "7b68ee",
+    mediumspringgreen: "00fa9a",
+    mediumturquoise: "48d1cc",
+    mediumvioletred: "c71585",
+    midnightblue: "191970",
+    mintcream: "f5fffa",
+    mistyrose: "ffe4e1",
+    moccasin: "ffe4b5",
+    navajowhite: "ffdead",
+    navy: "000080",
+    oldlace: "fdf5e6",
+    olive: "808000",
+    olivedrab: "6b8e23",
+    orange: "ffa500",
+    orangered: "ff4500",
+    orchid: "da70d6",
+    palegoldenrod: "eee8aa",
+    palegreen: "98fb98",
+    paleturquoise: "afeeee",
+    palevioletred: "db7093",
+    papayawhip: "ffefd5",
+    peachpuff: "ffdab9",
+    peru: "cd853f",
+    pink: "ffc0cb",
+    plum: "dda0dd",
+    powderblue: "b0e0e6",
+    purple: "800080",
+    rebeccapurple: "663399",
+    red: "ff0000",
+    rosybrown: "bc8f8f",
+    royalblue: "4169e1",
+    saddlebrown: "8b4513",
+    salmon: "fa8072",
+    sandybrown: "f4a460",
+    seagreen: "2e8b57",
+    seashell: "fff5ee",
+    sienna: "a0522d",
+    silver: "c0c0c0",
+    skyblue: "87ceeb",
+    slateblue: "6a5acd",
+    slategray: "708090",
+    slategrey: "708090",
+    snow: "fffafa",
+    springgreen: "00ff7f",
+    steelblue: "4682b4",
+    tan: "d2b48c",
+    teal: "008080",
+    thistle: "d8bfd8",
+    tomato: "ff6347",
+    turquoise: "40e0d0",
+    violet: "ee82ee",
+    wheat: "f5deb3",
+    white: "ffffff",
+    whitesmoke: "f5f5f5",
+    yellow: "ffff00",
+    yellowgreen: "9acd32"
+  }).map(([k, v]) => [k, `#${v}`])
+);
+function namedColor(s) {
+  return NAMED.get(s.trim().toLowerCase());
+}
+
+// src/html/svg.ts
+var halfEven = (x) => {
+  const r = Math.round(x);
+  return String(Math.abs(x % 1) === 0.5 && r % 2 !== 0 ? r - 1 : r);
+};
+function cutlineSvg(text, color, size) {
+  const t = text.toUpperCase();
+  const tracking = 1.1;
+  const esc = t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${halfEven(t.length * (size * 0.8 + tracking) + 4)}" height="${halfEven(size + 4)}"><text x="0" y="${(size + 0.5).toFixed(1)}" font-family="Helvetica,Arial,sans-serif" font-size="${size}" font-weight="700" letter-spacing="${tracking}" fill="${color}">${esc}</text></svg>`;
+  return `data:image/svg+xml;charset=utf-8,${pyQuote(svg)}`;
+}
+var pyQuote = (x) => encodeURIComponent(x).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+function watermarkSvg(text, color, opacity, angle, font) {
+  const label = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const size = 100;
+  const textW = Math.max(label.length * size * 0.62, size);
+  const textH = size * 1.3;
+  const rad = Math.abs(angle) * Math.PI / 180;
+  const w = Math.ceil(textW * Math.cos(rad) + textH * Math.sin(rad)) + 4;
+  const h = Math.ceil(textW * Math.sin(rad) + textH * Math.cos(rad)) + 4;
+  const rot = angle !== 0 ? ` transform="rotate(${angle} ${w / 2} ${h / 2})"` : "";
+  const attr = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}"><text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="${attr(font)}" font-size="${size}" font-weight="700" fill="${attr(color)}" fill-opacity="${opacity}"${rot}>${label}</text></svg>`;
+  return [`data:image/svg+xml,${pyQuote(svg)}`, h > w];
+}
+var cssStr = (v) => v.replace(/[\\"\n\r<]/g, (c) => `\\${c.charCodeAt(0).toString(16)} `);
+var NAMED2 = ["first", "last", "min", "max"];
+var n2 = (v) => String(Math.round(v * 100) / 100 + 0);
+function plainNumber(v) {
+  if (Number.isInteger(v)) return String(v);
+  const places = Math.max(4, 3 - Math.floor(Math.log10(Math.abs(v))));
+  return v.toFixed(places).replace(/0+$/, "").replace(/\.$/, "");
+}
+var fixed = (v, d) => {
+  const s = v.toFixed(d);
+  return /^-0(.0*)?$/.test(s) ? s.slice(1) : s;
+};
+var att = (v, field) => escapeAttr(cssValue(v, field));
+function quantile(xs, p) {
+  const s = [...xs].sort((a2, b) => a2 - b);
+  const h = (s.length - 1) * p;
+  const lo = Math.floor(h);
+  const a = s[lo];
+  return a + (h - lo) * (s[Math.min(lo + 1, s.length - 1)] - a);
+}
+var STAT = {
+  mean: (xs) => xs.reduce((s, x) => s + x, 0) / xs.length,
+  median: (xs) => quantile(xs, 0.5),
+  min: (xs) => Math.min(...xs),
+  max: (xs) => Math.max(...xs)
+};
+function margins(labels, statline, bars) {
+  const any = labels.length > 0;
+  const endsOnly = any && !labels.some((n) => n === "min" || n === "max" || n === "all");
+  if (bars) {
+    if (statline) return any ? [12, 26, 3, 26, 22] : [4, 28, 3, 13, 22];
+    return any ? [12, 26, 0, 26, 22] : [3, 13, 0, 13, 22];
+  }
+  if (statline) return !any ? [4, 28, 3, 13, 22] : endsOnly ? [5, 28, 3, 24, 22] : [14, 28, 10, 13, 28];
+  return !any ? [3, 13, 2, 13, 22] : endsOnly ? [5, 24, 3, 24, 22] : [14, 13, 10, 13, 30];
+}
+function frameOf(col, present2, bars, row) {
+  const [t = 0, r = 0, b = 0, l = 0, grown = 22] = margins(col.labels, col.statline !== void 0, bars);
+  const h = col.chartHeight ?? grown;
+  if (col.chartWidth <= l + r || h <= t + b)
+    throw new TableSpecError(
+      `column "${col.key}": ${col.kind} chartWidth x chartHeight ${plainNumber(col.chartWidth)} x ${plainNumber(h)} leaves no room inside its margins (${l + r} x ${t + b} px with these labels/statline); make the chart larger`
+    );
+  const lo = col.minValue ?? Math.min(...present2, ...bars ? [0] : []);
+  const hi = col.maxValue ?? Math.max(...present2, ...bars ? [0] : []);
+  if (lo > hi)
+    throw new TableSpecError(
+      `column "${col.key}" row ${row}: minValue/maxValue cross the row's data (bottom ${plainNumber(lo)} is above top ${plainNumber(hi)}); give both bounds, or one the data stays on the right side of`
+    );
+  const bottom = h - b;
+  const y = (v) => hi === lo ? (t + bottom) / 2 : t + Math.min(Math.max((hi - v) / (hi - lo), 0), 1) * (bottom - t);
+  return { h, top: t, right: col.chartWidth - r, bottom, left: l, lo, hi, y };
+}
+function statlineSvg(col, f, present2) {
+  if (col.statline === void 0) return "";
+  const v = STAT[col.statline](present2);
+  const y = n2(f.y(v));
+  const c = att(col.statlineColor, `${col.kind} statlineColor`);
+  const size = att(col.statlineLabelSize, `${col.kind} statlineLabelSize`);
+  return `<line class="sdvt-statline" x1="${n2(f.left)}" x2="${n2(f.right)}" y1="${y}" y2="${y}" stroke="${c}" stroke-width="1" stroke-dasharray="2,2" stroke-opacity="0.75"/><text class="sdvt-statline-label" x="${n2(f.right + 5)}" y="${y}" dominant-baseline="middle" fill="${c}" font-weight="bold" font-size="${size}">${fixed(v, col.decimals)}</text>`;
+}
+function bandlineSvg(col, f, present2) {
+  if (col.bandline === void 0) return "";
+  const range = col.bandline === "range" || present2.length < 2;
+  const lo = range ? Math.min(...present2) : quantile(present2, 0.25);
+  const hi = range ? Math.max(...present2) : quantile(present2, 0.75);
+  const y1 = f.y(hi);
+  return `<rect class="sdvt-bandline" x="${n2(f.left)}" y="${n2(y1)}" width="${n2(f.right - f.left)}" height="${n2(f.y(lo) - y1)}" fill="${att(col.bandlineColor, `${col.kind} bandlineColor`)}" fill-opacity="${col.bandlineOpacity}"/>`;
+}
+function summary(name, col, present2) {
+  const n = present2.length;
+  let out = `${name} of ${n} value${n === 1 ? "" : "s"}: min ${plainNumber(Math.min(...present2))}, max ${plainNumber(Math.max(...present2))}, last ${plainNumber(present2[n - 1])}`;
+  if (col.statline) out += `; ${col.statline} line at ${fixed(STAT[col.statline](present2), col.decimals)}`;
+  if (col.bandline)
+    out += `; band over the ${col.bandline === "innerquartiles" ? "inner quartiles" : "range"}`;
+  return out;
+}
+function pointsAt(values, idx) {
+  const v = (i) => values[i];
+  let min = idx[0];
+  let max = min;
+  for (const i of idx) {
+    if (v(i) < v(min)) min = i;
+    if (v(i) > v(max)) max = i;
+  }
+  return { first: idx[0], last: idx.at(-1), min, max };
+}
+function markColors(h, at, idx, field) {
+  const named = h === void 0 ? {} : Array.isArray(h) ? Object.fromEntries(h.map((n) => [n, "red"])) : h;
+  const out = /* @__PURE__ */ new Map();
+  const all = named.all;
+  if (all !== void 0) for (const i of idx) out.set(i, att(all, field));
+  for (const n of NAMED2) {
+    const c = named[n];
+    if (c !== void 0) out.set(at[n], att(c, field));
+  }
+  return new Map([...out].sort((a, b) => a[0] - b[0]));
+}
+var labelled = (labels, at, idx) => labels.includes("all") ? [...idx] : [...new Set(labels.map((n) => at[n]))].sort((a, b) => a - b);
+function chartSvg(kind, w, h, label, body) {
+  return `<svg class="sdvt-${kind}" xmlns="http://www.w3.org/2000/svg" width="${n2(w)}" height="${n2(h)}" viewBox="0 0 ${n2(w)} ${n2(h)}" role="img" aria-label="${escapeAttr(label)}" style="display:inline-block;vertical-align:middle;overflow:visible"><title>${escapeHtml(label)}</title>${body}</svg>`;
+}
+var present = (values) => values.filter((v) => v !== null);
+var presentIdx = (values) => values.flatMap((v, i) => v === null ? [] : [i]);
+function sparklineSvg(col, values, color, row) {
+  const xs = present(values);
+  const idx = presentIdx(values);
+  const f = frameOf(col, xs, false, row);
+  const n = values.length;
+  const step = n > 1 ? (f.right - f.left) / (n - 1) : 0;
+  const pts = new Map(
+    idx.map((i) => [i, [n > 1 ? f.left + i * step : (f.left + f.right) / 2, f.y(values[i])]])
+  );
+  const path = [];
+  for (let i = 0; i < n; i++) {
+    const p = pts.get(i);
+    if (!p) continue;
+    const down = pts.has(i - 1);
+    path.push(`${down ? "L" : "M"}${n2(p[0])},${n2(p[1])}`);
+    if (!down && !pts.has(i + 1)) path.push("h0");
+  }
+  const stroke = att(color, "sparkline lineColor");
+  let body = bandlineSvg(col, f, xs);
+  if (col.showArea) {
+    const runs = [];
+    for (const i of idx) {
+      if (pts.has(i - 1)) runs.at(-1)?.push(pts.get(i));
+      else runs.push([pts.get(i)]);
+    }
+    const b = n2(f.bottom);
+    const d = runs.map(
+      (r) => `M${n2(r[0][0])},${b} ${r.map(([x, y]) => `L${n2(x)},${n2(y)}`).join(" ")} L${n2(r.at(-1)[0])},${b} Z`
+    ).join(" ");
+    const fill = col.areaColor === void 0 ? stroke : att(col.areaColor, "sparkline areaColor");
+    body += `<path class="sdvt-area" d="${d}" fill="${fill}" fill-opacity="${col.areaOpacity}"/>`;
+  }
+  body += `<path class="sdvt-line" d="${path.join(" ")}" fill="none" stroke="${stroke}" stroke-width="${col.lineWidth}" stroke-linejoin="round" stroke-linecap="round"/>`;
+  body += statlineSvg(col, f, xs);
+  const at = pointsAt(values, idx);
+  for (const [i, c] of markColors(col.highlightPoints, at, idx, "sparkline highlightPoints")) {
+    const [x, y] = pts.get(i);
+    body += `<circle class="sdvt-point" cx="${n2(x)}" cy="${n2(y)}" r="${col.pointSize}" fill="${c}" stroke="${c}"/>`;
+  }
+  const endsOnly = col.labels.length > 0 && !col.labels.some((l) => l === "min" || l === "max" || l === "all");
+  const size = att(col.labelSize, "sparkline labelSize");
+  for (const i of labelled(col.labels, at, idx)) {
+    const [x, y] = pts.get(i);
+    const pos = endsOnly && i === at.first ? `x="${n2(x - 6)}" y="${n2(y)}" text-anchor="end" dominant-baseline="middle"` : endsOnly && i === at.last ? `x="${n2(x + 6)}" y="${n2(y)}" text-anchor="start" dominant-baseline="middle"` : `x="${n2(x)}" y="${n2(y - 7)}" text-anchor="middle"`;
+    body += `<text class="sdvt-label" ${pos} fill="currentColor" font-size="${size}">${fixed(values[i], col.decimals)}</text>`;
+  }
+  return chartSvg("sparkline", col.chartWidth, f.h, summary("Sparkline", col, xs), body);
+}
+function sparkbarSvg(col, values, color, row) {
+  const xs = present(values);
+  const idx = presentIdx(values);
+  const f = frameOf(col, xs, true, row);
+  const band = (f.right - f.left) / values.length;
+  const barW = band * 0.8;
+  const base = f.y(Math.min(Math.max(0, f.lo), f.hi));
+  const at = pointsAt(values, idx);
+  const marks = markColors(col.highlightBars, at, idx, "sparkbar highlightBars");
+  const fill = att(color, "sparkbar fillColor");
+  let body = bandlineSvg(col, f, xs);
+  const tops = /* @__PURE__ */ new Map();
+  for (const i of idx) {
+    const x = f.left + i * band + (band - barW) / 2;
+    const y = f.y(values[i]);
+    tops.set(i, [x + barW / 2, Math.min(y, base)]);
+    body += `<rect class="sdvt-bar" x="${n2(x)}" y="${n2(Math.min(y, base))}" width="${n2(barW)}" height="${n2(Math.abs(base - y))}" fill="${marks.get(i) ?? fill}" fill-opacity="${col.fillOpacity}"/>`;
+  }
+  body += statlineSvg(col, f, xs);
+  const size = att(col.labelSize, "sparkbar labelSize");
+  for (const i of labelled(col.labels, at, idx)) {
+    const [x, y] = tops.get(i);
+    body += `<text class="sdvt-label" x="${n2(x)}" y="${n2(y - 3)}" text-anchor="middle" fill="currentColor" font-size="${size}">${fixed(values[i], col.decimals)}</text>`;
+  }
+  return chartSvg("sparkbar", col.chartWidth, f.h, summary("Bar chart", col, xs), body);
+}
+function arc(c, outer, inner, frac) {
+  const t = Math.PI * (1 - frac);
+  const cos = Math.cos(t);
+  const sin = Math.sin(t);
+  return `M${n2(c - outer)},${n2(c)} A${n2(outer)},${n2(outer)} 0 0 1 ${n2(c + outer * cos)},${n2(c - outer * sin)} L${n2(c + inner * cos)},${n2(c - inner * sin)} A${n2(inner)},${n2(inner)} 0 0 0 ${n2(c - inner)},${n2(c)} Z`;
+}
+function gaugeSvg(col, v, lo, hi, color, fmt) {
+  const w = 50 * col.size;
+  const r = w / 2;
+  const inner = r * 0.75;
+  const frac = hi === lo ? 0 : Math.min(Math.max((Math.abs(v) - lo) / (hi - lo), 0), 1);
+  const ink = col.textColor === void 0 ? "currentColor" : att(col.textColor, "gauge textColor");
+  const weight = col.boldText ? ' font-weight="bold"' : "";
+  const font = col.textSize === void 0 ? "" : ` font-size="${att(col.textSize, "gauge textSize")}"`;
+  let body = `<path class="sdvt-track" d="${arc(r, r, inner, 1)}" fill="${att(col.background, "gauge background")}"/>`;
+  if (frac > 0)
+    body += `<path class="sdvt-fill" d="${arc(r, r, inner, frac)}" fill="${color}" fill-opacity="${col.opacity}"/>`;
+  body += `<text class="sdvt-value" x="${n2(r)}" y="${n2(r - 2)}" text-anchor="middle" fill="${ink}"${weight}${font}>${escapeHtml(fmt(v))}</text>`;
+  if (col.showMinMax) {
+    const y = n2(r + 10 * col.size);
+    body += `<text class="sdvt-min" x="0" y="${y}" text-anchor="start" fill="${ink}" font-size="0.7em">${escapeHtml(fmt(lo))}</text><text class="sdvt-max" x="${n2(w)}" y="${y}" text-anchor="end" fill="${ink}" font-size="0.7em">${escapeHtml(fmt(hi))}</text>`;
+  }
+  const gauged = v < 0 ? ` (its absolute value, ${fmt(Math.abs(v))}, is gauged)` : "";
+  const label = `Gauge: ${fmt(v)}${gauged} on a scale from ${fmt(lo)} to ${fmt(hi)}`;
+  return chartSvg("gauge", w, r + (col.showMinMax ? 12 * col.size : 0), label, body);
+}
+
 // src/html/cells.ts
 var cellValue = (row, key) => row[key];
 var blankOr = (v) => isBlank(v) ? "" : escapeHtml(v);
@@ -219,9 +659,14 @@ function checkHeight(h, kind) {
 function teamIdsOf(spec, rows) {
   const out = /* @__PURE__ */ new Map();
   for (const c of spec.columns) {
-    if (c.kind !== "logo" && c.kind !== "wordmark" && c.kind !== "mergeStackTeamColor" && c.kind !== "teamColorBar" && c.kind !== "teamColorBg")
+    checkRefs(c);
+    checkChart(c);
+    const optIn = "team" in c && c.kind !== "mergeStackTeamColor" && c.team !== void 0;
+    if (!optIn && c.kind !== "logo" && c.kind !== "wordmark" && c.kind !== "mergeStackTeamColor" && c.kind !== "teamColorBar" && c.kind !== "teamColorBg")
       continue;
-    const from = c.kind === "mergeStackTeamColor" ? c.team : c.key;
+    if (c.league === void 0)
+      throw new TableSpecError(`column "${c.key}" names a team column, so it needs a league`);
+    const from = "team" in c && c.team !== void 0 ? c.team : c.key;
     const values = rows.map((r) => {
       const v = cellValue(r, from);
       return isBlank(v) ? null : String(v).trim();
@@ -244,6 +689,339 @@ var pillLabel = (col, v) => formatValue(
   col.suffix
 );
 var isNa = (col, v) => isBlank(v) || col.naStrings.some((n) => col.ignoreCase ? n.toLowerCase() === String(v).toLowerCase() : n === String(v));
+var fmtNum = (n, f) => `${f?.prefix ?? ""}${formatValue(n * (f?.scale ?? 1), f?.digits, f?.type ?? "number", f?.suffix ?? "")}`;
+var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
+function withAlpha(color, opacity, field) {
+  if (!(opacity >= 0 && opacity <= 1))
+    throw new TableSpecError(`${field} must be between 0 and 1, got ${opacity}`);
+  if (opacity === 1) return cssValue(color, field);
+  const a = Math.round(opacity * 255).toString(16).padStart(2, "0");
+  return `${hex6(color, { dropAlpha: true })}${a}`;
+}
+var STATS = /* @__PURE__ */ new WeakMap();
+function statsOf(ctx, key) {
+  let byKey = STATS.get(ctx.domainRows);
+  if (!byKey) {
+    byKey = /* @__PURE__ */ new Map();
+    STATS.set(ctx.domainRows, byKey);
+  }
+  const hit = byKey.get(key);
+  if (hit) return hit;
+  const nums = ctx.domainRows.map((r) => toNumber(cellValue(r, key)));
+  const present2 = nums.filter((n) => n !== null);
+  const fin = present2.filter(Number.isFinite);
+  const st = {
+    nums,
+    min: present2.length ? Math.min(...present2) : Number.NaN,
+    max: present2.length ? Math.max(...present2) : Number.NaN,
+    maxAbs: present2.length ? Math.max(...present2.map(Math.abs)) : Number.NaN,
+    finite: fin.length ? [Math.min(...fin), Math.max(...fin), Math.max(...fin.map(Math.abs))] : [Number.NaN, Number.NaN, Number.NaN],
+    index: new Map(ctx.domainRows.map((r, j) => [r, j])),
+    tiles: /* @__PURE__ */ new Map()
+  };
+  byKey.set(key, st);
+  return st;
+}
+function tileOf(ctx, key, row, i, n) {
+  const st = statsOf(ctx, key);
+  const j = ctx.domainRows === ctx.rows ? i : st.index.get(row);
+  if (j === void 0) return ntile([...st.nums, toNumber(cellValue(row, key))], n).at(-1) ?? null;
+  let t = st.tiles.get(n);
+  if (!t) {
+    t = ntile(st.nums, n);
+    st.tiles.set(n, t);
+  }
+  return t[j] ?? null;
+}
+function sizeOf(v, st, minValue, maxValue) {
+  const top = maxValue ?? st.maxAbs;
+  const r = minValue === void 0 ? Math.abs(v) / top : (Math.abs(v) - minValue) / (top - minValue);
+  return Number.isFinite(r) ? clamp01(r) : 0;
+}
+var normalized = (v, lo, hi) => hi === lo ? 1 : clamp01((v - lo) / (hi - lo));
+function dataColor(v) {
+  if (isBlank(v)) return void 0;
+  const s = String(v).trim();
+  const named = namedColor(s);
+  if (named !== void 0) return named;
+  try {
+    hex6(s, { dropAlpha: true });
+    return s;
+  } catch {
+    return void 0;
+  }
+}
+function refColor(col, row, i, ctx) {
+  if (col.colorRef !== void 0) {
+    const c = dataColor(cellValue(row, col.colorRef));
+    if (c !== void 0) return c;
+  }
+  if (col.team === void 0 || col.league === void 0) return void 0;
+  const id = ctx.teamIds.get(col.key)?.[i];
+  return id === void 0 ? void 0 : teamColorsSync(col.league, id, { which: col.which ?? "primary", idSystem: "team_id" });
+}
+function checkRefs(c) {
+  if (!("mark" in c) || c.mark === void 0) return;
+  if ((c.mark === "logo" || c.mark === "wordmark") && (c.team === void 0 || c.league === void 0))
+    throw new TableSpecError(
+      `column "${c.key}": mark "${c.mark}" reads the team column, so set team and league`
+    );
+  if (c.mark === "headshot" && (c.markKey === void 0 || c.league === void 0))
+    throw new TableSpecError(
+      `column "${c.key}": mark "headshot" reads an ESPN athlete id, so set markKey and league`
+    );
+}
+function markOf(col, row, i, ctx) {
+  if (col.mark === void 0 || col.league === void 0) return "";
+  const h = checkHeight(col.markHeight ?? 20, `${col.kind} mark`);
+  if (col.mark === "headshot") {
+    const raw = col.markKey === void 0 ? null : cellValue(row, col.markKey);
+    if (isBlank(raw)) return "";
+    const url2 = headshotUrl(String(raw).trim(), col.league, { idSystem: "espn" });
+    return url2 ? markImg(url2, String(raw).trim(), h) : "";
+  }
+  const id = ctx.teamIds.get(col.key)?.[i];
+  if (id === void 0) return "";
+  const url = logoUrlSync(id, col.league, {
+    ...col.season !== void 0 ? { season: col.season } : {},
+    markType: col.mark,
+    idSystem: "team_id"
+  });
+  return url ? markImg(url, teamNameSync(col.league, id) ?? id, h, id) : "";
+}
+function dataBar(col, row, i, ctx) {
+  const raw = cellValue(row, col.key);
+  const v = toNumber(raw);
+  if (v === null) return blankOr(raw);
+  if (col.fill.length === 0) throw new TableSpecError("dataBar fill needs at least one colour");
+  if (col.gradient && col.fill.length < 2)
+    throw new TableSpecError("dataBar gradient needs at least two colours in fill");
+  const st = statsOf(ctx, col.key);
+  const pos = col.textPosition;
+  const h = col.barHeight !== void 0 ? checkPx(col.barHeight, "dataBar barHeight") : pos === "above" ? 5 : 18;
+  const radius = col.roundEdges ? h / 2 : 0;
+  const posNeg = col.posNeg ?? st.min < 0;
+  const ref = refColor(col, row, i, ctx);
+  const fill = ref ?? (posNeg && col.fill.length === 2 ? col.fill[v < 0 ? 0 : 1] : col.fill.length === 1 ? col.fill[0] : ramp(
+    col.fill.map((c) => hex6(c)),
+    [0, 1],
+    col.bias
+  )(normalized(v, st.min, st.max)));
+  const gradient = col.gradient ? `linear-gradient(to right, ${col.fill.join(", ")})` : void 0;
+  const inside = pos === "inside-end" || pos === "inside-base" || pos === "center";
+  const inkOn = col.gradient ? col.fill.at(v < 0 ? 0 : -1) : fill;
+  const ink = pos === "none" ? "transparent" : col.textColor ?? (inside ? onColor(solid(inkOn)) : void 0);
+  const label = escapeHtml(fmtNum(v, col.numberFormat));
+  const m = markOf(col, row, i, ctx);
+  const mark = m ? `<span style="display:inline-flex;margin:0 4px">${m}</span>` : "";
+  const right = col.align === "right";
+  const width = Number((sizeOf(v, st, col.minValue, col.maxValue) * 100).toFixed(4));
+  const bar = (dir2, text, gap) => `<div style="${styleAttr({
+    display: "flex",
+    "align-items": "center",
+    "flex-direction": dir2,
+    "justify-content": pos === "center" ? "center" : pos === "inside-base" ? "flex-start" : "flex-end",
+    background: gradient ? void 0 : fill,
+    "background-image": gradient,
+    "border-radius": `${radius}px`,
+    color: text ? ink : void 0,
+    width: `${width}%`,
+    height: `${h}px`,
+    "white-space": "nowrap",
+    [dir2 === "row" ? "margin-right" : "margin-left"]: gap ? "6px" : void 0
+  })}">${text ? `<span>${label}</span>` : ""}</div>`;
+  const textSpan = `<span${ink ? ` style="color:${escapeAttr(cssValue(ink, "dataBar textColor"))}"` : ""}>${label}</span>`;
+  const group = (dir2) => inside || pos === "none" ? `<div style="display:flex;align-items:center;flex-direction:${dir2};width:100%">${bar(dir2, true, false)}${mark}</div>` : `<div style="display:flex;align-items:center;flex-direction:${dir2};width:100%">${bar(dir2, false, true)}${mark}${textSpan}</div>`;
+  if (posNeg) {
+    const half = (side) => `<div style="flex:1 1 0;display:flex;align-items:center${side === "neg" ? ";justify-content:flex-end" : ""}">${v < 0 === (side === "neg") ? group(side === "neg" ? "row-reverse" : "row") : ""}</div>`;
+    return `<div class="sdvt-databar" style="display:flex;align-items:stretch;min-height:${h}px">${half("neg")}<div style="width:1px;background:#666666"></div>${half("pos")}</div>`;
+  }
+  const dir = right ? "row-reverse" : "row";
+  const track = (inner, gap = false) => `<div style="${styleAttr({ "flex-grow": 1, "border-radius": `${radius}px`, background: col.background, [right ? "margin-right" : "margin-left"]: gap ? "6px" : void 0 })}">${inner}</div>`;
+  if (pos === "above")
+    return `<div class="sdvt-databar"><div style="text-align:${right ? "right" : "left"}${ink ? `;color:${escapeAttr(cssValue(ink, "dataBar textColor"))}` : ""}">${label}</div>${track(`<div style="display:flex;align-items:center;flex-direction:${dir}">${bar(dir, false, false)}${mark}</div>`)}</div>`;
+  if (pos === "outside-base") {
+    const chars = Math.max(
+      1,
+      ...st.nums.filter((n) => n !== null).map((n) => fmtNum(n, col.numberFormat).length)
+    );
+    return `<div class="sdvt-databar" style="display:flex;align-items:center;flex-direction:${dir}"><span style="${styleAttr({ "min-width": `${chars}ch`, "text-align": right ? "left" : "right", "font-variant-numeric": "tabular-nums", color: ink })}">${label}</span>${track(`<div style="display:flex;align-items:center;flex-direction:${dir}">${bar(dir, false, false)}${mark}</div>`, true)}</div>`;
+  }
+  return `<div class="sdvt-databar" style="display:flex">${track(group(dir))}</div>`;
+}
+function iconSet(col, row, i, ctx) {
+  const raw = cellValue(row, col.key);
+  const v = toNumber(raw);
+  if (v === null) return blankOr(raw);
+  const named = col.iconRef === void 0 ? void 0 : cellValue(row, col.iconRef);
+  const icon = !isBlank(named) && ICON_NAMES.includes(String(named).trim()) ? String(named).trim() : col.icons[(tileOf(ctx, col.key, row, i, col.icons.length) ?? 1) - 1];
+  const color = (col.iconColorRef === void 0 ? void 0 : dataColor(cellValue(row, col.iconColorRef))) ?? col.colors[(tileOf(ctx, col.key, row, i, col.colors.length) ?? 1) - 1];
+  const svg = iconSvg(
+    icon,
+    withAlpha(color, col.opacity, "iconSet colors"),
+    checkPx(col.iconSize, "iconSet iconSize")
+  );
+  const label = escapeHtml(fmtNum(v, col.numberFormat));
+  switch (col.iconPosition) {
+    case "left":
+      return `<span style="display:inline-block;margin-right:8px">${svg}</span>${label}`;
+    case "above":
+      return `<div>${svg}</div><div>${label}</div>`;
+    case "below":
+      return `<div>${label}</div><div>${svg}</div>`;
+    case "over":
+      return `${svg}<span style="font-size:0;color:transparent">${label}</span>`;
+    default:
+      return `${label}<span style="display:inline-block;margin-left:8px">${svg}</span>`;
+  }
+}
+function iconAssign(col, row, i, ctx) {
+  const raw = cellValue(row, col.key);
+  const v = toNumber(raw);
+  if (v === null) return blankOr(raw);
+  const size = checkPx(col.iconSize, "iconAssign iconSize");
+  const on = withAlpha(col.fill, col.fillOpacity, "iconAssign fill");
+  const off = withAlpha(col.empty, col.emptyOpacity, "iconAssign empty");
+  const half = (x) => Math.floor(x + 0.5);
+  let steps;
+  let filled;
+  let title;
+  if (col.buckets !== void 0) {
+    const b = tileOf(ctx, col.key, row, i, col.buckets) ?? 0;
+    steps = Array.from({ length: col.buckets }, (_, k) => k + 1);
+    filled = (s) => s <= half(b);
+    title = `${b} out of ${col.buckets}`;
+  } else {
+    if (!(col.seqBy > 0)) throw new TableSpecError(`iconAssign seqBy must be positive, got ${col.seqBy}`);
+    const top = half(statsOf(ctx, col.key).max);
+    const n = half(v);
+    steps = [];
+    if (top === 0) steps.push(0);
+    else for (let s = 1; s <= top; s += col.seqBy) steps.push(s);
+    if (steps.length > 1e3)
+      throw new TableSpecError(`iconAssign would draw ${steps.length} icons per cell; set buckets or seqBy`);
+    filled = top === 0 ? (s) => s < n : (s) => s <= n;
+    title = `${naturalDigits(v)} out of ${top}`;
+  }
+  const icons = steps.map((s) => iconSvg(col.icon, filled(s) ? on : off, size)).join("");
+  const box = `<span title="${escapeAttr(title)}" aria-label="${escapeAttr(title)}" role="img">${icons}</span>`;
+  const label = escapeHtml(fmtNum(v, col.numberFormat));
+  switch (col.showValues) {
+    case "right":
+      return `${box}<span style="margin-left:6px">${label}</span>`;
+    case "left":
+      return `<span style="margin-right:6px">${label}</span>${box}`;
+    case "above":
+      return `<div>${label}</div><div>${box}</div>`;
+    case "below":
+      return `<div>${box}</div><div>${label}</div>`;
+    default:
+      return box;
+  }
+}
+function mergeStack(col, row, i, ctx) {
+  const main = `font-size:${checkPx(col.size, "mergeStack size")}px;${styleAttr({ color: col.color, "font-weight": col.weight, "font-style": col.style })}`;
+  const sub = `font-size:${checkPx(col.stackSize, "mergeStack stackSize")}px;${styleAttr({ color: col.stackColor, "font-weight": col.stackWeight, "font-style": col.stackStyle })}`;
+  const gap = checkPx(col.spacing, "mergeStack spacing") + 3;
+  const a = blankOr(cellValue(row, col.key));
+  const b = blankOr(cellValue(row, col.stack));
+  const body = col.position === "below" ? `<div><div style="${main};margin-bottom:${gap}px">${a}</div><div style="${sub}">${b}</div></div>` : col.position === "above" ? `<div><div style="${sub};margin-bottom:${gap}px">${b}</div><div style="${main}">${a}</div></div>` : col.position === "left" ? `<span style="${sub};margin-right:${gap}px">${b}</span><span style="${main}">${a}</span>` : `<span style="${main};margin-right:${gap}px">${a}</span><span style="${sub}">${b}</span>`;
+  const m = markOf(col, row, i, ctx);
+  const stacked = col.position === "below" || col.position === "above";
+  return m ? `<div style="display:flex;align-items:center;gap:6px">${m}${stacked ? body : `<div>${body}</div>`}</div>` : body;
+}
+function bubble(col, row, i, ctx) {
+  const raw = cellValue(row, col.key);
+  const v = toNumber(raw);
+  if (v === null) return blankOr(raw);
+  if (col.colors.length === 0) throw new TableSpecError("bubble colors needs at least one colour");
+  const st = statsOf(ctx, col.key);
+  const px = Number(
+    (sizeOf(v, st, col.minValue, col.maxValue) * checkPx(col.maxSize, "bubble maxSize")).toFixed(2)
+  );
+  const base = refColor(col, row, i, ctx) ?? ramp(
+    col.colors.map((c) => hex6(c)),
+    [0, 1],
+    col.bias
+  )(normalized(v, col.minValue ?? st.min, col.maxValue ?? st.max));
+  const fill = withAlpha(base, col.opacity, "bubble opacity");
+  const ink = col.showText ? col.textColor ?? onColor(solid(fill, tableBg(ctx))) : "transparent";
+  return `<div style="${styleAttr({
+    background: fill,
+    color: ink,
+    display: "inline-flex",
+    "justify-content": "center",
+    "align-items": "center",
+    "text-align": "center",
+    height: `${px}px`,
+    width: `${px}px`,
+    "border-radius": col.shape === "circles" ? "50%" : void 0
+  })}">${escapeHtml(fmtNum(v, col.numberFormat))}</div>`;
+}
+function chartColor(col, row, i, ctx) {
+  if (col.colorRef !== void 0) {
+    const c = dataColor(cellValue(row, col.colorRef));
+    if (c !== void 0) return c;
+  }
+  const id = col.team === void 0 ? void 0 : ctx.teamIds.get(col.key)?.[i];
+  if (id === void 0 || col.league === void 0) return void 0;
+  const which = col.which ?? "primary";
+  const own = teamColorsSync(col.league, id, { which, idSystem: "team_id" });
+  const other = teamColorsSync(col.league, id, {
+    which: which === "primary" ? "secondary" : "primary",
+    idSystem: "team_id"
+  });
+  const first = own ?? other;
+  return first === void 0 ? void 0 : readableInk(first, own === void 0 ? void 0 : other, tableBg(ctx), 3);
+}
+function seriesOf(v) {
+  if (!Array.isArray(v)) return null;
+  return v.map((x) => {
+    const n = typeof x === "number" || typeof x === "string" ? toNumber(x) : null;
+    return n !== null && Number.isFinite(n) ? n : null;
+  });
+}
+function seriesCell(col, row, i, ctx) {
+  const values = seriesOf(cellValue(row, col.key));
+  if (values === null || values.every((v) => v === null)) return "";
+  const color = chartColor(col, row, i, ctx);
+  return col.kind === "sparkline" ? sparklineSvg(col, values, color ?? col.lineColor, i) : sparkbarSvg(col, values, color ?? col.fillColor, i);
+}
+function gauge(col, row, i, ctx) {
+  const raw = cellValue(row, col.key);
+  const v = toNumber(raw);
+  if (v === null) return blankOr(raw);
+  if (!Number.isFinite(v)) return "";
+  const [cmin, cmax, cabs] = statsOf(ctx, col.key).finite;
+  const lo = col.minValue ?? 0;
+  const hi = col.maxValue ?? (Number.isFinite(cabs) ? cabs : Math.abs(v));
+  if (lo > hi)
+    throw new TableSpecError(
+      `column "${col.key}" row ${i}: gauge minValue ${naturalDigits(lo)} is above the column's largest absolute value ${naturalDigits(hi)}; give maxValue too`
+    );
+  const color = chartColor(col, row, i, ctx) ?? (col.fill.length === 1 ? col.fill[0] : ramp(
+    col.fill.map((c) => hex6(c)),
+    [0, 1],
+    col.bias
+  )(normalized(v, Number.isFinite(cmin) ? cmin : v, Number.isFinite(cmax) ? cmax : v)));
+  return gaugeSvg(
+    col,
+    v,
+    lo,
+    hi,
+    escapeAttr(cssValue(color, "gauge fill")),
+    (n) => fmtNum(n, col.numberFormat)
+  );
+}
+function extremeOf(col, row, ctx) {
+  if (col.extreme === void 0) return col.when !== void 0 && matches(col.when, row) ? "max" : null;
+  const v = toNumber(cellValue(row, col.key));
+  if (v === null) return null;
+  const st = statsOf(ctx, col.key);
+  if (col.extreme !== "max" && v === st.min) return "min";
+  if (col.extreme !== "min" && v === st.max) return "max";
+  return null;
+}
 var isScaled = (col) => col.kind === "colorPills" || col.kind === "colorRanks" || col.kind === "percentileBar";
 function columnScales(spec, rows, warnFn, domainRows = rows) {
   const at = domainRows === rows ? null : new Map(domainRows.map((r, j) => [r, j]));
@@ -260,19 +1038,31 @@ function columnScales(spec, rows, warnFn, domainRows = rows) {
     const nums = domainRows.map((r) => toNumber(cellValue(r, col.key)));
     let values = nums;
     let own = (n) => n;
+    let spanned;
+    let buckets;
     if (col.kind === "colorPills" && col.fillType === "rank") {
       values = averageRanks(nums, col.rankOrder === "desc");
       own = () => null;
     }
+    if (col.kind === "colorRanks" && col.evenBreaks) {
+      buckets = col.palette.map((c) => hex6(c));
+      values = ntile(nums, buckets.length);
+      own = () => null;
+    } else if (col.kind === "colorRanks" && col.span && col.domain === void 0) {
+      const keys = col.span === true ? [...new Set(domainRows.flatMap((r) => Object.keys(r)))].filter(
+        (k) => domainRows.some((r) => typeof cellValue(r, k) === "number")
+      ) : col.span;
+      spanned = domainOf(keys.map((k) => domainRows.map((r) => toNumber(cellValue(r, k)))));
+    }
     if (col.kind === "percentileBar") {
-      const present = nums.filter((n) => n !== null);
+      const present2 = nums.filter((n) => n !== null);
       const [lo, hi] = col.domain;
       const scale = col.scale;
-      const proportion = scale === "auto" && present.length > 0 && present.every((n) => n >= 0 && n <= 1) && hi > 1;
+      const proportion = scale === "auto" && present2.length > 0 && present2.every((n) => n >= 0 && n <= 1) && hi > 1;
       own = (n) => n === null ? null : typeof scale === "number" ? n * scale : proportion ? lo + n * (hi - lo) : n;
       values = nums.map(own);
     }
-    const domain = col.domain ?? domainOf([values]);
+    const domain = buckets ? [1, buckets.length] : col.domain ?? spanned ?? domainOf([values]);
     const fmt = () => `(${naturalDigits(domain[0])} to ${naturalDigits(domain[1])})`;
     if (col.kind === "colorPills" && col.domain === void 0)
       warnFn(
@@ -280,7 +1070,8 @@ function columnScales(spec, rows, warnFn, domainRows = rows) {
         `no domain given, so the colors span the observed range ${fmt()}; set domain to compare colors across tables or columns`
       );
     const palette = col.palette.map((c) => hex6(c));
-    const color = ramp(col.reverse ? [...palette].reverse() : palette, domain);
+    const ordered = col.reverse ? [...palette].reverse() : palette;
+    const color = buckets ? (b) => ordered[b - 1] ?? null : ramp(ordered, domain, col.kind === "colorRanks" ? col.bias ?? 1 : 1);
     const outside = values.filter((v) => v !== null && color(v) === null).length;
     if (col.kind === "colorPills" && outside > 0)
       warnFn(
@@ -308,7 +1099,7 @@ function renderCell(col, row, i, ctx) {
       const n = toNumber(cellValue(row, col.key));
       if (n === null) return "";
       const sc = ctx.scaled.get(col.key);
-      if (sc) return escapeHtml(formatNumber(n / sc.divisor, { digits: sc.decimals, big: true }));
+      if (sc) return escapeHtml(scaledNumber(n, sc));
       return escapeHtml(
         col.kind === "int" ? formatNumber(n, { digits: 0, big: true }) : formatNumber(n, {
           ...col.digits !== void 0 ? { digits: col.digits } : {},
@@ -407,7 +1198,7 @@ function renderCell(col, row, i, ctx) {
         fill = col.naColor;
         text = "";
       } else {
-        fill = sc.color(s) ?? "#808080";
+        fill = refColor(col, row, i, ctx) ?? sc.color(s) ?? "#808080";
         text = pillLabel(col, toNumber(cellValue(row, col.key)));
       }
       const ink = col.textColor ?? onColor(solid(fill, tableBg(ctx)));
@@ -458,6 +1249,22 @@ function renderCell(col, row, i, ctx) {
         checkHeight(Number.parseFloat(col.height), "image")
       );
     }
+    // ---- reactablefmtr-style kinds
+    case "dataBar":
+      return dataBar(col, row, i, ctx);
+    case "iconSet":
+      return iconSet(col, row, i, ctx);
+    case "iconAssign":
+      return iconAssign(col, row, i, ctx);
+    case "mergeStack":
+      return mergeStack(col, row, i, ctx);
+    case "bubble":
+      return bubble(col, row, i, ctx);
+    case "sparkline":
+    case "sparkbar":
+      return seriesCell(col, row, i, ctx);
+    case "gauge":
+      return gauge(col, row, i, ctx);
     default: {
       const bad = col;
       throw new TableSpecError(`unknown column kind ${String(bad.kind)}`);
@@ -478,15 +1285,21 @@ function kindCellStyle(col, row, i, ctx) {
     case "colorRanks": {
       const sc = ctx.scales.get(col.key);
       const s = sc?.values[i] ?? null;
-      const fill = (s === null ? null : sc?.color(s)) ?? "#ffffff";
-      return styleAttr({ "background-color": fill, color: onColor(solid(fill, tableBg(ctx))) });
+      const ref = s === null ? void 0 : refColor(col, row, i, ctx);
+      const fill = ref ?? (s === null ? null : sc?.color(s)) ?? "#ffffff";
+      return styleAttr({
+        "background-color": fill,
+        color: col.showText === false ? "transparent" : onColor(solid(fill, tableBg(ctx)))
+      });
     }
-    case "highlight":
-      return matches(col.when, row) ? styleAttr({
+    case "highlight": {
+      const hit = extremeOf(col, row, ctx);
+      return hit ? styleAttr({
         "background-color": col.fill,
-        color: col.textColor,
+        color: col.textColor ?? (col.extreme === void 0 ? void 0 : hit === "min" ? "red" : "green"),
         "font-weight": col.bold ? "bold" : void 0
       }) : "";
+    }
     case "highlightNa":
       return isNa(col, cellValue(row, col.key)) ? styleAttr({
         "background-color": col.fill,
@@ -499,6 +1312,99 @@ function kindCellStyle(col, row, i, ctx) {
   }
 }
 
+// src/html/legend-icon.ts
+var LEGEND_ICON_SETS = {
+  "ski rating": [
+    ["circle", "#39b54a", "Easy"],
+    ["square", "#0f75bc", "Moderate"],
+    ["diamond", "#000000", "Difficult"],
+    // Font Awesome "square" turned 45 degrees
+    ["double-diamond", "#000000", "Most Difficult"]
+  ],
+  medals: [
+    ["medal", "#A77044", "Bronze"],
+    ["medal", "#D7D7D7", "Silver"],
+    ["medal", "#D6AF36", "Gold"]
+  ],
+  batteries: [
+    ["battery-quarter", "#d7191c", "0-25%"],
+    ["battery-half", "#fdae61", "25-50%"],
+    ["battery-three-quarters", "#a6d96a", "50-75%"],
+    ["battery-full", "#1a9641", "75-100%"]
+  ]
+};
+var battery = (level) => `<rect x="0.75" y="4.25" width="12.5" height="7.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="13.75" y="6.5" width="1.75" height="3" fill="currentColor"/><rect x="2.5" y="6" width="${9 * level}" height="4" fill="currentColor"/>`;
+var SHAPES = {
+  circle: [16, `<circle cx="8" cy="8" r="7" fill="currentColor"/>`],
+  square: [16, `<rect x="1" y="1" width="14" height="14" fill="currentColor"/>`],
+  diamond: [16, `<path d="M8 .5 15.5 8 8 15.5 .5 8Z" fill="currentColor"/>`],
+  "double-diamond": [
+    30,
+    `<path d="M8 .5 15.5 8 8 15.5 .5 8ZM22 .5 29.5 8 22 15.5 14.5 8Z" fill="currentColor"/>`
+  ],
+  "triangle-up": [16, `<path d="M8 1.5 15 14.5H1Z" fill="currentColor"/>`],
+  "triangle-down": [16, `<path d="M1 1.5H15L8 14.5Z" fill="currentColor"/>`],
+  medal: [
+    16,
+    `<path d="M3 0h3.5l2 5.5H5ZM13 0H9.5l-2 5.5H11Z" fill="currentColor"/><circle cx="8" cy="10.5" r="5" fill="currentColor"/>`
+  ],
+  "battery-quarter": [16, battery(0.25)],
+  "battery-half": [16, battery(0.5)],
+  "battery-three-quarters": [16, battery(0.75)],
+  "battery-full": [16, battery(1)]
+};
+function legendIconSvg(shape, color, size) {
+  const s = Object.hasOwn(SHAPES, shape) ? SHAPES[shape] : void 0;
+  if (!s)
+    throw new TableSpecError(
+      `legendIcon icon must be one of ${Object.keys(SHAPES).join(", ")}, not "${shape}"`
+    );
+  const [w, body] = s;
+  return `<svg class="sdvt-legend-icon" viewBox="0 0 ${w} 16" width="${size * w / 16}" height="${size}" aria-hidden="true" focusable="false" style="color:${escapeAttr(cssValue(color, "legendIcon colors"))};vertical-align:middle">${body}</svg>`;
+}
+function legendIconBlock(d) {
+  if (d.align !== "left" && d.align !== "right")
+    throw new TableSpecError(`legendIcon align must be left or right, not "${String(d.align)}"`);
+  if (d.location !== "top" && d.location !== "bottom")
+    throw new TableSpecError(`legendIcon location must be top or bottom, not "${String(d.location)}"`);
+  const size = checkPx(d.iconSize, "legendIcon iconSize");
+  if (size <= 0) throw new TableSpecError(`legendIcon iconSize must be positive, got ${size}`);
+  let items;
+  if (d.iconSet !== void 0 && d.icons !== void 0)
+    throw new TableSpecError("legendIcon takes an iconSet or icons, not both");
+  if (d.iconSet !== void 0) {
+    const set = Object.hasOwn(LEGEND_ICON_SETS, d.iconSet) ? LEGEND_ICON_SETS[d.iconSet] : void 0;
+    if (!set)
+      throw new TableSpecError(
+        `legendIcon iconSet must be "ski rating", "medals" or "batteries", not "${d.iconSet}"`
+      );
+    if (d.labels && d.labels.length !== set.length)
+      throw new TableSpecError(
+        `legendIcon iconSet "${d.iconSet}" needs ${set.length} labels, got ${d.labels.length}`
+      );
+    items = set.map(([shape, color, label], i) => [shape, color, d.labels?.[i] ?? label]);
+  } else {
+    if (!d.icons || d.icons.length === 0) throw new TableSpecError("legendIcon needs an iconSet or icons");
+    const colors = d.colors && d.colors.length > 0 ? d.colors : ["currentColor"];
+    if (d.labels && d.labels.length !== d.icons.length)
+      throw new TableSpecError(
+        `legendIcon needs one label per icon: ${d.icons.length} icons, ${d.labels.length} labels`
+      );
+    if (!d.labels && d.showLabels)
+      throw new TableSpecError("legendIcon icons need labels when showLabels is true");
+    items = d.icons.map((shape, i) => [
+      shape,
+      colors[i % colors.length],
+      d.labels?.[i] ?? shape.replace(/-/g, " ")
+    ]);
+  }
+  const icons = items.map(
+    ([shape, color, label]) => d.showLabels ? `<span class="sdvt-legend-item" style="display:inline-flex;align-items:center;gap:4px">${legendIconSvg(shape, color, size)}${escapeHtml(label)}</span>` : `<span class="sdvt-legend-item" role="img" aria-label="${escapeAttr(label)}">${legendIconSvg(shape, color, size)}</span>`
+  ).join("");
+  const justify = d.align === "left" ? "flex-start" : "flex-end";
+  return `<div class="sdvt-legend sdvt-legend-icon sdvt-legend-${d.location}" style="text-align:${d.align}">${d.title ? `<div class="sdvt-legend-title" style="margin-bottom:8px;font-weight:bold;font-size:90%">${escapeHtml(d.title)}</div>` : ""}<div style="display:flex;flex-wrap:wrap;justify-content:${justify};align-items:center;gap:4px 10px;font-size:13px;word-spacing:1px">${icons}</div>${d.footer ? `<div class="sdvt-legend-sub" style="font-size:70%;color:var(--sdvt-muted)">${escapeHtml(d.footer)}</div>` : ""}</div>`;
+}
+
 // src/html/social-icons.ts
 var X = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>';
 var IG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>';
@@ -523,34 +1429,6 @@ var SOCIAL_ICONS = {
   mail: EMAIL
 };
 
-// src/html/svg.ts
-var halfEven = (x) => {
-  const r = Math.round(x);
-  return String(Math.abs(x % 1) === 0.5 && r % 2 !== 0 ? r - 1 : r);
-};
-function cutlineSvg(text, color, size) {
-  const t = text.toUpperCase();
-  const tracking = 1.1;
-  const esc = t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${halfEven(t.length * (size * 0.8 + tracking) + 4)}" height="${halfEven(size + 4)}"><text x="0" y="${(size + 0.5).toFixed(1)}" font-family="Helvetica,Arial,sans-serif" font-size="${size}" font-weight="700" letter-spacing="${tracking}" fill="${color}">${esc}</text></svg>`;
-  return `data:image/svg+xml;charset=utf-8,${pyQuote(svg)}`;
-}
-var pyQuote = (x) => encodeURIComponent(x).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
-function watermarkSvg(text, color, opacity, angle, font) {
-  const label = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  const size = 100;
-  const textW = Math.max(label.length * size * 0.62, size);
-  const textH = size * 1.3;
-  const rad = Math.abs(angle) * Math.PI / 180;
-  const w = Math.ceil(textW * Math.cos(rad) + textH * Math.sin(rad)) + 4;
-  const h = Math.ceil(textW * Math.sin(rad) + textH * Math.cos(rad)) + 4;
-  const rot = angle !== 0 ? ` transform="rotate(${angle} ${w / 2} ${h / 2})"` : "";
-  const attr = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}"><text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="${attr(font)}" font-size="${size}" font-weight="700" fill="${attr(color)}" fill-opacity="${opacity}"${rot}>${label}</text></svg>`;
-  return [`data:image/svg+xml,${pyQuote(svg)}`, h > w];
-}
-var cssStr = (v) => v.replace(/[\\"\n\r<]/g, (c) => `\\${c.charCodeAt(0).toString(16)} `);
-
 // src/html/decorations.ts
 function strwrap(words, width) {
   const w = Math.max(width - 1, 1);
@@ -624,6 +1502,17 @@ var SCALE_NAMES = {
   1e9: ["billions", "(billions)"],
   1e12: ["trillions", "(trillions)"]
 };
+function scaleNoteOf(d) {
+  if (!(Number.isFinite(d.divisor) && d.divisor !== 0))
+    throw new TableSpecError(`scaleNote divisor must be a single non-zero number, got ${d.divisor}`);
+  if (d.columns.length === 0) throw new TableSpecError("scaleNote columns matched no columns");
+  const named = SCALE_NAMES[d.divisor];
+  const shown = Number.isInteger(d.divisor) ? formatNumber(d.divisor, { digits: 0, big: true }) : naturalDigits(d.divisor, true);
+  return {
+    note: d.note ?? (named ? `Figures in ${named[0]}.` : `Figures divided by ${shown}.`),
+    suffix: d.labelSuffix ?? (named ? named[1] : `(\xF7${shown})`)
+  };
+}
 function applyDecorations(spec, rows, ctx) {
   const none = () => "";
   const out = {
@@ -888,14 +1777,8 @@ function applyDecorations(spec, rows, ctx) {
         break;
       }
       case "scaleNote": {
-        if (!(Number.isFinite(d.divisor) && d.divisor !== 0))
-          throw new TableSpecError(`scaleNote divisor must be a single non-zero number, got ${d.divisor}`);
-        if (d.columns.length === 0) throw new TableSpecError("scaleNote columns matched no columns");
+        const { note, suffix } = scaleNoteOf(d);
         for (const k of d.columns) ctx.scaled.set(k, { divisor: d.divisor, decimals: d.decimals });
-        const named = SCALE_NAMES[d.divisor];
-        const shown = Number.isInteger(d.divisor) ? formatNumber(d.divisor, { digits: 0, big: true }) : naturalDigits(d.divisor, true);
-        const note = d.note ?? (named ? `Figures in ${named[0]}.` : `Figures divided by ${shown}.`);
-        const suffix = d.labelSuffix ?? (named ? named[1] : `(\xF7${shown})`);
         if (d.where !== "label") out.foot.push(escapeHtml(note));
         if (d.where !== "sourceNote") {
           const prev = out.labelSuffix;
@@ -1011,6 +1894,12 @@ function applyDecorations(spec, rows, ctx) {
         else out.after += block;
         break;
       }
+      case "legendIcon": {
+        const block = legendIconBlock(d);
+        if (d.location === "top") out.before += block;
+        else out.after += block;
+        break;
+      }
       case "significance": {
         if (d.levels.length !== d.symbols.length)
           throw new TableSpecError("significance levels and symbols must be the same length");
@@ -1208,7 +2097,10 @@ function checkKeys(spec, rows) {
       col.key,
       ..."to" in col ? [col.to] : [],
       ..."keys" in col ? col.keys : [],
-      ..."stack" in col ? [col.stack, col.team] : []
+      ...["stack", "team", "colorRef", "markKey", "iconRef", "iconColorRef"].flatMap((f) => {
+        const k = col[f];
+        return typeof k === "string" ? [k] : [];
+      })
     ];
     for (const k of need)
       if (!keys.has(k))
@@ -1228,7 +2120,11 @@ function alignOf(col) {
     case "tally":
     case "colorPills":
     case "colorRanks":
+    case "iconSet":
       return "right";
+    case "bubble":
+    case "gauge":
+      return "center";
     case "logo":
     case "wordmark":
     case "headshot":
@@ -1323,8 +2219,16 @@ function renderParts(input, rows, opts = {}) {
     const currentAria = isCurrent ? ' aria-current="true"' : "";
     return `<th scope="col" class="sdvt-label sdvt-${escapeAttr(alignOf(c))}${current}" data-col="${escapeAttr(c.key)}" data-kind="${escapeAttr(c.kind)}"${currentAria}${aria}${styleOf([c.width ? `width:${escapeAttr(cssValue(c.width, `column ${c.key} width`))}` : "", deco.labelStyle(c.key)])}>${inner}</th>`;
   }).join("");
+  const cellOf = (c, row, i) => {
+    const html = renderCell(c, row, i, ctx);
+    if (c.tooltip !== true) return `>${html}`;
+    const text = html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+    const raw = cellValue(row, c.key);
+    const title = text || (raw === null || raw === void 0 ? "" : escapeAttr(raw));
+    return title ? ` title="${title}">${html}` : `>${html}`;
+  };
   const cellsOf = (row, i) => visible.map(
-    (c) => `<td class="sdvt-cell sdvt-kind-${escapeAttr(c.kind)} sdvt-${escapeAttr(alignOf(c))}" data-col="${escapeAttr(c.key)}"${styleOf([kindCellStyle(c, row, i, ctx), deco.cellStyle(i, c.key)])}>${renderCell(c, row, i, ctx)}${deco.cellSuffix(i, c.key)}</td>`
+    (c) => `<td class="sdvt-cell sdvt-kind-${escapeAttr(c.kind)} sdvt-${escapeAttr(alignOf(c))}" data-col="${escapeAttr(c.key)}"${styleOf([kindCellStyle(c, row, i, ctx), deco.cellStyle(i, c.key)])}${cellOf(c, row, i)}${deco.cellSuffix(i, c.key)}</td>`
   ).join("");
   const striped = theme.tokens.stripe !== "transparent";
   let shown = 0;
@@ -1406,223 +2310,6 @@ function renderParts(input, rows, opts = {}) {
 }
 var fontsLinkFor = (spec) => renderParts(spec, []).link;
 
-// src/html/interactive.ts
-function tableRenderOptions(table) {
-  const sel = table.getSelection();
-  return {
-    interactive: true,
-    sort: table.state.sort,
-    hidden: table.state.hidden,
-    selected: new Set(table.rows.flatMap((r, i) => sel.has(table.rowId(r)) ? [i] : [])),
-    // A49: always the full source rows, so colours, legends, outlier limits and row-accent palettes hold still
-    // while the user pages, types, sorts or brushes, and index row selectors mean source rows
-    domainRows: table.allRows,
-    // Task 10 (A48): a selectable grid whose one tab stop is the cursor row
-    grid: table.state.cursor
-  };
-}
-function pagerLabel(table) {
-  return `Page ${table.state.page + 1} of ${table.pageCount}`;
-}
-function filterInputs(table, labels) {
-  return table.columns.flatMap((c) => {
-    const label = labels.get(c.key);
-    const f = table.state.filters[c.key];
-    return c.filterable === true && label !== void 0 ? [{ key: c.key, label, value: typeof f === "string" ? f : "" }] : [];
-  });
-}
-var SR_ONLY = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0";
-var searchInput = (id, label, placeholder, cls, data, value) => `<label for="${escapeAttr(id)}" style="${SR_ONLY}">${label}</label><input type="search" id="${escapeAttr(id)}" class="${cls}" ${data} placeholder="${placeholder}" value="${escapeAttr(value)}"/>`;
-function renderToolbar(table, labels = renderParts(table.spec, table.rows, tableRenderOptions(table)).labels) {
-  const id = tableId(table.spec);
-  const global = searchInput(
-    `${id}-search`,
-    "Search all columns",
-    "Search",
-    "sdvt-global-filter",
-    'data-sdv-global-filter=""',
-    table.state.globalFilter
-  );
-  const perColumn = filterInputs(table, labels).map((f, j) => {
-    const label = `Filter ${escapeHtml(f.label)}`;
-    return searchInput(
-      `${id}-filter-${j}`,
-      label,
-      label,
-      "sdvt-filter",
-      `data-sdv-filter="${escapeAttr(f.key)}"`,
-      f.value
-    );
-  }).join("");
-  return `<div class="sdvt-toolbar">${global}${perColumn}</div>`;
-}
-function renderPager(table) {
-  const prev = table.state.page === 0 ? ' aria-disabled="true"' : "";
-  const next = table.state.page >= table.pageCount - 1 ? ' aria-disabled="true"' : "";
-  return `<nav class="sdvt-pager" data-sdv-pager="" aria-label="Pagination"><button type="button" class="sdvt-page" data-sdv-page="prev" aria-label="Previous page"${prev}>\u2039</button><span class="sdvt-page-label" data-sdv-page-label="" aria-live="polite">${pagerLabel(table)}</span><button type="button" class="sdvt-page" data-sdv-page="next" aria-label="Next page"${next}>\u203A</button></nav>`;
-}
-function renderInteractive(table, opts = {}) {
-  const p = renderParts(table.spec, table.rows, { ...opts, ...tableRenderOptions(table) });
-  const pager = table.state.pageSize === Number.POSITIVE_INFINITY ? "" : renderPager(table);
-  return assemble(
-    p,
-    `${renderToolbar(table, p.labels)}<div class="sdvt-body" data-sdv-body="">${tableHTML(p)}</div>${pager}`
-  );
-}
-
-// src/html/controls.ts
-var BODY_ROW = "[data-sdv-body] tr.sdvt-row[data-row]";
-function rowIdAt(table, target) {
-  const tr = target instanceof Element ? target.closest(BODY_ROW) : null;
-  const row = tr === null ? void 0 : table.rows[Number(tr.getAttribute("data-row"))];
-  const id = row === void 0 ? "" : table.rowId(row);
-  return id === "" ? null : id;
-}
-function applyHover(root, table, id) {
-  for (const tr of Array.from(root.querySelectorAll(BODY_ROW))) {
-    const row = id === null ? void 0 : table.rows[Number(tr.getAttribute("data-row"))];
-    tr.classList.toggle("sdvt-hover", row !== void 0 && table.rowId(row) === id);
-  }
-}
-function handleClick(table, target) {
-  const el = target instanceof Element ? target.closest("[data-sdv-sort],[data-sdv-page]") : null;
-  if (!el) {
-    const id = rowIdAt(table, target);
-    if (id === null) return;
-    const next = new Set(table.getSelection());
-    if (!next.delete(id)) next.add(id);
-    table.setSelection(next);
-    return;
-  }
-  if (el.getAttribute("aria-disabled") === "true") return;
-  const sortCol = el.getAttribute("data-sdv-sort");
-  const page = el.getAttribute("data-sdv-page");
-  if (sortCol !== null) table.setSort(sortCol, nextSortDir(table.state.sort, sortCol));
-  else if (page === "prev") table.setPage(table.state.page - 1);
-  else if (page === "next") table.setPage(table.state.page + 1);
-}
-function handleInput(table, target) {
-  if (!(target instanceof HTMLInputElement)) return;
-  const col = target.getAttribute("data-sdv-filter");
-  if (col !== null) table.setFilter(col, target.value === "" ? null : target.value);
-  else if (target.hasAttribute("data-sdv-global-filter")) table.setGlobalFilter(target.value);
-}
-function handleHover(table, target) {
-  table.setHover(rowIdAt(table, target));
-}
-var CONTROLS = ["data-sdv-sort", "data-sdv-filter", "data-sdv-global-filter", "data-sdv-page"];
-var FOCUSABLE = "a[href],button,input,select,textarea,[tabindex]";
-function captureFocus(el) {
-  const root = el.getRootNode();
-  const focused = root.activeElement ?? el.ownerDocument.activeElement;
-  if (focused === null || !el.contains(focused)) return () => {
-  };
-  const name = CONTROLS.find((a) => focused.hasAttribute(a));
-  const value = name === void 0 ? null : focused.getAttribute(name);
-  const caret = focused instanceof HTMLInputElement ? { start: focused.selectionStart, end: focused.selectionEnd } : void 0;
-  const td = name === void 0 ? focused.closest("[data-sdv-body] tr[data-row] td[data-col]") : null;
-  const cellAt = td ? {
-    row: td.parentElement?.getAttribute("data-row"),
-    col: td.getAttribute("data-col"),
-    n: Array.from(td.querySelectorAll(FOCUSABLE)).indexOf(focused)
-  } : void 0;
-  const row = name === void 0 && focused.matches(BODY_ROW) ? focused.getAttribute("data-row") : null;
-  return () => {
-    if (el.contains(focused)) return;
-    if (name !== void 0) {
-      const next = Array.from(el.querySelectorAll(`[${name}]`)).find(
-        (n) => n.getAttribute(name) === value
-      );
-      next?.focus();
-      if (next instanceof HTMLInputElement && caret?.start != null && caret.end != null)
-        next.setSelectionRange(caret.start, caret.end);
-    } else if (row !== null) {
-      Array.from(el.querySelectorAll(BODY_ROW)).find((r) => r.getAttribute("data-row") === row)?.focus();
-    } else if (cellAt && cellAt.n >= 0) {
-      const tds = Array.from(el.querySelectorAll("[data-sdv-body] tr[data-row]")).find((r) => r.getAttribute("data-row") === cellAt.row)?.querySelectorAll("td[data-col]");
-      const cell = Array.from(tds ?? []).find((c) => c.getAttribute("data-col") === cellAt.col);
-      cell?.querySelectorAll(FOCUSABLE)[cellAt.n]?.focus();
-    }
-  };
-}
-var KEYS = /* @__PURE__ */ new Map([
-  ["j", "down"],
-  ["k", "up"],
-  ["h", "left"],
-  ["l", "right"],
-  ["s", "sort"],
-  ["/", "search"],
-  ["ArrowDown", "down"],
-  ["ArrowUp", "up"],
-  ["ArrowLeft", "left"],
-  ["ArrowRight", "right"],
-  ["Enter", "toggle"],
-  [" ", "toggle"]
-]);
-var LETTERS = /* @__PURE__ */ new Set(["j", "k", "h", "l", "s", "/"]);
-var clamp = (i, n) => Math.max(0, Math.min(i, n - 1));
-function keyAction(key, k) {
-  const what = KEYS.get(key);
-  if (what === void 0 || !k.hotkeys && LETTERS.has(key)) return null;
-  const shown = (c) => c !== null && k.cols.includes(c);
-  const col = shown(k.cursor.col) ? k.cursor.col : shown(k.sorted) ? k.sorted : k.cols[0] ?? null;
-  const row = k.focused ?? k.cursor.row;
-  switch (what) {
-    case "down":
-    case "up": {
-      const at = k.order.indexOf(row);
-      if (at < 0) return null;
-      const next = k.focused === null ? row : k.order[clamp(at + (what === "down" ? 1 : -1), k.order.length)];
-      return next === void 0 ? null : { type: "cursor", row: next, col: k.cursor.col };
-    }
-    case "left":
-    case "right": {
-      if (k.focused !== null && !k.onRow) return null;
-      const step = what === "right" ? 1 : -1;
-      const next = col === null ? void 0 : k.cols[clamp(k.cols.indexOf(col) + step, k.cols.length)];
-      return next === void 0 ? null : { type: "cursor", row, col: next };
-    }
-    case "sort":
-      return col === null ? null : { type: "sort", col };
-    case "search":
-      return { type: "search" };
-    case "toggle":
-      return k.onRow && k.focused !== null ? { type: "toggle", row: k.focused } : null;
-  }
-}
-var TEXT_FIELD = 'input,textarea,select,[contenteditable]:not([contenteditable="false"])';
-function handleKeydown(table, root, e) {
-  const t = e.target;
-  if (e.defaultPrevented || e.isComposing || e.ctrlKey || e.metaKey || e.altKey) return;
-  if (!(t instanceof Element) || t.closest(TEXT_FIELD) !== null) return;
-  const rows = Array.from(root.querySelectorAll(BODY_ROW));
-  const sorts = Array.from(root.querySelectorAll("[data-sdv-body] [data-sdv-sort]"));
-  const near = t.closest(BODY_ROW);
-  const rowEl = near !== null && root.contains(near) ? near : null;
-  const s = table.state;
-  const action = keyAction(e.key, {
-    focused: rowEl === null ? null : Number(rowEl.getAttribute("data-row")),
-    onRow: rowEl === t,
-    cursor: s.cursor,
-    sorted: s.sort?.col ?? null,
-    cols: sorts.map((b) => b.getAttribute("data-sdv-sort") ?? ""),
-    order: rows.map((r) => Number(r.getAttribute("data-row"))),
-    hotkeys: table.spec.interactive?.hotkeys !== false
-  });
-  const box = action?.type === "search" ? root.querySelector("[data-sdv-global-filter]") : null;
-  if (action === null || action.type === "search" && box === null) return;
-  e.preventDefault();
-  if (action.type === "search") box?.focus();
-  else if (action.type === "sort")
-    handleClick(table, sorts.find((b) => b.getAttribute("data-sdv-sort") === action.col) ?? null);
-  else if (action.type === "toggle") {
-    if (!e.repeat) handleClick(table, rowEl);
-  } else {
-    rows.find((r) => r.getAttribute("data-row") === String(action.row))?.focus();
-    table.setCursor(action.row, action.col);
-  }
-}
-
-export { SR_ONLY, applyHover, assemble, attrsText, captureFocus, escapeAttr, escapeHtml, filterInputs, fontsLink, fontsLinkFor, handleClick, handleHover, handleInput, handleKeydown, keyAction, labelOf, loadTeamNames, pagerLabel, renderInteractive, renderPager, renderParts, renderToolbar, rowIdAt, sortAria, styleSheet, tableHTML, tableRenderOptions, themeKey };
-//# sourceMappingURL=chunk-UCRLJGDL.js.map
-//# sourceMappingURL=chunk-UCRLJGDL.js.map
+export { ICON_NAMES, alignOf, assemble, attrsText, escapeAttr, escapeHtml, fontsLink, fontsLinkFor, labelOf, loadTeamNames, renderParts, scaleNoteOf, sortAria, styleSheet, tableHTML, tableId, teamNameSync, themeKey };
+//# sourceMappingURL=chunk-R375P3MN.js.map
+//# sourceMappingURL=chunk-R375P3MN.js.map