@nano133/nanoterra 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.13.0 (2026-11-01)
+
+- **The camera's distance on one curve (`createZoom`, `listenZoom` in `@nano133/nanoterra/input`):** one number, the camera's distance from the eyes, moved by
+  the mouse wheel, a trackpad's scroll or pinch, a touch pinch and the + and − keys, with nano133.com's island feel. A notch moves `0.35 + 0.14 × distance`
+  metres (100 px of scroll, a line 16 px, a page 400 px, a trackpad pinch five times a scroll), and every bit of a scroll counts: Echo Island's dead zone and
+  speed limit dropped most of a quick spin, and its wheel needed about five times the spins. The last notch in goes to the eyes, the first notch out past the
+  switch. The touch pinch is the same curve as a ratio: twice the spread divides `distance + 2.5` by 2^1.3 (`pinchStart`, `pinch`, `pinchEnd`; the game wires
+  the fingers). `createZoom(range, { read, write })` keeps the distance in the game's own storage (`read` at first use, never on the server), eases it
+  (`step(dt, calm)`, at once with reduced motion), and has `set`, `by`, `eyes` and `subscribe`. `listenZoom(zoom, canvas, { skip })` stops the page's scroll
+  over the canvas and leaves the browser's zoom keys and a field alone. The pure parts (`wheelNotches`, `zoomedBy`, `pinchedTo`) are exported. About 1.0 kB gzip.
+
 ## 0.12.0 (2026-11-01)
 
 - **A passkey for the owner (`createAdminSignin({ passkeys: true })`): the owner's LINKED passkeys open /admin.** A passkey is only a key to /admin; the money stays

package/README.md

@@ -69,7 +69,7 @@ Each path loads only what it needs. A page that reads a ticket loads no Three.js
 | `@nano133/nanoterra/looks` | the looks ladder | no | 1.9 kB (all), 0.9 kB (`checkLooks` alone) |
 | `@nano133/nanoterra/character` | the builder and `createCharacter` (it includes the record), with the three sockets | yes | 21.8 kB (all, with the sockets and `createLookPreview` of 0.3.0; 20.4 kB on 0.2.0), 17.8 kB (`createCharacter` alone, measured on 0.2.0) |
 | `@nano133/nanoterra/model` | the 3D model check: a `.glb` against the island's limits or a cosmetic's (since 0.3.0) | no | 8.8 kB |
-| `@nano133/nanoterra/input` | let go of held keys and sticks when the player leaves the page, and pause: `releaseWhenLost`, `pauseWhenLeft`, `swallowsKeyup` (since 0.3.1) | no | 0.5 kB |
+| `@nano133/nanoterra/input` | let go of held keys and sticks when the player leaves the page, and pause: `releaseWhenLost`, `pauseWhenLeft`, `swallowsKeyup` (since 0.3.1); the camera's distance on one curve: `createZoom`, `listenZoom` (since 0.13.0) | no | 0.5 kB, 1.0 kB more with the zoom |
 | `@nano133/nanoterra/admin` | the admin of a game: the guard, the handler, the store type (server code; since 0.2.0) | no | 3.7 kB |
 | `@nano133/nanoterra/admin/d1`, `/admin/firestore` | the admin store for D1 (the starter's tables) or Firestore (a small interface, no Firebase dependency): `createD1Store`, `createFirestoreStore` (since 0.2.0) | no | 1.5 kB each |
 | `@nano133/nanoterra/admin/panel` | the admin page, drawn in the browser into one element, and its stylesheet `@nano133/nanoterra/admin/style.css` (since 0.2.0) | no | 18.9 kB with the tabbed layout (10.6 kB on 0.3.0, 8.5 kB on 0.2.0) + 5.9 kB of CSS (minified) |
@@ -291,6 +291,31 @@ pauseWhenLeft(() => { game.paused = true; resumeCard.hidden = false; });
 - It returns the function that takes its listeners away. It names no package and reads only plain browser events. The same code runs in nano133.com's island and rooms,
   and in the [game starter](https://github.com/nano133-com/nano-game-starter).
 
+## The camera's distance (`@nano133/nanoterra/input`; since 0.13.0)
+
+One number, the camera's distance from the eyes, moved by the mouse wheel, a trackpad's two-finger scroll or pinch, a two-finger pinch on a touch screen
+and the + and − keys, along ONE curve: nano133.com's island feel. Each notch moves `0.35 + 0.14 × distance` metres, so a notch feels the same near and
+far, and every bit of a scroll counts (Echo Island's wheel had a dead zone and a speed limit, dropped most of a quick spin and needed about five times the
+spins). The last notch in goes to the eyes and the first notch out goes past the switch, so the camera never rests half inside the head.
+
+```ts
+import { createZoom, listenZoom } from "@nano133/nanoterra/input";
+
+const zoom = createZoom({ max: 10, start: 5.2, first: 0.6 }, { read: () => saved(), write: (d) => save(d) });
+listenZoom(zoom, renderer.domElement, { skip: () => paused });   // the wheel over the canvas, + and − on the window
+// each frame: the distance eases to the one asked for (at once with reduced motion)
+const dist = zoom.step(dt, lessMotion);
+const firstPerson = zoom.eyes();
+```
+
+- `read` is called the first time the distance is asked for (never on the server); `write` on every change: put a delay in it if your storage is slow.
+- `listenZoom` stops the page's scroll and zoom over the canvas. A key with ctrl, alt or the command key (the browser's zoom) and a key typed in a field are
+  left alone; `skip(e)` keeps any other event from the zoom (a key the player is binding).
+- The touch pinch is yours to wire, because the fingers are also your stick and your look: `pinchStart(spread)` when the second finger lands, `pinch(spread)`
+  as they move, `pinchEnd()`. Twice the spread divides `distance + 2.5` by 2^1.3, wherever the camera is: the wheel's curve.
+- `set(d)` for a setting (a slider, a First person card), `subscribe(on)` for a menu that shows the distance. The pure parts (`wheelNotches`, `zoomedBy`,
+  `pinchedTo`) are there for a test.
+
 ## The sign-in ticket
 
 `@nano133/nanoterra/ticket` reads and checks a sign-in ticket in the player's browser. It is for a game on a **static site**: no server, no secret.

package/dist/input/index.d.ts

@@ -1,3 +1,5 @@
+export { createZoom, listenZoom, pinchedTo, wheelNotches, zoomedBy, PINCH, ZOOM_CURVE, ZOOM_EASE, ZOOM_STEP } from "./zoom.js";
+export type { Zoom, ZoomRange } from "./zoom.js";
 type Listens = Pick<EventTarget, "addEventListener" | "removeEventListener">;
 /**
  * Calls `release` each time what is held may be wrong. In it, clear every held key, thumb stick and drag, and any jump or tool that a key press queued.
@@ -29,4 +31,3 @@ export declare function pauseWhenLeft(pause: () => void, win?: Listens, doc?: Li
     hidden?: boolean;
     hasFocus?: () => boolean;
 }): () => void;
-export {};

package/dist/input/index.js

@@ -16,6 +16,9 @@
 // calls your `pause` when the player really left (a free round stops its clock and shows a Resume key). No package: plain browser events.
 //
 // A ROUND THAT COSTS MONEY must not pause: its deadline must not move. Keep `releaseWhenLost` (the character always stops) and leave `pauseWhenLeft` out.
+//
+// The camera's distance (the wheel, a pinch, the + and − keys, one curve) is `createZoom` and `listenZoom`, in ./zoom.ts.
+export { createZoom, listenZoom, pinchedTo, wheelNotches, zoomedBy, PINCH, ZOOM_CURVE, ZOOM_EASE, ZOOM_STEP } from "./zoom.js";
 /**
  * Calls `release` each time what is held may be wrong. In it, clear every held key, thumb stick and drag, and any jump or tool that a key press queued.
  * `keysOnly`, when given, is called when a menu opens (a right click): a menu takes a keyup, but on a touch screen a long press also asks for a menu,

package/dist/input/zoom.d.ts

@@ -0,0 +1,81 @@
+/** Where the camera may be (metres from the eyes): the farthest, the default, and the switch: nearer than `first` it is in the eyes. */
+export type ZoomRange = {
+    max: number;
+    start: number;
+    first: number;
+};
+/** One notch: about one mouse-wheel click (100 px of scroll). The + and − keys move `key` notches. */
+export declare const ZOOM_STEP: {
+    readonly perPx: 0.006;
+    readonly perPxPinch: 0.03;
+    readonly linePx: 16;
+    readonly pagePx: 400;
+    readonly key: 1.2;
+};
+/** The curve: a notch moves `base + scale × distance` metres. */
+export declare const ZOOM_CURVE: {
+    readonly base: 0.35;
+    readonly scale: 0.14;
+};
+/** The touch pinch: twice the spread divides `distance + base/scale` by 2^power. */
+export declare const PINCH: {
+    readonly power: 1.3;
+};
+/** How fast the camera eases to the distance asked for (1/s). */
+export declare const ZOOM_EASE = 9;
+/** One wheel event as notches (negative: in). A mouse notch arrives in lines or about 100 px, a trackpad in many small pixels, a pinch as a wheel with the ctrl key. */
+export declare function wheelNotches(e: {
+    deltaY: number;
+    deltaMode?: number;
+    ctrlKey?: boolean;
+}): number;
+/** The distance after `notches` (negative: in) from `want`. */
+export declare function zoomedBy(r: ZoomRange, want: number, notches: number): number;
+/** The distance during a touch pinch: `from` at the start, the fingers `spread0` apart then and `spread` now (px). Apart brings it in. */
+export declare function pinchedTo(r: ZoomRange, from: number, spread0: number, spread: number): number;
+export type Zoom = {
+    /** The distance asked for (metres from the eyes). */
+    want(): number;
+    /** The distance now, as the last `step` eased it. */
+    now(): number;
+    /** True while the camera is in the eyes (the distance now below `first`). */
+    eyes(): boolean;
+    /** Asks for a distance (clamped), writes it and tells the listeners. */
+    set(d: number): void;
+    /** Moves the distance by notches (negative: in), along the curve. */
+    by(notches: number): void;
+    /** A wheel event (or one like it) moves the distance. */
+    wheel(e: {
+        deltaY: number;
+        deltaMode?: number;
+        ctrlKey?: boolean;
+    }): void;
+    /** A touch pinch starts with the fingers `spread` apart (px); `pinch` follows it; `pinchEnd` ends it. */
+    pinchStart(spread: number): void;
+    pinch(spread: number): void;
+    pinchEnd(): void;
+    /** One frame: the distance eases to the one asked for (at once when `calm`, reduced motion). Returns it. */
+    step(dt: number, calm: boolean): number;
+    /** Calls `on` when the distance asked for changes. Returns the function that stops it. */
+    subscribe(on: () => void): () => void;
+};
+/**
+ * The camera's distance of one game. `read` gives the kept distance (null: none, the default `start`), and is read the first time the distance is
+ * asked for, so the server never calls it; `write` keeps a new one (on every change: put a delay in it if your storage is slow).
+ */
+export declare function createZoom(r: ZoomRange, keep?: {
+    read?: () => number | null;
+    write?: (d: number) => void;
+}): Zoom;
+type Listens = Pick<EventTarget, "addEventListener" | "removeEventListener">;
+/**
+ * The wheel over `el` (the game's canvas: the page does not scroll or zoom there) and the + and − keys on the window (also the number pad's) move
+ * `zoom`. A key with ctrl, alt or the command key is the browser's own zoom and is left alone, and so is a key typed in a field. `skip(e)` returns true
+ * for an event the game wants to keep from the zoom (a key the player is binding, a game that is paused). Returns the function that takes the listeners away.
+ * The touch pinch is yours to wire (`pinchStart`, `pinch`, `pinchEnd`), because the fingers are also your thumb stick and your look.
+ */
+export declare function listenZoom(zoom: Zoom, el: Listens, opts?: {
+    skip?: (e: Event) => boolean;
+    keys?: boolean;
+}, win?: Listens): () => void;
+export {};

package/dist/input/zoom.js

@@ -0,0 +1,140 @@
+// The camera's distance for a game the player walks in: the mouse wheel, a trackpad's two-finger scroll or pinch, a two-finger pinch on a touch
+// screen, and the + and − keys move one number, the camera's distance from the eyes, along ONE curve. 0 is first person; below `first` the camera
+// is in the eyes. It eases to the distance asked for (at once with reduced motion). No package: plain browser events.
+//
+// THE FEEL is nano133.com's island (app/island/zoom.ts). Each notch moves the distance in proportion to it (`0.35 + 0.14 × distance` metres a
+// notch), so a notch feels the same near and far. Every bit of a scroll counts: a dead zone and a speed limit dropped most of a quick spin in
+// Echo Island, and its wheel needed about five times the spins of the island's (Wes, 2026-11-01). Close in, the last notch goes all the way to
+// the eyes; out of the eyes, the first notch goes past the switch, so the camera never rests half inside the head.
+//
+// THE PINCH follows the same curve: the curve is a constant ratio of `distance + 2.5`, so spreading the fingers to twice their start divides it
+// by 2^PINCH.power, wherever the camera is.
+/** One notch: about one mouse-wheel click (100 px of scroll). The + and − keys move `key` notches. */
+export const ZOOM_STEP = { perPx: 0.006, perPxPinch: 0.03, linePx: 16, pagePx: 400, key: 1.2 };
+/** The curve: a notch moves `base + scale × distance` metres. */
+export const ZOOM_CURVE = { base: 0.35, scale: 0.14 };
+/** The touch pinch: twice the spread divides `distance + base/scale` by 2^power. */
+export const PINCH = { power: 1.3 };
+/** How fast the camera eases to the distance asked for (1/s). */
+export const ZOOM_EASE = 9;
+const clamp = (r, d) => Math.min(r.max, Math.max(0, d));
+/** One wheel event as notches (negative: in). A mouse notch arrives in lines or about 100 px, a trackpad in many small pixels, a pinch as a wheel with the ctrl key. */
+export function wheelNotches(e) {
+    const px = e.deltaMode === 1 ? e.deltaY * ZOOM_STEP.linePx : e.deltaMode === 2 ? e.deltaY * ZOOM_STEP.pagePx : e.deltaY;
+    return px * (e.ctrlKey ? ZOOM_STEP.perPxPinch : ZOOM_STEP.perPx);
+}
+/** The snap: close in, a move into the switch goes to the eyes; out of the eyes, a move out goes past the switch. */
+function snapped(r, from, to) {
+    if (to < from && to < r.first)
+        return 0;
+    if (to > from && from < r.first)
+        return clamp(r, Math.max(to, r.first + 1));
+    return clamp(r, to);
+}
+/** The distance after `notches` (negative: in) from `want`. */
+export function zoomedBy(r, want, notches) {
+    return snapped(r, want, want + notches * (ZOOM_CURVE.base + want * ZOOM_CURVE.scale));
+}
+/** The distance during a touch pinch: `from` at the start, the fingers `spread0` apart then and `spread` now (px). Apart brings it in. */
+export function pinchedTo(r, from, spread0, spread) {
+    if (!(spread0 > 0) || !(spread > 0))
+        return from;
+    const k = ZOOM_CURVE.base / ZOOM_CURVE.scale;
+    return snapped(r, from, (from + k) * (spread0 / spread) ** PINCH.power - k);
+}
+/**
+ * The camera's distance of one game. `read` gives the kept distance (null: none, the default `start`), and is read the first time the distance is
+ * asked for, so the server never calls it; `write` keeps a new one (on every change: put a delay in it if your storage is slow).
+ */
+export function createZoom(r, keep = {}) {
+    let want = r.start;
+    let now = r.start;
+    let loaded = false;
+    let pinchFrom = null;
+    const listeners = new Set();
+    const load = () => {
+        if (loaded)
+            return;
+        loaded = true;
+        const v = keep.read?.();
+        if (typeof v === "number" && Number.isFinite(v))
+            want = now = clamp(r, v);
+    };
+    const set = (d) => {
+        load();
+        want = clamp(r, d);
+        keep.write?.(want);
+        for (const on of listeners)
+            on();
+    };
+    const by = (notches) => {
+        load();
+        if (notches !== 0)
+            set(zoomedBy(r, want, notches));
+    };
+    return {
+        want: () => (load(), want),
+        now: () => (load(), now),
+        eyes: () => (load(), now < r.first),
+        set,
+        by,
+        wheel: (e) => by(wheelNotches(e)),
+        pinchStart(spread) {
+            load();
+            pinchFrom = { d: want, spread };
+        },
+        pinch(spread) {
+            if (pinchFrom)
+                set(pinchedTo(r, pinchFrom.d, pinchFrom.spread, spread));
+        },
+        pinchEnd() {
+            pinchFrom = null;
+        },
+        step(dt, calm) {
+            load();
+            now = calm ? want : now + (want - now) * (1 - Math.exp(-dt * ZOOM_EASE));
+            if (Math.abs(now - want) < 0.002)
+                now = want;
+            return now;
+        },
+        subscribe(on) {
+            listeners.add(on);
+            return () => void listeners.delete(on);
+        },
+    };
+}
+/**
+ * The wheel over `el` (the game's canvas: the page does not scroll or zoom there) and the + and − keys on the window (also the number pad's) move
+ * `zoom`. A key with ctrl, alt or the command key is the browser's own zoom and is left alone, and so is a key typed in a field. `skip(e)` returns true
+ * for an event the game wants to keep from the zoom (a key the player is binding, a game that is paused). Returns the function that takes the listeners away.
+ * The touch pinch is yours to wire (`pinchStart`, `pinch`, `pinchEnd`), because the fingers are also your thumb stick and your look.
+ */
+export function listenZoom(zoom, el, opts = {}, win = window) {
+    const wheel = (e) => {
+        e.preventDefault();
+        if (opts.skip?.(e))
+            return;
+        zoom.wheel(e);
+    };
+    const key = (e) => {
+        const k = e;
+        if (k.metaKey || k.altKey || k.ctrlKey || opts.skip?.(e))
+            return;
+        const t = k.target;
+        if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName ?? "")))
+            return;
+        if (k.code === "Equal" || k.code === "NumpadAdd")
+            zoom.by(-ZOOM_STEP.key);
+        else if (k.code === "Minus" || k.code === "NumpadSubtract")
+            zoom.by(ZOOM_STEP.key);
+    };
+    el.addEventListener("wheel", wheel, { passive: false });
+    const keys = opts.keys !== false;
+    if (keys)
+        win.addEventListener("keydown", key);
+    return () => {
+        el.removeEventListener("wheel", wheel);
+        if (keys)
+            win.removeEventListener("keydown", key);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano133/nanoterra",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Nanoterra for a creator's game, in one package: the player's sign-in ticket, the player's character (a toon body on the island's skeleton), the looks ladder, the admin and its wallet sign-in, the friends list, an options menu, emotes, the player's sign-in (a passkey or a wallet app) and a shop that sells looks for Nano with no key on the server.",
   "type": "module",
   "main": "dist/index.js",

package/src/input/index.ts

@@ -16,6 +16,11 @@
 // calls your `pause` when the player really left (a free round stops its clock and shows a Resume key). No package: plain browser events.
 //
 // A ROUND THAT COSTS MONEY must not pause: its deadline must not move. Keep `releaseWhenLost` (the character always stops) and leave `pauseWhenLeft` out.
+//
+// The camera's distance (the wheel, a pinch, the + and − keys, one curve) is `createZoom` and `listenZoom`, in ./zoom.ts.
+
+export { createZoom, listenZoom, pinchedTo, wheelNotches, zoomedBy, PINCH, ZOOM_CURVE, ZOOM_EASE, ZOOM_STEP } from "./zoom.js";
+export type { Zoom, ZoomRange } from "./zoom.js";
 
 type Listens = Pick<EventTarget, "addEventListener" | "removeEventListener">;
 

package/src/input/zoom.ts

@@ -0,0 +1,160 @@
+// The camera's distance for a game the player walks in: the mouse wheel, a trackpad's two-finger scroll or pinch, a two-finger pinch on a touch
+// screen, and the + and − keys move one number, the camera's distance from the eyes, along ONE curve. 0 is first person; below `first` the camera
+// is in the eyes. It eases to the distance asked for (at once with reduced motion). No package: plain browser events.
+//
+// THE FEEL is nano133.com's island (app/island/zoom.ts). Each notch moves the distance in proportion to it (`0.35 + 0.14 × distance` metres a
+// notch), so a notch feels the same near and far. Every bit of a scroll counts: a dead zone and a speed limit dropped most of a quick spin in
+// Echo Island, and its wheel needed about five times the spins of the island's (Wes, 2026-11-01). Close in, the last notch goes all the way to
+// the eyes; out of the eyes, the first notch goes past the switch, so the camera never rests half inside the head.
+//
+// THE PINCH follows the same curve: the curve is a constant ratio of `distance + 2.5`, so spreading the fingers to twice their start divides it
+// by 2^PINCH.power, wherever the camera is.
+
+/** Where the camera may be (metres from the eyes): the farthest, the default, and the switch: nearer than `first` it is in the eyes. */
+export type ZoomRange = { max: number; start: number; first: number };
+
+/** One notch: about one mouse-wheel click (100 px of scroll). The + and − keys move `key` notches. */
+export const ZOOM_STEP = { perPx: 0.006, perPxPinch: 0.03, linePx: 16, pagePx: 400, key: 1.2 } as const;
+/** The curve: a notch moves `base + scale × distance` metres. */
+export const ZOOM_CURVE = { base: 0.35, scale: 0.14 } as const;
+/** The touch pinch: twice the spread divides `distance + base/scale` by 2^power. */
+export const PINCH = { power: 1.3 } as const;
+/** How fast the camera eases to the distance asked for (1/s). */
+export const ZOOM_EASE = 9;
+
+const clamp = (r: ZoomRange, d: number) => Math.min(r.max, Math.max(0, d));
+
+/** One wheel event as notches (negative: in). A mouse notch arrives in lines or about 100 px, a trackpad in many small pixels, a pinch as a wheel with the ctrl key. */
+export function wheelNotches(e: { deltaY: number; deltaMode?: number; ctrlKey?: boolean }): number {
+  const px = e.deltaMode === 1 ? e.deltaY * ZOOM_STEP.linePx : e.deltaMode === 2 ? e.deltaY * ZOOM_STEP.pagePx : e.deltaY;
+  return px * (e.ctrlKey ? ZOOM_STEP.perPxPinch : ZOOM_STEP.perPx);
+}
+
+/** The snap: close in, a move into the switch goes to the eyes; out of the eyes, a move out goes past the switch. */
+function snapped(r: ZoomRange, from: number, to: number): number {
+  if (to < from && to < r.first) return 0;
+  if (to > from && from < r.first) return clamp(r, Math.max(to, r.first + 1));
+  return clamp(r, to);
+}
+
+/** The distance after `notches` (negative: in) from `want`. */
+export function zoomedBy(r: ZoomRange, want: number, notches: number): number {
+  return snapped(r, want, want + notches * (ZOOM_CURVE.base + want * ZOOM_CURVE.scale));
+}
+
+/** The distance during a touch pinch: `from` at the start, the fingers `spread0` apart then and `spread` now (px). Apart brings it in. */
+export function pinchedTo(r: ZoomRange, from: number, spread0: number, spread: number): number {
+  if (!(spread0 > 0) || !(spread > 0)) return from;
+  const k = ZOOM_CURVE.base / ZOOM_CURVE.scale;
+  return snapped(r, from, (from + k) * (spread0 / spread) ** PINCH.power - k);
+}
+
+export type Zoom = {
+  /** The distance asked for (metres from the eyes). */
+  want(): number;
+  /** The distance now, as the last `step` eased it. */
+  now(): number;
+  /** True while the camera is in the eyes (the distance now below `first`). */
+  eyes(): boolean;
+  /** Asks for a distance (clamped), writes it and tells the listeners. */
+  set(d: number): void;
+  /** Moves the distance by notches (negative: in), along the curve. */
+  by(notches: number): void;
+  /** A wheel event (or one like it) moves the distance. */
+  wheel(e: { deltaY: number; deltaMode?: number; ctrlKey?: boolean }): void;
+  /** A touch pinch starts with the fingers `spread` apart (px); `pinch` follows it; `pinchEnd` ends it. */
+  pinchStart(spread: number): void;
+  pinch(spread: number): void;
+  pinchEnd(): void;
+  /** One frame: the distance eases to the one asked for (at once when `calm`, reduced motion). Returns it. */
+  step(dt: number, calm: boolean): number;
+  /** Calls `on` when the distance asked for changes. Returns the function that stops it. */
+  subscribe(on: () => void): () => void;
+};
+
+/**
+ * The camera's distance of one game. `read` gives the kept distance (null: none, the default `start`), and is read the first time the distance is
+ * asked for, so the server never calls it; `write` keeps a new one (on every change: put a delay in it if your storage is slow).
+ */
+export function createZoom(r: ZoomRange, keep: { read?: () => number | null; write?: (d: number) => void } = {}): Zoom {
+  let want = r.start;
+  let now = r.start;
+  let loaded = false;
+  let pinchFrom: { d: number; spread: number } | null = null;
+  const listeners = new Set<() => void>();
+  const load = () => {
+    if (loaded) return;
+    loaded = true;
+    const v = keep.read?.();
+    if (typeof v === "number" && Number.isFinite(v)) want = now = clamp(r, v);
+  };
+  const set = (d: number) => {
+    load();
+    want = clamp(r, d);
+    keep.write?.(want);
+    for (const on of listeners) on();
+  };
+  const by = (notches: number) => {
+    load();
+    if (notches !== 0) set(zoomedBy(r, want, notches));
+  };
+  return {
+    want: () => (load(), want),
+    now: () => (load(), now),
+    eyes: () => (load(), now < r.first),
+    set,
+    by,
+    wheel: (e) => by(wheelNotches(e)),
+    pinchStart(spread) {
+      load();
+      pinchFrom = { d: want, spread };
+    },
+    pinch(spread) {
+      if (pinchFrom) set(pinchedTo(r, pinchFrom.d, pinchFrom.spread, spread));
+    },
+    pinchEnd() {
+      pinchFrom = null;
+    },
+    step(dt, calm) {
+      load();
+      now = calm ? want : now + (want - now) * (1 - Math.exp(-dt * ZOOM_EASE));
+      if (Math.abs(now - want) < 0.002) now = want;
+      return now;
+    },
+    subscribe(on) {
+      listeners.add(on);
+      return () => void listeners.delete(on);
+    },
+  };
+}
+
+type Listens = Pick<EventTarget, "addEventListener" | "removeEventListener">;
+
+/**
+ * The wheel over `el` (the game's canvas: the page does not scroll or zoom there) and the + and − keys on the window (also the number pad's) move
+ * `zoom`. A key with ctrl, alt or the command key is the browser's own zoom and is left alone, and so is a key typed in a field. `skip(e)` returns true
+ * for an event the game wants to keep from the zoom (a key the player is binding, a game that is paused). Returns the function that takes the listeners away.
+ * The touch pinch is yours to wire (`pinchStart`, `pinch`, `pinchEnd`), because the fingers are also your thumb stick and your look.
+ */
+export function listenZoom(zoom: Zoom, el: Listens, opts: { skip?: (e: Event) => boolean; keys?: boolean } = {}, win: Listens = window): () => void {
+  const wheel = (e: Event) => {
+    e.preventDefault();
+    if (opts.skip?.(e)) return;
+    zoom.wheel(e as WheelEvent);
+  };
+  const key = (e: Event) => {
+    const k = e as KeyboardEvent;
+    if (k.metaKey || k.altKey || k.ctrlKey || opts.skip?.(e)) return;
+    const t = k.target as HTMLElement | null;
+    if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName ?? ""))) return;
+    if (k.code === "Equal" || k.code === "NumpadAdd") zoom.by(-ZOOM_STEP.key);
+    else if (k.code === "Minus" || k.code === "NumpadSubtract") zoom.by(ZOOM_STEP.key);
+  };
+  el.addEventListener("wheel", wheel, { passive: false });
+  const keys = opts.keys !== false;
+  if (keys) win.addEventListener("keydown", key);
+  return () => {
+    el.removeEventListener("wheel", wheel);
+    if (keys) win.removeEventListener("keydown", key);
+  };
+}