@johnmorrisdotca/wakusei-planets 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Changelog
 
-## 0.5.0
+## 0.6.0 - 2026-11-03
+
+The demo's pickers, and a scale that is a scale.
+
+- **A compact picker** (MODULES-285): the ten bodies in one row, and when the one chosen has moons, its moons on the row below, in the same place; no long list down the page. The moons' own section is gone. Every picture in it is a picture, in the line, the realistic and the painted look: a test looks at all 35 (10 bodies and 25 moons) for blank and single-colour pictures. (The broken thumbnails of 0.3.0 were the tiles being drawn to scale, which 0.3.1 stopped.) The same picker is in "Put it in your page" (MODULES-286), so the body for the code is chosen beside the code; Copy's word can be read (it was ink on ink).
+- **The buttons under the view stay where they are** (MODULES-283): one push button for each body of the system (the planet and its moons), the chosen one pressed, and others pressed with it to see them side by side under the view, at equal sizes or at their true relative sizes (`span-km`), kept in the address (`?with=phobos,deimos&rel=1`). The orbit-distance layout is not made yet.
+- **To scale says what it is against** (MODULES-284): "Its planet" (for a moon), "Earth" or "Sun", and draws it so: Deimos is 0.0018 times Mars's radius, a magnified picture beside it with a line, the caption says so. `?scale=1&ref=planet`.
+- **Deimos is drawn whole** (MODULES-287): an irregular body reaches past its mean radius along its longest axis, and its picture was cut off at the sides.
+- **Every body is fitted by its globe** (MODULES-293): at about half the view's height, the same for all, so Saturn's rings, the Sun's glow and a haze have room, and the Sun is no smaller than a planet. `fit="tight"` on an element gives the old fit (thumbnails).
+- **The sky shows the real phase** (MODULES-294): in "As seen from Earth" the night side is dark (no wrapped terminator, no rim of air round it), so Venus a few days from new is a thin crescent, not a full disc.
+- **A line under every choice** (MODULES-298) says what it does, in English and Japanese, always on the page and tied to its button with `aria-describedby`.
+
+## 0.5.1 - 2026-11-03
+
+- kazoku-ui 0.12.0: the demo's view controls have a zoom slider, on top of 0.11's Centre button and exact grab.
+- Documentation: an architecture guide and a fuller upgrading guide, each with its Japanese twin; a code builder page (`builder.html`); eight new pictures; a longer README whose examples run (`pnpm test:readme`); and every release of this changelog dated. No behaviour changed.
+- The README opens with the package's thumbnail, and the demo carries it as its link preview (og:image) and publishes the card, a dark card and an icon on Pages at `thumbnail.png`, `thumbnail-dark.png` and `icon.png`.
+
+## 0.5.0 - 2026-11-03
 
 The bodies for someone else's three.js scene.
 
@@ -9,7 +27,7 @@ The bodies for someone else's three.js scene.
 - `orientation(id, ms)` and `moonOffset(id, ms)`: a body's pole and prime meridian, and a moon's place from its planet, in the same axes.
 - A guide, "In your own three.js scene", in English and Japanese.
 
-## 0.4.0
+## 0.4.0 - 2026-11-03
 
 "Put it in your page" is a configurator.
 
@@ -18,7 +36,7 @@ The bodies for someone else's three.js scene.
 - A guide, "Put it in your page", in English and Japanese.
 - **kazoku-ui 0.11.0**: the view controls' Centre button (it appears once the body is dragged away), a pan that keeps a quarter of the body in sight (told the body's size with `object-size`), and a drag that keeps the touched point under the pointer (`grab-radius`). The 0.3.1 stopgap that made Fit re-centre is gone.
 
-## 0.3.1
+## 0.3.1 - 2026-11-03
 
 The Earth is a body like the others, and "To scale" is a comparison.
 
@@ -28,7 +46,7 @@ The Earth is a body like the others, and "To scale" is a comparison.
 - **The body cannot be dragged out of the view** (a quarter of it stays in), and Fit centres it and returns it to its first angle.
 - The README's pictures are absolute addresses pinned to the release's tag (npm's page showed a different picture from GitHub's), and a test holds it (`pnpm readme:images` pins them after a version bump).
 
-## 0.3.0
+## 0.3.0 - 2026-11-03
 
 Painted moons, Saturn's rings from Cassini, and a drag that goes the right way up.
 
@@ -40,7 +58,7 @@ Painted moons, Saturn's rings from Cassini, and a drag that goes the right way u
 - **A drag up moves the surface up** (it moved it down), in every look: the controls' tilt tipped the pole toward you as it grew, and now tips the top of the body away, so the near surface goes up, as in chikyu-earth 0.9.1. Drag right, the right arrow and the up arrow agree. Test (`e2e/drag.demo.ts`): a real pointer and real key presses on Mars (line, shaded, painted), Venus and the Moon (painted); the vertical checks fail on 0.2.0.
 - `scripts/make-textures.py` makes the moons and the ring strip too (`python3 scripts/make-textures.py io saturn-ring`) and writes each source's file page, licence and credit into `textures/SOURCES.json`.
 
-## 0.2.0
+## 0.2.0 - 2026-11-02
 
 The painted looks.
 
@@ -48,7 +66,7 @@ The painted looks.
 - Small pictures by default: the 512 and 1024 pixel widths are in the package (0.53 MB in all); a view that is zoomed in fetches the 2048 pixel width from the repository by jsDelivr's GitHub address (`texture-far-base` to serve it yourself). A picture that fails to load leaves the shaded look drawn, and no picture is asked for twice.
 - A texture is freed when a sharper one replaces it and when the element leaves.
 
-## 0.1.0
+## 0.1.0 - 2026-11-03
 
 The first release. The package, to the family's standard from the start: a demo and an embed page on GitHub Pages, a documentation site in English and Japanese, a README with every way to use it (each one tested), the shared release workflow with its freeze test.
 

package/README.md

@@ -1,3 +1,5 @@
+<p align="center"><a href="https://johnmorrisdotca.github.io/wakusei-planets/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/main/docs/images/thumbnail-dark.png"><img src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/main/docs/images/thumbnail.png" alt="Wakusei Planets: Mars, the Earth, Saturn with its rings, Jupiter and Neptune, shaded in 3D, side by side." width="1200"></picture></a></p>
+
 <h1 align="center">Wakusei Planets <sub>惑星</sub></h1>
 
 <p align="center"><strong>The Sun, the planets and their moons, for the web.</strong><br>
@@ -11,9 +13,9 @@ A clean line drawing, a shaded realistic drawing, or a painted surface map, with
 
 <p align="center"><a href="https://johnmorrisdotca.github.io/wakusei-planets/"><strong>Open the demo →</strong></a> · <a href="https://johnmorrisdotca.github.io/wakusei-planets/embed.html">Embed page</a> · <a href="https://johnmorrisdotca.github.io/wakusei-planets/docs/">Docs</a></p>
 
-<p align="center"><img alt="Jupiter and Saturn drawn in the realistic look, and Saturn as a line drawing" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.5.0/docs/images/hero-desk.png" width="640"></p>
+<p align="center"><img alt="Jupiter and Saturn drawn in the realistic look, and Saturn as a line drawing" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.6.0/docs/images/hero-desk.png" width="640"></p>
 
-<p align="center"><img alt="Every body at one scale, the Earth among them: each small body has a magnified picture joined by a line, and the Sun shows only its edge" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.5.0/docs/images/lineup-desk.png" width="640"></p>
+<p align="center"><img alt="Every body at one scale, the Earth among them: each small body has a magnified picture joined by a line, and the Sun shows only its edge" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.6.0/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 
@@ -68,6 +70,37 @@ The same tag with the shared [kazoku-ui](https://github.com/johnmorrisdotca/kazo
 
 A bundled app imports it: `import "@johnmorrisdotca/wakusei-planets/element"` (and `import { lineSvg } from "@johnmorrisdotca/wakusei-planets"` for the SVG string, which needs no browser). For the shaded look add the body's own entry point, `import "@johnmorrisdotca/wakusei-planets/jupiter"`, and `three` (an optional peer).
 
+## Who it is for
+
+- **A developer who wants a planet on a page** with one tag, no build step, and a drawing that is an SVG before any 3D has loaded.
+- **A teacher, writer or museum** who needs the Sun, the planets and their moons at their real sizes and tilts, with every number traceable to the IAU, NASA or JPL.
+- **A maker of sky tools** who wants a planet's pole, phase, ring opening and its moons' places for any date and time as plain data, on a server or in a browser.
+- **A three.js developer** who wants the bodies as objects for a scene of their own.
+
+## Features
+
+- The Sun, the eight planets, Pluto and 25 moons, each with its real size, flattening, axial tilt, pole and rotation as data.
+- Three looks: a clean `line` drawing (an SVG string), a shaded `realistic` sphere worked out in a shader, and a `painted` surface map from public-domain imagery.
+- The sky for any date and time: a body's pole, rotation, phase and ring opening as the Earth sees it, and a planet's moons where they are then.
+- One WebGL context for the page, nothing drawn at rest, at most thirty frames a second, and everything freed when an element leaves.
+- A pure side that runs on a server: `BODIES`, `apparent`, `system`, `orbitPath`, `portrait` and `lineSvg`.
+- `embedCode` writes the code that puts a body in a page for HTML, a module, React, Vue, Angular, Svelte or an iframe.
+- `painter.make` hands a body to a three.js scene of your own.
+- Every guide in English and Japanese; the demo's words too.
+
+## Use it in your project
+
+```sh
+npm install @johnmorrisdotca/wakusei-planets three
+```
+
+```ts no-run
+import "@johnmorrisdotca/wakusei-planets/element";
+import "@johnmorrisdotca/wakusei-planets/saturn";
+```
+
+Import the element once in client code, and the entry point of each body you draw in a shaded look (or `/all`). A line drawing needs neither `three` nor an entry point. [Bundlers](docs/guides/bundlers.md) and [Frameworks](docs/guides/frameworks.md) go through it.
+
 ## Three looks
 
 | Look | What it is | Needs |
@@ -145,6 +178,229 @@ The pure side has no DOM: `BODIES`, `apparent(id, time)`, `system(planet, time)`
 
 Sizes, flattening, poles and rotation are the IAU's and NASA's; planet positions are JPL's approximate elements; the Moon's are Meeus's largest terms; the other moons are JPL's mean elements. Nothing is fetched at run time by the line and shaded looks, which use no pictures. See [NOTICE.md](NOTICE.md).
 
+## Examples
+
+Every `ts` block in this README is type-checked and run against the package as npm packs it (`pnpm test:readme`).
+
+```ts
+import { BODIES, MOONS_OF, PLANET_IDS } from "@johnmorrisdotca/wakusei-planets";
+
+BODIES.saturn.radiusKm; // 60268
+PLANET_IDS.length; // 9
+Object.values(MOONS_OF).flat().length; // 25
+```
+
+The planets' state as the Earth sees them on a date:
+
+```ts
+import { apparent } from "@johnmorrisdotca/wakusei-planets";
+
+const saturn = apparent("saturn", Date.UTC(2026, 10, 2));
+console.log(saturn.subObserverLat.toFixed(1), saturn.illumination.toFixed(2));
+```
+
+A planet's moons where they are on a date, as offsets from it in the planet's radii:
+
+```ts
+import { system } from "@johnmorrisdotca/wakusei-planets";
+
+const { moons } = system("jupiter", Date.UTC(2026, 10, 2));
+console.log(moons.map((moon) => `${moon.id} ${moon.x.toFixed(1)}`).join(", "));
+```
+
+A line drawing as an SVG string, with no browser:
+
+```ts
+import { lineSvg } from "@johnmorrisdotca/wakusei-planets";
+
+const svg = lineSvg("mars", { size: 200, tilt: 15, lang: "ja" });
+if (!svg.startsWith("<svg") || !svg.includes("火星")) throw new Error("not a Mars drawing");
+```
+
+The code that puts a body in a page, for any of the ways a page is made:
+
+```ts
+import { EMBED_KINDS, embedCode } from "@johnmorrisdotca/wakusei-planets";
+
+for (const kind of EMBED_KINDS) console.log(kind, embedCode({ body: "mars", look: "line", size: 240 }, kind).split("\n")[0]);
+```
+
+A body for your own three.js scene, in the browser:
+
+The moons' places on an orbit, as points for a line you draw yourself:
+
+```ts
+import { orbitPath } from "@johnmorrisdotca/wakusei-planets";
+
+const path = orbitPath("io", Date.UTC(2026, 10, 2), 8);
+console.log(path.length / 3, "points");
+```
+
+How much of the Moon is lit on a date:
+
+```ts
+import { apparent } from "@johnmorrisdotca/wakusei-planets";
+
+const moon = apparent("moon", Date.UTC(2026, 10, 24, 14));
+if (moon.illumination < 0.9) throw new Error("the Moon is nearly full on 24 November 2026");
+```
+
+A page that cannot run script uses an iframe of the embed page:
+
+```html
+<iframe src="https://johnmorrisdotca.github.io/wakusei-planets/embed.html?body=mars&look=line" title="Mars" width="320" height="320" style="border:0"></iframe>
+```
+
+```ts no-run
+import * as THREE from "three";
+import { painter } from "@johnmorrisdotca/wakusei-planets/painter";
+
+const scene = new THREE.Scene();
+const jupiter = painter.make(THREE, "Jupiter", { look: "realistic", invalidate: () => {}, ratio: 1 });
+scene.add(jupiter.object);
+```
+
+A body that turns by itself and a moving sky, in HTML:
+
+```html
+<wakusei-body body="jupiter" look="line" moons time="now" rate="600" size="360"></wakusei-body>
+<wakusei-body body="venus" look="realistic" time="2026-11-02T12:00:00Z" turn="12" live="hover"></wakusei-body>
+```
+
+## The code builder
+
+[The code builder](https://johnmorrisdotca.github.io/wakusei-planets/builder.html) is one screen: choose which planet's system, the body, the look, the size, the sky and the turning, then pick how your page is made and copy the code. It is built from `embedCode`, so it writes what the package writes. [Put it in your page](docs/guides/put-it-in-your-page.md) is its guide.
+
+## API
+
+The reference is a site, made from the source's own doc comments: every export has a summary, its parameters, what it returns and an example that runs when the site is built. [Open the reference](https://johnmorrisdotca.github.io/wakusei-planets/docs/).
+
+| Entry point | What it gives |
+| --- | --- |
+| `@johnmorrisdotca/wakusei-planets` | The pure side: `BODIES`, `apparent`, `system`, `orbitPath`, `portrait`, `lineSvg`, `embedCode`. No browser. |
+| `.../element` | `<wakusei-body>`; three.js is loaded only for a shaded look. |
+| `.../look` | What a body needs to be drawn with three.js. |
+| `.../painter` | The bodies as objects for a scene of your own. |
+| `.../all` | Every body's shaded look, at once. |
+| `.../saturn`, `.../jupiter` and the rest | One body's shaded look. `.../moons-jupiter` and its siblings: a planet's moons. |
+
+```ts
+import * as pure from "@johnmorrisdotca/wakusei-planets";
+
+console.log(Object.keys(pure).sort().join(", "));
+```
+
+## Guides
+
+Each guide has a Japanese twin in [docs/guides/ja](docs/guides/ja/getting-started.md).
+
+| Guide | What it is for |
+| --- | --- |
+| [Getting started](docs/guides/getting-started.md) | A body on a page |
+| [HTML and CDN](docs/guides/html-and-cdn.md) | A script tag from jsDelivr or unpkg |
+| [Bundlers](docs/guides/bundlers.md) | Vite and webpack, only the bodies you need |
+| [Frameworks](docs/guides/frameworks.md) | React, Vue, Svelte, Angular |
+| [Embed in an iframe](docs/guides/embed-in-an-iframe.md) | No script of your own |
+| [Put it in your page](docs/guides/put-it-in-your-page.md) | Set up a body and copy the code |
+| [Looks and bodies](docs/guides/looks-and-bodies.md) | The looks and each body's entry point |
+| [Moons and time](docs/guides/moons-and-time.md) | The sky on a date, time that runs fast |
+| [In your own three.js scene](docs/guides/in-your-own-scene.md) | `painter.make` |
+| [TypeScript and Node](docs/guides/typescript-and-node.md) | Types and the pure side |
+| [How it works](docs/guides/how-it-works.md) | Where the numbers come from |
+| [Architecture](docs/guides/architecture.md) | How the layers fit |
+| [Troubleshooting](docs/guides/troubleshooting.md) | Something does not appear |
+| [Upgrading](docs/guides/upgrading.md) | What to act on between versions |
+
+## Limits
+
+```ts
+import { BODIES } from "@johnmorrisdotca/wakusei-planets";
+
+BODIES.pluto.kind; // "dwarf-planet"
+```
+
+- A fact with no source is left out, never guessed. Moon positions are JPL's mean elements and are accurate to a few degrees on the orbit, about the size of the moon on screen.
+- The shaded `realistic` look works out a surface from the body's real colours and features in a shader: it is a likeness, not a map. The `painted` look is a real map where one exists; the Sun, Saturn, Uranus and Neptune have no global map, so theirs are made from one photograph each, as `NOTICE.md` says.
+- A shaded look needs WebGL. Without it the line drawing is drawn.
+- Saturn and Uranus have their rings drawn.
+- Pictures for the painted look are 1.31 MB in the package at 512 and 1024 pixels; a sharper picture is fetched when you zoom in.
+
+## Accessibility
+
+- Every `<wakusei-body>` is an image with an accessible name from its body and look, such as "Saturn, line drawing", or the Japanese name with `lang="ja"`.
+- A reader who prefers reduced motion gets no turning and no moving sky.
+- A body can be turned, tipped, zoomed and panned with the keyboard, and the view controls are at least 48 pixels.
+- Names and labels are in English and Japanese (`lang="ja"`).
+
+```html
+<wakusei-body body="saturn" look="line" lang="ja" size="320"></wakusei-body>
+```
+
+## Browser and runtime support
+
+- The package needs Node 24 or later. The pure side runs in Node and in any current browser; the element needs a current browser.
+- The shaded looks need WebGL and `three` `>=0.160.0` (an optional peer).
+- The tests run the demo in Chromium and WebKit, at a phone's width and a desk's, and draw WebGL in software.
+
+## Languages
+
+The names and labels in the element are in English and Japanese (`lang`), and so are the demo's words and every guide: each guide in [docs/guides](docs/guides) has a twin in [docs/guides/ja](docs/guides/ja/getting-started.md), one language to a page.
+
+```ts
+import { lineSvg } from "@johnmorrisdotca/wakusei-planets";
+
+console.log(lineSvg("saturn", { size: 160, lang: "ja" }).includes("土星"));
+```
+
+Japanese names and labels need only the `lang` attribute; the SVG string takes the same option.
+
+## Architecture
+
+The lowest layers are pure and import with no browser: the facts, the positions, the pose and the line drawing. The shaded looks are one entry point for each body, registered by name, and every `<wakusei-body>` shares one WebGL context through kazoku-ui. [Architecture](docs/guides/architecture.md) has the layers.
+
+```ts
+import { portrait } from "@johnmorrisdotca/wakusei-planets";
+
+const pose = portrait("uranus");
+console.log(pose.pole.length);
+```
+
+## Development
+
+```sh
+pnpm install
+pnpm check         # lint, types, unit tests, the build and the packed package
+pnpm test:readme   # every ts block of the README, type-checked and run against the packed package
+pnpm test:usage    # every way of using it in the README and the guides, built and opened
+pnpm docs:check    # the reference site's checks
+pnpm test:demo     # the demo and the docs site in a real browser
+pnpm dev           # the demo on http://127.0.0.1:8300/wakusei-planets/
+```
+
+The pictures in `docs/images` are made by the package's own script:
+
+```sh
+ONLY=hero-saturn-painted,builder-desk pnpm screenshots
+```
+
+## Contributing
+
+Work in a git worktree from `origin/main`, one branch per change:
+
+```sh
+git worktree add ../wakusei-work -b my-change origin/main
+```
+
+See [CONTRIBUTING.md](CONTRIBUTING.md). The rules that matter most: draw from public facts and cite them, pictures only from public-domain sources, a fact with no source is left out, and performance is not optional.
+
+## Changes
+
+[CHANGELOG.md](CHANGELOG.md) lists every release with its date.
+
+## Licence
+
+MIT: see [LICENSE](LICENSE). The pictures are public-domain NASA, USGS and JPL imagery, each file credited in [NOTICE.md](NOTICE.md).
+
 ## The name
 
 Wakusei (惑星, わくせい) is Japanese for a planet.

package/dist/element.d.ts

@@ -25,7 +25,7 @@ export type WakuseiState = "line" | "loading" | "still" | "live" | "lost" | "una
  * console.log(TEXTURE_BASE);
  * ```
  */
-export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.5.0/dist/textures/";
+export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.6.0/dist/textures/";
 /**
  * Where the sharpest surface pictures are: the files of this exact version in the repository, on jsDelivr's GitHub address. The npm package holds only the two smaller widths, so a page that
  * never zooms in never fetches them. Set `texture-far-base` on an element to serve them yourself.
@@ -37,7 +37,7 @@ export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdot
  * console.log(TEXTURE_FAR_BASE);
  * ```
  */
-export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.5.0/textures/";
+export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.6.0/textures/";
 /**
  * The `<wakusei-body>` custom element: a body of the solar system, drawn in a look.
  *

package/dist/element.js

@@ -48,6 +48,8 @@ const readTime = (value) => {
     return Number.isFinite(ms) ? ms : undefined;
 };
 /** The half-width of the picture, in body radii, for a body alone, with a scale to another body, or with its moons. */
+/** The half-width of a body's picture, in its radii, when it has no scale of its own: the globe takes a little under half the height, so its rings, glow and haze have room round it. */
+const ROOM = 2.2;
 function extentOf(id, options) {
     const f = BODIES[id];
     if (options.moons === true && id in BODIES && f.parent === undefined && id !== "sun") {
@@ -59,7 +61,11 @@ function extentOf(id, options) {
         return options.spanKm / f.radiusKm;
     if (options.scaleTo !== undefined)
         return (BODIES[options.scaleTo].radiusKm * 1.06) / f.radiusKm;
-    return Math.max(id === "sun" ? 1.55 : 1.06, ringReach(f) * 1.04);
+    if (options.tight !== true)
+        return ROOM;
+    // tight (a thumbnail): the picture holds the body and its rings, and an irregular body (Deimos, Phobos, Nix, Hydra) whole along its longest axis
+    const longest = f.axesKm === undefined ? 1 : Math.max(...f.axesKm) / f.radiusKm;
+    return Math.max(1.06, ringReach(f) * 1.04, longest * 1.06);
 }
 /** Keep the body in the picture: at least a quarter of its width stays inside the edge, however far the view is moved. `pan` is in half-widths of the picture. */
 function clampPan(pan, extent, zoom) {
@@ -91,7 +97,7 @@ const TEMPLATE = `<style>
  * ```
  */
 export class WakuseiBody extends HTMLElement {
-    static observedAttributes = ["body", "look", "size", "time", "tilt", "pitch", "phase", "meridian", "turn", "rate", "moons", "range", "scale-to", "span-km", "live", "texture-base", "texture-far-base", "lang", "labels"];
+    static observedAttributes = ["body", "look", "size", "time", "tilt", "pitch", "phase", "meridian", "turn", "rate", "moons", "range", "scale-to", "span-km", "fit", "live", "texture-base", "texture-far-base", "lang", "labels"];
     #stage;
     #state = "line";
     #renderer;
@@ -293,7 +299,7 @@ export class WakuseiBody extends HTMLElement {
         const scaleTo = this.getAttribute("scale-to");
         const range = this.hasAttribute("range") ? num(this.getAttribute("range"), 0) : undefined;
         const span = num(this.getAttribute("span-km"), 0);
-        const extent = extentOf(this.body, { ...(span > 0 ? { spanKm: span } : {}), ...(scaleTo !== null && scaleTo in BODIES ? { scaleTo } : {}), moons: r.moons, ...(range !== undefined && range > 0 ? { range } : {}) });
+        const extent = extentOf(this.body, { ...(this.getAttribute("fit") === "tight" ? { tight: true } : {}), ...(span > 0 ? { spanKm: span } : {}), ...(scaleTo !== null && scaleTo in BODIES ? { scaleTo } : {}), moons: r.moons, ...(range !== undefined && range > 0 ? { range } : {}) });
         const moons = r.moons
             ? frame.moons
                 .filter((m) => m.distance <= extent * 1.05)
@@ -303,7 +309,7 @@ export class WakuseiBody extends HTMLElement {
                 return { id: m.id, x: rotated[0], y: rotated[1], z: rotated[2], ...(orbit !== undefined ? { orbit: tiltBy === 0 ? orbit : this.#tiltedOrbit(m.id, orbit, tiltBy) } : {}) };
             })
             : undefined;
-        return { pose: { pole, meridian, light }, extent, zoom: this.#zoom, panX: clampPan(this.#panX, extent, this.#zoom), panY: clampPan(this.#panY, extent, this.#zoom), ...(moons !== undefined ? { moons } : {}) };
+        return { pose: { pole, meridian, light }, extent, sky: frame.time !== undefined, zoom: this.#zoom, panX: clampPan(this.#panX, extent, this.#zoom), panY: clampPan(this.#panY, extent, this.#zoom), ...(moons !== undefined ? { moons } : {}) };
     }
     #tilted = new Map();
     #tiltedOrbit(id, orbit, tilt) {
@@ -442,7 +448,7 @@ export class WakuseiBody extends HTMLElement {
             size,
             pose: scene.pose,
             ...(r.moons ? { moons: true, ...(frame.time !== undefined ? { time: frame.time } : {}), range: scene.extent, moonsAt: (scene.moons ?? []).map((m) => ({ id: m.id, x: m.x, y: m.y, z: m.z, distance: Math.hypot(m.x, m.y, m.z) })), orbits: new Map((scene.moons ?? []).filter((m) => m.orbit !== undefined).map((m) => [m.id, m.orbit])) } : {}),
-            ...(scaleTo !== null || this.hasAttribute("span-km") ? { fill: this.#fill() } : {}),
+            ...(scaleTo !== null || this.hasAttribute("span-km") || this.getAttribute("fit") !== "tight" ? { fill: this.#fill() } : {}),
             ...(this.getAttribute("lang") === "ja" ? { lang: "ja" } : {}),
             ...(this.getAttribute("labels") === "off" ? { labels: false } : {}),
             ...(stroke !== "" ? { stroke } : {}),
@@ -532,7 +538,7 @@ export class WakuseiBody extends HTMLElement {
         const scaleTo = this.getAttribute("scale-to");
         const span = num(this.getAttribute("span-km"), 0);
         const half = span > 0 ? span : scaleTo !== null && scaleTo in BODIES ? BODIES[scaleTo].radiusKm * 1.06 : 0;
-        return half > 0 ? Math.max(0.01, Math.min(1, BODIES[this.body].radiusKm / half)) : 1;
+        return half > 0 ? Math.max(0.01, Math.min(1, BODIES[this.body].radiusKm / half)) : this.getAttribute("fit") === "tight" ? 1 : 1 / ROOM;
     }
     /** Make the view's still, once, when it is in sight. */
     #still() {

package/dist/line.js

@@ -227,7 +227,7 @@ export function lineSvg(id, options = {}) {
     if (options.moons === true && facts.parent === undefined && id !== "sun")
         return systemSvg(id, options, size, stroke, paper, hair, head);
     const pose = poseFor(id, options);
-    const reach = Math.max(ringReach(facts), id === "sun" ? 1.26 : 1);
+    const reach = Math.max(ringReach(facts), id === "sun" ? 1.08 : 1);
     const fit = options.fill === undefined ? 0.94 / reach : options.fill;
     const zoom = options.zoom ?? 1;
     const frame = { cx: (size / 2) * (1 - (options.panX ?? 0)), cy: (size / 2) * (1 + (options.panY ?? 0)), r: (size / 2) * fit * zoom };

package/dist/scene/body.d.ts

@@ -23,6 +23,8 @@ export interface SceneState {
     panX: number;
     panY: number;
     moons?: readonly MoonDraw[];
+    /** The body is drawn as the sky shows it at a date: its real phase, with no light on the night side from a wrapped terminator or a rim of air. */
+    sky?: boolean;
     /** The smallest a moon is drawn, in CSS pixels across its radius. Default 2.5. */
     minMoonPx?: number;
     /** The colour of the orbit lines, `#rrggbb`. */

package/dist/scene/body.js

@@ -23,6 +23,7 @@ function makeBodyMaterial(T, look, painted) {
             uWrap: { value: look.wrap ?? (a === undefined ? 0.04 : 0.3) },
             uAtmos: { value: col3(T, a?.colour ?? [0, 0, 0]) },
             uAtmosPow: { value: a?.power ?? 3 },
+            uRimBase: { value: 0.12 },
             uEmissive: { value: look.emissive === true ? 1 : 0 },
             uRingN: { value: new T.Vector3(0, 1, 0) },
             uRingR: { value: new T.Vector2(1, 2) },
@@ -56,6 +57,8 @@ export function createBodyItem(options) {
             const geometry = assets.acquire("wk:sphere", () => new T.SphereGeometry(1, 128, 64), (g) => g.dispose());
             const shader = assets.acquire(`wk:body:${options.id}:r`, () => makeBodyMaterial(T, look, false), (m) => m.dispose());
             const paintedMaterial = wantPainted ? assets.acquire(`wk:body:${options.id}:p`, () => makeBodyMaterial(T, look, true), (m) => m.dispose()) : undefined;
+            const baseWrap = look.wrap ?? (look.atmosphere === undefined ? 0.04 : 0.3);
+            const baseAmbient = look.ambient ?? 0.04;
             const scene = new T.Scene();
             const camera = new T.OrthographicCamera(-1, 1, 1, -1, 0.1, 400);
             camera.position.set(0, 0, 200);
@@ -279,8 +282,15 @@ export function createBodyItem(options) {
                         mat.uniforms.uRingTex.value = ringTexture;
                     }
                 }
-                for (const mat of [shader, paintedMaterial])
-                    mat?.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                for (const mat of [shader, paintedMaterial]) {
+                    if (mat === undefined)
+                        continue;
+                    mat.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                    const sky = state.sky === true;
+                    mat.uniforms.uWrap.value = sky ? 0.02 : (mat === paintedMaterial ? baseWrap : baseWrap);
+                    mat.uniforms.uAmbient.value = sky ? 0.012 : baseAmbient;
+                    mat.uniforms.uRimBase.value = sky ? 0.02 : 0.12;
+                }
                 if (glow !== undefined)
                     glow.scale.setScalar(1);
                 // a sharper picture, when the disc is big enough to show it

package/dist/scene/glsl.js

@@ -61,6 +61,7 @@ uniform float uLimb;
 uniform float uWrap;
 uniform vec3 uAtmos;
 uniform float uAtmosPow;
+uniform float uRimBase;
 uniform float uEmissive;
 uniform vec3 uRingN;
 uniform vec2 uRingR;
@@ -106,7 +107,7 @@ void main() {
   vec3 alb = pow(s.rgb, vec3(2.2));
   vec3 lit = alb * (uAmbient + (1.0 - uAmbient) * diff * 1.18);
   float rim = pow(1.0 - mu, uAtmosPow);
-  lit += pow(uAtmos, vec3(2.2)) * rim * (0.12 + 0.88 * clamp(dg * 1.6 + 0.35, 0.0, 1.0));
+  lit += pow(uAtmos, vec3(2.2)) * rim * (uRimBase + (1.0 - uRimBase) * clamp(dg * 1.6 + 0.35, 0.0, 1.0));
   lit *= mix(1.0, pow(mu, 0.45), uLimb);
   gl_FragColor = vec4(pow(lit, vec3(1.0 / 2.2)), 1.0);
 }`;

package/dist/scene/painter.js

@@ -87,6 +87,7 @@ function paint(T, id, context, bases) {
             uWrap: { value: look.wrap ?? (a === undefined ? 0.04 : 0.3) },
             uAtmos: { value: new T.Vector3(...(a?.colour ?? [0, 0, 0])) },
             uAtmosPow: { value: a?.power ?? 3 },
+            uRimBase: { value: 0.12 },
             uEmissive: { value: look.emissive === true ? 1 : 0 },
             uRingN: { value: new T.Vector3(0, 1, 0) },
             uRingR: { value: new T.Vector2(1, 2) },

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.5.0";
+export declare const VERSION = "0.6.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.5.0";
+export const VERSION = "0.6.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/wakusei-planets",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Wakusei Planets 惑星 — The Sun, planets and moons for the web: each as a clean line drawing, a shaded realistic drawing or a painted surface map, with real sizes, axial tilt and rotation as data, and positions of the moons for any date and time. SVG for the lines, three.js (optional) for the rest.",
   "keywords": [
     "planets",
@@ -184,7 +184,8 @@
     "docs:check": "pnpm build && node scripts/docs-site.mjs check",
     "size": "node scripts/docs-site.mjs size",
     "test:usage": "pnpm site && node scripts/check-usage.ts",
-    "check:standard": "node scripts/check-standard.mjs"
+    "check:standard": "node scripts/check-standard.mjs",
+    "test:readme": "pnpm build && node scripts/check-usage.ts readme"
   },
   "devDependencies": {
     "@angular/common": "^22.2.4",
@@ -222,7 +223,7 @@
   },
   "packageManager": "pnpm@10.28.0",
   "dependencies": {
-    "@johnmorrisdotca/kazoku-ui": "^0.11.0"
+    "@johnmorrisdotca/kazoku-ui": "^0.12.0"
   },
   "peerDependencies": {
     "@johnmorrisdotca/chikyu-earth": ">=0.10.0",