@johnmorrisdotca/dougu-sports 0.3.1 → 0.4.0

package/dist/emblems/ball/ball.face.js

@@ -0,0 +1,287 @@
+// The print on a puck's top face: the designs (a Canadian flag with its country below it, a red leaf, a white face with red bands, stars and stripes, a navy face with rings, a player's name and number, a made-up
+// signature, a generic souvenir) and the options that change them. The face is drawn in its own units, a disc of radius 1 whose up is up, and ball.print.ts lays that disc on the top of the puck in 3D. All of it
+// is our own drawing: our own leaf, our own flags, our own lettering (ball.letters.ts) and no mark, name or wordmark of a team, a league or a maker. Imports only this folder's helpers.
+import { hexOf, num, readColour } from "./ball.core.js";
+import { FLAG, LEAF_PATH, canadaFlag, star, starsAndStripes, usaFlag } from "./ball.art.js";
+import { safeImage } from "./ball.image.js";
+import { arcPath, fitSize, linePath } from "./ball.letters.js";
+import { signaturePath } from "./ball.signature.js";
+const LOOKS = {
+    canada: { field: "#fbf8f2", ring: "#c4202d", ink: "#ffffff", accent: FLAG.red, signature: "#1b1b1b" },
+    "canada-red": { field: FLAG.red, ring: "#1d222b", ink: "#ffffff", accent: "#ffffff", signature: "#e8b923" },
+    "canada-white": { field: "#fbf8f2", ring: "#c4202d", ink: "#c4202d", accent: FLAG.red, signature: "#1b1b1b" },
+    usa: { field: "#ffffff", ring: "#0f2a5c", ink: "#ffffff", accent: FLAG.usRed, signature: "#1b1b1b" },
+    "usa-navy": { field: "#0f2a5c", ring: "#b31942", ink: "#ffffff", accent: "#ffffff", signature: "#e8b923" },
+    player: { field: "#1f4e8c", ring: "#0d2347", ink: "#ffffff", accent: "#f2b705", signature: "#e8b923" },
+    souvenir: { field: "#f4f1e8", ring: "#13325e", ink: "#ffffff", accent: "#c4202d", signature: "#1b1b1b" },
+};
+/** The words and the signature a design starts with; the caller's own options replace them. */
+const WORDS = {
+    canada: { flag: "ca", text: "CANADA", ringText: ["CANADA · ICE HOCKEY", "SOUVENIR PUCK"] },
+    "canada-red": { text: "CANADA", ringText: ["CANADA · ICE HOCKEY", "SOUVENIR PUCK"] },
+    "canada-white": { text: "CANADA", ringText: false },
+    usa: { text: "USA", ringText: ["UNITED STATES · ICE HOCKEY", "SOUVENIR PUCK"] },
+    "usa-navy": { text: "USA", ringText: ["UNITED STATES · ICE HOCKEY", "SOUVENIR PUCK"] },
+    player: { name: "MORRIS", number: 23, ringText: ["", "ICE HOCKEY"] },
+    souvenir: { text: "SOUVENIR", ringText: ["ICE HOCKEY · COLLECTOR EDITION", ""] },
+};
+/** A text from outside made safe: control characters out, 24 characters a line, one line, or `undefined` when nothing is left. */
+const cleanText = (value, max = 24) => {
+    if (typeof value !== "string" && typeof value !== "number")
+        return undefined;
+    const text = [...String(value).replace(/\p{Cc}/gu, " ").replace(/\s+/g, " ").trim()].slice(0, max).join("");
+    return text === "" ? undefined : text;
+};
+const colourOf = (value) => {
+    const rgb = typeof value === "string" ? readColour(value) : undefined;
+    return rgb === undefined ? undefined : hexOf(rgb);
+};
+const DESIGNS = Object.keys(LOOKS);
+/** The face, ready to draw: the design's words and colours under the caller's. `base` is the design a puck's own id starts from. */
+function resolve(face, base, own) {
+    const f = typeof face === "object" && face !== null ? face : {};
+    const design = (typeof f.design === "string" && DESIGNS.includes(f.design) ? f.design : own?.design ?? base);
+    const words = { ...WORDS[design], ...own, ...definedOnly(f) };
+    const look = { ...LOOKS[design] };
+    for (const source of [own?.colors, f.colors]) {
+        const list = Array.isArray(source) ? { field: source[0], ring: source[1], ink: source[2], accent: source[3], signature: source[4] } : source;
+        for (const key of ["field", "ring", "ink", "accent", "signature"]) {
+            const c = colourOf(list?.[key]);
+            if (c !== undefined)
+                look[key] = c;
+        }
+    }
+    const ringText = words.ringText;
+    const ring = ringText === false ? undefined : typeof ringText === "string" ? [cleanText(ringText, 32) ?? "", ""] : Array.isArray(ringText) ? [cleanText(ringText[0], 32) ?? "", cleanText(ringText[1], 32) ?? ""] : undefined;
+    const number = typeof words.number === "number" || typeof words.number === "string" ? String(words.number).replace(/[^A-Za-z0-9]/g, "").slice(0, 3).toUpperCase() : "";
+    const sig = words.signature;
+    return {
+        design,
+        look,
+        image: typeof words.image === "string" ? words.image : undefined,
+        flag: typeof words.flag === "string" ? words.flag.trim().toLowerCase().slice(0, 12) : undefined,
+        flags: typeof words.flags === "function" ? words.flags : undefined,
+        text: cleanText(words.text),
+        ring,
+        number: number === "" ? undefined : number,
+        name: cleanText(words.name, 14),
+        signature: sig === false || sig === undefined || sig === null ? undefined : typeof sig === "number" ? (Number.isFinite(sig) ? sig : undefined) : cleanText(sig, 40),
+    };
+}
+/** A face's own fields that are set (a field of `undefined` does not replace the design's). */
+const definedOnly = (face) => Object.fromEntries(Object.entries(face).filter(([, v]) => v !== undefined && !(typeof v === "number" && !Number.isFinite(v))));
+/** The ink of one line of lettering, with the outline under it when there is one. */
+function word(text, o, x, y, fill, outline, outlineWidth = 0) {
+    const d = linePath(text, o, x, y);
+    const join = ` fill="none" stroke-linejoin="miter" stroke-miterlimit="2"`;
+    return (outline === undefined ? "" : `<path d="${d}"${join} stroke="${outline}" stroke-width="${num(o.weight * o.size + outlineWidth, 3)}"/>`) + `<path d="${d}"${join} stroke="${fill}" stroke-width="${num(o.weight * o.size, 3)}"/>`;
+}
+/** The letters of the ring, on the top and on the bottom, set on the circle of radius `r` with letters `size` tall, in the ink. */
+function ringLetters(ring, r, size, ink) {
+    const spec = { weight: 0.17, wide: 1.12, track: 0.08 };
+    let out = "";
+    const set = (text, centre, inside) => {
+        if (text === "")
+            return;
+        const s = Math.min(size, fitSize(text, spec, r * 2.3, size));
+        const o = { ...spec, size: s };
+        out += `<path d="${arcPath(text, o, r, centre, inside)}" fill="none" stroke="${ink}" stroke-width="${num(o.weight * s, 3)}" stroke-linejoin="miter" stroke-miterlimit="2"/>`;
+    };
+    set(ring[0], 0, false);
+    set(ring[1], 180, true);
+    return out;
+}
+/** The disc's flat ground, and the ring band when there is one (inner radius `ri`). */
+const ground = (look, ringed, ri) => `<circle r=".97" fill="${look.field}"/>` + (ringed ? `<path d="M0-.97A.97.97 0 1 1 0 .97A.97.97 0 1 1 0-.97ZM0-${ri}A${ri} ${ri} 0 1 0 0 ${ri}A${ri} ${ri} 0 1 0 0-${ri}Z" fill="${look.ring}" fill-rule="evenodd"/>` : "");
+/** What the picture of a face is: a safe image fitted into a box, or `undefined`. The id prefix keeps two faces in a page apart. */
+function picture(f, prefix, cx, cy, w, h) {
+    const fit = (img, tag) => {
+        const [x, y, bw, bh] = img.box;
+        const k = Math.min(w / bw, h / bh);
+        const cid = `${prefix}${tag}c`;
+        const t = `translate(${num(cx - (x + bw / 2) * k, 3)} ${num(cy - (y + bh / 2) * k, 3)}) scale(${num(k, 5)})`;
+        return { defs: `<clipPath id="${cid}"><rect x="${num(x, 3)}" y="${num(y, 3)}" width="${num(bw, 3)}" height="${num(bh, 3)}"/></clipPath>`, body: `<g transform="${t}" clip-path="url(#${cid})" color="${f.look.accent}">${img.markup}</g>`, width: bw * k, height: bh * k };
+    };
+    if (f.image !== undefined) {
+        const img = safeImage(f.image, `${prefix}i`);
+        if (img !== undefined)
+            return fit(img, "i");
+    }
+    if (f.flag !== undefined) {
+        const code = f.flag;
+        if (f.flags !== undefined) {
+            let svg;
+            try {
+                svg = f.flags(code, { shape: "4:3", size: 120, theme: "light" });
+            }
+            catch {
+                svg = undefined;
+            }
+            const img = safeImage(svg, `${prefix}f`);
+            if (img !== undefined)
+                return fit(img, "f");
+        }
+        if (code === "ca")
+            return { defs: "", body: canadaFlag(cx, cy, Math.min(w, h * 2)) + `<rect x="${num(cx - Math.min(w, h * 2) / 2, 3)}" y="${num(cy - Math.min(w, h * 2) / 4, 3)}" width="${num(Math.min(w, h * 2), 3)}" height="${num(Math.min(w, h * 2) / 2, 3)}" fill="none" stroke="#9a9a9a" stroke-width=".008"/>`, width: Math.min(w, h * 2), height: Math.min(w, h * 2) / 2 };
+        if (code === "us")
+            return { defs: "", body: usaFlag(cx, cy, Math.min(w, h * 1.9)), width: Math.min(w, h * 1.9), height: Math.min(w, h * 1.9) / 1.9 };
+    }
+    return undefined;
+}
+const LETTERS = { weight: 0.22, wide: 1.32, slant: 0.1, track: 0.02 };
+/** The middle of the face in the style of any design: a picture (if there is one) with the words under it, or the words alone, or a number, or a star. `ri` is the radius of the open disc. */
+function middle(f, prefix, ri, ink, outline) {
+    const pic = picture(f, prefix, 0, 0, ri * 1.3, ri * 0.82);
+    const text = f.text;
+    const number = f.number;
+    let defs = "";
+    let body = "";
+    if (number !== undefined) {
+        const s = fitSize(number, LETTERS, ri * 1.3, ri * 1.0);
+        body += word(number, { ...LETTERS, size: s }, 0, -0.02, f.look.accent, outline ?? ink, s * 0.1);
+        if (text !== undefined)
+            body += word(text, { ...LETTERS, size: fitSize(text, LETTERS, ri * 1.2, ri * 0.18) }, 0, ri * 0.74, ink);
+        return { defs, body };
+    }
+    if (pic !== undefined) {
+        const withText = text !== undefined;
+        const dy = withText ? -ri * 0.2 : 0;
+        const placed = picture(f, prefix, 0, dy, ri * (withText ? 1.2 : 1.5), ri * (withText ? 0.8 : 1.4));
+        defs += placed.defs;
+        body += placed.body;
+        if (withText) {
+            const y = dy + placed.height / 2 + ri * 0.26;
+            const s = fitSize(text, LETTERS, Math.sqrt(Math.max(0.01, ri * ri - y * y)) * 1.85, ri * 0.2);
+            body += word(text, { ...LETTERS, size: s }, 0, y, ink);
+        }
+        return { defs, body };
+    }
+    if (text !== undefined && f.design !== "souvenir") {
+        const s = fitSize(text, LETTERS, ri * 1.6, ri * 0.5);
+        body += word(text, { ...LETTERS, size: s }, 0, 0, ink, outline, s * 0.12);
+        return { defs, body };
+    }
+    if (text !== undefined) {
+        body += star(0, -ri * 0.2, ri * 0.4, f.look.accent);
+        body += word(text, { ...LETTERS, size: fitSize(text, LETTERS, ri * 1.3, ri * 0.2) }, 0, ri * 0.5, ink);
+        return { defs, body };
+    }
+    body += star(0, 0, ri * 0.5, f.look.accent);
+    return { defs, body };
+}
+/** A signature across the lower half of the face. */
+function signed(f) {
+    if (f.signature === undefined)
+        return "";
+    const k = 1.12;
+    const sw = 0.034 / k;
+    return `<path d="${signaturePath(f.signature)}" transform="translate(.02 .2) rotate(-9) scale(${k})" fill="none" stroke="${f.look.signature}" stroke-width="${num(sw, 4)}" stroke-linecap="round" stroke-linejoin="round" opacity=".94"/>`;
+}
+/** The leaf of the white face, big, with the bands. */
+function leaf(cx, cy, w, fill) {
+    return `<path d="${LEAF_PATH}" transform="translate(${num(cx, 3)} ${num(cy, 3)}) scale(${num(w / 2, 4)})" fill="${fill}"/>`;
+}
+/** The face of a design, in the face's units (a disc of radius 1, up is up): its definitions and its drawing. `prefix` makes every id unique to this puck. */
+export function faceMarkup(face, design, own, prefix) {
+    const f = resolve(face, design, own);
+    const look = f.look;
+    const clip = `${prefix}clip`;
+    let defs = `<clipPath id="${clip}"><circle r=".965"/></clipPath>`;
+    let body = "";
+    const ringed = f.ring !== undefined && f.design !== "canada-white";
+    switch (f.design) {
+        case "canada-white": {
+            // A white face, the flag's red bands left and right, a big red leaf and the country under it.
+            body += ground(look, false, 0);
+            body += `<rect x="-1" y="-1" width=".42" height="2" fill="${look.accent}"/><rect x=".58" y="-1" width=".42" height="2" fill="${look.accent}"/>`;
+            const pic = picture(f, prefix, 0, -0.1, 1.0, 1.0);
+            if (pic !== undefined) {
+                defs += pic.defs;
+                body += pic.body;
+            }
+            else
+                body += leaf(0, -0.22, 1.0, look.accent);
+            if (f.text !== undefined)
+                body += word(f.text, { ...LETTERS, size: fitSize(f.text, LETTERS, 0.98, 0.17) }, 0, 0.6, look.accent);
+            if (f.ring !== undefined)
+                body += ringLetters(f.ring, 0.88, 0.09, look.accent);
+            break;
+        }
+        case "usa": {
+            const ri = 0.73;
+            body += ground(look, true, ri);
+            if (f.image !== undefined || f.flag !== undefined) {
+                // The caller's own picture takes the place of the stars and stripes.
+                const mid = middle(f, prefix, ri, look.ring, undefined);
+                body += mid.body;
+                defs += mid.defs;
+            }
+            else {
+                body += `<g clip-path="url(#${prefix}u)"><g transform="scale(${num(ri, 3)})">${starsAndStripes(2, 2, 1.04, 0.92, look.accent, "#ffffff", look.ring)}</g></g>`;
+                defs += `<clipPath id="${prefix}u"><circle r="${ri}"/></clipPath>`;
+                if (f.text !== undefined) {
+                    const s = fitSize(f.text, LETTERS, 1.05, 0.3);
+                    body += word(f.text, { ...LETTERS, size: s }, 0, 0.34, "#ffffff", look.ring, s * 0.16);
+                }
+            }
+            if (f.ring !== undefined)
+                body += ringLetters(f.ring, 0.855, 0.115, look.ink);
+            break;
+        }
+        case "usa-navy": {
+            // Navy, a red ring with white letters between two white hairlines, five stars over the country, and a rule.
+            body += ground(look, false, 0);
+            const ro = 0.9, ri = 0.69;
+            body += `<path d="M0-${ro}A${ro} ${ro} 0 1 1 0 ${ro}A${ro} ${ro} 0 1 1 0-${ro}ZM0-${ri}A${ri} ${ri} 0 1 0 0 ${ri}A${ri} ${ri} 0 1 0 0-${ri}Z" fill="${look.ring}" fill-rule="evenodd"/>`;
+            body += `<circle r=".935" fill="none" stroke="#ffffff" stroke-width=".022"/><circle r=".665" fill="none" stroke="#ffffff" stroke-width=".022"/>`;
+            if (f.ring !== undefined)
+                body += ringLetters(f.ring, 0.795, 0.105, look.ink);
+            for (let i = 0; i < 5; i++) {
+                const a = ((-40 + i * 20) * Math.PI) / 180;
+                body += star(0.5 * Math.sin(a) * 1.0, -0.5 * Math.cos(a) * 1.0 + 0.0, 0.052, look.accent, (-40 + i * 20));
+            }
+            if (f.text !== undefined || f.image !== undefined || f.flag !== undefined) {
+                const mid = middle({ ...f, number: undefined }, prefix, 0.62, look.ink, look.ring);
+                body += `<g transform="translate(0 .1)">${mid.body}</g>`;
+                defs += mid.defs;
+                body += `<path d="M-.4 .42H.4" stroke="${look.ring}" stroke-width=".022" stroke-linecap="round"/>`;
+            }
+            break;
+        }
+        case "player": {
+            // A jersey's face: the surname on the ring, the number big, a thin gold ring inside the band.
+            body += ground(look, true, 0.74);
+            body += `<circle r=".735" fill="none" stroke="${look.accent}" stroke-width=".02"/>`;
+            const ring = [f.name ?? f.ring?.[0] ?? "", f.ring?.[1] ?? ""];
+            body += ringLetters(ring, 0.855, 0.12, look.ink);
+            const mid = middle({ ...f, text: undefined, flag: undefined }, prefix, 0.72, look.ink, look.ink);
+            body += mid.body;
+            defs += mid.defs;
+            break;
+        }
+        default: {
+            // The flag with the country under it, the red face with the big leaf, and the generic souvenir share one layout: a ring when there is ring text, and the middle.
+            const ri = 0.74;
+            body += ground(look, ringed, ri);
+            if (f.design === "canada")
+                body += `<circle r="${ri}" fill="none" stroke="${look.ring}" stroke-width=".018"/>`;
+            if (ringed && f.ring !== undefined)
+                body += ringLetters(f.ring, 0.855, 0.115, look.ink);
+            const redLeaf = f.design === "canada-red" && f.image === undefined && f.flag === undefined && f.number === undefined;
+            if (redLeaf) {
+                body += leaf(0, -0.24, 0.98, look.accent);
+                const text = f.text;
+                if (text !== undefined)
+                    body += word(text, { ...LETTERS, size: fitSize(text, LETTERS, 0.92, 0.14) }, 0, 0.43, look.accent);
+            }
+            else {
+                const dark = f.design === "souvenir" ? look.ring : f.design === "canada" ? look.accent : look.ink;
+                const mid = middle(f, prefix, ringed ? ri : 0.92, dark, undefined);
+                body += mid.body;
+                defs += mid.defs;
+            }
+        }
+    }
+    body += signed(f);
+    return { defs, body: `<g clip-path="url(#${clip})">${body}</g>` };
+}

package/dist/emblems/ball/ball.image.d.ts

@@ -0,0 +1,8 @@
+/** A drawing made safe: the box of its coordinates and the markup of what it holds. */
+export interface SafeImage {
+    /** x, y, width and height of the drawing's own coordinates (its viewBox). */
+    box: readonly [number, number, number, number];
+    markup: string;
+}
+/** The markup of an SVG made safe, or `undefined` when there is none to be had: not text, too long, no `<svg>` root, nothing drawable left. `prefix` is put in front of every id and every reference to one. */
+export declare function safeImage(source: unknown, prefix: string): SafeImage | undefined;

package/dist/emblems/ball/ball.image.js

@@ -0,0 +1,122 @@
+// An SVG that comes from outside, made safe to put inside a drawing: a strict allow-list, never a deny-list. The text is taken apart into tags; only the shapes, groups, gradients and clip paths survive, with only
+// the attributes a drawing needs and values that cannot carry a script, an address or an entity. Everything else (script, style, text, image, use, foreignObject, filters, links, event handlers, `style`) is dropped
+// with whatever it holds. Ids are renamed under a prefix so two drawings in a page cannot reach each other's gradients. Imports only the core's escape.
+import { escape } from "./ball.core.js";
+const SHAPES = new Set(["g", "defs", "path", "circle", "ellipse", "rect", "line", "polyline", "polygon", "linearGradient", "radialGradient", "stop", "clipPath"]);
+const ATTRS = new Set([
+    "id", "d", "cx", "cy", "r", "rx", "ry", "x", "y", "x1", "y1", "x2", "y2", "fx", "fy", "width", "height", "points", "transform", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit",
+    "stroke-dasharray", "stroke-dashoffset", "fill-opacity", "stroke-opacity", "opacity", "fill-rule", "clip-rule", "clip-path", "offset", "stop-color", "stop-opacity", "gradientUnits", "gradientTransform",
+    "spreadMethod", "clipPathUnits",
+]);
+/** The attributes that may hold `url(#id)`. */
+const REFS = new Set(["fill", "stroke", "clip-path"]);
+/** A value is letters, digits and the few marks that colours, numbers, lists and transforms use: no colon (so no address), no `&` (so no entity), no quote, no angle bracket, no backslash. */
+const VALUE = /^[A-Za-z0-9#%.,()\s+\-/_]*$/;
+const MAX_LENGTH = 60000;
+const MAX_NODES = 2000;
+/** One attribute's value made safe, with its ids renamed, or `undefined` to drop it. */
+function safeValue(name, raw, prefix) {
+    const value = raw.trim();
+    if (value.length > 20000)
+        return undefined;
+    if (value.includes("url(")) {
+        if (!REFS.has(name))
+            return undefined;
+        const m = /^url\(\s*#([A-Za-z_][\w.-]*)\s*\)(\s+[a-z]+)?$/.exec(value);
+        return m === null ? undefined : `url(#${prefix}${m[1]})${m[2] ?? ""}`;
+    }
+    if (name === "id")
+        return /^[A-Za-z_][\w.-]*$/.test(value) ? `${prefix}${value}` : undefined;
+    return VALUE.test(value) ? value : undefined;
+}
+/** The declarations of a `style` attribute as name and value pairs (the ones an attribute of the same name may carry are kept by the caller). */
+function styleAttrs(style) {
+    const out = [];
+    for (const part of style.split(";")) {
+        const at = part.indexOf(":");
+        if (at > 0)
+            out.push([part.slice(0, at).trim().toLowerCase(), part.slice(at + 1).trim()]);
+    }
+    return out;
+}
+/** The box of the root's attributes: its viewBox's four numbers, else its width and height, else 100 by 100. */
+function boxOf(attrs) {
+    const vb = (attrs["viewBox"] ?? "").trim().split(/[\s,]+/).map(Number);
+    if (vb.length === 4 && vb.every(Number.isFinite) && vb[2] > 0 && vb[3] > 0)
+        return [vb[0], vb[1], vb[2], vb[3]];
+    const w = parseFloat(attrs["width"] ?? ""), h = parseFloat(attrs["height"] ?? "");
+    return Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0 ? [0, 0, w, h] : [0, 0, 100, 100];
+}
+/** The markup of an SVG made safe, or `undefined` when there is none to be had: not text, too long, no `<svg>` root, nothing drawable left. `prefix` is put in front of every id and every reference to one. */
+export function safeImage(source, prefix) {
+    if (typeof source !== "string" || source.length === 0 || source.length > MAX_LENGTH)
+        return undefined;
+    const cleaned = source.replace(/<!--[\s\S]*?-->/g, "").replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "").replace(/<\?[\s\S]*?\?>/g, "").replace(/<![^>]*>/g, "");
+    const tag = /<(\/?)([A-Za-z][\w:-]*)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>/g;
+    let out = "";
+    let nodes = 0;
+    let root;
+    // The depth inside an element being dropped (0 when none is).
+    let dropping = 0;
+    // The elements written and still open, `#root` for the svg itself.
+    const open = [];
+    for (let m = tag.exec(cleaned); m !== null; m = tag.exec(cleaned)) {
+        const closing = m[1] === "/";
+        const name = m[2];
+        const selfClosed = m[4] === "/";
+        if (dropping > 0) {
+            if (closing)
+                dropping--;
+            else if (!selfClosed)
+                dropping++;
+            continue;
+        }
+        if (closing) {
+            const top = open.pop();
+            if (top !== undefined && top !== "#root")
+                out += `</${top}>`;
+            continue;
+        }
+        const attrs = {};
+        for (const a of m[3].matchAll(/([\w:-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g))
+            attrs[a[1]] = (a[2] ?? a[3]);
+        if (root === undefined) {
+            if (name !== "svg" || selfClosed)
+                return undefined;
+            root = attrs;
+            open.push("#root");
+            continue;
+        }
+        if (!SHAPES.has(name)) {
+            if (!selfClosed)
+                dropping = 1;
+            continue;
+        }
+        if (++nodes > MAX_NODES)
+            return undefined;
+        const pairs = Object.entries(attrs);
+        if (attrs["style"] !== undefined)
+            pairs.push(...styleAttrs(attrs["style"]));
+        let written = "";
+        const seen = new Set();
+        for (const [key, raw] of pairs) {
+            if (!ATTRS.has(key) || seen.has(key))
+                continue;
+            const v = safeValue(key, raw, prefix);
+            if (v === undefined)
+                continue;
+            seen.add(key);
+            written += ` ${key}="${escape(v)}"`;
+        }
+        out += `<${name}${written}${selfClosed ? "/>" : ">"}`;
+        if (!selfClosed)
+            open.push(name);
+    }
+    if (root === undefined || !/<(path|circle|ellipse|rect|line|polyline|polygon)\b/.test(out))
+        return undefined;
+    // Close what the text left open, so the markup is always balanced.
+    for (let top = open.pop(); top !== undefined; top = open.pop())
+        if (top !== "#root")
+            out += `</${top}>`;
+    return { box: boxOf(root), markup: out };
+}

package/dist/emblems/ball/ball.index.d.ts

@@ -1,9 +1,10 @@
 import type { BallFrameOptions, Piece, PieceOptions, PieceSize } from "./ball.core.ts";
+import { PUCKS } from "./ball.puck.print.ts";
 /** Every ball, in the order a gallery shows them. */
 export declare const BALLS: readonly Piece[];
 /** The id of every ball: `"ball:soccer"`, `"ball:cricket-red"`. */
 export declare const BALL_IDS: readonly string[];
-/** A ball by its id, or by its name without the `ball:` (`"soccer"`). An unknown name is an error that lists the ids. */
+/** A ball by its id, or by its name without the `ball:` (`"soccer"`); a printed puck by its id (`"puck:canada"`). An unknown name is an error that lists the ids. */
 export declare function ballOf(name: string): Piece;
 /** True when the text is the id of a ball (or a ball's name without `ball:`). */
 export declare const isBallId: (name: unknown) => name is string;
@@ -45,4 +46,5 @@ export interface LineupOptions extends PieceOptions {
  * ```
  */
 export declare function lineup(names: readonly string[], options?: LineupOptions): string;
+export { PUCKS };
 export type { BallFrameOptions, Piece, PieceOptions, PieceSize, PieceStyle, PieceTheme } from "./ball.core.ts";

package/dist/emblems/ball/ball.index.js

@@ -16,6 +16,7 @@ import { BALL_HANDBALL } from "./ball.handball.js";
 import { BALL_PADEL } from "./ball.padel.js";
 import { BALL_PICKLEBALL_OUTDOOR, BALL_PICKLEBALL_INDOOR } from "./ball.pickleball.js";
 import { BALL_PUCK } from "./ball.puck.js";
+import { PUCKS } from "./ball.puck.print.js";
 import { BALL_ROUNDNET } from "./ball.roundnet.js";
 import { BALL_RUGBY } from "./ball.rugby.js";
 import { BALL_SEPAK_TAKRAW } from "./ball.sepaktakraw.js";
@@ -35,16 +36,16 @@ import { BALL_WATER_POLO } from "./ball.waterpolo.js";
 export const BALLS = [BALL_SOCCER, BALL_SOCCER_COLOUR, BALL_SOCCER_26, BALL_SOCCER_18, BALL_SOCCER_14, BALL_SOCCER_12, BALL_SOCCER_6, BALL_SOCCER_ORANGE, BALL_SOCCER_26_ORANGE, BALL_SOCCER_18_ORANGE, BALL_SOCCER_14_ORANGE, BALL_SOCCER_12_ORANGE, BALL_SOCCER_6_ORANGE, BALL_SOCCER_YELLOW, BALL_SOCCER_26_YELLOW, BALL_SOCCER_18_YELLOW, BALL_SOCCER_14_YELLOW, BALL_SOCCER_12_YELLOW, BALL_SOCCER_6_YELLOW, BALL_FUTSAL, BALL_BEACH_SOCCER, BALL_TEQBALL, BALL_BASKETBALL, BALL_BASKETBALL_6, BALL_BASKETBALL_3X3, BALL_BASEBALL, BALL_SOFTBALL, BALL_TENNIS, BALL_PADEL, BALL_SLIOTAR, BALL_VOLLEYBALL, BALL_VOLLEYBALL_8, BALL_BEACH_VOLLEYBALL, BALL_CRICKET_RED, BALL_CRICKET_WHITE, BALL_CRICKET_PINK, BALL_FOOTBALL, BALL_FOOTBALL_CFL, BALL_FOOTBALL_IFAF, BALL_RUGBY, BALL_AFL, BALL_GAELIC_FOOTBALL, BALL_NETBALL, BALL_PICKLEBALL_OUTDOOR, BALL_PICKLEBALL_INDOOR, BALL_SQUASH_DOUBLE_YELLOW, BALL_SQUASH_YELLOW, BALL_SQUASH_GREEN, BALL_SQUASH_RED, BALL_SQUASH_BLUE, BALL_RACQUETBALL, BALL_LACROSSE, BALL_FIELD_HOCKEY, BALL_TABLE_TENNIS, BALL_HANDBALL, BALL_WATER_POLO, BALL_GOLF, BALL_PUCK, BALL_CURLING_STONE, BALL_SHOT, BALL_DISCUS, BALL_HAMMER, BALL_SEPAK_TAKRAW, BALL_ROUNDNET, BALL_SHUTTLECOCK_FEATHER, BALL_SHUTTLECOCK_NYLON];
 /** The id of every ball: `"ball:soccer"`, `"ball:cricket-red"`. */
 export const BALL_IDS = BALLS.map((b) => b.id);
-const TABLE = new Map(BALLS.map((b) => [b.id, b]));
-/** A ball by its id, or by its name without the `ball:` (`"soccer"`). An unknown name is an error that lists the ids. */
+const TABLE = new Map([...BALLS, ...PUCKS].map((b) => [b.id, b]));
+/** A ball by its id, or by its name without the `ball:` (`"soccer"`); a printed puck by its id (`"puck:canada"`). An unknown name is an error that lists the ids. */
 export function ballOf(name) {
-    const found = TABLE.get(name.startsWith("ball:") ? name : `ball:${name}`);
+    const found = TABLE.get(/^(ball|puck):/.test(name) ? name : `ball:${name}`);
     if (found === undefined)
-        throw new Error(`Unknown ball "${name}". The ids are ${BALL_IDS.join(", ")}.`);
+        throw new Error(`Unknown ball "${name}". The ids are ${BALL_IDS.join(", ")}, and the printed pucks ${PUCKS.map((p) => p.id).join(", ")}.`);
     return found;
 }
 /** True when the text is the id of a ball (or a ball's name without `ball:`). */
-export const isBallId = (name) => typeof name === "string" && TABLE.has(name.startsWith("ball:") ? name : `ball:${name}`);
+export const isBallId = (name) => typeof name === "string" && TABLE.has(/^(ball|puck):/.test(name) ? name : `ball:${name}`);
 /** A ball as a document of SVG: `renderBall("soccer", { size: 64 })`, or in the line style `renderBall("ball:puck", { style: "line" })`. The same arguments give the same string. */
 export function renderBall(name, options) {
     return ballOf(name).svg(options);
@@ -103,3 +104,4 @@ export function lineup(names, options) {
     const title = `Balls at ${trueScale ? "their true relative sizes" : "one size"}: ${pieces.map((p) => p.en).join(", ")}`;
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${num(width, 2)} ${num(height, 2)}" width="${num(width, 2)}" height="${num(height, 2)}" role="img"${colour === "" ? "" : ` color="${colour}"`}><title>${escape(title)}</title>${auto}${parts.join("")}</svg>`;
 }
+export { PUCKS };

package/dist/emblems/ball/ball.letters.d.ts

@@ -0,0 +1,32 @@
+interface Glyph {
+    /** The width of the box, 0 for a letter that is a single stroke. */
+    w: number;
+    /** The centre line: absolute `M L C Z` commands. */
+    d: string;
+}
+/** The glyph of a character (a lower-case letter is its capital, an accented one its plain one; the bullet and the middle dot are one dot), or `undefined`. */
+export declare function glyphOf(char: string): Glyph | undefined;
+/** How a line is set. `size` is the height of a capital in the face's units; the stroke is `weight` of it. */
+export interface Lettering {
+    size: number;
+    /** The stroke as a fraction of the height: 0.12 is regular, 0.2 bold, 0.27 black. */
+    weight: number;
+    /** 1 is the glyphs' own width; the wide print of CANADA is 1.3 or more. */
+    wide?: number;
+    /** The lean: how far the top of a letter is pushed to the right, as a fraction of the height (0.12 is a sports slant). */
+    slant?: number;
+    /** Extra space between letters, as a fraction of the height. */
+    track?: number;
+}
+/** The width a text takes, in the face's units, with the stroke's own thickness included. */
+export declare function textWidth(text: string, o: Lettering): number;
+/** The size at which a text is as wide as `width` at most and as tall as `height` at most. */
+export declare function fitSize(text: string, o: Omit<Lettering, "size">, width: number, height: number): number;
+/** A line of text on a straight line, centred on (`x`, `y`), as one path: draw it with a stroke of `weight * size`. */
+export declare function linePath(text: string, o: Lettering, x: number, y: number): string;
+/**
+ * A line of text set on an arc of the circle of radius `r` (the middle of the letters), centred on the angle `centre` in degrees clockwise from the top. With `inside` false the letters stand outward and read
+ * clockwise (the top of the ring); with `inside` true they stand inward and read left to right (the bottom of the ring, `centre` 180). One path.
+ */
+export declare function arcPath(text: string, o: Lettering, r: number, centre: number, inside?: boolean): string;
+export {};