@johnmorrisdotca/taisen-brackets 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -6,6 +6,23 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-10-14
+
+### Added
+
+- **Emblems for the trophy.** The `trophy` option also takes an emblem id such as `"trophy:hockey-cup"`, drawn by a function passed as the new `emblems` option: any `(id, { style, size, tint, theme }) => svg`, such as `renderEmblem` from `@johnmorrisdotca/dougu-sports/emblems`. The renderer is asked for the size the trophy has in the drawing and for `theme: "light"` or `"dark"` in those looks (`"dark"` for `poster`), else `"inherit"`; `emblemStyle` (`metal`, `line`, `color`) and `emblemTint` are passed on. What it returns is cleaned like any inline SVG, drawn in a nested `<svg class="tb-emblem">` that takes its ink from `--tb-ink`, and its English `<title>` is left out. With no renderer an emblem id draws nothing and takes no room; a renderer that throws or returns something that is not an `<svg>` draws no trophy.
+- `LEAGUE_EMBLEMS` and `PlayoffFormat.emblem`: each league's default emblem (NHL `trophy:hockey-cup`, NBA `trophy:basketball`, MLB `trophy:baseball`, NFL `trophy:football`, CFL `trophy:canadian-bowl`, MLS `trophy:cup`, World Cup `trophy:soccer-globe`), used only when a renderer is plugged in; `isEmblemId(value)`; the types `EmblemRenderer`, `EmblemRequest` and `EmblemStyle`.
+- `@johnmorrisdotca/dougu-sports` as an optional peer dependency (and a pinned development dependency, for the tests and the demo). The package still has no dependencies, imports nothing from it, and an inline SVG or an address given as `trophy` is drawn exactly as before.
+- The demo draws each league's emblem for its champion, with a "Trophy" switch and a Metal, Line or Colour choice; the emblems are loaded one module each from the Dougu Sports files the Pages build copies beside the page.
+
+### Changed
+
+- Every drawing's stylesheet has one more rule, `.tb-emblem{color:var(--tb-ink, …)}`.
+
+### Fixed
+
+- `docs/formats.md` titled the MLS section "undefined".
+
 ## [0.2.1] - 2026-10-14
 
 ### Added
@@ -52,7 +69,8 @@ First version.
 - A demo with real results read from spxn.com (the NHL 2024 playoffs, the World Cups of 2022, 1938 and 2026, the MLB 2022 postseason; sources and terms in NOTICE.md), two made-up examples (two-legged ties, a 32-team field) and a flags-only poster of the 2026 World Cup, in a playground that changes the size, look and shape.
 - Playoff formats checked against English Wikipedia, each era citing its articles (docs/formats.md). The year is the year the playoffs are played in.
 
-[Unreleased]: https://github.com/johnmorrisdotca/taisen-brackets/compare/v0.2.1...HEAD
+[Unreleased]: https://github.com/johnmorrisdotca/taisen-brackets/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/johnmorrisdotca/taisen-brackets/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/johnmorrisdotca/taisen-brackets/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/johnmorrisdotca/taisen-brackets/compare/v0.1.1...v0.2.0
 [0.1.1]: https://github.com/johnmorrisdotca/taisen-brackets/compare/v0.1.0...v0.1.1

package/NOTICE.md

@@ -16,6 +16,7 @@ The code of this package is under the MIT licence (see [LICENSE](LICENSE)). The
 | How the results were read | spxn.com's public API (a PostgREST service whose `api` schema is readable with a publishable key; the key is not kept in this repository), by `scripts/fetch-demo-data.mjs`, one request at a time, a second apart, retrieved 2026-10-14 | spxn.com is the same owner's site |
 | The demo's two-legged ties and its 32-team generic bracket | Made up for the demo: the clubs do not exist and the teams are "Team 1" to "Team 32" | Not real |
 | The demo's national flags (in `demo/flags-data.js`) | [Hata](https://github.com/johnmorrisdotca/hata) 1.5.0 (MIT code), a development dependency used only by `scripts/make-flags.mjs`. Each flag is a Wikimedia Commons file that Hata ships only when Commons states it public domain, CC0 or CC BY; the file, author and licence of each are in `FLAG_CREDITS` in that file and in Hata's manifest and NOTICE | Each flag's own licence; none of the flags used asks for a credit. Commons marks flags as official insignia, whose use some countries restrict independently of copyright |
+| The demo's trophies (`demo/emblems.js`, and the `dougu-sports/` files the Pages build copies beside the page) | [Dougu Sports](https://github.com/johnmorrisdotca/dougu-sports) 0.1.0, a development dependency and an optional peer: generic emblems drawn for that package, which carry no league's or federation's name or mark | MIT, same owner; its NOTICE is in the package |
 | The words of the languages (`src/locales.ts`) | The football terms (the rounds of the World Cup, extra time, the shoot-out, a replay, a walkover) were read on 2026-10-14 in the French, Spanish, German and Japanese Wikipedia articles on the World Cups of 2022, 2026 and 1938; the articles are cited in [docs/languages.md](docs/languages.md). The other words are written for this package; the French and Japanese were read by native-language reviewers, the Spanish and German were not | Wikipedia's text is CC BY-SA 4.0; only terms (single words and short phrases) are taken, no sentence or table, and the articles are credited in docs/languages.md |
 | The names of countries in each language | Not in the package: `countryName` asks `Intl.DisplayNames`, which holds Unicode CLDR's names; the demo passes it each team's ISO code. The home nations and the two states that no longer exist are written in `src/locales.ts` and `demo/data.js` | CLDR is under the Unicode licence (https://www.unicode.org/license.txt) |
 | The demo's page | Written for this package, with the family stylesheet `demo/family.css` | MIT |

package/README.md

@@ -93,7 +93,7 @@ Put the string in a page (`element.innerHTML = svg`), write it to a file, or sen
 - **Wide, square, phone**: 1200 by 675, 1080 by 1080, or 390 wide and as tall as it needs; the rounds are columns, or rows on a phone. Boxes show names and scores, abbreviations, or only the marks, whichever fits.
 - **Light, dark, poster**: every colour is a CSS custom property with a fallback, so the drawing follows the page's `prefers-color-scheme` or `data-theme` and can be restyled from outside.
 - **Team marks you supply**: a logo address or inline SVG, drawn round or square; a team with none is its initials on a colour. Round flags from [Hata](https://github.com/johnmorrisdotca/hata) go in as they are.
-- **The champion in the centre**, with a slot for your trophy.
+- **The champion in the centre**, with a slot for your trophy: your own SVG or image, or an emblem from [Dougu Sports](https://github.com/johnmorrisdotca/dougu-sports) (a hockey cup, a basketball trophy, a globe) through an optional plug-in, with no dependency added.
 - **Accessible**: `role="img"` with a title and a description, a tooltip sentence on every tie, and `bracketTable`.
 - **Formats by era**: NHL, NBA, MLB, NFL, CFL, MLS and FIFA World Cup round names, series lengths and byes.
 - **Five languages**: English, French, Japanese, Spanish and German, for every word the drawing, the tooltips, the description and the table write, with the football terms of each language; countries named by `Intl` from their ISO code; numbers and dates by `Intl`. Add a language of your own.
@@ -288,6 +288,24 @@ const svg = drawBracket([{ sides: ["A", "B"], score: [2, 1] }], { trophy });
 console.log(svg.includes('class="tb-gold"')); // true
 ```
 
+### Emblems for the trophy
+
+The trophy can also be an emblem id, such as `"trophy:hockey-cup"`, drawn by a function you plug in as `emblems`: any function from an id and a request (`{ style, size, tint, theme }`) to an SVG string. [`@johnmorrisdotca/dougu-sports`](https://github.com/johnmorrisdotca/dougu-sports) ([gallery](https://johnmorrisdotca.github.io/dougu-sports/)) has one, `renderEmblem`, and a cup, a basketball, a baseball, a football, a Canadian-football bowl and a soccer globe among its trophies. Taisen does not import it: it is an optional peer dependency, and the package has no dependencies of its own.
+
+```js
+import { drawBracket } from "@johnmorrisdotca/taisen-brackets";
+import { renderEmblem } from "@johnmorrisdotca/dougu-sports/emblems";
+
+const data = [{ sides: ["Aurora", "Harbour"], score: [2, 1] }];
+const svg = drawBracket(data, { emblems: renderEmblem, trophy: "trophy:hockey-cup" });
+console.log(svg.includes('class="tb-emblem"')); // true
+```
+
+- **The look follows the bracket.** The renderer is asked for the size the trophy has in the drawing, and for `theme: "light"` or `"dark"` when the bracket is in that look (`"dark"` for `poster`), else `"inherit"`, where the drawing's own colour (`--tb-ink`) is the ink. `emblemStyle` (`"metal"`, the default, `"line"` or `"color"`) and `emblemTint` (a hex colour) are passed on.
+- **Each league has a default.** `LEAGUE_EMBLEMS` names one (`nhl` the hockey cup, `nba` the basketball, `mlb` the baseball, `nfl` the football, `cfl` the Canadian bowl, `mls` a cup, `worldcup` the soccer globe), and `playoffFormat(league, year).emblem` carries it: `trophy: playoffFormat("nhl", 2024).emblem`.
+- **Without a renderer** an emblem id draws nothing and takes no room, and nothing throws; a trophy that is inline SVG or an address is drawn exactly as before, whatever `emblems` is. A renderer that throws, or returns something that is not an `<svg>`, draws no trophy. What it returns is cleaned like any inline SVG, and the emblem's own `<title>` (English only) is left out; the drawing's description names the champion in the bracket's language. `isEmblemId(value)` tells an emblem id from SVG and from an address.
+- **No global switch.** There is no module-level setting: a drawing is a pure function of its options, so the renderer is passed to each call.
+
 ### A table for readers the picture does not serve
 
 ```js
@@ -319,14 +337,15 @@ The string is built from your data, with every name escaped; do not put untruste
 
 Everything is exported from `@johnmorrisdotca/taisen-brackets`; the layout part from `/layout`, the formats from `/presets`. The types are in the package; each function's doc comment has its details.
 
-- `drawBracket(input, options?)`: the SVG string. `input` is a list of matchups, `{ matchups, teams }` or a layout. Options: `size`, `orientation`, `shape`, `detail`, `theme`, `background`, `title`, `subtitle`, `roundNames`, `roundLabels`, `scores`, `seeds`, `markShape`, `champion`, `trophy`, `thirdPlace`, `winnerHighlight`, `locale`, `words`, `teamName`, `groupOrder`, `id`, `className`.
+- `drawBracket(input, options?)`: the SVG string. `input` is a list of matchups, `{ matchups, teams }` or a layout. Options: `size`, `orientation`, `shape`, `detail`, `theme`, `background`, `title`, `subtitle`, `roundNames`, `roundLabels`, `scores`, `seeds`, `markShape`, `champion`, `trophy`, `emblems`, `emblemStyle`, `emblemTint`, `thirdPlace`, `winnerHighlight`, `locale`, `words`, `teamName`, `groupOrder`, `id`, `className`.
 - `layoutBracket(input, options?)`: the rounds, halves, rows, byes and results, without drawing. `shape: "ltr"` and `groupOrder` are its options.
 - `bracketTable(input, options?)`: the HTML table.
 - `describeBracket(input, options?)`: the sentence a screen reader gets.
 - `singleElimination(teams, options?)`, `advanceWinners(matchups)`, `standardSeeds(size)`: brackets for any number of teams.
 - `matchupsFromGames(games, options)`: matchups from a flat list of games.
 - `resolveMatchup`, `collectTeams`, `describeTie`, `noteParts`, `noteLong`: one tie's result, the teams of a bracket, a tie in a sentence.
-- `playoffFormat(league, year)`, `playoffEras(league)`, `LEAGUES`: the formats by era (`nhl`, `nba`, `mlb`, `nfl`, `cfl`, `mls`, `worldcup`).
+- `playoffFormat(league, year)`, `playoffEras(league)`, `LEAGUES`: the formats by era (`nhl`, `nba`, `mlb`, `nfl`, `cfl`, `mls`, `worldcup`). `LEAGUE_EMBLEMS`: each league's default emblem id.
+- `isEmblemId(value)`, and the types `EmblemRenderer`, `EmblemRequest`, `EmblemStyle`: the trophy emblems (see "Emblems for the trophy").
 - `roundName(remaining)`, `roundNamesFor(count)`, `roundLabel(layout, round, names, words)`: round names.
 - `LOCALES`, `LOCALE_CODES`, `defineLocale`, `localeOf`, `voiceOf`, `countryName`: the languages (see Languages), a language of your own, the formats and the names of countries from `Intl`. `localizedLayout(layout, voice)` is a layout with the team names in a language.
 - `SIZES`, `THEMES`, `WORDS`, `VERSION`: the sizes, the looks' colours, the English words, the version.

package/dist/index.d.ts

@@ -4,8 +4,8 @@ export { bracketTable } from "./table.ts";
 export type { TableOptions } from "./table.ts";
 export { THEMES } from "./theme.ts";
 export type { Palette } from "./theme.ts";
-export { cleanSvg, safeUrl } from "./marks.ts";
+export { cleanSvg, safeUrl, isEmblemId } from "./marks.ts";
 export { abbreviate } from "./text.ts";
 export { VERSION } from "./version.ts";
-export { playoffFormat, playoffEras, LEAGUES } from "./presets.ts";
+export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.ts";
 export type { League, PlayoffFormat, PlayoffRound } from "./presets.ts";

package/dist/index.js

@@ -2,7 +2,7 @@ export * from "./layout-entry.js";
 export { drawBracket, describeBracket, localizedLayout, SIZES } from "./render.js";
 export { bracketTable } from "./table.js";
 export { THEMES } from "./theme.js";
-export { cleanSvg, safeUrl } from "./marks.js";
+export { cleanSvg, safeUrl, isEmblemId } from "./marks.js";
 export { abbreviate } from "./text.js";
 export { VERSION } from "./version.js";
-export { playoffFormat, playoffEras, LEAGUES } from "./presets.js";
+export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.js";

package/dist/marks.d.ts

@@ -1,4 +1,4 @@
-import type { Team } from "./types.ts";
+import type { DrawOptions, Team } from "./types.ts";
 /**
  * Takes inline SVG markup from a caller and makes it safe to put inside a drawing: the outer `<svg>`'s viewBox is kept,
  * and scripts, event handlers, `<style>`, `<foreignObject>`, comments and `javascript:` addresses are removed. Returns the
@@ -8,6 +8,19 @@ export declare function cleanSvg(markup: string): {
     viewBox: string;
     inner: string;
 } | null;
+/** Whether a `trophy` value names an emblem (`"trophy:hockey-cup"`, `"medal:gold/line"`) rather than being inline SVG or an image address. */
+export declare function isEmblemId(value: string): boolean;
+/** Whether `drawBracket` has something to draw for this `trophy` and `emblems`: an emblem id needs a renderer; SVG and addresses do not. */
+export declare function hasTrophy(o: Pick<DrawOptions, "trophy" | "emblems">): boolean;
+/**
+ * The emblem a renderer makes for an id, cleaned like any inline SVG and with its `<title>` removed (the drawing says what it shows in its own
+ * words), or `null` when the renderer throws or returns something that is not an `<svg>`. The look decides the ink: `light` and `dark` are
+ * forced, `poster` is dark, and `auto` and `none` are `inherit`, which the drawing's stylesheet colours from `--tb-ink`.
+ */
+export declare function drawEmblem(id: string, size: number, o: Pick<DrawOptions, "emblems" | "emblemStyle" | "emblemTint" | "theme">): {
+    viewBox: string;
+    inner: string;
+} | null;
 /** Whether an image address is one a drawing will load: http(s), a relative path, or a `data:image/`. */
 export declare function safeUrl(url: string): boolean;
 export interface MarkContext {

package/dist/marks.js

@@ -24,6 +24,42 @@ export function cleanSvg(markup) {
         .replace(/(\s(?:xlink:)?href\s*=\s*)(["'])\s*javascript:[^"']*\2/gi, "$1$2#$2");
     return { viewBox: box, inner };
 }
+const EMBLEM_ID = /^[a-z][a-z0-9-]*:[a-z0-9][a-z0-9-]*(?:\/(?:metal|line|color))?$/;
+/** Whether a `trophy` value names an emblem (`"trophy:hockey-cup"`, `"medal:gold/line"`) rather than being inline SVG or an image address. */
+export function isEmblemId(value) {
+    return EMBLEM_ID.test(value.trim());
+}
+/** Whether `drawBracket` has something to draw for this `trophy` and `emblems`: an emblem id needs a renderer; SVG and addresses do not. */
+export function hasTrophy(o) {
+    const t = o.trophy?.trim();
+    if (!t)
+        return false;
+    return isEmblemId(t) ? typeof o.emblems === "function" : true;
+}
+/**
+ * The emblem a renderer makes for an id, cleaned like any inline SVG and with its `<title>` removed (the drawing says what it shows in its own
+ * words), or `null` when the renderer throws or returns something that is not an `<svg>`. The look decides the ink: `light` and `dark` are
+ * forced, `poster` is dark, and `auto` and `none` are `inherit`, which the drawing's stylesheet colours from `--tb-ink`.
+ */
+export function drawEmblem(id, size, o) {
+    if (typeof o.emblems !== "function")
+        return null;
+    const look = o.theme ?? "auto";
+    const request = { style: o.emblemStyle ?? "metal", size, theme: look === "light" ? "light" : look === "dark" || look === "poster" ? "dark" : "inherit" };
+    if (o.emblemTint)
+        request.tint = o.emblemTint;
+    let markup;
+    try {
+        markup = o.emblems(id.trim(), request);
+    }
+    catch {
+        return null;
+    }
+    if (typeof markup !== "string")
+        return null;
+    const svg = cleanSvg(markup);
+    return svg ? { viewBox: svg.viewBox, inner: svg.inner.replace(/<title\b[\s\S]*?<\/title\s*>/gi, "") } : null;
+}
 /** Readable text on a team colour: white on a dark one, near-black on a light one; `null` when the colour is not a hex one this can read. */
 function inkOn(color) {
     const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];

package/dist/presets-entry.d.ts

@@ -1,3 +1,3 @@
-export { playoffFormat, playoffEras, LEAGUES } from "./presets.ts";
+export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.ts";
 export type { League, PlayoffFormat, PlayoffRound } from "./presets.ts";
 export { roundName, roundNamesFor } from "./rounds.ts";

package/dist/presets-entry.js

@@ -1,2 +1,2 @@
-export { playoffFormat, playoffEras, LEAGUES } from "./presets.js";
+export { playoffFormat, playoffEras, LEAGUES, LEAGUE_EMBLEMS } from "./presets.js";
 export { roundName, roundNamesFor } from "./rounds.js";

package/dist/presets.d.ts

@@ -29,9 +29,16 @@ export interface PlayoffFormat {
     /** The names of the two halves, left first, or null where the bracket is not split in two. */
     groups: readonly [string, string] | null;
     note?: string;
+    /** The league's default emblem id (`LEAGUE_EMBLEMS`), for `trophy` with an `emblems` renderer. */
+    emblem: string;
     /** The English Wikipedia articles this entry was checked against (CC BY-SA 4.0; only facts are used). */
     sources: readonly string[];
 }
+/**
+ * The emblem each league's champion gets by default: an id of `@johnmorrisdotca/dougu-sports` (generic forms, no league's own mark). Pass it as
+ * `trophy` together with an `emblems` renderer; with no renderer it draws nothing. A cup for MLS because the MLS Cup is one.
+ */
+export declare const LEAGUE_EMBLEMS: Readonly<Record<League, string>>;
 /** The leagues that have a format here. */
 export declare const LEAGUES: readonly League[];
 /**

package/dist/presets.js

@@ -4,6 +4,19 @@
  * Wikipedia articles in its `sources` (2026-10-13); where a season did something of its own (a strike, a pandemic) it has
  * its own entry. The year is the year the playoffs are played in (the NHL's and the NBA's 2024 are the 2024 playoffs, of the 2023-24 season), except for the NFL, whose year is its season's: 2024 is the season played in 2024, with playoffs in January and February 2025.
  */
+/**
+ * The emblem each league's champion gets by default: an id of `@johnmorrisdotca/dougu-sports` (generic forms, no league's own mark). Pass it as
+ * `trophy` together with an `emblems` renderer; with no renderer it draws nothing. A cup for MLS because the MLS Cup is one.
+ */
+export const LEAGUE_EMBLEMS = Object.freeze({
+    nhl: "trophy:hockey-cup",
+    nba: "trophy:basketball",
+    mlb: "trophy:baseball",
+    nfl: "trophy:football",
+    cfl: "trophy:canadian-bowl",
+    mls: "trophy:cup",
+    worldcup: "trophy:soccer-globe",
+});
 /** The address of English Wikipedia articles, by title. */
 const wiki = (...titles) => titles.map((t) => `https://en.wikipedia.org/wiki/${t.replace(/ /g, "_")}`);
 const r = (name, bestOf = 7) => ({ name, bestOf });
@@ -76,9 +89,9 @@ export function playoffFormat(league, year) {
     const { years: _years, except: _except, ...rest } = hit;
     void _years;
     void _except;
-    return { ...rest, year };
+    return { ...rest, year, emblem: LEAGUE_EMBLEMS[league] };
 }
 /** Every era of a league, oldest first. */
 export function playoffEras(league) {
-    return ERAS[league].map(({ years: _y, except: _e, ...rest }) => { void _y; void _e; return { ...rest, year: rest.from }; });
+    return ERAS[league].map(({ years: _y, except: _e, ...rest }) => { void _y; void _e; return { ...rest, year: rest.from, emblem: LEAGUE_EMBLEMS[league] }; });
 }

package/dist/render.js

@@ -1,6 +1,6 @@
 import { layoutBracket } from "./layout.js";
 import { abbrOf, describeTie, noteParts } from "./matchup.js";
-import { cleanSvg, clipId, drawMark, safeUrl } from "./marks.js";
+import { cleanSvg, clipId, drawEmblem, drawMark, hasTrophy as hasTrophyOf, isEmblemId, safeUrl } from "./marks.js";
 import { roundLabel } from "./rounds.js";
 import { styleFor } from "./theme.js";
 import { esc, fit, hash, num, textWidth } from "./text.js";
@@ -88,7 +88,7 @@ function planBracket(layout, o, v, size, vertical, ctx) {
     const halves = layout.shape === "halves";
     const nc = layout.columns.length;
     const rows = layout.rows;
-    const hasTrophy = !!o.trophy && champ;
+    const hasTrophy = hasTrophyOf(o) && champ;
     // ----- slots along the rounds' axis (t): the columns of the left half, the centre, the columns of the right half.
     // Horizontal: t is x. Vertical: t is y, and the left half is the top.
     const slotCount = halves ? 2 * nc + 1 : nc + (champ || layout.finalIndex !== null ? 1 : 0);
@@ -372,10 +372,13 @@ function championBlock(team, cx, top, mark, trophyH, nameFont, o, v, ctx, poster
     let y = top;
     if (o.trophy && trophyH) {
         const t = o.trophy.trim();
-        const svg = t.startsWith("<") ? cleanSvg(t) : null;
-        if (svg)
+        const emblem = isEmblemId(t) ? drawEmblem(t, Number(num(trophyH)), o) : null;
+        const svg = emblem ? null : t.startsWith("<") ? cleanSvg(t) : null;
+        if (emblem)
+            out.push(`<svg class="tb-emblem" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" viewBox="${esc(emblem.viewBox)}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${emblem.inner}</svg>`);
+        else if (svg)
             out.push(`<svg class="tb-gold" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" viewBox="${esc(svg.viewBox)}" preserveAspectRatio="xMidYMid meet">${svg.inner}</svg>`);
-        else if (safeUrl(t))
+        else if (!isEmblemId(t) && safeUrl(t))
             out.push(`<image href="${esc(t)}" x="${num(cx - trophyH / 2)}" y="${num(y)}" width="${num(trophyH)}" height="${num(trophyH)}" preserveAspectRatio="xMidYMid meet"/>`);
         y += trophyH + 6;
     }

package/dist/theme.js

@@ -23,6 +23,7 @@ function rules(p, poster, withFont) {
         [[".tb-initials"], `fill:${v("ink")}`],
         [[".tb-half"], `fill:${v("ink")}`],
         [[".tb-gold"], `fill:${v("gold")}`],
+        [[".tb-emblem"], `color:${v("ink")}`],
         [[".tb-champ .tb-ring"], `stroke:${v("gold")};stroke-width:3`],
         [[".tb-champ-label"], `fill:${v("gold")}`],
         [[".tb-halo"], `paint-order:stroke;stroke:${v("bg")};stroke-width:4px;stroke-linejoin:round`],

package/dist/types.d.ts

@@ -279,6 +279,20 @@ export interface Size {
 }
 /** How much a box shows: both names and scores, an abbreviation and the score, or only the marks. */
 export type Detail = "auto" | "full" | "compact" | "mark";
+/** How an emblem is drawn; the names are those of `@johnmorrisdotca/dougu-sports`. */
+export type EmblemStyle = "metal" | "line" | "color";
+/** What `drawBracket` asks an `emblems` renderer for. */
+export interface EmblemRequest {
+    style: EmblemStyle;
+    /** Width and height in pixels. */
+    size: number;
+    /** The colour of the main part, when `emblemTint` is set. */
+    tint?: string;
+    /** `light` or `dark` for a bracket in that look (`poster` is dark); `inherit` for `auto` and `none`, where the drawing's stylesheet or the page sets the ink. */
+    theme: "inherit" | "light" | "dark";
+}
+/** 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;
 export interface DrawOptions extends LayoutOptions {
     /** `wide` 1200 by 675, `square` 1080 by 1080, `phone` 390 wide and as tall as it needs; or a size of your own. Default `wide`. */
     size?: SizeName | {
@@ -310,8 +324,21 @@ export interface DrawOptions extends LayoutOptions {
     markShape?: "round" | "square" | "none";
     /** Show the champion in the centre once the final is played. Default true. */
     champion?: boolean;
-    /** A trophy for the centre: inline SVG or an image address. Drawn above the champion. */
+    /**
+     * A trophy for the centre, drawn above the champion: inline SVG, an image address, or (with `emblems`) an emblem id such as
+     * `"trophy:hockey-cup"`. An emblem id with no `emblems` renderer draws nothing and takes no room.
+     */
     trophy?: string;
+    /**
+     * Draws the emblem a `trophy` id names: any function from an id and a request to an SVG string, such as `renderEmblem` from
+     * `@johnmorrisdotca/dougu-sports/emblems`. Called once per champion, with the size the trophy has in the drawing. Its SVG is cleaned
+     * like any inline SVG; a renderer that throws, or returns something that is not an `<svg>`, draws no trophy.
+     */
+    emblems?: EmblemRenderer;
+    /** The style an emblem is drawn in: `metal` (the default), `line` or `color`. */
+    emblemStyle?: EmblemStyle;
+    /** A colour for the emblem's main part (a hex colour or `rgb()`), passed to the renderer as `tint`. */
+    emblemTint?: string;
     /** Where the third-place match goes: `below` the final (the default) or `hide`. */
     thirdPlace?: "below" | "hide";
     /** Highlight the side that went through. Default true. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.1";
+export declare const VERSION = "0.3.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.2.1";
+export const VERSION = "0.3.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.2.1",
+  "version": "0.3.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 or for a phone, 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. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
   "keywords": [
     "bracket",
@@ -90,8 +90,17 @@
     "test:demo": "pnpm site && playwright test",
     "screenshots": "pnpm site && node scripts/screenshots.mjs"
   },
+  "peerDependencies": {
+    "@johnmorrisdotca/dougu-sports": ">=0.1.0 <1"
+  },
+  "peerDependenciesMeta": {
+    "@johnmorrisdotca/dougu-sports": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
+    "@johnmorrisdotca/dougu-sports": "0.1.0",
     "@johnmorrisdotca/hata": "1.5.0",
     "@playwright/test": "^1.63.0",
     "@types/node": "^24.0.0",