@sportsdataverse/sdvtables 0.0.0-stage → 0.2.0

package/dist/chunk-R375P3MN.js

@@ -0,0 +1,2315 @@
+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();
+async function loadTeamNames(leagues) {
+  await Promise.all(
+    leagues.map(async (l) => {
+      for (const t of (await loadLeague(l)).teams) if (t.name) NAMES.set(`${l}:${t.team_id}`, t.name);
+    })
+  );
+}
+function teamNameSync(league, teamId) {
+  return NAMES.get(`${league}:${teamId}`);
+}
+
+// src/html/escape.ts
+var MAP = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;"
+};
+var escapeHtml = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => MAP[c]);
+var escapeAttr = escapeHtml;
+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 ; { } < > " \\ url( or a line break`
+    );
+  return s;
+}
+function checkPx(v, field) {
+  const n = typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : Number.NaN;
+  if (!Number.isFinite(n))
+    throw new TableSpecError(`${field} must be a finite number, got ${JSON.stringify(v)}`);
+  return n;
+}
+function styleAttr(decl) {
+  return Object.entries(decl).filter(([, v]) => v !== null && v !== void 0 && v !== "").map(([k, v]) => `${k}:${escapeAttr(cssValue(v, `CSS ${k}`))}`).join(";");
+}
+function styleOf(decls) {
+  const s = decls.filter((x) => x !== "").join(";");
+  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();
+  for (const f of fonts) {
+    const set = byFamily.get(f.family) ?? /* @__PURE__ */ new Set();
+    for (const w of f.weights) set.add(w);
+    byFamily.set(f.family, set);
+  }
+  if (byFamily.size === 0) return "";
+  const q = [...byFamily.entries()].sort(([a], [b]) => a.localeCompare(b)).map(
+    ([fam, ws]) => `family=${encodeURIComponent(fam).replace(/%20/g, "+")}:wght@${[...ws].sort((a, b) => a - b).join(";")}`
+  ).join("&amp;");
+  return `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?${q}&amp;display=swap">`;
+}
+
+// src/table-id.ts
+function fnv1a32(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h.toString(16).padStart(8, "0");
+}
+function tableId(spec) {
+  return spec.id ?? `sdvt-${fnv1a32(JSON.stringify(spec))}`;
+}
+
+// src/themes/base-css.ts
+var kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+function tokensCSS(sel, t) {
+  return `${sel}{${TOKEN_KEYS.map((k) => `--sdvt-${kebab(k)}:${t[k]};`).join("")}}`;
+}
+function BASE_CSS(sel) {
+  const s = sel;
+  return [
+    `${s}{display:inline-block;max-width:100%;background:var(--sdvt-bg);color:var(--sdvt-text);font-family:var(--sdvt-font-body);font-size:var(--sdvt-body-size);font-weight:var(--sdvt-body-weight);line-height:var(--sdvt-line-height)}`,
+    // font:inherit: a host's table{font} (Observable Framework's 13px sans) outranks inheriting the root's type
+    `${s} table{font:inherit;border-collapse:collapse;border-spacing:0;width:auto;border-top:var(--sdvt-table-border-top);border-bottom:var(--sdvt-table-border-bottom);border-left:var(--sdvt-table-border-x);border-right:var(--sdvt-table-border-x)}`,
+    `${s} caption{caption-side:top;text-align:var(--sdvt-heading-align);background:var(--sdvt-heading-bg);padding:var(--sdvt-heading-pad) 5px}`,
+    `${s} .sdvt-title{font-family:var(--sdvt-font-title);font-weight:var(--sdvt-title-weight);font-size:var(--sdvt-title-size);color:var(--sdvt-title-color);text-transform:var(--sdvt-title-transform);letter-spacing:var(--sdvt-title-tracking)}`,
+    `${s} .sdvt-subtitle{display:block;font-size:var(--sdvt-subtitle-size);font-style:var(--sdvt-subtitle-style);font-weight:var(--sdvt-subtitle-weight);color:var(--sdvt-subtitle-color)}`,
+    // great_tables draws the subtitle on its own heading row in every theme
+    `${s} thead{position:relative}${s} thead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--sdvt-horizon)}`,
+    `${s} th.sdvt-label{font-family:var(--sdvt-font-label);font-weight:var(--sdvt-label-weight);font-size:var(--sdvt-label-size);font-style:var(--sdvt-label-style);color:var(--sdvt-label-color);background:var(--sdvt-label-bg);text-transform:var(--sdvt-label-transform);letter-spacing:var(--sdvt-label-tracking);border-top:var(--sdvt-label-border-top);border-bottom:var(--sdvt-label-border-bottom);padding:var(--sdvt-label-pad) 5px;vertical-align:bottom}`,
+    `${s} .sdvt-subheader{display:block;font-weight:400;font-size:0.8em;color:var(--sdvt-muted);text-transform:none;letter-spacing:normal}`,
+    `${s} th.sdvt-group{font-family:var(--sdvt-font-label);font-weight:var(--sdvt-group-weight);font-size:var(--sdvt-group-size);color:var(--sdvt-group-color);background:var(--sdvt-group-bg);text-transform:var(--sdvt-group-transform);border-top:var(--sdvt-group-border-top);border-bottom:var(--sdvt-group-border-bottom);text-align:left;padding:var(--sdvt-group-pad) 5px}`,
+    // A host's td{color} (Framework; Infima's --ifm-table-cell-color) outranks the ink a cell only inherits, so the
+    // cell asks for it explicitly. inherit, not var(--sdvt-text): the row's ink is the theme's, or spotlight's dim on
+    // the <tr>. ponytail: (0,1,0), the scope in :where(): beats any element-only host rule (td, table td), loses to an
+    // author's class-qualified rule (.page td at (0,1,1)) and to every theme rule and inline cell style.
+    `:where(${s}) .sdvt-cell{color:inherit}`,
+    // Hosts paint rows: Infima stripes every second one (table tr:nth-child(2n), (0,1,2)) under cells that leave the
+    // ground to the root, and Framework and Infima rule them. sdvtables' own sheets never colour or border a <tr>
+    // (themes and decorations style cells; cutlines and watermarks are images; row decorations are inline), so rows
+    // stay clear. ponytail: :nth-child(n) lifts this to (0,2,1), past that stripe whatever the stylesheet order.
+    `${s} tr:nth-child(n){background-color:transparent;border:0}`,
+    // Infima borders every cell (table th, table td { border }, (0,0,2)). ponytail: (0,1,1) clears that, and every
+    // border sdvtables draws comes from a more specific rule or a later one (themes and decorations follow BASE_CSS)
+    `${s} td,${s} th{border:0}`,
+    `${s} td.sdvt-cell{padding:var(--sdvt-pad) 5px;border-top:var(--sdvt-hline);font-variant-numeric:tabular-nums;vertical-align:middle}`,
+    `${s} tbody tr:first-child td.sdvt-cell{border-top:none}${s} tbody{border-bottom:var(--sdvt-body-border-bottom)}`,
+    // background-color, not the `background` shorthand: the shorthand would reset the hovered row's underline image
+    `${s} tr.sdvt-stripe td.sdvt-cell{background-color:var(--sdvt-stripe)}`,
+    `${s} .sdvt-left{text-align:left}${s} .sdvt-center{text-align:center}${s} .sdvt-right{text-align:right}`,
+    `${s} tfoot td{font-size:var(--sdvt-source-size);font-style:var(--sdvt-source-style);color:var(--sdvt-source-color);padding:var(--sdvt-source-pad) 5px;text-align:left}`,
+    `${s} img.sdvt-mark{vertical-align:middle}`,
+    `${s} img{max-width:none}`,
+    // A47: a host img{max-width:100%} reset (Docusaurus, Tailwind preflight) squashed cell logos
+    `${s} table{--bs-table-bg:transparent;--bs-table-color:currentcolor}`,
+    // utils-theme.R .theme_bs_host: Bootstrap hosts repaint td
+    // Phase 5 controls: renderHTML(table), hydrate and <SdvTable/> (the last rule is J31 A5, a neutral selected-row overlay)
+    `${s} .sdvt-sort{all:unset;cursor:pointer;display:inline-block;width:100%}`,
+    `${s} .sdvt-sort:focus-visible{outline:2px solid currentColor;outline-offset:2px}`,
+    // all:unset drops the UA focus ring (WCAG 2.4.7)
+    // the arrow repeats aria-sort, so its alt text is empty (kept out of the button name); the plain declaration is the fallback
+    `${s} th[aria-sort="ascending"] .sdvt-sort::after{content:" \u25B2";content:" \u25B2"/"";font-size:.7em}`,
+    `${s} th[aria-sort="descending"] .sdvt-sort::after{content:" \u25BC";content:" \u25BC"/"";font-size:.7em}`,
+    `${s} .sdvt-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}`,
+    // I4 (WCAG 1.4.11): the theme's rule taken 60% of the way to the text colour, 3:1 or better on the table background
+    // in every theme (a black or ink rule stays itself); where color-mix is unsupported, the text colour
+    `${s} .sdvt-toolbar input{font:inherit;padding:2px 6px;border:1px solid var(--sdvt-text);border-color:color-mix(in srgb,var(--sdvt-text) 60%,var(--sdvt-rule));background:var(--sdvt-bg);color:var(--sdvt-text)}`,
+    `${s} .sdvt-pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:6px}`,
+    `${s} .sdvt-page{font:inherit;cursor:pointer}`,
+    `${s} .sdvt-page[aria-disabled="true"]{opacity:.4;cursor:default}`,
+    // M1: aria-disabled, so focus stays on an edge button
+    `${s} tr.sdvt-selected>td{box-shadow:inset 0 0 0 9999px rgba(127,127,127,.18)}`,
+    `${s} tr.sdvt-selected>td:first-child{box-shadow:inset 3px 0 0 var(--sdvt-text),inset 0 0 0 9999px rgba(127,127,127,.18)}`,
+    // I4: the tint is 1.2:1; a text-coloured bar gives the state 3:1
+    // J31 (A29): a hovered row (its own pointer, or a linked figure's) gets a text-coloured underline, 3:1 like I4's bar.
+    // A background image: it sits beside the selected overlay (box-shadow) and moves no layout. The scope and the row
+    // sit in :where(), so the rule weighs (0,1,1), td.sdvt-cell alone: the documented one-rule opt-out
+    // tr.sdvt-hover>td.sdvt-cell{background-image:none}, at (0,2,2), wins wherever a page puts it
+    `:where(${s} tr.sdvt-hover)>td.sdvt-cell{background-image:linear-gradient(var(--sdvt-text),var(--sdvt-text));background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat}`,
+    `${s} tr.sdvt-row:focus-visible{outline:2px solid currentColor;outline-offset:-2px}`,
+    // Task 10: the grid's tab stop (WCAG 2.4.7)
+    `${s} th.sdvt-col-current .sdvt-sort{text-decoration:underline;text-underline-offset:4px}`
+    // Task 10: the column `s` sorts
+  ].join("\n");
+}
+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);
+    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);
+  for (let s = 0; s < idx.length; ) {
+    let e = s;
+    while (e + 1 < idx.length && idx[e + 1]?.[0] === idx[s]?.[0]) e++;
+    const r = (s + e) / 2 + 1;
+    for (let j = s; j <= e; j++) out[idx[j]?.[1]] = r;
+    s = e + 1;
+  }
+  if (!desc || idx.length === 0) return out;
+  let top = 0;
+  for (const r of out) if (r !== null && r > top) top = r;
+  return out.map((r) => r === null ? null : top - r + 1);
+}
+function domainOf(columns) {
+  let lo = Number.POSITIVE_INFINITY;
+  let hi = Number.NEGATIVE_INFINITY;
+  for (const col of columns)
+    for (const v of col)
+      if (v !== null) {
+        if (v < lo) lo = v;
+        if (v > hi) hi = v;
+      }
+  if (lo > hi) throw new TableSpecError("no domain given and no numeric value to derive one from");
+  return [lo, hi];
+}
+function quantile7(xs, p) {
+  const s = [...xs].sort((a, b) => a - b);
+  const h = (s.length - 1) * p;
+  const lo = Math.floor(h);
+  return s[lo] + (h - lo) * (s[Math.min(lo + 1, s.length - 1)] - s[lo]);
+}
+function sampleSd(xs) {
+  const m = xs.reduce((a, b) => a + b, 0) / xs.length;
+  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);
+var tableBg = (ctx) => ctx.theme.tokens.bg === "transparent" ? "#ffffff" : hex6(ctx.theme.tokens.bg);
+function markImg(src, alt, heightPx, teamId) {
+  return `<img class="sdvt-mark" src="${escapeAttr(src)}" alt="${escapeAttr(alt)}" style="height:${heightPx}px"${teamId ? ` data-sdvplot-team="${escapeAttr(teamId)}"` : ""}>`;
+}
+function readableInk(primary, secondary, background, target = 4.5) {
+  const toward = onColor(background);
+  for (const c of [primary, secondary]) if (c !== void 0 && contrast(c, background) >= target) return c;
+  for (let i = 0; i < 20; i++) {
+    const c = mix(toward, primary, Math.max(0.95 + i * -0.05, 0));
+    if (contrast(c, background) >= target) return c;
+  }
+  return toward;
+}
+function checkHeight(h, kind) {
+  if (!(Number.isFinite(h) && h >= 1))
+    throw new TableSpecError(`${kind} height must be a number of pixels >= 1, got ${String(h)}`);
+  return h;
+}
+function teamIdsOf(spec, rows) {
+  const out = /* @__PURE__ */ new Map();
+  for (const c of spec.columns) {
+    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;
+    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();
+    });
+    out.set(
+      c.key,
+      resolveSync(values, c.league, {
+        ...c.season !== void 0 ? { season: c.season } : {},
+        ...c.idSystem ? { idSystem: c.idSystem } : {},
+        strict: c.strict ?? false
+      })
+    );
+  }
+  return out;
+}
+var pillLabel = (col, v) => formatValue(
+  v !== null && col.formatType === "percent" && col.scalePercent ? v * 100 : v,
+  col.digits,
+  col.formatType,
+  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]));
+  const missing = at !== null && rows.some((r) => !at.has(r));
+  const out = /* @__PURE__ */ new Map();
+  for (const col of spec.columns) {
+    if (!isScaled(col)) continue;
+    if (missing)
+      warnFn(
+        `sdvtables:domainRows:${col.key}`,
+        `column "${col.key}": a rendered row is not in domainRows (matched by identity, not by value), so it is colored from its own value (a rank fill: not at all); pass the same row objects as rows`
+      );
+    if (col.domain === void 0 && domainRows.length === 0) continue;
+    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 present2 = nums.filter((n) => n !== null);
+      const [lo, hi] = col.domain;
+      const scale = col.scale;
+      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 = 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(
+        `sdvtables:domain:${col.key}:${domain.join(",")}`,
+        `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 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(
+        `sdvtables:outside:${col.key}:${outside}:${domain.join(",")}`,
+        `${outside} value(s) fall outside the domain ${fmt()} and are drawn grey`
+      );
+    const shown = at === null ? values : rows.map((r) => {
+      const j = at.get(r);
+      return j === void 0 ? own(toNumber(cellValue(r, col.key))) : values[j] ?? null;
+    });
+    const shownNums = at === null ? nums : rows.map((r) => toNumber(cellValue(r, col.key)));
+    const labelWidth = col.kind === "colorPills" ? Math.max(1, ...shownNums.map((n) => pillLabel(col, n).length)) : 1;
+    out.set(col.key, { domain, palette, reverse: col.reverse, values: shown, color, labelWidth });
+  }
+  return out;
+}
+function renderCell(col, row, i, ctx) {
+  switch (col.kind) {
+    case "text":
+    case "colorResults":
+      return blankOr(cellValue(row, col.key));
+    // ---- Task 6
+    case "num":
+    case "int": {
+      const n = toNumber(cellValue(row, col.key));
+      if (n === null) return "";
+      const sc = ctx.scaled.get(col.key);
+      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 } : {},
+          big: col.big ?? false,
+          prefix: col.prefix ?? "",
+          suffix: col.suffix ?? "",
+          forceSign: col.forceSign ?? false
+        })
+      );
+    }
+    case "pct": {
+      const n = toNumber(cellValue(row, col.key));
+      return n === null ? "" : escapeHtml(`${formatNumber(col.scale ? n * 100 : n, { digits: col.digits })}%`);
+    }
+    case "rank": {
+      const n = toNumber(cellValue(row, col.key));
+      if (n === null) return "";
+      const o = ordinal(n);
+      const num = String(Math.trunc(n));
+      return col.superscript ? `${num}<sup style="font-size:${escapeAttr(cssValue(col.suffixSize, "rank suffixSize"))}">${o.slice(num.length)}</sup>` : escapeHtml(o);
+    }
+    case "delta": {
+      const a = toNumber(cellValue(row, col.key));
+      const b = toNumber(cellValue(row, col.to));
+      if (a === null || b === null) return "";
+      const d = col.percent ? a === 0 ? null : (b - a) / a : b - a;
+      if (d === null || !Number.isFinite(d)) return "";
+      const shown = col.arrows ? Math.abs(d) : d;
+      const text = `${col.arrows ? d > 0 ? "\u25B2 " : d < 0 ? "\u25BC " : "" : ""}${formatNumber(col.percent ? shown * 100 : shown, { digits: col.decimals, forceSign: col.forceSign && !col.arrows })}${col.percent ? "%" : ""}`;
+      const color = !col.color ? null : d > 0 ? col.colorPositive : d < 0 ? col.colorNegative : col.colorNeutral ?? null;
+      return color ? `<span style="color:${escapeAttr(cssValue(color, "delta color"))}">${escapeHtml(text)}</span>` : escapeHtml(text);
+    }
+    case "tally": {
+      const ns = col.keys.map((k) => toNumber(cellValue(row, k)));
+      if (ns.some((n) => n === null)) {
+        const v = cellValue(row, col.key);
+        return blankOr(v);
+      }
+      const xs = ns;
+      if (col.share && !(Number.isInteger(col.shareOf) && col.shareOf >= 0 && col.shareOf < xs.length))
+        throw new TableSpecError(`tally shareOf must index (from 0) one of ${col.keys.join(", ")}`);
+      const text = xs.map((n) => naturalDigits(n)).join(col.separator);
+      const total = xs.reduce((s, n) => s + n, 0);
+      if (!col.share || total === 0) return escapeHtml(text);
+      return escapeHtml(
+        `${text}${col.sharePrefix}${formatNumber((xs[col.shareOf] ?? 0) / total * 100, { digits: col.shareDecimals })}%${col.shareSuffix}`
+      );
+    }
+    // ---- Task 7
+    case "logo":
+    case "wordmark": {
+      const raw = cellValue(row, col.key);
+      const text = blankOr(raw);
+      const id = ctx.teamIds.get(col.key)?.[i];
+      if (id === void 0) return text;
+      const url = logoUrlSync(id, col.league, {
+        ...col.season !== void 0 ? { season: col.season } : {},
+        ...col.variant ? { variant: col.variant } : {},
+        markType: col.kind,
+        idSystem: "team_id"
+      });
+      if (!url) return text;
+      return markImg(url, teamNameSync(col.league, id) ?? String(raw), checkHeight(col.height, col.kind), id) + (col.kind === "logo" && col.includeName ? text : "");
+    }
+    case "headshot": {
+      const raw = cellValue(row, col.key);
+      if (isBlank(raw)) return "";
+      const url = headshotUrl(String(raw).trim(), col.league, { idSystem: col.idSystem });
+      return url ? markImg(url, String(raw).trim(), checkHeight(col.height, "headshot")) : blankOr(raw);
+    }
+    case "mergeStackTeamColor": {
+      const id = ctx.teamIds.get(col.key)?.[i];
+      const bg = col.background ? solid(col.background) : tableBg(ctx);
+      const p = id === void 0 ? void 0 : teamColorsSync(col.league, id, { idSystem: "team_id" });
+      const s = id === void 0 ? void 0 : teamColorsSync(col.league, id, { which: "secondary", idSystem: "team_id" });
+      const ink = readableInk(p ?? "#bebebe", s, bg);
+      return `<div style="line-height:${col.fontSizeTop - 2}px"><span style="${styleAttr({ "font-weight": "bold", "font-variant": "small-caps", color: col.color, "font-size": `${col.fontSizeTop}px` })}">${blankOr(cellValue(row, col.key))}</span></div>
+<div style="line-height:${col.fontSizeBottom - 2}px"><span style="${styleAttr({ "font-weight": "bold", color: ink, "font-size": `${col.fontSizeBottom}px` })}">${blankOr(cellValue(row, col.stack))}</span></div>`;
+    }
+    case "teamColorBar":
+    case "teamColorBg":
+      return blankOr(cellValue(row, col.key));
+    // the color lives on the <td> (kindCellStyle)
+    // ---- Task 8
+    case "colorPills": {
+      const sc = ctx.scales.get(col.key);
+      if (!sc) return "";
+      const pillHeight = checkPx(col.pillHeight, "colorPills pillHeight");
+      const outlineWidth = checkPx(col.outlineWidth, "colorPills outlineWidth");
+      const s = sc.values[i] ?? null;
+      const width = sc.labelWidth;
+      let fill;
+      let text;
+      if (s === null) {
+        if (col.naColor === void 0) return "";
+        fill = col.naColor;
+        text = "";
+      } else {
+        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)));
+      const outline = col.outlineColor !== void 0 ? `;border:${outlineWidth}px solid ${escapeAttr(cssValue(col.outlineColor, "colorPills outlineColor"))}` : "";
+      return `<span style="display:inline-block;width:${width}ch;padding-left:3px;padding-right:3px;height:${pillHeight}px;line-height:${pillHeight}px;background-color:${escapeAttr(cssValue(fill, "colorPills naColor"))};color:${escapeAttr(cssValue(ink, "colorPills textColor"))};border-radius:10px;text-align:center${outline}">${escapeHtml(text)}</span>`;
+    }
+    case "colorRanks":
+    case "highlight":
+      return blankOr(cellValue(row, col.key));
+    // the fill lives on the <td> (kindCellStyle)
+    case "highlightNa":
+      return isNa(col, cellValue(row, col.key)) ? escapeHtml(col.missingText ?? "") : blankOr(cellValue(row, col.key));
+    case "percentileBar": {
+      const sc = ctx.scales.get(col.key);
+      const v = sc?.values[i] ?? null;
+      const th = checkPx(col.trackHeight, "percentileBar trackHeight");
+      const m = checkPx(col.markerSize, "percentileBar markerSize");
+      const fontSize = col.fontSize === void 0 ? m / 2 : checkPx(col.fontSize, "percentileBar fontSize");
+      const ringWidth = checkPx(col.ringWidth, "percentileBar ringWidth");
+      const trackColor = escapeAttr(cssValue(col.trackColor, "percentileBar trackColor"));
+      const textColor = escapeAttr(cssValue(col.textColor, "percentileBar textColor"));
+      if (sc === void 0 || v === null) {
+        const seg = `<div style="flex:1;height:${th}px;background:${escapeAttr(cssValue(col.naTrackColor ?? col.trackColor, "percentileBar naTrackColor"))};border-radius:${th}px"></div>`;
+        return `<div class="sdvt-pbar" style="display:flex;align-items:center;height:${m}px;width:100%">${seg}<span style="margin:0 6px;color:${escapeAttr(cssValue(col.naTextColor, "percentileBar naTextColor"))};font-size:${fontSize}px">${escapeHtml(col.naLabel ?? "")}</span>${seg}</div>`;
+      }
+      const [lo, hi] = sc.domain;
+      const clamped = Math.min(hi, Math.max(lo, v));
+      const p = Number((hi === lo ? 50 : (clamped - lo) / (hi - lo) * 100).toFixed(4));
+      const color = sc.color(clamped) ?? trackColor;
+      const track = `<div style="position:absolute;top:50%;left:0;right:0;height:${th}px;margin-top:-${th / 2}px;background:${trackColor};border-radius:${th}px"></div>`;
+      const fill = col.fullTrack ? "" : `<div style="position:absolute;top:50%;left:0;width:${p}%;height:${th}px;margin-top:-${th / 2}px;background:${color};border-radius:${th}px"></div>`;
+      const ring = col.ringColor !== void 0 ? `;box-shadow:0 0 0 ${ringWidth}px ${escapeAttr(cssValue(col.ringColor, "percentileBar ringColor"))}` : "";
+      const marker = `<div style="position:absolute;top:0;left:${p}%;margin-left:-${m / 2}px;width:${m}px;height:${m}px;border-radius:50%;background:${color};color:${textColor};font-size:${fontSize}px;line-height:${m}px;text-align:center;font-weight:700;letter-spacing:-0.02em${ring}">${escapeHtml(formatValue(v, col.decimals, "number", ""))}</div>`;
+      return `<div class="sdvt-pbar" style="position:relative;height:${m}px;width:100%">${track}${fill}${marker}</div>`;
+    }
+    case "indicatorBox": {
+      const on = col.truthy.includes(cellValue(row, col.key));
+      if (col.showOnly === "filled" && !on || col.showOnly === "neutral" && on) return "";
+      return `<span style="${styleAttr({ display: "inline-block", width: `${col.size}px`, height: `${col.size}px`, "background-color": on ? col.fill : col.neutral, "vertical-align": "middle", margin: "4px 1px" })}"></span>`;
+    }
+    case "image": {
+      const v = cellValue(row, col.key);
+      if (isBlank(v)) return "";
+      const alt = col.alt ? cellValue(row, col.alt) : "";
+      return markImg(
+        String(v),
+        isBlank(alt) ? "" : String(alt),
+        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)}`);
+    }
+  }
+}
+function kindCellStyle(col, row, i, ctx) {
+  switch (col.kind) {
+    case "teamColorBar":
+    case "teamColorBg": {
+      const id = ctx.teamIds.get(col.key)?.[i];
+      const color = (id === void 0 ? void 0 : teamColorsSync(col.league, id, { which: col.which, idSystem: "team_id" })) ?? col.naColor;
+      if (col.kind === "teamColorBar")
+        return styleAttr({ "border-left": `${col.barWidth}px solid ${color}` });
+      const a = Math.round(Math.min(1, Math.max(0, col.alpha)) * 255).toString(16).padStart(2, "0");
+      return styleAttr({ "background-color": `${hex6(color, { dropAlpha: true })}${a}` });
+    }
+    case "colorRanks": {
+      const sc = ctx.scales.get(col.key);
+      const s = sc?.values[i] ?? null;
+      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": {
+      const hit = extremeOf(col, row, ctx);
+      return hit ? styleAttr({
+        "background-color": col.fill,
+        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,
+        color: col.textColor,
+        "font-weight": col.bold ? "bold" : void 0,
+        "font-style": col.italic ? "italic" : void 0
+      }) : "";
+    default:
+      return "";
+  }
+}
+
+// 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>';
+var BSKY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>';
+var GH = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>';
+var YT = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>';
+var FB = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>';
+var WEB = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>';
+var EMAIL = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>';
+var SOCIAL_ICONS = {
+  x: X,
+  twitter: X,
+  ig: IG,
+  bsky: BSKY,
+  gh: GH,
+  yt: YT,
+  fb: FB,
+  web: WEB,
+  website: WEB,
+  link: WEB,
+  email: EMAIL,
+  mail: EMAIL
+};
+
+// src/html/decorations.ts
+function strwrap(words, width) {
+  const w = Math.max(width - 1, 1);
+  const out = [];
+  let cur = "";
+  for (const word of words) {
+    if (cur && cur.length + 1 + word.length > w) {
+      out.push(cur);
+      cur = word;
+    } else cur = cur ? `${cur} ${word}` : word;
+  }
+  return cur ? [...out, cur] : out;
+}
+function wrapLabel(text, width, balance) {
+  const words = text.split(/\s+/).filter((x) => x !== "");
+  if (words.length <= 1) return [text];
+  const greedy = strwrap(words, width);
+  if (greedy.length <= 1) return [text];
+  if (!balance) return greedy;
+  const target = Math.ceil(words.reduce((s, x) => s + x.length + 1, 0) / greedy.length);
+  const lines = [];
+  let cur = "";
+  for (const word of words) {
+    const cand = cur ? `${cur} ${word}` : word;
+    if (cand.length > target && cur) {
+      lines.push(cur);
+      cur = word;
+    } else cur = cand;
+  }
+  return cur ? [...lines, cur] : lines;
+}
+function groupIndexOf(rows, key) {
+  const seen = /* @__PURE__ */ new Map();
+  return rows.map((r) => {
+    const g = cellValue(r, key);
+    if (!seen.has(g)) seen.set(g, seen.size);
+    return seen.get(g);
+  });
+}
+var isList = (p) => Array.isArray(p);
+function textStyleAttr(ts) {
+  if (!ts) return "";
+  const s = styleAttr({
+    color: ts.color,
+    "font-size": ts.size,
+    "font-weight": ts.weight,
+    "font-family": ts.font ? fontStack(checkFamily(ts.font)) : void 0,
+    "text-transform": ts.transform === "uppercase" ? "uppercase" : void 0,
+    "font-style": ts.style === "italic" ? "italic" : void 0
+  });
+  return s ? ` style="${s}"` : "";
+}
+function checkFamily(f) {
+  if (!/^[\w .-]+$/.test(f))
+    throw new TableSpecError(`font family "${f}" may only hold letters, digits, spaces, "." "-" "_"`);
+  return f;
+}
+var checkLocation = (l, arg) => {
+  if (l !== "top" && l !== "bottom")
+    throw new TableSpecError(`${arg} location must be top or bottom, not ${JSON.stringify(l)}`);
+  return l;
+};
+var ALIGN = /* @__PURE__ */ new Set(["left", "center", "right"]);
+var checkAlign = (a, arg) => {
+  if (!ALIGN.has(a)) throw new TableSpecError(`${arg} must be left, center or right, not "${a}"`);
+  return a;
+};
+var SCALE_NAMES = {
+  1e3: ["thousands", "(000s)"],
+  1e6: ["millions", "(millions)"],
+  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 = {
+    caption: "",
+    headRows: "",
+    foot: [],
+    before: "",
+    after: "",
+    css: [],
+    fonts: [],
+    hiddenColumns: /* @__PURE__ */ new Set(),
+    labelText: /* @__PURE__ */ new Map(),
+    label: (_c, t) => escapeHtml(t),
+    labelSuffix: none,
+    labelStyle: none,
+    rowClass: none,
+    rowStyle: none,
+    groupRowClass: none,
+    cellStyle: none,
+    cellSuffix: none
+  };
+  const title = spec.decorations.find(
+    (d) => d.type === "title"
+  );
+  const subtitle = spec.decorations.find(
+    (d) => d.type === "subtitle"
+  );
+  if (title || subtitle)
+    out.caption = `${title ? `<span class="sdvt-title">${escapeHtml(title.text)}</span>` : ""}${subtitle ? `<span class="sdvt-subtitle">${escapeHtml(subtitle.text)}</span>` : ""}`;
+  const rowStyles = /* @__PURE__ */ new Map();
+  const rowClasses = /* @__PURE__ */ new Map();
+  const cellStyles = /* @__PURE__ */ new Map();
+  const addRow = (i, decl) => {
+    rowStyles.set(i, { ...rowStyles.get(i), ...decl });
+  };
+  const addClass = (i, c) => {
+    rowClasses.set(i, [...rowClasses.get(i) ?? [], c]);
+  };
+  const addCell = (i, key, decl) => {
+    cellStyles.set(`${i}:${key}`, { ...cellStyles.get(`${i}:${key}`), ...decl });
+  };
+  const fillCells = (i, decl) => {
+    for (const c of ctx.columns) addCell(i, c.key, decl);
+  };
+  const suffixes = /* @__PURE__ */ new Map();
+  const labelStyles = /* @__PURE__ */ new Map();
+  let recordedKey;
+  let cutCount = 0;
+  const bg = ctx.theme.tokens.bg === "transparent" ? "#ffffff" : hex6(ctx.theme.tokens.bg);
+  const matchesNone = (sel) => selectRows(sel, ctx.domainRows).length === 0;
+  for (const c of spec.columns)
+    if (c.kind === "colorResults") {
+      const [win, loss] = c.resultType === "binary" ? [1, 0] : ["W", "L"];
+      const eq = (v, want) => v === want || typeof v === "boolean" && Number(v) === want;
+      rows.forEach((r, i) => {
+        const v = cellValue(r, c.key);
+        if (isBlank(v)) return;
+        if (eq(v, win)) fillCells(i, { "background-color": c.winColor, color: c.winTextColor });
+        else if (eq(v, loss)) fillCells(i, { "background-color": c.lossColor, color: c.lossTextColor });
+        else if (c.tieColor !== void 0 && eq(v, c.tieValue))
+          fillCells(i, { "background-color": c.tieColor, color: c.tieTextColor });
+      });
+    }
+  for (const d of spec.decorations)
+    switch (d.type) {
+      case "sourceNote":
+        out.foot.push(d.unsafe ? d.html : escapeHtml(d.html));
+        break;
+      case "wrapLabels": {
+        const prev = out.label;
+        out.label = (col, text) => !d.columns || d.columns.includes(col.key) ? wrapLabel(text, d.width, d.balance).map(escapeHtml).join("<br>") : prev(col, text);
+        break;
+      }
+      // ---- Task 9
+      case "groupStripes": {
+        if (!ctx.groupKey) throw new TableSpecError("groupStripes needs .groupBy(key)");
+        const on = (gi) => gi % 2 === (d.start === 2 ? 1 : 0);
+        groupIndexOf(rows, ctx.groupKey).forEach((g, i) => {
+          if (on(g)) addClass(i, "sdvt-gstripe");
+        });
+        out.css.push(
+          `${ctx.sel} tr.sdvt-gstripe td{background-color:${cssValue(d.color, "groupStripes color")}}`
+        );
+        break;
+      }
+      case "rowAccent": {
+        if (d.side !== "left" && d.side !== "right")
+          throw new TableSpecError(`rowAccent side must be left or right, not ${JSON.stringify(d.side)}`);
+        const keyOf = (r) => {
+          const v = cellValue(r, d.key);
+          return isBlank(v) ? null : String(v);
+        };
+        const keys = rows.map(keyOf);
+        const levels = [...new Set(ctx.domainRows.map(keyOf).filter((k) => k !== null))].sort();
+        const pal = d.palette;
+        const colors = keys.map(
+          (k) => k === null ? void 0 : pal === void 0 ? k : isList(pal) ? pal[levels.indexOf(k) % pal.length] : Object.hasOwn(pal, k) ? pal[k] : void 0
+        );
+        const keep = d.rows ? new Set(selectRows(d.rows, rows, ctx.domainRows)) : null;
+        if (d.rows && keep?.size === 0 && matchesNone(d.rows)) {
+          ctx.warn(`sdvtables:rowAccent:${ctx.id}`, "rows matched no rows; the table is unchanged");
+          break;
+        }
+        const unsafe = /* @__PURE__ */ new Set();
+        colors.forEach((c, i) => {
+          const fill = c ?? d.naColor;
+          if (fill === "transparent" || keep && !keep.has(i)) return;
+          if (pal === void 0 && c !== void 0 && !isCssValue(c)) unsafe.add(c);
+          else addRow(i, { [`border-${d.side}`]: `${d.width}px solid ${fill}` });
+        });
+        if (unsafe.size > 0)
+          ctx.warn(
+            `sdvtables:rowAccent:${ctx.id}:css:${[...unsafe].join(",")}`,
+            `${[...unsafe].map((c) => JSON.stringify(c)).join(", ")} in "${d.key}" cannot be a CSS color, so ${unsafe.size === 1 ? "that row gets" : "those rows get"} no accent`
+          );
+        if (d.hide) out.hiddenColumns.add(d.key);
+        break;
+      }
+      case "boldRows":
+        for (const i of selectRows(d.rows, rows, ctx.domainRows)) {
+          addRow(i, { "font-weight": "bold" });
+          fillCells(i, {
+            color: d.textColor,
+            ...d.highlightColor ? { "background-color": d.highlightColor } : {}
+          });
+        }
+        break;
+      case "spotlight": {
+        const lit = new Set(selectRows(d.rows, rows, ctx.domainRows));
+        if (lit.size === 0 && matchesNone(d.rows)) {
+          ctx.warn(`sdvtables:spotlight:${ctx.id}`, "rows matched no rows, so the table is unchanged");
+          break;
+        }
+        const dim = d.dimColor === "auto" ? secondaryOn(bg, onColor(bg)) : d.dimColor;
+        const fill = {
+          ...d.fill ? { "background-color": d.fill } : {},
+          ...d.textColor ? { color: d.textColor } : {}
+        };
+        const look = { ...fill, ...d.bold ? { "font-weight": "bold" } : {} };
+        rows.forEach((_, i) => {
+          if (!lit.has(i)) {
+            if (dim) addRow(i, { color: dim });
+            return;
+          }
+          if (d.accentColor) addRow(i, { "box-shadow": `inset ${d.accentWidth}px 0 0 ${d.accentColor}` });
+          if (!d.columns) {
+            fillCells(i, fill);
+            if (d.bold) addRow(i, { "font-weight": "bold" });
+            return;
+          }
+          for (const c of ctx.columns)
+            if (d.columns.includes(c.key)) addCell(i, c.key, look);
+            else if (dim) addCell(i, c.key, { color: dim });
+        });
+        break;
+      }
+      case "cutline": {
+        if (!d.after.every((a) => Number.isInteger(a)))
+          throw new TableSpecError(`cutline after must be whole row numbers, got ${d.after.join(", ")}`);
+        if (d.gap.length < 1 || d.gap.length > 2 || d.gap.some((g) => !(g >= 0)))
+          throw new TableSpecError("cutline gap must be one or two non-negative numbers");
+        const n = rows.length;
+        const dropped = d.after.filter((a) => a < 0 || a >= n);
+        if (dropped.length > 0)
+          ctx.warn(
+            `sdvtables:cutline:${ctx.id}:${dropped.join(",")}`,
+            `dropped ${dropped.length} cut line(s) at ${dropped.join(", ")}: after must be between 0 and ${n - 1}; a line after the last row is just the table border`
+          );
+        const color = cssValue(d.color, "cutline color");
+        const style = cssValue(d.style, "cutline style");
+        const weight = checkPx(d.weight, "cutline weight");
+        const labelSize = checkPx(d.labelSize, "cutline labelSize");
+        const cn = cutCount++;
+        const above = d.gap[0] ?? 0;
+        const below = d.gap[d.gap.length - 1] ?? 0;
+        d.after.forEach((a, j) => {
+          if (a < 0 || a >= n) return;
+          const label = d.label && d.label.length > 0 ? d.label[j % d.label.length] ?? null : null;
+          const top = d.labelPosition === "below" || a === 0;
+          const labelRow = top ? a : a - 1;
+          addClass(a, `sdvt-cut-${cn}-${j}`);
+          out.css.push(`${ctx.sel} tr.sdvt-cut-${cn}-${j} td{border-top:${weight}px ${style} ${color}}`);
+          if (above > 0 && a > 0 && !(label && labelRow === a - 1)) {
+            addClass(a - 1, `sdvt-cut-${cn}-${j}-above`);
+            out.css.push(`${ctx.sel} tr.sdvt-cut-${cn}-${j}-above td{padding-bottom:${above}px}`);
+          }
+          if (below > 0 && !(label && labelRow === a))
+            out.css.push(`${ctx.sel} tr.sdvt-cut-${cn}-${j} td{padding-top:${below}px}`);
+          if (label) {
+            addClass(labelRow, `sdvt-cut-${cn}-${j}-label`);
+            out.css.push(
+              `${ctx.sel} tr.sdvt-cut-${cn}-${j}-label td{padding-${top ? "top" : "bottom"}:${labelSize + 13 + (top ? below : above)}px;background-color:transparent}`,
+              `${ctx.sel} tr.sdvt-cut-${cn}-${j}-label{background-image:url("${cutlineSvg(label, d.labelColor ?? color, labelSize)}");background-repeat:no-repeat;background-position:${top ? "left 5px" : "left bottom 5px"}}`
+            );
+          }
+        });
+        break;
+      }
+      case "borderGrid": {
+        const color = cssValue(d.color, "borderGrid color");
+        const b = `border-right:${checkPx(d.weight, "borderGrid weight")}px solid ${color}`;
+        out.css.push(
+          `${ctx.sel} td.sdvt-cell:not(:last-child){${b}}`,
+          `${ctx.sel} td.sdvt-cell{border-top-color:${color}}`
+        );
+        if (d.includeLabels) out.css.push(`${ctx.sel} th.sdvt-label:not(:last-child){${b}}`);
+        break;
+      }
+      // ---- Task 10
+      case "titleHeader": {
+        for (const ts of [d.kickerStyle, d.titleStyle, d.subtitleStyle, d.dateStyle])
+          if (ts?.font)
+            out.fonts.push({
+              family: checkFamily(ts.font),
+              weights: [typeof ts.weight === "number" ? ts.weight : 400]
+            });
+        out.css.push(
+          `${ctx.sel} .sdvt-kicker{font-size:0.75em;font-weight:700;color:#C84630;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.15em}`,
+          `${ctx.sel} .sdvt-date{font-size:0.85em;font-weight:400;color:#8A8A8A;margin-top:0.15em}`
+        );
+        out.caption = `${d.kicker ? `<div class="sdvt-kicker"${textStyleAttr(d.kickerStyle)}>${escapeHtml(d.kicker)}</div>` : ""}<span class="sdvt-title"${textStyleAttr(d.titleStyle)}>${escapeHtml(d.title)}</span>${d.subtitle ? `<span class="sdvt-subtitle"${textStyleAttr(d.subtitleStyle)}>${escapeHtml(d.subtitle)}</span>` : ""}${d.date ? `<div class="sdvt-date"${textStyleAttr(d.dateStyle)}>${escapeHtml(d.date)}</div>` : ""}`;
+        break;
+      }
+      case "caption538": {
+        const align = checkAlign(d.align, "caption538 align");
+        if (!d.top && !d.bottom)
+          throw new TableSpecError("caption538: nothing to caption; pass top, bottom, or both");
+        const rule = d.ruleColor ?? ctx.theme.tokens.text;
+        if (d.top)
+          out.foot.push(
+            `<div class="sdvt-cap538" style="${styleAttr({ "border-bottom": `${d.ruleWidth}px solid ${rule}`, "font-size": `${d.size}px` })}">${escapeHtml(d.top)}</div>`
+          );
+        if (d.bottom)
+          out.foot.push(
+            `<div class="sdvt-cap538" style="${styleAttr({ "text-align": align })}">${escapeHtml(d.bottom)}</div>`
+          );
+        break;
+      }
+      case "socialTag": {
+        const align = checkAlign(d.align, "socialTag align");
+        const entries = Object.entries(d.accounts);
+        if (entries.length === 0)
+          throw new TableSpecError("socialTag accounts must be a non-empty {platform: handle} object");
+        const parts = entries.map(([k, handle]) => {
+          const svg = SOCIAL_ICONS[k.toLowerCase()];
+          if (!svg)
+            throw new TableSpecError(
+              `socialTag: unknown platform "${k}"; one of ${Object.keys(SOCIAL_ICONS).join(", ")}`
+            );
+          return `<span class="sdvt-handle">${svg.replace("<svg ", `<svg style="${styleAttr({ height: d.iconHeight, "vertical-align": "-0.125em", fill: d.iconColor ?? "currentColor" })}" `)}${escapeHtml(handle)}</span>`;
+        });
+        out.css.push(
+          `${ctx.sel} .sdvt-handle{display:inline-flex;align-items:center;gap:0.3em;white-space:nowrap}`
+        );
+        if (d.caption)
+          out.foot.push(
+            `<div class="sdvt-cap538" style="${styleAttr({ "border-bottom": `1px solid ${ctx.theme.tokens.text}`, "font-size": "12px" })}">${escapeHtml(d.caption)}</div>`
+          );
+        out.foot.push(
+          `<div class="sdvt-social" style="text-align:${align}">${parts.join(d.stack ? "<br>" : escapeHtml(d.separator))}</div>`
+        );
+        break;
+      }
+      case "scaleNote": {
+        const { note, suffix } = scaleNoteOf(d);
+        for (const k of d.columns) ctx.scaled.set(k, { divisor: d.divisor, decimals: d.decimals });
+        if (d.where !== "label") out.foot.push(escapeHtml(note));
+        if (d.where !== "sourceNote") {
+          const prev = out.labelSuffix;
+          out.labelSuffix = (key) => d.columns.includes(key) ? ` ${suffix}` : prev(key);
+        }
+        break;
+      }
+      case "borderBars": {
+        if (d.side !== "top" && d.side !== "bottom")
+          throw new TableSpecError(`borderBars side must be top or bottom, not ${JSON.stringify(d.side)}`);
+        checkAlign(d.barAlign, "borderBars barAlign");
+        const barWidth = escapeAttr(cssValue(d.barWidth, "borderBars barWidth"));
+        const colors = d.colors.map((c) => escapeAttr(cssValue(c, "borderBars colors")));
+        if (d.imgAlign !== "left" && d.imgAlign !== "right")
+          throw new TableSpecError(
+            `borderBars imgAlign must be left or right, not ${JSON.stringify(d.imgAlign)}`
+          );
+        const barHeight = Number(d.barHeight);
+        if (!Number.isFinite(barHeight))
+          throw new TableSpecError(
+            `borderBars barHeight must be a number, got ${JSON.stringify(d.barHeight)}`
+          );
+        if (d.textAlign !== "left" && d.textAlign !== "right")
+          throw new TableSpecError(`borderBars textAlign must be left or right, not "${d.textAlign}"`);
+        const margin = {
+          left: "margin-left:0;margin-right:auto",
+          center: "margin-left:auto;margin-right:auto",
+          right: "margin-left:auto;margin-right:0"
+        }[d.barAlign];
+        let block;
+        if (!d.text && !d.img) {
+          const bars = colors.map((c) => `<div class="sdvt-bar" style="height:${barHeight}px;background-color:${c}"></div>`).join("");
+          block = `<div class="sdvt-bars-box" style="background-color:transparent;width:${barWidth};${margin}">${bars}</div>`;
+        } else {
+          const text = d.text ? `<span class="sdvt-bars-text" style="${styleAttr({ "font-weight": d.textWeight, color: d.textColor, "font-size": `${d.textSize}px`, [`padding-${d.textAlign}`]: `${d.textPadding}px`, "font-family": "inherit" })}">${escapeHtml(d.text)}</span>` : "<span></span>";
+          const img = d.img ? `<img class="sdvt-bars-img" src="${escapeAttr(d.img)}" alt="" style="${styleAttr({ width: `${d.imgWidth}px`, height: `${d.imgHeight}px`, [`padding-${d.imgAlign}`]: `${d.imgPadding}px` })}">` : "";
+          block = `<div class="sdvt-bars-row" style="display:flex;justify-content:space-between;align-items:center;height:${barHeight}px;background-color:${colors[0] ?? "#000"};width:${barWidth};${margin}">${text}${img}</div>`;
+        }
+        const wrapped = `<div class="sdvt-bars sdvt-bars-${d.side}">${block}</div>`;
+        if (d.side === "top") out.before += wrapped;
+        else out.after += wrapped;
+        break;
+      }
+      case "watermark": {
+        if (!d.text === !d.image) throw new TableSpecError("watermark: supply exactly one of text or image");
+        let url;
+        let tall = false;
+        let extra = "";
+        const opacity = checkPx(d.opacity, "watermark opacity");
+        if (d.image) {
+          url = cssStr(d.image);
+          extra = `;opacity:${opacity}`;
+        } else [url, tall] = watermarkSvg(d.text ?? "", d.color, opacity, d.angle, d.font);
+        const size = cssValue(d.size, "watermark size");
+        out.css.push(
+          `${ctx.sel} tbody{background-image:url("${url}");background-repeat:no-repeat;background-position:${cssValue(d.position, "watermark position")};background-size:${tall ? `auto ${size}` : `${size} auto`}${extra}}`
+        );
+        break;
+      }
+      case "font": {
+        const stack = fontStack(checkFamily(d.family));
+        if (d.google)
+          out.fonts.push({ family: d.family, weights: [typeof d.weight === "number" ? d.weight : 400] });
+        out.css.push(
+          `${ctx.sel}{--sdvt-font-body:${stack};--sdvt-font-label:${stack};--sdvt-font-title:${stack}${d.weight ? `;--sdvt-body-weight:${cssValue(d.weight, "font weight")}` : ""}${d.style ? `;font-style:${cssValue(d.style, "font style")}` : ""}}`
+        );
+        break;
+      }
+      // ---- Task 11
+      case "legendContinuous": {
+        const rec = ctx.recorded;
+        const palette = (d.palette ?? rec?.palette ?? RANK_PALETTE).map((c) => hex6(c));
+        let domain = d.domain ?? rec?.domain;
+        if (!domain && d.columns && ctx.domainRows.length > 0)
+          domain = domainOf(d.columns.map((k) => ctx.domainRows.map((r2) => toNumber(cellValue(r2, k)))));
+        if (!domain && ctx.domainRows.length === 0 && (d.columns || ctx.columns.some(isScaled))) break;
+        if (!domain)
+          throw new TableSpecError(
+            "legendContinuous: no recorded scale (color a column with colorPills/colorRanks/percentileBar first) and no domain or columns given"
+          );
+        if (d.nBins < 1) throw new TableSpecError("legendContinuous nBins must be at least 1");
+        const loc = checkLocation(d.location, "legendContinuous");
+        const swW = checkPx(d.swatchWidth, "legendContinuous swatchWidth");
+        const swH = checkPx(d.swatchHeight, "legendContinuous swatchHeight");
+        const rev = d.reverse ?? rec?.reverse ?? false;
+        const r = ramp(rev ? [...palette].reverse() : palette, domain);
+        const [lo, hi] = domain;
+        const sw = Array.from(
+          { length: d.nBins },
+          (_, b) => `<span class="sdvt-swatch" style="display:inline-block;width:${swW}px;height:${swH}px;background-color:${r(lo + (b + 0.5) / d.nBins * (hi - lo)) ?? "#808080"}"></span>`
+        );
+        const labels = d.labels ?? [lo, hi].map((v) => formatValue(v, d.digits, "comma", ""));
+        const block = `<div class="sdvt-legend sdvt-legend-${loc}" style="display:flex;flex-direction:${d.titlePosition === "left" ? "row" : "column"};align-items:center;gap:6px;justify-content:center">${d.title ? `<div class="sdvt-legend-title">${escapeHtml(d.title)}</div>` : ""}<div class="sdvt-legend-bar" style="display:flex;align-items:center;gap:4px"><span class="sdvt-legend-lab">${escapeHtml(labels[0] ?? "")}</span>${sw.join("")}<span class="sdvt-legend-lab">${escapeHtml(labels[labels.length - 1] ?? "")}</span></div></div>`;
+        if (loc === "top") out.before += block;
+        else out.after += block;
+        break;
+      }
+      case "legendDiscrete": {
+        const key = d.key === "recorded" ? recordedKey : d.key;
+        if (!key)
+          throw new TableSpecError(
+            'legendDiscrete("recorded") needs a .tiers() decoration before it (no recorded key)'
+          );
+        const loc = checkLocation(d.location, "legendDiscrete");
+        const size = checkPx(d.swatchSize, "legendDiscrete swatchSize");
+        const gap = checkPx(d.gap, "legendDiscrete gap");
+        const items = Object.entries(key).map(
+          ([label, color]) => `<span class="sdvt-key-item" style="display:inline-flex;align-items:center;gap:6px"><span class="sdvt-swatch" style="${styleAttr({ display: "inline-block", width: `${size}px`, height: `${size}px`, "background-color": color, border: d.border ? `1px solid ${d.borderColor ?? "currentColor"}` : void 0, "border-radius": d.shape === "circle" ? "50%" : void 0 })}"></span>${escapeHtml(label)}</span>`
+        );
+        const align = checkAlign(d.align, "legendDiscrete align");
+        const block = `<div class="sdvt-legend sdvt-legend-${loc}" style="display:flex;flex-direction:column;align-items:${{ left: "flex-start", center: "center", right: "flex-end" }[align]};gap:4px">${d.heading ? `<div class="sdvt-legend-title">${escapeHtml(d.heading)}</div>` : ""}${d.subtitle ? `<div class="sdvt-legend-sub">${escapeHtml(d.subtitle)}</div>` : ""}<div style="display:flex;flex-direction:${d.direction === "vertical" ? "column" : "row"};flex-wrap:wrap;gap:${gap}px">${items.join("")}</div></div>`;
+        if (loc === "top") out.before += block;
+        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");
+        if (d.levels.some((x, j) => j > 0 && x < (d.levels[j - 1] ?? x)))
+          throw new TableSpecError("significance levels must be in ascending order, strictest first");
+        for (const pair of d.pairs) {
+          rows.forEach((r, i) => {
+            const p = toNumber(cellValue(r, pair.p));
+            if (p === null) return;
+            const s = d.symbols[d.levels.findIndex((x) => p < x)];
+            if (s) {
+              const k = `${i}:${pair.estimate}`;
+              suffixes.set(
+                k,
+                `${suffixes.get(k) ?? ""}${d.superscript ? `<sup style="font-size:0.7em">${escapeHtml(s)}</sup>` : escapeHtml(s)}`
+              );
+            }
+          });
+          if (d.hideP) out.hiddenColumns.add(pair.p);
+        }
+        if (d.note)
+          out.foot.push(
+            escapeHtml(d.levels.map((x, j) => `${d.symbols[j] ?? ""} p < ${naturalDigits(x)}`).join(", "))
+          );
+        break;
+      }
+      case "outliers": {
+        if (d.method === "bounds" && !d.bounds)
+          throw new TableSpecError("outliers bounds must be [lower, upper] when method is 'bounds'");
+        const t = d.threshold ?? (d.method === "sd" ? 3 : 1.5);
+        const shown = d.fill === void 0 ? null : solid(d.fill, bg);
+        const ink = d.color ?? (shown === null || contrast("#B3261E", shown) >= 4.5 ? "#B3261E" : onColor(shown));
+        let flagged = false;
+        for (const k of d.columns) {
+          const xs = rows.map((r) => toNumber(cellValue(r, k)));
+          const nums = ctx.domainRows.map((r) => toNumber(cellValue(r, k))).filter((v) => v !== null);
+          let lo = Number.NEGATIVE_INFINITY;
+          let hi = Number.POSITIVE_INFINITY;
+          if (d.method === "bounds") {
+            lo = d.bounds?.[0] ?? lo;
+            hi = d.bounds?.[1] ?? hi;
+          } else if (nums.length >= 2 && d.method === "sd") {
+            const m = nums.reduce((a, b) => a + b, 0) / nums.length;
+            const s = sampleSd(nums);
+            if (s !== 0) {
+              lo = m - t * s;
+              hi = m + t * s;
+            }
+          } else if (nums.length >= 2) {
+            const q1 = quantile7(nums, 0.25);
+            const q3 = quantile7(nums, 0.75);
+            if (q3 !== q1) {
+              lo = q1 - t * (q3 - q1);
+              hi = q3 + t * (q3 - q1);
+            }
+          }
+          xs.forEach((v, i) => {
+            if (v === null || !(v < lo && d.side !== "high" || v > hi && d.side !== "low")) return;
+            flagged = true;
+            addCell(i, k, {
+              color: ink,
+              "font-weight": d.bold ? "bold" : void 0,
+              "background-color": d.fill
+            });
+            if (d.symbol)
+              suffixes.set(`${i}:${k}`, `${suffixes.get(`${i}:${k}`) ?? ""}${escapeHtml(d.symbol)}`);
+          });
+        }
+        if (flagged && d.note) {
+          const tail = { both: "", high: " (high side only)", low: " (low side only)" }[d.side];
+          out.foot.push(
+            escapeHtml(
+              typeof d.note === "string" ? d.note : d.method === "sd" ? `Marked values fall more than ${naturalDigits(t)} standard deviation${t === 1 ? "" : "s"} from the column mean${tail}.` : d.method === "iqr" ? `Marked values fall outside ${naturalDigits(t)} \xD7 IQR of the column quartiles${tail}.` : `Marked values fall outside ${d.bounds?.[0] ?? "NA"}\u2013${d.bounds?.[1] ?? "NA"}${tail}.`
+            )
+          );
+        }
+        break;
+      }
+      case "marginalia": {
+        const ink = onColor(bg);
+        const color = d.color ?? secondaryOn(bg, ink);
+        const rule = d.ruleColor ?? mix(bg, ink, 0.18);
+        const align = checkAlign(d.align, "marginalia align");
+        for (const k of d.columns) {
+          out.labelText.set(k, d.label);
+          if (d.width !== void 0)
+            labelStyles.set(
+              k,
+              `width:${typeof d.width === "number" ? `${d.width}px` : escapeAttr(cssValue(d.width, "marginalia width"))}`
+            );
+          rows.forEach(
+            (_, i) => addCell(i, k, {
+              "font-style": d.italic ? "italic" : "normal",
+              "font-size": d.size,
+              color,
+              "border-left": d.rule ? `1px solid ${rule}` : void 0,
+              "text-align": align
+            })
+          );
+        }
+        break;
+      }
+      case "tiers": {
+        if (!d.colors)
+          throw new TableSpecError("tiers colors is missing; pass levels and colors as two lists");
+        if (d.colors.length !== d.levels.length)
+          throw new TableSpecError(
+            `tiers levels and colors must be the same length: got ${d.levels.length} levels and ${d.colors.length} colors`
+          );
+        const fills = d.colors.map((c) => hex6(c));
+        const tierOf = (r) => {
+          const v = cellValue(r, d.tierKey);
+          return isBlank(v) ? null : String(v);
+        };
+        const held = [...new Set(ctx.domainRows.map(tierOf).filter((t) => t !== null))];
+        const missing = d.levels.filter((l) => !held.includes(l));
+        if (missing.length > 0)
+          ctx.warn(
+            `sdvtables:tiers:${ctx.id}`,
+            `tier(s) ${missing.join(", ")} are not in "${d.tierKey}", so they get no rows; it holds ${held.join(", ")}`
+          );
+        rows.forEach((r, i) => {
+          const t = tierOf(r);
+          const f = t === null ? void 0 : fills[d.levels.indexOf(t)];
+          if (f) addCell(i, d.tierKey, { "background-color": f, color: onColor(f), "font-weight": "bold" });
+        });
+        recordedKey = Object.fromEntries(d.levels.map((l, j) => [l, fills[j] ?? ""]));
+        break;
+      }
+    }
+  out.cellSuffix = (i, key) => suffixes.get(`${i}:${key}`) ?? "";
+  out.labelStyle = (key) => labelStyles.get(key) ?? "";
+  out.css = out.css.map((r) => r.replace(/</g, "\\3c "));
+  out.rowClass = (i) => (rowClasses.get(i) ?? []).map((c) => ` ${c}`).join("");
+  out.rowStyle = (i) => {
+    const s = rowStyles.get(i);
+    return s ? styleAttr(s) : "";
+  };
+  out.cellStyle = (i, key) => {
+    const s = cellStyles.get(`${i}:${key}`);
+    return s ? styleAttr(s) : "";
+  };
+  return out;
+}
+
+// src/html/layout.ts
+function expandTiers(spec) {
+  const d = spec.decorations.find((x) => x.type === "tiers");
+  if (!d) return spec;
+  const columns = spec.columns.map((c) => {
+    if (!d.imageColumns.includes(c.key)) return { ...c, label: "" };
+    return {
+      key: c.key,
+      label: "",
+      kind: "image",
+      height: d.imgHeight,
+      ...c.align ? { align: c.align } : {},
+      ...c.width ? { width: c.width } : {}
+    };
+  });
+  return {
+    ...spec,
+    theme: { name: "tier", density: spec.theme.density, options: { style: d.style } },
+    columns
+  };
+}
+function snakeLayout(d, rows, headCells, ncol, rowHtml, trOf, gapTh, gapTd) {
+  const blocks = snakeAlign(
+    rows.map((row, i) => ({ row, i })),
+    { nCols: d.nCols, ...d.rowsPerCol !== void 0 ? { rowsPerCol: d.rowsPerCol } : {} }
+  );
+  if (blocks.length < 2 || rows.length === 0) return null;
+  const per = blocks[0]?.length ?? 0;
+  const blank = `<td class="sdvt-cell sdvt-blank">${escapeHtml(d.fill)}</td>`.repeat(ncol);
+  const body = Array.from(
+    { length: per },
+    (_, k) => trOf(
+      blocks[0]?.[k]?.i ?? k,
+      blocks.map((b) => {
+        const e = b[k];
+        return e ? rowHtml(e.row, e.i) : blank;
+      }).join(gapTd)
+    )
+  );
+  return { head: blocks.map(() => headCells).join(gapTh), body };
+}
+
+// src/html/parts.ts
+function checkKeys(spec, rows) {
+  const first = rows[0];
+  if (first === void 0) return;
+  const keys = new Set(Object.keys(first));
+  for (const col of spec.columns) {
+    const need = [
+      col.key,
+      ..."to" in col ? [col.to] : [],
+      ..."keys" in col ? col.keys : [],
+      ...["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))
+        throw new TableSpecError(
+          `column "${k}" (kind ${col.kind}) is not a key of the first row; keys are ${[...keys].join(", ")}`
+        );
+  }
+}
+function alignOf(col) {
+  if (col.align) return col.align;
+  switch (col.kind) {
+    case "num":
+    case "int":
+    case "pct":
+    case "rank":
+    case "delta":
+    case "tally":
+    case "colorPills":
+    case "colorRanks":
+    case "iconSet":
+      return "right";
+    case "bubble":
+    case "gauge":
+      return "center";
+    case "logo":
+    case "wordmark":
+    case "headshot":
+    case "indicatorBox":
+    case "image":
+      return "center";
+    default:
+      return "left";
+  }
+}
+function labelOf(col) {
+  return col.label ?? col.key.replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase());
+}
+function themeKey(ref) {
+  return `sdvt-t-${fnv1a32(JSON.stringify([ref.name, ref.density, Object.entries(ref.options ?? {}).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0)]))}`;
+}
+function styleSheet(spec, theme = resolveTheme(spec.theme)) {
+  const sel = `.${themeKey(spec.theme)}`;
+  return `${tokensCSS(sel, theme.tokens)}
+${BASE_CSS(sel)}
+${theme.rules(sel)}`;
+}
+function sortAria(sort, key) {
+  if (!sort || sort.col !== key) return "none";
+  return sort.dir === "asc" ? "ascending" : "descending";
+}
+function attrsText(attrs) {
+  return Object.entries(attrs).map(([k, v]) => ` ${k}="${escapeAttr(v)}"`).join("");
+}
+var styleTag = (css) => css ? `<style>${css}</style>` : "";
+function tableHTML(p) {
+  return `${styleTag(p.rules)}${p.before}<table${p.tableAttrs}>${p.caption}<thead>${p.headRows}<tr>${p.head}</tr></thead><tbody>${p.rows}</tbody>${p.foot}</table>${p.after}`;
+}
+function assemble(p, inner = tableHTML(p)) {
+  return `${p.link ? `${p.link}
+` : ""}<div${attrsText(p.wrapperAttrs)}>${styleTag(p.sheet)}${inner}</div>`;
+}
+function renderParts(input, rows, opts = {}) {
+  checkKeys(input, rows);
+  const id = tableId(input);
+  const spec = expandTiers(input);
+  const theme = resolveTheme(spec.theme);
+  if (!/^[A-Za-z][\w-]*$/.test(id))
+    throw new TableSpecError(
+      `table id ${JSON.stringify(id)} must match /^[A-Za-z][\\w-]*$/ (it becomes a CSS selector)`
+    );
+  const sel = `#${id}`;
+  const groupBy = spec.decorations.find(
+    (d) => d.type === "groupBy"
+  );
+  const engineHidden = opts.hidden ?? [];
+  const bad = engineHidden.filter((k) => !spec.columns.some((c) => c.key === k));
+  if (bad.length > 0)
+    throw new TableSpecError(
+      `hidden names no column ${bad.map((k) => JSON.stringify(k)).join(", ")}; columns are ${spec.columns.map((c) => c.key).join(", ")}`
+    );
+  const domainRows = opts.domainRows ?? rows;
+  const grid = opts.interactive === true ? opts.grid : void 0;
+  const tabRow = grid === void 0 ? -1 : Math.min(grid.row, rows.length - 1);
+  const scales = columnScales(spec, rows, warn, domainRows);
+  const ctx = {
+    spec,
+    rows,
+    domainRows,
+    theme,
+    id,
+    sel,
+    columns: spec.columns,
+    groupKey: groupBy?.key,
+    warn,
+    teamIds: teamIdsOf(spec, rows),
+    scales,
+    recorded: scales.get(spec.columns.filter(isScaled).at(-1)?.key ?? ""),
+    // none when the last one was skipped (zero rows)
+    scaled: /* @__PURE__ */ new Map()
+  };
+  const deco = applyDecorations(spec, rows, ctx);
+  const visible = spec.columns.filter((c) => !deco.hiddenColumns.has(c.key) && !engineHidden.includes(c.key));
+  const ncol = visible.length;
+  const span = Math.max(1, ncol);
+  const labels = new Map(
+    visible.map((c) => [c.key, (deco.labelText.get(c.key) ?? labelOf(c)) + deco.labelSuffix(c.key)])
+  );
+  let head = visible.map((c) => {
+    const label = `${deco.label(c, labels.get(c.key))}${c.subheader ? `<span class="sdvt-subheader">${escapeHtml(c.subheader)}</span>` : ""}`;
+    const sortable = opts.interactive === true && c.sortable !== false;
+    const dir = sortAria(opts.sort, c.key);
+    const aria = sortable && dir !== "none" ? ` aria-sort="${dir}"` : "";
+    const inner = sortable ? `<button type="button" class="sdvt-sort" data-sdv-sort="${escapeAttr(c.key)}">${label}</button>` : label;
+    const isCurrent = grid?.col === c.key;
+    const current = isCurrent ? " sdvt-col-current" : "";
+    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)])}${cellOf(c, row, i)}${deco.cellSuffix(i, c.key)}</td>`
+  ).join("");
+  const striped = theme.tokens.stripe !== "transparent";
+  let shown = 0;
+  const gridRow = (i) => grid === void 0 ? "" : ` tabindex="${i === tabRow ? 0 : -1}" aria-selected="${opts.selected?.has(i) === true}"`;
+  const trOf = (i, cells) => `<tr class="sdvt-row${striped && shown++ % 2 === 1 ? " sdvt-stripe" : ""}${deco.rowClass(i)}${opts.selected?.has(i) === true ? " sdvt-selected" : ""}" data-row="${i}"${gridRow(i)}${styleOf([deco.rowStyle(i)])}>${cells}</tr>`;
+  let body = [];
+  const snake = spec.decorations.find(
+    (d) => d.type === "snake"
+  );
+  if (snake && ctx.groupKey !== void 0) throw new TableSpecError("snake cannot be combined with groupBy");
+  if (snake && opts.interactive === true)
+    throw new TableSpecError(
+      "snake cannot be combined with an interactive table (renderHTML(table), hydrate, SdvTable); render it statically with renderHTML(spec, rows)"
+    );
+  const gap = snake && snake.gap > 0 ? `style="width:${snake.gap}px;border:none"` : "";
+  const snaked = snake ? snakeLayout(
+    snake,
+    rows,
+    head,
+    ncol,
+    cellsOf,
+    trOf,
+    gap ? `<th class="sdvt-gap" ${gap}></th>` : "",
+    gap ? `<td class="sdvt-gap" ${gap}></td>` : ""
+  ) : null;
+  if (snake && snaked) {
+    head = snaked.head;
+    body = snaked.body;
+    if (snake.cleanGaps)
+      deco.css.push(
+        `${sel} .sdvt-gap,${sel} td.sdvt-blank{border:none!important;background:transparent!important;box-shadow:none!important}`
+      );
+  } else {
+    const groups = /* @__PURE__ */ new Map();
+    if (ctx.groupKey === void 0)
+      groups.set(
+        void 0,
+        rows.map((_, i) => i)
+      );
+    else
+      rows.forEach((row, i) => {
+        const g = row[ctx.groupKey];
+        const list = groups.get(g);
+        if (list) list.push(i);
+        else groups.set(g, [i]);
+      });
+    for (const [g, idxs] of groups) {
+      if (ctx.groupKey !== void 0)
+        body.push(
+          `<tr class="sdvt-group-row${deco.groupRowClass()}"><th scope="rowgroup" colspan="${span}" class="sdvt-group">${escapeHtml(g)}</th></tr>`
+        );
+      for (const i of idxs) body.push(trOf(i, cellsOf(rows[i], i)));
+    }
+  }
+  const fonts = [...theme.fonts, ...deco.fonts];
+  const name = spec.theme.name;
+  return {
+    id,
+    link: opts.fonts === false ? "" : fontsLink(fonts),
+    // css:"none" drops only the shared theme sheet (A98, A100)
+    wrapperAttrs: {
+      class: `sdvt sdvt-theme-${name} ${themeKey(spec.theme)}`,
+      id,
+      "data-sdvt-theme": name,
+      "data-sdvt-density": spec.theme.density
+    },
+    sheet: opts.css === "none" ? "" : styleSheet(spec, theme),
+    rules: deco.css.join("\n"),
+    before: deco.before,
+    caption: deco.caption ? `<caption>${deco.caption}</caption>` : "",
+    headRows: deco.headRows,
+    head,
+    labels,
+    rows: body.join(""),
+    foot: deco.foot.length > 0 ? `<tfoot>${deco.foot.map((f) => `<tr><td colspan="${span}">${f}</td></tr>`).join("")}</tfoot>` : "",
+    after: deco.after,
+    tableAttrs: grid === void 0 ? "" : ' role="grid" aria-multiselectable="true"'
+  };
+}
+var fontsLinkFor = (spec) => renderParts(spec, []).link;
+
+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