@johnmorrisdotca/taisen-brackets 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -6,6 +6,27 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.14.0] - 2026-10-20
+
+A medal table for any sport.
+
+### Added
+
+- **`medalTable({ title?, subtitle?, date?, source?, rows }, options)`**: a medal table as an SVG for any sport and event. A row is `{ name, flag?, mark?, code?, gold?, silver?, bronze?, note? }`: rank, flag (or a badge with the code or the initials, for a country or team with no flag, such as a former country), name with an optional line under it (the years it existed), the gold, silver and bronze counts in tinted cells under a disc for each, and the total. `sort: "gold"` ranks as the Olympic Games do (gold, silver, bronze), `"total"` by the number of medals, `"given"` keeps the order; equal rows share a rank (5, 5, 7) unless `ties: false`; `rankStyle: "hash"`; the first three ranks have a gold, silver and bronze bar (`highlight`). `top`, `skipEmpty`, `rows` and `page` choose the rows (the header says which are shown); `columns: 2`, by default on a wide board with more than ten rows. `describeMedalTable`, `medalRanks(rows, options)`.
+- **`tallyMedals(awards, filter?)`**: adds up a list of medals (`{ name, medal, sport?, category?, games?, flag?, mark?, code?, note? }`) into rows, filtered to one sport, one weight class or age group or one Games (or a list of each), so that one list gives the table of an event, of a sport and of all time.
+- Words in the five languages: the heading, the letters over the medal columns, the total and a row in a sentence (the French and Japanese were read by native-language reviewers; the Spanish and German were not).
+- The demo has a Medal table section with made-up medals of seven Games, two sports and five weight classes, the filters, the ranking rule, the number of rows, size and look in the address. [docs/medals.md](docs/medals.md).
+
+## [0.13.0] - 2026-10-20
+
+Rankings, step 3: the head-to-head card.
+
+### Added
+
+- **`rankingMatchup({ title?, category?, date?, source?, a, b, meetings? }, options)`**: the card for the contest about to be fought, for beside a bracket: the two athletes side by side (flag, name, club, ranking and points), a VS between them, and under them their previous meetings (date, event and round, who won, the result) with the record. Each athlete has a colour (`--rk-side-a`, `--rk-side-b`) that marks the panel and the winner of each meeting. `winner` is `0`, `1` or `null` (a draw: a dash); the date is written the language's way; `rows` cuts the list and the rest are counted (`+2 more`); with no meetings the card says so. `describeMatchup`, `matchupRecord(meetings)`.
+- Words for the card in the five languages (the French and Japanese were read by native-language reviewers; the Spanish and German were not).
+- The demo's Rankings section has it (`kview=matchup`), with the meetings on or off. [docs/rankings.md](docs/rankings.md).
+
 ## [0.12.0] - 2026-10-20
 
 Rankings, step 2: the number ones and the entry list.

package/README.md

@@ -11,7 +11,7 @@ Give it the games, series, two-legged ties or replays of a tournament and it wor
   <img alt="TypeScript" src="https://img.shields.io/badge/types-TypeScript-3178c6">
 </p>
 
-<p align="center"><a href="https://johnmorrisdotca.github.io/taisen-brackets/"><strong>Open the demo →</strong></a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/layouts.md">Layouts</a> · <a href="./docs/drawing.md">Drawing</a> · <a href="./docs/road.md">Road to the final</a> · <a href="./docs/backgrounds.md">Backgrounds</a> · <a href="./docs/judo.md">Judo</a> · <a href="./docs/rankings.md">Rankings</a> · <a href="./docs/formats.md">Formats</a> · <a href="./docs/compare.md">How it compares</a></p>
+<p align="center"><a href="https://johnmorrisdotca.github.io/taisen-brackets/"><strong>Open the demo →</strong></a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/layouts.md">Layouts</a> · <a href="./docs/drawing.md">Drawing</a> · <a href="./docs/road.md">Road to the final</a> · <a href="./docs/backgrounds.md">Backgrounds</a> · <a href="./docs/judo.md">Judo</a> · <a href="./docs/rankings.md">Rankings</a> · <a href="./docs/medals.md">Medal table</a> · <a href="./docs/formats.md">Formats</a> · <a href="./docs/compare.md">How it compares</a></p>
 
 <p align="center">
 <picture>
@@ -249,13 +249,21 @@ A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as
 
 ## Rankings
 
-`rankingList` draws a ranking for any ranked sport from your own data (a province's or a club's feed, a federation's list), text first, with no photo slot to leave empty: the rank, a flag (a country's or a Canadian province's, `CA-BC`), the name, the club and the points, with the movement since the last list as arrows or row colours. The top three can be big gold, silver and bronze rows above a compact list, a champion row is marked `C`, tied ranks share a number (`10`, `10`), a newly ranked athlete is `NR`, and points are written to the sport's own precision (`91.60`). `rankingNumberOnes` draws the number one of each category as a card (`#1 in -57 kg`), and `rankingEntryList` an event's entry list in the order of the draw with each athlete's ranking beside the name. `rankingRanks` and `rankingCategoryLabel` are helpers, `describeRanking`, `describeNumberOnes` and `describeEntryList` the descriptions, `NUMBER_ONE_COLORS` the card colours and `BOARD_SIZES` the sizes of every board (a TV, a tablet, a phone, and a square and a 4:5 card for social media). [docs/rankings.md](./docs/rankings.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#rankings)
+`rankingList` draws a ranking for any ranked sport from your own data (a province's or a club's feed, a federation's list), text first, with no photo slot to leave empty: the rank, a flag (a country's or a Canadian province's, `CA-BC`), the name, the club and the points, with the movement since the last list as arrows or row colours. The top three can be big gold, silver and bronze rows above a compact list, a champion row is marked `C`, tied ranks share a number (`10`, `10`), a newly ranked athlete is `NR`, and points are written to the sport's own precision (`91.60`). `rankingNumberOnes` draws the number one of each category as a card (`#1 in -57 kg`), and `rankingEntryList` an event's entry list in the order of the draw with each athlete's ranking beside the name. `rankingMatchup` draws the head-to-head card of two athletes with their previous meetings and the record. `rankingRanks` and `rankingCategoryLabel` are helpers, `describeRanking`, `describeNumberOnes` and `describeEntryList` the descriptions, `NUMBER_ONE_COLORS` the card colours and `BOARD_SIZES` the sizes of every board (a TV, a tablet, a phone, and a square and a 4:5 card for social media). [docs/rankings.md](./docs/rankings.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#rankings)
 
 <p align="center"><picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-podium-tv-dark.webp">
 <img alt="A ranking list on a TV: three big rows tinted gold, silver and bronze for the first three, and the ranks 4 to 15 as compact rows beside them, each with its rank, movement arrow, round flag, name, club and points." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-podium-tv-light.webp" width="720">
 </picture><br><em>A made-up provincial ranking (invented names and clubs).</em></p>
 
+## Medal table
+
+`medalTable` draws a medal table for any sport and event (an Olympic Games, a world championship, a club tournament): ranked gold first or by the total, equal rows sharing a rank (5, 5, 7), a flag or a badge for each country or team (a former country such as the Soviet Union is a row of its own), the three medals and the total, in two columns where the board is wide. `tallyMedals` adds up a list of medals filtered to one sport, one weight class or one Games, and `medalRanks` gives the ranks as data. [docs/medals.md](./docs/medals.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#medals)
+
+<p align="center"><picture>
+<img alt="A medal table on a 4:5 card: ten countries with rank, flag or badge, name, gold, silver and bronze counts in tinted cells and the total." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/medal-table-portrait-light.webp" width="480">
+</picture><br><em>A made-up medal table (invented results).</em></p>
+
 ## In 30 seconds
 
 ```sh
@@ -304,7 +312,8 @@ Put the string in a page (`element.innerHTML = svg`), write it to a file, or sen
 - **A judo scoreboard**: `judoScoreboard` draws one contest for a given state, in two styles (a board, and table-top flip cards) and three sizes, in five languages; live updating is yours.
 - **The road to the final of a judoka**: `judoWins` reads an athlete's wins from a bracket (a top seed's bye included) and `judoRoadPanel` draws them with the opponent's flag, code and name and how each was won.
 - **Judo screens for the hall**: `judoContestCard` (the category, the round, the white athlete over the blue one) and `judoMatQueue` (per mat, a big number and colour and the contests to come in order, with flags and codes), on a TV or a tablet, in five languages.
-- **Rankings**: `rankingList` draws a ranking from your data, text first: rank, flag (a country or a Canadian province), name, club, points, movement arrows, a podium, a champion row, ties and paging; `rankingNumberOnes` the number one of each category and `rankingEntryList` an event's entry list with each athlete's ranking ([docs/rankings.md](./docs/rankings.md)).
+- **Rankings**: `rankingList` draws a ranking from your data, text first: rank, flag (a country or a Canadian province), name, club, points, movement arrows, a podium, a champion row, ties and paging; `rankingNumberOnes` the number one of each category and `rankingEntryList` an event's entry list with each athlete's ranking and `rankingMatchup` a head-to-head card ([docs/rankings.md](./docs/rankings.md)).
+- **A medal table for any sport**: `medalTable` ranks countries or teams gold first or by the total, with shared ranks, flags or badges, filters by sport, weight class and Games through `tallyMedals`, and former countries as rows of their own ([docs/medals.md](./docs/medals.md)).
 - **Judo scoring**: `Matchup.judo` takes ippon, waza-ari, yuko, shido, hansoku-make, golden score and the contest time, checked against the IJF rules (`judoOutcome`); a box shows the marks, the shido cards and how the contest was won, and `judoBracket` adds the repechage and the two bronze medal contests ([docs/judo.md](./docs/judo.md)).
 - **Formats by era**: NHL, NBA, MLB, NFL, CFL, MLS and FIFA World Cup round names, series lengths and byes.
 - **Five languages**: English, French, Japanese, Spanish and German, for every word the drawing, the tooltips, the description and the table write, with the football terms of each language; countries named by `Intl` from their ISO code; numbers and dates by `Intl`. Add a language of your own.
@@ -666,7 +675,8 @@ Everything is exported from `@johnmorrisdotca/taisen-brackets`; the layout part
 - `matchupsFromGames(games, options)`: matchups from a flat list of games.
 - `resolveMatchup`, `collectTeams`, `describeTie`, `noteParts`, `noteLong`: one tie's result, the teams of a bracket, a tie in a sentence.
 - `judoOutcome(result, winner?)`, `judoBracket(athletes, options?)`, `judoPodium(input)`, `judoCategoryLabel(category, locale?)`, `JUDO_WEIGHT_CLASSES`, `judoSeconds(time)`, `judoClock(seconds)`: judo results checked against the IJF rules, the bracket with its repechage and two bronze medal contests, the medallists, a weight category as a heading ([docs/judo.md](./docs/judo.md)). `judoScoreboard(contest, options?)`, `describeJudoContest(contest, options?)`, `JUDO_BOARD_SIZES`: the scoreboard of a contest as SVG and as a sentence. `judoContestCard(contest, options?)`, `judoMatQueue(mats, options?)`, `describeJudoCard`, `describeJudoQueue`, `JUDO_MAT_COLORS`: the contest card and the mat queue board as SVG and as sentences. `judoWins(bracket, athlete, options?)`, `judoRoadPanel(source, options?)`, `describeJudoRoad`: an athlete's wins on the road to the final, and the panel. `Matchup.judo` and `Matchup.stage` (`"repechage"`, `"bronze"`) carry them into `drawBracket`.
-- `rankingList(source, options?)`, `rankingRanks(entries, options?)`, `rankingCategoryLabel(category, locale?)`, `describeRanking(source, options?)`, `BOARD_SIZES`: a ranking list as SVG, its ranks as data, a category as a heading and the drawing as a sentence. `rankingNumberOnes(source, options?)`, `describeNumberOnes`, `NUMBER_ONE_COLORS`: the number one of each category as cards. `rankingEntryList(source, options?)`, `describeEntryList`: an event's entry list with each athlete's ranking ([docs/rankings.md](./docs/rankings.md)).
+- `rankingList(source, options?)`, `rankingRanks(entries, options?)`, `rankingCategoryLabel(category, locale?)`, `describeRanking(source, options?)`, `BOARD_SIZES`: a ranking list as SVG, its ranks as data, a category as a heading and the drawing as a sentence. `rankingNumberOnes(source, options?)`, `describeNumberOnes`, `NUMBER_ONE_COLORS`: the number one of each category as cards. `rankingEntryList(source, options?)`, `describeEntryList`: an event's entry list with each athlete's ranking. `rankingMatchup(source, options?)`, `describeMatchup`, `matchupRecord(meetings)`: the head-to-head card of two athletes and their meetings ([docs/rankings.md](./docs/rankings.md)).
+- `medalTable(source, options?)`, `medalRanks(rows, options?)`, `tallyMedals(awards, filter?)`, `describeMedalTable(source, options?)`: a medal table as SVG, its ranks as data, a list of medals added up and filtered, and the table as a sentence ([docs/medals.md](./docs/medals.md)).
 - `playoffFormat(league, year)`, `playoffEras(league)`, `LEAGUES`: the formats by era (`nhl`, `nba`, `mlb`, `nfl`, `cfl`, `mls`, `worldcup`). `LEAGUE_EMBLEMS`: each league's default emblem id.
 - `isEmblemId(value)`, and the types `EmblemRenderer`, `EmblemRequest`, `EmblemStyle`: the trophy emblems (see "Emblems for the trophy").
 - `roundName(remaining)`, `roundNamesFor(count)`, `roundLabel(layout, round, names, words)`: round names.

package/dist/index.d.ts

@@ -31,3 +31,7 @@ export { BOARD_SIZES } from "./rank-kit.ts";
 export type { BoardOptions, BoardSizeName } from "./rank-kit.ts";
 export { rankingNumberOnes, describeNumberOnes, rankingEntryList, describeEntryList, NUMBER_ONE_COLORS } from "./ranking-cards.ts";
 export type { EntryListOptions, EntryListSource, NumberOnesOptions, NumberOnesSource, RankingCard } from "./ranking-cards.ts";
+export { rankingMatchup, describeMatchup, matchupRecord } from "./ranking-matchup.ts";
+export type { MatchupOptions, MatchupSource, RankingMeeting } from "./ranking-matchup.ts";
+export { medalTable, medalRanks, tallyMedals, describeMedalTable } from "./medals.ts";
+export type { MedalAward, MedalFilter, MedalRow, MedalTableOptions, MedalTableSource } from "./medals.ts";

package/dist/index.js

@@ -17,3 +17,5 @@ export { judoWins, judoRoadPanel, describeJudoRoad } from "./judo-road.js";
 export { rankingList, rankingRanks, rankingCategoryLabel, describeRanking } from "./ranking.js";
 export { BOARD_SIZES } from "./rank-kit.js";
 export { rankingNumberOnes, describeNumberOnes, rankingEntryList, describeEntryList, NUMBER_ONE_COLORS } from "./ranking-cards.js";
+export { rankingMatchup, describeMatchup, matchupRecord } from "./ranking-matchup.js";
+export { medalTable, medalRanks, tallyMedals, describeMedalTable } from "./medals.js";

package/dist/locales.js

@@ -31,6 +31,8 @@ const EN = {
     rankTitle: "Ranking", rankPoints: "points", rankPointsShort: "pts", rankChampion: "C", rankChampionLong: "Champion", rankInterim: "IC", rankInterimLong: "Interim champion",
     rankNew: "NR", rankNewLong: "newly ranked", rankUp: "up {n}", rankDown: "down {n}", rankSame: "unchanged", rankRange: "{a}–{b} of {n}", rankNone: "No ranked athletes yet", rankJoin: ", ",
     rankNumberOnes: "Number ones", rankNumberOneIn: "#1 in {category}", rankEntryTitle: "Entry list", rankColRanking: "Ranking", rankUnranked: "NR",
+    rankMatchTitle: "Head to head", rankMeetings: "Previous meetings", rankNoMeetings: "No previous meetings", rankMore: "+{n} more",
+    medalTitle: "Medal table", medalNone: "No medals yet", medalGold: "Gold", medalSilver: "Silver", medalBronze: "Bronze", medalGoldShort: "G", medalSilverShort: "S", medalBronzeShort: "B", medalTotal: "Total", medalLine: "{g} gold, {s} silver, {b} bronze, {t} total", medalRank: "{n}",
 };
 const FR = {
     tbd: "À déterminer", bye: "exempt", walkover: "forfait", champion: "Champion", thirdPlace: "Match pour la troisième place", other: "Autres rencontres",
@@ -58,6 +60,8 @@ const FR = {
     rankTitle: "Classement", rankPoints: "points", rankPointsShort: "pts", rankChampion: "C", rankChampionLong: "Champion", rankInterim: "CI", rankInterimLong: "Champion intérimaire",
     rankNew: "Nouv.", rankNewLong: "nouvelle entrée au classement", rankUp: "en hausse de {n}", rankDown: "en baisse de {n}", rankSame: "rang inchangé", rankRange: "{a}–{b} sur {n}", rankNone: "Aucun athlète classé pour l’instant", rankJoin: ", ",
     rankNumberOnes: "Les numéros un", rankNumberOneIn: "N°\u00a01 en {category}", rankEntryTitle: "Liste des engagés", rankColRanking: "Classement", rankUnranked: "NC",
+    rankMatchTitle: "Face-à-face", rankMeetings: "Confrontations précédentes", rankNoMeetings: "Aucune confrontation précédente", rankMore: "+{n} de plus",
+    medalTitle: "Tableau des médailles", medalNone: "Aucune médaille pour l’instant", medalGold: "Or", medalSilver: "Argent", medalBronze: "Bronze", medalGoldShort: "O", medalSilverShort: "A", medalBronzeShort: "B", medalTotal: "Total", medalLine: "{g} or, {s} argent, {b} bronze, {t} au total", medalRank: "{n}",
 };
 const JA = {
     tbd: "未定", bye: "シード", walkover: "不戦勝", champion: "優勝", thirdPlace: "3位決定戦", other: "その他の対戦",
@@ -85,6 +89,8 @@ const JA = {
     rankTitle: "ランキング", rankPoints: "ポイント", rankPointsShort: "pt", rankChampion: "王者", rankChampionLong: "王者", rankInterim: "暫定", rankInterimLong: "暫定王者",
     rankNew: "NEW", rankNewLong: "新規ランクイン", rankUp: "{n}ランク上昇", rankDown: "{n}ランク下降", rankSame: "変動なし", rankRange: "{n}人中{a}–{b}位", rankNone: "ランキング入りした選手はまだいません", rankJoin: "、",
     rankNumberOnes: "各階級の1位", rankNumberOneIn: "{category} 1位", rankEntryTitle: "エントリーリスト", rankColRanking: "ランキング", rankUnranked: "圏外",
+    rankMatchTitle: "直接対決", rankMeetings: "過去の対戦", rankNoMeetings: "過去の対戦はありません", rankMore: "ほか{n}試合",
+    medalTitle: "メダル獲得表", medalNone: "まだメダルはありません", medalGold: "金メダル", medalSilver: "銀メダル", medalBronze: "銅メダル", medalGoldShort: "金", medalSilverShort: "銀", medalBronzeShort: "銅", medalTotal: "合計", medalLine: "金{g}、銀{s}、銅{b}、合計{t}", medalRank: "{n}位",
 };
 const ES = {
     tbd: "Por definir", bye: "exento", walkover: "incomparecencia", champion: "Campeón", thirdPlace: "Partido por el tercer puesto", other: "Otros partidos",
@@ -112,6 +118,8 @@ const ES = {
     rankTitle: "Clasificación", rankPoints: "puntos", rankPointsShort: "pts", rankChampion: "C", rankChampionLong: "Campeón", rankInterim: "CI", rankInterimLong: "Campeón interino",
     rankNew: "NUEVO", rankNewLong: "nuevo en la clasificación", rankUp: "sube {n}", rankDown: "baja {n}", rankSame: "sin cambios", rankRange: "{a}–{b} de {n}", rankNone: "Aún no hay deportistas clasificados", rankJoin: ", ",
     rankNumberOnes: "Los números uno", rankNumberOneIn: "N.º 1 en {category}", rankEntryTitle: "Lista de inscritos", rankColRanking: "Clasificación", rankUnranked: "SC",
+    rankMatchTitle: "Cara a cara", rankMeetings: "Enfrentamientos anteriores", rankNoMeetings: "Sin enfrentamientos anteriores", rankMore: "+{n} más",
+    medalTitle: "Medallero", medalNone: "Aún no hay medallas", medalGold: "Oro", medalSilver: "Plata", medalBronze: "Bronce", medalGoldShort: "O", medalSilverShort: "P", medalBronzeShort: "B", medalTotal: "Total", medalLine: "{g} oro, {s} plata, {b} bronce, {t} en total", medalRank: "{n}",
 };
 const DE = {
     tbd: "offen", bye: "Freilos", walkover: "kampflos", champion: "Turniersieger", thirdPlace: "Spiel um Platz 3", other: "Weitere Begegnungen",
@@ -139,6 +147,8 @@ const DE = {
     rankTitle: "Rangliste", rankPoints: "Punkte", rankPointsShort: "Pkt.", rankChampion: "C", rankChampionLong: "Champion", rankInterim: "IC", rankInterimLong: "Interimschampion",
     rankNew: "NEU", rankNewLong: "neu in der Rangliste", rankUp: "{n} Plätze höher", rankDown: "{n} Plätze tiefer", rankSame: "unverändert", rankRange: "{a}–{b} von {n}", rankNone: "Noch keine platzierten Athleten", rankJoin: ", ",
     rankNumberOnes: "Die Nummer Eins", rankNumberOneIn: "Nr. 1 in {category}", rankEntryTitle: "Meldeliste", rankColRanking: "Rangliste", rankUnranked: "o. R.",
+    rankMatchTitle: "Direkter Vergleich", rankMeetings: "Bisherige Duelle", rankNoMeetings: "Noch keine Duelle", rankMore: "+{n} weitere",
+    medalTitle: "Medaillenspiegel", medalNone: "Noch keine Medaillen", medalGold: "Gold", medalSilver: "Silber", medalBronze: "Bronze", medalGoldShort: "G", medalSilverShort: "S", medalBronzeShort: "B", medalTotal: "Gesamt", medalLine: "{g} Gold, {s} Silber, {b} Bronze, {t} gesamt", medalRank: "{n}",
 };
 /**
  * The round names, English name first. The football rounds are the terms of each language's Wikipedia article on the World Cup;

package/dist/medals.d.ts

@@ -0,0 +1,84 @@
+/**
+ * A medal table for any sport and event (an Olympic Games, a world championship, a club tournament): the rows ranked by gold first (as the Olympic table is) or by the total, equal rows
+ * sharing a rank (5, 5, 7), a flag or a badge for each country or team, the three kinds of medal and the total. `tallyMedals` adds up a list of medals, filtered to one sport, one weight class or
+ * one Games, so that the same data draws the table of an event, of a sport or of all time. Static SVG for a given state, like every drawing here.
+ */
+import { type BoardOptions } from "./rank-kit.ts";
+/** One row of a medal table: a country or a team and its medals. Only `name` is needed. */
+export interface MedalRow {
+    /** The country's or team's name as it is to be written ("France", "Soviet Union", "Unified Team"). */
+    name: string;
+    /** A code for the `flags` function (`FR`, `CA-BC`); a country that has no flag in it (a former one, a team) is drawn as a badge with `code` or the initials. */
+    flag?: string;
+    /** A mark of your own (an image address or inline SVG) in place of a flag. */
+    mark?: string;
+    /** The country's three letters, for the badge of a row with no flag. */
+    code?: string;
+    gold?: number;
+    silver?: number;
+    bronze?: number;
+    /** A small line under the name: the years a former country existed ("1922–1991"), or what a team is. */
+    note?: string;
+}
+export interface MedalTableSource {
+    /** The heading. Default: the language's "Medal table". */
+    title?: string;
+    /** The sport, event or Games as a pill under the heading ("Men's judo +100 kg"). */
+    subtitle?: string;
+    /** The date or the edition, at the right of the heading. */
+    date?: string;
+    /** Where the numbers come from, small at the foot. */
+    source?: string;
+    rows: readonly MedalRow[];
+}
+export interface MedalTableOptions extends BoardOptions {
+    /** `gold` (the default): by gold, then silver, then bronze, as the Olympic Games rank. `total`: by the total of medals, then gold, then silver. `given`: the order given, ranked by the same rule as `gold`. */
+    sort?: "gold" | "total" | "given";
+    /** Equal rows share a rank (`1, 2, 2, 4`). Default true; false numbers every row. */
+    ties?: boolean;
+    /** `plain` (`10`, the default) or `hash` (`#10`). */
+    rankStyle?: "plain" | "hash";
+    /** Only the first N rows, after sorting. */
+    top?: number;
+    /** The most rows drawn, from the first of the page, and which page (0 is the first). Default: as many as fit at a readable size. */
+    rows?: number;
+    page?: number;
+    /** One column or two (the first column runs down before the second starts). Default 1, and 2 on a wide board with more than 10 rows. */
+    columns?: 1 | 2;
+    /** Mark the first three ranks with a bar in gold, silver and bronze. Default true. */
+    highlight?: boolean;
+    /** Hide the rows with no medal at all. Default false. */
+    skipEmpty?: boolean;
+}
+/** A medal won: who won it and what kind, with whatever you filter on. */
+export interface MedalAward {
+    name: string;
+    flag?: string;
+    mark?: string;
+    code?: string;
+    note?: string;
+    medal: "gold" | "silver" | "bronze";
+    /** What the medal was won in, for the filter: a sport, a weight class or category, a Games or a year. Any of them can be left out of a filter. */
+    sport?: string;
+    category?: string;
+    games?: string | number;
+}
+/** What `tallyMedals` keeps: awards equal to every field given. A value can be a list (any of them). */
+export interface MedalFilter {
+    sport?: string | readonly string[];
+    category?: string | readonly string[];
+    games?: string | number | readonly (string | number)[];
+}
+/**
+ * Adds up a list of medals into the rows of a table, one row for each name, keeping the first flag, mark, code and note given for it. `filter` keeps only the medals of one sport, one category or
+ * one Games (or a list of them): the same list gives the table of an event, of a sport and of all time. Throws a `RangeError` for a medal that is not gold, silver or bronze or has no name.
+ */
+export declare function tallyMedals(awards: readonly MedalAward[], filter?: MedalFilter): MedalRow[];
+/** The ranks of a list of rows, as `medalTable` draws them (`[1, 2, 2, 4]`), in the order they are drawn. */
+export declare function medalRanks(rows: readonly MedalRow[], options?: Pick<MedalTableOptions, "sort" | "ties">): number[];
+/** The table as a sentence, the drawing's description. */
+export declare function describeMedalTable(source: MedalTableSource, options?: Pick<MedalTableOptions, "locale" | "words" | "sort" | "ties" | "top" | "skipEmpty">): string;
+/**
+ * The medal table as an SVG. Throws a `RangeError` for a row with no name, a medal count that is not a whole number from 0, an option that is not one of its values, or a bad size or theme.
+ */
+export declare function medalTable(source: MedalTableSource, options?: MedalTableOptions): string;

package/dist/medals.js

@@ -0,0 +1,226 @@
+/**
+ * A medal table for any sport and event (an Olympic Games, a world championship, a club tournament): the rows ranked by gold first (as the Olympic table is) or by the total, equal rows
+ * sharing a rank (5, 5, 7), a flag or a badge for each country or team, the three kinds of medal and the total. `tallyMedals` adds up a list of medals, filtered to one sport, one weight class or
+ * one Games, so that the same data draws the table of an event, of a sport or of all time. Static SVG for a given state, like every drawing here.
+ */
+import { boardFrame, boardWrap, bw, clampN, fitSize, heading, label } from "./rank-kit.js";
+import { fill, voiceOf } from "./locales.js";
+import { drawMark } from "./marks.js";
+import { abbreviate, fit, num } from "./text.js";
+const KINDS = ["gold", "silver", "bronze"];
+const count = (n) => n ?? 0;
+const totalOf = (r) => count(r.gold) + count(r.silver) + count(r.bronze);
+const matches = (value, want) => want === undefined || (Array.isArray(want) ? want.includes(value) : want === value);
+/**
+ * Adds up a list of medals into the rows of a table, one row for each name, keeping the first flag, mark, code and note given for it. `filter` keeps only the medals of one sport, one category or
+ * one Games (or a list of them): the same list gives the table of an event, of a sport and of all time. Throws a `RangeError` for a medal that is not gold, silver or bronze or has no name.
+ */
+export function tallyMedals(awards, filter = {}) {
+    const rows = new Map();
+    awards.forEach((a, i) => {
+        if (typeof a?.name !== "string" || a.name.trim() === "")
+            throw new RangeError(`taisen-brackets: medal ${i + 1} needs a name`);
+        if (!KINDS.includes(a.medal))
+            throw new RangeError(`taisen-brackets: medal ${i + 1} is "gold", "silver" or "bronze", not ${JSON.stringify(a.medal)}`);
+        if (!matches(a.sport, filter.sport) || !matches(a.category, filter.category) || !matches(a.games, filter.games))
+            return;
+        let row = rows.get(a.name);
+        if (!row) {
+            row = { name: a.name, gold: 0, silver: 0, bronze: 0, ...(a.flag ? { flag: a.flag } : {}), ...(a.mark ? { mark: a.mark } : {}), ...(a.code ? { code: a.code } : {}), ...(a.note ? { note: a.note } : {}) };
+            rows.set(a.name, row);
+        }
+        row[a.medal] = count(row[a.medal]) + 1;
+    });
+    return [...rows.values()];
+}
+/** The rows in the order they are drawn, with their ranks. */
+function ordered(rows, sort, ties) {
+    const key = (r) => (sort === "total" ? [totalOf(r), count(r.gold), count(r.silver)] : [count(r.gold), count(r.silver), count(r.bronze)]);
+    const list = rows.map((row, i) => ({ row, i }));
+    // `given` keeps the order, the others sort by the key, then by the order given.
+    if (sort !== "given")
+        list.sort((a, b) => { const x = key(a.row), y = key(b.row); for (let k = 0; k < x.length; k++)
+            if (x[k] !== y[k])
+                return y[k] - x[k]; return a.i - b.i; });
+    const same = (a, b) => key(a).every((v, k) => v === key(b)[k]) && totalOf(a) === totalOf(b);
+    const out = [];
+    list.forEach(({ row }, n) => {
+        const prev = out[n - 1];
+        out.push({ row, rank: ties && prev && same(prev.row, row) ? prev.rank : n + 1 });
+    });
+    return out;
+}
+/** The ranks of a list of rows, as `medalTable` draws them (`[1, 2, 2, 4]`), in the order they are drawn. */
+export function medalRanks(rows, options = {}) {
+    return ordered(rows, options.sort ?? "gold", options.ties ?? true).map((x) => x.rank);
+}
+function validate(source, options) {
+    if (!source || !Array.isArray(source.rows))
+        throw new RangeError("taisen-brackets: a medal table needs a list of rows");
+    source.rows.forEach((r, i) => {
+        if (typeof r?.name !== "string" || r.name.trim() === "")
+            throw new RangeError(`taisen-brackets: row ${i + 1} of the medal table needs a name`);
+        for (const k of KINDS)
+            if (r[k] !== undefined && !(Number.isInteger(r[k]) && r[k] >= 0))
+                throw new RangeError(`taisen-brackets: the ${k} medals of ${r.name} are a whole number from 0, not ${JSON.stringify(r[k])}`);
+    });
+    const oneOf = (name, value, allowed) => {
+        if (value !== undefined && !allowed.includes(value))
+            throw new RangeError(`taisen-brackets: ${name} is ${allowed.map((a) => JSON.stringify(a)).join(", ")}, not ${JSON.stringify(value)}`);
+    };
+    oneOf("sort", options.sort, ["gold", "total", "given"]);
+    oneOf("rankStyle", options.rankStyle, ["plain", "hash"]);
+    oneOf("columns", options.columns, [1, 2]);
+    if (options.top !== undefined && !(Number.isInteger(options.top) && options.top >= 1))
+        throw new RangeError("taisen-brackets: top is a whole number from 1");
+    if (options.rows !== undefined && !(Number.isInteger(options.rows) && options.rows >= 1 && options.rows <= 200))
+        throw new RangeError("taisen-brackets: rows is a whole number from 1 to 200");
+    if (options.page !== undefined && !(Number.isInteger(options.page) && options.page >= 0))
+        throw new RangeError("taisen-brackets: page is a whole number from 0");
+}
+/** The rows that are drawn: sorted, ranked, with the empty ones and all but the top N left out when asked. */
+function chosen(source, options) {
+    let list = ordered(source.rows, options.sort ?? "gold", options.ties ?? true);
+    if (options.skipEmpty)
+        list = list.filter((x) => totalOf(x.row) > 0);
+    return options.top ? list.slice(0, options.top) : list;
+}
+/** The table as a sentence, the drawing's description. */
+export function describeMedalTable(source, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const parts = [source.title ?? w.medalTitle];
+    if (source.subtitle)
+        parts.push(source.subtitle);
+    if (source.date)
+        parts.push(source.date);
+    const list = chosen(source, options);
+    if (list.length === 0)
+        parts.push(w.medalNone);
+    for (const { row, rank } of list)
+        parts.push([fill(w.medalRank, { n: v.number(rank) }), row.name, fill(w.medalLine, { g: v.number(count(row.gold)), s: v.number(count(row.silver)), b: v.number(count(row.bronze)), t: v.number(totalOf(row)) })].join(w.rankJoin));
+    return parts.join(w.sep) + w.end;
+}
+const teamFor = (r, id) => ({ id, name: r.name, abbr: (r.code ?? abbreviate(r.name)).slice(0, 3).toUpperCase(), ...(r.flag ? { flag: r.flag } : {}), ...(r.mark ? { mark: r.mark } : {}) });
+/**
+ * The medal table as an SVG. Throws a `RangeError` for a row with no name, a medal count that is not a whole number from 0, an option that is not one of its values, or a bad size or theme.
+ */
+export function medalTable(source, options = {}) {
+    validate(source, options);
+    const f = boardFrame(options, [source, options.sort, options.ties, options.rankStyle, options.top, options.rows, options.page, options.columns, options.highlight, options.skipEmpty]);
+    const { W, H, v } = f;
+    const w = v.words;
+    const unit = Math.min(W, H);
+    const pad = Math.round(unit * 0.035);
+    const all = chosen(source, options);
+    const columns = options.columns ?? (W / H >= 1.5 && all.length > 10 ? 2 : 1);
+    const head = heading(f, source.title ?? w.medalTitle, source.subtitle, source.date, pad, columns === 2 ? W - pad * 2 : Math.min(W - pad * 2, unit * 1.3), source.source);
+    const body = [...head.svg];
+    const { bx, boxW } = head;
+    const colGap = pad;
+    const colW = (boxW - (columns - 1) * colGap) / columns;
+    const hs = clampN(unit * 0.03, 12, 40);
+    const headRowH = hs * 2.1;
+    const avail = head.bottom - head.top - headRowH;
+    const minRow = Math.max(28, unit * 0.04);
+    const GAP = 0.1;
+    const perCol = Math.max(1, Math.floor(avail / (minRow * (1 + GAP))));
+    const page = options.page ?? 0;
+    const per = options.rows ?? perCol * columns;
+    const from = Math.min(page * per, Math.max(0, all.length - 1));
+    const slice = all.slice(from, from + per);
+    const rpc = Math.max(1, Math.ceil(slice.length / columns));
+    const rowH = Math.min(unit * 0.085, avail / (rpc * (1 + GAP)));
+    const he = Math.min(rowH, colW / 8);
+    const digits = (n) => v.number(n);
+    const maxMedal = Math.max(1, ...slice.map((x) => Math.max(count(x.row.gold), count(x.row.silver), count(x.row.bronze))));
+    const maxTotal = Math.max(1, ...slice.map((x) => totalOf(x.row)));
+    const ns = he * 0.4;
+    const cellW = Math.max(he * 0.95, bw(digits(maxMedal), ns) + he * 0.4);
+    const totW = Math.max(he * 1.2, bw(digits(maxTotal), ns) + he * 0.5);
+    const rankTexts = slice.map((x) => `${options.rankStyle === "hash" ? "#" : ""}${v.number(x.rank)}`);
+    const rs = he * 0.42;
+    const rankW = Math.max(he * 0.8, ...rankTexts.map((t) => bw(t, rs))) + he * 0.2;
+    const d = he * 0.58;
+    const rowPad = he * 0.2;
+    const cellGap = he * 0.08;
+    const highlight = options.highlight ?? true;
+    for (let c = 0; c < columns; c++) {
+        const x0 = bx + c * (colW + colGap);
+        const right = x0 + colW - rowPad;
+        const cy = head.top + headRowH / 2;
+        // The heading over the columns: a disc for each medal, with its letter, and the total.
+        const xs = columnX(right, totW, cellW, cellGap);
+        KINDS.forEach((_, i) => {
+            const r = Math.min(cellW, headRowH) * 0.4;
+            const letter = [w.medalGoldShort, w.medalSilverShort, w.medalBronzeShort][i];
+            body.push(`<g class="rk-medalhead"><title>${[w.medalGold, w.medalSilver, w.medalBronze][i]}</title><circle class="rk-disc${i + 1}" cx="${num(xs[i])}" cy="${num(cy)}" r="${num(r)}"/>${label(xs[i], cy + fitSize(letter, r * 1.1, r * 1.5, 0.6) * 0.36, fitSize(letter, r * 1.1, r * 1.5, 0.6), letter, "rk-onaccent-dark", "middle", 800)}</g>`);
+        });
+        const totalText = v.upper(w.medalTotal);
+        const tz = fitSize(totalText, hs, totW + cellGap, 0.6);
+        body.push(label(xs[3], cy + tz * 0.36, tz, fit(totalText, tz, totW + cellGap + 1, bw), "rk-sub", "middle", 700, ' letter-spacing=".06em"'));
+    }
+    slice.forEach(({ row, rank }, i) => {
+        const col = Math.floor(i / rpc), idx = i % rpc;
+        const r = { x: bx + col * (colW + colGap), y: head.top + headRowH + idx * rowH * (1 + GAP), w: colW, h: rowH };
+        body.push(drawRow(f, r, row, rank, rankTexts[i], { he, ns, rs, rankW, d, rowPad, cellW, totW, cellGap, highlight }, from + i));
+    });
+    if (slice.length === 0)
+        body.push(label(bx, head.top + hs * 3, hs * 1.2, w.medalNone, "rk-sub", "start", 700));
+    if (slice.length < all.length) {
+        const t = fill(w.rankRange, { a: v.number(from + 1), b: v.number(from + slice.length), n: v.number(all.length) });
+        body.push(label(bx + boxW, head.top - pad * 0.15, hs, fit(t, hs, boxW * 0.35, bw), "rk-sub", "end", 700));
+    }
+    return boardWrap(f, options.title ?? [source.title ?? w.medalTitle, source.subtitle].filter(Boolean).join(": "), describeMedalTable(source, options), body, "medal-table");
+}
+/** The centres of the gold, silver and bronze columns and of the total's, counted from the right edge. */
+function columnX(right, totW, cellW, gap) {
+    const t = right - totW / 2;
+    const b = right - totW - gap - cellW / 2;
+    const s = b - cellW - gap;
+    const g = s - cellW - gap;
+    return [g, s, b, t];
+}
+function drawRow(f, r, row, rank, rankText, z, index) {
+    const { v } = f;
+    const g = [];
+    g.push(`<rect class="rk-row" x="${num(r.x)}" y="${num(r.y)}" width="${num(r.w)}" height="${num(r.h)}" rx="${num(Math.min(r.h * 0.18, 16))}"/>`);
+    const cy = r.y + r.h / 2;
+    if (z.highlight && rank <= 3)
+        g.push(`<rect class="rk-bar${rank}" x="${num(r.x)}" y="${num(r.y + r.h * 0.18)}" width="${num(Math.max(4, r.h * 0.08))}" height="${num(r.h * 0.64)}" rx="2"/>`);
+    let x = r.x + z.rowPad;
+    g.push(label(x + (z.rankW - z.rowPad) / 2, cy + z.rs * 0.36, z.rs, rankText, rank <= 3 && z.highlight ? `rk-num${rank}` : "rk-ink", "middle", 800));
+    x += z.rankW;
+    g.push(drawMark(teamFor(row, `m${index}`), x + z.d / 2, cy, z.d, f.ctx));
+    x += z.d + z.rowPad;
+    const right = r.x + r.w - z.rowPad;
+    const xs = columnX(right, z.totW, z.cellW, z.cellGap);
+    const medals = [row.gold, row.silver, row.bronze].map(count);
+    const total = medals.reduce((a, b) => a + b, 0);
+    const cellH = r.h * 0.7;
+    const cells = [];
+    medals.forEach((n, i) => {
+        cells.push(`<rect class="${n > 0 ? `rk-cell${i + 1}` : "rk-pill"}" x="${num(xs[i] - z.cellW / 2)}" y="${num(cy - cellH / 2)}" width="${num(z.cellW)}" height="${num(cellH)}" rx="${num(cellH * 0.22)}"${n > 0 ? "" : ' opacity=".55"'}/>`);
+        cells.push(label(xs[i], cy + z.ns * 0.36, z.ns, v.number(n), n > 0 ? `rk-num${i + 1}` : "rk-sub", "middle", 800));
+    });
+    const tx = xs[3];
+    cells.push(label(tx, cy + z.ns * 0.36 * 1.1, z.ns * 1.1, v.number(total), "rk-ink", "middle", 800));
+    const nameAvail = xs[0] - z.cellW / 2 - z.rowPad - x;
+    const note = row.note;
+    const name = row.name;
+    const twoLine = !!note && z.he >= 40;
+    if (twoLine) {
+        const nz = fitSize(name, z.he * 0.36, nameAvail, 0.55);
+        const sz = fitSize(note, z.he * 0.21, nameAvail, 0.7);
+        const block = nz * 1.05 + sz * 1.3;
+        const top = cy - block / 2;
+        g.push(label(x, top + nz * 0.86, nz, fit(name, nz, nameAvail + 1, bw), "rk-ink", "start", 800));
+        g.push(label(x, top + nz * 1.05 + sz * 1.05, sz, fit(note, sz, nameAvail + 1, bw), "rk-sub", "start", 600));
+    }
+    else {
+        const nz = fitSize(name, z.he * 0.4, nameAvail, 0.55);
+        g.push(label(x, cy + nz * 0.36, nz, fit(name, nz, nameAvail + 1, bw), "rk-ink", "start", 800));
+    }
+    g.push(...cells);
+    return `<g class="rk-entry">${g.join("")}</g>`;
+}

package/dist/rank-kit.d.ts

@@ -67,6 +67,9 @@ export interface BoardPalette {
     downRow: string;
     pill: string;
     pillInk: string;
+    /** The two sides of a head-to-head card. */
+    sideA: string;
+    sideB: string;
     /** Gold, silver, bronze: the two ends of the row's gradient, the edge and the numeral. */
     gold: readonly [string, string, string, string];
     silver: readonly [string, string, string, string];
@@ -88,3 +91,11 @@ export declare function pill(x: number, cy: number, h: number, content: string,
     svg: string;
     w: number;
 };
+/** The heading every ranking board has: the title, an optional category pill, the date at the right and the source at the foot. Returns the shapes and the space left. */
+export declare function heading(f: BoardFrame, title: string, category: string | undefined, date: string | undefined, pad: number, maxBoxW: number, source: string | undefined): {
+    svg: string[];
+    top: number;
+    bottom: number;
+    bx: number;
+    boxW: number;
+};

package/dist/rank-kit.js

@@ -36,14 +36,14 @@ export const BOARD_LIGHT = {
     bg: "#eceff4", ink: "#131822", sub: "#566071", accent: "#2457c5", accentInk: "#ffffff",
     row: "#ffffff", rowAlt: "#f6f8fb", edge: "#d3d9e3", head: "#16233f", headInk: "#ffffff",
     up: "#0f8a46", down: "#c3302a", upRow: "#e0f4e8", downRow: "#fbe3e1",
-    pill: "#e3e8f1", pillInk: "#2a3345",
+    pill: "#e3e8f1", pillInk: "#2a3345", sideA: "#1d4ed8", sideB: "#c2410c",
     gold: ["#f8e9b5", "#fdf6dc", "#d4a929", "#7d5d00"], silver: ["#e4e8ee", "#f3f5f8", "#a9b2c0", "#4f586a"], bronze: ["#f2d5ba", "#faeadb", "#c98650", "#82451a"],
 };
 export const BOARD_DARK = {
     bg: "#0b0f17", ink: "#f0f3f9", sub: "#98a3b8", accent: "#6ea2ff", accentInk: "#0b0f17",
     row: "#161d2b", rowAlt: "#121826", edge: "#27324a", head: "#1b2742", headInk: "#f0f3f9",
     up: "#4fdc8b", down: "#ff7b72", upRow: "#123724", downRow: "#451d1d",
-    pill: "#25304a", pillInk: "#dfe6f5",
+    pill: "#25304a", pillInk: "#dfe6f5", sideA: "#6ea2ff", sideB: "#ff9a5c",
     gold: ["#5a4813", "#2c2512", "#d0aa3a", "#f5d263"], silver: ["#434c60", "#232a38", "#9ba6bb", "#e3e8f2"], bronze: ["#58341b", "#2b1d14", "#c4854f", "#f3a96f"],
 };
 const MEDALS = ["gold", "silver", "bronze"];
@@ -70,6 +70,8 @@ export function boardRules(p, scope, before, extra) {
         sel(".rk-pillink", `fill:${v("pill-ink", p.pillInk)}`),
         sel(".rk-nr", `fill:${v("accent", p.accent)}`),
         sel(".rk-nrink", `fill:${v("accent-ink", p.accentInk)}`),
+        sel(".rk-sa", `fill:${v("side-a", p.sideA)}`),
+        sel(".rk-sb", `fill:${v("side-b", p.sideB)}`),
         sel(".rk-onaccent", "fill:#ffffff"),
         sel(".rk-onaccent-dark", "fill:#15181a"),
         sel(".tb-ring", `fill:none;stroke:rgba(0,0,0,.28);stroke-width:1.5`),
@@ -78,6 +80,7 @@ export function boardRules(p, scope, before, extra) {
     ];
     MEDALS.forEach((m, i) => {
         const c = p[m];
+        out.push(sel(`.rk-cell${i + 1}`, `fill:${c[0]}`), sel(`.rk-disc${i + 1}`, `fill:${c[2]}`));
         out.push(sel(`.rk-ga${i + 1}`, `stop-color:${c[0]}`), sel(`.rk-gb${i + 1}`, `stop-color:${c[1]}`), sel(`.rk-medal${i + 1}`, `stroke:${c[2]};stroke-width:2`), sel(`.rk-num${i + 1}`, `fill:${c[3]}`), sel(`.rk-bar${i + 1}`, `fill:${c[2]}`));
     });
     if (extra)
@@ -124,3 +127,31 @@ export function pill(x, cy, h, content, maxW, cls = "rk-pill", inkCls = "rk-pill
     const x0 = anchor === "start" ? x : x - w;
     return { svg: `${rect(x0, cy - h / 2, w, h, cls, h / 2)}${label(x0 + w / 2, cy + fs * 0.36, fs, fit(content, fs, w, bw), inkCls, "middle", 800, ' letter-spacing=".03em"')}`, w };
 }
+// ------------------------------------------------------------------------------------------------ shared header
+/** The heading every ranking board has: the title, an optional category pill, the date at the right and the source at the foot. Returns the shapes and the space left. */
+export function heading(f, title, category, date, pad, maxBoxW, source) {
+    const { W, H } = f;
+    const unit = Math.min(W, H);
+    const boxW = Math.min(W - pad * 2, maxBoxW);
+    const bx = (W - boxW) / 2;
+    const hs = clampN(unit * 0.05, 18, 70);
+    const cs = hs * 0.58;
+    const svg = [];
+    let y = pad;
+    const dateW = date ? Math.min(boxW * 0.4, bw(date, cs) + 4) : 0;
+    const titleAvail = boxW - (dateW ? dateW + pad : 0);
+    const ts = fitSize(title, hs, titleAvail, 0.5);
+    svg.push(label(bx, y + hs * 0.85, ts, fit(title, ts, titleAvail + 1, bw), "rk-ink", "start", 800));
+    if (date)
+        svg.push(label(bx + boxW, y + hs * 0.85, cs, fit(date, cs, dateW, bw), "rk-sub", "end", 700));
+    y += hs * 1.05;
+    if (category)
+        svg.push(pill(bx, y + cs * 0.7, cs * 1.35, category, boxW * 0.62, "rk-accent", "rk-accentink").svg);
+    y += category ? cs * 1.35 + pad * 0.7 : pad * 0.35;
+    const footerH = source ? Math.max(14, unit * 0.026) + pad * 0.5 : 0;
+    if (source) {
+        const fs = Math.max(12, unit * 0.022);
+        svg.push(label(bx, H - pad - fs * 0.2, fs, fit(source, fs, boxW, bw), "rk-sub", "start", 600));
+    }
+    return { svg, top: y, bottom: H - pad - footerH, bx, boxW };
+}

package/dist/ranking-cards.js

@@ -3,7 +3,7 @@
  * points and "#1 in -57 kg", no photo. `rankingEntryList`: an event's entry list, in the order of the draw, with each athlete's ranking beside the name (the seeding view).
  * Static SVG for a given state, like every drawing here.
  */
-import { boardFrame, boardWrap, bw, clampN, fitSize, label, pill } from "./rank-kit.js";
+import { boardFrame, boardWrap, bw, clampN, fitSize, heading, label, pill } from "./rank-kit.js";
 import { inkOn } from "./judo-sheets.js";
 import { fill, voiceOf } from "./locales.js";
 import { drawMark } from "./marks.js";
@@ -297,31 +297,3 @@ export function rankingEntryList(source, options = {}) {
     }
     return boardWrap(f, options.title ?? [title, source.category].filter(Boolean).join(": "), describeEntryList(source, options), body, "entry-list");
 }
-// ------------------------------------------------------------------------------------------------ shared header
-/** The heading every ranking board has: the title, an optional category pill, the date at the right and the source at the foot. Returns the shapes and the space left. */
-function heading(f, title, category, date, pad, maxBoxW, source) {
-    const { W, H } = f;
-    const unit = Math.min(W, H);
-    const boxW = Math.min(W - pad * 2, maxBoxW);
-    const bx = (W - boxW) / 2;
-    const hs = clampN(unit * 0.05, 18, 70);
-    const cs = hs * 0.58;
-    const svg = [];
-    let y = pad;
-    const dateW = date ? Math.min(boxW * 0.4, bw(date, cs) + 4) : 0;
-    const titleAvail = boxW - (dateW ? dateW + pad : 0);
-    const ts = fitSize(title, hs, titleAvail, 0.5);
-    svg.push(label(bx, y + hs * 0.85, ts, fit(title, ts, titleAvail + 1, bw), "rk-ink", "start", 800));
-    if (date)
-        svg.push(label(bx + boxW, y + hs * 0.85, cs, fit(date, cs, dateW, bw), "rk-sub", "end", 700));
-    y += hs * 1.05;
-    if (category)
-        svg.push(pill(bx, y + cs * 0.7, cs * 1.35, category, boxW * 0.62, "rk-accent", "rk-accentink").svg);
-    y += category ? cs * 1.35 + pad * 0.7 : pad * 0.35;
-    const footerH = source ? Math.max(14, unit * 0.026) + pad * 0.5 : 0;
-    if (source) {
-        const fs = Math.max(12, unit * 0.022);
-        svg.push(label(bx, H - pad - fs * 0.2, fs, fit(source, fs, boxW, bw), "rk-sub", "start", 600));
-    }
-    return { svg, top: y, bottom: H - pad - footerH, bx, boxW };
-}

package/dist/ranking-matchup.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The head-to-head card: two athletes side by side (flag, name, club, ranking, points), a VS between them, and under them their previous meetings (date, event and round, who won, the
+ * result) with the record. It is the card shown next to a bracket for the contest about to be fought. Text first, no photo. Static SVG for a given state, like every drawing here.
+ */
+import { type BoardOptions } from "./rank-kit.ts";
+import { type RankingEntry, type RankingOptions } from "./ranking.ts";
+/** One previous meeting of the two athletes. */
+export interface RankingMeeting {
+    /** The date, as an ISO date (`2026-05-17`, written the language's way) or any text. */
+    date?: string;
+    /** The event ("Provincial Championships") and the round ("Final", "Semi-final"). */
+    event?: string;
+    round?: string;
+    /** Who won: `0` for the first athlete, `1` for the second, `null` or left out for a draw or no result. */
+    winner?: 0 | 1 | null;
+    /** How it ended, as it is to be written ("ippon · 1:12", "7–2"). */
+    result?: string;
+}
+export interface MatchupSource {
+    /** The heading. Default: the language's "Head to head". */
+    title?: string;
+    /** The category as a pill under the heading ("U18 · Men -60 kg"). */
+    category?: string;
+    /** The event or the date, at the right of the heading. */
+    date?: string;
+    /** Where the data comes from, small at the foot. */
+    source?: string;
+    /** The two athletes: an entry's `rank` is its ranking and `points` its points. */
+    a: RankingEntry;
+    b: RankingEntry;
+    /** The previous meetings, in the order they are to be written (the latest first, as a broadcast does). */
+    meetings?: readonly RankingMeeting[];
+}
+export interface MatchupOptions extends BoardOptions, Pick<RankingOptions, "nameStyle" | "precision" | "rankStyle"> {
+    /** The most meetings drawn. Default: as many as fit at a readable size. The rest are counted ("+2 more"); the record counts them all. */
+    rows?: number;
+}
+/** The record of the meetings: how many each athlete won. A draw or a meeting with no winner is in neither. */
+export declare function matchupRecord(meetings?: readonly RankingMeeting[]): [number, number];
+/** The card as a sentence, the drawing's description. */
+export declare function describeMatchup(source: MatchupSource, options?: Pick<MatchupOptions, "locale" | "words" | "nameStyle" | "precision" | "rankStyle">): string;
+/**
+ * The head-to-head card for two athletes and their meetings. Throws a `RangeError` for an athlete with no name, a ranking that is not a whole number from 1, a meeting whose winner is not
+ * 0, 1 or null, `rows` that is not a whole number from 1 to 50, or a bad size or theme.
+ */
+export declare function rankingMatchup(source: MatchupSource, options?: MatchupOptions): string;

package/dist/ranking-matchup.js

@@ -0,0 +1,221 @@
+/**
+ * The head-to-head card: two athletes side by side (flag, name, club, ranking, points), a VS between them, and under them their previous meetings (date, event and round, who won, the
+ * result) with the record. It is the card shown next to a bracket for the contest about to be fought. Text first, no photo. Static SVG for a given state, like every drawing here.
+ */
+import { boardFrame, boardWrap, bw, clampN, fitSize, heading, label } from "./rank-kit.js";
+import { fill, voiceOf } from "./locales.js";
+import { drawMark } from "./marks.js";
+import { abbreviate, fit, fitLines, num } from "./text.js";
+import { nameText, pointsText, teamFor } from "./ranking.js";
+/** The record of the meetings: how many each athlete won. A draw or a meeting with no winner is in neither. */
+export function matchupRecord(meetings = []) {
+    return [meetings.filter((m) => m.winner === 0).length, meetings.filter((m) => m.winner === 1).length];
+}
+const nameOf = (e) => (typeof e.name === "string" ? e.name : e.name.surname);
+function check(e, side) {
+    const n = e?.name;
+    const ok = typeof n === "string" ? n.trim() !== "" : !!n && typeof n === "object" && typeof n.surname === "string" && n.surname.trim() !== "";
+    if (!ok)
+        throw new RangeError(`taisen-brackets: athlete ${side} of the head-to-head needs a name`);
+    if (e.rank !== undefined && !(Number.isInteger(e.rank) && e.rank >= 1))
+        throw new RangeError(`taisen-brackets: the ranking of ${nameOf(e)} is a whole number from 1`);
+}
+const rankLine = (e, v, hash) => (e.rank === undefined ? v.words.rankUnranked : `${hash ? "#" : ""}${v.number(e.rank)}`);
+const meetingDate = (m, v) => (m.date === undefined ? "" : v.date(m.date) ?? m.date);
+/** The card as a sentence, the drawing's description. */
+export function describeMatchup(source, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const style = options.nameStyle ?? "surname-first";
+    const an = nameText(source.a.name, style, v), bn = nameText(source.b.name, style, v);
+    const parts = [`${source.title ?? w.rankMatchTitle}: ${fill(w.tieVs, { a: an, b: bn })}`];
+    if (source.category)
+        parts.push(source.category);
+    if (source.date)
+        parts.push(source.date);
+    for (const e of [source.a, source.b]) {
+        const bits = [nameText(e.name, style, v), `${w.rankColRanking} ${rankLine(e, v, false)}`];
+        const p = pointsText(e.points, options.precision, v);
+        if (p)
+            bits.push(`${p} ${w.rankPoints}`);
+        parts.push(bits.join(w.rankJoin));
+    }
+    const meetings = source.meetings ?? [];
+    if (meetings.length === 0)
+        parts.push(w.rankNoMeetings);
+    else {
+        const [x, y] = matchupRecord(meetings);
+        parts.push(`${w.rankMeetings} ${fill(w.scoreText, { a: v.number(x), b: v.number(y) })}`);
+        for (const m of meetings) {
+            const bits = [meetingDate(m, v), [m.event, m.round].filter(Boolean).join(" "), m.winner === 0 || m.winner === 1 ? nameText((m.winner === 0 ? source.a : source.b).name, style, v) : "", m.result ?? ""].filter(Boolean);
+            parts.push(bits.join(w.rankJoin));
+        }
+    }
+    return parts.join(w.sep) + w.end;
+}
+/**
+ * The head-to-head card for two athletes and their meetings. Throws a `RangeError` for an athlete with no name, a ranking that is not a whole number from 1, a meeting whose winner is not
+ * 0, 1 or null, `rows` that is not a whole number from 1 to 50, or a bad size or theme.
+ */
+export function rankingMatchup(source, options = {}) {
+    if (!source)
+        throw new RangeError("taisen-brackets: a head-to-head needs two athletes");
+    check(source.a, "a");
+    check(source.b, "b");
+    const meetings = source.meetings ?? [];
+    if (!Array.isArray(meetings))
+        throw new RangeError("taisen-brackets: meetings is a list");
+    meetings.forEach((m, i) => {
+        if (m.winner !== undefined && m.winner !== null && m.winner !== 0 && m.winner !== 1)
+            throw new RangeError(`taisen-brackets: the winner of meeting ${i + 1} is 0 (the first athlete), 1 (the second) or null, not ${JSON.stringify(m.winner)}`);
+    });
+    if (options.rows !== undefined && !(Number.isInteger(options.rows) && options.rows >= 1 && options.rows <= 50))
+        throw new RangeError("taisen-brackets: rows is a whole number from 1 to 50");
+    const f = boardFrame(options, [source, options.nameStyle, options.precision, options.rankStyle, options.rows]);
+    const { W, H, v } = f;
+    const w = v.words;
+    const unit = Math.min(W, H);
+    const pad = Math.round(unit * 0.035);
+    const style = options.nameStyle ?? "surname-first";
+    const title = source.title ?? w.rankMatchTitle;
+    const body = [];
+    const head = heading(f, title, source.category, source.date, pad, W - pad * 2, source.source);
+    body.push(...head.svg);
+    const { bx, boxW } = head;
+    const avail = head.bottom - head.top;
+    const vsW = clampN(unit * 0.12, 56, 150);
+    const panelW = (boxW - vsW) / 2;
+    const hasMeetings = meetings.length > 0;
+    const panelH = Math.min(hasMeetings ? avail * 0.5 : avail * 0.9, unit * (panelW / unit < 0.6 ? 0.5 : 0.42));
+    const names = [nameText(source.a.name, style, v), nameText(source.b.name, style, v)];
+    [source.a, source.b].forEach((e, k) => body.push(drawPanel(f, { x: bx + k * (panelW + vsW), y: head.top, w: panelW, h: panelH }, e, names[k], k === 0 ? "rk-sa" : "rk-sb", options, k)));
+    // The VS between the panels.
+    const vr = Math.min(vsW * 0.42, panelH * 0.3);
+    const vcx = bx + panelW + vsW / 2, vcy = head.top + panelH / 2;
+    const vsText = v.upper(w.vs);
+    const vsSize = fitSize(vsText, vr * 0.95, vr * 1.55, 0.5);
+    body.push(`<circle class="rk-pill" cx="${num(vcx)}" cy="${num(vcy)}" r="${num(vr)}"/>`, label(vcx, vcy + vsSize * 0.36, vsSize, vsText, "rk-pillink", "middle", 800));
+    // The meetings.
+    const mTop = head.top + panelH + pad;
+    const hs = clampN(unit * 0.026, 11, 34);
+    const lineH = hs * 1.9;
+    if (!hasMeetings) {
+        body.push(label(bx, mTop + hs * 1.2, hs * 1.15, w.rankNoMeetings, "rk-sub", "start", 700));
+    }
+    else {
+        const [ra, rb] = matchupRecord(meetings);
+        const headText = v.upper(w.rankMeetings);
+        body.push(label(bx, mTop + hs * 1.1, hs, fit(headText, hs, boxW * 0.5, bw), "rk-sub", "start", 700, ' letter-spacing=".08em"'));
+        // The record at the right: the first athlete's wins in his colour, a dash, the second's.
+        const rs = hs * 1.7;
+        const dashW = bw("–", rs), bW = bw(v.number(rb), rs);
+        const rx = bx + boxW;
+        body.push(label(rx - bW - dashW * 1.3, mTop + hs * 1.35, rs, v.number(ra), "rk-sa", "end", 800), label(rx - bW - dashW * 0.65, mTop + hs * 1.35, rs, "–", "rk-sub", "middle", 800), label(rx, mTop + hs * 1.35, rs, v.number(rb), "rk-sb", "end", 800));
+        const listTop = mTop + lineH * 1.15;
+        const minRow = Math.max(26, unit * 0.04);
+        const gapR = 0.12;
+        const cap = Math.max(1, Math.floor((head.bottom - listTop) / (minRow * (1 + gapR))));
+        const shownN = Math.min(options.rows ?? meetings.length, meetings.length, cap);
+        const rowH = Math.min(unit * 0.085, (head.bottom - listTop) / (shownN * (1 + gapR)));
+        const he = Math.min(rowH, boxW / 11);
+        meetings.slice(0, shownN).forEach((m, i) => {
+            const r = { x: bx, y: listTop + i * rowH * (1 + gapR), w: boxW, h: rowH };
+            body.push(drawMeeting(f, r, m, source, he, style));
+        });
+        if (shownN < meetings.length)
+            body.push(label(bx + boxW, head.bottom - 2, hs, fill(w.rankMore, { n: v.number(meetings.length - shownN) }), "rk-sub", "end", 700));
+    }
+    return boardWrap(f, options.title ?? [title, names.join(" – ")].join(": "), describeMatchup(source, options), body, "matchup");
+}
+function drawPanel(f, r, e, name, sideCls, options, k) {
+    const { v } = f;
+    const w = v.words;
+    const g = [];
+    const rx = Math.min(r.h * 0.08, 22);
+    g.push(`<rect class="rk-row" x="${num(r.x)}" y="${num(r.y)}" width="${num(r.w)}" height="${num(r.h)}" rx="${num(rx)}"/>`);
+    const bar = Math.max(6, r.h * 0.035);
+    g.push(`<rect class="${sideCls}" x="${num(r.x + rx)}" y="${num(r.y)}" width="${num(r.w - rx * 2)}" height="${num(bar)}"/>`);
+    const he = Math.min(r.h, r.w / 1.5);
+    const pad = he * 0.09;
+    const d = Math.min(he * 0.34, r.w * 0.3);
+    const y0 = r.y + bar + pad * 1.4;
+    const hasMark = !!(e.flag || e.mark);
+    let x = r.x + pad * 1.2;
+    if (hasMark) {
+        g.push(drawMark(teamFor(e, `m${k}`, name, abbreviate(e.club ?? name)), x + d / 2, y0 + d / 2, d, f.ctx));
+        x += d + pad;
+    }
+    const nameW = r.x + r.w - pad * 1.2 - x;
+    const second = e.club ?? e.country ?? "";
+    const ss = Math.min(he * 0.075, 26);
+    const blockH = Math.max(d, he * 0.26);
+    const fl = fitLines(name, nameW, blockH - (second ? ss * 1.4 : 0), he * 0.2);
+    const total = fl.height + (second ? ss * 1.35 : 0);
+    let ty = y0 + (blockH - total) / 2;
+    fl.lines.forEach((line, i) => g.push(label(x, ty + fl.size * (i + 0.86), fl.size, fit(line, fl.size, nameW + 1, bw), "rk-ink", "start", 800)));
+    ty += fl.height;
+    if (second) {
+        const s2 = fitSize(second, ss, nameW, 0.7);
+        g.push(label(x, ty + s2 * 1.05, s2, fit(second, s2, nameW + 1, bw), "rk-sub", "start", 600));
+    }
+    // The ranking and the points along the foot.
+    const ranked = rankLine(e, v, options.rankStyle === "hash");
+    const pts = pointsText(e.points, options.precision, v);
+    const left = r.x + pad * 1.2, right = r.x + r.w - pad * 1.2;
+    let rs = he * 0.3;
+    const ps = he * 0.18;
+    const lab = w.rankColRanking;
+    const ls = Math.max(he * 0.07, 10);
+    const needed = (size) => Math.max(bw(ranked, size), bw(v.upper(lab), ls * 1.1)) + (pts ? Math.min(bw(pts, ps), right - left) * 0.5 + pad * 2 : 0);
+    while (rs > 14 && needed(rs) > right - left)
+        rs *= 0.93;
+    const baseY = r.y + r.h - pad * 1.2;
+    g.push(label(left, baseY - rs * 0.74 - ls * 0.5, ls, fit(v.upper(lab), ls, right - left, bw), "rk-sub", "start", 700, ' letter-spacing=".1em"'));
+    g.push(label(left, baseY, rs, ranked, "rk-ink", "start", 800));
+    if (pts) {
+        const pz = fitSize(pts, ps * 1.5, right - left - Math.max(bw(ranked, rs), bw(v.upper(lab), ls * 1.1)) - pad * 2, 0.5);
+        g.push(label(right, baseY - pz * 0.74 - ls * 0.5, ls, fit(v.upper(w.rankPoints), ls, right - left, bw), "rk-sub", "end", 700, ' letter-spacing=".1em"'));
+        g.push(label(right, baseY, pz, pts, "rk-ink", "end", 800));
+    }
+    return `<g class="rk-panel">${g.join("")}</g>`;
+}
+function drawMeeting(f, r, m, source, he, style) {
+    const { v } = f;
+    const g = [];
+    g.push(`<rect class="rk-row" x="${num(r.x)}" y="${num(r.y)}" width="${num(r.w)}" height="${num(r.h)}" rx="${num(Math.min(r.h * 0.18, 16))}"/>`);
+    const cy = r.y + r.h / 2;
+    const pad = he * 0.25;
+    const date = meetingDate(m, v);
+    const winnerEntry = m.winner === 0 ? source.a : m.winner === 1 ? source.b : null;
+    const winName = winnerEntry ? nameText(winnerEntry.name, style, v) : "";
+    // The type steps down until the date, the winner and the result fit side by side; the event and round take what is left, if there is room.
+    let fs = he * 0.36;
+    const need = (z) => (date ? bw(date, z) + pad * 1.5 : 0) + (m.result ? bw(m.result, z) + pad * 1.5 : 0) + bw(winName, z) + z * 1.4 + pad * 2;
+    while (fs > 11 && need(fs) > r.w)
+        fs *= 0.94;
+    let x = r.x + pad;
+    const right = r.x + r.w - pad;
+    const dateW = date ? bw(date, fs) : 0;
+    if (date) {
+        g.push(label(x, cy + fs * 0.36, fs, fit(date, fs, dateW + 1, bw), "rk-sub", "start", 700));
+        x += dateW + pad * 1.5;
+    }
+    const resultW = m.result ? Math.min(r.w * 0.4, bw(m.result, fs)) : 0;
+    const winW = Math.min(r.w * 0.4, Math.max(bw(winName, fs) + fs * 1.4, fs * 2));
+    // The result at the right, then the winner before it, then the event and round in what is left.
+    const resultSvg = m.result ? label(right, cy + fs * 0.36, fs, fit(m.result, fs, resultW + 1, bw), "rk-ink", "end", 700) : "";
+    const wx = right - resultW - (resultW ? pad * 1.5 : 0) - winW;
+    const eventText = [m.event, m.round].filter(Boolean).join(" · ");
+    const eventW = wx - x - pad;
+    if (eventText && eventW > he * 2.5)
+        g.push(label(x, cy + fs * 0.36, fitSize(eventText, fs, eventW, 0.7), fit(eventText, fs, eventW + 1, bw), "rk-ink", "start", 600));
+    if (winnerEntry) {
+        g.push(`<circle class="${m.winner === 0 ? "rk-sa" : "rk-sb"}" cx="${num(wx + fs * 0.4)}" cy="${num(cy)}" r="${num(fs * 0.3)}"/>`);
+        const nx = wx + fs * 1.1;
+        g.push(label(nx, cy + fs * 0.36, fs, fit(winName, fs, winW - fs * 1.1 + 1, bw), m.winner === 0 ? "rk-sa" : "rk-sb", "start", 800));
+    }
+    else
+        g.push(label(wx + fs * 0.4, cy + fs * 0.36, fs, "–", "rk-sub", "start", 800));
+    g.push(resultSvg);
+    return `<g class="rk-meeting">${g.join("")}</g>`;
+}

package/dist/types.d.ts

@@ -420,6 +420,24 @@ export interface Words {
     rankEntryTitle: string;
     rankColRanking: string;
     rankUnranked: string;
+    /** The head-to-head card (`rankingMatchup`): the heading, the heading over the previous meetings, no meetings yet, and `{n}`: "+3 more". */
+    rankMatchTitle: string;
+    rankMeetings: string;
+    rankNoMeetings: string;
+    rankMore: string;
+    /** The medal table (`medalTable`): the heading, no medals yet, the three medals and their one-letter marks, the total, and a row in a sentence (`{g}`, `{s}`, `{b}`, `{t}`). */
+    medalTitle: string;
+    medalNone: string;
+    medalGold: string;
+    medalSilver: string;
+    medalBronze: string;
+    medalGoldShort: string;
+    medalSilverShort: string;
+    medalBronzeShort: string;
+    medalTotal: string;
+    medalLine: string;
+    /** A rank in the row sentence (`{n}`): "3", and "3位" in Japanese. */
+    medalRank: string;
 }
 /** A language: its words, the names of the rounds (by their English names), and the tag `Intl` formats numbers and dates for. */
 export interface Locale {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.12.0";
+export declare const VERSION = "0.14.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.12.0";
+export const VERSION = "0.14.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Taisen Brackets 対戦, knockout brackets as SVG: from a list of ties (games, best-of series, two legs, replays, byes, a third-place match) it works out the rounds and halves and draws the bracket with the halves meeting at the final, or left to right, wide, square, as a tall card or for a phone, in a classic or a road look (large round flags, big scores, a team's dotted path, a link on every box), in light, dark or a gold-on-navy poster look, in eight layouts (the tree, rows, shields, a score-update card, tall columns, the NBA's play-in, a series card and group tables), on one of twenty-five poster backgrounds (the playing surfaces of five sports among them) or your own, with each team's logo or round flag, the champion in the centre, and an accessible table; and the road to the final of either finalist. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
   "keywords": [
     "bracket",