@johnmorrisdotca/dougu-sports 0.3.2 → 0.4.1

package/CHANGELOG.md

@@ -6,6 +6,30 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.4.1] - 2026-10-14
+
+The printed pucks take the same flag renderer as taisen-brackets.
+
+### Changed
+
+- **The puck's flag renderer is the one taisen-brackets takes.** `flags` is now an option of the call (`renderEmblem`, `emblemFrame`, `ballFrame`), beside `face`, and no longer a field of `face`; it is called `flags(code, { shape: "round" | "square" | "rect", size, theme: "inherit" | "light" | "dark" })` (the puck asks for `"rect"`), may return `null` or `undefined` for a code it has no flag for, and is synchronous, so one adapter over hata serves every package. New types `FlagRequest` and `FlagShape`. `FlagRenderer` changed accordingly; the 0.4.0 form (`face.flags`, shapes `4:3`/`1:1`/`round`) is gone.
+
+## [0.4.0] - 2026-10-14
+
+Printed pucks: eight souvenir pucks with a print on the top face that turns with the puck, and a `face` option that takes any picture, emblem or flag code. 194 emblems.
+
+### Added
+
+- **Eight printed pucks** ([docs/pucks.md](docs/pucks.md), [日本語](docs/pucks.ja.md)), a new group `puck:*`: `puck:canada` (our own flag of the Canadian pattern with CANADA under it in wide letters, in a ring of words), `puck:canada-red` (a red face with a big white leaf), `puck:canada-white` (a white face with red bands and a red leaf), `puck:usa` (a disc of stars and stripes with USA lettered across it), `puck:usa-navy` (a navy face, a red ring between white hairlines, stars and USA), `puck:player` (a made-up surname and a big number, like a jersey), `puck:signed` (the navy puck with a made-up gold signature) and `puck:souvenir` (a generic one with ring text from the caller). Each is the same puck as `ball:puck` (76.2 by 25.4 mm), in true 3D: the print sits on the top face and turns with the puck, foreshortens as it tips, and is gone when the top is turned away; the grip shows on the rim. `ball:puck` itself stays plain.
+- **A `face` option** on every puck (`renderEmblem`, `emblemFrame`, `ballFrame`): `design`, `image` (any SVG, made safe first), `emblem` (a dougu id), `flag` (`"ca"` and `"us"` are drawn here; any other code goes through the caller's `flags(code, { shape, size, theme })`, the shape of the renderer hata exports), `text`, `ringText`, `number`, `name`, `signature` (a seed, or `false`) and `colors`. `ball:puck` given a face is drawn as `puck:souvenir` with it. New exports: `PUCK_IDS`, the `PUCK_*` constants and the types `PuckFace`, `PuckDesign`, `FaceColors`, `FlagRenderer` and `PuckId`; `isBallId`, `ballFrame` and `lineup` take the puck ids.
+- **Our own lettering**: a stroke alphabet (adapted from senshu-jerseys, no font file), wide, heavy and leaning a little, set on a line or on an arc for the ring, with a made-up signature drawn by a seeded pen (the same seed, the same stroke, never a real hand) and our own eleven-point maple leaf, flags and stars.
+- **A safe image path**: an outside SVG is taken apart and put back through a strict allow-list (shapes, gradients and clip paths; no script, style, text, image, use, foreignObject, filter, link or event handler), with its ids renamed under the puck's own prefix.
+- A "Print a puck" section in the demo, both gallery pages list the eight, and tests for the face, escaping, the signature, the safe image, the turn box and the proportions (the printed pucks are measured against the rule like the plain one).
+
+### Changed
+
+- The stack renderer has an `overlay` that is drawn over the grain when the top face is toward you, and the puck's drawing is shared (`puckSpec`), so the plain puck's output is unchanged.
+
 ## [0.3.2] - 2026-10-14
 
 The README pictures fill their frames: balls first, then trophies, then gear, each a full grid.
@@ -116,7 +140,9 @@ First preview: the name, the API and two sample emblems. The full set of trophie
 - Tests for the drawing, the ids, the turns and the bundle size of one item; a package check that installs the packed tarball and bundles one item from it.
 - The demo (a playground with a turn slider, and a gallery page), `docs/layout.md`, `docs/turning.md`, `docs/gallery.md`, the family header and footer, the CI, Pages and Release workflows, and `LICENSES/` and `NOTICE.md` ready for third-party art.
 
-[Unreleased]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.3.2...HEAD
+[Unreleased]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.4.1...HEAD
+[0.4.1]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.4.0...v0.4.1
+[0.4.0]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.3.2...v0.4.0
 [0.3.2]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.3.1...v0.3.2
 [0.3.1]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.2.1...v0.3.0

package/NOTICE.md

@@ -8,6 +8,7 @@ No emblem carries the name, mark or logo of a league, a team, a federation or an
 
 - The trophies, medals, crests, awards and sport pictograms are drawn in SVG by hand in a simplified, generic form. No real trophy, medal, logo, mark or engraving was copied or traced, and no photograph was traced (photographs were looked at, never copied).
 - The balls (`src/emblems/ball/`) are drawn by this package's own code: a rotation, a projection and our own geometry (a seam curve, the truncated icosahedron, a layout of curved panels, a fitted basketball channel).
+- The printed pucks (`puck:*`, `src/emblems/ball/ball.puck.print.ts`) are our own drawings: the maple leaf, the flags of the Canadian and United States patterns and the stars are drawn from simple geometry, the lettering is a stroke alphabet adapted from the block letters of the author's own senshu-jerseys (same author, same MIT licence, no font file), and the signature is made by a seeded pen, so it is no real person's. Photographs of souvenir pucks were looked at for what such a puck shows (a flag, a name, a number, a signature, a ring of words) and nothing was copied or traced. No team's or league's logo or wordmark, no maker's mark and no real player's name is used.
 - The gear (`src/emblems/gear/`) is drawn by us from a list of parts (a path, a colour, how it reads as a line); the bow, the arrow and the other tapering shapes are made by a small function of ours (`swell`), and the rest are paths written for this package.
 - The Japanese words for the Japanese items are the ones the sports' governing bodies use in their own rules and equipment lists (kendo, judo, kyudo and karate federations and the sumo association); the bodies' names and marks are not used in any id, title or drawing.
 

package/README.md

@@ -45,7 +45,7 @@ The ball and the gear of every sport, trophies, medals, crests and the icon of e
 </tr>
 </table>
 
-> **Status: preview.** 186 emblems: 24 trophies, 5 awards, 6 medals, 4 crests, a pictogram for each of the 38 sports, 66 balls and implements drawn in 3D, 42 pieces of gear (among them the Japanese sports and budo, [docs/japanese-sports.md](./docs/japanese-sports.md)) and a championship pennant; [docs/layout.md](./docs/layout.md) says where each goes. All of it is drawn for this package: no art is copied from another project.
+> **Status: preview.** 194 emblems: 24 trophies, 5 awards, 6 medals, 4 crests, a pictogram for each of the 38 sports, 66 balls and implements drawn in 3D, 8 printed pucks ([docs/pucks.md](./docs/pucks.md)), 42 pieces of gear (among them the Japanese sports and budo, [docs/japanese-sports.md](./docs/japanese-sports.md)) and a championship pennant; [docs/layout.md](./docs/layout.md) says where each goes. All of it is drawn for this package: no art is copied from another project.
 
 ## In 30 seconds
 
@@ -73,7 +73,7 @@ Put the string in a page (`element.innerHTML = svg`), write it to a file, or sen
 
 ## Features
 
-- **Equipment first (道具 is the word for it)**: 66 balls and implements drawn in 3D, from the 32-panel soccer ball to the 26, 18, 14, 12 and 6 panel constructions, futsal, beach soccer and the pucks and stones, each with its official size, and 42 pieces of gear (sticks, rackets, helmets, skates, nets, and the Japanese budo kit) drawn to match; see [docs/gallery.md](./docs/gallery.md).
+- **Equipment first (道具 is the word for it)**: 66 balls and implements drawn in 3D, from the 32-panel soccer ball to the 26, 18, 14, 12 and 6 panel constructions, futsal, beach soccer and the pucks and stones, each with its official size, 8 printed pucks (a flag, a leaf, stars and stripes, a player's number, a made-up signature, your own picture: [docs/pucks.md](./docs/pucks.md)), and 42 pieces of gear (sticks, rackets, helmets, skates, nets, and the Japanese budo kit) drawn to match; see [docs/gallery.md](./docs/gallery.md).
 - **Three styles** for every emblem: `metal` (polished metal: a gradient, a highlight and a soft rim of reflected light, edged in a darker tone of its own metal, with no heavy outline), `line` (one clean outline in the page's text colour, made to read at 14 pixels) and `color` (flat fills); see [Theming](#theming).
 - **Size, tint, accent and theme** as options: a tint recolours the main part (a medal's metal, a crest's colour, a ball's patches), an accent the second colour (a ribbon, a crest's band, the pennants), a theme sets the ink for light, dark or either.
 - **Turning**: `emblemFrame` and `ballFrame` return the emblem at an angle, in plain SVG: every emblem turns, a ball rolls, a cup keeps its outline and moves its light, and everything flat (gear, a bat, a crown, a sport's icon) flips like a coin; `bindTurn` lets a drag, the arrow keys or an auto-turn do the turning in a page; see [docs/turning.md](./docs/turning.md).
@@ -291,7 +291,7 @@ console.log(emblemName("medal:gold", "ja")); // 金メダル
 ```js
 import { EMBLEM_GROUPS, EMBLEM_IDS, SPORT_NAMES } from "@johnmorrisdotca/dougu-sports";
 
-console.log(Object.keys(EMBLEM_GROUPS).join(" ")); // award trophy medal crest ball gear sport pennant
+console.log(Object.keys(EMBLEM_GROUPS).join(" ")); // award trophy medal crest ball puck gear sport pennant
 console.log(EMBLEM_IDS.includes("ball:soccer")); // true
 console.log(SPORT_NAMES.length); // 38
 ```
@@ -408,6 +408,7 @@ An emblem is a small object: `id`, `en` and `ja` names, a `source` (who drew it)
 | `medal` | Gold, silver and bronze medals on a ribbon of five stripes, and a badge for each of the first three places | `src/emblems/medal/` |
 | `crest` | Four generic crests, tinted by a team's colours, with its letters | `src/emblems/crest/` |
 | `ball` | 66 balls and implements, in 3D, each with its official size: soccer (in 32, 26, 18, 14, 12 and 6 panels, in three colourways, with futsal and beach soccer; [docs/soccer-balls.md](./docs/soccer-balls.md)), basketball, baseball, tennis, rugby, the footballs, golf, the puck, the curling stone and the rest | `src/emblems/ball/` |
+| `puck` | 8 printed pucks: the same puck with a print on its top face that turns with it (a flag and CANADA, a red leaf, stars and stripes, a player's name and number, a made-up signature, a souvenir), and a `face` option for any picture, emblem or flag code; [docs/pucks.md](./docs/pucks.md) | `src/emblems/ball/ball.puck.print.ts` |
 | `gear` | 42 pieces of equipment: sticks, rackets, skates, a glove, a helmet, nets and posts, a javelin, starting blocks, and for the Japanese sports a war fan, a sumo belt, a bamboo sword, a kendo helmet, a judo suit, a belt, a long bow, an arrow and a karate suit | `src/emblems/gear/` |
 | `sport` | One pictogram for each of the thirty-eight sports | `src/emblems/sport/` |
 | `pennant` | A felt championship pennant on a dowel, with a stitched edge, lettered with its words and its year | `src/emblems/pennant/` |
@@ -441,7 +442,7 @@ The thirty-eight sports the ball, gear and sport emblems are made for are `SPORT
 | `EMBLEM_TABLE` | Every emblem object, by id |
 | `TROPHY_HOCKEY_CUP`, `MEDAL_GOLD`, `CREST_SHIELD`, `SPORT_NHL`, `BALL_SOCCER`, `GEAR_HURLEY`... | Each emblem as a constant, named by its id in capitals (`trophy:hockey-cup`); [docs/gallery.md](./docs/gallery.md) ([日本語](./docs/gallery.ja.md)) lists every emblem and states the rule for its constant and the module that takes it alone |
 | `EMBLEM_IDS`, `EMBLEM_GROUPS`, `EMBLEM_FOLDERS`, `EMBLEM_ALIASES` | Every id, the groups, the folder of each group's art, and the short names (`cup` for `trophy:cup`) |
-| `AWARD_IDS`, `TROPHY_IDS`, `MEDAL_IDS`, `CREST_IDS`, `BALL_IDS`, `GEAR_IDS`, `SPORT_IDS`, `PENNANT_IDS` | The ids of each group |
+| `AWARD_IDS`, `TROPHY_IDS`, `MEDAL_IDS`, `CREST_IDS`, `BALL_IDS`, `PUCK_IDS`, `GEAR_IDS`, `SPORT_IDS`, `PENNANT_IDS` | The ids of each group |
 | `MEDAL_KINDS`, `CREST_SHAPES` | The kinds of medal, and the shapes of crest |
 | `SPORT_NAMES` | The thirty-eight sports |
 | `JAPANESE_IDS` | The ids of the Japanese sports and budo, together: sumo, kendo, judo, kyudo and karate, with their trophies and gear ([docs/japanese-sports.md](./docs/japanese-sports.md)) |
@@ -592,7 +593,7 @@ Bug reports and ideas go in the [issues](https://github.com/johnmorrisdotca/doug
 
 ## Changes
 
-See [CHANGELOG.md](./CHANGELOG.md). 0.3.0 adds nineteen soccer balls (26, 18, 14, 12 and 6 panels, winter orange and high-visibility yellow, futsal and beach soccer: 186 emblems); 0.2.1 draws every ball and implement to the rulebook's proportions; 0.2.0 is 167 emblems, every one drawn here, with the Japanese sports, engraving, a turn for every emblem and the compose helpers; 0.1.0 brought the first full set of 148; 0.0.1 was the first preview.
+See [CHANGELOG.md](./CHANGELOG.md). 0.4.0 adds eight printed pucks and a `face` option (194 emblems: [docs/pucks.md](./docs/pucks.md)); 0.3.0 adds nineteen soccer balls (26, 18, 14, 12 and 6 panels, winter orange and high-visibility yellow, futsal and beach soccer: 186 emblems); 0.2.1 draws every ball and implement to the rulebook's proportions; 0.2.0 is 167 emblems, every one drawn here, with the Japanese sports, engraving, a turn for every emblem and the compose helpers; 0.1.0 brought the first full set of 148; 0.0.1 was the first preview.
 
 ## Credits
 

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

@@ -0,0 +1,24 @@
+/** A maple leaf with a stem, as a path about the origin: the blade spans -1 to 1 across and from -1 down to about 0.6, the stem to 1. */
+export declare const LEAF_PATH: string;
+/** A maple leaf: centre (`cx`, `cy`), the width of the blade `w`, and a fill. */
+export declare function leaf(cx: number, cy: number, w: number, fill: string): string;
+/** A five-point star, as a polygon's points, with the given outer radius, centred on (`cx`, `cy`), pointing up (turned by `deg`). */
+export declare function starPoints(cx: number, cy: number, r: number, deg?: number): string;
+export declare const star: (cx: number, cy: number, r: number, fill: string, deg?: number) => string;
+/** The colours of the two flags: a red and a white, a navy and a red. Plain values of the flags' colours; the caller may replace them. */
+export declare const FLAG: {
+    readonly red: "#d52b1e";
+    readonly white: "#ffffff";
+    readonly navy: "#0a3161";
+    readonly usRed: "#b31942";
+};
+/** A flag of Canada's pattern, 2 wide and 1 tall about the origin scaled to the width `w`: red, white, red, with the leaf on the white. */
+export declare function canadaFlag(cx: number, cy: number, w: number, red?: "#d52b1e", white?: "#ffffff"): string;
+/**
+ * The stars and stripes as a rectangle about the origin, `w` wide and `h` tall: thirteen stripes across, a canton of stars in the upper left (`canton` wide, seven stripes tall), and the stars in staggered rows, four
+ * and three to a row, which is what reads at a puck's size (the flag has fifty, in nine rows). A star whose centre lies farther than `reach` from the origin is left out, so a disc cut from the field has no
+ * half stars at its edge.
+ */
+export declare function starsAndStripes(w: number, h: number, canton: number, reach?: number, red?: string, white?: string, blue?: string): string;
+/** A flag of the United States' pattern, 2 wide about the origin scaled to the width `w` (it is 1.9 to 1): stripes and a canton of stars. */
+export declare function usaFlag(cx: number, cy: number, w: number): string;

package/dist/emblems/ball/ball.art.js

@@ -0,0 +1,67 @@
+// The small drawings a printed puck is made of, all our own: an eleven-point maple leaf, a five-point star, a Canadian-style flag (red, white, red, with that leaf) and the stars and stripes. Each is a string of SVG in
+// a unit box (the leaf's blade is 2 wide and 2 tall about the origin) that the face scales and places; the flags take the width they are drawn at. Imports only the core's number writer.
+import { num } from "./ball.core.js";
+/** The right half of the leaf, from the top tip down to the stem: eleven points in all with the left half mirrored (a tip, then a notch, five times over). y runs down. */
+const LEAF_HALF = [
+    [0, -1], [0.15, -0.6], [0.36, -0.7], [0.33, -0.36], [0.67, -0.5], [0.55, -0.2], [1, -0.12], [0.74, 0.12], [0.86, 0.36], [0.4, 0.3], [0.42, 0.56], [0.06, 0.42],
+];
+/** A maple leaf with a stem, as a path about the origin: the blade spans -1 to 1 across and from -1 down to about 0.6, the stem to 1. */
+export const LEAF_PATH = (() => {
+    const right = LEAF_HALF.slice(1);
+    const left = [...LEAF_HALF.slice(1)].reverse().map(([x, y]) => [-x, y]);
+    const pts = [LEAF_HALF[0], ...right, [0.06, 0.92], [-0.06, 0.92], ...left];
+    return `M${pts.map(([x, y]) => `${num(x, 3)} ${num(y, 3)}`).join("L")}Z`;
+})();
+/** A maple leaf: centre (`cx`, `cy`), the width of the blade `w`, and a fill. */
+export function leaf(cx, cy, w, fill) {
+    const k = w / 2;
+    return `<path d="${LEAF_PATH}" transform="translate(${num(cx, 3)} ${num(cy, 3)}) scale(${num(k, 4)})" fill="${fill}"/>`;
+}
+/** A five-point star, as a polygon's points, with the given outer radius, centred on (`cx`, `cy`), pointing up (turned by `deg`). */
+export function starPoints(cx, cy, r, deg = 0) {
+    const pts = [];
+    for (let i = 0; i < 10; i++) {
+        const a = ((deg + i * 36) * Math.PI) / 180;
+        const rr = i % 2 === 0 ? r : r * 0.382;
+        pts.push(`${num(cx + rr * Math.sin(a), 3)} ${num(cy - rr * Math.cos(a), 3)}`);
+    }
+    return pts.join(" ");
+}
+export const star = (cx, cy, r, fill, deg = 0) => `<polygon points="${starPoints(cx, cy, r, deg)}" fill="${fill}"/>`;
+/** The colours of the two flags: a red and a white, a navy and a red. Plain values of the flags' colours; the caller may replace them. */
+export const FLAG = { red: "#d52b1e", white: "#ffffff", navy: "#0a3161", usRed: "#b31942" };
+/** A flag of Canada's pattern, 2 wide and 1 tall about the origin scaled to the width `w`: red, white, red, with the leaf on the white. */
+export function canadaFlag(cx, cy, w, red = FLAG.red, white = FLAG.white) {
+    const k = w / 2;
+    const t = `translate(${num(cx, 3)} ${num(cy, 3)}) scale(${num(k, 4)})`;
+    return `<g transform="${t}"><rect x="-1" y="-.5" width="2" height="1" fill="${white}"/><rect x="-1" y="-.5" width=".5" height="1" fill="${red}"/><rect x=".5" y="-.5" width=".5" height="1" fill="${red}"/><path d="${LEAF_PATH}" transform="translate(0 -.03) scale(.3)" fill="${red}"/></g>`;
+}
+/**
+ * The stars and stripes as a rectangle about the origin, `w` wide and `h` tall: thirteen stripes across, a canton of stars in the upper left (`canton` wide, seven stripes tall), and the stars in staggered rows, four
+ * and three to a row, which is what reads at a puck's size (the flag has fifty, in nine rows). A star whose centre lies farther than `reach` from the origin is left out, so a disc cut from the field has no
+ * half stars at its edge.
+ */
+export function starsAndStripes(w, h, canton, reach = Infinity, red = FLAG.usRed, white = FLAG.white, blue = FLAG.navy) {
+    const x0 = -w / 2, y0 = -h / 2, sh = h / 13;
+    let out = `<rect x="${num(x0, 3)}" y="${num(y0, 3)}" width="${num(w, 3)}" height="${num(h, 3)}" fill="${white}"/>`;
+    for (let i = 0; i < 13; i += 2)
+        out += `<rect x="${num(x0, 3)}" y="${num(y0 + i * sh, 3)}" width="${num(w, 3)}" height="${num(sh, 3)}" fill="${red}"/>`;
+    const ch = sh * 7;
+    out += `<rect x="${num(x0, 3)}" y="${num(y0, 3)}" width="${num(canton, 3)}" height="${num(ch, 3)}" fill="${blue}"/>`;
+    const r = Math.min(canton / 9.5, ch / 15);
+    for (let row = 0; row < 7; row++) {
+        const n = row % 2 === 0 ? 4 : 3;
+        for (let c = 0; c < n; c++) {
+            const x = x0 + canton * ((row % 2 === 0 ? c + 0.5 : c + 1) / 4);
+            const y = y0 + ch * ((row + 0.5) / 7);
+            if (Math.hypot(x, y) <= reach)
+                out += star(x, y, r, white);
+        }
+    }
+    return out;
+}
+/** A flag of the United States' pattern, 2 wide about the origin scaled to the width `w` (it is 1.9 to 1): stripes and a canton of stars. */
+export function usaFlag(cx, cy, w) {
+    const k = w / 2;
+    return `<g transform="translate(${num(cx, 3)} ${num(cy, 3)}) scale(${num(k, 4)})">${starsAndStripes(2, 2 / 1.9, 0.8)}</g>`;
+}

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

@@ -1,3 +1,4 @@
+import type { FlagRenderer, PuckFace } from "./ball.face.ts";
 /** `metal` (also written `colour`): full colour, with shading. `line`: one outline in `currentColor`. */
 export type PieceStyle = "metal" | "colour" | "color" | "line";
 /** `inherit` (the default): the page's text colour. `auto`: dark ink on a light device and pale ink on a dark one. `light` and `dark` force one. */
@@ -18,6 +19,10 @@ export interface PieceOptions {
     locale?: "en" | "ja";
     /** A string is the `<title>` (escaped); `false` drops it and marks the drawing `aria-hidden="true"`. */
     title?: string | false;
+    /** A puck: the print on its top face (see `PuckFace`). The printed pucks (`puck:*`) take it, and so does `ball:puck` through `renderEmblem`, `emblemFrame` and `ballFrame`. Anything else ignores it. */
+    face?: PuckFace;
+    /** A puck: a renderer for the flag codes this package does not draw (`face.flag`), `(code, { shape, size, theme }) => svg`, the one taisen-brackets takes. Synchronous. */
+    flags?: FlagRenderer;
 }
 /** A turn: `yaw` degrees about the vertical axis (0 is the default view), `pitch` the tilt toward you, `roll` the turn about the line of sight. */
 export interface BallFrameOptions extends PieceOptions {
@@ -85,6 +90,10 @@ export interface ResolvedOptions {
     tint: string | undefined;
     accent: string | undefined;
     grain: boolean | undefined;
+    face: PuckFace | undefined;
+    flags: FlagRenderer | undefined;
+    /** A string that tells two faces apart, for the ids of a drawing. */
+    faceKey: string;
 }
 export declare function resolveOptions(o: PieceOptions | undefined): ResolvedOptions;
 /** The ink of a drawing when a theme sets it, and the page it is made to read on. */

package/dist/emblems/ball/ball.core.js

@@ -42,12 +42,23 @@ export function hashOf(text) {
         h = Math.imul(h ^ text.charCodeAt(i), 16777619);
     return (h >>> 0).toString(36);
 }
+/** What tells one face from another: its plain data (a renderer is a function, and only its name goes in). */
+function faceKeyOf(face) {
+    if (typeof face !== "object" || face === null)
+        return "";
+    try {
+        return JSON.stringify(face, (k, v) => (typeof v === "function" ? `fn:${v.name}` : v)) ?? "";
+    }
+    catch {
+        return "?";
+    }
+}
 export function resolveOptions(o) {
     const size = typeof o?.size === "number" && Number.isFinite(o.size) && o.size > 0 ? Math.min(Math.round(o.size * 100) / 100, 4096) : 64;
     const theme = o?.theme === "auto" || o?.theme === "light" || o?.theme === "dark" ? o.theme : "inherit";
     const tint = readColour(o?.tint);
     const accent = readColour(o?.accent);
-    return { style: o?.style === "line" ? "line" : "colour", size, theme, tint: tint === undefined ? undefined : hexOf(tint), accent: accent === undefined ? undefined : hexOf(accent), grain: typeof o?.grain === "boolean" ? o.grain : undefined };
+    return { style: o?.style === "line" ? "line" : "colour", size, theme, tint: tint === undefined ? undefined : hexOf(tint), accent: accent === undefined ? undefined : hexOf(accent), grain: typeof o?.grain === "boolean" ? o.grain : undefined, face: typeof o?.face === "object" && o.face !== null ? o.face : undefined, flags: typeof o?.flags === "function" ? o.flags : undefined, faceKey: faceKeyOf(o?.face) + (typeof o?.flags === "function" ? `|fn:${o.flags.name}` : "") };
 }
 /** The ink of a drawing when a theme sets it, and the page it is made to read on. */
 export const PIECE_INK = { light: "#20262d", dark: "#eef1f3" };

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

@@ -0,0 +1,59 @@
+/** The designs a face starts from. */
+export type PuckDesign = "canada" | "canada-red" | "canada-white" | "usa" | "usa-navy" | "player" | "souvenir";
+/** How a flag is framed: `round` in a circle, `square`, or `rect` in its own proportions (the puck asks for `rect`). */
+export type FlagShape = "round" | "square" | "rect";
+/** What a drawing asks a `flags` renderer for: the shape, a width and height in pixels, and the look (`inherit` for a page whose ink is its own). */
+export interface FlagRequest {
+    shape: FlagShape;
+    size: number;
+    theme: "inherit" | "light" | "dark";
+}
+/**
+ * A function from a country code and a request to an SVG string, or `null` or `undefined` for a code it has no flag for: the same renderer taisen-brackets and kyogijo take, so one adapter over hata serves them
+ * all. It must be synchronous (a drawing is a pure function of its options): hata's `flag()` is asynchronous, so load the flags first and pass `(code) => loaded[code]`. Pass it as the `flags` option of the call.
+ */
+export type FlagRenderer = (code: string, request: FlagRequest) => string | null | undefined;
+/** The colours of a face, by name. The array form is the same list in this order: field, ring, ink, accent, signature. */
+export interface FaceColors {
+    /** The disc's own colour. */
+    field?: string;
+    /** The ring round the edge, where the face has one. */
+    ring?: string;
+    /** The lettering on the ring, and the main lettering on a dark face. */
+    ink?: string;
+    /** The second colour: the leaf, a number's fill, the stars. */
+    accent?: string;
+    /** The marker of a signature. */
+    signature?: string;
+}
+/**
+ * The print on a puck's top face. Everything is optional, and what is not given comes from the design (the puck's own id says which, or `design`). Text is cleaned (no control characters, 24 letters a line) and
+ * drawn in our own vector lettering, so any letter, digit or `- . , ' / : &` is available and any other character is left out.
+ */
+export interface PuckFace {
+    /** The design to start from. A puck with an id of its own already has one; `puck:souvenir` and `ball:puck` take it from here. */
+    design?: PuckDesign;
+    /** Any SVG: a logo, a crest, a drawing. Made safe first (see `safeImage`): shapes, gradients and clip paths only. It is fitted into the middle of the face and replaces the design's own picture. */
+    image?: string;
+    /** A country code (`"ca"` and `"us"` are drawn by this package; another needs the `flags` option of the call). It replaces the design's own picture. */
+    flag?: string;
+    /** The id of a dougu emblem (`"trophy:cup"`, `"sport:nhl"`), drawn small in the middle. Resolved by `renderEmblem`, `emblemFrame` and `ballFrame`. */
+    emblem?: string;
+    /** The words under the picture (`"CANADA"`), one line. */
+    text?: string;
+    /** The words round the edge. A string is set on the top; a pair is the top and the bottom; `false` leaves the ring out. */
+    ringText?: string | readonly [string, string] | false;
+    /** A big number, like a jersey's. Up to three characters. */
+    number?: string | number;
+    /** A surname, set on the ring like a jersey's name. */
+    name?: string;
+    /** A seed for a made-up signature, or `false` for none. A number or any text; the same seed always draws the same squiggle, and no seed is a real person's hand. */
+    signature?: number | string | false;
+    /** The colours: by name, or as an array in the order field, ring, ink, accent, signature. A colour is `#rgb`, `#rrggbb` or `rgb()`; anything else is ignored. */
+    colors?: FaceColors | readonly (string | undefined)[];
+}
+/** 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 declare function faceMarkup(face: PuckFace | undefined, design: PuckDesign, own: PuckFace | undefined, prefix: string, flags?: FlagRenderer, theme?: FlagRequest["theme"]): {
+    defs: string;
+    body: string;
+};

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

@@ -0,0 +1,288 @@
+// 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, flags, theme) {
+    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,
+        theme,
+        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: "rect", size: 120, theme: f.theme });
+            }
+            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, flags, theme = "inherit") {
+    const f = resolve(face, design, own, typeof flags === "function" ? flags : undefined, theme);
+    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;