@johnmorrisdotca/taisen-brackets 0.3.0 → 0.5.0

package/dist/road.model.js

@@ -0,0 +1,312 @@
+// The road chart's data, read and checked: the scores split into the two sides, who won each match, the words under each score, the rounds in the order played, and
+// the sentences and the table that say the same in words. A tournament (`layoutBracket`'s input) is turned into the two finalists' roads here. Nothing here draws.
+import { layoutBracket } from "./layout.js";
+import { fill, voiceOf } from "./locales.js";
+import { noteParts } from "./matchup.js";
+import { localizedLayout } from "./render.js";
+import { roundLabel } from "./rounds.js";
+import { abbreviate, esc } from "./text.js";
+const own = (object, key) => object !== undefined && Object.prototype.hasOwnProperty.call(object, key);
+/** A number from a number or from text that is one, else undefined. */
+export function numeric(value) {
+    if (typeof value === "number")
+        return Number.isFinite(value) ? value : undefined;
+    if (typeof value === "string" && /^\s*-?\d+(?:\.\d+)?\s*$/.test(value))
+        return Number(value);
+    return undefined;
+}
+const written = (value) => (value === undefined || value === null ? "" : String(value).trim());
+/** The two sides of a score. */
+function split(score) {
+    if (Array.isArray(score) && score.length === 2)
+        return { mine: written(score[0]), theirs: written(score[1]) };
+    const text = written(score);
+    const parts = /^(\S+?)\s*[-–—:]\s*(\S+)$/.exec(text);
+    if (parts !== null)
+        return { mine: parts[1], theirs: parts[2] };
+    return { mine: "", theirs: "", whole: text };
+}
+function resultOf(mine, theirs, pens) {
+    const a = numeric(mine);
+    const b = numeric(theirs);
+    if (a === undefined || b === undefined)
+        return "unknown";
+    if (a !== b)
+        return a > b ? "win" : "loss";
+    const p = pens === undefined ? undefined : [numeric(pens[0]), numeric(pens[1])];
+    if (p !== undefined && p[0] !== undefined && p[1] !== undefined && p[0] !== p[1])
+        return p[0] > p[1] ? "win" : "loss";
+    return "draw";
+}
+function pensOf(value) {
+    return Array.isArray(value) && value.length === 2 && written(value[0]) !== "" && written(value[1]) !== "" ? [written(value[0]), written(value[1])] : undefined;
+}
+function viewOf(m, opponent, round, knockout) {
+    const { mine, theirs, whole } = split(m.score);
+    const pens = pensOf(m.pens);
+    const decided = m.decidedBy === "aet" || m.decidedBy === "pens" || m.decidedBy === "ft" ? m.decidedBy : pens !== undefined ? "pens" : "ft";
+    const note = typeof m.note === "string" ? m.note.trim() : undefined;
+    return {
+        round,
+        opponent,
+        mine,
+        theirs,
+        ...(whole === undefined ? {} : { whole }),
+        result: resultOf(mine, theirs, pens),
+        decided,
+        ...(pens === undefined ? {} : { pens }),
+        ...(note === undefined ? {} : { note }),
+        says: knockout || m.decidedBy !== undefined || pens !== undefined,
+        ...("homeFirst" in m && typeof m.homeFirst === "boolean" ? { homeFirst: m.homeFirst } : {}),
+    };
+}
+/** The rounds of two paths, the earliest first: a round both have is once, and a round only one has stays after the round before it. */
+export function mergeRounds(paths) {
+    const out = [];
+    for (const path of paths) {
+        let at = 0;
+        for (const key of path) {
+            const found = out.indexOf(key);
+            if (found >= 0)
+                at = found + 1;
+            else {
+                out.splice(at, 0, key);
+                at += 1;
+            }
+        }
+    }
+    return out;
+}
+const isTeam = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && typeof value.name === "string";
+/** A road chart's team as a `Team`, named in the language: `logo` is the mark, and a team with no id is its name. */
+function teamOf(t, voice) {
+    const team = { id: t.id ?? t.name, name: t.name };
+    for (const key of ["abbr", "seed", "color", "names", "region", "flag"])
+        if (t[key] !== undefined)
+            Object.assign(team, { [key]: t[key] });
+    const mark = t.mark ?? t.logo;
+    if (mark !== undefined)
+        team.mark = mark;
+    return { ...team, name: voice.team(team) };
+}
+/** What a tournament gives a road chart: the two finalists with the matches they played, the final if it was played, and the names of the rounds. */
+function fromTournament(input, options, voice) {
+    const layout = localizedLayout("ties" in input && "rounds" in input && "sides" in input ? input : layoutBracket(input), voice);
+    const fi = layout.finalIndex;
+    if (fi === null)
+        throw new TypeError("roadToFinal: the tournament has no final to draw the road to");
+    const finalTie = layout.ties[fi];
+    let order = [0, 1];
+    if (options.team !== undefined) {
+        const at = finalTie.sides.findIndex((s) => s !== null && String(s.id) === String(options.team));
+        if (at < 0)
+            throw new RangeError(`roadToFinal: ${JSON.stringify(options.team)} is not a side of the final, so its road does not lead there`);
+        if (at === 1)
+            order = [1, 0];
+    }
+    const labels = { final: roundLabel(layout, layout.rounds, options.roundNames, voice) };
+    const matchOf = (team, tie) => {
+        const at = tie.sides[0]?.id === team.id ? 0 : 1;
+        const other = tie.sides[at === 0 ? 1 : 0];
+        const r = tie.result;
+        if (other === null || r.score === null)
+            return null;
+        const note = r.kind === "game" ? undefined : noteParts(tie, voice).join(" · ");
+        const key = String(tie.round);
+        if (tie.round > 0)
+            labels[key] = roundLabel(layout, tie.round, options.roundNames, voice);
+        return {
+            round: key,
+            opponent: other,
+            score: [r.score[at], r.score[at === 0 ? 1 : 0]],
+            ...(r.pens ? { pens: [r.pens[at], r.pens[at === 0 ? 1 : 0]] } : {}),
+            decidedBy: r.pens ? "pens" : r.extraTime ? "aet" : "ft",
+            ...(note !== undefined ? { note } : {}),
+        };
+    };
+    const finalist = (k) => {
+        const team = finalTie.sides[k] ?? { id: "tbd", name: voice.words.tbd };
+        const mine = finalTie.sides[k] === null ? [] : layout.ties.filter((t) => t.index !== fi && !t.third && t.sides.some((s) => s !== null && s.id === team.id));
+        const sorted = [...mine].sort((a, b) => a.round - b.round || (a.date < b.date ? -1 : a.date > b.date ? 1 : a.index - b.index));
+        const matches = sorted.map((t) => ({ tie: t, match: matchOf(team, t) })).filter((m) => m.match !== null);
+        return {
+            ...team,
+            path: matches.filter((m) => m.tie.round > 0).map((m) => m.match),
+            group: matches.filter((m) => m.tie.round <= 0).map(({ match }) => ({ ...match, round: undefined })),
+        };
+    };
+    const first = order[0];
+    const finalists = [finalist(first), finalist(order[1])];
+    let final;
+    const fr = finalTie.result;
+    if (fr.score !== null) {
+        const second = first === 0 ? 1 : 0;
+        final = {
+            score: [fr.score[first], fr.score[second]],
+            ...(fr.pens ? { pens: [fr.pens[first], fr.pens[second]] } : {}),
+            decidedBy: fr.pens ? "pens" : fr.extraTime ? "aet" : "ft",
+            ...(fr.kind === "game" ? {} : { note: noteParts(finalTie, voice).join(" · ") }),
+        };
+    }
+    return { finalists, final, labels };
+}
+/** Read and check what `roadToFinal` was given. */
+export function readModel(input, options) {
+    const voice = voiceOf(options);
+    const w = voice.words;
+    let given;
+    let derived = {};
+    let tournamentFinal;
+    // A list of teams (nothing with `sides`, which every matchup has) is the finalists; a list of matchups, `{ matchups, teams }` or a layout is a tournament.
+    const teamsOnly = Array.isArray(input) && input.length > 0 && input.every((f) => typeof f === "object" && f !== null && !("sides" in f));
+    if (teamsOnly && input.length !== 2)
+        throw new TypeError("roadToFinal takes the two finalists as a list of two teams, each with a path");
+    else if (teamsOnly)
+        given = input;
+    else if (typeof input === "object" && input !== null) {
+        const made = fromTournament(input, options, voice);
+        given = made.finalists;
+        derived = made.labels;
+        tournamentFinal = made.final;
+    }
+    else
+        throw new TypeError("roadToFinal takes the two finalists as a list of two teams, each with a path, or a tournament");
+    const teams = given;
+    for (const [i, f] of teams.entries()) {
+        if (!isTeam(f))
+            throw new TypeError(`Finalist ${i + 1} is a team with a name`);
+        if (!Array.isArray(f.path))
+            throw new TypeError(`Finalist ${i + 1} (${f.name}) needs a path: the list of its matches before the final`);
+        if (f.group !== undefined && !Array.isArray(f.group))
+            throw new TypeError(`The group of ${f.name} is a list of matches`);
+        for (const m of [...f.path, ...(f.group ?? [])]) {
+            if (typeof m !== "object" || m === null || !isTeam(m.opponent) || m.score === undefined || m.score === null)
+                throw new TypeError(`Every match of ${f.name} has an opponent (a team with a name) and a score`);
+        }
+        for (const m of f.path)
+            if (typeof m.round !== "string" || m.round.trim() === "")
+                throw new TypeError(`Every match of the path of ${f.name} has a round`);
+    }
+    const finalists = teams.map((f) => teamOf(f, voice));
+    const path = teams.map((f) => {
+        const map = new Map();
+        for (const m of f.path)
+            map.set(m.round.trim(), viewOf(m, teamOf(m.opponent, voice), m.round.trim(), true));
+        return map;
+    });
+    const group = teams.map((f) => (f.group ?? []).map((m) => viewOf(m, teamOf(m.opponent, voice), "", false)));
+    const rounds = mergeRounds(teams.map((f) => f.path.map((m) => m.round.trim())));
+    const labels = options.labels;
+    const known = {
+        "round-of-32": voice.round("Round of 32"),
+        "round-of-16": voice.round("Round of 16"),
+        "quarter-final": w.roadQuarterFinal,
+        "semi-final": w.roadSemiFinal,
+        final: voice.round("Final"),
+    };
+    const model = {
+        voice,
+        words: w,
+        finalists,
+        group,
+        path,
+        rounds,
+        label: (key) => (own(labels, key) && typeof labels?.[key] === "string" ? labels[key] : own(derived, key) ? derived[key] : own(known, key) ? known[key] : key),
+        groupLabel: typeof options.groupLabel === "string" && options.groupLabel.trim() !== "" ? options.groupLabel.trim() : w.roadGroup,
+        title: typeof options.title === "string" && options.title.trim() !== "" ? options.title.trim() : w.roadTitle,
+        subtitle: typeof options.subtitle === "string" && options.subtitle.trim() !== "" ? options.subtitle.trim() : typeof options.title === "string" && options.title.trim() !== "" ? w.roadTitle : undefined,
+    };
+    const final = options.final ?? tournamentFinal;
+    if (final !== undefined) {
+        if (typeof final !== "object" || final === null || final.score === undefined || final.score === null)
+            throw new TypeError("The final is { score }: the first finalist's score first");
+        model.final = viewOf(final, finalists[1], "final", true);
+    }
+    return model;
+}
+/** The words under a score: FT, AET or the shoot-out (the first side's numbers first), a note in their place, or nothing. */
+export function decidedWords(view, w, mineFirst) {
+    if (view.note !== undefined)
+        return view.note;
+    if (!view.says)
+        return "";
+    if (view.decided === "aet")
+        return w.roadAet;
+    if (view.decided === "pens" && view.pens !== undefined)
+        return fill(w.roadPens, mineFirst ? { a: view.pens[0], b: view.pens[1] } : { a: view.pens[1], b: view.pens[0] });
+    return view.decided === "pens" ? w.roadAet : w.roadFt;
+}
+/** The score of a match as one text, the first side's first. */
+export function scoreText(view, w, mineFirst = true) {
+    if (view.whole !== undefined)
+        return view.whole;
+    return fill(w.scoreText, mineFirst ? { a: view.mine, b: view.theirs } : { a: view.theirs, b: view.mine });
+}
+/** The abbreviation written under a mark: the team's own, else made from its name. */
+export function codeOf(team) {
+    return (typeof team.abbr === "string" && team.abbr.trim() !== "" ? team.abbr.trim() : abbreviate(String(team.name ?? ""))).slice(0, 5).toLocaleUpperCase("en");
+}
+function record(name, group, path) {
+    const all = [...group, ...path.values()];
+    let scored = 0;
+    let conceded = 0;
+    for (const v of all) {
+        const a = numeric(v.mine);
+        const b = numeric(v.theirs);
+        if (a !== undefined && b !== undefined) {
+            scored += a;
+            conceded += b;
+        }
+    }
+    return { name, matches: all.length, won: all.filter((v) => v.result === "win").length, drawn: all.filter((v) => v.result === "draw").length, lost: all.filter((v) => v.result === "loss").length, scored, conceded };
+}
+/** The numbers behind the chart. */
+export function totalsOf(model) {
+    const [a, b] = model.finalists;
+    const final = model.final;
+    const champion = final === undefined || final.result === "unknown" || final.result === "draw" ? null : final.result === "win" ? a.name : b.name;
+    return { finalists: [record(a.name, model.group[0], model.path[0]), record(b.name, model.group[1], model.path[1])], rounds: [...model.rounds], played: final !== undefined, champion };
+}
+/** The chart's accessible name. */
+export function nameOf(model) {
+    const heading = [model.title, model.subtitle].filter((part) => part !== undefined).join(", ");
+    return fill(model.words.roadName, { a: model.finalists[0].name, b: model.finalists[1].name, title: heading });
+}
+/** What the chart shows, in a sentence or two. */
+export function summaryOf(model) {
+    const w = model.words;
+    const [a, b] = model.finalists;
+    const t = totalsOf(model);
+    const parts = [fill(w.roadSummary, { a: a.name, b: b.name, an: model.voice.number(t.finalists[0].matches), bn: model.voice.number(t.finalists[1].matches) })];
+    const final = model.final;
+    if (final === undefined)
+        parts.push(w.roadToPlay);
+    else {
+        parts.push(fill(w.roadFinal, { a: a.name, b: b.name, score: scoreText(final, w), how: decidedWords(final, w, true) || w.roadFt }));
+        if (t.champion !== null)
+            parts.push(fill(w.roadChampion, { name: t.champion }));
+    }
+    return parts.join(" ");
+}
+/** One HTML table with a row for every match: the group stage, the knockout rounds in order, and the final. */
+export function tableOf(model, options = {}) {
+    const w = model.words;
+    const cls = options.className === undefined || options.className.trim() === "" ? "tb-table" : options.className.trim();
+    const [a, b] = model.finalists;
+    const result = (r) => (r === "win" ? w.roadWon : r === "loss" ? w.roadLost : r === "draw" ? w.roadDrew : "");
+    const row = (team, round, v) => `<tr><th scope="row">${esc(team.name)}</th><td>${esc(round)}</td><td>${esc(v.opponent.name)}</td><td>${esc(scoreText(v, w))}</td><td>${esc(decidedWords(v, w, true))}</td><td>${esc(result(v.result))}</td></tr>`;
+    const rows = [];
+    for (const [i, team] of [a, b].entries()) {
+        for (const v of model.group[i])
+            rows.push(row(team, model.groupLabel, v));
+        for (const key of model.rounds) {
+            const v = model.path[i].get(key);
+            if (v !== undefined)
+                rows.push(row(team, model.label(key), v));
+        }
+    }
+    if (model.final !== undefined)
+        rows.push(row(a, model.label("final"), { ...model.final, opponent: b }));
+    const head = [w.roadTableTeam, w.columnRound, w.roadTableOpponent, w.roadTableScore, w.roadTableDecided, w.roadTableResult].map((name) => `<th scope="col">${esc(name)}</th>`).join("");
+    return `<table class="${esc(cls)}" lang="${esc(model.voice.locale.code)}" data-kind="road"><caption>${esc(fill(w.roadCaption, { a: a.name, b: b.name }))}</caption><thead><tr>${head}</tr></thead><tbody>${rows.join("")}</tbody></table>`;
+}

package/dist/road.types.d.ts

@@ -0,0 +1,115 @@
+import type { BracketInput, BracketLayout, DrawOptions, Matchup, SideId, SizeName, Team } from "./types.ts";
+/** A team of a road chart: a `Team` whose `id` is optional (a standalone finalist needs only a name), with `logo` as another name for `mark`. */
+export type RoadTeam = Omit<Team, "id" | "group"> & {
+    id?: SideId;
+    /** The address or inline SVG of a flag or a crest: another name for `mark`. */
+    logo?: string;
+};
+/** A match's score from the finalist's side: `[for, against]` (numbers, or text such as a series' `4`), or one text, `"4-2"`, that is split at its dash. */
+export type RoadScore = readonly [number | string, number | string] | string;
+/** How a match was decided: `ft` (full time, the default), `aet` (after extra time) or `pens` (a shoot-out after extra time). */
+export type RoadDecided = "ft" | "aet" | "pens";
+/** One match on a finalist's way. */
+export interface RoadMatch {
+    /** The round, as a key. `round-of-32`, `round-of-16`, `quarter-final` and `semi-final` have words in every language; any other key is written as it is, or as `options.labels` names it. */
+    round: string;
+    /** The team it played: its name, abbreviation, `mark` or `flag`, and `color`. */
+    opponent: RoadTeam;
+    /** The score, the finalist's first: `[2, 1]` is a 2-1 win. */
+    score: RoadScore;
+    /** How it was decided: `ft` by default, or `pens` when `pens` is given. Written under the score: FT, AET, or the shoot-out. */
+    decidedBy?: RoadDecided;
+    /** The shoot-out, the finalist's first: `[4, 3]`. */
+    pens?: readonly [number | string, number | string];
+    /** The order of the pair, left to right: `true` the finalist first, `false` its opponent first. By default the finalist is at the outer edge of its side, so that the two paths mirror each other. */
+    homeFirst?: boolean;
+    /** Words to write under the score in place of FT, AET or the shoot-out (`Game 6`, `in 7`). An empty text writes nothing. */
+    note?: string;
+}
+/** One match of the group stage: as a knockout match, without a round. */
+export type RoadGroupMatch = Omit<RoadMatch, "round"> & {
+    round?: string;
+};
+/** A finalist: a team and the matches it played on the way, the earliest first. */
+export interface RoadFinalist extends RoadTeam {
+    /** The knockout matches before the final, the earliest first. */
+    path: readonly RoadMatch[];
+    /** The group stage, in the order played. A row of small marks, codes and scores at the foot. */
+    group?: readonly RoadGroupMatch[];
+}
+/** The final, when it has been played. */
+export interface RoadFinal {
+    /** The score, the first finalist's first. */
+    score: RoadScore;
+    decidedBy?: RoadDecided;
+    /** The shoot-out, the first finalist's first. */
+    pens?: readonly [number | string, number | string];
+    note?: string;
+}
+/** The sizes of the road chart are the bracket's: `card` (the default here), `square`, `wide` (the finalists at the two ends) and `phone`. */
+export type RoadSize = SizeName;
+/** What `roadToFinal` takes besides the finalists or the tournament. */
+export interface RoadOptions extends Pick<DrawOptions, "locale" | "words" | "teamName" | "roundNames" | "markShape" | "flags" | "flagHref" | "theme" | "background" | "id" | "className"> {
+    /** With a tournament: the finalist whose road is on the left (by team id); the other finalist is its opponent in the final. Left out, the first side of the final. */
+    team?: SideId;
+    /** The tournament, set large at the top. The language's "Road to the final" when missing. */
+    title?: string;
+    /** The line under it. "Road to the final" when a `title` is given. */
+    subtitle?: string;
+    /** The final, if it has been played: its score is written between the two big marks, the winner is brighter, and the table has a row for it. A tournament's own final is used when this is left out. */
+    final?: RoadFinal;
+    /** The names of the rounds, by key, over the language's own words: `{ "first-round": "First round" }`. */
+    labels?: Readonly<Record<string, string>>;
+    /** The group stage's name, over the language's own. */
+    groupLabel?: string;
+    /** `card` (the default), `square`, `wide` or `phone`. */
+    size?: RoadSize;
+    /** Who is brighter: `auto` (the default) the side that won each match, `none` nobody. */
+    winner?: "auto" | "none";
+    /** Write the opponent's three-letter code under its mark. On by default. */
+    codes?: boolean;
+    /** A line at the foot: a source, a credit, "Made-up results". */
+    endnote?: string;
+}
+/** One finalist's record on the way. */
+export interface RoadRecord {
+    name: string;
+    /** Matches played in the group and the knockout rounds (not the final), and how many it won, drew and lost. */
+    matches: number;
+    won: number;
+    drawn: number;
+    lost: number;
+    /** The goals it scored and let in over the matches whose score is a pair of numbers. */
+    scored: number;
+    conceded: number;
+}
+/** The numbers behind a road chart. */
+export interface RoadTotals {
+    finalists: [RoadRecord, RoadRecord];
+    /** The rounds of the chart, the earliest first, as keys. */
+    rounds: string[];
+    /** The final has a score. */
+    played: boolean;
+    /** The winner of the final, or null when it has not been played or is level. */
+    champion: string | null;
+}
+/** What `roadToFinal` takes: the two finalists with their paths, or a tournament (a list of matchups, `{ matchups, teams }` or a layout) whose final has two sides. */
+export type RoadInput = readonly [RoadFinalist, RoadFinalist] | BracketLayout | readonly Matchup[] | BracketInput;
+/** What `roadToFinal` gives back. */
+export interface RoadChart {
+    /** The options the chart was made with: pass changes to `draw`. */
+    options: RoadOptions;
+    /** The chart's accessible name, in the chart's language. */
+    title: string;
+    /** What the chart shows, in a sentence or two, for a caption. */
+    summary: string;
+    /** The numbers behind it. */
+    totals: RoadTotals;
+    /** The drawing as an SVG string. `extra` is laid over the options (`size`, `theme`, `locale`, `labels`, `final`…). */
+    draw(extra?: Partial<RoadOptions>): string;
+    /** One HTML table with a row for every match: the table that stands for the drawing for a screen reader. */
+    table(options?: {
+        className?: string;
+        locale?: RoadOptions["locale"];
+    }): string;
+}

package/dist/road.types.js

@@ -0,0 +1 @@
+export {};

package/dist/text.d.ts

@@ -7,10 +7,23 @@ export declare function esc(text: string | number): string;
  */
 export declare function textWidth(text: string, size: number): number;
 /** The text cut to fit a width, with an ellipsis where it was cut. */
-export declare function fit(text: string, size: number, width: number): string;
+export declare function fit(text: string, size: number, width: number, measure?: (text: string, size: number) => number): string;
 /** A short name for a small box: the initials of a name of several words ("NYR"), else its first three letters; capitals. */
 export declare function abbreviate(name: string): string;
 /** A small, stable hash of a string as lowercase base 36, for ids that depend on the content and nothing else. */
 export declare function hash(text: string): string;
+/** An estimate of the width of a string set in a bold face, in ems; full-width characters are one em. A little generous, so that a name stays inside its place whichever font the page falls back to. */
+export declare function emWidth(text: string, bold?: boolean): number;
+/** The text in capitals when it has Latin letters; any other text is left as it is. */
+export declare function capitals(text: string): string;
+/** The lines a name is set in, the font size that fits them, and the width and height they take. */
+export interface FittedLines {
+    lines: string[];
+    size: number;
+    width: number;
+    height: number;
+}
+/** A name in the biggest size that fits a box, on one line or, at a space, on two (two only when that is clearly bigger). */
+export declare function fitLines(name: string, maxWidth: number, maxHeight: number, maxSize: number): FittedLines;
 /** A number written without float noise: at most two decimals, no trailing zeros. */
 export declare function num(n: number): string;

package/dist/text.js

@@ -29,13 +29,13 @@ export function textWidth(text, size) {
     return em * size;
 }
 /** The text cut to fit a width, with an ellipsis where it was cut. */
-export function fit(text, size, width) {
-    if (textWidth(text, size) <= width)
+export function fit(text, size, width, measure = textWidth) {
+    if (measure(text, size) <= width)
         return text;
     const chars = [...text];
-    while (chars.length > 1 && textWidth(`${chars.join("")}…`, size) > width)
+    while (chars.length > 1 && measure(`${chars.join("")}…`, size) > width)
         chars.pop();
-    return chars.length <= 1 && textWidth(text, size) > width * 2 ? "…" : `${chars.join("").trimEnd()}…`;
+    return chars.length <= 1 && measure(text, size) > width * 2 ? "…" : `${chars.join("").trimEnd()}…`;
 }
 /** A short name for a small box: the initials of a name of several words ("NYR"), else its first three letters; capitals. */
 export function abbreviate(name) {
@@ -53,6 +53,52 @@ export function hash(text) {
     }
     return h.toString(36);
 }
+const NARROW_B = new Set("iIjl!|.,:;'`");
+/** An estimate of the width of a string set in a bold face, in ems; full-width characters are one em. A little generous, so that a name stays inside its place whichever font the page falls back to. */
+export function emWidth(text, bold = true) {
+    let width = 0;
+    for (const ch of text) {
+        const code = ch.codePointAt(0) ?? 0;
+        if (code >= 0x2e80)
+            width += 1.02;
+        else if (ch === " ")
+            width += 0.3;
+        else if (NARROW_B.has(ch))
+            width += 0.34;
+        else if (WIDE.has(ch))
+            width += 0.92;
+        else if (ch >= "0" && ch <= "9")
+            width += 0.62;
+        else if (ch >= "A" && ch <= "Z")
+            width += 0.7;
+        else if (ch === "-" || ch === "–" || ch === "—")
+            width += 0.45;
+        else
+            width += 0.58;
+    }
+    return bold ? width * 1.04 : width;
+}
+/** The text in capitals when it has Latin letters; any other text is left as it is. */
+export function capitals(text) {
+    return /[a-z]/i.test(text) ? text.toLocaleUpperCase("en") : text;
+}
+const LINE_HEIGHT = 1.1;
+/** A name in the biggest size that fits a box, on one line or, at a space, on two (two only when that is clearly bigger). */
+export function fitLines(name, maxWidth, maxHeight, maxSize) {
+    const w1 = emWidth(name);
+    const size1 = Math.max(0.1, Math.min(maxSize, maxHeight / LINE_HEIGHT, w1 === 0 ? maxSize : maxWidth / w1));
+    const single = { lines: [name], size: size1, width: w1 * size1, height: size1 * LINE_HEIGHT };
+    let two;
+    const words = name.split(" ");
+    for (let i = 1; i < words.length; i += 1) {
+        const a = words.slice(0, i).join(" "), b = words.slice(i).join(" ");
+        const w = Math.max(emWidth(a), emWidth(b));
+        const size = Math.max(0.1, Math.min(maxSize, maxHeight / (2 * LINE_HEIGHT), w === 0 ? maxSize : maxWidth / w));
+        if (two === undefined || size > two.size)
+            two = { lines: [a, b], size, width: w * size, height: 2 * size * LINE_HEIGHT };
+    }
+    return two !== undefined && two.size > single.size * 1.18 ? two : single;
+}
 /** A number written without float noise: at most two decimals, no trailing zeros. */
 export function num(n) {
     if (!Number.isFinite(n))

package/dist/theme.d.ts

@@ -1,3 +1,4 @@
+import type { BackgroundInk } from "./family-backgrounds.ts";
 import type { ThemeName } from "./types.ts";
 /** The colours of one look. Each is the fallback of a CSS custom property of the same name: `--tb-ink` and so on. */
 export interface Palette {
@@ -13,9 +14,35 @@ export interface Palette {
 }
 /** The looks. Every colour is the fallback for a custom property, so a page can restyle a drawing with `--tb-ink: …` and nothing else. */
 export declare const THEMES: Readonly<Record<"light" | "dark" | "poster", Palette>>;
+/** What the road look adds to a palette: the ring and the hairline round a mark, the pill behind a round's name, and the road's dots. Custom properties `--tb-mark-ring`, `--tb-mark-edge`, `--tb-panel` and `--tb-spine`. */
+export interface RoadPalette {
+    ring: string;
+    edge: string;
+    panel: string;
+    spine: string;
+}
+export declare const ROAD_THEMES: Readonly<Record<"light" | "dark" | "poster", RoadPalette>>;
+/** What a drawing's stylesheet needs besides the classic rules. */
+export interface StyleParts {
+    /** The bracket's road look: round marks with a wide ring, big bold scores, the loser quiet, pills for the round names. */
+    road?: boolean;
+    /** The road-to-the-final chart's rules. */
+    chart?: boolean;
+    /** The drawing has links: a hover and a focus ring. */
+    links?: boolean;
+    /** A team's path is highlighted: the other ties are quieter and the path is dotted. */
+    follow?: boolean;
+    /** A background with a light and a dark picture in one drawing: the one that does not fit the look is hidden. */
+    bgAuto?: boolean;
+}
+/** The colours a background says to draw in (`backgroundSvg`'s `ink`): what `styleFor` takes in place of a look's own palette. */
+export interface BackgroundInks {
+    light?: BackgroundInk;
+    dark?: BackgroundInk;
+}
 /**
  * The `<style>` text of a drawing. `auto` is the light look and, under `prefers-color-scheme: dark` or a page that says
  * `data-theme="dark"` on `<html>`, the dark one; `light`, `dark` and `poster` are one look always. Every colour can be
- * set from the page with a `--tb-*` custom property.
+ * set from the page with a `--tb-*` custom property. `parts` adds the rules the road look, the road chart, links and a highlighted path need.
  */
-export declare function styleFor(scope: string, theme: Exclude<ThemeName, "none">): string;
+export declare function styleFor(scope: string, theme: Exclude<ThemeName, "none">, parts?: StyleParts, inks?: BackgroundInks): string;