@johnmorrisdotca/wakusei-planets 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.4.0
+
+"Put it in your page" is a configurator.
+
+- **Set up a body, copy the code.** The demo's last section follows what is set up above it (body, look, sky and date, moons, turning) and a size (160, 240, 320 or 480), and writes working code for plain HTML from jsDelivr, an ES module, React, Vue, Angular, Svelte and an iframe of the embed page, on tabs that answer the arrow keys, beside a picture made from the same choices, with a Copy button and the credits that go with the picture. The choices are kept in the address (`?embed=react&size=240`).
+- **`embedCode(options, kind, settings)` and `embedCredit(options)`** make the same text for a page of your own (`EMBED_KINDS`: `html`, `module`, `react`, `vue`, `angular`, `svelte`, `iframe`). Pattern: senshu-jerseys' `embedCode` and its tabbed "Put it in your page". Every snippet is tested (`test/embed.test.ts`): the React component is built and rendered, the Vue and Svelte components compiled, the Angular template parsed, the module checked as TypeScript, the iframe's address read the way the embed page reads it, and every body's entry point exists in the package.
+- 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
+
+The Earth is a body like the others, and "To scale" is a comparison.
+
+- **The Earth draws in every look.** In the realistic and painted looks the big view was empty and the row showed chikyu-earth's line globe, because the Earth was handed to chikyu-earth's own live element (0.7.0 here, a second WebGL context, no still). It is now drawn by this package like every other body, from NASA's Blue Marble picture (`earth-512`, `-1024` and `-2048`; the package grows by 0.08 MB), through the page's one WebGL context, with a still in the row. Both looks use the picture (an honest shaded Earth cannot be worked out from numbers), with a rim of air. Only the line look is chikyu-earth's globe. The Earth is in `/all`. chikyu-earth is now `^0.10.0` (it was `^0.7.0`).
+- **"To scale" is a lineup** (section "To scale" in the demo): every body at the same scale in the same size of picture, a magnified picture joined by a line for each body too small to see, Saturn's rings whole, the Sun as the curved edge it is, the Earth at its true size. The tiles in the row are never scaled any more (the Sun was a flat square, Mercury a dot). New attribute `span-km`: the half-width of a picture in kilometres, the same in every picture of a lineup.
+- **Every moon has a tile and a name** for `body` (`?body=io`), in the demo under its planet, with chips on each planet's and moon's view for its moons, its planet and its sister moons.
+- **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
 
 Painted moons, Saturn's rings from Cassini, and a drag that goes the right way up.

package/NOTICE.md

@@ -15,7 +15,7 @@ The tests compare the Galilean moons and four planets with astronomy-engine (MIT
 
 ## The Earth
 
-The Earth is drawn by chikyu-earth (MIT, by John Morris; https://github.com/johnmorrisdotca/chikyu-earth), an optional peer dependency: its own NOTICE.md has the terms of its outlines and its NASA pictures.
+The Earth's line drawing is chikyu-earth's own globe (MIT, by John Morris; https://github.com/johnmorrisdotca/chikyu-earth), an optional peer dependency: its own NOTICE.md has the terms of its outlines. The Earth's realistic and painted looks are drawn here, like every other body, from NASA's Blue Marble picture (below).
 
 ## Surface pictures
 
@@ -40,6 +40,7 @@ NASA says its content "generally are not subject to copyright in the United Stat
 | `ganymede-*.webp` | Ganymede | [Ganymede equatorial.jpg](https://commons.wikimedia.org/wiki/File:Ganymede_equatorial.jpg) | Public domain | USGS | USGS Voyager and Galileo colour mosaic (I-2762), the Mercator sheet for 57 degrees north and south, redrawn as an equirectangular map with longitude 0 in the middle (the source does not say; Galileo Regio falls at 140 degrees west); the poles are not on that sheet and fade from its edge into its mean colour |
 | `callisto-*.webp` | Callisto | [Callisto equatorial.jpg](https://commons.wikimedia.org/wiki/File:Callisto_equatorial.jpg) | Public domain | USGS | USGS Voyager and Galileo mosaic (I-2770), the Mercator sheet for 57 degrees north and south, redrawn as an equirectangular map with longitude 0 in the middle (the source does not say; Valhalla falls at 56 degrees west); the poles fade from its edge into its mean grey |
 | `titan-*.webp` | Titan | [Titan map April 2011 full.png](https://commons.wikimedia.org/wiki/File:Titan_map_April_2011_full.png) | Public domain | NASA / JPL / Space Science Institute | Cassini ISS 938 nm map (PIA14908), turned so longitude 0 is in the middle (the original is centred on 180). Titan's surface cannot be seen in visible light under its haze, so the picture is a colour for the infrared brightness, with its contrast turned down: it is not a photograph, as with Venus |
+| `earth-*.webp` | Earth | [Blue Marble: Next Generation with topography and bathymetry, September 2004](https://visibleearth.nasa.gov/images/73801) (Visible Earth 73801) | Public domain (NASA) | NASA Earth Observatory (Reto Stockli) | Resized from the 2048 pixel picture chikyu-earth already makes from the 5400 x 2700 original; the realistic and the painted looks both draw it, because an honest shaded Earth cannot be worked out from numbers |
 | `rhea-*.webp` | Rhea | [Rhea Color Map.jpg](https://commons.wikimedia.org/wiki/File:Rhea_Color_Map.jpg) | Public domain | NASA/JPL-Caltech/Space Science Institute/Lunar and Planetary Institute | Cassini global colour map (PIA18438), turned half way round so longitude 0 is in the middle (the source does not say where it is centred; the dark trailing side is put at 90 degrees east); the colours are false-colour (infrared, green, ultraviolet) and are turned about half way to grey |
 | `enceladus-*.webp` | Enceladus | [Enceladus Color Map.jpg](https://commons.wikimedia.org/wiki/File:Enceladus_Color_Map.jpg) | Public domain | NASA/JPL-Caltech/Space Science Institute/Lunar and Planetary Institute | Cassini global colour map (PIA18435), turned half way round the same way as Rhea's (the source does not say where it is centred; the fractured trailing terrain is put at 90 degrees east); the colours are false-colour (the blue of the tiger stripes is ultraviolet) and are turned most of the way to grey |
 | `mimas-*.webp` | Mimas | [Map of Mimas 2010-02 PIA12780.jpg](https://commons.wikimedia.org/wiki/File:Map_of_Mimas_2010-02_PIA12780.jpg) | Public domain | NASA/JPL/Space Science Institute | Cassini ISS map of February 2010 (PIA12780), cropped inside its frame and labels; Herschel is at 110 degrees west as its own scale says |

package/README.md

@@ -11,7 +11,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="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.4.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.4.0/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 
@@ -74,7 +76,7 @@ A bundled app imports it: `import "@johnmorrisdotca/wakusei-planets/element"` (a
 | `realistic` | A shaded sphere drawn from the body's real colours and features, lit from the Sun's side, with the rings casting shadows. No pictures: the surface is worked out in a shader. | `three`, the body's entry point |
 | `painted` | A real surface map from public-domain NASA, USGS and JPL imagery. Small pictures first (1.31 MB for all of them in the package), a sharper one fetched when you zoom in. | `three`, the body's entry point |
 
-Every body has its real size relative to the others (`scale-to="jupiter"`), its axial tilt and its rotation. The Sun, Mercury, Venus, Mars, Jupiter, Saturn, Uranus, Neptune and Pluto are drawn, and so are 25 moons (the Moon, Phobos and Deimos, the four Galilean moons, Saturn's seven larger moons, Uranus's five, Proteus, Triton and Nereid, Charon, Nix and Hydra). The Earth is [chikyu-earth](https://github.com/johnmorrisdotca/chikyu-earth)'s own globe, not a second copy: `import "@johnmorrisdotca/wakusei-planets/earth"` (it needs `@johnmorrisdotca/chikyu-earth` installed). The painted looks cover the Sun, the planets from Mercury to Pluto, the Moon, the four Galilean moons, Titan, Rhea, Enceladus and Mimas, and Saturn's rings are Cassini's own picture of them.
+Every body has its real size relative to the others (`scale-to="jupiter"`), its axial tilt and its rotation. The Sun, Mercury, Venus, Mars, Jupiter, Saturn, Uranus, Neptune and Pluto are drawn, and so are 25 moons (the Moon, Phobos and Deimos, the four Galilean moons, Saturn's seven larger moons, Uranus's five, Proteus, Triton and Nereid, Charon, Nix and Hydra). The Earth is drawn like the rest in the realistic and painted looks (NASA's Blue Marble), and its line look is [chikyu-earth](https://github.com/johnmorrisdotca/chikyu-earth)'s own globe: `import "@johnmorrisdotca/wakusei-planets/earth"` (it needs `@johnmorrisdotca/chikyu-earth` 0.10.0 or later installed). The painted looks cover the Sun, the planets from Mercury to Earth and Pluto, the Moon, the four Galilean moons, Titan, Rhea, Enceladus and Mimas, and Saturn's rings are Cassini's own picture of them.
 
 ## As the Earth sees it
 
@@ -92,6 +94,7 @@ Give a body a `time` and it is drawn as the sky shows it then: its pole and rota
 | An ES module in Vite or webpack, only the bodies you need | [bundlers guide](docs/guides/bundlers.md) |
 | React, Vue, Svelte, Angular; Next.js, Nuxt, SvelteKit | [frameworks guide](docs/guides/frameworks.md) |
 | An `<iframe>` of the embed page, no script of your own | [iframe guide](docs/guides/embed-in-an-iframe.md) |
+| Set up a body in the demo and copy the code for HTML, React, Vue, Angular, Svelte or an iframe | [Put it in your page](docs/guides/put-it-in-your-page.md), or `embedCode()` |
 | TypeScript types, an SVG string on a server, Node | [TypeScript and Node guide](docs/guides/typescript-and-node.md) |
 | The looks, the entry points, one WebGL context | [looks and bodies](docs/guides/looks-and-bodies.md) |
 | Moons where they are on a date, time that runs fast | [moons and time](docs/guides/moons-and-time.md) |

package/dist/bodies/all.d.ts

@@ -7,6 +7,7 @@ import "./saturn.ts";
 import "./uranus.ts";
 import "./neptune.ts";
 import "./pluto.ts";
+import "./earth-look.ts";
 import "./moons-earth.ts";
 import "./moons-mars.ts";
 import "./moons-jupiter.ts";

package/dist/bodies/all.js

@@ -7,6 +7,7 @@ import "./saturn.js";
 import "./uranus.js";
 import "./neptune.js";
 import "./pluto.js";
+import "./earth-look.js";
 import "./moons-earth.js";
 import "./moons-mars.js";
 import "./moons-jupiter.js";

package/dist/bodies/earth-look.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bodies/earth-look.js

@@ -0,0 +1,18 @@
+import { registerLook } from "../scene/look.js";
+// The Earth's realistic and painted looks, drawn like every other body's from the Blue Marble picture, so they share the page's one WebGL context and have stills like the rest.
+registerLook({
+    id: "earth",
+    surface: `
+vec4 surface(vec3 p) {
+  float land = smoothstep(0.52, 0.58, fbm(p * 2.6 + 3.0));
+  vec3 sea = vec3(0.05, 0.17, 0.38);
+  vec3 ground = mix(vec3(0.22, 0.38, 0.16), vec3(0.62, 0.55, 0.40), smoothstep(0.55, 0.8, fbm(p * 5.0)));
+  float ice = smoothstep(radians(66.0), radians(76.0), abs(lat(p)));
+  return vec4(mix(mix(sea, ground, land), vec3(0.93, 0.96, 0.98), ice), 0.0);
+}`,
+    atmosphere: { colour: [0.32, 0.52, 0.95], strength: 0.5, power: 3 },
+    wrap: 0.12,
+    limb: 0.12,
+    mapped: true,
+    painted: { map: "earth", widths: [512, 1024, 2048], far: 2048, relief: 0 },
+});

package/dist/bodies/earth.d.ts

@@ -1 +1 @@
-export {};
+import "./earth-look.ts";

package/dist/bodies/earth.js

@@ -1,6 +1,7 @@
+import "./earth-look.js";
 import { delegates } from "../scene/store.js";
-// The Earth is drawn by chikyu-earth's own elements, not a second copy of them: the line globe with the countries, and the Earth from space with the real Sun, clouds and night lights.
-// chikyu-earth is an optional peer, loaded only when an Earth is drawn.
+// The Earth's line look is chikyu-earth's own globe with the countries, not a second copy (chikyu-earth is an optional peer, loaded only when that line globe is drawn). The realistic and
+// painted looks are drawn here like every other body's (earth-look.ts, which `/all` also loads).
 const CENTRE = "10,20";
 delegates.set("earth", {
     async line({ center, size }) {
@@ -11,13 +12,4 @@ delegates.set("earth", {
         globe.setAttribute("size", String(size));
         return globe;
     },
-    async live({ center, time, textureBase }) {
-        await import("@johnmorrisdotca/chikyu-earth/realistic/element");
-        const earth = document.createElement("chikyu-earth-realistic");
-        earth.setAttribute("center", center || CENTRE);
-        earth.setAttribute("time", time);
-        if (textureBase !== null)
-            earth.setAttribute("texture-base", textureBase);
-        return earth;
-    },
 });

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.3.0/dist/textures/";
+export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.4.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,13 +37,13 @@ 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.3.0/textures/";
+export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.4.0/textures/";
 /**
  * The `<wakusei-body>` custom element: a body of the solar system, drawn in a look.
  *
  * Attributes: `body` (a name, such as `jupiter`), `look` (`line`, `realistic` or `painted`), `size` (pixels across), `time` (`now` or an ISO date: the body as the Earth sees it then; leave it out for a portrait),
  * `tilt`, `pitch`, `phase` and `meridian` (a portrait's pose, degrees), `turn` (a portrait turns this many degrees a second), `rate` (simulated seconds for each real second), `moons` (draw the planet's moons on their orbits),
- * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
+ * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `span-km` (draw to scale: the half-width of the picture in kilometres, the same in every picture of a lineup), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
  *
  * @example
  * ```ts no-run

package/dist/element.js

@@ -55,10 +55,18 @@ function extentOf(id, options) {
         const far = Math.max(1.8, ringReach(f) * 1.15, ...near.map((m) => m.reach * 1.1));
         return options.range ?? far;
     }
+    if (options.spanKm !== undefined)
+        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);
 }
+/** 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) {
+    const half = extent / Math.max(0.05, zoom);
+    const limit = 1 + 0.5 / half;
+    return Math.max(-limit, Math.min(limit, pan));
+}
 const TEMPLATE = `<style>
 :host { display: block; width: var(--wakusei-size, 320px); max-width: 100%; aspect-ratio: 1 / 1; position: relative; contain: layout style; }
 #stage { position: absolute; inset: 0; }
@@ -69,7 +77,7 @@ const TEMPLATE = `<style>
  *
  * Attributes: `body` (a name, such as `jupiter`), `look` (`line`, `realistic` or `painted`), `size` (pixels across), `time` (`now` or an ISO date: the body as the Earth sees it then; leave it out for a portrait),
  * `tilt`, `pitch`, `phase` and `meridian` (a portrait's pose, degrees), `turn` (a portrait turns this many degrees a second), `rate` (simulated seconds for each real second), `moons` (draw the planet's moons on their orbits),
- * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
+ * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `span-km` (draw to scale: the half-width of the picture in kilometres, the same in every picture of a lineup), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
  *
  * @example
  * ```ts no-run
@@ -83,7 +91,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", "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", "live", "texture-base", "texture-far-base", "lang", "labels"];
     #stage;
     #state = "line";
     #renderer;
@@ -209,10 +217,6 @@ export class WakuseiBody extends HTMLElement {
         if (this.look === "line")
             return false;
         this.#wantLive = true;
-        if (delegates.has(this.body)) {
-            await this.#delegated(delegates.get(this.body));
-            return true;
-        }
         await this.#ensureView();
         const ok = (await this.#view?.focus()) === true;
         if (ok) {
@@ -227,10 +231,6 @@ export class WakuseiBody extends HTMLElement {
     /** Give the WebGL context back: the picture stays as a still. */
     rest() {
         this.#wantLive = false;
-        if (delegates.has(this.body)) {
-            this.#queue(true);
-            return;
-        }
         this.#stopTick();
         if (this.#view !== undefined) {
             this.#view.blur();
@@ -292,7 +292,8 @@ export class WakuseiBody extends HTMLElement {
         const r = this.#request();
         const scaleTo = this.getAttribute("scale-to");
         const range = this.hasAttribute("range") ? num(this.getAttribute("range"), 0) : undefined;
-        const extent = extentOf(this.body, { ...(scaleTo !== null && scaleTo in BODIES ? { scaleTo } : {}), moons: r.moons, ...(range !== undefined && range > 0 ? { range } : {}) });
+        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 moons = r.moons
             ? frame.moons
                 .filter((m) => m.distance <= extent * 1.05)
@@ -302,7 +303,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: this.#panX, panY: this.#panY, ...(moons !== undefined ? { moons } : {}) };
+        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 } : {}) };
     }
     #tilted = new Map();
     #tiltedOrbit(id, orbit, tilt) {
@@ -359,7 +360,7 @@ export class WakuseiBody extends HTMLElement {
         this.setAttribute("aria-label", this.#label());
         if (this.hasAttribute("size"))
             this.style.setProperty("--wakusei-size", `${num(this.getAttribute("size"), 320)}px`);
-        const delegate = delegates.get(this.body);
+        const delegate = this.look === "line" ? delegates.get(this.body) : undefined;
         if (delegate !== undefined) {
             await this.#delegated(delegate);
             return;
@@ -441,12 +442,12 @@ 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 && scaleTo in BODIES ? { fill: BODIES[this.body].radiusKm / (BODIES[scaleTo].radiusKm * 1.06) } : {}),
+            ...(scaleTo !== null || this.hasAttribute("span-km") ? { fill: this.#fill() } : {}),
             ...(this.getAttribute("lang") === "ja" ? { lang: "ja" } : {}),
             ...(this.getAttribute("labels") === "off" ? { labels: false } : {}),
             ...(stroke !== "" ? { stroke } : {}),
             ...(paper !== "" ? { paper } : {}),
-            ...(this.#zoom !== 1 ? { zoom: this.#zoom, panX: this.#panX, panY: this.#panY } : {}),
+            ...(this.#zoom !== 1 ? { zoom: this.#zoom, panX: scene.panX, panY: scene.panY } : {}),
         });
         this.#stage.innerHTML = html;
     }
@@ -504,30 +505,34 @@ export class WakuseiBody extends HTMLElement {
         if (this.#visible)
             this.#still();
     }
-    /** A body another package draws (the Earth): its line globe, or its shaded Earth once it is asked to go live. */
+    /** A body whose line look another package draws (the Earth's globe with its countries). It is drawn at the body's size in a scale picture, never larger than the picture. */
     async #delegated(delegate) {
         if (this.#view !== undefined) {
             this.#view.dispose();
             this.#view = undefined;
             this.#viewKey = "";
         }
-        const shaded = this.look !== "line" && (this.#wantLive || (this.#hasPriority() && (this.getAttribute("live") ?? "always") === "always"));
-        const kind = shaded ? "live" : "line";
-        const time = this.#start === undefined ? "now" : new Date(this.#start).toISOString();
-        const base = this.getAttribute("texture-base");
         const center = this.hasAttribute("meridian") ? `${num(this.getAttribute("meridian"), 10)},20` : "10,20";
-        const key = `${kind}|${center}|${time}|${base ?? ""}`;
+        const size = Math.round(this.clientWidth || 320);
+        const fill = this.#fill();
+        const key = `line|${center}|${fill}`;
         if (this.#delegateEl !== undefined && this.#delegateKind === key)
             return;
-        const size = Math.round(this.clientWidth || 320);
-        const el = kind === "live" ? await delegate.live({ center, time, textureBase: base }) : await delegate.line({ center, size });
+        const el = await delegate.line({ center, size });
         this.#delegateEl?.remove();
         this.#stage.innerHTML = "";
-        el.style.cssText = "display:block;width:100%;height:100%;aspect-ratio:1";
+        el.style.cssText = `display:block;width:${fill * 100}%;height:${fill * 100}%;aspect-ratio:1;position:absolute;left:${(1 - fill) * 50}%;top:${(1 - fill) * 50}%`;
         this.#stage.append(el);
         this.#delegateEl = el;
         this.#delegateKind = key;
-        this.#set(kind === "live" ? "live" : this.look === "line" ? "line" : "still");
+        this.#set("line");
+    }
+    /** How much of the picture's width the body's disc takes: 1 alone, less in a scale picture (`scale-to`, `span-km`). */
+    #fill() {
+        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;
     }
     /** Make the view's still, once, when it is in sight. */
     #still() {

package/dist/embed.d.ts

@@ -0,0 +1,96 @@
+import { type BodyId, type Look } from "./facts.ts";
+/**
+ * The ways `embedCode` writes a body into a page.
+ *
+ * @example
+ * ```ts
+ * import { EMBED_KINDS } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(EMBED_KINDS.join(", "));
+ * ```
+ */
+export declare const EMBED_KINDS: readonly ["html", "module", "react", "vue", "angular", "svelte", "iframe"];
+/**
+ * One of the ways in `EMBED_KINDS`.
+ *
+ * @example
+ * ```ts
+ * import { EMBED_KINDS, type EmbedKind } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * const kind: EmbedKind = EMBED_KINDS[2];
+ * console.log(kind);
+ * ```
+ */
+export type EmbedKind = (typeof EMBED_KINDS)[number];
+/**
+ * What the reader chose: the body, how it is drawn, and whether it is a portrait or the sky at a date.
+ *
+ * @example
+ * ```ts
+ * import { embedCode, type EmbedOptions } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * const options: EmbedOptions = { body: "saturn", look: "painted", size: 320, turn: 12 };
+ * console.log(embedCode(options, "html"));
+ * ```
+ */
+export interface EmbedOptions {
+    body: BodyId;
+    look?: Look;
+    /** The date and time as an ISO string, or `now`: the body as the Earth sees it then. Left out, a portrait. */
+    time?: string;
+    /** A planet with its moons on their orbits (needs `time`). */
+    moons?: boolean;
+    /** Degrees a second it turns by itself; left out or 0, it is still. */
+    turn?: number;
+    /** Pixels across. */
+    size?: number;
+}
+/**
+ * Where the embed code points: the package's version on jsDelivr, and the published demo, where `embed.html` is.
+ *
+ * @example
+ * ```ts
+ * import { embedCode } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(embedCode({ body: "mars", look: "line" }, "iframe", { site: "https://example.com/wakusei/" }));
+ * ```
+ */
+export interface EmbedSettings {
+    /** The published demo's address, ending in a slash. */
+    site?: string;
+    /** The package's address on the CDN, with its version. */
+    cdn?: string;
+}
+/** The entry point that holds a body's shaded and painted look. */
+export declare function entryOf(id: BodyId): string;
+/**
+ * The text that puts a body in a page, for one way of making the page. Each way is built, parsed or run by the package's tests: the plain HTML one with a script tag from jsDelivr, an ES module, a React component,
+ * a Vue single-file component, an Angular standalone component, a Svelte component, and an iframe of the demo's `embed.html`.
+ *
+ * @param options - The body, its look, the date, the moons, the turn and the size.
+ * @param kind - The way the page is made; `html` by default.
+ * @param settings - The CDN and the demo's address, when they are not the package's own.
+ * @returns The text to paste into the page's source.
+ *
+ * @example
+ * ```ts
+ * import { embedCode } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(embedCode({ body: "jupiter", look: "realistic", time: "now", moons: true }, "react"));
+ * ```
+ */
+export declare function embedCode(options: EmbedOptions, kind?: EmbedKind, settings?: EmbedSettings): string;
+/**
+ * The credits that travel with a picture of a body: the line and shaded looks are drawn from numbers, the painted look uses public-domain pictures.
+ *
+ * @param options - The choices, so only what is used is named.
+ * @returns A short line of credit to put near the picture.
+ *
+ * @example
+ * ```ts
+ * import { embedCredit } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(embedCredit({ body: "mars", look: "painted" }));
+ * ```
+ */
+export declare function embedCredit(options: EmbedOptions): string;

package/dist/embed.js

@@ -0,0 +1,112 @@
+// The text to put a body in a page, for each way a page is made: a script tag from a CDN, an ES module, React, Vue, Angular, Svelte, or an iframe of `embed.html`. The demo's "Put it in your page"
+// section shows these as the reader changes a choice, and the tests build or parse every one. Pure: no DOM.
+import { BODIES } from "./facts.js";
+import { VERSION } from "./version.js";
+/**
+ * The ways `embedCode` writes a body into a page.
+ *
+ * @example
+ * ```ts
+ * import { EMBED_KINDS } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(EMBED_KINDS.join(", "));
+ * ```
+ */
+export const EMBED_KINDS = ["html", "module", "react", "vue", "angular", "svelte", "iframe"];
+const SITE = "https://johnmorrisdotca.github.io/wakusei-planets/";
+const CDN = `https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@${VERSION}`;
+const PACKAGE = "@johnmorrisdotca/wakusei-planets";
+/** The entry point that holds a body's shaded and painted look. */
+export function entryOf(id) {
+    const parent = BODIES[id].parent;
+    return parent === undefined ? id : `moons-${parent}`;
+}
+/** The attributes of the element for these choices, in the order they are written. */
+function attributesOf(o) {
+    const out = [["body", o.body], ["look", o.look ?? "realistic"]];
+    if (o.size !== undefined && o.size !== 320)
+        out.push(["size", String(o.size)]);
+    if (o.time !== undefined)
+        out.push(["time", o.time]);
+    if (o.moons === true && o.time !== undefined)
+        out.push(["moons", ""]);
+    if (o.turn !== undefined && o.turn > 0)
+        out.push(["turn", String(o.turn)]);
+    return out;
+}
+const quote = (v) => `"${v.replace(/&/g, "&").replace(/"/g, """)}"`;
+const tagAttrs = (o) => attributesOf(o).map(([k, v]) => (v === "" ? k : `${k}=${quote(v)}`)).join(" ");
+const needsShading = (o) => (o.look ?? "realistic") !== "line";
+/**
+ * The text that puts a body in a page, for one way of making the page. Each way is built, parsed or run by the package's tests: the plain HTML one with a script tag from jsDelivr, an ES module, a React component,
+ * a Vue single-file component, an Angular standalone component, a Svelte component, and an iframe of the demo's `embed.html`.
+ *
+ * @param options - The body, its look, the date, the moons, the turn and the size.
+ * @param kind - The way the page is made; `html` by default.
+ * @param settings - The CDN and the demo's address, when they are not the package's own.
+ * @returns The text to paste into the page's source.
+ *
+ * @example
+ * ```ts
+ * import { embedCode } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(embedCode({ body: "jupiter", look: "realistic", time: "now", moons: true }, "react"));
+ * ```
+ */
+export function embedCode(options, kind = "html", settings = {}) {
+    const cdn = settings.cdn ?? CDN;
+    const site = settings.site ?? SITE;
+    const shaded = needsShading(options);
+    const entry = entryOf(options.body);
+    const size = options.size ?? 320;
+    if (kind === "iframe") {
+        const query = new URLSearchParams({ body: options.body, look: options.look ?? "realistic" });
+        if (options.time !== undefined)
+            query.set("time", options.time);
+        if (options.moons === true && options.time !== undefined)
+            query.set("moons", "1");
+        if (options.turn !== undefined && options.turn > 0)
+            query.set("turn", String(options.turn));
+        return `<iframe\n  src=${quote(`${site}embed.html?${query.toString()}`)}\n  title=${quote(BODIES[options.body].name.en)}\n  width="${size}"\n  height="${size}"\n  loading="lazy"\n  style="border: 0"\n></iframe>`;
+    }
+    if (kind === "html") {
+        const scripts = [`<script type="module" src="${cdn}/element/+esm"></script>`, ...(shaded ? [`<script type="module" src="${cdn}/${entry}/+esm"></script>`] : [])];
+        return `${scripts.join("\n")}\n\n<wakusei-body ${tagAttrs(options)}></wakusei-body>`;
+    }
+    const imports = [`import "${PACKAGE}/element";`, ...(shaded ? [`import "${PACKAGE}/${entry}";`] : [])];
+    if (kind === "module") {
+        const sets = attributesOf(options).map(([k, v]) => `planet.setAttribute(${JSON.stringify(k)}, ${JSON.stringify(v)});`);
+        return `${imports.join("\n")}\n\nconst planet = document.createElement("wakusei-body");\n${sets.join("\n")}\ndocument.querySelector("#planet").append(planet);`;
+    }
+    const dynamic = [`void import("${PACKAGE}/element");`, ...(shaded ? [`void import("${PACKAGE}/${entry}");`] : [])];
+    if (kind === "react") {
+        const props = attributesOf(options).map(([k, v]) => (v === "" ? k : `${k}=${quote(v)}`)).join(" ");
+        return `import { useEffect } from "react";\n\nexport function Planet() {\n  useEffect(() => {\n    // The element needs a browser, so it is imported in an effect, never at the top of the file.\n${dynamic.map((l) => `    ${l}`).join("\n")}\n  }, []);\n  return <wakusei-body ${props} />;\n}`;
+    }
+    if (kind === "vue") {
+        return `<script setup lang="ts">\nimport { onMounted } from "vue";\n\nonMounted(() => {\n${dynamic.map((l) => `  ${l}`).join("\n")}\n});\n</script>\n\n<template>\n  <wakusei-body ${tagAttrs(options)}></wakusei-body>\n</template>`;
+    }
+    if (kind === "angular") {
+        return `import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from "@angular/core";\n\n@Component({\n  selector: "app-planet",\n  standalone: true,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: \`<wakusei-body ${tagAttrs(options)}></wakusei-body>\`,\n})\nexport class PlanetComponent implements OnInit {\n  ngOnInit(): void {\n    // The element needs a browser: ngOnInit also runs when a server renders.\n    if (typeof window !== "undefined") {\n${dynamic.map((l) => `      ${l}`).join("\n")}\n    }\n  }\n}`;
+    }
+    return `<script lang="ts">\n  import { onMount } from "svelte";\n\n  onMount(() => {\n${dynamic.map((l) => `    ${l}`).join("\n")}\n  });\n</script>\n\n<wakusei-body ${tagAttrs(options)}></wakusei-body>`;
+}
+/**
+ * The credits that travel with a picture of a body: the line and shaded looks are drawn from numbers, the painted look uses public-domain pictures.
+ *
+ * @param options - The choices, so only what is used is named.
+ * @returns A short line of credit to put near the picture.
+ *
+ * @example
+ * ```ts
+ * import { embedCredit } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(embedCredit({ body: "mars", look: "painted" }));
+ * ```
+ */
+export function embedCredit(options) {
+    const base = "Wakusei Planets by John Morris (MIT). Sizes, tilt and rotation: IAU and NASA fact sheets.";
+    const painted = (options.look ?? "realistic") === "painted" ? " Surface pictures: NASA, USGS and JPL imagery in the public domain (details in the package's NOTICE.md)." : "";
+    const earth = options.body === "earth" ? " Earth: NASA Earth Observatory, Blue Marble." : "";
+    return `${base}${painted}${earth}`;
+}

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export { apparent, moonGeocentric, heliocentric, orbitPath, system, type Apparen
 export { drawnTilt, portrait, type PortraitOptions } from "./pose.ts";
 export { lineSvg, mix, type LineOptions } from "./line.ts";
 export { ringStrip, type RingStrip } from "./scene/rings.ts";
+export { embedCode, embedCredit, EMBED_KINDS, type EmbedKind, type EmbedOptions, type EmbedSettings } from "./embed.ts";

package/dist/index.js

@@ -3,3 +3,4 @@ export { apparent, moonGeocentric, heliocentric, orbitPath, system } from "./eph
 export { drawnTilt, portrait } from "./pose.js";
 export { lineSvg, mix } from "./line.js";
 export { ringStrip } from "./scene/rings.js";
+export { embedCode, embedCredit, EMBED_KINDS } from "./embed.js";

package/dist/scene/body.js

@@ -52,7 +52,7 @@ export function createBodyItem(options) {
         key: options.key,
         async build({ three: T, assets, width, height }) {
             const look = lookOf(options.id) ?? fallbackLook(facts);
-            const wantPainted = options.look === "painted" && look.painted !== undefined;
+            const wantPainted = (options.look === "painted" || look.mapped === true) && look.painted !== undefined;
             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;

package/dist/scene/look.d.ts

@@ -74,6 +74,8 @@ export interface BodyLook {
     /** How much of the night side shows (0 to 1). Default 0.04. */
     ambient?: number;
     painted?: PaintedMap;
+    /** Draw the painted map in the realistic look too: for a body with no honest drawing from numbers (the Earth's continents). */
+    mapped?: boolean;
 }
 /**
  * Teach the package how to draw a body in three.js. Each body's entry point (`@johnmorrisdotca/wakusei-planets/jupiter`) calls this once as it loads; call it yourself to add or replace a look.

package/dist/scene/store.d.ts

@@ -1,18 +1,12 @@
 import type { BodyId } from "../facts.ts";
 import type { BodyLook } from "./look.ts";
-/** A body drawn by another package's element (the Earth, by chikyu-earth) instead of by this one: the element asks it for what to show. */
+/** A body whose line look another package's element draws (the Earth, by chikyu-earth) instead of this one: the element asks it for what to show. The shaded and painted looks are always this package's. */
 export interface Delegate {
     /** The line look: an element for the body, centred on a longitude and latitude (`"lon,lat"`). */
     line(options: {
         center: string;
         size: number;
     }): Promise<HTMLElement>;
-    /** The shaded and painted looks, drawn live: an element lit by the Sun at `time` (`"now"` or an ISO date). */
-    live(options: {
-        center: string;
-        time: string;
-        textureBase: string | null;
-    }): Promise<HTMLElement>;
 }
 export declare const looks: Map<BodyId, BodyLook>, waiting: Set<() => void>, delegates: Map<BodyId, Delegate>;
 /** Call `wake` whenever a look is registered; returns a function that stops it. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.3.0";
+export declare const VERSION = "0.4.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.3.0";
+export const VERSION = "0.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/wakusei-planets",
-  "version": "0.3.0",
+  "version": "0.4.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",
@@ -168,6 +168,7 @@
     "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm build && node scripts/check-package.ts",
     "prepublishOnly": "pnpm check",
     "family:readme": "node scripts/family-readme.mjs",
+    "readme:images": "node scripts/readme-images.mjs",
     "site": "pnpm build && node scripts/site.ts",
     "dev": "pnpm site && node scripts/dev.ts",
     "test:demo": "pnpm site && node scripts/docs-site.mjs build && playwright test --project=chromium-desk --project=chromium-phone --project=webkit-desk --project=webkit-phone",
@@ -186,7 +187,7 @@
     "@angular/core": "^22.2.4",
     "@angular/platform-browser": "^22.2.4",
     "@eslint/js": "^9.0.0",
-    "@johnmorrisdotca/chikyu-earth": "^0.7.0",
+    "@johnmorrisdotca/chikyu-earth": "^0.10.0",
     "@playwright/test": "1.64.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "^24.0.0",
@@ -216,11 +217,11 @@
   },
   "packageManager": "pnpm@10.28.0",
   "dependencies": {
-    "@johnmorrisdotca/kazoku-ui": "^0.9.1"
+    "@johnmorrisdotca/kazoku-ui": "^0.11.0"
   },
   "peerDependencies": {
-    "three": ">=0.160.0",
-    "@johnmorrisdotca/chikyu-earth": ">=0.7.0"
+    "@johnmorrisdotca/chikyu-earth": ">=0.10.0",
+    "three": ">=0.160.0"
   },
   "peerDependenciesMeta": {
     "three": {