@johnmorrisdotca/kyogijo-stadiums 0.44.2 → 0.45.0

package/CHANGELOG.md

@@ -7,6 +7,53 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.45.0] - 2026-10-30
+
+### Added
+
+- **`quality`: how much the 3D view of a district draws, so that it turns well on every device.** A setting of the 3D view (`quality: "auto" | "high" | "medium" | "low"`, `auto` by default; `view.quality`, `view.tier`, `view.setQuality(quality)`, `onQualityChange`, and `qualityTuning` for a test or an unusual screen; docs/quality.md). `high` is everything as it always was: the same elements and the same pixels as before (checked against 0.44.2 for every preset, in Chromium to the byte of the screenshot, light and dark, and in WebKit at the same place on the page). `auto` starts on `high`, times the frames the view makes while it turns (not the browser's name, not the device's model) and steps a tier down when the mean interval is over 21 ms (under 48 frames a second) for a window, and a tier up when the mean has been 18.5 ms or less for 5 seconds. A try upward that fails is taken back and the next one waits twice as long (5, 10, 20, 40, 80, 160 seconds, at most 5 minutes), so a device on the edge between two tiers settles on the lower and never flickers; a display that refreshes at 30 Hz is measured once, when idle, and not taken for a slow view. A step draws the world again and **keeps the camera where it is** (the lower tiers are framed as `high` is, and the pointer, the auto-turn and a drag in the middle of being made are not touched).
+- **The tiers.** `medium`: the 24 biggest buildings round a district stand up (130 at `high`), every other footprint stays on the floor; every other tree; a small venue (under 12 percent of the plan) is one block with its height; the small parts of a venue (benches, glass, goals, posts, masts, fascia, rails) and the faint floors of a building are left out, the crowd in the stands is blocks of colour at most 0.6 full; the crowd outside is half as many people on a canvas 0.7 as wide. `low`: no building stands up (footprints only, shaded by height), one tree in four, a venue under 40 percent of the plan is a ring of walls open at the top with its field showing inside, no crowd outside. A district of one venue is never drawn as a block, and the flat 2D plan is not changed by any tier.
+- **The pixel ratio of the layers is capped on a phone or a tablet** (a coarse pointer or a screen of 820 CSS pixels or less on a side, `handheld()`): `auto` makes the layers at a ratio of 2 at most, `medium` 1.5 and `low` 1, and a layer past a budget of device pixels (2 million at `medium`, 1 million at `low` on a handheld) is made smaller still. A layer is made that share as wide and as high and its matrix widens it back, so the picture is the same and it holds the square of the share as many device pixels. **What this does and does not do** is in docs/quality.md: the sizes reported here are the boxes times the ratio squared, which is what the Kodokan's 680 megabytes were counted by; an engine that draws a layer again at the scale its matrix has (Chromium does, and screenshots in both engines do) makes the same pixels from it, and we could not measure the memory an iPhone allocates. What is certain is the tiers' own reduction of layers (the Kodokan's faint floors: 152 planes down to 42 at `medium` and `low`).
+- **The demo's district page has the choice in its own controls over the view**: Auto, High, Medium and Low (finger-wide, in light and dark, in English and Japanese) with a line that says what was asked for and what is drawn now ("Auto: drawn at Medium for now."), `?quality=auto|high|medium|low` in the address (`auto`, the default, is left out), and a press changes the tier without moving the camera or stopping the turn.
+- `scripts/perf-district.mjs --quality high,medium,low,auto` measures each tier of every preset, and for `auto` turns the view until its tier has stood still for four seconds and says the tier it settled on and the steps it took. Layers are now counted in WebKit too.
+- Tests: every tier draws every preset without a page error (unit and demo e2e, three browsers); `high` equals no `quality` (planes, floor, markup); the governor on simulated devices (a fast one, a slow one, one on the edge, a 30 Hz and a 120 Hz display, hitches, pauses); a press and a drag keep the camera; `auto` steps down under a CPU slowed 6 times and back up when it is released (Chromium); a tier held by name is never changed by the frames; each lower tier holds the plane budget of the performance test; the controls are finger-wide and not in the browser's own style.
+
+### Measured
+
+Frames a second of a turn made of pointer moves, planes drawn and layers, on a Mac Studio (Apple silicon) that was **heavily loaded by other work during every run (load average 27 to 90)**, so the numbers are good for comparing tiers and not for their last digit. "Before" is 0.44.2, built beside this release and measured by the same script; `high` here is the same page as before, so those two columns differ only by the load of the minute.
+
+| Preset | Planes: high / medium / low | Chromium, CPU x4, frames a second: before / high / medium / low / auto (tier it settled on) | WebKit phone, ratio 3: before / high / medium / low / auto (tier) |
+|---|---|---|---|
+| Rogers Arena alone | 547 / 442 / 280 | 30 / 30 / 38 / 44 / 52 (low) | 48 / 59 / 59 / 59 / 59 (high) |
+| BC Place and Rogers Arena | 1,309 / 983 / 42 | 14 / 13 / 18 / 60 / 60 (low) | 28 / 63 / 59 / 59 / 59 (high) |
+| BC Place (soccer) and Rogers Arena | 1,305 / 983 / 42 | 15 / 15 / 22 / 60 / 60 (low) | 26 / 59 / 59 / 59 / 63 (high) |
+| Seattle Center | 1,088 / 606 / 220 | 21 / 22 / 33 / 60 / 61 (low) | 10 / 6 / 19 / 59 / 59 (low) |
+| SoDo | 1,346 / 926 / 61 | 15 / 14 / 18 / 60 / 60 (low) | 7 / 4 / 11 / 59 / 59 (low) |
+| Seattle, three venues (city) | 2,175 / 280 / 88 | 9 / 8 / 58 / 60 / 58 (medium) | 17 / 15 / 59 / 59 / 63 (medium) |
+| Tokyo Dome City | 2,049 / 839 / 42 | 10 / 9 / 21 / 60 / 60 (low) | 9 / 8 / 26 / 59 / 59 (low) |
+| Tokyo Dome City and the Kodokan | 2,286 / 900 / 83 | 9 / 8 / 19 / 59 / 60 (low) | 6 / 6 / 31 / 59 / 27 (medium) |
+| The Kodokan alone | 152 / 42 / 42 | 60 / 51 / 60 / 60 / 60 (high) | 24 / 36 / 59 / 59 / 59 (medium) |
+
+`auto` settles on 48 frames a second or more on every preset with the CPU slowed 4 times in Chromium (desk and phone window), and on 60 on a desk with nothing slowed, except Tokyo Dome City (48: its `high` takes 20 ms a frame, just under the budget). The one row under 30 is WebKit's Tokyo Dome City and the Kodokan (27, on `medium`, measured at a load average of 60: its `medium` measures 31 on a quieter minute and `low` 59). The planes of `high` are those of 0.44.2, in the same order.
+
+| Preset | Chromium desk, nothing slowed: `auto` frames a second (tier) | Chromium phone, ratio 3: layers in megabytes, before / `auto` at its start / `medium` / `low` |
+|---|---|---|
+| Rogers Arena alone | 60 (high) | 100 / 44 / 17 / 5 |
+| BC Place and Rogers Arena | 60 (high) | 118 / 52 / 22 / 4 |
+| BC Place (soccer) and Rogers Arena | 60 (high) | 118 / 53 / 22 / 4 |
+| Seattle Center | 60 (high) | 98 / 43 / 18 / 5 |
+| SoDo | 60 (high) | 86 / 38 / 18 / 4 |
+| Seattle, three venues (city) | 60 (high) | 50 / 22 / 8 / 4 |
+| Tokyo Dome City | 48 (high) | 76 / 34 / 15 / 4 |
+| Tokyo Dome City and the Kodokan | 60 (high) | 78 / 35 / 14 / 4 |
+| The Kodokan alone | 60 (high) | 713 / 317 / 67 / 32 |
+
+(The layer sizes are the page's own boxes times the pixel ratio squared, as before; see what the cap does and does not do above.)
+
+### Changed
+
+- The district page's outside-crowd levels are 48 pixels high, as the new quality bar's are (they were 44).
+
 ## [0.44.2] - 2026-10-29
 
 ### Changed

package/dist/context.d.ts

@@ -145,6 +145,8 @@ export declare function placeContext(areas: readonly ContextArea[], origin: LonL
     w: number;
     h: number;
 }, venues: readonly ContextVenue[]): ContextPlan;
+/** A share of the trees, spread evenly over the lot: every tree at 1, none at 0, and at 0.5 every other. The same trees every time, so that a view drawn again at a tier keeps the ones it kept. */
+export declare function thinTrees(trees: readonly ContextTree[], share: number): ContextTree[];
 /** The tone (0 low to 3 tall) of a building of `feet` height. */
 export declare const toneOf: (feet: number) => number;
 /** The streets flat on the floor, under the buildings: a path for each kind and width (a foot), widest and lowest kinds first, so that a sidewalk lies over the carriageway beside it and a viaduct's deck over the street under it. */

package/dist/context.js

@@ -149,6 +149,23 @@ export function placeContext(areas, origin, turn, frame, venues) {
     const credits = (language) => [...new Set(layers.map((l) => l.attribution[language]).filter((text) => text !== ""))];
     return { blocks, streets, land, trees, owned, attribution: { en: credits("en"), ja: credits("ja") } };
 }
+/** A share of the trees, spread evenly over the lot: every tree at 1, none at 0, and at 0.5 every other. The same trees every time, so that a view drawn again at a tier keeps the ones it kept. */
+export function thinTrees(trees, share) {
+    if (share >= 1)
+        return [...trees];
+    if (!(share > 0))
+        return [];
+    const kept = [];
+    let owed = 0;
+    for (const tree of trees) {
+        owed += share;
+        if (owed >= 1) {
+            owed -= 1;
+            kept.push(tree);
+        }
+    }
+    return kept;
+}
 /** The tone (0 low to 3 tall) of a building of `feet` height. */
 export const toneOf = (feet) => CONTEXT_TONES.filter((m) => feet / FEET_PER_METRE >= m).length;
 const num = (value) => String(Math.round(value * 100) / 100);

package/dist/district.turn.js

@@ -3,7 +3,8 @@
 // plan drawn with each venue's building only. The model it makes is a `TurnModel`, so the camera, the controls, the pointer, the auto-turn and the steady fit of every other 3D view are this one's; its
 // buildings are stacked building by building (`Plane.group`), the far one first, so that a roof never shows through a nearer building.
 import { describeDistrict, districtId, drawDistrict, drawMember, nestedDrawing, planDistrict, surfaceCentre } from "./district.js";
-import { blockPlanes, contextUprights, shellBlock, slabPlanes } from "./context.js";
+import { blockPlanes, contextUprights, shellBlock, slabPlanes, thinTrees } from "./context.js";
+import { TIER_PROFILES, tierOf } from "./quality.js";
 import { dojo } from "./budo/dojo.api.js";
 import { KODOKAN_FLOORS, KODOKAN_GALLERY_LEVEL } from "./kodokan.js";
 import { APART, n, plane } from "./turn.kit.js";
@@ -54,6 +55,27 @@ function placeInDistrict(p, placed, centre, prefix, group, lift = 0) {
     }
     return moved;
 }
+/** The box a district at `high` is framed to, kept for the options it was worked out for, so that a lower tier is framed exactly as `high` is: the camera does not move when the tier changes. */
+const HIGH_BOX = new WeakMap();
+/** The small parts of a venue that the lower tiers leave out: its furniture and fittings, never its stands, walls, floor or roof. */
+const SMALL_PARTS = new Set(["bench", "glass", "post", "goal", "stanchion", "pole", "pylon", "mast", "fascia", "rail", "platform", "apron", "flag", "board", "frame", "rim", "net", "antenna", "tape"]);
+/** How high a venue that is drawn as a block stands, in feet, by what it is: a stand-in for its stands and roof, near what its own model reaches. */
+const BLOCK_HEIGHT = { arena: 100, stadium: 115, park: 95, hall: 60 };
+/** A venue drawn as a proxy is a closed block while it is smaller than this share of the plan's longest side, and a ring of walls open at the top (the field and its stands show inside) above it. */
+const SOLID_BELOW = 0.12;
+/** The planes of a venue drawn as a proxy, in the venue's own group, tinted as a venue and not as the buildings round it: its outline standing up to its height, closed by a roof when it is small, a ring of walls seen from both sides when it is not. */
+function venueBlock(key, kind, ring, prefix, group, open) {
+    const height = BLOCK_HEIGHT[kind] ?? 90;
+    const block = shellBlock(`venue-${key}`, ring, open ? height * 0.6 : height, undefined);
+    const planes = blockPlanes(block, `${prefix}proxy-`).filter((p) => !open || /w\d+$/.test(p.id));
+    return planes.map((p) => {
+        const tinted = { ...p, svg: p.svg.replace(/u-block-roof/g, "u-proxy-roof").replace(/u-block-([abc])/g, "u-proxy-$1").replace(/u-block /g, "u-proxy "), group };
+        // Seen from both sides: the inside of the far wall shows over the field.
+        if (open)
+            delete tinted.cull;
+        return tinted;
+    });
+}
 /** A name that faces the eye, standing over a building: its text on a plate. */
 function sign(id, text, at, bottom, size, group) {
     const wide = Math.max(size * 2.2, size * 0.62 * text.length + size * 1.2);
@@ -70,6 +92,9 @@ export function buildDistrictTurn(options, settings = {}) {
     const plan = planDistrict(options);
     const base = districtId(options);
     const id = settings.id ?? `${base}-turn`;
+    // How much is drawn: the tier asked for (a view that chooses by its frames builds it again at each tier).
+    const profile = TIER_PROFILES[tierOf(settings.quality)];
+    const longest = Math.max(plan.view.w, plan.view.h);
     const labels = options.labels ?? plan.mode === "city";
     const items = [];
     const defs = [];
@@ -77,12 +102,23 @@ export function buildDistrictTurn(options, settings = {}) {
     plan.members.forEach((placed, i) => {
         const member = placed.member;
         const prefix = `m${i}-`;
+        // A small venue, in a tier that draws such as a block: its outline standing up to its height, and nothing of its stands.
+        const xs = placed.footprint.map((q) => q[0]);
+        const ys = placed.footprint.map((q) => q[1]);
+        const plain = member.shell === undefined && member.parts === undefined && member.elevation === undefined && member.plate === undefined && member.slabs === undefined;
+        const span = Math.max(Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
+        // (A district of one venue never draws it as a block: it is what the view is of.)
+        if (plain && plan.members.length > 1 && profile.proxy > 0 && span < profile.proxy * longest) {
+            items.push({ id: `${prefix}proxy`, kind: "blocks", at: placed.at, height: BLOCK_HEIGHT[member.kind] ?? 90, planes: venueBlock(member.key, member.kind, placed.footprint, prefix, i, span >= SOLID_BELOW * longest) });
+            return;
+        }
         // A venue may have several surfaces (the rooms of a floor): each is built as its own 3D view is, with the crowd drawn without its seats on its floor and the stands raised, and put where the plan puts it, in the venue's one group.
         placed.parts.forEach((pp, j) => {
             const part = pp.part;
             const tag = j === 0 ? "" : `p${j}`;
             const memberId = `${id}-m${i}${tag}`;
-            const model = buildTurn({ ...part.options, language, ...(options.theme === undefined ? {} : { theme: options.theme }), id: `${base}-m${i}${tag}` }, { ...settings, id: memberId, venue: { roof: true, ...(typeof settings.venue === "object" ? settings.venue : {}) }, preset: undefined, view: undefined });
+            const crowd = part.options.crowd;
+            const model = buildTurn({ ...part.options, ...(profile.simple && typeof crowd === "object" && crowd !== null ? { crowd: { ...crowd, detail: "plain", density: Math.min(crowd.density ?? 0.85, 0.6) } } : {}), language, ...(options.theme === undefined ? {} : { theme: options.theme }), id: `${base}-m${i}${tag}` }, { ...settings, id: memberId, venue: { roof: true, ...(typeof settings.venue === "object" ? settings.venue : {}) }, preset: undefined, view: undefined });
             const centre = surfaceCentre(part.options);
             const pfx = `m${i}${tag}-`;
             // A surface on an upper floor (the Kodokan's dojos) stands that high over the ground, on a floor drawn in the air; the ground under it is left bare.
@@ -91,7 +127,7 @@ export function buildDistrictTurn(options, settings = {}) {
             const lowest = (p) => Math.min(p.o[2], p.o[2] + p.u[2], p.o[2] + p.v[2], p.o[2] + p.u[2] + p.v[2]);
             const shown = (p) => part.show === undefined || (part.show === "gallery") === (lowest(p) >= KODOKAN_GALLERY_LEVEL - 1e-6);
             for (const item of model.uprights.items) {
-                const planes = item.planes.filter((p) => p.kind !== "ground" && shown(p)).map((p) => placeInDistrict(p, pp, centre, pfx, i, lift));
+                const planes = item.planes.filter((p) => p.kind !== "ground" && shown(p) && !(profile.simple && SMALL_PARTS.has(p.kind))).map((p) => placeInDistrict(p, pp, centre, pfx, i, lift));
                 if (planes.length > 0) {
                     const [ax, ay] = item.at;
                     const [rx, ry] = rot([ax - centre[0], ay - centre[1]], pp.angle);
@@ -142,6 +178,9 @@ export function buildDistrictTurn(options, settings = {}) {
                 // The great dojo's floor, seen with every floor, has its own slab; and a solid building hides what is in it.
                 if (!chosen && ((member.plate === undefined && slab.floor === 7) || options.building === "solid"))
                     continue;
+                // The faint floors are as big as the building (each is a layer of its own, a megapixel and more): the lower tiers keep the chosen floor's and leave the others out.
+                if (!chosen && profile.simple)
+                    continue;
                 const ids = chosen ? { top: `${prefix}plate`, side: `${prefix}plate-s` } : { top: `${prefix}plate-f${slab.floor}-top`, side: `${prefix}plate-f${slab.floor}-s` };
                 const planes = slabPlanes(placed.footprint, slab.level, thick, ids, chosen ? "chosen" : "faint").map((p) => ({ ...p, group: i }));
                 items.push({ id: ids.top, kind: "deck", at: placed.at, height: slab.level, planes });
@@ -156,7 +195,7 @@ export function buildDistrictTurn(options, settings = {}) {
     });
     // The buildings round the venues stand apart from them: each block's planes are of no venue's group.
     if (plan.context !== undefined)
-        for (const item of contextUprights(plan.context))
+        for (const item of contextUprights(plan.context, profile.blocks))
             items.push({ ...item, planes: item.planes.map((p) => ({ ...p, group: APART })) });
     if (labels) {
         const size = Math.max(plan.view.w, plan.view.h) * (plan.mode === "city" ? 0.016 : 0.022);
@@ -172,9 +211,24 @@ export function buildDistrictTurn(options, settings = {}) {
     const area = { x0: view.x, y0: view.y, x1: view.x + view.w, y1: view.y + view.h };
     const uprights = { items, lift: 0, thin: Math.hypot(view.w, view.h) * 0.0012, area, whole: true, ...(defs.length === 0 ? {} : { defs: defs.join("") }) };
     const planes = planesOf(uprights);
-    const box = sceneBox(planes, area, 0, centre, scale);
+    // The camera is fitted to what the district is at `high`, whatever tier it is drawn at: a view that changes tier keeps its camera where it is, and the lower tiers stand in the same frame.
+    let box = sceneBox(planes, area, 0, centre, scale);
+    if (profile.tier !== "high") {
+        const key = JSON.stringify(settings.venue ?? null);
+        const known = HIGH_BOX.get(options);
+        if (known?.key === key)
+            box = known.box;
+        else {
+            box = buildDistrictTurn(options, { ...settings, quality: "high" }).box;
+            HIGH_BOX.set(options, { key, box });
+        }
+    }
+    else
+        HIGH_BOX.set(options, { key: JSON.stringify(settings.venue ?? null), box });
     // (The floor has no names: the 3D view's own signs, which face the eye, carry them.)
-    const floor = drawDistrict({ ...options, id: base, labels: false }, plan, (member, i, part) => drawMember(member, { ...options, id: base }, i, base, { floor: true }, part));
+    // (The trees of the tiers that draw fewer are thinned on the floor only: a tree is a dot there.)
+    const floorPlan = profile.trees < 1 && plan.context?.trees !== undefined ? { ...plan, context: { ...plan.context, trees: thinTrees(plan.context.trees, profile.trees) } } : plan;
+    const floor = drawDistrict({ ...options, id: base, labels: false }, floorPlan, (member, i, part) => drawMember(member, { ...options, id: base }, i, base, { floor: true }, part));
     const { title, description } = describeDistrict(options, plan);
     const presets = districtPresets(plan);
     const surfaceLike = { sport: "soccer", language, ...(options.theme === undefined ? {} : { theme: options.theme }), ...(options.style === undefined ? {} : { style: options.style }) };
@@ -199,6 +253,7 @@ export function buildDistrictTurn(options, settings = {}) {
         centre,
         view: openingView(settings, presets),
         turnable: true,
+        tiered: true,
         presets,
         // A scene that turns about its middle with buildings far from it wants a longer lens, so that what swings toward the eye does not swell.
         lens: 12,

package/dist/judging.mount.js

@@ -62,6 +62,13 @@ export function mountJudgingBroadcast(host, options, settings = {}) {
         direction: () => turn.direction(),
         setDirection: (direction) => turn.setDirection(direction),
         togglePlay: () => turn.togglePlay(),
+        get quality() {
+            return turn.quality;
+        },
+        get tier() {
+            return turn.tier;
+        },
+        setQuality: (quality) => turn.setQuality(quality),
         svg: () => turn.svg(),
         destroy: () => {
             turn.destroy();

package/dist/outside.dom.d.ts

@@ -16,6 +16,11 @@ export interface OutsideLayer {
     /** The level shown. */
     readonly level: OutsideLevel;
     setLevel(level: OutsideLevel): void;
+    /** How much of the crowd a quality tier draws: the share of the people (0 hides the canvas) and the share of the usual width of the canvas. Painted again when it changes. */
+    setDetail(detail: {
+        people: number;
+        width: number;
+    }): void;
     /** The 3D view's zoom: a near view is painted finer (its people discs, not density). The paint is redone only when the zoom crosses `NEAR`. */
     zoom(zoom: number): void;
     /** What the last paint cost, in milliseconds, and drew: `undefined` before the first. */

package/dist/outside.dom.js

@@ -37,6 +37,7 @@ function watchTheme(doc, change) {
 function layerOf(canvas, spec, colourFrom, size) {
     const doc = canvas.ownerDocument;
     let level = spec.level;
+    let detail = { people: 1, width: 1 };
     let ink = inkOf(colourFrom());
     let drawn = "";
     let alive = true;
@@ -62,11 +63,18 @@ function layerOf(canvas, spec, colourFrom, size) {
             layer.zoomTier = tier;
             layer.repaint();
         },
+        setDetail(next) {
+            if (next.people === detail.people && next.width === detail.width)
+                return;
+            detail = next;
+            layer.repaint();
+        },
         repaint(force = false) {
             if (!alive)
                 return;
-            const width = Math.min(MAX_WIDE, Math.max(1, Math.round(size())));
-            if (level === 0) {
+            const width = Math.min(MAX_WIDE, Math.max(1, Math.round(size() * detail.width)));
+            const shown = Math.round(level * detail.people);
+            if (level === 0 || shown === 0) {
                 // Nobody: the canvas is made one pixel, so that it holds no memory.
                 if (canvas.width !== 1 || canvas.height !== 1) {
                     canvas.width = 1;
@@ -81,11 +89,11 @@ function layerOf(canvas, spec, colourFrom, size) {
                 return;
             canvas.hidden = false;
             const frame = frameOf(spec.viewBox, width);
-            const key = `${level}|${frame.width}x${frame.height}|${ink.join(",")}`;
+            const key = `${shown}|${frame.width}x${frame.height}|${ink.join(",")}`;
             if (!force && key === drawn)
                 return;
             const started = performance.now();
-            const { rgba, stats } = rasterOutside(crowd, level, frame, ink);
+            const { rgba, stats } = rasterOutside(crowd, shown, frame, ink);
             if (canvas.width !== frame.width || canvas.height !== frame.height) {
                 canvas.width = frame.width;
                 canvas.height = frame.height;
@@ -134,7 +142,7 @@ export function attachOutside3d(floor, spec, prefetchCrowd = true) {
     canvas.setAttribute("data-outside", String(spec.level));
     canvas.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none";
     floor.append(canvas);
-    const layer = layerOf(canvas, spec, () => floor.querySelector(".ky-district") ?? floor, () => (parseFloat(floor.style.width) || floor.clientWidth || 1400) * (layer.zoomTier === 1 ? 2.4 : 1.4));
+    const layer = layerOf(canvas, spec, () => floor.querySelector(".ky-district") ?? floor, () => ((parseFloat(floor.style.width) || floor.clientWidth || 1400) / (parseFloat(floor.dataset.raster ?? "") || 1)) * (layer.zoomTier === 1 ? 2.4 : 1.4));
     const set = layer.setLevel;
     layer.setLevel = (next) => {
         canvas.setAttribute("data-outside", String(next));

package/dist/quality.d.ts

@@ -0,0 +1,110 @@
+/** The tiers of detail, from the most to the least. */
+export type QualityTier = "high" | "medium" | "low";
+/** What a view is asked for: one tier, or `auto`, which chooses by the frames the view makes. */
+export type Quality = "auto" | QualityTier;
+/** The tiers, highest first: a step down is one place later in this list. */
+export declare const QUALITY_TIERS: readonly QualityTier[];
+/** The values a page can ask for: `auto` and the tiers. */
+export declare const QUALITIES: readonly Quality[];
+/** What a tier draws. */
+export interface TierProfile {
+    tier: QualityTier;
+    /** The most buildings of a district's context that stand up as blocks in the 3D view (the tallest and widest first); the rest are the floor's flat footprints, which every tier draws. */
+    blocks: number;
+    /** The share of the context's trees that are drawn, 0 to 1. */
+    trees: number;
+    /** A venue whose longest side is under this share of the plan's longest side is drawn as its footprint standing up to its height, one block, in place of its stands and roof; 0 draws every venue in full. */
+    proxy: number;
+    /** The small parts of a venue (benches, glass, posts, goals, the fascia and its fittings) are left out, and the crowd in its stands is drawn as blocks of colour. */
+    simple: boolean;
+    /** The share of the crowd outside that is drawn, 0 to 1 (0 hides it), and the width of its canvas as a share of the usual. */
+    outside: {
+        people: number;
+        width: number;
+    };
+    /** The pixel ratio the layers are rastered at, at most: on a phone or a tablet, and elsewhere. `Infinity` leaves the device's own. */
+    ratio: {
+        handheld: number;
+        other: number;
+    };
+}
+/** The profile of each tier. `high` leaves everything as it always was (the cap on a handheld's pixel ratio is the mode `auto`'s and is made in `rasterOf`). */
+export declare const TIER_PROFILES: Record<QualityTier, TierProfile>;
+/** Whether a value is one of the qualities. */
+export declare const isQuality: (value: unknown) => value is Quality;
+/** A quality from whatever a page or an address gave: the same if it is one, else `fallback`. */
+export declare const qualityOf: (value: unknown, fallback?: Quality) => Quality;
+/** The tier a view with no frames to go by is drawn at: the tier asked for, and `high` for `auto` (a page made on a server, a first draw). */
+export declare const tierOf: (quality: Quality | undefined) => QualityTier;
+/** The tier one step lower or higher than `tier`, or the same at the end. */
+export declare const lower: (tier: QualityTier) => QualityTier;
+export declare const higher: (tier: QualityTier) => QualityTier;
+/** What decides whether the device is a phone or a tablet: it has a coarse pointer, or its screen is small. It is asked of the page's own window, never of the browser's name. */
+export declare function handheld(win: {
+    matchMedia?: (query: string) => {
+        matches: boolean;
+    };
+    screen?: {
+        width: number;
+        height: number;
+    };
+    innerWidth?: number;
+} | null | undefined): boolean;
+/**
+ * The share of its size a layer is made at, from the device's pixel ratio `dpr`: a layer is made `share` times as wide and as high in CSS pixels and turned back to its size by its matrix, so that it holds `share` squared as many device
+ * pixels, as far as the engine keeps a layer's pixels to its own box (the layers of a district at a ratio of 3 are hundreds of megabytes, which a phone's browser does not always keep). An engine that draws a layer again at the scale its matrix has
+ * (Chromium does) makes the same pixels from it, so there it changes nothing, and the sizes this package reports are the boxes times the ratio squared, not what an engine allocates. 1 when the ratio is within the cap. The mode `auto` caps a handheld
+ * at 2 even at `high`; a tier asked for by name is exactly that tier's, and `high` asked for by name is the device's own ratio, as it always was.
+ */
+export declare function rasterOf(quality: Quality, tier: QualityTier, dpr: number, isHandheld: boolean): number;
+/**
+ * The most device pixels one layer may hold in a tier: a flat floor of a building is a layer as big as the building's box (the Kodokan's fourteen plates are 47 megabytes each at a ratio of 3), so a layer past the budget is made smaller
+ * still (see `rasterOf`). `Infinity` at `high`, by name or in `auto`.
+ */
+export declare function layerBudget(tier: QualityTier, isHandheld: boolean): number;
+/**
+ * The share of its size each layer is made at, from the sizes the layers would have at full size (their boxes in CSS pixels), the share every layer is made at (`rasterOf`), the device's pixel ratio and the layer budget: a layer is
+ * made at the smaller of the share and the one that holds `budget` device pixels, never under a fifth. The floor comes first, then the planes, as `layoutOf` takes them.
+ */
+export declare function rasterShares(sizes: readonly (readonly [number, number])[], share: number, dpr: number, budget: number): number[];
+/** How the governor judges the frames. Times are in milliseconds. */
+export interface GovernorTuning {
+    /** The frames in a window it keeps (the oldest are dropped past twice this), and the fewest it judges: a window is also at least `settleMs` long, so a view at 60 frames a second judges 42 frames and one at 6 frames a second judges 8. */
+    frames: number;
+    minFrames: number;
+    settleMs: number;
+    /** The first frames after the view is mounted are slow whatever it holds (scripts are still compiling, the page is still being laid out): they are not judged. */
+    warmMs: number;
+    /** The mean interval between frames above which the view is over budget (21 is below 48 frames a second: a view that misses a refresh in three does not hold 60; it widens on a display that refreshes slower than 60 Hz), and the mean at or under which it is steady (18.5 holds 60 frames a second). */
+    budgetMs: number;
+    steadyMs: number;
+    /** How long the view must stay steady before it tries the tier above, and the most that wait grows to after steps that were taken back. */
+    upAfterMs: number;
+    maxUpAfterMs: number;
+    /** Frames are ignored for this long after a step, while the view is drawn again. */
+    quietMs: number;
+    /** A gap longer than this between two frames is a pause (a hidden page, a stopped turn), not a slow frame. */
+    pauseMs: number;
+}
+export declare const GOVERNOR_TUNING: GovernorTuning;
+/** What the governor does with a frame. */
+export interface Governor {
+    /** The tier now. */
+    readonly tier: QualityTier;
+    /** Give it the time since the last frame and the time now; it gives the new tier when it steps, else `undefined`. */
+    frame(interval: number, now: number): QualityTier | undefined;
+    /** The interval of the display, in milliseconds, as the page measured it with nothing else going on (16.7 for 60 Hz, 33.3 for a phone in a power-saving mode): a display that refreshes slower than 60 Hz is not taken for a view that is too slow. 16.7 until told. */
+    display(interval: number): void;
+    /** Forget the frames so far (the turn stopped, the page was hidden). */
+    pause(): void;
+    /** Put it on a tier without a step (a page chose one). */
+    set(tier: QualityTier, now?: number): void;
+    /** How long it now waits, steady, before it tries a tier up. */
+    readonly wait: number;
+}
+/**
+ * The governor of a view that turns. It keeps a window of frame intervals; when their mean is over budget it steps one tier down, and when the mean has been steady for `wait` it tries one tier up. A try that goes over budget
+ * is taken back, and every step down within thirty seconds of a step up doubles the wait (up to `maxUpAfterMs`), so a device on the edge between two tiers settles on the lower one and stays there. A step up that holds (steady
+ * for `settleMs` after it) leaves the wait as it was.
+ */
+export declare function createGovernor(start: QualityTier, tuning?: Partial<GovernorTuning>): Governor;

package/dist/quality.js

@@ -0,0 +1,160 @@
+// How much a 3D view draws, so that it turns well on every device. A view has three tiers of detail, `high` (everything, as it always was), `medium` and `low`, and a mode, `auto`, that chooses the tier by watching the frames
+// the view really makes while it turns: nothing here looks at the browser's name or the device's model. A tier says what is left out or made smaller (the buildings round a district stand up fewer, the trees and the crowd are thinner, a
+// small or far venue is a block with its height, the layers are rastered at a lower pixel ratio); the governor steps a tier down when the frames run over budget for a while and back up when they have been steady for longer, with a wait
+// after a step up that fails that doubles each time, so that the view never flickers between two tiers. Pure: numbers in, numbers out; `turn.dom.ts` feeds it frames and `district.turn.ts` reads the tier's profile.
+/** The tiers, highest first: a step down is one place later in this list. */
+export const QUALITY_TIERS = ["high", "medium", "low"];
+/** The values a page can ask for: `auto` and the tiers. */
+export const QUALITIES = ["auto", ...QUALITY_TIERS];
+/** The profile of each tier. `high` leaves everything as it always was (the cap on a handheld's pixel ratio is the mode `auto`'s and is made in `rasterOf`). */
+export const TIER_PROFILES = {
+    high: { tier: "high", blocks: 130, trees: 1, proxy: 0, simple: false, outside: { people: 1, width: 1 }, ratio: { handheld: Infinity, other: Infinity } },
+    medium: { tier: "medium", blocks: 24, trees: 0.5, proxy: 0.12, simple: true, outside: { people: 0.5, width: 0.7 }, ratio: { handheld: 1.5, other: 2 } },
+    low: { tier: "low", blocks: 0, trees: 0.25, proxy: 0.4, simple: true, outside: { people: 0, width: 0.5 }, ratio: { handheld: 1, other: 1 } },
+};
+/** Whether a value is one of the qualities. */
+export const isQuality = (value) => typeof value === "string" && QUALITIES.includes(value);
+/** A quality from whatever a page or an address gave: the same if it is one, else `fallback`. */
+export const qualityOf = (value, fallback = "auto") => (isQuality(value) ? value : fallback);
+/** The tier a view with no frames to go by is drawn at: the tier asked for, and `high` for `auto` (a page made on a server, a first draw). */
+export const tierOf = (quality) => (quality === undefined || quality === "auto" ? "high" : quality);
+/** The tier one step lower or higher than `tier`, or the same at the end. */
+export const lower = (tier) => QUALITY_TIERS[Math.min(QUALITY_TIERS.length - 1, QUALITY_TIERS.indexOf(tier) + 1)];
+export const higher = (tier) => QUALITY_TIERS[Math.max(0, QUALITY_TIERS.indexOf(tier) - 1)];
+/** What decides whether the device is a phone or a tablet: it has a coarse pointer, or its screen is small. It is asked of the page's own window, never of the browser's name. */
+export function handheld(win) {
+    if (win === null || win === undefined)
+        return false;
+    if (win.matchMedia?.("(pointer: coarse)").matches === true)
+        return true;
+    const sides = [win.screen?.width, win.screen?.height, win.innerWidth].filter((n) => typeof n === "number" && n > 0);
+    return sides.length > 0 && Math.min(...sides) <= 820;
+}
+/**
+ * The share of its size a layer is made at, from the device's pixel ratio `dpr`: a layer is made `share` times as wide and as high in CSS pixels and turned back to its size by its matrix, so that it holds `share` squared as many device
+ * pixels, as far as the engine keeps a layer's pixels to its own box (the layers of a district at a ratio of 3 are hundreds of megabytes, which a phone's browser does not always keep). An engine that draws a layer again at the scale its matrix has
+ * (Chromium does) makes the same pixels from it, so there it changes nothing, and the sizes this package reports are the boxes times the ratio squared, not what an engine allocates. 1 when the ratio is within the cap. The mode `auto` caps a handheld
+ * at 2 even at `high`; a tier asked for by name is exactly that tier's, and `high` asked for by name is the device's own ratio, as it always was.
+ */
+export function rasterOf(quality, tier, dpr, isHandheld) {
+    const cap = quality === "auto" && tier === "high" ? (isHandheld ? 2 : Infinity) : TIER_PROFILES[tier].ratio[isHandheld ? "handheld" : "other"];
+    if (!(dpr > 0) || dpr <= cap)
+        return 1;
+    return Math.max(0.25, Math.round((cap / dpr) * 1000) / 1000);
+}
+/**
+ * The most device pixels one layer may hold in a tier: a flat floor of a building is a layer as big as the building's box (the Kodokan's fourteen plates are 47 megabytes each at a ratio of 3), so a layer past the budget is made smaller
+ * still (see `rasterOf`). `Infinity` at `high`, by name or in `auto`.
+ */
+export function layerBudget(tier, isHandheld) {
+    if (tier === "high")
+        return Infinity;
+    return { medium: isHandheld ? 2e6 : 4e6, low: isHandheld ? 1e6 : 2e6 }[tier];
+}
+/**
+ * The share of its size each layer is made at, from the sizes the layers would have at full size (their boxes in CSS pixels), the share every layer is made at (`rasterOf`), the device's pixel ratio and the layer budget: a layer is
+ * made at the smaller of the share and the one that holds `budget` device pixels, never under a fifth. The floor comes first, then the planes, as `layoutOf` takes them.
+ */
+export function rasterShares(sizes, share, dpr, budget) {
+    const ratio = dpr > 0 ? dpr : 1;
+    return sizes.map(([w, h]) => {
+        const area = w * h * ratio * ratio;
+        const own = area > budget ? Math.sqrt(budget / area) : 1;
+        return Math.max(0.2, Math.round(Math.min(share, own) * 1000) / 1000);
+    });
+}
+export const GOVERNOR_TUNING = { frames: 24, minFrames: 8, settleMs: 700, warmMs: 600, budgetMs: 21, steadyMs: 18.5, upAfterMs: 5000, maxUpAfterMs: 300000, quietMs: 600, pauseMs: 250 };
+/**
+ * The governor of a view that turns. It keeps a window of frame intervals; when their mean is over budget it steps one tier down, and when the mean has been steady for `wait` it tries one tier up. A try that goes over budget
+ * is taken back, and every step down within thirty seconds of a step up doubles the wait (up to `maxUpAfterMs`), so a device on the edge between two tiers settles on the lower one and stays there. A step up that holds (steady
+ * for `settleMs` after it) leaves the wait as it was.
+ */
+export function createGovernor(start, tuning = {}) {
+    const t = { ...GOVERNOR_TUNING, ...tuning };
+    let tier = start;
+    let wait = t.upAfterMs;
+    let window = [];
+    let since = 0;
+    let quietUntil = 0;
+    let steadyFrom;
+    let lastUp = -Infinity;
+    let firstAt;
+    // The interval of the display: told by the page, which measures it with nothing else going on (a view that cannot keep up looks, from its frames alone, like a screen that refreshes more slowly).
+    let refresh = 16.7;
+    const reset = (now) => {
+        window = [];
+        since = now;
+        steadyFrom = undefined;
+    };
+    const step = (to, now) => {
+        tier = to;
+        quietUntil = now + t.quietMs;
+        reset(now);
+        return tier;
+    };
+    return {
+        get tier() {
+            return tier;
+        },
+        get wait() {
+            return wait;
+        },
+        display(interval) {
+            if (Number.isFinite(interval))
+                refresh = Math.min(34, Math.max(6, interval));
+        },
+        pause() {
+            window = [];
+            steadyFrom = undefined;
+        },
+        set(next, now = 0) {
+            tier = next;
+            quietUntil = now + t.quietMs;
+            reset(now);
+        },
+        frame(interval, now) {
+            if (interval > t.pauseMs || interval <= 0) {
+                window = [];
+                steadyFrom = undefined;
+                return undefined;
+            }
+            firstAt ?? (firstAt = now);
+            if (now < quietUntil || now - firstAt < t.warmMs)
+                return undefined;
+            if (window.length === 0)
+                since = now - interval;
+            window.push(interval);
+            if (window.length > t.frames * 2)
+                window.shift();
+            if (window.length < t.minFrames || now - since < t.settleMs)
+                return undefined;
+            const mean = window.reduce((s, x) => s + x, 0) / window.length;
+            const slow = refresh / 16.7;
+            const budget = Math.max(t.budgetMs, t.budgetMs * slow);
+            // Steady is steady on any display: only a view that really holds 60 frames a second tries a tier up.
+            const steady = t.steadyMs;
+            // Over budget is judged without the slowest frames of the window (a hitch, a script that ran in the middle of a turn is not a slow view); steady is judged with all of them.
+            const sorted = [...window].sort((x, y) => x - y).slice(0, window.length - Math.max(1, Math.floor(window.length / 12)));
+            const trimmed = sorted.reduce((sum, x) => sum + x, 0) / sorted.length;
+            if (trimmed > budget && tier !== "low") {
+                // A step down soon after a step up is a try that failed: the next try waits longer.
+                if (now - lastUp < 30000)
+                    wait = Math.min(t.maxUpAfterMs, wait * 2);
+                return step(lower(tier), now);
+            }
+            if (mean <= steady) {
+                steadyFrom ?? (steadyFrom = now);
+                if (tier !== "high" && now - steadyFrom >= wait) {
+                    lastUp = now;
+                    return step(higher(tier), now);
+                }
+            }
+            else
+                steadyFrom = undefined;
+            // Window turned over: judge the next frames afresh once it is full of them.
+            if (window.length >= t.frames * 2)
+                window = window.slice(t.frames);
+            return undefined;
+        },
+    };
+}

package/dist/turn-entry.d.ts

@@ -4,6 +4,8 @@ export { buildTurn, floorOptions, openingView } from "./turn.model.ts";
 export { turnDirection } from "./turn.camera.ts";
 export type { TurnDirection } from "./turn.camera.ts";
 export type { TurnModel, TurnSettings } from "./turn.model.ts";
+export { GOVERNOR_TUNING, QUALITIES, QUALITY_TIERS, TIER_PROFILES, createGovernor, handheld, isQuality, qualityOf, rasterOf, tierOf } from "./quality.ts";
+export type { Governor, GovernorTuning, Quality, QualityTier, TierProfile } from "./quality.ts";
 export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./turn.markup.ts";
 export type { Layout } from "./turn.markup.ts";
 export { KYOGIJO_TURN_STYLE } from "./turn.style.ts";

package/dist/turn-entry.js

@@ -2,6 +2,7 @@
 export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.js";
 export { buildTurn, floorOptions, openingView } from "./turn.model.js";
 export { turnDirection } from "./turn.camera.js";
+export { GOVERNOR_TUNING, QUALITIES, QUALITY_TIERS, TIER_PROFILES, createGovernor, handheld, isQuality, qualityOf, rasterOf, tierOf } from "./quality.js";
 export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./turn.markup.js";
 export { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 export { CURLING_PRESETS, LONG_PRESETS, NET_PRESETS, PITCH_MAX, STEP, TURN_DEFAULT, TURN_PRESETS, TURN_PRESET_NAMES, ZOOM_MAX, ZOOM_MIN, cameraMatrix, clampView, depthOf, drag, eyeDistance, fit, matrix3d, multiply, nudge, presetOf, presetView, presetsFor, project, step } from "./turn.camera.js";

package/dist/turn.dom.d.ts

@@ -2,6 +2,7 @@ import { type TurnDirection, type TurnPreset, type TurnView } from "./turn.camer
 import { type TurnModel, type TurnSettings } from "./turn.model.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";
 import type { VenueSettings } from "./venue.ts";
+import { type Quality, type QualityTier } from "./quality.ts";
 import type { OutsideLevel } from "./outside.paint.ts";
 /** What `mountKyogijoTurn` gives back. `O` is what `update` takes: the options of a drawing, or (for `mountMultiTurn`) of a tournament layout. */
 export interface KyogijoTurn<O = SurfaceOptions | ScoreOptions> {
@@ -43,6 +44,12 @@ export interface KyogijoTurn<O = SurfaceOptions | ScoreOptions> {
         mode: string;
         pixels: number;
     } | undefined;
+    /** What the view was asked to draw: `auto`, or the tier it is held at. */
+    readonly quality: Quality;
+    /** The tier the view is drawn at now: what `quality` says, and for `auto` the one the frames have led it to (`high` at first). */
+    readonly tier: QualityTier;
+    /** Change what the view is asked to draw: a tier is taken at once, `auto` goes on from the tier it is at. The camera and the auto-turn are not touched. */
+    setQuality(quality: Quality): void;
     /** The flat drawing that is the floor, or `null` after `destroy`. */
     svg(): SVGSVGElement | null;
     /** Stop listening and empty the container. */

package/dist/turn.dom.js

@@ -10,6 +10,8 @@ import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 import { esc } from "./format.js";
 import { turnBoardMarkup } from "./overlay.js";
 import { attachOutside3d } from "./outside.dom.js";
+import { TIER_PROFILES, createGovernor, handheld, layerBudget, qualityOf, rasterOf, rasterShares, tierOf } from "./quality.js";
+import { size } from "./turn.kit.js";
 /** True where the page can draw a plane in 3D by one `matrix3d`: that is, nearly everywhere with a stylesheet. */
 export function turnSupported(win = typeof window === "undefined" ? undefined : window) {
     const css = win?.CSS;
@@ -43,7 +45,33 @@ export function mountTurn(host, options, settings, build) {
     const win = doc.defaultView;
     /** The venue's settings as they are now: the mounted ones, altered by `update`. */
     let venue = settings.venue;
-    let model = build(options, settings);
+    // How much is drawn: what was asked, and the tier it is drawn at (`auto` starts on `high` and is moved by the frames the view makes while it turns).
+    let quality = qualityOf(settings.quality);
+    let tier = tierOf(quality);
+    // (Set again below, once the model is built, for a view that has no tiers.)
+    const isHandheld = handheld(win);
+    /** The share of its size each layer is made at for a model, now: one number when they all are, one each when the biggest are held to a budget of pixels. */
+    const rasterFor = (of) => {
+        // (Only a model that has tiers is made smaller: a surface on its own is small, and nothing of it would be left out.)
+        if (of.tiered !== true)
+            return 1;
+        const dpr = win?.devicePixelRatio ?? 1;
+        const share = rasterOf(quality, tier, dpr, isHandheld);
+        const budget = layerBudget(tier, isHandheld);
+        if (share === 1 && budget === Infinity)
+            return 1;
+        const boxes = [[of.viewBox.w * of.scale, of.viewBox.h * of.scale], ...of.planes.map((p) => { const [w, h] = size(p); return [w * of.scale, h * of.scale]; })];
+        return rasterShares(boxes, share, dpr, budget);
+    };
+    const sameRaster = (a, b) => (typeof a === "number" || typeof b === "number" ? a === b : a.length === b.length && a.every((x, i) => x === b[i]));
+    let current = options;
+    let model = build(options, { ...settings, quality: tier });
+    if (model.tiered !== true)
+        tier = "high";
+    let raster = rasterFor(model);
+    /** The models built at each tier for the options now, so that a step back to a tier is not built again. */
+    let made = new Map([[tier, model]]);
+    const baseId = model.id;
     /** What names the four viewpoints: the model's own table (a tournament layout has one), else the sport's. */
     const sport = () => model.presets ?? model.options.sport;
     const supported = turnSupported(win ?? undefined) && model.turnable;
@@ -66,6 +94,9 @@ export function mountTurn(host, options, settings, build) {
             direction: () => turnDirection(settings.direction),
             setDirection: () => undefined,
             togglePlay: () => false,
+            quality: qualityOf(settings.quality),
+            tier: tierOf(settings.quality),
+            setQuality: () => undefined,
             update: (next, change) => {
                 if (change?.venue !== undefined)
                     venue = { ...(typeof venue === "object" ? venue : {}), ...change.venue };
@@ -79,7 +110,7 @@ export function mountTurn(host, options, settings, build) {
             },
         };
     }
-    host.innerHTML = turnMarkupOf(model, settings);
+    host.innerHTML = turnMarkupOf(model, settings, raster);
     const root = host.querySelector(".ky-turn");
     const stage = root.querySelector(".ky-turn-view");
     const live = root.querySelector(".ky-turn-live");
@@ -119,8 +150,116 @@ export function mountTurn(host, options, settings, build) {
         outside?.destroy();
         const floor = stage.querySelector(".ky-turn-floor");
         outside = model.outside === undefined || floor === null ? undefined : attachOutside3d(floor, model.outside);
+        outside?.setDetail(TIER_PROFILES[tier].outside);
     };
     crowd();
+    root.dataset.quality = quality;
+    root.dataset.tier = tier;
+    // ---- Quality: in `auto`, the frames the view makes while it turns decide the tier. ----
+    let governor = quality === "auto" && win !== null && model.tiered === true ? createGovernor(tier, settings.qualityTuning) : undefined;
+    let meterFrame;
+    let lastStamp;
+    let lastPaint = 0;
+    /** The display's own interval, measured once with nothing else going on: an idle loop of frames a moment after the mount (the lower decile of their intervals, so that a busy moment does not count). */
+    let probe;
+    let displayMs;
+    const probeDisplay = () => {
+        if (win === null || probe !== undefined || displayMs !== undefined)
+            return;
+        const found = [];
+        let before;
+        const step = (stamp) => {
+            probe = undefined;
+            if (!alive || win === null)
+                return;
+            if (doc.hidden === true) {
+                // Hidden: start over when it can be seen.
+                found.length = 0;
+                before = undefined;
+                probe = win.setTimeout(() => (probe = win.requestAnimationFrame(step)), 400);
+                return;
+            }
+            if (before !== undefined)
+                found.push(stamp - before);
+            before = stamp;
+            if (found.length < 24)
+                probe = win.requestAnimationFrame(step);
+            else {
+                displayMs = [...found].sort((a, b) => a - b)[Math.floor(found.length * 0.1)];
+                governor?.display(displayMs);
+            }
+        };
+        probe = win.setTimeout(() => (probe = win.requestAnimationFrame(step)), 350);
+    };
+    const stopMeter = () => {
+        if (meterFrame !== undefined)
+            win?.cancelAnimationFrame(meterFrame);
+        meterFrame = undefined;
+        lastStamp = undefined;
+    };
+    if (governor !== undefined)
+        probeDisplay();
+    /** The loop that times the frames: it runs while the view is being painted and for a third of a second after, and does nothing while the view is still. */
+    const meterTick = (stamp) => {
+        meterFrame = undefined;
+        if (!alive || governor === undefined || win === null)
+            return;
+        if (doc.hidden === true || stamp - lastPaint > 300) {
+            lastStamp = undefined;
+            governor.pause();
+            return;
+        }
+        const next = lastStamp === undefined ? undefined : governor.frame(stamp - lastStamp, stamp);
+        lastStamp = next === undefined ? stamp : undefined;
+        // (A step draws the view again, which asks for the loop itself: only one is ever running.)
+        if (next !== undefined)
+            retier(next);
+        if (meterFrame === undefined)
+            meterFrame = win.requestAnimationFrame(meterTick);
+    };
+    /** The view was painted: the frames are timed from now until it is still. */
+    const touched = () => {
+        if (governor === undefined || win === null)
+            return;
+        lastPaint = win.performance.now();
+        if (meterFrame === undefined)
+            meterFrame = win.requestAnimationFrame(meterTick);
+    };
+    /** Draw the world again, from the model of the tier and the options now: the camera, the auto-turn and the pointer are not touched (the elements are the only thing replaced). */
+    const renderWorld = () => {
+        const known = made.get(tier);
+        model = known ?? build(current, { ...settings, quality: tier, id: settings.id ?? baseId, venue, preset: undefined, view });
+        made.set(tier, model);
+        raster = rasterFor(model);
+        const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens, false, raster);
+        const world = root.querySelector(".ky-turn-world");
+        world.innerHTML = worldMarkup(model, layout, raster);
+        // The look the floor is painted in (and the theme) are attributes of the world.
+        for (const name of ["data-sport", "data-look", "data-theme"])
+            world.removeAttribute(name);
+        world.className = model.look === undefined ? "ky-turn-world" : "ky-turn-world kyogijo";
+        if (model.look !== undefined) {
+            world.setAttribute("data-sport", model.look.sport);
+            world.setAttribute("data-look", model.look.look);
+            const forced = model.options.theme;
+            if (forced === "light" || forced === "dark")
+                world.setAttribute("data-theme", forced);
+        }
+        gather();
+        crowd();
+        root.dataset.quality = quality;
+        root.dataset.tier = tier;
+    };
+    /** The governor stepped: draw at the new tier. */
+    const retier = (next) => {
+        if (next === tier)
+            return;
+        tier = next;
+        renderWorld();
+        paint(shown);
+        label();
+        settings.onQualityChange?.(tier, quality);
+    };
     const buttons = () => root.querySelectorAll("button[data-preset]");
     /** The Play button says what it is and what it does: pressed while the view turns. */
     const syncPlay = () => {
@@ -138,7 +277,7 @@ export function mountTurn(host, options, settings, build) {
     const paint = (now) => {
         const width = stage.clientWidth || 960;
         const height = stage.clientHeight || 600;
-        const layout = layoutOf(model, now, width, height, settings.lens, true);
+        const layout = layoutOf(model, now, width, height, settings.lens, true, raster);
         outside?.zoom(now.zoom);
         const culled = layout.culled;
         elements.forEach((one, i) => {
@@ -159,6 +298,7 @@ export function mountTurn(host, options, settings, build) {
             if (faded[i] !== o)
                 one.style.opacity = faded[i] = o;
         });
+        touched();
     };
     const label = () => {
         const here = presetOf(view, sport());
@@ -481,25 +621,11 @@ export function mountTurn(host, options, settings, build) {
                 return;
             if (change?.venue !== undefined)
                 venue = { ...(typeof venue === "object" ? venue : {}), ...change.venue };
-            model = build(next, { ...settings, id: settings.id ?? model.id, venue, preset: undefined, view });
+            current = next;
+            made = new Map();
             view = clampView(view);
+            renderWorld();
             opening = openingView(settings, sport());
-            const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens);
-            const world = root.querySelector(".ky-turn-world");
-            world.innerHTML = worldMarkup(model, layout);
-            // The look the floor is painted in (and the theme) are attributes of the world.
-            for (const name of ["data-sport", "data-look", "data-theme"])
-                world.removeAttribute(name);
-            world.className = model.look === undefined ? "ky-turn-world" : "ky-turn-world kyogijo";
-            if (model.look !== undefined) {
-                world.setAttribute("data-sport", model.look.sport);
-                world.setAttribute("data-look", model.look.look);
-                const forced = model.options.theme;
-                if (forced === "light" || forced === "dark")
-                    world.setAttribute("data-theme", forced);
-            }
-            gather();
-            crowd();
             // The board is a layer of its own over the view, after the scene: it is written again, and the view's turn is not touched.
             stage.querySelector(".ky-turn-board")?.remove();
             if (model.board !== undefined)
@@ -525,6 +651,45 @@ export function mountTurn(host, options, settings, build) {
         get playing() {
             return playing;
         },
+        get quality() {
+            return quality;
+        },
+        get tier() {
+            return tier;
+        },
+        setQuality(asked) {
+            if (!alive)
+                return;
+            quality = qualityOf(asked, quality);
+            const was = tier;
+            if (model.tiered !== true) {
+                // A view that has no tiers draws as it does whatever is asked: the question is kept, and answered `high`.
+                governor = undefined;
+                stopMeter();
+                tier = "high";
+            }
+            else if (quality === "auto") {
+                stopMeter();
+                governor = win === null ? undefined : createGovernor(tier, settings.qualityTuning);
+                if (displayMs !== undefined)
+                    governor?.display(displayMs);
+                else
+                    probeDisplay();
+            }
+            else {
+                governor = undefined;
+                stopMeter();
+                tier = quality;
+            }
+            root.dataset.quality = quality;
+            // The tier, or the share its layers are made at, has changed: the world is drawn again (the shares are worked out for the model of the tier, in `renderWorld`).
+            if (tier !== was || !sameRaster(rasterFor(model), raster)) {
+                renderWorld();
+                paint(shown);
+                label();
+            }
+            settings.onQualityChange?.(tier, quality);
+        },
         play() {
             setPlaying(true);
             return playing;
@@ -557,6 +722,7 @@ export function mountTurn(host, options, settings, build) {
             outside?.destroy();
             stop();
             stopTick();
+            stopMeter();
             seen?.disconnect();
             doc.removeEventListener("visibilitychange", onVisible);
             clearTimeout(spoken);

package/dist/turn.markup.d.ts

@@ -2,6 +2,8 @@ import { type Placement, type TurnDirection, type TurnView } from "./turn.camera
 import { type Plane } from "./turn.kit.ts";
 import { type TurnModel, type TurnSettings } from "./turn.model.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";
+/** The share of its size each layer is made at: one number for all, or one for each (the floor first, then the planes in the model's order). */
+export type Raster = number | readonly number[];
 /**
  * The matrix that stands a plane in the scene, before the camera: its x along `u`, its y along `v`, its corner `o`, in pixels from the middle of the scene
  * (`centre`, in feet).
@@ -28,18 +30,19 @@ export interface Layout {
 }
 /**
  * Work a view out in a container `width` by `height` pixels. With `cull`, the faces of a closed solid that are turned away from the eye (`Plane.cull`) are left out: they have no transform and no place in the stack, and `culled` says
- * which, so that a page need not write them at all; without it every plane is laid out, as a still picture needs.
+ * which, so that a page need not write them at all; without it every plane is laid out, as a still picture needs. `raster` is the share of its size an element is made at (`rasterOf`): each element's matrix widens it back, so that the
+ * picture is the same and the layers hold `raster` squared as many pixels.
  */
-export declare function layoutOf(model: TurnModel, view: TurnView, width: number, height: number, lens?: number, cull?: boolean): Layout;
+export declare function layoutOf(model: TurnModel, view: TurnView, width: number, height: number, lens?: number, cull?: boolean, raster?: Raster): Layout;
 /** One plane as an element: its box in pixels and the SVG drawn on it in feet. */
-export declare function planeMarkup(p: Plane, scale: number, transform: string, stack: number, fade?: number): string;
+export declare function planeMarkup(p: Plane, scale: number, transform: string, stack: number, fade?: number, raster?: number): string;
 /**
  * A plane that is the floor's own drawing seen through its rectangle (`Plane.crop`): the floor's SVG again, its viewBox cut down to the plane's rectangle, in the plane's own box. It is a picture, not a second
  * description: it carries no role, title or description of its own.
  */
-export declare function cropMarkup(model: TurnModel, p: Plane, transform: string, stack: number, fade?: number): string;
+export declare function cropMarkup(model: TurnModel, p: Plane, transform: string, stack: number, fade?: number, raster?: number): string;
 /** The floor as an element: the flat drawing, in the pixels of the scene. */
-export declare function floorMarkup(model: TurnModel, transform: string, stack: number): string;
+export declare function floorMarkup(model: TurnModel, transform: string, stack: number, raster?: number): string;
 /** The patterns the venue's planes are drawn with, once, in a box of no size: every plane's SVG reads them by id, and the crowd's colours are on this element. */
 export declare function defsMarkup(model: TurnModel): string;
 /**
@@ -48,7 +51,7 @@ export declare function defsMarkup(model: TurnModel): string;
  */
 export declare function worldAttributes(model: TurnModel): string;
 /** The floor and the planes of a model, laid out. */
-export declare function worldMarkup(model: TurnModel, layout: Layout): string;
+export declare function worldMarkup(model: TurnModel, layout: Layout, raster?: Raster): string;
 /** The buttons under the view. */
 export declare function controlsMarkup(model: TurnModel, view: TurnView, playing?: boolean, direction?: TurnDirection): string;
 /** The size, in pixels, the first view is worked out for. */
@@ -57,7 +60,7 @@ export declare const sizeOf: (settings: TurnSettings) => {
     height: number;
 };
 /** The 3D view of a model as markup, laid out for `settings.size`; a page's script then makes it turn. */
-export declare function turnMarkupOf(model: TurnModel, settings?: TurnSettings): string;
+export declare function turnMarkupOf(model: TurnModel, settings?: TurnSettings, raster?: Raster): string;
 /**
  * A surface as a 3D view, as markup: the flat drawing for a floor, what stands on it as planes, and the controls under it. Pure, so it can be made on a
  * server; it is a still picture until `mountKyogijoTurn` (or the element) makes it turn in a page.

package/dist/turn.markup.js

@@ -9,6 +9,8 @@ import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 import { esc } from "./format.js";
 import { turnBoardMarkup } from "./overlay.js";
 const px = (value) => `${Math.round(value * 1000) / 1000}`;
+/** The share of the layer at `index` (0 the floor, then the planes). */
+const shareOf = (raster, index) => (typeof raster === "number" ? raster : (raster[index] ?? 1));
 /**
  * The matrix that stands a plane in the scene, before the camera: its x along `u`, its y along `v`, its corner `o`, in pixels from the middle of the scene
  * (`centre`, in feet).
@@ -88,9 +90,10 @@ function prepare(model) {
 const turnedAway = (m, side) => side * (m[0] * (m[5] * m[15] - m[13] * m[7]) - m[4] * (m[1] * m[15] - m[13] * m[3]) + m[12] * (m[1] * m[7] - m[5] * m[3])) <= 0;
 /**
  * Work a view out in a container `width` by `height` pixels. With `cull`, the faces of a closed solid that are turned away from the eye (`Plane.cull`) are left out: they have no transform and no place in the stack, and `culled` says
- * which, so that a page need not write them at all; without it every plane is laid out, as a still picture needs.
+ * which, so that a page need not write them at all; without it every plane is laid out, as a still picture needs. `raster` is the share of its size an element is made at (`rasterOf`): each element's matrix widens it back, so that the
+ * picture is the same and the layers hold `raster` squared as many pixels.
  */
-export function layoutOf(model, view, width, height, lens, cull = false) {
+export function layoutOf(model, view, width, height, lens, cull = false, raster = 1) {
     const distance = eyeDistance(width, height, lens ?? model.lens);
     const at = fit(model.box, { ...view, zoom: 1 }, width, height, distance);
     const camera = cameraMatrix(view, at, distance);
@@ -99,15 +102,24 @@ export function layoutOf(model, view, width, height, lens, cull = false) {
     const known = prepare(model);
     const floor = { id: "floor", kind: "ground", o: [model.viewBox.x, model.viewBox.y, model.uprights.lift], u: [model.viewBox.w, 0, 0], v: [0, model.viewBox.h, 0], svg: "" };
     const count = model.planes.length;
+    const widen = (m, index) => {
+        const share = shareOf(raster, index);
+        if (share === 1)
+            return m;
+        const back = 1 / share;
+        for (let i = 0; i < 8; i += 1)
+            m[i] *= back;
+        return m;
+    };
     const transforms = new Array(count + 1);
     const culled = cull ? new Array(count + 1).fill(false) : undefined;
     // A billboard faces the eye at this view.
     const planes = new Array(count);
     for (let i = 0; i < count; i += 1)
         planes[i] = facing(model.planes[i], view.yaw, view.pitch);
-    transforms[0] = matrix3d(multiply(camera, planeMatrix(floor, s, centre)));
+    transforms[0] = matrix3d(widen(multiply(camera, planeMatrix(floor, s, centre)), 0));
     for (let i = 0; i < count; i += 1) {
-        const m = multiply(camera, known.base[i] ?? planeMatrix(planes[i], s, centre));
+        const m = widen(multiply(camera, known.base[i] ?? planeMatrix(planes[i], s, centre)), i + 1);
         const side = planes[i].cull;
         if (culled !== undefined && side !== undefined && turnedAway(m, side)) {
             culled[i + 1] = true;
@@ -159,15 +171,16 @@ export function layoutOf(model, view, width, height, lens, cull = false) {
     return { at, transforms, stack, fade, ...(culled === undefined ? {} : { culled }) };
 }
 /** One plane as an element: its box in pixels and the SVG drawn on it in feet. */
-export function planeMarkup(p, scale, transform, stack, fade = 1) {
+export function planeMarkup(p, scale, transform, stack, fade = 1, raster = 1) {
     const [w, h] = size(p);
-    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" style="width:${px(w * scale)}px;height:${px(h * scale)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(w)} ${n(h)}" width="${px(w * scale)}" height="${px(h * scale)}" aria-hidden="true" focusable="false">${p.svg}</svg></div>`;
+    const [bw, bh] = [px(w * scale * raster), px(h * scale * raster)];
+    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" style="width:${bw}px;height:${bh}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(w)} ${n(h)}" width="${bw}" height="${bh}" aria-hidden="true" focusable="false">${p.svg}</svg></div>`;
 }
 /**
  * A plane that is the floor's own drawing seen through its rectangle (`Plane.crop`): the floor's SVG again, its viewBox cut down to the plane's rectangle, in the plane's own box. It is a picture, not a second
  * description: it carries no role, title or description of its own.
  */
-export function cropMarkup(model, p, transform, stack, fade = 1) {
+export function cropMarkup(model, p, transform, stack, fade = 1, raster = 1) {
     const [w, h] = size(p);
     const box = `${px(p.o[0])} ${px(p.o[1])} ${px(w)} ${px(h)}`;
     const picture = model.floor
@@ -177,12 +190,12 @@ export function cropMarkup(model, p, transform, stack, fade = 1) {
         .replace(/^<svg([^>]*?)\srole="img"/, '<svg$1 aria-hidden="true"')
         .replace(/^<svg([^>]*?)\saria-labelledby="[^"]*"/, "<svg$1")
         .replace(/<title\b[^>]*>[\s\S]*?<\/title>|<desc\b[^>]*>[\s\S]*?<\/desc>/g, "");
-    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" data-crop="floor" style="width:${px(w * model.scale)}px;height:${px(h * model.scale)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}">${picture}</div>`;
+    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" data-crop="floor" style="width:${px(w * model.scale * raster)}px;height:${px(h * model.scale * raster)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}">${picture}</div>`;
 }
 /** The floor as an element: the flat drawing, in the pixels of the scene. */
-export function floorMarkup(model, transform, stack) {
+export function floorMarkup(model, transform, stack, raster = 1) {
     const vb = model.viewBox;
-    return `<div class="ky-turn-floor" style="width:${px(vb.w * model.scale)}px;height:${px(vb.h * model.scale)}px;transform:${transform};z-index:${stack}">${model.floor}</div>`;
+    return `<div class="ky-turn-floor"${raster === 1 ? "" : ` data-raster="${raster}"`} style="width:${px(vb.w * model.scale * raster)}px;height:${px(vb.h * model.scale * raster)}px;transform:${transform};z-index:${stack}">${model.floor}</div>`;
 }
 /** The patterns the venue's planes are drawn with, once, in a box of no size: every plane's SVG reads them by id, and the crowd's colours are on this element. */
 export function defsMarkup(model) {
@@ -197,8 +210,8 @@ export function worldAttributes(model) {
     return model.look === undefined ? 'class="ky-turn-world"' : `class="ky-turn-world kyogijo" data-sport="${esc(model.look.sport)}" data-look="${esc(model.look.look)}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""}`;
 }
 /** The floor and the planes of a model, laid out. */
-export function worldMarkup(model, layout) {
-    return defsMarkup(model) + floorMarkup(model, layout.transforms[0], layout.stack[0]) + model.planes.map((p, i) => (p.crop === true ? cropMarkup(model, p, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]) : planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]))).join("");
+export function worldMarkup(model, layout, raster = 1) {
+    return defsMarkup(model) + floorMarkup(model, layout.transforms[0], layout.stack[0], shareOf(raster, 0)) + model.planes.map((p, i) => (p.crop === true ? cropMarkup(model, p, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1], shareOf(raster, i + 1)) : planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1], shareOf(raster, i + 1)))).join("");
 }
 /** The buttons under the view. */
 export function controlsMarkup(model, view, playing = false, direction = "counterclockwise") {
@@ -223,18 +236,18 @@ export function controlsMarkup(model, view, playing = false, direction = "counte
 /** The size, in pixels, the first view is worked out for. */
 export const sizeOf = (settings) => settings.size ?? { width: 960, height: 600 };
 /** The 3D view of a model as markup, laid out for `settings.size`; a page's script then makes it turn. */
-export function turnMarkupOf(model, settings = {}) {
+export function turnMarkupOf(model, settings = {}, raster = 1) {
     const words = turnWords(model);
     const { width, height } = sizeOf(settings);
     const view = model.view;
-    const layout = layoutOf(model, view, width, height, settings.lens);
+    const layout = layoutOf(model, view, width, height, settings.lens, false, raster);
     const keys = `${words.keys}${model.standing === "" ? "" : ` ${model.standing}`}`;
     const sheet = model.options.style === "none" ? "" : `<style>${KYOGIJO_TURN_STYLE}</style>`;
     const theme = model.options.theme;
     const sport = model.options.sport;
     return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, model.presets ?? sport) ?? "custom"}"${model.lighting === undefined ? "" : ` data-lighting="${model.lighting}"`}${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
         sheet +
-        `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home Space"><div ${worldAttributes(model)}>${worldMarkup(model, layout)}</div>${model.board === undefined ? "" : turnBoardMarkup(model.board)}</div>` +
+        `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home Space"><div ${worldAttributes(model)}>${worldMarkup(model, layout, raster)}</div>${model.board === undefined ? "" : turnBoardMarkup(model.board)}</div>` +
         `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +
         (settings.controls === false ? "" : controlsMarkup(model, view, false, turnDirection(settings.direction))) +
         `<div class="ky-turn-live" role="status" aria-live="polite"></div>` +

package/dist/turn.model.d.ts

@@ -6,6 +6,7 @@ import { type ResolvedBoard } from "./overlay.ts";
 import type { VenueSettings } from "./venue.ts";
 import type { Box3 } from "./turn.camera.ts";
 import type { OutsideSpec } from "./outside.dom.ts";
+import type { GovernorTuning, Quality, QualityTier } from "./quality.ts";
 import type { Language, LightingOptions, LightingPreset, ScoreOptions, SurfaceOptions } from "./types.ts";
 /** What can be asked of a 3D view. */
 export interface TurnSettings {
@@ -53,6 +54,16 @@ export interface TurnSettings {
     onDirectionChange?: (direction: TurnDirection) => void;
     /** Called with `true` when the auto-turn starts and `false` when it stops, whatever stopped it. */
     onPlayChange?: (playing: boolean) => void;
+    /**
+     * How much the view draws, so that it turns well on every device: `"auto"` (the default) starts on `high` and watches the frames the view makes while it turns, stepping a tier down when they run over budget for a while and back up
+     * when they have been steady for longer; `"high"` is everything as it always was; `"medium"` and `"low"` draw less (the buildings round a district stand up fewer, the trees and the crowd are thinner, a small venue is a block, and the layers
+     * are rastered at a lower pixel ratio). A tier asked for by name is kept; `setQuality` changes it at once, and the camera and the auto-turn go on. See `docs/quality.md`.
+     */
+    quality?: Quality;
+    /** How the frames are judged in `auto` (see `GovernorTuning`): for a test or a screen that is unusual; the defaults suit a 60 Hz display. */
+    qualityTuning?: Partial<GovernorTuning>;
+    /** Called with the tier the view is drawn at when it is first mounted and each time `auto` or `setQuality` changes it. */
+    onQualityChange?: (tier: QualityTier, quality: Quality) => void;
     /** Called after the view has changed by a key, a button or the pointer, with the view and the viewpoint it is (`undefined` when it has been turned by hand). */
     onChange?: (view: TurnView, preset: TurnPreset | undefined) => void;
 }
@@ -113,6 +124,8 @@ export interface TurnModel {
     }[];
     /** The board the options ask for (`board`), laid over the view: a layer of its own, never a plane of the scene. */
     board?: ResolvedBoard;
+    /** Whether the model has tiers: a district's does (`quality`), a single surface's does not, and the view does not time its frames or make its layers smaller for one that has none. */
+    tiered?: boolean;
     /** The crowd outside the venues of a district, asked for (`DistrictOptions.outside`): a canvas on the floor that the mount paints (`outside.dom.ts`), never a plane of the scene. */
     outside?: OutsideSpec;
 }

package/dist/turn.style.js

@@ -80,6 +80,12 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-slab-top{fill:var(--ky-up-blk-roof);stroke:var(--ky-up-blk-line);stroke-width:.5}
 .ky-turn .u-floorplate{fill:var(--ky-up-plate);stroke:var(--ky-up-plate-line);stroke-width:1.2;stroke-linejoin:round}
 .ky-turn .u-block-roof{fill:var(--ky-up-blk-roof);stroke:var(--ky-up-blk-line);stroke-width:.5;stroke-linejoin:round}
+/* A venue drawn as a proxy in the lower tiers (district.turn.ts): the tones of the buildings round it, darker and bluer, as a stadium's concrete and roof read against a city's. */
+.ky-turn .u-proxy{stroke:var(--ky-up-blk-line);stroke-width:.6}
+.ky-turn .u-proxy-a{fill:color-mix(in srgb,var(--ky-up-blk-a) 52%,#4d6fa0)}
+.ky-turn .u-proxy-b{fill:color-mix(in srgb,var(--ky-up-blk-b) 52%,#3f5c88)}
+.ky-turn .u-proxy-c{fill:color-mix(in srgb,var(--ky-up-blk-c) 52%,#324b72)}
+.ky-turn .u-proxy-roof{fill:color-mix(in srgb,var(--ky-up-blk-roof) 60%,#5f7fae);stroke:var(--ky-up-blk-line);stroke-width:.6;stroke-linejoin:round}
 .ky-turn .u-roof{fill:var(--ky-up-roof);stroke:var(--ky-up-roofline);stroke-width:.8;stroke-linejoin:round}
 .ky-turn .u-signplate{fill:var(--ky-turn-bg);fill-opacity:.9;stroke:var(--ky-turn-rule);stroke-width:.5}
 .ky-turn .u-sign{fill:var(--ky-turn-ink);font-family:var(--ky-font,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif);font-weight:600}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export declare const VERSION = "0.44.2";
+export declare const VERSION = "0.45.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export const VERSION = "0.44.2";
+export const VERSION = "0.45.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.44.2",
+  "version": "0.45.0",
   "description": "Kyogijo Stadiums 競技場, 40 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, the MMA cage, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
   "keywords": [
     "sports",