@johnmorrisdotca/uchusen-rockets 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## [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).
+- Demo and documentation: the hint under the view, the Element page, the README and the Looks guide (English and Japanese) say that the wheel zooms, not Ctrl or Command with the wheel.
+
 ## [0.7.0] - 2026-11-03
 
 - Demo: the view controls' Auto-turn speeds are the family's speed buttons, 0.5×, 1× and 2× (kazoku-ui 0.14, `^0.14.0`), in place of Slow, Medium and Fast. The reader's choice is the controls' `pace` attribute and `?pace=2` in the address (the address key was `speed`). The base speed stays `speed="5"` degrees a second, which the buttons multiply, and Turn left and Turn right keep their way at any speed. The copied embed code turns at the same speed as the page (`spin` is the seconds a turn: 144, 72 or 36), where it said `slow` whatever the buttons said. Browser tests hold the three buttons, the speed each sets (sign kept), the address and the copied code, and that an old `?speed=fast` opens at 1×.

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
 
@@ -379,7 +379,7 @@ variantOf("starship", "2019").facts.diameter.value; // null
 
 - The element has an accessible name from its `label` attribute, or from the fit report's label (such as "Block 3 (V3)") when there is none. The 3D view's canvas says how to turn it.
 - A reader who asked for reduced motion gets no spin, no flames, no played flight and a cut instead of an animated move. The slider and charts still work.
-- Turning works by drag, touch and the keyboard: the arrow keys turn it, `+` and `-` zoom, Home puts it back.
+- Turning works by drag, touch and the keyboard: the arrow keys turn it, the wheel over the view, a pinch, `+` and `-` zoom, Home puts it back. With the pointer anywhere else the wheel scrolls the page, and so it does when the zoom is already at its end.
 - The demo's controls are at least 44 pixels tall and work with a keyboard.
 
 ```html

package/dist/element/scene.d.ts

@@ -154,5 +154,8 @@ export declare class RocketViewer {
     private fit;
     private orbit;
     private key;
+    /** The wheel over the view zooms it, as does a pinch (Ctrl or Command and the wheel). A wheel that starts with the zoom already at its end, or a sideways swipe, leaves the page to scroll. */
+    private onWheel;
+    private wheelTaken;
     private zoom;
 }

package/dist/element/scene.js

@@ -18,6 +18,8 @@ import { GroundKit } from "./ground.js";
 import { PartPlumes, PlumeKit } from "./plumes.js";
 const IDLE_STOP_MS = 90_000;
 const MOVE_MS = 1400;
+/** Wheel steps closer together than this belong to one turn of the wheel, so a zoom that reaches its end part-way through does not hand the rest to the page. */
+const WHEEL_GESTURE_MS = 300;
 /** Longest a draw waits for shaders to build: a browser that never says they are ready still draws. */
 const COMPILE_MS = 4000;
 const VIEW_MS = 700;
@@ -190,8 +192,7 @@ export class RocketViewer {
         this.canvas.style.touchAction = "pan-y";
         this.controls.addEventListener("start", () => this.touched());
         this.controls.addEventListener("change", () => this.wake());
-        this.canvas.addEventListener("focus", () => (this.controls.enableZoom = true));
-        this.canvas.addEventListener("blur", () => (this.controls.enableZoom = false));
+        this.canvas.addEventListener("wheel", this.onWheel, { passive: false });
         this.canvas.addEventListener("pointerdown", () => this.canvas.focus({ preventScroll: true }));
         this.canvas.addEventListener("dblclick", () => {
             if (!this.driven)
@@ -205,7 +206,7 @@ export class RocketViewer {
     }
     homeAngle = { az: 32, el: 9 };
     setLabel(label) {
-        this.canvas.setAttribute("aria-label", `3D view of ${label}. Drag or use the arrow keys to turn it; double-click or Home puts it back.`);
+        this.canvas.setAttribute("aria-label", `3D view of ${label}. Drag or use the arrow keys to turn it and the wheel to zoom; double-click or Home puts it back.`);
     }
     /** Loads a rocket and shows it. The camera's angle stays when a rocket is already showing. */
     async load(built, show, look, angle) {
@@ -954,6 +955,7 @@ export class RocketViewer {
         this.disposed = true;
         cancelAnimationFrame(this.frame);
         document.removeEventListener("visibilitychange", this.onVisibility);
+        this.canvas.removeEventListener("wheel", this.onWheel);
         this.resize.disconnect();
         this.controls.dispose();
         this.disposeParts();
@@ -1121,6 +1123,7 @@ export class RocketViewer {
             this.canvas.dataset.azimuth = angle.az.toFixed(2);
             this.canvas.dataset.elevation = angle.el.toFixed(2);
             this.canvas.dataset.moving = this.pose ? "true" : "false";
+            this.canvas.dataset.distance = this.camera.position.distanceTo(this.controls.target).toFixed(2);
             if (this.driven) {
                 this.canvas.dataset.zoom = this.driven.zoom.toFixed(2);
                 this.canvas.dataset.pan = `${Math.round(this.driven.panX)},${Math.round(this.driven.panY)}`;
@@ -1180,6 +1183,29 @@ export class RocketViewer {
         move();
         this.wake();
     }
+    /** The wheel over the view zooms it, as does a pinch (Ctrl or Command and the wheel). A wheel that starts with the zoom already at its end, or a sideways swipe, leaves the page to scroll. */
+    onWheel = (event) => {
+        if (this.driven)
+            return;
+        const pinch = event.ctrlKey || event.metaKey;
+        if (!pinch && (event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY)))
+            return;
+        const pixels = event.deltaMode === 1 ? event.deltaY * (pinch ? 5 : 33) : event.deltaMode === 2 ? event.deltaY * 800 : event.deltaY;
+        const factor = pinch ? Math.exp(-pixels * 0.01) : MathUtils.clamp(Math.exp(-pixels * 0.002), 0.5, 2);
+        const length = this.camera.position.distanceTo(this.controls.target);
+        const atEnd = factor >= 1 ? length <= this.controls.minDistance * 1.0001 : length >= this.controls.maxDistance * 0.9999;
+        const now = Number.isFinite(event.timeStamp) ? event.timeStamp : 0;
+        if (!pinch && atEnd && !(now >= this.wheelTaken && now - this.wheelTaken < WHEEL_GESTURE_MS))
+            return;
+        event.preventDefault();
+        this.wheelTaken = now;
+        if (atEnd)
+            return;
+        this.touched();
+        this.zoom(1 / factor);
+        this.wake();
+    };
+    wheelTaken = Number.NEGATIVE_INFINITY;
     zoom(factor) {
         const offset = this.camera.position.clone().sub(this.controls.target);
         const length = MathUtils.clamp(offset.length() * factor, this.controls.minDistance, this.controls.maxDistance);

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.7.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",