@johnmorrisdotca/taisen-brackets 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -6,6 +6,22 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.11.0] - 2026-10-20
+
+Rankings, step 1: the ranking list.
+
+### Added
+
+- **`rankingList(source, options)`**: a ranking for any ranked sport as an SVG, from the caller's data (a province's or a club's feed, a federation's list). Text first, with no photo slot: the rank, a flag (a country's or a Canadian province's or territory's, `CA-BC`), the name, the club and the points, with the movement since the last list. `source` is `{ title?, category?, date?, source?, entries }` and an entry `{ name, rank?, points?, club?, country?, code?, flag?, mark?, category?, change?, champion? }`. Styles: `podium` (the top three as big rows tinted gold, silver and bronze above the compact rest; on a wide board the big rows stand in a panel beside the others), `featured` (one big row above two columns) and `list`; `big`, `columns`, `split`, `medals`. Movement as arrows with the number of places, as green and red row colours, both, or none; `NR` for the newly ranked; a dash for no change. Tied ranks (equal points share a rank: 9, 10, 10, 12), an own `rank`, `rankStyle: "hash"` (`#10`). A champion row marked `C` (`IC` for an interim champion) above rank 1. `precision` writes points to the sport's own decimals (`91.60`, `50.00`), `nameStyle` writes `SURNAME Given`, `Given SURNAME` or the name as it is, `sort`, `categories`, `badge` (a club's initials where there is no flag), `rows` and `page` (the header says which entries are shown) and `flagShape`. Where the row is narrow the type steps down and then the text is cut with an ellipsis; nothing is stretched.
+- **`rankingRanks(entries, { ties })`**, **`rankingCategoryLabel({ age, sex, weight }, locale)`** (`U18 · Men -60 kg`) and **`describeRanking(source, options)`**, the drawing's description.
+- **`BOARD_SIZES`** and the options every board takes (`BoardOptions`): `tv`, `tablet`, `tablet-tall`, `phone` (600 by 1300), `square` and `portrait` (4:5) for a social card, or your own `{ width, height }`; light, dark or `auto`; five languages; custom properties `--rk-*`. The medal table and the results boards that follow share them.
+- Words for ranking lists in the five languages (the French and Japanese were read by native-language reviewers; the Spanish and German were not). The Japanese marks the champion with `王者` and the interim champion with `暫定`.
+- The demo has a Ranking lists section with a made-up provincial feed (U18 men -60 kg, and a senior women's list with a champion): style, size, look, movement, columns, name and rank style and paging, with the call that draws it; the state is in the address. [docs/rankings.md](docs/rankings.md).
+
+### Changed
+
+- The demo's flags come from Hata 1.6.2, which has all thirteen Canadian provinces and territories.
+
 ## [0.10.0] - 2026-10-20
 
 Judo, step 4: the road to the final of one judoka.

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/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/formats.md">Formats</a> · <a href="./docs/compare.md">How it compares</a></p>
 
 <p align="center">
 <picture>
@@ -247,6 +247,15 @@ A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as
 <img alt="A made-up men's minus 66 kilogram judo tournament of 16 athletes with round flags, score marks, shido cards, how each contest was won and its time, and the repechage and bronze medal contests under the tree." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-desk-light.webp" width="720">
 </picture><br><em>Men's -66 kg, with the quarter-final repechage (invented names).</em></p>
 
+## 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)
+
+<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>
+
 ## In 30 seconds
 
 ```sh
@@ -295,6 +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)).
 - **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.
@@ -656,6 +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)).
 - `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

@@ -25,3 +25,7 @@ export { judoContestCard, describeJudoCard, judoMatQueue, describeJudoQueue, JUD
 export type { JudoCardContest, JudoMat, JudoQueueContest, JudoQueueOptions } from "./judo-sheets.ts";
 export { judoWins, judoRoadPanel, describeJudoRoad } from "./judo-road.ts";
 export type { JudoRoadOptions, JudoRoadSource, JudoWin, JudoWinsOptions } from "./judo-road.ts";
+export { rankingList, rankingRanks, rankingCategoryLabel, describeRanking } from "./ranking.ts";
+export type { RankingEntry, RankingName, RankingOptions, RankingSource } from "./ranking.ts";
+export { BOARD_SIZES } from "./rank-kit.ts";
+export type { BoardOptions, BoardSizeName } from "./rank-kit.ts";

package/dist/index.js

@@ -14,3 +14,5 @@ export { judoBracket, judoPodium, judoCategoryLabel, judoOutcome, judoSeconds, j
 export { judoScoreboard, describeJudoContest, JUDO_BOARD_SIZES } from "./judo-board.js";
 export { judoContestCard, describeJudoCard, judoMatQueue, describeJudoQueue, JUDO_MAT_COLORS } from "./judo-sheets.js";
 export { judoWins, judoRoadPanel, describeJudoRoad } from "./judo-road.js";
+export { rankingList, rankingRanks, rankingCategoryLabel, describeRanking } from "./ranking.js";
+export { BOARD_SIZES } from "./rank-kit.js";

package/dist/locales.js

@@ -28,6 +28,8 @@ const EN = {
     judoWeightClass: "{sex} -{w} kg", judoWeightOver: "{sex} +{w} kg", judoMen: "Men", judoWomen: "Women",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Mat {n}", judoContest: "Contest {n}", judoCoach: "Coach: {name}", judoBoardTitle: "Judo contest scoreboard",
     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: ", ",
 };
 const FR = {
     tbd: "À déterminer", bye: "exempt", walkover: "forfait", champion: "Champion", thirdPlace: "Match pour la troisième place", other: "Autres rencontres",
@@ -52,6 +54,8 @@ const FR = {
     judoWeightClass: "{sex} -{w}\u00a0kg", judoWeightOver: "{sex} +{w}\u00a0kg", judoMen: "Hommes", judoWomen: "Femmes",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Tapis {n}", judoContest: "Combat {n}", judoCoach: "Entraîneur\u00a0: {name}", judoBoardTitle: "Tableau d’affichage d’un combat de judo",
     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: ", ",
 };
 const JA = {
     tbd: "未定", bye: "シード", walkover: "不戦勝", champion: "優勝", thirdPlace: "3位決定戦", other: "その他の対戦",
@@ -76,6 +80,8 @@ const JA = {
     judoWeightClass: "{sex}{w}kg級", judoWeightOver: "{sex}{w}kg超級", judoMen: "男子", judoWomen: "女子",
     judoOsaekomi: "抑え込み", judoShido: "指導", judoMat: "第{n}試合場", judoContest: "試合 {n}", judoCoach: "コーチ：{name}", judoBoardTitle: "柔道試合のスコアボード",
     judoCardTitle: "柔道の対戦カード", judoQueueTitle: "各試合場の次の試合",
+    rankTitle: "ランキング", rankPoints: "ポイント", rankPointsShort: "pt", rankChampion: "王者", rankChampionLong: "王者", rankInterim: "暫定", rankInterimLong: "暫定王者",
+    rankNew: "NEW", rankNewLong: "新規ランクイン", rankUp: "{n}ランク上昇", rankDown: "{n}ランク下降", rankSame: "変動なし", rankRange: "{n}人中{a}–{b}位", rankNone: "ランキング入りした選手はまだいません", rankJoin: "、",
 };
 const ES = {
     tbd: "Por definir", bye: "exento", walkover: "incomparecencia", champion: "Campeón", thirdPlace: "Partido por el tercer puesto", other: "Otros partidos",
@@ -100,6 +106,8 @@ const ES = {
     judoWeightClass: "{sex} -{w} kg", judoWeightOver: "{sex} +{w} kg", judoMen: "Hombres", judoWomen: "Mujeres",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Tatami {n}", judoContest: "Combate {n}", judoCoach: "Entrenador: {name}", judoBoardTitle: "Marcador de un combate de judo",
     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: ", ",
 };
 const DE = {
     tbd: "offen", bye: "Freilos", walkover: "kampflos", champion: "Turniersieger", thirdPlace: "Spiel um Platz 3", other: "Weitere Begegnungen",
@@ -124,6 +132,8 @@ const DE = {
     judoWeightClass: "{sex} -{w} kg", judoWeightOver: "{sex} +{w} kg", judoMen: "Herren", judoWomen: "Damen",
     judoOsaekomi: "Osaekomi", judoShido: "Shido", judoMat: "Matte {n}", judoContest: "Kampf {n}", judoCoach: "Trainer: {name}", judoBoardTitle: "Anzeigetafel eines Judokampfes",
     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: ", ",
 };
 /**
  * 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.d.ts

@@ -0,0 +1,90 @@
+/**
+ * What the ranking lists, the medal table and the results boards share: the sizes, the frame (size, theme, language, flags), the stylesheet with its light and dark palettes, the
+ * wrapper that makes the SVG, and the small shapes (a movement arrow, a pill, a rank badge). Every board is a static SVG for a given state, a pure function of its input.
+ */
+import type { DrawOptions, Locale, Words } from "./types.ts";
+import { bw, clampN, fitSize } from "./judo-board.ts";
+import { type Voice } from "./locales.ts";
+import { type MarkContext } from "./marks.ts";
+export { bw, clampN, fitSize };
+export type BoardSizeName = "tv" | "tablet" | "tablet-tall" | "phone" | "square" | "portrait";
+/** The sizes of a board: a TV's 1920 by 1080, a tablet on its side (1280 by 800) and upright (800 by 1280), a phone's 600 by 1300, and the social-card shapes, square (1080) and 4:5 (1080 by 1350). */
+export declare const BOARD_SIZES: Readonly<Record<BoardSizeName, {
+    width: number;
+    height: number;
+}>>;
+/** What every board takes. */
+export interface BoardOptions {
+    /** One of `BOARD_SIZES` (`tv` by default), or a size of your own, `{ width, height }`, at least 200 each way. */
+    size?: BoardSizeName | {
+        width: number;
+        height: number;
+    };
+    /** `auto` (the default) follows the page's light or dark, `light` and `dark` fix it. */
+    theme?: "auto" | "light" | "dark";
+    /** Draws a flag from its code, as for `drawBracket`: a synchronous function from a code (`CA-BC`, `JP`) and `{ shape, size, theme }` to an SVG string, such as one made from `@johnmorrisdotca/hata`. */
+    flags?: DrawOptions["flags"];
+    /** The address of a flag as a picture to load, tried where `flags` gives none. */
+    flagHref?: DrawOptions["flagHref"];
+    /** `round` (the default) or `square`: the shape a flag is asked for and drawn in. */
+    flagShape?: "round" | "square";
+    /** The language: `en`, `fr`, `ja`, `es`, `de` or a `Locale`. */
+    locale?: string | Locale;
+    words?: Partial<Words>;
+    /** The `<title>` of the drawing. Default: the board's own heading. */
+    title?: string;
+    /** Prefix for the drawing's ids. Default: a hash of the state and the options. */
+    id?: string;
+    className?: string;
+}
+export interface BoardFrame {
+    W: number;
+    H: number;
+    v: Voice;
+    scope: string;
+    theme: "auto" | "light" | "dark";
+    ctx: MarkContext;
+    options: BoardOptions;
+}
+export declare const rect: (x: number, y: number, w: number, h: number, cls: string, rx?: number, extra?: string) => string;
+export declare const label: (x: number, y: number, size: number, content: string, cls: string, anchor?: "start" | "middle" | "end", weight?: number, extra?: string) => string;
+/** The size, theme and language a board is drawn with, checked; `seed` is whatever the drawing depends on, for the hash of the ids. */
+export declare function boardFrame(options: BoardOptions, seed: unknown): BoardFrame;
+export interface BoardPalette {
+    bg: string;
+    ink: string;
+    sub: string;
+    accent: string;
+    accentInk: string;
+    row: string;
+    rowAlt: string;
+    edge: string;
+    head: string;
+    headInk: string;
+    up: string;
+    down: string;
+    upRow: string;
+    downRow: string;
+    pill: string;
+    pillInk: 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];
+    bronze: readonly [string, string, string, string];
+}
+export declare const BOARD_LIGHT: BoardPalette;
+export declare const BOARD_DARK: BoardPalette;
+/** The rules for one palette, scoped, with `before` ahead of every selector (empty, or the dark-mode root selector). */
+export declare function boardRules(p: BoardPalette, scope: string, before: string, extra?: (sel: (s: string, body: string) => string, v: (name: string, value: string) => string) => string[]): string;
+/** The whole stylesheet: the light palette, the dark one under the page's dark mode (for `auto`) or on its own, and the fixed rules. */
+export declare function boardStyle(scope: string, theme: "auto" | "light" | "dark", extra?: Parameters<typeof boardRules>[3], fixed?: string): string;
+/** The medal gradients a board's rows use: one for gold, silver and bronze, by id. */
+export declare function medalDefs(scope: string): string;
+export declare function boardWrap(f: BoardFrame, title: string, desc: string, body: string[], kind: string, extra?: Parameters<typeof boardRules>[3], fixed?: string, defs?: string): string;
+/** A movement arrow, a triangle `s` high centred at (cx, cy), up or down. */
+export declare function arrow(cx: number, cy: number, s: number, up: boolean): string;
+/** A pill with centred text in it, as wide as the text needs (never wider than `maxW`). Returns the pieces and the width. */
+export declare function pill(x: number, cy: number, h: number, content: string, maxW: number, cls?: string, inkCls?: string, anchor?: "start" | "end"): {
+    svg: string;
+    w: number;
+};

package/dist/rank-kit.js

@@ -0,0 +1,124 @@
+import { bw, clampN, fitSize, FONT } from "./judo-board.js";
+import { voiceOf } from "./locales.js";
+import { markDefs } from "./marks.js";
+import { esc, fit, hash, num } from "./text.js";
+export { bw, clampN, fitSize };
+/** The sizes of a board: a TV's 1920 by 1080, a tablet on its side (1280 by 800) and upright (800 by 1280), a phone's 600 by 1300, and the social-card shapes, square (1080) and 4:5 (1080 by 1350). */
+export const BOARD_SIZES = Object.freeze({
+    tv: { width: 1920, height: 1080 },
+    tablet: { width: 1280, height: 800 },
+    "tablet-tall": { width: 800, height: 1280 },
+    phone: { width: 600, height: 1300 },
+    square: { width: 1080, height: 1080 },
+    portrait: { width: 1080, height: 1350 },
+});
+export const rect = (x, y, w, h, cls, rx = 0, extra = "") => `<rect class="${cls}" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}"${rx ? ` rx="${num(rx)}"` : ""}${extra}/>`;
+export const label = (x, y, size, content, cls, anchor = "start", weight = 800, extra = "") => `<text class="${cls}" x="${num(x)}" y="${num(y)}" font-size="${num(size)}" font-weight="${weight}" text-anchor="${anchor}"${extra}>${esc(content)}</text>`;
+/** An id for the drawing's classes and ids, made safe: letters, digits, `_` and `-` only (anything else becomes `-`), and a letter first. `undefined` stays `undefined`. */
+const safeId = (id) => (id === undefined ? undefined : /^[A-Za-z]/.test(id) ? id.replace(/[^\w-]/g, "-") : `rk-${id.replace(/[^\w-]/g, "-")}`);
+/** The size, theme and language a board is drawn with, checked; `seed` is whatever the drawing depends on, for the hash of the ids. */
+export function boardFrame(options, seed) {
+    const v = voiceOf(options);
+    const size = typeof options.size === "string" ? BOARD_SIZES[options.size] : options.size ?? BOARD_SIZES.tv;
+    if (!size || !(size.width >= 200) || !(size.height >= 200))
+        throw new RangeError(`taisen-brackets: a size is ${Object.keys(BOARD_SIZES).map((k) => `"${k}"`).join(", ")} or { width, height } of 200 or more, not ${JSON.stringify(options.size)}`);
+    const theme = options.theme ?? "auto";
+    if (theme !== "auto" && theme !== "light" && theme !== "dark")
+        throw new RangeError(`taisen-brackets: a theme is "auto", "light" or "dark", not ${JSON.stringify(theme)}`);
+    const shape = options.flagShape ?? "round";
+    if (shape !== "round" && shape !== "square")
+        throw new RangeError(`taisen-brackets: a flag shape is "round" or "square", not ${JSON.stringify(options.flagShape)}`);
+    const scope = safeId(options.id) ?? `rk-${hash(JSON.stringify([seed, options.size, theme, shape, v.locale.code, options.flags ? 1 : 0, options.flagHref ? 1 : 0, options.title]))}`;
+    const ctx = { radii: new Set(), symbols: new Map(), prefix: scope, shape, theme: "inherit", flagCache: new Map(), ...(options.flags ? { flags: options.flags } : {}), ...(options.flagHref ? { flagHref: options.flagHref } : {}) };
+    return { W: size.width, H: size.height, v, scope, theme, ctx, options };
+}
+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",
+    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",
+    gold: ["#5a4813", "#2c2512", "#d0aa3a", "#f5d263"], silver: ["#434c60", "#232a38", "#9ba6bb", "#e3e8f2"], bronze: ["#58341b", "#2b1d14", "#c4854f", "#f3a96f"],
+};
+const MEDALS = ["gold", "silver", "bronze"];
+/** The rules for one palette, scoped, with `before` ahead of every selector (empty, or the dark-mode root selector). */
+export function boardRules(p, scope, before, extra) {
+    const sel = (s, body) => `${before}.${scope} ${s}{${body}}`;
+    const v = (name, value) => `var(--rk-${name}, ${value})`;
+    const out = [
+        sel(".rk-bg", `fill:${v("bg", p.bg)}`),
+        sel(".rk-ink", `fill:${v("ink", p.ink)}`),
+        sel(".rk-sub", `fill:${v("sub", p.sub)}`),
+        sel(".rk-accent", `fill:${v("accent", p.accent)}`),
+        sel(".rk-accentink", `fill:${v("accent-ink", p.accentInk)}`),
+        sel(".rk-head", `fill:${v("head", p.head)}`),
+        sel(".rk-headink", `fill:${v("head-ink", p.headInk)}`),
+        sel(".rk-row", `fill:${v("row", p.row)};stroke:${v("edge", p.edge)};stroke-width:1.5`),
+        sel(".rk-row.rk-alt", `fill:${v("row-alt", p.rowAlt)}`),
+        sel(".rk-sep", `stroke:${v("edge", p.edge)};stroke-width:1.5`),
+        sel(".rk-up", `fill:${v("up", p.up)}`),
+        sel(".rk-down", `fill:${v("down", p.down)}`),
+        sel(".rk-row.rk-mup", `fill:${v("up-row", p.upRow)}`),
+        sel(".rk-row.rk-mdown", `fill:${v("down-row", p.downRow)}`),
+        sel(".rk-pill", `fill:${v("pill", p.pill)}`),
+        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(".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)}`),
+    ];
+    MEDALS.forEach((m, i) => {
+        const c = p[m];
+        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)
+        out.push(...extra(sel, v));
+    return out.join("\n");
+}
+/** The whole stylesheet: the light palette, the dark one under the page's dark mode (for `auto`) or on its own, and the fixed rules. */
+export function boardStyle(scope, theme, extra, fixed = "") {
+    const tail = [`.${scope} text{font-family:var(--rk-font, ${FONT});font-variant-numeric:tabular-nums}`, fixed.replaceAll("$S", `.${scope}`)].filter(Boolean).join("\n");
+    if (theme === "light")
+        return `${boardRules(BOARD_LIGHT, scope, "", extra)}\n${tail}`;
+    if (theme === "dark")
+        return `${boardRules(BOARD_DARK, scope, "", extra)}\n${tail}`;
+    return `${boardRules(BOARD_LIGHT, scope, "", extra)}\n@media (prefers-color-scheme: dark){\n${boardRules(BOARD_DARK, scope, ':root:not([data-theme="light"]) ', extra)}\n}\n${boardRules(BOARD_DARK, scope, ':root[data-theme="dark"] ', extra)}\n${tail}`;
+}
+/** The medal gradients a board's rows use: one for gold, silver and bronze, by id. */
+export function medalDefs(scope) {
+    return MEDALS.map((_, i) => `<linearGradient id="${esc(scope)}-g${i + 1}" x1="0" x2="1" y1="0" y2="0"><stop class="rk-ga${i + 1}" offset="0"/><stop class="rk-gb${i + 1}" offset="1"/></linearGradient>`).join("");
+}
+export function boardWrap(f, title, desc, body, kind, extra, fixed = "", defs = "") {
+    const marks = markDefs(f.ctx);
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(f.v.locale.code)}" class="taisen taisen-board ${esc(f.scope)}${f.options.className ? ` ${esc(f.options.className)}` : ""}" viewBox="0 0 ${num(f.W)} ${num(f.H)}" width="${num(f.W)}" height="${num(f.H)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${esc(f.scope)}-t ${esc(f.scope)}-d" data-board="${kind}">`,
+        `<title id="${esc(f.scope)}-t">${esc(title)}</title><desc id="${esc(f.scope)}-d">${esc(desc)}</desc>`,
+        `<style>${boardStyle(f.scope, f.theme, extra, fixed)}</style>`,
+        `<defs>${medalDefs(f.scope)}${defs}${marks}</defs>`,
+        `<rect class="rk-bg" width="${num(f.W)}" height="${num(f.H)}"/>`,
+        ...body,
+        "</svg>",
+    ].join("\n");
+}
+// ------------------------------------------------------------------------------------------------ small shapes
+/** A movement arrow, a triangle `s` high centred at (cx, cy), up or down. */
+export function arrow(cx, cy, s, up) {
+    const w = s * 1.1, h = s * 0.9;
+    const pts = up ? [[cx, cy - h / 2], [cx + w / 2, cy + h / 2], [cx - w / 2, cy + h / 2]] : [[cx - w / 2, cy - h / 2], [cx + w / 2, cy - h / 2], [cx, cy + h / 2]];
+    return `<polygon class="${up ? "rk-up" : "rk-down"}" points="${pts.map(([x, y]) => `${num(x)},${num(y)}`).join(" ")}"/>`;
+}
+/** A pill with centred text in it, as wide as the text needs (never wider than `maxW`). Returns the pieces and the width. */
+export function pill(x, cy, h, content, maxW, cls = "rk-pill", inkCls = "rk-pillink", anchor = "start") {
+    const size = h * 0.56;
+    const fs = fitSize(content, size, maxW - h * 0.7, 0.6);
+    const w = Math.min(maxW, bw(content, fs) + h * 0.7);
+    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 };
+}

package/dist/ranking.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Ranking lists for any ranked sport, drawn from the caller's data (a provincial or club feed, a federation's list): a title and a category, then the entries as a podium (the top
+ * three in gold, silver and bronze rows) above a compact list, as one featured row above two columns, or as a plain list. Text first: rank, flag, name, club, points and the
+ * movement since the last list, with no photo slot to leave empty. A champion row ("C"), an interim champion, newly ranked athletes ("NR"), tied ranks and paging are in.
+ * Static SVG for a given state, like every drawing here.
+ */
+import { type BoardOptions } from "./rank-kit.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;
+    surname: string;
+}
+/** One line of a ranking. Only `name` is needed. */
+export interface RankingEntry {
+    /** The name as it is to be written, or its two parts (set by `nameStyle`). */
+    name: string | RankingName;
+    /** The rank. Left out, the position in the list, with equal points sharing a rank (`ties`). A champion has none. */
+    rank?: number;
+    /** A number (shown to `precision` decimals) or text (shown as it is). */
+    points?: number | string;
+    club?: string;
+    /** The country's or region's name, written under the name in a podium row. */
+    country?: string;
+    /** The country's three letters (`CAN`), written in the compact rows. */
+    code?: string;
+    /** A code for the `flags` renderer: a country (`JP`) or a Canadian province or territory (`CA-BC`). */
+    flag?: string;
+    /** A mark of your own (an image address or inline SVG) in place of a flag: a club's emblem. */
+    mark?: string;
+    /** This athlete's category ("U18 · -60 kg"), written in the second line when `categories` is on: for a list that mixes categories. */
+    category?: string;
+    /** The movement since the last list: whole places up (positive) or down (negative), `0` for none, `"new"` for newly ranked ("NR"). */
+    change?: number | "new";
+    /** The champion of the division: a row marked "C" above the ranks (`"interim"` for an interim champion). */
+    champion?: boolean | "interim";
+}
+export interface RankingSource {
+    /** The heading. Default: the language's word for ranking. */
+    title?: string;
+    /** The category as a line under the heading ("U18 · Men -60 kg"; `rankingCategoryLabel` writes one). */
+    category?: string;
+    /** The date or period of the list, at the right of the heading ("October 2026"). */
+    date?: string;
+    /** Where the list comes from, small at the foot ("Source: BC Judo"). */
+    source?: string;
+    entries: readonly RankingEntry[];
+}
+export interface RankingOptions extends BoardOptions {
+    /** `podium` (the default): the top three as big rows, tinted gold, silver and bronze, above the compact rest. `featured`: one big row above two columns. `list`: every row compact. */
+    style?: "podium" | "list" | "featured";
+    /** How many rows, from the top, are big (0 to 3). Default by `style`. Only on the first page. */
+    big?: number;
+    /** One column or two for the compact rows (the first column runs down before the second starts). Default 1, and 2 for `featured`. */
+    columns?: 1 | 2;
+    /** The most entries drawn, from the first of the page. Default: as many as fit at a readable size. */
+    rows?: number;
+    /** Which page of `rows` entries (0 is the first). The header says which entries are shown. */
+    page?: number;
+    /** On a wide board (at least 3:2) the big rows go in a panel on the left and the compact ones beside them, in place of one above the other. Default true; `false` stacks them. */
+    split?: boolean;
+    /** Tint the rows of ranks 1 to 3 gold, silver and bronze. Default: on for `podium` and `featured` (off when the list has a champion row), off for `list`. */
+    medals?: boolean;
+    /** How movement is shown: `arrow` (an arrow and the number of places, the default), `row` (the row tinted green or red), `both`, or `none`. */
+    movement?: "arrow" | "row" | "both" | "none";
+    /** `surname-first` (the default: `SURNAME Given`), `given-first` (`Given SURNAME`) or `as-is`, for a `name` given in two parts. */
+    nameStyle?: "surname-first" | "given-first" | "as-is";
+    /** `plain` (`10`, the default) or `hash` (`#10`). */
+    rankStyle?: "plain" | "hash";
+    /** Decimals for numeric points (`2` writes `91.60` and `50.00`). Default: as many as the number has, up to three. */
+    precision?: number;
+    /** Equal points share a rank where an entry names none (`1, 2, 2, 4`). Default true. */
+    ties?: boolean;
+    /** `given` (the default) keeps the order of the entries; `points` puts the most points first. */
+    sort?: "given" | "points";
+    /** Write each entry's own `category` in the second line. */
+    categories?: boolean;
+    /** Draw a club's (or the athlete's) initials on a badge for an entry with no flag or mark, even where no entry has one. Default: only where some entry has a flag or mark. */
+    badge?: boolean;
+}
+/** The ranks of a list, in order: an entry's own `rank`, else its position, with equal points sharing a rank; `null` for a champion row. Pure; takes the list as it is ordered. */
+export declare function rankingRanks(entries: readonly RankingEntry[], options?: {
+    ties?: boolean;
+}): (number | null)[];
+/** A category as a heading ("U18 · Men -60 kg"): an age group, a sex and a weight, any of them, joined by a dot. A weight is `-60` or `+100` (kg) or any text. */
+export declare function rankingCategoryLabel(category: {
+    age?: string;
+    sex?: "men" | "women" | "open";
+    weight?: string;
+}, locale?: string): string;
+/** 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;
+/**
+ * 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.
+ */
+export declare function rankingList(source: RankingSource, options?: RankingOptions): string;

package/dist/ranking.js

@@ -0,0 +1,391 @@
+/**
+ * Ranking lists for any ranked sport, drawn from the caller's data (a provincial or club feed, a federation's list): a title and a category, then the entries as a podium (the top
+ * three in gold, silver and bronze rows) above a compact list, as one featured row above two columns, or as a plain list. Text first: rank, flag, name, club, points and the
+ * movement since the last list, with no photo slot to leave empty. A champion row ("C"), an interim champion, newly ranked athletes ("NR"), tied ranks and paging are in.
+ * Static SVG for a given state, like every drawing here.
+ */
+import { arrow, boardFrame, boardWrap, bw, clampN, fitSize, label, pill } from "./rank-kit.js";
+import { fill, voiceOf } from "./locales.js";
+import { drawMark } from "./marks.js";
+import { abbreviate, fit, num } from "./text.js";
+/** The ranks of a list, in order: an entry's own `rank`, else its position, with equal points sharing a rank; `null` for a champion row. Pure; takes the list as it is ordered. */
+export function rankingRanks(entries, options = {}) {
+    const ties = options.ties ?? true;
+    const out = [];
+    let seen = 0;
+    let last = null;
+    for (const e of entries) {
+        if (e.champion) {
+            out.push(null);
+            continue;
+        }
+        seen += 1;
+        let rank = seen;
+        if (e.rank !== undefined)
+            rank = e.rank;
+        else if (ties && last && typeof e.points === "number" && last.points === e.points)
+            rank = last.rank;
+        out.push(rank);
+        last = { rank, points: e.points };
+    }
+    return out;
+}
+/** A category as a heading ("U18 · Men -60 kg"): an age group, a sex and a weight, any of them, joined by a dot. A weight is `-60` or `+100` (kg) or any text. */
+export function rankingCategoryLabel(category, locale) {
+    const v = voiceFor(locale);
+    const w = v.words;
+    const parts = [];
+    if (category.age)
+        parts.push(category.age);
+    const sex = category.sex === "men" ? w.judoMen : category.sex === "women" ? w.judoWomen : undefined;
+    const kg = category.weight === undefined ? undefined : /^[-+]\d{2,3}$/.test(category.weight) ? fill(category.weight.startsWith("+") ? w.judoWeightOver : w.judoWeightClass, { sex: sex ?? "", w: category.weight.slice(1) }).trim() : [sex, category.weight].filter(Boolean).join(" ");
+    if (kg)
+        parts.push(kg);
+    else if (sex)
+        parts.push(sex);
+    return parts.join(" · ");
+}
+const voiceFor = (locale) => voiceOf(locale === undefined ? {} : { locale });
+const nameText = (n, style, v) => {
+    if (typeof n === "string")
+        return n;
+    const given = (n.given ?? "").trim();
+    const sur = style === "as-is" ? n.surname.trim() : v.upper(n.surname.trim());
+    if (!given)
+        return sur;
+    return style === "given-first" || style === "as-is" ? `${given} ${sur}` : `${sur} ${given}`;
+};
+const pointsText = (p, precision, v) => {
+    if (p === undefined || p === null)
+        return "";
+    if (typeof p === "string")
+        return p;
+    if (!Number.isFinite(p))
+        return "";
+    return precision === undefined ? v.number(p) : new Intl.NumberFormat(v.locale.tag, { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(p);
+};
+function validate(source, options) {
+    if (!source || !Array.isArray(source.entries))
+        throw new RangeError("taisen-brackets: a ranking needs a list of entries");
+    source.entries.forEach((e, i) => {
+        const nm = e?.name;
+        const ok = typeof nm === "string" ? nm.trim() !== "" : !!nm && typeof nm === "object" && typeof nm.surname === "string" && nm.surname.trim() !== "";
+        if (!ok)
+            throw new RangeError(`taisen-brackets: entry ${i + 1} of the ranking needs a name`);
+        if (e.rank !== undefined && !(Number.isInteger(e.rank) && e.rank >= 1))
+            throw new RangeError(`taisen-brackets: the rank of ${typeof nm === "string" ? nm : nm.surname} is a whole number from 1, not ${JSON.stringify(e.rank)}`);
+        if (e.change !== undefined && e.change !== "new" && !Number.isInteger(e.change))
+            throw new RangeError(`taisen-brackets: the change of ${typeof nm === "string" ? nm : nm.surname} is a whole number of places or "new", not ${JSON.stringify(e.change)}`);
+        if (e.points !== undefined && typeof e.points !== "number" && typeof e.points !== "string")
+            throw new RangeError(`taisen-brackets: the points of ${typeof nm === "string" ? nm : nm.surname} are a number or a text`);
+    });
+    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("a ranking's style", options.style, ["podium", "list", "featured"]);
+    oneOf("movement", options.movement, ["arrow", "row", "both", "none"]);
+    oneOf("nameStyle", options.nameStyle, ["surname-first", "given-first", "as-is"]);
+    oneOf("rankStyle", options.rankStyle, ["plain", "hash"]);
+    oneOf("sort", options.sort, ["given", "points"]);
+    oneOf("columns", options.columns, [1, 2]);
+    if (options.big !== undefined && !(Number.isInteger(options.big) && options.big >= 0 && options.big <= 3))
+        throw new RangeError("taisen-brackets: big is a whole number from 0 to 3");
+    if (options.rows !== undefined && !(Number.isInteger(options.rows) && options.rows >= 1 && options.rows <= 100))
+        throw new RangeError("taisen-brackets: rows is a whole number from 1 to 100");
+    if (options.page !== undefined && !(Number.isInteger(options.page) && options.page >= 0))
+        throw new RangeError("taisen-brackets: page is a whole number from 0");
+    if (options.precision !== undefined && !(Number.isInteger(options.precision) && options.precision >= 0 && options.precision <= 6))
+        throw new RangeError("taisen-brackets: precision is a whole number from 0 to 6");
+}
+/** The entries in the order they are drawn, with their ranks. */
+function ordered(source, options) {
+    const list = options.sort === "points"
+        ? source.entries.map((e, i) => ({ e, i })).sort((a, b) => (a.e.champion ? 0 : 1) - (b.e.champion ? 0 : 1) || (typeof b.e.points === "number" ? b.e.points : -Infinity) - (typeof a.e.points === "number" ? a.e.points : -Infinity) || a.i - b.i).map((x) => x.e)
+        : [...source.entries];
+    const ranks = rankingRanks(list, options.ties === undefined ? {} : { ties: options.ties });
+    return list.map((e, i) => ({ e, rank: ranks[i] }));
+}
+/** The ranking as a sentence, the drawing's description. */
+export function describeRanking(source, options = {}) {
+    const vv = voiceOf(options);
+    const w = vv.words;
+    const parts = [source.title ?? w.rankTitle];
+    if (source.category)
+        parts.push(source.category);
+    if (source.date)
+        parts.push(source.date);
+    const all = ordered(source, options);
+    const start = options.rows ? (options.page ?? 0) * options.rows : 0;
+    const shown = options.rows ? all.slice(start, start + options.rows) : all;
+    if (shown.length === 0)
+        parts.push(w.rankNone);
+    for (const { e, rank } of shown) {
+        const bits = [e.champion ? (e.champion === "interim" ? w.rankInterimLong : w.rankChampionLong) : String(rank), nameText(e.name, options.nameStyle ?? "surname-first", vv)];
+        const detail = [e.club, e.country].filter(Boolean).join(", ");
+        if (detail)
+            bits.push(detail);
+        const p = pointsText(e.points, options.precision, vv);
+        if (p)
+            bits.push(`${p} ${w.rankPoints}`);
+        if (e.change === "new")
+            bits.push(w.rankNewLong);
+        else if (typeof e.change === "number" && e.change !== 0)
+            bits.push(fill(e.change > 0 ? w.rankUp : w.rankDown, { n: vv.number(Math.abs(e.change)) }));
+        parts.push(bits.join(w.rankJoin));
+    }
+    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 } : {}) });
+/**
+ * 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.
+ */
+export function rankingList(source, options = {}) {
+    validate(source, options);
+    const style = options.style ?? "podium";
+    const f = boardFrame(options, [source, style, options.big, options.columns, options.split, options.rows, options.page, options.medals, options.movement, options.nameStyle, options.rankStyle, options.precision, options.ties, options.sort, options.categories, options.badge]);
+    const { W, H, v } = f;
+    const w = v.words;
+    const unit = Math.min(W, H);
+    const nameStyle = options.nameStyle ?? "surname-first";
+    const movement = options.movement ?? "arrow";
+    const all = ordered(source, options);
+    const hasChampion = all.some((x) => x.e.champion);
+    const medals = options.medals ?? (style !== "list" && !hasChampion);
+    const columns = options.columns ?? (style === "featured" ? 2 : 1);
+    const page = options.page ?? 0;
+    const bigWanted = page > 0 ? 0 : options.big ?? (style === "podium" ? 3 : style === "featured" ? 1 : 0);
+    // The box the content is drawn in: as wide as a row reads well, centred.
+    const pad = Math.round(unit * 0.035);
+    const split = bigWanted > 0 && all.length - page * (options.rows ?? 0) > Math.min(bigWanted, all.length) && columns === 1 && W / H >= 1.45 && options.split !== false;
+    const boxW = Math.min(W - pad * 2, columns === 2 || split ? W - pad * 2 : unit * 1.3);
+    const bx = (W - boxW) / 2;
+    // The header.
+    const title = source.title ?? w.rankTitle;
+    const hs = clampN(unit * 0.05, 18, 70);
+    const cs = hs * 0.58;
+    let y = pad;
+    const body = [];
+    const dateText = source.date ?? "";
+    const dateW = dateText ? Math.min(boxW * 0.4, bw(dateText, cs) + 4) : 0;
+    const titleAvail = boxW - (dateW ? dateW + pad : 0);
+    const tsz = fitSize(title, hs, titleAvail, 0.5);
+    body.push(label(bx, y + hs * 0.85, tsz, fit(title, tsz, titleAvail + 1, bw), "rk-ink", "start", 800));
+    if (dateText)
+        body.push(label(bx + boxW, y + hs * 0.85, cs, fit(dateText, cs, dateW, bw), "rk-sub", "end", 700));
+    y += hs * 1.05;
+    const catText = source.category ?? "";
+    // The page's range sits on the second line at the right.
+    const total = all.length;
+    const perPage = options.rows;
+    const fromIdx = perPage ? page * perPage : 0;
+    if (catText) {
+        const p = pill(bx, y + cs * 0.7, cs * 1.35, catText, boxW * 0.62, "rk-accent", "rk-accentink");
+        body.push(p.svg);
+    }
+    y += catText ? cs * 1.35 + pad * 0.7 : pad * 0.35;
+    const footerH = source.source ? Math.max(14, unit * 0.026) + pad * 0.5 : 0;
+    const bodyTop = y;
+    const bodyBottom = H - pad - footerH;
+    const avail = bodyBottom - bodyTop;
+    // Which entries fit.
+    const cols = columns;
+    const minComp = Math.max(30, unit * 0.04);
+    const k = cols === 2 && style === "featured" ? 2.3 : 2.1;
+    const GAP = 0.14;
+    // How many entries fit when each compact row is at least `minComp` high.
+    const fitCount = (nBig) => nBig + cols * Math.max(1, Math.floor((split ? avail / minComp : avail / minComp - nBig * (k + GAP)) / (1 + GAP)));
+    const wanted = perPage ?? total - fromIdx;
+    const bigCap = Math.min(bigWanted, Math.max(0, total - fromIdx));
+    const count = Math.max(0, Math.min(wanted, total - fromIdx, perPage ? wanted : fitCount(bigCap)));
+    const slice = all.slice(fromIdx, fromIdx + count);
+    const nBig = Math.min(bigCap, slice.length);
+    const nComp = slice.length - nBig;
+    const rpc = Math.ceil(nComp / cols);
+    const denom = split ? rpc * (1 + GAP) : nBig * (k + GAP) + rpc * (1 + GAP);
+    const maxComp = unit * 0.11;
+    const compH = denom > 0 ? Math.min(maxComp, avail / denom) : maxComp;
+    // Side by side, the big rows stack in their own panel and take its whole height; stacked, they are `k` times a compact row.
+    const bigH = split ? Math.min(unit * 0.27, avail / (nBig * (1 + GAP))) : compH * k;
+    const gap = compH * GAP;
+    const bigGap = split ? bigH * GAP : gap;
+    const leftW = split ? Math.round((boxW - pad) * 0.44) : boxW;
+    // Rows, worked out.
+    const marksAny = options.badge === true || slice.some((x) => x.e.flag || x.e.mark);
+    const rows = slice.map(({ e, rank }, i) => {
+        const name = nameText(e.name, nameStyle, v);
+        const medal = medals && rank !== null && rank <= 3 ? rank : e.champion ? 1 : 0;
+        const rankText = e.champion ? (e.champion === "interim" ? w.rankInterim : w.rankChampion) : `${options.rankStyle === "hash" ? "#" : ""}${v.number(rank ?? 0)}`;
+        const second = [e.club ?? e.country, options.categories ? e.category : undefined].filter((x) => !!x).join(" · ");
+        const badge = abbreviate(e.club ?? name).slice(0, 3);
+        return { e, rank, rankText, name, second, code: e.code ?? "", points: pointsText(e.points, options.precision, v), medal, change: e.change, team: teamFor(e, `r${fromIdx + i}`, name, badge) };
+    });
+    const bigRows = rows.slice(0, nBig), compRows = rows.slice(nBig);
+    const bigM = metrics(f, bigRows, bigH, true, movement, marksAny, leftW);
+    const colGap = pad;
+    const colW = split ? boxW - leftW - pad : cols === 2 ? (boxW - colGap) / 2 : boxW;
+    const compM = metrics(f, compRows, compH, false, movement, marksAny, colW);
+    let cy = bodyTop;
+    bigRows.forEach((row) => {
+        drawRow(body, f, { x: bx, y: cy, w: leftW, h: bigH }, row, bigM, true, movement);
+        cy += bigH + bigGap;
+    });
+    const compTop = split ? bodyTop : cy;
+    const compX = split ? bx + leftW + pad : bx;
+    compRows.forEach((row, i) => {
+        const col = Math.floor(i / rpc), idx = i % rpc;
+        drawRow(body, f, { x: compX + col * (colW + colGap), y: compTop + idx * (compH + gap), w: colW, h: compH }, row, compM, false, movement);
+    });
+    if (rows.length === 0)
+        body.push(label(bx, bodyTop + hs, cs, w.rankNone, "rk-sub", "start", 700));
+    // The range at the right of the category line, where entries are paged.
+    if (perPage && total > perPage && rows.length) {
+        const t = fill(w.rankRange, { a: v.number(fromIdx + 1), b: v.number(fromIdx + rows.length), n: v.number(total) });
+        body.push(label(bx + boxW, bodyTop - pad * 0.7 - cs * 0.3, cs * 0.85, fit(t, cs * 0.85, boxW * 0.35, bw), "rk-sub", "end", 700));
+    }
+    if (source.source) {
+        const fs = Math.max(12, unit * 0.022);
+        body.push(label(bx, H - pad - fs * 0.2, fs, fit(source.source, fs, boxW, bw), "rk-sub", "start", 600));
+    }
+    const desc = describeRanking(source, options);
+    return boardWrap(f, options.title ?? [title, source.category].filter(Boolean).join(": "), desc, body, "ranking");
+}
+/**
+ * The widths of the columns a class of rows shares, so that the ranks, arrows, flags and points line up down the list. Where the row is narrow for them the type steps down until the
+ * name has room, and the code (which only repeats the flag) goes first.
+ */
+function metrics(f, rows, h, big, movement, marksAny, rowW) {
+    const v = f.v;
+    const he = Math.min(h, rowW / (big ? 4.4 : 7.2));
+    const showMove = movement !== "none" && rows.some((r) => r.change !== undefined);
+    const moveText = (r) => (r.change === "new" ? v.words.rankNew : typeof r.change === "number" && r.change !== 0 ? v.number(Math.abs(r.change)) : "");
+    const longest = Math.max(0, ...rows.map((r) => bw(r.name, he * (big ? 0.34 : 0.4) * 0.62)));
+    const need = Math.min(rowW * 0.42, longest);
+    let m;
+    for (const sc of [1, 0.92, 0.84, 0.76, 0.68, 0.6, 0.52]) {
+        const e = he * sc;
+        const pad = e * 0.2;
+        const rs = e * (big ? 0.56 : 0.5);
+        const rankW = Math.max(e * 0.7, ...rows.map((r) => bw(r.rankText, rs))) + e * 0.2;
+        const ms = e * (big ? 0.26 : 0.3);
+        const moveW = showMove ? Math.max(ms * 1.4, ...rows.map((r) => (r.change === "new" ? bw(moveText(r), ms * 0.9) + ms * 0.9 : r.change === undefined ? 0 : ms * 1.1 + ms * 0.35 + bw(moveText(r), ms)))) + e * 0.16 : 0;
+        const d = e * (big ? 0.52 : 0.6);
+        const markW = marksAny ? d + e * 0.2 : 0;
+        const ps = e * 0.4;
+        const pointsRaw = Math.max(0, ...rows.map((r) => (r.points ? bw(r.points, ps) : 0)));
+        const bigLabel = big && pointsRaw > 0 ? bw(v.upper(v.words.rankPoints), Math.max(ps * 0.3, 10)) : 0;
+        const suffixW = !big && pointsRaw > 0 ? bw(v.words.rankPointsShort, Math.max(ps * 0.5, 10)) + ps * 0.3 : 0;
+        const pointsW = Math.max(pointsRaw + suffixW, bigLabel);
+        const cs = e * 0.3;
+        const codeW = !big && rows.some((r) => r.code) ? Math.max(...rows.map((r) => bw(r.code, cs))) + e * 0.2 : 0;
+        const ns = e * (big ? 0.34 : 0.4);
+        const ss = e * (big ? 0.19 : 0.26);
+        const fixed = pad * 2 + rankW + moveW + markW + pointsW + (big ? pad * 1.8 : pad * 0.8);
+        const nameCol = Math.min(Math.max(0, ...rows.map((r) => bw(r.name, ns))) + pad, rowW);
+        m = { he: e, rs, rankW, ms, moveW, d, markW, ps, pointsW, ns, ss, cs, codeW: 0, pad, nameCol };
+        if (rowW - fixed >= need) {
+            if (rowW - fixed - codeW >= need * 1.3)
+                m.codeW = codeW;
+            break;
+        }
+    }
+    return m;
+}
+function drawRow(out, f, r, row, m, big, movement) {
+    const { v } = f;
+    const w = v.words;
+    const g = [];
+    const tint = row.medal ? `rk-medal${row.medal}` : "";
+    const mv = typeof row.change === "number" && row.change !== 0 ? (row.change > 0 ? "up" : "down") : "";
+    const tintMove = (movement === "row" || movement === "both") && mv && !row.medal ? `rk-m${mv}` : "";
+    const rx = Math.min(r.h * 0.18, 18);
+    g.push(`<rect class="${["rk-row", tint, tintMove].filter(Boolean).join(" ")}" x="${num(r.x)}" y="${num(r.y)}" width="${num(r.w)}" height="${num(r.h)}" rx="${num(rx)}"${row.medal ? ` fill="url(#${f.scope}-g${row.medal})"` : ""}/>`);
+    const cy = r.y + r.h / 2;
+    let x = r.x + m.pad;
+    const right = r.x + r.w - m.pad;
+    // The rank.
+    const rankCls = row.medal ? `rk-num${row.medal}` : "rk-ink";
+    g.push(label(x + (m.rankW - m.pad * 0.2) / 2, cy + m.rs * 0.36, m.rs, row.rankText, rankCls, "middle", 800));
+    x += m.rankW;
+    // The movement: an arrow and the number of places, or NR.
+    if (m.moveW > 0) {
+        if (row.change === "new") {
+            const p = pill(x, cy, m.ms * 1.35, w.rankNew, m.moveW, "rk-nr", "rk-nrink");
+            g.push(p.svg);
+        }
+        else if (mv && (movement === "arrow" || movement === "both" || movement === "row")) {
+            const n = v.number(Math.abs(row.change));
+            if (movement !== "row") {
+                g.push(arrow(x + m.ms * 0.55, cy, m.ms * 0.85, mv === "up"));
+                g.push(label(x + m.ms * 1.1 + m.ms * 0.3, cy + m.ms * 0.36, m.ms, n, mv === "up" ? "rk-up" : "rk-down", "start", 800));
+            }
+            else {
+                g.push(label(x, cy + m.ms * 0.36, m.ms, `${mv === "up" ? "+" : "−"}${n}`, mv === "up" ? "rk-up" : "rk-down", "start", 800));
+            }
+        }
+        else if (row.change === 0) {
+            g.push(label(x + m.ms * 0.55, cy + m.ms * 0.36, m.ms, "–", "rk-sub", "middle", 800));
+        }
+        x += m.moveW;
+    }
+    // The flag, a mark, or initials.
+    if (m.markW > 0) {
+        g.push(drawMark(row.team, x + m.d / 2, cy, m.d, f.ctx));
+        x += m.markW;
+    }
+    // The points, at the right.
+    let nameRight = right;
+    if (m.pointsW > 0 && row.points) {
+        if (big) {
+            const sepX = right - m.pointsW - m.pad * 0.9;
+            g.push(`<line class="rk-sep" x1="${num(sepX)}" x2="${num(sepX)}" y1="${num(r.y + r.h * 0.2)}" y2="${num(r.y + r.h * 0.8)}"/>`);
+            const ps = fitSize(row.points, m.ps, m.pointsW, 0.5);
+            const ls = Math.max(m.ps * 0.3, 10);
+            g.push(label(right - m.pointsW / 2, cy + ps * 0.2, ps, row.points, "rk-ink", "middle", 800));
+            g.push(label(right - m.pointsW / 2, cy + ps * 0.2 + ls * 1.6, ls, fit(v.upper(w.rankPoints), ls, m.pointsW, bw), "rk-sub", "middle", 700, ' letter-spacing=".12em"'));
+            nameRight = sepX - m.pad * 0.9;
+        }
+        else {
+            const suffix = w.rankPointsShort;
+            const sz = Math.max(m.ps * 0.5, 10);
+            const sw = bw(suffix, sz);
+            g.push(label(right, cy + sz * 0.36, sz, suffix, "rk-sub", "end", 700));
+            g.push(label(right - sw - m.ps * 0.3, cy + m.ps * 0.36, m.ps, row.points, "rk-ink", "end", 800));
+            nameRight = right - m.pointsW - m.pad * 0.8;
+        }
+    }
+    else if (m.pointsW > 0) {
+        nameRight = right - m.pointsW - m.pad * 0.8;
+    }
+    // The code, then the name and what goes under or beside it.
+    let codeX = nameRight;
+    if (m.codeW > 0 && !big) {
+        codeX = nameRight - m.codeW;
+        if (row.code)
+            g.push(label(codeX + m.codeW, cy + m.cs * 0.36, m.cs, row.code, "rk-sub", "end", 700));
+        nameRight = codeX - m.pad * 0.3;
+    }
+    const avail = Math.max(m.ns, nameRight - x);
+    const twoLine = big || m.he >= 42;
+    if (twoLine && row.second) {
+        const ns = fitSize(row.name, m.ns, avail, 0.5);
+        const ss = fitSize(row.second, m.ss, avail, 0.6);
+        const block = ns * 1.05 + ss * 1.3;
+        const top = cy - block / 2;
+        g.push(label(x, top + ns * 0.86, ns, fit(row.name, ns, avail + 1, bw), "rk-ink", "start", 800));
+        g.push(label(x, top + ns * 1.05 + ss * 1.05, ss, fit(row.second, ss, avail + 1, bw), "rk-sub", "start", 600));
+    }
+    else {
+        const club = row.second;
+        const nameAvail0 = Math.min(avail, m.nameCol + m.pad);
+        const clubW = club && avail - nameAvail0 > m.he * 3 ? avail - nameAvail0 : 0;
+        const nameAvail = clubW ? nameAvail0 : avail;
+        const ns = fitSize(row.name, m.ns, nameAvail, 0.55);
+        g.push(label(x, cy + ns * 0.36, ns, fit(row.name, ns, nameAvail + 1, bw), "rk-ink", "start", 800));
+        if (clubW) {
+            const ss = m.ss * 1.05;
+            g.push(label(x + nameAvail, cy + ss * 0.36, ss, fit(club, ss, clubW + 1, bw), "rk-sub", "start", 600));
+        }
+    }
+    out.push(`<g class="rk-entry">${g.join("")}</g>`);
+}

package/dist/types.d.ts

@@ -397,6 +397,23 @@ export interface Words {
     /** The default titles of the contest card and of the mat queue board. */
     judoCardTitle: string;
     judoQueueTitle: string;
+    /** Ranking lists (`rankingList`): the heading, "points" and its short form, the champion's mark ("C") and its words, the interim champion's, newly ranked ("NR") and its words, the movement in a sentence (`{n}` places), no change, which entries are shown (`{a}`, `{b}`, `{n}`) and an empty list. */
+    rankTitle: string;
+    rankPoints: string;
+    rankPointsShort: string;
+    rankChampion: string;
+    rankChampionLong: string;
+    rankInterim: string;
+    rankInterimLong: string;
+    rankNew: string;
+    rankNewLong: string;
+    rankUp: string;
+    rankDown: string;
+    rankSame: string;
+    rankRange: string;
+    rankNone: string;
+    /** What joins the pieces of one entry in the description ("1, NAKAMURA Kenji, 412.50 points"). */
+    rankJoin: 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.10.0";
+export declare const VERSION = "0.11.0";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.10.0",
+  "version": "0.11.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",
@@ -118,7 +118,7 @@
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@johnmorrisdotca/dougu-sports": "0.1.0",
-    "@johnmorrisdotca/hata": "1.5.0",
+    "@johnmorrisdotca/hata": "1.6.2",
     "@playwright/test": "^1.63.0",
     "@types/node": "^24.0.0",
     "eslint": "^9.0.0",