@johnmorrisdotca/dougu-sports 0.28.1 → 0.30.0

package/dist/brands/brand.render.d.ts

@@ -1,7 +1,24 @@
 import { type MakerId, type TeamId } from "./brand.data.ts";
-/** What a maker's logo is made of: its mark alone (the default), its wordmark alone, the two side by side or the wordmark under the mark. */
+/**
+ * What a maker's logo is made of: its mark alone (the default), its wordmark alone, the two side by side or the wordmark under the mark.
+ * @example
+ * ```ts
+ * import type { LogoLayout } from "@johnmorrisdotca/dougu-sports/brands";
+ * const layout: LogoLayout = "stacked";
+ * console.log(layout);
+ * ```
+ */
 export type LogoLayout = "mark" | "wordmark" | "horizontal" | "stacked";
-/** The options every logo takes. */
+/**
+ * The options every logo takes.
+ * @example
+ * ```ts
+ * import { teamLogo } from "@johnmorrisdotca/dougu-sports/brands";
+ * import type { LogoOptions } from "@johnmorrisdotca/dougu-sports/brands";
+ * const options: LogoOptions = { color: "mono", ink: "#222222", size: 48 };
+ * console.log(teamLogo("saltmere", options).startsWith("<svg"));
+ * ```
+ */
 export interface LogoOptions {
     /** `"full"` (the default) draws the logo in its own colours; `"mono"` draws it in one colour, `ink`. */
     color?: "full" | "mono";
@@ -14,12 +31,29 @@ export interface LogoOptions {
     /** The `<title>`: a string writes that title (escaped), `false` drops it and marks the drawing `aria-hidden="true"`. By default the maker's name or the team's name. */
     title?: string | false;
 }
-/** The options of a maker's logo. */
+/**
+ * The options of a maker's logo.
+ * @example
+ * ```ts
+ * import { makerLogo } from "@johnmorrisdotca/dougu-sports/brands";
+ * import type { MakerLogoOptions } from "@johnmorrisdotca/dougu-sports/brands";
+ * const options: MakerLogoOptions = { layout: "horizontal", theme: "dark", size: 48 };
+ * console.log(makerLogo("arvane", options).startsWith("<svg"));
+ * ```
+ */
 export interface MakerLogoOptions extends LogoOptions {
     /** Which parts to draw. By default only the mark: the name is optional. */
     layout?: LogoLayout;
 }
-/** Where a logo goes inside another drawing: its top left corner and its height, in that drawing's units. */
+/**
+ * Where a logo goes inside another drawing: its top left corner and its height, in that drawing's units.
+ * @example
+ * ```ts
+ * import type { LogoPlace } from "@johnmorrisdotca/dougu-sports/brands";
+ * const place: LogoPlace = { x: 12, y: 8, size: 30 };
+ * console.log(place.size);
+ * ```
+ */
 export interface LogoPlace {
     x?: number;
     y?: number;
@@ -28,6 +62,9 @@ export interface LogoPlace {
 }
 /**
  * A fictional maker's logo as an SVG document: its mark by default, or its wordmark, or both (`layout`). In its own colours for a light or a dark page, or in one colour (`color: "mono"`, `ink`).
+ * @param id - A maker id from `MAKER_IDS`.
+ * @param o - The layout, colours, size and title.
+ * @returns The logo as a document of SVG.
  * @example
  * ```ts
  * import { makerLogo } from "@johnmorrisdotca/dougu-sports/brands";
@@ -37,11 +74,41 @@ export interface LogoPlace {
  * ```
  */
 export declare function makerLogo(id: MakerId, o?: MakerLogoOptions): string;
-/** A fictional team's logo as an SVG document, in its own colours for a light or a dark page, or in one colour. */
+/**
+ * A fictional team's logo as an SVG document, in its own colours for a light or a dark page, or in one colour.
+ * @param id - A team id from `TEAM_IDS`.
+ * @param o - The colours, size and title.
+ * @returns The logo as a document of SVG.
+ * @example
+ * ```ts
+ * import { teamLogo } from "@johnmorrisdotca/dougu-sports/brands";
+ * console.log(teamLogo("saltmere", { size: 64 }).startsWith("<svg"));
+ * ```
+ */
 export declare function teamLogo(id: TeamId, o?: LogoOptions): string;
 /**
  * A maker's logo as a `<g>` to put inside another SVG: a jersey, a cap, a T-shirt, a card. It has no id, no gradient and no `<title>`, so any number of them can sit in one document. `x`, `y` and `size` place it in that drawing's units.
+ * @param id - A maker id from `MAKER_IDS`.
+ * @param place - Where the logo goes: its top left corner and height.
+ * @param o - The layout and colours.
+ * @returns A `<g>` element to place inside another SVG.
+ * @example
+ * ```ts
+ * import { makerLogoGroup } from "@johnmorrisdotca/dougu-sports/brands";
+ * console.log(makerLogoGroup("arvane", { x: 10, y: 10, size: 40 }).startsWith("<g"));
+ * ```
  */
 export declare function makerLogoGroup(id: MakerId, place?: LogoPlace, o?: Omit<MakerLogoOptions, "size" | "title">): string;
-/** A team's logo as a `<g>` to put inside another SVG (see `makerLogoGroup`). */
+/**
+ * A team's logo as a `<g>` to put inside another SVG (see `makerLogoGroup`).
+ * @param id - A team id from `TEAM_IDS`.
+ * @param place - Where the logo goes: its top left corner and height.
+ * @param o - The colours.
+ * @returns A `<g>` element to place inside another SVG.
+ * @example
+ * ```ts
+ * import { teamLogoGroup } from "@johnmorrisdotca/dougu-sports/brands";
+ * console.log(teamLogoGroup("saltmere", { x: 0, y: 0, size: 40 }).startsWith("<g"));
+ * ```
+ */
 export declare function teamLogoGroup(id: TeamId, place?: LogoPlace, o?: Omit<LogoOptions, "size" | "title">): string;

package/dist/brands/brand.render.js

@@ -77,6 +77,9 @@ function team(id) {
 }
 /**
  * A fictional maker's logo as an SVG document: its mark by default, or its wordmark, or both (`layout`). In its own colours for a light or a dark page, or in one colour (`color: "mono"`, `ink`).
+ * @param id - A maker id from `MAKER_IDS`.
+ * @param o - The layout, colours, size and title.
+ * @returns The logo as a document of SVG.
  * @example
  * ```ts
  * import { makerLogo } from "@johnmorrisdotca/dougu-sports/brands";
@@ -89,18 +92,48 @@ export function makerLogo(id, o) {
     const data = maker(id);
     return document(makerBody(data, layoutOf(o?.layout), o), data.name, o);
 }
-/** A fictional team's logo as an SVG document, in its own colours for a light or a dark page, or in one colour. */
+/**
+ * A fictional team's logo as an SVG document, in its own colours for a light or a dark page, or in one colour.
+ * @param id - A team id from `TEAM_IDS`.
+ * @param o - The colours, size and title.
+ * @returns The logo as a document of SVG.
+ * @example
+ * ```ts
+ * import { teamLogo } from "@johnmorrisdotca/dougu-sports/brands";
+ * console.log(teamLogo("saltmere", { size: 64 }).startsWith("<svg"));
+ * ```
+ */
 export function teamLogo(id, o) {
     const data = team(id);
     return document(teamBody(data, o), `${data.city} ${data.nickname}`, o);
 }
 /**
  * A maker's logo as a `<g>` to put inside another SVG: a jersey, a cap, a T-shirt, a card. It has no id, no gradient and no `<title>`, so any number of them can sit in one document. `x`, `y` and `size` place it in that drawing's units.
+ * @param id - A maker id from `MAKER_IDS`.
+ * @param place - Where the logo goes: its top left corner and height.
+ * @param o - The layout and colours.
+ * @returns A `<g>` element to place inside another SVG.
+ * @example
+ * ```ts
+ * import { makerLogoGroup } from "@johnmorrisdotca/dougu-sports/brands";
+ * console.log(makerLogoGroup("arvane", { x: 10, y: 10, size: 40 }).startsWith("<g"));
+ * ```
  */
 export function makerLogoGroup(id, place, o) {
     return group(makerBody(maker(id), layoutOf(o?.layout), o), place);
 }
-/** A team's logo as a `<g>` to put inside another SVG (see `makerLogoGroup`). */
+/**
+ * A team's logo as a `<g>` to put inside another SVG (see `makerLogoGroup`).
+ * @param id - A team id from `TEAM_IDS`.
+ * @param place - Where the logo goes: its top left corner and height.
+ * @param o - The colours.
+ * @returns A `<g>` element to place inside another SVG.
+ * @example
+ * ```ts
+ * import { teamLogoGroup } from "@johnmorrisdotca/dougu-sports/brands";
+ * console.log(teamLogoGroup("saltmere", { x: 0, y: 0, size: 40 }).startsWith("<g"));
+ * ```
+ */
 export function teamLogoGroup(id, place, o) {
     return group(teamBody(team(id), o), place);
 }

package/dist/element.d.ts

@@ -0,0 +1,32 @@
+import type { TurnController } from "./turn-control.ts";
+/** `HTMLElement` where there is one; a bare class on a server, so that importing this module there does not throw. */
+declare const Base: typeof HTMLElement;
+/**
+ * The `<dougu-emblem>` custom element: one emblem drawn as SVG in its shadow root. Importing this entry point registers the tag once. It takes the attributes `emblem` (an id such as `trophy:cup`, or a short name), `variant` (`metal`, `line` or `color`), `size` (pixels, 64 by default), `tint`, `accent`, `initials`, `theme` (`inherit`, `auto`, `light` or `dark`), `locale` (`en` or `ja`), `title`, `yaw`, `pitch` and `roll` (the angle it is drawn at), `turnable` (a drag, the arrow keys and Space turn it), `autoplay` (it turns by itself, unless the reader prefers reduced motion; it waits while it is off screen) and `speed` (degrees a second). Change any attribute and it is drawn again. An emblem that cannot turn is drawn still whatever `turnable` says.
+ *
+ * @example
+ * ```ts no-run
+ * import type { DouguEmblem } from "@johnmorrisdotca/dougu-sports/element";
+ *
+ * const cup = document.createElement("dougu-emblem") as DouguEmblem;
+ * cup.setAttribute("emblem", "trophy:stanley-cup");
+ * cup.setAttribute("size", "160");
+ * cup.setAttribute("turnable", "");
+ * document.body.append(cup);
+ * ```
+ */
+export declare class DouguEmblem extends Base {
+    #private;
+    static observedAttributes: string[];
+    /** The controller of the turning while the emblem is turnable and drawn, or `undefined`: its angles, `play()`, `pause()` and `setAngles()`. */
+    get turner(): TurnController | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "dougu-emblem": DouguEmblem;
+    }
+}
+export {};

package/dist/element.js

@@ -0,0 +1,177 @@
+/// <reference lib="dom" />
+// <dougu-emblem>: any emblem as a web component, still or turning by hand or by itself. Importing this entry point registers the tag once.
+import { emblemFrame, renderEmblem } from "./emblems/emblem.api.js";
+import { bindTurn } from "./turn-full.js";
+const STYLE = ":host{display:inline-block;line-height:0;max-width:100%}.stage{display:block;line-height:0}.stage svg{display:block;max-width:100%;height:auto}";
+const number = (value) => {
+    if (value === null || value.trim() === "")
+        return undefined;
+    const n = Number(value);
+    return Number.isFinite(n) ? n : undefined;
+};
+const flag = (value) => value !== null && value !== "false" && value !== "0";
+/** `HTMLElement` where there is one; a bare class on a server, so that importing this module there does not throw. */
+const Base = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+/**
+ * The `<dougu-emblem>` custom element: one emblem drawn as SVG in its shadow root. Importing this entry point registers the tag once. It takes the attributes `emblem` (an id such as `trophy:cup`, or a short name), `variant` (`metal`, `line` or `color`), `size` (pixels, 64 by default), `tint`, `accent`, `initials`, `theme` (`inherit`, `auto`, `light` or `dark`), `locale` (`en` or `ja`), `title`, `yaw`, `pitch` and `roll` (the angle it is drawn at), `turnable` (a drag, the arrow keys and Space turn it), `autoplay` (it turns by itself, unless the reader prefers reduced motion; it waits while it is off screen) and `speed` (degrees a second). Change any attribute and it is drawn again. An emblem that cannot turn is drawn still whatever `turnable` says.
+ *
+ * @example
+ * ```ts no-run
+ * import type { DouguEmblem } from "@johnmorrisdotca/dougu-sports/element";
+ *
+ * const cup = document.createElement("dougu-emblem") as DouguEmblem;
+ * cup.setAttribute("emblem", "trophy:stanley-cup");
+ * cup.setAttribute("size", "160");
+ * cup.setAttribute("turnable", "");
+ * document.body.append(cup);
+ * ```
+ */
+export class DouguEmblem extends Base {
+    static observedAttributes = ["emblem", "variant", "size", "tint", "accent", "initials", "theme", "locale", "title", "yaw", "pitch", "roll", "turnable", "autoplay", "speed"];
+    #stage;
+    #turner;
+    #watch;
+    #resume = false;
+    #queued = false;
+    /** The controller of the turning while the emblem is turnable and drawn, or `undefined`: its angles, `play()`, `pause()` and `setAngles()`. */
+    get turner() {
+        return this.#turner;
+    }
+    connectedCallback() {
+        this.#shell();
+        this.#draw();
+        if (typeof IntersectionObserver === "function") {
+            this.#watch = new IntersectionObserver((seen) => {
+                const visible = seen[seen.length - 1]?.isIntersecting !== false;
+                if (!visible && this.#turner?.playing) {
+                    this.#turner.pause();
+                    this.#resume = true;
+                }
+                else if (visible && this.#resume) {
+                    this.#resume = false;
+                    this.#turner?.play();
+                }
+            });
+            this.#watch.observe(this);
+        }
+    }
+    disconnectedCallback() {
+        this.#watch?.disconnect();
+        this.#watch = undefined;
+        this.#resume = false;
+        this.#turner?.destroy();
+        this.#turner = undefined;
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected || this.#queued)
+            return;
+        this.#queued = true;
+        queueMicrotask(() => {
+            this.#queued = false;
+            if (this.isConnected)
+                this.#draw();
+        });
+    }
+    #shell() {
+        if (this.#stage)
+            return;
+        const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+        if (typeof CSSStyleSheet === "function" && "adoptedStyleSheets" in root) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(STYLE);
+            root.adoptedStyleSheets = [sheet];
+        }
+        else
+            root.innerHTML = `<style>${STYLE}</style>`;
+        const stage = document.createElement("div");
+        stage.className = "stage";
+        stage.setAttribute("part", "stage");
+        root.append(stage);
+        this.#stage = stage;
+    }
+    #options() {
+        const get = (name) => this.getAttribute(name);
+        const options = {};
+        const variant = get("variant");
+        if (variant === "metal" || variant === "line" || variant === "color")
+            options.style = variant;
+        const theme = get("theme");
+        if (theme === "inherit" || theme === "auto" || theme === "light" || theme === "dark")
+            options.theme = theme;
+        const size = number(get("size"));
+        if (size !== undefined && size > 0)
+            options.size = size;
+        const tint = get("tint");
+        if (tint)
+            options.tint = tint;
+        const accent = get("accent");
+        if (accent)
+            options.accent = accent;
+        const initials = get("initials");
+        if (initials)
+            options.initials = initials;
+        if (get("locale") === "ja")
+            options.locale = "ja";
+        const title = get("title");
+        if (title !== null)
+            options.title = title === "" ? false : title;
+        const speed = number(get("speed"));
+        if (speed !== undefined)
+            options.speed = speed;
+        const yaw = number(get("yaw"));
+        const pitch = number(get("pitch"));
+        const roll = number(get("roll"));
+        if (yaw !== undefined)
+            options.yaw = yaw;
+        if (pitch !== undefined)
+            options.pitch = pitch;
+        if (roll !== undefined)
+            options.roll = roll;
+        return options;
+    }
+    #draw() {
+        const stage = this.#stage;
+        if (!stage)
+            return;
+        const ref = this.getAttribute("emblem");
+        this.dataset["state"] = "empty";
+        if (!ref) {
+            this.#turner?.destroy();
+            this.#turner = undefined;
+            stage.innerHTML = "";
+            return;
+        }
+        const options = this.#options();
+        try {
+            if (flag(this.getAttribute("turnable")) || flag(this.getAttribute("autoplay"))) {
+                const { yaw, pitch, roll, ...rest } = options;
+                const angles = { ...(yaw === undefined ? {} : { yaw }), ...(pitch === undefined ? {} : { pitch }), ...(roll === undefined ? {} : { roll }) };
+                if (this.#turner) {
+                    this.#turner.update(ref, rest);
+                    if (Object.keys(angles).length > 0)
+                        this.#turner.setAngles(angles);
+                    if (flag(this.getAttribute("autoplay")) && !this.#turner.playing)
+                        this.#turner.play();
+                    else if (!flag(this.getAttribute("autoplay")) && this.#turner.playing)
+                        this.#turner.pause();
+                }
+                else
+                    this.#turner = bindTurn(stage, ref, { ...rest, ...angles, autoPlay: flag(this.getAttribute("autoplay")) });
+                this.dataset["state"] = "live";
+                return;
+            }
+            this.#turner?.destroy();
+            this.#turner = undefined;
+            const turned = options.yaw !== undefined || options.pitch !== undefined || options.roll !== undefined;
+            stage.innerHTML = turned ? emblemFrame(ref, options) : renderEmblem(ref, options);
+            this.dataset["state"] = "still";
+        }
+        catch {
+            stage.innerHTML = "";
+            this.dataset["state"] = "error";
+        }
+    }
+}
+if (typeof customElements !== "undefined" && !customElements.get("dougu-emblem"))
+    customElements.define("dougu-emblem", DouguEmblem);

package/dist/emblems/award/badge.d.ts

@@ -1,2 +1,9 @@
-/** Badge with a star. */
+/**
+ * Badge with a star.
+ * @example
+ * ```ts
+ * import { AWARD_BADGE } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_BADGE.id, AWARD_BADGE.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const AWARD_BADGE: import("../emblem.core.ts").Emblem<import("../emblem.shapes.ts").FlatModel>;

package/dist/emblems/award/badge.js

@@ -1,6 +1,13 @@
 // Badge: a seal with a star and two tails of ribbon, drawn for this package, in metal, line and flat colour.
 import { circlePath, defineIcon, starPath } from "../emblem.shapes.js";
-/** Badge with a star. */
+/**
+ * Badge with a star.
+ * @example
+ * ```ts
+ * import { AWARD_BADGE } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_BADGE.id, AWARD_BADGE.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export const AWARD_BADGE = /* @__PURE__ */ defineIcon("award:badge", "Badge", "バッジ", "ours", {
     metal: "gold",
     ribbon: "#c0392b",

package/dist/emblems/award/crown.d.ts

@@ -1,2 +1,9 @@
-/** Crown. */
+/**
+ * Crown.
+ * @example
+ * ```ts
+ * import { AWARD_CROWN } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_CROWN.id, AWARD_CROWN.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const AWARD_CROWN: import("../emblem.core.ts").Emblem<import("../emblem.shapes.ts").FlatModel>;

package/dist/emblems/award/crown.js

@@ -1,6 +1,13 @@
 // Crown: three points tipped with balls over a jewelled band, drawn for this package, in metal, line and flat colour.
 import { circlePath, defineIcon } from "../emblem.shapes.js";
-/** Crown. */
+/**
+ * Crown.
+ * @example
+ * ```ts
+ * import { AWARD_CROWN } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_CROWN.id, AWARD_CROWN.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export const AWARD_CROWN = /* @__PURE__ */ defineIcon("award:crown", "Crown", "王冠", "ours", {
     metal: "gold",
     ribbon: "#c0392b",

package/dist/emblems/award/medal.d.ts

@@ -1,2 +1,9 @@
-/** Medal on a ribbon. */
+/**
+ * Medal on a ribbon.
+ * @example
+ * ```ts
+ * import { AWARD_MEDAL } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_MEDAL.id, AWARD_MEDAL.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const AWARD_MEDAL: import("../emblem.core.ts").Emblem<import("../emblem.shapes.ts").FlatModel>;

package/dist/emblems/award/medal.js

@@ -1,6 +1,13 @@
 // Medal: a ribbon with a notched end and a star hanging from it, drawn for this package, in metal, line and flat colour.
 import { defineIcon, starPath } from "../emblem.shapes.js";
-/** Medal on a ribbon. */
+/**
+ * Medal on a ribbon.
+ * @example
+ * ```ts
+ * import { AWARD_MEDAL } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_MEDAL.id, AWARD_MEDAL.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export const AWARD_MEDAL = /* @__PURE__ */ defineIcon("award:medal", "Medal", "メダル", "ours", {
     metal: "gold",
     ribbon: "#c0392b",

package/dist/emblems/award/ribbon.d.ts

@@ -1,2 +1,9 @@
-/** Ribbon. */
+/**
+ * Ribbon.
+ * @example
+ * ```ts
+ * import { AWARD_RIBBON } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_RIBBON.id, AWARD_RIBBON.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const AWARD_RIBBON: import("../emblem.core.ts").Emblem<import("../emblem.shapes.ts").FlatModel>;

package/dist/emblems/award/ribbon.js

@@ -1,6 +1,13 @@
 // Ribbon: a banner ribbon, a gold band with two red notched tails hanging behind it, drawn for this package, in metal, line and flat colour. It stands alone (a prize ribbon without a rosette); `trophy:rosette` is the one with ribbons.
 import { defineFlat } from "../emblem.shapes.js";
-/** Ribbon. */
+/**
+ * Ribbon.
+ * @example
+ * ```ts
+ * import { AWARD_RIBBON } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_RIBBON.id, AWARD_RIBBON.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export const AWARD_RIBBON = /* @__PURE__ */ defineFlat("award:ribbon", "Ribbon", "リボン", "ours", {
     metal: "gold",
     ribbon: "#c0392b",

package/dist/emblems/award/shield.d.ts

@@ -1,2 +1,9 @@
-/** Shield. */
+/**
+ * Shield.
+ * @example
+ * ```ts
+ * import { AWARD_SHIELD } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_SHIELD.id, AWARD_SHIELD.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const AWARD_SHIELD: import("../emblem.core.ts").Emblem<import("../emblem.shapes.ts").FlatModel>;

package/dist/emblems/award/shield.js

@@ -1,6 +1,13 @@
 // Shield: a shield with a bevelled face, drawn for this package, in metal, line and flat colour.
 import { defineIcon } from "../emblem.shapes.js";
-/** Shield. */
+/**
+ * Shield.
+ * @example
+ * ```ts
+ * import { AWARD_SHIELD } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_SHIELD.id, AWARD_SHIELD.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export const AWARD_SHIELD = /* @__PURE__ */ defineIcon("award:shield", "Shield", "盾", "ours", {
     metal: "silver",
     front: [

package/dist/emblems/award/star.d.ts

@@ -1,2 +1,9 @@
-/** Star. */
+/**
+ * Star.
+ * @example
+ * ```ts
+ * import { AWARD_STAR } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_STAR.id, AWARD_STAR.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const AWARD_STAR: import("../emblem.core.ts").Emblem<import("../emblem.shapes.ts").FlatModel>;

package/dist/emblems/award/star.js

@@ -1,6 +1,13 @@
 // Star: a five-pointed star with a bevelled face, drawn for this package, in metal, line and flat colour.
 import { defineIcon, starPath } from "../emblem.shapes.js";
-/** Star. */
+/**
+ * Star.
+ * @example
+ * ```ts
+ * import { AWARD_STAR } from "@johnmorrisdotca/dougu-sports";
+ * console.log(AWARD_STAR.id, AWARD_STAR.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export const AWARD_STAR = /* @__PURE__ */ defineIcon("award:star", "Star", "星", "ours", {
     metal: "gold",
     front: [

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

@@ -1 +1,9 @@
+/**
+ * The Australian football emblem (オージーボール in Japanese): id `ball:afl`, a ball turned in 3D.
+ * @example
+ * ```ts
+ * import { BALL_AFL } from "@johnmorrisdotca/dougu-sports";
+ * console.log(BALL_AFL.id, BALL_AFL.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const BALL_AFL: import("./ball.core.ts").Piece<import("./ball.engine.ts").BallSpec>;

package/dist/emblems/ball/ball.afl.js

@@ -3,6 +3,14 @@ import { defineBall } from "./ball.engine.js";
 import { footballSeams } from "./ball.family.prolate.js";
 import { stitches } from "./ball.stitch.js";
 import { mix } from "./ball.core.js";
+/**
+ * The Australian football emblem (オージーボール in Japanese): id `ball:afl`, a ball turned in 3D.
+ * @example
+ * ```ts
+ * import { BALL_AFL } from "@johnmorrisdotca/dougu-sports";
+ * console.log(BALL_AFL.id, BALL_AFL.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export const BALL_AFL = /* @__PURE__ */ defineBall({
     id: "ball:afl",
     en: "Australian football",

package/dist/emblems/ball/ball.baseball.vintage.d.ts

@@ -1,10 +1,45 @@
-/** The 1850s and 1860s: a cover of four pieces sewn along four seams that run from one point to the opposite one, like the peel of a lemon, in aged leather with a dark thread. No rule fixed the ball then, so it is drawn at the size of today's. */
+/**
+ * The 1850s and 1860s: a cover of four pieces sewn along four seams that run from one point to the opposite one, like the peel of a lemon, in aged leather with a dark thread. No rule fixed the ball then, so it is drawn at the size of today's.
+ * @example
+ * ```ts
+ * import { BALL_BASEBALL_LEMON_PEEL } from "@johnmorrisdotca/dougu-sports";
+ * console.log(BALL_BASEBALL_LEMON_PEEL.id, BALL_BASEBALL_LEMON_PEEL.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const BALL_BASEBALL_LEMON_PEEL: import("./ball.core.ts").Piece<import("./ball.engine.ts").BallSpec>;
-/** The figure-8 seam stitched with alternate red and blue stitches (the American League's laces, in the recollection of a 1930s player). */
+/**
+ * The figure-8 seam stitched with alternate red and blue stitches (the American League's laces, in the recollection of a 1930s player).
+ * @example
+ * ```ts
+ * import { BALL_BASEBALL_RED_BLUE } from "@johnmorrisdotca/dougu-sports";
+ * console.log(BALL_BASEBALL_RED_BLUE.id, BALL_BASEBALL_RED_BLUE.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const BALL_BASEBALL_RED_BLUE: import("./ball.core.ts").Piece<import("./ball.engine.ts").BallSpec>;
-/** The figure-8 seam stitched with alternate black and red stitches (the National League's laces, in the same recollection). */
+/**
+ * The figure-8 seam stitched with alternate black and red stitches (the National League's laces, in the same recollection).
+ * @example
+ * ```ts
+ * import { BALL_BASEBALL_BLACK_RED } from "@johnmorrisdotca/dougu-sports";
+ * console.log(BALL_BASEBALL_BLACK_RED.id, BALL_BASEBALL_BLACK_RED.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const BALL_BASEBALL_BLACK_RED: import("./ball.core.ts").Piece<import("./ball.engine.ts").BallSpec>;
-/** An old ball: the leather gone the colour of tea and scuffed, the red thread faded. */
+/**
+ * An old ball: the leather gone the colour of tea and scuffed, the red thread faded.
+ * @example
+ * ```ts
+ * import { BALL_BASEBALL_VINTAGE_LEATHER } from "@johnmorrisdotca/dougu-sports";
+ * console.log(BALL_BASEBALL_VINTAGE_LEATHER.id, BALL_BASEBALL_VINTAGE_LEATHER.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const BALL_BASEBALL_VINTAGE_LEATHER: import("./ball.core.ts").Piece<import("./ball.engine.ts").BallSpec>;
-/** The optic yellow 11 inch softball: 27.9 cm (circumference 27.6 to 28.3 cm, 166.5 to 173.6 g), red stitch, as the WBSC's Slow Pitch rules set it for women and girls. */
+/**
+ * The optic yellow 11 inch softball: 27.9 cm (circumference 27.6 to 28.3 cm, 166.5 to 173.6 g), red stitch, as the WBSC's Slow Pitch rules set it for women and girls.
+ * @example
+ * ```ts
+ * import { BALL_SOFTBALL_11_OPTIC } from "@johnmorrisdotca/dougu-sports";
+ * console.log(BALL_SOFTBALL_11_OPTIC.id, BALL_SOFTBALL_11_OPTIC.svg({ size: 48 }).startsWith("<svg"));
+ * ```
+ */
 export declare const BALL_SOFTBALL_11_OPTIC: import("./ball.core.ts").Piece<import("./ball.engine.ts").BallSpec>;