@sportsdataverse/sdvtables 0.0.0-stage → 0.1.0

package/dist/chunk-UCRLJGDL.js

@@ -0,0 +1,1628 @@
+import { resolveTheme, TableSpecError, nextSortDir, TOKEN_KEYS, toNumber, isBlank, secondaryOn, naturalDigits, RANK_PALETTE, formatValue, fontStack, formatNumber, selectRows, snakeAlign, matches, ordinal } from './chunk-4VKYHOHL.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]/;
+var isCssValue = (v) => !CSS_UNSAFE.test(String(v));
+function cssValue(v, field) {
+  const s = String(v);
+  if (CSS_UNSAFE.test(s))
+    throw new TableSpecError(
+      `${field} ${JSON.stringify(s)} is not a CSS value: it may not contain ; { } < > " \\ or a line break`
+    );
+  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/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]) {
+  const k = palette.length - 1;
+  return (v) => {
+    if (!(lo <= v && v <= hi)) return null;
+    if (k === 0) return palette[0] ?? null;
+    const t = hi === lo ? 0.5 : (v - lo) / (hi - lo);
+    const i = Math.min(Math.floor(t * k), k - 1);
+    return mix(palette[i], palette[i + 1], t * k - i);
+  };
+}
+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/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) {
+    if (c.kind !== "logo" && c.kind !== "wordmark" && c.kind !== "mergeStackTeamColor" && c.kind !== "teamColorBar" && c.kind !== "teamColorBg")
+      continue;
+    const from = c.kind === "mergeStackTeamColor" ? c.team : c.key;
+    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 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;
+    if (col.kind === "colorPills" && col.fillType === "rank") {
+      values = averageRanks(nums, col.rankOrder === "desc");
+      own = () => null;
+    }
+    if (col.kind === "percentileBar") {
+      const present = nums.filter((n) => n !== null);
+      const [lo, hi] = col.domain;
+      const scale = col.scale;
+      const proportion = scale === "auto" && present.length > 0 && present.every((n) => n >= 0 && n <= 1) && hi > 1;
+      own = (n) => n === null ? null : typeof scale === "number" ? n * scale : proportion ? lo + n * (hi - lo) : n;
+      values = nums.map(own);
+    }
+    const domain = col.domain ?? domainOf([values]);
+    const 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 color = ramp(col.reverse ? [...palette].reverse() : palette, domain);
+    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(formatNumber(n / sc.divisor, { digits: sc.decimals, big: true }));
+      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 = 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")
+      );
+    }
+    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 fill = (s === null ? null : sc?.color(s)) ?? "#ffffff";
+      return styleAttr({ "background-color": fill, color: onColor(solid(fill, tableBg(ctx))) });
+    }
+    case "highlight":
+      return matches(col.when, row) ? styleAttr({
+        "background-color": col.fill,
+        color: col.textColor,
+        "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/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/svg.ts
+var halfEven = (x) => {
+  const r = Math.round(x);
+  return String(Math.abs(x % 1) === 0.5 && r % 2 !== 0 ? r - 1 : r);
+};
+function cutlineSvg(text, color, size) {
+  const t = text.toUpperCase();
+  const tracking = 1.1;
+  const esc = t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${halfEven(t.length * (size * 0.8 + tracking) + 4)}" height="${halfEven(size + 4)}"><text x="0" y="${(size + 0.5).toFixed(1)}" font-family="Helvetica,Arial,sans-serif" font-size="${size}" font-weight="700" letter-spacing="${tracking}" fill="${color}">${esc}</text></svg>`;
+  return `data:image/svg+xml;charset=utf-8,${pyQuote(svg)}`;
+}
+var pyQuote = (x) => encodeURIComponent(x).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+function watermarkSvg(text, color, opacity, angle, font) {
+  const label = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const size = 100;
+  const textW = Math.max(label.length * size * 0.62, size);
+  const textH = size * 1.3;
+  const rad = Math.abs(angle) * Math.PI / 180;
+  const w = Math.ceil(textW * Math.cos(rad) + textH * Math.sin(rad)) + 4;
+  const h = Math.ceil(textW * Math.sin(rad) + textH * Math.cos(rad)) + 4;
+  const rot = angle !== 0 ? ` transform="rotate(${angle} ${w / 2} ${h / 2})"` : "";
+  const attr = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}"><text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="${attr(font)}" font-size="${size}" font-weight="700" fill="${attr(color)}" fill-opacity="${opacity}"${rot}>${label}</text></svg>`;
+  return [`data:image/svg+xml,${pyQuote(svg)}`, h > w];
+}
+var cssStr = (v) => v.replace(/[\\"\n\r<]/g, (c) => `\\${c.charCodeAt(0).toString(16)} `);
+
+// src/html/decorations.ts
+function strwrap(words, width) {
+  const w = Math.max(width - 1, 1);
+  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 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": {
+        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");
+        for (const k of d.columns) ctx.scaled.set(k, { divisor: d.divisor, decimals: d.decimals });
+        const named = SCALE_NAMES[d.divisor];
+        const shown = Number.isInteger(d.divisor) ? formatNumber(d.divisor, { digits: 0, big: true }) : naturalDigits(d.divisor, true);
+        const note = d.note ?? (named ? `Figures in ${named[0]}.` : `Figures divided by ${shown}.`);
+        const suffix = d.labelSuffix ?? (named ? named[1] : `(\xF7${shown})`);
+        if (d.where !== "label") out.foot.push(escapeHtml(note));
+        if (d.where !== "sourceNote") {
+          const prev = out.labelSuffix;
+          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 "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" in col ? [col.stack, col.team] : []
+    ];
+    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":
+      return "right";
+    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 cellsOf = (row, i) => visible.map(
+    (c) => `<td class="sdvt-cell sdvt-kind-${escapeAttr(c.kind)} sdvt-${escapeAttr(alignOf(c))}" data-col="${escapeAttr(c.key)}"${styleOf([kindCellStyle(c, row, i, ctx), deco.cellStyle(i, c.key)])}>${renderCell(c, row, i, ctx)}${deco.cellSuffix(i, c.key)}</td>`
+  ).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;
+
+// src/html/interactive.ts
+function tableRenderOptions(table) {
+  const sel = table.getSelection();
+  return {
+    interactive: true,
+    sort: table.state.sort,
+    hidden: table.state.hidden,
+    selected: new Set(table.rows.flatMap((r, i) => sel.has(table.rowId(r)) ? [i] : [])),
+    // A49: always the full source rows, so colours, legends, outlier limits and row-accent palettes hold still
+    // while the user pages, types, sorts or brushes, and index row selectors mean source rows
+    domainRows: table.allRows,
+    // Task 10 (A48): a selectable grid whose one tab stop is the cursor row
+    grid: table.state.cursor
+  };
+}
+function pagerLabel(table) {
+  return `Page ${table.state.page + 1} of ${table.pageCount}`;
+}
+function filterInputs(table, labels) {
+  return table.columns.flatMap((c) => {
+    const label = labels.get(c.key);
+    const f = table.state.filters[c.key];
+    return c.filterable === true && label !== void 0 ? [{ key: c.key, label, value: typeof f === "string" ? f : "" }] : [];
+  });
+}
+var SR_ONLY = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0";
+var searchInput = (id, label, placeholder, cls, data, value) => `<label for="${escapeAttr(id)}" style="${SR_ONLY}">${label}</label><input type="search" id="${escapeAttr(id)}" class="${cls}" ${data} placeholder="${placeholder}" value="${escapeAttr(value)}"/>`;
+function renderToolbar(table, labels = renderParts(table.spec, table.rows, tableRenderOptions(table)).labels) {
+  const id = tableId(table.spec);
+  const global = searchInput(
+    `${id}-search`,
+    "Search all columns",
+    "Search",
+    "sdvt-global-filter",
+    'data-sdv-global-filter=""',
+    table.state.globalFilter
+  );
+  const perColumn = filterInputs(table, labels).map((f, j) => {
+    const label = `Filter ${escapeHtml(f.label)}`;
+    return searchInput(
+      `${id}-filter-${j}`,
+      label,
+      label,
+      "sdvt-filter",
+      `data-sdv-filter="${escapeAttr(f.key)}"`,
+      f.value
+    );
+  }).join("");
+  return `<div class="sdvt-toolbar">${global}${perColumn}</div>`;
+}
+function renderPager(table) {
+  const prev = table.state.page === 0 ? ' aria-disabled="true"' : "";
+  const next = table.state.page >= table.pageCount - 1 ? ' aria-disabled="true"' : "";
+  return `<nav class="sdvt-pager" data-sdv-pager="" aria-label="Pagination"><button type="button" class="sdvt-page" data-sdv-page="prev" aria-label="Previous page"${prev}>\u2039</button><span class="sdvt-page-label" data-sdv-page-label="" aria-live="polite">${pagerLabel(table)}</span><button type="button" class="sdvt-page" data-sdv-page="next" aria-label="Next page"${next}>\u203A</button></nav>`;
+}
+function renderInteractive(table, opts = {}) {
+  const p = renderParts(table.spec, table.rows, { ...opts, ...tableRenderOptions(table) });
+  const pager = table.state.pageSize === Number.POSITIVE_INFINITY ? "" : renderPager(table);
+  return assemble(
+    p,
+    `${renderToolbar(table, p.labels)}<div class="sdvt-body" data-sdv-body="">${tableHTML(p)}</div>${pager}`
+  );
+}
+
+// src/html/controls.ts
+var BODY_ROW = "[data-sdv-body] tr.sdvt-row[data-row]";
+function rowIdAt(table, target) {
+  const tr = target instanceof Element ? target.closest(BODY_ROW) : null;
+  const row = tr === null ? void 0 : table.rows[Number(tr.getAttribute("data-row"))];
+  const id = row === void 0 ? "" : table.rowId(row);
+  return id === "" ? null : id;
+}
+function applyHover(root, table, id) {
+  for (const tr of Array.from(root.querySelectorAll(BODY_ROW))) {
+    const row = id === null ? void 0 : table.rows[Number(tr.getAttribute("data-row"))];
+    tr.classList.toggle("sdvt-hover", row !== void 0 && table.rowId(row) === id);
+  }
+}
+function handleClick(table, target) {
+  const el = target instanceof Element ? target.closest("[data-sdv-sort],[data-sdv-page]") : null;
+  if (!el) {
+    const id = rowIdAt(table, target);
+    if (id === null) return;
+    const next = new Set(table.getSelection());
+    if (!next.delete(id)) next.add(id);
+    table.setSelection(next);
+    return;
+  }
+  if (el.getAttribute("aria-disabled") === "true") return;
+  const sortCol = el.getAttribute("data-sdv-sort");
+  const page = el.getAttribute("data-sdv-page");
+  if (sortCol !== null) table.setSort(sortCol, nextSortDir(table.state.sort, sortCol));
+  else if (page === "prev") table.setPage(table.state.page - 1);
+  else if (page === "next") table.setPage(table.state.page + 1);
+}
+function handleInput(table, target) {
+  if (!(target instanceof HTMLInputElement)) return;
+  const col = target.getAttribute("data-sdv-filter");
+  if (col !== null) table.setFilter(col, target.value === "" ? null : target.value);
+  else if (target.hasAttribute("data-sdv-global-filter")) table.setGlobalFilter(target.value);
+}
+function handleHover(table, target) {
+  table.setHover(rowIdAt(table, target));
+}
+var CONTROLS = ["data-sdv-sort", "data-sdv-filter", "data-sdv-global-filter", "data-sdv-page"];
+var FOCUSABLE = "a[href],button,input,select,textarea,[tabindex]";
+function captureFocus(el) {
+  const root = el.getRootNode();
+  const focused = root.activeElement ?? el.ownerDocument.activeElement;
+  if (focused === null || !el.contains(focused)) return () => {
+  };
+  const name = CONTROLS.find((a) => focused.hasAttribute(a));
+  const value = name === void 0 ? null : focused.getAttribute(name);
+  const caret = focused instanceof HTMLInputElement ? { start: focused.selectionStart, end: focused.selectionEnd } : void 0;
+  const td = name === void 0 ? focused.closest("[data-sdv-body] tr[data-row] td[data-col]") : null;
+  const cellAt = td ? {
+    row: td.parentElement?.getAttribute("data-row"),
+    col: td.getAttribute("data-col"),
+    n: Array.from(td.querySelectorAll(FOCUSABLE)).indexOf(focused)
+  } : void 0;
+  const row = name === void 0 && focused.matches(BODY_ROW) ? focused.getAttribute("data-row") : null;
+  return () => {
+    if (el.contains(focused)) return;
+    if (name !== void 0) {
+      const next = Array.from(el.querySelectorAll(`[${name}]`)).find(
+        (n) => n.getAttribute(name) === value
+      );
+      next?.focus();
+      if (next instanceof HTMLInputElement && caret?.start != null && caret.end != null)
+        next.setSelectionRange(caret.start, caret.end);
+    } else if (row !== null) {
+      Array.from(el.querySelectorAll(BODY_ROW)).find((r) => r.getAttribute("data-row") === row)?.focus();
+    } else if (cellAt && cellAt.n >= 0) {
+      const tds = Array.from(el.querySelectorAll("[data-sdv-body] tr[data-row]")).find((r) => r.getAttribute("data-row") === cellAt.row)?.querySelectorAll("td[data-col]");
+      const cell = Array.from(tds ?? []).find((c) => c.getAttribute("data-col") === cellAt.col);
+      cell?.querySelectorAll(FOCUSABLE)[cellAt.n]?.focus();
+    }
+  };
+}
+var KEYS = /* @__PURE__ */ new Map([
+  ["j", "down"],
+  ["k", "up"],
+  ["h", "left"],
+  ["l", "right"],
+  ["s", "sort"],
+  ["/", "search"],
+  ["ArrowDown", "down"],
+  ["ArrowUp", "up"],
+  ["ArrowLeft", "left"],
+  ["ArrowRight", "right"],
+  ["Enter", "toggle"],
+  [" ", "toggle"]
+]);
+var LETTERS = /* @__PURE__ */ new Set(["j", "k", "h", "l", "s", "/"]);
+var clamp = (i, n) => Math.max(0, Math.min(i, n - 1));
+function keyAction(key, k) {
+  const what = KEYS.get(key);
+  if (what === void 0 || !k.hotkeys && LETTERS.has(key)) return null;
+  const shown = (c) => c !== null && k.cols.includes(c);
+  const col = shown(k.cursor.col) ? k.cursor.col : shown(k.sorted) ? k.sorted : k.cols[0] ?? null;
+  const row = k.focused ?? k.cursor.row;
+  switch (what) {
+    case "down":
+    case "up": {
+      const at = k.order.indexOf(row);
+      if (at < 0) return null;
+      const next = k.focused === null ? row : k.order[clamp(at + (what === "down" ? 1 : -1), k.order.length)];
+      return next === void 0 ? null : { type: "cursor", row: next, col: k.cursor.col };
+    }
+    case "left":
+    case "right": {
+      if (k.focused !== null && !k.onRow) return null;
+      const step = what === "right" ? 1 : -1;
+      const next = col === null ? void 0 : k.cols[clamp(k.cols.indexOf(col) + step, k.cols.length)];
+      return next === void 0 ? null : { type: "cursor", row, col: next };
+    }
+    case "sort":
+      return col === null ? null : { type: "sort", col };
+    case "search":
+      return { type: "search" };
+    case "toggle":
+      return k.onRow && k.focused !== null ? { type: "toggle", row: k.focused } : null;
+  }
+}
+var TEXT_FIELD = 'input,textarea,select,[contenteditable]:not([contenteditable="false"])';
+function handleKeydown(table, root, e) {
+  const t = e.target;
+  if (e.defaultPrevented || e.isComposing || e.ctrlKey || e.metaKey || e.altKey) return;
+  if (!(t instanceof Element) || t.closest(TEXT_FIELD) !== null) return;
+  const rows = Array.from(root.querySelectorAll(BODY_ROW));
+  const sorts = Array.from(root.querySelectorAll("[data-sdv-body] [data-sdv-sort]"));
+  const near = t.closest(BODY_ROW);
+  const rowEl = near !== null && root.contains(near) ? near : null;
+  const s = table.state;
+  const action = keyAction(e.key, {
+    focused: rowEl === null ? null : Number(rowEl.getAttribute("data-row")),
+    onRow: rowEl === t,
+    cursor: s.cursor,
+    sorted: s.sort?.col ?? null,
+    cols: sorts.map((b) => b.getAttribute("data-sdv-sort") ?? ""),
+    order: rows.map((r) => Number(r.getAttribute("data-row"))),
+    hotkeys: table.spec.interactive?.hotkeys !== false
+  });
+  const box = action?.type === "search" ? root.querySelector("[data-sdv-global-filter]") : null;
+  if (action === null || action.type === "search" && box === null) return;
+  e.preventDefault();
+  if (action.type === "search") box?.focus();
+  else if (action.type === "sort")
+    handleClick(table, sorts.find((b) => b.getAttribute("data-sdv-sort") === action.col) ?? null);
+  else if (action.type === "toggle") {
+    if (!e.repeat) handleClick(table, rowEl);
+  } else {
+    rows.find((r) => r.getAttribute("data-row") === String(action.row))?.focus();
+    table.setCursor(action.row, action.col);
+  }
+}
+
+export { SR_ONLY, applyHover, assemble, attrsText, captureFocus, escapeAttr, escapeHtml, filterInputs, fontsLink, fontsLinkFor, handleClick, handleHover, handleInput, handleKeydown, keyAction, labelOf, loadTeamNames, pagerLabel, renderInteractive, renderPager, renderParts, renderToolbar, rowIdAt, sortAria, styleSheet, tableHTML, tableRenderOptions, themeKey };
+//# sourceMappingURL=chunk-UCRLJGDL.js.map
+//# sourceMappingURL=chunk-UCRLJGDL.js.map