@johnmorrisdotca/taisen-brackets 0.0.0-stage → 0.1.0

package/dist/presets.js

@@ -0,0 +1,81 @@
+/**
+ * Playoff formats by era: the round names, the length of each round's series and who has a bye, for the five North
+ * American leagues and the FIFA World Cup. Data only; nothing here draws. Each era was checked against the English
+ * Wikipedia articles in its `sources` (2026-10-13); where a season did something of its own (a strike, a pandemic) it has
+ * its own entry. The year is the year the playoffs are played in: the NHL's 2024 is the 2023-24 season.
+ */
+/** The address of English Wikipedia articles, by title. */
+const wiki = (...titles) => titles.map((t) => `https://en.wikipedia.org/wiki/${t.replace(/ /g, "_")}`);
+const r = (name, bestOf = 7) => ({ name, bestOf });
+const sevens = (...names) => names.map((n) => r(n, 7));
+const WEST_EAST = ["Western", "Eastern"];
+const AL_NL = ["American League", "National League"];
+const AFC_NFC = ["AFC", "NFC"];
+const ERAS = {
+    nhl: [
+        { league: "nhl", from: 1975, to: 1979, label: "12 teams, a best-of-three preliminary round", teams: 12, byes: 2, groups: null, rounds: [r("Preliminary Round", 3), ...sevens("Quarterfinals", "Semifinals", "Stanley Cup Final")], note: "Division winners had a bye; the second and third placed teams played a preliminary round.", sources: wiki("1977 Stanley Cup playoffs", "Stanley Cup playoffs") },
+        { league: "nhl", from: 1980, to: 1981, label: "16 teams, a best-of-five preliminary round", teams: 16, byes: 0, groups: null, rounds: [r("Preliminary Round", 5), ...sevens("Quarterfinals", "Semifinals", "Stanley Cup Final")], sources: wiki("1981 Stanley Cup playoffs") },
+        { league: "nhl", from: 1982, to: 1986, label: "16 teams by division, a best-of-five first round", teams: 16, byes: 0, groups: ["Campbell Conference", "Wales Conference"], rounds: [r("Division Semifinals", 5), ...sevens("Division Finals", "Conference Finals", "Stanley Cup Final")], sources: wiki("1984 Stanley Cup playoffs", "Clarence Campbell Conference", "Prince of Wales Conference") },
+        { league: "nhl", from: 1987, to: 1993, label: "16 teams by division", teams: 16, byes: 0, groups: ["Campbell Conference", "Wales Conference"], rounds: sevens("Division Semifinals", "Division Finals", "Conference Finals", "Stanley Cup Final"), sources: wiki("1990 Stanley Cup playoffs", "Clarence Campbell Conference", "Prince of Wales Conference") },
+        { league: "nhl", from: 1994, to: 2013, label: "16 teams, eight a conference, conference rounds", teams: 16, byes: 0, groups: WEST_EAST, rounds: sevens("Conference Quarterfinals", "Conference Semifinals", "Conference Finals", "Stanley Cup Final"), except: [2005], note: "No playoffs in 2005 (the 2004-05 season was not played).", sources: wiki("1996 Stanley Cup playoffs", "2013 Stanley Cup playoffs") },
+        { league: "nhl", from: 2014, to: null, label: "16 teams, eight a conference, division rounds first", teams: 16, byes: 0, groups: WEST_EAST, rounds: sevens("First Round", "Second Round", "Conference Finals", "Stanley Cup Final"), except: [2020, 2021], note: "The first two rounds are played within divisions.", sources: wiki("2014 Stanley Cup playoffs") },
+        { league: "nhl", from: 2020, to: 2020, label: "24 teams: a qualifying round, then 16", teams: 24, byes: 0, groups: WEST_EAST, rounds: [r("Qualifying Round", 5), ...sevens("First Round", "Second Round", "Conference Finals", "Stanley Cup Final")], note: "The top four teams of each conference played a round robin for seeding instead of the qualifying round.", sources: wiki("2020 Stanley Cup playoffs") },
+        { league: "nhl", from: 2021, to: 2021, label: "16 teams in four divisions", teams: 16, byes: 0, groups: null, rounds: sevens("First Round", "Second Round", "Stanley Cup Semifinals", "Stanley Cup Final"), note: "Four temporary divisions: the semifinals were between division winners, not conferences.", sources: wiki("2021 Stanley Cup playoffs") },
+    ],
+    nba: [
+        { league: "nba", from: 1977, to: 1983, label: "12 teams, a best-of-three first round", teams: 12, byes: 2, groups: WEST_EAST, rounds: [r("First Round", 3), ...sevens("Conference Semifinals", "Conference Finals", "NBA Finals")], note: "Division winners had a bye.", sources: wiki("NBA playoffs") },
+        { league: "nba", from: 1984, to: 2002, label: "16 teams, a best-of-five first round", teams: 16, byes: 0, groups: WEST_EAST, rounds: [r("First Round", 5), ...sevens("Conference Semifinals", "Conference Finals", "NBA Finals")], sources: wiki("NBA playoffs") },
+        { league: "nba", from: 2003, to: null, label: "16 teams, best-of-seven throughout", teams: 16, byes: 0, groups: WEST_EAST, rounds: sevens("First Round", "Conference Semifinals", "Conference Finals", "NBA Finals"), note: "Since 2021 a play-in tournament decides the seventh and eighth seeds of each conference.", sources: wiki("NBA playoffs") },
+    ],
+    mlb: [
+        { league: "mlb", from: 1969, to: 1984, label: "two rounds, a best-of-five league championship series", teams: 4, byes: 0, groups: AL_NL, rounds: [r("League Championship Series", 5), r("World Series", 7)], except: [1981], sources: wiki("Major League Baseball postseason") },
+        { league: "mlb", from: 1981, to: 1981, label: "a split season: a division series first", teams: 8, byes: 0, groups: AL_NL, rounds: [r("Division Series", 5), r("League Championship Series", 5), r("World Series", 7)], sources: wiki("Major League Baseball postseason") },
+        { league: "mlb", from: 1985, to: 1993, label: "two rounds, a best-of-seven league championship series", teams: 4, byes: 0, groups: AL_NL, rounds: [r("League Championship Series", 7), r("World Series", 7)], sources: wiki("Major League Baseball postseason") },
+        { league: "mlb", from: 1995, to: 2011, label: "8 teams, division series", teams: 8, byes: 0, groups: AL_NL, rounds: [r("Division Series", 5), r("League Championship Series", 7), r("World Series", 7)], note: "No postseason in 1994: the season ended on 11 August with the players' strike.", sources: wiki("Major League Baseball postseason", "1994 Major League Baseball season") },
+        { league: "mlb", from: 2012, to: 2019, label: "10 teams, a wild card game", teams: 10, byes: 3, groups: AL_NL, rounds: [r("Wild Card Game", 1), r("Division Series", 5), r("League Championship Series", 7), r("World Series", 7)], note: "The three division winners of each league skip the wild card game.", except: [2020], sources: wiki("Major League Baseball postseason") },
+        { league: "mlb", from: 2020, to: 2020, label: "16 teams, a best-of-three wild card series", teams: 16, byes: 0, groups: AL_NL, rounds: [r("Wild Card Series", 3), r("Division Series", 5), r("League Championship Series", 7), r("World Series", 7)], sources: wiki("Major League Baseball postseason") },
+        { league: "mlb", from: 2021, to: 2021, label: "10 teams, a wild card game", teams: 10, byes: 3, groups: AL_NL, rounds: [r("Wild Card Game", 1), r("Division Series", 5), r("League Championship Series", 7), r("World Series", 7)], sources: wiki("Major League Baseball postseason") },
+        { league: "mlb", from: 2022, to: null, label: "12 teams, the top two seeds of each league have a bye", teams: 12, byes: 2, groups: AL_NL, rounds: [r("Wild Card Series", 3), r("Division Series", 5), r("League Championship Series", 7), r("World Series", 7)], sources: wiki("Major League Baseball postseason") },
+    ],
+    nfl: [
+        { league: "nfl", from: 1970, to: 1977, label: "8 teams", teams: 8, byes: 0, groups: AFC_NFC, rounds: [r("Divisional Playoffs", 1), r("Conference Championships", 1), r("Super Bowl", 1)], sources: wiki("NFL playoffs", "1975–76 NFL playoffs") },
+        { league: "nfl", from: 1978, to: 1989, label: "10 teams, the division winners have a bye", teams: 10, byes: 3, groups: AFC_NFC, rounds: [r("Wild Card", 1), r("Divisional", 1), r("Conference Championship", 1), r("Super Bowl", 1)], except: [1982], sources: wiki("NFL playoffs", "1983–84 NFL playoffs") },
+        { league: "nfl", from: 1982, to: 1982, label: "16 teams after the players' strike", teams: 16, byes: 0, groups: AFC_NFC, rounds: [r("First Round", 1), r("Second Round", 1), r("Conference Championship", 1), r("Super Bowl", 1)], sources: wiki("NFL playoffs", "1982–83 NFL playoffs") },
+        { league: "nfl", from: 1990, to: 2019, label: "12 teams, the top two seeds have a bye", teams: 12, byes: 2, groups: AFC_NFC, rounds: [r("Wild Card", 1), r("Divisional", 1), r("Conference Championship", 1), r("Super Bowl", 1)], sources: wiki("NFL playoffs") },
+        { league: "nfl", from: 2020, to: null, label: "14 teams, the top seed has a bye", teams: 14, byes: 1, groups: AFC_NFC, rounds: [r("Wild Card", 1), r("Divisional", 1), r("Conference Championship", 1), r("Super Bowl", 1)], sources: wiki("NFL playoffs") },
+    ],
+    cfl: [
+        { league: "cfl", from: 1996, to: 2026, label: "division semi-finals and finals, with a crossover", teams: 6, byes: 1, groups: ["West", "East"], rounds: [r("Division Semi-Final", 1), r("Division Final", 1), r("Grey Cup", 1)], note: "Three teams of each division qualify and the first-placed team has a bye. A fourth-placed team with a better record than the third-placed team of the other division takes that place (the crossover, since 1996). The league has announced an eight-team format from 2027.", sources: wiki("1996 CFL season", "2012 CFL season", "2019 CFL season", "CFL playoffs") },
+    ],
+    worldcup: [
+        { league: "worldcup", from: 1930, to: 1930, label: "four group winners, straight to the semi-finals", teams: 4, byes: 0, groups: null, rounds: [r("Semi-finals", 1), r("Final", 1)], years: [1930], sources: wiki("1930 FIFA World Cup") },
+        { league: "worldcup", from: 1934, to: 1938, label: "16 teams, straight knockout, drawn matches replayed", teams: 16, byes: 0, groups: null, rounds: [r("Round of 16", 1), r("Quarter-finals", 1), r("Semi-finals", 1), r("Final", 1)], years: [1934, 1938], note: "A match still level after extra time was replayed (1934, 1938). There was a third-place match in both. In 1938 Austria withdrew, so 15 teams played.", sources: wiki("1934 FIFA World Cup", "FIFA World Cup") },
+        { league: "worldcup", from: 1954, to: 1970, label: "knockout from the quarter-finals", teams: 8, byes: 0, groups: null, rounds: [r("Quarter-finals", 1), r("Semi-finals", 1), r("Final", 1)], years: [1954, 1958, 1962, 1966, 1970], note: "With a third-place match.", sources: wiki("1954 FIFA World Cup", "FIFA World Cup") },
+        { league: "worldcup", from: 1974, to: 1978, label: "a second group stage, then the final", teams: 4, byes: 0, groups: null, rounds: [r("Final", 1)], years: [1974, 1978], note: "No semi-finals: the winners of the two second-round groups played the final, the runners-up the third-place match.", sources: wiki("1974 FIFA World Cup", "1978 FIFA World Cup") },
+        { league: "worldcup", from: 1982, to: 1982, label: "a second group stage, then semi-finals", teams: 4, byes: 0, groups: null, rounds: [r("Semi-finals", 1), r("Final", 1)], years: [1982], sources: wiki("1982 FIFA World Cup") },
+        { league: "worldcup", from: 1986, to: 2022, label: "16 teams in the knockout", teams: 16, byes: 0, groups: null, rounds: [r("Round of 16", 1), r("Quarter-finals", 1), r("Semi-finals", 1), r("Final", 1)], years: [1986, 1990, 1994, 1998, 2002, 2006, 2010, 2014, 2018, 2022], note: "With a third-place match.", sources: wiki("1986 FIFA World Cup", "FIFA World Cup") },
+        { league: "worldcup", from: 2026, to: null, label: "48 teams, a round of 32", teams: 32, byes: 0, groups: null, rounds: [r("Round of 32", 1), r("Round of 16", 1), r("Quarter-finals", 1), r("Semi-finals", 1), r("Final", 1)], years: [2026], note: "With a third-place match. Later editions are not covered until checked.", sources: wiki("FIFA World Cup") },
+    ],
+};
+/** The leagues that have a format here. */
+export const LEAGUES = Object.freeze(Object.keys(ERAS));
+/**
+ * The playoff format of a league in a season (or a World Cup in its year), or `null` when there was none or this
+ * package does not cover it. The rounds' names go straight to `drawBracket`'s `roundNames`.
+ */
+export function playoffFormat(league, year) {
+    const list = ERAS[league];
+    if (!list)
+        throw new Error(`taisen-brackets: no format for ${JSON.stringify(league)}; leagues are ${LEAGUES.join(", ")}`);
+    const hit = list.find((e) => year >= e.from && (e.to === null || year <= e.to) && !(e.except ?? []).includes(year) && (!e.years || e.years.includes(year)));
+    if (!hit)
+        return null;
+    const { years: _years, except: _except, ...rest } = hit;
+    void _years;
+    void _except;
+    return { ...rest, year };
+}
+/** Every era of a league, oldest first. */
+export function playoffEras(league) {
+    return ERAS[league].map(({ years: _y, except: _e, ...rest }) => { void _y; void _e; return { ...rest, year: rest.from }; });
+}

package/dist/render.d.ts

@@ -0,0 +1,13 @@
+import type { BracketInput, BracketLayout, DrawOptions, Matchup, Size, SizeName, Words } from "./types.ts";
+/** The sizes by name. A phone's drawing is 390 wide and as tall as the bracket needs. */
+export declare const SIZES: Readonly<Record<SizeName, Size>>;
+/** The text a screen reader gets for the drawing as a whole. */
+export declare function describeBracket(input: BracketLayout | readonly Matchup[] | BracketInput, options?: {
+    words?: Partial<Words>;
+    roundNames?: DrawOptions["roundNames"];
+}): string;
+/**
+ * Draws a bracket as an SVG string. `input` is a list of matchups, `{ matchups, teams }` or a layout from `layoutBracket`.
+ * The same input and options always give the same string: no clock, no random number, no counter.
+ */
+export declare function drawBracket(input: BracketLayout | readonly Matchup[] | BracketInput, options?: DrawOptions): string;

package/dist/render.js

@@ -0,0 +1,478 @@
+import { layoutBracket } from "./layout.js";
+import { abbrOf, describeTie, noteParts } from "./matchup.js";
+import { cleanSvg, clipId, drawMark, safeUrl } from "./marks.js";
+import { roundLabel } from "./rounds.js";
+import { styleFor } from "./theme.js";
+import { esc, fit, hash, num, textWidth } from "./text.js";
+import { fill, wordsWith } from "./words.js";
+/** The sizes by name. A phone's drawing is 390 wide and as tall as the bracket needs. */
+export const SIZES = Object.freeze({
+    wide: { width: 1200, height: 675 },
+    square: { width: 1080, height: 1080 },
+    phone: { width: 390, height: null },
+});
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const isLayout = (x) => typeof x === "object" && x !== null && "ties" in x && "sides" in x && "rounds" in x;
+/** The text a screen reader gets for the drawing as a whole. */
+export function describeBracket(input, options = {}) {
+    const layout = isLayout(input) ? input : layoutBracket(input);
+    const words = wordsWith(options.words);
+    const parts = [fill(layout.rounds === 1 ? words.summaryOne : words.summary, { n: layout.teams.length, r: layout.rounds })];
+    const finalTie = layout.finalIndex !== null ? layout.ties[layout.finalIndex] : null;
+    if (finalTie)
+        parts.push(`${roundLabel(layout, layout.rounds, options.roundNames, words)}: ${describeTie(finalTie, words)}`);
+    if (layout.champion)
+        parts.push(`${words.champion}: ${layout.champion.name}`);
+    return `${parts.join(". ")}.`;
+}
+/**
+ * Draws a bracket as an SVG string. `input` is a list of matchups, `{ matchups, teams }` or a layout from `layoutBracket`.
+ * The same input and options always give the same string: no clock, no random number, no counter.
+ */
+export function drawBracket(input, options = {}) {
+    const layout = isLayout(input) ? input : layoutBracket(input, options);
+    const words = wordsWith(options.words);
+    const theme = options.theme ?? "auto";
+    const sizeName = typeof options.size === "string" || options.size === undefined ? options.size ?? "wide" : null;
+    const size = sizeName ? SIZES[sizeName] : { width: options.size.width, height: options.size.height ?? null };
+    const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : sizeName === "phone" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
+    const prefix = options.id ?? `tb-${hash(JSON.stringify([layout.ties.map((t) => [t.id, t.sides.map((s) => s?.id ?? null), t.winner, t.result.score, t.round]), options.size, orientation, options.detail, theme, options.title, options.subtitle, options.seeds, options.scores, options.champion, options.markShape, options.roundLabels, options.thirdPlace, options.trophy ? 1 : 0]))}`;
+    const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round" };
+    const plan = planBracket(layout, options, words, size, orientation === "vertical", ctx);
+    const drawn = plan.boxes.map((b) => drawBox(b, plan, options, words, ctx)); // draws the marks, so before the defs are written
+    const title = options.title ?? words.title;
+    const desc = describeBracket(layout, options);
+    const defs = [
+        ...[...ctx.radii].sort((a, b) => a - b).map((r) => `<clipPath id="${clipId(prefix, r)}"><circle r="${num(r)}"/></clipPath>`),
+        ...[...ctx.symbols.values()].map((s) => `<symbol id="${s.id}" viewBox="${esc(s.viewBox)}" preserveAspectRatio="xMidYMid slice">${s.inner}</symbol>`),
+    ].join("");
+    const style = theme === "none" ? "" : `<style>${styleFor(`.${prefix}`, theme)}</style>`;
+    const bg = options.background === false ? "" : `<rect class="tb-bg" width="${num(plan.width)}" height="${num(plan.height)}"${theme === "none" ? ' fill="none"' : ""}/>`;
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" class="taisen ${prefix}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(plan.width)} ${num(plan.height)}" width="${num(plan.width)}" height="${num(plan.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
+        `<title id="${prefix}-t">${esc(title)}</title><desc id="${prefix}-d">${esc(desc)}</desc>`,
+        style,
+        defs ? `<defs>${defs}</defs>` : "",
+        bg,
+        ...plan.links,
+        ...drawn,
+        ...plan.texts,
+        ...plan.extras,
+        "</svg>",
+    ].filter(Boolean).join("\n");
+}
+// ---------------------------------------------------------------------------------------------- the plan
+function planBracket(layout, o, words, size, vertical, ctx) {
+    const pad = vertical ? 14 : 22;
+    const showLabels = o.roundLabels ?? true;
+    const poster = o.theme === "poster";
+    const boxes = [];
+    const links = [];
+    const texts = [];
+    const extras = [];
+    const W0 = size.width;
+    const titleH = (o.title ? (poster ? 46 : 38) : 0) + (o.subtitle ? 24 : 0) + (o.title || o.subtitle ? 10 : 0);
+    const hasGroups = layout.sides.some((s) => s.label);
+    const champ = (o.champion ?? true) && layout.champion !== null && layout.finalIndex !== null;
+    const withThird = layout.third !== null && (o.thirdPlace ?? "below") !== "hide";
+    // Beside the final in a horizontal bracket of two halves, under the final; elsewhere the lines into the final would run through it, so it goes at the foot.
+    const bottomThird = withThird && !(layout.shape === "halves" && !vertical);
+    const thirdBlock = bottomThird ? 18 + (vertical ? 52 : OTHER_H) + 16 : 0;
+    const halves = layout.shape === "halves";
+    const nc = layout.columns.length;
+    const rows = layout.rows;
+    const hasTrophy = !!o.trophy && champ;
+    // ----- slots along the rounds' axis (t): the columns of the left half, the centre, the columns of the right half.
+    // Horizontal: t is x. Vertical: t is y, and the left half is the top.
+    const slotCount = halves ? 2 * nc + 1 : nc + (champ || layout.finalIndex !== null ? 1 : 0);
+    const slotOfColumn = (side, c) => (side === "l" ? c : slotCount - 1 - c);
+    // Dimensions of a box: w across the page, h down the page.
+    let D = 0, S = 0; // the box along the rounds' axis, and across it
+    let gapT = 0;
+    let rowStep = 0;
+    let centreT = 0; // the centre slot's size along t
+    let boxW = 0, boxH = 0;
+    let others = [];
+    let ow = 0;
+    let extraH0 = 0;
+    if (!vertical) {
+        const availW = W0 - 2 * pad;
+        const g = 0.2;
+        const centreMin = halves ? 168 : 150;
+        let d = (availW - centreMin) / ((halves ? 2 : 1) * Math.max(nc, 1) * (1 + g));
+        if (1.2 * d > centreMin)
+            d = availW / ((halves ? 2 : 1) * Math.max(nc, 1) * (1 + g) + 1.2);
+        D = clamp(d, 40, 220);
+        gapT = D * g;
+        centreT = Math.max(centreMin, D * 1.2);
+        const top = pad + titleH + (hasGroups ? 28 : 0) + (showLabels ? 24 : 6);
+        others = othersOf(layout);
+        ow = clamp(D * 1.1, 120, 200);
+        extraH0 = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
+        const bodyH = size.height === null ? rows * 60 : size.height - top - pad - extraH0;
+        rowStep = bodyH / rows;
+        S = clamp(rowStep - 9, 24, 104);
+        rowStep = Math.max(rowStep, S + 6);
+        rowStep = Math.min(rowStep, S + 40);
+        boxW = D;
+        boxH = S;
+    }
+    else {
+        const availW = W0 - 2 * pad;
+        const slot = availW / Math.max(rows, 1);
+        S = clamp(slot - 5, 30, 150);
+        rowStep = Math.min(slot, S + 5);
+        boxW = S;
+    }
+    // Full boxes (names) only where the longest name fits beside its mark and a score.
+    const longest = Math.max(0, ...layout.teams.map((t) => textWidth(t.name, 13)));
+    const pick = (w, h) => {
+        const rowH = h / 2;
+        const font = clamp(rowH * 0.5, 8.5, 16);
+        const md = clamp(rowH * 0.7, 10, 28);
+        const needed = 6 + md + 5 + longest * (font / 13) + 8 + textWidth("00", font + 1) + 14;
+        const named = o.detail && o.detail !== "auto" ? o.detail : w >= needed && h >= 36 ? "full" : w >= 76 && h >= 28 ? "compact" : "mark";
+        return named === "mark" && o.markShape === "none" ? "compact" : named;
+    };
+    const detail = pick(boxW, vertical ? 48 : boxH);
+    if (vertical)
+        boxH = detail === "full" ? 50 : detail === "compact" ? 42 : boxW >= 76 ? 38 : 2 * Math.min(boxW - 8, 24) + 8;
+    if (vertical) {
+        D = boxH;
+        gapT = showLabels ? 26 : 16;
+    }
+    // The champion's block: a trophy, a large mark, the name and the word; and the third-place match below the final.
+    const champMark = vertical ? 54 : clamp(centreT * 0.34, 44, 84);
+    const trophyH = hasTrophy ? (vertical ? 56 : clamp(centreT * 0.45, 48, 84)) : 0;
+    const nameFont = clamp(champMark * 0.3, 13, 20);
+    const champH = champ ? trophyH + (hasTrophy ? 6 : 0) + champMark + 8 + nameFont + 6 + 11 + 2 : 0;
+    const finalW = halves ? (vertical ? Math.min(size.width - 2 * pad, Math.max(boxW, 160)) : Math.min(centreT - 12, Math.max(D * 1.1, 120))) : D;
+    const finalH = vertical ? (detail === "mark" ? Math.max(boxH, 52) : boxH) : boxH;
+    const thirdH = withThird && !bottomThird ? 18 + boxH + 14 : 0;
+    // ----- the slot positions along t
+    if (!vertical) {
+        const sizes = [];
+        for (let k = 0; k < slotCount; k++)
+            sizes.push(halves && k === nc ? centreT : !halves && k === nc ? Math.max(centreMinLtr(D), 150) : D);
+        const total = sizes.reduce((a, b) => a + b, 0) + gapT * (slotCount - 1);
+        let t = pad + Math.max(0, (W0 - 2 * pad - total) / 2);
+        const starts = [];
+        sizes.forEach((sz) => { starts.push(t); t += sz + gapT; });
+        const width = Math.max(W0, total + 2 * pad);
+        // ----- span positions
+        const top = pad + titleH + (hasGroups ? 28 : 0) + (showLabels ? 24 : 6);
+        const treeH = rows * rowStep;
+        // The final sits at the middle of the rows; the champion above it and the third place below need room.
+        const upNeed = (champ ? champH + 8 : 0) + 22 + finalH / 2;
+        const downNeed = finalH / 2 + (withThird ? thirdH : 0);
+        const half = Math.max(treeH / 2, upNeed, downNeed);
+        const bodyH = half * 2;
+        const height = Math.max(size.height ?? 0, top + bodyH + pad + extraH0);
+        const body0 = top + (height - top - pad - extraH0 - bodyH) / 2;
+        const treeY0 = body0 + (bodyH - treeH) / 2;
+        const yOf = (row) => treeY0 + row * rowStep + (rowStep - S) / 2;
+        const place = (side, b) => {
+            const c = layout.columns.indexOf(b.round);
+            const k = halves ? slotOfColumn(side, c) : c;
+            return { x: starts[k], y: yOf(b.y), w: D, h: S };
+        };
+        const rects = new Map();
+        for (const sd of layout.sides)
+            for (const b of sd.boxes) {
+                const rect = place(sd.key, b);
+                rects.set(b.i, rect);
+                boxes.push({ rect, tie: layout.ties[b.i], order: b.order, bye: b.bye, final: false, champion: false });
+            }
+        const midX = (halves ? starts[nc] : starts[nc] ?? 0) + (halves ? centreT : 0) / 2;
+        if (halves && layout.final) {
+            const fy = treeY0 + layout.final.y * rowStep + rowStep / 2;
+            const rect = { x: midX - finalW / 2, y: fy - finalH / 2, w: finalW, h: finalH };
+            rects.set(layout.final.i, rect);
+            boxes.push({ rect, tie: layout.ties[layout.final.i], order: layout.final.order, bye: null, final: true, champion: champ });
+            if (showLabels)
+                texts.push(label(roundLabel(layout, layout.rounds, o.roundNames, words), midX, rect.y - 7, poster, "middle"));
+            if (champ)
+                extras.push(...championBlock(layout.champion, midX, rect.y - 22 - champH, champMark, trophyH, nameFont, o, words, ctx, poster));
+            if (withThird) {
+                const t3 = layout.ties[layout.third];
+                const r3 = { x: midX - finalW / 2, y: rect.y + rect.h + 14 + 18, w: finalW, h: boxH };
+                rects.set(layout.third, r3);
+                texts.push(label(words.thirdPlace, midX, r3.y - 6, poster, "middle"));
+                boxes.push({ rect: r3, tie: t3, order: [0, 1], bye: null, final: false, champion: false });
+            }
+        }
+        else if (!halves) {
+            const k = nc;
+            const fi = layout.finalIndex;
+            const fb = fi !== null ? layout.sides[0]?.boxes.find((b) => b.i === fi) : undefined;
+            if (fb && champ) {
+                const cx = starts[k] + sizes[k] / 2;
+                const fy = rects.get(fi).y + S / 2;
+                extras.push(...championBlock(layout.champion, cx, fy - champH / 2, champMark, trophyH, nameFont, o, words, ctx, poster));
+            }
+        }
+        if (showLabels) {
+            for (const c of layout.columns) {
+                const name = roundLabel(layout, c, o.roundNames, words);
+                const ci = layout.columns.indexOf(c);
+                const ks = halves ? [slotOfColumn("l", ci), slotOfColumn("r", ci)] : [ci];
+                const used = layout.sides.length > 1 || !halves ? (halves ? [0, 1] : [0]) : [0];
+                ks.forEach((k, n) => { if (used.includes(n) && (!halves || n < layout.sides.length))
+                    texts.push(label(name, starts[k] + D / 2, top - 9, poster, "middle", D + gapT * 0.8)); });
+            }
+        }
+        if (hasGroups) {
+            layout.sides.forEach((sd) => {
+                if (!sd.label)
+                    return;
+                const ks = layout.columns.map((_, ci) => slotOfColumn(sd.key, ci));
+                const x0 = Math.min(...ks.map((k) => starts[k])), x1 = Math.max(...ks.map((k) => starts[k] + D));
+                texts.push(`<text class="tb-half" x="${num((x0 + x1) / 2)}" y="${num(top - (showLabels ? 36 : 14))}" font-size="${poster ? 16 : 15}" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(poster ? sd.label.toUpperCase() : sd.label)}</text>`);
+            });
+        }
+        // lines
+        for (const t of layout.ties) {
+            const p = layout.parent[t.index];
+            if (p === -1)
+                continue;
+            const a = rects.get(t.index), b = rects.get(p);
+            if (!a || !b || layout.place[t.index] === "o")
+                continue;
+            const goingRight = b.x > a.x;
+            const x0 = goingRight ? a.x + a.w : a.x, x1 = goingRight ? b.x : b.x + b.w;
+            const y0 = a.y + a.h / 2, y1 = b.y + b.h / 2;
+            const xm = (x0 + x1) / 2;
+            links.push(`<path class="tb-line" d="M${num(x0)} ${num(y0)}H${num(xm)}V${num(y1)}H${num(x1)}"${lineAttrs(o)}/>`);
+        }
+        if (bottomThird)
+            thirdAtFoot(layout, height - pad - extraH0 + 6, width / 2, ow, OTHER_H, words, poster, boxes, texts);
+        othersBlock(layout, others, height - pad - extraH0 + thirdBlock + 6, width, pad, ow, OTHER_H, words, poster, boxes, texts);
+        texts.push(...headings(o, width, pad, poster));
+        return { width, height, boxes, links, texts, extras, detail, vertical };
+    }
+    // ----- vertical: the rounds are rows. The left half is the top; the final is a band in the middle.
+    const bandT = D + gapT;
+    const groupBand = hasGroups ? 26 : 0;
+    // On a tall page the champion sits at the top, as the page's first thing; the lines into the final must not run through it.
+    const champTop = halves && champ ? champH + 14 : 0;
+    const centreBand = (showLabels ? 32 : 0) + 6 + finalH + 14;
+    const topT = pad + titleH + champTop + groupBand + (showLabels ? 14 : 0);
+    const bandsPerSide = nc;
+    const totalT = halves ? topT + bandsPerSide * bandT + centreBand + bandsPerSide * bandT + groupBand + pad : topT + (nc + (champ ? 1 : 0)) * bandT + (champ ? champH : 0) + pad;
+    others = othersOf(layout);
+    ow = Math.min(W0 - 2 * pad, 150);
+    const extraV = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
+    const height = Math.max(size.height ?? 0, totalT + extraV);
+    const treeW = rows * rowStep;
+    const x0 = pad + (W0 - 2 * pad - treeW) / 2;
+    const xOf = (row) => x0 + row * rowStep + (rowStep - S) / 2;
+    const bandStart = (side, c) => {
+        if (!halves)
+            return topT + c * bandT;
+        // Top half: round 1 at the top; bottom half: round 1 at the bottom.
+        if (side === "l")
+            return topT + c * bandT;
+        return topT + bandsPerSide * bandT + centreBand + (bandsPerSide - 1 - c) * bandT;
+    };
+    const rects = new Map();
+    for (const sd of layout.sides)
+        for (const b of sd.boxes) {
+            const c = layout.columns.indexOf(b.round);
+            const rect = { x: xOf(b.y), y: bandStart(sd.key, c), w: S, h: D };
+            rects.set(b.i, rect);
+            boxes.push({ rect, tie: layout.ties[b.i], order: b.order, bye: b.bye, final: false, champion: false });
+        }
+    const midX = W0 / 2;
+    if (halves && layout.final) {
+        const cy0 = topT + bandsPerSide * bandT;
+        let y = cy0;
+        if (champ)
+            extras.push(...championBlock(layout.champion, midX, pad + titleH + 4, champMark, trophyH, nameFont, o, words, ctx, poster));
+        if (showLabels) {
+            texts.push(label(roundLabel(layout, layout.rounds, o.roundNames, words), midX, y + 12, poster, "middle"));
+            y += 16;
+        }
+        const rect = { x: midX - finalW / 2, y: y + 6, w: finalW, h: finalH };
+        rects.set(layout.final.i, rect);
+        boxes.push({ rect, tie: layout.ties[layout.final.i], order: layout.final.order, bye: null, final: true, champion: champ });
+    }
+    else if (!halves && champ && layout.finalIndex !== null) {
+        const fr = rects.get(layout.finalIndex);
+        extras.push(...championBlock(layout.champion, fr.x + fr.w / 2, fr.y + fr.h + 12, champMark, trophyH, nameFont, o, words, ctx, poster));
+    }
+    if (showLabels) {
+        layout.columns.forEach((c, ci) => {
+            const name = roundLabel(layout, c, o.roundNames, words);
+            const sides = halves ? (layout.sides.length > 1 ? ["l", "r"] : ["l"]) : ["l"];
+            for (const sd of sides)
+                texts.push(`<text class="tb-round tb-halo" x="${num(pad)}" y="${num(bandStart(sd, ci) - 8)}" font-size="11" font-weight="600" letter-spacing=".08em">${esc(poster ? name.toUpperCase() : name.toUpperCase())}</text>`);
+        });
+    }
+    if (hasGroups) {
+        layout.sides.forEach((sd) => {
+            if (!sd.label)
+                return;
+            const y = sd.key === "l" ? pad + titleH + champTop + 16 : totalT - pad - 2;
+            texts.push(`<text class="tb-half" x="${num(midX)}" y="${num(y)}" font-size="14" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(sd.label.toUpperCase())}</text>`);
+        });
+    }
+    for (const t of layout.ties) {
+        const p = layout.parent[t.index];
+        if (p === -1)
+            continue;
+        const a = rects.get(t.index), b = rects.get(p);
+        if (!a || !b || layout.place[t.index] === "o")
+            continue;
+        const down = b.y > a.y;
+        const y0 = down ? a.y + a.h : a.y, y1 = down ? b.y : b.y + b.h;
+        const x0c = a.x + a.w / 2, x1c = b.x + b.w / 2;
+        const ym = down ? y0 + gapT * 0.4 : y0 - gapT * 0.4;
+        links.push(`<path class="tb-line" d="M${num(x0c)} ${num(y0)}V${num(ym)}H${num(x1c)}V${num(y1)}"${lineAttrs(o)}/>`);
+    }
+    if (bottomThird)
+        thirdAtFoot(layout, totalT - pad + 6, W0 / 2, Math.min(W0 - 2 * pad, 200), 52, words, poster, boxes, texts);
+    othersBlock(layout, others, totalT - pad + thirdBlock + 6, W0, pad, ow, OTHER_H, words, poster, boxes, texts);
+    texts.push(...headings(o, W0, pad, poster));
+    return { width: W0, height, boxes, links, texts, extras, detail, vertical };
+}
+const OTHER_H = 50;
+const centreMinLtr = (d) => d * 1.1;
+function lineAttrs(o) {
+    return o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".5"' : "";
+}
+function label(text, x, y, poster, anchor, maxWidth = 1e9) {
+    void poster;
+    const up = text.toUpperCase();
+    return `<text class="tb-round" x="${num(x)}" y="${num(y)}" font-size="11" font-weight="600" letter-spacing=".08em" text-anchor="${anchor}">${esc(fit(up, 11 * 1.18, maxWidth))}</text>`;
+}
+function headings(o, width, pad, poster) {
+    const out = [];
+    let y = pad + 24;
+    if (o.title) {
+        const text = poster ? o.title.toUpperCase() : o.title;
+        out.push(`<text class="tb-title" x="${num(width / 2)}" y="${num(y)}" font-size="${poster ? 26 : 24}" font-weight="800" ${poster ? 'letter-spacing=".14em" ' : ""}text-anchor="middle">${esc(text)}</text>`);
+        y += poster ? 24 : 22;
+    }
+    if (o.subtitle)
+        out.push(`<text class="tb-sub" x="${num(width / 2)}" y="${num(y)}" font-size="14" text-anchor="middle">${esc(o.subtitle)}</text>`);
+    return out;
+}
+/** The champion, centred on `cx`, its top at `top`: a trophy if there is one, a large mark, the name and the word. */
+function championBlock(team, cx, top, mark, trophyH, nameFont, o, words, ctx, poster) {
+    const out = [];
+    let y = top;
+    if (o.trophy && trophyH) {
+        const t = o.trophy.trim();
+        const svg = t.startsWith("<") ? cleanSvg(t) : null;
+        if (svg)
+            out.push(`<svg class="tb-gold" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" viewBox="${esc(svg.viewBox)}" preserveAspectRatio="xMidYMid meet">${svg.inner}</svg>`);
+        else if (safeUrl(t))
+            out.push(`<image href="${esc(t)}" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" preserveAspectRatio="xMidYMid meet"/>`);
+        y += trophyH + 6;
+    }
+    const cy = y + mark / 2;
+    const name = fit(team.name, nameFont, 200);
+    if (ctx.shape !== "none")
+        out.push(`<g class="tb-champ">${drawMark(team, cx, cy, mark, ctx)}</g>`);
+    const nameY = cy + mark / 2 + 8 + nameFont * 0.8;
+    out.push(`<text class="tb-name" x="${num(cx)}" y="${num(nameY)}" font-size="${num(nameFont)}" font-weight="800" text-anchor="middle">${esc(poster ? name.toUpperCase() : name)}</text>`);
+    out.push(`<text class="tb-champ-label" x="${num(cx)}" y="${num(nameY + 6 + 11)}" font-size="11" font-weight="700" letter-spacing=".16em" text-anchor="middle">${esc(words.champion.toUpperCase())}</text>`);
+    return out;
+}
+/** The ties that are not part of the tree (they lead nowhere near the final, or are round-robin games), drawn in a grid below it. */
+function othersOf(layout) {
+    return [...layout.other, ...layout.robin];
+}
+function othersHeight(count, width, pad, ow, oh) {
+    if (!count)
+        return 0;
+    const cols = Math.max(1, Math.floor((width - 2 * pad + 10) / (ow + 10)));
+    return 26 + Math.ceil(count / cols) * (oh + 10) + 6;
+}
+function othersBlock(layout, list, y0, width, pad, ow, oh, words, poster, boxes, texts) {
+    if (!list.length)
+        return;
+    const cols = Math.max(1, Math.floor((width - 2 * pad + 10) / (ow + 10)));
+    const x0 = pad + (width - 2 * pad - (Math.min(cols, list.length) * (ow + 10) - 10)) / 2;
+    texts.push(label(words.other, width / 2, y0 + 12, poster, "middle"));
+    list.forEach((i, n) => {
+        const rect = { x: x0 + (n % cols) * (ow + 10), y: y0 + 24 + Math.floor(n / cols) * (oh + 10), w: ow, h: oh };
+        boxes.push({ rect, tie: layout.ties[i], order: [0, 1], bye: null, final: false, champion: false });
+    });
+}
+/** The third-place match with its label, centred on `cx`, its label at `y0`. */
+function thirdAtFoot(layout, y0, cx, w, h, words, poster, boxes, texts) {
+    texts.push(label(words.thirdPlace, cx, y0 + 12, poster, "middle"));
+    boxes.push({ rect: { x: cx - w / 2, y: y0 + 18, w, h }, tie: layout.ties[layout.third], order: [0, 1], bye: null, final: false, champion: false });
+}
+// ---------------------------------------------------------------------------------------------- one box
+function drawBox(p, plan, o, words, ctx) {
+    const { rect, tie } = p;
+    const { x, y, w, h } = rect;
+    const detail = plan.detail;
+    const scoresOn = o.scores ?? true;
+    const seedsOn = o.seeds ?? false;
+    const highlight = o.winnerHighlight ?? true;
+    const parts = [];
+    parts.push(`<rect class="tb-box" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" rx="${num(Math.min(7, h / 4))}"${o.theme === "none" ? ' fill="none" stroke="currentColor" stroke-opacity=".4"' : ""}/>`);
+    const r = tie.result;
+    const notes = noteParts(tie, words);
+    const noteH = detail !== "mark" && h >= 50 && notes.length ? 13 : 0;
+    const rowH = (h - noteH) / 2;
+    const rowsOrder = p.order;
+    const cls = (k) => (highlight && tie.winner !== null ? (tie.winner === k ? "tb-won" : "tb-lost") : "tb-pending");
+    if (detail === "mark") {
+        const stack = Math.min((h - 8) / 2, w - 8, 44);
+        const side = Math.min(h - 8, (w - 12) / 2, 44);
+        const stacked = stack >= side;
+        const md2 = Math.max(stacked ? stack : side, 8);
+        rowsOrder.forEach((k, n) => {
+            const team = tie.sides[k];
+            const cx = stacked ? x + w / 2 : x + w / 2 + (n === 0 ? -1 : 1) * (md2 / 2 + 3);
+            const cy = stacked ? y + h / 2 + (n === 0 ? -1 : 1) * (md2 / 2 + 1) : y + h / 2;
+            parts.push(`<g class="${cls(k)}">${drawMark(team, cx, cy, md2, ctx)}</g>`);
+        });
+    }
+    else {
+        const font = clamp(rowH * 0.5, 8.5, 16);
+        const md = clamp(rowH * 0.7, 10, 28);
+        rowsOrder.forEach((k, n) => {
+            const team = tie.sides[k];
+            const ry = y + n * rowH;
+            const cy = ry + rowH / 2;
+            const rowParts = [];
+            let tx = x + 6;
+            if (o.markShape !== "none") {
+                rowParts.push(drawMark(team, x + 6 + md / 2, cy, md, ctx));
+                tx = x + 6 + md + 5;
+            }
+            const score = scoresOn && r.score ? String(r.score[k]) : "";
+            const pensText = scoresOn && r.pens ? `(${r.pens[k]})` : "";
+            const bye = p.bye === k;
+            const right = x + w - 6;
+            const scoreW = score ? textWidth(score, font + 1) : 0;
+            const pensW = pensText ? textWidth(pensText, font - 2) + 3 : 0;
+            const byeText = bye ? words.bye : "";
+            const byeW = byeText ? textWidth(byeText, Math.max(font - 2, 8)) : 0;
+            const avail = right - tx - (scoreW + pensW) - (byeW ? byeW + 6 : 0) - 6;
+            const seed = seedsOn && team?.seed !== undefined ? `${team.seed} ` : "";
+            const nm = team ? (detail === "full" ? team.name : abbrOf(team, words)) : words.tbd;
+            const text = fit(`${seed}${nm}`, font, Math.max(avail, 8));
+            rowParts.push(`<text class="tb-name${team ? "" : " tb-muted"}" x="${num(tx)}" y="${num(cy + font * 0.35)}" font-size="${num(font)}">${esc(text)}</text>`);
+            if (score)
+                rowParts.push(`<text class="tb-score" x="${num(right)}" y="${num(cy + (font + 1) * 0.35)}" font-size="${num(font + 1)}" text-anchor="end" font-variant-numeric="tabular-nums">${esc(score)}</text>`);
+            if (pensText)
+                rowParts.push(`<text class="tb-muted" x="${num(right - scoreW - 3)}" y="${num(cy + (font - 2) * 0.35)}" font-size="${num(Math.max(font - 2, 8))}" text-anchor="end">${esc(pensText)}</text>`);
+            if (byeText)
+                rowParts.push(`<text class="tb-muted" x="${num(right - (scoreW + pensW) - (scoreW || pensW ? 6 : 0))}" y="${num(cy + (font - 2) * 0.35)}" font-size="${num(Math.max(font - 2, 8))}" font-style="italic" text-anchor="end">${esc(byeText)}</text>`);
+            parts.push(`<g class="${cls(k)}">${rowParts.join("")}</g>`);
+        });
+        parts.push(`<line class="tb-line" x1="${num(x + 4)}" x2="${num(x + w - 4)}" y1="${num(y + rowH)}" y2="${num(y + rowH)}" stroke-opacity=".35"${o.theme === "none" ? ' stroke="currentColor"' : ""}/>`);
+        if (noteH) {
+            const f = 9.5;
+            parts.push(`<text class="tb-muted" x="${num(x + w / 2)}" y="${num(y + h - 4)}" font-size="${f}" text-anchor="middle">${esc(fit(notes.join(" · "), f, w - 8))}</text>`);
+        }
+    }
+    const cls2 = `tb-tie${p.final ? " tb-final" : ""}${p.champion ? " tb-has-champ" : ""}`;
+    return `<g class="${cls2}"><title>${esc(describeTie(tie, words))}</title>${parts.join("")}</g>`;
+}

package/dist/rounds.d.ts

@@ -0,0 +1,8 @@
+import type { BracketLayout, DrawOptions } from "./types.ts";
+import type { Words } from "./types.ts";
+/** The name of a round that has `remaining` teams left in it, counting from the final: Final, Semi-finals, Quarter-finals, Round of 16… */
+export declare function roundName(remaining: number): string;
+/** The generic names of `count` rounds, first round first: `roundNamesFor(3)` is Quarter-finals, Semi-finals, Final. */
+export declare function roundNamesFor(count: number): string[];
+/** The name of round `round` (1 is the first) of a layout, from the names given (which may be only the last rounds) or the generic ones. */
+export declare function roundLabel(layout: BracketLayout, round: number, names: DrawOptions["roundNames"], words: Words): string;

package/dist/rounds.js

@@ -0,0 +1,26 @@
+import { fill } from "./words.js";
+/** The name of a round that has `remaining` teams left in it, counting from the final: Final, Semi-finals, Quarter-finals, Round of 16… */
+export function roundName(remaining) {
+    if (remaining <= 2)
+        return "Final";
+    if (remaining === 4)
+        return "Semi-finals";
+    if (remaining === 8)
+        return "Quarter-finals";
+    return `Round of ${remaining}`;
+}
+/** The generic names of `count` rounds, first round first: `roundNamesFor(3)` is Quarter-finals, Semi-finals, Final. */
+export function roundNamesFor(count) {
+    return Array.from({ length: count }, (_, i) => roundName(2 ** (count - i)));
+}
+/** The name of round `round` (1 is the first) of a layout, from the names given (which may be only the last rounds) or the generic ones. */
+export function roundLabel(layout, round, names, words) {
+    const list = names ? ("rounds" in names ? names.rounds.map((r) => r.name) : names) : null;
+    const from = layout.rounds - round; // 0 for the final
+    const named = list?.[list.length - 1 - from];
+    if (named)
+        return named;
+    const generic = 2 ** (from + 1);
+    const remaining = layout.rounds > 7 ? 0 : generic;
+    return remaining ? roundName(remaining) : fill(words.round, { n: round });
+}