@johnmorrisdotca/kyogijo-stadiums 0.0.0-stage → 0.4.0

package/dist/parks.js

@@ -0,0 +1,92 @@
+import { FEET_PER_METRE, fenceAt, fencePoints, DEFAULT_FENCE } from "./geometry.js";
+import { PARK_DATA } from "./parks.data.js";
+import { officialName, placesNamed } from "./names.js";
+/** The address of the revision of an article that a park's figures were read from. */
+export function parkSourceUrl(source, language = "en") {
+    return `https://${language}.wikipedia.org/w/index.php?title=${encodeURIComponent(source.title.replace(/ /g, "_"))}&oldid=${source.revision}`;
+}
+const toFeet = (data) => {
+    const { points, unit, periods, walls, ...rest } = data;
+    const scale = unit === "m" ? FEET_PER_METRE : 1;
+    const feet = (list) => list.map(([angle, distance]) => [angle, Math.round(distance * scale * 10) / 10]);
+    const high = (wall) => {
+        const { height, ...stretch } = wall;
+        return { ...stretch, height_ft: Math.round(height * scale * 1000) / 1000 };
+    };
+    return {
+        ...rest,
+        points: feet(points),
+        ...(periods === undefined ? {} : { periods: periods.map((period) => ({ ...period, points: feet(period.points) })) }),
+        ...(walls === undefined ? {} : { walls: walls.map(high) }),
+    };
+};
+/** Every park by its key: the thirty current MLB ballparks, forty-three past ones, the twelve NPB home parks, and eight secondary or past NPB grounds. */
+export const PARKS = Object.freeze(Object.fromEntries(PARK_DATA.map((data) => [data.id, toFeet(data)])));
+/** The keys of `PARKS`: the current MLB parks, then the past ones by their first season, then the NPB's, each in the order of the sources. */
+export const PARK_IDS = Object.freeze(PARK_DATA.map((data) => data.id));
+/** The unit a park's figures were published in: metres for the parks of Japan (converted to feet once, in `PARKS`), feet for the rest. `undefined` for a key that is not a park. */
+export const parkUnit = (id) => PARK_DATA.find((data) => data.id === id)?.unit;
+/**
+ * The parks that answer to a name, best match first: the everyday names, then the official and cited names and the sponsors', then the former names and the nicknames. A name is
+ * compared without case, accents, spaces or punctuation, in full-width or half-width, and in Japanese with hiragana or katakana and with or without the long vowel mark.
+ * @example
+ * ```ts
+ * import { parksByName } from "@johnmorrisdotca/kyogijo-stadiums/parks";
+ * console.log(parksByName("Camden Yards")[0]?.id, parksByName("甲子園")[0]?.id, parksByName("ハマスタ")[0]?.id);
+ * // oriole-park-at-camden-yards hanshin-koshien-stadium yokohama-stadium
+ * ```
+ */
+export const parksByName = (name) => placesNamed(Object.values(PARKS), name);
+/** The park a name belongs to (see `parksByName`; the best match when several answer to it), or `undefined`. */
+export const parkByName = (name) => parksByName(name)[0];
+/** A park's name in a language: the everyday name in English, or in Japanese. */
+export const parkNameIn = (park, language = "en") => (language === "ja" ? park.nameJa : park.name);
+/** The name a park officially has in a language, when it is not the everyday name (`Hanshin Koshien Stadium` for `Koshien Stadium`), in the year given or today; else `undefined`. */
+export const parkOfficialName = (park, language = "en", year) => officialName(park, language, undefined, Number.isFinite(year) ? year : undefined);
+/** The park with a key, or `undefined`. */
+export const parkById = (id) => (id === undefined ? undefined : PARKS[id]);
+/** The park whose Wikidata item is `Q49136`, or `undefined`. */
+export const parkByWikidata = (wikidata) => Object.values(PARKS).find((park) => park.wikidata === wikidata);
+/** A park's fence in a season: the period that names the season, else the park's last fence. */
+export function parkPointsIn(park, year) {
+    if (year === undefined || !Number.isFinite(year))
+        return park.points;
+    return park.periods?.find((period) => period.from <= year && year <= period.to)?.points ?? park.points;
+}
+/** True when something dated by its `first` and `last` season stands in `year`; without a year, what stands today (has no `last`). */
+const standsIn = (dated, year) => {
+    if (year === undefined || !Number.isFinite(year))
+        return dated.last === undefined;
+    return (dated.first === undefined || dated.first <= year) && (dated.last === undefined || year <= dated.last);
+};
+/** The stretches of fence a park has in a season, with their heights in feet: the heights the article dates for that season, else those of today. */
+export function parkWallsIn(park, year) {
+    return (park.walls ?? []).filter((wall) => standsIn(wall, year));
+}
+/** The quirks a park has in a season: those the article dates for that season, else those of today. */
+export function parkQuirksIn(park, year) {
+    return (park.quirks ?? []).filter((quirk) => standsIn(quirk, year));
+}
+/**
+ * The fence points a drawing uses: a park's (as it stood in `year`, when the park has dated fences), with any of the
+ * five usual distances in `fence` laid over them, or the usual 330, 375, 400, 375 and 330 feet of a generic field (or the
+ * `generic` points a league's rules give).
+ */
+export function fenceFor(park, fence, year, generic = fencePoints(DEFAULT_FENCE)) {
+    const base = park === undefined ? [...generic] : parkPointsIn(park, year);
+    if (fence === undefined)
+        return base;
+    const keys = [["left", -45], ["leftCenter", -22.5], ["center", 0], ["rightCenter", 22.5], ["right", 45]];
+    const given = keys.filter(([key]) => typeof fence[key] === "number" && Number.isFinite(fence[key]) && fence[key] > 0);
+    if (given.length === 0)
+        return base;
+    // The caller's distances stand at their angles; the park's own points that fall near one of them give way.
+    const mine = given.map(([key, angle]) => [angle, fence[key]]);
+    const kept = base.filter(([angle]) => !mine.some(([chosen]) => Math.abs(chosen - angle) < 11));
+    const filled = [...kept, ...mine];
+    if (!filled.some(([angle]) => angle === -45))
+        filled.push([-45, fenceAt(base, -45)]);
+    if (!filled.some(([angle]) => angle === 45))
+        filled.push([45, fenceAt(base, 45)]);
+    return filled.sort((a, b) => a[0] - b[0]);
+}

package/dist/plot-entry.d.ts

@@ -0,0 +1,2 @@
+export { surfaceMark, surfaceScales } from "./plot.ts";
+export type { PlotContext, PlotDocument, PlotElement, PlotScales, SurfaceMark, SurfaceScales } from "./plot.ts";

package/dist/plot-entry.js

@@ -0,0 +1,2 @@
+// A drawing as a mark for Observable Plot, with Plot not imported.
+export { surfaceMark, surfaceScales } from "./plot.js";

package/dist/plot.d.ts

@@ -0,0 +1,74 @@
+import { type ScaleFunction } from "./scene.fit.ts";
+import type { SceneOptions, SceneSource } from "./scene.types.ts";
+/** The members of a document that are used. A browser's `document` has them, and so does the one Plot gives its marks in `context.document`. */
+export interface PlotDocument {
+    createElementNS(namespace: string, name: string): PlotElement;
+}
+export interface PlotElement {
+    setAttribute(name: string, value: string): void;
+    appendChild(child: PlotElement): unknown;
+    textContent: string | null;
+}
+/** The scales Plot gives a mark: `x` and `y` are functions. (Plot's scales are also nested in `scales`, which is not read.) */
+export interface PlotScales {
+    x: ScaleFunction;
+    y: ScaleFunction;
+}
+/** What Plot gives a mark when it draws it. Only `document` of the context is read. */
+export interface PlotContext {
+    document?: PlotDocument;
+}
+/** The options that make a plot's x and y scales the surface's: its extent, no axes, no margin and a foot as wide as it is tall. Spread them into `Plot.plot`. */
+export interface SurfaceScales {
+    x: {
+        domain: [number, number];
+        axis: null;
+    };
+    y: {
+        domain: [number, number];
+        axis: null;
+        reverse: true;
+    };
+    aspectRatio: 1;
+    margin: 0;
+    inset: 0;
+}
+/**
+ * The options that give a plot the surface's scales: the drawing's numbers (feet from the surface's left end and its top, see `surfaceDomain`) on both axes with
+ * y growing down as in a drawing, the same size for a foot across and down, no axis and no margin. Spread them into `Plot.plot` and put `surfaceMark` first.
+ * @example
+ * ```ts
+ * import { surfaceScales } from "@johnmorrisdotca/kyogijo-stadiums/plot";
+ * console.log(surfaceScales({ sport: "nhl", id: "rink" }));
+ * // {
+ * //   x: { domain: [ -8, 208 ], axis: null },
+ * //   y: { domain: [ -8, 93 ], axis: null, reverse: true },
+ * //   aspectRatio: 1,
+ * //   margin: 0,
+ * //   inset: 0
+ * // }
+ * ```
+ */
+export declare function surfaceScales(source: SceneSource, options?: SceneOptions): SurfaceScales;
+/** A mark for `Plot.plot`: a function that Plot calls with the scales when it renders. */
+export type SurfaceMark = (index: unknown, scales: PlotScales, values: unknown, dimensions: unknown, context: PlotContext) => PlotElement;
+/**
+ * A surface as a mark for Observable Plot, drawn where the plot's `x` and `y` scales put the drawing's numbers, so that the marks after it land on the
+ * rink, the court or the field. Plot takes a function as a mark, so there is nothing to import; put it first in `marks`, with `surfaceScales` for the scales.
+ * Every colour and width is an attribute of the shape, so the page needs no stylesheet; light or dark by `theme`.
+ * @example
+ * ```ts
+ * import { surfaceMark, surfaceScales } from "@johnmorrisdotca/kyogijo-stadiums/plot";
+ * // With Plot: Plot.plot({ ...surfaceScales(options), marks: [surfaceMark(options), Plot.dot(shots, { x: "x", y: "y" })] })
+ * const options = { sport: "nhl", id: "rink" } as const;
+ * const made: string[] = [];
+ * const document = { createElementNS: (_: string, name: string) => { made.push(name); return { setAttribute: () => undefined, appendChild: () => undefined, textContent: null as string | null }; } };
+ * const scale = (v: number) => (v + 8) * 4;
+ * const node = surfaceMark(options)(0, { x: scale, y: scale }, {}, {}, { document });
+ * console.log(made[0], made.length > 30, typeof node);
+ * // g true object
+ * ```
+ */
+export declare function surfaceMark(source: SceneSource, options?: SceneOptions & {
+    className?: string;
+}): SurfaceMark;

package/dist/plot.js

@@ -0,0 +1,68 @@
+// A drawing in an Observable Plot. Nothing is imported from Plot: it takes a function as a mark, and calls it with the scales and a document to make elements in.
+import { affineOf, domainOf } from "./scene.fit.js";
+import { bodyOf, defsOf, matrixAttr } from "./scene.flat.js";
+import { sceneOf } from "./scene.js";
+const SVG = "http://www.w3.org/2000/svg";
+/**
+ * The options that give a plot the surface's scales: the drawing's numbers (feet from the surface's left end and its top, see `surfaceDomain`) on both axes with
+ * y growing down as in a drawing, the same size for a foot across and down, no axis and no margin. Spread them into `Plot.plot` and put `surfaceMark` first.
+ * @example
+ * ```ts
+ * import { surfaceScales } from "@johnmorrisdotca/kyogijo-stadiums/plot";
+ * console.log(surfaceScales({ sport: "nhl", id: "rink" }));
+ * // {
+ * //   x: { domain: [ -8, 208 ], axis: null },
+ * //   y: { domain: [ -8, 93 ], axis: null, reverse: true },
+ * //   aspectRatio: 1,
+ * //   margin: 0,
+ * //   inset: 0
+ * // }
+ * ```
+ */
+export function surfaceScales(source, options = {}) {
+    const { x, y } = domainOf(sceneOf(source, options));
+    return { x: { domain: x, axis: null }, y: { domain: y, axis: null, reverse: true }, aspectRatio: 1, margin: 0, inset: 0 };
+}
+function make(document, spec) {
+    const node = document.createElementNS(SVG, spec.tag);
+    for (const [name, value] of Object.entries(spec.attrs))
+        node.setAttribute(name, value);
+    if (spec.text !== undefined)
+        node.textContent = spec.text;
+    for (const child of spec.children ?? [])
+        node.appendChild(make(document, child));
+    return node;
+}
+/**
+ * A surface as a mark for Observable Plot, drawn where the plot's `x` and `y` scales put the drawing's numbers, so that the marks after it land on the
+ * rink, the court or the field. Plot takes a function as a mark, so there is nothing to import; put it first in `marks`, with `surfaceScales` for the scales.
+ * Every colour and width is an attribute of the shape, so the page needs no stylesheet; light or dark by `theme`.
+ * @example
+ * ```ts
+ * import { surfaceMark, surfaceScales } from "@johnmorrisdotca/kyogijo-stadiums/plot";
+ * // With Plot: Plot.plot({ ...surfaceScales(options), marks: [surfaceMark(options), Plot.dot(shots, { x: "x", y: "y" })] })
+ * const options = { sport: "nhl", id: "rink" } as const;
+ * const made: string[] = [];
+ * const document = { createElementNS: (_: string, name: string) => { made.push(name); return { setAttribute: () => undefined, appendChild: () => undefined, textContent: null as string | null }; } };
+ * const scale = (v: number) => (v + 8) * 4;
+ * const node = surfaceMark(options)(0, { x: scale, y: scale }, {}, {}, { document });
+ * console.log(made[0], made.length > 30, typeof node);
+ * // g true object
+ * ```
+ */
+export function surfaceMark(source, options = {}) {
+    const scene = sceneOf(source, options);
+    return (_index, scales, _values, _dimensions, context) => {
+        const document = context.document ?? globalThis.document;
+        if (document === undefined)
+            throw new Error("A document is needed to make the elements: Plot passes one in context.document");
+        const matrix = affineOf(scales.x, scales.y);
+        const group = make(document, { tag: "g", attrs: { class: options.className ?? "kyogijo-surface", transform: matrixAttr(matrix) } });
+        const defs = defsOf(scene);
+        if (defs.length > 0)
+            group.appendChild(make(document, { tag: "defs", attrs: {}, children: defs }));
+        for (const spec of bodyOf(scene))
+            group.appendChild(make(document, spec));
+        return group;
+    };
+}

package/dist/png-entry.d.ts

@@ -0,0 +1,2 @@
+export { PNG_PEER_MISSING, toPNG } from "./png.ts";
+export type { PngOptions } from "./png.ts";

package/dist/png-entry.js

@@ -0,0 +1,2 @@
+// A drawing as a PNG in Node, through the optional peer @resvg/resvg-js.
+export { PNG_PEER_MISSING, toPNG } from "./png.js";

package/dist/png.d.ts

@@ -0,0 +1,26 @@
+import type { SceneOptions, SceneSource } from "./scene.types.ts";
+/** What `toPNG` takes besides the drawing. */
+export interface PngOptions extends SceneOptions {
+    /** The width of the picture in pixels. 1200 when neither a width nor a height is given. */
+    width?: number;
+    height?: number;
+    /** A colour behind the drawing; the picture is transparent where there is none. */
+    background?: string;
+    /** Options for resvg's font handling, passed as its `font` option (`{ fontFiles: [...], loadSystemFonts: false }`). */
+    font?: Record<string, unknown>;
+}
+/** The message of the error thrown when the peer is not there. */
+export declare const PNG_PEER_MISSING = "toPNG needs the optional package @resvg/resvg-js: install it with `npm install @resvg/resvg-js`. It runs in Node only; in a browser draw to a canvas with drawToCanvas and call canvas.toBlob.";
+/**
+ * A drawing as PNG bytes, by resvg-js (an optional peer dependency, loaded when this is called, in Node only). The drawing may be the options of `drawKyogijo`, an
+ * SVG the package wrote or a scene; light or dark by `theme`. Without the peer installed this throws an error that says what to install.
+ * @example
+ * ```ts
+ * import { toPNG } from "@johnmorrisdotca/kyogijo-stadiums/png";
+ * // Without the peer installed this stays undefined; with it, the bytes start with the PNG signature.
+ * const png = await toPNG({ sport: "nhl", id: "rink" }, { width: 800, theme: "dark" }).catch(() => undefined);
+ * console.log(png === undefined || (png[1] === 80 && png[2] === 78 && png[3] === 71));
+ * // true
+ * ```
+ */
+export declare function toPNG(source: SceneSource, options?: PngOptions): Promise<Uint8Array>;

package/dist/png.js

@@ -0,0 +1,46 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+// A drawing as a PNG, in Node, through resvg (the optional peer `@resvg/resvg-js`). The SVG is first written without a stylesheet (see `sceneToSvg`),
+// because resvg does not read CSS variables. In a browser, draw to a canvas (`drawToCanvas`) and ask it for a PNG instead.
+import { sceneToSvg } from "./scene.flat.js";
+/** The message of the error thrown when the peer is not there. */
+export const PNG_PEER_MISSING = "toPNG needs the optional package @resvg/resvg-js: install it with `npm install @resvg/resvg-js`. It runs in Node only; in a browser draw to a canvas with drawToCanvas and call canvas.toBlob.";
+/**
+ * A drawing as PNG bytes, by resvg-js (an optional peer dependency, loaded when this is called, in Node only). The drawing may be the options of `drawKyogijo`, an
+ * SVG the package wrote or a scene; light or dark by `theme`. Without the peer installed this throws an error that says what to install.
+ * @example
+ * ```ts
+ * import { toPNG } from "@johnmorrisdotca/kyogijo-stadiums/png";
+ * // Without the peer installed this stays undefined; with it, the bytes start with the PNG signature.
+ * const png = await toPNG({ sport: "nhl", id: "rink" }, { width: 800, theme: "dark" }).catch(() => undefined);
+ * console.log(png === undefined || (png[1] === 80 && png[2] === 78 && png[3] === 71));
+ * // true
+ * ```
+ */
+export async function toPNG(source, options = {}) {
+    if (globalThis.process?.versions?.node === undefined)
+        throw new Error(PNG_PEER_MISSING);
+    const name = "@resvg/resvg-js";
+    let mod;
+    try {
+        // The name is in a variable so that a bundler does not look for the peer, and a page that never calls this does not need it.
+        mod = (await import(__rewriteRelativeImportExtension(/* @vite-ignore */ name)));
+    }
+    catch {
+        throw new Error(PNG_PEER_MISSING);
+    }
+    const wide = options.width === undefined && options.height === undefined ? 1200 : options.width;
+    const svg = sceneToSvg(source, { theme: options.theme, css: options.css });
+    const resvg = new mod.Resvg(svg, {
+        fitTo: wide !== undefined ? { mode: "width", value: wide } : { mode: "height", value: options.height },
+        ...(options.background === undefined ? {} : { background: options.background }),
+        ...(options.font === undefined ? { font: { loadSystemFonts: true } } : { font: options.font }),
+    });
+    return resvg.render().asPng();
+}

package/dist/ranges.d.ts

@@ -0,0 +1,33 @@
+import "./frames.providers.ts";
+import { type Surface } from "./surfaces/surface.ts";
+import type { Box, Language, SurfaceOptions } from "./types.ts";
+/**
+ * The sentences a range adds to a drawing's description: what is shown, and, when the drawing has data, that data outside it is not drawn. Empty without a range.
+ */
+export declare function describeRange(o: Pick<SurfaceOptions, "sport" | "league" | "range">, language: Language, hasData: boolean): string;
+/** The part of a drawing's `range` that is a name or "custom", for the root's `data-range`. */
+export declare function rangeLabel(o: Pick<SurfaceOptions, "sport" | "league" | "range">): string | undefined;
+/** What the margin and the panel of a score ask of the crop. */
+export interface CropOptions {
+    /** A prefix for ids. */
+    id: string;
+    /** The ground the annotations need all round the part that is shown, in feet; the cut's own when missing. */
+    margin?: number;
+    /** True when the drawing has its score's panel on the surface, which must then fit in what is shown. */
+    panel: boolean;
+}
+/**
+ * Crop a surface to the range the options ask for. The surface's view becomes the range with a small margin (the surface's own ground where the range reaches its edge, a little
+ * beyond the line where it is cut), `box` the part of the playing surface that is shown (`whole` the playing surface), and, when the annotations ask for room, the ground beyond the cut
+ * is the apron's and the surface is clipped to the range. A score's panel is moved into what is shown and made smaller if it needs to be; when it would be too small, `plateFits` says
+ * false and the caller draws the score as a strip. A curling sheet is cropped by its own builder (`sheet.show`), and its named ranges are that.
+ * @throws RangeError when the range lies wholly outside the drawing.
+ */
+export declare function cropToRange(surface: Surface, o: Pick<SurfaceOptions, "sport" | "league" | "range" | "units">, crop: CropOptions): Surface;
+/** True when a team's place (a banner's) is in the part of the drawing that is shown: always without a range. */
+export declare function shows(surface: Surface, zone: {
+    cx: number;
+    cy: number;
+}): boolean;
+/** The part of the playing surface that is shown, in feet in the drawing's frame, when the drawing is cropped to a range; `undefined` when it is not. */
+export declare function shownBox(surface: Surface): Box | undefined;

package/dist/ranges.js

@@ -0,0 +1,178 @@
+// Ranges: the part of a surface a drawing is cropped to, as sportypy's `display_range` and hockey_rink's partial rinks do it, for every sport: a named part (the offensive zone
+// of a rink, a half court, the red zone, the penalty area, the infield, a curling house), or a box of your own in the drawing's frame or any registered one. The viewBox is cut to the
+// range with a small margin, the data and the heat of the layers are cut to it, the annotations stand against what is shown, and a score's panel is put inside it (or under it, as a strip,
+// when the range is too small to hold one). The names, and where each part of a surface lies, are the builders' own (`Surface.ranges`): the code here only chooses, crops and fits.
+// Written for this package; sportypy and hockey_rink were read for the idea and nothing of either is used.
+import { wideView } from "./annotate.js";
+import { lengthUnit } from "./common.js";
+import { el, num } from "./format.js";
+import { toSurface } from "./frames.js";
+import "./frames.providers.js";
+import { parseRange } from "./ranges.names.js";
+import { frameSizeOf } from "./outline.js";
+import { KYOGIJO_STRINGS, fill } from "./strings.js";
+import { quarterTurn } from "./surfaces/surface.js";
+import { convertLength } from "./units.js";
+const round = (value) => String(Math.round(value * 100) / 100);
+/**
+ * The sentences a range adds to a drawing's description: what is shown, and, when the drawing has data, that data outside it is not drawn. Empty without a range.
+ */
+export function describeRange(o, language, hasData) {
+    const parsed = parseRange(o);
+    if (parsed === undefined)
+        return "";
+    const words = KYOGIJO_STRINGS[language].ranges;
+    const side = (end) => KYOGIJO_STRINGS[language].notes[end];
+    let text;
+    if (parsed.kind === "name") {
+        const name = words.names[parsed.name];
+        text = parsed.end === undefined ? fill(words.shows, { name }) : fill(words.showsEnd, { name, side: side(parsed.end) });
+    }
+    else {
+        const { x0, x1, y0, y1, frame } = parsed.box;
+        const numbers = { x0: round(Math.min(x0, x1)), x1: round(Math.max(x0, x1)), y0: round(Math.min(y0, y1)), y1: round(Math.max(y0, y1)) };
+        text = frame === undefined ? fill(words.box, numbers) : fill(words.boxFrame, { ...numbers, frame: typeof frame === "string" ? frame : frame.name });
+    }
+    const gap = KYOGIJO_STRINGS[language].said.gap;
+    return `${gap}${text}${hasData ? `${gap}${words.cut}` : ""}`;
+}
+/** The part of a drawing's `range` that is a name or "custom", for the root's `data-range`. */
+export function rangeLabel(o) {
+    const parsed = parseRange(o);
+    return parsed === undefined ? undefined : parsed.kind === "name" ? parsed.name : "custom";
+}
+/** How much of the surface's ground the cut of a range leaves beyond a line it passes through, so that the line is whole, in feet. */
+const CUT = 0.8;
+/** A range's edge this close to the surface's is the surface's. */
+const NEAR = 0.01;
+const intersect = (a, b) => {
+    const x0 = Math.max(a.x, b.x);
+    const y0 = Math.max(a.y, b.y);
+    const x1 = Math.min(a.x + a.w, b.x + b.w);
+    const y1 = Math.min(a.y + a.h, b.y + b.h);
+    return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+};
+/** The box of a range in the surface's wide frame, in feet. */
+function boxOf(parsed, surface, whole, o) {
+    if (parsed.kind === "name") {
+        const found = surface.ranges?.[parsed.name];
+        if (found === undefined)
+            return undefined;
+        return "left" in found ? found[parsed.end ?? "left"] : found;
+    }
+    const { x0, x1, y0, y1, frame, attacking } = parsed.box;
+    let corners;
+    if (frame === undefined) {
+        const unit = lengthUnit(o);
+        corners = [[x0, y0], [x1, y1]].map(([x, y]) => [convertLength(x, unit, "ft"), convertLength(y, unit, "ft")]);
+    }
+    else {
+        // The frame's numbers, placed on the surface as a layer's are (the frame fitted to a surface of any size), and the box round the corners, which a frame that swaps or turns the axes may have moved.
+        corners = toSurface([[x0, y0], [x1, y0], [x0, y1], [x1, y1]], { from: frame, units: "ft", size: frameSizeOf(o, whole), attacking });
+    }
+    const xs = corners.map(([x]) => x);
+    const ys = corners.map(([, y]) => y);
+    return { x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) };
+}
+/** The least share of its size a score's panel is shrunk to before the score goes to the strip under the drawing. */
+const PANEL_LEAST = 0.55;
+/**
+ * Crop a surface to the range the options ask for. The surface's view becomes the range with a small margin (the surface's own ground where the range reaches its edge, a little
+ * beyond the line where it is cut), `box` the part of the playing surface that is shown (`whole` the playing surface), and, when the annotations ask for room, the ground beyond the cut
+ * is the apron's and the surface is clipped to the range. A score's panel is moved into what is shown and made smaller if it needs to be; when it would be too small, `plateFits` says
+ * false and the caller draws the score as a strip. A curling sheet is cropped by its own builder (`sheet.show`), and its named ranges are that.
+ * @throws RangeError when the range lies wholly outside the drawing.
+ */
+export function cropToRange(surface, o, crop) {
+    const parsed = parseRange(o);
+    const whole = surface.box;
+    if (parsed === undefined || whole === undefined)
+        return surface;
+    const wide = boxOf(parsed, surface, whole, o);
+    // The named ranges of a curling sheet are the builder's own (`show`). A surface that lists its ranges and lacks the one asked for (a cricket ground that marks no circle) cannot be cropped to it.
+    if (wide === undefined) {
+        if (surface.ranges !== undefined && parsed.kind === "name")
+            throw new RangeError(`This ${surface.sport} surface has no range "${parsed.name}": use one of ${Object.keys(surface.ranges).join(", ")}`);
+        return surface;
+    }
+    const full = wideView(surface);
+    const visible = intersect(wide, full);
+    if (!(visible.w > 0 && visible.h > 0))
+        throw new RangeError("The range lies outside the surface");
+    const shown = (() => {
+        const inside = intersect(wide, whole);
+        return inside.w > 0 && inside.h > 0 ? inside : visible;
+    })();
+    // The cut: the surface's own ground on a side where the range reaches the surface's edge, a little beyond the line on a side where it does not.
+    const want = crop.margin !== undefined && crop.margin > CUT ? crop.margin : CUT;
+    const x0 = wide.x <= whole.x + NEAR;
+    const y0 = wide.y <= whole.y + NEAR;
+    const x1 = wide.x + wide.w >= whole.x + whole.w - NEAR;
+    const y1 = wide.y + wide.h >= whole.y + whole.h - NEAR;
+    const cutX0 = x0 ? full.x : Math.max(full.x, visible.x - CUT);
+    const cutY0 = y0 ? full.y : Math.max(full.y, visible.y - CUT);
+    const cutX1 = x1 ? full.x + full.w : Math.min(full.x + full.w, visible.x + visible.w + CUT);
+    const cutY1 = y1 ? full.y + full.h : Math.min(full.y + full.h, visible.y + visible.h + CUT);
+    const room = want - CUT;
+    const view = {
+        x: x0 ? cutX0 : Math.max(full.x, cutX0 - room),
+        y: y0 ? cutY0 : Math.max(full.y, cutY0 - room),
+        w: 0,
+        h: 0,
+    };
+    view.w = (x1 ? cutX1 : Math.min(full.x + full.w, cutX1 + room)) - view.x;
+    view.h = (y1 ? cutY1 : Math.min(full.y + full.h, cutY1 + room)) - view.y;
+    surface.whole = whole;
+    surface.ground = whole.y - full.y;
+    surface.room = want;
+    surface.cut = { x: cutX0, y: cutY0, w: cutX1 - cutX0, h: cutY1 - cutY0 };
+    surface.box = shown;
+    if (surface.turned) {
+        const turned = quarterTurn(view);
+        surface.view = turned.view;
+        surface.turn = turned.turn;
+    }
+    else
+        surface.view = view;
+    // Room beyond the cut for the annotations shows more of the surface than the range: paint the apron there and clip the surface to the cut.
+    if (room > 0.01) {
+        const clip = `${crop.id}-rg`;
+        const cut = el("clipPath", { id: clip }, el("rect", { x: num(cutX0), y: num(cutY0), width: num(cutX1 - cutX0), height: num(cutY1 - cutY0) }));
+        const ground = el("rect", { class: surface.sport === "mlb" ? "ky-foul" : "ky-apron", x: num(view.x), y: num(view.y), width: num(view.w), height: num(view.h) });
+        surface.defs += cut;
+        surface.base = `${ground}${el("g", { "clip-path": `url(#${clip})` }, surface.base)}`;
+        surface.lines = el("g", { "clip-path": `url(#${clip})` }, surface.lines);
+    }
+    if (crop.panel)
+        fitPanel(surface, shown);
+    return surface;
+}
+/** Put a score's panel inside the part of the surface that is shown, smaller if it needs to be; `plateFits` says false when it would have to be smaller than `PANEL_LEAST`. */
+function fitPanel(surface, shown) {
+    const spot = surface.plate;
+    // The panel's width and height are the eye's; when the drawing is turned a quarter they are the surface's height and width.
+    const sw = surface.turned ? spot.h : spot.w;
+    const sh = surface.turned ? spot.w : spot.h;
+    const scale = Math.min(1, (0.8 * shown.w) / sw, (0.8 * shown.h) / sh, Math.sqrt((0.35 * shown.w * shown.h) / (sw * sh)));
+    if (!(scale >= PANEL_LEAST)) {
+        surface.plateFits = false;
+        return;
+    }
+    const w = sw * scale;
+    const h = sh * scale;
+    const pad = 0.04 * Math.min(shown.w, shown.h);
+    const cx = Math.min(Math.max(spot.cx, shown.x + w / 2 + pad), shown.x + shown.w - w / 2 - pad);
+    const cy = Math.min(Math.max(spot.cy, shown.y + h / 2 + pad), shown.y + shown.h - h / 2 - pad);
+    surface.plate = { cx, cy, w: spot.w * scale, h: spot.h * scale };
+}
+/** True when a team's place (a banner's) is in the part of the drawing that is shown: always without a range. */
+export function shows(surface, zone) {
+    if (surface.whole === undefined)
+        return true;
+    const v = wideView(surface);
+    return zone.cx >= v.x && zone.cx <= v.x + v.w && zone.cy >= v.y && zone.cy <= v.y + v.h;
+}
+/** The part of the playing surface that is shown, in feet in the drawing's frame, when the drawing is cropped to a range; `undefined` when it is not. */
+export function shownBox(surface) {
+    return surface.whole === undefined ? undefined : surface.box;
+}

package/dist/ranges.names.d.ts

@@ -0,0 +1,31 @@
+import type { RangeBox, RangeName, Side, Sport, SurfaceOptions } from "./types.ts";
+/** One range of a sport: its name, and the end it is at by default when it is at an end (`left` or `right`, as the surface is drawn wide). A range with no `end` is in the middle or is the whole of something. */
+export interface RangeInfo {
+    id: RangeName;
+    end?: Side;
+    /** The leagues the range is for, when only some of the sport's have it (rugby union's 22 and rugby league's 20-metre area; the fielding circle of the ICC's grounds). Every league when missing. */
+    leagues?: readonly string[];
+}
+/**
+ * The named ranges of each sport, in the order a menu lists them: `{ id, end }`, with `end` the end the range is at when `range` gives none (`left` or `right`, as the surface is
+ * drawn wide; a range with no `end` is in the middle or is the whole of something and ignores one). Offensive ranges are at the right by default, as a frame's numbers are for a team
+ * that attacks the right (see `toSurface`); defensive and own ranges at the left; the others, such as a half, at the left, as a curling sheet's house is.
+ */
+export declare const RANGES: Readonly<Record<Sport, readonly RangeInfo[]>>;
+/** What a drawing's `range` asks for, checked: a name (at an end, or at its default) or a box. */
+/** A name carries its `end` (the one asked for, else the range's default; none for a range with no end) and `asked`, the end the options named, if they did. */
+export type ParsedRange = {
+    kind: "name";
+    name: RangeName;
+    end: Side | undefined;
+    asked: Side | undefined;
+} | {
+    kind: "box";
+    box: RangeBox;
+};
+/**
+ * The range the options ask for, or `undefined` when they ask for none.
+ * @throws RangeError for a name the sport does not have (the message lists the sport's), or an `end` that is not `left` or `right`.
+ * @throws TypeError for a box without its four numbers.
+ */
+export declare function parseRange(o: Pick<SurfaceOptions, "sport" | "league" | "range">): ParsedRange | undefined;

package/dist/ranges.names.js

@@ -0,0 +1,65 @@
+// The names of the ranges of each sport (`RANGES`) and the check of a drawing's `range` option (`parseRange`): kept apart from ranges.ts, which crops, so that the curling sheet's
+// own builder can read a named range without importing the code that crops every surface.
+import { LEAGUES, chooseLeague } from "./leagues.js";
+const range = (id, end, leagues) => Object.freeze({ id, ...(end === undefined ? {} : { end }), ...(leagues === undefined ? {} : { leagues: Object.freeze([...leagues]) }) });
+const FOOTBALL = Object.freeze([range("red-zone", "right"), range("end-zone", "right"), range("between-the-20s"), range("field-of-play"), range("own-half", "left"), range("opponent-half", "right")]);
+const NET = Object.freeze([range("half-court", "left")]);
+/**
+ * The named ranges of each sport, in the order a menu lists them: `{ id, end }`, with `end` the end the range is at when `range` gives none (`left` or `right`, as the surface is
+ * drawn wide; a range with no `end` is in the middle or is the whole of something and ignores one). Offensive ranges are at the right by default, as a frame's numbers are for a team
+ * that attacks the right (see `toSurface`); defensive and own ranges at the left; the others, such as a half, at the left, as a curling sheet's house is.
+ */
+export const RANGES = Object.freeze({
+    nfl: FOOTBALL,
+    cfl: FOOTBALL,
+    ifaf: FOOTBALL,
+    nhl: Object.freeze([range("offensive-zone", "right"), range("defensive-zone", "left"), range("neutral-zone"), range("half", "left")]),
+    nba: Object.freeze([range("half-court", "left"), range("paint", "left")]),
+    soccer: Object.freeze([range("half", "left"), range("final-third", "right"), range("defensive-third", "left"), range("middle-third"), range("penalty-area", "left")]),
+    mlb: Object.freeze([range("infield"), range("outfield")]),
+    curling: Object.freeze([range("sheet"), range("half", "left"), range("house", "left")]),
+    tennis: NET,
+    volleyball: NET,
+    badminton: NET,
+    pickleball: NET,
+    tabletennis: NET,
+    lacrosse: Object.freeze([range("half", "left"), range("crease", "right")]),
+    rugby: Object.freeze([range("half", "left"), range("twenty-two", "right", ["world-rugby"]), range("twenty", "right", ["nrl", "irl"]), range("in-goal", "right")]),
+    afl: Object.freeze([range("half", "left"), range("forward-fifty", "right"), range("centre-square")]),
+    gaelic: Object.freeze([range("half", "left"), range("large-rectangle", "right")]),
+    cricket: Object.freeze([range("pitch"), range("circle", undefined, ["icc-men", "icc-women"])]),
+    fieldhockey: Object.freeze([range("half", "left"), range("circle", "right"), range("twenty-three", "right")]),
+    handball: Object.freeze([range("half", "left"), range("goal-area", "right")]),
+});
+const isNumber = (value) => typeof value === "number" && Number.isFinite(value);
+/**
+ * The range the options ask for, or `undefined` when they ask for none.
+ * @throws RangeError for a name the sport does not have (the message lists the sport's), or an `end` that is not `left` or `right`.
+ * @throws TypeError for a box without its four numbers.
+ */
+export function parseRange(o) {
+    const given = o.range;
+    if (given === undefined || given === null)
+        return undefined;
+    const { sport, league } = chooseLeague(o);
+    const named = typeof given === "string" || (typeof given === "object" && "name" in given && typeof given.name === "string");
+    if (named) {
+        const name = typeof given === "string" ? given : given.name;
+        const end = typeof given === "object" ? given.end : undefined;
+        const info = (RANGES[sport] ?? []).find((one) => one.id === name);
+        if (info === undefined)
+            throw new RangeError(`The ${sport} surface has no range "${name}": use one of ${(RANGES[sport] ?? []).map((one) => one.id).join(", ")}, or a box { x0, x1, y0, y1 }`);
+        const leagueId = league?.id ?? LEAGUES[sport]?.[0]?.id;
+        if (info.leagues !== undefined && leagueId !== undefined && !info.leagues.includes(leagueId))
+            throw new RangeError(`The ${sport} league "${leagueId}" has no range "${name}": it is for ${info.leagues.join(" and ")}`);
+        if (end !== undefined && end !== "left" && end !== "right")
+            throw new RangeError(`A range's end is "left" or "right", not "${String(end)}"`);
+        return { kind: "name", name: info.id, end: info.end === undefined ? undefined : (end ?? info.end), asked: end };
+    }
+    const box = given;
+    if (typeof given !== "object" || !isNumber(box.x0) || !isNumber(box.x1) || !isNumber(box.y0) || !isNumber(box.y1))
+        throw new TypeError(`range is the name of a range of the sport, or a box { x0, x1, y0, y1 } of numbers`);
+    if (box.attacking !== undefined && box.attacking !== "left" && box.attacking !== "right")
+        throw new RangeError(`A range's attacking is "left" or "right", not "${String(box.attacking)}"`);
+    return { kind: "box", box: box };
+}

package/dist/react-entry.d.ts

@@ -0,0 +1,2 @@
+export { createKyogijo, kyogijoHtml, kyogijoProps } from "./react.ts";
+export type { KyogijoProps, ReactLike } from "./react.ts";