@johnmorrisdotca/taisen-brackets 0.4.0 → 0.6.0

package/dist/road.draw.js

@@ -1,6 +1,7 @@
 // The road chart, drawn: the two finalists' big round marks with their names, the round names down the middle on a dotted road, each finalist's matches on its side as
 // the round marks of both teams with the score between them, and the group stage as a compact row at the foot. Each size has its own arrangement: `card`, `square` and
 // `phone` stack the finalists over the rounds; `wide` puts them at the two ends. Nothing is measured in a browser: type is set by estimates (`emWidth`).
+import { resolveBackground } from "./background.js";
 import { drawMark, markDefs } from "./marks.js";
 import { codeOf, decidedWords, nameOf, summaryOf } from "./road.model.js";
 import { SIZES } from "./render.js";
@@ -36,6 +37,7 @@ export function drawRoad(model, o, gid) {
         shape: o.markShape === "square" ? "square" : "round",
         look: "road",
         flags: o.flags,
+        flagHref: o.flagHref,
         theme: theme === "light" ? "light" : theme === "dark" || theme === "poster" ? "dark" : "inherit",
         flagCache: new Map(),
     };
@@ -232,9 +234,10 @@ export function drawRoad(model, o, gid) {
     if (model.subtitle !== undefined)
         head += text("tb-r-s", cx, pad + titleFit.height + subSize * 0.7, subSize, model.subtitle);
     const foot = endSize === 0 ? "" : text("tb-r-e", cx, H - pad - endSize * 0.2, endSize, note);
-    const defs = markDefs(ctx);
-    const style = theme === "none" ? "" : `<style>${styleFor(`.${gid}`, theme, { chart: true })}</style>`;
-    const bg = o.background === false ? "" : `<rect class="tb-bg" x="0" y="0" width="${num(W)}" height="${num(H)}"${theme === "none" ? ' fill="none"' : ""}/>`;
+    const picture = resolveBackground(o.background, theme, W, H, gid);
+    const defs = markDefs(ctx) + (picture?.defs ?? "");
+    const style = theme === "none" ? "" : `<style>${styleFor(`.${gid}`, theme, { chart: true, bgAuto: picture?.auto }, picture?.inks)}</style>`;
+    const bg = o.background === false ? "" : `<rect class="tb-bg" x="0" y="0" width="${num(W)}" height="${num(H)}"${theme === "none" ? ' fill="none"' : ""}/>${picture?.body ?? ""}`;
     const extra = o.className ? ` ${esc(o.className)}` : "";
     return [
         `<svg xmlns="http://www.w3.org/2000/svg" lang="${esc(model.voice.locale.code)}" class="taisen tb-road ${gid}${extra}" viewBox="0 0 ${num(W)} ${num(H)}" width="${num(W)}" height="${num(H)}" style="max-width:100%;height:auto" role="img" aria-labelledby="${gid}-t ${gid}-d" data-size="${size}">`,

package/dist/road.js

@@ -44,7 +44,7 @@ export function roadToFinal(input, options = {}) {
         const merged = { ...options, ...extra };
         check(merged);
         const m = readModel(input, merged);
-        const prefix = merged.id ?? `tb-${hash(JSON.stringify([m.voice.locale.code, m.finalists.map((t) => t.name), [...m.path[0].values()].map((v) => [v.round, v.mine, v.theirs]), [...m.path[1].values()].map((v) => [v.round, v.mine, v.theirs]), m.rounds, merged.size, merged.theme, merged.title, merged.subtitle, merged.final ?? null, merged.endnote, merged.winner, merged.codes, merged.markShape]))}`;
+        const prefix = merged.id ?? `tb-${hash(JSON.stringify([m.voice.locale.code, m.finalists.map((t) => t.name), [...m.path[0].values()].map((v) => [v.round, v.mine, v.theirs]), [...m.path[1].values()].map((v) => [v.round, v.mine, v.theirs]), m.rounds, merged.size, merged.theme, merged.title, merged.subtitle, merged.final ?? null, merged.endnote, merged.winner, merged.codes, merged.markShape, ...(typeof merged.background === "string" || typeof merged.background === "object" ? [merged.background] : [])]))}`;
         return drawRoad(m, merged, prefix);
     };
     return {

package/dist/road.types.d.ts

@@ -49,7 +49,7 @@ export interface RoadFinal {
 /** The sizes of the road chart are the bracket's: `card` (the default here), `square`, `wide` (the finalists at the two ends) and `phone`. */
 export type RoadSize = SizeName;
 /** What `roadToFinal` takes besides the finalists or the tournament. */
-export interface RoadOptions extends Pick<DrawOptions, "locale" | "words" | "teamName" | "roundNames" | "markShape" | "flags" | "theme" | "background" | "id" | "className"> {
+export interface RoadOptions extends Pick<DrawOptions, "locale" | "words" | "teamName" | "roundNames" | "markShape" | "flags" | "flagHref" | "theme" | "background" | "id" | "className"> {
     /** With a tournament: the finalist whose road is on the left (by team id); the other finalist is its opponent in the final. Left out, the first side of the final. */
     team?: SideId;
     /** The tournament, set large at the top. The language's "Road to the final" when missing. */

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/text.d.ts

@@ -7,7 +7,7 @@ export declare function esc(text: string | number): string;
  */
 export declare function textWidth(text: string, size: number): number;
 /** The text cut to fit a width, with an ellipsis where it was cut. */
-export declare function fit(text: string, size: number, width: number): string;
+export declare function fit(text: string, size: number, width: number, measure?: (text: string, size: number) => number): string;
 /** A short name for a small box: the initials of a name of several words ("NYR"), else its first three letters; capitals. */
 export declare function abbreviate(name: string): string;
 /** A small, stable hash of a string as lowercase base 36, for ids that depend on the content and nothing else. */

package/dist/text.js

@@ -29,13 +29,13 @@ export function textWidth(text, size) {
     return em * size;
 }
 /** The text cut to fit a width, with an ellipsis where it was cut. */
-export function fit(text, size, width) {
-    if (textWidth(text, size) <= width)
+export function fit(text, size, width, measure = textWidth) {
+    if (measure(text, size) <= width)
         return text;
     const chars = [...text];
-    while (chars.length > 1 && textWidth(`${chars.join("")}…`, size) > width)
+    while (chars.length > 1 && measure(`${chars.join("")}…`, size) > width)
         chars.pop();
-    return chars.length <= 1 && textWidth(text, size) > width * 2 ? "…" : `${chars.join("").trimEnd()}…`;
+    return chars.length <= 1 && measure(text, size) > width * 2 ? "…" : `${chars.join("").trimEnd()}…`;
 }
 /** A short name for a small box: the initials of a name of several words ("NYR"), else its first three letters; capitals. */
 export function abbreviate(name) {

package/dist/theme.d.ts

@@ -1,3 +1,4 @@
+import type { BackgroundInk } from "./family-backgrounds.ts";
 import type { ThemeName } from "./types.ts";
 /** The colours of one look. Each is the fallback of a CSS custom property of the same name: `--tb-ink` and so on. */
 export interface Palette {
@@ -31,10 +32,21 @@ export interface StyleParts {
     links?: boolean;
     /** A team's path is highlighted: the other ties are quieter and the path is dotted. */
     follow?: boolean;
+    /** A background with a light and a dark picture in one drawing: the one that does not fit the look is hidden. */
+    bgAuto?: boolean;
+    /** The 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;
+    dark?: BackgroundInk;
 }
 /**
  * The `<style>` text of a drawing. `auto` is the light look and, under `prefers-color-scheme: dark` or a page that says
  * `data-theme="dark"` on `<html>`, the dark one; `light`, `dark` and `poster` are one look always. Every colour can be
  * set from the page with a `--tb-*` custom property. `parts` adds the rules the road look, the road chart, links and a highlighted path need.
  */
-export declare function styleFor(scope: string, theme: Exclude<ThemeName, "none">, parts?: StyleParts): string;
+export declare function styleFor(scope: string, theme: Exclude<ThemeName, "none">, parts?: StyleParts, inks?: BackgroundInks): string;

package/dist/theme.js

@@ -10,8 +10,17 @@ 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 [
+        { bg: ink.base, ink: ink.text, muted: ink.muted, line: ink.line, box: ink.box, edge: ink.edge, win: ink.accent, gold: ink.accent, plain: ink.plain },
+        { ring: ink.ring, edge: ink.dark ? "rgba(0,0,0,.55)" : "rgba(0,0,0,.35)", panel: ink.panel, spine: ink.spine },
+    ];
+}
 /** The rules for one palette, each colour read from its custom property with the palette's value as the fallback. */
-function rules(p, r, poster, withFont, parts) {
+function rules(p, r, poster, withFont, parts, side) {
     const v = (name) => `var(--tb-${name}, ${p[name]})`;
     const rv = (name, css) => `var(--tb-${css}, ${r[name]})`;
     const road = parts.road === true || parts.chart === true;
@@ -38,7 +47,7 @@ function rules(p, r, poster, withFont, parts) {
         [[".tb-halo"], `paint-order:stroke;stroke:${v("bg")};stroke-width:4px;stroke-linejoin:round`],
     ];
     if (road) {
-        list.push([[".tb-edge"], `fill:none;stroke:${rv("edge", "mark-edge")}`], [[".tb-lost .tb-ring-r", ".tb-lost .tb-edge"], "opacity:.55"], [[".tb-panel"], `fill:${rv("panel", "panel")}`], [[".tb-lab"], `fill:${v("ink")};font-weight:700`], [[".tb-spine"], `stroke:${rv("spine", "spine")};fill:none;stroke-linecap:round`]);
+        list.push([[".tb-edge"], `fill:none;stroke:${rv("edge", "mark-edge")}`], [[".tb-lost .tb-ring-r", ".tb-lost .tb-edge"], "opacity:.55"], [[".tb-panel"], `fill:${rv("panel", "panel")}`], [[".tb-lab"], `fill:${v("ink")};font-weight:700`], [[".tb-spine"], `stroke:${rv("spine", "spine")};fill:none;stroke-linecap:round`], [[".tb-tagbox"], `fill:${rv("panel", "panel")}`], [[".tb-tag"], `fill:${v("ink")};font-weight:700`], [[".tb-code", ".tb-vs"], `fill:${v("muted")};font-weight:700`]);
     }
     if (parts.road === true) {
         list.push([[".tb-name"], "font-weight:700"], [[".tb-score"], "font-weight:800"], [[".tb-lost .tb-score"], `fill:${v("muted")};opacity:1`], [[".tb-line"], `stroke-linecap:round;stroke-linejoin:round;stroke-width:${poster ? 2 : 1.8};stroke-opacity:.55`]);
@@ -46,12 +55,20 @@ function rules(p, r, poster, withFont, parts) {
     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`]);
     }
     if (parts.links === true) {
         list.push([[".tb-link"], "cursor:pointer;outline:none"], [[".tb-link:hover .tb-box", ".tb-link:focus-visible .tb-box"], `stroke:${v("win")};stroke-width:2.5`], [[".tb-link:hover .tb-name", ".tb-link:focus-visible .tb-name"], "text-decoration:underline"], [[".tb-link:focus-visible"], `outline:2px solid ${v("win")};outline-offset:2px`]);
     }
+    if (parts.bgAuto === true)
+        list.push(side === "dark" ? [[".tb-bgl"], "display:none"] : [[".tb-bgd"], "display:none"]);
+    if (parts.bgAuto === true && side === "dark")
+        list.push([[".tb-bgd"], "display:inline"]);
     if (withFont)
         list.push([["text"], `font-family:var(--tb-font, ${FONT})`]);
     return list;
@@ -62,16 +79,20 @@ const write = (scope, list, before = "") => list.map(([sel, body]) => `${sel.map
  * `data-theme="dark"` on `<html>`, the dark one; `light`, `dark` and `poster` are one look always. Every colour can be
  * set from the page with a `--tb-*` custom property. `parts` adds the rules the road look, the road chart, links and a highlighted path need.
  */
-export function styleFor(scope, theme, parts = {}) {
+export function styleFor(scope, theme, parts = {}, inks = {}) {
+    // A look takes the ink of the picture drawn for it; a picture asked for in the other variant (`background.theme`) gives its ink to both.
+    const only = inks.light ?? inks.dark;
+    const [lp, lr] = (inks.light ?? only) ? fromInk((inks.light ?? only)) : [THEMES.light, ROAD_THEMES.light];
+    const [dp, dr] = (inks.dark ?? only) ? fromInk((inks.dark ?? only)) : [THEMES.dark, ROAD_THEMES.dark];
     if (theme === "light")
-        return write(scope, rules(THEMES.light, ROAD_THEMES.light, false, true, parts));
+        return write(scope, rules(lp, lr, false, true, parts, "light"));
     if (theme === "dark")
-        return write(scope, rules(THEMES.dark, ROAD_THEMES.dark, false, true, parts));
+        return write(scope, rules(dp, dr, false, true, parts, "dark"));
     if (theme === "poster")
-        return write(scope, rules(THEMES.poster, ROAD_THEMES.poster, true, true, parts));
-    const dark = rules(THEMES.dark, ROAD_THEMES.dark, false, false, parts);
+        return write(scope, only ? rules(dp, dr, true, true, parts, "dark") : rules(THEMES.poster, ROAD_THEMES.poster, true, true, parts, "dark"));
+    const dark = rules(dp, dr, false, false, parts, "dark");
     return [
-        write(scope, rules(THEMES.light, ROAD_THEMES.light, false, true, parts)),
+        write(scope, rules(lp, lr, false, true, parts, "light")),
         `@media (prefers-color-scheme: dark){\n${write(scope, dark, ':root:not([data-theme="light"]) ')}\n}`,
         write(scope, dark, ':root[data-theme="dark"] '),
     ].join("\n");

package/dist/types.d.ts

@@ -12,6 +12,8 @@ export interface Team {
     abbr?: string;
     /** The seed, shown beside the name when `seeds` is on. */
     seed?: number;
+    /** A tag for the road look's seed tags (`C1`, `WC2`, `M3`): written small beside the mark when `seeds` is on, in place of the number. A tie's `seeds` win over it. */
+    tag?: string;
     /**
      * The team's mark: a logo or a flag. Either the address of an image (`https://`, `data:image/…`, or a relative
      * path) or inline SVG markup (`<svg …>`; a round flag from `@johnmorrisdotca/hata` goes here as it is).
@@ -54,6 +56,11 @@ export type MatchupKind =
  | "aggregate"
 /** A drawn game and the game replayed: the last one decides. */
  | "replay";
+/** What takes a side of a tie: a tie's id (its winner, as `feeds` always meant) or `{ tie, result }`, which can name the tie's loser as well (a play-in's loser goes on to a decider). */
+export type Feed = string | {
+    tie: string;
+    result: "winner" | "loser";
+};
 /**
  * One tie: two sides and who went through. Everything but `sides` is optional, so that a bracket can be drawn from
  * what is known (the sides of a first round, a few results) and fill in as the games are played.
@@ -78,7 +85,7 @@ export interface Matchup {
      * Which ties feed this one: `feeds[0]` the one whose winner takes the first side, `feeds[1]` the second. Names the
      * tree outright, for a bracket whose sides are not known yet. Left out, a winner goes on to the next tie its team plays.
      */
-    feeds?: readonly [string | null, string | null];
+    feeds?: readonly [Feed | null, Feed | null];
     /** How the tie is contested. Left out: replay if a game replays, series if there is a `bestOf` or several games, else game. */
     kind?: MatchupKind;
     /** The length of the series (7 for a best-of-seven). */
@@ -99,7 +106,13 @@ export interface Matchup {
     walkover?: boolean;
     /** This is the third-place match: it leads nowhere and is drawn apart. */
     third?: boolean;
+    /** `"play-in"`: a game of a play-in (the NBA's) that is outside the rounds of the tree: its winner (and loser, see `feeds`) goes on to a place the tree's ties name. Drawn by the `playin` layout and, apart, under the other layouts' trees. */
+    stage?: "play-in";
+    /** The side playing at home (0 or 1), for the `at` wording of the `columns` layout: the home side is drawn second, after "AT". Left out, the second side. */
+    home?: 0 | 1;
     note?: string;
+    /** The seed tags of the two sides for this tie (`["C1", "WC2"]`), written beside the marks in the road look when `seeds` is on; a side's `Team.tag` is used where this has none. */
+    seeds?: readonly [string | number | null, string | number | null];
 }
 /** What a tie came to, worked out from its games. */
 export interface Result {
@@ -134,6 +147,19 @@ export interface Tie {
     third: boolean;
     walkover: boolean;
     note: string | null;
+    /** The seed tags given for the tie's sides (`Matchup.seeds`). */
+    seeds?: readonly [string | number | null, string | number | null];
+    /** Where each side comes from, when the matchup's `feeds` name it: another tie's winner or its loser. Left out for a tie that says nothing of the kind. */
+    from?: readonly [Source | null, Source | null];
+    /** The tie is a play-in game (`Matchup.stage`). */
+    playIn?: boolean;
+    /** The side at home (`Matchup.home`), when given. */
+    home?: 0 | 1;
+}
+/** Where a side of a tie comes from: the winner or the loser of the tie at `tie` (its index). */
+export interface Source {
+    tie: number;
+    result: "winner" | "loser";
 }
 /** Where the layout put a tie. */
 export type Place = "l" | "r" | "f" | "o";
@@ -185,6 +211,8 @@ export interface BracketLayout {
     /** Ties that lead nowhere near the final, and round-robin games. */
     other: number[];
     robin: number[];
+    /** The play-in games (`Matchup.stage`), kept out of the tree. */
+    playIn: number[];
     /** The third-place match, when there is one. */
     third: number | null;
     /** Where each tie is: a half, the final, or elsewhere; by tie index. */
@@ -291,6 +319,29 @@ export interface Words {
     /** `{name}`. */
     roadChampion: string;
     roadToPlay: string;
+    /** "vs": the tag between two sides of a tie in the `columns` layout, and between the shields. */
+    vs: string;
+    /** The word between the two sides of a tie of the `columns` layout that names the home side (`at: true`): "AT". */
+    at: string;
+    /** `{n}`: a group's name, "Group A" (`n` is the letter). */
+    groupName: string;
+    /** The heads of a group table: played, won, drawn, lost, goal difference, points. */
+    colPlayed: string;
+    colWon: string;
+    colDrawn: string;
+    colLost: string;
+    colDiff: string;
+    colPoints: string;
+    /** The heading over a bracket's play-in games. */
+    playIn: string;
+    /** `{a}`, `{b}`: the seeds of the two games a box takes the winner (or the loser) of: "Winner 9/10", "Loser 7/8". */
+    playInWinner: string;
+    playInLoser: string;
+    /** `{n}`: a seed's place, "Seed 7". */
+    seedSlot: string;
+    /** `{name}`: a side that is the winner or loser of another tie, in a sentence or a table: "Loser of {name}". */
+    winnerOf: string;
+    loserOf: string;
 }
 /** A language: its words, the names of the rounds (by their English names), and the tag `Intl` formats numbers and dates for. */
 export interface Locale {
@@ -343,7 +394,50 @@ export interface EmblemRequest {
 }
 /** A function from an emblem id and a request to an SVG string; `renderEmblem` of `@johnmorrisdotca/dougu-sports/emblems` is one. */
 export type EmblemRenderer = (id: string, options: EmblemRequest) => string;
+/** A background preset's name. */
+export type { BackgroundPresetName } from "./family-backgrounds.ts";
+import type { BackgroundPresetName } from "./family-backgrounds.ts";
+/** A preset, tuned: your own colours (hex or `rgb()`, the first two the ground), the gradient's angle, how strong the pattern is (0 to 1, default 0.6), a seed for the scattered parts, and which of its two variants. */
+export interface BackgroundOptions {
+    /** Default `midnight`. */
+    preset?: BackgroundPresetName;
+    colors?: readonly string[];
+    angle?: number;
+    intensity?: number;
+    seed?: number;
+    /** `light` or `dark`: the variant to draw. By default the one of the drawing's look. */
+    theme?: "light" | "dark";
+}
+/** Your own picture as the background: an image address (http(s), relative or `data:image/…`; anything else is refused), laid under a veil so the text reads. */
+export interface BackgroundImageOptions {
+    image: string;
+    /** `cover` (the default) fills the drawing; `contain` shows all of the picture. */
+    fit?: "cover" | "contain";
+    /** How dark (or, in a light look, how pale) the veil is, 0 to 1. Default 0.5. */
+    dim?: number;
+    theme?: "light" | "dark";
+}
+/** How the ties are drawn: `tree` (the default) is the bracket as ever; the others are other ways to draw the same ties. */
+export type LayoutName = "tree" | "rows" | "shields" | "update" | "columns" | "playin" | "series" | "groups";
 export interface DrawOptions extends LayoutOptions {
+    /**
+     * `tree` (the default): the halves meeting at the final. `rows`: each team a row, its name on the left and its mark on the right, a slot for the result toward the centre. `shields`: marks in shields with "vs",
+     * the matchups on both sides of the trophy. `update`: a compact score-update card. `columns`: tall slots that grow toward the centre, the conferences in two colours, "VS" (or "AT") on a tag, big seed numbers.
+     * `playin`: the play-in games with their winners and losers going on. `series`: a tall card, one line a series ("BOS 4-0 MIA"), the first half above and the second below. `groups`: the group-stage tables.
+     */
+    layout?: LayoutName;
+    /** Big title tiles (the halves' groups: West and East, AFC and NFC) over each half, in any layout: each half's `group` name in the colour of that half. Default false. */
+    headers?: boolean;
+    /** In the `columns` layout, write "AT" (the word `at` of the language) in place of "VS" between the two sides of a tie: the first side is the visitor and the second the home side (`Matchup.home` says otherwise). Default false. */
+    at?: boolean;
+    /** In the `groups` layout, the columns of a group's table: `points` (played, won, drawn, lost, goal difference, points) or `record` (won and lost, softball's). Default `points`. */
+    standings?: "points" | "record";
+    /** In the `groups` layout, how many teams of each group go through: their rows are marked. Default 0, none. */
+    qualify?: number;
+    /** Write the `<style>` into the drawing. Default true; false leaves it out, for a second drawing of a page that shares the first's (`styleScope`, `bracketStyle`). */
+    style?: boolean;
+    /** A class that carries this drawing's rules in place of its own: two drawings with the same `styleScope` take their colours from one `<style>`, and the second can leave it out (`style: false`). A word of letters, digits, `-` and `_`. */
+    styleScope?: string;
     /** `wide` 1200 by 675, `square` 1080 by 1080, `card` 1080 by 1350 (a tall post), `phone` 390 wide and as tall as it needs; or a size of your own. Default `wide`. */
     size?: SizeName | {
         width: number;
@@ -354,8 +448,16 @@ export interface DrawOptions extends LayoutOptions {
     detail?: Detail;
     /** `auto` follows the page's light or dark; `poster` is dark with gold lines; `none` writes no style, for your own CSS. Default `auto`. */
     theme?: ThemeName;
-    /** Draw a background. Default true; false for a transparent drawing. */
-    background?: boolean;
+    /**
+     * The background. `true` (the default) is the look's plain colour and `false` a transparent drawing. A preset's name (`"midnight"`, `"ice"`, see `BACKGROUND_PRESETS`) draws that
+     * poster background in the look's light or dark variant (`auto` draws both and shows the one that fits the page), and the text, lines, boxes and marks take the colours that
+     * read over it. An object tunes a preset (`{ preset, colors, angle, intensity, seed }`) or draws your own picture (`{ image, fit, dim }`).
+     */
+    background?: boolean | BackgroundPresetName | BackgroundOptions | BackgroundImageOptions;
+    /** In the road look, write a small `vs` between the two marks of a box of marks alone. Default false. */
+    vs?: boolean;
+    /** In the road look, write each team's three-letter code under its mark in a box of marks alone. Default false for a bracket (a chart's `codes` is on by default). */
+    codes?: boolean;
     title?: string;
     subtitle?: string;
     /** Names of the rounds, first round first (or just the last ones). Default: Final, Semi-finals, Quarter-finals, Round of 16… */
@@ -368,7 +470,7 @@ export interface DrawOptions extends LayoutOptions {
     roundLabels?: boolean;
     /** Show the scores. Default true. */
     scores?: boolean;
-    /** Show seeds before names. Default false. */
+    /** Show seeds: the number before the name in the classic look, and in the road look a small tag (`C1`, `WC2`: `Matchup.seeds`, else `Team.tag`, else `Team.seed`) beside each mark. Default false. */
     seeds?: boolean;
     /** `round` (the default), `square`, or `none` (names only). */
     markShape?: "round" | "square" | "none";
@@ -394,6 +496,16 @@ export interface DrawOptions extends LayoutOptions {
      * made from `@johnmorrisdotca/hata`. With none, or when it returns nothing for a code, the team's `mark` or its initials are drawn.
      */
     flags?: FlagRenderer;
+    /**
+     * The address of the flag a team's `flag` code names, for a flag that is a picture to load (a file on your own server) and not SVG to inline, which can be 80 kB for one flag. Tried where `flags` gives
+     * none; the address must be http(s), relative or `data:image/…`, and is written once as a symbol however many times the flag appears.
+     */
+    flagHref?: (code: string) => string | null | undefined;
+    /**
+     * A class for each tie's group, from the tie: `(tie) => tie.sides.some(inDivision) ? "mine" : "other"`. A word of letters, digits, `-` and `_` is added to the group's classes (anything else is left out),
+     * so that a page's own style can highlight or dim ties: `.mine .tb-box { stroke: … }`. `undefined` or an empty text adds none.
+     */
+    tieClass?: (tie: Tie) => string | null | undefined;
     /**
      * `classic` (the default) or `road`: the look of the road-to-the-final chart, with large round marks, big bold scores, the loser quiet, the
      * rounds named on pills and a dotted path. Every other option works in both.

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.4.0";
+export declare const VERSION = "0.6.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.4.0";
+export const VERSION = "0.6.0";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.4.0",
-  "description": "Taisen Brackets 対戦, knockout brackets as SVG: from a list of ties (games, best-of series, two legs, replays, byes, a third-place match) it works out the rounds and halves and draws the bracket with the halves meeting at the final, or left to right, wide, square, as a tall card or for a phone, in a classic or a road look (large round flags, big scores, a team's dotted path, a link on every box), in light, dark or a gold-on-navy poster look, with each team's logo or round flag, the champion in the centre, and an accessible table; and the road to the final of either finalist. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
+  "version": "0.6.0",
+  "description": "Taisen Brackets 対戦, knockout brackets as SVG: from a list of ties (games, best-of series, two legs, replays, byes, a third-place match) it works out the rounds and halves and draws the bracket with the halves meeting at the final, or left to right, wide, square, as a tall card or for a phone, in a classic or a road look (large round flags, big scores, a team's dotted path, a link on every box), in light, dark or a gold-on-navy poster look, in eight layouts (the tree, rows, shields, a score-update card, tall columns, the NBA's play-in, a series card and group tables), on one of twenty-five poster backgrounds (the playing surfaces of five sports among them) or your own, with each team's logo or round flag, the champion in the centre, and an accessible table; and the road to the final of either finalist. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
   "keywords": [
     "bracket",
     "tournament",
@@ -30,7 +30,9 @@
     "zero-dependencies",
     "browser",
     "node",
-    "itsutsu"
+    "itsutsu",
+    "play-in",
+    "group-stage"
   ],
   "homepage": "https://johnmorrisdotca.github.io/taisen-brackets/",
   "repository": {
@@ -67,6 +69,11 @@
       "types": "./dist/road-entry.d.ts",
       "import": "./dist/road-entry.js",
       "default": "./dist/road-entry.js"
+    },
+    "./backgrounds": {
+      "types": "./dist/backgrounds-entry.d.ts",
+      "import": "./dist/backgrounds-entry.js",
+      "default": "./dist/backgrounds-entry.js"
     }
   },
   "files": [
@@ -93,6 +100,7 @@
     "flags": "node scripts/make-flags.mjs",
     "site": "pnpm build && node scripts/site.mjs",
     "test:demo": "pnpm site && playwright test",
+    "images": "pnpm site && node scripts/screenshots.mjs",
     "screenshots": "pnpm site && node scripts/screenshots.mjs"
   },
   "peerDependencies": {