@sportsdataverse/sdvtables 0.1.0 → 0.2.0

package/data/table_themes.json.sha256

@@ -0,0 +1 @@
+041e0790eca4a937841d19c76af2259bb791a4158ae5199cc4706276f5ea3744

package/dist/aggrid.d.ts

@@ -0,0 +1,104 @@
+import { League, Which, SeasonInput, IdSystem } from '@sportsdataverse/sdvplot';
+import { Theme, ThemeDefaultParams, ColDef, GetRowIdParams, RowClassParams, RowStyle } from 'ag-grid-community';
+import { T as TableSpec } from './spec-A88vJX5A.js';
+
+/**
+ * The AG Grid adapter (`ag-grid-community` 36, the MIT community package only): an sdvtables spec as the grid options
+ * `createGrid(el, options)` (or `<AgGridReact {...options} />`) takes. Columns keep sdvtables' number formats,
+ * alignment, px widths and sort; logo, wordmark and headshot columns draw their images through cell renderers that
+ * work in plain JavaScript and in ag-grid-react alike; team-coloured rows and cells take sdvplot's team palette with
+ * black or white text by contrast, kept through AG Grid's hover and selection; the theme's tokens become an AG Grid
+ * theme through its Theming API, from the base theme the caller passes in.
+ * Pure: AG Grid is never imported at runtime (types only), and nothing touches the DOM until AG Grid renders a cell, so
+ * the module imports on a server.
+ */
+
+/** What `gridOptions` returns: pass it to `createGrid(el, options)`, or spread it onto `<AgGridReact />`. */
+interface SdvGridOptions<Row> {
+    /** One column per spec column. */
+    columnDefs: ColDef<Row>[];
+    /** The rows, in their order. */
+    rowData: Row[];
+    /** `String(row[spec.rowKey])`, else the row's index in `rows`; checked unique and not blank when built. */
+    getRowId: (params: GetRowIdParams<Row>) => string;
+    /** A team row's fill, text colour and hover and selected shades (`teamRows`); other rows keep the theme. */
+    getRowStyle: (params: RowClassParams<Row>) => RowStyle | undefined;
+    /** The theme's density as a row height in px, tall enough for the tallest image. */
+    rowHeight: number;
+    /** The theme as AG Grid theme params over the `theme` option's base; absent without that option. */
+    theme?: Theme<ThemeDefaultParams>;
+}
+/** `gridOptions` options. */
+interface GridOptionsOptions<Row> {
+    /**
+     * The AG Grid base theme to lay the sdvtables theme over, usually `themeQuartz` from `ag-grid-community` (or
+     * `themeAlpine`, `themeBalham`). Passed in so this module never imports AG Grid. Without it, no `theme` is returned
+     * and the grid keeps its own.
+     */
+    theme?: Theme<ThemeDefaultParams>;
+    /**
+     * Fill each row with its team's colour, from the row's `key` value (an abbreviation, a name or a numeric id).
+     * The colours are sdvplot's team palette for the theme's background (3:1 against it, distinct between teams) laid
+     * over it at `alpha` (default 0.4), with black or white text, whichever reads better on the fill. A row whose team
+     * is not found keeps the theme.
+     */
+    teamRows?: {
+        key: keyof Row & string;
+        league: League;
+        /** "primary" (default) or "secondary". */
+        which?: Which;
+        /** The fill's opacity over the theme's background, 0 to 1. Default 0.4 (as the `teamColorBg` column). */
+        alpha?: number;
+        season?: SeasonInput;
+        idSystem?: IdSystem;
+    };
+}
+/**
+ * An sdvtables spec as AG Grid options: `createGrid(el, gridOptions(spec, rows, { theme: themeQuartz }))`, or
+ * `<AgGridReact {...gridOptions(spec, rows, { theme: themeQuartz })} />`.
+ *
+ * - **Columns**: one `ColDef` per spec column, with the HTML table's label, alignment and px `width`; numbers (`num`,
+ *   `int`, `pct`, `rank`, and a `scaleNote`'s divisor and label suffix) keep sdvtables' formats, filter as numbers, and
+ *   sort with sdvtables' own comparator, missing values last both ways (a blank number is missing, never 0).
+ * - **Images**: `logo`, `wordmark` and `headshot` columns draw `<img>` cells `height` px tall, in plain JavaScript and
+ *   in ag-grid-react alike. A team or player with no image keeps its text, with one warning. Team values may be
+ *   abbreviations, names or numeric ids.
+ * - **Team colours**: `teamColorBg` and `teamColorBar` columns, and whole rows with `teamRows`, take sdvplot's team
+ *   palette for the theme's background, with black or white text by contrast; a team row keeps a shade of its fill
+ *   when AG Grid hovers or selects it.
+ * - **Theme**: with `theme` (AG Grid's `themeQuartz`, say), the theme's fonts, colours, header style, rules, stripes and
+ *   colour scheme as AG Grid theme params; its density as the row height.
+ *
+ * Other column kinds (pills, bars, sparklines...) show their plain value, with one warning per kind. Synchronous: call
+ * `await prepare(spec)` (`@sportsdataverse/sdvtables/html`) first. Images and colours are worked out once, from
+ * `rows`: build the options again when the rows change. Community features only (MIT `ag-grid-community`):
+ * register `AllCommunityModule`; nothing here needs AG Grid Enterprise.
+ *
+ * @example
+ * ```ts
+ * import { AllCommunityModule, ModuleRegistry, themeQuartz } from "ag-grid-community";
+ * import { defineTable } from "@sportsdataverse/sdvtables";
+ * import { gridOptions } from "@sportsdataverse/sdvtables/aggrid";
+ * import { prepare } from "@sportsdataverse/sdvtables/html";
+ *
+ * ModuleRegistry.registerModules([AllCommunityModule]);
+ * // 2024 regular season, nflverse games
+ * const rows = [
+ *   { team: "KC", wins: 15, pf: 385, pa: 326 },
+ *   { team: "BUF", wins: 13, pf: 525, pa: 368 },
+ *   { team: "LAC", wins: 11, pf: 402, pa: 301 },
+ * ];
+ * const spec = defineTable<(typeof rows)[number]>()
+ *   .columns((c) => [c.logo("team", { league: "nfl", height: 28 }), c.int("wins"), c.int("pf"), c.int("pa")])
+ *   .theme("sdv")
+ *   .rowKey("team")
+ *   .build();
+ * await prepare(spec);
+ * const options = gridOptions(spec, rows, { theme: themeQuartz, teamRows: { key: "team", league: "nfl" } });
+ * // in the page: createGrid(document.querySelector("#grid"), options), from ag-grid-community
+ * options.columnDefs.map((c) => [c.headerName, c.cellDataType]);
+ * ```
+ */
+declare function gridOptions<Row>(spec: TableSpec<Row>, rows: readonly Row[], o?: GridOptionsOptions<Row>): SdvGridOptions<Row>;
+
+export { type GridOptionsOptions, type SdvGridOptions, gridOptions };

package/dist/aggrid.js

@@ -0,0 +1,230 @@
+import { opaque, scaleNotes, missingLast, pxWidth, formatterFor, unmapped, teamColorOf, checkHeight, headshotUrls, logoMarks, teamRowFills, rowIds, value, tint, cell, rankParts } from './chunk-WBTFIGYK.js';
+import { alignOf, labelOf, teamNameSync } from './chunk-R375P3MN.js';
+import { resolveTheme, NUMERIC_KINDS, toNumber } from './chunk-UTOVFIFT.js';
+import { onColor, hex6, mix } from '@sportsdataverse/sdvplot';
+import { teamColorPalette } from '@sportsdataverse/sdvplot/tanstack';
+
+var ROW_HEIGHT = { compact: 32, comfortable: 42, social: 52 };
+var HOVER = 0.08;
+var SELECTED = 0.16;
+var AG = {
+  fn: "gridOptions",
+  ns: "aggrid",
+  grid: "AG Grid",
+  short: "AG Grid",
+  built: "options"
+};
+var shade = (f, t) => mix(f.fill, f.ink === "#000000" ? "#ffffff" : "#000000", t);
+function rendererOf(draw) {
+  return class SdvCell {
+    gui;
+    init(p) {
+      const doc = p.eGridCell?.ownerDocument ?? document;
+      const gui = doc.createElement("span");
+      gui.style.display = "inline-flex";
+      gui.style.alignItems = "center";
+      gui.style.gap = "0.4em";
+      gui.append(draw(p, doc));
+      this.gui = gui;
+    }
+    getGui() {
+      return this.gui;
+    }
+    refresh() {
+      return false;
+    }
+  };
+}
+function image(doc, src, alt, height, id, kind) {
+  const img = doc.createElement("img");
+  img.src = src;
+  img.alt = alt;
+  img.height = height;
+  img.style.height = `${height}px`;
+  img.style.width = "auto";
+  img.dataset.sdvId = id;
+  img.dataset.sdvKind = kind;
+  return img;
+}
+function gridOptions(spec, rows, o = {}) {
+  const t = resolveTheme(spec.theme).tokens;
+  const bg = opaque(t);
+  let tallest = 0;
+  const { scaled, labelSuffix } = scaleNotes(spec);
+  const header = headerStyle(t);
+  const columnDefs = spec.columns.map((col) => {
+    const align = alignOf(col);
+    const sortBy = missingLast(col, rows);
+    const numeric = NUMERIC_KINDS.has(col.kind);
+    const def = {
+      colId: col.key,
+      field: col.key,
+      headerName: labelOf(col) + (labelSuffix.get(col.key) ?? ""),
+      // AG Grid's docs (colDef.d.ts: `isDescending` is "not to be used for inverting the return value") assume a
+      // comparator that orders ascending, which the grid then reverses (RowNodeSorter: `descending ? -result : result`).
+      // Ours is not that: withMissingLast(cmp, "desc") already orders descending AND puts missing values last, and
+      // reversing it would put them first. So it is negated here, and the grid's own negation undoes that: the final
+      // order is exactly withMissingLast's, both ways. Do not drop the negation: test/dom/aggrid.test.ts "sorting" sorts
+      // a real grid both ways and fails without it (a blank value goes first when descending).
+      comparator: (a, b, _na, _nb, desc) => {
+        const r = sortBy(desc ? "desc" : "asc")(a, b);
+        return desc ? -r : r;
+      },
+      cellStyle: { textAlign: align },
+      ...align === "right" ? { headerClass: "ag-right-aligned-header" } : {},
+      ...header === void 0 ? {} : { headerStyle: header },
+      ...col.subheader === void 0 ? {} : { headerTooltip: col.subheader },
+      ...col.sortable === void 0 ? {} : { sortable: col.sortable },
+      ...col.filterable === void 0 ? {} : { filter: col.filterable },
+      ...numeric ? {
+        cellDataType: "number",
+        // with filtering on, AG Grid gives the column its number filter
+        valueGetter: (p) => toNumber(value(p.data, col.key))
+      } : { cellDataType: false }
+    };
+    const width = pxWidth(col, AG);
+    if (width !== void 0) def.width = width;
+    const format = formatterFor(col, scaled);
+    return {
+      ...def,
+      ...format === void 0 ? {} : { valueFormatter: ({ value: v }) => format(v) },
+      ...kindProps(col, def.cellStyle)
+    };
+  });
+  function kindProps(col, base) {
+    switch (col.kind) {
+      case "text":
+      case "num":
+      case "int":
+      case "pct":
+        return {};
+      case "rank":
+        return col.superscript ? {
+          // the HTML table's superscript suffix: 1<sup>st</sup>
+          cellRenderer: rendererOf(({ value: v }, doc) => {
+            const r = rankParts(v);
+            if (r === null) return "";
+            const out = doc.createDocumentFragment();
+            const sup = doc.createElement("sup");
+            sup.style.fontSize = col.suffixSize;
+            sup.textContent = r.suffix;
+            out.append(r.num, sup);
+            return out;
+          })
+        } : {};
+      case "logo":
+      case "wordmark": {
+        const h = checkHeight(col.height, col.kind);
+        tallest = Math.max(tallest, h);
+        const marks = logoMarks(col, rows);
+        const includeName = col.kind === "logo" && col.includeName;
+        const kind = col.kind;
+        return {
+          cellRenderer: rendererOf(({ value: raw }, doc) => {
+            const text = cell(raw);
+            const m = marks.get(text);
+            if (m === void 0) return text;
+            const img = image(doc, m.url, teamNameSync(col.league, m.id) ?? text, h, m.id, kind);
+            if (!includeName) return img;
+            const both = doc.createDocumentFragment();
+            both.append(img, text);
+            return both;
+          })
+        };
+      }
+      case "headshot": {
+        const h = checkHeight(col.height, "headshot");
+        tallest = Math.max(tallest, h);
+        const urls = headshotUrls(col, rows, AG);
+        return {
+          cellRenderer: rendererOf(({ value: raw }, doc) => {
+            const text = cell(raw);
+            const url = urls.get(text);
+            return url === void 0 ? text : image(doc, url, "", h, text, "headshot");
+          })
+        };
+      }
+      case "teamColorBg":
+      case "teamColorBar": {
+        const colorOf = teamColorOf(col, rows, bg, teamColorPalette);
+        const bar = col.kind === "teamColorBar";
+        const styleOf = (raw) => {
+          const color = colorOf(raw);
+          if (bar)
+            return {
+              ...base,
+              borderLeft: `${col.barWidth}px solid ${hex6(color, { dropAlpha: true })}`
+            };
+          const f = tint(color, col.alpha, bg);
+          return { ...base, backgroundColor: f.fill, color: f.ink };
+        };
+        return { cellStyle: ({ value: raw }) => styleOf(raw) };
+      }
+      default:
+        unmapped(col.kind, AG);
+        return {};
+    }
+  }
+  const rowFill = /* @__PURE__ */ new Map();
+  if (o.teamRows)
+    for (const [v, f] of teamRowFills(rows, o.teamRows, bg, teamColorPalette))
+      rowFill.set(v, {
+        backgroundColor: f.fill,
+        color: f.ink,
+        // AG Grid's own row variables, read on this row: the filler after the last column, and the hover and
+        // selected overlays it paints over the row (opaque shades of the fill, so the ink above still reads)
+        "--ag-data-background-color": f.fill,
+        "--ag-row-hover-color": shade(f, HOVER),
+        "--ag-selected-row-background-color": shade(f, SELECTED)
+      });
+  const teamKey = o.teamRows?.key;
+  const getRowStyle = ({ data }) => teamKey === void 0 ? void 0 : rowFill.get(cell(value(data, teamKey)));
+  const idOf = rowIds(rows, spec.rowKey, AG);
+  const getRowId = ({ data }) => idOf(data);
+  const rowHeight = Math.max(ROW_HEIGHT[spec.theme.density], Math.ceil(tallest + 8));
+  return {
+    columnDefs,
+    rowData: rows.slice(),
+    getRowId,
+    getRowStyle,
+    rowHeight,
+    ...o.theme === void 0 ? {} : { theme: o.theme.withParams(themeParams(t)) }
+  };
+}
+var set = (v) => v !== "transparent" && v !== "inherit" && v !== "none" && v !== "";
+function headerStyle(t) {
+  const s = {
+    ...set(t.labelTransform) ? { textTransform: t.labelTransform } : {},
+    ...set(t.labelTracking) && t.labelTracking !== "normal" ? { letterSpacing: t.labelTracking } : {},
+    ...set(t.labelStyle) && t.labelStyle !== "normal" ? { fontStyle: t.labelStyle } : {}
+  };
+  return Object.keys(s).length === 0 ? void 0 : s;
+}
+function themeParams(t) {
+  const bg = opaque(t);
+  const head = set(t.labelBg) ? t.labelBg : bg;
+  return {
+    backgroundColor: bg,
+    foregroundColor: t.text,
+    textColor: t.text,
+    cellTextColor: t.text,
+    subtleTextColor: t.muted,
+    borderColor: t.rule,
+    ...set(t.accent) ? { accentColor: t.accent } : {},
+    headerBackgroundColor: head,
+    headerTextColor: set(t.labelColor) ? t.labelColor : t.text,
+    headerFontFamily: t.fontLabel,
+    headerFontWeight: t.labelWeight,
+    headerFontSize: t.labelSize,
+    fontFamily: t.fontBody,
+    fontSize: t.bodySize,
+    cellFontWeight: t.bodyWeight,
+    oddRowBackgroundColor: set(t.stripe) ? t.stripe : bg,
+    // dark themes get AG Grid's dark scrollbars and form controls
+    browserColorScheme: onColor(bg) === "#ffffff" ? "dark" : "light"
+  };
+}
+
+export { gridOptions };
+//# sourceMappingURL=aggrid.js.map
+//# sourceMappingURL=aggrid.js.map

package/dist/aggrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/aggrid.ts"],"names":[],"mappings":"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","file":"aggrid.js","sourcesContent":["/**\n * The AG Grid adapter (`ag-grid-community` 36, the MIT community package only): an sdvtables spec as the grid options\n * `createGrid(el, options)` (or `<AgGridReact {...options} />`) takes. Columns keep sdvtables' number formats,\n * alignment, px widths and sort; logo, wordmark and headshot columns draw their images through cell renderers that\n * work in plain JavaScript and in ag-grid-react alike; team-coloured rows and cells take sdvplot's team palette with\n * black or white text by contrast, kept through AG Grid's hover and selection; the theme's tokens become an AG Grid\n * theme through its Theming API, from the base theme the caller passes in.\n * Pure: AG Grid is never imported at runtime (types only), and nothing touches the DOM until AG Grid renders a cell, so\n * the module imports on a server.\n */\nimport {\n  type IdSystem,\n  type League,\n  type SeasonInput,\n  type Which,\n  hex6,\n  mix,\n  onColor,\n} from \"@sportsdataverse/sdvplot\";\nimport { teamColorPalette } from \"@sportsdataverse/sdvplot/tanstack\";\nimport type {\n  CellStyle,\n  ColDef,\n  GetRowIdParams,\n  HeaderStyle,\n  ICellRendererComp,\n  ICellRendererParams,\n  RowClassParams,\n  RowStyle,\n  Theme,\n  ThemeDefaultParams,\n} from \"ag-grid-community\";\nimport {\n  type Fill,\n  type GridName,\n  cell,\n  checkHeight,\n  formatterFor,\n  headshotUrls,\n  logoMarks,\n  missingLast,\n  opaque,\n  pxWidth,\n  rankParts,\n  rowIds,\n  scaleNotes,\n  teamColorOf,\n  teamRowFills,\n  tint,\n  unmapped,\n  value,\n} from \"./_grid.js\";\nimport { NUMERIC_KINDS } from \"./engine.js\";\nimport { toNumber } from \"./format.js\";\nimport { alignOf, labelOf } from \"./html/parts.js\";\nimport type { ColumnSpec, TableSpec } from \"./spec.js\";\nimport { teamNameSync } from \"./team-name.js\";\nimport { resolveTheme } from \"./themes/index.js\";\nimport type { ThemeTokens } from \"./themes/tokens.js\";\n\n/** What `gridOptions` returns: pass it to `createGrid(el, options)`, or spread it onto `<AgGridReact />`. */\nexport interface SdvGridOptions<Row> {\n  /** One column per spec column. */\n  columnDefs: ColDef<Row>[];\n  /** The rows, in their order. */\n  rowData: Row[];\n  /** `String(row[spec.rowKey])`, else the row's index in `rows`; checked unique and not blank when built. */\n  getRowId: (params: GetRowIdParams<Row>) => string;\n  /** A team row's fill, text colour and hover and selected shades (`teamRows`); other rows keep the theme. */\n  getRowStyle: (params: RowClassParams<Row>) => RowStyle | undefined;\n  /** The theme's density as a row height in px, tall enough for the tallest image. */\n  rowHeight: number;\n  /** The theme as AG Grid theme params over the `theme` option's base; absent without that option. */\n  theme?: Theme<ThemeDefaultParams>;\n}\n/** `gridOptions` options. */\nexport interface GridOptionsOptions<Row> {\n  /**\n   * The AG Grid base theme to lay the sdvtables theme over, usually `themeQuartz` from `ag-grid-community` (or\n   * `themeAlpine`, `themeBalham`). Passed in so this module never imports AG Grid. Without it, no `theme` is returned\n   * and the grid keeps its own.\n   */\n  theme?: Theme<ThemeDefaultParams>;\n  /**\n   * Fill each row with its team's colour, from the row's `key` value (an abbreviation, a name or a numeric id).\n   * The colours are sdvplot's team palette for the theme's background (3:1 against it, distinct between teams) laid\n   * over it at `alpha` (default 0.4), with black or white text, whichever reads better on the fill. A row whose team\n   * is not found keeps the theme.\n   */\n  teamRows?: {\n    key: keyof Row & string;\n    league: League;\n    /** \"primary\" (default) or \"secondary\". */\n    which?: Which;\n    /** The fill's opacity over the theme's background, 0 to 1. Default 0.4 (as the `teamColorBg` column). */\n    alpha?: number;\n    season?: SeasonInput;\n    idSystem?: IdSystem;\n  };\n}\n\n// a row height per density: compact, AG Grid Quartz's own (42), and a roomier one for social cards\nconst ROW_HEIGHT = { compact: 32, comfortable: 42, social: 52 } as const;\n// how far a team row's hover and selected shades move away from its text colour (so the text only gains contrast)\nconst HOVER = 0.08;\nconst SELECTED = 0.16;\n\nconst AG: GridName = {\n  fn: \"gridOptions\",\n  ns: \"aggrid\",\n  grid: \"AG Grid\",\n  short: \"AG Grid\",\n  built: \"options\",\n};\n/** A fill moved `t` away from its ink: lighter under black text, darker under white, so the text reads at least as well. */\nconst shade = (f: Fill, t: number): string => mix(f.fill, f.ink === \"#000000\" ? \"#ffffff\" : \"#000000\", t);\n\n/**\n * An AG Grid cell renderer class whose cell is `draw(params)`: a DOM node, or text. A class with `getGui` because\n * ag-grid-react renders a plain function as a React component; a class is a plain-JavaScript component in both.\n */\nfunction rendererOf(\n  draw: (p: ICellRendererParams, doc: Document) => Node | string,\n): new () => ICellRendererComp {\n  return class SdvCell implements ICellRendererComp {\n    private gui: HTMLElement | undefined;\n    init(p: ICellRendererParams): void {\n      const doc = p.eGridCell?.ownerDocument ?? document;\n      const gui = doc.createElement(\"span\");\n      gui.style.display = \"inline-flex\";\n      gui.style.alignItems = \"center\";\n      gui.style.gap = \"0.4em\";\n      gui.append(draw(p, doc));\n      this.gui = gui;\n    }\n    getGui(): HTMLElement {\n      return this.gui as HTMLElement;\n    }\n    refresh(): boolean {\n      return false; // AG Grid builds the cell again\n    }\n  };\n}\nfunction image(\n  doc: Document,\n  src: string,\n  alt: string,\n  height: number,\n  id: string,\n  kind: string,\n): HTMLImageElement {\n  const img = doc.createElement(\"img\");\n  img.src = src;\n  img.alt = alt;\n  img.height = height;\n  img.style.height = `${height}px`;\n  img.style.width = \"auto\";\n  img.dataset.sdvId = id;\n  img.dataset.sdvKind = kind;\n  return img;\n}\n\n/**\n * An sdvtables spec as AG Grid options: `createGrid(el, gridOptions(spec, rows, { theme: themeQuartz }))`, or\n * `<AgGridReact {...gridOptions(spec, rows, { theme: themeQuartz })} />`.\n *\n * - **Columns**: one `ColDef` per spec column, with the HTML table's label, alignment and px `width`; numbers (`num`,\n *   `int`, `pct`, `rank`, and a `scaleNote`'s divisor and label suffix) keep sdvtables' formats, filter as numbers, and\n *   sort with sdvtables' own comparator, missing values last both ways (a blank number is missing, never 0).\n * - **Images**: `logo`, `wordmark` and `headshot` columns draw `<img>` cells `height` px tall, in plain JavaScript and\n *   in ag-grid-react alike. A team or player with no image keeps its text, with one warning. Team values may be\n *   abbreviations, names or numeric ids.\n * - **Team colours**: `teamColorBg` and `teamColorBar` columns, and whole rows with `teamRows`, take sdvplot's team\n *   palette for the theme's background, with black or white text by contrast; a team row keeps a shade of its fill\n *   when AG Grid hovers or selects it.\n * - **Theme**: with `theme` (AG Grid's `themeQuartz`, say), the theme's fonts, colours, header style, rules, stripes and\n *   colour scheme as AG Grid theme params; its density as the row height.\n *\n * Other column kinds (pills, bars, sparklines...) show their plain value, with one warning per kind. Synchronous: call\n * `await prepare(spec)` (`@sportsdataverse/sdvtables/html`) first. Images and colours are worked out once, from\n * `rows`: build the options again when the rows change. Community features only (MIT `ag-grid-community`):\n * register `AllCommunityModule`; nothing here needs AG Grid Enterprise.\n *\n * @example\n * ```ts\n * import { AllCommunityModule, ModuleRegistry, themeQuartz } from \"ag-grid-community\";\n * import { defineTable } from \"@sportsdataverse/sdvtables\";\n * import { gridOptions } from \"@sportsdataverse/sdvtables/aggrid\";\n * import { prepare } from \"@sportsdataverse/sdvtables/html\";\n *\n * ModuleRegistry.registerModules([AllCommunityModule]);\n * // 2024 regular season, nflverse games\n * const rows = [\n *   { team: \"KC\", wins: 15, pf: 385, pa: 326 },\n *   { team: \"BUF\", wins: 13, pf: 525, pa: 368 },\n *   { team: \"LAC\", wins: 11, pf: 402, pa: 301 },\n * ];\n * const spec = defineTable<(typeof rows)[number]>()\n *   .columns((c) => [c.logo(\"team\", { league: \"nfl\", height: 28 }), c.int(\"wins\"), c.int(\"pf\"), c.int(\"pa\")])\n *   .theme(\"sdv\")\n *   .rowKey(\"team\")\n *   .build();\n * await prepare(spec);\n * const options = gridOptions(spec, rows, { theme: themeQuartz, teamRows: { key: \"team\", league: \"nfl\" } });\n * // in the page: createGrid(document.querySelector(\"#grid\"), options), from ag-grid-community\n * options.columnDefs.map((c) => [c.headerName, c.cellDataType]);\n * ```\n */\nexport function gridOptions<Row>(\n  spec: TableSpec<Row>,\n  rows: readonly Row[],\n  o: GridOptionsOptions<Row> = {},\n): SdvGridOptions<Row> {\n  const t = resolveTheme(spec.theme).tokens;\n  const bg = opaque(t);\n  let tallest = 0;\n  const { scaled, labelSuffix } = scaleNotes(spec);\n  const header = headerStyle(t);\n\n  const columnDefs = spec.columns.map((col): ColDef<Row> => {\n    const align = alignOf(col);\n    const sortBy = missingLast(col, rows);\n    const numeric = NUMERIC_KINDS.has(col.kind);\n    const def: ColDef<Row> = {\n      colId: col.key,\n      field: col.key as unknown as NonNullable<ColDef<Row>[\"field\"]>,\n      headerName: labelOf(col) + (labelSuffix.get(col.key) ?? \"\"),\n      // AG Grid's docs (colDef.d.ts: `isDescending` is \"not to be used for inverting the return value\") assume a\n      // comparator that orders ascending, which the grid then reverses (RowNodeSorter: `descending ? -result : result`).\n      // Ours is not that: withMissingLast(cmp, \"desc\") already orders descending AND puts missing values last, and\n      // reversing it would put them first. So it is negated here, and the grid's own negation undoes that: the final\n      // order is exactly withMissingLast's, both ways. Do not drop the negation: test/dom/aggrid.test.ts \"sorting\" sorts\n      // a real grid both ways and fails without it (a blank value goes first when descending).\n      comparator: (a, b, _na, _nb, desc) => {\n        const r = sortBy(desc ? \"desc\" : \"asc\")(a, b);\n        return desc ? -r : r;\n      },\n      cellStyle: { textAlign: align },\n      ...(align === \"right\" ? { headerClass: \"ag-right-aligned-header\" } : {}),\n      ...(header === undefined ? {} : { headerStyle: header }),\n      ...(col.subheader === undefined ? {} : { headerTooltip: col.subheader }),\n      ...(col.sortable === undefined ? {} : { sortable: col.sortable }),\n      ...(col.filterable === undefined ? {} : { filter: col.filterable }),\n      ...(numeric\n        ? {\n            cellDataType: \"number\", // with filtering on, AG Grid gives the column its number filter\n            valueGetter: (p) => toNumber(value(p.data, col.key)),\n          }\n        : { cellDataType: false }),\n    };\n    const width = pxWidth(col, AG);\n    if (width !== undefined) def.width = width;\n    const format = formatterFor(col, scaled);\n    return {\n      ...def,\n      ...(format === undefined ? {} : { valueFormatter: ({ value: v }) => format(v) }),\n      ...kindProps(col, def.cellStyle as CellStyle),\n    };\n  });\n\n  function kindProps(col: ColumnSpec<Row>, base: CellStyle): Partial<ColDef<Row>> {\n    switch (col.kind) {\n      case \"text\":\n      case \"num\":\n      case \"int\":\n      case \"pct\":\n        return {};\n      case \"rank\":\n        return col.superscript\n          ? {\n              // the HTML table's superscript suffix: 1<sup>st</sup>\n              cellRenderer: rendererOf(({ value: v }, doc) => {\n                const r = rankParts(v);\n                if (r === null) return \"\";\n                const out = doc.createDocumentFragment();\n                const sup = doc.createElement(\"sup\");\n                sup.style.fontSize = col.suffixSize;\n                sup.textContent = r.suffix;\n                out.append(r.num, sup);\n                return out;\n              }),\n            }\n          : {};\n      case \"logo\":\n      case \"wordmark\": {\n        const h = checkHeight(col.height, col.kind);\n        tallest = Math.max(tallest, h);\n        const marks = logoMarks(col, rows);\n        const includeName = col.kind === \"logo\" && col.includeName;\n        const kind = col.kind;\n        return {\n          cellRenderer: rendererOf(({ value: raw }, doc) => {\n            const text = cell(raw);\n            const m = marks.get(text);\n            if (m === undefined) return text; // blank, unknown team or no image: the text, as the HTML table keeps it\n            const img = image(doc, m.url, teamNameSync(col.league, m.id) ?? text, h, m.id, kind);\n            if (!includeName) return img;\n            const both = doc.createDocumentFragment();\n            both.append(img, text);\n            return both;\n          }),\n        };\n      }\n      case \"headshot\": {\n        const h = checkHeight(col.height, \"headshot\");\n        tallest = Math.max(tallest, h);\n        const urls = headshotUrls(col, rows, AG);\n        return {\n          cellRenderer: rendererOf(({ value: raw }, doc) => {\n            const text = cell(raw);\n            const url = urls.get(text);\n            // decorative: the spec gives a headshot no name, and the player's name sits in its row\n            return url === undefined ? text : image(doc, url, \"\", h, text, \"headshot\");\n          }),\n        };\n      }\n      case \"teamColorBg\":\n      case \"teamColorBar\": {\n        const colorOf = teamColorOf(col, rows, bg, teamColorPalette);\n        const bar = col.kind === \"teamColorBar\";\n        const styleOf = (raw: unknown): CellStyle => {\n          const color = colorOf(raw);\n          if (bar)\n            return {\n              ...base,\n              borderLeft: `${col.barWidth}px solid ${hex6(color, { dropAlpha: true })}`,\n            };\n          const f = tint(color, col.alpha, bg);\n          return { ...base, backgroundColor: f.fill, color: f.ink };\n        };\n        return { cellStyle: ({ value: raw }) => styleOf(raw) };\n      }\n      default:\n        unmapped(col.kind, AG);\n        return {};\n    }\n  }\n\n  // team rows: each team value's fill, ink and hover / selected shades, worked out once\n  const rowFill = new Map<string, RowStyle>();\n  if (o.teamRows)\n    for (const [v, f] of teamRowFills(rows, o.teamRows, bg, teamColorPalette))\n      rowFill.set(v, {\n        backgroundColor: f.fill,\n        color: f.ink,\n        // AG Grid's own row variables, read on this row: the filler after the last column, and the hover and\n        // selected overlays it paints over the row (opaque shades of the fill, so the ink above still reads)\n        \"--ag-data-background-color\": f.fill,\n        \"--ag-row-hover-color\": shade(f, HOVER),\n        \"--ag-selected-row-background-color\": shade(f, SELECTED),\n      } as RowStyle);\n  const teamKey = o.teamRows?.key;\n  const getRowStyle = ({ data }: RowClassParams<Row>): RowStyle | undefined =>\n    teamKey === undefined ? undefined : rowFill.get(cell(value(data, teamKey)));\n\n  // every row's id, checked once: a repeat would give AG Grid one id twice, and it would drop a row\n  const idOf = rowIds(rows, spec.rowKey, AG);\n  const getRowId = ({ data }: GetRowIdParams<Row>): string => idOf(data);\n\n  const rowHeight = Math.max(ROW_HEIGHT[spec.theme.density], Math.ceil(tallest + 8));\n  return {\n    columnDefs,\n    rowData: rows.slice(),\n    getRowId,\n    getRowStyle,\n    rowHeight,\n    ...(o.theme === undefined ? {} : { theme: o.theme.withParams(themeParams(t)) }),\n  };\n}\n\nconst set = (v: string): boolean => v !== \"transparent\" && v !== \"inherit\" && v !== \"none\" && v !== \"\";\n\n/** The header text style AG Grid has no theme param for: case, tracking and italics. */\nfunction headerStyle(t: ThemeTokens): HeaderStyle | undefined {\n  const s: HeaderStyle = {\n    ...(set(t.labelTransform) ? { textTransform: t.labelTransform } : {}),\n    ...(set(t.labelTracking) && t.labelTracking !== \"normal\" ? { letterSpacing: t.labelTracking } : {}),\n    ...(set(t.labelStyle) && t.labelStyle !== \"normal\" ? { fontStyle: t.labelStyle } : {}),\n  };\n  return Object.keys(s).length === 0 ? undefined : s;\n}\n\n/** The theme's tokens as AG Grid theme params (Theming API), for `base.withParams(...)`. */\nfunction themeParams(t: ThemeTokens): Partial<ThemeDefaultParams> {\n  const bg = opaque(t);\n  const head = set(t.labelBg) ? t.labelBg : bg;\n  return {\n    backgroundColor: bg,\n    foregroundColor: t.text,\n    textColor: t.text,\n    cellTextColor: t.text,\n    subtleTextColor: t.muted,\n    borderColor: t.rule,\n    ...(set(t.accent) ? { accentColor: t.accent } : {}),\n    headerBackgroundColor: head,\n    headerTextColor: set(t.labelColor) ? t.labelColor : t.text,\n    headerFontFamily: t.fontLabel,\n    headerFontWeight: t.labelWeight as ThemeDefaultParams[\"headerFontWeight\"],\n    headerFontSize: t.labelSize,\n    fontFamily: t.fontBody,\n    fontSize: t.bodySize,\n    cellFontWeight: t.bodyWeight as ThemeDefaultParams[\"cellFontWeight\"],\n    oddRowBackgroundColor: set(t.stripe) ? t.stripe : bg,\n    // dark themes get AG Grid's dark scrollbars and form controls\n    browserColorScheme: onColor(bg) === \"#ffffff\" ? \"dark\" : \"light\",\n  };\n}\n"]}

package/dist/chunk-3TJR7TKS.js

@@ -0,0 +1,223 @@
+import { tableId, escapeHtml, escapeAttr, renderParts, assemble, tableHTML } from './chunk-R375P3MN.js';
+import { nextSortDir } from './chunk-UTOVFIFT.js';
+
+// 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, captureFocus, filterInputs, handleClick, handleHover, handleInput, handleKeydown, keyAction, pagerLabel, renderInteractive, renderPager, renderToolbar, rowIdAt, tableRenderOptions };
+//# sourceMappingURL=chunk-3TJR7TKS.js.map
+//# sourceMappingURL=chunk-3TJR7TKS.js.map