@johnmorrisdotca/taisen-brackets 0.5.0 → 0.6.0

package/dist/render.js

@@ -6,6 +6,13 @@ import { styleFor } from "./theme.js";
 import { resolveBackground } from "./background.js";
 import { emWidth, esc, fit, hash, num } from "./text.js";
 import { fill, voiceOf } from "./locales.js";
+import { paintVariant, seriesLineWidth } from "./layouts.js";
+import { drawGroups } from "./groups.js";
+import { headTile } from "./furniture.js";
+import { drawPlayIn } from "./playin.js";
+/** The names of the layouts, the tree first. */
+export const LAYOUTS = Object.freeze(["tree", "rows", "shields", "update", "columns", "playin", "series", "groups"]);
+const VARIANTS = ["rows", "shields", "update", "columns", "series"];
 /** The sizes by name. A phone's drawing is 390 wide and as tall as the bracket needs; a card is 1080 by 1350, a tall post. */
 export const SIZES = Object.freeze({
     wide: { width: 1200, height: 675 },
@@ -95,40 +102,87 @@ export function describeBracket(input, options = {}) {
  */
 export function drawBracket(input, options = {}) {
     const v = voiceOf(options);
-    const layout = localizedLayout(isLayout(input) ? input : layoutBracket(input, options), v);
+    const kind = options.layout ?? "tree";
+    if (!LAYOUTS.includes(kind))
+        throw new RangeError(`taisen-brackets: unknown layout ${JSON.stringify(String(kind))}: use one of ${LAYOUTS.join(", ")}`);
+    // The series card lists the east first: with no order asked for, a group named east goes before one named west.
+    const groupOrder = kind === "series" && options.groupOrder === undefined && !isLayout(input) ? eastFirst(input) : options.groupOrder;
+    const layout = localizedLayout(isLayout(input) ? input : layoutBracket(input, groupOrder ? { ...options, groupOrder } : options), v);
     const theme = options.theme ?? "auto";
-    const sizeName = typeof options.size === "string" || options.size === undefined ? options.size ?? "wide" : null;
+    // The series card is a tall card unless a size is asked for.
+    const sizeName = typeof options.size === "string" || options.size === undefined ? options.size ?? (kind === "series" ? "card" : "wide") : null;
     const size = sizeName ? SIZES[sizeName] : { width: options.size.width, height: options.size.height ?? null };
-    const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : sizeName === "phone" || sizeName === "card" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
+    const orientation = options.orientation && options.orientation !== "auto" ? options.orientation : kind === "series" || sizeName === "phone" || sizeName === "card" || (size.height !== null && size.width < size.height * 0.8) ? "vertical" : "horizontal";
     const road = options.look === "road";
     const hasBg = typeof options.background === "string" || (typeof options.background === "object" && options.background !== null);
-    const prefix = options.id ?? `tb-${hash(JSON.stringify([v.locale.code, layout.teams.map((t) => t.name), layout.ties.map((t) => [t.id, t.sides.map((s) => s?.id ?? null), t.winner, t.result.score, t.round]), options.size, orientation, options.detail, theme, options.title, options.subtitle, options.seeds, options.scores, options.champion, options.markShape, options.roundLabels, options.thirdPlace, options.trophy ? 1 : 0, road ? 1 : 0, options.highlightPath ?? null, options.flags ? 1 : 0, ...(hasBg ? [options.background, options.vs, options.codes, options.seeds] : []), ...(options.flagHref ? ["h"] : [])]))}`;
-    const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round", look: road ? "road" : "classic", flags: options.flags, flagHref: options.flagHref, theme: theme === "light" ? "light" : theme === "dark" || theme === "poster" ? "dark" : "inherit", flagCache: new Map() };
+    const prefix = options.id ?? `tb-${hash(JSON.stringify([v.locale.code, layout.teams.map((t) => t.name), layout.ties.map((t) => [t.id, t.sides.map((s) => s?.id ?? null), t.winner, t.result.score, t.round]), options.size, orientation, options.detail, theme, options.title, options.subtitle, options.seeds, options.scores, options.champion, options.markShape, options.roundLabels, options.thirdPlace, options.trophy ? 1 : 0, road ? 1 : 0, options.highlightPath ?? null, options.flags ? 1 : 0, ...(hasBg ? [options.background, options.vs, options.codes, options.seeds] : []), ...(options.flagHref ? ["h"] : []), ...(kind !== "tree" ? [kind, options.at, options.standings, options.qualify] : []), ...(options.headers ? ["head"] : [])]))}`;
+    const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: options.markShape ?? "round", look: road ? "road" : "classic", flags: options.flags, flagHref: options.flagHref, theme: theme === "light" ? "light" : theme === "dark" || theme === "poster" ? "dark" : "inherit", flagCache: new Map(), defs: new Map() };
     const path = pathOf(layout, options.highlightPath);
-    const plan = planBracket(layout, options, v, size, orientation === "vertical", ctx, road, path);
     const linked = { count: 0 };
-    const drawn = plan.boxes.map((b) => drawBox(b, plan, options, v, ctx, linked)); // draws the marks, so before the defs are written
     const title = options.title ?? v.words.title;
     const desc = describeBracket(layout, options);
-    const picture = resolveBackground(options.background, theme, plan.width, plan.height, prefix);
+    // The group tables and the play-in are not the tree: they plan and draw their own parts, and share the frame (the style, the background, the title) with it.
+    const own = kind === "groups" ? drawGroups(layout, options, v, size, ctx, road, linked) : kind === "playin" ? drawPlayIn(layout, options, v, size, ctx, road, linked) : null;
+    if (own)
+        return frame({ prefix, v, options, theme, road, kind, title, desc: own.desc ?? desc, width: own.width, height: own.height, followed: false, links: [], parts: [...own.body, ...own.texts], linkCount: linked.count, ctx });
+    const plan = planBracket(layout, options, v, size, orientation === "vertical", ctx, road, path, kind);
+    const drawn = plan.boxes.map((b) => drawBox(b, plan, options, v, ctx, linked, layout.place[b.tie.index])); // draws the marks, so before the defs are written
+    return frame({ prefix, v, options, theme, road, kind, title, desc, width: plan.width, height: plan.height, followed: path.size > 0, links: plan.links, parts: [...drawn, ...plan.texts, ...plan.extras], linkCount: linked.count, ctx });
+}
+/** The drawing's frame: the root `<svg>` with its title, its style, the defs the marks wrote and the background, round the parts a layout drew. */
+function frame(f) {
+    const { prefix, v, options, theme, road, ctx } = f;
+    const picture = resolveBackground(options.background, theme, f.width, f.height, prefix);
     const defs = markDefs(ctx) + (picture?.defs ?? "");
-    const style = theme === "none" ? "" : `<style>${styleFor(`.${prefix}`, theme, { road, links: linked.count > 0, follow: path.size > 0, bgAuto: picture?.auto }, picture?.inks)}</style>`;
-    const bg = options.background === false ? "" : `<rect class="tb-bg" width="${num(plan.width)}" height="${num(plan.height)}"${theme === "none" ? ' fill="none"' : ""}/>${picture?.body ?? ""}`;
+    const scope = scopeOf(options, prefix);
+    const style = theme === "none" || options.style === false ? "" : `<style>${styleFor(`.${scope}`, theme, { road, links: f.linkCount > 0, follow: f.followed, bgAuto: picture?.auto, layout: f.kind !== "tree" || options.headers === true }, picture?.inks)}</style>`;
+    const bg = options.background === false ? "" : `<rect class="tb-bg" width="${num(f.width)}" height="${num(f.height)}"${theme === "none" ? ' fill="none"' : ""}/>${picture?.body ?? ""}`;
     return [
-        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(v.locale.code)}" class="taisen ${prefix}${road ? " tb-look-road" : ""}${path.size > 0 ? " tb-follow" : ""}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(plan.width)} ${num(plan.height)}" width="${num(plan.width)}" height="${num(plan.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
-        `<title id="${prefix}-t">${esc(title)}</title><desc id="${prefix}-d">${esc(desc)}</desc>`,
+        `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(v.locale.code)}" class="taisen ${prefix}${scope !== prefix ? ` ${scope}` : ""}${road ? " tb-look-road" : ""}${f.followed ? " tb-follow" : ""}${options.className ? ` ${esc(options.className)}` : ""}" viewBox="0 0 ${num(f.width)} ${num(f.height)}" width="${num(f.width)}" height="${num(f.height)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${prefix}-t ${prefix}-d">`,
+        `<title id="${prefix}-t">${esc(f.title)}</title><desc id="${prefix}-d">${esc(f.desc)}</desc>`,
         style,
         defs ? `<defs>${defs}</defs>` : "",
         bg,
-        ...plan.links,
-        ...drawn,
-        ...plan.texts,
-        ...plan.extras,
+        ...f.links,
+        ...f.parts,
         "</svg>",
     ].filter(Boolean).join("\n");
 }
+/** The class that carries a drawing's rules: its `styleScope` when it has one, else its own id prefix. */
+function scopeOf(o, prefix) {
+    if (o.styleScope === undefined)
+        return prefix;
+    if (typeof o.styleScope !== "string" || !/^[A-Za-z_][\w-]*$/.test(o.styleScope))
+        throw new RangeError("taisen-brackets: styleScope is one word of letters, digits, - and _");
+    return o.styleScope;
+}
+/**
+ * The stylesheet of a drawing with these options, for a page that draws the same bracket twice (a desk's size and a phone's): put it in the page once, give each drawing the same `styleScope`
+ * and `style: false`, and every drawing takes its colours from it. Needs `styleScope`; `theme`, `look`, `background`, `layout`, `headers`, and whether there is an `href` or a `highlightPath` decide which rules are in it.
+ */
+export function bracketStyle(options) {
+    if (options.styleScope === undefined)
+        throw new RangeError("taisen-brackets: bracketStyle needs a styleScope");
+    const scope = scopeOf(options, "");
+    const theme = options.theme ?? "auto";
+    if (theme === "none")
+        return "";
+    const picture = resolveBackground(options.background, theme, 100, 100, "x");
+    return styleFor(`.${scope}`, theme, { road: options.look === "road", links: typeof options.href === "function", follow: options.highlightPath !== undefined, bgAuto: picture?.auto, layout: (options.layout ?? "tree") !== "tree" || options.headers === true }, picture?.inks);
+}
+/** The groups' names with the east first, for the series card: the names the teams carry, ordered so that a name with "east" comes before one with "west". */
+function eastFirst(input) {
+    const teams = Array.isArray(input) ? [] : input.teams ?? [];
+    const names = [...new Set(teams.map((t) => t.group).filter((g) => typeof g === "string"))];
+    if (names.length < 2)
+        return undefined;
+    const rank = (g) => (/east/i.test(g) ? 0 : /west/i.test(g) ? 2 : 1);
+    return names.sort((a, b) => rank(a) - rank(b) || (a < b ? -1 : 1));
+}
 // ---------------------------------------------------------------------------------------------- the plan
-function planBracket(layout, o, v, size, vertical, ctx, road, path) {
+function planBracket(layout, o, v, size, vertical, ctx, road, path, kind) {
+    // The layouts that draw each tie their own way take the tree's places and lines, and fill the boxes themselves.
+    const V = VARIANTS.includes(kind) ? kind : null;
     const pad = vertical ? 14 : 22;
     const showLabels = o.roundLabels ?? true;
     const poster = o.theme === "poster";
@@ -144,6 +198,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
     const W0 = size.width;
     const titleH = (o.title ? (poster ? 46 : 38) : 0) + (o.subtitle ? 24 : 0) + (o.title || o.subtitle ? 10 : 0);
     const hasGroups = layout.sides.some((s) => s.label);
+    const groupRoom = o.headers === true ? 34 : 28;
     const champ = (o.champion ?? true) && layout.champion !== null && layout.finalIndex !== null;
     const withThird = layout.third !== null && (o.thirdPlace ?? "below") !== "hide";
     // Beside the final in a horizontal bracket of two halves, under the final; elsewhere the lines into the final would run through it, so it goes at the foot.
@@ -180,7 +235,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
         // The names of the rounds head their columns: a name that cannot be one line in its column is set on two, which needs a taller strip over the boxes.
         if (showLabels && layout.columns.some((c) => !nameFits(v, road, roundLabel(layout, c, o.roundNames, v), D + gapT * 0.8)))
             labelRoom = 34;
-        const top = pad + titleH + (hasGroups ? 28 : 0) + labelRoom;
+        const top = pad + titleH + (hasGroups ? groupRoom : 0) + labelRoom;
         others = othersOf(layout);
         ow = clamp(D * 1.1, 120, 200);
         extraH0 = othersHeight(others.length, W0, pad, ow, OTHER_H) + thirdBlock;
@@ -204,7 +259,8 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
     const longest = Math.max(0, ...layout.teams.map((t) => wide(t.name, 13)));
     const longestAbbr = Math.max(0, ...layout.teams.map((t) => wide(abbrOf(t, v), 13)));
     // Seed tags (the road look with `seeds`): a small pill beside each mark, or above it in a box of marks alone.
-    const tagsOn = road && (o.seeds ?? false) && layout.ties.some((t) => tagOf(t, 0) !== "" || tagOf(t, 1) !== "");
+    const seedsDefault = V === "rows" || V === "update" || V === "series" || V === "columns";
+    const tagsOn = (road || (V !== null && V !== "columns")) && (o.seeds ?? seedsDefault) && layout.ties.some((t) => tagOf(t, 0) !== "" || tagOf(t, 1) !== "");
     const tagW = tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 8))) + 8 : 0;
     // The road look's marks and scores are large: they are scaled down together until a row fits its box, before a name is dropped for its abbreviation.
     const anyNotes = layout.ties.some((t) => noteParts(t, v).length > 0);
@@ -263,8 +319,28 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
             fitNow = Math.min(1, fitOf(w, chosen.h, chosen.detail));
         return chosen;
     };
+    // The layouts of their own: how much a box says follows from its width and height; a tall page gives each a height of its own.
+    const variantDetail = (w) => {
+        if (o.detail && o.detail !== "auto")
+            return o.detail;
+        if (V === "shields")
+            return "mark";
+        if (V === "update" || V === "series")
+            return w >= 56 ? "compact" : "mark";
+        // The box's own painter leaves out what does not fit (the tag, then the names' length); the names are asked for where there is room for most of them.
+        if (V === "columns")
+            return w >= 110 ? "full" : w >= 60 ? "compact" : "mark";
+        return w >= 150 ? "full" : w >= 84 ? "compact" : "mark";
+    };
+    const oneLine = V === "series" && vertical && layout.ties.every((t) => seriesLineWidth(t, v, 10, o.scores ?? true) <= boxW - 8);
+    const variantH = V === "rows" ? 54 : V === "shields" ? 76 : V === "update" ? 46 : V === "columns" ? 84 : oneLine ? 32 : 46;
     let detail;
-    if (road) {
+    if (V !== null) {
+        detail = variantDetail(boxW);
+        if (vertical)
+            boxH = variantH;
+    }
+    else if (road) {
         const picked = roadPick(boxW, vertical ? clamp(boxW * 0.42, 48, 124) : boxH, vertical);
         detail = picked.detail;
         if (vertical)
@@ -291,7 +367,53 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
     const champH = champ ? trophyH + (hasTrophy ? 6 : 0) + champMark + 8 + nameFont + 6 + 11 + 2 : 0;
     const finalW = halves ? (vertical ? Math.min(size.width - 2 * pad, Math.max(boxW, 160)) : Math.min(centreT - 12, Math.max(D * 1.1, 120))) : D;
     let finalH = vertical ? (detail === "mark" ? Math.max(boxH, 52) : boxH) : boxH;
+    // The final of the columns layout is two tall slots side by side.
+    if (V === "columns")
+        finalH = vertical ? Math.max(boxH, 96) : Math.min(Math.max(boxH * 1.7, 120), 220);
     const thirdH = withThird && !bottomThird ? 18 + boxH + 14 : 0;
+    // A final alone (the World Cups of 1974 and 1978 ended with one and a third-place match): there is no tree to join, so it is centred, the champion over it and the third place under it.
+    const lone = !halves && layout.sides.length === 1 && layout.sides[0].boxes.length === 1 && layout.finalIndex !== null && layout.sides[0].boxes[0].i === layout.finalIndex;
+    if (lone) {
+        const availW = W0 - 2 * pad;
+        const wl = vertical ? Math.min(availW, road ? 340 : 300) : clamp(availW * 0.3, 240, 380);
+        let hl = V === "columns" ? 120 : V === "shields" ? 86 : V !== null ? 72 : road ? 0 : 92;
+        let dl;
+        if (V !== null)
+            dl = variantDetail(wl);
+        else if (road) {
+            const picked = roadPick(wl, 132);
+            dl = picked.detail;
+            hl = picked.h;
+        }
+        else
+            dl = pick(wl, hl);
+        const strays = othersOf(layout);
+        const ows = Math.min(availW, 200);
+        const strayH = othersHeight(strays.length, W0, pad, ows, OTHER_H);
+        const labelH = showLabels ? 22 : 8;
+        const content = (champ ? champH + 14 : 0) + labelH + hl + (withThird ? 8 + 18 + hl + 8 : 0) + strayH;
+        const top0 = pad + titleH;
+        const height = Math.max(size.height ?? 0, top0 + content + pad);
+        const cx = W0 / 2;
+        let y = top0 + Math.max(6, (height - top0 - pad - content) / 2);
+        if (champ) {
+            extras.push(...championBlock(layout.champion, cx, y, champMark, trophyH, nameFont, o, v, ctx, poster));
+            y += champH + 14;
+        }
+        if (showLabels)
+            texts.push(label(v, road, roundLabel(layout, layout.rounds, o.roundNames, v), cx, y + 12, "middle"));
+        y += labelH;
+        boxes.push({ rect: { x: cx - wl / 2, y, w: wl, h: hl }, tie: layout.ties[layout.finalIndex], order: layout.sides[0].boxes[0].order, bye: null, byes: [], final: true, champion: champ });
+        y += hl;
+        if (withThird) {
+            thirdAtFoot(layout, y + 8, cx, wl, hl, v, road, boxes, texts);
+            y += 8 + 18 + hl + 8;
+        }
+        if (strays.length > 0)
+            othersBlock(layout, strays, y + 6, W0, pad, ows, OTHER_H, v, road, boxes, texts);
+        texts.push(...headings(v, o, W0, pad, poster));
+        return finish({ width: W0, height, boxes, links: [], texts, extras, detail: dl, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn, variant: V, em: { full: longest / 13, abbr: longestAbbr / 13, tag: tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 1))) : 0 } });
+    }
     // ----- the slot positions along t
     if (!vertical) {
         const sizes = [];
@@ -303,7 +425,7 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
         sizes.forEach((sz) => { starts.push(t); t += sz + gapT; });
         const width = Math.max(W0, total + 2 * pad);
         // ----- span positions
-        const top = pad + titleH + (hasGroups ? 28 : 0) + labelRoom;
+        const top = pad + titleH + (hasGroups ? groupRoom : 0) + labelRoom;
         const treeH = rows * rowStep;
         // The final sits at the middle of the rows; the champion above it and the third place below need room.
         const upNeed = (champ ? champH + 8 : 0) + 22 + finalH / 2;
@@ -354,6 +476,8 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
                 extras.push(...championBlock(layout.champion, cx, fy - champH / 2, champMark, trophyH, nameFont, o, v, ctx, poster));
             }
         }
+        if (V === "columns")
+            growColumns(layout, rects, false, S, treeH, top, height - pad - extraH0);
         if (showLabels) {
             for (const c of layout.columns) {
                 const name = roundLabel(layout, c, o.roundNames, v);
@@ -370,13 +494,17 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
                     return;
                 const ks = layout.columns.map((_, ci) => slotOfColumn(sd.key, ci));
                 const x0 = Math.min(...ks.map((k) => starts[k])), x1 = Math.max(...ks.map((k) => starts[k] + D));
-                texts.push(`<text class="tb-half" x="${num((x0 + x1) / 2)}" y="${num(top - (showLabels ? labelRoom + 12 : 14))}" font-size="${poster ? 16 : 15}" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(poster ? v.upper(sd.label) : sd.label)}</text>`);
+                const labelY = top - (showLabels ? labelRoom + 12 : 14);
+                if (o.headers === true)
+                    texts.push(headTile(poster ? v.upper(sd.label) : sd.label, (x0 + x1) / 2, x1 - x0, labelY, sd.key === "l" ? 0 : 1, layout.sides.length === 2));
+                else
+                    texts.push(`<text class="tb-half" x="${num((x0 + x1) / 2)}" y="${num(labelY)}" font-size="${poster ? 16 : 15}" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(poster ? v.upper(sd.label) : sd.label)}</text>`);
             });
         }
         // lines
         for (const t of layout.ties) {
             const p = layout.parent[t.index];
-            if (p === -1)
+            if (p === -1 || V === "shields")
                 continue;
             const a = rects.get(t.index), b = rects.get(p);
             if (!a || !b || layout.place[t.index] === "o")
@@ -392,10 +520,10 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
             thirdAtFoot(layout, height - pad - extraH0 + 6, width / 2, ow, OTHER_H, v, road, boxes, texts);
         othersBlock(layout, others, height - pad - extraH0 + thirdBlock + 6, width, pad, ow, OTHER_H, v, road, boxes, texts);
         texts.push(...headings(v, o, width, pad, poster));
-        return finish({ width, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn });
+        return finish({ width, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn, variant: V, em: { full: longest / 13, abbr: longestAbbr / 13, tag: tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 1))) : 0 } });
     }
     // ----- vertical: the rounds are rows. The left half is the top; the final is a band in the middle.
-    const groupBand = hasGroups ? 26 : 0;
+    const groupBand = hasGroups ? (o.headers === true ? 34 : 26) : 0;
     // On a tall page the champion sits at the top, as the page's first thing; the lines into the final must not run through it.
     const champTop = halves && champ ? champH + 14 : 0;
     const topT = pad + titleH + champTop + groupBand + (showLabels ? 14 : 0);
@@ -406,14 +534,14 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
     const othersV = othersHeight(others.length, W0, pad, ow, OTHER_H);
     // The height the page needs for boxes `h` high with `gap` between the rounds, and what it keeps for the final's band and the third-place match.
     const needOf = (h, gap) => {
-        const finalHere = detail === "mark" ? Math.max(h, 52) : h;
+        const finalHere = V === "columns" ? Math.max(h, finalH) : detail === "mark" ? Math.max(h, 52) : h;
         const centre = (showLabels ? 32 : 0) + 6 + finalHere + 14;
         const thirdV = bottomThird ? 18 + (road ? h : 52) + 16 : 0;
         const band = h + gap;
         return (halves ? topT + bandsPerSide * band + centre + bandsPerSide * band + groupBand + pad : topT + (nc + (champ ? 1 : 0)) * band + (champ ? champH : 0) + pad) + othersV + thirdV;
     };
     // The road look fits a tall page: the boxes are made lower until the rounds fit, or, with room to spare, the room left over is shared between the rounds.
-    if (road && size.height !== null) {
+    if (road && size.height !== null && V === null) {
         while (boxH > 40 && needOf(boxH, gapT) > size.height)
             boxH -= 2;
         const slack = size.height - needOf(boxH, gapT);
@@ -422,6 +550,21 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
         D = boxH;
         finalH = detail === "mark" ? Math.max(boxH, 52) : boxH;
     }
+    // The layouts of their own fill a tall page too: the boxes are made taller, and the rounds are spaced apart, until the page is as high as it was asked to be.
+    if (V !== null && size.height !== null && vertical) {
+        const cap = V === "series" ? (oneLine ? 52 : 60) : V === "columns" ? 150 : V === "shields" ? 110 : V === "rows" ? 96 : 80;
+        while (boxH < cap && needOf(boxH + 2, gapT) <= size.height) {
+            boxH += 2;
+            if (V !== "columns")
+                finalH = boxH;
+        }
+        D = boxH;
+        const slack = size.height - needOf(boxH, gapT);
+        if (slack > 0 && bandCount > 0)
+            gapT += Math.min(slack / bandCount, 56);
+        if (V !== "columns")
+            finalH = boxH;
+    }
     const centreBand = (showLabels ? 32 : 0) + 6 + finalH + 14;
     const thirdH2 = road ? boxH : 52;
     const thirdBlockV = bottomThird ? 18 + thirdH2 + 16 : 0;
@@ -467,6 +610,8 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
         const fr = rects.get(layout.finalIndex);
         extras.push(...championBlock(layout.champion, fr.x + fr.w / 2, fr.y + fr.h + 12, champMark, trophyH, nameFont, o, v, ctx, poster));
     }
+    if (V === "columns")
+        growColumns(layout, rects, true, S, treeW, pad, W0 - pad);
     if (showLabels) {
         layout.columns.forEach((c, ci) => {
             const name = roundLabel(layout, c, o.roundNames, v);
@@ -496,12 +641,15 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
             if (!sd.label)
                 return;
             const y = sd.key === "l" ? pad + titleH + champTop + 16 : totalT - pad - 2;
-            texts.push(`<text class="tb-half" x="${num(midX)}" y="${num(y)}" font-size="14" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(v.upper(sd.label))}</text>`);
+            if (o.headers === true)
+                texts.push(headTile(v.upper(sd.label), midX, W0 - 2 * pad, y, sd.key === "l" ? 0 : 1, layout.sides.length === 2));
+            else
+                texts.push(`<text class="tb-half" x="${num(midX)}" y="${num(y)}" font-size="14" font-weight="700" letter-spacing=".1em" text-anchor="middle">${esc(v.upper(sd.label))}</text>`);
         });
     }
     for (const t of layout.ties) {
         const p = layout.parent[t.index];
-        if (p === -1)
+        if (p === -1 || V === "shields")
             continue;
         const a = rects.get(t.index), b = rects.get(p);
         if (!a || !b || layout.place[t.index] === "o")
@@ -518,7 +666,39 @@ function planBracket(layout, o, v, size, vertical, ctx, road, path) {
         thirdAtFoot(layout, totalT - pad + 6, W0 / 2, Math.min(W0 - 2 * pad, road ? Math.max(boxW, 200) : 200), thirdH2, v, road, boxes, texts);
     othersBlock(layout, others, totalT - pad + thirdBlockV + 6, W0, pad, ow, OTHER_H, v, road, boxes, texts);
     texts.push(...headings(v, o, W0, pad, poster));
-    return finish({ width: W0, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn });
+    return finish({ width: W0, height, boxes, links: orderLinks(links), texts, extras, detail, vertical, road, path, fit: fitNow, notes: anyNotes, markScores, markCols, tags: tagsOn, codes: codesOn, variant: V, em: { full: longest / 13, abbr: longestAbbr / 13, tag: tagsOn ? Math.max(...layout.ties.flatMap((t) => [tagOf(t, 0), tagOf(t, 1)]).map((x) => boldWidth(x, 1))) : 0 } });
+}
+/**
+ * The columns layout's tall slots: a tie of a later round is made taller than the first round's, as tall as the room between its neighbours of the same column leaves (`base` times 1.55 for each round in, at most),
+ * on the same centre. `span` is the room across the tree, for a column with a single tie.
+ */
+function growColumns(layout, rects, vertical, base, span, lo, hi) {
+    const centre = (r) => (vertical ? r.x + r.w / 2 : r.y + r.h / 2);
+    for (const sd of layout.sides) {
+        layout.columns.forEach((col, ci) => {
+            const here = sd.boxes.filter((b) => b.round === col).map((b) => rects.get(b.i)).filter((r) => r !== undefined);
+            if (here.length === 0)
+                return;
+            const at = here.map(centre).sort((a, b) => a - b);
+            let gap = Infinity;
+            for (let i = 1; i < at.length; i++)
+                gap = Math.min(gap, at[i] - at[i - 1]);
+            const want = Math.max(base, Math.min(base * 1.55 ** ci, gap === Infinity ? span * 0.6 : gap - 8));
+            for (const r of here) {
+                const c = centre(r);
+                // Never past the room there is on either side of the centre.
+                const size = Math.max(Math.min(base, 2 * (c - lo), 2 * (hi - c)), Math.min(want, 2 * (c - lo), 2 * (hi - c)));
+                if (vertical) {
+                    r.x = c - size / 2;
+                    r.w = size;
+                }
+                else {
+                    r.y = c - size / 2;
+                    r.h = size;
+                }
+            }
+        });
+    }
 }
 /** A line's class: `tb-path` when both ties it joins are on the highlighted team's path. */
 function lineClass(path, from, to) {
@@ -675,7 +855,7 @@ function championBlock(team, cx, top, mark, trophyH, nameFont, o, v, ctx, poster
 }
 /** The ties that are not part of the tree (they lead nowhere near the final, or are round-robin games), drawn in a grid below it. */
 function othersOf(layout) {
-    return [...layout.other, ...layout.robin];
+    return [...layout.other, ...layout.robin, ...layout.playIn];
 }
 function othersHeight(count, width, pad, ow, oh) {
     if (!count)
@@ -706,7 +886,7 @@ function hrefOf(o, tie, side) {
     const url = side === undefined ? o.href(tie) : o.href(tie, side);
     return typeof url === "string" && safeHref(url) ? url.trim() : null;
 }
-function drawBox(p, plan, o, v, ctx, linked) {
+function drawBox(p, plan, o, v, ctx, linked, side) {
     const { rect, tie } = p;
     const { x, y, w, h } = rect;
     const detail = plan.detail;
@@ -738,7 +918,14 @@ function drawBox(p, plan, o, v, ctx, linked) {
             return inner;
         return anchor(url, `${team.name}: ${description}`, `<rect class="tb-hit" x="${num(rx)}" y="${num(ry)}" width="${num(rw)}" height="${num(rh)}" fill="transparent"/>${inner}`);
     };
-    if (detail === "mark" && plan.markCols) {
+    if (plan.variant !== null) {
+        const env = {
+            kind: plan.variant, x, y, w, h, tie, order: p.order, side, final: p.final, road, detail, vertical: plan.vertical, tags: plan.tags, codes: plan.codes, scoresOn, v, ctx, o,
+            cls, link: row, tagOf, em: plan.em,
+        };
+        parts.push(...paintVariant(env));
+    }
+    else if (detail === "mark" && plan.markCols) {
         // Two columns, each a stack: the seed tag, the mark, its three letters, the score. The marks are as large as the box lets the whole stack be, and every part is inside the box.
         const padX = 6, padY = 5;
         const colW = (w - 2 * padX) / 2;
@@ -876,7 +1063,9 @@ function drawBox(p, plan, o, v, ctx, linked) {
         }
     }
     const extra = tieClassOf(o, tie);
-    const cls2 = `tb-tie${p.final ? " tb-final" : ""}${p.champion ? " tb-has-champ" : ""}${plan.path.has(tie.index) ? " tb-on-path" : ""}${extra}`;
+    // The layouts of their own colour a half by its side: the first half (the left, or the top) is `tb-c0`, the second `tb-c1`.
+    const conf = plan.variant !== null && (side === "l" || side === "r") ? ` tb-c${side === "l" ? 0 : 1}` : "";
+    const cls2 = `tb-tie${p.final ? " tb-final" : ""}${p.champion ? " tb-has-champ" : ""}${plan.path.has(tie.index) ? " tb-on-path" : ""}${conf}${extra}`;
     const body = boxHref !== null ? anchor(boxHref, description, parts.join("")) : parts.join("");
     return `<g class="${cls2}"><title>${esc(description)}</title>${body}</g>`;
 }

package/dist/seeding.js

@@ -80,10 +80,12 @@ export function advanceWinners(matchups) {
             m.feeds.forEach((feed, k) => {
                 if (feed == null)
                     return;
-                const child = at.get(feed);
+                const child = at.get(typeof feed === "string" ? feed : feed.tie);
                 if (!child || child.winner === null)
                     return;
-                const team = child.sides[m.third ? (1 - child.winner) : child.winner];
+                // The loser goes on from a third-place match's feeders, and from a feed that asks for the loser (a play-in's).
+                const takesLoser = m.third || (typeof feed !== "string" && feed.result === "loser");
+                const team = child.sides[takesLoser ? (1 - child.winner) : child.winner];
                 const here = sides[k];
                 if (team && (here !== null && typeof here === "object" ? here.id : here) !== team.id) {
                     sides[k] = team.id;

package/dist/table.js

@@ -15,7 +15,7 @@ export function bracketTable(input, options = {}) {
     const w = v.words;
     const caption = options.caption ?? fill(layout.rounds === 1 ? w.summaryOne : w.summary, { n: v.number(layout.teams.length), r: v.number(layout.rounds) });
     const order = layout.ties
-        .filter((t) => t.round > 0 || layout.robin.includes(t.index))
+        .filter((t) => t.round > 0 || layout.robin.includes(t.index) || layout.playIn.includes(t.index))
         .sort((a, b) => Number(a.third) - Number(b.third) || a.round - b.round || (a.date < b.date ? -1 : a.date > b.date ? 1 : a.index - b.index));
     const dated = order.some((t) => v.date(t.date) !== null);
     const name = (t, k) => {
@@ -24,10 +24,13 @@ export function bracketTable(input, options = {}) {
         return t.winner === k ? `<strong>${text}</strong>` : text;
     };
     const score = (t) => (t.result.score ? fill(w.scoreText, { a: v.number(t.result.score[0]), b: v.number(t.result.score[1]) }) : "");
+    // Where a side comes from, in words, when the tie says so: "Loser of A v B".
+    const named = (i) => fill(w.tieVs, { a: layout.ties[i].sides[0]?.name ?? w.tbd, b: layout.ties[i].sides[1]?.name ?? w.tbd });
+    const origins = (t) => (t.from ?? []).flatMap((s) => (s ? [fill(s.result === "loser" ? w.loserOf : w.winnerOf, { name: named(s.tie) })] : []));
     const rows = order.map((t) => {
-        const roundText = t.third ? w.thirdPlace : t.round === 0 ? "" : roundLabel(layout, t.round, options.roundNames, v);
+        const roundText = t.third ? w.thirdPlace : t.playIn ? w.playIn : t.round === 0 ? "" : roundLabel(layout, t.round, options.roundNames, v);
         const date = dated ? `<td>${esc(v.date(t.date) ?? "")}</td>` : "";
-        return `<tr><th scope="row">${esc(roundText)}</th>${date}<td>${name(t, 0)}</td><td>${esc(score(t))}</td><td>${name(t, 1)}</td><td>${esc(noteLong(t, v).join(w.noteJoin))}</td></tr>`;
+        return `<tr><th scope="row">${esc(roundText)}</th>${date}<td>${name(t, 0)}</td><td>${esc(score(t))}</td><td>${name(t, 1)}</td><td>${esc([...noteLong(t, v), ...origins(t)].join(w.noteJoin))}</td></tr>`;
     });
     return [
         `<table class="${esc(options.className ?? "tb-table")}" lang="${esc(v.locale.code)}">`,

package/dist/theme.d.ts

@@ -34,7 +34,11 @@ export interface StyleParts {
     follow?: boolean;
     /** A background with a light and a dark picture in one drawing: the one that does not fit the look is hidden. */
     bgAuto?: boolean;
+    /** The rules of the layouts of their own (slots, shields, conference colours, header tiles, arrows, group cards). */
+    layout?: boolean;
 }
+/** The colours of the two halves (conferences) of the layouts that colour them, each with white letters on it: `--tb-conf-a` and `--tb-conf-b`. Both read 5 to 1 or more against white. */
+export declare const CONFERENCE_COLORS: readonly [string, string];
 /** The colours a background says to draw in (`backgroundSvg`'s `ink`): what `styleFor` takes in place of a look's own palette. */
 export interface BackgroundInks {
     light?: BackgroundInk;

package/dist/theme.js

@@ -10,6 +10,8 @@ export const ROAD_THEMES = Object.freeze({
     poster: { ring: "#f6f1e3", edge: "rgba(0,0,0,.5)", panel: "#1b2766", spine: "#d9b24c" },
 });
 const FONT = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Noto Sans CJK JP", Meiryo, sans-serif';
+/** The colours of the two halves (conferences) of the layouts that colour them, each with white letters on it: `--tb-conf-a` and `--tb-conf-b`. Both read 5 to 1 or more against white. */
+export const CONFERENCE_COLORS = Object.freeze(["#2457c5", "#b3261e"]);
 /** A palette and a road palette from a background's ink. */
 function fromInk(ink) {
     return [
@@ -53,6 +55,10 @@ function rules(p, r, poster, withFont, parts, side) {
     if (parts.chart === true) {
         list.push([[".tb-r-t"], `fill:${v("ink")};font-weight:800`], [[".tb-r-s", ".tb-r-e", ".tb-r-sub", ".tb-r-code", ".tb-r-vs", ".tb-r-dash"], `fill:${v("muted")};font-weight:700`], [[".tb-r-name", ".tb-r-n"], `fill:${v("ink")};font-weight:800`], [[".tb-r-n.tb-r-low"], `fill:${v("muted")}`], [[".tb-r-dim"], "opacity:.5"], [["text"], "font-variant-numeric:tabular-nums"]);
     }
+    if (parts.layout === true) {
+        const [ca, cb] = CONFERENCE_COLORS;
+        list.push([[".tb-slot"], `fill:${v("plain")};fill-opacity:.55;stroke:${v("edge")};stroke-width:1`], [[".tb-won .tb-slot"], `fill-opacity:.9;stroke:${v("win")};stroke-width:1.6`], [[".tb-lost .tb-slot"], "fill-opacity:.35"], [[".tb-emptybar"], `fill:${v("plain")};opacity:.8`], [[".tb-seed"], "font-variant-numeric:tabular-nums"], [[".tb-seedn"], `fill:${v("muted")};opacity:.85`], [[".tb-shield"], `fill:none;stroke:${v("edge")};stroke-width:1.4`], [[".tb-won .tb-shield"], `stroke:${v("win")};stroke-width:2.2`], [[".tb-shield.tb-empty"], `fill:${v("plain")};fill-opacity:.5`], [[".tb-vs", ".tb-code"], `fill:${v("muted")};font-weight:700`], [[".tb-c0 .tb-box"], `stroke:var(--tb-conf-a, ${ca});stroke-width:1.6`], [[".tb-c1 .tb-box"], `stroke:var(--tb-conf-b, ${cb});stroke-width:1.6`], [[".tb-atag"], `fill:${v("ink")}`], [[".tb-atag-t"], `fill:${v("bg")}`], [[".tb-c0 .tb-atag"], `fill:var(--tb-conf-a, ${ca})`], [[".tb-c1 .tb-atag"], `fill:var(--tb-conf-b, ${cb})`], [[".tb-c0 .tb-atag-t", ".tb-c1 .tb-atag-t"], "fill:#fff"], [[".tb-head"], `fill:${rv("panel", "panel")}`], [[".tb-head.tb-c0"], `fill:var(--tb-conf-a, ${ca})`], [[".tb-head.tb-c1"], `fill:var(--tb-conf-b, ${cb})`], [[".tb-head-t"], `fill:${v("ink")};font-weight:800`], [[".tb-head.tb-c0 + .tb-head-t", ".tb-head.tb-c1 + .tb-head-t"], "fill:#fff"], [[".tb-arrow"], `stroke:${v("line")};stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round`], [[".tb-arrow-loser"], "stroke-dasharray:5 4"], [[".tb-arrowhead"], `fill:${v("line")};stroke:none`], [[".tb-gcard"], `fill:${v("box")};stroke:${v("edge")};stroke-width:1`], [[".tb-gtile"], `fill:var(--tb-conf-a, ${ca})`], [[".tb-gtile-t"], "fill:#fff;font-weight:800"], [[".tb-ghead"], `fill:${v("muted")};font-weight:700`], [[".tb-gcell"], `fill:${v("ink")};font-variant-numeric:tabular-nums`], [[".tb-gcell-p"], "font-weight:800"], [[".tb-gname"], `fill:${v("ink")};font-weight:700`], [[".tb-qual"], `fill:${v("win")};fill-opacity:.16`], [[".tb-gsep"], `stroke:${v("edge")};stroke-width:1;stroke-opacity:.6`]);
+    }
     if (parts.follow === true) {
         list.push([[".tb-tie"], "opacity:.4"], [[".tb-tie.tb-on-path"], "opacity:1"], [[".tb-on-path .tb-box"], `stroke:${v("win")};stroke-width:2.2`], [[".tb-line"], "stroke-opacity:.25"], [[".tb-line.tb-path"], `stroke:${v("win")};stroke-width:4.5;stroke-opacity:1;stroke-linecap:round;stroke-dasharray:.1 9`]);
     }