@johnmorrisdotca/uchusen-rockets 0.3.0 → 0.4.0

package/dist/pixels.js

@@ -1,11 +1,51 @@
 // How sharp the 3D canvas may be. The backing store is width x height x ratio squared, and a view as big as a 5K screen at a ratio of 2 would ask the graphics card for 15 million pixels, every frame. Pure.
-/** The most the backing store may hold, in pixels (a 620 x 827 view at a ratio of 2 is 2 million). */
+/**
+ * The most the backing store may hold, in pixels (a 620 x 827 view at a ratio of 2 is 2 million).
+ *
+ * @example
+ * ```ts
+ * import { MAX_PIXELS } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(MAX_PIXELS);
+ * ```
+ */
 export const MAX_PIXELS = 6_000_000;
-/** The longest side the backing store may have. */
+/**
+ * The longest side the backing store may have.
+ *
+ * @example
+ * ```ts
+ * import { MAX_SIDE } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(MAX_SIDE);
+ * ```
+ */
 export const MAX_SIDE = 4096;
-/** The sharpest ratio ever used, however dense the screen. */
+/**
+ * The sharpest ratio ever used, however dense the screen.
+ *
+ * @example
+ * ```ts
+ * import { MAX_RATIO } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(MAX_RATIO);
+ * ```
+ */
 export const MAX_RATIO = 2;
-/** The device pixel ratio to draw a `width` x `height` view at: the screen's own, held to 2, to 4096 pixels a side and to 6 million in all. At least 0.25, and 1 for a nonsense value. */
+/**
+ * The device pixel ratio to draw a `width` x `height` view at: the screen's own, held to 2, to 4096 pixels a side and to 6 million in all. At least 0.25, and 1 for a nonsense value.
+ *
+ * @param width The view's width in CSS pixels.
+ * @param height Its height in CSS pixels.
+ * @param deviceRatio The screen's own pixel ratio.
+ * @returns The ratio to draw at.
+ * @example
+ * ```ts
+ * import { pixelRatioFor } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(pixelRatioFor(620, 827, 3), pixelRatioFor(3000, 3000, 2));
+ * ```
+ */
 export function pixelRatioFor(width, height, deviceRatio) {
     const w = Math.max(1, width);
     const h = Math.max(1, height);

package/dist/react.d.ts

@@ -2,6 +2,17 @@ import { type HTMLAttributes, type Ref } from "react";
 import type { Description } from "./fit.ts";
 import type { ViewName } from "./framing.ts";
 import type { LookName } from "./looks.ts";
+/**
+ * The props of the React wrapper: the element's attributes as props (`rocket`, `variant`, `show`, `look`, `view`, `mode`, `assets`, `spin`, `way`, `label`, `engines`, `phase`), `build` as an object, and any other HTML attribute.
+ *
+ * @example
+ * ```ts
+ * import type { UchusenRocketProps } from "@johnmorrisdotca/uchusen-rockets/react";
+ *
+ * const props: UchusenRocketProps = { rocket: "starship", variant: "v3", look: "thick" };
+ * console.log(props);
+ * ```
+ */
 export interface UchusenRocketProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
     rocket?: string;
     variant?: string;
@@ -22,6 +33,19 @@ export interface UchusenRocketProps extends Omit<HTMLAttributes<HTMLElement>, "s
     phase?: string;
     ref?: Ref<HTMLElement>;
 }
+/**
+ * A thin React wrapper round `<uchusen-rocket>`. It loads the element on first use, so server rendering draws only the tag.
+ *
+ * @param props The props. `build` is turned into the element's JSON attribute; the rest go through as they are.
+ * @returns The `<uchusen-rocket>` element. It is never null or undefined.
+ * @example
+ * ```tsx no-run
+ * import { UchusenRocket } from "@johnmorrisdotca/uchusen-rockets/react";
+ *
+ * export const Hero = () => <UchusenRocket rocket="falcon-9" variant="block-5" look="painted" />;
+ * console.log(typeof UchusenRocket);
+ * ```
+ */
 export declare function UchusenRocket({ build, ...rest }: UchusenRocketProps): import("react").DOMElement<{
     build: string | undefined;
     rocket?: string;

package/dist/react.js

@@ -1,5 +1,18 @@
 // A thin React wrapper round `<uchusen-rocket>`.
 import { createElement, useEffect } from "react";
+/**
+ * A thin React wrapper round `<uchusen-rocket>`. It loads the element on first use, so server rendering draws only the tag.
+ *
+ * @param props The props. `build` is turned into the element's JSON attribute; the rest go through as they are.
+ * @returns The `<uchusen-rocket>` element. It is never null or undefined.
+ * @example
+ * ```tsx no-run
+ * import { UchusenRocket } from "@johnmorrisdotca/uchusen-rockets/react";
+ *
+ * export const Hero = () => <UchusenRocket rocket="falcon-9" variant="block-5" look="painted" />;
+ * console.log(typeof UchusenRocket);
+ * ```
+ */
 export function UchusenRocket({ build, ...rest }) {
     useEffect(() => {
         void import("./element.js");

package/dist/rockets.d.ts

@@ -1,7 +1,29 @@
 import { type MakerId } from "./data/makers.ts";
 import type { Figure, Variant } from "./data/types.ts";
 import type { SourceId } from "./data/sources.ts";
+/**
+ * Whether a rocket is `built` (it has a shape) or `planned` (it has facts and no shape yet).
+ *
+ * @example
+ * ```ts
+ * import { ROCKETS, type RocketStatus } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const status: RocketStatus | undefined = ROCKETS["starship"]?.status;
+ * console.log(status);
+ * ```
+ */
 export type RocketStatus = "built" | "planned";
+/**
+ * One rocket: its id and name, its variants, its default variant, the group it is listed under and who made it.
+ *
+ * @example
+ * ```ts
+ * import { ROCKETS, type RocketEntry } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const starship: RocketEntry | undefined = ROCKETS["starship"];
+ * console.log(starship?.name, starship?.variants.map((variant) => variant.id));
+ * ```
+ */
 export interface RocketEntry {
     id: string;
     name: string;
@@ -13,7 +35,17 @@ export interface RocketEntry {
     /** Whose it is and who built it, as its source says, or a blank. */
     madeBy: Figure<string>;
 }
-/** A rocket on the list with no mesh yet: its name and the sourced facts to build it from. */
+/**
+ * A rocket on the list with no mesh yet: its name and the sourced facts to build it from.
+ *
+ * @example
+ * ```ts
+ * import { PLANNED_ROCKETS, type PlannedRocket } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const planned: PlannedRocket | undefined = PLANNED_ROCKETS[0];
+ * console.log(planned?.name);
+ * ```
+ */
 export interface PlannedRocket {
     id: string;
     name: string;
@@ -23,10 +55,66 @@ export interface PlannedRocket {
     firstFlight: Figure<string>;
     source: SourceId;
 }
+/**
+ * Every rocket that has a shape, by id, each with its variants. Add a rocket here and the element, the drawing, the fit check and the demo all read it.
+ *
+ * @example
+ * ```ts
+ * import { ROCKETS } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(Object.keys(ROCKETS).slice(0, 6));
+ * ```
+ */
 export declare const ROCKETS: Readonly<Record<string, RocketEntry>>;
+/**
+ * Rockets with sourced facts and no shape yet.
+ *
+ * @example
+ * ```ts
+ * import { PLANNED_ROCKETS } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(PLANNED_ROCKETS.map((rocket) => rocket.name));
+ * ```
+ */
 export declare const PLANNED_ROCKETS: readonly PlannedRocket[];
+/**
+ * Finds a rocket's variant, with its sourced sizes.
+ *
+ * @param rocket A rocket's id.
+ * @param id A variant's id. Left out, null or undefined: the rocket's default variant.
+ * @returns The variant, or undefined when the rocket or the variant is not known.
+ * @example
+ * ```ts
+ * import { variantOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const v3 = variantOf("starship", "v3");
+ * console.log(v3?.facts.height.value, variantOf("starship", "v99"));
+ * ```
+ */
 export declare function variantOf(rocket: string, id?: string | null): Variant | undefined;
-/** A part's name for a rocket's slot in a variant. */
+/**
+ * A part's name for a rocket's slot in a variant.
+ *
+ * @param rocket A rocket's id.
+ * @param variant A variant's id.
+ * @param slot A slot name.
+ * @returns The id of the part that stands in that slot.
+ * @example
+ * ```ts
+ * import { partIdOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(partIdOf("starship", "v3", "booster"));
+ * ```
+ */
 export declare const partIdOf: (rocket: string, variant: string, slot: string) => string;
-/** What to call a slot. */
+/**
+ * What to call a slot.
+ *
+ * @example
+ * ```ts
+ * import { SLOT_NAMES } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(SLOT_NAMES["booster"]);
+ * ```
+ */
 export declare const SLOT_NAMES: Readonly<Record<string, string>>;

package/dist/rockets.js

@@ -21,6 +21,16 @@ import { ISS_VARIANTS } from "./data/iss.js";
 import { HUBBLE_VARIANTS } from "./data/hubble.js";
 import { STARSHIP_VARIANTS } from "./data/starship.js";
 import { MADE_BY } from "./data/makers.js";
+/**
+ * Every rocket that has a shape, by id, each with its variants. Add a rocket here and the element, the drawing, the fit check and the demo all read it.
+ *
+ * @example
+ * ```ts
+ * import { ROCKETS } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(Object.keys(ROCKETS).slice(0, 6));
+ * ```
+ */
 export const ROCKETS = {
     starship: { id: "starship", name: "Starship", status: "built", ...MADE_BY["starship"], variants: STARSHIP_VARIANTS, defaultVariant: "v3" },
     "falcon-9": { id: "falcon-9", name: "Falcon 9", status: "built", ...MADE_BY["falcon-9"], variants: FALCON_9_VARIANTS, defaultVariant: "block-5" },
@@ -47,17 +57,63 @@ export const ROCKETS = {
     starbase: { id: "starbase", name: "Starbase", status: "built", ...MADE_BY["starbase"], variants: STARBASE_VARIANTS, defaultVariant: "launch-site" },
 };
 const fig = (value, source) => ({ value, source });
+/**
+ * Rockets with sourced facts and no shape yet.
+ *
+ * @example
+ * ```ts
+ * import { PLANNED_ROCKETS } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(PLANNED_ROCKETS.map((rocket) => rocket.name));
+ * ```
+ */
 export const PLANNED_ROCKETS = [
     { id: "vulcan-centaur", name: "Vulcan Centaur", status: "planned", height: fig(61.6, "wikipedia-vulcan"), diameter: fig(5.4, "wikipedia-vulcan"), firstFlight: { value: "2024-01-08", source: "wikipedia-vulcan" }, source: "wikipedia-vulcan" },
     { id: "ariane-6", name: "Ariane 6", status: "planned", height: fig(63, "wikipedia-ariane-6"), diameter: fig(5.4, "wikipedia-ariane-6"), firstFlight: { value: "2024-07-09", source: "wikipedia-ariane-6" }, source: "wikipedia-ariane-6" },
 ];
+/**
+ * Finds a rocket's variant, with its sourced sizes.
+ *
+ * @param rocket A rocket's id.
+ * @param id A variant's id. Left out, null or undefined: the rocket's default variant.
+ * @returns The variant, or undefined when the rocket or the variant is not known.
+ * @example
+ * ```ts
+ * import { variantOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const v3 = variantOf("starship", "v3");
+ * console.log(v3?.facts.height.value, variantOf("starship", "v99"));
+ * ```
+ */
 export function variantOf(rocket, id) {
     const entry = Object.hasOwn(ROCKETS, rocket) ? ROCKETS[rocket] : undefined;
     return entry?.variants.find((variant) => variant.id === (id ?? entry.defaultVariant));
 }
-/** A part's name for a rocket's slot in a variant. */
+/**
+ * A part's name for a rocket's slot in a variant.
+ *
+ * @param rocket A rocket's id.
+ * @param variant A variant's id.
+ * @param slot A slot name.
+ * @returns The id of the part that stands in that slot.
+ * @example
+ * ```ts
+ * import { partIdOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(partIdOf("starship", "v3", "booster"));
+ * ```
+ */
 export const partIdOf = (rocket, variant, slot) => variantOf(rocket, variant)?.partIds?.[slot] ?? `${rocket}-${variant}-${slot}`;
-/** What to call a slot. */
+/**
+ * What to call a slot.
+ *
+ * @example
+ * ```ts
+ * import { SLOT_NAMES } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(SLOT_NAMES["booster"]);
+ * ```
+ */
 export const SLOT_NAMES = {
     booster: "Super Heavy",
     ship: "Ship",

package/dist/spin.d.ts

@@ -1,11 +1,66 @@
+/**
+ * Which way a rocket turns: `cw` (clockwise) or `ccw` (counter-clockwise).
+ *
+ * @example
+ * ```ts
+ * import type { Way } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const way: Way = "ccw";
+ * console.log(way);
+ * ```
+ */
 export type Way = "cw" | "ccw";
+/**
+ * The slow turn of a rocket: the seconds a full turn takes (0 is none) and which way.
+ *
+ * @example
+ * ```ts
+ * import { DEFAULT_SPIN, type Spin } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const spin: Spin = DEFAULT_SPIN;
+ * console.log(spin.seconds, spin.way);
+ * ```
+ */
 export interface Spin {
     /** Seconds a turn, 0 for not at all. */
     seconds: number;
     way: Way;
 }
+/**
+ * The spin used when none is asked for: 180 seconds a turn, clockwise.
+ *
+ * @example
+ * ```ts
+ * import { DEFAULT_SPIN } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(DEFAULT_SPIN);
+ * ```
+ */
 export declare const DEFAULT_SPIN: Spin;
-/** Anything but `ccw` is the default way. */
+/**
+ * Anything but `ccw` is the default way.
+ *
+ * @param value Anything.
+ * @returns `ccw` for `ccw`, and `cw` for anything else.
+ * @example
+ * ```ts
+ * import { cleanWay } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(cleanWay("ccw"), cleanWay("left"));
+ * ```
+ */
 export declare const cleanWay: (value: unknown) => Way;
-/** A spin from the `spin` and `way` attributes: a name, or seconds a turn. A nonsense value is the default, and a negative one is none. */
+/**
+ * A spin from the `spin` and `way` attributes: a name, or seconds a turn. A nonsense value is the default, and a negative one is none.
+ *
+ * @param spin The `spin` attribute: `off`, `slow`, `medium`, `fast`, or seconds a turn. Null when missing.
+ * @param way The `way` attribute. Null when missing.
+ * @returns The spin to use.
+ * @example
+ * ```ts
+ * import { spinOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(spinOf("fast", null), spinOf("30", "ccw"), spinOf("nonsense", null));
+ * ```
+ */
 export declare function spinOf(spin: string | null, way: string | null): Spin;

package/dist/spin.js

@@ -1,9 +1,42 @@
 // How a view turns by itself. `way` is which way round: `cw`, clockwise seen from above, takes the near side to the viewer's left, and `ccw` to the right. Pure.
 const NAMED = { off: 0, slow: 180, medium: 67, fast: 20 };
+/**
+ * The spin used when none is asked for: 180 seconds a turn, clockwise.
+ *
+ * @example
+ * ```ts
+ * import { DEFAULT_SPIN } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(DEFAULT_SPIN);
+ * ```
+ */
 export const DEFAULT_SPIN = { seconds: 180, way: "cw" };
-/** Anything but `ccw` is the default way. */
+/**
+ * Anything but `ccw` is the default way.
+ *
+ * @param value Anything.
+ * @returns `ccw` for `ccw`, and `cw` for anything else.
+ * @example
+ * ```ts
+ * import { cleanWay } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(cleanWay("ccw"), cleanWay("left"));
+ * ```
+ */
 export const cleanWay = (value) => (value === "ccw" ? "ccw" : "cw");
-/** A spin from the `spin` and `way` attributes: a name, or seconds a turn. A nonsense value is the default, and a negative one is none. */
+/**
+ * A spin from the `spin` and `way` attributes: a name, or seconds a turn. A nonsense value is the default, and a negative one is none.
+ *
+ * @param spin The `spin` attribute: `off`, `slow`, `medium`, `fast`, or seconds a turn. Null when missing.
+ * @param way The `way` attribute. Null when missing.
+ * @returns The spin to use.
+ * @example
+ * ```ts
+ * import { spinOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(spinOf("fast", null), spinOf("30", "ccw"), spinOf("nonsense", null));
+ * ```
+ */
 export function spinOf(spin, way) {
     const raw = spin === null ? NaN : Object.hasOwn(NAMED, spin) ? NAMED[spin] : Number(spin);
     const seconds = spin === null || spin.trim() === "" || !Number.isFinite(raw) ? DEFAULT_SPIN.seconds : Math.max(0, raw);

package/dist/tilt.d.ts

@@ -1,20 +1,64 @@
+/**
+ * Whether tilting a device turns the view: `off`, `ask` (the browser must ask first, as on iOS) or `on`.
+ *
+ * @example
+ * ```ts
+ * import type { TiltMode } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const mode: TiltMode = "ask";
+ * console.log(mode);
+ * ```
+ */
 export type TiltMode = "off" | "ask" | "on";
-/** Off under reduced motion, on a computer with a mouse, or where the browser has no orientation events; "ask" where it must ask first (iOS: a tap
- * on "Tilt to turn" asks, never the page by itself); else on. */
+/**
+ * Off under reduced motion, on a computer with a mouse, or where the browser has no orientation events; "ask" where it must ask first (iOS: a tap on "Tilt to turn" asks, never the page by itself); else on.
+ *
+ * @param env What the page knows: reduced motion, a coarse pointer (touch), whether the browser has orientation events, and whether it must ask permission first.
+ * @returns `off`, `ask` or `on`.
+ * @example
+ * ```ts
+ * import { tiltMode } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(tiltMode({ reducedMotion: false, coarsePointer: true, hasOrientation: true, needsPermission: true }));
+ * ```
+ */
 export declare function tiltMode(env: {
     reducedMotion: boolean;
     coarsePointer: boolean;
     hasOrientation: boolean;
     needsPermission: boolean;
 }): TiltMode;
+/**
+ * One reading of a device's orientation: front to back (`beta`, -180 to 180 degrees) and left to right (`gamma`, -90 to 90 degrees). Either is null when the device gives none.
+ *
+ * @example
+ * ```ts
+ * import type { Reading } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const reading: Reading = { beta: 20, gamma: -5 };
+ * console.log(reading);
+ * ```
+ */
 export interface Reading {
     /** Front to back, -180 to 180 degrees. */
     beta: number | null;
     /** Left to right, -90 to 90 degrees. */
     gamma: number | null;
 }
-/** The turn (degrees round, degrees up or down) for a reading, measured from `rest` (how the device was held when tilting began). `angle` is the
- * screen's orientation (0, 90, 180 or 270), so leaning a phone held sideways still turns the view the way it looks. Null for an empty reading. */
+/**
+ * The turn (degrees round, degrees up or down) for a reading, measured from `rest` (how the device was held when tilting began). `angle` is the screen's orientation (0, 90, 180 or 270), so leaning a phone held sideways still turns the view the way it looks. Null for an empty reading.
+ *
+ * @param reading The current reading.
+ * @param rest The reading when tilting began.
+ * @param angle The screen's orientation: 0, 90, 180 or 270. Defaults to 0.
+ * @returns The turn in degrees round (`azimuth`) and up or down (`polar`), or null for an empty reading.
+ * @example
+ * ```ts
+ * import { tiltTurn } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(tiltTurn({ beta: 30, gamma: 10 }, { beta: 20, gamma: 0 }), tiltTurn({ beta: null, gamma: null }, { beta: 0, gamma: 0 }));
+ * ```
+ */
 export declare function tiltTurn(reading: Reading, rest: Reading, angle?: number): {
     azimuth: number;
     polar: number;

package/dist/tilt.js

@@ -1,6 +1,16 @@
 // Tilt to turn: on a phone or tablet, leaning the device turns a 3D view a little. Pure: when it is offered, and how a reading becomes a turn of the view.
-/** Off under reduced motion, on a computer with a mouse, or where the browser has no orientation events; "ask" where it must ask first (iOS: a tap
- * on "Tilt to turn" asks, never the page by itself); else on. */
+/**
+ * Off under reduced motion, on a computer with a mouse, or where the browser has no orientation events; "ask" where it must ask first (iOS: a tap on "Tilt to turn" asks, never the page by itself); else on.
+ *
+ * @param env What the page knows: reduced motion, a coarse pointer (touch), whether the browser has orientation events, and whether it must ask permission first.
+ * @returns `off`, `ask` or `on`.
+ * @example
+ * ```ts
+ * import { tiltMode } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(tiltMode({ reducedMotion: false, coarsePointer: true, hasOrientation: true, needsPermission: true }));
+ * ```
+ */
 export function tiltMode(env) {
     if (env.reducedMotion || !env.coarsePointer || !env.hasOrientation)
         return "off";
@@ -10,8 +20,20 @@ const GAIN = 0.6;
 const MAX_TURN = 25;
 const MAX_LEAN = 12;
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-/** The turn (degrees round, degrees up or down) for a reading, measured from `rest` (how the device was held when tilting began). `angle` is the
- * screen's orientation (0, 90, 180 or 270), so leaning a phone held sideways still turns the view the way it looks. Null for an empty reading. */
+/**
+ * The turn (degrees round, degrees up or down) for a reading, measured from `rest` (how the device was held when tilting began). `angle` is the screen's orientation (0, 90, 180 or 270), so leaning a phone held sideways still turns the view the way it looks. Null for an empty reading.
+ *
+ * @param reading The current reading.
+ * @param rest The reading when tilting began.
+ * @param angle The screen's orientation: 0, 90, 180 or 270. Defaults to 0.
+ * @returns The turn in degrees round (`azimuth`) and up or down (`polar`), or null for an empty reading.
+ * @example
+ * ```ts
+ * import { tiltTurn } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * console.log(tiltTurn({ beta: 30, gamma: 10 }, { beta: 20, gamma: 0 }), tiltTurn({ beta: null, gamma: null }, { beta: 0, gamma: 0 }));
+ * ```
+ */
 export function tiltTurn(reading, rest, angle = 0) {
     if (reading.beta === null || reading.gamma === null || rest.beta === null || rest.gamma === null)
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/uchusen-rockets",
-  "version": "0.3.0",
+  "version": "0.4.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",
@@ -93,9 +93,12 @@
     "dev": "pnpm site && node scripts/dev.ts",
     "test:demo": "pnpm site && playwright test",
     "test:freeze": "pnpm site && playwright test e2e/freeze.demo.ts --project=chromium-desk",
-    "screenshots": "pnpm site && node scripts/screenshots.ts",
+    "screenshots": "pnpm site && node scripts/docs-site.mjs build && node scripts/screenshots.ts",
     "models": "node scripts/reduce-models.ts",
-    "models:nasa": "node scripts/reduce-nasa.ts"
+    "models:nasa": "node scripts/reduce-nasa.ts",
+    "docs:site": "pnpm build && node scripts/docs-site.mjs build",
+    "docs:check": "pnpm build && node scripts/docs-site.mjs check",
+    "size": "node scripts/docs-site.mjs size"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -114,8 +117,8 @@
     "@gltf-transform/core": "4.5.1",
     "@gltf-transform/extensions": "4.5.1",
     "@gltf-transform/functions": "4.5.1",
-    "@johnmorrisdotca/chikyu-earth": "0.5.0",
-    "@johnmorrisdotca/kazoku-ui": "^0.10.0",
+    "@johnmorrisdotca/chikyu-earth": "0.10.0",
+    "@johnmorrisdotca/kazoku-ui": "^0.12.0",
     "@playwright/test": "1.64.0",
     "@types/node": "24.10.1",
     "@types/react": "19.2.7",
@@ -124,7 +127,9 @@
     "draco3dgltf": "1.5.7",
     "esbuild": "0.25.12",
     "eslint": "9.39.5",
+    "marked": "^18.1.3",
     "meshoptimizer": "1.3.0",
+    "pagefind": "^1.6.0",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "three": "0.186.1",