@johnmorrisdotca/uchusen-rockets 0.2.1 → 0.3.0

package/dist/fit.js

@@ -3,14 +3,15 @@
 import { MODEL_CREDITS } from "./data/credits.js";
 import { partEntry } from "./model/registry.js";
 import { partIdOf, ROCKETS, variantOf } from "./rockets.js";
-const TOLERANCE = 0.1;
+/** How far apart two joints may be in metres and still meet. */
+export const JOINT_TOLERANCE = 0.1;
 /** The whole height, joint to joint up the stack, and the widest part. */
 function sizeOf(parts) {
     let y = 0;
     let top = 0;
     for (const { part } of parts) {
         if (part.strapOn) {
-            top = Math.max(top, part.height);
+            top = Math.max(top, (part.strapOn.y ?? 0) + part.height);
             continue;
         }
         const base = y - (part.joints.bottom?.y ?? 0);
@@ -84,7 +85,7 @@ export function check(description) {
         }
         if (top.kind !== bottom.kind)
             fail("joint-kind", `${below.name} ends in a ${top.kind} joint and ${above.name} starts with a ${bottom.kind} joint.`);
-        if (Math.abs(top.diameter - bottom.diameter) > TOLERANCE)
+        if (Math.abs(top.diameter - bottom.diameter) > JOINT_TOLERANCE)
             fail("joint-diameter", `${below.name} is ${top.diameter} m across at the joint and ${above.name} is ${bottom.diameter} m.`);
     }
     if (custom)

package/dist/flight.d.ts

@@ -0,0 +1,67 @@
+import { type Flight, type FlightPhase } from "./data/flights.ts";
+import type { Figure } from "./data/types.ts";
+export type { Flight, FlightBurn, FlightPhase, PartPose } from "./data/flights.ts";
+/** Seconds a phase takes on the screen when the timeline plays: one flight in under a minute, whatever its real length. */
+export declare const SECONDS_PER_PHASE = 2.4;
+/** The flight for a rocket's variant, when a page gives one. */
+export declare const flightOf: (rocket: string, variant: string | undefined) => Flight | null;
+/** The last place on the timeline: the last phase. */
+export declare const lastPosition: (flight: Flight) => number;
+/** Which phase a place on the timeline is in, and how far along to the next. A value that is not a number is the start. */
+export declare function phaseAt(flight: Flight, position: number): {
+    index: number;
+    along: number;
+    phase: FlightPhase;
+};
+/** The place on the timeline of a phase by its id, or null for one the flight does not have. */
+export declare function phasePosition(flight: Flight, id: string | null | undefined): number | null;
+/** How many engines of each part burn in a phase, as drawn: a blank figure draws its `drawn`. */
+export declare function burnsOf(phase: FlightPhase): Record<string, number>;
+export interface PoseNow {
+    dx: number;
+    dy: number;
+    pitch: number;
+    gone: boolean;
+}
+export interface FlightFrame {
+    index: number;
+    phase: FlightPhase;
+    poses: Readonly<Record<string, PoseNow>>;
+    burns: Readonly<Record<string, number>>;
+    /** Metres. */
+    groundY: number;
+    smoke: number;
+    air: number;
+    /** A part stands away from the stack. */
+    separated: boolean;
+}
+export interface FlightPart {
+    slot: string;
+    /** Where it stands in the stack: the base's height, metres. */
+    baseY: number;
+}
+/** Everything the picture needs at a place on the timeline, for a vehicle `height` metres tall. */
+export declare function frameAt(flight: Flight, position: number, parts: readonly FlightPart[], height: number): FlightFrame;
+/** How far a flight's picture reaches, so the camera can hold all of it: the widest and highest every part stands, from the stack's own bounds. */
+export declare function flightBounds(flight: Flight, parts: readonly (FlightPart & {
+    height: number;
+    radius: number;
+})[], height: number): {
+    min: [number, number, number];
+    max: [number, number, number];
+};
+/** The clock of one timeline: where it is and whether it runs. It only moves when told to, once a frame by whoever draws, so a timeline out of sight stands still. */
+export declare class FlightClock {
+    readonly flight: Flight;
+    position: number;
+    playing: boolean;
+    constructor(flight: Flight);
+    get ended(): boolean;
+    play(): void;
+    pause(): void;
+    seek(position: number): void;
+    /** Moves on by `seconds` of the screen's time, and stops at the end. */
+    advance(seconds: number): void;
+}
+/** A time as words: `T+2:35`, `T-0:03`, `T+1:05:20`. A blank says so. */
+export declare function clockWords(at: Figure): string;

package/dist/flight.js

@@ -0,0 +1,124 @@
+// A flight as a timeline: where the reader is along it, which engines burn there and how each part stands. The times and the counts are `src/data/flights.ts`, each with its page. Moving between the phases is a picture. Pure: no three.js and no DOM.
+import { FLIGHTS } from "./data/flights.js";
+/** Seconds a phase takes on the screen when the timeline plays: one flight in under a minute, whatever its real length. */
+export const SECONDS_PER_PHASE = 2.4;
+/** The flight for a rocket's variant, when a page gives one. */
+export const flightOf = (rocket, variant) => FLIGHTS.find((flight) => flight.rocket === rocket && flight.variant === variant) ?? null;
+/** The last place on the timeline: the last phase. */
+export const lastPosition = (flight) => flight.phases.length - 1;
+/** Which phase a place on the timeline is in, and how far along to the next. A value that is not a number is the start. */
+export function phaseAt(flight, position) {
+    const last = lastPosition(flight);
+    const place = Number.isFinite(position) ? Math.min(last, Math.max(0, position)) : 0;
+    const index = Math.floor(place);
+    return { index, along: place - index, phase: flight.phases[index] };
+}
+/** The place on the timeline of a phase by its id, or null for one the flight does not have. */
+export function phasePosition(flight, id) {
+    const index = flight.phases.findIndex((phase) => phase.id === id);
+    return index < 0 ? null : index;
+}
+/** How many engines of each part burn in a phase, as drawn: a blank figure draws its `drawn`. */
+export function burnsOf(phase) {
+    const out = {};
+    for (const [slot, burn] of Object.entries(phase.burns))
+        out[slot] = burn.engines.value ?? burn.drawn ?? 0;
+    return out;
+}
+const smooth = (t) => t * t * (3 - 2 * t);
+const mix = (a, b, t) => a + (b - a) * t;
+const poseIn = (pose, part, height) => ({
+    dx: (pose?.dx ?? 0) * height,
+    dy: pose?.rest ? -part.baseY : (pose?.dy ?? 0) * height,
+    pitch: pose?.pitch ?? 0,
+    gone: pose?.gone ?? false,
+});
+/** Everything the picture needs at a place on the timeline, for a vehicle `height` metres tall. */
+export function frameAt(flight, position, parts, height) {
+    const { index, along, phase } = phaseAt(flight, position);
+    const next = flight.phases[Math.min(index + 1, lastPosition(flight))];
+    const t = smooth(along);
+    const poses = {};
+    let separated = false;
+    for (const part of parts) {
+        const from = poseIn(phase.pose[part.slot], part, height);
+        const to = poseIn(next.pose[part.slot], part, height);
+        const now = { dx: mix(from.dx, to.dx, t), dy: mix(from.dy, to.dy, t), pitch: mix(from.pitch, to.pitch, t), gone: from.gone };
+        poses[part.slot] = now;
+        if (now.dx !== 0 || now.dy !== 0)
+            separated = true;
+    }
+    return {
+        index,
+        phase,
+        poses,
+        burns: burnsOf(phase),
+        groundY: -mix(phase.ground, next.ground, t) * height,
+        smoke: mix(phase.smoke ?? 0, next.smoke ?? 0, t),
+        air: mix(phase.air ?? 0, next.air ?? 0, t),
+        separated,
+    };
+}
+/** How far a flight's picture reaches, so the camera can hold all of it: the widest and highest every part stands, from the stack's own bounds. */
+export function flightBounds(flight, parts, height) {
+    const min = [Infinity, 0, Infinity];
+    const max = [-Infinity, height, -Infinity];
+    for (const part of parts)
+        for (const phase of flight.phases) {
+            const pose = poseIn(phase.pose[part.slot], part, height);
+            if (pose.gone)
+                continue;
+            const reach = Math.max(part.radius, (Math.abs(Math.sin((pose.pitch * Math.PI) / 180)) * part.height) / 2);
+            min[0] = Math.min(min[0], pose.dx - reach);
+            max[0] = Math.max(max[0], pose.dx + reach);
+            min[1] = Math.min(min[1], part.baseY + pose.dy);
+            max[1] = Math.max(max[1], part.baseY + pose.dy + part.height);
+            min[2] = Math.min(min[2], -part.radius);
+            max[2] = Math.max(max[2], part.radius);
+        }
+    return { min, max };
+}
+/** The clock of one timeline: where it is and whether it runs. It only moves when told to, once a frame by whoever draws, so a timeline out of sight stands still. */
+export class FlightClock {
+    flight;
+    position = 0;
+    playing = false;
+    constructor(flight) {
+        this.flight = flight;
+    }
+    get ended() {
+        return this.position >= lastPosition(this.flight);
+    }
+    play() {
+        if (this.ended)
+            this.position = 0;
+        this.playing = true;
+    }
+    pause() {
+        this.playing = false;
+    }
+    seek(position) {
+        const { index, along } = phaseAt(this.flight, position);
+        this.position = index + along;
+        this.playing = false;
+    }
+    /** Moves on by `seconds` of the screen's time, and stops at the end. */
+    advance(seconds) {
+        if (!this.playing)
+            return;
+        this.position = Math.min(lastPosition(this.flight), this.position + seconds / SECONDS_PER_PHASE);
+        if (this.ended)
+            this.playing = false;
+    }
+}
+/** A time as words: `T+2:35`, `T-0:03`, `T+1:05:20`. A blank says so. */
+export function clockWords(at) {
+    if (at.value === null)
+        return "Time: no source";
+    const sign = at.value < 0 ? "-" : "+";
+    const total = Math.abs(at.value);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = String(total % 60).padStart(2, "0");
+    return h > 0 ? `T${sign}${h}:${String(m).padStart(2, "0")}:${s}` : `T${sign}${m}:${s}`;
+}

package/dist/flightbar.d.ts

@@ -0,0 +1,22 @@
+declare const HTMLBase: typeof HTMLElement;
+export declare class UchusenFlight extends HTMLBase {
+    static readonly observedAttributes: string[];
+    private rocket;
+    private drawnFor;
+    private chartKey;
+    private parts;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private bind;
+    private build;
+    private drawAbout;
+    private update;
+}
+export declare function defineUchusenFlight(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        "uchusen-flight": UchusenFlight;
+    }
+}
+export {};

package/dist/flightbar.js

@@ -0,0 +1,176 @@
+// `<uchusen-flight for="rocket">`: the play, pause and scrub of a rocket's flight, with where it is, what happens there and which engines burn, engine by engine. It draws nothing and has no clock of its own: the rocket's own frame loop moves the timeline and tells it, so it adds no frame request. Importing the element's module defines it.
+import { SOURCES } from "./data/sources.js";
+import { clockWords, lastPosition, phaseAt } from "./flight.js";
+const HTMLBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+const CSS = `
+:host { display: block; color: inherit; font-size: 0.9rem; line-height: 1.4; }
+:host([hidden]) { display: none; }
+[hidden] { display: none !important; }
+.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
+button { min-width: 44px; min-height: 44px; padding: 0.3rem 0.75rem; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+button:disabled { opacity: 0.45; cursor: default; }
+button:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+input[type="range"] { flex: 1 1 10rem; min-width: 8rem; min-height: 44px; margin: 0; accent-color: var(--uchusen-accent, currentColor); }
+.now { margin: 0.45rem 0 0.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
+.what, .fine { margin: 0; }
+.fine { margin-top: 0.3rem; font-size: 0.78rem; opacity: 0.78; }
+.charts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; }
+figure { margin: 0; width: 5.5rem; }
+figure svg { display: block; width: 100%; height: auto; }
+figcaption { font-size: 0.74rem; line-height: 1.25; margin-top: 0.2rem; }
+a { color: inherit; }
+`;
+const sheet = { made: null };
+export class UchusenFlight extends HTMLBase {
+    static observedAttributes = ["for"];
+    rocket = null;
+    drawnFor = "";
+    chartKey = "";
+    parts = null;
+    connectedCallback() {
+        if (!this.shadowRoot)
+            this.build();
+        this.bind();
+    }
+    disconnectedCallback() {
+        this.rocket?.removeEventListener("uchusen-flight", this.update);
+        this.rocket = null;
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.shadowRoot)
+            this.bind();
+    }
+    bind() {
+        this.rocket?.removeEventListener("uchusen-flight", this.update);
+        const id = this.getAttribute("for");
+        this.rocket = id ? this.getRootNode().getElementById?.(id) : null;
+        this.rocket?.addEventListener("uchusen-flight", this.update);
+        queueMicrotask(this.update);
+    }
+    build() {
+        const root = this.attachShadow({ mode: "open" });
+        try {
+            if (!sheet.made) {
+                sheet.made = new CSSStyleSheet();
+                sheet.made.replaceSync(CSS);
+            }
+            root.adoptedStyleSheets = [sheet.made];
+        }
+        catch {
+            const style = document.createElement("style");
+            style.textContent = CSS;
+            root.append(style);
+        }
+        const make = (tag, id, text = "") => {
+            const node = document.createElement(tag);
+            node.dataset.testid = id;
+            node.setAttribute("part", id);
+            node.textContent = text;
+            return node;
+        };
+        const button = (id, text, on) => {
+            const node = make("button", id, text);
+            node.type = "button";
+            node.addEventListener("click", on);
+            return node;
+        };
+        const play = button("flight-play", "Play", () => {
+            if (this.rocket?.flightState.playing)
+                this.rocket.pause();
+            else
+                this.rocket?.play();
+        });
+        const position = () => this.rocket?.flightState.position ?? 0;
+        const back = button("flight-back", "Back", () => this.rocket?.seek(Math.ceil(position()) - 1));
+        const next = button("flight-next", "Next", () => this.rocket?.seek(Math.floor(position()) + 1));
+        const leave = button("flight-leave", "Back to the rocket", () => this.rocket?.endFlight());
+        const range = make("input", "flight-range");
+        range.type = "range";
+        range.min = "0";
+        range.step = "0.01";
+        range.value = "0";
+        range.setAttribute("aria-label", "Where along the flight");
+        range.addEventListener("input", () => this.rocket?.seek(Number(range.value)));
+        const row = document.createElement("div");
+        row.className = "row";
+        row.setAttribute("part", "flight-row");
+        row.append(play, back, range, next, leave);
+        const now = make("p", "flight-now");
+        now.className = "now";
+        now.setAttribute("aria-live", "polite");
+        const what = make("p", "flight-what");
+        what.className = "what";
+        const charts = make("div", "flight-charts");
+        charts.className = "charts";
+        const about = make("p", "flight-about");
+        about.className = "fine";
+        const body = document.createElement("div");
+        body.setAttribute("part", "flight-body");
+        body.append(row, now, what, charts, about);
+        const none = make("p", "flight-none", "No flight timeline for this version yet: no page read here gives one.");
+        none.className = "fine";
+        root.append(body, none);
+        this.parts = { play, back, next, leave, range, now, what, charts, about, none, body };
+    }
+    drawAbout(flight, reduced) {
+        if (!this.parts)
+            return;
+        const source = SOURCES[flight.source];
+        const link = document.createElement("a");
+        link.href = source.url;
+        link.rel = "noopener";
+        link.textContent = `${source.publisher}: ${source.title}`;
+        this.parts.about.replaceChildren(`${flight.basis} The times and engine counts are sourced; how the picture moves between them is illustrative, not to scale. ${flight.note ?? ""} ${reduced ? "This device asks for reduced motion, so nothing plays and no flame shows: move the slider or step through, and the charts say which engines burn. " : ""}From `, link, ".");
+    }
+    update = () => {
+        const parts = this.parts;
+        const rocket = this.rocket;
+        if (!parts)
+            return;
+        const flight = rocket?.flight ?? null;
+        parts.body.hidden = !flight;
+        parts.none.hidden = Boolean(flight);
+        if (!rocket || !flight) {
+            this.drawnFor = "";
+            this.dataset.flight = "";
+            return;
+        }
+        const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (this.drawnFor !== flight.id) {
+            this.drawnFor = flight.id;
+            parts.range.max = String(lastPosition(flight));
+            parts.play.disabled = reduced;
+            this.drawAbout(flight, reduced);
+        }
+        const state = rocket.flightState;
+        const { index, phase } = phaseAt(flight, state.position);
+        this.dataset.flight = flight.id;
+        this.dataset.phase = state.active ? phase.id : "";
+        this.dataset.playing = String(state.playing);
+        parts.play.textContent = state.playing ? "Pause" : state.ended ? "Play again" : "Play";
+        parts.play.setAttribute("aria-pressed", String(state.playing));
+        parts.back.disabled = state.position <= 0;
+        parts.next.disabled = state.position >= lastPosition(flight);
+        parts.leave.disabled = !state.active;
+        parts.range.value = String(state.position);
+        parts.range.setAttribute("aria-valuetext", `${clockWords(phase.at)}, ${phase.name}`);
+        parts.now.textContent = `${clockWords(phase.at)}, ${phase.name}${phase.altitude?.value ? `, ${phase.altitude.value}` : ""}`;
+        parts.what.textContent = phase.what;
+        const chartKey = `${flight.id}/${index}/${state.active}`;
+        if (chartKey !== this.chartKey) {
+            this.chartKey = chartKey;
+            // nothing started yet: what burns in the first phase
+            const charts = rocket.engineCharts(state.active ? null : flight.phases[0].id);
+            const template = document.createElement("template");
+            template.innerHTML = charts.map((chart) => `<figure data-slot="${chart.slot}" data-burning="${chart.burning}">${chart.svg}<figcaption></figcaption></figure>`).join("");
+            for (const [i, node] of [...template.content.querySelectorAll("figcaption")].entries())
+                node.textContent = charts[i].words;
+            parts.charts.replaceChildren(template.content);
+        }
+    };
+}
+export function defineUchusenFlight() {
+    if (typeof customElements !== "undefined" && !customElements.get("uchusen-flight"))
+        customElements.define("uchusen-flight", UchusenFlight);
+}

package/dist/index.d.ts

@@ -2,6 +2,10 @@ export { PLANNED_ROCKETS, ROCKETS, partIdOf, SLOT_NAMES, variantOf } from "./roc
 export type { PlannedRocket, RocketEntry, RocketStatus } from "./rockets.ts";
 export { blank, figureWords } from "./data/types.ts";
 export type { Disagreement, Figure, Variant, VariantFacts, VariantStatus } from "./data/types.ts";
+export { MAKERS } from "./data/makers.ts";
+export type { MakerId } from "./data/makers.ts";
+export { FLIGHT_LOG, flightLogOf } from "./data/flight-log.ts";
+export type { LoggedFlight } from "./data/flight-log.ts";
 export { SOURCES } from "./data/sources.ts";
 export type { Source, SourceId } from "./data/sources.ts";
 export { creditLine, MODEL_CREDITS } from "./data/credits.ts";
@@ -22,3 +26,16 @@ export { tiltMode, tiltTurn } from "./tilt.ts";
 export type { Reading, TiltMode } from "./tilt.ts";
 export { MATERIALS } from "./model/materials.ts";
 export type { MaterialName, MaterialSpec } from "./model/materials.ts";
+export { builderState } from "./builder.ts";
+export type { BuilderOption, BuilderRow, BuilderState } from "./builder.ts";
+export { cleanWay, DEFAULT_SPIN, spinOf } from "./spin.ts";
+export type { Spin, Way } from "./spin.ts";
+export { FLIGHTS } from "./data/flights.ts";
+export { burnsOf, clockWords, FlightClock, flightOf, frameAt, lastPosition, phaseAt, phasePosition, SECONDS_PER_PHASE } from "./flight.ts";
+export type { Flight, FlightBurn, FlightFrame, FlightPhase, PartPose } from "./flight.ts";
+export { bellsOf, enginesWanted, FLAME_SETTLE_MS, pickBells, plumeLength, ringsOf } from "./engines.ts";
+export type { Bell } from "./engines.ts";
+export { OPTION_ATTRIBUTES, attributesFromOptions, optionsFromAttributes, rocketFromParams, rocketToParams } from "./attrs.ts";
+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";

package/dist/index.js

@@ -1,6 +1,8 @@
 // The pure core: the rockets and their variants with sourced sizes, the parts and how they fit, the camera rule, the looks and the layout. No three.js, no DOM.
 export { PLANNED_ROCKETS, ROCKETS, partIdOf, SLOT_NAMES, variantOf } from "./rockets.js";
 export { blank, figureWords } from "./data/types.js";
+export { MAKERS } from "./data/makers.js";
+export { FLIGHT_LOG, flightLogOf } from "./data/flight-log.js";
 export { SOURCES } from "./data/sources.js";
 export { creditLine, MODEL_CREDITS } from "./data/credits.js";
 export { PART_ENTRIES, partEntry } from "./model/registry.js";
@@ -12,3 +14,10 @@ export { CROSSFADE_MS, DRAWING_HOLD_MS, REDUCED_FADE_MS, revealDelay } from "./c
 export { MAX_PIXELS, MAX_RATIO, MAX_SIDE, pixelRatioFor } from "./pixels.js";
 export { tiltMode, tiltTurn } from "./tilt.js";
 export { MATERIALS } from "./model/materials.js";
+export { builderState } from "./builder.js";
+export { cleanWay, DEFAULT_SPIN, spinOf } from "./spin.js";
+export { FLIGHTS } from "./data/flights.js";
+export { burnsOf, clockWords, FlightClock, flightOf, frameAt, lastPosition, phaseAt, phasePosition, SECONDS_PER_PHASE } from "./flight.js";
+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";

package/dist/layout.js

@@ -24,7 +24,7 @@ export function placesFor(parts, show, widthOf) {
     return parts.map(({ slot, part }) => {
         const together = show === "together";
         if (part.strapOn)
-            return { slot, at: [together ? part.strapOn.x : 0, 0, together ? part.strapOn.z : 0], shown: together || show === slot };
+            return { slot, at: [together ? part.strapOn.x : 0, together ? (part.strapOn.y ?? 0) : 0, together ? part.strapOn.z : 0], shown: together || show === slot };
         const base = y - (part.joints.bottom?.y ?? 0);
         const at = [0, together ? base : 0, 0];
         y = base + (part.joints.top ? part.joints.top.y : part.height);

package/dist/looks.d.ts

@@ -19,7 +19,7 @@ export interface Look {
     /** The soft light behind the rocket in a drawing. */
     halo: boolean;
 }
-export type FillName = "hull" | "white" | "tile" | "metal" | "dark" | "bell";
+export type FillName = "hull" | "white" | "tile" | "metal" | "dark" | "bell" | "foam";
 export declare const LOOKS: Readonly<Record<LookName, Look>>;
 /** A value from outside as a look's name: the default for anything else. */
 export declare const cleanLook: (value: unknown) => LookName;

package/dist/looks.js

@@ -8,6 +8,7 @@ const NIGHT = {
     metal: ["#16202f", "#3a475c", "#16202f"],
     dark: ["#070b12", "#121a28", "#070b12"],
     bell: ["#0a0f18", "#242f42", "#0a0f18"],
+    foam: ["#16202f", "#3a475c", "#16202f"],
 };
 export const LOOKS = {
     line: { line: "#8fa1b8", outlinePx: 1.4, featurePx: 1, weldPx: 0.6, weldOpacity: 0.45, outline: 1.2, feature: 0.8, weld: 0.45, fills: NIGHT, halo: true },
@@ -28,6 +29,7 @@ export const LOOKS = {
             metal: ["#5a5f66", "#a9afb6", "#5a5f66"],
             dark: ["#111316", "#2a2d31", "#111316"],
             bell: ["#141518", "#3c3f44", "#141518"],
+            foam: ["#6e3a1b", "#c8743a", "#6e3a1b"],
         },
         halo: false,
     },

package/dist/model/apollosoyuz.d.ts

@@ -0,0 +1,2 @@
+import type { StackBuild } from "./stacks.ts";
+export declare const APOLLO_SOYUZ_BUILDS: readonly StackBuild[];

package/dist/model/apollosoyuz.js

@@ -0,0 +1,46 @@
+// Apollo and Soyuz docked, in plain shapes, for the line looks: each is its sourced length and width, stood on end with Apollo's engine down. Where their parts begin is measured from NASA's model at those scales. The painted look is NASA's model.
+import { AS_CSM_LONG, AS_CSM_WIDE, AS_SOYUZ_LONG, AS_SOYUZ_WIDE } from "../data/apollosoyuz.js";
+import { blank } from "../data/types.js";
+import { floor, taper, tube } from "./kit.js";
+const CSM = AS_CSM_LONG.value ?? 0;
+const CSM_R = (AS_CSM_WIDE.value ?? 0) / 2;
+const ALONG = CSM / 11.84;
+const ENGINE = 2.59;
+const CM_AT = CSM - 3.28;
+const DOCK_AT = CSM - (0.32 * ALONG);
+const DOCK = 2.33;
+const SOYUZ_AT = DOCK_AT + 2.32 * ALONG;
+const SOYUZ = AS_SOYUZ_LONG.value ?? 0;
+const SOYUZ_R = (AS_SOYUZ_WIDE.value ?? 0) / 2;
+const csm = () => [
+    taper("engine-pale", 1.2, 0, 0.45, ENGINE, { rings: [0.02] }),
+    tube("white", CSM_R, ENGINE, CM_AT, { rings: [ENGINE + 0.02, CM_AT - 0.02], welds: [ENGINE + 1.5] }),
+    floor(CSM_R, ENGINE),
+    taper("steel", CSM_R, CM_AT, 0.3, CSM),
+];
+const dock = () => [tube("dark", 0.7, 0.1, DOCK, { rings: [0.3, DOCK - 0.25] }), floor(0.7, 0.1)];
+const wing = (side) => {
+    const frame = { o: [side * SOYUZ_R, 5.9, 0], u: [side, 0, 0], v: [0, 1, 0], w: [0, 0, 1] };
+    return { kind: "plate", material: "solar", frame, outline: [[0.1, -0.5], [2.75, -0.5], [2.75, 0.5], [0.1, 0.5]], thickness: 0.04 };
+};
+const soyuz = () => [
+    { kind: "lathe", material: "white", segs: 28, body: true, outline: true, profile: [[0.3, 0.1], [0.75, 0.25], [1.05, 0.8], [1.05, 1.4], [0.72, 2.1]] },
+    { kind: "lathe", material: "white", segs: 28, body: true, outline: true, profile: [[0.72, 2.1], [SOYUZ_R * 0.88, 3], [SOYUZ_R * 0.9, 4.6]], rings: [3] },
+    tube("engine-pale", SOYUZ_R * 0.95, 4.6, 6.6, { rings: [4.62] }),
+    { kind: "lathe", material: "white", segs: 28, body: true, outline: true, profile: [[SOYUZ_R * 0.95, 6.6], [SOYUZ_R, SOYUZ]] },
+    wing(1),
+    wing(-1),
+];
+const FROM = "NASA's model for the painted look. This package's plain shapes for the two line looks, from each craft's sourced length and width; where its parts begin is measured from NASA's model. No flag or lettering is drawn.";
+export const APOLLO_SOYUZ_BUILDS = [
+    {
+        rocket: "apollo-soyuz",
+        variant: "apollo-soyuz",
+        drawnFrom: FROM,
+        parts: [
+            { slot: "csm", kind: "spacecraft", name: "Apollo command and service module", height: CSM, diameter: CSM_R * 2, sourcedDiameter: AS_CSM_WIDE, painted: { file: "apollo-soyuz-csm.glb", credit: "nasa-apollo-soyuz" }, pieces: csm },
+            { slot: "docking-module", kind: "spacecraft", name: "Docking module", height: DOCK, diameter: 1.41, place: { x: 0, z: 0, y: DOCK_AT }, sourcedDiameter: blank("No source read here gives its size."), painted: { file: "apollo-soyuz-docking-module.glb", credit: "nasa-apollo-soyuz" }, pieces: dock },
+            { slot: "soyuz", kind: "spacecraft", name: "Soyuz 7K-TM", height: SOYUZ, diameter: SOYUZ_R * 2, place: { x: 0, z: 0, y: SOYUZ_AT }, sourcedDiameter: AS_SOYUZ_WIDE, painted: { file: "apollo-soyuz-soyuz.glb", credit: "nasa-apollo-soyuz" }, pieces: soyuz },
+        ],
+    },
+];

package/dist/model/dragoninside.d.ts

@@ -0,0 +1,2 @@
+import type { StackBuild } from "./stacks.ts";
+export declare const DRAGON_INSIDE_BUILDS: readonly StackBuild[];

package/dist/model/dragoninside.js

@@ -0,0 +1,67 @@
+// Inside Crew Dragon: the capsule cut open down its middle, at Dragon 2's sourced sizes. Four seats and the three-screen panel over the two centre seats are sourced, with the cargo below them; where each sits and its size are judged from one published picture of the cabin. For scale, a plain person of 1.8 m, not a fact about anyone.
+import { DRAGON_DRAWS } from "./falcon.js";
+import { deg } from "../framing.js";
+import { strut } from "./pieces.js";
+const d = DRAGON_DRAWS["dragon-2"];
+const H = d.capsule;
+const R = d.baseRadius;
+const N = d.nest;
+const SHOULDER = H * 0.74;
+const OUTER = [[R * 0.9, N], [R, N + 0.3], [R * 0.93, N + 0.7], [R * 0.5, SHOULDER], [R * 0.47, H * 0.84], [R * 0.3, H * 0.95], [0.001, H]];
+const BACK = () => [deg(90), deg(270)];
+const FLOOR_Y = N + 0.75;
+const shell = (profile, material, extra = {}) => ({ kind: "lathe", material, segs: 48, body: true, arc: BACK, profile, ...extra });
+const box = (material, a, b, width, depth) => strut(material, a, b, width, depth, { plain: false });
+function seat(x, y, z) {
+    return [
+        box("white", [x, y, z - 0.3], [x, y + 0.82, z - 0.62], 0.58, 0.1),
+        box("black", [x, y + 0.02, z - 0.28], [x, y + 0.08, z + 0.26], 0.54, 0.12),
+        box("black", [x, y + 0.72, z - 0.5], [x, y + 0.84, z - 0.54], 0.3, 0.14),
+    ];
+}
+/** A plain person for scale, standing. */
+function person(x, y, z) {
+    const tall = 1.8;
+    const head = 0.12;
+    const at = [x, z];
+    return [
+        { kind: "lathe", material: "engine-pale", at, segs: 12, profile: [[0.14, y], [0.2, y + tall * 0.5], [0.23, y + tall * 0.8], [0.09, y + tall - 2 * head]] },
+        { kind: "lathe", material: "engine-pale", at, segs: 12, profile: [[0.001, y + tall - 2 * head], [head * 0.72, y + tall - 1.72 * head], [head, y + tall - head], [head * 0.72, y + tall - 0.28 * head], [0.001, y + tall]] },
+    ];
+}
+function inside() {
+    const inner = OUTER.map(([r, y]) => [Math.max(0.001, r * 0.93), y + 0.03]).reverse();
+    const out = [
+        shell(OUTER, "white", { outline: true, rings: [N + 0.3, SHOULDER] }),
+        // the inner wall, seen through the cut
+        shell(inner, "engine-pale"),
+        { kind: "lathe", material: "soot", segs: 40, under: true, profile: [[0, 0], [R * 0.72, 0], [R * 0.9, N]], rings: [N] },
+        // the floor and the cut edge of the shell
+        { kind: "lathe", material: "dark", segs: 40, body: true, profile: [[R * 0.86, FLOOR_Y], [0.001, FLOOR_Y]] },
+        // the cargo under the centre seats
+        box("engine-pale", [-0.55, FLOOR_Y, 0.1], [-0.55, FLOOR_Y + 0.5, 0.1], 0.5, 0.55),
+        box("engine-metal", [0, FLOOR_Y, 0.15], [0, FLOOR_Y + 0.46, 0.15], 0.4, 0.55),
+        box("engine-pale", [0.55, FLOOR_Y, 0.1], [0.55, FLOOR_Y + 0.5, 0.1], 0.5, 0.55),
+        // the two centre seats, higher, and the outer two
+        ...seat(-0.34, FLOOR_Y + 0.72, -0.15),
+        ...seat(0.34, FLOOR_Y + 0.72, -0.15),
+        ...seat(-1.02, FLOOR_Y + 0.42, -0.42),
+        ...seat(1.02, FLOOR_Y + 0.42, -0.42),
+        // the panel over the centre seats, with its three screens
+        box("engine-metal", [0, FLOOR_Y + 1.62, 0.22], [0, FLOOR_Y + 1.92, 0.08], 1.34, 0.08),
+        ...[-0.42, 0, 0.42].map((x) => box("glass", [x, FLOOR_Y + 1.66, 0.25], [x, FLOOR_Y + 1.88, 0.15], 0.38, 0.03)),
+        // a window on each side of the cabin, and the docking port in the ceiling
+        ...[-1, 1].map((side) => box("glass", [side * 1.36, FLOOR_Y + 0.96, -0.1], [side * 1.2, FLOOR_Y + 1.24, -0.1], 0.3, 0.06)),
+        { kind: "lathe", material: "engine-metal", segs: 20, body: true, profile: [[0.38, H * 0.8], [0.38, H * 0.86], [0.001, H * 0.86]] },
+        ...person(1.5, FLOOR_Y, 0.9),
+    ];
+    return out;
+}
+export const DRAGON_INSIDE_BUILDS = [
+    {
+        rocket: "dragon",
+        variant: "crew-dragon-inside",
+        drawnFrom: "This package's code. The outside is Dragon 2's sourced size; its four seats, panel and cargo are from its article, placed by eye from one published picture of the cabin. Their sizes have no source. Cut open to look inside: the real capsule's front half is not drawn. The figure of 1.8 m is for scale.",
+        parts: [{ slot: "capsule", kind: "capsule", name: "Inside Crew Dragon, cut open", height: H, diameter: R * 2, pieces: inside }],
+    },
+];

package/dist/model/electron.d.ts

@@ -0,0 +1,2 @@
+import type { StackBuild } from "./stacks.ts";
+export declare const ELECTRON_BUILDS: readonly StackBuild[];