@johnmorrisdotca/dougu-sports 0.3.2 → 0.4.1

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 {};

package/dist/emblems/ball/ball.letters.js

@@ -0,0 +1,142 @@
+// Vector lettering for the printed pucks: every letter and numeral is a centre line in a box 90 units tall, and the stroke width makes it bold. No font file and no system font is used, so the print
+// looks the same everywhere and is a few hundred bytes of path. The strokes are adapted from the block letters of senshu-jerseys (the same author, the same MIT licence); here they are drawn wide, heavy and
+// leaning a little forward, so a puck's CANADA is a sports print of its own. A line of text comes out as one path in the face's own units (the stroke width is the caller's), straight or set on an arc.
+// A character with no glyph is left out. Imports only the core's number writer.
+import { num } from "./ball.core.js";
+const GLYPHS = {
+    "0": { w: 48, d: "M24 0C8 0 0 14 0 45C0 76 8 90 24 90C40 90 48 76 48 45C48 14 40 0 24 0Z" },
+    "1": { w: 28, d: "M0 24L28 0L28 90" },
+    "2": { w: 48, d: "M0 22C0 8 10 0 24 0C38 0 48 8 48 24C48 38 40 46 28 56L0 90L48 90" },
+    "3": { w: 48, d: "M2 0L46 0L24 34C40 34 48 46 48 62C48 80 38 90 24 90C10 90 2 82 0 68" },
+    "4": { w: 50, d: "M36 90L36 0L0 62L50 62" },
+    "5": { w: 48, d: "M46 0L6 0L2 40C10 34 18 32 26 32C40 32 48 46 48 62C48 80 38 90 24 90C10 90 2 82 0 70" },
+    "6": { w: 48, d: "M44 6C38 2 32 0 24 0C8 0 0 16 0 46C0 76 8 90 24 90C40 90 48 78 48 62C48 46 40 36 24 36C12 36 2 44 0 56" },
+    "7": { w: 48, d: "M0 0L48 0L16 90" },
+    "8": { w: 46, d: "M23 0C10 0 4 8 4 20C4 32 12 40 23 43C36 46 46 52 46 66C46 82 38 90 23 90C8 90 0 82 0 66C0 52 10 46 23 43C34 40 42 32 42 20C42 8 36 0 23 0Z" },
+    "9": { w: 48, d: "M4 84C10 88 16 90 24 90C40 90 48 74 48 44C48 14 40 0 24 0C8 0 0 12 0 28C0 44 8 54 24 54C36 54 46 46 48 34" },
+    A: { w: 50, d: "M0 90L25 0L50 90M10 60L40 60" },
+    B: { w: 46, d: "M0 90L0 0L26 0C40 0 44 10 44 21C44 34 36 42 26 43L0 43M26 43C40 44 46 52 46 66C46 82 40 90 26 90L0 90" },
+    C: { w: 46, d: "M46 24C44 8 36 0 24 0C8 0 0 14 0 45C0 76 8 90 24 90C36 90 44 82 46 66" },
+    D: { w: 46, d: "M0 0L0 90L20 90C40 90 46 76 46 45C46 14 40 0 20 0Z" },
+    E: { w: 42, d: "M42 0L0 0L0 90L42 90M0 44L34 44" },
+    F: { w: 40, d: "M40 0L0 0L0 90M0 44L32 44" },
+    G: { w: 46, d: "M46 24C44 8 36 0 24 0C8 0 0 14 0 45C0 76 8 90 24 90C40 90 46 78 46 58L46 50L26 50" },
+    H: { w: 46, d: "M0 0L0 90M46 0L46 90M0 44L46 44" },
+    I: { w: 0, d: "M0 0L0 90" },
+    J: { w: 38, d: "M38 0L38 64C38 82 30 90 20 90C8 90 0 82 0 66" },
+    K: { w: 46, d: "M0 0L0 90M46 0L2 50M14 36L46 90" },
+    L: { w: 38, d: "M0 0L0 90L38 90" },
+    M: { w: 58, d: "M0 90L0 0L29 62L58 0L58 90" },
+    N: { w: 46, d: "M0 90L0 0L46 90L46 0" },
+    O: { w: 48, d: "M24 0C8 0 0 14 0 45C0 76 8 90 24 90C40 90 48 76 48 45C48 14 40 0 24 0Z" },
+    P: { w: 46, d: "M0 90L0 0L28 0C42 0 46 10 46 24C46 38 40 48 26 48L0 48" },
+    Q: { w: 48, d: "M24 0C8 0 0 14 0 45C0 76 8 90 24 90C40 90 48 76 48 45C48 14 40 0 24 0ZM30 68L50 94" },
+    R: { w: 46, d: "M0 90L0 0L28 0C42 0 46 10 46 22C46 36 40 46 26 47L0 47M24 47L46 90" },
+    S: { w: 46, d: "M44 22C42 8 34 0 22 0C8 0 2 10 2 22C2 36 12 40 24 45C36 50 46 56 46 68C46 82 38 90 24 90C10 90 2 82 0 66" },
+    T: { w: 46, d: "M0 0L46 0M23 0L23 90" },
+    U: { w: 46, d: "M0 0L0 62C0 82 8 90 23 90C38 90 46 82 46 62L46 0" },
+    V: { w: 48, d: "M0 0L24 90L48 0" },
+    W: { w: 60, d: "M0 0L15 90L30 28L45 90L60 0" },
+    X: { w: 48, d: "M0 0L48 90M48 0L0 90" },
+    Y: { w: 48, d: "M0 0L24 46L48 0M24 46L24 90" },
+    Z: { w: 46, d: "M0 0L46 0L0 90L46 90" },
+    "-": { w: 24, d: "M0 45L24 45" },
+    ".": { w: 0, d: "M0 80L0 90" },
+    ",": { w: 0, d: "M0 80L0 92" },
+    "'": { w: 0, d: "M0 0L0 22" },
+    "/": { w: 26, d: "M0 90L26 0" },
+    ":": { w: 0, d: "M0 22L0 32M0 70L0 80" },
+    "&": { w: 52, d: "M52 90L10 34C2 22 6 0 24 0C42 0 44 20 36 30L8 60C-2 76 6 90 24 90C34 90 44 80 50 60" },
+    "·": { w: 0, d: "M0 42L0 48" },
+    " ": { w: 22, d: "" },
+};
+/** 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 function glyphOf(char) {
+    const plain = (char === "•" || char === "·" ? "·" : char.normalize("NFD").replace(/[̀-ͯ]/g, "").toUpperCase());
+    return Object.hasOwn(GLYPHS, plain) ? GLYPHS[plain] : undefined;
+}
+const GLYPH_H = 90;
+/** The characters of a text that have a glyph, as glyphs (an unknown character is left out). */
+const glyphsOf = (text) => [...text].map(glyphOf).filter((g) => g !== undefined);
+/** The pen positions of a text in glyph units: the left edge of each glyph's box and the total width, from the first glyph's left edge to the last one's right edge. */
+function setting(glyphs, o) {
+    const wide = o.wide ?? 1;
+    const stroke = o.weight * GLYPH_H;
+    const gap = Math.max(5, stroke * 0.5) + (o.track ?? 0) * GLYPH_H;
+    const at = [];
+    let x = 0;
+    for (const g of glyphs) {
+        at.push(x);
+        x += g.w * wide + stroke + gap;
+    }
+    const total = Math.max(0, x - stroke - gap);
+    return { at, total, stroke };
+}
+/** The width a text takes, in the face's units, with the stroke's own thickness included. */
+export function textWidth(text, o) {
+    const glyphs = glyphsOf(text);
+    const s = setting(glyphs, o);
+    return ((s.total + s.stroke) * o.size) / GLYPH_H;
+}
+/** The size at which a text is as wide as `width` at most and as tall as `height` at most. */
+export function fitSize(text, o, width, height) {
+    const w = textWidth(text, { ...o, size: 1 });
+    return Math.min(height, w === 0 ? height : width / w);
+}
+/** A glyph's path with every point run through `map`. The glyph tables use absolute `M L C Z` only, so each pair of numbers is a point. */
+function mapPath(d, map) {
+    let out = "";
+    for (const part of d.match(/[MLCZ][^MLCZ]*/g) ?? []) {
+        const nums = (part.slice(1).match(/-?\d+(?:\.\d+)?/g) ?? []).map(Number);
+        const points = [];
+        for (let i = 0; i + 1 < nums.length; i += 2) {
+            const q = map([nums[i], nums[i + 1]]);
+            points.push(`${num(q[0], 3)} ${num(q[1], 3)}`);
+        }
+        out += part[0] + points.join(" ");
+    }
+    return out;
+}
+/** A point of a glyph made wide and leaning, in glyph units with the origin at the top left of its box. */
+const shaped = (o) => (p) => [p[0] * (o.wide ?? 1) + (o.slant ?? 0) * (GLYPH_H - p[1]), p[1]];
+/** A line of text on a straight line, centred on (`x`, `y`), as one path: draw it with a stroke of `weight * size`. */
+export function linePath(text, o, x, y) {
+    const glyphs = glyphsOf(text);
+    const s = setting(glyphs, o);
+    const k = o.size / GLYPH_H;
+    const left = x - (s.total * k) / 2;
+    const top = y - o.size / 2;
+    const shape = shaped(o);
+    return glyphs.map((g, i) => mapPath(g.d, (p) => {
+        const q = shape(p);
+        return [left + (s.at[i] + q[0]) * k, top + q[1] * k];
+    })).join("");
+}
+/**
+ * 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 function arcPath(text, o, r, centre, inside = false) {
+    const glyphs = glyphsOf(text);
+    const s = setting(glyphs, o);
+    const k = o.size / GLYPH_H;
+    const shape = shaped(o);
+    const base = inside ? r + o.size / 2 : r - o.size / 2;
+    const mid = (centre * Math.PI) / 180;
+    return glyphs.map((g, i) => {
+        const half = (g.w * (o.wide ?? 1)) / 2;
+        const along = (s.at[i] + half - s.total / 2) * k;
+        const a = inside ? mid - along / r : mid + along / r;
+        const sin = Math.sin(a), cos = Math.cos(a);
+        const ox = base * sin, oy = -base * cos;
+        // The glyph's own axes: along the line of reading, and down the glyph (toward the centre on the top, outward on the bottom).
+        const [ax, ay] = inside ? [-cos, -sin] : [cos, sin];
+        const [dx, dy] = inside ? [sin, -cos] : [-sin, cos];
+        return mapPath(g.d, (p) => {
+            const q = shape(p);
+            const lx = (q[0] - half * 1) * k;
+            const ly = (q[1] - GLYPH_H) * k;
+            return [ox + lx * ax + ly * dx, oy + lx * ay + ly * dy];
+        });
+    }).join("");
+}

package/dist/emblems/ball/ball.object.js

@@ -7,7 +7,7 @@ export function defineObject(def) {
     const render = (o, turning) => {
         const opts = resolveOptions(o);
         const rot = rotation(radians(def.view.yaw + finite(o?.yaw), 0), radians(def.view.pitch + finite(o?.pitch), 0), radians(def.view.roll + finite(o?.roll), 0));
-        const id = `k${hashOf(`${def.id}|${opts.style}|${opts.tint ?? ""}|${opts.accent ?? ""}|${rot.map((r) => r.map((x) => x.toFixed(2)).join()).join()}`)}`;
+        const id = `k${hashOf(`${def.id}|${opts.style}|${opts.tint ?? ""}|${opts.accent ?? ""}${opts.faceKey === "" ? "" : `|f${opts.faceKey}`}|${rot.map((r) => r.map((x) => x.toFixed(2)).join()).join()}`)}`;
         const at = (p) => {
             const sh = def.shift ?? [0, 0, 0];
             const k = def.scale ?? 1;

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

@@ -1,3 +1,11 @@
+import { type StackSpec } from "./ball.stack.ts";
+import { type PieceSize } from "./ball.core.ts";
+/** Half the puck's thickness in units of its radius: 12.7 mm over 38.1 mm, one third. */
+export declare const PUCK_H: number;
+/** The puck's size and the rule it comes from: the printed pucks are the same puck. */
+export declare const PUCK_SIZE: PieceSize;
+/** The plain puck's drawing: black rubber, a ridged edge, and the ring a moulded top face has. A printed puck is this drawing with its print laid over the ring's place (ball.puck.print.ts). */
+export declare const puckSpec: (extra?: Partial<StackSpec>) => StackSpec;
 export declare const BALL_PUCK: import("./ball.core.ts").Piece<{
     slices: number;
 } & {

package/dist/emblems/ball/ball.puck.js

@@ -1,22 +1,29 @@
 // Ice hockey puck: vulcanised black rubber, 76.2 mm across and 25.4 mm thick (so 1 : 3), with a ridged edge. Drawn as a cylinder in true 3D, so it turns. The stack's y is in units of the radius, so the half thickness is 12.7 / 38.1, one third.
 import { drawStack } from "./ball.stack.js";
+import {} from "./ball.core.js";
 import { defineObject } from "./ball.object.js";
-const H = 25.4 / 76.2;
+/** Half the puck's thickness in units of its radius: 12.7 mm over 38.1 mm, one third. */
+export const PUCK_H = 25.4 / 76.2;
+/** The puck's size and the rule it comes from: the printed pucks are the same puck. */
+export const PUCK_SIZE = { extentMm: 76, diameterMm: 76, thicknessMm: 25, massG: [156, 170], rule: "IIHF Official Rule Book, Rule 13 Puck, 13.1 Dimensions (the puck is Rule 13, not Rule 1)", note: "IIHF figures, rounded as the rule rounds them (the NHL puck is 3 in by 1 in). Colour is not stated in the rule." };
+/** The plain puck's drawing: black rubber, a ridged edge, and the ring a moulded top face has. A printed puck is this drawing with its print laid over the ring's place (ball.puck.print.ts). */
+export const puckSpec = (extra) => ({
+    slices: [{ y0: -PUCK_H, y1: PUCK_H, r: 1, colour: "#26282d", outline: true }],
+    top: "#2e3036",
+    bottom: "#2e3036",
+    gloss: 0.5,
+    shade: "#000",
+    grain: { f: 1.6, a: 0.25 },
+    grooves: { count: 30, slices: [0], colour: "#000", opacity: 0.5 },
+    topRing: { r: 0.9, colour: "#4a4d56" },
+    ...extra,
+});
 export const BALL_PUCK = /* @__PURE__ */ defineObject({
     id: "ball:puck",
     en: "Hockey puck",
     ja: "アイスホッケーのパック",
-    size: { extentMm: 76, diameterMm: 76, thicknessMm: 25, massG: [156, 170], rule: "IIHF Official Rule Book, Rule 13 Puck, 13.1 Dimensions (the puck is Rule 13, not Rule 1)", note: "IIHF figures, rounded as the rule rounds them (the NHL puck is 3 in by 1 in). Colour is not stated in the rule." },
+    size: PUCK_SIZE,
     view: { yaw: 0, pitch: 36, roll: -8 },
     model: { slices: 1 },
-    draw: (c) => drawStack(c, {
-        slices: [{ y0: -H, y1: H, r: 1, colour: "#26282d", outline: true }],
-        top: "#2e3036",
-        bottom: "#2e3036",
-        gloss: 0.5,
-        shade: "#000",
-        grain: { f: 1.6, a: 0.25 },
-        grooves: { count: 30, slices: [0], colour: "#000", opacity: 0.5 },
-        topRing: { r: 0.9, colour: "#4a4d56" },
-    }),
+    draw: (c) => drawStack(c, puckSpec()),
 });

package/dist/emblems/ball/ball.puck.print.d.ts

@@ -0,0 +1,76 @@
+import { type Piece } from "./ball.core.ts";
+import { type PuckDesign } from "./ball.face.ts";
+export declare const PUCK_CANADA: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+export declare const PUCK_CANADA_RED: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+export declare const PUCK_CANADA_WHITE: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+export declare const PUCK_USA: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+export declare const PUCK_USA_NAVY: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+export declare const PUCK_PLAYER: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+export declare const PUCK_SIGNED: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+export declare const PUCK_SOUVENIR: Piece<{
+    slices: number;
+    design: PuckDesign;
+    view: {
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+}>;
+/** Every printed puck, in the order a gallery shows them. */
+export declare const PUCKS: readonly Piece[];

package/dist/emblems/ball/ball.puck.print.js

@@ -0,0 +1,46 @@
+// The printed pucks: the same black puck as `ball:puck` (76.2 mm across, 25.4 mm thick, the ridged edge), with a print on its top face. The print is drawn flat (ball.face.ts) and laid on the top by the
+// puck's own rotation, so it foreshortens as the puck tips, turns with it, and is gone when the top is turned away (the bottom is plain rubber). The grip on the edge shows as the puck turns. All our own drawing:
+// our own leaf and flags, our own lettering, a made-up number and name, a made-up signature; no team's or league's mark. Each puck is an id of its own with a face to start from, and any `face` option replaces it.
+import {} from "./ball.core.js";
+import { faceMarkup } from "./ball.face.js";
+import { PUCK_H, PUCK_SIZE, puckSpec } from "./ball.puck.js";
+import { defineObject } from "./ball.object.js";
+import { drawStack } from "./ball.stack.js";
+import { num } from "./ball.core.js";
+/** A printed puck: a plain puck with the face laid over its top. */
+function definePuck(def) {
+    return defineObject({
+        id: def.id,
+        en: def.en,
+        ja: def.ja,
+        size: PUCK_SIZE,
+        view: { yaw: 0, pitch: 50, roll: -6 },
+        model: { slices: 1, design: def.design },
+        draw: (c) => drawStack(c, puckSpec({
+            topRing: undefined,
+            overlay: (cx, top) => {
+                if (top.nz < 0.02)
+                    return { defs: "", body: "" };
+                // The top face's plane in the box: its centre, and where a step of 1 along the puck's x and z axes goes (the face's right, and its down).
+                const o = cx.at([0, PUCK_H, 0]), ex = cx.at([1, PUCK_H, 0]), ez = cx.at([0, PUCK_H, 1]);
+                const m = [ex[0] - o[0], ex[1] - o[1], ez[0] - o[0], ez[1] - o[1], o[0], o[1]].map((v) => num(v, 4)).join(" ");
+                const face = faceMarkup(cx.opts.face, def.design, def.own, `${cx.id}p`, cx.opts.flags, cx.opts.theme === "light" || cx.opts.theme === "dark" ? cx.opts.theme : "inherit");
+                // A light from the upper left and a falling-off at the far edge, over the print, in the box's own space so the light stays put while the puck turns.
+                const gid = `${cx.id}fl`;
+                const defs = `${face.defs}<radialGradient id="${gid}" cx=".36" cy=".3" r=".85"><stop offset="0" stop-color="#fff" stop-opacity=".34"/><stop offset=".4" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#000" stop-opacity=".42"/></radialGradient>`;
+                const body = `<g transform="matrix(${m})">${face.body}</g><path d="${top.ellipse(0.985)}" fill="url(#${gid})" stroke="#000" stroke-opacity=".55" stroke-width="${num(Math.max(0.3, cx.minWidth * 0.35), 2)}"/>`;
+                return { defs, body };
+            },
+        })),
+    });
+}
+export const PUCK_CANADA = /* @__PURE__ */ definePuck({ id: "puck:canada", en: "Canada flag puck", ja: "カナダ国旗のパック", design: "canada" });
+export const PUCK_CANADA_RED = /* @__PURE__ */ definePuck({ id: "puck:canada-red", en: "Canada red puck", ja: "カナダ赤地のパック", design: "canada-red" });
+export const PUCK_CANADA_WHITE = /* @__PURE__ */ definePuck({ id: "puck:canada-white", en: "Canada white puck", ja: "カナダ白地のパック", design: "canada-white" });
+export const PUCK_USA = /* @__PURE__ */ definePuck({ id: "puck:usa", en: "USA stripes puck", ja: "アメリカ星条旗のパック", design: "usa" });
+export const PUCK_USA_NAVY = /* @__PURE__ */ definePuck({ id: "puck:usa-navy", en: "USA navy puck", ja: "アメリカ紺地のパック", design: "usa-navy" });
+export const PUCK_PLAYER = /* @__PURE__ */ definePuck({ id: "puck:player", en: "Player number puck", ja: "選手名と背番号のパック", design: "player" });
+export const PUCK_SIGNED = /* @__PURE__ */ definePuck({ id: "puck:signed", en: "Signed puck", ja: "サイン入りパック", design: "usa-navy", own: { signature: 7, text: "" } });
+export const PUCK_SOUVENIR = /* @__PURE__ */ definePuck({ id: "puck:souvenir", en: "Souvenir puck", ja: "記念パック", design: "souvenir" });
+/** Every printed puck, in the order a gallery shows them. */
+export const PUCKS = [PUCK_CANADA, PUCK_CANADA_RED, PUCK_CANADA_WHITE, PUCK_USA, PUCK_USA_NAVY, PUCK_PLAYER, PUCK_SIGNED, PUCK_SOUVENIR];

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

@@ -0,0 +1,4 @@
+/** A small seeded random generator (mulberry32) over any seed: a number, or text hashed first. */
+export declare function seeded(seed: number | string): () => number;
+/** The path of a signature for a seed: a first name, a surname and an underline, in a box about 1 wide, centred on the origin. */
+export declare function signaturePath(seed: number | string): string;

package/dist/emblems/ball/ball.signature.js

@@ -0,0 +1,58 @@
+// A made-up signature: a squiggle drawn by a seeded pen, so the same seed always gives the same stroke and no seed is anyone's real hand. It is a first name and a surname, each a tall capital with a loop and a run
+// of humps, joined by a smooth curve, and a flourish under the whole. The path lies in a box 1 wide and about 0.4 tall about the origin; the face scales, turns and inks it. Imports nothing.
+/** A small seeded random generator (mulberry32) over any seed: a number, or text hashed first. */
+export function seeded(seed) {
+    let h = 2166136261;
+    for (const ch of String(seed))
+        h = Math.imul(h ^ ch.codePointAt(0), 16777619);
+    let a = h >>> 0;
+    return () => {
+        a = (a + 0x6d2b79f5) >>> 0;
+        let t = Math.imul(a ^ (a >>> 15), 1 | a);
+        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+const f = (v) => (Math.round(v * 1000) / 1000 + 0).toString();
+/** A smooth curve through the points (Catmull-Rom turned into cubic Beziers). */
+function smooth(pts) {
+    let d = `M${f(pts[0][0])} ${f(pts[0][1])}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+        const p0 = pts[Math.max(0, i - 1)], p1 = pts[i], p2 = pts[i + 1], p3 = pts[Math.min(pts.length - 1, i + 2)];
+        d += `C${f(p1[0] + (p2[0] - p0[0]) / 6)} ${f(p1[1] + (p2[1] - p0[1]) / 6)} ${f(p2[0] - (p3[0] - p1[0]) / 6)} ${f(p2[1] - (p3[1] - p1[1]) / 6)} ${f(p2[0])} ${f(p2[1])}`;
+    }
+    return d;
+}
+/** One word of a signature as a cursive run: a pen that goes round in loops while it moves right, so the strokes are the looped humps of joined writing. The first loop (the capital) is the tallest. */
+function word(rand, x0, width, humps) {
+    const pts = [];
+    const per = 9;
+    const steps = (humps + 1) * per;
+    let env = 1;
+    for (let i = 0; i <= steps; i++) {
+        const u = i / steps;
+        const phase = (i / per) * Math.PI * 2;
+        const hump = Math.floor(i / per);
+        if (i % per === 0)
+            env = hump === 0 ? 1.7 : 0.35 + rand() * 0.75;
+        // The loop: x is pushed back as y rises, so the pen doubles back on itself at the top.
+        const rise = (1 - Math.cos(phase)) / 2;
+        const x = x0 + width * u - Math.sin(phase) * 0.045 * env;
+        const y = -rise * 0.17 * env + 0.03 * Math.sin(phase * 0.5);
+        pts.push([x, y]);
+    }
+    // A short upward tail.
+    const last = pts[pts.length - 1];
+    pts.push([last[0] + width * 0.12, last[1] - 0.06 - rand() * 0.04]);
+    return pts;
+}
+/** The path of a signature for a seed: a first name, a surname and an underline, in a box about 1 wide, centred on the origin. */
+export function signaturePath(seed) {
+    const rand = seeded(seed);
+    const first = word(rand, -0.5, 0.28, 2 + Math.floor(rand() * 2));
+    const second = word(rand, -0.12, 0.5, 3 + Math.floor(rand() * 3));
+    const end = second[second.length - 1];
+    const under = [[end[0] - 0.05, end[1] + 0.13 + rand() * 0.03], [-0.05, 0.15 + rand() * 0.03], [-0.38, 0.12 + rand() * 0.04]];
+    const lift = (list) => list.map(([x, y]) => [x, y - 0.02]);
+    return smooth(lift(first)) + smooth(lift(second)) + smooth(lift([end, ...under]));
+}

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

@@ -41,6 +41,16 @@ export interface StackSpec {
         cy: number;
         nz: number;
     }) => string;
+    /** Drawn over everything, grain included, when the top face is toward you (a print): its definitions and its body, given the top face's ellipse as a path of radius `r` (a fraction of the top's). */
+    overlay?: (c: ObjectContext, top: {
+        cx: number;
+        cy: number;
+        nz: number;
+        ellipse: (r: number) => string;
+    }) => {
+        defs: string;
+        body: string;
+    };
 }
 export declare function drawStack(c: ObjectContext, spec: StackSpec): {
     defs: string;

package/dist/emblems/ball/ball.stack.js

@@ -123,5 +123,12 @@ export function drawStack(c, spec) {
         defs += grainDef(c.id, spec.grain.f, spec.grain.a);
     if (line)
         return { defs: "", body: `<g fill="none" stroke="currentColor" stroke-width="${num(Math.max(2.4, c.minWidth * 1.4), 2)}" stroke-linejoin="round" stroke-linecap="round">${body}</g>` };
-    return { defs, body: grain ? `<g filter="url(#${c.id}n)">${body}</g>` : body };
+    let printed = "";
+    if (spec.overlay !== undefined && topVisible) {
+        const top = slices.at(-1);
+        const over = spec.overlay(c, { cx: tx, cy: ty, nz, ellipse: (r) => ellipsePath(tx, ty, 46 * radius(top, 1) * r, 46 * radius(top, 1) * r * Math.abs(nz), perpDeg) });
+        defs += over.defs;
+        printed = over.body;
+    }
+    return { defs, body: (grain ? `<g filter="url(#${c.id}n)">${body}</g>` : body) + printed };
 }