@johnmorrisdotca/taisen-brackets 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -6,6 +6,17 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.12.0] - 2026-10-20
+
+Rankings, step 2: the number ones and the entry list.
+
+### Added
+
+- **`rankingNumberOnes({ title?, date?, source?, cards }, options)`**: the number one of each category (each weight class, each age group) as a card in a grid: a coloured panel with the 1, the flag, the name, the club or country, the points and a pill that reads `#1 in -57 kg`. No photo. `columns` (1 to 4; by default the number that lets the longest name be set biggest), `colors` (hex codes taken in turn, white or near-black ink on each; `NUMBER_ONE_COLORS`), `precision`, `nameStyle`. `describeNumberOnes`.
+- **`rankingEntryList({ title?, category?, date?, source?, entries }, options)`**: an event's entry list in the order of the draw: a numbered row for each athlete with the flag, the name, the club, the country's letters and the athlete's ranking at the right (`NR` for none), `points` optional. `sort: "ranking"`, `numbers`, `columns` (two on a wide board by default), `rows` and `page` (the header says which entries are shown), `badge`. `describeEntryList`.
+- Both take the options every board takes (size, theme, flags, locale, words, `--rk-*` custom properties). Words 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 both, with the view in the address (`kview`). [docs/rankings.md](docs/rankings.md).
+
 ## [0.11.0] - 2026-10-20
 
 Rankings, step 1: the ranking list.

package/README.md

@@ -249,7 +249,7 @@ 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`). `rankingRanks` and `rankingCategoryLabel` are its helpers, `describeRanking` its description, 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. `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">
@@ -304,7 +304,7 @@ 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.
-- **Ranking lists**: `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 ([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 ([docs/rankings.md](./docs/rankings.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 +666,7 @@ 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 ([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 ([docs/rankings.md](./docs/rankings.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

@@ -29,3 +29,5 @@ export { rankingList, rankingRanks, rankingCategoryLabel, describeRanking } from
 export type { RankingEntry, RankingName, RankingOptions, RankingSource } from "./ranking.ts";
 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";

package/dist/index.js

@@ -16,3 +16,4 @@ export { judoContestCard, describeJudoCard, judoMatQueue, describeJudoQueue, JUD
 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";

package/dist/locales.js

@@ -30,6 +30,7 @@ const EN = {
     judoCardTitle: "Judo contest card", judoQueueTitle: "Judo mat queue",
     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",
 };
 const FR = {
     tbd: "À déterminer", bye: "exempt", walkover: "forfait", champion: "Champion", thirdPlace: "Match pour la troisième place", other: "Autres rencontres",
@@ -56,6 +57,7 @@ const FR = {
     judoCardTitle: "Présentation d’un combat de judo", judoQueueTitle: "Prochains combats par tapis",
     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",
 };
 const JA = {
     tbd: "未定", bye: "シード", walkover: "不戦勝", champion: "優勝", thirdPlace: "3位決定戦", other: "その他の対戦",
@@ -82,6 +84,7 @@ const JA = {
     judoCardTitle: "柔道の対戦カード", judoQueueTitle: "各試合場の次の試合",
     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: "圏外",
 };
 const ES = {
     tbd: "Por definir", bye: "exento", walkover: "incomparecencia", champion: "Campeón", thirdPlace: "Partido por el tercer puesto", other: "Otros partidos",
@@ -108,6 +111,7 @@ const ES = {
     judoCardTitle: "Ficha de un combate de judo", judoQueueTitle: "Próximos combates por tatami",
     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",
 };
 const DE = {
     tbd: "offen", bye: "Freilos", walkover: "kampflos", champion: "Turniersieger", thirdPlace: "Spiel um Platz 3", other: "Weitere Begegnungen",
@@ -134,6 +138,7 @@ const DE = {
     judoCardTitle: "Kampfkarte eines Judokampfes", judoQueueTitle: "Nächste Kämpfe je Matte",
     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.",
 };
 /**
  * The round names, English name first. The football rounds are the terms of each language's Wikipedia article on the World Cup;

package/dist/rank-kit.js

@@ -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-onaccent", "fill:#ffffff"),
+        sel(".rk-onaccent-dark", "fill:#15181a"),
         sel(".tb-ring", `fill:none;stroke:rgba(0,0,0,.28);stroke-width:1.5`),
         sel(".tb-plain", `fill:${v("pill", p.pill)}`),
         sel(".tb-initials", `fill:${v("pill-ink", p.pillInk)}`),

package/dist/ranking-cards.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Two more drawings from a ranking's data. `rankingNumberOnes`: the number one of each category (each weight class, each age group) as a card, in a grid: name, club or country, flag,
+ * 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 { type BoardOptions } from "./rank-kit.ts";
+import { type RankingEntry, type RankingOptions } from "./ranking.ts";
+type Shared = Pick<RankingOptions, "nameStyle" | "precision">;
+/** A category and its number one. */
+export interface RankingCard {
+    /** The category as it is written ("-57 kg", "U18 · Men -60 kg"; `rankingCategoryLabel` writes one). */
+    category: string;
+    entry: RankingEntry;
+}
+export interface NumberOnesSource {
+    /** The heading. Default: the language's "Number ones". */
+    title?: string;
+    /** The date or period, at the right of the heading. */
+    date?: string;
+    /** Where the list comes from, small at the foot. */
+    source?: string;
+    cards: readonly RankingCard[];
+}
+export interface NumberOnesOptions extends BoardOptions, Shared {
+    /** Columns of cards, 1 to 4. Default: the number that makes the cards biggest. */
+    columns?: number;
+    /** The colour of each card's number panel, hex codes, taken in turn. The number is white or near-black, whichever reads on the colour. Default `NUMBER_ONE_COLORS`. */
+    colors?: readonly string[];
+}
+/** Orange, crimson, blue, teal, purple and amber, each dark enough for white type (4.5 to 1 or better). */
+export declare const NUMBER_ONE_COLORS: readonly string[];
+/** The cards as a sentence, the drawing's description. */
+export declare function describeNumberOnes(source: NumberOnesSource, options?: Pick<NumberOnesOptions, "locale" | "words" | "nameStyle" | "precision">): string;
+/**
+ * The number ones as cards in a grid: a coloured panel with the 1, the flag, the name and the club or country, the points and a pill that says "#1 in -57 kg". Throws a `RangeError` for
+ * no cards, a card with no category, an entry with no name, a colour that is not a hex code, columns that are not 1 to 4, or a bad size or theme.
+ */
+export declare function rankingNumberOnes(source: NumberOnesSource, options?: NumberOnesOptions): string;
+export interface EntryListSource {
+    /** The heading. Default: the language's "Entry list". */
+    title?: string;
+    /** The category as a pill under the heading. */
+    category?: string;
+    /** The event or the date, at the right of the heading. */
+    date?: string;
+    /** Where the list comes from, small at the foot. */
+    source?: string;
+    /** The athletes in the order of the draw. An entry's `rank` is its ranking (none: not ranked, written `NR`); `points` are optional. */
+    entries: readonly RankingEntry[];
+}
+export interface EntryListOptions extends BoardOptions, Shared {
+    /** `entry` (the default) keeps the order given; `ranking` puts the best ranked first and the unranked last. */
+    sort?: "entry" | "ranking";
+    /** Number the rows 1, 2, 3 in the order drawn. Default true. */
+    numbers?: boolean;
+    /** Columns of rows, 1 to 3. Default: as many as the size needs to keep the rows readable. */
+    columns?: number;
+    /** The most entries 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;
+    /** Draw a club's (or the athlete's) initials on a badge for an entry with no flag or mark, even where none has one. */
+    badge?: boolean;
+}
+/** The entry list as a sentence, the drawing's description. */
+export declare function describeEntryList(source: EntryListSource, options?: Pick<EntryListOptions, "locale" | "words" | "nameStyle" | "sort" | "precision">): string;
+/**
+ * An event's entry list: a numbered row for each athlete in the order of the draw, with the flag, the name and club, the country's letters and the athlete's ranking (`NR` for none) at the right. Throws a
+ * `RangeError` for an entry with no name, a ranking that is not a whole number from 1, an unknown option value or a bad size or theme.
+ */
+export declare function rankingEntryList(source: EntryListSource, options?: EntryListOptions): string;
+export {};

package/dist/ranking-cards.js

@@ -0,0 +1,327 @@
+/**
+ * Two more drawings from a ranking's data. `rankingNumberOnes`: the number one of each category (each weight class, each age group) as a card, in a grid: name, club or country, flag,
+ * 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 { inkOn } from "./judo-sheets.js";
+import { fill, voiceOf } from "./locales.js";
+import { drawMark } from "./marks.js";
+import { abbreviate, esc, fit, num } from "./text.js";
+import { nameText, pointsText, teamFor } from "./ranking.js";
+function checkEntry(e, where) {
+    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: ${where} 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 nameOf = (e) => (typeof e.name === "string" ? e.name : e.name.surname);
+/** Orange, crimson, blue, teal, purple and amber, each dark enough for white type (4.5 to 1 or better). */
+export const NUMBER_ONE_COLORS = Object.freeze(["#c2410c", "#be123c", "#1d4ed8", "#0f766e", "#6d28d9", "#a16207"]);
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+/** The cards as a sentence, the drawing's description. */
+export function describeNumberOnes(source, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const parts = [source.title ?? w.rankNumberOnes];
+    if (source.date)
+        parts.push(source.date);
+    for (const c of source.cards) {
+        const bits = [fill(w.rankNumberOneIn, { category: c.category }), nameText(c.entry.name, options.nameStyle ?? "surname-first", v)];
+        const detail = c.entry.club ?? c.entry.country;
+        if (detail)
+            bits.push(detail);
+        const p = pointsText(c.entry.points, options.precision, v);
+        if (p)
+            bits.push(`${p} ${w.rankPoints}`);
+        parts.push(bits.join(w.rankJoin));
+    }
+    return parts.join(w.sep) + w.end;
+}
+/**
+ * The number ones as cards in a grid: a coloured panel with the 1, the flag, the name and the club or country, the points and a pill that says "#1 in -57 kg". Throws a `RangeError` for
+ * no cards, a card with no category, an entry with no name, a colour that is not a hex code, columns that are not 1 to 4, or a bad size or theme.
+ */
+export function rankingNumberOnes(source, options = {}) {
+    if (!source || !Array.isArray(source.cards) || source.cards.length === 0)
+        throw new RangeError("taisen-brackets: the number ones need at least one card");
+    source.cards.forEach((c, i) => {
+        if (typeof c?.category !== "string" || c.category.trim() === "")
+            throw new RangeError(`taisen-brackets: card ${i + 1} needs a category`);
+        checkEntry(c.entry, `the entry of card ${i + 1}`);
+    });
+    if (options.columns !== undefined && !(Number.isInteger(options.columns) && options.columns >= 1 && options.columns <= 4))
+        throw new RangeError("taisen-brackets: columns is a whole number from 1 to 4");
+    const colors = options.colors ?? NUMBER_ONE_COLORS;
+    if (colors.length === 0 || colors.some((c) => !HEX.test(c)))
+        throw new RangeError("taisen-brackets: colors are hex codes such as #c2410c");
+    const f = boardFrame(options, [source, options.columns, options.nameStyle, options.precision, colors]);
+    const { W, H, v } = f;
+    const w = v.words;
+    const unit = Math.min(W, H);
+    const pad = Math.round(unit * 0.035);
+    const body = [];
+    const header = heading(f, source.title ?? w.rankNumberOnes, undefined, source.date, pad, Math.min(W - pad * 2, unit * 1.45), source.source);
+    body.push(...header.svg);
+    const boxW = header.boxW, bx = header.bx;
+    const n = source.cards.length;
+    const gap = Math.round(unit * 0.02);
+    const avail = header.bottom - header.top;
+    const nameStyle = options.nameStyle ?? "surname-first";
+    const texts = source.cards.map((c) => ({ name: nameText(c.entry.name, nameStyle, v), points: pointsText(c.entry.points, options.precision, v), pill: fill(w.rankNumberOneIn, { category: c.category }) }));
+    // How many columns: the one that lets the longest name be set biggest (cards must be at least 3.4 times as wide as high, so the type has room).
+    let best = { c: 1, ch: 0, cw: 0, size: -1 };
+    for (let c = options.columns ?? 1; c <= (options.columns ?? Math.min(4, n)); c++) {
+        const rows = Math.ceil(n / c);
+        const cw = (boxW - (c - 1) * gap) / c;
+        const ch = Math.min((avail - (rows - 1) * gap) / rows, cw / 3.4, unit * 0.24);
+        const size = cardType(cw, ch, texts).name;
+        if (size > best.size + 0.5 || (Math.abs(size - best.size) <= 0.5 && ch > best.ch))
+            best = { c, ch, cw, size };
+    }
+    const { c: cols, ch, cw } = best;
+    const top = header.top;
+    const m = cardType(cw, ch, texts);
+    source.cards.forEach((card, i) => {
+        const col = i % cols, row = Math.floor(i / cols);
+        const r = { x: bx + col * (cw + gap), y: top + row * (ch + gap), w: cw, h: ch };
+        body.push(drawCard(f, r, card, colors[i % colors.length], nameStyle, options.precision, i, m));
+    });
+    return boardWrap(f, options.title ?? (source.title ?? w.rankNumberOnes), describeNumberOnes(source, options), body, "number-ones");
+}
+function cardType(cw, ch, texts) {
+    const he = Math.min(ch, cw / 3.4);
+    const pad = he * 0.14;
+    const pw = he * 0.62;
+    const d = he * 0.38;
+    const ps = he * 0.22;
+    const pillH = he * 0.15;
+    const rightW = Math.max(...texts.map((t) => Math.max(bw(t.points, ps), bw(t.pill, pillH * 0.56) + pillH * 0.7)));
+    const nameAvail = cw - pw - pad * 2.4 - d - pad - rightW - pad;
+    const longest = Math.max(...texts.map((t) => bw(t.name, 1)));
+    const name = Math.max(1, Math.min(he * 0.24, nameAvail / longest));
+    return { he, pw, pad, d, ps, pillH, rightW, nameAvail, name, sub: Math.min(he * 0.14, name * 0.62) };
+}
+function drawCard(f, r, card, color, nameStyle, precision, i, m) {
+    const { v } = f;
+    const w = v.words;
+    const g = [];
+    const e = card.entry;
+    const name = nameText(e.name, nameStyle, v);
+    const second = e.club ?? e.country ?? "";
+    const points = pointsText(e.points, precision, v);
+    const rx = Math.min(r.h * 0.12, 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)}"/>`);
+    // The number panel: rounded on the left, square on the right.
+    const ink = inkOn(color) === "#ffffff" ? "rk-onaccent" : "rk-onaccent-dark";
+    g.push(`<rect x="${num(r.x)}" y="${num(r.y)}" width="${num(m.pw)}" height="${num(r.h)}" rx="${num(rx)}" style="fill:${esc(color)}"/>`);
+    g.push(`<rect x="${num(r.x + m.pw - rx)}" y="${num(r.y)}" width="${num(rx)}" height="${num(r.h)}" style="fill:${esc(color)}"/>`);
+    const ns1 = m.he * 0.5;
+    g.push(label(r.x + m.pw / 2, r.y + r.h / 2 + ns1 * 0.36, ns1, v.number(1), ink, "middle", 800));
+    let x = r.x + m.pw + m.pad * 1.2;
+    const right = r.x + r.w - m.pad * 1.2;
+    // Points and the pill, at the right.
+    const pillText = fill(w.rankNumberOneIn, { category: card.category });
+    const stackH = (points ? m.ps * 1.1 : 0) + m.pillH;
+    let y = r.y + (r.h - stackH) / 2;
+    if (points) {
+        g.push(label(right - m.rightW / 2, y + m.ps * 0.82, m.ps, points, "rk-ink", "middle", 800));
+        y += m.ps * 1.1;
+    }
+    g.push(pill(right, y + m.pillH / 2, m.pillH, pillText, m.rightW, "rk-pill", "rk-pillink", "end").svg);
+    // The flag and the name.
+    if (e.flag || e.mark) {
+        g.push(drawMark(teamFor(e, `c${i}`, name, abbreviate(e.club ?? name)), x + m.d / 2, r.y + r.h / 2, m.d, f.ctx));
+        x += m.d + m.pad;
+    }
+    const avail = right - m.rightW - m.pad - x;
+    const ns = Math.min(m.name, fitSize(name, m.name, avail, 0.9));
+    if (second) {
+        const ss = Math.min(m.sub, fitSize(second, m.sub, avail, 0.9));
+        const block = ns * 1.05 + ss * 1.4;
+        const top = r.y + r.h / 2 - block / 2;
+        g.push(label(x, top + ns * 0.86, ns, fit(name, ns, avail + 1, bw), "rk-ink", "start", 800));
+        g.push(label(x, top + ns * 1.05 + ss * 1.1, ss, fit(second, ss, avail + 1, bw), "rk-sub", "start", 600));
+    }
+    else
+        g.push(label(x, r.y + r.h / 2 + ns * 0.36, ns, fit(name, ns, avail + 1, bw), "rk-ink", "start", 800));
+    return `<g class="rk-card">${g.join("")}</g>`;
+}
+/** The entry list as a sentence, the drawing's description. */
+export function describeEntryList(source, options = {}) {
+    const v = voiceOf(options);
+    const w = v.words;
+    const parts = [source.title ?? w.rankEntryTitle];
+    if (source.category)
+        parts.push(source.category);
+    if (source.date)
+        parts.push(source.date);
+    const list = entryOrder(source, options.sort);
+    list.forEach((e, i) => {
+        const bits = [v.number(i + 1), nameText(e.name, options.nameStyle ?? "surname-first", v)];
+        const detail = e.club ?? e.country;
+        if (detail)
+            bits.push(detail);
+        bits.push(e.rank === undefined ? w.rankUnranked : `${w.rankColRanking} ${v.number(e.rank)}`);
+        parts.push(bits.join(w.rankJoin));
+    });
+    return parts.join(w.sep) + w.end;
+}
+const entryOrder = (source, sort) => sort === "ranking" ? source.entries.map((e, i) => ({ e, i })).sort((a, b) => (a.e.rank ?? Infinity) - (b.e.rank ?? Infinity) || a.i - b.i).map((x) => x.e) : [...source.entries];
+/**
+ * An event's entry list: a numbered row for each athlete in the order of the draw, with the flag, the name and club, the country's letters and the athlete's ranking (`NR` for none) at the right. Throws a
+ * `RangeError` for an entry with no name, a ranking that is not a whole number from 1, an unknown option value or a bad size or theme.
+ */
+export function rankingEntryList(source, options = {}) {
+    if (!source || !Array.isArray(source.entries))
+        throw new RangeError("taisen-brackets: an entry list needs a list of entries");
+    source.entries.forEach((e, i) => checkEntry(e, `entry ${i + 1} of the entry list`));
+    if (options.sort !== undefined && options.sort !== "entry" && options.sort !== "ranking")
+        throw new RangeError(`taisen-brackets: sort is "entry" or "ranking", not ${JSON.stringify(options.sort)}`);
+    if (options.columns !== undefined && !(Number.isInteger(options.columns) && options.columns >= 1 && options.columns <= 3))
+        throw new RangeError("taisen-brackets: columns is a whole number from 1 to 3");
+    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");
+    const f = boardFrame(options, [source, options.sort, options.numbers, options.columns, options.rows, options.page, options.nameStyle, options.precision, options.badge]);
+    const { W, H, v } = f;
+    const w = v.words;
+    const unit = Math.min(W, H);
+    const pad = Math.round(unit * 0.035);
+    const nameStyle = options.nameStyle ?? "surname-first";
+    const all = entryOrder(source, options.sort);
+    const body = [];
+    const title = source.title ?? w.rankEntryTitle;
+    const header = heading(f, title, source.category, source.date, pad, W - pad * 2, source.source);
+    body.push(...header.svg);
+    const { bx, boxW } = header;
+    const avail = header.bottom - header.top - unit * 0.04;
+    const minRow = Math.max(28, unit * 0.034);
+    const gap = 0.12;
+    const colGap = pad;
+    // Columns: the fewest that fit every entry at a readable row height, within what the width allows.
+    const maxCols = Math.max(1, Math.min(3, Math.floor(boxW / (unit * 0.55))));
+    let cols = options.columns ?? 1;
+    // A wide board takes two columns so that a row is not a long way from its number to its ranking; a short list stays in one.
+    if (options.columns === undefined) {
+        cols = Math.min(maxCols, Math.ceil(boxW / (unit * 1.25)), Math.max(1, Math.ceil(all.length / 6)));
+        while (cols < maxCols && Math.ceil(all.length / cols) * minRow * (1 + gap) > avail)
+            cols += 1;
+    }
+    const perCol = Math.max(1, Math.floor(avail / (minRow * (1 + gap))));
+    const page = options.page ?? 0;
+    const per = options.rows ?? perCol * cols;
+    const from = Math.min(page * per, Math.max(0, all.length - 1));
+    const slice = all.slice(from, from + per);
+    const rpc = Math.ceil(slice.length / cols);
+    const h = Math.min(unit * 0.085, avail / (Math.max(1, rpc) * (1 + gap)));
+    const colW = (boxW - (cols - 1) * colGap) / cols;
+    const marksAny = options.badge === true || slice.some((e) => e.flag || e.mark);
+    const numbers = options.numbers ?? true;
+    const he = Math.min(h, colW / 8);
+    const cs = he * 0.3;
+    const hasCode = slice.some((e) => e.code);
+    const hasPoints = slice.some((e) => e.points !== undefined);
+    const rs = he * 0.46;
+    const rankTexts = slice.map((e) => (e.rank === undefined ? w.rankUnranked : v.number(e.rank)));
+    const rankW = Math.max(bw(w.rankColRanking, cs * 0.85), ...rankTexts.map((t) => bw(t, rs))) + he * 0.2;
+    const ptsS = he * 0.3;
+    const ptsTexts = slice.map((e) => pointsText(e.points, options.precision, v));
+    const ptsW = hasPoints ? Math.max(...ptsTexts.map((t) => bw(t, ptsS))) + he * 0.3 : 0;
+    const codeW = hasCode ? Math.max(...slice.map((e) => bw(e.code ?? "", cs))) + he * 0.2 : 0;
+    const numW = numbers ? Math.max(he * 0.7, bw(v.number(from + slice.length), he * 0.36)) : 0;
+    const d = he * 0.58;
+    const rowPad = he * 0.2;
+    // The column heading over the ranking.
+    const hs = clampN(cs * 0.85, 10, 40);
+    for (let c = 0; c < cols; c++) {
+        const x1 = bx + c * (colW + colGap) + colW - rowPad;
+        body.push(label(x1 - (rankW - he * 0.2) / 2, header.top + hs * 0.8, hs, fit(v.upper(w.rankColRanking), hs, rankW + he * 0.4, bw), "rk-sub", "middle", 700, ' letter-spacing=".08em"'));
+    }
+    const top = header.top + hs * 1.6;
+    const rowH = Math.min(h, (avail - hs * 1.6) / (Math.max(1, rpc) * (1 + gap)));
+    slice.forEach((e, i) => {
+        const col = Math.floor(i / rpc), idx = i % rpc;
+        const r = { x: bx + col * (colW + colGap), y: top + idx * rowH * (1 + gap), w: colW, h: rowH };
+        const g = [];
+        const name = nameText(e.name, nameStyle, v);
+        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;
+        let x = r.x + rowPad;
+        const right = r.x + r.w - rowPad;
+        if (numbers) {
+            g.push(label(x + numW / 2, cy + he * 0.36 * 0.36, he * 0.36, v.number(from + i + 1), "rk-sub", "middle", 700));
+            x += numW;
+        }
+        if (marksAny) {
+            g.push(drawMark(teamFor(e, `e${from + i}`, name, abbreviate(e.club ?? name).slice(0, 3)), x + d / 2, cy, d, f.ctx));
+            x += d + rowPad;
+        }
+        // The ranking, big, at the right; the code and the points before it. They are written after the name, so that the markup reads in the order the row does.
+        const rt = rankTexts[i];
+        const tail = { rank: label(right - (rankW - he * 0.2) / 2, cy + rs * 0.36, fitSize(rt, rs, rankW - he * 0.2, 0.6), rt, e.rank === undefined ? "rk-sub" : "rk-ink", "middle", 800) };
+        let nr = right - rankW;
+        if (hasPoints) {
+            if (ptsTexts[i])
+                tail.points = label(nr, cy + ptsS * 0.36, ptsS, ptsTexts[i], "rk-sub", "end", 700);
+            nr -= ptsW;
+        }
+        if (hasCode) {
+            if (e.code)
+                tail.code = label(nr, cy + cs * 0.36, cs, e.code, "rk-sub", "end", 700);
+            nr -= codeW;
+        }
+        const nameAvail = Math.max(he, nr - x - rowPad * 0.5);
+        const second = e.club ?? e.country ?? "";
+        const twoLine = second !== "" && he >= 40;
+        const ns = fitSize(name, he * (twoLine ? 0.34 : 0.38), nameAvail, 0.55);
+        if (twoLine) {
+            const ss = he * 0.22;
+            const block = ns * 1.05 + ss * 1.3;
+            const t = cy - block / 2;
+            g.push(label(x, t + ns * 0.86, ns, fit(name, ns, nameAvail + 1, bw), "rk-ink", "start", 800));
+            g.push(label(x, t + ns * 1.05 + ss * 1.05, fitSize(second, ss, nameAvail, 0.7), fit(second, fitSize(second, ss, nameAvail, 0.7), nameAvail + 1, bw), "rk-sub", "start", 600));
+        }
+        else
+            g.push(label(x, cy + ns * 0.36, ns, fit(name, ns, nameAvail + 1, bw), "rk-ink", "start", 800));
+        g.push(...[tail.code, tail.points, tail.rank].filter((t) => !!t));
+        body.push(`<g class="rk-entry">${g.join("")}</g>`);
+    });
+    if (options.rows !== undefined || 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) });
+        if (slice.length < all.length)
+            body.push(label(bx + boxW, header.top - pad * 0.15, hs, fit(t, hs, boxW * 0.35, bw), "rk-sub", "end", 700));
+    }
+    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.d.ts

@@ -5,6 +5,8 @@
  * Static SVG for a given state, like every drawing here.
  */
 import { type BoardOptions } from "./rank-kit.ts";
+import { type Voice } from "./locales.ts";
+import type { Team } from "./types.ts";
 /** A name in two parts: the family name is written in capitals and first by default (`SURNAME Given`, as judo and the IJF write it). */
 export interface RankingName {
     given?: string;
@@ -87,8 +89,18 @@ export declare function rankingCategoryLabel(category: {
     sex?: "men" | "women" | "open";
     weight?: string;
 }, locale?: string): string;
+export declare const voiceFor: (locale?: string) => Voice;
+export declare const nameText: (n: RankingEntry["name"], style: NonNullable<RankingOptions["nameStyle"]>, v: Voice) => string;
+export declare const pointsText: (p: RankingEntry["points"], precision: number | undefined, v: Voice) => string;
+export interface R {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
 /** The ranking as a sentence, the drawing's description. */
 export declare function describeRanking(source: RankingSource, options?: Pick<RankingOptions, "locale" | "words" | "nameStyle" | "precision" | "ties" | "sort" | "rankStyle" | "rows" | "page">): string;
+export declare const teamFor: (e: RankingEntry, id: string, name: string, badge: string) => Team;
 /**
  * The ranking list as an SVG. Throws a `RangeError` for an entry with no name, a rank or change that is not a whole number, an option that is not one of its values, or a bad size or theme.
  */

package/dist/ranking.js

@@ -45,8 +45,8 @@ export function rankingCategoryLabel(category, locale) {
         parts.push(sex);
     return parts.join(" · ");
 }
-const voiceFor = (locale) => voiceOf(locale === undefined ? {} : { locale });
-const nameText = (n, style, v) => {
+export const voiceFor = (locale) => voiceOf(locale === undefined ? {} : { locale });
+export const nameText = (n, style, v) => {
     if (typeof n === "string")
         return n;
     const given = (n.given ?? "").trim();
@@ -55,7 +55,7 @@ const nameText = (n, style, v) => {
         return sur;
     return style === "given-first" || style === "as-is" ? `${given} ${sur}` : `${sur} ${given}`;
 };
-const pointsText = (p, precision, v) => {
+export const pointsText = (p, precision, v) => {
     if (p === undefined || p === null)
         return "";
     if (typeof p === "string")
@@ -136,7 +136,7 @@ export function describeRanking(source, options = {}) {
     }
     return parts.join(w.sep) + w.end;
 }
-const teamFor = (e, id, name, badge) => ({ id, name, abbr: badge, ...(e.flag ? { flag: e.flag } : {}), ...(e.mark ? { mark: e.mark } : {}) });
+export const teamFor = (e, id, name, badge) => ({ id, name, abbr: badge, ...(e.flag ? { flag: e.flag } : {}), ...(e.mark ? { mark: e.mark } : {}) });
 /**
  * The ranking list as an SVG. Throws a `RangeError` for an entry with no name, a rank or change that is not a whole number, an option that is not one of its values, or a bad size or theme.
  */

package/dist/types.d.ts

@@ -414,6 +414,12 @@ export interface Words {
     rankNone: string;
     /** What joins the pieces of one entry in the description ("1, NAKAMURA Kenji, 412.50 points"). */
     rankJoin: string;
+    /** Number-one cards (`rankingNumberOnes`): the heading, and `{category}`: "#1 in -57 kg". The entry list (`rankingEntryList`): the heading, the column heading over the rankings, and the mark of an athlete with none. */
+    rankNumberOnes: string;
+    rankNumberOneIn: string;
+    rankEntryTitle: string;
+    rankColRanking: string;
+    rankUnranked: 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.11.0";
+export declare const VERSION = "0.12.0";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.11.0",
+  "version": "0.12.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",