@johnmorrisdotca/kazoku-ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.10.0] - 2026-11-02
+
+The bar has one zoom number, and it is always the true one; the auto-turn speed is in sight whenever the view turns; and the automatic turn asks for a frame only while someone can see the view, in every way an element can be used.
+
+- **The `2×` button is gone.** It was never a readout: it was a preset, "Zoom to 2 times" (`data-b="two"`), and in 0.7 and before it sat between zoom out and zoom in, where it read like one: at the least zoom, with zoom out greyed, the bar said `2×`. Since 0.8 the readout had taken that place, but the preset stayed in advanced, so a bar could show `1×` and `2×` together. A double press on the view still goes to 2 times. The label `zoomTwo` stays for a page's own `words`; a test that presses `[data-b="two"]` has to change.
+- **The readout cannot go stale.** It now follows a lowered `zoom-max` or raised `zoom-min` (the view moves inside the new limit and the buttons grey to match; before, the view stayed outside the limit). After an element was moved, the zoom buttons drove the old controller, so the page drew one zoom and the readout said another; that is the move fixed below. Below 1 it keeps two figures, so a small zoom never reads `0×`. A test goes through the buttons, the wheel, a pinch, a double press, Fit, the keys, the address, `set`, the limits, the `zoom` attribute and the fit scale.
+- **The speed in basic.** While the view turns, basic shows one small button beside Auto-turn: the word Speed over Slow, Medium or Fast, and a press steps to the next (kept in the address as before). It comes in on Auto-turn's left, so Auto-turn does not move out from under the pointer that pressed it. It adds no row: on a phone it sits in the free room left of the zoom buttons, and on a wider bar the angle's running number makes the room while the view turns (a screen reader still has it). A page with `autoplay` shows it from the start. Advanced keeps the three buttons.
+- **A moved element no longer leaves a second loop running.** An element taken off the page and put back (a framework reordering its children, `append` to another parent) got a new controller while its buttons kept driving the old one: Auto-turn then ran a loop nothing suspended, on and off screen, and with `autoplay` a move in the same task started two. The controls now drive the controller in use, a destroyed controller never turns again, and only the controller in use speaks for the element.
+- **`element.play()` on an element that is on no page** (never added, or taken off) asks for no frame until it is put on one. It used to run for ever.
+- **A plain controller** stops too: `view.bind(element)` holds the turn while that element is off screen or the tab is hidden. It used to take the page's own `suspendTurn()`.
+- **A view that opens off screen** asks for no frame until the observer has said it is seen; before, the first frame could be asked for ahead of that answer.
+- `e2e/autoplay-loop.demo.mjs` counts at `requestAnimationFrame` itself: 0 callbacks, 0 changes and 0 waiting while out of sight or hidden, at most one callback, one change and one waiting request a page frame otherwise.
+- The tests' Chromium runs headless and draws in software (`--use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader`, in `playwright.config.mjs` and the picture script).
+- **The must-have list as a check**: `templates/check-standard.mjs` (copied unchanged into each package as `scripts/check-standard.mjs`) fails when a package lacks its demo on Pages, an embed page, a documentation site with Japanese twins, the family files or tested usage examples (script tag, ES module, bundlers, React, Vue, Svelte, Angular, iframe, TypeScript). An item that cannot apply is named in `package.json` with a reason. [docs/package-standard.md](docs/package-standard.md); the rule is in spx-stats `docs/package-work.md`.
+
+## [0.9.1] - 2026-11-02
+
+No 3D release without a freeze test (John, 2026-11-02, after a graphics-driver kernel panic during a test run). Test kit and release workflow; the parts themselves are unchanged.
+
+- **`SOFTWARE_GL_ARGS`** in `@johnmorrisdotca/kazoku-ui/testing`: the Chromium launch arguments that draw WebGL in software (ANGLE on SwiftShader), for every package's Playwright config. This repository's own config uses them for both Chromium projects, and its WebKit projects skip `renderer.demo.mjs` off CI (WebKit has no software switch).
+- **`freeze-command`** input of `reusable-release.yml`: a package with live 3D passes its freeze test (`pnpm test:freeze`), which runs in headless Chromium before anything is published.
+- The rule is written in `docs/renderer.md` ("The rule: no 3D release without a freeze test") and in `docs/release-workflow.md`.
+
 ## [0.9.0] - 2026-11-02
 
 The sixth and seventh parts: the shared 3D renderer, at `@johnmorrisdotca/kazoku-ui/renderer`, and the freeze checks for a 3D package's e2e, at `@johnmorrisdotca/kazoku-ui/testing`.

package/README.md

@@ -37,8 +37,8 @@ Parts (each its own subpath; later ones: picture-tile pickers, Help, GitHub and
 
 ## View controls
 
-- **Two levels, so the bar stays simple.** The default, `controls="basic"`, shows the angle slider, Auto-turn, zoom out and in with a **zoom readout** (`2.4×`; tap it to go back to Fit), Fit, and a small More button. More (or `controls="advanced"`) adds the tilt slider, the auto-turn **speed** (Slow, Medium, Fast), Front, 2 times, and, once zoomed in, the four-arrow pan pad and the Move or Turn choice for what a drag does. The reader's choice with More is remembered in `localStorage` and beats the attribute.
-- The zoom readout is the view's `zoom` (1× is Fit). A screen reader is told "Zoom level 2.4×" once the zoom has settled for a moment, not for every step of a pinch.
+- **Two levels, so the bar stays simple.** The default, `controls="basic"`, shows the angle slider, Auto-turn, zoom out and in with a **zoom readout** (`2.4×`; tap it to go back to Fit), Fit, and a small More button; while the view turns, one small **speed** button beside Auto-turn (it shows the word Speed over `Medium`, and a press steps to the next speed). More (or `controls="advanced"`) adds the tilt slider, all three speeds (Slow, Medium, Fast), Front, and, once zoomed in, the four-arrow pan pad and the Move or Turn choice for what a drag does. The reader's choice with More is remembered in `localStorage` and beats the attribute.
+- The zoom readout is the view's `zoom` (1× is Fit, whatever `fit-scale` is), one decimal, the one zoom number on the bar: it follows the buttons, the wheel, a pinch, a double press, Fit, the keys, the address, `set` and a changed limit. A screen reader is told "Zoom level 2.4×" once the zoom has settled for a moment, not for every step of a pinch.
 - Auto-turn with play and pause; its speed is Slow (half the `speed` attribute), Medium (the `speed` attribute, 30 degrees a second) or Fast (twice it), kept in the address as `?speed=slow` or `?speed=fast`.
 - Zoom is about the pointer (and Ctrl or Command with the wheel, or a trackpad's pinch).
 - Touch: one finger turns at 1x and moves the view when zoomed in; two fingers pinch.
@@ -111,7 +111,7 @@ myPlayButton.onclick = () => view.toggle();
 myZoomIn.onclick = () => view.zoomBy(1.4);
 ```
 
-The automatic turn is idle whenever nothing can see the view: while the `for` element (else the controls) is scrolled out of sight, and while the tab is hidden. Its frame loop is stopped, so no animation frame is asked for and no `kazoku-viewchange` event with reason `auto` is sent; `state.turning` stays true, and the turn goes on from where it was when the view is back (the first frame back only restarts the clock). A page does not need to pause it for these. Without the element, `view.suspendTurn()` and `view.resumeTurn()` do the same for your own visibility test (they nest), and `view.play(seconds)` stops the turn by itself after that many seconds of turning.
+The automatic turn is idle whenever nothing can see the view: while the `for` element (else the controls) is scrolled out of sight, and while the tab is hidden. Its frame loop is stopped, so no animation frame is asked for and no `kazoku-viewchange` event with reason `auto` is sent; `state.turning` stays true, and the turn goes on from where it was when the view is back (the first frame back only restarts the clock). A view that opens off screen asks for no frame until it is seen, and an element on no page asks for none. One frame is asked for at a time, and at most one `auto` change is sent a page frame. A page does not need to pause it for these. Without the element, `view.bind(element)` watches the bound element the same way; `view.suspendTurn()` and `view.resumeTurn()` do the same for your own visibility test (they nest, on top of what `bind` does), and `view.play(seconds)` stops the turn by itself after that many seconds of turning.
 
 Options of `createViewController` that match: `zoom` (`"fit"` or a number), `fitScale`, `ignore`, `anchor`, `keyTilt`, `stopTurn`, `tiltStep`. `anchor`, `keyTilt`, `stopTurn` and `tiltStep` are also members you can change at any time. The controller also has `ignore` (changeable), `fitScale`, `startZoom` (the `zoom` the view opens at) and `setFitScale(n)`, `setStartZoom(zoom)`; `DEFAULT_IGNORE` is the default selector.
 
@@ -182,7 +182,7 @@ An `init` event is sent once, a moment after the element connects, with the star
 | `autoplay` | Turn by itself from the start, unless the reader prefers reduced motion. |
 | `autoplay-for` | Seconds of turning after which the `autoplay` turn stops by itself (as Auto-turn pressed). Left out, it never stops. Time spent paused off screen or in a hidden tab is not counted, and a reader's own Auto-turn press has no limit. |
 | `speed` | Degrees a second at Medium (30); Slow is half and Fast twice. |
-| `controls` | `basic` (the default) or `advanced`: which controls are shown (see above). Written in the page's markup it is where the reader starts; what the reader chose with More is remembered under `kazoku-view-controls` in `localStorage` (or the key `storage` names) and wins. Setting the attribute later changes the level at once. The host carries `data-level` with the level now. |
+| `controls` | `basic` (the default) or `advanced`: which controls are shown (see above; the zoom readout in both, the speed in both while the view turns). Written in the page's markup it is where the reader starts; what the reader chose with More is remembered under `kazoku-view-controls` in `localStorage` (or the key `storage` names) and wins. Setting the attribute later changes the level at once. The host carries `data-level` with the level now. |
 | `storage` | The `localStorage` key the level is remembered under (`kazoku-view-controls`). |
 | `flat` | The view cannot turn: no angle, tilt, Auto-turn or Front, and a drag moves it. |
 | `tilt-max`, `zoom-min`, `zoom-max` | The limits (30, 1, 5). |
@@ -285,11 +285,11 @@ The styles are adopted as a constructable stylesheet (`adoptedStyleSheets`), so
 
 ## Size
 
-Gzipped, unbundled. View controls: the element and its definition about 6.9 KB, the controller 4.4 KB, the maths 1.4 KB, the address 1.4 KB, the levels 0.4 KB, the labels 0.9 KB and the styles 1.7 KB. Theme switch: the element and its definition 3.3 KB, the choices 1.0 KB, the labels 0.3 KB and the styles 0.3 KB. Language picker: the element and its definition 2.8 KB, the codes and names 1.7 KB, the labels 0.3 KB. Save image: the element and its definition 3.0 KB, the rendering 3.6 KB, the formats and file names 1.0 KB, the labels 0.4 KB. Address state: 2.1 KB. Shared 3D renderer: 8.9 KB (the renderer 4.5, the scheduler 1.2, the assets 1.4, the stills 0.6, the pixel budget 0.8, the index 0.4), the test kit 1.6 KB; three.js is the page's own and is not counted. Shared by parts: the style adoption 0.8 KB, the base styles 1.0 KB, the page's colours 0.5 KB and the target and the store 0.6 KB. `pnpm test:package` prints them. Nothing is loaded from the network.
+Gzipped, unbundled. View controls: the element and its definition about 7.3 KB, the controller 4.6 KB, the sight watch 0.6 KB, the maths 1.4 KB, the address 1.4 KB, the levels 0.4 KB, the labels 0.9 KB and the styles 2.0 KB. Theme switch: the element and its definition 3.3 KB, the choices 1.0 KB, the labels 0.3 KB and the styles 0.3 KB. Language picker: the element and its definition 2.8 KB, the codes and names 1.7 KB, the labels 0.3 KB. Save image: the element and its definition 3.0 KB, the rendering 3.6 KB, the formats and file names 1.0 KB, the labels 0.4 KB. Address state: 2.1 KB. Shared 3D renderer: 8.9 KB (the renderer 4.5, the scheduler 1.2, the assets 1.4, the stills 0.6, the pixel budget 0.8, the index 0.4), the test kit 1.6 KB; three.js is the page's own and is not counted. Shared by parts: the style adoption 0.8 KB, the base styles 1.0 KB, the page's colours 0.5 KB and the target and the store 0.6 KB. `pnpm test:package` prints them. Nothing is loaded from the network.
 
 ## Checks
 
-`pnpm check` (lint, types, 99 unit tests of the maths, the address, the controller and the package, the build and the packed package), and `pnpm test:demo` (the demo in Chromium and WebKit at a phone's width and a desk's: the controls in the first screen, a toggle during Auto-turn leaves the angle advancing, a button or link inside the view still clicks while a drag turns it, the opening zoom and fit scale, zoom about the pointer, zoom about an anchor (`?anchor=pin`), Arrow Up either way (`?key-tilt=wheel`), `?stop-turn`, `?tilt-step=1`, pan when zoomed, touch, the address, the labels, reduced motion, the controls styled under a strict `style-src` with no violation, `demo/csp.html`, the theme switch and the language picker in each browser and size, the address state, back and forward and no history added, on `demo/address.html`, and the save buttons: each file read back from disk, on `demo/save-image.html`, and the shared 3D renderer on `demo/renderer.html`: one WebGL context over fifty focus changes, nothing drawn or requested at rest, the GPU objects and heap flat, the canvas within budget at 5K, context loss, out of sight, the stills' byte budget, and three.js fetched only when a view goes live).
+`pnpm check` (lint, types, 104 unit tests of the maths, the address, the controller and the package, the build and the packed package), and `pnpm test:demo` (the demo in Chromium and WebKit at a phone's width and a desk's: the controls in the first screen, a toggle during Auto-turn leaves the angle advancing, the frame loop counted at `requestAnimationFrame` (nothing out of sight or hidden, one callback a page frame otherwise, a moved element too), the zoom readout against the state after every way of zooming, the speed button adding no row, a button or link inside the view still clicks while a drag turns it, the opening zoom and fit scale, zoom about the pointer, zoom about an anchor (`?anchor=pin`), Arrow Up either way (`?key-tilt=wheel`), `?stop-turn`, `?tilt-step=1`, pan when zoomed, touch, the address, the labels, reduced motion, the controls styled under a strict `style-src` with no violation, `demo/csp.html`, the theme switch and the language picker in each browser and size, the address state, back and forward and no history added, on `demo/address.html`, and the save buttons: each file read back from disk, on `demo/save-image.html`, and the shared 3D renderer on `demo/renderer.html`: one WebGL context over fifty focus changes, nothing drawn or requested at rest, the GPU objects and heap flat, the canvas within budget at 5K, context loss, out of sight, the stills' byte budget, and three.js fetched only when a view goes live).
 
 ## Not yet
 

package/dist/testing/index.d.ts

@@ -1,3 +1,8 @@
+/**
+ * The launch arguments that make headless Chromium draw WebGL in software (ANGLE on SwiftShader), never on the machine's graphics card. Every package's Playwright
+ * config gives them to its Chromium projects: `use: { launchOptions: { args: [...SOFTWARE_GL_ARGS] } }`. A test run on a Mac's own GPU once panicked its graphics driver.
+ */
+export declare const SOFTWARE_GL_ARGS: readonly string[];
 /** The GL object kinds counted. */
 export declare const GPU_KINDS: readonly ["Buffer", "Texture", "VertexArray", "Program", "Framebuffer", "Renderbuffer"];
 export type GpuKind = (typeof GPU_KINDS)[number];

package/dist/testing/index.js

@@ -10,6 +10,11 @@
 //   expect(after.contexts).toBe(1);
 //   expect(after.draws - before.draws).toBe(0);           // at rest
 //   expect(gpuObjects(after)).toBe(gpuObjects(before));   // nothing leaked
+/**
+ * The launch arguments that make headless Chromium draw WebGL in software (ANGLE on SwiftShader), never on the machine's graphics card. Every package's Playwright
+ * config gives them to its Chromium projects: `use: { launchOptions: { args: [...SOFTWARE_GL_ARGS] } }`. A test run on a Mac's own GPU once panicked its graphics driver.
+ */
+export const SOFTWARE_GL_ARGS = ["--use-gl=angle", "--use-angle=swiftshader", "--enable-unsafe-swiftshader", "--ignore-gpu-blocklist"];
 /** The GL object kinds counted. */
 export const GPU_KINDS = ["Buffer", "Texture", "VertexArray", "Program", "Framebuffer", "Renderbuffer"];
 /** Install the counters in a page, before its own scripts run. A string, so `page.addInitScript(COUNT_SCRIPT)` takes it as it is. */

package/dist/view-controls/controller.d.ts

@@ -68,7 +68,7 @@ export interface ViewController {
     /** Start at "fit" or at a scale relative to natural size, and go there now. */
     setStartZoom(zoom: "fit" | number): void;
     set(next: Partial<ViewState>, final?: boolean, reason?: string): void;
-    /** Turn by itself. With `seconds`, stop by itself (as `pause`) after that many seconds of turning; time spent suspended does not count. `toggle` and a bare `play()` turn without a limit. */
+    /** Turn by itself (never after `destroy`). With `seconds`, stop by itself (as `pause`) after that many seconds of turning; time spent suspended does not count. `toggle` and a bare `play()` turn without a limit. */
     play(seconds?: number): void;
     pause(): void;
     toggle(): void;
@@ -87,7 +87,7 @@ export interface ViewController {
     /** Move the view by whole fractions of its size: `panBy(1, 0)` is a quarter of its width to the right. */
     panBy(stepsX: number, stepsY: number): void;
     setDrag(drag: DragMode): void;
-    /** Bind the pointer, pinch, wheel and key hands to `view`. Returns a function that unbinds them. */
+    /** Bind the pointer, pinch, wheel and key hands to `view`, and hold the automatic turn while `view` is off screen or the tab is hidden. Returns a function that unbinds them. */
     bind(view: HTMLElement): () => void;
     destroy(): void;
 }

package/dist/view-controls/controller.js

@@ -1,3 +1,4 @@
+import { turnOnlyInSight } from "./sight.js";
 import { clamp, clampPan, DEFAULT_LIMITS, dragTurn, PAN_STEP, pinchTo, wheelZoomFactor, wrapYaw, ZOOMED, zoomAbout } from "./math.js";
 /** What `bind` leaves alone by default: the page's own controls inside the view. */
 export const DEFAULT_IGNORE = "button, a, input, select, textarea, label, [data-kazoku-ignore]";
@@ -15,6 +16,7 @@ export function createViewController(options = {}) {
     let suspends = 0;
     let limit = 0;
     let turned = 0;
+    let destroyed = false;
     let fitScale = positive(options.fitScale) ?? 1;
     let start = positive(options.zoom) ?? "fit";
     let atStart = true;
@@ -132,7 +134,7 @@ export function createViewController(options = {}) {
             emit(final, reason);
         },
         play(seconds) {
-            if (state.turning || !controller.turnable)
+            if (destroyed || state.turning || !controller.turnable)
                 return;
             state.turning = true;
             last = 0;
@@ -206,6 +208,7 @@ export function createViewController(options = {}) {
             return bindHands(view);
         },
         destroy() {
+            destroyed = true;
             clock.cancel(frame);
             state.turning = false;
             unbind?.();
@@ -415,7 +418,9 @@ export function createViewController(options = {}) {
         // A right press is a pan, not the browser's menu.
         view.addEventListener("contextmenu", onMenu);
         view.style.touchAction = state.zoom > ZOOMED ? "none" : "pan-y";
+        const unwatch = turnOnlyInSight(controller, view);
         const off = () => {
+            unwatch();
             view.removeEventListener("pointerdown", onDown);
             view.removeEventListener("pointermove", onMove);
             view.removeEventListener("pointerup", onUp);

package/dist/view-controls/element.d.ts

@@ -13,7 +13,7 @@ export interface ViewChangeDetail extends ViewState {
  * is the scene's natural size), `fit-scale` (the page's scale at Fit: what zoom 1 means), `ignore` (a selector for what inside the view a pointer press leaves alone;
  * buttons, links and form controls by default), `autoplay` (turn by itself from the start, unless the reader prefers reduced motion), `autoplay-for` (stop that turn by itself after this many seconds of turning), `speed` (degrees a second),
  * `anchor` (`x,y`: the point the zoom buttons and keys zoom about, in pixels from the view's middle at Fit), `key-tilt` (`drag`, the default, or `wheel`: which way Arrow Up tips),
- * `controls` (`basic`, the default, or `advanced`: which controls are shown; the reader's own choice with the More button is remembered in localStorage, under `kazoku-view-controls` or the key `storage` names, and wins),
+ * `controls` (`basic`, the default, or `advanced`: which controls are shown, the zoom readout in both, and the speed in both while the view turns; the reader's own choice with the More button is remembered in localStorage, under `kazoku-view-controls` or the key `storage` names, and wins),
  * `stop-turn` (a press, the wheel or a key on the view stops the automatic turn), `tilt-step` (round a drag's tilt to a multiple of this many degrees), `flat` (the view cannot turn), `tilt-max`, `zoom-min`, `zoom-max`, `address` (keep the choices in the page's address), `address-keys` (`yaw:a,tilt:b`), `theme` (light
  * or dark), `overlay` (sit over the bottom of a positioned parent).
  */

package/dist/view-controls/element.js

@@ -8,6 +8,7 @@ import { createViewController, DEFAULT_IGNORE } from "./controller.js";
 import { EVENT, TAG } from "./index.js";
 import { LEVEL_STORAGE_KEY, PACE_FACTOR, PACES, parseLevel, zoomText } from "./levels.js";
 import { ZOOM_STEP, ZOOMED } from "./math.js";
+import { turnOnlyInSight } from "./sight.js";
 import { STYLES } from "./styles.js";
 import { languageOf, wordsFor } from "./words.js";
 export { EVENT, TAG };
@@ -27,6 +28,7 @@ const HTML = `
 <div class="bar" part="bar" role="group">
   <div class="field angle" part="field angle"><label data-w="angle" for="yaw"></label><input id="yaw" type="range" min="-180" max="180" step="1" value="0" part="slider" /><output for="yaw" data-o="yaw">0°</output></div>
   <div class="field tilt adv" part="field tilt"><label data-w="tilt" for="tilt"></label><input id="tilt" type="range" min="-30" max="30" step="1" value="0" part="slider" /><output for="tilt" data-o="tilt">0°</output></div>
+  <button type="button" class="pace-now" data-b="pace-now" part="button" hidden><span class="lbl" data-w="speed"></span><span data-o="pace"></span></button>
   <button type="button" class="play" data-b="play" aria-pressed="false" part="button">${ICON.play}${ICON.pause}<span class="text" data-w="autoTurn"></span></button>
   <div class="group pace adv" role="group" data-g="pace"><span class="lbl" data-w="speed" aria-hidden="true"></span>
     <button type="button" data-b="slow" aria-pressed="false" part="button"><span data-w="slow"></span></button>
@@ -38,7 +40,6 @@ const HTML = `
     <button type="button" data-b="out" part="button">${ICON.minus}</button>
     <button type="button" class="level" data-b="level" part="button"><span data-o="zoom">1×</span></button>
     <button type="button" data-b="in" part="button">${ICON.plus}</button>
-    <button type="button" class="two adv" data-b="two" part="button">2×</button>
     <button type="button" data-b="fit" part="button"><span data-w="fit"></span></button>
   </div>
   <div class="group pan adv" role="group" data-g="pan" hidden>
@@ -59,7 +60,7 @@ const HTML = `
  * is the scene's natural size), `fit-scale` (the page's scale at Fit: what zoom 1 means), `ignore` (a selector for what inside the view a pointer press leaves alone;
  * buttons, links and form controls by default), `autoplay` (turn by itself from the start, unless the reader prefers reduced motion), `autoplay-for` (stop that turn by itself after this many seconds of turning), `speed` (degrees a second),
  * `anchor` (`x,y`: the point the zoom buttons and keys zoom about, in pixels from the view's middle at Fit), `key-tilt` (`drag`, the default, or `wheel`: which way Arrow Up tips),
- * `controls` (`basic`, the default, or `advanced`: which controls are shown; the reader's own choice with the More button is remembered in localStorage, under `kazoku-view-controls` or the key `storage` names, and wins),
+ * `controls` (`basic`, the default, or `advanced`: which controls are shown, the zoom readout in both, and the speed in both while the view turns; the reader's own choice with the More button is remembered in localStorage, under `kazoku-view-controls` or the key `storage` names, and wins),
  * `stop-turn` (a press, the wheel or a key on the view stops the automatic turn), `tilt-step` (round a drag's tilt to a multiple of this many degrees), `flat` (the view cannot turn), `tilt-max`, `zoom-min`, `zoom-max`, `address` (keep the choices in the page's address), `address-keys` (`yaw:a,tilt:b`), `theme` (light
  * or dark), `overlay` (sit over the bottom of a positioned parent).
  */
@@ -74,9 +75,8 @@ export class ViewControlsElement extends HTMLElement {
     #sliderHeld = 0;
     #writer = createAddressWriter({ delay: 250 });
     #keys = DEFAULT_KEYS;
-    #seen;
-    #onScreen = true;
-    #suspended = false;
+    #unwatch;
+    #offPage = false;
     #level = "basic";
     #pace = "medium";
     #labels = wordsFor("en");
@@ -137,6 +137,9 @@ export class ViewControlsElement extends HTMLElement {
     }
     connectedCallback() {
         const c = this.#ensure();
+        if (this.#offPage)
+            c.resumeTurn();
+        this.#offPage = false;
         if (this.#root.querySelector(".bar") === null)
             this.#build();
         this.#keys = parseKeys(this.getAttribute("address-keys"));
@@ -169,11 +172,11 @@ export class ViewControlsElement extends HTMLElement {
             this.ownerDocument.addEventListener("DOMContentLoaded", () => this.#resolveView(), { once: true });
         this.#ready = true;
         this.#show();
-        this.ownerDocument.addEventListener("visibilitychange", this.#sight);
         this.#watch();
         // Said once the page has had its turn to listen; a page can also read `state` at any time.
         queueMicrotask(() => {
-            if (!this.isConnected)
+            // Taken off the page already, perhaps put back: then this controller is gone and a newer microtask speaks for the new one.
+            if (this.#controller !== c)
                 return;
             this.#dispatch(c.state, { final: true, reason: "init" });
             if (this.hasAttribute("autoplay") && !globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches)
@@ -181,17 +184,16 @@ export class ViewControlsElement extends HTMLElement {
         });
     }
     disconnectedCallback() {
-        this.ownerDocument.removeEventListener("visibilitychange", this.#sight);
-        this.#seen?.disconnect();
-        this.#seen = undefined;
-        this.#suspended = false;
-        this.#onScreen = true;
+        this.#unwatch?.();
+        this.#unwatch = undefined;
         this.#unbind?.();
         this.#unbind = undefined;
         this.#controller?.destroy();
         this.#controller = undefined;
+        this.#offPage = false;
         this.#view = undefined;
         this.#ready = false;
+        this.#sliderHeld = 0;
         this.#writer.cancel();
         clearTimeout(this.#sayTimer);
         this.#said = "";
@@ -228,8 +230,11 @@ export class ViewControlsElement extends HTMLElement {
         }
         else if (name === "address-keys")
             this.#keys = parseKeys(value);
-        else
+        else {
             this.#limits();
+            // A limit that moved past the view takes the view with it, and the readout and the buttons say so.
+            c.set({});
+        }
     }
     #option(name) {
         const c = this.#ensure();
@@ -251,7 +256,19 @@ export class ViewControlsElement extends HTMLElement {
     }
     #ensure() {
         if (this.#controller === undefined) {
-            this.#controller = createViewController({ onChange: (state, info) => this.#changed(state, info) });
+            const made = createViewController({
+                onChange: (state, info) => {
+                    // A page may hold on to an old `controller` after a move; only the one in use speaks for the element.
+                    if (this.#controller === made)
+                        this.#changed(state, info);
+                },
+            });
+            this.#controller = made;
+            // Nothing can see an element that is on no page: it asks for no frame until it is put on one.
+            if (!this.isConnected) {
+                made.suspendTurn();
+                this.#offPage = true;
+            }
         }
         return this.#controller;
     }
@@ -259,58 +276,59 @@ export class ViewControlsElement extends HTMLElement {
         this.#root.innerHTML = HTML;
         adoptStyles(this.#root, STYLES, this.nonce);
         const q = (selector) => this.#root.querySelector(selector);
-        const c = this.#ensure();
+        // The controller in use when a control is pressed: the element keeps these controls when it is moved, and gets a new controller.
+        const c = () => this.#ensure();
         const slider = (id) => {
             const input = q(`#${id}`);
             // A hand on the angle slider holds the automatic turn still while it is down; the turn then goes on from where the hand left it.
             const hold = () => {
                 this.#sliderHeld += 1;
                 if (this.#sliderHeld === 1 && id === "yaw")
-                    c.holdTurn();
+                    c().holdTurn();
             };
             const free = () => {
                 if (this.#sliderHeld === 0)
                     return;
                 this.#sliderHeld = 0;
                 if (id === "yaw")
-                    c.releaseTurn();
+                    c().releaseTurn();
             };
             input.addEventListener("pointerdown", () => hold());
             input.addEventListener("pointerup", free);
             input.addEventListener("pointercancel", free);
-            input.addEventListener("input", () => c.set({ [id]: Number(input.value) }, false, "slider"));
-            input.addEventListener("change", () => c.set({ [id]: Number(input.value) }, true, "slider"));
+            input.addEventListener("input", () => c().set({ [id]: Number(input.value) }, false, "slider"));
+            input.addEventListener("change", () => c().set({ [id]: Number(input.value) }, true, "slider"));
         };
         slider("yaw");
         slider("tilt");
         const on = (b, run) => q(`[data-b="${b}"]`).addEventListener("click", run);
-        on("play", () => c.toggle());
-        on("front", () => c.front());
-        on("out", () => c.zoomBy(1 / ZOOM_STEP));
-        on("in", () => c.zoomBy(ZOOM_STEP));
-        on("two", () => c.zoomAt(2));
-        on("fit", () => c.fit());
-        on("level", () => c.fit());
+        on("play", () => c().toggle());
+        on("front", () => c().front());
+        on("out", () => c().zoomBy(1 / ZOOM_STEP));
+        on("in", () => c().zoomBy(ZOOM_STEP));
+        on("fit", () => c().fit());
+        on("level", () => c().fit());
         on("more", () => {
             this.#level = this.#level === "basic" ? "advanced" : "basic";
             remember(this.#storageKey(), this.#level);
             this.#show();
         });
-        for (const pace of PACES) {
-            on(pace, () => {
-                this.#pace = pace;
-                this.#speed();
-                this.#show();
-                if (this.hasAttribute("address"))
-                    this.#save();
-            });
-        }
-        on("left", () => c.panBy(-1, 0));
-        on("right", () => c.panBy(1, 0));
-        on("up", () => c.panBy(0, -1));
-        on("down", () => c.panBy(0, 1));
-        on("move", () => c.setDrag("move"));
-        on("turn", () => c.setDrag("turn"));
+        const choosePace = (pace) => {
+            this.#pace = pace;
+            this.#speed();
+            this.#show();
+            if (this.hasAttribute("address"))
+                this.#save();
+        };
+        for (const pace of PACES)
+            on(pace, () => choosePace(pace));
+        on("pace-now", () => choosePace(PACES[(PACES.indexOf(this.#pace) + 1) % PACES.length]));
+        on("left", () => c().panBy(-1, 0));
+        on("right", () => c().panBy(1, 0));
+        on("up", () => c().panBy(0, -1));
+        on("down", () => c().panBy(0, 1));
+        on("move", () => c().setDrag("move"));
+        on("turn", () => c().setDrag("turn"));
     }
     #storageKey() {
         return this.getAttribute("storage") || LEVEL_STORAGE_KEY;
@@ -362,35 +380,13 @@ export class ViewControlsElement extends HTMLElement {
             this.#unbind = this.#ensure().bind(element);
         this.#watch();
     }
-    /** The automatic turn runs only while the view (else this element) is on screen in a visible tab; otherwise its frame loop is stopped. */
+    /** The controller holds its turn while the view it is bound to cannot be seen; with no view yet, this element stands in for it. */
     #watch() {
-        this.#seen?.disconnect();
-        this.#seen = undefined;
-        this.#onScreen = true;
-        if (typeof IntersectionObserver === "function" && this.isConnected) {
-            this.#seen = new IntersectionObserver((entries) => {
-                const last = entries[entries.length - 1];
-                if (last === undefined)
-                    return;
-                this.#onScreen = last.isIntersecting;
-                this.#sight();
-            });
-            this.#seen.observe(this.#view ?? this);
-        }
-        this.#sight();
+        this.#unwatch?.();
+        this.#unwatch = undefined;
+        if (this.#view === undefined && this.isConnected)
+            this.#unwatch = turnOnlyInSight(this.#ensure(), this);
     }
-    #sight = () => {
-        if (this.#controller === undefined)
-            return;
-        const idle = !this.#onScreen || this.ownerDocument.visibilityState === "hidden";
-        if (idle === this.#suspended)
-            return;
-        this.#suspended = idle;
-        if (idle)
-            this.#controller.suspendTurn();
-        else
-            this.#controller.resumeTurn();
-    };
     #label() {
         const language = languageOf(this.getAttribute("lang") ?? this.closest("[lang]")?.getAttribute("lang") ?? this.ownerDocument.documentElement.lang);
         const words = wordsFor(language, this.#words);
@@ -401,7 +397,6 @@ export class ViewControlsElement extends HTMLElement {
         set(".bar", words.group);
         set('[data-b="play"]', words.autoTurn);
         set('[data-b="out"]', words.zoomOut);
-        set('[data-b="two"]', words.zoomTwo);
         set('[data-b="in"]', words.zoomIn);
         set('[data-g="zoom"]', words.zoom);
         set('[data-g="pan"]', words.pan);
@@ -431,11 +426,22 @@ export class ViewControlsElement extends HTMLElement {
         const advanced = this.#level === "advanced";
         const words = this.#labels;
         const zoom = zoomText(s.zoom);
-        q('[data-o="zoom"]').textContent = zoom;
-        q('[data-b="level"]').setAttribute("aria-label", `${words.zoomLevel} ${zoom}, ${words.zoomReset}`);
+        // A frame of the automatic turn comes through here: what has not changed is not written.
+        const write = (node, text) => {
+            if (node.textContent !== text)
+                node.textContent = text;
+        };
+        const say = (node, label) => {
+            if (node.getAttribute("aria-label") !== label)
+                node.setAttribute("aria-label", label);
+        };
+        write(q('[data-o="zoom"]'), zoom);
+        say(q('[data-b="level"]'), `${words.zoomLevel} ${zoom}, ${words.zoomReset}`);
         this.#sayZoom(`${words.zoomLevel} ${zoom}`);
         for (const pace of PACES)
             q(`[data-b="${pace}"]`).setAttribute("aria-pressed", String(this.#pace === pace));
+        write(q('[data-o="pace"]'), words[this.#pace]);
+        say(q('[data-b="pace-now"]'), `${words.speed}: ${words[this.#pace]}`);
         const more = q('[data-b="more"]');
         more.setAttribute("aria-expanded", String(advanced));
         this.dataset.level = this.#level;
@@ -450,6 +456,8 @@ export class ViewControlsElement extends HTMLElement {
             q(selector).hidden = flat;
         for (const selector of [".tilt", ".front", '[data-g="drag"]', '[data-g="pace"]'])
             q(selector).hidden = flat || !advanced;
+        // The speed is always in sight while the view turns: one small button in basic, which steps through the three; advanced always has the three.
+        q(".pace-now").hidden = flat || advanced || !s.turning;
         this.toggleAttribute("data-turning", s.turning);
     }
     /** Tells a screen reader the zoom once it has settled for a moment (a pinch or a wheel makes many steps). */

package/dist/view-controls/levels.d.ts

@@ -1,4 +1,4 @@
-/** `basic` is the default: turn, zoom, Fit and Auto-turn. `advanced` adds tilt, speed, Front, 2 times and the pan pad. */
+/** `basic` is the default: turn, zoom with its readout, Fit and Auto-turn, and the speed while it turns. `advanced` adds tilt, the three speeds, Front and the pan pad. */
 export type Level = "basic" | "advanced";
 export declare const parseLevel: (text: string | null | undefined) => Level | undefined;
 /** The localStorage key the level is remembered under, unless `storage` names another. */
@@ -8,5 +8,5 @@ export type Pace = "slow" | "medium" | "fast";
 export declare const PACES: readonly Pace[];
 export declare const PACE_FACTOR: Record<Pace, number>;
 export declare const parsePace: (text: string | null | undefined) => Pace | undefined;
-/** The zoom as the readout shows it: `1×`, `2.4×`. */
+/** The zoom as the readout shows it: `1×`, `2.4×`; below 1, two figures, so a small zoom never reads `0×`. */
 export declare const zoomText: (zoom: number) => string;

package/dist/view-controls/levels.js

@@ -5,5 +5,5 @@ export const LEVEL_STORAGE_KEY = "kazoku-view-controls";
 export const PACES = ["slow", "medium", "fast"];
 export const PACE_FACTOR = { slow: 0.5, medium: 1, fast: 2 };
 export const parsePace = (text) => PACES.find((pace) => pace === text);
-/** The zoom as the readout shows it: `1×`, `2.4×`. */
-export const zoomText = (zoom) => `${Number(zoom.toFixed(1))}×`;
+/** The zoom as the readout shows it: `1×`, `2.4×`; below 1, two figures, so a small zoom never reads `0×`. */
+export const zoomText = (zoom) => `${Number(zoom < 1 ? zoom.toPrecision(2) : zoom.toFixed(1))}×`;

package/dist/view-controls/sight.d.ts

@@ -0,0 +1,8 @@
+import type { ViewController } from "./controller.ts";
+/**
+ * Calls `tell` with whether `target` can be seen, at once and on every change. Until the observer has answered the view counts as not seen, so a view that opens off screen
+ * never asks for a frame. Without `IntersectionObserver` it counts as on screen. Returns a function that stops watching.
+ */
+export declare function watchSight(target: Element, tell: (seen: boolean) => void): () => void;
+/** Stops the controller's frame loop while `target` cannot be seen, and lets it go on when it can. Returns a function that stops watching and takes its hold off. */
+export declare function turnOnlyInSight(controller: Pick<ViewController, "suspendTurn" | "resumeTurn">, target: Element): () => void;

package/dist/view-controls/sight.js

@@ -0,0 +1,51 @@
+/**
+ * Calls `tell` with whether `target` can be seen, at once and on every change. Until the observer has answered the view counts as not seen, so a view that opens off screen
+ * never asks for a frame. Without `IntersectionObserver` it counts as on screen. Returns a function that stops watching.
+ */
+export function watchSight(target, tell) {
+    const doc = target.ownerDocument;
+    let onScreen = typeof IntersectionObserver !== "function";
+    let told;
+    const check = () => {
+        const seen = onScreen && doc?.visibilityState !== "hidden";
+        if (seen === told)
+            return;
+        told = seen;
+        tell(seen);
+    };
+    const observer = onScreen
+        ? undefined
+        : new IntersectionObserver((entries) => {
+            const latest = entries[entries.length - 1];
+            if (latest === undefined)
+                return;
+            onScreen = latest.isIntersecting;
+            check();
+        });
+    observer?.observe(target);
+    doc?.addEventListener?.("visibilitychange", check);
+    check();
+    return () => {
+        observer?.disconnect();
+        doc?.removeEventListener?.("visibilitychange", check);
+    };
+}
+/** Stops the controller's frame loop while `target` cannot be seen, and lets it go on when it can. Returns a function that stops watching and takes its hold off. */
+export function turnOnlyInSight(controller, target) {
+    let held = false;
+    const stop = watchSight(target, (seen) => {
+        if (held === !seen)
+            return;
+        held = !seen;
+        if (held)
+            controller.suspendTurn();
+        else
+            controller.resumeTurn();
+    });
+    return () => {
+        stop();
+        if (held)
+            controller.resumeTurn();
+        held = false;
+    };
+}

package/dist/view-controls/styles.d.ts

@@ -1 +1 @@
-export declare const STYLES = "\n:host {\n  --_ink: var(--kazoku-ink, #1b1b1f);\n  --_surface: var(--kazoku-surface, #ffffff);\n  --_line: var(--kazoku-line, #c9ccd3);\n  --_accent: var(--kazoku-accent, #2457d6);\n  display: block;\n  box-sizing: border-box;\n  color: var(--_ink);\n  font: 600 0.9rem/1.2 system-ui, -apple-system, \"Hiragino Sans\", \"Noto Sans JP\", \"Segoe UI\", sans-serif;\n  color-scheme: light dark;\n}\n@media (prefers-color-scheme: dark) {\n  :host(:not([theme=\"light\"])) {\n    --_ink: var(--kazoku-ink, #f1f2f6);\n    --_surface: var(--kazoku-surface, #1c1d22);\n    --_line: var(--kazoku-line, #4a4d58);\n    --_accent: var(--kazoku-accent, #8fb0ff);\n  }\n}\n:host([theme=\"dark\"]) {\n  --_ink: var(--kazoku-ink, #f1f2f6);\n  --_surface: var(--kazoku-surface, #1c1d22);\n  --_line: var(--kazoku-line, #4a4d58);\n  --_accent: var(--kazoku-accent, #8fb0ff);\n  color-scheme: dark;\n}\n:host([theme=\"light\"]) { color-scheme: light; }\n:host([overlay]) { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; }\n:host([overlay]) .bar { background: color-mix(in srgb, var(--_surface) 88%, transparent); }\n[hidden] { display: none !important; }\n.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 8px; box-sizing: border-box; }\n.field { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }\n.field.tilt { flex-basis: 150px; }\n.field label { flex: none; }\n.field output { flex: none; min-width: 3.2em; text-align: end; font-variant-numeric: tabular-nums; }\n.group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }\n.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\ninput[type=\"range\"] { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; min-width: 60px; height: 48px; margin: 0; padding: 0; background: transparent; cursor: pointer; }\ninput[type=\"range\"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--_line); }\ninput[type=\"range\"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--_line); }\ninput[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--_accent); border: 3px solid var(--_surface); box-shadow: 0 0 0 1px var(--_ink); }\ninput[type=\"range\"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--_accent); border: 3px solid var(--_surface); box-shadow: 0 0 0 1px var(--_ink); }\ninput[type=\"range\"]:focus-visible { outline: 2px solid var(--_ink); outline-offset: -4px; border-radius: 8px; }\nbutton { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--_line); border-radius: 24px; background: var(--_surface); color: var(--_ink); font: inherit; cursor: pointer; white-space: nowrap; }\nbutton:hover:not(:disabled) { border-color: var(--_ink); }\nbutton:focus-visible { outline: 2px solid var(--_ink); outline-offset: 2px; }\nbutton[aria-pressed=\"true\"] { background: var(--_ink); color: var(--_surface); border-color: var(--_ink); }\nbutton[aria-expanded=\"true\"] { border-color: var(--_ink); box-shadow: inset 0 0 0 1px var(--_ink); }\nbutton:disabled { opacity: 0.4; cursor: default; }\nsvg { width: 18px; height: 18px; fill: currentColor; flex: none; }\nbutton[aria-pressed=\"true\"] .i-play, button[aria-pressed=\"false\"] .i-pause { display: none; }\n.zoom button.two { min-width: 56px; }\n.zoom button.level { min-width: 64px; padding: 0 8px; font-variant-numeric: tabular-nums; }\n.pace .lbl { margin-inline-end: 4px; }\n.drag { margin-inline-start: 8px; }\n.more { margin-inline-start: auto; }\n/* A compact bar on a phone: two rows to start with (angle, Auto-turn and More; the zoom), more rows when the reader asks for more; labels read only by a screen reader. */\n@media (max-width: 640px) {\n  .bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px; grid-template-areas: \"angle play more\" \"tilt tilt front\" \"pace pace pace\" \"zoom zoom zoom\" \"pan pan pan\"; gap: 0 8px; padding: 2px 8px; }\n  .field.angle { grid-area: angle; }\n  .field.tilt { grid-area: tilt; }\n  .field label, .field output, .play .text, .more .text, .pace .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  .play, .more { padding: 0; }\n  .play { grid-area: play; }\n  .more { grid-area: more; }\n  .front { grid-area: front; padding: 0 12px; }\n  .pace { grid-area: pace; justify-self: end; flex-wrap: nowrap; }\n  .pace button { padding: 0 12px; }\n  .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }\n  .zoom button { padding: 0 8px; }\n  .zoom button.level { padding: 0 6px; }\n  .pan { grid-area: pan; justify-content: center; }\n  .drag { margin-inline-start: 4px; }\n}\n";
+export declare const STYLES = "\n:host {\n  --_ink: var(--kazoku-ink, #1b1b1f);\n  --_surface: var(--kazoku-surface, #ffffff);\n  --_line: var(--kazoku-line, #c9ccd3);\n  --_accent: var(--kazoku-accent, #2457d6);\n  display: block;\n  box-sizing: border-box;\n  color: var(--_ink);\n  font: 600 0.9rem/1.2 system-ui, -apple-system, \"Hiragino Sans\", \"Noto Sans JP\", \"Segoe UI\", sans-serif;\n  color-scheme: light dark;\n}\n@media (prefers-color-scheme: dark) {\n  :host(:not([theme=\"light\"])) {\n    --_ink: var(--kazoku-ink, #f1f2f6);\n    --_surface: var(--kazoku-surface, #1c1d22);\n    --_line: var(--kazoku-line, #4a4d58);\n    --_accent: var(--kazoku-accent, #8fb0ff);\n  }\n}\n:host([theme=\"dark\"]) {\n  --_ink: var(--kazoku-ink, #f1f2f6);\n  --_surface: var(--kazoku-surface, #1c1d22);\n  --_line: var(--kazoku-line, #4a4d58);\n  --_accent: var(--kazoku-accent, #8fb0ff);\n  color-scheme: dark;\n}\n:host([theme=\"light\"]) { color-scheme: light; }\n:host([overlay]) { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; }\n:host([overlay]) .bar { background: color-mix(in srgb, var(--_surface) 88%, transparent); }\n[hidden] { display: none !important; }\n.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 8px; box-sizing: border-box; }\n.field { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }\n.field.tilt { flex-basis: 150px; }\n.field label { flex: none; }\n.field output { flex: none; min-width: 3.2em; text-align: end; font-variant-numeric: tabular-nums; }\n.group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }\n.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\ninput[type=\"range\"] { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; min-width: 60px; height: 48px; margin: 0; padding: 0; background: transparent; cursor: pointer; }\ninput[type=\"range\"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--_line); }\ninput[type=\"range\"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--_line); }\ninput[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--_accent); border: 3px solid var(--_surface); box-shadow: 0 0 0 1px var(--_ink); }\ninput[type=\"range\"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--_accent); border: 3px solid var(--_surface); box-shadow: 0 0 0 1px var(--_ink); }\ninput[type=\"range\"]:focus-visible { outline: 2px solid var(--_ink); outline-offset: -4px; border-radius: 8px; }\nbutton { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--_line); border-radius: 24px; background: var(--_surface); color: var(--_ink); font: inherit; cursor: pointer; white-space: nowrap; }\nbutton:hover:not(:disabled) { border-color: var(--_ink); }\nbutton:focus-visible { outline: 2px solid var(--_ink); outline-offset: 2px; }\nbutton[aria-pressed=\"true\"] { background: var(--_ink); color: var(--_surface); border-color: var(--_ink); }\nbutton[aria-expanded=\"true\"] { border-color: var(--_ink); box-shadow: inset 0 0 0 1px var(--_ink); }\nbutton:disabled { opacity: 0.4; cursor: default; }\nsvg { width: 18px; height: 18px; fill: currentColor; flex: none; }\nbutton[aria-pressed=\"true\"] .i-play, button[aria-pressed=\"false\"] .i-pause { display: none; }\n.zoom button.level { min-width: 64px; padding: 0 8px; font-variant-numeric: tabular-nums; }\n.pace .lbl { margin-inline-end: 4px; }\n/* One small button: the word over the speed, so it takes little room. It comes in on Auto-turn's left, so Auto-turn stays under the pointer that just pressed it. The angle's running number makes the room, so the turning bar is never wider than the still one and adds no row; it stays for a screen reader. */\n.pace-now { flex-direction: column; gap: 0; padding: 0 10px; line-height: 1.1; }\n.pace-now .lbl { font-size: 0.7em; font-weight: 400; }\n:host([data-turning][data-level=\"basic\"]) .field.angle { flex-basis: 110px; }\n:host([data-turning][data-level=\"basic\"]) .field.angle output { position: absolute; width: 1px; min-width: 0; height: 1px; overflow: hidden; clip-path: inset(50%); }\n.drag { margin-inline-start: 8px; }\n.more { margin-inline-start: auto; }\n/* A compact bar on a phone: two rows to start with (angle, Auto-turn and More; the zoom), more rows when the reader asks for more; labels read only by a screen reader. */\n@media (max-width: 640px) {\n  .bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px; grid-template-areas: \"angle play more\" \"tilt tilt front\" \"pace pace pace\" \"zoom zoom zoom\" \"pan pan pan\"; gap: 0 8px; padding: 2px 8px; }\n  .field.angle { grid-area: angle; }\n  .field.tilt { grid-area: tilt; }\n  .field label, .field output, .play .text, .more .text, .pace .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  .play, .more { padding: 0; }\n  .play { grid-area: play; }\n  .more { grid-area: more; }\n  .front { grid-area: front; padding: 0 12px; }\n  .pace { grid-area: pace; justify-self: end; flex-wrap: nowrap; }\n  .pace button { padding: 0 12px; }\n  .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }\n  .zoom button { padding: 0 8px; }\n  .zoom button.level { padding: 0 6px; }\n  /* In the free room left of the zoom buttons, so showing it adds no row. */\n  .pace-now { grid-area: zoom; justify-self: start; }\n  .pan { grid-area: pan; justify-content: center; }\n  .drag { margin-inline-start: 4px; }\n}\n";

package/dist/view-controls/styles.js

@@ -52,9 +52,13 @@ button[aria-expanded="true"] { border-color: var(--_ink); box-shadow: inset 0 0
 button:disabled { opacity: 0.4; cursor: default; }
 svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
 button[aria-pressed="true"] .i-play, button[aria-pressed="false"] .i-pause { display: none; }
-.zoom button.two { min-width: 56px; }
 .zoom button.level { min-width: 64px; padding: 0 8px; font-variant-numeric: tabular-nums; }
 .pace .lbl { margin-inline-end: 4px; }
+/* One small button: the word over the speed, so it takes little room. It comes in on Auto-turn's left, so Auto-turn stays under the pointer that just pressed it. The angle's running number makes the room, so the turning bar is never wider than the still one and adds no row; it stays for a screen reader. */
+.pace-now { flex-direction: column; gap: 0; padding: 0 10px; line-height: 1.1; }
+.pace-now .lbl { font-size: 0.7em; font-weight: 400; }
+:host([data-turning][data-level="basic"]) .field.angle { flex-basis: 110px; }
+:host([data-turning][data-level="basic"]) .field.angle output { position: absolute; width: 1px; min-width: 0; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .drag { margin-inline-start: 8px; }
 .more { margin-inline-start: auto; }
 /* A compact bar on a phone: two rows to start with (angle, Auto-turn and More; the zoom), more rows when the reader asks for more; labels read only by a screen reader. */
@@ -72,6 +76,8 @@ button[aria-pressed="true"] .i-play, button[aria-pressed="false"] .i-pause { dis
   .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }
   .zoom button { padding: 0 8px; }
   .zoom button.level { padding: 0 6px; }
+  /* In the free room left of the zoom buttons, so showing it adds no row. */
+  .pace-now { grid-area: zoom; justify-self: start; }
   .pan { grid-area: pan; justify-content: center; }
   .drag { margin-inline-start: 4px; }
 }

package/dist/view-controls/words.d.ts

@@ -6,6 +6,7 @@ export interface ViewWords {
     front: string;
     zoom: string;
     zoomOut: string;
+    /** Not shown any more: the bar has no "2×" button since the readout came, as it read like one. Kept so a page's own `words` still type-check. */
     zoomTwo: string;
     zoomIn: string;
     fit: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kazoku-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Kazoku UI 家族, the family's shared interface parts as their own versioned package: view controls for any 3D or zoomable view (angle, tilt, auto-turn, zoom about the pointer, pan, touch, address state) a light, dark and auto theme switch, a language picker, choices kept in the address and a save-as-image button, each a framework-free custom element and a plain controller. Zero dependencies; the shared 3D renderer takes three.js as an optional peer.",
   "keywords": [
     "view-controls",
@@ -162,6 +162,7 @@
     "dev": "pnpm build && node scripts/dev.mjs",
     "site": "pnpm build && node scripts/site.mjs",
     "test:demo": "pnpm site && playwright test",
+    "test:freeze": "pnpm site && playwright test e2e/renderer.demo.mjs --project=chromium-desk",
     "screenshots": "pnpm site && node scripts/screenshots.mjs"
   },
   "devDependencies": {