@johnmorrisdotca/wakusei-planets 0.6.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## 0.11.0 - 2026-11-03
+
+The drag rule, checked with the family's own check.
+
+- **The surface follows the pointer, exactly** (MODULES-224): the demo tells the shared view controls the radius of the body's disc (`grab-radius`, kept up to date as the view is resized or scaled), so a drag of a few pixels moves the ground at the middle of the body by as many pixels, and the touched point stays under the pointer. New `discRadius` on `<wakusei-body>` (the disc's radius on the screen, in CSS pixels).
+- **The check** is kazoku-ui's shared `e2e/ground.mjs` (copied unchanged from its `templates/e2e-ground.mjs`): in Mars (line, realistic and painted), Venus and the Moon a drag right moves the ground right, a drag up moves it up, the arrow keys agree and Auto-turn goes the right way; exact grab is checked in painted Mars and the Moon.
+- **The documentation site is the family's of 2026-11-03** (MODULES-331): a seeded sample of its pages is read in the browser, and the guides show their pictures as real images (`![..](../images/..)`) instead of links, in English and Japanese.
+- The freeze test that counts what the page keeps now counts after two rounds of changes, not one: on a slow runner the first round was still making the rows' pictures, so the count rose once and then stayed flat (24, 24, 24 with the processor slowed four times); a real leak would keep rising.
+- **The Turn button goes the body's real way** (MODULES-203): Mars turns to the right and Venus, which turns backwards, to the left (it turned every body the same way before); a test per direction.
+
+## 0.10.0 - 2026-11-03
+
+Painted maps for five more moons.
+
+- **Tethys, Dione, Iapetus, Triton and Charon are painted** (MODULES-220), from public-domain maps: Cassini's global colour maps of Tethys, Dione and Iapetus (Paul Schenk, PIA18439, PIA18434, PIA18436), Voyager 2's global colour mosaic of Triton (PIA18668) and New Horizons' global map of Charon. Every source file is public domain by its Wikimedia Commons file page, and `NOTICE.md` has each one's credit and what was done to it, including where the map was centred (turned to match known features: Tethys's crater Odysseus, Iapetus's dark Cassini Regio; Triton's centre is from the USGS label of the same mosaic) and the unmapped north of Triton and south of Charon, which are continued smoothly from the real rows.
+- The pictures add 0.45 MB to the package (the 512 and 1024 pixel widths; the 2048 ones are fetched when a view is zoomed in), which makes the pictures 1.94 MB; the test that holds their size now allows 2 MB.
+
+## 0.9.0 - 2026-11-03
+
+The other dwarf planets.
+
+- **Ceres, Orcus, Haumea, Quaoar, Makemake, Gonggong, Eris and Sedna** (MODULES-232), in the line, realistic and painted looks (`DWARF_IDS`, `DwarfId`, `BODIES.eris`...), and the moons whose orbits are published with a date: **Vanth** (Orcus), **Hiʻiaka and Namaka** (Haumea) and **Dysnomia** (Eris). Weywot, Xiangliu and S/2015 (136472) 1 are left out: no orbit with a published phase exists.
+- **Where they are**: `heliocentric()` takes a dwarf planet too, from JPL's Small-Body Database osculating elements of June 2026, run as a plain ellipse. Against JPL Horizons on 2026-11-03 all five checked are within 0.0002 au (a test holds it). The moons' orbits are from Holler et al. 2021 (Dysnomia), Ragozzine & Brown 2009 (Hiʻiaka, Namaka) and Brown et al. 2010 (Vanth); `NOTICE.md` has the sources and says which numbers are estimates (poles that have not been measured are taken along the orbit's pole; the shaded surfaces other than Ceres's are drawn from colours alone).
+- **Haumea and Quaoar are long shapes** (1161 x 852 x 513 km, turning every 3.9 hours; 1241 x 1093 x 1023 km): the line look now draws the outline of a body with `axesKm` as the ellipse it really shows, and its features on that shape (Phobos, Deimos, Proteus, Nix and Hydra too).
+- **Ceres is painted** from Dawn's colourised global map (public domain; the incomplete colour at high latitudes is made the surface's own grey).
+- **The picker has three groups** (MODULES-204): the Sun and the planets, the dwarf planets and the well-known moons (the Moon, Phobos, Deimos, Io, Europa, Ganymede, Callisto, Enceladus, Titan, Triton, Charon), each a click away; the group follows the body chosen and the address keeps the choice. The portrait builder and the code builder have a dwarf planets group too.
+- **Tests that every body turns about its real axis the right way** (MODULES-203): the rotation rate matches the period, and the spin axis of each planet and dwarf planet makes the published axial tilt with its orbit's pole, backwards for Venus, Uranus and Pluto.
+- New entry points `@johnmorrisdotca/wakusei-planets/dwarfs` and `/moons-dwarf`; `/all` has both. `DWARF_IDS`, `DwarfId` and `HostId` (a planet or dwarf planet a moon can go round) are exported; `BODIES` and `BODY_IDS` have 12 more bodies, and the Portrait builder's order puts the dwarf planets after Pluto.
+- The painted pictures of Ceres add 0.13 MB to the package (512 and 1024 pixels wide).
+
+## 0.8.0 - 2026-11-03
+
+The portrait builder at true orbit distance.
+
+- **True orbit distance** (MODULES-283): a fourth arrangement beside row, arc and grid. Each moon is as far from its planet, and each planet from the Sun, as it really is, with the orbits drawn as circles, and the view backed off to hold them all. With a date set, every body is where it is then, seen from above the ecliptic; with none, they are lined up from the Sun along one side. `arrange: "orbit"` in the scene, `?scene=arrange:orbit~...` in the address.
+- **A link from the demo** ("At true orbit distance", under the buttons that show bodies together) opens the same bodies in the portrait builder at true orbit distance, in the look that is chosen.
+
+## 0.7.0 - 2026-11-03
+
+The portrait builder: any bodies, one picture.
+
+- **`portrait.html` and `<wakusei-portrait>`** (MODULES-231): put the Sun, the planets, Pluto and any of the 25 moons in one picture. Drag a body to move it (in a manual layout it snaps to the middle and edges of the others, with guide lines; hold Alt to switch the snap off), scroll or pinch over it to size it, turn it (the Turn tool, or Shift and a drag: the surface under the pointer follows the pointer, and the arrow keys agree; a body can also turn by itself, the way it really turns), order the bodies front to back, remove them, undo and redo, Centre and Fit all.
+- **Auto-fit and Manual.** Auto-fit places and sizes the bodies and always fits them in: a row, an arc or a grid, at true scale (every size true to the others) or readable (sizes squeezed so the smallest can be seen), with a planet's moons going round it in orbit order, each with its orbit ring (Moons: round their planet, or on their own). Manual keeps every body where it was put and the size it was given, and moving to Manual keeps what Auto-fit had.
+- **One light, a background, names, orbit rings, shadows, a date.** One Sun direction for the whole picture; a black, starry, gradient or clear background; names and orbit rings on or off; shadows (a body can shade another from the Sun, as in an eclipse: `uOcc` in the shader); the sky at a date, with each body's real pole. Line, realistic or painted for the whole scene. Presets: a family photo, the gas giants, Jupiter and the Galileans, the Earth and Moon to scale.
+- **The scene is in the address** (`?scene=...`; `encodeScene`, `decodeScene`), so a link is the picture. **Share** writes the page code in every way a page is made (`portraitCode`, built on the same code as `embedCode`, so `embed.html?scene=...` is the iframe), saves a PNG, saves an SVG (all vector for the line look; the bodies as a picture inside the SVG for the shaded looks) and copies the link.
+- **Performance.** All the bodies of a scene are in ONE three.js scene on the page's one WebGL context; it draws only on a change, thirty times a second at most while something moves, nothing out of sight; pictures are fetched at the size they need and given back. The freeze test plays twelve bodies in one scene (rest, turning, a drag, changes to the scene, the 5K canvas budget).
+- `painter.make(...).update` takes an optional `pose` (a pole and a prime meridian to draw instead of the real ones) and `occluders` (spheres that shade the body from the Sun). `ThreeParts` now includes `Group`: a page that hands over its own three.js subset adds `Group`.
+- New entry point `@johnmorrisdotca/wakusei-planets/portrait`; `addBody`, `layoutPortrait`, `encodeScene`, `decodeScene`, `PORTRAIT_PRESETS` and `portraitCode` in the main one. A guide, "The portrait builder", in English and Japanese.
+
 ## 0.6.0 - 2026-11-03
 
 The demo's pickers, and a scale that is a scale.

package/NOTICE.md

@@ -11,6 +11,15 @@ No picture is used by the line and shaded looks: they are drawn from numbers.
 - **Moons' orbits**: JPL Solar System Dynamics, "Planetary Satellite Mean Elements" (https://ssd.jpl.nasa.gov/sats/elem/, read 2026-11-02), made into `src/data/orbits.ts` by `scripts/make-moon-data.py`. Credit: NASA/JPL-Caltech; the elements are from R. A. Jacobson and colleagues' ephemerides cited on that page.
 - **The Moon's position**: the largest terms of the series in Jean Meeus, "Astronomical Algorithms" (2nd edition), chapter 47, written out here as numbers; the mean arguments are the standard ones.
 
+## The dwarf planets
+
+Ceres, Orcus, Haumea, Quaoar, Makemake, Gonggong, Eris and Sedna (Pluto is with the planets) and the moons Vanth, Hiʻiaka, Namaka and Dysnomia. Values read on 2026-11-03.
+
+- **Where they are**: NASA/JPL Small-Body Database, osculating elements at JD 2461200.5 (https://ssd.jpl.nasa.gov/api/sbdb.api), run as a plain ellipse (`src/data/dwarf.ts`): good for a few years either side of June 2026, and Ceres, pulled by Jupiter, drifts most.
+- **Sizes and spin**: Ceres (966.2 x 962.0 x 891.8 km) and its pole: Ermakov et al. 2017 (as listed in Wikipedia's Ceres article); its rotation: JPL SBDB (9.074170 h). Haumea: Ortiz et al. 2017, Nature 550:219 (semi-axes 1161 x 852 x 513 km), rotation 3.915341 h from Santos-Sanz et al. 2017, A&A 604:A95, pole from Kondratyev & Kornoukhov 2018, MNRAS 478:3159 (RA 282.6, Dec -13.0). Eris: radius 1163 km, Sicardy et al. 2011; it keeps one face to Dysnomia, so its rotation is Dysnomia's orbital period, Szakats et al. 2023, A&A 669:L3. Makemake: radius 715 km, Brown 2013; rotation 22.8266 h, Hromakina et al. 2019. Gonggong: radius 615 km and rotation 22.4 h, Kiss et al. 2019, Icarus. Quaoar: 1241.4 x 1093.0 x 1023.0 km and 17.6788 h, Margoti et al. 2026 and Pereira et al. 2023. Sedna: radius 453 km (Lellouch et al. 2013, TNOs are Cool IX, which allows far more) and 10.273 h, Gaudi et al. 2005. Orcus: radius 455 km, Brown & Butler 2018, rotation 13.188 h (JPL SBDB; 7 to 21 h in the literature). Wikipedia's articles on each body were the finding aid; the papers are the sources.
+- **Moons' orbits**: Dysnomia, Holler et al. 2021, Icarus 355:114130, Table 2 (arXiv 2009.13733). Hiʻiaka and Namaka, Ragozzine & Brown 2009, AJ 137:4766, Table 2 (osculating elements of 2008; the two moons pull on each other, so the position years later is rough). Vanth, Brown et al. 2010, AJ 139:2700, Table 2, solution 1 of two mirror solutions. Radii: Dysnomia 308 km (Brown & Butler 2023), Vanth 221 km (Sickafoose et al. 2018, occultation), Hiʻiaka and Namaka from the Haumea article's listed diameters (370 and 150 km). Weywot, Xiangliu and Makemake's moon S/2015 (136472) 1 are left out: no orbit with a published phase.
+- **Estimated, not measured** (the pictures say so only here): these bodies' poles are not measured, so each is drawn with its spin axis along its orbit's pole (Quaoar, Makemake, Gonggong, Sedna), along Dysnomia's orbit pole (Eris) or along the far end of Vanth's orbit pole, so that it spins forwards (Orcus). Hiʻiaka's and Namaka's spin is unknown and they are drawn still. Dysnomia and Vanth are assumed to keep one face to their planet. Every drawn feature on the line look of a dwarf planet except Ceres's Occator crater and Haumea's long axis is a generic crater, and so is each shaded (realistic) look: only the colour (from the published colour indices and albedos) and the sizes are from numbers. Ceres, Haumea and Dysnomia's shapes are from the sources above. Only Ceres has a painted look.
+
 The tests compare the Galilean moons and four planets with astronomy-engine (MIT, https://github.com/cosinekitty/astronomy), a development dependency that is never shipped.
 
 ## The Earth
@@ -44,6 +53,12 @@ NASA says its content "generally are not subject to copyright in the United Stat
 | `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 |
+| `ceres-*.webp` | Ceres | [PIA20354-Ceres-DwarfPlanet-MercatorMap-HAMO-20160322-0DegreeLongitude.jpg](https://commons.wikimedia.org/wiki/File:PIA20354-Ceres-DwarfPlanet-MercatorMap-HAMO-20160322-0DegreeLongitude.jpg) | Public domain | NASA/JPL-Caltech/UCLA/MPS/DLR/IDA | Dawn's colourised global map of Ceres (PIA20354, 140 m a pixel), longitude 0 in the middle as the file says (Occator's bright spots fall at 239 degrees east); the green and yellow high latitudes, where Dawn's colour coverage is incomplete (the map says so), are made the surface's own grey keeping their detail, and the last rows with no data repeat the nearest real ones; the colour is turned most of the way to grey |
+| `tethys-*.webp` | Tethys | [Tethys Color Map.jpg](https://commons.wikimedia.org/wiki/File:Tethys_Color_Map.jpg) | Public domain | NASA/JPL-Caltech/Space Science Institute/Lunar and Planetary Institute | Cassini global colour map (PIA18439, Paul Schenk), turned half way round so longitude 0 is in the middle (the source does not say where it is centred; Odysseus, at 129 degrees west, falls at 131 degrees west and the dark trailing side at 90 degrees east); the colours are enhanced (ultraviolet to infrared) and are turned about half way to grey |
+| `dione-*.webp` | Dione | [Dione Color Map.jpg](https://commons.wikimedia.org/wiki/File:Dione_Color_Map.jpg) | Public domain | NASA/JPL-Caltech/Space Science Institute/Lunar and Planetary Institute | Cassini global colour map (PIA18434), turned half way round the same way as Tethys's (the source does not say where it is centred; the dark trailing side with its wispy fractures is put at 90 degrees east); the colours are enhanced and are turned about half way to grey |
+| `iapetus-*.webp` | Iapetus | [Iapetus Color Map.jpg](https://commons.wikimedia.org/wiki/File:Iapetus_Color_Map.jpg) | Public domain | NASA/JPL-Caltech/Space Science Institute/Lunar and Planetary Institute | Cassini global colour map (PIA18436), turned half way round the same way (the source does not say where it is centred; the dark leading side, Cassini Regio, is put at 270 degrees east, 90 degrees west); the colours are enhanced and are turned a third of the way to grey |
+| `triton-*.webp` | Triton | [Triton map no grid.jpg](https://commons.wikimedia.org/wiki/File:Triton_map_no_grid.jpg) | Public domain | NASA/JPL-Caltech/Lunar & Planetary Institute (Paul Schenk; Voyager 2 images) | Voyager 2 global colour mosaic (PIA18668, 600 m a pixel, enhanced colour), as it is: USGS Astrogeology's label of the same mosaic (14138 samples wide) says the map is centred on longitude 0, east positive. Voyager never saw the north (it was in winter's dark), so the black there is continued smoothly from the colour just inside it and fades to the mean colour; the colours are turned a little under half way to grey |
+| `charon-*.webp` | Charon | [Charon map iau1803c.jpg](https://commons.wikimedia.org/wiki/File:Charon_map_iau1803c.jpg) | Public domain | NASA/Johns Hopkins University Applied Physics Laboratory/Southwest Research Institute (via the IAU) | New Horizons global map of Charon (iau1803c, no labels or grid), as it is, with longitude 0 in the middle (the source does not say; the sharp hemisphere New Horizons saw best is the one that faces Pluto, which is longitude 0); the south, in the polar night New Horizons never saw, is continued from the last real rows and fades to the mean grey |
 | `saturn-ring-2048.webp` | Saturn's rings | [Saturn's rings in visible light and radio.jpg](https://commons.wikimedia.org/wiki/File:Saturn's_rings_in_visible_light_and_radio.jpg) | Public domain | NASA / JPL / Space Science Institute | Cassini's natural-colour mosaic of the lit rings (PIA07874, from PIA06175), read along one radius into a strip of 2048 colours and opacities from 74,794 to 137,035 km. The radii are fitted to five edges the picture shows (the B ring's inner edge, the two edges of the Cassini Division, the Encke gap and the A ring's outer edge), each within 300 km. The opacity is taken from the brightness, and the colour balance is moved to match the Saturn portrait above; the F ring and the D ring are not in the picture |
 
-The package does not ship the 2048 pixel widths: `TEXTURE_FAR_BASE` fetches them from this repository by jsDelivr's GitHub address when a view is zoomed in. The 512 and 1024 pixel widths of every picture, and the ring strip, are 1.31 MB in the package (the nine of 0.2.0 were 0.53 MB). Tethys, Dione, Iapetus, Triton and Charon have no picture: Cassini's maps of the first three are not made yet, the source of Triton's map does not give its longitudes, and the only clean public-domain map of Charon is under a grid of labels, so those five keep their drawn look.
+The package does not ship the 2048 pixel widths: `TEXTURE_FAR_BASE` fetches them from this repository by jsDelivr's GitHub address when a view is zoomed in. The 512 and 1024 pixel widths of every picture, and the ring strip, are 1.94 MB in the package (the nine of 0.2.0 were 0.53 MB; Ceres adds 0.13 MB and Tethys, Dione, Iapetus, Triton and Charon 0.45 MB). Where a source does not say where its map is centred, its row says what the picture was matched to.

package/README.md

@@ -13,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.6.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.11.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.6.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.11.0/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 
@@ -79,7 +79,7 @@ A bundled app imports it: `import "@johnmorrisdotca/wakusei-planets/element"` (a
 
 ## Features
 
-- The Sun, the eight planets, Pluto and 25 moons, each with its real size, flattening, axial tilt, pole and rotation as data.
+- The Sun, the eight planets, Pluto, eight more dwarf planets and 29 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.
@@ -109,7 +109,7 @@ Import the element once in client code, and the entry point of each body you dra
 | `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 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.
+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 the eight other dwarf planets (Ceres, Orcus, Haumea, Quaoar, Makemake, Gonggong, Eris and Sedna; Haumea and Quaoar as the long shapes they are, and Ceres with a painted map from Dawn) and 29 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, and Vanth, Hiʻiaka, Namaka and Dysnomia, the moons of the dwarf planets whose orbits are published with a date). 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, Ceres, the Moon, the four Galilean moons, Saturn's Mimas, Enceladus, Tethys, Dione, Rhea, Titan and Iapetus, Triton and Charon, and Saturn's rings are Cassini's own picture of them.
 
 ## As the Earth sees it
 
@@ -271,6 +271,19 @@ A body that turns by itself and a moving sky, in HTML:
 
 [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.
 
+## The portrait builder
+
+<p align="center"><img alt="The Sun and the planets in an arc, painted, with their names, in the portrait builder" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.11.0/docs/images/portrait-family.png" width="640"></p>
+
+[The portrait builder](https://johnmorrisdotca.github.io/wakusei-planets/portrait.html) puts any bodies in one picture: drag them, size them, turn them, order them front to back, arrange them in a row, an arc, a grid or at true orbit distance (true or readable sizes, a planet's moons round it in orbit order), light them from one direction, and take the code, a PNG or an SVG. The scene is kept in the address, and every body is drawn in one WebGL scene, so the page holds one WebGL context. [The portrait builder](docs/guides/portrait-builder.md) is its guide.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets/portrait/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets/all/+esm"></script>
+
+<wakusei-portrait scene="look:painted~jupiter_0_0_0.3_0~io_0_0_0.1_0"></wakusei-portrait>
+```
+
 ## 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/).
@@ -279,6 +292,7 @@ The reference is a site, made from the source's own doc comments: every export h
 | --- | --- |
 | `@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. |
+| `.../portrait` | `<wakusei-portrait>`: many bodies in one scene. The scene model (`addBody`, `layoutPortrait`, `encodeScene`, `decodeScene`) is in the main entry. |
 | `.../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. |
@@ -302,6 +316,7 @@ Each guide has a Japanese twin in [docs/guides/ja](docs/guides/ja/getting-starte
 | [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 |
+| [The portrait builder](docs/guides/portrait-builder.md) | Many bodies in one picture |
 | [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` |

package/dist/bodies/all.d.ts

@@ -7,6 +7,7 @@ import "./saturn.ts";
 import "./uranus.ts";
 import "./neptune.ts";
 import "./pluto.ts";
+import "./dwarfs.ts";
 import "./earth-look.ts";
 import "./moons-earth.ts";
 import "./moons-mars.ts";
@@ -15,3 +16,4 @@ import "./moons-saturn.ts";
 import "./moons-uranus.ts";
 import "./moons-neptune.ts";
 import "./moons-pluto.ts";
+import "./moons-dwarf.ts";

package/dist/bodies/all.js

@@ -7,6 +7,7 @@ import "./saturn.js";
 import "./uranus.js";
 import "./neptune.js";
 import "./pluto.js";
+import "./dwarfs.js";
 import "./earth-look.js";
 import "./moons-earth.js";
 import "./moons-mars.js";
@@ -15,3 +16,4 @@ import "./moons-saturn.js";
 import "./moons-uranus.js";
 import "./moons-neptune.js";
 import "./moons-pluto.js";
+import "./moons-dwarf.js";

package/dist/bodies/dwarfs.d.ts

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

package/dist/bodies/dwarfs.js

@@ -0,0 +1,31 @@
+import { registerLook } from "../scene/look.js";
+import { ice, rock } from "../scene/recipes.js";
+registerLook({
+    id: "ceres",
+    surface: rock({
+        dark: "#4d4a47",
+        light: "#7e7a75",
+        craters: 1.4,
+        contrast: 0.8,
+        seed: 61,
+        patches: 3,
+        extra: `
+    float occ = oval(p, 239.0, 19.8, 3.4, 3.4, 0.5);
+    col = mix(col, vec3(0.93, 0.93, 0.92), occ * 0.95);`,
+    }),
+    relief: 0.7,
+    ambient: 0.02,
+    painted: { map: "ceres", widths: [512, 1024, 2048], far: 2048 },
+});
+registerLook({ id: "orcus", surface: rock({ dark: "#6f7074", light: "#a9a9ab", craters: 0.5, contrast: 0.5, seed: 63, patches: 2.2 }), relief: 0.5, ambient: 0.02 });
+registerLook({
+    id: "haumea",
+    surface: ice({ base: "#e4e5e8", stain: "#bfc0c4", craters: 0.08, extra: "col = mix(col, vec3(0.50, 0.17, 0.12), oval(p, 40.0, 5.0, 24.0, 13.0, 0.5) * 0.85);" }),
+    relief: 0.3,
+    ambient: 0.02,
+});
+registerLook({ id: "quaoar", surface: rock({ dark: "#7d5844", light: "#b58b72", craters: 0.35, contrast: 0.4, seed: 65, patches: 2.4 }), relief: 0.5, ambient: 0.02 });
+registerLook({ id: "makemake", surface: rock({ dark: "#8e5a3c", light: "#cf9a76", craters: 0.12, contrast: 0.3, seed: 67, patches: 2.8, extra: "col = mix(col, vec3(0.45, 0.25, 0.17), oval(p, 30.0, 10.0, 34.0, 20.0, 0.45) * 0.5);" }), relief: 0.35, ambient: 0.02 });
+registerLook({ id: "gonggong", surface: rock({ dark: "#6e3524", light: "#a9604a", craters: 0.3, contrast: 0.4, seed: 69, patches: 2.5 }), relief: 0.5, ambient: 0.02 });
+registerLook({ id: "eris", surface: ice({ base: "#ece8e0", stain: "#cdc6ba", craters: 0.06 }), atmosphere: { colour: [0.9, 0.9, 0.95], strength: 0.03, power: 5 }, relief: 0.2, ambient: 0.02 });
+registerLook({ id: "sedna", surface: rock({ dark: "#6a2a1b", light: "#a24b34", craters: 0.2, contrast: 0.3, seed: 71, patches: 2.6 }), relief: 0.4, ambient: 0.02 });

package/dist/bodies/moons-dwarf.d.ts

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

package/dist/bodies/moons-dwarf.js

@@ -0,0 +1,6 @@
+import { registerLook } from "../scene/look.js";
+import { ice, rock } from "../scene/recipes.js";
+registerLook({ id: "dysnomia", surface: rock({ dark: "#3f3d3b", light: "#6c6967", craters: 1.2, contrast: 0.8, seed: 73 }), relief: 0.8, ambient: 0.02 });
+registerLook({ id: "hiiaka", surface: ice({ base: "#e6e6e6", stain: "#c4c4c4", craters: 0.25 }), relief: 0.6, ambient: 0.02 });
+registerLook({ id: "namaka", surface: ice({ base: "#d8d8d8", stain: "#b4b4b4", craters: 0.25 }), relief: 0.6, ambient: 0.02 });
+registerLook({ id: "vanth", surface: rock({ dark: "#55514d", light: "#827d78", craters: 1.2, contrast: 0.8, seed: 75 }), relief: 0.8, ambient: 0.02 });

package/dist/bodies/moons-neptune.js

@@ -7,5 +7,6 @@ registerLook({
     atmosphere: { colour: [0.8, 0.8, 0.9], strength: 0.05, power: 5 },
     ambient: 0.025,
     relief: 0.4,
+    painted: { map: "triton", widths: [512, 1024, 2048], far: 2048 },
 });
 registerLook({ id: "nereid", surface: rock({ dark: "#6e6e6e", light: "#9b9b9b", craters: 1, seed: 40 }), relief: 0.8, ambient: 0.02 });

package/dist/bodies/moons-pluto.js

@@ -1,5 +1,5 @@
 import { registerLook } from "../scene/look.js";
 import { rock } from "../scene/recipes.js";
-registerLook({ id: "charon", surface: rock({ dark: "#756f6a", light: "#aaa29a", craters: 0.7, contrast: 0.7, seed: 41, extra: "col = mix(col, vec3(0.42, 0.20, 0.13), smoothstep(radians(52.0), radians(78.0), lat(p)) * 0.85);" }), relief: 0.6, ambient: 0.02 });
+registerLook({ id: "charon", surface: rock({ dark: "#756f6a", light: "#aaa29a", craters: 0.7, contrast: 0.7, seed: 41, extra: "col = mix(col, vec3(0.42, 0.20, 0.13), smoothstep(radians(52.0), radians(78.0), lat(p)) * 0.85);" }), relief: 0.6, ambient: 0.02, painted: { map: "charon", widths: [512, 1024, 2048], far: 2048 } });
 registerLook({ id: "nix", surface: rock({ dark: "#8d8983", light: "#c9c3b9", craters: 1, contrast: 0.7, seed: 43 }), relief: 0.7, ambient: 0.02 });
 registerLook({ id: "hydra", surface: rock({ dark: "#9e9a92", light: "#d4cec4", craters: 1, contrast: 0.7, seed: 47 }), relief: 0.7, ambient: 0.02 });

package/dist/bodies/moons-saturn.js

@@ -8,8 +8,8 @@ registerLook({
     relief: 0.3,
     painted: { map: "enceladus", widths: [512, 1024, 2048], far: 2048 },
 });
-registerLook({ id: "tethys", surface: rock({ dark: "#8f8d88", light: "#d0cec9", craters: 1.2, contrast: 0.9, seed: 14, patches: 2.2, extra: "float od = bowl(p, 232.0, 5.0, 24.0, 0.6); h += od; col *= 1.0 + 0.7 * od;" }), relief: 0.8, ambient: 0.02 });
-registerLook({ id: "dione", surface: rock({ dark: "#8c8a85", light: "#cdcbc5", craters: 1, contrast: 0.9, seed: 18, patches: 2.6 }), relief: 0.8, ambient: 0.02 });
+registerLook({ id: "tethys", surface: rock({ dark: "#8f8d88", light: "#d0cec9", craters: 1.2, contrast: 0.9, seed: 14, patches: 2.2, extra: "float od = bowl(p, 232.0, 5.0, 24.0, 0.6); h += od; col *= 1.0 + 0.7 * od;" }), relief: 0.8, ambient: 0.02, painted: { map: "tethys", widths: [512, 1024, 2048], far: 2048 } });
+registerLook({ id: "dione", surface: rock({ dark: "#8c8a85", light: "#cdcbc5", craters: 1, contrast: 0.9, seed: 18, patches: 2.6 }), relief: 0.8, ambient: 0.02, painted: { map: "dione", widths: [512, 1024, 2048], far: 2048 } });
 registerLook({ id: "rhea", surface: rock({ dark: "#8a8883", light: "#cac8c2", craters: 1.5, contrast: 0.9, seed: 24, patches: 2 }), relief: 0.85, ambient: 0.02, painted: { map: "rhea", widths: [512, 1024, 2048], far: 2048 } });
 registerLook({
     id: "titan",
@@ -31,4 +31,5 @@ registerLook({
     }),
     relief: 0.7,
     ambient: 0.02,
+    painted: { map: "iapetus", widths: [512, 1024, 2048], far: 2048 },
 });

package/dist/data/dwarf.d.ts

@@ -0,0 +1,16 @@
+import type { DwarfId } from "../facts.ts";
+import type { OrbitElements } from "./orbits.ts";
+/** The osculating heliocentric elements of one epoch. */
+export interface Osculating {
+    /** Milliseconds since 1970. */
+    epoch: number;
+    a: number;
+    e: number;
+    i: number;
+    node: number;
+    w: number;
+    m: number;
+    n: number;
+}
+export declare const DWARF_ELEMENTS: Readonly<Record<DwarfId, Osculating>>;
+export declare const DWARF_MOON_ORBITS: Record<string, OrbitElements>;

package/dist/data/dwarf.js

@@ -0,0 +1,24 @@
+const epoch = 1780963200000;
+export const DWARF_ELEMENTS = {
+    ceres: { epoch, a: 2.765552595034094, e: 0.07969229514816586, i: 10.58802780183462, node: 80.24862682043221, w: 73.29421453021587, m: 274.4193463761342, n: 0.21430445064843 },
+    orcus: { epoch, a: 39.37686537914865, e: 0.2205240628250881, i: 20.55681019612, node: 268.4053519455824, w: 73.56848606705262, m: 189.0972913554275, n: 0.003988800931399829 },
+    haumea: { epoch, a: 43.06029023650952, e: 0.1944430148898797, i: 28.20847393040364, node: 121.7860561329425, w: 240.6905472508661, m: 223.2104118812299, n: 0.003488097731816818 },
+    quaoar: { epoch, a: 43.15617622670811, e: 0.03520019261837198, i: 7.991575800732639, node: 188.9191248092036, w: 163.209046106457, m: 292.8487574842713, n: 0.003476479214379914 },
+    makemake: { epoch, a: 45.57093317300052, e: 0.1588889953992523, i: 29.02785603743067, node: 79.2948338209406, w: 297.0922733397207, m: 169.9379962048232, n: 0.003203850120050116 },
+    gonggong: { epoch, a: 66.86666567773766, e: 0.5042510000302973, i: 30.89906721170288, node: 336.8383156185827, w: 206.6232839773693, m: 111.664541568459, n: 0.001802559348482343 },
+    eris: { epoch, a: 67.93394687853566, e: 0.4382385347971672, i: 43.9258279471791, node: 36.00477044417249, w: 150.7949235840312, m: 211.774434275007, n: 0.001760247770619088 },
+    sedna: { epoch, a: 543.7195289104732, e: 0.8598824585187618, i: 11.92527582847476, node: 144.5061662673739, w: 311.0987725939751, m: 358.5956944005428, n: 7.773948799642578e-05 },
+};
+// Moons of the dwarf planets whose orbit is published with an epoch, so they can be put where they are on a date. Moons with no published phase are left out (Weywot, Xiangliu, S/2015 (136472) 1).
+// Dysnomia: Holler, Grundy, Buie & Noll (2021), "The Eris/Dysnomia system I: The orbit of Dysnomia", Icarus 355:114130, Table 2 (combined fit; epoch JD 2453979.0; the angles are to the J2000 equator;
+//   the table gives the longitude of periapsis 307 and the mean longitude 125.78, so the argument of periapsis is 307 - 126.17 and the mean anomaly 125.78 - 307). Period 15.785899 days.
+// Hiʻiaka and Namaka: Ragozzine & Brown (2009), "Orbits and Masses of the Satellites of the Dwarf Planet Haumea (2003 EL61)", AJ 137:4766, Table 2: osculating elements at HJD 2454615.0, J2000 ecliptic,
+//   the periods from their section III.1. The two moons pull on each other, so a plain ellipse from 2008 is only roughly right years later.
+// Vanth: Brown, Ragozzine, Stansberry & Fraser (2010), "The Size, Density, and Formation of the Orcus-Vanth System in the Kuiper Belt", AJ 139:2700, Table 2, solution 1 of the two mirror solutions
+//   (epoch JD 2454439.280, J2000 ecliptic, a circle). Period 9.5393 days.
+export const DWARF_MOON_ORBITS = {
+    dysnomia: { parent: "eris", frame: "j2000", epoch: 1157025600000, a: 37273, e: 0.0062, w: 180.83, m: 178.78, i: 45.49, node: 126.17, sid: 22.8051630, dw: 0, dn: 0 },
+    hiiaka: { parent: "haumea", frame: "ecliptic", epoch: 1211976000000, a: 49880, e: 0.0513, w: 154.1, m: 152.8, i: 126.356, node: 206.766, sid: 7.2783147, dw: 0, dn: 0 },
+    namaka: { parent: "haumea", frame: "ecliptic", epoch: 1211976000000, a: 25657, e: 0.249, w: 178.9, m: 178.5, i: 113.013, node: 205.016, sid: 19.6954859, dw: 0, dn: 0 },
+    vanth: { parent: "orcus", frame: "ecliptic", epoch: 1196793792000, a: 8980, e: 0, w: 0, m: 143.1, i: 90.2, node: 50.0, sid: 37.7386181, dw: 0, dn: 0 },
+};

package/dist/data/orbits.d.ts

@@ -1,8 +1,8 @@
 export interface OrbitElements {
     /** The planet it goes round. */
     parent: string;
-    /** The reference plane: the ecliptic, the planet's equator, or the Laplace plane whose pole is `pole` (right ascension, declination, degrees). */
-    frame: "ecliptic" | "equatorial" | "laplace";
+    /** The reference plane: the ecliptic, the Earth's equator of J2000, the planet's equator, or the Laplace plane whose pole is `pole` (right ascension, declination, degrees). */
+    frame: "ecliptic" | "j2000" | "equatorial" | "laplace";
     pole?: [number, number];
     /** The epoch of the elements, in milliseconds since 1970. */
     epoch: number;

package/dist/data/orbits.js

@@ -1,3 +1,6 @@
+// Made by scripts/make-moon-data.py from JPL's Planetary Satellite Mean Elements (https://ssd.jpl.nasa.gov/sats/elem/); do not edit by hand.
+// The moons of the dwarf planets are not on that page: their orbits are in dwarf.ts, from the papers it cites, and are added at the end.
+import { DWARF_MOON_ORBITS } from "./dwarf.js";
 export const ORBITS = {
     moon: { parent: "earth", frame: "ecliptic", epoch: 946728000000, a: 384400, e: 0.0554, w: 318.15, m: 135.27, i: 5.16, node: 125.08, sid: 13.1763585, dw: 0.16435, dn: -0.05299 },
     phobos: { parent: "mars", frame: "laplace", pole: [317.7, 52.9], epoch: 946728000000, a: 9375, e: 0.015, w: 216.3, m: 189.7, i: 1.1, node: 169.2, sid: 1128.8443146, dw: -0.74464, dn: -0.42853 },
@@ -24,4 +27,5 @@ export const ORBITS = {
     charon: { parent: "pluto", frame: "equatorial", epoch: 946728000000, a: 19600, e: 0, w: 0, m: 304.1, i: 0, node: 0, sid: 56.3624607, dw: 0.00000, dn: 0.00000 },
     nix: { parent: "pluto", frame: "equatorial", epoch: 946728000000, a: 49300, e: 0.015, w: 31.4, m: 338.2, i: 0, node: 0, sid: 14.4842403, dw: 0.00000, dn: 0.00000 },
     hydra: { parent: "pluto", frame: "equatorial", epoch: 946728000000, a: 65200, e: 0.009, w: 139.3, m: 335, i: 0.3, node: 114.3, sid: 9.4236471, dw: 0.00000, dn: -0.07040 },
+    ...DWARF_MOON_ORBITS,
 };

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.6.0/dist/textures/";
+export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.11.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.6.0/textures/";
+export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.11.0/textures/";
 /**
  * The `<wakusei-body>` custom element: a body of the solar system, drawn in a look.
  *
@@ -59,6 +59,8 @@ export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisd
 export declare class WakuseiBody extends HTMLElement {
     #private;
     static observedAttributes: string[];
+    /** The radius of the body's disc on the screen in CSS pixels, at the picture's own size: what `grab-radius` on the shared view controls wants for a drag that keeps the touched point under the pointer. */
+    get discRadius(): number;
     get body(): BodyId;
     get look(): Look;
     /** What the element is doing now. */

package/dist/element.js

@@ -145,6 +145,10 @@ export class WakuseiBody extends HTMLElement {
         else
             this.#resume();
     };
+    /** The radius of the body's disc on the screen in CSS pixels, at the picture's own size: what `grab-radius` on the shared view controls wants for a drag that keeps the touched point under the pointer. */
+    get discRadius() {
+        return (this.getBoundingClientRect().width / 2) * this.#fill();
+    }
     get body() {
         const id = this.getAttribute("body");
         return id !== null && id in BODIES ? id : "earth";

package/dist/embed.d.ts

@@ -61,7 +61,7 @@ export interface EmbedSettings {
     /** The package's address on the CDN, with its version. */
     cdn?: string;
 }
-/** The entry point that holds a body's shaded and painted look. */
+/** The entry point that holds a body's shaded and painted look: the body's own, `dwarfs` for the dwarf planets besides Pluto, `moons-<planet>` for a moon and `moons-dwarf` for a moon of a dwarf planet. */
 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,
@@ -80,6 +80,40 @@ export declare function entryOf(id: BodyId): string;
  * ```
  */
 export declare function embedCode(options: EmbedOptions, kind?: EmbedKind, settings?: EmbedSettings): string;
+/**
+ * A scene of the portrait builder to put in a page: the scene as the builder writes it in its address, how wide the picture is, and the look to draw it in if not the scene's own.
+ *
+ * @example
+ * ```ts
+ * import { portraitCode, type PortraitEmbed } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * const options: PortraitEmbed = { scene: "look:painted~jupiter_0_0_0.3_0~io_0_0_0.1_0", width: 640 };
+ * console.log(portraitCode(options, "html").includes("wakusei-portrait"));
+ * ```
+ */
+export interface PortraitEmbed {
+    /** The scene as text (`encodeScene`). */
+    scene: string;
+    /** Pixels across; default 720. */
+    width?: number;
+}
+/**
+ * The text that puts a portrait scene in a page, for each way a page is made, as `embedCode` does for a single body. The bodies' own entry points are loaded only for the bodies in the scene
+ * (all of them when there are more than six kinds), and none for the line look.
+ *
+ * @param options - The scene and the width.
+ * @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 { portraitCode } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(portraitCode({ scene: "look:painted~jupiter_0_0_0.3_0~io_0_0_0.1_0" }, "vue"));
+ * ```
+ */
+export declare function portraitCode(options: PortraitEmbed, 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.
  *

package/dist/embed.js

@@ -1,6 +1,7 @@
 // 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 { BODIES, DWARF_IDS } from "./facts.js";
+import { decodeScene } from "./portrait/model.js";
 import { VERSION } from "./version.js";
 /**
  * The ways `embedCode` writes a body into a page.
@@ -16,10 +17,12 @@ export const EMBED_KINDS = ["html", "module", "react", "vue", "angular", "svelte
 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. */
+/** The entry point that holds a body's shaded and painted look: the body's own, `dwarfs` for the dwarf planets besides Pluto, `moons-<planet>` for a moon and `moons-dwarf` for a moon of a dwarf planet. */
 export function entryOf(id) {
     const parent = BODIES[id].parent;
-    return parent === undefined ? id : `moons-${parent}`;
+    if (parent === undefined)
+        return DWARF_IDS.includes(id) ? "dwarfs" : id;
+    return DWARF_IDS.includes(parent) ? "moons-dwarf" : `moons-${parent}`;
 }
 /** The attributes of the element for these choices, in the order they are written. */
 function attributesOf(o) {
@@ -35,8 +38,36 @@ function attributesOf(o) {
     return out;
 }
 const quote = (v) => `"${v.replace(/&/g, "&amp;").replace(/"/g, "&quot;")}"`;
-const tagAttrs = (o) => attributesOf(o).map(([k, v]) => (v === "" ? k : `${k}=${quote(v)}`)).join(" ");
 const needsShading = (o) => (o.look ?? "realistic") !== "line";
+const attrText = (attrs) => attrs.map(([k, v]) => (v === "" ? k : `${k}=${quote(v)}`)).join(" ");
+function snippet(kind, spec, cdn) {
+    const Name = spec.name.charAt(0).toUpperCase() + spec.name.slice(1);
+    const tagAttrs2 = attrText(spec.attrs);
+    if (kind === "iframe") {
+        const f = spec.iframe;
+        return `<iframe\n  src=${quote(f.src)}\n  title=${quote(f.title)}\n  width="${f.width}"\n  height="${f.height}"\n  loading="lazy"\n  style="border: 0"\n></iframe>`;
+    }
+    if (kind === "html") {
+        const scripts = [`<script type="module" src="${cdn}/${spec.element}/+esm"></script>`, ...spec.entries.map((e) => `<script type="module" src="${cdn}/${e}/+esm"></script>`)];
+        return `${scripts.join("\n")}\n\n<${spec.tag} ${tagAttrs2}></${spec.tag}>`;
+    }
+    const imports = [`import "${PACKAGE}/${spec.element}";`, ...spec.entries.map((e) => `import "${PACKAGE}/${e}";`)];
+    if (kind === "module") {
+        const sets = spec.attrs.map(([k, v]) => `${spec.name}.setAttribute(${JSON.stringify(k)}, ${JSON.stringify(v)});`);
+        return `${imports.join("\n")}\n\nconst ${spec.name} = document.createElement("${spec.tag}");\n${sets.join("\n")}\ndocument.querySelector("#${spec.name}").append(${spec.name});`;
+    }
+    const dynamic = [`void import("${PACKAGE}/${spec.element}");`, ...spec.entries.map((e) => `void import("${PACKAGE}/${e}");`)];
+    if (kind === "react") {
+        return `import { useEffect } from "react";\n\nexport function ${Name}() {\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 <${spec.tag} ${tagAttrs2} />;\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  <${spec.tag} ${tagAttrs2}></${spec.tag}>\n</template>`;
+    }
+    if (kind === "angular") {
+        return `import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from "@angular/core";\n\n@Component({\n  selector: "app-${spec.name}",\n  standalone: true,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: \`<${spec.tag} ${tagAttrs2}></${spec.tag}>\`,\n})\nexport class ${Name}Component 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<${spec.tag} ${tagAttrs2}></${spec.tag}>`;
+}
 /**
  * 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`.
@@ -56,40 +87,50 @@ const needsShading = (o) => (o.look ?? "realistic") !== "line";
 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>`;
+    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 snippet(kind, {
+        tag: "wakusei-body",
+        element: "element",
+        entries: needsShading(options) ? [entryOf(options.body)] : [],
+        attrs: attributesOf(options),
+        name: "planet",
+        iframe: { src: `${site}embed.html?${query.toString()}`, title: BODIES[options.body].name.en, width: size, height: size },
+    }, cdn);
+}
+/**
+ * The text that puts a portrait scene in a page, for each way a page is made, as `embedCode` does for a single body. The bodies' own entry points are loaded only for the bodies in the scene
+ * (all of them when there are more than six kinds), and none for the line look.
+ *
+ * @param options - The scene and the width.
+ * @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 { portraitCode } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * console.log(portraitCode({ scene: "look:painted~jupiter_0_0_0.3_0~io_0_0_0.1_0" }, "vue"));
+ * ```
+ */
+export function portraitCode(options, kind = "html", settings = {}) {
+    const cdn = settings.cdn ?? CDN;
+    const site = settings.site ?? SITE;
+    const width = options.width ?? 720;
+    const scene = decodeScene(options.scene);
+    const kinds = [...new Set(scene.items.map((i) => entryOf(i.body)))];
+    const entries = scene.look === "line" ? [] : kinds.length > 6 ? ["all"] : kinds;
+    const attrs = [["scene", options.scene]];
+    if (width !== 720)
+        attrs.push(["size", String(width)]);
+    return snippet(kind, { tag: "wakusei-portrait", element: "portrait", entries, attrs, name: "portrait", iframe: { src: `${site}embed.html?${new URLSearchParams({ scene: options.scene }).toString()}`, title: "Wakusei Planets portrait", width, height: Math.round(width / scene.aspect) } }, cdn);
 }
 /**
  * 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.