@ethlete/bracket 0.0.1 → 1.0.0-next.2

package/fesm2022/ethlete-bracket.mjs

@@ -0,0 +1,3635 @@
+const BRACKET_ERROR_CODES = {
+    /** The source has no rounds/matches to render. */
+    SOURCE_EMPTY: 3401,
+    /** An integration received a tournament mode it does not support. */
+    MODE_UNSUPPORTED: 3402,
+    /** Two rounds in the source share an id. */
+    DUPLICATE_ROUND: 3403,
+    /** Two matches in the source share an id. */
+    DUPLICATE_MATCH: 3404,
+    /** A round-to-round relation could not be resolved (malformed round structure). */
+    ROUND_RELATION_INVALID: 3405,
+    /** A match-to-match relation could not be resolved (match counts don't line up). */
+    MATCH_RELATION_INVALID: 3406,
+    /** The computed layout grid is in an inconsistent state. */
+    GRID_INVALID: 3407,
+    /** Swiss groups could not be generated from the source. */
+    SWISS_GROUPING_FAILED: 3408,
+    /** A Swiss group ended up without any matches while headers are enabled. */
+    SWISS_GROUP_EMPTY: 3409,
+    /** A match's resolved winner id is not among its participants. */
+    WINNER_NOT_FOUND: 3410,
+    /** A required key was missing from an internal bracket lookup map. */
+    DATA_LOOKUP_FAILED: 3411,
+    /** The default cards are rendering but no `matchNormalizer` was registered to feed them. */
+    MISSING_MATCH_NORMALIZER: 3412,
+    /** No registered {@link BracketLayout} matches the source's tournament `mode`. */
+    LAYOUT_NOT_REGISTERED: 3413,
+    /** A cell the bracket draws has no card - neither an input, the layout, nor the config names one. */
+    CARD_NOT_REGISTERED: 3414,
+};
+
+class BracketRuntimeError extends Error {
+    constructor(code, message) {
+        super(`ET${code}: ${message}`);
+        this.name = 'BracketRuntimeError';
+    }
+}
+
+class BracketMap extends Map {
+    constructor() {
+        super();
+    }
+    getOrThrow(key) {
+        const value = super.get(key);
+        if (value === undefined) {
+            throw new BracketRuntimeError(BRACKET_ERROR_CODES.DATA_LOOKUP_FAILED, `Value for key ${key} not found in bracket map`);
+        }
+        return value;
+    }
+    first() {
+        return this.values().next().value;
+    }
+    last() {
+        const values = Array.from(this.values());
+        return values.length > 0 ? values[values.length - 1] : undefined;
+    }
+}
+
+const BRACKET_DATA_LAYOUT = {
+    LEFT_TO_RIGHT: 'left-to-right',
+    /**
+     * Folded in half: each round up to the first one too small to halve is drawn twice, once on each
+     * side, converging on that round and the ones after it. Halves the height and roughly doubles the
+     * width, which is what a poster or a broadcast graphic wants.
+     *
+     * Carried by the mirrored layout factories - a layout that has no fold to make (swiss) simply has no
+     * mirrored variant.
+     */
+    MIRRORED: 'mirrored',
+};
+
+const TOURNAMENT_MODE = {
+    SINGLE_ELIMINATION: 'single-elimination',
+    DOUBLE_ELIMINATION: 'double-elimination',
+    SWISS_WITH_ELIMINATION: 'swiss-with-elimination',
+};
+/** Wins that advance a participant out of a swiss stage. */
+const SWISS_ADVANCE_WINS = 3;
+/** Losses that eliminate a participant from a swiss stage. */
+const SWISS_ELIMINATE_LOSSES = 3;
+
+const BRACKET_ROUND_MIRROR_TYPE = {
+    LEFT: 'left',
+    RIGHT: 'right',
+};
+const COMMON_BRACKET_ROUND_TYPE = {
+    THIRD_PLACE: 'third-place',
+    FINAL: 'final',
+};
+const SINGLE_ELIMINATION_BRACKET_ROUND_TYPE = {
+    SINGLE_ELIMINATION_BRACKET: 'single-elimination-bracket',
+};
+const DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE = {
+    UPPER_BRACKET: 'upper-bracket',
+    LOWER_BRACKET: 'lower-bracket',
+    REVERSE_FINAL: 'reverse-final',
+};
+const SWISS_BRACKET_ROUND_TYPE = {
+    SWISS: 'swiss',
+};
+const GROUP_BRACKET_ROUND_TYPE = {
+    GROUP: 'group',
+};
+const TERMINAL_ROUND_SORT_PRIORITY = {
+    [COMMON_BRACKET_ROUND_TYPE.FINAL]: 1,
+    [DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL]: 2,
+    [COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE]: 3,
+};
+const createRoundsMapBase = (source, options) => {
+    const map = new BracketMap();
+    const shouldSplitRoundsInTwo = options.layout === BRACKET_DATA_LAYOUT.MIRRORED;
+    const isDoubleElimination = source.mode === TOURNAMENT_MODE.DOUBLE_ELIMINATION;
+    let currentUpperBracketIndex = 0;
+    let currentLowerBracketIndex = 0;
+    // A fold converges once, on the first round it cannot halve, and every later round stays whole -
+    // otherwise a bye (`[6, 3, 2, 1]`) reopens the fold past its middle and draws a round on both sides
+    // of one that has no side. Tracked per bracket half, because the two converge separately.
+    const foldClosed = { upper: false, lower: false };
+    const splitRoundsRest = [];
+    const orderedRounds = [...source.rounds].sort((a, b) => (TERMINAL_ROUND_SORT_PRIORITY[a.type] ?? 0) - (TERMINAL_ROUND_SORT_PRIORITY[b.type] ?? 0));
+    for (const [roundIndex, round] of orderedRounds.entries()) {
+        const isUpperBracket = round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET;
+        const isLowerBracket = round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET;
+        const isCommonDoubleEliminationRound = !isUpperBracket && !isLowerBracket && isDoubleElimination;
+        const matches = source.matches.filter((m) => m.roundId === round.id);
+        const roundId = round.id;
+        const foldSide = isLowerBracket || isCommonDoubleEliminationRound ? 'lower' : 'upper';
+        const canHalveRound = matches.length >= 2 && matches.length % 2 === 0;
+        const shouldSplitRound = shouldSplitRoundsInTwo && canHalveRound && !foldClosed[foldSide];
+        if (!canHalveRound)
+            foldClosed[foldSide] = true;
+        const isFirstRound = roundIndex === 0;
+        const isLastRound = roundIndex === orderedRounds.length - 1;
+        const isFirstOfType = orderedRounds.findIndex((r) => r.type === round.type) === roundIndex;
+        const isLastOfType = orderedRounds
+            .slice()
+            .reverse()
+            .findIndex((r) => r.type === round.type) ===
+            orderedRounds.length - roundIndex - 1;
+        const depth = isLowerBracket || isCommonDoubleEliminationRound ? currentLowerBracketIndex : currentUpperBracketIndex;
+        if (shouldSplitRound) {
+            const firstHalfRoundId = `${roundId}--half-1`;
+            const secondHalfRoundId = `${roundId}--half-2`;
+            const firstHalfMatchesMaxIndex = matches.length / 2 - 1;
+            // Both halves are the same round at the same depth, drawn on either side of the fold - so they
+            // carry the same `logicalIndex`, which is what pairs a right-hand column with its left-hand twin.
+            const halfBase = {
+                type: round.type,
+                logicalIndex: depth,
+                data: round.data,
+                position: (depth + 1),
+                name: round.name,
+                matchCount: matches.length / 2,
+                isFirstRound,
+                isLastRound,
+                isFirstOfType,
+                isLastOfType,
+            };
+            const bracketRoundFirstHalf = {
+                ...halfBase,
+                id: firstHalfRoundId,
+                shortId: `${roundIndex}-left`,
+                matchIds: matches.slice(0, firstHalfMatchesMaxIndex + 1).map((m) => m.id),
+                mirrorRoundType: BRACKET_ROUND_MIRROR_TYPE.LEFT,
+            };
+            const bracketRoundSecondHalf = {
+                ...halfBase,
+                id: secondHalfRoundId,
+                shortId: `${roundIndex}-right`,
+                matchIds: matches.slice(firstHalfMatchesMaxIndex + 1).map((m) => m.id),
+                mirrorRoundType: BRACKET_ROUND_MIRROR_TYPE.RIGHT,
+            };
+            map.set(firstHalfRoundId, bracketRoundFirstHalf);
+            splitRoundsRest.unshift(bracketRoundSecondHalf);
+        }
+        else {
+            const bracketRound = {
+                type: round.type,
+                id: roundId,
+                shortId: `${roundIndex}`,
+                logicalIndex: depth,
+                data: round.data,
+                position: (depth + 1),
+                name: round.name,
+                matchCount: matches.length,
+                matchIds: matches.map((m) => m.id),
+                mirrorRoundType: null,
+                isFirstRound,
+                isLastRound,
+                isFirstOfType,
+                isLastOfType,
+            };
+            map.set(roundId, bracketRound);
+        }
+        if (isLowerBracket || isCommonDoubleEliminationRound) {
+            currentLowerBracketIndex++;
+        }
+        else {
+            currentUpperBracketIndex++;
+        }
+    }
+    // The right halves close the map, deepest first, so walking it in order walks the fold: out along the
+    // left side, through the rounds too small to halve, and back along the right. `splitRoundsRest` was
+    // built by unshifting, so it is already in that order - and each half keeps the depth of its twin
+    // rather than being renumbered past the last round, which is what lets a builder pair the two sides.
+    if (splitRoundsRest.length) {
+        if (!map.last())
+            throw new BracketRuntimeError(BRACKET_ERROR_CODES.ROUND_RELATION_INVALID, 'Last round not found');
+        for (const splitRound of splitRoundsRest) {
+            map.set(splitRound.id, splitRound);
+        }
+    }
+    return map;
+};
+
+const createNewMatchParticipantBase = (source, participantId, match, rounds, matchRoundId, participants, sourceMatchesById) => {
+    if (!participantId)
+        return null;
+    const findSourceMatch = (matchId) => matchId === undefined
+        ? undefined
+        : sourceMatchesById
+            ? sourceMatchesById.get(matchId)
+            : source.matches.find((m) => m.id === matchId);
+    const participantBase = participants.getOrThrow(participantId);
+    const roundBase = rounds.getOrThrow(matchRoundId);
+    const matchIndex = participantBase.matchIds.indexOf(match.id);
+    if (matchIndex === -1)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, `Match with id ${match.id} not found in participant with id ${participantId}`);
+    const participantSide = match.home === participantId ? 'home' : 'away';
+    const isWinner = match.winner === participantSide;
+    const isLooser = match.winner && match.winner !== participantSide;
+    const isTie = match.status === 'completed' && !match.winner;
+    let winsTilNow = isWinner ? 1 : 0;
+    let lossesTilNow = isLooser ? 1 : 0;
+    let tiesTilNow = isTie ? 1 : 0;
+    for (let i = 0; i < matchIndex; i++) {
+        const previousMatchId = participantBase.matchIds[i];
+        const previousMatch = findSourceMatch(previousMatchId);
+        const myPreviousMatchSide = previousMatch?.home === participantId ? 'home' : previousMatch?.away === participantId ? 'away' : null;
+        if (!previousMatch || !myPreviousMatchSide)
+            continue;
+        const previousIsWinner = previousMatch.winner === myPreviousMatchSide;
+        const previousIsLooser = previousMatch.winner && previousMatch.winner !== myPreviousMatchSide;
+        const previousIsTie = previousMatch.status === 'completed' && !previousMatch.winner;
+        if (previousIsWinner) {
+            winsTilNow++;
+        }
+        else if (previousIsLooser) {
+            lossesTilNow++;
+        }
+        else if (previousIsTie) {
+            tiesTilNow++;
+        }
+    }
+    const hasElimination = source.mode === TOURNAMENT_MODE.SINGLE_ELIMINATION ||
+        source.mode === TOURNAMENT_MODE.DOUBLE_ELIMINATION ||
+        source.mode === TOURNAMENT_MODE.SWISS_WITH_ELIMINATION;
+    let isEliminated = false;
+    let isEliminationMatch = false;
+    if (hasElimination) {
+        switch (source.mode) {
+            case TOURNAMENT_MODE.SINGLE_ELIMINATION: {
+                isEliminationMatch = true;
+                isEliminated = isLooser ?? false;
+                break;
+            }
+            case TOURNAMENT_MODE.DOUBLE_ELIMINATION: {
+                isEliminationMatch =
+                    roundBase.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET ||
+                        roundBase.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL ||
+                        roundBase.type === COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE;
+                // Final is only an elimination match if there is no reverse final or there is one and this participant came from the lower bracket
+                if (roundBase.type === COMMON_BRACKET_ROUND_TYPE.FINAL) {
+                    const hasReverseFinal = source.rounds.some((r) => r.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL);
+                    if (!hasReverseFinal)
+                        break;
+                    const currentMatchIndex = participantBase.matchIds.indexOf(match.id);
+                    if (currentMatchIndex === -1)
+                        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, `Match with id ${match.id} not found in participant with id ${participantId}`);
+                    if (currentMatchIndex === 0)
+                        break;
+                    const previousMatchIndex = currentMatchIndex - 1;
+                    const previousMatchId = participantBase.matchIds[previousMatchIndex];
+                    const previousMatch = findSourceMatch(previousMatchId);
+                    if (!previousMatch)
+                        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, `Previous match with id ${previousMatchId} not found`);
+                    const previousRound = rounds.getOrThrow(previousMatch.roundId);
+                    isEliminationMatch = previousRound.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET;
+                }
+                isEliminated = (isEliminationMatch && isLooser) ?? false;
+                break;
+            }
+            case TOURNAMENT_MODE.SWISS_WITH_ELIMINATION: {
+                // `lossesTilNow` counts this match too, so the losses carried *into* it are one fewer for a
+                // loser - it is those that decide whether losing here is what puts the participant out.
+                const priorLosses = lossesTilNow - (isLooser ? 1 : 0);
+                isEliminationMatch = priorLosses >= SWISS_ELIMINATE_LOSSES - 1;
+                isEliminated = (isEliminationMatch && isLooser) ?? false;
+            }
+        }
+    }
+    const matchParticipantBase = {
+        ...participantBase,
+        isEliminated,
+        isEliminationMatch,
+        lossCount: lossesTilNow,
+        tieCount: tiesTilNow,
+        winCount: winsTilNow,
+        result: isWinner ? 'win' : isLooser ? 'loss' : isTie ? 'tie' : null,
+        side: participantSide,
+    };
+    return matchParticipantBase;
+};
+
+const createMatchesMapBase = (source, rounds, participants) => {
+    const map = new BracketMap();
+    const sourceMatchesById = new Map(source.matches.map((match) => [match.id, match]));
+    for (const match of source.matches) {
+        const genericRound = rounds.get(match.roundId);
+        const splitRound = rounds.get(`${match.roundId}--half-1`);
+        const splitRound2 = rounds.get(`${match.roundId}--half-2`);
+        const genericRoundMatchIndex = genericRound?.matchIds.indexOf(match.id) ?? -1;
+        const splitRoundMatchIndex = splitRound?.matchIds.indexOf(match.id) ?? -1;
+        const splitRound2MatchIndex = splitRound2?.matchIds.indexOf(match.id) ?? -1;
+        const roundToUse = genericRoundMatchIndex !== -1
+            ? genericRound
+            : splitRoundMatchIndex !== -1
+                ? splitRound
+                : splitRound2MatchIndex !== -1
+                    ? splitRound2
+                    : null;
+        if (!roundToUse)
+            throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, `Round for match with id ${match.id} not found`);
+        const indexInRound = genericRoundMatchIndex !== -1
+            ? genericRoundMatchIndex
+            : splitRoundMatchIndex !== -1
+                ? splitRoundMatchIndex
+                : splitRound2MatchIndex !== -1
+                    ? splitRound2MatchIndex
+                    : -1;
+        if (indexInRound === -1)
+            throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, `Match with id ${match.id} not found in round with id ${roundToUse.id}`);
+        const home = createNewMatchParticipantBase(source, match.home, match, rounds, roundToUse.id, participants, sourceMatchesById);
+        const away = createNewMatchParticipantBase(source, match.away, match, rounds, roundToUse.id, participants, sourceMatchesById);
+        const winner = match.winner === 'home' ? home : match.winner === 'away' ? away : null;
+        const matchBase = {
+            home,
+            away,
+            data: match.data,
+            shortId: `${roundToUse.shortId}-${indexInRound}`,
+            id: match.id,
+            indexInRound,
+            position: (indexInRound + 1),
+            roundId: roundToUse?.id,
+            status: match.status,
+            homeSource: match.homeSource ?? null,
+            awaySource: match.awaySource ?? null,
+            winner,
+            winnerSide: match.winner,
+        };
+        map.set(matchBase.id, matchBase);
+    }
+    return map;
+};
+
+const createParticipantsMapBase = (source) => {
+    const map = new BracketMap();
+    const participantIds = source.matches
+        .map((m) => [m.home, m.away])
+        .flat()
+        .filter((p) => !!p);
+    const matchIdsByParticipant = new Map();
+    for (const match of source.matches) {
+        for (const participantId of new Set([match.home, match.away])) {
+            if (!participantId)
+                continue;
+            const matchIds = matchIdsByParticipant.get(participantId) ?? [];
+            matchIds.push(match.id);
+            matchIdsByParticipant.set(participantId, matchIds);
+        }
+    }
+    for (const [index, participantId] of participantIds.entries()) {
+        const participantBase = {
+            id: participantId,
+            shortId: `p${index}`,
+            matchIds: matchIdsByParticipant.get(participantId) ?? [],
+        };
+        map.set(participantId, participantBase);
+    }
+    return map;
+};
+
+const sortSourceMatchesByRoundOrder = (source) => {
+    const orderedRoundIds = [...source.rounds]
+        .sort((a, b) => (TERMINAL_ROUND_SORT_PRIORITY[a.type] ?? 0) - (TERMINAL_ROUND_SORT_PRIORITY[b.type] ?? 0))
+        .map((r) => r.id);
+    const roundIndexMap = new Map(orderedRoundIds.map((id, i) => [id, i]));
+    const sortedMatches = [...source.matches].sort((a, b) => (roundIndexMap.get(a.roundId) ?? 0) - (roundIndexMap.get(b.roundId) ?? 0));
+    return { ...source, matches: sortedMatches };
+};
+const assertUniqueIds = (options) => {
+    const seen = new Set();
+    for (const id of options.ids) {
+        if (seen.has(id)) {
+            throw new BracketRuntimeError(options.code, `${options.kind} with id ${id} exists more than once in the source.`);
+        }
+        seen.add(id);
+    }
+};
+const createBracketBase = (source, options) => {
+    assertUniqueIds({
+        ids: source.rounds.map((round) => round.id),
+        code: BRACKET_ERROR_CODES.DUPLICATE_ROUND,
+        kind: 'Round',
+    });
+    assertUniqueIds({
+        ids: source.matches.map((match) => match.id),
+        code: BRACKET_ERROR_CODES.DUPLICATE_MATCH,
+        kind: 'Match',
+    });
+    const normalizedSource = sortSourceMatchesByRoundOrder(source);
+    const participants = createParticipantsMapBase(normalizedSource);
+    const rounds = createRoundsMapBase(normalizedSource, options);
+    const matches = createMatchesMapBase(normalizedSource, rounds, participants);
+    const bracketData = {
+        matches,
+        rounds,
+        participants,
+        mode: source.mode,
+    };
+    return bracketData;
+};
+
+const path = (d, options) => {
+    const commands = d.replace(/\s+/g, ' ').trim();
+    return {
+        id: options.id,
+        d: commands,
+        cssPath: `path("${commands}")`,
+        cssClass: options.className,
+        strokeWidth: options.width,
+        dashArray: options.dashArray,
+        dashOffset: options.dashOffset,
+        stroke: options.stroke ?? 'currentColor',
+    };
+};
+
+const curvePath = (from, to, direction, options) => {
+    const inverted = options.inverted ?? false;
+    const fromInline = inverted ? from.inline.start : from.inline.end;
+    const toInline = inverted ? to.inline.end : to.inline.start;
+    const fromBlock = from.block.center;
+    const toBlock = to.block.center;
+    // Both bends have to fit inside the block and the inline distance between the two cards, or the line
+    // turns past its target and comes back. Scaling them down instead - to nothing, for two cards on the
+    // same row - is also what keeps the six commands below identical for every connector: a CSS `d`
+    // transition interpolates only between two paths of the same shape.
+    const requestedCurve = options.lineStartingCurveAmount + options.lineEndingCurveAmount;
+    const totalInline = Math.abs(toInline - fromInline);
+    const room = Math.min(Math.abs(toBlock - fromBlock), totalInline);
+    const curveScale = requestedCurve > room ? room / requestedCurve : 1;
+    const startCurve = options.lineStartingCurveAmount * curveScale;
+    const endCurve = options.lineEndingCurveAmount * curveScale;
+    const straightLength = (totalInline - startCurve - endCurve) / 2;
+    const straightEnd = inverted ? fromInline - straightLength : fromInline + straightLength;
+    const straightStart = inverted ? toInline + straightLength : toInline - straightLength;
+    const firstCurveEndX = inverted ? straightEnd - startCurve : straightEnd + startCurve;
+    const firstCurveEndY = direction === 'down' ? fromBlock + startCurve : fromBlock - startCurve;
+    const secondCurveStartY = direction === 'down' ? toBlock - endCurve : toBlock + endCurve;
+    const secondCurveEndX = straightStart;
+    const secondCurveEndY = toBlock;
+    const secondCurveBezierX = inverted ? straightStart + endCurve : straightStart - endCurve;
+    const d = [
+        `M ${fromInline} ${fromBlock}`,
+        `H ${straightEnd}`,
+        `Q ${firstCurveEndX} ${fromBlock}, ${firstCurveEndX} ${firstCurveEndY}`,
+        `V ${secondCurveStartY}`,
+        `Q ${secondCurveBezierX} ${toBlock}, ${secondCurveEndX} ${secondCurveEndY}`,
+        `H ${toInline}`,
+    ].join(' ');
+    return path(d, options.path);
+};
+
+const createBracketElementPart = (config) => ({
+    dimensions: {
+        width: 0,
+        height: config.elementPartHeight,
+        top: 0,
+        left: 0,
+    },
+});
+
+const createBracketElement = (config) => {
+    const { type, area, elementHeight, partHeights } = config;
+    const parts = [];
+    const newElementBase = {
+        dimensions: {
+            width: 0,
+            height: elementHeight,
+            top: 0,
+            left: 0,
+        },
+        containerDimensions: {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        parts,
+        area,
+    };
+    const newElement = (() => {
+        switch (type) {
+            case 'header':
+                return {
+                    ...newElementBase,
+                    type,
+                    component: config.component,
+                    round: config.round,
+                    roundSwissGroup: config.roundSwissGroup,
+                };
+            case 'match':
+                return {
+                    ...newElementBase,
+                    type,
+                    component: config.component,
+                    match: config.match,
+                    round: config.round,
+                    roundSwissGroup: config.roundSwissGroup,
+                };
+            case 'matchGap':
+            case 'roundHeaderGap':
+            case 'roundGap':
+            case 'colGap':
+                return {
+                    ...newElementBase,
+                    type,
+                };
+            case 'continue':
+                return {
+                    ...newElementBase,
+                    type,
+                    component: config.component,
+                    matches: config.matches,
+                };
+            default:
+                throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, `Unknown element type: ${type}`);
+        }
+    })();
+    for (const partHeight of partHeights) {
+        parts.push(createBracketElementPart({ elementPartHeight: partHeight }));
+    }
+    return newElement;
+};
+
+const finalizeBracketGrid = (grid) => {
+    const finalizedColumns = [];
+    const finalizedElementMap = new BracketMap();
+    const ignoredSections = [];
+    for (const [masterColumnIndex, masterColumn] of grid.grid.masterColumns.entries()) {
+        for (const [sectionIndex, section] of masterColumn.sections.entries()) {
+            if (ignoredSections.some((s) => s.masterColumnIndex === masterColumnIndex && s.sectionIndex === sectionIndex)) {
+                continue;
+            }
+            const elements = [];
+            const firstSubColumn = section.subColumns[0];
+            const lastSubColumn = section.subColumns[section.subColumns.length - 1];
+            if (!firstSubColumn || !lastSubColumn)
+                continue;
+            let sectionWidth = section.dimensions.width;
+            for (const element of firstSubColumn.elements) {
+                if (element.type === 'header') {
+                    elements.push({
+                        type: 'header',
+                        dimensions: element.dimensions,
+                        component: element.component,
+                        round: element.round,
+                        roundSwissGroup: element.roundSwissGroup,
+                    });
+                }
+                else if (element.type === 'match') {
+                    const matchEl = {
+                        type: 'match',
+                        dimensions: element.dimensions,
+                        component: element.component,
+                        match: element.match,
+                        round: element.round,
+                        classes: [element.match.home?.shortId, element.match.away?.shortId].filter((v) => !!v).join(' '),
+                        roundSwissGroup: element.roundSwissGroup,
+                    };
+                    elements.push(matchEl);
+                    finalizedElementMap.set(element.match.id, matchEl);
+                }
+                else if (element.type === 'continue') {
+                    elements.push({
+                        type: 'continue',
+                        dimensions: element.dimensions,
+                        component: element.component,
+                        matches: element.matches,
+                    });
+                }
+            }
+            if (!lastSubColumn.span.isEnd) {
+                for (let index = masterColumnIndex + 1; index < grid.grid.masterColumns.length; index++) {
+                    const nextMaster = grid.grid.masterColumns[index];
+                    const nextSection = nextMaster?.sections[sectionIndex];
+                    if (!nextSection)
+                        break;
+                    sectionWidth += nextSection.dimensions.width;
+                    ignoredSections.push({ masterColumnIndex: index, sectionIndex });
+                    if (nextSection.subColumns.some((sc) => sc.span.isEnd)) {
+                        break;
+                    }
+                }
+            }
+            if (!elements.length)
+                continue;
+            finalizedColumns.push({
+                dimensions: {
+                    ...section.dimensions,
+                    width: sectionWidth,
+                },
+                elements,
+            });
+        }
+    }
+    return {
+        columns: finalizedColumns,
+        elementMap: finalizedElementMap,
+    };
+};
+
+const createBracketGrid = (config) => {
+    const masterColumns = [];
+    const contentWidths = new WeakMap();
+    const newGrid = {
+        dimensions: { width: 0, height: 0, top: 0, left: 0 },
+        masterColumns,
+    };
+    const pushMasterColumn = (...newMasterColumns) => {
+        masterColumns.push(...newMasterColumns);
+    };
+    const calculateDimensions = () => {
+        let currentMasterColumnLeft = 0;
+        let maxGridHeight = 0;
+        const masterCols = newGrid.masterColumns;
+        for (const masterColumn of masterCols) {
+            const { padding } = masterColumn;
+            masterColumn.dimensions.left = currentMasterColumnLeft;
+            masterColumn.dimensions.top = 0;
+            const contentWidth = contentWidths.get(masterColumn) ?? masterColumn.dimensions.width;
+            contentWidths.set(masterColumn, contentWidth);
+            masterColumn.dimensions.width = contentWidth + padding.left + padding.right;
+            const sections = masterColumn.sections;
+            let runningTop = 0;
+            const firstElement = sections[0]?.subColumns[0]?.elements[0];
+            const firstSectionIsHeader = firstElement?.type === 'header';
+            for (const [secIdx, section] of sections.entries()) {
+                const sectionPadding = section.padding ?? padding;
+                let sectionPaddingTop;
+                if (secIdx === 0) {
+                    sectionPaddingTop = firstSectionIsHeader ? 0 : sectionPadding.top;
+                }
+                else {
+                    sectionPaddingTop = sectionPadding.top;
+                }
+                section.dimensions.width = masterColumn.dimensions.width;
+                section.dimensions.left = masterColumn.dimensions.left;
+                section.dimensions.top = runningTop;
+                runningTop += sectionPaddingTop;
+                const sectionContentWidth = masterColumn.dimensions.width - sectionPadding.left - sectionPadding.right;
+                const subColumns = section.subColumns;
+                const totalSubColumns = subColumns.length;
+                const subColumnWidth = sectionContentWidth / totalSubColumns;
+                let currentSubColumnLeft = masterColumn.dimensions.left + sectionPadding.left;
+                let maxSectionHeight = 0;
+                for (const subColumn of subColumns) {
+                    subColumn.dimensions.width = subColumnWidth;
+                    subColumn.dimensions.left = currentSubColumnLeft;
+                    subColumn.dimensions.top = section.dimensions.top + sectionPaddingTop;
+                    let totalSubColumnHeight = 0;
+                    const elements = subColumn.elements;
+                    for (const element of elements) {
+                        let totalElementHeight = 0;
+                        const parts = element.parts;
+                        for (const part of parts) {
+                            part.dimensions.width = subColumnWidth;
+                            part.dimensions.left = currentSubColumnLeft;
+                            part.dimensions.top = subColumn.dimensions.top + totalSubColumnHeight + totalElementHeight;
+                            totalElementHeight += part.dimensions.height;
+                        }
+                        element.containerDimensions.height = totalElementHeight;
+                        element.containerDimensions.width = subColumnWidth;
+                        element.containerDimensions.left = currentSubColumnLeft;
+                        element.containerDimensions.top = subColumn.dimensions.top + totalSubColumnHeight;
+                        element.dimensions.width = subColumnWidth;
+                        element.dimensions.left = currentSubColumnLeft;
+                        element.dimensions.top =
+                            element.containerDimensions.top + (totalElementHeight - element.dimensions.height) * 0.5;
+                        totalSubColumnHeight += totalElementHeight;
+                    }
+                    subColumn.dimensions.height = totalSubColumnHeight;
+                    if (totalSubColumnHeight > maxSectionHeight)
+                        maxSectionHeight = totalSubColumnHeight;
+                    currentSubColumnLeft += subColumnWidth;
+                }
+                // Never negative: a section may start above where it would stack (a folded third place asks for
+                // that with a negative padding), but its own box still has to be a box.
+                section.dimensions.height = Math.max(0, sectionPaddingTop + maxSectionHeight + sectionPadding.bottom);
+                runningTop += maxSectionHeight + sectionPadding.bottom;
+            }
+            masterColumn.dimensions.height = runningTop;
+            if (masterColumn.dimensions.height > maxGridHeight)
+                maxGridHeight = masterColumn.dimensions.height;
+            currentMasterColumnLeft += masterColumn.dimensions.width;
+        }
+        newGrid.dimensions.width = currentMasterColumnLeft;
+        newGrid.dimensions.height = maxGridHeight;
+        calculateSpanningElementDimensions();
+    };
+    const calculateSpanningElementDimensions = () => {
+        const spanDimensions = new Map();
+        const masterCols = newGrid.masterColumns;
+        for (const [mcIdx, masterColumn] of masterCols.entries()) {
+            const sections = masterColumn.sections;
+            for (const [secIdx, section] of sections.entries()) {
+                const subColumns = section.subColumns;
+                for (const [scIdx, subColumn] of subColumns.entries()) {
+                    const elements = subColumn.elements;
+                    for (const element of elements) {
+                        if (!element.span)
+                            continue;
+                        const span = element.span;
+                        const isStartPosition = mcIdx === span.masterColumnStart && secIdx === span.sectionStart && scIdx === span.subColumnStart;
+                        const spanKey = `${span.masterColumnStart}-${span.masterColumnEnd}-${span.sectionStart}-${span.sectionEnd}-${span.subColumnStart}-${span.subColumnEnd}`;
+                        if (isStartPosition && !spanDimensions.has(spanKey)) {
+                            const { left: spanStartLeft, width: totalSpannedWidth } = calculateSpanExtent(span, masterCols);
+                            const width = config.spanElementWidth;
+                            // Winner bracket rounds span two lower bracket columns. Left-align them within that
+                            // span (factor 0) instead of centering (factor 0.5) so each winner round n sits above
+                            // the lower bracket round its losers drop into (round 2n-2) - the round whose matches
+                            // merge into the next one. That makes the participant's drop target unambiguous. Every
+                            // other spanning round (e.g. lower rounds split across sub-columns) stays centered.
+                            const round = element.type === 'header' || element.type === 'match' ? element.round : null;
+                            const alignFactor = round?.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET ? 0 : 0.5;
+                            spanDimensions.set(spanKey, { width, left: spanStartLeft + (totalSpannedWidth - width) * alignFactor });
+                        }
+                        const storedDimensions = spanDimensions.get(spanKey);
+                        if (storedDimensions) {
+                            element.dimensions.width = storedDimensions.width;
+                            element.dimensions.left = storedDimensions.left;
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const calculateSpanExtent = (span, masterColumns) => {
+        const start = masterColumns[span.masterColumnStart]?.sections[span.sectionStart]?.subColumns[span.subColumnStart];
+        const end = masterColumns[span.masterColumnEnd]?.sections[span.sectionEnd]?.subColumns[span.subColumnEnd];
+        if (!start || !end)
+            return { left: start?.dimensions.left ?? 0, width: 0 };
+        return { left: start.dimensions.left, width: end.dimensions.left + end.dimensions.width - start.dimensions.left };
+    };
+    const setupElementSpans = () => {
+        const masterCols = newGrid.masterColumns;
+        for (const [mcIdx, masterColumn] of masterCols.entries()) {
+            const sections = masterColumn.sections;
+            for (const [secIdx, section] of sections.entries()) {
+                const subColumns = section.subColumns;
+                for (const [scIdx, subColumn] of subColumns.entries()) {
+                    if (subColumn.span.isStart && subColumn.span.isEnd)
+                        continue;
+                    let spanStart = { masterColumnIndex: mcIdx, sectionIndex: secIdx, subColumnIndex: scIdx };
+                    if (!subColumn.span.isStart) {
+                        outer: for (let m = mcIdx; m >= 0; m--) {
+                            const mc = masterCols[m];
+                            if (!mc)
+                                continue;
+                            const sec = mc.sections[secIdx];
+                            if (!sec)
+                                continue;
+                            const end = m === mcIdx ? scIdx : sec.subColumns.length - 1;
+                            for (let s = end; s >= 0; s--) {
+                                if (sec.subColumns[s]?.span.isStart) {
+                                    spanStart = { masterColumnIndex: m, sectionIndex: secIdx, subColumnIndex: s };
+                                    break outer;
+                                }
+                            }
+                        }
+                    }
+                    let spanEnd = { masterColumnIndex: mcIdx, sectionIndex: secIdx, subColumnIndex: scIdx };
+                    if (!subColumn.span.isEnd) {
+                        outer: for (let m = mcIdx; m < masterCols.length; m++) {
+                            const mc = masterCols[m];
+                            if (!mc)
+                                continue;
+                            const sec = mc.sections[secIdx];
+                            if (!sec)
+                                continue;
+                            const start = m === mcIdx ? scIdx : 0;
+                            for (let s = start; s < sec.subColumns.length; s++) {
+                                if (sec.subColumns[s]?.span.isEnd) {
+                                    spanEnd = { masterColumnIndex: m, sectionIndex: secIdx, subColumnIndex: s };
+                                    break outer;
+                                }
+                            }
+                        }
+                    }
+                    const elements = subColumn.elements;
+                    for (const element of elements) {
+                        element.span = {
+                            masterColumnStart: spanStart.masterColumnIndex,
+                            masterColumnEnd: spanEnd.masterColumnIndex,
+                            sectionStart: spanStart.sectionIndex,
+                            sectionEnd: spanEnd.sectionIndex,
+                            subColumnStart: spanStart.subColumnIndex,
+                            subColumnEnd: spanEnd.subColumnIndex,
+                        };
+                    }
+                }
+            }
+        }
+    };
+    return {
+        grid: newGrid,
+        pushMasterColumn,
+        calculateDimensions,
+        setupElementSpans,
+    };
+};
+
+const createBracketMasterColumn = (config) => {
+    const { columnWidth, padding } = config;
+    const sections = [];
+    const newMasterColumn = {
+        dimensions: {
+            width: columnWidth,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        padding,
+        sections,
+    };
+    const pushSection = (...newSections) => {
+        sections.push(...newSections);
+    };
+    return {
+        masterColumn: newMasterColumn,
+        pushSection,
+    };
+};
+
+const createBracketMasterColumnSection = (config) => {
+    const { type, padding } = config;
+    const subColumns = [];
+    const newMasterColumnSection = {
+        dimensions: {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        subColumns,
+        type,
+        padding,
+    };
+    const pushSubColumn = (...newSubColumns) => {
+        subColumns.push(...newSubColumns);
+    };
+    return {
+        masterColumnSection: newMasterColumnSection,
+        pushSubColumn,
+    };
+};
+
+const createBracketSubColumn = (config) => {
+    const { span } = config;
+    const elements = [];
+    const newSubColumn = {
+        dimensions: {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        elements,
+        span,
+    };
+    const pushElement = (...newElements) => {
+        elements.push(...newElements);
+    };
+    return {
+        subColumn: newSubColumn,
+        pushElement,
+    };
+};
+
+const isBracketContinueMatch = (match) => match.round.type !== COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE &&
+    (match.relation.type === 'one-to-nothing' || match.relation.type === 'two-to-nothing');
+const getBracketContinueMatches = (bracketData) => Array.from(bracketData.matches.values()).filter((match) => isBracketContinueMatch(match));
+const createBracketContinueMasterColumn = (config) => {
+    const { existingMasterColumns, columnWidth, elementHeight, headerOffset, component, matches } = config;
+    const lastMasterColumn = existingMasterColumns[existingMasterColumns.length - 1];
+    if (!lastMasterColumn) {
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, 'No last master column found in existing master columns');
+    }
+    // Dimensions are not calculated yet at this point, but all part heights are static, so the
+    // total column height is the sum of the tallest sub column of every section plus its padding - the
+    // same sum `calculateDimensions` makes, which skips the top padding of a leading header section.
+    const firstSectionIsHeader = lastMasterColumn.sections[0]?.subColumns[0]?.elements[0]?.type === 'header';
+    let totalHeight = 0;
+    for (const [sectionIndex, section] of lastMasterColumn.sections.entries()) {
+        const padding = section.padding ?? lastMasterColumn.padding;
+        const paddingTop = sectionIndex === 0 && firstSectionIsHeader ? 0 : padding.top;
+        const sectionHeight = Math.max(0, ...section.subColumns.map((subColumn) => subColumn.elements.reduce((subColumnHeight, element) => subColumnHeight + element.parts.reduce((sum, part) => sum + part.dimensions.height, 0), 0)));
+        totalHeight += paddingTop + sectionHeight + padding.bottom;
+    }
+    const { masterColumn, pushSection } = createBracketMasterColumn({
+        columnWidth,
+        padding: {
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+        },
+    });
+    const { masterColumnSection, pushSubColumn } = createBracketMasterColumnSection({
+        type: 'round',
+    });
+    const { subColumn, pushElement } = createBracketSubColumn({
+        span: {
+            isStart: true,
+            isEnd: true,
+        },
+    });
+    if (headerOffset > 0) {
+        const headerGapElement = createBracketElement({
+            area: '.',
+            type: 'colGap',
+            elementHeight: headerOffset,
+            partHeights: [headerOffset],
+        });
+        pushElement(headerGapElement);
+    }
+    const containerHeight = Math.max(elementHeight, totalHeight - headerOffset);
+    const continueElement = createBracketElement({
+        area: 'continue',
+        type: 'continue',
+        elementHeight,
+        partHeights: [containerHeight],
+        component,
+        matches,
+    });
+    pushElement(continueElement);
+    pushSubColumn(subColumn);
+    pushSection(masterColumnSection);
+    return masterColumn;
+};
+
+// eslint-disable-next-line max-params -- geometry helper: (from, to, options) reads naturally positional
+const linePath = (from, to, options) => {
+    const inverted = options.inverted ?? false;
+    const fromInline = inverted ? from.inline.start : from.inline.end;
+    const toInline = inverted ? to.inline.end : to.inline.start;
+    return path(`M ${fromInline} ${from.block.center} L ${toInline} ${to.block.center}`, options.path);
+};
+/**
+ * The connector between two cards sharing a column, where {@link linePath} and `curvePath` both
+ * degenerate to a zero-width horizontal run: straight down (or up) the column, edge to edge.
+ */
+// eslint-disable-next-line max-params -- geometry helper: (from, to, options) reads naturally positional
+const verticalPath = (from, to, options) => {
+    const inline = (from.inline.center + to.inline.center) / 2;
+    const isDownwards = to.block.center >= from.block.center;
+    const fromBlock = isDownwards ? from.block.end : from.block.start;
+    const toBlock = isDownwards ? to.block.start : to.block.end;
+    return path(`M ${inline} ${fromBlock} V ${toBlock}`, options.path);
+};
+/**
+ * A same-column connector for two cards with others stacked between them: out sideways, along the
+ * empty strip beside the column, and back in. {@link verticalPath} would run through everything in
+ * its way.
+ */
+// eslint-disable-next-line max-params -- geometry helper: (from, to, options) reads naturally positional
+const gutterPath = (from, to, options) => {
+    const inverted = options.inverted ?? false;
+    const fromInline = inverted ? from.inline.start : from.inline.end;
+    const toInline = inverted ? to.inline.start : to.inline.end;
+    const runInline = inverted
+        ? Math.min(fromInline, toInline) - options.gutter
+        : Math.max(fromInline, toInline) + options.gutter;
+    return path(`M ${fromInline} ${from.block.center} H ${runInline} V ${to.block.center} H ${toInline}`, options.path);
+};
+
+const makePos = (dimensions) => ({
+    block: {
+        start: dimensions.top,
+        end: dimensions.top + dimensions.height,
+        center: dimensions.top + dimensions.height / 2,
+    },
+    inline: {
+        start: dimensions.left,
+        end: dimensions.left + dimensions.width,
+        center: dimensions.left + dimensions.width / 2,
+    },
+});
+/**
+ * Two cards in the same column - the shape a stacked layout's centre chain makes, where a round hangs
+ * directly below the one that feeds it and every horizontal run has zero width.
+ */
+const isSameColumn = (from, to) => Math.abs(from.inline.center - to.inline.center) < 1;
+/** A one-to-one connector, whichever way round the two cards sit. */
+// eslint-disable-next-line max-params -- geometry helper: (from, to, options) reads naturally positional
+const straightPath = (from, to, options) => isSameColumn(from, to) ? verticalPath(from, to, options) : linePath(from, to, options);
+/** One arm of a merge, collapsing to a straight run when the two cards share a column. */
+const mergePath = (from, to, direction, options) => isSameColumn(from, to) ? verticalPath(from, to, { path: options.path }) : curvePath(from, to, direction, options);
+const edgeId = (fromMatchId, toMatchId) => `${fromMatchId}|${toMatchId}`;
+const drawMan = (dimensions) => {
+    const edges = [];
+    const takenIds = new Set();
+    // A repeated id would make the host's `@for` throw, and a mirrored fold can draw the same pair of
+    // cards from both of its sides.
+    const pushEdge = (edge) => {
+        let id = edge.id;
+        for (let attempt = 2; takenIds.has(id); attempt++)
+            id = `${edge.id}#${attempt}`;
+        takenIds.add(id);
+        edges.push(id === edge.id ? edge : { ...edge, id });
+    };
+    const continueElement = dimensions.bracketGrid.columns
+        .flatMap((col) => col.elements)
+        .find((el) => el.type === 'continue');
+    const continuePos = continueElement ? makePos(continueElement.dimensions) : null;
+    const continueSources = [];
+    for (const col of dimensions.bracketGrid.columns) {
+        for (const el of col.elements) {
+            if (el.type !== 'match')
+                continue;
+            const currentMatchParticipantsShortIds = [el.match.home?.shortId, el.match.away?.shortId]
+                .filter((id) => !!id)
+                .join(' ');
+            const currentPos = makePos(el.dimensions);
+            if (el.round.type === COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE)
+                continue;
+            if (continuePos && isBracketContinueMatch(el.match)) {
+                continueSources.push({
+                    pos: currentPos,
+                    className: el.match.winner?.shortId || '',
+                    matchId: el.match.id,
+                });
+            }
+            // Crossing the middle of a fold. Every other line here is drawn by the match it flows *into*, but a
+            // round in the middle of a mirrored bracket is fed from both sides and its relation names only one
+            // of them - so the round on the way back draws its own line. Deliberately outside the switch below:
+            // which relation a match has says nothing about which side of a fold it sits on.
+            if (el.round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT && 'nextMatch' in el.match.relation) {
+                const { nextMatch, nextRound } = el.match.relation;
+                if (nextRound.mirrorRoundType === null) {
+                    const next = dimensions.bracketGrid.matchElementMap.getOrThrow(nextMatch.id);
+                    // The winner's short id, not both participants': this line is somebody advancing along it, and
+                    // the journey highlight lights the path a participant actually travelled.
+                    pushEdge(straightPath(makePos(next.dimensions), currentPos, {
+                        path: {
+                            ...dimensions.path,
+                            id: edgeId(nextMatch.id, el.match.id),
+                            className: el.match.winner?.shortId || '',
+                        },
+                    }));
+                }
+            }
+            switch (el.match.relation.type) {
+                case 'none':
+                case 'nothing-to-one': {
+                    continue;
+                }
+                case 'one-to-nothing':
+                case 'one-to-one': {
+                    const prev = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.previousMatch.id);
+                    const prevPos = makePos(prev.dimensions);
+                    // The winner of the match it comes from, like every other connector, or the journey highlight
+                    // lights the line for whoever arrived from somewhere else.
+                    pushEdge(straightPath(prevPos, currentPos, {
+                        path: {
+                            ...dimensions.path,
+                            id: edgeId(el.match.relation.previousMatch.id, el.match.id),
+                            className: el.match.relation.previousMatch.winner?.shortId || '',
+                        },
+                        // The way back runs right to left: the round it comes from sits on the *other* side.
+                        inverted: el.round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT,
+                    }));
+                    break;
+                }
+                case 'two-to-nothing':
+                case 'two-to-one': {
+                    const prevUpper = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.previousUpperMatch.id);
+                    const prevLower = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.previousLowerMatch.id);
+                    const prevUpperPos = makePos(prevUpper.dimensions);
+                    const prevLowerPos = makePos(prevLower.dimensions);
+                    const upperId = edgeId(el.match.relation.previousUpperMatch.id, el.match.id);
+                    const lowerId = edgeId(el.match.relation.previousLowerMatch.id, el.match.id);
+                    const isLowerUpperMerger = el.match.relation.previousLowerRound.id !== el.match.relation.previousUpperRound.id;
+                    const invertCurve = el.round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT;
+                    const curveOptions = {
+                        ...dimensions.curve,
+                        inverted: invertCurve,
+                        path: { ...dimensions.path, id: upperId, className: '' },
+                    };
+                    if (isLowerUpperMerger) {
+                        pushEdge(straightPath(prevUpperPos, currentPos, {
+                            path: { ...dimensions.path, id: upperId, className: currentMatchParticipantsShortIds },
+                            inverted: invertCurve,
+                        }));
+                    }
+                    else {
+                        pushEdge(mergePath(prevUpperPos, currentPos, 'down', {
+                            ...curveOptions,
+                            path: {
+                                ...curveOptions.path,
+                                className: el.match.relation.previousUpperMatch.winner?.shortId || '',
+                            },
+                        }));
+                    }
+                    const lowerPathOptions = {
+                        ...curveOptions.path,
+                        id: lowerId,
+                        className: el.match.relation.previousLowerMatch.winner?.shortId || '',
+                    };
+                    // A feeder directly *below* in the same column is the one connector a stacked layout has that
+                    // crosses its own cards - the losers champion coming up to the grand final, past everything
+                    // hanging under it. Every other same-column pair is adjacent, so a straight run is clear.
+                    const isBlockToBlock = isSameColumn(prevLowerPos, currentPos) && prevLowerPos.block.start > currentPos.block.end;
+                    pushEdge(isBlockToBlock
+                        ? gutterPath(prevLowerPos, currentPos, {
+                            // Dashed, like the continue column's: it runs the height of a block past cards it has
+                            // nothing to do with, and reads as a stray bracket edge if it looks like one.
+                            path: {
+                                ...(dimensions.continuePath ?? dimensions.path),
+                                id: lowerId,
+                                className: lowerPathOptions.className,
+                            },
+                            inverted: invertCurve,
+                            gutter: dimensions.columnGap / 2,
+                        })
+                        : mergePath(prevLowerPos, currentPos, 'up', { ...curveOptions, path: lowerPathOptions }));
+                    break;
+                }
+            }
+        }
+    }
+    if (continuePos && continueSources.length) {
+        const continuePathOptions = dimensions.continuePath ?? dimensions.path;
+        const curveAmount = dimensions.curve.lineStartingCurveAmount;
+        const trunkInline = continuePos.inline.start - dimensions.columnGap / 2;
+        const continueBlockCenter = continuePos.block.center;
+        const sourceBlocks = continueSources.map((source) => source.pos.block.center);
+        const firstSourceBlock = Math.min(...sourceBlocks);
+        const lastSourceBlock = Math.max(...sourceBlocks);
+        const trunkBlocks = [continueBlockCenter];
+        for (const source of continueSources) {
+            const sourceBlockCenter = source.pos.block.center;
+            const blockDistance = continueBlockCenter - sourceBlockCenter;
+            const sourcePathOptions = {
+                ...continuePathOptions,
+                id: edgeId(source.matchId, 'continue'),
+                className: source.className,
+            };
+            const isTrunkCorner = (sourceBlockCenter === firstSourceBlock && blockDistance > 0.5) ||
+                (sourceBlockCenter === lastSourceBlock && blockDistance < -0.5);
+            // The straight run into the trunk is the same three commands with a zero-radius corner, so that a
+            // source turning into a corner as the rows move animates rather than jumping.
+            const curve = isTrunkCorner ? Math.min(curveAmount, Math.abs(blockDistance)) : 0;
+            const curveEndBlock = sourceBlockCenter + curve * Math.sign(blockDistance);
+            pushEdge(path(`M ${source.pos.inline.end} ${sourceBlockCenter}
+           H ${trunkInline - curve}
+           Q ${trunkInline} ${sourceBlockCenter}, ${trunkInline} ${curveEndBlock}`, sourcePathOptions));
+            trunkBlocks.push(curveEndBlock);
+        }
+        const trunkBlockStart = Math.min(...trunkBlocks);
+        const trunkBlockEnd = Math.max(...trunkBlocks);
+        if (trunkBlockEnd - trunkBlockStart > 0.5) {
+            pushEdge(path(`M ${trunkInline} ${trunkBlockStart} V ${trunkBlockEnd}`, {
+                ...continuePathOptions,
+                id: 'continue|trunk',
+                className: '',
+            }));
+        }
+        pushEdge(path(`M ${trunkInline} ${continueBlockCenter} H ${continuePos.inline.start}`, {
+            ...continuePathOptions,
+            id: 'continue|element',
+            className: '',
+        }));
+    }
+    return { edges, rects: [], gradients: [] };
+};
+
+const BRACKET_SWISS_GROUP_COLOR_TYPE = {
+    /** The starting group (0-0) */
+    NEUTRAL: 'neutral',
+    /** The group has more wins than losses */
+    POSITIVE: 'positive',
+    /** The group is one loss away from elimination */
+    NEGATIVE: 'negative',
+    /** Everything in between */
+    WARNING: 'warning',
+};
+const getSwissGroupColorType = (wins, losses) => {
+    if (wins === 0 && losses === 0)
+        return BRACKET_SWISS_GROUP_COLOR_TYPE.NEUTRAL;
+    if (losses === SWISS_ELIMINATE_LOSSES - 1)
+        return BRACKET_SWISS_GROUP_COLOR_TYPE.NEGATIVE;
+    if (wins > losses)
+        return BRACKET_SWISS_GROUP_COLOR_TYPE.POSITIVE;
+    return BRACKET_SWISS_GROUP_COLOR_TYPE.WARNING;
+};
+const factorialCache = /* @__PURE__ */ new Map();
+const getAvailableSwissGroupsForRound = (roundNumber, totalMatchesInRound) => {
+    const advanceWins = SWISS_ADVANCE_WINS;
+    const eliminateLosses = SWISS_ELIMINATE_LOSSES;
+    const getFactorial = (n) => {
+        if (n <= 1)
+            return 1;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (factorialCache.has(n))
+            return factorialCache.get(n);
+        const result = n * getFactorial(n - 1);
+        factorialCache.set(n, result);
+        return result;
+    };
+    const roundFactorial = getFactorial(roundNumber);
+    let totalCombinations = 0;
+    const validGroups = [];
+    for (let wins = roundNumber; wins >= 0; wins--) {
+        const losses = roundNumber - wins;
+        const remainingGames = advanceWins + eliminateLosses - (wins + losses) - 1;
+        const notYetEliminated = losses < eliminateLosses;
+        const canStillAdvance = wins < advanceWins && remainingGames >= 0;
+        if (!canStillAdvance || !notYetEliminated)
+            continue;
+        const combinations = roundFactorial / (getFactorial(wins) * getFactorial(losses));
+        totalCombinations += combinations;
+        validGroups.push({ wins, losses, combinations });
+    }
+    return validGroups.map(({ wins, losses, combinations }) => ({
+        id: `${wins}-${losses}`,
+        name: `${wins}-${losses}`,
+        matchesInGroup: Math.round((combinations / totalCombinations) * totalMatchesInRound),
+    }));
+};
+/** The group an undrawn match falls into when its round has no win/loss record to group by. */
+const UNDRAWN_SWISS_GROUP_ID = 'undrawn';
+const getRecordBeforeMatch = (participant) => ({
+    wins: participant.winCount - (participant.result === 'win' ? 1 : 0),
+    losses: participant.lossCount - (participant.result === 'loss' ? 1 : 0),
+});
+const generateBracketRoundSwissGroupMaps = (bracketData) => {
+    if (bracketData.mode !== TOURNAMENT_MODE.SWISS_WITH_ELIMINATION) {
+        return null;
+    }
+    const roundsWithSwissGroups = new Map();
+    let roundNumber = 0;
+    for (const bracketRound of bracketData.rounds.values()) {
+        const availableGroups = getAvailableSwissGroupsForRound(roundNumber, bracketRound.matchCount);
+        const roundSwissData = {
+            groups: new Map(),
+        };
+        for (const group of availableGroups) {
+            const subGroup = {
+                id: group.id,
+                name: group.name,
+                matches: new BracketMap(),
+                allowedMatchCount: group.matchesInGroup,
+            };
+            roundSwissData.groups.set(group.id, subGroup);
+        }
+        const emptyMatchIds = [];
+        for (const match of bracketRound.matches.values()) {
+            const anyParticipant = match.home || match.away;
+            if (!anyParticipant) {
+                emptyMatchIds.push(match.id);
+                continue;
+            }
+            const { wins, losses } = getRecordBeforeMatch(anyParticipant);
+            const groupId = `${wins}-${losses}`;
+            // The table above enumerates the records of somebody who played every round. A bye, a walkover or
+            // an uneven field leaves a participant with fewer games than the round index, so their group is
+            // real but not in the table - create it rather than losing the whole bracket over one match.
+            let group = roundSwissData.groups.get(groupId);
+            if (!group) {
+                group = { id: groupId, name: `${wins}-${losses}`, matches: new BracketMap(), allowedMatchCount: 0 };
+                roundSwissData.groups.set(groupId, group);
+            }
+            group.matches.set(match.id, match);
+        }
+        for (const emptyMatchId of emptyMatchIds) {
+            const match = bracketRound.matches.getOrThrow(emptyMatchId);
+            const groups = [...roundSwissData.groups.values()];
+            let group = groups.find((candidate) => candidate.matches.size < candidate.allowedMatchCount) ??
+                groups.reduce((fewest, candidate) => (!fewest || candidate.matches.size < fewest.matches.size ? candidate : fewest), null);
+            // A round past the last one a 3-3 swiss can reach - the elimination rounds of a
+            // swiss-with-elimination stage - has no record groups, and an undrawn match carries no record to
+            // build one from. A nameless group keeps the round drawn instead of losing the whole bracket.
+            if (!group) {
+                group = { id: UNDRAWN_SWISS_GROUP_ID, name: '', matches: new BracketMap(), allowedMatchCount: 0 };
+                roundSwissData.groups.set(group.id, group);
+            }
+            group.matches.set(match.id, match);
+        }
+        for (const [groupId, group] of roundSwissData.groups) {
+            if (!group.matches.size)
+                roundSwissData.groups.delete(groupId);
+        }
+        // The map is drawn top to bottom in insertion order, so a group created on demand has to be sorted
+        // back into the best-record-first order the table was built in.
+        const orderedGroups = [...roundSwissData.groups.entries()].sort(([a], [b]) => {
+            const [aWins = 0, aLosses = 0] = a.split('-').map(Number);
+            const [bWins = 0, bLosses = 0] = b.split('-').map(Number);
+            return bWins - aWins || aLosses - bLosses;
+        });
+        roundSwissData.groups = new Map(orderedGroups);
+        roundsWithSwissGroups.set(bracketRound.id, roundSwissData);
+        roundNumber++;
+    }
+    return roundsWithSwissGroups;
+};
+
+// Every finalized column of a swiss grid is one group section. The connection lines run
+// from group to group instead of match to match: the winners of group (w-l) move to group
+// (w+1-l) inside the next round, the losers move to group (w-l+1).
+const collectSwissRoundGeometries = (bracketGrid) => {
+    const rounds = new Map();
+    for (const column of bracketGrid.columns) {
+        const matchElements = column.elements.filter((element) => element.type === 'match');
+        const group = matchElements[0]?.roundSwissGroup;
+        const round = matchElements[0]?.round;
+        if (!group || !round)
+            continue;
+        const [wins, losses] = group.id.split('-').map(Number);
+        if (wins === undefined || losses === undefined || isNaN(wins) || isNaN(losses))
+            continue;
+        const matchesTop = Math.min(...matchElements.map((element) => element.dimensions.top));
+        const matchesBottom = Math.max(...matchElements.map((element) => element.dimensions.top + element.dimensions.height));
+        const winnerShortIds = [];
+        const loserShortIds = [];
+        for (const element of matchElements) {
+            if (!element.match.winner)
+                continue;
+            const winner = element.match.winner;
+            const loser = element.match.home?.id === winner.id ? element.match.away : element.match.home;
+            winnerShortIds.push(winner.shortId);
+            if (loser)
+                loserShortIds.push(loser.shortId);
+        }
+        // The lines attach to the group border, which wraps the matches plus the group
+        // padding and therefore matches the section bounds horizontally.
+        const position = {
+            block: {
+                start: matchesTop,
+                end: matchesBottom,
+                center: (matchesTop + matchesBottom) / 2,
+            },
+            inline: {
+                start: column.dimensions.left,
+                end: column.dimensions.left + column.dimensions.width,
+                center: column.dimensions.left + column.dimensions.width / 2,
+            },
+        };
+        let roundGeometry = rounds.get(round.id);
+        if (!roundGeometry) {
+            roundGeometry = { groups: new Map() };
+            rounds.set(round.id, roundGeometry);
+        }
+        roundGeometry.groups.set(group.id, {
+            id: group.id,
+            wins,
+            losses,
+            colorType: getSwissGroupColorType(wins, losses),
+            position,
+            winnerShortIds,
+            loserShortIds,
+        });
+    }
+    // The finalized columns are ordered left to right, so first appearance equals round order
+    return Array.from(rounds.values());
+};
+const groupBorderRect = (group, border, color, id) => {
+    // The group box wraps the matches plus the group padding plus the border itself. The
+    // rect is inset by half the stroke width so the stroke renders fully inside the group
+    // bounds instead of getting cut off at the edges of the bracket container.
+    const boxPadding = border.padding + border.width;
+    const strokeInset = border.width / 2;
+    return {
+        id,
+        x: group.position.inline.start + strokeInset,
+        y: group.position.block.start - boxPadding + strokeInset,
+        width: group.position.inline.end - group.position.inline.start - border.width,
+        height: group.position.block.end - group.position.block.start + boxPadding * 2 - border.width,
+        radius: border.radius,
+        stroke: color ?? 'currentColor',
+        strokeWidth: border.width,
+        cssClass: `et-bracket-swiss-group-border et-bracket-swiss-group-border--${group.id} et-bracket-swiss-group-border--${group.colorType}`,
+    };
+};
+// A horizontal gradient for the connection lines: they leave the source group in its
+// color, fade to the neutral color towards their vertical jog in the middle and fade into
+// the target group color on the second half. The connection lines always run from left to
+// right, so user space coordinates can be used (they also work for straight lines, where
+// the bounding box has no height).
+const lineGradient = (config) => ({
+    id: config.id,
+    fromX: config.fromX,
+    toX: config.toX,
+    stops: [
+        { offset: '0%', color: config.from },
+        { offset: '50%', color: config.neutral },
+        { offset: '100%', color: config.to },
+    ],
+});
+const drawSwissMan = (dimensions) => {
+    const edges = [];
+    const rects = [];
+    const gradients = [];
+    const roundGeometries = collectSwissRoundGeometries(dimensions.bracketGrid);
+    const colors = dimensions.colors;
+    for (const [roundIndex, roundGeometry] of roundGeometries.entries()) {
+        for (const group of roundGeometry.groups.values()) {
+            rects.push(groupBorderRect(group, dimensions.groupBorder, colors?.[group.colorType], `r${roundIndex}|${group.id}`));
+        }
+    }
+    const curveOptions = {
+        lineStartingCurveAmount: dimensions.curve.lineStartingCurveAmount,
+        lineEndingCurveAmount: dimensions.curve.lineStartingCurveAmount,
+    };
+    for (const [roundIndex, roundGeometry] of roundGeometries.entries()) {
+        const nextRoundGeometry = roundGeometries[roundIndex + 1];
+        if (!nextRoundGeometry)
+            break;
+        for (const group of roundGeometry.groups.values()) {
+            const targets = [
+                { geometry: nextRoundGeometry.groups.get(`${group.wins + 1}-${group.losses}`), shortIds: group.winnerShortIds },
+                { geometry: nextRoundGeometry.groups.get(`${group.wins}-${group.losses + 1}`), shortIds: group.loserShortIds },
+            ];
+            for (const { geometry: target, shortIds } of targets) {
+                if (!target)
+                    continue;
+                const edgeId = `r${roundIndex}|${group.id}|${target.id}`;
+                // Only URI characters: this ends up inside a `url(#…)` the `stroke` attribute has to resolve.
+                const gradientId = `${dimensions.idPrefix}-swiss-line-r${roundIndex}-${group.id}-to-${target.id}`;
+                const neutralColor = colors?.neutral;
+                let stroke = neutralColor;
+                if (neutralColor) {
+                    const from = colors?.[group.colorType] ?? neutralColor;
+                    const to = colors?.[target.colorType] ?? neutralColor;
+                    if (from !== neutralColor || to !== neutralColor) {
+                        gradients.push(lineGradient({
+                            id: gradientId,
+                            fromX: group.position.inline.end,
+                            toX: target.position.inline.start,
+                            from,
+                            neutral: neutralColor,
+                            to,
+                        }));
+                        stroke = `url(#${gradientId})`;
+                    }
+                }
+                const pathOptions = {
+                    ...dimensions.path,
+                    id: edgeId,
+                    className: shortIds.join(' '),
+                    stroke,
+                };
+                const blockDelta = target.position.block.center - group.position.block.center;
+                // Always a curve, even between two groups on the same row, where the bends collapse to nothing
+                // and it draws as a straight run - one shape per connector is what lets it animate.
+                edges.push(curvePath(group.position, target.position, blockDelta < 0 ? 'up' : 'down', {
+                    ...curveOptions,
+                    path: pathOptions,
+                }));
+            }
+        }
+    }
+    return { edges, rects, gradients };
+};
+
+const calculateUpperLowerRatio = (upperRoundsCount, lowerRoundsCount) => {
+    const remainingUpperRounds = upperRoundsCount - 1;
+    const remainingLowerRounds = lowerRoundsCount - 1;
+    if (remainingUpperRounds === 0)
+        return 1;
+    return remainingLowerRounds / remainingUpperRounds;
+};
+const calculateColumnSplitFactor = (upperToLowerRatio) => (upperToLowerRatio === 1.5 ? 2 : 1);
+const calculateLowerRoundIndex = (subColumnIndex, splitFactor) => Math.floor(subColumnIndex / splitFactor);
+// eslint-disable-next-line max-params -- index math over positional grid coordinates
+const calculateUpperRoundIndex = (subColumnIndex, upperToLowerRatio, splitFactor) => {
+    const completeColumnIndex = Math.floor(subColumnIndex / splitFactor);
+    if (completeColumnIndex === 0)
+        return 0;
+    return Math.floor((completeColumnIndex - 1) / upperToLowerRatio) + 1;
+};
+
+const createRoundBracketSubColumnRelativeToFirstRound = (config) => {
+    const { firstRound, round, options, span, hasReverseFinal } = config;
+    const { subColumn, pushElement } = createBracketSubColumn({
+        span,
+    });
+    const matchFactor = config.matchFactor ?? Math.max(1, (options.rowSpanMatchCount ?? firstRound.matchCount) / round.matchCount);
+    const matches = Array.from(round.matches.values());
+    const isFinalRound = hasReverseFinal
+        ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
+        : round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+    const roundHeaderGap = isFinalRound
+        ? Math.max(options.roundHeaderGap, options.finalRoundHeaderGap ?? 0)
+        : options.roundHeaderGap;
+    const elementsToCreate = [];
+    if (options.roundHeaderHeight > 0) {
+        elementsToCreate.push({
+            type: 'header',
+            area: `h${round.shortId}`,
+            partHeights: [options.roundHeaderHeight],
+            elementHeight: options.roundHeaderHeight,
+            component: config.components.roundHeader,
+            round,
+            roundSwissGroup: null,
+        }, {
+            type: 'roundHeaderGap',
+            area: '.',
+            partHeights: [roundHeaderGap],
+            elementHeight: roundHeaderGap,
+        });
+    }
+    for (const [matchIndex, match] of matches.entries()) {
+        const isLastMatch = matchIndex === matches.length - 1;
+        // One row per match this one is fed by. A fractional factor has no whole feeder row to align to,
+        // so floor it and let the block padding below absorb the remainder - rounding up instead emits a
+        // row the block height cannot pay for, and the padding turns negative to compensate.
+        const fedMatchCount = Math.floor(matchFactor);
+        const matchRows = [];
+        for (let factorIndex = 0; factorIndex < fedMatchCount; factorIndex++) {
+            matchRows.push(options.matchHeight);
+            if (factorIndex < fedMatchCount - 1)
+                matchRows.push(options.rowGap);
+        }
+        const elementHeight = isFinalRound ? options.finalMatchHeight : options.matchHeight;
+        const blockHeight = Math.max(elementHeight, matchFactor * options.matchHeight + (matchFactor - 1) * options.rowGap);
+        const currentBlockHeight = matchRows.reduce((total, height) => total + height, 0);
+        matchRows[matchRows.length - 1] = (matchRows[matchRows.length - 1] ?? 0) + blockHeight - currentBlockHeight;
+        elementsToCreate.push({
+            type: 'match',
+            area: `m${match.shortId}`,
+            partHeights: matchRows,
+            elementHeight,
+            component: isFinalRound ? config.components.finalMatch : config.components.match,
+            match,
+            round,
+            roundSwissGroup: null,
+        });
+        if (!isLastMatch) {
+            elementsToCreate.push({
+                type: 'matchGap',
+                area: '.',
+                partHeights: [options.rowGap],
+                elementHeight: options.rowGap,
+            });
+        }
+    }
+    if (config.bottomPadding) {
+        elementsToCreate.push({
+            type: 'colGap',
+            area: '.',
+            partHeights: [config.bottomPadding],
+            elementHeight: config.bottomPadding,
+        });
+    }
+    for (const elementData of elementsToCreate) {
+        const element = createBracketElement(elementData);
+        pushElement(element);
+    }
+    return subColumn;
+};
+
+const heightOfElement = (element) => element.parts.reduce((total, part) => total + part.dimensions.height, 0);
+const cardGeometry = (subColumn) => {
+    let height = 0;
+    let cardTop = null;
+    for (const element of subColumn.elements) {
+        const elementHeight = heightOfElement(element);
+        if (element.type === 'match' && cardTop === null) {
+            cardTop = height + (elementHeight - element.dimensions.height) / 2;
+        }
+        height += elementHeight;
+    }
+    return { cardTop: cardTop ?? 0, height };
+};
+/**
+ * The third place match as a second section of the final's master column: one card the given number of
+ * px below the top of the final's, with its own round header above it.
+ *
+ * @internal
+ */
+const createFoldedThirdPlaceSection = (config) => {
+    const { options, round } = config;
+    const final = cardGeometry(config.finalSubColumn);
+    const headerOffset = options.roundHeaderHeight > 0 ? options.roundHeaderHeight + options.roundHeaderGap : 0;
+    // The section stacks below the final's, so what it has to make up is the offset less the room the
+    // final's own section already takes. Negative when the fold lands inside that room, which is the
+    // ordinary case: the final's block owns the rows of every round feeding it, so it is far taller
+    // than its card.
+    const paddingTop = final.cardTop + config.topOffset - final.height - headerOffset;
+    const { masterColumnSection, pushSubColumn } = createBracketMasterColumnSection({
+        type: 'round',
+        padding: { top: paddingTop, bottom: 0, left: 0, right: 0 },
+    });
+    pushSubColumn(createRoundBracketSubColumnRelativeToFirstRound({
+        firstRound: round,
+        round,
+        options,
+        hasReverseFinal: false,
+        // Placed by its offset, so it owns one row rather than the block a squeezed round would give it.
+        matchFactor: 1,
+        span: { isStart: true, isEnd: true },
+        components: config.components,
+    }));
+    return masterColumnSection;
+};
+
+const createBracketGapMasterColumn = (config) => {
+    const { existingMasterColumns, columnGap } = config;
+    const lastMasterColumn = existingMasterColumns[existingMasterColumns.length - 1];
+    if (!lastMasterColumn) {
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, 'No last master column found in existing master columns');
+    }
+    const { masterColumn, pushSection } = createBracketMasterColumn({
+        columnWidth: columnGap,
+        padding: {
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+        },
+    });
+    for (const section of lastMasterColumn.sections) {
+        const { masterColumnSection, pushSubColumn } = createBracketMasterColumnSection({
+            type: 'gap',
+            padding: section.padding && { ...section.padding, left: 0, right: 0 },
+        });
+        const lastSubColumn = section.subColumns[section.subColumns.length - 1];
+        if (!lastSubColumn) {
+            throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, 'No last sub column found in section');
+        }
+        const { pushElement, subColumn } = createBracketSubColumn({
+            span: {
+                isStart: lastSubColumn.span.isEnd ? true : false,
+                isEnd: lastSubColumn.span.isEnd ? true : false,
+            },
+        });
+        for (const lastSubColumnElement of lastSubColumn.elements) {
+            const partHeights = lastSubColumnElement.parts.map((part) => part.dimensions.height);
+            const elementToCreate = (() => {
+                switch (lastSubColumnElement.type) {
+                    case 'matchGap':
+                    case 'roundHeaderGap':
+                    case 'roundGap':
+                    case 'colGap': {
+                        return {
+                            area: !lastSubColumn.span.isEnd ? lastSubColumnElement.area : `.`,
+                            type: !lastSubColumn.span.isEnd ? lastSubColumnElement.type : 'colGap',
+                            elementHeight: lastSubColumnElement.dimensions.height,
+                            partHeights,
+                        };
+                    }
+                    case 'header':
+                        if (lastSubColumn.span.isEnd)
+                            break;
+                        return {
+                            area: lastSubColumnElement.area,
+                            type: lastSubColumnElement.type,
+                            elementHeight: lastSubColumnElement.dimensions.height,
+                            partHeights,
+                            component: lastSubColumnElement.component,
+                            round: lastSubColumnElement.round,
+                            roundSwissGroup: lastSubColumnElement.roundSwissGroup,
+                        };
+                    case 'match':
+                        if (lastSubColumn.span.isEnd)
+                            break;
+                        return {
+                            area: lastSubColumnElement.area,
+                            type: lastSubColumnElement.type,
+                            elementHeight: lastSubColumnElement.dimensions.height,
+                            partHeights,
+                            component: lastSubColumnElement.component,
+                            round: lastSubColumnElement.round,
+                            match: lastSubColumnElement.match,
+                            roundSwissGroup: lastSubColumnElement.roundSwissGroup,
+                        };
+                }
+                return {
+                    area: `.`,
+                    type: 'colGap',
+                    elementHeight: lastSubColumnElement.dimensions.height,
+                    partHeights,
+                };
+            })();
+            pushElement(createBracketElement(elementToCreate));
+        }
+        pushSubColumn(subColumn);
+        pushSection(masterColumnSection);
+    }
+    return masterColumn;
+};
+
+const resolveBracketGridRowSpan = (bracket, options) => {
+    if (!options.rowSpanRoundId)
+        return options;
+    const round = Array.from(bracket.rounds.values()).find((candidate) => candidate.id === options.rowSpanRoundId || candidate.id.startsWith(`${options.rowSpanRoundId}--half-`));
+    return round ? { ...options, rowSpanMatchCount: round.matchCount } : options;
+};
+
+const createDoubleEliminationGrid = (bracketData, options, components) => {
+    const resolvedOptions = resolveBracketGridRowSpan(bracketData, options);
+    const grid = createBracketGrid({ spanElementWidth: resolvedOptions.columnWidth });
+    const presentUpperBracketRounds = Array.from(bracketData.roundsByType.get(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET)?.values() ?? []);
+    const lowerBracketRounds = Array.from(bracketData.roundsByType.get(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET)?.values() ?? []);
+    // A complete winner bracket has (lowerRounds / 2) + 1 rounds. If fewer are present, the winner
+    // bracket starts later than round 1 - e.g. a small double elimination where lower-round 1 is
+    // seeded directly from a group phase and has no winner round feeding it. Pad the front of the
+    // winner rounds with nulls so the column mapping keeps treating the winner bracket as complete:
+    // the missing early rounds become empty slots above the lower rounds they never fed, and every
+    // present winner round lines up above its real drop-in lower round.
+    const fullUpperRoundCount = Math.floor(lowerBracketRounds.length / 2) + 1;
+    const frontMissingUpperRounds = Math.max(0, fullUpperRoundCount - presentUpperBracketRounds.length);
+    const upperBracketRounds = [
+        ...Array.from({ length: frontMissingUpperRounds }, () => null),
+        ...presentUpperBracketRounds,
+    ];
+    const remainingRounds = Array.from(bracketData.rounds.values()).filter((r) => r.type !== DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET &&
+        r.type !== DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET &&
+        r.type !== COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE);
+    const thirdPlaceRound = bracketData.roundsByType.get(COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE)?.first() ?? null;
+    const hasReverseFinal = !!bracketData.roundsByType.get(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL)?.first();
+    const firstUpperRound = presentUpperBracketRounds[0];
+    const firstLowerRound = lowerBracketRounds[0];
+    if (!firstUpperRound || !firstLowerRound) {
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.ROUND_RELATION_INVALID, 'No upper or lower rounds found in bracket data');
+    }
+    const upperToLowerRatio = calculateUpperLowerRatio(upperBracketRounds.length, lowerBracketRounds.length);
+    const columnSplitFactor = calculateColumnSplitFactor(upperToLowerRatio);
+    /**
+     * The winner-bracket half of one column, or the space it would have taken. A front-truncated winner
+     * bracket has leading slots with no round in them; reserving their height keeps the lower rounds below
+     * aligned with the winner rounds that do exist.
+     */
+    const createUpperBracketSubColumn = (config) => {
+        if (config.round) {
+            return createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstUpperRound,
+                round: config.round,
+                options: resolvedOptions,
+                hasReverseFinal,
+                span: config.span,
+                components,
+            });
+        }
+        const emptyUpperHeight = (options.roundHeaderHeight > 0 ? options.roundHeaderHeight + options.roundHeaderGap : 0) +
+            firstUpperRound.matchCount * options.matchHeight +
+            Math.max(0, firstUpperRound.matchCount - 1) * options.rowGap;
+        const { subColumn, pushElement } = createBracketSubColumn({ span: config.span });
+        const element = createBracketElement({
+            area: '.',
+            type: 'colGap',
+            elementHeight: emptyUpperHeight,
+            partHeights: [emptyUpperHeight],
+        });
+        pushElement(element);
+        return subColumn;
+    };
+    /** The breathing room between the winner and loser halves of a column. */
+    const createUpperLowerGapSubColumn = () => {
+        const { subColumn, pushElement } = createBracketSubColumn({
+            span: { isStart: true, isEnd: true },
+        });
+        const element = createBracketElement({
+            area: '.',
+            type: 'roundGap',
+            elementHeight: options.rowRoundGap,
+            partHeights: [options.rowRoundGap],
+        });
+        pushElement(element);
+        return subColumn;
+    };
+    let lastRoundLastSubColumnUpperIndex = -1;
+    let lastRoundLastSubColumnLowerIndex = -1;
+    for (const [lowerRoundIndex, lowerRound] of lowerBracketRounds.entries()) {
+        const isLastLowerRound = lowerRoundIndex === lowerBracketRounds.length - 1;
+        const { masterColumn, pushSection } = createBracketMasterColumn({
+            columnWidth: options.columnWidth,
+            padding: {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+            },
+        });
+        const { masterColumnSection: upperSection, pushSubColumn: pushUpperSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const { masterColumnSection: upperLowerGapSection, pushSubColumn: pushUpperLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'gap',
+        });
+        const { masterColumnSection: lowerSection, pushSubColumn: pushLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        for (let currentColumnSplitFactor = 1; currentColumnSplitFactor <= columnSplitFactor; currentColumnSplitFactor++) {
+            const subColumnIndex = lowerRoundIndex * columnSplitFactor + (currentColumnSplitFactor - 1);
+            const currentUpperRoundIndex = calculateUpperRoundIndex(subColumnIndex, upperToLowerRatio, columnSplitFactor);
+            const currentLowerRoundIndex = lowerRoundIndex;
+            const isFirstSubColumnInMasterColumn = currentColumnSplitFactor === 1;
+            const isLastSubColumnInMasterColumn = currentColumnSplitFactor === columnSplitFactor;
+            const previousSubColumnIndex = subColumnIndex - 1;
+            const nextSubColumnIndex = subColumnIndex + 1;
+            const previousUpperRoundIndex = previousSubColumnIndex >= 0
+                ? calculateUpperRoundIndex(previousSubColumnIndex, upperToLowerRatio, columnSplitFactor)
+                : -1;
+            const nextUpperRoundIndex = calculateUpperRoundIndex(nextSubColumnIndex, upperToLowerRatio, columnSplitFactor);
+            const previousLowerRoundIndex = previousSubColumnIndex >= 0 ? calculateLowerRoundIndex(previousSubColumnIndex, columnSplitFactor) : -1;
+            const nextLowerRoundIndex = calculateLowerRoundIndex(nextSubColumnIndex, columnSplitFactor);
+            if (currentUpperRoundIndex < 0 || currentUpperRoundIndex >= upperBracketRounds.length) {
+                throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, 'Upper round not found for subColumnIndex: ' + subColumnIndex);
+            }
+            // May be null for a leading winner slot that does not exist (front-truncated winner bracket).
+            const upperRound = upperBracketRounds[currentUpperRoundIndex];
+            const isUpperSpanStart = isFirstSubColumnInMasterColumn
+                ? lowerRoundIndex === 0 || lastRoundLastSubColumnUpperIndex !== currentUpperRoundIndex
+                : previousUpperRoundIndex !== currentUpperRoundIndex;
+            const isUpperSpanEnd = isLastSubColumnInMasterColumn
+                ? isLastLowerRound ||
+                    calculateUpperRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, upperToLowerRatio, columnSplitFactor) !==
+                        currentUpperRoundIndex
+                : nextUpperRoundIndex !== currentUpperRoundIndex;
+            const isLowerSpanStart = isFirstSubColumnInMasterColumn
+                ? lowerRoundIndex === 0 || lastRoundLastSubColumnLowerIndex !== currentLowerRoundIndex
+                : previousLowerRoundIndex !== currentLowerRoundIndex;
+            const isLowerSpanEnd = isLastSubColumnInMasterColumn
+                ? isLastLowerRound ||
+                    calculateLowerRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, columnSplitFactor) !==
+                        currentLowerRoundIndex
+                : nextLowerRoundIndex !== currentLowerRoundIndex;
+            const upperSpan = { isStart: isUpperSpanStart, isEnd: isUpperSpanEnd };
+            pushUpperSubColumn(createUpperBracketSubColumn({ round: upperRound ?? null, span: upperSpan }));
+            pushUpperLowerSubColumn(createUpperLowerGapSubColumn());
+            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstLowerRound,
+                round: lowerRound,
+                options: resolvedOptions,
+                hasReverseFinal,
+                span: {
+                    isStart: isLowerSpanStart,
+                    isEnd: isLowerSpanEnd,
+                },
+                components,
+            });
+            pushLowerSubColumn(lowerSubColumn);
+            if (isLastSubColumnInMasterColumn) {
+                lastRoundLastSubColumnUpperIndex = currentUpperRoundIndex;
+                lastRoundLastSubColumnLowerIndex = currentLowerRoundIndex;
+            }
+        }
+        pushSection(upperSection, upperLowerGapSection, lowerSection);
+        grid.pushMasterColumn(masterColumn);
+        // Always separate consecutive lower rounds with a gap column. The trailing gap after the
+        // last lower round is only needed to connect to the finals section (remainingRounds); in a
+        // truncated bracket without a final we must still gap the intermediate rounds, otherwise the
+        // rounds sit flush against each other and their connector lines collapse to zero width.
+        if (!isLastLowerRound || remainingRounds.length) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    for (const [roundIndex, round] of remainingRounds.entries()) {
+        const isLastRound = roundIndex === remainingRounds.length - 1;
+        const isFirstRound = roundIndex === 0;
+        const isAnyFinal = hasReverseFinal
+            ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
+            : round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+        const { masterColumn, pushSection } = createBracketMasterColumn({
+            columnWidth: isAnyFinal ? options.finalColumnWidth : options.columnWidth,
+            padding: {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+            },
+        });
+        const { masterColumnSection: upperSection, pushSubColumn: pushUpperSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const { masterColumnSection: upperLowerGapSection, pushSubColumn: pushUpperLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'gap',
+        });
+        const { masterColumnSection: lowerSection, pushSubColumn: pushLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const upperSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+            firstRound: firstUpperRound,
+            round,
+            options: resolvedOptions,
+            hasReverseFinal,
+            span: {
+                isStart: true,
+                isEnd: true,
+            },
+            components,
+        });
+        pushUpperSubColumn(upperSubColumn);
+        const upperLowerGapSubColumn = createBracketSubColumn({
+            span: {
+                isStart: true,
+                isEnd: true,
+            },
+        });
+        const upperLowerGapElement = createBracketElement({
+            area: '.',
+            type: 'roundGap',
+            elementHeight: options.rowRoundGap,
+            partHeights: [options.rowRoundGap],
+        });
+        upperLowerGapSubColumn.pushElement(upperLowerGapElement);
+        pushUpperLowerSubColumn(upperLowerGapSubColumn.subColumn);
+        if (thirdPlaceRound) {
+            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstLowerRound,
+                round: thirdPlaceRound,
+                options: resolvedOptions,
+                hasReverseFinal,
+                span: {
+                    isStart: isFirstRound,
+                    isEnd: isLastRound,
+                },
+                components,
+            });
+            pushLowerSubColumn(lowerSubColumn);
+        }
+        else {
+            const lowerSubColumn = createBracketSubColumn({
+                span: {
+                    isStart: true,
+                    isEnd: true,
+                },
+            });
+            const firstMasterRound = grid.grid.masterColumns[0];
+            if (!firstMasterRound)
+                throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, 'No first master round found in grid');
+            const lastMasterColumnSection = firstMasterRound.sections[firstMasterRound.sections.length - 1];
+            if (!lastMasterColumnSection)
+                throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, 'No last master column section found in grid');
+            const firstSubColumn = lastMasterColumnSection.subColumns[0];
+            if (!firstSubColumn)
+                throw new BracketRuntimeError(BRACKET_ERROR_CODES.GRID_INVALID, 'No first sub column found in grid');
+            for (const element of firstSubColumn.elements) {
+                const el = createBracketElement({
+                    area: '.',
+                    type: 'colGap',
+                    elementHeight: element.dimensions.height,
+                    partHeights: element.parts.map((p) => p.dimensions.height),
+                });
+                lowerSubColumn.pushElement(el);
+            }
+            pushLowerSubColumn(lowerSubColumn.subColumn);
+        }
+        pushSection(upperSection, upperLowerGapSection, lowerSection);
+        grid.pushMasterColumn(masterColumn);
+        if (!isLastRound) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    if (options.continueElement && components.continue) {
+        const continueMatches = getBracketContinueMatches(bracketData);
+        if (continueMatches.length) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+            grid.pushMasterColumn(createBracketContinueMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnWidth: options.continueElement.columnWidth,
+                elementHeight: options.continueElement.elementHeight,
+                headerOffset: options.roundHeaderHeight > 0 ? options.roundHeaderHeight + options.roundHeaderGap : 0,
+                component: components.continue,
+                matches: continueMatches,
+            }));
+        }
+    }
+    grid.setupElementSpans();
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
+    };
+};
+
+const CENTRE_CHAIN_ORDER = {
+    [COMMON_BRACKET_ROUND_TYPE.FINAL]: 1,
+    [DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL]: 2,
+    [COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE]: 3,
+};
+const isFinalMatchRound = (round, hasReverseFinal) => hasReverseFinal
+    ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
+    : round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+const chainRoundHeight = (config) => {
+    const { round, options, hasReverseFinal } = config;
+    const cardHeight = isFinalMatchRound(round, hasReverseFinal) ? options.finalMatchHeight : options.matchHeight;
+    return round.matchCount * cardHeight + Math.max(0, round.matchCount - 1) * options.rowGap;
+};
+const createStackedBlock = (config) => {
+    const { rounds, hasReverseFinal } = config;
+    const options = resolveBracketGridRowSpan({ rounds }, config.options);
+    const halves = rounds.filter((round) => !!round.mirrorRoundType);
+    const left = halves
+        .filter((round) => round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.LEFT)
+        .sort((a, b) => a.logicalIndex - b.logicalIndex);
+    const right = halves
+        .filter((round) => round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT)
+        .sort((a, b) => b.logicalIndex - a.logicalIndex);
+    const middles = rounds
+        .filter((round) => !round.mirrorRoundType)
+        .sort((a, b) => (CENTRE_CHAIN_ORDER[a.type] ?? 0) - (CENTRE_CHAIN_ORDER[b.type] ?? 0) || a.logicalIndex - b.logicalIndex);
+    // Where the two halves meet: one depth past the innermost round that had a second half to fold against.
+    const foldDepth = left.length ? Math.max(...left.map((round) => round.logicalIndex)) + 1 : 0;
+    // An odd early round could not halve, so it has no twin on the way back and keeps a slot of its own on
+    // the way out rather than sitting in a middle it is far too wide for.
+    const isEarly = (round) => !CENTRE_CHAIN_ORDER[round.type] && round.logicalIndex < foldDepth;
+    const leftSlots = [...left, ...middles.filter(isEarly)].sort((a, b) => a.logicalIndex - b.logicalIndex);
+    const chain = middles.filter((round) => !isEarly(round));
+    const firstRound = leftSlots[0] ?? chain[0];
+    if (!firstRound)
+        return null;
+    const rows = options.rowSpanMatchCount ?? firstRound.matchCount;
+    const rowsHeight = (count) => count * options.matchHeight + Math.max(0, count - 1) * options.rowGap;
+    const content = rowsHeight(rows);
+    const columnContent = (round) => rowsHeight(Math.max(rows, round.matchCount));
+    let chainHeight = 0;
+    for (const [index, round] of chain.entries()) {
+        chainHeight += (index ? options.rowRoundGap : 0) + chainRoundHeight({ round, options, hasReverseFinal });
+    }
+    const anchorHeight = chain[0] ? chainRoundHeight({ round: chain[0], options, hasReverseFinal }) : 0;
+    // The round both halves converge on sits on the block's vertical centre, which is where the two halves'
+    // own matches sit - so the connectors into it stay straight. A chain too long to hang under it from
+    // there grows the block rather than sliding up: an anchor a few px off centre turns every one of those
+    // connectors into a diagonal, in a drawing where nothing else is.
+    const spacerTop = Math.max(0, (content - anchorHeight) / 2);
+    const body = Math.max(spacerTop + chainHeight, ...[...leftSlots, ...right].map(columnContent));
+    return {
+        firstRound,
+        left: leftSlots,
+        right,
+        chain,
+        options,
+        body,
+        columnContent,
+        spacerTop,
+        spacerBottom: Math.max(0, body - spacerTop - chainHeight),
+    };
+};
+/**
+ * Draws a double elimination as two mirrored blocks, one above the other: the winners bracket folded
+ * around its own centre, the losers bracket folded around its own, and nothing but a gap between them.
+ * Each block's deciding rounds hang vertically below the round its two halves converge on.
+ *
+ * @internal
+ */
+const createStackedDoubleEliminationGrid = (bracketData, options, components) => {
+    const grid = createBracketGrid({ spanElementWidth: options.columnWidth });
+    const roundsOfType = (type) => Array.from(bracketData.roundsByType.get(type)?.values() ?? []);
+    const hasReverseFinal = !!roundsOfType(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL).length;
+    const winners = createStackedBlock({
+        rounds: [
+            ...roundsOfType(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET),
+            ...roundsOfType(COMMON_BRACKET_ROUND_TYPE.FINAL),
+            ...roundsOfType(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL),
+        ],
+        options,
+        hasReverseFinal,
+    });
+    const losers = createStackedBlock({
+        rounds: [
+            ...roundsOfType(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET),
+            ...roundsOfType(COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE),
+        ],
+        options,
+        hasReverseFinal,
+    });
+    if (!winners || !losers) {
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.ROUND_RELATION_INVALID, 'No upper or lower rounds found in bracket data');
+    }
+    const blocks = [winners, losers];
+    const headerBlock = options.roundHeaderHeight > 0 ? options.roundHeaderHeight + options.roundHeaderGap : 0;
+    const blockHeight = (block) => headerBlock + block.body;
+    const centreIndex = Math.max(...blocks.map((block) => block.left.length));
+    const columnCount = centreIndex + 1 + Math.max(...blocks.map((block) => block.right.length));
+    const createPlaceholderSubColumn = (block) => {
+        const { subColumn, pushElement } = createBracketSubColumn({
+            span: { isStart: true, isEnd: true },
+        });
+        const height = blockHeight(block);
+        pushElement(createBracketElement({
+            area: '.',
+            type: 'colGap',
+            elementHeight: height,
+            partHeights: [height],
+        }));
+        return subColumn;
+    };
+    const createChainSubColumn = (block) => {
+        const { subColumn, pushElement } = createBracketSubColumn({
+            span: { isStart: true, isEnd: true },
+        });
+        const anchor = block.chain[0];
+        if (!anchor)
+            return createPlaceholderSubColumn(block);
+        const elementsToCreate = [];
+        // One header for the whole chain, naming the round its two halves converge on. The rounds below it
+        // are a vertical run of single matches; a header between each would sit on the line joining them.
+        if (options.roundHeaderHeight > 0) {
+            elementsToCreate.push({
+                type: 'header',
+                area: `h${anchor.shortId}`,
+                partHeights: [options.roundHeaderHeight],
+                elementHeight: options.roundHeaderHeight,
+                component: components.roundHeader,
+                round: anchor,
+                roundSwissGroup: null,
+            }, {
+                type: 'roundHeaderGap',
+                area: '.',
+                partHeights: [options.roundHeaderGap],
+                elementHeight: options.roundHeaderGap,
+            });
+        }
+        if (block.spacerTop > 0) {
+            elementsToCreate.push({
+                type: 'colGap',
+                area: '.',
+                partHeights: [block.spacerTop],
+                elementHeight: block.spacerTop,
+            });
+        }
+        for (const [roundIndex, round] of block.chain.entries()) {
+            if (roundIndex) {
+                elementsToCreate.push({
+                    type: 'roundGap',
+                    area: '.',
+                    partHeights: [options.rowRoundGap],
+                    elementHeight: options.rowRoundGap,
+                });
+            }
+            const isFinalCard = isFinalMatchRound(round, hasReverseFinal);
+            const cardHeight = isFinalCard ? options.finalMatchHeight : options.matchHeight;
+            for (const [matchIndex, match] of Array.from(round.matches.values()).entries()) {
+                if (matchIndex) {
+                    elementsToCreate.push({
+                        type: 'matchGap',
+                        area: '.',
+                        partHeights: [options.rowGap],
+                        elementHeight: options.rowGap,
+                    });
+                }
+                elementsToCreate.push({
+                    type: 'match',
+                    area: `m${match.shortId}`,
+                    partHeights: [cardHeight],
+                    elementHeight: cardHeight,
+                    component: isFinalCard ? components.finalMatch : components.match,
+                    match,
+                    round,
+                    roundSwissGroup: null,
+                });
+            }
+        }
+        if (block.spacerBottom > 0) {
+            elementsToCreate.push({
+                type: 'colGap',
+                area: '.',
+                partHeights: [block.spacerBottom],
+                elementHeight: block.spacerBottom,
+            });
+        }
+        for (const elementData of elementsToCreate) {
+            pushElement(createBracketElement(elementData));
+        }
+        return subColumn;
+    };
+    const createBlockSubColumn = (block, columnIndex) => {
+        const slotIndex = columnIndex - (centreIndex - block.left.length);
+        if (slotIndex === block.left.length)
+            return createChainSubColumn(block);
+        const round = slotIndex >= 0 && slotIndex < block.left.length
+            ? block.left[slotIndex]
+            : block.right[slotIndex - block.left.length - 1];
+        if (!round)
+            return createPlaceholderSubColumn(block);
+        return createRoundBracketSubColumnRelativeToFirstRound({
+            firstRound: block.firstRound,
+            round,
+            options: block.options,
+            hasReverseFinal,
+            bottomPadding: block.body - block.columnContent(round),
+            span: { isStart: true, isEnd: true },
+            components,
+        });
+    };
+    const createBandSubColumn = () => {
+        const { subColumn, pushElement } = createBracketSubColumn({
+            span: { isStart: true, isEnd: true },
+        });
+        pushElement(createBracketElement({
+            area: '.',
+            type: 'roundGap',
+            elementHeight: options.rowRoundGap,
+            partHeights: [options.rowRoundGap],
+        }));
+        return subColumn;
+    };
+    for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
+        const { masterColumn, pushSection } = createBracketMasterColumn({
+            columnWidth: columnIndex === centreIndex ? options.finalColumnWidth : options.columnWidth,
+            padding: { bottom: 0, left: 0, right: 0, top: 0 },
+        });
+        const winnersSection = createBracketMasterColumnSection({ type: 'round' });
+        const bandSection = createBracketMasterColumnSection({ type: 'gap' });
+        const losersSection = createBracketMasterColumnSection({ type: 'round' });
+        winnersSection.pushSubColumn(createBlockSubColumn(winners, columnIndex));
+        bandSection.pushSubColumn(createBandSubColumn());
+        losersSection.pushSubColumn(createBlockSubColumn(losers, columnIndex));
+        pushSection(winnersSection.masterColumnSection, bandSection.masterColumnSection, losersSection.masterColumnSection);
+        grid.pushMasterColumn(masterColumn);
+        if (columnIndex < columnCount - 1) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
+    };
+};
+
+const resolveFoldedThirdPlaceRound = (rounds, options) => {
+    if (options.thirdPlaceTopOffset === null || options.thirdPlaceTopOffset === undefined)
+        return null;
+    if (!rounds.some((round) => round.type === COMMON_BRACKET_ROUND_TYPE.FINAL))
+        return null;
+    return rounds.find((round) => round.type === COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE) ?? null;
+};
+const createSingleEliminationGrid = (bracketData, options, components) => {
+    const grid = createBracketGrid({ spanElementWidth: options.columnWidth });
+    const rounds = Array.from(bracketData.rounds.values());
+    const firstRound = bracketData.rounds.first();
+    if (!firstRound) {
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.SOURCE_EMPTY, 'No rounds found in bracket data');
+    }
+    const resolvedOptions = resolveBracketGridRowSpan(bracketData, options);
+    const foldedThirdPlaceRound = resolveFoldedThirdPlaceRound(rounds, options);
+    const columnRounds = rounds.filter((round) => round !== foldedThirdPlaceRound);
+    let pushSectionToFinal = null;
+    let finalSubColumn = null;
+    for (const [roundIndex, round] of columnRounds.entries()) {
+        const isLastRound = roundIndex === columnRounds.length - 1;
+        const isFinalRound = round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+        const { masterColumn, ...mutableMasterColumn } = createBracketMasterColumn({
+            columnWidth: isFinalRound ? options.finalColumnWidth : options.columnWidth,
+            padding: {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+            },
+        });
+        const { masterColumnSection, pushSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const sub = createRoundBracketSubColumnRelativeToFirstRound({
+            firstRound,
+            round,
+            options: resolvedOptions,
+            hasReverseFinal: false,
+            span: {
+                isStart: true,
+                isEnd: true,
+            },
+            components,
+        });
+        pushSubColumn(sub);
+        mutableMasterColumn.pushSection(masterColumnSection);
+        grid.pushMasterColumn(masterColumn);
+        if (isFinalRound) {
+            pushSectionToFinal = mutableMasterColumn.pushSection;
+            finalSubColumn = sub;
+        }
+        if (!isLastRound) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    // After the loop, so the gap column beside the final mirrors the final's section alone: the folded
+    // round has nothing to its right to stay aligned with.
+    if (foldedThirdPlaceRound && pushSectionToFinal && finalSubColumn) {
+        pushSectionToFinal(createFoldedThirdPlaceSection({
+            finalSubColumn,
+            round: foldedThirdPlaceRound,
+            topOffset: options.thirdPlaceTopOffset ?? 0,
+            options: resolvedOptions,
+            components,
+        }));
+    }
+    if (options.continueElement && components.continue) {
+        const continueMatches = getBracketContinueMatches(bracketData);
+        if (continueMatches.length) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+            grid.pushMasterColumn(createBracketContinueMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnWidth: options.continueElement.columnWidth,
+                elementHeight: options.continueElement.elementHeight,
+                headerOffset: options.roundHeaderHeight > 0 ? options.roundHeaderHeight + options.roundHeaderGap : 0,
+                component: components.continue,
+                matches: continueMatches,
+            }));
+        }
+    }
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
+    };
+};
+
+const FALLBACK_MATCH_RELATION_POSITION = -1;
+const generateMatchPosition = (match, factor) => Math.ceil(match.position * factor);
+const generatePreviousRoundMatchPositions = (relation, match) => {
+    const feederFactor = relation.currentRound.matchCount / relation.previousRound.matchCount;
+    const feederPositions = [];
+    for (const feeder of relation.previousRound.matches.values()) {
+        if (generateMatchPosition(feeder, feederFactor) === match.position)
+            feederPositions.push(feeder.position);
+    }
+    const first = feederPositions[0];
+    const last = feederPositions[feederPositions.length - 1];
+    if (first !== undefined && last !== undefined) {
+        return { previousUpperRoundMatchPosition: first, previousLowerRoundMatchPosition: last };
+    }
+    const double = relation.previousRoundMatchFactor === 2 ? 1 : 0;
+    return {
+        previousUpperRoundMatchPosition: (generateMatchPosition(match, relation.previousRoundMatchFactor) -
+            double),
+        previousLowerRoundMatchPosition: generateMatchPosition(match, relation.previousRoundMatchFactor),
+    };
+};
+const generateMatchRelationPositions = (relation, match) => {
+    switch (relation.type) {
+        case 'none':
+            return null;
+        case 'nothing-to-one':
+            return {
+                nextRoundMatchPosition: generateMatchPosition(match, relation.nextRoundMatchFactor),
+                previousUpperRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
+                previousLowerRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
+            };
+        case 'one-to-nothing':
+            return {
+                nextRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
+                ...generatePreviousRoundMatchPositions(relation, match),
+            };
+        case 'one-to-one':
+            return {
+                nextRoundMatchPosition: generateMatchPosition(match, relation.nextRoundMatchFactor),
+                ...generatePreviousRoundMatchPositions(relation, match),
+            };
+        case 'two-to-one':
+            return {
+                nextRoundMatchPosition: generateMatchPosition(match, relation.nextRoundMatchFactor),
+                previousUpperRoundMatchPosition: generateMatchPosition(match, relation.previousUpperRoundMatchFactor),
+                previousLowerRoundMatchPosition: generateMatchPosition(match, relation.previousLowerRoundMatchFactor),
+            };
+        case 'two-to-nothing':
+            return {
+                nextRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
+                previousUpperRoundMatchPosition: generateMatchPosition(match, relation.previousUpperRoundMatchFactor),
+                previousLowerRoundMatchPosition: generateMatchPosition(match, relation.previousLowerRoundMatchFactor),
+            };
+    }
+};
+const createNothingToOneRelation$1 = (params) => {
+    const { match, relation, matchPositionMaps, nextRoundMatchPosition } = params;
+    const nextMatch = matchPositionMaps.get(relation.nextRound.id)?.get(nextRoundMatchPosition);
+    if (!nextMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Next round match not found');
+    return {
+        type: 'nothing-to-one',
+        currentMatch: match,
+        currentRound: relation.currentRound,
+        nextMatch,
+        nextRound: relation.nextRound,
+    };
+};
+const createOneToNothingOrTwoToNothingRelation = (params) => {
+    const { match, relation, matchPositionMaps, previousUpperRoundMatchPosition, previousLowerRoundMatchPosition } = params;
+    const previousUpperMatch = matchPositionMaps.get(relation.previousRound.id)?.get(previousUpperRoundMatchPosition);
+    const previousLowerMatch = matchPositionMaps.get(relation.previousRound.id)?.get(previousLowerRoundMatchPosition);
+    if (!previousUpperMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous round match not found');
+    if (previousUpperRoundMatchPosition !== previousLowerRoundMatchPosition) {
+        if (!previousLowerMatch)
+            throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous lower round match not found');
+        return {
+            type: 'two-to-nothing',
+            currentMatch: match,
+            currentRound: relation.currentRound,
+            previousUpperMatch,
+            previousUpperRound: relation.previousRound,
+            previousLowerMatch,
+            previousLowerRound: relation.previousRound,
+        };
+    }
+    else {
+        return {
+            type: 'one-to-nothing',
+            currentMatch: match,
+            currentRound: relation.currentRound,
+            previousMatch: previousUpperMatch,
+            previousRound: relation.previousRound,
+        };
+    }
+};
+const createOneToOneOrTwoToOneRelation = (params) => {
+    const { match, relation, matchPositionMaps, nextRoundMatchPosition, previousUpperRoundMatchPosition, previousLowerRoundMatchPosition, } = params;
+    const nextMatch = matchPositionMaps.get(relation.nextRound.id)?.get(nextRoundMatchPosition);
+    const previousUpperMatch = matchPositionMaps.get(relation.previousRound.id)?.get(previousUpperRoundMatchPosition);
+    const previousLowerMatch = matchPositionMaps.get(relation.previousRound.id)?.get(previousLowerRoundMatchPosition);
+    if (!nextMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Next round match not found');
+    if (!previousUpperMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous upper round match not found');
+    if (!previousLowerMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous lower round match not found');
+    if (previousUpperRoundMatchPosition === previousLowerRoundMatchPosition) {
+        return {
+            type: 'one-to-one',
+            currentMatch: match,
+            currentRound: relation.currentRound,
+            previousMatch: previousUpperMatch,
+            previousRound: relation.previousRound,
+            nextMatch,
+            nextRound: relation.nextRound,
+        };
+    }
+    else {
+        return {
+            type: 'two-to-one',
+            currentMatch: match,
+            currentRound: relation.currentRound,
+            previousUpperMatch,
+            previousUpperRound: relation.previousRound,
+            previousLowerMatch,
+            previousLowerRound: relation.previousRound,
+            nextMatch,
+            nextRound: relation.nextRound,
+        };
+    }
+};
+const createTwoToOneRelation$1 = (params) => {
+    const { match, relation, matchPositionMaps, nextRoundMatchPosition, previousUpperRoundMatchPosition, previousLowerRoundMatchPosition, } = params;
+    const nextMatch = matchPositionMaps.get(relation.nextRound.id)?.get(nextRoundMatchPosition);
+    const previousUpperMatch = matchPositionMaps
+        .get(relation.previousUpperRound.id)
+        ?.get(previousUpperRoundMatchPosition);
+    const previousLowerMatch = matchPositionMaps
+        .get(relation.previousLowerRound.id)
+        ?.get(previousLowerRoundMatchPosition);
+    if (!nextMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Next round match not found');
+    if (!previousUpperMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous upper round match not found');
+    if (!previousLowerMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous lower round match not found');
+    return {
+        type: 'two-to-one',
+        currentMatch: match,
+        currentRound: relation.currentRound,
+        previousUpperMatch,
+        previousUpperRound: relation.previousUpperRound,
+        previousLowerMatch,
+        previousLowerRound: relation.previousLowerRound,
+        nextMatch,
+        nextRound: relation.nextRound,
+    };
+};
+const createTwoToNothingRelation$1 = (params) => {
+    const { match, relation, matchPositionMaps, previousUpperRoundMatchPosition, previousLowerRoundMatchPosition } = params;
+    const previousUpperMatch = matchPositionMaps
+        .get(relation.previousUpperRound.id)
+        ?.get(previousUpperRoundMatchPosition);
+    const previousLowerMatch = matchPositionMaps
+        .get(relation.previousLowerRound.id)
+        ?.get(previousLowerRoundMatchPosition);
+    if (!previousUpperMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous upper round match not found');
+    if (!previousLowerMatch)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.MATCH_RELATION_INVALID, 'Previous lower round match not found');
+    return {
+        type: 'two-to-nothing',
+        currentMatch: match,
+        currentRound: relation.currentRound,
+        previousUpperMatch,
+        previousUpperRound: relation.previousUpperRound,
+        previousLowerMatch,
+        previousLowerRound: relation.previousLowerRound,
+    };
+};
+const generateMatchRelationsNew = (bracketData, options = {}) => {
+    const sourceMatches = options.source?.matches ?? [];
+    const hasDeclaredGraph = options.previousMatchIds !== undefined || sourceMatches.some((match) => matchOutcomeSlots(match).length > 0);
+    if (hasDeclaredGraph) {
+        return generateDeclaredMatchRelations({
+            bracket: bracketData,
+            sourceMatches,
+            previousMatchIds: options.previousMatchIds ?? defaultPreviousMatchIds,
+        });
+    }
+    const matchRelations = [];
+    const matchPositionMaps = new Map();
+    for (const round of bracketData.rounds.values()) {
+        const matchMap = new Map([...round.matches.values()].map((m) => [m.position, m]));
+        matchPositionMaps.set(round.id, matchMap);
+    }
+    for (const match of bracketData.matches.values()) {
+        const relation = match.round.relation;
+        const positions = generateMatchRelationPositions(relation, match);
+        if (!positions)
+            continue;
+        const { nextRoundMatchPosition, previousUpperRoundMatchPosition, previousLowerRoundMatchPosition } = positions;
+        switch (relation.type) {
+            case 'nothing-to-one':
+                matchRelations.push(createNothingToOneRelation$1({
+                    match,
+                    relation,
+                    matchPositionMaps,
+                    nextRoundMatchPosition,
+                }));
+                break;
+            case 'one-to-nothing':
+                matchRelations.push(createOneToNothingOrTwoToNothingRelation({
+                    match,
+                    relation,
+                    matchPositionMaps,
+                    previousUpperRoundMatchPosition,
+                    previousLowerRoundMatchPosition,
+                }));
+                break;
+            case 'one-to-one':
+                matchRelations.push(createOneToOneOrTwoToOneRelation({
+                    match,
+                    relation,
+                    matchPositionMaps,
+                    nextRoundMatchPosition,
+                    previousUpperRoundMatchPosition,
+                    previousLowerRoundMatchPosition,
+                }));
+                break;
+            case 'two-to-one':
+                matchRelations.push(createTwoToOneRelation$1({
+                    match,
+                    relation,
+                    matchPositionMaps,
+                    nextRoundMatchPosition,
+                    previousUpperRoundMatchPosition,
+                    previousLowerRoundMatchPosition,
+                }));
+                break;
+            case 'two-to-nothing':
+                matchRelations.push(createTwoToNothingRelation$1({
+                    match,
+                    relation,
+                    matchPositionMaps,
+                    previousUpperRoundMatchPosition,
+                    previousLowerRoundMatchPosition,
+                }));
+                break;
+        }
+    }
+    return matchRelations;
+};
+const matchOutcomeSlots = (match) => [match.homeSource, match.awaySource].filter((slot) => slot?.kind === 'match-outcome' && !!slot.matchId);
+const defaultPreviousMatchIds = (match) => matchOutcomeSlots(match)
+    .filter((slot) => slot.role !== 'loser')
+    .map((slot) => slot.matchId);
+const generateDeclaredMatchRelations = (options) => {
+    const { bracket, sourceMatches, previousMatchIds } = options;
+    const previousByMatchId = new Map(sourceMatches.map((match) => [match.id, previousMatchIds(match)]));
+    const nextByMatchId = new Map();
+    // A match can feed two: a semi final feeds the final with its winner and the third place match with
+    // its loser. The winner is where the match leads, so it wins over whatever the source happens to list
+    // first - without this, `nextMatch` answers "where does this winner go" from array order.
+    const winnerConsumerByFeederId = new Map();
+    for (const match of sourceMatches) {
+        for (const slot of [match.homeSource, match.awaySource]) {
+            if (slot?.kind !== 'match-outcome' || slot.role !== 'winner' || !slot.matchId)
+                continue;
+            if (!winnerConsumerByFeederId.has(slot.matchId))
+                winnerConsumerByFeederId.set(slot.matchId, match.id);
+        }
+    }
+    for (const [matchId, feederIds] of previousByMatchId) {
+        for (const feederId of feederIds) {
+            if (winnerConsumerByFeederId.get(feederId) === matchId)
+                nextByMatchId.set(feederId, matchId);
+            else if (!nextByMatchId.has(feederId))
+                nextByMatchId.set(feederId, matchId);
+        }
+    }
+    const relations = [];
+    for (const match of bracket.matches.values()) {
+        const previousMatches = (previousByMatchId.get(match.id) ?? [])
+            .map((id) => bracket.matches.get(id))
+            .filter((candidate) => candidate !== undefined);
+        const nextMatchId = nextByMatchId.get(match.id);
+        const nextMatch = nextMatchId ? bracket.matches.get(nextMatchId) : undefined;
+        if (previousMatches.length === 0 && nextMatch) {
+            relations.push({
+                type: 'nothing-to-one',
+                currentMatch: match,
+                currentRound: match.round,
+                nextMatch,
+                nextRound: nextMatch.round,
+            });
+        }
+        else if (previousMatches.length === 1 && nextMatch) {
+            const previousMatch = previousMatches[0];
+            if (!previousMatch)
+                continue;
+            relations.push({
+                type: 'one-to-one',
+                currentMatch: match,
+                currentRound: match.round,
+                previousMatch,
+                previousRound: previousMatch.round,
+                nextMatch,
+                nextRound: nextMatch.round,
+            });
+        }
+        else if (previousMatches.length >= 2 && nextMatch) {
+            const previousUpperMatch = previousMatches[0];
+            const previousLowerMatch = previousMatches[1];
+            if (!previousUpperMatch || !previousLowerMatch)
+                continue;
+            relations.push({
+                type: 'two-to-one',
+                currentMatch: match,
+                currentRound: match.round,
+                previousUpperMatch,
+                previousUpperRound: previousUpperMatch.round,
+                previousLowerMatch,
+                previousLowerRound: previousLowerMatch.round,
+                nextMatch,
+                nextRound: nextMatch.round,
+            });
+        }
+        else if (previousMatches.length === 1) {
+            const previousMatch = previousMatches[0];
+            if (!previousMatch)
+                continue;
+            relations.push({
+                type: 'one-to-nothing',
+                currentMatch: match,
+                currentRound: match.round,
+                previousMatch,
+                previousRound: previousMatch.round,
+            });
+        }
+        else if (previousMatches.length >= 2) {
+            const previousUpperMatch = previousMatches[0];
+            const previousLowerMatch = previousMatches[1];
+            if (!previousUpperMatch || !previousLowerMatch)
+                continue;
+            relations.push({
+                type: 'two-to-nothing',
+                currentMatch: match,
+                currentRound: match.round,
+                previousUpperMatch,
+                previousUpperRound: previousUpperMatch.round,
+                previousLowerMatch,
+                previousLowerRound: previousLowerMatch.round,
+            });
+        }
+    }
+    return relations;
+};
+
+const calculateMatchFactor = (numeratorRound, denominatorRound) => numeratorRound.matchCount / denominatorRound.matchCount;
+const createNothingToOneRelation = (params) => ({
+    type: 'nothing-to-one',
+    currentRound: params.currentRound,
+    nextRound: params.nextRound,
+    nextRoundMatchFactor: calculateMatchFactor(params.nextRound, params.currentRound),
+});
+const createOneToNothingRelation = (params) => ({
+    type: 'one-to-nothing',
+    currentRound: params.currentRound,
+    previousRound: params.previousRound,
+    previousRoundMatchFactor: calculateMatchFactor(params.previousRound, params.currentRound),
+    rootRoundMatchFactor: calculateMatchFactor(params.rootRound, params.currentRound),
+});
+const createOneToOneRelation = (params) => ({
+    type: 'one-to-one',
+    currentRound: params.currentRound,
+    previousRound: params.previousRound,
+    nextRound: params.nextRound,
+    nextRoundMatchFactor: calculateMatchFactor(params.nextRound, params.currentRound),
+    previousRoundMatchFactor: calculateMatchFactor(params.previousRound, params.currentRound),
+    rootRoundMatchFactor: calculateMatchFactor(params.rootRound, params.currentRound),
+});
+const createTwoToOneRelation = (params) => ({
+    type: 'two-to-one',
+    currentRound: params.currentRound,
+    previousUpperRound: params.previousUpperRound,
+    previousLowerRound: params.previousLowerRound,
+    nextRound: params.nextRound,
+    nextRoundMatchFactor: calculateMatchFactor(params.nextRound, params.currentRound),
+    previousUpperRoundMatchFactor: calculateMatchFactor(params.previousUpperRound, params.currentRound),
+    previousLowerRoundMatchFactor: calculateMatchFactor(params.previousLowerRound, params.currentRound),
+    upperRootRoundMatchFactor: calculateMatchFactor(params.firstUpperRound, params.currentRound),
+    lowerRootRoundMatchFactor: calculateMatchFactor(params.firstLowerRound, params.currentRound),
+});
+const createTwoToNothingRelation = (params) => ({
+    type: 'two-to-nothing',
+    currentRound: params.currentRound,
+    previousUpperRound: params.previousUpperRound,
+    previousLowerRound: params.previousLowerRound,
+    previousUpperRoundMatchFactor: calculateMatchFactor(params.previousUpperRound, params.currentRound),
+    previousLowerRoundMatchFactor: calculateMatchFactor(params.previousLowerRound, params.currentRound),
+    upperRootRoundMatchFactor: calculateMatchFactor(params.firstUpperRound, params.currentRound),
+    lowerRootRoundMatchFactor: calculateMatchFactor(params.firstLowerRound, params.currentRound),
+});
+/** A round drawn on the way back from the middle of a mirrored bracket. */
+const isFoldedBackRound = (round) => round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT;
+const buildRoundsByDepth = (rounds) => {
+    const byDepth = new Map();
+    for (const round of rounds) {
+        const slot = byDepth.get(round.logicalIndex) ?? { left: null, right: null, single: null };
+        if (round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.LEFT)
+            slot.left = round;
+        else if (round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT)
+            slot.right = round;
+        else
+            slot.single = round;
+        byDepth.set(round.logicalIndex, slot);
+    }
+    return byDepth;
+};
+/**
+ * The round one depth along on the same side of the fold - or, where the fold has closed because that
+ * depth was too small to halve, the whole round sitting in the middle.
+ */
+const roundAtDepth = (params) => {
+    const slot = params.byDepth.get(params.depth);
+    if (!slot)
+        return null;
+    const sameSide = params.side === BRACKET_ROUND_MIRROR_TYPE.RIGHT ? slot.right : slot.left;
+    return sameSide ?? slot.single ?? null;
+};
+const getNavigationContext = (params) => {
+    const { upperRounds, upperRoundsByDepth, currentUpperRoundIndex } = params;
+    const currentUpperRound = upperRounds[currentUpperRoundIndex];
+    if (!currentUpperRound)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.ROUND_RELATION_INVALID, 'currentUpperRound is null');
+    const isLeftToRight = !currentUpperRound.mirrorRoundType || currentUpperRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.LEFT;
+    // A folded half follows the fold, not the array. Its neighbours are the rounds one depth away on its
+    // own side, because the array puts a right half next to whatever happened to be emitted beside it -
+    // in a double elimination that is the grand final rather than the round it actually feeds.
+    const isFolded = !!currentUpperRound.mirrorRoundType;
+    const side = currentUpperRound.mirrorRoundType;
+    const depth = currentUpperRound.logicalIndex;
+    const relativePrevious = isFolded
+        ? roundAtDepth({ byDepth: upperRoundsByDepth, depth: depth - 1, side })
+        : upperRounds[currentUpperRoundIndex - 1] || null;
+    const relativeNext = isFolded
+        ? roundAtDepth({ byDepth: upperRoundsByDepth, depth: depth + 1, side })
+        : upperRounds[currentUpperRoundIndex + 1] || null;
+    // A folded half already resolved its own direction, so the swap that turns array order into flow
+    // order for a right-hand round must not be applied twice.
+    const previousUpperRound = isFolded || isLeftToRight ? relativePrevious : relativeNext;
+    const nextUpperRound = isFolded || isLeftToRight ? relativeNext : relativePrevious;
+    const isLastUpperRound = !nextUpperRound ||
+        (nextUpperRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT && !currentUpperRound.mirrorRoundType);
+    const isFinal = currentUpperRound.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+    return {
+        currentUpperRound,
+        previousUpperRound,
+        nextUpperRound,
+        isLastUpperRound,
+        isFinal,
+    };
+};
+const handleFinalRound = (params) => {
+    const { relations, currentUpperRound, previousUpperRound, nextUpperRound, lowerRounds, firstUpperRound, firstLowerRound, lastLowerRound, } = params;
+    const finalLowerRound = lastLowerRound;
+    const isAsyncBracket = nextUpperRound?.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL;
+    if (nextUpperRound) {
+        relations.push(createTwoToOneRelation({
+            currentRound: currentUpperRound,
+            previousUpperRound,
+            previousLowerRound: finalLowerRound,
+            nextRound: nextUpperRound,
+            firstUpperRound,
+            firstLowerRound,
+        }));
+    }
+    else {
+        relations.push(createTwoToNothingRelation({
+            currentRound: currentUpperRound,
+            previousUpperRound,
+            previousLowerRound: finalLowerRound,
+            firstUpperRound,
+            firstLowerRound,
+        }));
+    }
+    const preFinalLowerRound = lowerRounds[lowerRounds.length - 2] || null;
+    if (!preFinalLowerRound) {
+        relations.push(createNothingToOneRelation({ currentRound: finalLowerRound, nextRound: currentUpperRound }));
+        return;
+    }
+    relations.push(createOneToOneRelation({
+        currentRound: finalLowerRound,
+        previousRound: preFinalLowerRound,
+        nextRound: currentUpperRound,
+        rootRound: firstLowerRound,
+    }));
+    if (!isAsyncBracket)
+        return;
+    const prePreFinalLowerRound = lowerRounds[lowerRounds.length - 3] || null;
+    relations.push(prePreFinalLowerRound
+        ? createOneToOneRelation({
+            currentRound: preFinalLowerRound,
+            previousRound: prePreFinalLowerRound,
+            nextRound: finalLowerRound,
+            rootRound: firstLowerRound,
+        })
+        : createNothingToOneRelation({ currentRound: preFinalLowerRound, nextRound: finalLowerRound }));
+};
+const handleFirstRound = (params) => {
+    const { relations, currentUpperRound, nextUpperRound, lowerRounds, currentUpperRoundIndex } = params;
+    relations.push(createNothingToOneRelation({
+        currentRound: currentUpperRound,
+        nextRound: nextUpperRound,
+    }));
+    const currentLowerRound = lowerRounds[currentUpperRoundIndex] || null;
+    const nextLowerRound = lowerRounds[currentUpperRoundIndex + 1] || null;
+    // Pairing "upper round at index i" with "lower round at index i" only means something while the upper
+    // array is the outbound flow. A round on the way back from a fold sits past the finals in that array,
+    // so its index would claim a lower round in the middle of the bracket and wire it as an opening round -
+    // the loop at the end of `generateRoundRelations` reaches it by depth instead.
+    if (currentLowerRound && nextLowerRound && !isFoldedBackRound(currentUpperRound)) {
+        relations.push(createNothingToOneRelation({
+            currentRound: currentLowerRound,
+            nextRound: nextLowerRound,
+        }));
+    }
+};
+const handleRegularRound = (params) => {
+    const { relations, currentUpperRound, previousUpperRound, nextUpperRound, lowerRounds, currentUpperRoundIndex, firstUpperRound, firstLowerRound, } = params;
+    relations.push(createOneToOneRelation({
+        currentRound: currentUpperRound,
+        previousRound: previousUpperRound,
+        nextRound: nextUpperRound,
+        rootRound: firstUpperRound,
+    }));
+    const currentLowerRound = lowerRounds[currentUpperRoundIndex] || null;
+    const previousLowerRound = lowerRounds[currentUpperRoundIndex - 1] || null;
+    const nextLowerRound = lowerRounds[currentUpperRoundIndex + 1] || null;
+    if (currentLowerRound &&
+        currentUpperRound.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET &&
+        previousLowerRound &&
+        nextLowerRound &&
+        firstLowerRound &&
+        // See `handleFirstRound`: an index into the outbound flow says nothing about a folded-back round.
+        !isFoldedBackRound(currentUpperRound)) {
+        relations.push(createOneToOneRelation({
+            currentRound: currentLowerRound,
+            previousRound: previousLowerRound,
+            nextRound: nextLowerRound,
+            rootRound: firstLowerRound,
+        }));
+    }
+};
+const generateRoundRelationsNew = (bracketData) => {
+    const relations = [];
+    // A relation may never name a round with no matches: every position in it comes from a ratio of match
+    // counts, so a zero puts each neighbour's match at a position nothing occupies. A round whose matches
+    // are not drawn yet is treated as absent instead, and its neighbours wired to each other.
+    const allRounds = [...bracketData.rounds.values()].filter((round) => round.matchCount > 0);
+    const upperRounds = allRounds.filter((r) => r.type !== DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET);
+    const lowerRounds = allRounds.filter((r) => r.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET);
+    const upperRoundsByDepth = buildRoundsByDepth(upperRounds);
+    const lowerRoundsByDepth = buildRoundsByDepth(lowerRounds);
+    // The lower bracket as it is *played*: one round per depth, taking the left half of a folded round.
+    // A fold draws each early round twice, so the raw array holds two entries per depth and its last
+    // element is a first-round half rather than the round that feeds the grand final. Unfolded, this is
+    // the array itself.
+    const lowerFlow = Array.from(lowerRoundsByDepth.keys())
+        .sort((a, b) => a - b)
+        .map((depth) => roundAtDepth({ byDepth: lowerRoundsByDepth, depth, side: null }))
+        .filter((round) => !!round);
+    const firstUpperRound = upperRounds[0];
+    const firstLowerRound = lowerFlow[0] || null;
+    const lastLowerRound = lowerFlow[lowerFlow.length - 1] || null;
+    // Nothing is drawn yet, so there is nothing to relate - not a malformed structure.
+    if (allRounds.length === 0)
+        return relations;
+    if (!firstUpperRound)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.ROUND_RELATION_INVALID, 'No upper rounds found');
+    const hasLowerRounds = lowerRounds.length > 0;
+    for (const [currentUpperRoundIndex] of upperRounds.entries()) {
+        const nav = getNavigationContext({
+            upperRounds,
+            upperRoundsByDepth,
+            currentUpperRoundIndex,
+        });
+        if (nav.isFinal && hasLowerRounds && lastLowerRound && firstLowerRound && nav.previousUpperRound) {
+            handleFinalRound({
+                relations,
+                currentUpperRound: nav.currentUpperRound,
+                previousUpperRound: nav.previousUpperRound,
+                nextUpperRound: nav.nextUpperRound,
+                lowerRounds: lowerFlow,
+                currentUpperRoundIndex,
+                firstUpperRound,
+                firstLowerRound,
+                lastLowerRound,
+            });
+        }
+        else if (nav.isLastUpperRound && nav.previousUpperRound) {
+            relations.push(createOneToNothingRelation({
+                currentRound: nav.currentUpperRound,
+                previousRound: nav.previousUpperRound,
+                rootRound: firstUpperRound,
+            }));
+        }
+        else if (nav.currentUpperRound.isFirstRound && nav.nextUpperRound) {
+            handleFirstRound({
+                relations,
+                currentUpperRound: nav.currentUpperRound,
+                nextUpperRound: nav.nextUpperRound,
+                lowerRounds: lowerFlow,
+                currentUpperRoundIndex,
+            });
+        }
+        else if (nav.nextUpperRound && !nav.previousUpperRound) {
+            relations.push(createNothingToOneRelation({
+                currentRound: nav.currentUpperRound,
+                nextRound: nav.nextUpperRound,
+            }));
+        }
+        else if (nav.previousUpperRound && nav.nextUpperRound) {
+            handleRegularRound({
+                relations,
+                currentUpperRound: nav.currentUpperRound,
+                previousUpperRound: nav.previousUpperRound,
+                nextUpperRound: nav.nextUpperRound,
+                lowerRounds: lowerFlow,
+                currentUpperRoundIndex,
+                firstUpperRound,
+                firstLowerRound,
+            });
+        }
+    }
+    if (hasLowerRounds && firstLowerRound) {
+        const assignedRoundIds = new Set(relations.map((r) => r.currentRound.id));
+        // By depth and side rather than by array position: in a folded bracket the array holds two rounds
+        // per depth, so its neighbours are whatever was emitted alongside - for an unfolded one the two are
+        // the same thing.
+        for (const lowerRound of lowerRounds) {
+            if (assignedRoundIds.has(lowerRound.id))
+                continue;
+            const side = lowerRound.mirrorRoundType;
+            const depth = lowerRound.logicalIndex;
+            const prevLowerRound = roundAtDepth({ byDepth: lowerRoundsByDepth, depth: depth - 1, side });
+            const nextLowerRound = roundAtDepth({ byDepth: lowerRoundsByDepth, depth: depth + 1, side });
+            if (nextLowerRound) {
+                if (!prevLowerRound) {
+                    relations.push(createNothingToOneRelation({ currentRound: lowerRound, nextRound: nextLowerRound }));
+                }
+                else {
+                    relations.push(createOneToOneRelation({
+                        currentRound: lowerRound,
+                        previousRound: prevLowerRound,
+                        nextRound: nextLowerRound,
+                        rootRound: firstLowerRound,
+                    }));
+                }
+            }
+            else if (prevLowerRound) {
+                // Truncated bracket: the last lower round has no final round to feed into, so it terminates here.
+                // In a complete bracket this round is wired up by handleFinalRound and already in assignedRoundIds.
+                relations.push(createOneToNothingRelation({
+                    currentRound: lowerRound,
+                    previousRound: prevLowerRound,
+                    rootRound: firstLowerRound,
+                }));
+            }
+        }
+    }
+    return relations;
+};
+
+const createBracket = (source, options) => {
+    if (!source.rounds.length)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.SOURCE_EMPTY, 'The bracket source has no rounds to render');
+    const bracketNewBase = createBracketBase(source, options);
+    const rounds = new BracketMap();
+    const roundsByType = new BracketMap();
+    for (const roundBase of bracketNewBase.rounds.values()) {
+        const relation = { type: 'none' };
+        const newRound = { ...roundBase, matches: new BracketMap(), relation };
+        relation.currentRound = newRound;
+        rounds.set(roundBase.id, newRound);
+        if (!roundsByType.has(roundBase.type)) {
+            roundsByType.set(roundBase.type, new BracketMap());
+        }
+        roundsByType.getOrThrow(roundBase.type).set(roundBase.id, newRound);
+    }
+    const participants = new BracketMap();
+    for (const participantBase of bracketNewBase.participants.values()) {
+        participants.set(participantBase.id, {
+            ...participantBase,
+            matches: new BracketMap(),
+        });
+    }
+    const matches = new BracketMap();
+    for (const matchBase of bracketNewBase.matches.values()) {
+        const round = rounds.getOrThrow(matchBase.roundId);
+        const homeParticipant = matchBase.home
+            ? { ...matchBase.home, matches: new BracketMap() }
+            : null;
+        const awayParticipant = matchBase.away
+            ? { ...matchBase.away, matches: new BracketMap() }
+            : null;
+        const relation = { type: 'none', currentRound: round };
+        const newMatch = {
+            ...matchBase,
+            home: homeParticipant,
+            away: awayParticipant,
+            winner: null,
+            round,
+            relation,
+        };
+        relation.currentMatch = newMatch;
+        if (matchBase.winner) {
+            const winnerParticipant = homeParticipant?.id === matchBase.winner.id ? homeParticipant : awayParticipant;
+            if (!winnerParticipant)
+                throw new BracketRuntimeError(BRACKET_ERROR_CODES.WINNER_NOT_FOUND, `Winner participant with id ${matchBase.winner.id} not found in match base`);
+            newMatch.winner = winnerParticipant;
+        }
+        matches.set(matchBase.id, newMatch);
+        round.matches.set(matchBase.id, newMatch);
+    }
+    const newBracket = {
+        matches,
+        participants,
+        rounds,
+        roundsByType,
+        mode: bracketNewBase.mode,
+    };
+    const roundRelations = generateRoundRelationsNew(newBracket);
+    for (const roundRelation of roundRelations) {
+        roundRelation.currentRound.relation = roundRelation;
+    }
+    const matchRelations = generateMatchRelationsNew(newBracket, {
+        source,
+        previousMatchIds: options.previousMatchIds,
+    });
+    for (const matchRelation of matchRelations) {
+        matchRelation.currentMatch.relation = matchRelation;
+    }
+    // After the relations, never before: a participant's view of a match is a copy of it, so building it
+    // any earlier would freeze the placeholder relation into every copy.
+    for (const match of matches.values()) {
+        if (match.home) {
+            participants.getOrThrow(match.home.id).matches.set(match.id, { ...match, me: match.home, opponent: match.away });
+        }
+        if (match.away) {
+            participants.getOrThrow(match.away.id).matches.set(match.id, { ...match, me: match.away, opponent: match.home });
+        }
+    }
+    for (const participant of participants.values()) {
+        for (const match of participant.matches.values()) {
+            if (match.home?.id === participant.id)
+                match.home.matches = participant.matches;
+            if (match.away?.id === participant.id)
+                match.away.matches = participant.matches;
+            if (match.winner?.id === participant.id)
+                match.winner.matches = participant.matches;
+        }
+    }
+    return newBracket;
+};
+
+const isBracketSlotPredictable = (source) => source?.kind === 'match-outcome' || source?.kind === 'standing-rank' || source?.kind === 'seed';
+const sourceFor = (match, side) => side === 'home' ? match.homeSource : match.awaySource;
+const participantIdFor = (match, side) => match[side]?.id ?? null;
+const resolveMatchOutcome = (options) => {
+    const { walk, source } = options;
+    if (!source.matchId || !source.role)
+        return null;
+    const feeder = walk.bracket.matches.get(source.matchId);
+    if (!feeder)
+        return null;
+    const homeSource = sourceFor(feeder, 'home');
+    const awaySource = sourceFor(feeder, 'away');
+    const home = resolveSlot({ walk, match: feeder, side: 'home' });
+    const away = resolveSlot({ walk, match: feeder, side: 'away' });
+    if (homeSource?.kind === 'bye' && awaySource?.kind !== 'bye') {
+        return source.role === 'winner' ? away : null;
+    }
+    if (awaySource?.kind === 'bye' && homeSource?.kind !== 'bye') {
+        return source.role === 'winner' ? home : null;
+    }
+    if (!home || !away) {
+        return walk.keepPickWhileFeederSideIsOpen && source.role === 'winner' ? walk.picks.matchWinner(feeder.id) : null;
+    }
+    const pickedWinner = walk.picks.matchWinner(feeder.id);
+    if (pickedWinner !== home && pickedWinner !== away)
+        return null;
+    return source.role === 'winner' ? pickedWinner : pickedWinner === home ? away : home;
+};
+const resolveSource = (options) => {
+    const { walk, match, side, source } = options;
+    switch (source.kind) {
+        case 'match-outcome':
+            return resolveMatchOutcome({ walk, source });
+        case 'standing-rank':
+            return source.standingId && source.rank !== null
+                ? walk.picks.standingRank({ standingId: source.standingId, rank: source.rank })
+                : null;
+        case 'seed':
+        case 'swiss-bucket':
+        case 'external':
+            return participantIdFor(match, side);
+        case 'bye':
+            return null;
+    }
+};
+const resolveSlotOccupant = (options) => {
+    const { walk, match, side } = options;
+    const real = participantIdFor(match, side);
+    if (real !== null && walk.realParticipantOutranksPick(match))
+        return real;
+    const source = sourceFor(match, side);
+    return source ? resolveSource({ walk, match, side, source }) : real;
+};
+const resolveSlot = (options) => {
+    const { walk, match, side } = options;
+    const visitKey = `${match.id}:${side}`;
+    const openDepth = walk.visitDepths.get(visitKey);
+    if (openDepth !== undefined) {
+        walk.shallowestCycleHit = Math.min(walk.shallowestCycleHit, openDepth);
+        return null;
+    }
+    const resolved = walk.resolved.get(visitKey);
+    if (resolved !== undefined)
+        return resolved;
+    const depth = walk.visitDepths.size;
+    const shallowestCycleHitBefore = walk.shallowestCycleHit;
+    walk.visitDepths.set(visitKey, depth);
+    walk.shallowestCycleHit = Infinity;
+    try {
+        const result = resolveSlotOccupant({ walk, match, side });
+        // A result whose cycle guard only fired on this slot or below it is a function of the slot alone.
+        // One that hit a slot above it depends on the path that reached it, so caching it would answer a
+        // later path with a cycle's `null`.
+        if (walk.shallowestCycleHit >= depth)
+            walk.resolved.set(visitKey, result);
+        return result;
+    }
+    finally {
+        walk.visitDepths.delete(visitKey);
+        walk.shallowestCycleHit = Math.min(walk.shallowestCycleHit, shallowestCycleHitBefore);
+    }
+};
+const createResolveWalk = (options) => ({
+    bracket: options.bracket,
+    picks: options.picks,
+    realParticipantOutranksPick: options.realParticipantOutranksPick ?? (() => false),
+    keepPickWhileFeederSideIsOpen: options.keepPickWhileFeederSideIsOpen ?? false,
+    visitDepths: new Map(),
+    resolved: new Map(),
+    shallowestCycleHit: Infinity,
+});
+/**
+ * @internal A {@link resolveBracketSlot} that shares one memo across its calls. Valid only while the
+ * picks it was created with do not change.
+ */
+const createBracketSlotResolver = (options) => {
+    const walk = createResolveWalk(options);
+    return (matchId, side) => {
+        const match = options.bracket.matches.get(matchId);
+        return match ? resolveSlot({ walk, match, side }) : null;
+    };
+};
+/** Who the viewer's own picks put in a slot, or `null` while their picks do not reach it. */
+const resolveBracketSlot = (options) => createBracketSlotResolver(options)(options.matchId, options.side);
+
+// Grouped by type and depth rather than by round id: a mirrored layout splits one round into two
+// half-rounds to draw either side of the fold, and a pick has to be able to travel across it. Ordered
+// topologically over the declared provenance, because a round is settled against the ones feeding it.
+const roundsOf = (bracket) => {
+    const matchesByKey = new Map();
+    const keyByMatchId = new Map();
+    for (const round of bracket.rounds.values()) {
+        const key = `${round.type}:${round.logicalIndex}`;
+        const matches = matchesByKey.get(key) ?? [];
+        for (const match of round.matches.values()) {
+            matches.push(match);
+            keyByMatchId.set(match.id, key);
+        }
+        matchesByKey.set(key, matches);
+    }
+    const unsettledFeedersByKey = new Map();
+    for (const [key, matches] of matchesByKey) {
+        const feeders = new Set();
+        for (const match of matches) {
+            for (const source of [match.homeSource, match.awaySource]) {
+                if (source?.kind !== 'match-outcome' || !source.matchId)
+                    continue;
+                const feederKey = keyByMatchId.get(source.matchId);
+                if (feederKey !== undefined && feederKey !== key)
+                    feeders.add(feederKey);
+            }
+        }
+        unsettledFeedersByKey.set(key, feeders);
+    }
+    const ordered = [];
+    while (unsettledFeedersByKey.size) {
+        const keys = [...unsettledFeedersByKey.keys()];
+        // A malformed graph can leave a cycle in which nothing is ready, so fall back to the first
+        // round left rather than looping forever.
+        const key = keys.find((candidate) => !unsettledFeedersByKey.get(candidate)?.size) ?? keys[0];
+        if (key === undefined)
+            break;
+        ordered.push(matchesByKey.get(key) ?? []);
+        unsettledFeedersByKey.delete(key);
+        for (const feeders of unsettledFeedersByKey.values())
+            feeders.delete(key);
+    }
+    return ordered;
+};
+/**
+ * Where every pick stands once each one has followed its participant into whichever match of its own
+ * round that participant now plays. A pick nothing in the round can honour comes back stranded.
+ */
+const migrateBracketPicks = (options) => {
+    const { bracket, pickAsMade } = options;
+    const locked = options.lockedMatchIds ?? new Set();
+    const pickByMatchId = {};
+    const movedFromByMatchId = {};
+    const strandedByMatchId = {};
+    const settled = {
+        matchWinner: (matchId) => pickByMatchId[matchId] ?? null,
+        standingRank: options.standingRank ?? (() => null),
+    };
+    for (const round of roundsOf(bracket)) {
+        const sidesByMatchId = new Map();
+        const travelling = [];
+        const strandedHere = new Set();
+        const sidesOf = (matchId) => sidesByMatchId.get(matchId) ?? [null, null];
+        const resolve = createBracketSlotResolver({
+            bracket,
+            picks: settled,
+            realParticipantOutranksPick: options.realParticipantOutranksPick,
+            keepPickWhileFeederSideIsOpen: options.keepPickWhileFeederSideIsOpen,
+        });
+        for (const match of round) {
+            sidesByMatchId.set(match.id, [resolve(match.id, 'home'), resolve(match.id, 'away')]);
+        }
+        for (const match of round) {
+            const pick = pickAsMade(match.id);
+            if (!pick)
+                continue;
+            const [home, away] = sidesOf(match.id);
+            if (pick === home || pick === away) {
+                pickByMatchId[match.id] = pick;
+                continue;
+            }
+            if (locked.has(match.id)) {
+                pickByMatchId[match.id] = pick;
+                strandedByMatchId[match.id] = pick;
+                continue;
+            }
+            travelling.push({ matchId: match.id, pick });
+        }
+        for (const { matchId, pick } of travelling) {
+            const target = round.find((candidate) => {
+                if (candidate.id === matchId || locked.has(candidate.id) || pickByMatchId[candidate.id])
+                    return false;
+                if (strandedHere.has(candidate.id))
+                    return false;
+                const [home, away] = sidesOf(candidate.id);
+                return pick === home || pick === away;
+            });
+            if (!target) {
+                strandedByMatchId[matchId] = pick;
+                strandedHere.add(matchId);
+                continue;
+            }
+            pickByMatchId[target.id] = pick;
+            movedFromByMatchId[target.id] = matchId;
+        }
+        // After the travelling, not during it: a match that carries the stranded note holds no selection
+        // at all, even where a pick reached it in the meantime.
+        for (const matchId of strandedHere)
+            delete pickByMatchId[matchId];
+    }
+    return { pickByMatchId, movedFromByMatchId, strandedByMatchId };
+};
+
+const getSwissGroupBoxPadding = (options) => options.swissGroupPadding + options.swissGroupBorderWidth;
+const calculateSwissColumnMetrics = (groupMap, options) => {
+    const includeHeaders = options.roundHeaderHeight > 0;
+    const boxPadding = getSwissGroupBoxPadding(options);
+    let naturalHeight = 0;
+    let stretchableGapCount = 0;
+    for (const [groupIndex, group] of Array.from(groupMap.groups.values()).entries()) {
+        if (groupIndex !== 0) {
+            // The gap section between two groups
+            naturalHeight += options.rowRoundGap;
+            stretchableGapCount++;
+        }
+        // The round header gap is not stretchable: the first match should always sit directly
+        // below it, no matter how much a column gets stretched.
+        if (includeHeaders) {
+            naturalHeight += options.roundHeaderHeight + options.roundHeaderGap;
+        }
+        const matchGapCount = Math.max(0, group.matches.size - 1);
+        naturalHeight += boxPadding * 2 + group.matches.size * options.matchHeight + matchGapCount * options.rowGap;
+        stretchableGapCount += matchGapCount;
+    }
+    return { naturalHeight, stretchableGapCount };
+};
+// The naturally tallest master column (the round with the most groups) keeps the original
+// gaps (rowGap, rowRoundGap, roundHeaderGap) and defines the total bracket height.
+// The master cols before it are stretched to that height by distributing the missing
+// height evenly across all of their gap elements.
+// The master cols after it keep the original gaps, resulting in a top alignment. They get
+// one more gap element at the end of the column to fill the remaining space if any.
+const createSwissGrid = (bracketData, options, components) => {
+    const swissGroupMaps = generateBracketRoundSwissGroupMaps(bracketData);
+    if (!swissGroupMaps)
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.SWISS_GROUPING_FAILED, 'Unable to generate Swiss groups for the provided bracket data');
+    const grid = createBracketGrid({ spanElementWidth: options.columnWidth });
+    const groupMaps = Array.from(swissGroupMaps.values());
+    const columnMetrics = groupMaps.map((groupMap) => calculateSwissColumnMetrics(groupMap, options));
+    const totalHeight = Math.max(...columnMetrics.map((metrics) => metrics.naturalHeight));
+    const longestColumnIndex = columnMetrics.findIndex((metrics) => metrics.naturalHeight === totalHeight);
+    for (const [groupMapIndex, groupMap] of groupMaps.entries()) {
+        const isLastGroupMap = groupMapIndex === swissGroupMaps.size - 1;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const metrics = columnMetrics[groupMapIndex];
+        const heightToFill = totalHeight - metrics.naturalHeight;
+        const isStretched = groupMapIndex < longestColumnIndex && metrics.stretchableGapCount > 0;
+        const gapStretch = isStretched ? heightToFill / metrics.stretchableGapCount : 0;
+        const rowGap = options.rowGap + gapStretch;
+        const rowRoundGap = options.rowRoundGap + gapStretch;
+        // The border and group padding are part of the column width (the match elements
+        // shrink by them), so the column footprint stays at columnWidth and the group borders
+        // drawn around the matches don't overflow the bracket container. The padding lives on
+        // the match list sections, the header and gap sections stay unpadded and span the
+        // whole column width.
+        const boxPadding = getSwissGroupBoxPadding(options);
+        const { masterColumn, pushSection } = createBracketMasterColumn({
+            columnWidth: options.columnWidth,
+            padding: {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+            },
+        });
+        for (const [groupIndex, group] of Array.from(groupMap.groups.values()).entries()) {
+            const isLastGroup = groupIndex === groupMap.groups.size - 1;
+            if (options.roundHeaderHeight > 0) {
+                const firstMatchRound = group.matches.first()?.round;
+                if (!firstMatchRound)
+                    throw new BracketRuntimeError(BRACKET_ERROR_CODES.SWISS_GROUP_EMPTY, 'No rounds found in Swiss group');
+                const headerColumnSection = createBracketMasterColumnSection({
+                    type: 'round',
+                });
+                const headerSubColumn = createBracketSubColumn({
+                    span: {
+                        isStart: true,
+                        isEnd: true,
+                    },
+                });
+                const headerElement = createBracketElement({
+                    type: 'header',
+                    area: `h${group.id}`,
+                    partHeights: [options.roundHeaderHeight],
+                    elementHeight: options.roundHeaderHeight,
+                    component: components.roundHeader,
+                    round: firstMatchRound,
+                    roundSwissGroup: group,
+                });
+                const headerGapElement = createBracketElement({
+                    type: 'roundHeaderGap',
+                    area: '.',
+                    partHeights: [options.roundHeaderGap],
+                    elementHeight: options.roundHeaderGap,
+                });
+                headerSubColumn.pushElement(headerElement, headerGapElement);
+                headerColumnSection.pushSubColumn(headerSubColumn.subColumn);
+                pushSection(headerColumnSection.masterColumnSection);
+            }
+            const { masterColumnSection, pushSubColumn } = createBracketMasterColumnSection({
+                type: 'round',
+                padding: {
+                    bottom: boxPadding,
+                    left: boxPadding,
+                    right: boxPadding,
+                    top: boxPadding,
+                },
+            });
+            const { subColumn, pushElement } = createBracketSubColumn({
+                span: {
+                    isStart: true,
+                    isEnd: true,
+                },
+            });
+            const elementsToCreate = [];
+            for (const [matchIndex, match] of Array.from(group.matches.values()).entries()) {
+                const isLastMatch = matchIndex === group.matches.size - 1;
+                elementsToCreate.push({
+                    type: 'match',
+                    area: `m${match.shortId}`,
+                    partHeights: [options.matchHeight],
+                    elementHeight: options.matchHeight,
+                    component: components.match,
+                    match,
+                    round: match.round,
+                    roundSwissGroup: group,
+                });
+                if (!isLastMatch) {
+                    elementsToCreate.push({
+                        type: 'matchGap',
+                        area: '.',
+                        partHeights: [rowGap],
+                        elementHeight: rowGap,
+                    });
+                }
+            }
+            for (const elementData of elementsToCreate) {
+                const element = createBracketElement(elementData);
+                pushElement(element);
+            }
+            pushSubColumn(subColumn);
+            pushSection(masterColumnSection);
+            if (!isLastGroup) {
+                const groupGapColumnSection = createBracketMasterColumnSection({
+                    type: 'gap',
+                });
+                const groupGapSubColumn = createBracketSubColumn({
+                    span: {
+                        isStart: true,
+                        isEnd: true,
+                    },
+                });
+                const groupGapElement = createBracketElement({
+                    area: '.',
+                    type: 'roundGap',
+                    elementHeight: rowRoundGap,
+                    partHeights: [rowRoundGap],
+                });
+                groupGapSubColumn.pushElement(groupGapElement);
+                groupGapColumnSection.pushSubColumn(groupGapSubColumn.subColumn);
+                pushSection(groupGapColumnSection.masterColumnSection);
+            }
+        }
+        // Top aligned columns end above the total height, so we fill the remaining space with
+        // one last gap element.
+        const fillerHeight = isStretched ? 0 : heightToFill;
+        if (fillerHeight > 0) {
+            const fillerColumnSection = createBracketMasterColumnSection({
+                type: 'gap',
+            });
+            const fillerSubColumn = createBracketSubColumn({
+                span: {
+                    isStart: true,
+                    isEnd: true,
+                },
+            });
+            const fillerElement = createBracketElement({
+                area: '.',
+                type: 'colGap',
+                elementHeight: fillerHeight,
+                partHeights: [fillerHeight],
+            });
+            fillerSubColumn.pushElement(fillerElement);
+            fillerColumnSection.pushSubColumn(fillerSubColumn.subColumn);
+            pushSection(fillerColumnSection.masterColumnSection);
+        }
+        grid.pushMasterColumn(masterColumn);
+        if (!isLastGroupMap) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
+    };
+};
+
+/** Returns the width needed to render a computed bracket grid without horizontal clipping. */
+const bracketGridNaturalWidth = (grid) => grid.raw.grid.dimensions.width;
+
+const LAYOUT_FACTORY_SUGGESTION = {
+    'single-elimination': 'singleEliminationBracketLayout()',
+    'double-elimination': 'doubleEliminationBracketLayout()',
+    'swiss-with-elimination': 'swissBracketLayout()',
+};
+/** Returns the first registered layout matching the tournament mode. */
+const resolveBracketLayout = (layouts, mode) => {
+    const layout = layouts?.find((candidate) => candidate.mode === mode);
+    if (!layout) {
+        throw new BracketRuntimeError(BRACKET_ERROR_CODES.LAYOUT_NOT_REGISTERED, `No bracket layout registered for mode "${mode}". Add ${LAYOUT_FACTORY_SUGGESTION[mode]} to provideBracketConfig({ layouts: [...] }) or to the layouts input.`);
+    }
+    return layout;
+};
+
+/** How a group-table prediction scored on one position, once the real order is in. */
+const STANDING_PICK_OUTCOME = {
+    /** The participant finished on exactly the predicted position. */
+    EXACT: 'exact',
+    /** They finished on the predicted side of the advancing line, on another position. */
+    PARTIAL: 'partial',
+    /** They finished on the other side of the advancing line. */
+    WRONG: 'wrong',
+};
+/**
+ * How the participant predicted on `predictedPosition` scored, given where they really finished.
+ *
+ * `advancingCount` is how many positions advance, so a position is on the advancing side while it is
+ * `<= advancingCount`. Ending up on the other side of that line is `WRONG` whatever the distance; the
+ * predicted side of it is `EXACT` on the predicted position and `PARTIAL` on any other.
+ *
+ * `EXACT` is awarded below the line as well. An app whose API stores only the advancing positions holds no
+ * prediction for the rest - the order there is whatever its UI happened to draw - and should narrow the
+ * result to `PARTIAL`/`WRONG` itself for those positions.
+ *
+ * Returns the outcome and no points: what an outcome is worth is a rule of the competition, and
+ * `POINTS[outcome]` is a lookup the app already owns.
+ */
+const standingPickOutcome = (options) => {
+    const { predictedPosition, actualPosition, advancingCount } = options;
+    const predictedToAdvance = predictedPosition <= advancingCount;
+    if (predictedToAdvance !== actualPosition <= advancingCount)
+        return STANDING_PICK_OUTCOME.WRONG;
+    if (predictedPosition === actualPosition)
+        return STANDING_PICK_OUTCOME.EXACT;
+    return STANDING_PICK_OUTCOME.PARTIAL;
+};
+
+/**
+ * The order to show a group table in before anyone moves a row: every stored pick takes the position it was
+ * stored on, and the participants without one follow in the order the backend listed them, filling the gaps.
+ *
+ * A pick the field cannot hold is dropped rather than drawn - a position that is not an integer in
+ * `1..participantIds.length`, an id that is not in the field, a second pick for a position or for a
+ * participant already placed (the lowest position keeps it). The result is therefore always a permutation
+ * of `participantIds`.
+ */
+const standingPickStartOrder = (options) => {
+    const { participantIds, picks } = options;
+    const field = new Set(participantIds);
+    const byPosition = new Map();
+    const placed = new Set();
+    for (const pick of [...picks].sort((left, right) => left.position - right.position)) {
+        const holds = Number.isInteger(pick.position) &&
+            pick.position >= 1 &&
+            pick.position <= participantIds.length &&
+            field.has(pick.participantId) &&
+            !placed.has(pick.participantId) &&
+            !byPosition.has(pick.position);
+        if (!holds)
+            continue;
+        byPosition.set(pick.position, pick.participantId);
+        placed.add(pick.participantId);
+    }
+    const rest = participantIds.filter((id) => !placed.has(id));
+    const order = [];
+    for (let position = 1; position <= participantIds.length; position++) {
+        const id = byPosition.get(position) ?? rest.shift();
+        if (id !== undefined)
+            order.push(id);
+    }
+    return order;
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BRACKET_DATA_LAYOUT, BRACKET_ERROR_CODES, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BracketMap, COMMON_BRACKET_ROUND_TYPE, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, GROUP_BRACKET_ROUND_TYPE, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, STANDING_PICK_OUTCOME, SWISS_ADVANCE_WINS, SWISS_BRACKET_ROUND_TYPE, SWISS_ELIMINATE_LOSSES, TERMINAL_ROUND_SORT_PRIORITY, TOURNAMENT_MODE, bracketGridNaturalWidth, calculateColumnSplitFactor, calculateLowerRoundIndex, calculateUpperLowerRatio, calculateUpperRoundIndex, createBracket, createBracketBase, createBracketContinueMasterColumn, createBracketElement, createBracketElementPart, createBracketGapMasterColumn, createBracketGrid, createBracketMasterColumn, createBracketMasterColumnSection, createBracketSlotResolver, createBracketSubColumn, createDoubleEliminationGrid, createFoldedThirdPlaceSection, createMatchesMapBase, createNewMatchParticipantBase, createParticipantsMapBase, createRoundBracketSubColumnRelativeToFirstRound, createRoundsMapBase, createSingleEliminationGrid, createStackedDoubleEliminationGrid, createSwissGrid, curvePath, drawMan, drawSwissMan, finalizeBracketGrid, generateBracketRoundSwissGroupMaps, generateMatchPosition, generateMatchRelationPositions, generateMatchRelationsNew, generateRoundRelationsNew, getAvailableSwissGroupsForRound, getBracketContinueMatches, getSwissGroupColorType, gutterPath, isBracketContinueMatch, isBracketSlotPredictable, linePath, migrateBracketPicks, path, resolveBracketGridRowSpan, resolveBracketLayout, resolveBracketSlot, standingPickOutcome, standingPickStartOrder, verticalPath };
+//# sourceMappingURL=ethlete-bracket.mjs.map