@johnmorrisdotca/wakusei-planets 0.5.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 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.
+
+- **A compact picker** (MODULES-285): the ten bodies in one row, and when the one chosen has moons, its moons on the row below, in the same place; no long list down the page. The moons' own section is gone. Every picture in it is a picture, in the line, the realistic and the painted look: a test looks at all 35 (10 bodies and 25 moons) for blank and single-colour pictures. (The broken thumbnails of 0.3.0 were the tiles being drawn to scale, which 0.3.1 stopped.) The same picker is in "Put it in your page" (MODULES-286), so the body for the code is chosen beside the code; Copy's word can be read (it was ink on ink).
+- **The buttons under the view stay where they are** (MODULES-283): one push button for each body of the system (the planet and its moons), the chosen one pressed, and others pressed with it to see them side by side under the view, at equal sizes or at their true relative sizes (`span-km`), kept in the address (`?with=phobos,deimos&rel=1`). The orbit-distance layout is not made yet.
+- **To scale says what it is against** (MODULES-284): "Its planet" (for a moon), "Earth" or "Sun", and draws it so: Deimos is 0.0018 times Mars's radius, a magnified picture beside it with a line, the caption says so. `?scale=1&ref=planet`.
+- **Deimos is drawn whole** (MODULES-287): an irregular body reaches past its mean radius along its longest axis, and its picture was cut off at the sides.
+- **Every body is fitted by its globe** (MODULES-293): at about half the view's height, the same for all, so Saturn's rings, the Sun's glow and a haze have room, and the Sun is no smaller than a planet. `fit="tight"` on an element gives the old fit (thumbnails).
+- **The sky shows the real phase** (MODULES-294): in "As seen from Earth" the night side is dark (no wrapped terminator, no rim of air round it), so Venus a few days from new is a thin crescent, not a full disc.
+- **A line under every choice** (MODULES-298) says what it does, in English and Japanese, always on the page and tied to its button with `aria-describedby`.
+
 ## 0.5.1 - 2026-11-03
 
 - kazoku-ui 0.12.0: the demo's view controls have a zoom slider, on top of 0.11's Centre button and exact grab.

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.5.1/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.7.0/docs/images/hero-desk.png" width="640"></p>
 
-<p align="center"><img alt="Every body at one scale, the Earth among them: each small body has a magnified picture joined by a line, and the Sun shows only its edge" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.5.1/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.7.0/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 
@@ -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.7.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 or a grid (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/element.d.ts

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

package/dist/element.js

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

package/dist/embed.d.ts

@@ -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 { decodeScene } from "./portrait/model.js";
 import { VERSION } from "./version.js";
 /**
  * The ways `embedCode` writes a body into a page.
@@ -35,8 +36,36 @@ function attributesOf(o) {
     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";
+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 +85,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.

package/dist/index.d.ts

@@ -3,4 +3,5 @@ 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";
+export { embedCode, embedCredit, EMBED_KINDS, portraitCode, type EmbedKind, type EmbedOptions, type EmbedSettings, type PortraitEmbed } from "./embed.ts";
+export { addBody, decodeScene, defaultPortrait, encodeScene, PRESETS as PORTRAIT_PRESETS, resolve as layoutPortrait, type Item as PortraitItem, type Placed as PlacedItem, type Portrait, type Preset as PortraitPreset, type Resolved as PortraitLayout } from "./portrait/model.ts";

package/dist/index.js

@@ -3,4 +3,5 @@ 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";
+export { embedCode, embedCredit, EMBED_KINDS, portraitCode } from "./embed.js";
+export { addBody, decodeScene, defaultPortrait, encodeScene, PRESETS as PORTRAIT_PRESETS, resolve as layoutPortrait } from "./portrait/model.js";

package/dist/line.js

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

package/dist/portrait/element.d.ts

@@ -0,0 +1,77 @@
+import type { SharedRenderer } from "@johnmorrisdotca/kazoku-ui/renderer";
+import type { ThreeParts } from "../scene/body.ts";
+import { setThreeLoader } from "../scene/shared.ts";
+import { type Guide, type Placed, type Portrait, type Resolved } from "./model.ts";
+export { setThreeLoader };
+/**
+ * What the element is doing: `line` (an SVG), `loading`, `still`, `live`, `lost` or `unavailable` (no WebGL: the line drawing is shown).
+ *
+ * @example
+ * ```ts no-run
+ * import type { PortraitState } from "@johnmorrisdotca/wakusei-planets/portrait";
+ *
+ * const done = (state: PortraitState): boolean => state === "live" || state === "line";
+ * console.log(done("still"));
+ * ```
+ */
+export type PortraitState = "line" | "loading" | "still" | "live" | "lost" | "unavailable";
+/**
+ * The `<wakusei-portrait>` custom element: a scene of bodies arranged on one picture.
+ *
+ * Attributes: `scene` (the scene as the portrait builder writes it in its address), `look` (`line`, `realistic` or `painted`: replaces the scene's), `size` (pixels across), `lang` (`en` or `ja`: the names),
+ * `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` and `texture-far-base` (where the surface pictures are).
+ *
+ * @example
+ * ```ts no-run
+ * import { WakuseiPortrait } from "@johnmorrisdotca/wakusei-planets/portrait";
+ *
+ * const view = document.createElement("wakusei-portrait") as WakuseiPortrait;
+ * view.setAttribute("scene", "arrange:arc~look:painted~sun_0_0_0.3_0~earth_0_0_0.3_0~moon_0_0_0.3_0");
+ * document.body.append(view);
+ * ```
+ */
+export declare class WakuseiPortrait extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    /** The scene now. Setting it hands the element a scene of your own, as the builder does; it is drawn at once and at most thirty times a second after. */
+    get portrait(): Portrait;
+    set portrait(value: Portrait);
+    /** The chosen body's index and the guides to draw over the picture (the builder's editing). */
+    set editing(value: {
+        selected?: number;
+        guides?: readonly Guide[];
+    });
+    get state(): PortraitState;
+    /** Numbers for a test or a status line. */
+    get stats(): {
+        state: PortraitState;
+        bodies: number;
+        renderer: SharedRenderer<ThreeParts>["stats"] | undefined;
+    };
+    /** Where everything is on the page now: the picture's size in pixels, pixels to a scene unit, and the bodies (back to front). */
+    get metrics(): {
+        width: number;
+        height: number;
+        scale: number;
+        camera: Resolved["camera"];
+        placed: readonly Placed[];
+    };
+    /** The body under a point of the page (client coordinates): its index in the list, or -1. `slop` is the smallest radius, in pixels, a body is hit within. */
+    pick(clientX: number, clientY: number, slop?: number): number;
+    /** A point of the page (client coordinates) in the scene's units. */
+    worldAt(clientX: number, clientY: number): {
+        x: number;
+        y: number;
+    };
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Take the page's one WebGL context and draw the scene on it. Resolves true when it is live; a line scene has nothing to take and resolves false. */
+    goLive(): Promise<boolean>;
+    /** Give the WebGL context back: the picture stays as a still. */
+    rest(): void;
+    /** The picture as a PNG: the background, the bodies and the names, at the size it is on the page times `scale` (the canvas of the bodies is at most the page's pixel ratio, 2). */
+    toPng(scale?: number): Promise<Blob>;
+    /** The picture as SVG. The line look is all vector. The shaded looks hold the bodies as a picture inside the SVG, with the background, the orbits and the names as vector. */
+    toSvg(): Promise<string>;
+}