@johnmorrisdotca/taisen-brackets 0.17.0 → 0.17.1

package/CHANGELOG.md

@@ -6,6 +6,14 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.17.1] - 2026-10-20
+
+Security fix.
+
+### Fixed
+
+- **The `id` option is made safe in every drawing that takes one.** The judo drawings (`judoScoreboard`, `judoContestCard`, `judoMatQueue`, `judoRoadPanel`, and `drawBracket` with judo ties; 0.7.0 to 0.17.0) wrote the caller's `id` as it came into the `<style>` text, a class name and element ids, so a hostile `id` (`x"><script>…`, or `a}</style>…`) could break out of the style block or the attribute and put markup into the SVG. `drawBracket` and `roadToFinal` did the same. They now keep only letters, digits, `_` and `-` (every other character becomes `-`) and put the drawing's own prefix in front of an id that does not start with a letter, as the 0.15.0 boards already did. An id made of letters, digits, `_` and `-` that starts with a letter is unchanged, so most pages see no difference. `test/hostile-id.test.ts` draws every drawing that takes an `id` with six hostile ids.
+
 ## [0.17.0] - 2026-10-20
 
 Broadcast boards, step 3: the medal table.

package/dist/judo-board.js

@@ -3,7 +3,7 @@ import { judoMethodWord, judoSideLong } from "./judo-text.js";
 import { fill, voiceOf } from "./locales.js";
 import { drawMark, markDefs } from "./marks.js";
 import { JUDO_COLORS } from "./theme.js";
-import { capitals, emWidth, esc, fit, fitLines, hash, num } from "./text.js";
+import { capitals, emWidth, esc, fit, fitLines, hash, num, safeId } from "./text.js";
 /** The sizes: a TV's 1920 by 1080, a tablet on its side, 1280 by 800, and a tablet held upright, 800 by 1280. */
 export const JUDO_BOARD_SIZES = Object.freeze({
     tv: { width: 1920, height: 1080 },
@@ -148,7 +148,7 @@ export function judoScoreboard(contest, options = {}) {
     const osa = contest.osaekomi;
     if (osa && (!(osa.side === 0 || osa.side === 1) || !Number.isFinite(osa.seconds) || osa.seconds < 0))
         throw new RangeError("taisen-brackets: osaekomi is { side: 0 | 1, seconds } with seconds from 0");
-    const prefix = options.id ?? `jb-${hash(JSON.stringify([contest, options.size, options.style, theme, options.swap, options.coaches, v.locale.code, options.flags ? 1 : 0, options.flagHref ? 1 : 0, options.title]))}`;
+    const prefix = safeId(options.id, "jb") ?? `jb-${hash(JSON.stringify([contest, options.size, options.style, theme, options.swap, options.coaches, v.locale.code, options.flags ? 1 : 0, options.flagHref ? 1 : 0, options.title]))}`;
     const ctx = { radii: new Set(), symbols: new Map(), prefix, shape: "round", theme: "inherit", flagCache: new Map(), ...(options.flags ? { flags: options.flags } : {}), ...(options.flagHref ? { flagHref: options.flagHref } : {}) };
     const landscape = W >= H;
     const unit = Math.min(W, H);

package/dist/judo-sheets.js

@@ -1,7 +1,7 @@
 import { BLUE_PANEL, DARK, FONT, JUDO_BOARD_SIZES, LIGHT, WHITE_PANEL, bw, clampN, fitSize, rulesFor } from "./judo-board.js";
 import { fill, voiceOf } from "./locales.js";
 import { drawMark, markDefs } from "./marks.js";
-import { emWidth, esc, fit, fitLines, hash, num } from "./text.js";
+import { emWidth, esc, fit, fitLines, hash, num, safeId } from "./text.js";
 /** The IJF-style mat colours, in turn: red, green, yellow, purple, orange, teal. Each reads with the ink the board picks for it. */
 export const JUDO_MAT_COLORS = Object.freeze(["#d2232a", "#1e9c4c", "#e7b800", "#7a3fb4", "#e8741a", "#12877f"]);
 /** White or near-black, whichever reads better on a hex colour. */
@@ -47,7 +47,7 @@ export function frameOf(options, seed) {
     const theme = options.theme ?? "auto";
     if (theme !== "auto" && theme !== "light" && theme !== "dark")
         throw new RangeError(`taisen-brackets: a theme is "auto", "light" or "dark", not ${JSON.stringify(theme)}`);
-    const scope = options.id ?? `jb-${hash(JSON.stringify([seed, options.size, theme, options.swap, v.locale.code, options.flags ? 1 : 0, options.flagHref ? 1 : 0, options.title]))}`;
+    const scope = safeId(options.id, "jb") ?? `jb-${hash(JSON.stringify([seed, options.size, theme, options.swap, v.locale.code, options.flags ? 1 : 0, options.flagHref ? 1 : 0, options.title]))}`;
     const ctx = { radii: new Set(), symbols: new Map(), prefix: scope, shape: "round", theme: "inherit", flagCache: new Map(), ...(options.flags ? { flags: options.flags } : {}), ...(options.flagHref ? { flagHref: options.flagHref } : {}) };
     return { W: size.width, H: size.height, v, scope, theme, ctx, options };
 }

package/dist/render.js

@@ -5,7 +5,7 @@ import { cleanSvg, drawEmblem, drawMark, hasTrophy as hasTrophyOf, isEmblemId, m
 import { roundLabel } from "./rounds.js";
 import { styleFor } from "./theme.js";
 import { resolveBackground } from "./background.js";
-import { emWidth, esc, fit, hash, num } from "./text.js";
+import { emWidth, esc, fit, hash, num, safeId } from "./text.js";
 import { fill, voiceOf } from "./locales.js";
 import { paintVariant, seriesLineWidth } from "./layouts.js";
 import { drawGroups } from "./groups.js";
@@ -116,7 +116,7 @@ export function drawBracket(input, options = {}) {
     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, ...(t.judo ? [t.judo.method, t.judo.goldenScore, t.judo.seconds, t.judo.sides] : [])]), 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 prefix = safeId(options.id, "tb") ?? `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, ...(t.judo ? [t.judo.method, t.judo.goldenScore, t.judo.seconds, t.judo.sides] : [])]), 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 linked = { count: 0 };

package/dist/road.js

@@ -5,7 +5,7 @@
 import { SIZES } from "./render.js";
 import { drawRoad } from "./road.draw.js";
 import { nameOf, readModel, summaryOf, tableOf, totalsOf } from "./road.model.js";
-import { hash } from "./text.js";
+import { hash, safeId } from "./text.js";
 const check = (o) => {
     if (o.size !== undefined && !Object.prototype.hasOwnProperty.call(SIZES, o.size))
         throw new RangeError(`Unknown size "${String(o.size)}": use one of ${Object.keys(SIZES).join(", ")}`);
@@ -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, ...(typeof merged.background === "string" || typeof merged.background === "object" ? [merged.background] : [])]))}`;
+        const prefix = safeId(merged.id, "tb") ?? `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/text.d.ts

@@ -27,3 +27,8 @@ export interface FittedLines {
 export declare function fitLines(name: string, maxWidth: number, maxHeight: number, maxSize: number): FittedLines;
 /** A number written without float noise: at most two decimals, no trailing zeros. */
 export declare function num(n: number): string;
+/**
+ * A caller's `id` option made safe to use as a class name, an element id and a CSS selector: only letters, digits, `_` and `-` stay (every other character becomes `-`),
+ * and an id that does not start with a letter gets `fallback` in front (an id may not start with a digit, and a CSS selector may not either). Left out, it is `undefined`.
+ */
+export declare function safeId(id: unknown, fallback: string): string | undefined;

package/dist/text.js

@@ -106,3 +106,13 @@ export function num(n) {
     const r = Math.round(n * 100) / 100;
     return Object.is(r, -0) ? "0" : String(r);
 }
+/**
+ * A caller's `id` option made safe to use as a class name, an element id and a CSS selector: only letters, digits, `_` and `-` stay (every other character becomes `-`),
+ * and an id that does not start with a letter gets `fallback` in front (an id may not start with a digit, and a CSS selector may not either). Left out, it is `undefined`.
+ */
+export function safeId(id, fallback) {
+    if (id === undefined)
+        return undefined;
+    const clean = String(id).replace(/[^\w-]/g, "-");
+    return /^[A-Za-z]/.test(clean) ? clean : `${fallback}-${clean}`;
+}

package/dist/types.d.ts

@@ -636,7 +636,7 @@ export interface DrawOptions extends LayoutOptions {
     words?: Partial<Words>;
     /** The name to draw for a team in this language: `undefined` keeps `Team.names[locale]` or `Team.name`. `countryName(team.region, locale)` makes a country's name from Intl, with no list of your own. */
     teamName?: (team: Team, locale: Locale) => string | undefined;
-    /** Prefix for the drawing's ids. Default: a hash of the bracket and the options. */
+    /** Prefix for the drawing's ids. Default: a hash of the bracket and the options. Only letters, digits, `_` and `-` are kept (any other character becomes `-`), and an id that does not start with a letter gets the drawing's own prefix in front. */
     id?: string;
     /** Extra class names for the root `<svg>`. */
     className?: string;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.17.0";
+export declare const VERSION = "0.17.1";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.17.0";
+export const VERSION = "0.17.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/taisen-brackets",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "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",