@ethlete/cdk 4.68.0 → 4.69.0

package/fesm2022/ethlete-cdk.mjs

@@ -1572,2010 +1572,2010 @@ const generateBracketDataForGg = (source) => {
     return bracketData;
 };
 
-class NewBracketDefaultMatchComponent {
-    constructor() {
-        this.bracketRound = input.required(...(ngDevMode ? [{ debugName: "bracketRound" }] : []));
-        this.bracketMatch = input.required(...(ngDevMode ? [{ debugName: "bracketMatch" }] : []));
-        this.bracketRoundSwissGroup = input.required(...(ngDevMode ? [{ debugName: "bracketRoundSwissGroup" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultMatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: NewBracketDefaultMatchComponent, isStandalone: true, selector: "et-new-bracket-default-match", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null }, bracketMatch: { classPropertyName: "bracketMatch", publicName: "bracketMatch", isSignal: true, isRequired: true, transformFunction: null }, bracketRoundSwissGroup: { classPropertyName: "bracketRoundSwissGroup", publicName: "bracketRoundSwissGroup", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-match-host" }, ngImport: i0, template: ` {{ bracketMatch().id }} `, isInline: true, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultMatchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-new-bracket-default-match', template: ` {{ bracketMatch().id }} `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'et-new-bracket-default-match-host',
-                    }, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"] }]
-        }] });
-
-class NewBracketDefaultRoundHeaderComponent {
-    constructor() {
-        this.bracketRound = input.required(...(ngDevMode ? [{ debugName: "bracketRound" }] : []));
-        this.bracketRoundSwissGroup = input.required(...(ngDevMode ? [{ debugName: "bracketRoundSwissGroup" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultRoundHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NewBracketDefaultRoundHeaderComponent, isStandalone: true, selector: "et-new-bracket-default-round-header", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null }, bracketRoundSwissGroup: { classPropertyName: "bracketRoundSwissGroup", publicName: "bracketRoundSwissGroup", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-round-header-host" }, ngImport: i0, template: `
-    {{ bracketRound().name }}
-
-    @if (bracketRoundSwissGroup()) {
-      ({{ bracketRoundSwissGroup()?.name }})
-    }
-  `, isInline: true, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultRoundHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-new-bracket-default-round-header', template: `
-    {{ bracketRound().name }}
-
-    @if (bracketRoundSwissGroup()) {
-      ({{ bracketRoundSwissGroup()?.name }})
-    }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'et-new-bracket-default-round-header-host',
-                    }, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"] }]
-        }] });
-
-const path = (d, options) => `<path d="${d.replace(/\s+/g, ' ').trim()}" stroke="currentColor" fill="none" stroke-width="${options.width}" stroke-dasharray="${options.dashArray}" stroke-dashoffset="${options.dashOffset}" class="${options.className}" />`;
-
-const curvePath = (from, to, direction, options) => {
-    const inverted = options.inverted ?? false;
-    // Inline/block coordinates depending on direction and inversion
-    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;
-    // Curve parameters
-    const startCurve = options.lineStartingCurveAmount;
-    const endCurve = options.lineEndingCurveAmount;
-    const totalInline = Math.abs(toInline - fromInline);
-    const straightLength = (totalInline - startCurve - endCurve) / 2;
-    // Calculate key points for the path
-    const straightEnd = inverted ? fromInline - straightLength : fromInline + straightLength;
-    const straightStart = inverted ? toInline + straightLength : toInline - straightLength;
-    // First curve (from start)
-    const firstCurveEndX = inverted ? straightEnd - startCurve : straightEnd + startCurve;
-    const firstCurveEndY = direction === 'down' ? fromBlock + startCurve : fromBlock - startCurve;
-    // Second curve (to end)
-    const secondCurveStartY = direction === 'down' ? toBlock - endCurve : toBlock + endCurve;
-    const secondCurveEndX = straightStart;
-    const secondCurveEndY = toBlock;
-    const secondCurveBezierX = inverted ? straightStart + endCurve : straightStart - endCurve;
-    // SVG path string
-    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 linePath = (from, to, options) => {
-    return path(`M ${from.inline.end} ${from.block.center} L ${to.inline.start} ${to.block.center}`, 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,
-    },
-});
-const drawMan = (dimensions) => {
-    const svgParts = [];
-    for (const col of dimensions.bracketGrid.columns) {
-        for (const el of col.elements) {
-            if (el.type === 'header')
-                continue;
-            const currentMatchParticipantsShortIds = [el.match.home?.shortId, el.match.away?.shortId]
-                .filter((id) => !!id)
-                .join(' ');
-            const pathOptions = { ...dimensions.path, className: currentMatchParticipantsShortIds };
-            const currentPos = makePos(el.dimensions);
-            // No lines for the third place match
-            if (el.round.type === COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE)
-                continue;
-            switch (el.match.relation.type) {
-                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);
-                    // draw a straight line
-                    svgParts.push(linePath(prevPos, currentPos, { path: pathOptions }));
-                    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 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, className: '' },
-                    };
-                    if (isLowerUpperMerger) {
-                        svgParts.push(linePath(prevUpperPos, currentPos, { path: pathOptions }));
-                    }
-                    else {
-                        // draw two lines that merge into one in the middle
-                        svgParts.push(curvePath(prevUpperPos, currentPos, 'down', {
-                            ...curveOptions,
-                            path: {
-                                ...curveOptions.path,
-                                className: el.match.relation.previousUpperMatch.winner?.shortId || '',
-                            },
-                        }));
-                    }
-                    svgParts.push(curvePath(prevLowerPos, currentPos, 'up', {
-                        ...curveOptions,
-                        path: {
-                            ...curveOptions.path,
-                            className: el.match.relation.previousLowerMatch.winner?.shortId || '',
-                        },
-                    }));
-                    if (el.round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT &&
-                        el.match.relation.type === 'two-to-one' &&
-                        el.match.relation.nextRound.mirrorRoundType === null) {
-                        // draw a straight line for the special case of connecting the final match to the mirrored semi final match
-                        const next = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.nextMatch.id);
-                        const nextPos = makePos(next.dimensions);
-                        svgParts.push(linePath(nextPos, currentPos, { path: pathOptions }));
-                    }
-                    break;
-                }
-            }
+const FALLBACK_MATCH_RELATION_POSITION = -1;
+const generateMatchPosition = (match, factor) => Math.ceil(match.position * factor);
+const generateMatchRelationPositions = (relation, match) => {
+    switch (relation.type) {
+        case 'nothing-to-one':
+            return {
+                nextRoundMatchPosition: generateMatchPosition(match, relation.nextRoundMatchFactor),
+                previousUpperRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
+                previousLowerRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
+            };
+        case 'one-to-nothing': {
+            const double = relation.previousRoundMatchFactor === 2 ? 1 : 0;
+            return {
+                nextRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
+                previousUpperRoundMatchPosition: (generateMatchPosition(match, relation.previousRoundMatchFactor) -
+                    double),
+                previousLowerRoundMatchPosition: generateMatchPosition(match, relation.previousRoundMatchFactor),
+            };
+        }
+        case 'one-to-one': {
+            const double = relation.previousRoundMatchFactor === 2 ? 1 : 0;
+            return {
+                nextRoundMatchPosition: generateMatchPosition(match, relation.nextRoundMatchFactor),
+                previousUpperRoundMatchPosition: (generateMatchPosition(match, relation.previousRoundMatchFactor) -
+                    double),
+                previousLowerRoundMatchPosition: generateMatchPosition(match, relation.previousRoundMatchFactor),
+            };
         }
+        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),
+            };
     }
-    return svgParts.join('');
 };
-
-const createBracketElementPart = (config) => {
-    const { elementPartHeight } = config;
-    const newElementPart = {
-        dimensions: {
-            width: 0,
-            height: elementPartHeight,
-            top: 0,
-            left: 0,
-        },
-    };
+const createNothingToOneRelation$1 = (params) => {
+    const { match, relation, matchPositionMaps, nextRoundMatchPosition } = params;
+    const nextMatch = matchPositionMaps.get(relation.nextRound.id)?.get(nextRoundMatchPosition);
+    if (!nextMatch)
+        throw new Error('Next round match not found');
     return {
-        elementPart: newElementPart,
+        type: 'nothing-to-one',
+        currentMatch: match,
+        currentRound: relation.currentRound,
+        nextMatch,
+        nextRound: relation.nextRound,
     };
 };
-
-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,
-                };
-            default:
-                throw new Error(`Unknown element type: ${type}`);
-        }
-    })();
-    const pushPart = (...newParts) => {
-        parts.push(...newParts);
-    };
-    for (const partHeight of partHeights) {
-        const { elementPart } = createBracketElementPart({
-            elementPartHeight: partHeight,
-        });
-        pushPart(elementPart);
+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 Error('Previous round match not found');
+    if (previousUpperRoundMatchPosition !== previousLowerRoundMatchPosition) {
+        if (!previousLowerMatch)
+            throw new Error('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,
+        };
     }
-    return {
-        element: 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);
-                }
-            }
-            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,
-            });
-        }
+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 Error('Next round match not found');
+    if (!previousUpperMatch)
+        throw new Error('Previous upper round match not found');
+    if (!previousLowerMatch)
+        throw new Error('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 Error('Next round match not found');
+    if (!previousUpperMatch)
+        throw new Error('Previous upper round match not found');
+    if (!previousLowerMatch)
+        throw new Error('Previous lower round match not found');
     return {
-        columns: finalizedColumns,
-        elementMap: finalizedElementMap,
+        type: 'two-to-one',
+        currentMatch: match,
+        currentRound: relation.currentRound,
+        previousUpperMatch,
+        previousUpperRound: relation.previousUpperRound,
+        previousLowerMatch,
+        previousLowerRound: relation.previousLowerRound,
+        nextMatch,
+        nextRound: relation.nextRound,
     };
 };
-
-const createBracketGrid = (config) => {
-    const masterColumns = [];
-    const spannedWidthCache = new Map();
-    const spanStartLeftCache = new Map();
-    const newGrid = {
-        dimensions: { width: 0, height: 0, top: 0, left: 0 },
-        masterColumns,
-    };
-    const pushMasterColumn = (...newMasterColumns) => {
-        masterColumns.push(...newMasterColumns);
+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.previousUpperRound.id)
+        ?.get(previousLowerRoundMatchPosition);
+    if (!previousUpperMatch)
+        throw new Error('Previous upper round match not found');
+    if (!previousLowerMatch)
+        throw new Error('Previous lower round match not found');
+    return {
+        type: 'two-to-nothing',
+        currentMatch: match,
+        currentRound: relation.currentRound,
+        previousUpperMatch,
+        previousUpperRound: relation.previousUpperRound,
+        previousLowerMatch,
+        previousLowerRound: relation.previousUpperRound,
     };
-    const calculateDimensions = () => {
-        let currentMasterColumnLeft = 0;
-        let maxGridHeight = 0;
-        const masterCols = newGrid.masterColumns;
-        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
-            const masterColumn = masterCols[mcIdx];
-            const { padding } = masterColumn;
-            masterColumn.dimensions.left = currentMasterColumnLeft;
-            masterColumn.dimensions.top = 0;
-            masterColumn.dimensions.width += padding.left + padding.right;
-            const sections = masterColumn.sections;
-            let runningTop = 0;
-            let firstSectionIsHeader = false;
-            if (sections.length > 0) {
-                const firstSubColumn = sections[0].subColumns[0];
-                const firstElement = firstSubColumn?.elements[0];
-                firstSectionIsHeader = !!(firstElement && firstElement.type === 'header');
-            }
-            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
-                const section = sections[secIdx];
-                let sectionPaddingTop;
-                if (secIdx === 0) {
-                    sectionPaddingTop = firstSectionIsHeader ? 0 : padding.top;
-                }
-                else {
-                    sectionPaddingTop = padding.top;
-                }
-                section.dimensions.width = masterColumn.dimensions.width;
-                section.dimensions.left = masterColumn.dimensions.left;
-                section.dimensions.top = runningTop;
-                runningTop += sectionPaddingTop;
-                const contentWidth = masterColumn.dimensions.width - padding.left - padding.right;
-                const subColumns = section.subColumns;
-                const totalSubColumns = subColumns.length;
-                const subColumnWidth = contentWidth / totalSubColumns;
-                let currentSubColumnLeft = masterColumn.dimensions.left + padding.left;
-                let maxSectionHeight = 0;
-                for (let scIdx = 0; scIdx < totalSubColumns; scIdx++) {
-                    const subColumn = subColumns[scIdx];
-                    subColumn.dimensions.width = subColumnWidth;
-                    subColumn.dimensions.left = currentSubColumnLeft;
-                    // TODO: The problem is here somewhere
-                    subColumn.dimensions.top = section.dimensions.top + sectionPaddingTop;
-                    let totalSubColumnHeight = 0;
-                    const elements = subColumn.elements;
-                    for (let elIdx = 0; elIdx < elements.length; elIdx++) {
-                        const element = elements[elIdx];
-                        let totalElementHeight = 0;
-                        const parts = element.parts;
-                        for (let pIdx = 0; pIdx < parts.length; pIdx++) {
-                            const part = parts[pIdx];
-                            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;
-                }
-                section.dimensions.height = maxSectionHeight + padding.bottom;
-                runningTop += maxSectionHeight + padding.bottom;
-            }
-            masterColumn.dimensions.height = runningTop;
-            if (masterColumn.dimensions.height > maxGridHeight)
-                maxGridHeight = masterColumn.dimensions.height;
-            currentMasterColumnLeft += masterColumn.dimensions.width;
+};
+const generateMatchRelationsNew = (bracketData) => {
+    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 { nextRoundMatchPosition, previousUpperRoundMatchPosition, previousLowerRoundMatchPosition } = generateMatchRelationPositions(relation, match);
+        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;
         }
-        newGrid.dimensions.width = currentMasterColumnLeft;
-        newGrid.dimensions.height = maxGridHeight;
-        calculateSpanningElementDimensions();
+    }
+    return matchRelations;
+};
+
+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),
+});
+const getNavigationContext = (params) => {
+    const { upperRounds, currentUpperRoundIndex } = params;
+    const currentUpperRound = upperRounds[currentUpperRoundIndex];
+    if (!currentUpperRound)
+        throw new Error('currentUpperRound is null');
+    const isLeftToRight = !currentUpperRound.mirrorRoundType || currentUpperRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.LEFT;
+    const relativePrevious = upperRounds[currentUpperRoundIndex - 1] || null;
+    const relativeNext = upperRounds[currentUpperRoundIndex + 1] || null;
+    const previousUpperRound = isLeftToRight ? relativePrevious : relativeNext;
+    const nextUpperRound = 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 calculateSpanningElementDimensions = () => {
-        const spanDimensions = new Map();
-        const masterCols = newGrid.masterColumns;
-        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
-            const masterColumn = masterCols[mcIdx];
-            const sections = masterColumn.sections;
-            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
-                const section = sections[secIdx];
-                const subColumns = section.subColumns;
-                for (let scIdx = 0; scIdx < subColumns.length; scIdx++) {
-                    const subColumn = subColumns[scIdx];
-                    const elements = subColumn.elements;
-                    for (let elIdx = 0; elIdx < elements.length; elIdx++) {
-                        const element = elements[elIdx];
-                        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 totalSpannedWidth = calculateSpannedWidth(span, masterCols);
-                            const spanStartLeft = calculateSpanStartLeft(span, masterCols);
-                            const width = config.spanElementWidth;
-                            spanDimensions.set(spanKey, { width, left: spanStartLeft + (totalSpannedWidth - width) * 0.5 });
-                        }
-                        const storedDimensions = spanDimensions.get(spanKey);
-                        if (storedDimensions) {
-                            element.dimensions.width = storedDimensions.width;
-                            element.dimensions.left = storedDimensions.left;
-                            element.isHidden = !isStartPosition;
-                        }
-                    }
-                }
-            }
+};
+const handleFinalRound = (params) => {
+    const { relations, currentUpperRound, previousUpperRound, nextUpperRound, lowerRounds, currentUpperRoundIndex, firstUpperRound, firstLowerRound, lastLowerRound, } = params;
+    const currentLowerRound = lowerRounds[currentUpperRoundIndex] || null;
+    const nextLowerRound = lowerRounds[currentUpperRoundIndex + 1] || null;
+    const previousLowerRound = lowerRounds[currentUpperRoundIndex - 1] || null;
+    if (!currentLowerRound)
+        throw new Error('currentLowerRound is null');
+    const isAsyncBracket = currentLowerRound.id !== lastLowerRound.id;
+    const finalLowerRound = isAsyncBracket ? nextLowerRound : currentLowerRound;
+    if (!finalLowerRound)
+        throw new Error('finalLowerRound is null');
+    if (finalLowerRound.id !== lastLowerRound.id)
+        throw new Error('finalLowerRound is not the last lower round');
+    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,
+        }));
+    }
+    if (isAsyncBracket) {
+        const preFinalLowerRound = lowerRounds[lowerRounds.length - 2];
+        const prePreFinalLowerRound = lowerRounds[lowerRounds.length - 3] || null;
+        if (!preFinalLowerRound)
+            throw new Error('preFinalLowerRound is null');
+        relations.push(createOneToOneRelation({
+            currentRound: finalLowerRound,
+            previousRound: preFinalLowerRound,
+            nextRound: currentUpperRound,
+            rootRound: firstLowerRound,
+        }));
+        if (prePreFinalLowerRound) {
+            relations.push(createOneToOneRelation({
+                currentRound: preFinalLowerRound,
+                previousRound: prePreFinalLowerRound,
+                nextRound: finalLowerRound,
+                rootRound: firstLowerRound,
+            }));
         }
-    };
-    const calculateSpannedWidth = (span, masterColumns) => {
-        const key = `${span.masterColumnStart}-${span.masterColumnEnd}-${span.sectionStart}-${span.sectionEnd}-${span.subColumnStart}-${span.subColumnEnd}`;
-        if (spannedWidthCache.has(key))
-            return spannedWidthCache.get(key);
-        if (span.masterColumnStart === span.masterColumnEnd) {
-            const masterColumn = masterColumns[span.masterColumnStart];
-            if (masterColumn) {
-                const section = masterColumn.sections[span.sectionStart];
-                if (section) {
-                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
-                    const totalWidth = subColumnWidth * (span.subColumnEnd - span.subColumnStart + 1);
-                    spannedWidthCache.set(key, totalWidth);
-                    return totalWidth;
-                }
-            }
-            spannedWidthCache.set(key, 0);
-            return 0;
+        else {
+            relations.push(createNothingToOneRelation({
+                currentRound: preFinalLowerRound,
+                nextRound: finalLowerRound,
+            }));
         }
-        let totalWidth = 0;
-        for (let mcIdx = span.masterColumnStart; mcIdx <= span.masterColumnEnd; mcIdx++) {
-            const masterColumn = masterColumns[mcIdx];
-            if (!masterColumn)
-                continue;
-            if (mcIdx === span.masterColumnStart) {
-                const section = masterColumn.sections[span.sectionStart];
-                if (section) {
-                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
-                    totalWidth += subColumnWidth * (section.subColumns.length - span.subColumnStart);
-                }
-            }
-            else if (mcIdx === span.masterColumnEnd) {
-                const section = masterColumn.sections[span.sectionEnd];
-                if (section) {
-                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
-                    totalWidth += subColumnWidth * (span.subColumnEnd + 1);
-                }
-            }
-            else {
-                totalWidth += masterColumn.dimensions.width;
-            }
+    }
+    else {
+        if (!previousLowerRound)
+            throw new Error('previousLowerRound is null');
+        relations.push(createOneToOneRelation({
+            currentRound: finalLowerRound,
+            previousRound: previousLowerRound,
+            nextRound: currentUpperRound,
+            rootRound: firstLowerRound,
+        }));
+    }
+};
+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;
+    if (currentLowerRound && nextLowerRound) {
+        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) {
+        relations.push(createOneToOneRelation({
+            currentRound: currentLowerRound,
+            previousRound: previousLowerRound,
+            nextRound: nextLowerRound,
+            rootRound: firstLowerRound,
+        }));
+    }
+};
+const generateRoundRelationsNew = (bracketData) => {
+    const relations = [];
+    const allRounds = [...bracketData.rounds.values()];
+    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 firstUpperRound = upperRounds[0];
+    const firstLowerRound = lowerRounds[0] || null;
+    const lastLowerRound = lowerRounds[lowerRounds.length - 1] || null;
+    if (!firstUpperRound)
+        throw new Error('No upper rounds found');
+    const hasLowerRounds = lowerRounds.length > 0;
+    for (const [currentUpperRoundIndex] of upperRounds.entries()) {
+        const nav = getNavigationContext({
+            upperRounds,
+            currentUpperRoundIndex,
+        });
+        if (nav.isFinal && hasLowerRounds && lastLowerRound && firstLowerRound && nav.previousUpperRound) {
+            handleFinalRound({
+                relations,
+                currentUpperRound: nav.currentUpperRound,
+                previousUpperRound: nav.previousUpperRound,
+                nextUpperRound: nav.nextUpperRound,
+                lowerRounds,
+                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,
+                currentUpperRoundIndex,
+            });
+        }
+        else if (nav.previousUpperRound && nav.nextUpperRound) {
+            handleRegularRound({
+                relations,
+                currentUpperRound: nav.currentUpperRound,
+                previousUpperRound: nav.previousUpperRound,
+                nextUpperRound: nav.nextUpperRound,
+                lowerRounds,
+                currentUpperRoundIndex,
+                firstUpperRound,
+                firstLowerRound,
+            });
+        }
+    }
+    return relations;
+};
+
+const createNewBracket = (source, options) => {
+    const bracketNewBase = createNewBracketBase(source, options);
+    const rounds = new BracketMap();
+    const roundsByType = new BracketMap();
+    for (const roundBase of bracketNewBase.rounds.values()) {
+        const newRound = {
+            ...roundBase,
+            matches: new BracketMap(),
+            relation: { type: 'dummy' },
+        };
+        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 newMatch = {
+            ...matchBase,
+            home: homeParticipant,
+            away: awayParticipant,
+            winner: null,
+            round,
+            relation: { type: 'dummy' },
+        };
+        if (matchBase.winner) {
+            const winnerParticipant = homeParticipant?.id === matchBase.winner.id ? homeParticipant : awayParticipant;
+            if (!winnerParticipant)
+                throw new Error(`Winner participant with id ${matchBase.winner.id} not found in match base`);
+            newMatch.winner = winnerParticipant;
         }
-        spannedWidthCache.set(key, totalWidth);
-        return totalWidth;
-    };
-    const calculateSpanStartLeft = (span, masterColumns) => {
-        const key = `${span.masterColumnStart}-${span.sectionStart}-${span.subColumnStart}`;
-        if (spanStartLeftCache.has(key))
-            return spanStartLeftCache.get(key);
-        const startMasterColumn = masterColumns[span.masterColumnStart];
-        if (!startMasterColumn) {
-            spanStartLeftCache.set(key, 0);
-            return 0;
+        matches.set(matchBase.id, newMatch);
+        round.matches.set(matchBase.id, newMatch);
+        if (homeParticipant) {
+            const participant = participants.getOrThrow(homeParticipant.id);
+            participant.matches.set(matchBase.id, {
+                ...newMatch,
+                me: homeParticipant,
+                opponent: awayParticipant,
+            });
         }
-        let startLeft = startMasterColumn.dimensions.left;
-        const section = startMasterColumn.sections[span.sectionStart];
-        if (section) {
-            startLeft += (section.dimensions.width / section.subColumns.length) * span.subColumnStart;
+        if (awayParticipant) {
+            const participant = participants.getOrThrow(awayParticipant.id);
+            participant.matches.set(matchBase.id, {
+                ...newMatch,
+                me: awayParticipant,
+                opponent: homeParticipant,
+            });
         }
-        spanStartLeftCache.set(key, startLeft);
-        return startLeft;
-    };
-    const setupElementSpans = () => {
-        const masterCols = newGrid.masterColumns;
-        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
-            const masterColumn = masterCols[mcIdx];
-            const sections = masterColumn.sections;
-            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
-                const section = sections[secIdx];
-                const subColumns = section.subColumns;
-                for (let scIdx = 0; scIdx < subColumns.length; scIdx++) {
-                    const subColumn = subColumns[scIdx];
-                    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 (let elIdx = 0; elIdx < elements.length; elIdx++) {
-                        elements[elIdx].span = {
-                            masterColumnStart: spanStart.masterColumnIndex,
-                            masterColumnEnd: spanEnd.masterColumnIndex,
-                            sectionStart: spanStart.sectionIndex,
-                            sectionEnd: spanEnd.sectionIndex,
-                            subColumnStart: spanStart.subColumnIndex,
-                            subColumnEnd: spanEnd.subColumnIndex,
-                        };
-                    }
-                }
-            }
+    }
+    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;
         }
+    }
+    const newBracket = {
+        matches,
+        participants,
+        rounds,
+        roundsByType,
+        mode: bracketNewBase.mode,
     };
-    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 } = config;
-    const subColumns = [];
-    const newMasterColumnSection = {
-        dimensions: {
-            width: 0,
-            height: 0,
-            top: 0,
-            left: 0,
-        },
-        subColumns,
-        type,
-    };
-    const pushSubColumn = (...newSubColumns) => {
-        subColumns.push(...newSubColumns);
-    };
-    return {
-        masterColumnSection: newMasterColumnSection,
-        pushSubColumn,
-    };
+    const roundRelations = generateRoundRelationsNew(newBracket);
+    for (const roundRelation of roundRelations) {
+        roundRelation.currentRound.relation = roundRelation;
+    }
+    const matchRelations = generateMatchRelationsNew(newBracket);
+    for (const matchRelation of matchRelations) {
+        matchRelation.currentMatch.relation = matchRelation;
+    }
+    return newBracket;
 };
 
-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 pad = (str, len) => str.padEnd(len, ' ');
+const color = (str, code) => `\x1b[${code}m${str}\x1b[0m`;
+const roundColor = (str) => color(str, 36); // cyan
+const arrowColor = (str) => color(str, 90); // gray
+const labelColor = (str) => color(str, 33); // yellow
+const factorColor = (str) => color(str, 32); // green
+const logRoundRelations = (bracketData) => {
+    // Find max round name length for alignment
+    let maxNameLen = 0;
+    for (const round of bracketData.rounds.values()) {
+        maxNameLen = Math.max(maxNameLen, round.name.length);
+    }
+    const colWidth = maxNameLen + 2;
+    // Build rows
+    const rows = [];
+    for (const round of bracketData.rounds.values()) {
+        const relation = round.relation;
+        switch (relation.type) {
+            case 'nothing-to-one':
+                rows.push([
+                    labelColor(pad('START', colWidth)),
+                    arrowColor('──▶'),
+                    roundColor(pad(round.name, colWidth)),
+                    arrowColor('──▶'),
+                    roundColor(pad(relation.nextRound.name, colWidth)),
+                    factorColor(`[${relation.nextRoundMatchFactor}]`),
+                ]);
+                break;
+            case 'one-to-nothing':
+                rows.push([
+                    roundColor(pad(relation.previousRound.name, colWidth)),
+                    arrowColor('──▶'),
+                    roundColor(pad(round.name, colWidth)),
+                    arrowColor('──▶'),
+                    labelColor(pad('END', colWidth)),
+                    factorColor(`[${relation.previousRoundMatchFactor}]`),
+                ]);
+                break;
+            case 'one-to-one':
+                rows.push([
+                    roundColor(pad(relation.previousRound.name, colWidth)),
+                    arrowColor('──▶'),
+                    roundColor(pad(round.name, colWidth)),
+                    arrowColor('──▶'),
+                    roundColor(pad(relation.nextRound.name, colWidth)),
+                    factorColor(`[Prev: ${relation.previousRoundMatchFactor}, Next: ${relation.nextRoundMatchFactor}]`),
+                ]);
+                break;
+            case 'two-to-one':
+                rows.push([
+                    roundColor(pad(relation.previousUpperRound.name, colWidth)),
+                    arrowColor(' │ '),
+                    roundColor(pad(relation.previousLowerRound.name, colWidth)),
+                    arrowColor('──▶'),
+                    roundColor(pad(round.name, colWidth)),
+                    arrowColor('──▶'),
+                    roundColor(pad(relation.nextRound.name, colWidth)),
+                    factorColor(`[Upper: ${relation.previousUpperRoundMatchFactor}, Lower: ${relation.previousLowerRoundMatchFactor}, Next: ${relation.nextRoundMatchFactor}]`),
+                ]);
+                break;
+            case 'two-to-nothing':
+                rows.push([
+                    roundColor(pad(relation.previousUpperRound.name, colWidth)),
+                    arrowColor('   │'),
+                    roundColor(pad(relation.previousLowerRound.name, colWidth)),
+                    arrowColor('   ▼'),
+                    roundColor(pad(round.name, colWidth)),
+                    arrowColor('──▶'),
+                    labelColor(pad('END', colWidth)),
+                    factorColor(`[Upper: ${relation.previousUpperRoundMatchFactor}, Lower: ${relation.previousLowerRoundMatchFactor}]`),
+                ]);
+                break;
+        }
+    }
+    // Print header
+    const divider = (label) => {
+        // eslint-disable-next-line no-control-regex
+        const width = rows[0]?.reduce((w, col) => w + col.replace(/\x1b\[[0-9;]*m/g, '').length + 2, 0) || 60;
+        return `\n${'='.repeat(width)}\n${labelColor(label)}\n${'='.repeat(width)}\n`;
     };
+    console.log(divider('Bracket Structure'));
+    // Print rows
+    for (const row of rows) {
+        console.log(row.join(' '));
+    }
+    console.log();
 };
 
-function logGridAreasFormatted(gridTemplateAreas) {
-    if (!gridTemplateAreas) {
-        console.log('No grid areas to display');
-        return;
-    }
-    // Parse the grid template areas string
-    const rows = gridTemplateAreas
-        .split('\n')
-        .map((row) => row.replace(/^"/, '').replace(/"$/, '')) // Remove quotes
-        .map((row) => row.split(' ')); // Split into individual areas
-    if (rows.length === 0) {
-        console.log('No grid areas to display');
-        return;
+const factorialCache = new Map();
+const getAvailableSwissGroupsForRound = (roundNumber, totalMatchesInRound) => {
+    const ADVANCE_WINS = 3;
+    const ELIMINATE_LOSSES = 3;
+    // Cache factorial calculations
+    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;
+    };
+    // Pre-calculate roundFactorial
+    const roundFactorial = getFactorial(roundNumber);
+    let totalCombinations = 0;
+    const validGroups = [];
+    // Single loop to gather valid groups and total combinations
+    for (let wins = roundNumber; wins >= 0; wins--) {
+        const losses = roundNumber - wins;
+        const remainingGames = ADVANCE_WINS + ELIMINATE_LOSSES - (wins + losses) - 1;
+        const notYetEliminated = losses < ELIMINATE_LOSSES;
+        const canStillAdvance = wins < ADVANCE_WINS && remainingGames >= 0;
+        if (!canStillAdvance || !notYetEliminated)
+            continue;
+        const combinations = roundFactorial / (getFactorial(wins) * getFactorial(losses));
+        totalCombinations += combinations;
+        validGroups.push({ wins, losses, combinations });
     }
-    // Find the maximum width for each column to align properly
-    const columnCount = rows[0]?.length ?? 0;
-    const columnWidths = [];
-    for (let colIndex = 0; colIndex < columnCount; colIndex++) {
-        const maxWidth = Math.max(...rows.map((row) => (row[colIndex] || '').length));
-        columnWidths.push(Math.max(maxWidth, 3)); // Minimum width of 3
+    // Create final groups with calculated proportions
+    return validGroups.map(({ wins, losses, combinations }) => ({
+        id: `${wins}-${losses}`,
+        name: `${wins}-${losses}`,
+        matchesInGroup: Math.round((combinations / totalCombinations) * totalMatchesInRound),
+    }));
+};
+const generateBracketRoundSwissGroupMaps = (bracketData) => {
+    if (bracketData.mode !== TOURNAMENT_MODE.SWISS_WITH_ELIMINATION) {
+        return null;
     }
-    console.log('\n📋 Grid Template Areas (Formatted):');
-    console.log('═'.repeat(columnWidths.reduce((sum, width) => sum + width + 3, 0)));
-    // Log each row with proper spacing
-    rows.forEach((row, rowIndex) => {
-        const formattedRow = row
-            .map((area, colIndex) => {
-            const width = columnWidths[colIndex] ?? 0;
-            return area.padEnd(width);
-        })
-            .join(' | ');
-        console.log(`${String(rowIndex).padStart(2, '0')}: ${formattedRow}`);
-    });
-    console.log('═'.repeat(columnWidths.reduce((sum, width) => sum + width + 3, 0)));
-    console.log(`📊 Grid dimensions: ${rows.length} rows × ${columnCount} columns\n`);
-}
-function gridColumnsToGridProperty(grid) {
-    if (!grid.length) {
-        return {
-            gridTemplateAreas: '',
-            gridTemplateRows: '',
-            gridTemplateColumns: '',
+    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(),
         };
-    }
-    // Calculate the total number of columns (subcolumns across all master columns)
-    const totalColumns = grid.reduce((total, masterColumn) => {
-        return total + Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
-    }, 0);
-    // Find all unique sections across all master columns to determine rows
-    const allSections = [];
-    grid.forEach((masterColumn, masterColumnIndex) => {
-        masterColumn.sections.forEach((section, sectionIndex) => {
-            // For each section, we need to process all its subcolumns
-            section.subColumns.forEach((subColumn) => {
-                allSections.push({
-                    elements: subColumn.elements,
-                    sectionIndex,
-                    masterColumnIndex,
-                });
-            });
-        });
-    });
-    // Group sections by their index to create rows
-    const sectionsByIndex = new Map();
-    let globalColumnIndex = 0;
-    grid.forEach((masterColumn, masterColumnIndex) => {
-        const maxSubColumns = Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
-        masterColumn.sections.forEach((section, sectionIndex) => {
-            if (!sectionsByIndex.has(sectionIndex)) {
-                sectionsByIndex.set(sectionIndex, []);
+        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;
             }
-            section.subColumns.forEach((subColumn, subColumnIndex) => {
-                sectionsByIndex.get(sectionIndex).push({
-                    elements: subColumn.elements,
-                    columnIndex: globalColumnIndex + subColumnIndex,
-                    masterColumnIndex,
-                });
-            });
-        });
-        globalColumnIndex += maxSubColumns;
-    });
-    // Build the grid matrix - sections become rows, subcolumns become columns
-    const areaMatrix = [];
-    const rowHeights = [];
-    // Process each section (which becomes a row group)
-    for (const [sectionIndex, sectionColumns] of sectionsByIndex.entries()) {
-        // Find max rows needed for this section
-        const maxRowsInSection = Math.max(...sectionColumns.map((col) => col.elements.reduce((total, element) => total + element.parts.length, 0)), 0);
-        // Create rows for this section
-        for (let rowIndex = 0; rowIndex < maxRowsInSection; rowIndex++) {
-            const areaRow = new Array(totalColumns).fill('.');
-            let currentRowHeight;
-            // Fill in areas for each column in this section
-            for (const sectionColumn of sectionColumns) {
-                let accumulatedRows = 0;
-                let area = '.';
-                let height;
-                // Find which element this row belongs to
-                for (const element of sectionColumn.elements) {
-                    const elementRowCount = element.parts.length;
-                    if (rowIndex >= accumulatedRows && rowIndex < accumulatedRows + elementRowCount) {
-                        const relativeRowIndex = rowIndex - accumulatedRows;
-                        area = element.area;
-                        height = element.parts[relativeRowIndex]?.dimensions.height;
-                        break;
-                    }
-                    accumulatedRows += elementRowCount;
-                }
-                areaRow[sectionColumn.columnIndex] = area;
-                // Use the first defined height for this row
-                if (!currentRowHeight && height !== undefined) {
-                    currentRowHeight = `${height}px`;
+            const wins = anyParticipant.winCount;
+            const losses = anyParticipant.lossCount;
+            const group = roundSwissData.groups.get(`${wins}-${losses}`);
+            if (!group)
+                throw new Error('Group not found for match: ' + match.id);
+            group.matches.set(match.id, match);
+        }
+        for (const emptyMatchId of emptyMatchIds) {
+            const match = bracketRound.matches.getOrThrow(emptyMatchId);
+            let groupFound = false;
+            for (const group of roundSwissData.groups.values()) {
+                if (group.matches.size < group.allowedMatchCount) {
+                    group.matches.set(match.id, match);
+                    groupFound = true;
+                    break;
                 }
             }
-            areaMatrix.push(areaRow);
-            rowHeights.push(currentRowHeight ?? 'auto');
+            if (!groupFound) {
+                throw new Error('No group found for empty match');
+            }
         }
+        roundsWithSwissGroups.set(bracketRound.id, roundSwissData);
+        roundNumber++;
     }
-    // Calculate column widths
-    const columnWidths = [];
-    for (const masterColumn of grid) {
-        const maxSubColumns = Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
-        for (let i = 0; i < maxSubColumns; i++) {
-            // Find the width from any section that has this subcolumn
-            const subColumnWidth = masterColumn.sections.find((section) => section.subColumns[i])?.subColumns[i]?.dimensions.width ?? 0;
-            columnWidths.push(`${subColumnWidth}px`);
-        }
+    return roundsWithSwissGroups;
+};
+
+class NewBracketDefaultMatchComponent {
+    constructor() {
+        this.bracketRound = input.required(...(ngDevMode ? [{ debugName: "bracketRound" }] : []));
+        this.bracketMatch = input.required(...(ngDevMode ? [{ debugName: "bracketMatch" }] : []));
+        this.bracketRoundSwissGroup = input.required(...(ngDevMode ? [{ debugName: "bracketRoundSwissGroup" }] : []));
     }
-    // Build the CSS properties
-    const gridTemplateAreas = areaMatrix.map((row) => `"${row.join(' ')}"`).join('\n');
-    const gridTemplateRows = rowHeights.join(' ');
-    const gridTemplateColumns = columnWidths.join(' ');
-    const result = {
-        gridTemplateAreas,
-        gridTemplateRows,
-        gridTemplateColumns,
-    };
-    // logGridAreasFormatted(gridTemplateAreas);
-    return result;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultMatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: NewBracketDefaultMatchComponent, isStandalone: true, selector: "et-new-bracket-default-match", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null }, bracketMatch: { classPropertyName: "bracketMatch", publicName: "bracketMatch", isSignal: true, isRequired: true, transformFunction: null }, bracketRoundSwissGroup: { classPropertyName: "bracketRoundSwissGroup", publicName: "bracketRoundSwissGroup", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-match-host" }, ngImport: i0, template: ` {{ bracketMatch().id }} `, isInline: true, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-
-const calculateUpperLowerRatio = (upperRoundsCount, lowerRoundsCount) => {
-    // In double elimination, after the first aligned column,
-    // we need to distribute the remaining upper rounds across the remaining lower rounds
-    const remainingUpperRounds = upperRoundsCount - 1; // Subtract the first round
-    const remainingLowerRounds = lowerRoundsCount - 1; // Subtract the first round
-    if (remainingUpperRounds === 0) {
-        return 1; // Edge case: only one upper round
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultMatchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-new-bracket-default-match', template: ` {{ bracketMatch().id }} `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-new-bracket-default-match-host',
+                    }, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"] }]
+        }] });
+
+class NewBracketDefaultRoundHeaderComponent {
+    constructor() {
+        this.bracketRound = input.required(...(ngDevMode ? [{ debugName: "bracketRound" }] : []));
+        this.bracketRoundSwissGroup = input.required(...(ngDevMode ? [{ debugName: "bracketRoundSwissGroup" }] : []));
     }
-    return remainingLowerRounds / remainingUpperRounds;
-};
-const calculateColumnSplitFactor = (upperToLowerRatio) => {
-    // The split factor determines how many sub-columns each match column will have
-    // For example, if the ratio is 1.5, we split each match column
-    // into 2 sub-columns so that matches can be centered correctly
-    if (upperToLowerRatio === 1.5) {
-        return 2; // Split into 2 sub-columns for 1.5 ratio
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultRoundHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NewBracketDefaultRoundHeaderComponent, isStandalone: true, selector: "et-new-bracket-default-round-header", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null }, bracketRoundSwissGroup: { classPropertyName: "bracketRoundSwissGroup", publicName: "bracketRoundSwissGroup", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-round-header-host" }, ngImport: i0, template: `
+    {{ bracketRound().name }}
+
+    @if (bracketRoundSwissGroup()) {
+      ({{ bracketRoundSwissGroup()?.name }})
     }
-    if (upperToLowerRatio === 2) {
-        return 1; // Split into 1 sub-columns for 2 ratio
+  `, isInline: true, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NewBracketDefaultRoundHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-new-bracket-default-round-header', template: `
+    {{ bracketRound().name }}
+
+    @if (bracketRoundSwissGroup()) {
+      ({{ bracketRoundSwissGroup()?.name }})
     }
-    return 1;
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-new-bracket-default-round-header-host',
+                    }, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"] }]
+        }] });
+
+const path = (d, options) => `<path d="${d.replace(/\s+/g, ' ').trim()}" stroke="currentColor" fill="none" stroke-width="${options.width}" stroke-dasharray="${options.dashArray}" stroke-dashoffset="${options.dashOffset}" class="${options.className}" />`;
+
+const curvePath = (from, to, direction, options) => {
+    const inverted = options.inverted ?? false;
+    // Inline/block coordinates depending on direction and inversion
+    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;
+    // Curve parameters
+    const startCurve = options.lineStartingCurveAmount;
+    const endCurve = options.lineEndingCurveAmount;
+    const totalInline = Math.abs(toInline - fromInline);
+    const straightLength = (totalInline - startCurve - endCurve) / 2;
+    // Calculate key points for the path
+    const straightEnd = inverted ? fromInline - straightLength : fromInline + straightLength;
+    const straightStart = inverted ? toInline + straightLength : toInline - straightLength;
+    // First curve (from start)
+    const firstCurveEndX = inverted ? straightEnd - startCurve : straightEnd + startCurve;
+    const firstCurveEndY = direction === 'down' ? fromBlock + startCurve : fromBlock - startCurve;
+    // Second curve (to end)
+    const secondCurveStartY = direction === 'down' ? toBlock - endCurve : toBlock + endCurve;
+    const secondCurveEndX = straightStart;
+    const secondCurveEndY = toBlock;
+    const secondCurveBezierX = inverted ? straightStart + endCurve : straightStart - endCurve;
+    // SVG path string
+    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 calculateLowerRoundIndex = (subColumnIndex, splitFactor) => Math.floor(subColumnIndex / splitFactor);
-const calculateUpperRoundIndex = (subColumnIndex, upperToLowerRatio, splitFactor) => {
-    // Calculate which complete column we're in
-    const completeColumnIndex = Math.floor(subColumnIndex / splitFactor);
-    // For the first complete column (index 0), always use the first upper round (index 0)
-    if (completeColumnIndex === 0) {
-        return 0;
-    }
-    // For subsequent columns, map based on the ratio
-    // We subtract 1 because the first column is handled separately
-    const adjustedColumnIndex = completeColumnIndex - 1;
-    // Calculate which upper round this column should use
-    // We add 1 because we start from the second upper round (index 1)
-    return Math.floor(adjustedColumnIndex / upperToLowerRatio) + 1;
+
+const linePath = (from, to, options) => {
+    return path(`M ${from.inline.end} ${from.block.center} L ${to.inline.start} ${to.block.center}`, options.path);
 };
 
-const createBracketGapMasterColumn = (config) => {
-    const { existingMasterColumns, columnGap } = config;
-    const lastMasterColumn = existingMasterColumns[existingMasterColumns.length - 1];
-    if (!lastMasterColumn) {
-        throw new Error('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',
-        });
-        const lastSubColumn = section.subColumns[section.subColumns.length - 1];
-        if (!lastSubColumn) {
-            throw new Error('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,
-                        };
+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,
+    },
+});
+const drawMan = (dimensions) => {
+    const svgParts = [];
+    for (const col of dimensions.bracketGrid.columns) {
+        for (const el of col.elements) {
+            if (el.type === 'header')
+                continue;
+            const currentMatchParticipantsShortIds = [el.match.home?.shortId, el.match.away?.shortId]
+                .filter((id) => !!id)
+                .join(' ');
+            const pathOptions = { ...dimensions.path, className: currentMatchParticipantsShortIds };
+            const currentPos = makePos(el.dimensions);
+            // No lines for the third place match
+            if (el.round.type === COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE)
+                continue;
+            switch (el.match.relation.type) {
+                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);
+                    // draw a straight line
+                    svgParts.push(linePath(prevPos, currentPos, { path: pathOptions }));
+                    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 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, className: '' },
+                    };
+                    if (isLowerUpperMerger) {
+                        svgParts.push(linePath(prevUpperPos, currentPos, { path: pathOptions }));
                     }
-                    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,
-                        };
+                    else {
+                        // draw two lines that merge into one in the middle
+                        svgParts.push(curvePath(prevUpperPos, currentPos, 'down', {
+                            ...curveOptions,
+                            path: {
+                                ...curveOptions.path,
+                                className: el.match.relation.previousUpperMatch.winner?.shortId || '',
+                            },
+                        }));
+                    }
+                    svgParts.push(curvePath(prevLowerPos, currentPos, 'up', {
+                        ...curveOptions,
+                        path: {
+                            ...curveOptions.path,
+                            className: el.match.relation.previousLowerMatch.winner?.shortId || '',
+                        },
+                    }));
+                    if (el.round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT &&
+                        el.match.relation.type === 'two-to-one' &&
+                        el.match.relation.nextRound.mirrorRoundType === null) {
+                        // draw a straight line for the special case of connecting the final match to the mirrored semi final match
+                        const next = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.nextMatch.id);
+                        const nextPos = makePos(next.dimensions);
+                        svgParts.push(linePath(nextPos, currentPos, { path: pathOptions }));
+                    }
+                    break;
                 }
-                return {
-                    area: `.`,
-                    type: 'colGap',
-                    elementHeight: lastSubColumnElement.dimensions.height,
-                    partHeights,
-                };
-            })();
-            pushElement(createBracketElement(elementToCreate).element);
+            }
         }
-        pushSubColumn(subColumn);
-        pushSection(masterColumnSection);
     }
-    return masterColumn;
+    return svgParts.join('');
+};
+
+const createBracketElementPart = (config) => {
+    const { elementPartHeight } = config;
+    const newElementPart = {
+        dimensions: {
+            width: 0,
+            height: elementPartHeight,
+            top: 0,
+            left: 0,
+        },
+    };
+    return {
+        elementPart: newElementPart,
+    };
 };
 
-const createRoundBracketSubColumnRelativeToFirstRound = (config) => {
-    const { firstRound, round, options, span, hasReverseFinal } = config;
-    const { subColumn, pushElement } = createBracketSubColumn({
-        span,
-    });
-    const matchFactor = firstRound.matchCount / round.matchCount;
-    const matches = Array.from(round.matches.values());
-    const elementsToCreate = [];
-    // Only include a header row if headers exist
-    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: [options.roundHeaderGap],
-            elementHeight: options.roundHeaderGap,
-        });
-    }
-    // Add match elements to create
-    for (const [matchIndex, match] of matches.entries()) {
-        const isLastMatch = matchIndex === matches.length - 1;
-        const matchRows = [];
-        for (let factorIndex = 0; factorIndex < matchFactor; factorIndex++) {
-            const isLastFactor = factorIndex === matchFactor - 1;
-            // Add the match height
-            matchRows.push(options.matchHeight);
-            if (isLastFactor)
-                continue;
-            // Add gap between match factors (except after the last one)
-            matchRows.push(options.rowGap);
+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,
+                };
+            default:
+                throw new Error(`Unknown element type: ${type}`);
         }
-        const isFinalMatch = hasReverseFinal
-            ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
-            : round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
-        elementsToCreate.push({
-            type: 'match',
-            area: `m${match.shortId}`,
-            partHeights: matchRows,
-            elementHeight: isFinalMatch ? options.finalMatchHeight : options.matchHeight,
-            component: isFinalMatch ? config.components.finalMatch : config.components.match,
-            match,
-            round,
-            roundSwissGroup: null,
+    })();
+    const pushPart = (...newParts) => {
+        parts.push(...newParts);
+    };
+    for (const partHeight of partHeights) {
+        const { elementPart } = createBracketElementPart({
+            elementPartHeight: partHeight,
         });
-        if (!isLastMatch) {
-            elementsToCreate.push({
-                type: 'matchGap',
-                area: '.',
-                partHeights: [options.rowGap],
-                elementHeight: options.rowGap,
-            });
-        }
-    }
-    // Create all elements at once
-    for (const elementData of elementsToCreate) {
-        const { element } = createBracketElement(elementData);
-        pushElement(element);
+        pushPart(elementPart);
     }
-    return subColumn;
+    return {
+        element: newElement,
+    };
 };
 
-const createDoubleEliminationGrid = (bracketData, options, components) => {
-    const grid = createBracketGrid({ spanElementWidth: options.columnWidth });
-    const upperBracketRounds = Array.from(bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET).values());
-    const lowerBracketRounds = Array.from(bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET).values());
-    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 = upperBracketRounds[0];
-    const firstLowerRound = lowerBracketRounds[0];
-    if (!firstUpperRound || !firstLowerRound) {
-        throw new Error('No upper or lower rounds found in bracket data');
-    }
-    const upperToLowerRatio = calculateUpperLowerRatio(upperBracketRounds.length, lowerBracketRounds.length);
-    const columnSplitFactor = calculateColumnSplitFactor(upperToLowerRatio);
-    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);
-            const upperRound = upperBracketRounds[currentUpperRoundIndex];
-            if (!upperRound) {
-                throw new Error('Upper round not found for subColumnIndex: ' + subColumnIndex);
+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;
             }
-            // For upper bracket spans - check if this round is different from the previous occurrence
-            const isUpperSpanStart = isFirstSubColumnInMasterColumn
-                ? lowerRoundIndex === 0 || lastRoundLastSubColumnUpperIndex !== currentUpperRoundIndex
-                : previousUpperRoundIndex !== currentUpperRoundIndex;
-            // For upper bracket spans - check if this round will be different in the next occurrence
-            const isUpperSpanEnd = isLastSubColumnInMasterColumn
-                ? isLastLowerRound ||
-                    calculateUpperRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, upperToLowerRatio, columnSplitFactor) !==
-                        currentUpperRoundIndex
-                : nextUpperRoundIndex !== currentUpperRoundIndex;
-            // For lower bracket spans - similar logic
-            const isLowerSpanStart = isFirstSubColumnInMasterColumn
-                ? lowerRoundIndex === 0 || lastRoundLastSubColumnLowerIndex !== currentLowerRoundIndex
-                : previousLowerRoundIndex !== currentLowerRoundIndex;
-            const isLowerSpanEnd = isLastSubColumnInMasterColumn
-                ? isLastLowerRound ||
-                    calculateLowerRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, columnSplitFactor) !==
-                        currentLowerRoundIndex
-                : nextLowerRoundIndex !== currentLowerRoundIndex;
-            const upperSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
-                firstRound: firstUpperRound,
-                round: upperRound,
-                options,
-                hasReverseFinal,
-                span: {
-                    isStart: isUpperSpanStart,
-                    isEnd: isUpperSpanEnd,
-                },
-                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.element);
-            pushUpperLowerSubColumn(upperLowerGapSubColumn.subColumn);
-            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
-                firstRound: firstLowerRound,
-                round: lowerRound,
-                options,
-                hasReverseFinal,
-                span: {
-                    isStart: isLowerSpanStart,
-                    isEnd: isLowerSpanEnd,
+            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);
+                }
+            }
+            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,
                 },
-                components,
+                elements,
             });
-            pushLowerSubColumn(lowerSubColumn);
-            if (isLastSubColumnInMasterColumn) {
-                lastRoundLastSubColumnUpperIndex = currentUpperRoundIndex;
-                lastRoundLastSubColumnLowerIndex = currentLowerRoundIndex;
+        }
+    }
+    return {
+        columns: finalizedColumns,
+        elementMap: finalizedElementMap,
+    };
+};
+
+const createBracketGrid = (config) => {
+    const masterColumns = [];
+    const spannedWidthCache = new Map();
+    const spanStartLeftCache = new Map();
+    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 (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
+            const masterColumn = masterCols[mcIdx];
+            const { padding } = masterColumn;
+            masterColumn.dimensions.left = currentMasterColumnLeft;
+            masterColumn.dimensions.top = 0;
+            masterColumn.dimensions.width += padding.left + padding.right;
+            const sections = masterColumn.sections;
+            let runningTop = 0;
+            let firstSectionIsHeader = false;
+            if (sections.length > 0) {
+                const firstSubColumn = sections[0].subColumns[0];
+                const firstElement = firstSubColumn?.elements[0];
+                firstSectionIsHeader = !!(firstElement && firstElement.type === 'header');
+            }
+            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
+                const section = sections[secIdx];
+                let sectionPaddingTop;
+                if (secIdx === 0) {
+                    sectionPaddingTop = firstSectionIsHeader ? 0 : padding.top;
+                }
+                else {
+                    sectionPaddingTop = padding.top;
+                }
+                section.dimensions.width = masterColumn.dimensions.width;
+                section.dimensions.left = masterColumn.dimensions.left;
+                section.dimensions.top = runningTop;
+                runningTop += sectionPaddingTop;
+                const contentWidth = masterColumn.dimensions.width - padding.left - padding.right;
+                const subColumns = section.subColumns;
+                const totalSubColumns = subColumns.length;
+                const subColumnWidth = contentWidth / totalSubColumns;
+                let currentSubColumnLeft = masterColumn.dimensions.left + padding.left;
+                let maxSectionHeight = 0;
+                for (let scIdx = 0; scIdx < totalSubColumns; scIdx++) {
+                    const subColumn = subColumns[scIdx];
+                    subColumn.dimensions.width = subColumnWidth;
+                    subColumn.dimensions.left = currentSubColumnLeft;
+                    // TODO: The problem is here somewhere
+                    subColumn.dimensions.top = section.dimensions.top + sectionPaddingTop;
+                    let totalSubColumnHeight = 0;
+                    const elements = subColumn.elements;
+                    for (let elIdx = 0; elIdx < elements.length; elIdx++) {
+                        const element = elements[elIdx];
+                        let totalElementHeight = 0;
+                        const parts = element.parts;
+                        for (let pIdx = 0; pIdx < parts.length; pIdx++) {
+                            const part = parts[pIdx];
+                            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;
+                }
+                section.dimensions.height = maxSectionHeight + padding.bottom;
+                runningTop += maxSectionHeight + padding.bottom;
             }
+            masterColumn.dimensions.height = runningTop;
+            if (masterColumn.dimensions.height > maxGridHeight)
+                maxGridHeight = masterColumn.dimensions.height;
+            currentMasterColumnLeft += masterColumn.dimensions.width;
         }
-        pushSection(upperSection, upperLowerGapSection, lowerSection);
-        grid.pushMasterColumn(masterColumn);
-        if (remainingRounds.length) {
-            grid.pushMasterColumn(createBracketGapMasterColumn({
-                existingMasterColumns: grid.grid.masterColumns,
-                columnGap: options.columnGap,
-            }));
+        newGrid.dimensions.width = currentMasterColumnLeft;
+        newGrid.dimensions.height = maxGridHeight;
+        calculateSpanningElementDimensions();
+    };
+    const calculateSpanningElementDimensions = () => {
+        const spanDimensions = new Map();
+        const masterCols = newGrid.masterColumns;
+        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
+            const masterColumn = masterCols[mcIdx];
+            const sections = masterColumn.sections;
+            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
+                const section = sections[secIdx];
+                const subColumns = section.subColumns;
+                for (let scIdx = 0; scIdx < subColumns.length; scIdx++) {
+                    const subColumn = subColumns[scIdx];
+                    const elements = subColumn.elements;
+                    for (let elIdx = 0; elIdx < elements.length; elIdx++) {
+                        const element = elements[elIdx];
+                        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 totalSpannedWidth = calculateSpannedWidth(span, masterCols);
+                            const spanStartLeft = calculateSpanStartLeft(span, masterCols);
+                            const width = config.spanElementWidth;
+                            spanDimensions.set(spanKey, { width, left: spanStartLeft + (totalSpannedWidth - width) * 0.5 });
+                        }
+                        const storedDimensions = spanDimensions.get(spanKey);
+                        if (storedDimensions) {
+                            element.dimensions.width = storedDimensions.width;
+                            element.dimensions.left = storedDimensions.left;
+                            element.isHidden = !isStartPosition;
+                        }
+                    }
+                }
+            }
         }
-    }
-    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,
-            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.element);
-        pushUpperLowerSubColumn(upperLowerGapSubColumn.subColumn);
-        if (thirdPlaceRound) {
-            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
-                firstRound: firstLowerRound,
-                round: thirdPlaceRound,
-                options,
-                hasReverseFinal,
-                span: {
-                    isStart: isFirstRound,
-                    isEnd: isLastRound,
-                },
-                components,
-            });
-            pushLowerSubColumn(lowerSubColumn);
+    };
+    const calculateSpannedWidth = (span, masterColumns) => {
+        const key = `${span.masterColumnStart}-${span.masterColumnEnd}-${span.sectionStart}-${span.sectionEnd}-${span.subColumnStart}-${span.subColumnEnd}`;
+        if (spannedWidthCache.has(key))
+            return spannedWidthCache.get(key);
+        if (span.masterColumnStart === span.masterColumnEnd) {
+            const masterColumn = masterColumns[span.masterColumnStart];
+            if (masterColumn) {
+                const section = masterColumn.sections[span.sectionStart];
+                if (section) {
+                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
+                    const totalWidth = subColumnWidth * (span.subColumnEnd - span.subColumnStart + 1);
+                    spannedWidthCache.set(key, totalWidth);
+                    return totalWidth;
+                }
+            }
+            spannedWidthCache.set(key, 0);
+            return 0;
         }
-        else {
-            const lowerSubColumn = createBracketSubColumn({
-                span: {
-                    isStart: true,
-                    isEnd: true,
-                },
-            });
-            const firstMasterRound = grid.grid.masterColumns[0];
-            if (!firstMasterRound)
-                throw new Error('No first master round found in grid');
-            const lastMasterColumnSection = firstMasterRound.sections[firstMasterRound.sections.length - 1];
-            if (!lastMasterColumnSection)
-                throw new Error('No last master column section found in grid');
-            const firstSubColumn = lastMasterColumnSection.subColumns[0];
-            if (!firstSubColumn)
-                throw new Error('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.element);
+        let totalWidth = 0;
+        for (let mcIdx = span.masterColumnStart; mcIdx <= span.masterColumnEnd; mcIdx++) {
+            const masterColumn = masterColumns[mcIdx];
+            if (!masterColumn)
+                continue;
+            if (mcIdx === span.masterColumnStart) {
+                const section = masterColumn.sections[span.sectionStart];
+                if (section) {
+                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
+                    totalWidth += subColumnWidth * (section.subColumns.length - span.subColumnStart);
+                }
+            }
+            else if (mcIdx === span.masterColumnEnd) {
+                const section = masterColumn.sections[span.sectionEnd];
+                if (section) {
+                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
+                    totalWidth += subColumnWidth * (span.subColumnEnd + 1);
+                }
+            }
+            else {
+                totalWidth += masterColumn.dimensions.width;
             }
-            pushLowerSubColumn(lowerSubColumn.subColumn);
         }
-        pushSection(upperSection, upperLowerGapSection, lowerSection);
-        grid.pushMasterColumn(masterColumn);
-        if (!isLastRound) {
-            grid.pushMasterColumn(createBracketGapMasterColumn({
-                existingMasterColumns: grid.grid.masterColumns,
-                columnGap: options.columnGap,
-            }));
+        spannedWidthCache.set(key, totalWidth);
+        return totalWidth;
+    };
+    const calculateSpanStartLeft = (span, masterColumns) => {
+        const key = `${span.masterColumnStart}-${span.sectionStart}-${span.subColumnStart}`;
+        if (spanStartLeftCache.has(key))
+            return spanStartLeftCache.get(key);
+        const startMasterColumn = masterColumns[span.masterColumnStart];
+        if (!startMasterColumn) {
+            spanStartLeftCache.set(key, 0);
+            return 0;
         }
-    }
-    grid.setupElementSpans();
-    grid.calculateDimensions();
-    const finalizedGrid = finalizeBracketGrid(grid);
-    return {
-        raw: grid,
-        columns: finalizedGrid.columns,
-        matchElementMap: finalizedGrid.elementMap,
+        let startLeft = startMasterColumn.dimensions.left;
+        const section = startMasterColumn.sections[span.sectionStart];
+        if (section) {
+            startLeft += (section.dimensions.width / section.subColumns.length) * span.subColumnStart;
+        }
+        spanStartLeftCache.set(key, startLeft);
+        return startLeft;
     };
-};
-
-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 Error('No rounds found in bracket data');
-    }
-    for (const [roundIndex, round] of rounds.entries()) {
-        const isLastRound = roundIndex === rounds.length - 1;
-        const { masterColumn, ...mutableMasterColumn } = createBracketMasterColumn({
-            columnWidth: round.type === COMMON_BRACKET_ROUND_TYPE.FINAL ? 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,
-            hasReverseFinal: false,
-            span: {
-                isStart: true,
-                isEnd: true,
-            },
-            components,
-        });
-        pushSubColumn(sub);
-        mutableMasterColumn.pushSection(masterColumnSection);
-        grid.pushMasterColumn(masterColumn);
-        if (!isLastRound) {
-            grid.pushMasterColumn(createBracketGapMasterColumn({
-                existingMasterColumns: grid.grid.masterColumns,
-                columnGap: options.columnGap,
-            }));
+    const setupElementSpans = () => {
+        const masterCols = newGrid.masterColumns;
+        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
+            const masterColumn = masterCols[mcIdx];
+            const sections = masterColumn.sections;
+            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
+                const section = sections[secIdx];
+                const subColumns = section.subColumns;
+                for (let scIdx = 0; scIdx < subColumns.length; scIdx++) {
+                    const subColumn = subColumns[scIdx];
+                    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 (let elIdx = 0; elIdx < elements.length; elIdx++) {
+                        elements[elIdx].span = {
+                            masterColumnStart: spanStart.masterColumnIndex,
+                            masterColumnEnd: spanEnd.masterColumnIndex,
+                            sectionStart: spanStart.sectionIndex,
+                            sectionEnd: spanEnd.sectionIndex,
+                            subColumnStart: spanStart.subColumnIndex,
+                            subColumnEnd: spanEnd.subColumnIndex,
+                        };
+                    }
+                }
+            }
         }
-    }
-    grid.calculateDimensions();
-    const finalizedGrid = finalizeBracketGrid(grid);
+    };
     return {
-        raw: grid,
-        columns: finalizedGrid.columns,
-        matchElementMap: finalizedGrid.elementMap,
+        grid: newGrid,
+        pushMasterColumn,
+        calculateDimensions,
+        setupElementSpans,
     };
 };
 
-const FALLBACK_MATCH_RELATION_POSITION = -1;
-const generateMatchPosition = (match, factor) => Math.ceil(match.position * factor);
-const generateMatchRelationPositions = (relation, match) => {
-    switch (relation.type) {
-        case 'nothing-to-one':
-            return {
-                nextRoundMatchPosition: generateMatchPosition(match, relation.nextRoundMatchFactor),
-                previousUpperRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
-                previousLowerRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
-            };
-        case 'one-to-nothing': {
-            const double = relation.previousRoundMatchFactor === 2 ? 1 : 0;
-            return {
-                nextRoundMatchPosition: FALLBACK_MATCH_RELATION_POSITION,
-                previousUpperRoundMatchPosition: (generateMatchPosition(match, relation.previousRoundMatchFactor) -
-                    double),
-                previousLowerRoundMatchPosition: generateMatchPosition(match, relation.previousRoundMatchFactor),
-            };
-        }
-        case 'one-to-one': {
-            const double = relation.previousRoundMatchFactor === 2 ? 1 : 0;
-            return {
-                nextRoundMatchPosition: generateMatchPosition(match, relation.nextRoundMatchFactor),
-                previousUpperRoundMatchPosition: (generateMatchPosition(match, relation.previousRoundMatchFactor) -
-                    double),
-                previousLowerRoundMatchPosition: generateMatchPosition(match, relation.previousRoundMatchFactor),
-            };
-        }
-        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 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 createNothingToOneRelation$1 = (params) => {
-    const { match, relation, matchPositionMaps, nextRoundMatchPosition } = params;
-    const nextMatch = matchPositionMaps.get(relation.nextRound.id)?.get(nextRoundMatchPosition);
-    if (!nextMatch)
-        throw new Error('Next round match not found');
+
+const createBracketMasterColumnSection = (config) => {
+    const { type } = config;
+    const subColumns = [];
+    const newMasterColumnSection = {
+        dimensions: {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        subColumns,
+        type,
+    };
+    const pushSubColumn = (...newSubColumns) => {
+        subColumns.push(...newSubColumns);
+    };
     return {
-        type: 'nothing-to-one',
-        currentMatch: match,
-        currentRound: relation.currentRound,
-        nextMatch,
-        nextRound: relation.nextRound,
+        masterColumnSection: newMasterColumnSection,
+        pushSubColumn,
     };
 };
-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 Error('Previous round match not found');
-    if (previousUpperRoundMatchPosition !== previousLowerRoundMatchPosition) {
-        if (!previousLowerMatch)
-            throw new Error('Previous lower round match not found');
-        return {
-            type: 'two-to-nothing',
-            currentMatch: match,
-            currentRound: relation.currentRound,
-            previousUpperMatch,
-            previousUpperRound: relation.previousRound,
-            previousLowerMatch,
-            previousLowerRound: relation.previousRound,
-        };
+
+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,
+    };
+};
+
+function logGridAreasFormatted(gridTemplateAreas) {
+    if (!gridTemplateAreas) {
+        console.log('No grid areas to display');
+        return;
     }
-    else {
-        return {
-            type: 'one-to-nothing',
-            currentMatch: match,
-            currentRound: relation.currentRound,
-            previousMatch: previousUpperMatch,
-            previousRound: relation.previousRound,
-        };
+    // Parse the grid template areas string
+    const rows = gridTemplateAreas
+        .split('\n')
+        .map((row) => row.replace(/^"/, '').replace(/"$/, '')) // Remove quotes
+        .map((row) => row.split(' ')); // Split into individual areas
+    if (rows.length === 0) {
+        console.log('No grid areas to display');
+        return;
     }
-};
-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 Error('Next round match not found');
-    if (!previousUpperMatch)
-        throw new Error('Previous upper round match not found');
-    if (!previousLowerMatch)
-        throw new Error('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,
-        };
+    // Find the maximum width for each column to align properly
+    const columnCount = rows[0]?.length ?? 0;
+    const columnWidths = [];
+    for (let colIndex = 0; colIndex < columnCount; colIndex++) {
+        const maxWidth = Math.max(...rows.map((row) => (row[colIndex] || '').length));
+        columnWidths.push(Math.max(maxWidth, 3)); // Minimum width of 3
     }
-    else {
+    console.log('\n📋 Grid Template Areas (Formatted):');
+    console.log('═'.repeat(columnWidths.reduce((sum, width) => sum + width + 3, 0)));
+    // Log each row with proper spacing
+    rows.forEach((row, rowIndex) => {
+        const formattedRow = row
+            .map((area, colIndex) => {
+            const width = columnWidths[colIndex] ?? 0;
+            return area.padEnd(width);
+        })
+            .join(' | ');
+        console.log(`${String(rowIndex).padStart(2, '0')}: ${formattedRow}`);
+    });
+    console.log('═'.repeat(columnWidths.reduce((sum, width) => sum + width + 3, 0)));
+    console.log(`📊 Grid dimensions: ${rows.length} rows × ${columnCount} columns\n`);
+}
+function gridColumnsToGridProperty(grid) {
+    if (!grid.length) {
         return {
-            type: 'two-to-one',
-            currentMatch: match,
-            currentRound: relation.currentRound,
-            previousUpperMatch,
-            previousUpperRound: relation.previousRound,
-            previousLowerMatch,
-            previousLowerRound: relation.previousRound,
-            nextMatch,
-            nextRound: relation.nextRound,
+            gridTemplateAreas: '',
+            gridTemplateRows: '',
+            gridTemplateColumns: '',
         };
     }
-};
-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 Error('Next round match not found');
-    if (!previousUpperMatch)
-        throw new Error('Previous upper round match not found');
-    if (!previousLowerMatch)
-        throw new Error('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.previousUpperRound.id)
-        ?.get(previousLowerRoundMatchPosition);
-    if (!previousUpperMatch)
-        throw new Error('Previous upper round match not found');
-    if (!previousLowerMatch)
-        throw new Error('Previous lower round match not found');
-    return {
-        type: 'two-to-nothing',
-        currentMatch: match,
-        currentRound: relation.currentRound,
-        previousUpperMatch,
-        previousUpperRound: relation.previousUpperRound,
-        previousLowerMatch,
-        previousLowerRound: relation.previousUpperRound,
+    // Calculate the total number of columns (subcolumns across all master columns)
+    const totalColumns = grid.reduce((total, masterColumn) => {
+        return total + Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
+    }, 0);
+    // Find all unique sections across all master columns to determine rows
+    const allSections = [];
+    grid.forEach((masterColumn, masterColumnIndex) => {
+        masterColumn.sections.forEach((section, sectionIndex) => {
+            // For each section, we need to process all its subcolumns
+            section.subColumns.forEach((subColumn) => {
+                allSections.push({
+                    elements: subColumn.elements,
+                    sectionIndex,
+                    masterColumnIndex,
+                });
+            });
+        });
+    });
+    // Group sections by their index to create rows
+    const sectionsByIndex = new Map();
+    let globalColumnIndex = 0;
+    grid.forEach((masterColumn, masterColumnIndex) => {
+        const maxSubColumns = Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
+        masterColumn.sections.forEach((section, sectionIndex) => {
+            if (!sectionsByIndex.has(sectionIndex)) {
+                sectionsByIndex.set(sectionIndex, []);
+            }
+            section.subColumns.forEach((subColumn, subColumnIndex) => {
+                sectionsByIndex.get(sectionIndex).push({
+                    elements: subColumn.elements,
+                    columnIndex: globalColumnIndex + subColumnIndex,
+                    masterColumnIndex,
+                });
+            });
+        });
+        globalColumnIndex += maxSubColumns;
+    });
+    // Build the grid matrix - sections become rows, subcolumns become columns
+    const areaMatrix = [];
+    const rowHeights = [];
+    // Process each section (which becomes a row group)
+    for (const [sectionIndex, sectionColumns] of sectionsByIndex.entries()) {
+        // Find max rows needed for this section
+        const maxRowsInSection = Math.max(...sectionColumns.map((col) => col.elements.reduce((total, element) => total + element.parts.length, 0)), 0);
+        // Create rows for this section
+        for (let rowIndex = 0; rowIndex < maxRowsInSection; rowIndex++) {
+            const areaRow = new Array(totalColumns).fill('.');
+            let currentRowHeight;
+            // Fill in areas for each column in this section
+            for (const sectionColumn of sectionColumns) {
+                let accumulatedRows = 0;
+                let area = '.';
+                let height;
+                // Find which element this row belongs to
+                for (const element of sectionColumn.elements) {
+                    const elementRowCount = element.parts.length;
+                    if (rowIndex >= accumulatedRows && rowIndex < accumulatedRows + elementRowCount) {
+                        const relativeRowIndex = rowIndex - accumulatedRows;
+                        area = element.area;
+                        height = element.parts[relativeRowIndex]?.dimensions.height;
+                        break;
+                    }
+                    accumulatedRows += elementRowCount;
+                }
+                areaRow[sectionColumn.columnIndex] = area;
+                // Use the first defined height for this row
+                if (!currentRowHeight && height !== undefined) {
+                    currentRowHeight = `${height}px`;
+                }
+            }
+            areaMatrix.push(areaRow);
+            rowHeights.push(currentRowHeight ?? 'auto');
+        }
+    }
+    // Calculate column widths
+    const columnWidths = [];
+    for (const masterColumn of grid) {
+        const maxSubColumns = Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
+        for (let i = 0; i < maxSubColumns; i++) {
+            // Find the width from any section that has this subcolumn
+            const subColumnWidth = masterColumn.sections.find((section) => section.subColumns[i])?.subColumns[i]?.dimensions.width ?? 0;
+            columnWidths.push(`${subColumnWidth}px`);
+        }
+    }
+    // Build the CSS properties
+    const gridTemplateAreas = areaMatrix.map((row) => `"${row.join(' ')}"`).join('\n');
+    const gridTemplateRows = rowHeights.join(' ');
+    const gridTemplateColumns = columnWidths.join(' ');
+    const result = {
+        gridTemplateAreas,
+        gridTemplateRows,
+        gridTemplateColumns,
     };
+    // logGridAreasFormatted(gridTemplateAreas);
+    return result;
+}
+
+const calculateUpperLowerRatio = (upperRoundsCount, lowerRoundsCount) => {
+    // In double elimination, after the first aligned column,
+    // we need to distribute the remaining upper rounds across the remaining lower rounds
+    const remainingUpperRounds = upperRoundsCount - 1; // Subtract the first round
+    const remainingLowerRounds = lowerRoundsCount - 1; // Subtract the first round
+    if (remainingUpperRounds === 0) {
+        return 1; // Edge case: only one upper round
+    }
+    return remainingLowerRounds / remainingUpperRounds;
 };
-const generateMatchRelationsNew = (bracketData) => {
-    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);
+const calculateColumnSplitFactor = (upperToLowerRatio) => {
+    // The split factor determines how many sub-columns each match column will have
+    // For example, if the ratio is 1.5, we split each match column
+    // into 2 sub-columns so that matches can be centered correctly
+    if (upperToLowerRatio === 1.5) {
+        return 2; // Split into 2 sub-columns for 1.5 ratio
     }
-    for (const match of bracketData.matches.values()) {
-        const relation = match.round.relation;
-        const { nextRoundMatchPosition, previousUpperRoundMatchPosition, previousLowerRoundMatchPosition } = generateMatchRelationPositions(relation, match);
-        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;
-        }
+    if (upperToLowerRatio === 2) {
+        return 1; // Split into 1 sub-columns for 2 ratio
     }
-    return matchRelations;
+    return 1;
 };
-
-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),
-});
-const getNavigationContext = (params) => {
-    const { upperRounds, currentUpperRoundIndex } = params;
-    const currentUpperRound = upperRounds[currentUpperRoundIndex];
-    if (!currentUpperRound)
-        throw new Error('currentUpperRound is null');
-    const isLeftToRight = !currentUpperRound.mirrorRoundType || currentUpperRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.LEFT;
-    const relativePrevious = upperRounds[currentUpperRoundIndex - 1] || null;
-    const relativeNext = upperRounds[currentUpperRoundIndex + 1] || null;
-    const previousUpperRound = isLeftToRight ? relativePrevious : relativeNext;
-    const nextUpperRound = 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 calculateLowerRoundIndex = (subColumnIndex, splitFactor) => Math.floor(subColumnIndex / splitFactor);
+const calculateUpperRoundIndex = (subColumnIndex, upperToLowerRatio, splitFactor) => {
+    // Calculate which complete column we're in
+    const completeColumnIndex = Math.floor(subColumnIndex / splitFactor);
+    // For the first complete column (index 0), always use the first upper round (index 0)
+    if (completeColumnIndex === 0) {
+        return 0;
+    }
+    // For subsequent columns, map based on the ratio
+    // We subtract 1 because the first column is handled separately
+    const adjustedColumnIndex = completeColumnIndex - 1;
+    // Calculate which upper round this column should use
+    // We add 1 because we start from the second upper round (index 1)
+    return Math.floor(adjustedColumnIndex / upperToLowerRatio) + 1;
 };
-const handleFinalRound = (params) => {
-    const { relations, currentUpperRound, previousUpperRound, nextUpperRound, lowerRounds, currentUpperRoundIndex, firstUpperRound, firstLowerRound, lastLowerRound, } = params;
-    const currentLowerRound = lowerRounds[currentUpperRoundIndex] || null;
-    const nextLowerRound = lowerRounds[currentUpperRoundIndex + 1] || null;
-    const previousLowerRound = lowerRounds[currentUpperRoundIndex - 1] || null;
-    if (!currentLowerRound)
-        throw new Error('currentLowerRound is null');
-    const isAsyncBracket = currentLowerRound.id !== lastLowerRound.id;
-    const finalLowerRound = isAsyncBracket ? nextLowerRound : currentLowerRound;
-    if (!finalLowerRound)
-        throw new Error('finalLowerRound is null');
-    if (finalLowerRound.id !== lastLowerRound.id)
-        throw new Error('finalLowerRound is not the last lower round');
-    if (nextUpperRound) {
-        relations.push(createTwoToOneRelation({
-            currentRound: currentUpperRound,
-            previousUpperRound,
-            previousLowerRound: finalLowerRound,
-            nextRound: nextUpperRound,
-            firstUpperRound,
-            firstLowerRound,
-        }));
+
+const createBracketGapMasterColumn = (config) => {
+    const { existingMasterColumns, columnGap } = config;
+    const lastMasterColumn = existingMasterColumns[existingMasterColumns.length - 1];
+    if (!lastMasterColumn) {
+        throw new Error('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',
+        });
+        const lastSubColumn = section.subColumns[section.subColumns.length - 1];
+        if (!lastSubColumn) {
+            throw new Error('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).element);
+        }
+        pushSubColumn(subColumn);
+        pushSection(masterColumnSection);
     }
-    else {
-        relations.push(createTwoToNothingRelation({
-            currentRound: currentUpperRound,
-            previousUpperRound,
-            previousLowerRound: finalLowerRound,
-            firstUpperRound,
-            firstLowerRound,
-        }));
+    return masterColumn;
+};
+
+const createRoundBracketSubColumnRelativeToFirstRound = (config) => {
+    const { firstRound, round, options, span, hasReverseFinal } = config;
+    const { subColumn, pushElement } = createBracketSubColumn({
+        span,
+    });
+    const matchFactor = firstRound.matchCount / round.matchCount;
+    const matches = Array.from(round.matches.values());
+    const elementsToCreate = [];
+    // Only include a header row if headers exist
+    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: [options.roundHeaderGap],
+            elementHeight: options.roundHeaderGap,
+        });
     }
-    if (isAsyncBracket) {
-        const preFinalLowerRound = lowerRounds[lowerRounds.length - 2];
-        const prePreFinalLowerRound = lowerRounds[lowerRounds.length - 3] || null;
-        if (!preFinalLowerRound)
-            throw new Error('preFinalLowerRound is null');
-        relations.push(createOneToOneRelation({
-            currentRound: finalLowerRound,
-            previousRound: preFinalLowerRound,
-            nextRound: currentUpperRound,
-            rootRound: firstLowerRound,
-        }));
-        if (prePreFinalLowerRound) {
-            relations.push(createOneToOneRelation({
-                currentRound: preFinalLowerRound,
-                previousRound: prePreFinalLowerRound,
-                nextRound: finalLowerRound,
-                rootRound: firstLowerRound,
-            }));
+    // Add match elements to create
+    for (const [matchIndex, match] of matches.entries()) {
+        const isLastMatch = matchIndex === matches.length - 1;
+        const matchRows = [];
+        for (let factorIndex = 0; factorIndex < matchFactor; factorIndex++) {
+            const isLastFactor = factorIndex === matchFactor - 1;
+            // Add the match height
+            matchRows.push(options.matchHeight);
+            if (isLastFactor)
+                continue;
+            // Add gap between match factors (except after the last one)
+            matchRows.push(options.rowGap);
         }
-        else {
-            relations.push(createNothingToOneRelation({
-                currentRound: preFinalLowerRound,
-                nextRound: finalLowerRound,
-            }));
+        const isFinalMatch = hasReverseFinal
+            ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
+            : round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+        elementsToCreate.push({
+            type: 'match',
+            area: `m${match.shortId}`,
+            partHeights: matchRows,
+            elementHeight: isFinalMatch ? options.finalMatchHeight : options.matchHeight,
+            component: isFinalMatch ? config.components.finalMatch : config.components.match,
+            match,
+            round,
+            roundSwissGroup: null,
+        });
+        if (!isLastMatch) {
+            elementsToCreate.push({
+                type: 'matchGap',
+                area: '.',
+                partHeights: [options.rowGap],
+                elementHeight: options.rowGap,
+            });
         }
     }
-    else {
-        if (!previousLowerRound)
-            throw new Error('previousLowerRound is null');
-        relations.push(createOneToOneRelation({
-            currentRound: finalLowerRound,
-            previousRound: previousLowerRound,
-            nextRound: currentUpperRound,
-            rootRound: firstLowerRound,
-        }));
-    }
-};
-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;
-    if (currentLowerRound && nextLowerRound) {
-        relations.push(createNothingToOneRelation({
-            currentRound: currentLowerRound,
-            nextRound: nextLowerRound,
-        }));
+    // Create all elements at once
+    for (const elementData of elementsToCreate) {
+        const { element } = createBracketElement(elementData);
+        pushElement(element);
     }
+    return subColumn;
 };
-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) {
-        relations.push(createOneToOneRelation({
-            currentRound: currentLowerRound,
-            previousRound: previousLowerRound,
-            nextRound: nextLowerRound,
-            rootRound: firstLowerRound,
-        }));
+
+const createDoubleEliminationGrid = (bracketData, options, components) => {
+    const grid = createBracketGrid({ spanElementWidth: options.columnWidth });
+    const upperBracketRounds = Array.from(bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET).values());
+    const lowerBracketRounds = Array.from(bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET).values());
+    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 = upperBracketRounds[0];
+    const firstLowerRound = lowerBracketRounds[0];
+    if (!firstUpperRound || !firstLowerRound) {
+        throw new Error('No upper or lower rounds found in bracket data');
     }
-};
-const generateRoundRelationsNew = (bracketData) => {
-    const relations = [];
-    const allRounds = [...bracketData.rounds.values()];
-    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 firstUpperRound = upperRounds[0];
-    const firstLowerRound = lowerRounds[0] || null;
-    const lastLowerRound = lowerRounds[lowerRounds.length - 1] || null;
-    if (!firstUpperRound)
-        throw new Error('No upper rounds found');
-    const hasLowerRounds = lowerRounds.length > 0;
-    for (const [currentUpperRoundIndex] of upperRounds.entries()) {
-        const nav = getNavigationContext({
-            upperRounds,
-            currentUpperRoundIndex,
+    const upperToLowerRatio = calculateUpperLowerRatio(upperBracketRounds.length, lowerBracketRounds.length);
+    const columnSplitFactor = calculateColumnSplitFactor(upperToLowerRatio);
+    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,
+            },
         });
-        if (nav.isFinal && hasLowerRounds && lastLowerRound && firstLowerRound && nav.previousUpperRound) {
-            handleFinalRound({
-                relations,
-                currentUpperRound: nav.currentUpperRound,
-                previousUpperRound: nav.previousUpperRound,
-                nextUpperRound: nav.nextUpperRound,
-                lowerRounds,
-                currentUpperRoundIndex,
-                firstUpperRound,
-                firstLowerRound,
-                lastLowerRound,
+        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);
+            const upperRound = upperBracketRounds[currentUpperRoundIndex];
+            if (!upperRound) {
+                throw new Error('Upper round not found for subColumnIndex: ' + subColumnIndex);
+            }
+            // For upper bracket spans - check if this round is different from the previous occurrence
+            const isUpperSpanStart = isFirstSubColumnInMasterColumn
+                ? lowerRoundIndex === 0 || lastRoundLastSubColumnUpperIndex !== currentUpperRoundIndex
+                : previousUpperRoundIndex !== currentUpperRoundIndex;
+            // For upper bracket spans - check if this round will be different in the next occurrence
+            const isUpperSpanEnd = isLastSubColumnInMasterColumn
+                ? isLastLowerRound ||
+                    calculateUpperRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, upperToLowerRatio, columnSplitFactor) !==
+                        currentUpperRoundIndex
+                : nextUpperRoundIndex !== currentUpperRoundIndex;
+            // For lower bracket spans - similar logic
+            const isLowerSpanStart = isFirstSubColumnInMasterColumn
+                ? lowerRoundIndex === 0 || lastRoundLastSubColumnLowerIndex !== currentLowerRoundIndex
+                : previousLowerRoundIndex !== currentLowerRoundIndex;
+            const isLowerSpanEnd = isLastSubColumnInMasterColumn
+                ? isLastLowerRound ||
+                    calculateLowerRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, columnSplitFactor) !==
+                        currentLowerRoundIndex
+                : nextLowerRoundIndex !== currentLowerRoundIndex;
+            const upperSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstUpperRound,
+                round: upperRound,
+                options,
+                hasReverseFinal,
+                span: {
+                    isStart: isUpperSpanStart,
+                    isEnd: isUpperSpanEnd,
+                },
+                components,
             });
-        }
-        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,
-                currentUpperRoundIndex,
+            pushUpperSubColumn(upperSubColumn);
+            const upperLowerGapSubColumn = createBracketSubColumn({
+                span: {
+                    isStart: true,
+                    isEnd: true,
+                },
             });
-        }
-        else if (nav.previousUpperRound && nav.nextUpperRound) {
-            handleRegularRound({
-                relations,
-                currentUpperRound: nav.currentUpperRound,
-                previousUpperRound: nav.previousUpperRound,
-                nextUpperRound: nav.nextUpperRound,
-                lowerRounds,
-                currentUpperRoundIndex,
-                firstUpperRound,
-                firstLowerRound,
+            const upperLowerGapElement = createBracketElement({
+                area: '.',
+                type: 'roundGap',
+                elementHeight: options.rowRoundGap,
+                partHeights: [options.rowRoundGap],
+            });
+            upperLowerGapSubColumn.pushElement(upperLowerGapElement.element);
+            pushUpperLowerSubColumn(upperLowerGapSubColumn.subColumn);
+            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstLowerRound,
+                round: lowerRound,
+                options,
+                hasReverseFinal,
+                span: {
+                    isStart: isLowerSpanStart,
+                    isEnd: isLowerSpanEnd,
+                },
+                components,
             });
+            pushLowerSubColumn(lowerSubColumn);
+            if (isLastSubColumnInMasterColumn) {
+                lastRoundLastSubColumnUpperIndex = currentUpperRoundIndex;
+                lastRoundLastSubColumnLowerIndex = currentLowerRoundIndex;
+            }
         }
-    }
-    return relations;
-};
-
-const createNewBracket = (source, options) => {
-    const bracketNewBase = createNewBracketBase(source, options);
-    const rounds = new BracketMap();
-    const roundsByType = new BracketMap();
-    for (const roundBase of bracketNewBase.rounds.values()) {
-        const newRound = {
-            ...roundBase,
-            matches: new BracketMap(),
-            relation: { type: 'dummy' },
-        };
-        rounds.set(roundBase.id, newRound);
-        if (!roundsByType.has(roundBase.type)) {
-            roundsByType.set(roundBase.type, new BracketMap());
+        pushSection(upperSection, upperLowerGapSection, lowerSection);
+        grid.pushMasterColumn(masterColumn);
+        if (remainingRounds.length) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
         }
-        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(),
+    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 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 newMatch = {
-            ...matchBase,
-            home: homeParticipant,
-            away: awayParticipant,
-            winner: null,
+        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,
-            relation: { type: 'dummy' },
-        };
-        if (matchBase.winner) {
-            const winnerParticipant = homeParticipant?.id === matchBase.winner.id ? homeParticipant : awayParticipant;
-            if (!winnerParticipant)
-                throw new Error(`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);
-        if (homeParticipant) {
-            const participant = participants.getOrThrow(homeParticipant.id);
-            participant.matches.set(matchBase.id, {
-                ...newMatch,
-                me: homeParticipant,
-                opponent: awayParticipant,
+            options,
+            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.element);
+        pushUpperLowerSubColumn(upperLowerGapSubColumn.subColumn);
+        if (thirdPlaceRound) {
+            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstLowerRound,
+                round: thirdPlaceRound,
+                options,
+                hasReverseFinal,
+                span: {
+                    isStart: isFirstRound,
+                    isEnd: isLastRound,
+                },
+                components,
             });
+            pushLowerSubColumn(lowerSubColumn);
         }
-        if (awayParticipant) {
-            const participant = participants.getOrThrow(awayParticipant.id);
-            participant.matches.set(matchBase.id, {
-                ...newMatch,
-                me: awayParticipant,
-                opponent: homeParticipant,
+        else {
+            const lowerSubColumn = createBracketSubColumn({
+                span: {
+                    isStart: true,
+                    isEnd: true,
+                },
             });
+            const firstMasterRound = grid.grid.masterColumns[0];
+            if (!firstMasterRound)
+                throw new Error('No first master round found in grid');
+            const lastMasterColumnSection = firstMasterRound.sections[firstMasterRound.sections.length - 1];
+            if (!lastMasterColumnSection)
+                throw new Error('No last master column section found in grid');
+            const firstSubColumn = lastMasterColumnSection.subColumns[0];
+            if (!firstSubColumn)
+                throw new Error('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.element);
+            }
+            pushLowerSubColumn(lowerSubColumn.subColumn);
         }
-    }
-    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;
-        }
-    }
-    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);
-    for (const matchRelation of matchRelations) {
-        matchRelation.currentMatch.relation = matchRelation;
-    }
-    return newBracket;
-};
-
-const pad = (str, len) => str.padEnd(len, ' ');
-const color = (str, code) => `\x1b[${code}m${str}\x1b[0m`;
-const roundColor = (str) => color(str, 36); // cyan
-const arrowColor = (str) => color(str, 90); // gray
-const labelColor = (str) => color(str, 33); // yellow
-const factorColor = (str) => color(str, 32); // green
-const logRoundRelations = (bracketData) => {
-    // Find max round name length for alignment
-    let maxNameLen = 0;
-    for (const round of bracketData.rounds.values()) {
-        maxNameLen = Math.max(maxNameLen, round.name.length);
-    }
-    const colWidth = maxNameLen + 2;
-    // Build rows
-    const rows = [];
-    for (const round of bracketData.rounds.values()) {
-        const relation = round.relation;
-        switch (relation.type) {
-            case 'nothing-to-one':
-                rows.push([
-                    labelColor(pad('START', colWidth)),
-                    arrowColor('──▶'),
-                    roundColor(pad(round.name, colWidth)),
-                    arrowColor('──▶'),
-                    roundColor(pad(relation.nextRound.name, colWidth)),
-                    factorColor(`[${relation.nextRoundMatchFactor}]`),
-                ]);
-                break;
-            case 'one-to-nothing':
-                rows.push([
-                    roundColor(pad(relation.previousRound.name, colWidth)),
-                    arrowColor('──▶'),
-                    roundColor(pad(round.name, colWidth)),
-                    arrowColor('──▶'),
-                    labelColor(pad('END', colWidth)),
-                    factorColor(`[${relation.previousRoundMatchFactor}]`),
-                ]);
-                break;
-            case 'one-to-one':
-                rows.push([
-                    roundColor(pad(relation.previousRound.name, colWidth)),
-                    arrowColor('──▶'),
-                    roundColor(pad(round.name, colWidth)),
-                    arrowColor('──▶'),
-                    roundColor(pad(relation.nextRound.name, colWidth)),
-                    factorColor(`[Prev: ${relation.previousRoundMatchFactor}, Next: ${relation.nextRoundMatchFactor}]`),
-                ]);
-                break;
-            case 'two-to-one':
-                rows.push([
-                    roundColor(pad(relation.previousUpperRound.name, colWidth)),
-                    arrowColor(' │ '),
-                    roundColor(pad(relation.previousLowerRound.name, colWidth)),
-                    arrowColor('──▶'),
-                    roundColor(pad(round.name, colWidth)),
-                    arrowColor('──▶'),
-                    roundColor(pad(relation.nextRound.name, colWidth)),
-                    factorColor(`[Upper: ${relation.previousUpperRoundMatchFactor}, Lower: ${relation.previousLowerRoundMatchFactor}, Next: ${relation.nextRoundMatchFactor}]`),
-                ]);
-                break;
-            case 'two-to-nothing':
-                rows.push([
-                    roundColor(pad(relation.previousUpperRound.name, colWidth)),
-                    arrowColor('   │'),
-                    roundColor(pad(relation.previousLowerRound.name, colWidth)),
-                    arrowColor('   ▼'),
-                    roundColor(pad(round.name, colWidth)),
-                    arrowColor('──▶'),
-                    labelColor(pad('END', colWidth)),
-                    factorColor(`[Upper: ${relation.previousUpperRoundMatchFactor}, Lower: ${relation.previousLowerRoundMatchFactor}]`),
-                ]);
-                break;
+        pushSection(upperSection, upperLowerGapSection, lowerSection);
+        grid.pushMasterColumn(masterColumn);
+        if (!isLastRound) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
         }
     }
-    // Print header
-    const divider = (label) => {
-        // eslint-disable-next-line no-control-regex
-        const width = rows[0]?.reduce((w, col) => w + col.replace(/\x1b\[[0-9;]*m/g, '').length + 2, 0) || 60;
-        return `\n${'='.repeat(width)}\n${labelColor(label)}\n${'='.repeat(width)}\n`;
+    grid.setupElementSpans();
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
     };
-    console.log(divider('Bracket Structure'));
-    // Print rows
-    for (const row of rows) {
-        console.log(row.join(' '));
-    }
-    console.log();
 };
 
-const factorialCache = new Map();
-const getAvailableSwissGroupsForRound = (roundNumber, totalMatchesInRound) => {
-    const ADVANCE_WINS = 3;
-    const ELIMINATE_LOSSES = 3;
-    // Cache factorial calculations
-    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;
-    };
-    // Pre-calculate roundFactorial
-    const roundFactorial = getFactorial(roundNumber);
-    let totalCombinations = 0;
-    const validGroups = [];
-    // Single loop to gather valid groups and total combinations
-    for (let wins = roundNumber; wins >= 0; wins--) {
-        const losses = roundNumber - wins;
-        const remainingGames = ADVANCE_WINS + ELIMINATE_LOSSES - (wins + losses) - 1;
-        const notYetEliminated = losses < ELIMINATE_LOSSES;
-        const canStillAdvance = wins < ADVANCE_WINS && remainingGames >= 0;
-        if (!canStillAdvance || !notYetEliminated)
-            continue;
-        const combinations = roundFactorial / (getFactorial(wins) * getFactorial(losses));
-        totalCombinations += combinations;
-        validGroups.push({ wins, losses, combinations });
-    }
-    // Create final groups with calculated proportions
-    return validGroups.map(({ wins, losses, combinations }) => ({
-        id: `${wins}-${losses}`,
-        name: `${wins}-${losses}`,
-        matchesInGroup: Math.round((combinations / totalCombinations) * totalMatchesInRound),
-    }));
-};
-const generateBracketRoundSwissGroupMaps = (bracketData) => {
-    if (bracketData.mode !== TOURNAMENT_MODE.SWISS_WITH_ELIMINATION) {
-        return 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 Error('No rounds found in bracket data');
     }
-    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 = anyParticipant.winCount;
-            const losses = anyParticipant.lossCount;
-            const group = roundSwissData.groups.get(`${wins}-${losses}`);
-            if (!group)
-                throw new Error('Group not found for match: ' + match.id);
-            group.matches.set(match.id, match);
-        }
-        for (const emptyMatchId of emptyMatchIds) {
-            const match = bracketRound.matches.getOrThrow(emptyMatchId);
-            let groupFound = false;
-            for (const group of roundSwissData.groups.values()) {
-                if (group.matches.size < group.allowedMatchCount) {
-                    group.matches.set(match.id, match);
-                    groupFound = true;
-                    break;
-                }
-            }
-            if (!groupFound) {
-                throw new Error('No group found for empty match');
-            }
+    for (const [roundIndex, round] of rounds.entries()) {
+        const isLastRound = roundIndex === rounds.length - 1;
+        const { masterColumn, ...mutableMasterColumn } = createBracketMasterColumn({
+            columnWidth: round.type === COMMON_BRACKET_ROUND_TYPE.FINAL ? 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,
+            hasReverseFinal: false,
+            span: {
+                isStart: true,
+                isEnd: true,
+            },
+            components,
+        });
+        pushSubColumn(sub);
+        mutableMasterColumn.pushSection(masterColumnSection);
+        grid.pushMasterColumn(masterColumn);
+        if (!isLastRound) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
         }
-        roundsWithSwissGroups.set(bracketRound.id, roundSwissData);
-        roundNumber++;
     }
-    return roundsWithSwissGroups;
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
+    };
 };
 
 // TODO
@@ -3857,16 +3857,24 @@ var index = /*#__PURE__*/Object.freeze({
     TOURNAMENT_MODE: TOURNAMENT_MODE,
     canRenderLayoutInTournamentMode: canRenderLayoutInTournamentMode,
     createMatchesMapBase: createMatchesMapBase,
+    createNewBracket: createNewBracket,
     createNewBracketBase: createNewBracketBase,
     createNewMatchParticipantBase: createNewMatchParticipantBase,
     createParticipantsMapBase: createParticipantsMapBase,
     createRoundsMapBase: createRoundsMapBase,
     generateBracketDataForEthlete: generateBracketDataForEthlete,
     generateBracketDataForGg: generateBracketDataForGg,
+    generateBracketRoundSwissGroupMaps: generateBracketRoundSwissGroupMaps,
+    generateMatchPosition: generateMatchPosition,
+    generateMatchRelationPositions: generateMatchRelationPositions,
+    generateMatchRelationsNew: generateMatchRelationsNew,
+    generateRoundRelationsNew: generateRoundRelationsNew,
     generateRoundTypeFromEthleteRoundType: generateRoundTypeFromEthleteRoundType,
     generateRoundTypeFromGgMatch: generateRoundTypeFromGgMatch,
     generateTournamentModeFormEthleteRounds: generateTournamentModeFormEthleteRounds,
-    generateTournamentModeFormGgData: generateTournamentModeFormGgData
+    generateTournamentModeFormGgData: generateTournamentModeFormGgData,
+    getAvailableSwissGroupsForRound: getAvailableSwissGroupsForRound,
+    logRoundRelations: logRoundRelations
 });
 
 const VALIDATOR_ERROR_SERVICE_TOKEN = new InjectionToken('VALIDATOR_ERROR_SERVICE');