@johnmorrisdotca/wakusei-planets 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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.14.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.14.0/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 
@@ -273,7 +273,7 @@ A body that turns by itself and a moving sky, in HTML:
 
 ## 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.14.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.14.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.14.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.14.0";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/wakusei-planets",
-  "version": "0.13.0",
+  "version": "0.14.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",