@johnmorrisdotca/taisen-brackets 0.17.1 → 0.17.2

package/CHANGELOG.md

@@ -6,6 +6,14 @@ 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.

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

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

package/dist/version.js

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

package/package.json

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