@johnmorrisdotca/taisen-brackets 0.17.0 → 0.17.2

package/CHANGELOG.md

@@ -6,6 +6,22 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.17.2] - 2026-10-20
+
+Security fix.
+
+### Fixed
+
+- **The background's `id` option is made safe.** `backgroundSvg` (and the `background` option of the drawings that use it, which already passed a safe id) wrote the `id` it was given as it came into element ids and `url(#...)`, so a hostile `id` (`x"><script>…`) could break out of the attribute when `backgroundSvg` is called directly. It now keeps only letters, digits, `_` and `-` (every other character becomes `-`) and puts `bg-` in front of an id that does not start with a letter. An id that is already safe is unchanged. The shared module `family-backgrounds` is now version 1.0.1; `test/family-backgrounds.test.ts` draws every preset with eight hostile ids.
+
+## [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/family-backgrounds.d.ts

@@ -1,4 +1,4 @@
-export declare const FAMILY_BACKGROUNDS_VERSION = "1.0.0";
+export declare const FAMILY_BACKGROUNDS_VERSION = "1.0.1";
 /** The presets, by name. The five that end in a playing surface read as one: pitch (soccer), ice (hockey), hardwood (basketball), infield (baseball) and turf (football). */
 export declare const BACKGROUND_PRESETS: readonly ["midnight", "crimson", "royal", "emerald", "pitch", "ice", "hardwood", "infield", "turf", "ball-panels", "swirl", "waves", "glow", "floodlights", "confetti", "carbon", "aurora", "sunburst", "chevrons", "halftone", "argyle", "contour", "stardust", "mesh", "spotlight"];
 export type BackgroundPresetName = (typeof BACKGROUND_PRESETS)[number];
@@ -15,7 +15,7 @@ export interface BackgroundSvgOptions {
     intensity?: number;
     /** Moves the scattered parts (confetti, stars, scratches, contours). Default 1. */
     seed?: number;
-    /** The prefix of the ids the background writes. Default: a hash of its options. */
+    /** The prefix of the ids the background writes. Default: a hash of its options. Only letters, digits, `_` and `-` are kept (every other character becomes `-`), and `bg-` goes in front of one that does not start with a letter; a safe id is used as written. */
     id?: string;
 }
 /** The colours to draw over a background. Every text colour is checked against `dominant`, the colours the background mostly is, for a contrast of 4.5 to 1 (3 to 1 for `muted`). */

package/dist/family-backgrounds.js

@@ -8,7 +8,7 @@
 //   backgroundSvg("midnight", { width: 1080, height: 1350, theme: "dark" }) -> { defs, body, ink }
 //
 // `defs` goes inside the drawing's `<defs>`, `body` right after a plain rectangle of `ink.base`, and `ink` says which colours to draw text, lines, boxes and marks in.
-export const FAMILY_BACKGROUNDS_VERSION = "1.0.0";
+export const FAMILY_BACKGROUNDS_VERSION = "1.0.1";
 /** The presets, by name. The five that end in a playing surface read as one: pitch (soccer), ice (hockey), hardwood (basketball), infield (baseball) and turf (football). */
 export const BACKGROUND_PRESETS = [
     "midnight", "crimson", "royal", "emerald", "pitch", "ice", "hardwood", "infield", "turf", "ball-panels", "swirl", "waves", "glow",
@@ -58,6 +58,11 @@ function seeded(seed) {
         return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
     };
 }
+/** The caller's id made safe to write into an `id` attribute and a `url(#...)`: letters, digits, `_` and `-`, starting with a letter. An id that is already safe is unchanged. */
+function safeId(id) {
+    const clean = id.replace(/[^\w-]/g, "-");
+    return /^[A-Za-z]/.test(clean) ? clean : `bg-${clean}`;
+}
 /** A small stable hash of a string, as base 36. */
 function hashOf(text) {
     let h = 0x811c9dc5;
@@ -437,7 +442,7 @@ export function backgroundSvg(preset, options) {
         palette[1] = toHex(mix(parseColor(given[0]), dark ? BLACK : WHITE, 0.35));
     const intensity = clamp(options.intensity ?? 0.6, 0, 1);
     const k = intensity / 0.6;
-    const id = options.id ?? `bg${hashOf(JSON.stringify([preset, w, h, dark, given, options.angle, intensity, options.seed]))}`;
+    const id = options.id != null ? safeId(String(options.id)) : `bg${hashOf(JSON.stringify([preset, w, h, dark, given, options.angle, intensity, options.seed]))}`;
     const angle = options.angle ?? def.angle;
     const ground = { w, h, c: palette, k, rnd: seeded(options.seed ?? 1), id, dark, long: Math.max(w, h), short: Math.min(w, h) };
     const made = def.draw(ground);

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.2";

package/dist/version.js

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

package/package.json

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