@johnmorrisdotca/uchusen-rockets 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## [Unreleased]
 
+## [0.9.0] - 2026-11-04
+
+"Put this rocket on your site" is the family's embed panel (MODULES-379).
+
+- **The demo's copy panel and the code builder are kazoku-ui's `<kazoku-embed-panel>`** (kazoku-ui ^0.15.1). Nothing they had is gone, and a test counts it: the six ways (CDN script as the HTML tab, iframe, module, SVG, data address, image link), the note for each (in English and Japanese), Copy (now "Copy code"), Save SVG, Save PNG, Open the embed page, and the credit line, which shows only for a painted rocket whose parts need one.
+- **Added by the panel**: React, Vue, Angular and Svelte tabs (the element, with a painted rocket's credit beside it), a size (240, 320, 480, 640), the drawing beside the code, and Read the docs. The picture is the drawing itself, never the 3D view or an iframe, so it adds no WebGL context and no frame loop.
+- **`EmbedSettings.size`**: the iframe's largest width and the linked picture's width and height (480 by default, so the old text is unchanged).
+- `demo/embed-code.ts` writes the framework tabs; `test/embed-panel.test.ts` holds the six ways to the package's own `embedCode`, the attributes to ones the element reads, the credit to every tab, and compiles the React, Vue, Angular and Svelte code.
+- `scripts/check-standard.mjs` is kazoku-ui 0.15's (the `embed-panel` item); the demo moves to `@johnmorrisdotca/kazoku-ui` ^0.15.1.
+
 ## [0.8.0] - 2026-11-04
 
 - **The wheel zooms the view.** The element's own hands (the ones a page without the family's view controls gets) now zoom with the wheel over the 3D view, as a pinch did; before, the wheel zoomed only once the view had focus. With the pointer anywhere else the page scrolls, and a wheel that starts with the zoom already at its end scrolls the page too, so the page is never trapped. A sideways swipe, or Shift and the wheel, is left to the page. Under the family's view controls (`drive()`) nothing changes: they already zoomed with the wheel (kazoku-ui 0.13).

package/README.md

@@ -124,7 +124,7 @@ embedCode({ rocket: "starship", variant: "v3", look: "line" }, "element").includ
 
 Changing `look` keeps the angle. Changing `show` is an animated move, and a cut under reduced motion. Each part alone fills the frame and has its own listed size. Every look works for every variant and every choice of parts. Front is the windward, tiled side; back is the steel side.
 
-<p align="center"><img alt="The code builder: a row of makers, rockets, variants, parts, looks and views beside the rocket, and the code to copy below." src="https://raw.githubusercontent.com/johnmorrisdotca/uchusen-rockets/main/docs/images/builder.jpg" width="820"></p>
+<p align="center"><img alt="The code builder: a row of makers, rockets, variants, parts, looks and views beside the rocket, and under it the embed panel: a size, ten tabs from HTML to Image link, the drawing beside the code, and Copy code, Open the embed page and Read the docs." src="https://raw.githubusercontent.com/johnmorrisdotca/uchusen-rockets/main/docs/images/builder.jpg" width="820"></p>
 
 <p align="center"><img alt="The demo on a phone, the rocket on a screen 390 pixels wide." src="https://raw.githubusercontent.com/johnmorrisdotca/uchusen-rockets/main/docs/images/phone.jpg" width="320"></p>
 
@@ -297,7 +297,7 @@ Anything from outside is treated as text: an attribute that is not in its list f
 
 ## The code builder
 
-[The code builder](https://johnmorrisdotca.github.io/uchusen-rockets/builder.html) is one screen: choose the maker, the rocket, the variant, the parts, the look, the view and the engines, see the rocket, and copy the code for any of the six ways. A painted rocket's credit is under the code. It is built from `ROCKETS`, `showsOf`, `embedCode` and `paintedCredit`, so it offers every rocket the package has, as it gains them.
+[The code builder](https://johnmorrisdotca.github.io/uchusen-rockets/builder.html) is one screen: choose the maker, the rocket, the variant, the parts, the look, the view and the engines, see the rocket, and copy the code for any of the six ways, or for React, Vue, Angular and Svelte. The demo's "Put this rocket on your site" is the same panel (the family's `<kazoku-embed-panel>`): a size, the drawing beside the code, Save SVG and Save PNG, Open the embed page and Read the docs. A painted rocket's credit is under the code. It is built from `ROCKETS`, `showsOf`, `embedCode` and `paintedCredit`, so it offers every rocket the package has, as it gains them.
 
 ## Lit engines and flights
 

package/dist/embed.d.ts

@@ -38,6 +38,8 @@ export interface EmbedSettings {
     site?: string;
     /** The CDN or package path the element is loaded from. */
     cdn?: string;
+    /** Pixels across for the `iframe` (its largest width) and the `link` picture (its width; the height follows). 480 when left out. */
+    size?: number;
 }
 /**
  * The address of the published demo, where `embed.html` is.

package/dist/embed.js

@@ -190,6 +190,7 @@ const creditHtml = (credit) => (credit === "" ? "" : `\n<p>${esc(credit).replace
 export function embedCode(options, kind = "element", settings = {}) {
     const site = settings.site ?? SITE;
     const cdn = settings.cdn ?? CDN;
+    const across = Number.isFinite(settings.size) && settings.size > 0 ? Math.round(settings.size) : 480;
     const credit = paintedCredit(options);
     if (kind === "svg")
         return drawingOf(options);
@@ -199,13 +200,13 @@ export function embedCode(options, kind = "element", settings = {}) {
         const path = assetPathOf(options);
         const alt = esc(options.label ?? "Rocket");
         const src = path === null ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(drawingOf(options))}` : `${cdn}/dist/assets/${path}`;
-        return `<img src="${esc(src)}" alt="${alt}" width="480" height="640" loading="lazy">${creditHtml(credit)}`;
+        return `<img src="${esc(src)}" alt="${alt}" width="${across}" height="${Math.round((across * 4) / 3)}" loading="lazy">${creditHtml(credit)}`;
     }
     if (kind === "iframe") {
         const query = rocketToParams(options).toString();
         const src = `${site}embed.html${query === "" ? "" : `?${query}`}`;
         const title = options.label ?? "Rocket";
-        return `<iframe\n  src="${esc(src)}"\n  title="${esc(title)}"\n  loading="lazy"\n  style="width:100%;max-width:480px;aspect-ratio:3 / 4;border:0"\n></iframe>${creditHtml(credit)}`;
+        return `<iframe\n  src="${esc(src)}"\n  title="${esc(title)}"\n  loading="lazy"\n  style="width:100%;max-width:${across}px;aspect-ratio:3 / 4;border:0"\n></iframe>${creditHtml(credit)}`;
     }
     if (kind === "module") {
         const description = descriptionOf(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/uchusen-rockets",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Uchusen Rockets 宇宙船: line drawings and 3D views of rockets, as a web component. Every variant with its own sourced sizes, a typed way to assemble a rocket from parts, stack and separate. No logos. three.js is a peer dependency.",
   "keywords": [
     "rocket",
@@ -125,7 +125,7 @@
     "@gltf-transform/extensions": "4.5.1",
     "@gltf-transform/functions": "4.5.1",
     "@johnmorrisdotca/chikyu-earth": "0.10.0",
-    "@johnmorrisdotca/kazoku-ui": "^0.14.0",
+    "@johnmorrisdotca/kazoku-ui": "^0.15.1",
     "@playwright/test": "1.64.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "24.10.1",