@johnmorrisdotca/uchusen-rockets 0.8.0 → 0.10.0

package/dist/element/scene.js

@@ -1,7 +1,7 @@
 // The 3D view (three.js, MIT), loaded only when the element comes on screen. One canvas with one rocket, drawn three ways: the line drawing, the thick lines, and painted with true materials. Switching look
 // changes materials and never the camera, so the angle stays. Moving between together, apart and one part alone is an animated move of each part, and under reduced motion it is a cut. It draws only while
 // something moves, never while out of view or the tab is hidden, and settles after a while with no one touching it.
-import { ACESFilmicToneMapping, BackSide, CanvasTexture, Color, DirectionalLight, DoubleSide, Group, HemisphereLight, LineSegments, LinearMipmapLinearFilter, MathUtils, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PlaneGeometry, PMREMGenerator, RepeatWrapping, Scene, ShaderMaterial, SphereGeometry, Spherical, SRGBColorSpace, Timer, Vector2, Vector3, WebGLRenderer, } from "three";
+import { ACESFilmicToneMapping, BackSide, CanvasTexture, Color, DirectionalLight, DoubleSide, Group, HemisphereLight, LineSegments, LinearMipmapLinearFilter, MathUtils, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PlaneGeometry, PCFSoftShadowMap, PMREMGenerator, RepeatWrapping, Scene, ShaderMaterial, SphereGeometry, Spherical, SRGBColorSpace, Timer, Vector2, Vector3, WebGLRenderer, } from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { LineMaterial } from "three/addons/lines/LineMaterial.js";
 import { LineSegments2 } from "three/addons/lines/LineSegments2.js";
@@ -97,6 +97,9 @@ export class RocketViewer {
     built = null;
     look = "line";
     show = "together";
+    sun;
+    /** The fleet is lit with a shadow: its ships are big enough for one part to fall on another. A rocket is not, so it keeps the one light it has. */
+    shadows = false;
     plumes;
     lit = null;
     /** What was lit before a flight took over the engines. */
@@ -113,6 +116,9 @@ export class RocketViewer {
     burnSlots = null;
     generation = 0;
     materialCache = new Map();
+    /** The materials that glow when the engines are lit, and whether they do now. */
+    glowing = new Map();
+    glowOn = false;
     outlineMaterial;
     textures = [];
     steelMap = null;
@@ -134,6 +140,11 @@ export class RocketViewer {
     compiling = 0;
     compiled = new Set();
     settled = Promise.resolve();
+    marks = [];
+    markHost = null;
+    focusing = false;
+    nearSaid = false;
+    nearAt = 0;
     constructor(holder, options) {
         this.holder = holder;
         this.options = options;
@@ -141,6 +152,7 @@ export class RocketViewer {
         this.renderer.outputColorSpace = SRGBColorSpace;
         this.renderer.toneMapping = ACESFilmicToneMapping;
         this.renderer.toneMappingExposure = 1;
+        this.renderer.shadowMap.type = PCFSoftShadowMap;
         this.canvas = this.renderer.domElement;
         this.canvas.className = "canvas";
         this.canvas.setAttribute("part", "canvas");
@@ -169,12 +181,13 @@ export class RocketViewer {
         this.scene.environmentIntensity = 0.95;
         const key = new DirectionalLight("#fff6e6", 1.6);
         key.position.set(3, 5, 4);
+        this.sun = key;
         const rim = new DirectionalLight("#cfe2ff", 1.1);
         rim.position.set(-4, 1, -5);
         const low = new DirectionalLight("#ffffff", 0.35);
         low.position.set(1, -4, 2);
         this.plumes = new PlumeKit();
-        this.scene.add(key, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.plumes.light, this.root);
+        this.scene.add(key, key.target, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.plumes.light, this.root);
         this.outlineMaterial = new ShaderMaterial({
             vertexShader: OUTLINE_VERTEX,
             fragmentShader: OUTLINE_FRAGMENT,
@@ -220,6 +233,9 @@ export class RocketViewer {
         this.parts = [];
         this.built = built;
         this.show = show;
+        this.shadows = built.parts.some((part) => part.record.rocket.startsWith("fleet-"));
+        this.renderer.shadowMap.enabled = this.shadows;
+        this.sun.castShadow = this.shadows;
         const places = built.placesOf(show);
         for (const part of built.parts) {
             const source = gltf.scene.getObjectByName(part.slot);
@@ -267,6 +283,7 @@ export class RocketViewer {
             this.parts.push(view);
         }
         this.addGlow();
+        this.fitShadow();
         this.setLook(look);
         this.frameTo(angle ?? this.currentAngle(), false);
         if (this.clockNow) {
@@ -305,6 +322,8 @@ export class RocketViewer {
                 const mesh = new Mesh(node.geometry);
                 const name = node.material.name;
                 mesh.name = name;
+                mesh.castShadow = this.shadows && !(name in MATERIALS && "opacity" in MATERIALS[name]);
+                mesh.receiveShadow = this.shadows;
                 carrier.add(mesh);
                 view.faces.push({ mesh, name, hasUv: Boolean(node.geometry.getAttribute("uv")) });
                 const outline = new Mesh(node.geometry, this.outlineMaterial);
@@ -378,6 +397,16 @@ export class RocketViewer {
             made.color.set("#ffffff");
         }
         this.dullTile(made, name);
+        if (spec.opacity !== undefined) {
+            made.transparent = true;
+            made.opacity = spec.opacity;
+            made.depthWrite = false;
+        }
+        if (spec.glow) {
+            made.emissive.set(spec.glowColor ?? spec.color);
+            made.emissiveIntensity = this.glowOn ? spec.glow : 0;
+            this.glowing.set(made, spec.glow);
+        }
         this.materialCache.set(key, made);
         return made;
     }
@@ -516,6 +545,9 @@ export class RocketViewer {
                 lowest = { view, y: fired[0].y - 1 };
         }
         this.burningNow = burning;
+        this.glowOn = this.lit === "full" || burning > 0;
+        for (const [material, strength] of this.glowing)
+            material.emissiveIntensity = this.glowOn ? strength : 0;
         this.burnSlots = lowest;
         this.plumes.setBurning(burning);
         this.plumes.light.intensity = burning === 0 || this.look !== "painted" ? 0 : Math.min(900, 120 + burning * 40);
@@ -735,11 +767,35 @@ export class RocketViewer {
         part.nozzleShown = nozzle;
         this.canvas.dataset.nozzle = this.parts.some((one) => one.nozzleShown) ? "own" : "";
     }
+    /** The key light looks at the middle of what shows, from far enough to take in all of it, and its shadow map covers just that. */
+    fitShadow() {
+        if (!this.shadows || !this.built)
+            return;
+        const { min, max } = this.built.boundsOf(this.show);
+        const centre = new Vector3((min[0] + max[0]) / 2, (min[1] + max[1]) / 2, (min[2] + max[2]) / 2);
+        const radius = Math.max(1, Math.hypot(max[0] - min[0], max[1] - min[1], max[2] - min[2]) / 2);
+        const direction = new Vector3(3, 5, 4).normalize();
+        this.sun.position.copy(centre).addScaledVector(direction, radius * 2);
+        this.sun.target.position.copy(centre);
+        const shadow = this.sun.shadow;
+        shadow.mapSize.set(2048, 2048);
+        shadow.camera.left = -radius;
+        shadow.camera.right = radius;
+        shadow.camera.top = radius;
+        shadow.camera.bottom = -radius;
+        shadow.camera.near = radius * 0.5;
+        shadow.camera.far = radius * 4;
+        shadow.bias = -0.0004;
+        shadow.normalBias = radius * 0.0006;
+        shadow.camera.updateProjectionMatrix();
+        this.sun.target.updateMatrixWorld();
+    }
     /** Together, apart, or one part alone: an animated move, or a cut under reduced motion. */
     setShow(show) {
         if (!this.built || show === this.show || this.clockNow)
             return;
         this.show = show;
+        this.fitShadow();
         for (const part of this.parts)
             if (part.model)
                 this.showCode(part, this.look === "painted");
@@ -798,6 +854,8 @@ export class RocketViewer {
         this.controls.update();
     }
     limits(distance) {
+        if (!this.focusing)
+            this.nearAt = Math.max(this.nearAt, distance * 0.3);
         this.fitGlow();
         this.camera.near = Math.max(0.2, distance / 40);
         this.camera.far = distance * 8;
@@ -840,6 +898,13 @@ export class RocketViewer {
             this.limits(this.framingFor(this.currentAngle()).distance);
     }
     /** Where the camera is looking from. */
+    /** Where a point of what shows, in metres, falls on the canvas in CSS pixels, and whether it is in front of the camera and inside the picture. A label that follows a part asks for it each time the view is drawn. */
+    screenPoint(point) {
+        this.camera.updateMatrixWorld();
+        const p = new Vector3(point[0], point[1], point[2]).project(this.camera);
+        const box = this.canvas.getBoundingClientRect();
+        return { x: (p.x * 0.5 + 0.5) * box.width, y: (-p.y * 0.5 + 0.5) * box.height, visible: p.z < 1 && Math.abs(p.x) <= 1 && Math.abs(p.y) <= 1 };
+    }
     currentAngle() {
         const offset = this.camera.position.clone().sub(this.controls.target);
         if (offset.lengthSq() === 0)
@@ -1035,6 +1100,106 @@ export class RocketViewer {
         if (!this.frame && this.visible && !document.hidden && !this.disposed)
             this.frame = requestAnimationFrame(this.tick);
     }
+    /** Labels on the parts: each follows its part as the model turns, hides with its part, and gives way to a label drawn before it that it would cover. Null takes them away. */
+    setMarks(marks) {
+        for (const { el } of this.marks)
+            el.remove();
+        this.marks = [];
+        if (!marks || marks.length === 0) {
+            this.markHost?.remove();
+            this.markHost = null;
+            return;
+        }
+        if (!this.markHost) {
+            const host = document.createElement("div");
+            host.className = "marks";
+            host.setAttribute("aria-hidden", "true");
+            host.style.cssText = "position:absolute;inset:0;overflow:hidden;pointer-events:none;font:11px/1.2 system-ui,sans-serif";
+            this.holder.appendChild(host);
+            this.markHost = host;
+        }
+        for (const mark of marks) {
+            const el = document.createElement("span");
+            el.dataset.mark = mark.id;
+            el.textContent = mark.text;
+            el.style.cssText = mark.numbered
+                ? "position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#f2c14e;color:#0b111b;font-weight:700;text-align:center;line-height:22px;will-change:transform;display:none"
+                : "position:absolute;left:0;top:0;padding:1px 5px;border-left:2px solid #f2c14e;color:#e6edf6;background:rgba(11,17,27,0.72);white-space:nowrap;will-change:transform;display:none";
+            this.markHost.appendChild(el);
+            this.marks.push({ mark, el });
+        }
+        this.wake();
+    }
+    /** Put the labels where their parts are now. */
+    placeMarks() {
+        if (this.marks.length === 0)
+            return;
+        const width = this.canvas.clientWidth;
+        const height = this.canvas.clientHeight;
+        const taken = [];
+        const world = new Vector3();
+        for (const { mark, el } of this.marks) {
+            const part = this.parts.find((p) => p.slot === mark.slot);
+            if (part && !part.holder.visible) {
+                el.style.display = "none";
+                continue;
+            }
+            world.set(...mark.at);
+            if (part && mark.rest)
+                world.add(new Vector3(part.holder.position.x - mark.rest[0], part.holder.position.y - mark.rest[1], part.holder.position.z - mark.rest[2]));
+            world.project(this.camera);
+            const x = ((world.x + 1) / 2) * width;
+            const y = ((1 - world.y) / 2) * height;
+            const w = mark.numbered ? 22 : mark.text.length * 6.2 + 12;
+            const h = mark.numbered ? 22 : 16;
+            const ok = world.z < 1 && x > -w && x < width + w && y > -h && y < height + h && !taken.some((r) => Math.abs(r.x - x) < (r.w + w) / 2 && Math.abs(r.y - y) < (r.h + h) / 2);
+            if (!ok) {
+                el.style.display = "none";
+                continue;
+            }
+            taken.push({ x, y, w, h });
+            el.style.display = "block";
+            el.style.transform = `translate(${Math.round(x + (mark.numbered ? 0 : 6))}px,${Math.round(y - (mark.numbered ? 0 : 8))}px)`;
+        }
+    }
+    /** Show only some slots and fly to look at them: an inset. Null puts the ship back as it was. */
+    focusOn(focus) {
+        if (!this.built || this.clockNow)
+            return;
+        if (!focus) {
+            if (!this.focusing)
+                return;
+            this.focusing = false;
+            const places = this.built.placesOf(this.show);
+            for (const part of this.parts) {
+                const place = places.find((p) => p.slot === part.slot);
+                if (place) {
+                    part.holder.position.set(...place.at);
+                    part.holder.visible = place.shown;
+                }
+            }
+            this.startPose(this.framingFor(this.currentAngle()), MOVE_MS, false);
+            this.relight();
+            return;
+        }
+        this.focusing = true;
+        const places = this.built.placesOf("together");
+        for (const part of this.parts) {
+            const place = places.find((p) => p.slot === part.slot);
+            if (place)
+                part.holder.position.set(...place.at);
+            part.holder.visible = focus.slots.includes(part.slot);
+        }
+        const dir = new Vector3(...focus.direction).normalize().multiplyScalar(focus.distance);
+        this.startPose({ target: focus.target, position: [focus.target[0] + dir.x, focus.target[1] + dir.y, focus.target[2] + dir.z], distance: focus.distance }, MOVE_MS, false);
+        this.controls.minDistance = focus.distance * 0.04;
+        this.controls.maxDistance = Math.max(focus.distance * 3, this.camera.position.distanceTo(this.controls.target));
+        this.camera.near = Math.max(0.2, focus.distance / 80);
+        this.camera.far = Math.max(focus.distance * 10, this.camera.position.distanceTo(this.controls.target) * 4);
+        this.camera.updateProjectionMatrix();
+        this.relight();
+        this.wake();
+    }
     tick = (now) => {
         this.frame = 0;
         if (!this.visible || document.hidden || this.disposed)
@@ -1116,9 +1281,15 @@ export class RocketViewer {
         if (this.needsDraw || changed || this.pose) {
             this.syncSizes();
             this.renderer.render(this.scene, this.camera);
+            this.placeMarks();
+            if (this.options.onNear && !this.nearSaid && this.nearAt > 0 && this.camera.position.distanceTo(this.controls.target) < this.nearAt) {
+                this.nearSaid = true;
+                this.options.onNear();
+            }
             this.needsDraw = false;
             this.frames++;
             this.canvas.dataset.frames = String(this.frames);
+            this.options.onDraw?.();
             const angle = this.currentAngle();
             this.canvas.dataset.azimuth = angle.az.toFixed(2);
             this.canvas.dataset.elevation = angle.el.toFixed(2);

package/dist/element.d.ts

@@ -82,6 +82,18 @@ export declare class UchusenRocket extends HTMLBase {
     set description(value: Description | null);
     /** Where the camera is looking from, while there is a 3D view. */
     get angle(): Angle | null;
+    /**
+     * Where a point of the model, in metres, is on the picture now: in CSS pixels from the element's top left, and whether it is in front and inside. A page's label that follows a part calls it each time the element
+     * says `uchusen-draw`, so the label moves as the model turns and stands still when it does not. Without a 3D view it gives null.
+     *
+     * @param point A point of the model in metres, as `labelsOf` gives them.
+     * @returns The place on the picture, or null.
+     */
+    screenPoint(point: readonly [number, number, number]): {
+        x: number;
+        y: number;
+        visible: boolean;
+    } | null;
     /** Lets a page choose the turn, tip, zoom and pan, as the family's `<kazoku-view-controls>` reports them in `kazoku-viewchange` (`element.drive(event.detail)`): the element's own drag, wheel, keys and spin stand down, and the 3D view and the drawing both follow. `null` takes them back. */
     drive(choice: Partial<ViewChoice> | null): void;
     /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. It is drawn at most about 20 times a second and never while out of sight: it is made again when it comes back. */
@@ -144,6 +156,16 @@ export declare class UchusenRocket extends HTMLBase {
     private redraw;
     private mark;
     private applyRocket;
+    /** A fleet ship is built coarse first (the first picture and the far view) and fine when the camera comes near, an inset opens or one part is shown alone: once per visit, never on a turn or a look change. */
+    private fine;
+    private detailFor;
+    private upgrade;
+    private panel;
+    private panelFor;
+    /** The panel of a ship that has one: tabs, a Labels toggle and insets that open on a click. `inspector="off"` leaves it out; `labels="on"` starts with the labels showing. */
+    private syncPanel;
+    /** Saves the model on screen as a .glb: the whole ship, or the one part shown alone. It is made here, in the browser, from the same parts, because a fleet ship's file is far too big to ship. */
+    private downloadModel;
     private lastView;
     private applySettings;
     private startWatching;

package/dist/element.js

@@ -1,7 +1,7 @@
 // The viewer: `<uchusen-rocket rocket="starship" variant="v3" show="together" look="line">` in any page. The drawing first, then, when it comes on screen and the browser can draw WebGL, the 3D view
 // crossfading in over it; drag to turn, keyboard, tilt on phones, a slow spin, reduced motion; the drawing stays on no WebGL, Save-Data or any failure. Importing this file defines the elements. three.js is
 // loaded only when a 3D view is wanted, and a licensed model only when the painted look asks for one.
-import { build, FitError } from "./build/index.js";
+import { build, buildPart, FitError } from "./build/index.js";
 import { bellsOf, enginesWanted, pickBells } from "./engines.js";
 import { engineChart } from "./draw/plume.js";
 import { burnsOf, FlightClock, flightOf, frameAt, phaseAt, phasePosition } from "./flight.js";
@@ -13,6 +13,7 @@ import { cleanShow } from "./layout.js";
 import { cleanLook } from "./looks.js";
 import { ROCKETS, SLOT_NAMES } from "./rockets.js";
 import { tiltMode, tiltTurn } from "./tilt.js";
+import { Panel } from "./element/panel.js";
 import { spinOf } from "./spin.js";
 const HTMLBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
@@ -49,6 +50,17 @@ const CSS = `
 .canvas:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
 .picture[data-state="3d"] .drawing { opacity: 0; filter: blur(2px); }
 .picture[data-state="3d"] .canvas { opacity: 1; filter: none; }
+.panel { font: 0.85rem/1.4 system-ui, sans-serif; margin-top: 0.5rem; }
+.panel .bar { display: flex; flex-wrap: wrap; gap: 0.35rem; }
+.panel button { min-height: 2rem; padding: 0.2rem 0.7rem; border: 1px solid currentColor; border-radius: 1rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.panel button[aria-selected="true"], .panel button[aria-pressed="true"] { background: color-mix(in srgb, currentColor 22%, transparent); box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
+.panel button:disabled { opacity: 0.5; cursor: default; }
+.panel .body { margin-top: 0.5rem; max-height: 14rem; overflow: auto; }
+.panel .body button { margin: 0 0.35rem 0.35rem 0; }
+.panel td button.link { margin: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; text-decoration: underline; text-align: left; }
+.panel table { border-collapse: collapse; width: 100%; }
+.panel th, .panel td { text-align: left; padding: 0.15rem 0.4rem; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); vertical-align: top; }
+.panel p { margin: 0 0 0.5rem; }
 .tilt { position: absolute; right: 0.5rem; bottom: 0.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; border: 1px solid currentColor; border-radius: 1rem; background: transparent; color: inherit; font: inherit; font-size: 0.8rem; cursor: pointer; }
 @media (prefers-reduced-motion: reduce) {
   .drawing, .canvas { filter: none !important; transition: opacity var(--uchusen-fade, 400ms) ease; }
@@ -111,7 +123,7 @@ function whyNot(mode) {
  * ```
  */
 export class UchusenRocket extends HTMLBase {
-    static observedAttributes = ["rocket", "variant", "show", "look", "view", "build", "mode", "assets", "spin", "way", "label", "engines", "phase"];
+    static observedAttributes = ["rocket", "variant", "show", "look", "view", "build", "mode", "assets", "spin", "way", "label", "engines", "phase", "labels", "inspector"];
     descriptionValue = null;
     picture = null;
     holder = null;
@@ -161,6 +173,16 @@ export class UchusenRocket extends HTMLBase {
     get angle() {
         return this.viewer?.currentAngle() ?? null;
     }
+    /**
+     * Where a point of the model, in metres, is on the picture now: in CSS pixels from the element's top left, and whether it is in front and inside. A page's label that follows a part calls it each time the element
+     * says `uchusen-draw`, so the label moves as the model turns and stands still when it does not. Without a 3D view it gives null.
+     *
+     * @param point A point of the model in metres, as `labelsOf` gives them.
+     * @returns The place on the picture, or null.
+     */
+    screenPoint(point) {
+        return this.viewer?.screenPoint([point[0], point[1], point[2]]) ?? null;
+    }
     /** Lets a page choose the turn, tip, zoom and pan, as the family's `<kazoku-view-controls>` reports them in `kazoku-viewchange` (`element.drive(event.detail)`): the element's own drag, wheel, keys and spin stand down, and the 3D view and the drawing both follow. `null` takes them back. */
     drive(choice) {
         const before = this.driven;
@@ -232,6 +254,8 @@ export class UchusenRocket extends HTMLBase {
             return;
         if (name === "spin" || name === "way")
             this.viewer?.setSpin(this.spin());
+        else if (name === "labels" || name === "inspector")
+            this.syncPanel();
         else {
             // choosing what to show leaves the flight
             if (name === "show")
@@ -431,7 +455,7 @@ export class UchusenRocket extends HTMLBase {
         if (key !== this.key || !this.builtNow) {
             this.key = key;
             try {
-                this.builtNow = build(description);
+                this.builtNow = build(description, { detail: this.detailFor(description) });
             }
             catch (error) {
                 this.builtNow = null;
@@ -563,6 +587,82 @@ export class UchusenRocket extends HTMLBase {
             }
             this.emit("uchusen-change", { report: this.builtNow.report });
         }
+        this.syncPanel();
+        this.panel?.refresh();
+    }
+    /** A fleet ship is built coarse first (the first picture and the far view) and fine when the camera comes near, an inset opens or one part is shown alone: once per visit, never on a turn or a look change. */
+    fine = false;
+    detailFor(description) {
+        const fictional = ROCKETS[description.rocket]?.variants.some((v) => v.status === "fictional");
+        return fictional && !this.fine ? "coarse" : "full";
+    }
+    async upgrade() {
+        if (this.fine || !this.builtNow)
+            return;
+        const description = this.descriptionNow();
+        if (this.detailFor(description) === "full")
+            return;
+        this.fine = true;
+        try {
+            this.builtNow = build(description, { detail: "full" });
+        }
+        catch {
+            return;
+        }
+        await this.applyRocket();
+    }
+    panel = null;
+    panelFor = null;
+    /** The panel of a ship that has one: tabs, a Labels toggle and insets that open on a click. `inspector="off"` leaves it out; `labels="on"` starts with the labels showing. */
+    syncPanel() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const inspector = this.builtNow?.report.variant?.inspector ?? null;
+        if (!inspector || this.getAttribute("inspector") === "off") {
+            this.panel?.el.remove();
+            this.panel = null;
+            this.panelFor = null;
+            this.viewer?.setMarks(null);
+            return;
+        }
+        if (this.panelFor !== inspector || !this.panel || !this.panel.el.isConnected) {
+            this.panel?.el.remove();
+            this.panel = new Panel(inspector, {
+                marks: (marks) => this.viewer?.setMarks(marks),
+                focus: (focus) => {
+                    void (focus ? this.upgrade() : Promise.resolve()).then(() => this.viewer?.focusOn(focus));
+                },
+                drawn: () => Boolean(this.viewer),
+                onLabels: (on) => (on ? this.setAttribute("labels", "on") : this.removeAttribute("labels")),
+                download: () => this.downloadModel(),
+                go: (rocket, variant) => {
+                    this.setAttribute("rocket", rocket);
+                    this.setAttribute("variant", variant);
+                },
+            });
+            root.appendChild(this.panel.el);
+            this.panelFor = inspector;
+        }
+        this.panel.labels(this.getAttribute("labels") === "on");
+    }
+    /** Saves the model on screen as a .glb: the whole ship, or the one part shown alone. It is made here, in the browser, from the same parts, because a fleet ship's file is far too big to ship. */
+    downloadModel() {
+        if (!this.builtNow)
+            return;
+        // always the full detail, whatever level is on screen
+        const built = build(this.descriptionNow(), { detail: "full" });
+        const { show } = this.settings(built);
+        const part = built.parts.find((p) => p.slot === show);
+        const glb = part ? buildPart(part.record.id).glb() : built.glb();
+        const bytes = glb.bytes;
+        const blob = new Blob([bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength)], { type: "model/gltf-binary" });
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = `${built.report.variant?.rocket ?? "rocket"}-${built.report.variant?.id ?? "model"}${part ? `-${part.slot}` : ""}.glb`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(link.href), 4000);
+        this.emit("uchusen-download", { triangles: glb.triangles, bytes: bytes.byteLength });
     }
     lastView = "";
     applySettings() {
@@ -570,6 +670,8 @@ export class UchusenRocket extends HTMLBase {
             return;
         this.mark();
         const { look, show, viewName, angle } = this.settings(this.builtNow);
+        if (show !== "together" && show !== "apart")
+            void this.upgrade();
         if (this.viewer) {
             this.viewer.setLook(look);
             this.viewer.setShow(show);
@@ -655,6 +757,7 @@ export class UchusenRocket extends HTMLBase {
                 label: this.getAttribute("label") ?? built.report.label,
                 reducedMotion: reduced,
                 onLost: () => this.fallBack("context-lost"),
+                onNear: () => void this.upgrade(),
                 assets: assets ? `${assets.replace(/\/$/, "")}/` : defaultBase(),
                 onPainted: (state) => {
                     this.dataset.painted = state;
@@ -662,6 +765,7 @@ export class UchusenRocket extends HTMLBase {
                         this.emit("uchusen-painted", { state });
                 },
                 onFlight: () => this.noteFlight(!this.clock?.playing),
+                onDraw: () => this.dispatchEvent(new CustomEvent("uchusen-draw")),
             });
             this.viewer = made;
             window.cancelAnimationFrame(this.flightFrame);
@@ -767,7 +871,7 @@ svg { display: block; }
  * ```
  */
 export class UchusenLineup extends HTMLBase {
-    static observedAttributes = ["items", "unit", "look", "view", "show", "ruler", "labels"];
+    static observedAttributes = ["items", "unit", "look", "view", "show", "ruler", "labels", "filter", "fit"];
     connectedCallback() {
         if (!this.shadowRoot)
             adopt(this.attachShadow({ mode: "open" }), LINEUP_CSS, lineupSheet);
@@ -784,7 +888,7 @@ export class UchusenLineup extends HTMLBase {
         const raw = Number.parseFloat(this.getAttribute("unit") ?? "3");
         const unit = Number.isFinite(raw) && raw > 0 && raw <= 100 ? raw : 3;
         const items = (this.getAttribute("items") ?? "").split(",").map((item) => item.trim()).filter(Boolean);
-        const { svg, items: shown } = lineupSvg({
+        const { svg, items: shown, unit: drawnUnit } = lineupSvg({
             items,
             unit,
             look: cleanLook(this.getAttribute("look")),
@@ -792,7 +896,10 @@ export class UchusenLineup extends HTMLBase {
             show: this.getAttribute("show") ?? undefined,
             ruler: this.hasAttribute("ruler"),
             labels: this.hasAttribute("labels"),
+            filter: ((value) => (value === "rockets" || value === "fleet" ? value : "all"))(this.getAttribute("filter")),
+            ...((room) => (room.length === 2 && room.every((v) => Number.isFinite(v) && v > 0) ? { fit: { width: room[0], height: room[1] } } : {}))((this.getAttribute("fit") ?? "").split(",").map(Number)),
         });
+        this.dataset.unit = String(Math.round(drawnUnit * 100) / 100);
         const template = document.createElement("template");
         template.innerHTML = svg;
         const node = template.content.firstElementChild;

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/dist/index.d.ts

@@ -42,3 +42,17 @@ export { OPTION_ATTRIBUTES, attributesFromOptions, optionsFromAttributes, rocket
 export type { RocketOptions } from "./attrs.ts";
 export { assetPathOf, CDN, EMBED_KINDS, SITE, THREE_VERSION, embedCode, embedNote, paintedCredit } from "./embed.ts";
 export type { EmbedKind, EmbedSettings } from "./embed.ts";
+export { assemble, BUILDERS, BUILD_BUDGET_MS, COLLAR_CLASSES, COLLARS, designation, FLEET_MAKER, INSETS, isCoarse, KIT, LIVERY, mates, ROOMS, SAMPLE_SHIPS, shipLevels, shipParts, shipPieces, swapsFor, timeBuild } from "./model/fleet/kit.ts";
+export type { Assembly, BuildTime, CollarClass, CollarSpec, Inset, InsetPart, KitModule, Livery, LiveryName, ModuleKind, ModuleOptions, Placed, Port, RoomKind, RoomSpec, SeparationOptions, ShipIssue, ShipList, ShipParts, ShipPlace } from "./model/fleet/kit.ts";
+export { ENGINE_CARDS, engineTable, G0, performanceOf, PROXIMA_LY, rocketSpeed, trip } from "./model/fleet/engines.ts";
+export type { EngineCard, EngineRole, EngineRow, Performance, Trip } from "./model/fleet/engines.ts";
+export { HULL_STACKS, stackDepth } from "./model/fleet/layers.ts";
+export type { HullLayer, HullStack, HullStackName } from "./model/fleet/layers.ts";
+export { SECTIONS } from "./model/fleet/sections.ts";
+export type { Section, SectionRole } from "./model/fleet/sections.ts";
+export { arrangement, deckSummary, exploded, labelDensity, labelsOf, LEGEND, scaleBar, specBlock, titleBlock } from "./model/fleet/sheet.ts";
+export type { Arrangement, Deck, ExplodedModule, Label, LegendSymbol, ScaleBar, SpecLine, TitleBlock } from "./model/fleet/sheet.ts";
+export { FLEET_PALETTE } from "./model/fleet/palette.ts";
+export type { FleetColour } from "./model/fleet/palette.ts";
+export { FLEET_OPERATOR, GLOSSARY } from "./model/fleet/glossary.ts";
+export type { GlossaryCode } from "./model/fleet/glossary.ts";

package/dist/index.js

@@ -23,3 +23,10 @@ export { burnsOf, clockWords, FlightClock, flightOf, frameAt, lastPosition, phas
 export { bellsOf, enginesWanted, FLAME_SETTLE_MS, pickBells, plumeLength, ringsOf } from "./engines.js";
 export { OPTION_ATTRIBUTES, attributesFromOptions, optionsFromAttributes, rocketFromParams, rocketToParams } from "./attrs.js";
 export { assetPathOf, CDN, EMBED_KINDS, SITE, THREE_VERSION, embedCode, embedNote, paintedCredit } from "./embed.js";
+export { assemble, BUILDERS, BUILD_BUDGET_MS, COLLAR_CLASSES, COLLARS, designation, FLEET_MAKER, INSETS, isCoarse, KIT, LIVERY, mates, ROOMS, SAMPLE_SHIPS, shipLevels, shipParts, shipPieces, swapsFor, timeBuild } from "./model/fleet/kit.js";
+export { ENGINE_CARDS, engineTable, G0, performanceOf, PROXIMA_LY, rocketSpeed, trip } from "./model/fleet/engines.js";
+export { HULL_STACKS, stackDepth } from "./model/fleet/layers.js";
+export { SECTIONS } from "./model/fleet/sections.js";
+export { arrangement, deckSummary, exploded, labelDensity, labelsOf, LEGEND, scaleBar, specBlock, titleBlock } from "./model/fleet/sheet.js";
+export { FLEET_PALETTE } from "./model/fleet/palette.js";
+export { FLEET_OPERATOR, GLOSSARY } from "./model/fleet/glossary.js";

package/dist/model/detail.d.ts

@@ -0,0 +1,10 @@
+import type { Piece } from "./pieces.ts";
+export type DetailLevel = "full" | "coarse";
+/** The level in force while a part's pieces are being made. Set by `build`, never by hand. */
+export declare const detail: {
+    level: DetailLevel;
+};
+/** The smallest a 3D-only piece may be, in metres, and stay in the coarse level. */
+export declare const COARSE_MIN = 6;
+/** The coarse level of a part: what is drawn in the line drawings stays, and so does any 3D piece over `COARSE_MIN` metres; the small detail goes. */
+export declare const coarsen: (pieces: readonly Piece[]) => Piece[];

package/dist/model/detail.js

@@ -0,0 +1,19 @@
+/** The level in force while a part's pieces are being made. Set by `build`, never by hand. */
+export const detail = { level: "full" };
+/** The smallest a 3D-only piece may be, in metres, and stay in the coarse level. */
+export const COARSE_MIN = 6;
+const sizeOf = (piece) => {
+    if (piece.kind === "plate") {
+        const us = piece.outline.map(([a]) => a);
+        const vs = piece.outline.map(([, b]) => b);
+        return Math.max(Math.max(...us) - Math.min(...us), Math.max(...vs) - Math.min(...vs), piece.thickness);
+    }
+    if (piece.kind === "lathe") {
+        const rs = piece.profile.map(([r]) => r);
+        const ys = piece.profile.map(([, y]) => y);
+        return Math.max(Math.max(...rs) - Math.min(...rs), Math.max(...ys) - Math.min(...ys));
+    }
+    return Infinity;
+};
+/** The coarse level of a part: what is drawn in the line drawings stays, and so does any 3D piece over `COARSE_MIN` metres; the small detail goes. */
+export const coarsen = (pieces) => pieces.filter((piece) => piece.only !== "mesh" || piece.kind === "lines" || sizeOf(piece) >= COARSE_MIN);

package/dist/model/fleet/ancestors.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The real hardware each module descends from, by module id: what a reader can look up. The kit starts from real engineering and goes further where a ship needs it (bolder shapes, new materials, armour, scale,
+ * drives that do not exist yet); each module still looks engineered and has a job.
+ */
+export declare const ANCESTORS: Readonly<Record<string, string>>;