@johnmorrisdotca/wakusei-planets 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.15.0 - 2026-11-04
+
+The family's embed panel on the code builder and the portrait builder (MODULES-380).
+
+- **`builder.html`'s code section is kazoku-ui's `<kazoku-embed-panel>`**, with the builder's own choices inside it: which planet's system and the body in the `picker` slot; the look, the sky and the turning in the `options` slot; the size is the panel's own (160, 240, 320, 480). Nothing it had is gone, and a test counts it: the twelve groups and ten bodies, the look, sky and turning rows, the seven tabs (HTML, ES module, React, Vue, Angular, Svelte, iframe), the four sizes, the picture made from the same choices (the picture now fits its box at every size), Copy (now "Copy code", in a button that can be read), Open the embed page and the credit line (which names NASA, USGS and JPL for the painted look and NASA for the Earth). Added by the panel: Read the docs, Home and End on the tabs.
+- **`portrait.html`'s Share tab is the panel too**, with Save PNG, Save SVG and Copy link and their status line in the `actions` slot, and the credit line as before. It has `no-preview` and `no-size`: the portrait is the picture on the page, so the panel adds no second WebGL context and no frame loop. The tab and the code stay in the address as `?embed=`. A test counts the seven tabs, the code, Copy, the three actions, the embed page link, the docs link and the credit.
+- `scripts/check-standard.mjs` is kazoku-ui 0.15's (it has the `embed-panel` item; this package passes).
+- Guides (English and Japanese) say so. Tests: `e2e/builder.demo.ts` and `e2e/portrait.demo.ts` (desk and phone, Chromium and WebKit).
+
+## 0.14.0 - 2026-11-04
+
+The family's one "Put it in your page" panel, wakusei-planets first (KAZOKU-UI-40).
+
+- **The demo's "Put it in your page" is kazoku-ui's `<kazoku-embed-panel>`** (kazoku-ui 0.15), filled with wakusei's own choices and code. Nothing it had is gone, and a test counts it: the body picker (tiles by group, planet and moon, in the panel's `picker` slot), the four sizes, the seven tabs (HTML, ES module, React, Vue, Angular, Svelte, iframe; the arrow keys, `?embed=`, `?size=`), the picture made from the same choices, Copy, Open the embed page, Read the docs and the credit line. What changed: the picture always fits its box (Venus was cut off on the right), Copy says "Copy code" in a button that can be read (MODULES-286), Home and End work on the tabs, and the panel is the same one every package of the family now gets.
+- `embedCode` writes its seven tabs through kazoku-ui's `embedSnippet`; the text is unchanged (the package's tests build and parse every tab as before).
+- `kazoku-ui` is `^0.15.1` (the panel asks for one animation frame at a time; the freeze test holds it). Tests: `e2e/embed-builder.demo.ts` (the code for each tab, the picture, Copy, the picker, "nothing is gone", the picture fits at every size; desk and phone, Chromium and WebKit).
+- Left for a follow-up: the code panels of `builder.html` and `portrait.html` still use the earlier markup.
+
 ## 0.13.0 - 2026-11-04
 
 The wheel zooms (KAZOKU-UI-45).

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.13.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.15.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.13.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.15.0/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 
@@ -269,11 +269,11 @@ A body that turns by itself and a moving sky, in HTML:
 
 ## The code builder
 
-[The code builder](https://johnmorrisdotca.github.io/wakusei-planets/builder.html) is one screen: choose which planet's system, the body, the look, the size, the sky and the turning, then pick how your page is made and copy the code. It is built from `embedCode`, so it writes what the package writes. [Put it in your page](docs/guides/put-it-in-your-page.md) is its guide.
+[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 the family's embed panel with those choices inside it, 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.13.0/docs/images/portrait-family.png" width="640"></p>
+<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.15.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.
 

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.13.0/dist/textures/";
+export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.15.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.13.0/textures/";
+export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.15.0/textures/";
 /**
  * The `<wakusei-body>` custom element: a body of the solar system, drawn in a look.
  *

package/dist/embed.js

@@ -1,5 +1,6 @@
 // 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 { embedSnippet } from "@johnmorrisdotca/kazoku-ui/embed-panel";
 import { BODIES, DWARF_IDS } from "./facts.js";
 import { decodeScene } from "./portrait/model.js";
 import { VERSION } from "./version.js";
@@ -37,37 +38,9 @@ function attributesOf(o) {
         out.push(["turn", String(o.turn)]);
     return out;
 }
-const quote = (v) => `"${v.replace(/&/g, "&").replace(/"/g, """)}"`;
 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 seven ways are kazoku-ui's: one description of the element gives every one of them. */
+const snippet = (kind, spec, cdn) => embedSnippet(kind, { ...spec, package: PACKAGE, cdn });
 /**
  * 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`.

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.13.0";
+export declare const VERSION = "0.15.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.13.0";
+export const VERSION = "0.15.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/wakusei-planets",
-  "version": "0.13.0",
+  "version": "0.15.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",
@@ -240,7 +240,7 @@
   },
   "packageManager": "pnpm@10.28.0",
   "dependencies": {
-    "@johnmorrisdotca/kazoku-ui": "^0.14.0"
+    "@johnmorrisdotca/kazoku-ui": "^0.15.1"
   },
   "peerDependencies": {
     "@johnmorrisdotca/chikyu-earth": ">=0.10.0",