@johnmorrisdotca/dougu-sports 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -6,6 +6,40 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.8.0] - 2026-10-14
+
+### Added
+
+- **`bindTurn` takes an emblem object and is light.** `bindTurn(element, TROPHY_HOCKEY_CUP, options)` draws and turns the emblem it is given with its own `frame` and imports neither a drawing nor the registry, so a bundle of `bindTurn` and one cup is about 9.4 kB gzipped (the turning is about 2.5 kB of it), where it was about 81 kB. `test/size.test.ts` holds it to 10 kB, and the other emblems stay tree-shakeable.
+- **`ready`** on the controller `bindTurn` returns: a promise that resolves when the emblem is drawn and bound (already, for an emblem object) and rejects for an id that names nothing.
+
+### Changed
+
+- **`bindTurn` of `./turn` loads the registry only for an id.** An id (`"trophy:tennis-cup"`) is read from the registry, which `bindTurn` now imports on demand (a dynamic import, a chunk of its own in a bundler) instead of at the top. The first id bound is drawn when `ready` resolves, not before; later ones at once. `bindTurn` of the main entry (`@johnmorrisdotca/dougu-sports`) has the registry already and draws an id at once, as before. New modules: `src/turn-registry.ts` (what is loaded) and `src/turn-full.ts` (the main entry's `bindTurn`).
+
+## [0.7.3] - 2026-10-14
+
+The repository's own tooling is TypeScript. No change to the package: the same files are published, and the pictures are byte for byte the same.
+
+### Changed
+
+- **The scripts, the browser tests, the test helpers and the demo's source are `.ts`.** `scripts/*.ts` (build, gallery, package check, README examples, release notes, contact sheets, the pictures script, the demo's server and page maker), `e2e/*.demo.ts`, `playwright.config.ts` and `test/pieces-gallery.test.ts` were `.mjs` or `.js`. They run with Node's own type stripping, with no `tsx` and no build step, so `package.json`'s scripts call the `.ts` files directly. The shared family files stay as they are, byte for byte: `scripts/family-template.mjs` and `scripts/family-readme.mjs` (plain JavaScript, with the types of the template written by hand in `scripts/family-template.d.mts`) and `scripts/family-backgrounds.ts`.
+- **`pnpm typecheck` checks all of it.** `tsconfig.check.json` covers `src` and `test`, the new `tsconfig.tools.json` covers `scripts`, `e2e` and the Playwright config (with the browser's types, since the tests and the pictures script run code in the page), and the new `tsconfig.demo.json` covers `demo`. The syntax is the erasable kind only (`erasableSyntaxOnly` was already on), with `import type` and `.ts` extensions.
+- **The demo's scripts are `demo/*.ts`, built with esbuild.** A browser cannot run TypeScript, so `scripts/page.ts` builds each one into `demo.js`, `compose.js` and `gallery.js` for the dev server (on each request) and for `pnpm site`. A script imports the package from `../src/index.ts`, so that it is type-checked against the real source; the build changes that one import to `./dist/index.js`, the built package, as before. The page is the same.
+- **Node.** Working on the repository needs Node 22.18 or later (where type stripping is on by default); CI already runs 22 and 24. `engines` stays `>=22`, because the published package is plain JavaScript and needs no more. `CONTRIBUTING.md` says so.
+
+### Fixed
+
+- **The belts note counted the two-colour pairs wrong.** `docs/japanese-sports.md` and `docs/japanese-sports.ja.md` said the IJF names "these four pairs" under a table of five. The IJF's page names four (white-yellow, yellow-orange, orange-green, green-blue); blue-brown is drawn for completeness and no source found names it. Both pages now say that.
+
+## [0.7.2] - 2026-10-14
+
+The docs are one language to a page. No change to the pictures; the only change to the package is one English description.
+
+### Changed
+
+- **The docs are single-language.** `CONTRIBUTING.md` says so (one page per language, no mixed tables, the Japanese twin named `<name>.ja.md`), and a new test, `test/docs-language.test.ts`, fails when an English page holds Japanese outside code or a Japanese page holds English prose. The Japanese words that were in English pages are gone from them: [docs/japanese-sports.md](docs/japanese-sports.md) lost its Japanese column and its Japanese sentences to a new page in Japanese, [docs/japanese-sports.ja.md](docs/japanese-sports.ja.md); [docs/obi-steps.md](docs/obi-steps.md) lost its Japanese column, and [docs/obi-steps.ja.md](docs/obi-steps.ja.md) its English one; the glosses in [docs/references.md](docs/references.md) and the gallery's English description of `gear:obi-step-5` (it named the knot in kanji too) are English only. Three exceptions are named in the test with their reasons: the family list in the README, the package's own name (`道具`) in the README, and the titles of rulebooks cited in Japanese pages.
+
 ## [0.7.1] - 2026-10-14
 
 Real countries in the examples instead of made-up teams. No change to the package's code or its pictures.
@@ -26,7 +60,7 @@ Ten national volleyballs that can be told apart, a 2010-style grooved ball that
 
 ### Added
 
-- **`gear:obi-step-1` to `gear:obi-step-6`, and `obiStep(step, options)`**: how a judo belt is tied, in six close-ups of the jacket of `gear:judogi` (lapels crossed left over right, 右前) with the belt at each stage: 1 the middle of the belt against the belly, 2 wrapped twice round the waist, 3 the ends crossed in front, 4 one end tucked up under both wraps, 5 the flat square knot (本結び), 6 both ends hanging even. A red number and a few red marks say what to look at. `tint` is the jacket and `accent` the belt. Six ids rather than a `step` option, because this package makes a drawing that differs by more than a colour an id (the suits, the back views, the belts) and keeps options for colours and fill-ins. Names and captions in English and Japanese, the pages [docs/obi-steps.md](docs/obi-steps.md) and [in Japanese](docs/obi-steps.ja.md), and `JAPANESE_IDS` has 41 entries.
+- **`gear:obi-step-1` to `gear:obi-step-6`, and `obiStep(step, options)`**: how a judo belt is tied, in six close-ups of the jacket of `gear:judogi` (lapels crossed left over right, `右前`) with the belt at each stage: 1 the middle of the belt against the belly, 2 wrapped twice round the waist, 3 the ends crossed in front, 4 one end tucked up under both wraps, 5 the flat square knot (`本結び`), 6 both ends hanging even. A red number and a few red marks say what to look at. `tint` is the jacket and `accent` the belt. Six ids rather than a `step` option, because this package makes a drawing that differs by more than a colour an id (the suits, the back views, the belts) and keeps options for colours and fill-ins. Names and captions in English and Japanese, the pages [docs/obi-steps.md](docs/obi-steps.md) and [in Japanese](docs/obi-steps.ja.md), and `JAPANESE_IDS` has 41 entries.
 - Tests: every pair of national volleyballs differs by a mean CIE L\*a\*b\* distance of 35 or more with at least 7 panels clearly different, and no two share a layout; the grooved ball's contrast against a light and a dark page; the belt steps' order, their agreement with the judogi, their names and captions, and that they turn without clipping.
 
 ### Internal
@@ -82,7 +116,7 @@ The judo suit, the belt and the football pictograms were wrong, and are redrawn
 
 - **`gear:judogi-blue`, `gear:judogi-folded` and `gear:judogi-blue-folded`**: the blue judogi (IJF colour rule C1.9, `JUDOGI_BLUE`), and both suits folded into a neat rectangle with the collar and lapel stitching on top and the belt tied round it. `JUDOGI_WHITE` and `JUDOGI_BLUE` are exported.
 - **A belt for every grade**: `gear:obi-white`, `-yellow`, `-orange`, `-green`, `-blue`, `-brown`, `gear:obi-kohaku` (red and white panels, 6th to 8th dan), `gear:obi-red` (9th and 10th dan), `gear:obi-women` (the black belt with the white stripe women wear in Japan) and the two-colour belts `gear:obi-white-yellow`, `-yellow-orange`, `-orange-green`, `-green-blue` and `-blue-brown`. `OBI_RANKS` gains `kohaku` and `red`, and `obi(rank, options)` takes a grade or a pair of grades (`obi(["white", "yellow"])`), `tint` as one colour or a pair, and `women: true`.
-- Japanese names and descriptions read by a Japanese reviewer (右前 for the lapels, 本結び for the knot; the two-colour belts are a European custom with no Japanese standard name, so they are 「A と B の二色帯」), tests (`test/judo.test.ts`) for the colours, the belts and the football stripes, regenerated gallery pages and gear contact sheet.
+- Japanese names and descriptions read by a Japanese reviewer (`右前` for the lapels, `本結び` for the knot; the two-colour belts are a European custom with no Japanese standard name, so they are `「A と B の二色帯」`), tests (`test/judo.test.ts`) for the colours, the belts and the football stripes, regenerated gallery pages and gear contact sheet.
 
 ### Changed
 
@@ -169,7 +203,7 @@ Eleven balls and implements drawn to the rulebook's proportions, flat emblems tu
 
 ### Changed
 
-- **The gallery is two pages, one language each.** `docs/gallery.md` (English) and `docs/gallery.ja.md` (日本語) are both written by `scripts/make-gallery.mjs`, linked to each other at the top, with the columns Id, name, kind, source and description. The Constant and Import columns are gone (the long paths made GitHub squeeze the Japanese column to one character wide, so the names stacked): each page states once that the constant is the id in capitals (`trophy:lidded-cup` becomes `TROPHY_LIDDED_CUP`) and that it is imported from `@johnmorrisdotca/dougu-sports/trophy/lidded-cup`, and the generator stops if the rule fails for any emblem. `pnpm test:readme` checks both pages and accepts the rule as naming each emblem's constant.
+- **The gallery is two pages, one language each.** `docs/gallery.md` (English) and `docs/gallery.ja.md` (the Japanese) are both written by `scripts/make-gallery.mjs`, linked to each other at the top, with the columns Id, name, kind, source and description. The Constant and Import columns are gone (the long paths made GitHub squeeze the Japanese column to one character wide, so the names stacked): each page states once that the constant is the id in capitals (`trophy:lidded-cup` becomes `TROPHY_LIDDED_CUP`) and that it is imported from `@johnmorrisdotca/dougu-sports/trophy/lidded-cup`, and the generator stops if the rule fails for any emblem. `pnpm test:readme` checks both pages and accepts the rule as naming each emblem's constant.
 
 ## [0.2.0] - 2026-10-14
 
@@ -178,7 +212,7 @@ The package is now 167 emblems (24 trophies, 5 awards, 6 medals, 4 crests, 38 sp
 ### Added
 
 - **Japanese sports and budō** ([docs/japanese-sports.md](docs/japanese-sports.md)), all original drawings with generic ids and no real trophy's name: `trophy:sumo-cup` (a tall silver cup on a tall stepped stand with phoenix-crested handles, a body of revolution), `trophy:championship-banner` (a fringed banner on a pole with a gilt finial and an embroidered border, no lettering unless `initials` gives up to three letters; `tint` is the cloth, `accent` the trim), and the gear `gear:gunbai` (the referee's war fan with its tassel), `gear:mawashi`, `gear:shinai`, `gear:kendo-men`, `gear:judogi`, `gear:obi` (with `OBI_RANKS`, white to black, and `obi(rank, options)`), `gear:yumi`, `gear:ya` and `gear:karate-gi`. Five sports are added to `SPORT_NAMES` (now 38) with a pictogram each: `sumo`, `kendo`, `judo`, `kyudo`, `karate`. `JAPANESE_IDS` lists the 16 together, and the gallery page shows them in a section of their own. 
-- **Japanese names are first-class**, read by a reviewer and using the governing bodies' words (柔道衣, 空手衣, 廻し, 軍配, 竹刀, 剣道の面, 優勝旗, 弓, 矢); `emblemInfo(id).description` and `EMBLEM_DESCRIPTIONS` hold a longer description in English and Japanese for the docs and the gallery.
+- **Japanese names are first-class**, read by a reviewer and using the governing bodies' words (`柔道衣`, `空手衣`, `廻し`, `軍配`, `竹刀`, `剣道の面`, `優勝旗`, `弓`, `矢`); `emblemInfo(id).description` and `EMBLEM_DESCRIPTIONS` hold a longer description in English and Japanese for the docs and the gallery.
 - Gear has the `color` style (flat fills) as well as `metal` and `line`, and a part can be shaded across its width (`cyl`) as a round shaft is.
 - **Labels.** `EmblemOptions` takes `locale` (`"en"` or `"ja"`: the `<title>` is the emblem's Japanese name, with `lang="ja"` on the drawing) and `title` (a string is written, escaped; `false` drops the `<title>` and marks the drawing `aria-hidden="true"`). Both work for every emblem in every style, still and turned, and in `crest()` and `medal()`.
 - **`emblemDataUri(ref, options)`**: a percent-encoded `data:image/svg+xml;utf8,…` address for an `<img>`, a CSS background or a canvas, with `currentColor` made a concrete colour (`color` for the line, else the theme's ink; the default is dark ink), and a browser test that loads it in an `<img>` and on a canvas.

package/NOTICE.md

@@ -72,4 +72,4 @@ Facts only: a dimension or a mass is a fact, not a work. The NHL's puck rule was
 | What | Made from | Terms |
 | --- | --- | --- |
 | The demo's page | Written for this package, with the family stylesheet `demo/family.css` | MIT |
-| The README's pictures (`docs/images`) | Taken by `scripts/screenshots.mjs` from the demo, which draws the package's own emblems | MIT |
+| The README's pictures (`docs/images`) | Taken by `scripts/screenshots.ts` from the demo, which draws the package's own emblems | MIT |

package/README.md

@@ -137,7 +137,7 @@ The alias is a name in your `package.json` only: the same package, the same code
 | --- | --- |
 | `@johnmorrisdotca/dougu-sports` | The full registry: every emblem by id, the functions, and each emblem as a constant |
 | `@johnmorrisdotca/dougu-sports/emblems` | `renderEmblem`, the ids and the types, with no single drawing imported by name |
-| `@johnmorrisdotca/dougu-sports/turn` | `emblemFrame`, `ballFrame` and `bindTurn` |
+| `@johnmorrisdotca/dougu-sports/turn` | `emblemFrame`, `ballFrame` and `bindTurn`; `bindTurn` with an emblem object takes nothing else with it |
 | `@johnmorrisdotca/dougu-sports/<group>/<name>` | One emblem, alone: `trophy/hockey-cup`, `medal/gold`, `crest/shield`, `sport/nhl`, `award/crown`, `ball/soccer`, `pennant/championship`, `gear/<name>` |
 
 ### One emblem and nothing else
@@ -379,12 +379,13 @@ Both are one SVG string in the page's text colour, with a title and a descriptio
 
 ```js no-run
 import { bindTurn } from "@johnmorrisdotca/dougu-sports/turn";
+import { TROPHY_TENNIS_CUP } from "@johnmorrisdotca/dougu-sports/trophy/tennis-cup";
 
-const turner = bindTurn(document.getElementById("cup"), "trophy:tennis-cup", { size: 160, speed: 36 });
+const turner = bindTurn(document.getElementById("cup"), TROPHY_TENNIS_CUP, { size: 160, speed: 36 });
 document.getElementById("spin").onclick = () => turner.togglePlay();
 ```
 
-A drag turns it, the arrow keys turn it, Space starts and stops an auto-turn, and nothing moves until you ask; see [docs/turning.md](./docs/turning.md).
+A drag turns it, the arrow keys turn it, Space starts and stops an auto-turn, and nothing moves until you ask. Pass the emblem itself and the page carries the turning and that one emblem and nothing else (a cup and the turning are about 9 kB gzipped); pass an id, `"trophy:tennis-cup"`, and the registry is loaded when it is needed. See [docs/turning.md](./docs/turning.md).
 
 ### In React, Vue and the rest
 
@@ -434,7 +435,7 @@ The thirty-eight sports the ball, gear and sport emblems are made for are `SPORT
 | `sportIcon(sport, options?)` | The pictogram of a sport, by the names of `SPORT_NAMES`; an unknown sport is an error |
 | `lineup(ids, options?)` | Several balls side by side, at their true relative sizes (or all as large as the largest) |
 | `emblemFrame(ref, options?)` | An emblem turned by `yaw` and `pitch` degrees (and `roll` for a ball) |
-| `bindTurn(element, ref, options?)` | Draws an emblem into an element and lets a drag, the arrow keys, Space or a clock turn it; returns a controller with `angles`, `playing`, `turnable`, `setAngles`, `update`, `play`, `pause`, `togglePlay` and `destroy` |
+| `bindTurn(element, ref, options?)` | Draws an emblem (the emblem itself, or its id) into an element and lets a drag, the arrow keys, Space or a clock turn it; returns a controller with `angles`, `playing`, `turnable`, `ready`, `setAngles`, `update`, `play`, `pause`, `togglePlay` and `destroy` |
 | `emblemDataUri(ref, options?)` | An emblem as a `data:image/svg+xml;utf8,…` address for an `<img>`, a CSS background or a canvas, with the ink made a colour (`color`, or the theme's) |
 | `emblemSprite(ids, options?)` | A hidden sheet of `<symbol>`s with unique ids, and `use(id, { size, class, title })` for the markup of each use |
 | `sportEquipment(sport)` | The ball, gear, trophy and medal of a sport, as ids of the registry |
@@ -604,7 +605,7 @@ Bug reports and ideas go in the [issues](https://github.com/johnmorrisdotca/doug
 
 ## Changes
 
-See [CHANGELOG.md](./CHANGELOG.md). 0.7.1 puts real countries (Canada, Japan) in the crest and puck examples in place of made-up teams, with no change to the code; 0.7.0 gives the national volleyballs layouts that tell them apart (Japan a crimson band, Poland white above and red below, the USA a navy field), strengthens the 2010-style grooved soccer ball, and adds six pictures of how the judo belt is tied, `gear:obi-step-1` to `gear:obi-step-6` (269 emblems: [docs/obi-steps.md](./docs/obi-steps.md)); 0.6.0 gives the judo suit and the karate suit their sleeves (a judogi has no short ones: they reach the wrist) and adds the judogi seen from behind with the IJF-style back number, a family name and a country code on a patch, with a `backnumber` option (269 emblems: [docs/judogi-back.md](./docs/judogi-back.md)); 0.5.1 redraws the judo suit, the belt and the football pictograms and adds the blue and folded suits and the belts of every grade (261 emblems: [docs/japanese-sports.md](./docs/japanese-sports.md)); 0.5.0 adds fifty balls: vintage leather soccer balls, era-style and shop-wall soccer balls, baseballs of other threads and volleyballs in national colours, with a `colors` option (244 emblems: [docs/vintage-balls.md](./docs/vintage-balls.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.
+See [CHANGELOG.md](./CHANGELOG.md). 0.8.0 makes `bindTurn` light: it takes an emblem object and then needs no registry, so a turnable cup is about 9.4 kB gzipped instead of about 81 kB, and an id loads the registry on demand; 0.7.3 turns the build, docs and picture scripts, the browser tests and the demo's source from JavaScript into TypeScript, with no change to the package; 0.7.2 makes every docs page single-language (a page in Japanese beside each page that had Japanese words in it, and a test that holds them apart), with no change to the pictures; 0.7.1 puts real countries (Canada, Japan) in the crest and puck examples in place of made-up teams, with no change to the code; 0.7.0 gives the national volleyballs layouts that tell them apart (Japan a crimson band, Poland white above and red below, the USA a navy field), strengthens the 2010-style grooved soccer ball, and adds six pictures of how the judo belt is tied, `gear:obi-step-1` to `gear:obi-step-6` (269 emblems: [docs/obi-steps.md](./docs/obi-steps.md)); 0.6.0 gives the judo suit and the karate suit their sleeves (a judogi has no short ones: they reach the wrist) and adds the judogi seen from behind with the IJF-style back number, a family name and a country code on a patch, with a `backnumber` option (269 emblems: [docs/judogi-back.md](./docs/judogi-back.md)); 0.5.1 redraws the judo suit, the belt and the football pictograms and adds the blue and folded suits and the belts of every grade (261 emblems: [docs/japanese-sports.md](./docs/japanese-sports.md)); 0.5.0 adds fifty balls: vintage leather soccer balls, era-style and shop-wall soccer balls, baseballs of other threads and volleyballs in national colours, with a `colors` option (244 emblems: [docs/vintage-balls.md](./docs/vintage-balls.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/emblem.descriptions.js

@@ -106,7 +106,7 @@ export const EMBLEM_DESCRIPTIONS = {
     "gear:obi-step-2": { en: "Step 2 of tying the judo belt: the belt is wrapped twice round the waist, and both ends come back to the front", ja: "柔道の帯の結び方、手順2。帯を腰に二重に巻き、両端を前に戻す" },
     "gear:obi-step-3": { en: "Step 3 of tying the judo belt: the two ends are crossed in front of the belly, the wearer's left end over the right one", ja: "柔道の帯の結び方、手順3。おなかの前で両端を交差させる。着る人の左の端が、右の端の上になるように重ねる" },
     "gear:obi-step-4": { en: "Step 4 of tying the judo belt: one end is brought up from below, under both layers of the belt round the waist", ja: "柔道の帯の結び方、手順4。片方の端を、腰に巻いた二重の帯の下から上へ通す" },
-    "gear:obi-step-5": { en: "Step 5 of tying the judo belt: the flat square knot (hon-musubi, 本結び), left over right and then right over left", ja: "柔道の帯の結び方、手順5。本結びで結ぶ。左を右の上に重ね、次に右を左の上に重ねる" },
+    "gear:obi-step-5": { en: "Step 5 of tying the judo belt: the flat square knot (hon-musubi), left over right and then right over left", ja: "柔道の帯の結び方、手順5。本結びで結ぶ。左を右の上に重ね、次に右を左の上に重ねる" },
     "gear:obi-step-6": { en: "Step 6 of tying the judo belt: the knot is pulled tight and both ends hang down even, with a mark under their tips", ja: "柔道の帯の結び方、手順6。結び目を締め、両端の長さをそろえて垂らす。先端の下に、長さがそろっていることを示す印がある" },
     "gear:yumi": { en: "The long asymmetric bow, held a third of the way up, with its string and wrapped grip", ja: "上が長い非対称の長弓。弦を張り、握り革と籐巻きが付く" },
     "gear:ya": { en: "A kyudo arrow with feather fletching, a nock and a steel point", ja: "弓道の矢。矢羽根、筈、矢尻が付く" },

package/dist/emblems/gear/gear.budo.steps.js

@@ -2,7 +2,7 @@
 // avoided) in close-up, and the belt (`$accent`, black by default) at each stage. The belt is the one `gear:judogi` and the belts are drawn with, so a step's belt takes `accent` like theirs.
 //
 //   1. the middle of the belt against the belly;  2. wrapped twice round the waist, both ends back in front;  3. the ends crossed in front;  4. one end brought up under both layers;
-//   5. the flat square knot (hon-musubi, 本結び);  6. both ends hanging even.
+//   5. the flat square knot (hon-musubi);  6. both ends hanging even.
 //
 // The close-up is the jacket alone, drawn 1.55 times as big, so that the belt's width and the knot read at small sizes; a red number says which step it is, and a few small red marks (the middle, the way an end
 // travels, the equal lengths) say what to look at. The marks and the number are not the suit's, so they ignore `tint` and `accent`.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./emblems-entry.ts";
 export { ballFrame, emblemFrame } from "./emblems/emblem.api.ts";
-export { bindTurn } from "./turn-control.ts";
+export { bindTurn } from "./turn-full.ts";
 export type { TurnAngles, TurnContainer, TurnControlOptions, TurnController, TurnEvent } from "./turn-control.ts";
 export { EMBLEM_TABLE } from "./emblems/emblem.registry.ts";
 export { AWARD_MEDAL } from "./emblems/award/medal.ts";

package/dist/index.js

@@ -2,7 +2,7 @@
 // its own module (`@johnmorrisdotca/dougu-sports/trophy/hockey-cup`), and for the functions alone `@johnmorrisdotca/dougu-sports/emblems`.
 export * from "./emblems-entry.js";
 export { ballFrame, emblemFrame } from "./emblems/emblem.api.js";
-export { bindTurn } from "./turn-control.js";
+export { bindTurn } from "./turn-full.js";
 export { EMBLEM_TABLE } from "./emblems/emblem.registry.js";
 export { AWARD_MEDAL } from "./emblems/award/medal.js";
 export { AWARD_BADGE } from "./emblems/award/badge.js";

package/dist/turn-control.d.ts

@@ -1,5 +1,13 @@
-import { type EmblemRef } from "./emblems/emblem.api.ts";
-import type { FrameOptions } from "./emblems/emblem.core.ts";
+import type { EmblemRef } from "./emblems/emblem.api.ts";
+import type { Emblem, FrameOptions } from "./emblems/emblem.core.ts";
+/** What reading an id needs of the registry: `emblemOf`, `renderEmblem` and `emblemFrame` of `emblem.api`. The main entry hands them to `bindTurn` itself; `./turn` loads them when an id is bound. */
+export interface TurnRegistry {
+    emblemOf(ref: EmblemRef): {
+        emblem: Emblem;
+    };
+    renderEmblem(ref: EmblemRef, options?: FrameOptions): string;
+    emblemFrame(ref: EmblemRef, options?: FrameOptions): string;
+}
 /** The three angles of a turn, in degrees. */
 export interface TurnAngles {
     /** About the vertical axis, from -180 (excluded) to 180. */
@@ -37,8 +45,13 @@ export interface TurnController {
     readonly angles: TurnAngles;
     /** Whether the auto-turn is running. */
     readonly playing: boolean;
-    /** Whether the emblem now drawn can be turned at all (read from the registry, so an emblem that gains a turn is turnable here without a change). */
+    /** Whether the emblem now drawn can be turned at all (read from the emblem's own frames, so an emblem that gains a turn is turnable here without a change). `false` until an id has loaded; see `ready`. */
     readonly turnable: boolean;
+    /**
+     * Resolves when the emblem is drawn and bound. At once (already resolved) for an emblem object, and for an id from the main entry or once the registry has loaded; otherwise after the registry's chunk has loaded.
+     * Rejects for an id that names no emblem.
+     */
+    readonly ready: Promise<void>;
     /** Sets some of the angles (wrapped or clamped as a drag would) and draws. Pauses the auto-turn when `pauseOnInteract` is on. */
     setAngles(angles: Partial<TurnAngles>): void;
     /** Draws another emblem, or the same one with other options, and keeps the angles (unless the options carry some). */
@@ -86,16 +99,22 @@ export interface TurnContainer {
 /** An angle wrapped into -180 (excluded) to 180, as the demo's slider is. */
 export declare function wrapAngle(value: number): number;
 /**
- * Binds an emblem to an element so that it can be turned: it draws `emblemFrame` into `container`, and a drag turns it (left and right are yaw, up and down are pitch, and Shift on a ball is roll), the arrow keys turn
+ * Binds an emblem to an element so that it can be turned: it draws the emblem's `frame` into `container`, and a drag turns it (left and right are yaw, up and down are pitch, and Shift on a ball is roll), the arrow keys turn
  * it, Home or 0 puts it back, and Space starts and stops an auto-turn. An emblem that cannot turn is drawn as it is, and nothing is listened to. Nothing moves by itself: `autoPlay` is off by default and, under
  * `prefers-reduced-motion`, only starts when it is `"force"`. The element gets `touch-action: none`, `user-select: none`, a grab cursor, a tab stop, a role description and a hint; `destroy()` takes them away.
+ *
+ * Pass the emblem itself (`TROPHY_HOCKEY_CUP`, from its own module) and nothing but the turning and that one emblem is in the bundle. Pass an id (`"trophy:hockey-cup"`) and the registry is loaded on
+ * demand: the element is drawn when `ready` resolves, not before. The main entry's `bindTurn` has the registry already and draws an id at once.
  * @example
  * ```ts
  * import { bindTurn } from "@johnmorrisdotca/dougu-sports/turn";
- * const turner = bindTurn(document.getElementById("cup")!, "trophy:tennis-cup", { size: 160 });
+ * import { TROPHY_TENNIS_CUP } from "@johnmorrisdotca/dougu-sports/trophy/tennis-cup";
+ * const turner = bindTurn(document.getElementById("cup")!, TROPHY_TENNIS_CUP, { size: 160 });
  * turner.setAngles({ yaw: 40 });
  * console.log(turner.angles.yaw);
  * // 40
  * ```
  */
 export declare function bindTurn(container: TurnContainer, ref: EmblemRef, options?: TurnControlOptions): TurnController;
+/** `bindTurn` with the registry in hand (or none, to load it when an id is bound): the main entry gives it, so that an id is drawn at once. An emblem object needs neither. */
+export declare function bindTurnWith(registry: TurnRegistry | undefined, container: TurnContainer, ref: EmblemRef, options?: TurnControlOptions): TurnController;

package/dist/turn-control.js

@@ -1,6 +1,3 @@
-// `bindTurn`: an emblem that a pointer, the arrow keys, the Space bar or a clock can turn. It draws `emblemFrame` into an element and listens to that element, and it is a module of its own, so importing an
-// emblem never pulls it in. Nothing here moves by itself: an auto-turn starts only when the caller asks for it, and not at all under `prefers-reduced-motion` unless the caller forces it.
-import { emblemFrame, emblemOf, renderEmblem } from "./emblems/emblem.api.js";
 const WORDS = {
     en: { role: "turnable emblem", hint: "Drag, or use the arrow keys, to turn it. Space starts and stops the turning." },
     ja: { role: "回せるエンブレム", hint: "ドラッグするか矢印キーで回せます。スペースキーで自動回転を始めたり止めたりできます。" },
@@ -13,7 +10,7 @@ export function wrapAngle(value) {
 const finite = (value, fallback) => (typeof value === "number" && Number.isFinite(value) ? value : fallback);
 const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
 const globals = globalThis;
-/** Whether an emblem turns at all, read from the registry's own frames: a turned view that differs from the resting one. An emblem may say so itself with a `turnable` flag. */
+/** Whether an emblem turns at all, read from the emblem's own frames: a turned view that differs from the resting one. An emblem may say so itself with a `turnable` flag. */
 const turns = new WeakMap();
 function canTurn(emblem) {
     const flag = emblem.turnable;
@@ -26,22 +23,41 @@ function canTurn(emblem) {
     }
     return known;
 }
+const fromEmblem = (emblem) => ({ emblem, still: (o) => emblem.svg(o), frame: (o) => emblem.frame(o) });
+const fromId = (registry, ref) => ({ emblem: registry.emblemOf(ref).emblem, still: (o) => registry.renderEmblem(ref, o), frame: (o) => registry.emblemFrame(ref, o) });
+/** The registry, once something has loaded it: later ids are bound at once. */
+let loaded;
+let loading;
+const load = () => {
+    loading ??= import("./turn-registry.js").then((api) => (loaded = api));
+    return loading;
+};
 /**
- * Binds an emblem to an element so that it can be turned: it draws `emblemFrame` into `container`, and a drag turns it (left and right are yaw, up and down are pitch, and Shift on a ball is roll), the arrow keys turn
+ * Binds an emblem to an element so that it can be turned: it draws the emblem's `frame` into `container`, and a drag turns it (left and right are yaw, up and down are pitch, and Shift on a ball is roll), the arrow keys turn
  * it, Home or 0 puts it back, and Space starts and stops an auto-turn. An emblem that cannot turn is drawn as it is, and nothing is listened to. Nothing moves by itself: `autoPlay` is off by default and, under
  * `prefers-reduced-motion`, only starts when it is `"force"`. The element gets `touch-action: none`, `user-select: none`, a grab cursor, a tab stop, a role description and a hint; `destroy()` takes them away.
+ *
+ * Pass the emblem itself (`TROPHY_HOCKEY_CUP`, from its own module) and nothing but the turning and that one emblem is in the bundle. Pass an id (`"trophy:hockey-cup"`) and the registry is loaded on
+ * demand: the element is drawn when `ready` resolves, not before. The main entry's `bindTurn` has the registry already and draws an id at once.
  * @example
  * ```ts
  * import { bindTurn } from "@johnmorrisdotca/dougu-sports/turn";
- * const turner = bindTurn(document.getElementById("cup")!, "trophy:tennis-cup", { size: 160 });
+ * import { TROPHY_TENNIS_CUP } from "@johnmorrisdotca/dougu-sports/trophy/tennis-cup";
+ * const turner = bindTurn(document.getElementById("cup")!, TROPHY_TENNIS_CUP, { size: 160 });
  * turner.setAngles({ yaw: 40 });
  * console.log(turner.angles.yaw);
  * // 40
  * ```
  */
 export function bindTurn(container, ref, options = {}) {
+    return bindTurnWith(undefined, container, ref, options);
+}
+/** `bindTurn` with the registry in hand (or none, to load it when an id is bound): the main entry gives it, so that an id is drawn at once. An emblem object needs neither. */
+export function bindTurnWith(registry, container, ref, options = {}) {
     let current = ref;
-    let emblem = emblemOf(ref).emblem;
+    let drawer;
+    let version = 0;
+    let pending;
     let turnable = false;
     let sensitivity = 1.5;
     let range = [-60, 60];
@@ -95,7 +111,9 @@ export function bindTurn(container, ref, options = {}) {
         }
         const at = angles.yaw === 0 && angles.pitch === 0 && angles.roll === 0;
         // The resting view of an emblem that turns is drawn in the box of the turn too, so that the element is the same size at every angle and a drag does not make the emblem jump or zoom at its first step.
-        container.innerHTML = !turnable ? renderEmblem(current, frame) : at ? renderEmblem(current, { turnBox: true, ...frame }) : emblemFrame(current, { ...frame, ...angles });
+        if (drawer === undefined)
+            return;
+        container.innerHTML = !turnable ? drawer.still(frame) : at ? drawer.still({ turnBox: true, ...frame }) : drawer.frame({ ...frame, ...angles });
     };
     /** One drawing for any number of changes within a frame. */
     const schedule = () => {
@@ -178,7 +196,7 @@ export function bindTurn(container, ref, options = {}) {
         drag.y = y;
         if (dx === 0 && dy === 0)
             return;
-        if (event.shiftKey === true && emblem.kind === "ball")
+        if (event.shiftKey === true && drawer?.emblem.kind === "ball")
             place({ roll: angles.roll + dx, pitch: angles.pitch - dy });
         else
             place({ yaw: angles.yaw + dx, pitch: angles.pitch - dy });
@@ -287,24 +305,46 @@ export function bindTurn(container, ref, options = {}) {
         drag = undefined;
         held = false;
     };
-    const settle = () => {
-        emblem = emblemOf(current).emblem;
-        turnable = canTurn(emblem);
+    const adopt = (next) => {
+        drawer = next;
+        turnable = canTurn(next.emblem);
+        detach();
         if (turnable)
             attach();
-        else {
-            detach();
+        else
             setPlaying(false);
-        }
     };
-    configure(options);
-    place({ yaw: options.yaw, pitch: options.pitch, roll: options.roll });
-    settle();
-    draw();
-    if (turnable && options.autoPlay !== undefined && options.autoPlay !== false) {
+    /** Binds what `current` names: at once for an emblem, or for an id when the registry is in hand; otherwise when it has loaded. Gives the wait, if there is one. */
+    const settle = (first) => {
+        const mine = ++version;
+        const now = current;
+        if (typeof now !== "string")
+            return void adopt(fromEmblem(now));
+        const known = registry ?? loaded;
+        if (known !== undefined)
+            return void adopt(fromId(known, now));
+        return load().then((api) => {
+            if (mine !== version || destroyed)
+                return;
+            adopt(fromId(api, now));
+            draw();
+            if (first)
+                autoStart();
+        });
+    };
+    const autoStart = () => {
+        if (!turnable || options.autoPlay === undefined || options.autoPlay === false)
+            return;
         const reduced = globals.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
         if (options.autoPlay === "force" || !reduced)
             setPlaying(true);
+    };
+    configure(options);
+    place({ yaw: options.yaw, pitch: options.pitch, roll: options.roll });
+    pending = settle(true);
+    if (pending === undefined) {
+        draw();
+        autoStart();
     }
     return {
         get angles() {
@@ -316,6 +356,9 @@ export function bindTurn(container, ref, options = {}) {
         get turnable() {
             return turnable;
         },
+        get ready() {
+            return pending ?? Promise.resolve();
+        },
         setAngles(partial) {
             if (destroyed)
                 return;
@@ -331,9 +374,9 @@ export function bindTurn(container, ref, options = {}) {
             place({ yaw: o.yaw, pitch: o.pitch, roll: o.roll });
             // The pitch the new range allows.
             place({ pitch: angles.pitch });
-            detach();
-            settle();
-            draw();
+            pending = settle(false);
+            if (pending === undefined)
+                draw();
         },
         play() {
             if (!turnable || destroyed)
@@ -355,6 +398,7 @@ export function bindTurn(container, ref, options = {}) {
                 return;
             setPlaying(false);
             destroyed = true;
+            version++;
             if (renderId !== undefined)
                 globals.cancelAnimationFrame?.(renderId);
             renderId = undefined;

package/dist/turn-full.d.ts

@@ -0,0 +1,15 @@
+import { type EmblemRef } from "./emblems/emblem.api.ts";
+import { type TurnContainer, type TurnControlOptions, type TurnController } from "./turn-control.ts";
+/**
+ * Binds an emblem to an element so that a drag, the arrow keys, Space or a clock turn it; see `bindTurn` of `@johnmorrisdotca/dougu-sports/turn`, which takes an emblem object and loads nothing else. This one is
+ * from the main entry: an id is read from the registry and drawn at once, with no `await`.
+ * @example
+ * ```ts
+ * import { bindTurn } from "@johnmorrisdotca/dougu-sports";
+ * const turner = bindTurn(document.getElementById("cup")!, "trophy:tennis-cup", { size: 160 });
+ * turner.setAngles({ yaw: 40 });
+ * console.log(turner.angles.yaw);
+ * // 40
+ * ```
+ */
+export declare function bindTurn(container: TurnContainer, ref: EmblemRef, options?: TurnControlOptions): TurnController;

package/dist/turn-full.js

@@ -0,0 +1,19 @@
+// `bindTurn` of the main entry: the same as the light one of `./turn`, with the registry already in hand, so an id is drawn at once (as it always was) and an emblem object works too. It is a function of its own, so
+// a page that imports only emblems from the main entry does not pull it in; one that imports `bindTurn` from here has the registry in the bundle anyway.
+import { emblemFrame, emblemOf, renderEmblem } from "./emblems/emblem.api.js";
+import { bindTurnWith } from "./turn-control.js";
+/**
+ * Binds an emblem to an element so that a drag, the arrow keys, Space or a clock turn it; see `bindTurn` of `@johnmorrisdotca/dougu-sports/turn`, which takes an emblem object and loads nothing else. This one is
+ * from the main entry: an id is read from the registry and drawn at once, with no `await`.
+ * @example
+ * ```ts
+ * import { bindTurn } from "@johnmorrisdotca/dougu-sports";
+ * const turner = bindTurn(document.getElementById("cup")!, "trophy:tennis-cup", { size: 160 });
+ * turner.setAngles({ yaw: 40 });
+ * console.log(turner.angles.yaw);
+ * // 40
+ * ```
+ */
+export function bindTurn(container, ref, options = {}) {
+    return bindTurnWith({ emblemOf, renderEmblem, emblemFrame }, container, ref, options);
+}

package/dist/turn-registry.d.ts

@@ -0,0 +1 @@
+export { emblemFrame, emblemOf, renderEmblem } from "./emblems/emblem.api.ts";

package/dist/turn-registry.js

@@ -0,0 +1,3 @@
+// What `bindTurn` loads when it is given an id: the three functions that read the registry. A module of its own, so that the dynamic import has a target no static import of `./turn` shares, and a bundler
+// makes it a chunk of its own.
+export { emblemFrame, emblemOf, renderEmblem } from "./emblems/emblem.api.js";

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.7.1";
+export declare const VERSION = "0.8.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.7.1";
+export const VERSION = "0.8.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/dougu-sports",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Dougu Sports 道具, sports emblems as SVG strings: trophies, medals, crests, sport icons, and the ball and gear of every sport, in metal, line or flat colour, with optional 3D turning. Light and dark, accessible, tree-shakeable. Zero dependencies.",
   "keywords": [
     "sports",
@@ -113,18 +113,18 @@
   "scripts": {
     "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json",
     "lint": "eslint .",
-    "typecheck": "tsc -p tsconfig.check.json",
-    "test": "node --test test/*.test.ts test/*.test.js",
-    "test:package": "pnpm build && node scripts/check-package.mjs",
-    "test:readme": "pnpm build && node scripts/make-gallery.mjs --check && node scripts/check-readme-examples.mjs",
-    "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm build && node scripts/check-package.mjs",
+    "typecheck": "tsc -p tsconfig.check.json && tsc -p tsconfig.tools.json && tsc -p tsconfig.demo.json",
+    "test": "node --test test/*.test.ts",
+    "test:package": "pnpm build && node scripts/check-package.ts",
+    "test:readme": "pnpm build && node scripts/make-gallery.ts --check && node scripts/check-readme-examples.ts",
+    "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm build && node scripts/check-package.ts",
     "prepublishOnly": "pnpm check",
     "family:readme": "node scripts/family-readme.mjs",
-    "dev": "pnpm build && node scripts/dev.mjs",
-    "gallery": "pnpm build && node scripts/make-gallery.mjs",
-    "site": "pnpm build && node scripts/site.mjs",
+    "dev": "pnpm build && node scripts/dev.ts",
+    "gallery": "pnpm build && node scripts/make-gallery.ts",
+    "site": "pnpm build && node scripts/site.ts",
     "test:demo": "pnpm site && playwright test",
-    "screenshots": "pnpm site && node scripts/screenshots.mjs"
+    "screenshots": "pnpm site && node scripts/screenshots.ts"
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",