@johnmorrisdotca/kazoku-ui 0.10.1 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [Unreleased]
+
+## [0.12.0] - 2026-11-03
+
+The view controls in four layouts, chosen by one attribute, and the zoom as a slider with marks. A page that names no layout looks exactly as before.
+
+- **`layout="horizontal|vertical|compact"`** on `<kazoku-view-controls>` (KAZOKU-UI-29). `horizontal` is a tidy bar under the view: the turn on one row, the zoom slider on the next, one row when the bar is 900 px or wider. `vertical` is a column beside the view (`--kazoku-column-width`, 16rem), Auto-turn and More at the top so More stays put. `compact` is one short row (Auto-turn, −, the readout, +, More) that never takes a second row until More is pressed, and then shows everything else under it. `classic` is the default and the bar of 0.10, unchanged. The level (`controls`, More) still says what is shown, the same way in every layout. The host carries `data-layout`, and `data-flat` on a flat view.
+- **The zoom slider** in the horizontal, vertical and compact layouts: `zoom-min` to `zoom-max` on a logarithmic scale, marked and labelled at the ends and at the common zooms between them that have room (1×, 2×, 3×, 5× for the default range). The readout stays beside it and both always show the true zoom. − and + still step. A drag or press within 8 px of a mark goes to it, never further. Keys: arrows step by 1.1× and stop on a mark they would pass, Page Up and Down go from mark to mark, Home and End to the ends. A screen reader hears the value as the readout says it. Part names `zoom-slider`.
+- **The scale without the element**: `zoomMarks`, `zoomPosition`, `zoomAtPosition`, `zoomStep`, `zoomToMark`, `zoomSnap`, `COMMON_ZOOMS`, `MARK_GAP`, `SLIDER_STEP`, `SNAP_PX`, and `parseLayout`, `LAYOUTS` and the type `Layout`, from `@johnmorrisdotca/kazoku-ui/view-controls`.
+- **The layouts demo** (`demo/layouts.html`, on GitHub Pages as `layouts.html`): every layout live, side by side, each with its code and a Copy button, and a row of zoom ranges that changes every slider's marks and the code; one layout at a time, picked from a row, below 1100 px. The main demo takes `?layout=`, `?zoom-min=` and `?zoom-max=`. The README shows the layouts in a picture (`docs/images/layouts-*.webp`, made by `pnpm screenshots`) and a table of what each shows.
+- Tests: `test/zoom-scale.test.ts` (the scale, the marks for eight ranges, the keys' steps, the snap, the layout words) and `e2e/layouts.demo.mjs` (each layout's controls, rows and sizes at a phone's width and a desk's, no row added by turning, compact one row on a phone, More staying put in the vertical column, the marks against the limits and the track, the slider by keys, mouse and touch, the slider and readout true after every way of zooming, the slider's name in both languages, and the layouts page).
+- **Centre in every layout**: the Centre button of 0.11.0 sits beside the zoom: in the two-row horizontal bar an icon in More's column, so Auto-turn and More never move; its own column on the one-row bar; its own row in the vertical column; with Fit behind More in compact, which stays one row. `e2e/layouts.demo.mjs` checks each.
+
+## [0.11.0] - 2026-11-03
+
+- **Exact grab** (KAZOKU-UI-28, from chikyu-earth's MODULES-200). `grab-radius` on `<kazoku-view-controls>` (and `grabRadius` on `createViewController`, `degreesPerPixel` and a `grabRadius` argument to `dragTurn`): the on-screen radius of a globe or turnable piece in CSS pixels at Fit, or `fit` for half the smaller side of the view. A drag then turns the view by the angle that keeps the touched point under the pointer, on both axes, and the radius grows with the zoom. Left out, nothing changes: the fixed angle across the view (180 degrees across the width, 60 down the height) that moved a globe's ground about 1.5 pixels for each pixel of drag sideways and half a pixel up and down.
+- **A Centre button** (KAZOKU-UI-33). Once the view is zoomed or moved, a Centre button (中央) puts the object back in the middle at Fit and the default angle, with a quarter of a second's move (at once under reduced motion; a hand on the view stops it): `element.centre()`, `controller.centre(animate)`, the `centre` word in both languages, `between()` in the maths. The keys Home and 0 do the same without the move. `object-size` (`objectSize`) holds a pan so that at least a quarter of an object smaller than the view stays in view.
+- **The drag rule**, written down in `docs/drag-rule.md`: the surface under the pointer follows the pointer, the arrow keys agree, Auto-turn goes the object's real way.
+- **`templates/e2e-ground.mjs`**, the shared browser check of the rule (`checkFollowsTheHand`, `checkExactGrab`, and the parts; `picture` names what is photographed and `window` the part of it that is followed, for a thin object such as a rocket), copied unchanged into a package's `e2e/`; a unit test holds its finder. The demo's `grab.html` draws a globe turned with exact grab and is tested with the helper.
+
 ## [0.10.1] - 2026-11-02
 
 - **`onContext("restored")`** (KAZOKU-UI-15, found by chikyu-earth). The shared renderer's `onContext` was told `"lost"` and `"unavailable"` but never `"restored"`, although `docs/renderer.md` and the `SharedRendererOptions` type said it was. It is now called when the browser gives the context back, after the focused view draws again. `e2e/renderer.demo.mjs`'s lost-and-restored check reads the events the demo records (`["lost"]`, then `["lost", "restored"]`); it fails on 0.10.0, where the second list is `["lost"]`.

package/README.md

@@ -9,7 +9,7 @@ The family's shared interface parts, as their own versioned package: one part pe
 The first part is the **view controls** for any 3D or zoomable view. They never draw the scene: they tell your page what the reader chose, and your canvas, WebGL,
 SVG or CSS 3D applies it.
 
-[Demo](https://johnmorrisdotca.github.io/kazoku-ui/) · [Strict-CSP demo](https://johnmorrisdotca.github.io/kazoku-ui/csp.html) · [Theme switch](docs/theme-switch.md) · [Language picker](docs/language-picker.md) · [Address state](docs/address-state.md) · [Save image](docs/save-image.md) · [Shared 3D renderer](docs/renderer.md) · [Content-Security-Policy](docs/csp.md) · [Labels, English and 日本語](docs/labels.md) · [Changelog](CHANGELOG.md)
+[Demo](https://johnmorrisdotca.github.io/kazoku-ui/) · [Layouts demo](https://johnmorrisdotca.github.io/kazoku-ui/layouts.html) · [Strict-CSP demo](https://johnmorrisdotca.github.io/kazoku-ui/csp.html) · [Theme switch](docs/theme-switch.md) · [Language picker](docs/language-picker.md) · [Address state](docs/address-state.md) · [Save image](docs/save-image.md) · [Shared 3D renderer](docs/renderer.md) · [The drag rule](docs/drag-rule.md) · [Content-Security-Policy](docs/csp.md) · [Labels, English and 日本語](docs/labels.md) · [Changelog](CHANGELOG.md)
 
 ```sh
 npm install @johnmorrisdotca/kazoku-ui
@@ -44,9 +44,48 @@ Parts (each its own subpath; later ones: picture-tile pickers, Help, GitHub and
 - Touch: one finger turns at 1x and moves the view when zoomed in; two fingers pinch.
 - Keys on the view: arrows turn and tip it, `+` and `-` zoom, `0` or Home is Front and Fit.
 - The choices are kept in the address, with keys you can rename.
+- **Four layouts** (`layout`: classic, horizontal, vertical, compact) and a **zoom slider** with marks at 1×, 2× and the ends: see [Layouts](#layouts).
 - Labels in English and Japanese; light and dark; 48 px touch targets; a compact bar on a phone; no automatic turn for a reader who prefers reduced motion.
 - **A control never stops or resets the turn.** Zoom, tilt, pan, the Move or Turn choice, Fit and Front all leave Auto-turn running (Front only sets the angle to 0 and the turn goes on from there). A hand on the angle slider, or turning the view by dragging it, holds the turn still while it is down and the turn carries on from where the hand left it. Only the Auto-turn button pauses it.
 
+### Layouts
+
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kazoku-ui/main/docs/images/layouts-dark.webp">
+<img alt="The four layouts side by side, each under a turned card. Horizontal: an Angle slider with Auto-turn and More on one row, and under it a Zoom slider marked 1×, 2×, 3× and 5× with zoom out, the readout 1.6×, zoom in and Fit. Vertical: a column beside the view with Auto-turn and More at the top, then the Angle slider, the Zoom slider with its marks, and zoom out, 1.6×, zoom in and Fit. Compact: one short row of Auto-turn, zoom out, 1.6×, zoom in and More, here opened to show the zoom slider and Fit, the angle and tilt, the three speeds, Front and the pan pad. Classic: the bar as before. Each has its code and a Copy button." src="https://raw.githubusercontent.com/johnmorrisdotca/kazoku-ui/main/docs/images/layouts-light.webp" width="720">
+</picture>
+
+Try them on the [layouts demo](https://johnmorrisdotca.github.io/kazoku-ui/layouts.html): every layout live, side by side, each with its code to copy, and a choice of zoom range to see the slider's marks change.
+
+The `layout` attribute says where the controls sit; `controls` (`basic` or `advanced`, and the reader's More) still says what is shown, the same in every layout. A page that names no layout keeps the bar it had.
+
+| `layout` | What it looks like | Basic shows | More adds |
+|---|---|---|---|
+| `classic` (the default) | The bar of 0.10 and before, unchanged: one wrapping row at a desk, two rows on a phone. No zoom slider. | Angle, Auto-turn, − readout +, Fit, More | Tilt, Slow, Medium, Fast, Front; the pan pad once zoomed in |
+| `horizontal` | A tidy bar under the view: the turn on one row (Angle, Auto-turn, More), the **zoom slider** on the next (Zoom, − readout +, Fit). One row when the bar is 900 px or wider. Under 560 px the labels are read by a screen reader only, and the readout is Fit. Centre, once the view is zoomed or moved, comes in at the end of the zoom row (an icon in the two rows, so Auto-turn and More never move). | Angle, Auto-turn, the zoom slider, − readout +, Fit, More | Tilt and Front, then the speeds, between the two rows; the pan pad last |
+| `vertical` | A column beside the view, `--kazoku-column-width` wide (16rem). Auto-turn and More at the top, so More does not move when it opens; then the Angle slider, the zoom slider, and − readout + and Fit. On a narrow screen put it under the view and give it `width: auto`. | Auto-turn, More, Angle, the zoom slider, − readout +, Fit | Tilt, the speeds, Front, the pan pad, in the column |
+| `compact` | The least room, for a card or a phone: **one row** of Auto-turn, −, the readout, + and More (icons, named for a screen reader). It never takes a second row until More is pressed; while it turns, the speed is in More, and Centre is there with Fit. | Auto-turn, − readout +, More | Everything else, one press away, under the row: the zoom slider and Fit, Angle, Tilt, the speeds, Front, the pan pad |
+
+```html
+<!-- Horizontal: under the view -->
+<div id="view" tabindex="0">...your scene...</div>
+<kazoku-view-controls for="view" layout="horizontal"></kazoku-view-controls>
+
+<!-- Vertical: beside the view -->
+<div style="display: flex; gap: 12px">
+  <div id="view" tabindex="0" style="flex: 1">...your scene...</div>
+  <kazoku-view-controls for="view" layout="vertical"></kazoku-view-controls>
+</div>
+
+<!-- Compact: one row; with overlay it floats over the bottom corner of a positioned card -->
+<div style="position: relative">
+  <div id="view" tabindex="0">...your scene...</div>
+  <kazoku-view-controls for="view" layout="compact" overlay></kazoku-view-controls>
+</div>
+```
+
+**The zoom slider** (horizontal, vertical and compact) runs from `zoom-min` to `zoom-max` on a logarithmic scale, so a press of − or + moves it the same distance anywhere along it. It has marks, labelled, at both ends and at the common zooms between them that have room for a label: 1× to 5× gives 1×, 2×, 3×, 5×; 0.5× to 4× gives 0.5×, 1×, 2×, 4×; 1× to 10× gives 1×, 2×, 4×, 10×. The readout beside it is the true zoom, and the slider always shows it too, whatever moved the view (the buttons, the wheel, a pinch, a double press, Fit, the keys on the view, the address, `set`, the limits). A drag or a press that ends within 8 px of a mark goes to it; anywhere else it stays where it was let go. − and + still step by 1.4×. Keys on the slider: the arrows step by 1.1× and stop on a mark they would pass, Page Up and Page Down go to the next mark, Home and End to the ends. A screen reader hears its value as the readout says it (`2.4×`), and its name is Zoom. Without the element, `zoomMarks(min, max)`, `zoomPosition`, `zoomAtPosition`, `zoomStep`, `zoomToMark` and `zoomSnap` are the same scale in `@johnmorrisdotca/kazoku-ui/view-controls`.
+
 ### In plain HTML
 
 ```html
@@ -113,7 +152,7 @@ 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 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.
+Options of `createViewController` that match: `zoom` (`"fit"` or a number), `fitScale`, `ignore`, `anchor`, `keyTilt`, `stopTurn`, `tiltStep`, `grabRadius`. `anchor`, `keyTilt`, `stopTurn`, `tiltStep` and `grabRadius` 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.
 
 ### Buttons and links inside the view
 
@@ -131,6 +170,14 @@ controls.anchor = { x: 60, y: -30 }; // pixels from the view's middle when it is
 
 Zoom is about that point of the picture, so it stays put on screen however far in the reader is and wherever the view has been moved to: `+` then `-` leaves it where it was within a pixel. Without the element, set `view.anchor` on the controller, or pass `anchor` to `createViewController`; `view.zoomBy(f)` and `view.zoomAt(z)` with no point use it.
 
+### Centre
+
+Zoom in and drag the object away and a **Centre** button (中央) comes into the bar. It puts the object back in the middle at Fit and the default angle (yaw and tilt 0) with a quarter of a second's move, at once for a reader who prefers reduced motion, and a hand on the view (a press, the wheel, a key) stops the move where it is. `element.centre()` and `controller.centre(animate = true)` do the same from code, ending with a change whose `reason` is `"centre"`. The keys Home and 0 are the same without the move (they send `front` and `fit`). The pan is held so the object cannot be lost: the picture keeps covering the view, or, with `object-size`, a quarter of the object stays in view.
+
+### The drag rule and exact grab
+
+In every turnable view the surface under the pointer follows the pointer, the arrow keys agree, and Auto-turn goes the object's real way; `grab-radius` makes a drag keep the touched point under the pointer on a globe. The rule, the option and the shared browser check (`templates/e2e-ground.mjs`) are in [docs/drag-rule.md](docs/drag-rule.md); the demo's `grab.html` shows it.
+
 ### Keys, the wheel and the turn
 
 Arrow Up tips like a drag up (`tilt` gets larger). A page whose wheel and keys should agree sets `key-tilt="wheel"`: Arrow Up then tips the way a wheel turned up does (`tilt` gets smaller), and Arrow Down the other way. `stop-turn` stops the automatic turn when the reader takes hold of the view with a press, the wheel or a key (a `pause` event is sent first); the defaults keep it turning, and a button or slider never stops it. `tilt-step="1"` makes a drag give whole degrees of tilt.
@@ -179,20 +226,23 @@ An `init` event is sent once, a moment after the element connects, with the star
 | `key-tilt` | Which way Arrow Up tips the view: `drag` (the default: like a drag up) or `wheel` (the way a wheel turned up tips it, the other way). Arrow Down goes the other way from Up. |
 | `stop-turn` | A press on the view, the wheel over it or a key it handles stops the automatic turn. Off by default, so the turn carries on. Buttons and sliders never stop it. |
 | `tilt-step` | Round the tilt of a drag to a multiple of this many degrees (`1` gives whole degrees). 0 by default: not rounded. |
+| `object-size` | `w,h`: the object's size at Fit in CSS pixels, when it is smaller than the view. A pan then keeps at least a quarter of the object in view, however far it is dragged; left out, the object is the picture, which keeps covering the view. Or set `element.objectSize = { width, height }`. |
+| `grab-radius` | Exact grab, for a globe or any turnable piece: its on-screen radius in CSS pixels at Fit, or `fit` for half the smaller side of the view. A drag then turns it by the angle that keeps the touched point under the pointer (a drag of *d* pixels moves the ground at the middle by *d* pixels), and the radius grows with the zoom. Left out, a drag turns by a fixed angle across the view, as before. See [docs/drag-rule.md](docs/drag-rule.md). |
 | `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; 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. |
+| `layout` | `classic` (the default), `horizontal`, `vertical` or `compact`: where the controls sit (see [Layouts](#layouts)). Can change at any time. Anything else is `classic`. The host carries `data-layout` with the layout in use. |
 | `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). |
 | `address` | Keep the choices in the page's address (`?yaw=40&tilt=10&zoom=2&drag=turn&speed=fast`). |
 | `address-keys` | Other keys: `yaw:a,zoom:z`. |
 | `theme` | `light` or `dark`; otherwise the page's colour scheme. |
-| `overlay` | Sit over the bottom of a positioned parent. |
+| `overlay` | Sit over the bottom of a positioned parent. With `layout="compact"` the row floats 8 px in from the bottom start corner instead of spanning the bottom. |
 
 Methods: `play()`, `pause()`, `front()`, `fit()`, `set({ yaw, tilt, zoom, panX, panY, drag })`, `setFitScale(n)`, and `controller` (the `createViewController` object behind it). `element.words = { front: "Home" }` replaces labels.
-Colours are custom properties: `--kazoku-ink`, `--kazoku-surface`, `--kazoku-line`, `--kazoku-accent`; the parts are `bar`, `field`, `slider` and `button`.
+Colours are custom properties: `--kazoku-ink`, `--kazoku-surface`, `--kazoku-line`, `--kazoku-accent`; the parts are `bar`, `field`, `slider` and `button`, and the zoom slider's `zoom-slider` (on its field and its input).
 
 ### The address
 
@@ -285,11 +335,11 @@ The styles are adopted as a constructable stylesheet (`adoptedStyleSheets`), so
 
 ## Size
 
-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.
+Gzipped, unbundled. View controls: the element and its definition about 9.3 KB, the controller 5.0 KB, the sight watch 0.6 KB, the maths 2.1 KB, the address 1.4 KB, the levels and layouts 0.6 KB, the zoom scale 1.5 KB, the labels 0.9 KB and the styles 4.0 KB (the four layouts and the slider). 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, 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).
+`pnpm check` (lint, types, 122 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, each layout's controls, rows and sizes (compact one row on a phone, turning adding no row), the zoom slider by keys, mouse and touch, its marks for several ranges and always the true zoom, the layouts page, 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/view-controls/controller.d.ts

@@ -41,6 +41,10 @@ export interface ViewControllerOptions {
     stopTurn?: boolean;
     /** Round the tilt of a drag to a multiple of this many degrees; 0 (the default) leaves it unrounded, 1 gives whole degrees. */
     tiltStep?: number;
+    /** Exact grab: the on-screen radius, in CSS pixels at Fit, of the globe or turnable piece, or `"fit"` for half the smaller side of the view. A drag then turns it by the angle that keeps the touched point under the pointer (`degreesPerPixel`), and at a zoom the radius grows with it. 0 (the default) keeps the fixed angle across the view. */
+    grabRadius?: number | "fit";
+    /** The object's size at Fit in CSS pixels, when it is smaller than the view: a pan then keeps at least a quarter of it in view (see `clampPan`). Left out, the object is the picture, which covers the view. */
+    objectSize?: Size;
     /** The view's size in CSS pixels, for holding the pan; `bind` gives it from the element when this is left out. */
     size?: () => Size | undefined;
     onChange?: (state: ViewState, info: ChangeInfo) => void;
@@ -59,6 +63,10 @@ export interface ViewController {
     keyTilt: KeyTilt;
     stopTurn: boolean;
     tiltStep: number;
+    /** Exact grab (see `ViewControllerOptions.grabRadius`). Can be changed at any time. */
+    grabRadius: number | "fit";
+    /** The object's size at Fit (see `ViewControllerOptions.objectSize`). Can be changed at any time. */
+    objectSize: Size | undefined;
     /** What zoom 1 means to the page (see `ViewControllerOptions.fitScale`). */
     readonly fitScale: number;
     /** The `state.zoom` the view opens at: 1 for "fit", else the starting scale divided by `fitScale`. The address leaves a zoom at this value out. */
@@ -81,6 +89,8 @@ export interface ViewController {
     releaseTurn(): void;
     front(): void;
     fit(): void;
+    /** Put the object back in the middle at Fit and the default angle (yaw and tilt 0). It moves there over a quarter of a second, and at once for `animate` false or for a reader who prefers reduced motion; any hand on the view stops the move where it is. Ends with a change `{ final: true, reason: "centre" }`. */
+    centre(animate?: boolean): void;
     /** Zoom to `next` about the point `at` (client pixels); left out, about the `anchor`, else the view's middle. */
     zoomAt(next: number, at?: Point, final?: boolean): void;
     zoomBy(factor: number, at?: Point): void;

package/dist/view-controls/controller.js

@@ -1,7 +1,9 @@
 import { turnOnlyInSight } from "./sight.js";
-import { clamp, clampPan, DEFAULT_LIMITS, dragTurn, PAN_STEP, pinchTo, wheelZoomFactor, wrapYaw, ZOOMED, zoomAbout } from "./math.js";
+import { between, 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]";
+/** How long a move to the middle takes. */
+const CENTRE_MS = 250;
 const HANDLED_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "+", "=", "-", "_", "0", "Home"];
 const positive = (value) => (typeof value === "number" && Number.isFinite(value) && value > 0 ? value : undefined);
 const browserClock = () => ({ request: (callback) => globalThis.requestAnimationFrame(callback), cancel: (id) => globalThis.cancelAnimationFrame(id) });
@@ -17,6 +19,8 @@ export function createViewController(options = {}) {
     let limit = 0;
     let turned = 0;
     let destroyed = false;
+    let centring = 0;
+    let stepping = false;
     let fitScale = positive(options.fitScale) ?? 1;
     let start = positive(options.zoom) ?? "fit";
     let atStart = true;
@@ -39,10 +43,18 @@ export function createViewController(options = {}) {
             bound.style.touchAction = state.zoom > ZOOMED ? "none" : "pan-y";
         options.onChange?.({ ...state }, { final, reason });
     };
+    const stopCentre = () => {
+        if (centring === 0)
+            return;
+        clock.cancel(centring);
+        centring = 0;
+    };
     const camera = () => ({ yaw: state.yaw, tilt: state.tilt, zoom: state.zoom, panX: state.panX, panY: state.panY });
     /** Take a camera in, held to the limits and, once the view's size is known, to the room the zoom gives. */
     const take = (next) => {
-        const held = clampPan({ ...next, zoom: clamp(next.zoom, limits.zoomMin, limits.zoomMax), tilt: clamp(next.tilt, -limits.tiltMax, limits.tiltMax) }, size());
+        if (!stepping)
+            stopCentre();
+        const held = clampPan({ ...next, zoom: clamp(next.zoom, limits.zoomMin, limits.zoomMax), tilt: clamp(next.tilt, -limits.tiltMax, limits.tiltMax) }, size(), controller.objectSize);
         state.yaw = controller.turnable ? wrapYaw(held.yaw) : state.yaw;
         state.tilt = controller.turnable ? held.tilt : state.tilt;
         if (held.zoom !== state.zoom)
@@ -70,7 +82,7 @@ export function createViewController(options = {}) {
         if (!state.turning || suspends > 0)
             return;
         frame = clock.request(tick);
-        if (holds > 0) {
+        if (holds > 0 || centring !== 0) {
             last = 0;
             return;
         }
@@ -94,6 +106,8 @@ export function createViewController(options = {}) {
         keyTilt: options.keyTilt ?? "drag",
         stopTurn: options.stopTurn ?? false,
         tiltStep: options.tiltStep ?? 0,
+        grabRadius: options.grabRadius ?? 0,
+        objectSize: options.objectSize,
         get fitScale() {
             return fitScale;
         },
@@ -186,6 +200,35 @@ export function createViewController(options = {}) {
             take({ ...camera(), zoom: 1, panX: 0, panY: 0 });
             emit(true, "fit");
         },
+        centre(animate = true) {
+            stopCentre();
+            const from = camera();
+            const to = { yaw: 0, tilt: 0, zoom: 1, panX: 0, panY: 0 };
+            const reduced = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true;
+            const same = from.yaw === 0 && from.tilt === 0 && from.zoom === 1 && from.panX === 0 && from.panY === 0;
+            if (!animate || reduced || same || destroyed) {
+                take(to);
+                emit(true, "centre");
+                return;
+            }
+            let began = -1;
+            const step = (now) => {
+                if (began < 0)
+                    began = now;
+                const fraction = (now - began) / CENTRE_MS;
+                stepping = true;
+                take(between(from, to, fraction));
+                stepping = false;
+                if (fraction >= 1) {
+                    centring = 0;
+                    emit(true, "centre");
+                    return;
+                }
+                emit(false, "centre");
+                centring = clock.request(step);
+            };
+            centring = clock.request(step);
+        },
         zoomAt(next, at, final = true) {
             take(zoomAbout(camera(), next, fromMiddle(at), limits));
             emit(final, "zoom");
@@ -209,6 +252,7 @@ export function createViewController(options = {}) {
         },
         destroy() {
             destroyed = true;
+            stopCentre();
             clock.cancel(frame);
             state.turning = false;
             unbind?.();
@@ -233,6 +277,7 @@ export function createViewController(options = {}) {
         };
         const canTurn = () => controller.turnable;
         const grab = () => {
+            stopCentre();
             if (controller.stopTurn)
                 controller.pause();
         };
@@ -311,7 +356,8 @@ export function createViewController(options = {}) {
                     return;
                 const r = view.getBoundingClientRect();
                 // Up and down tips it for a mouse; on a finger the browser keeps the vertical drag to scroll the page, and the tilt slider tips it.
-                take({ ...camera(), ...dragTurn(gesture.camera, dx, dy, { width: r.width, height: r.height }, e.pointerType !== "touch", limits, controller.tiltStep) });
+                const radius = controller.grabRadius === "fit" ? Math.min(r.width, r.height) / 2 : controller.grabRadius;
+                take({ ...camera(), ...dragTurn(gesture.camera, dx, dy, { width: r.width, height: r.height }, e.pointerType !== "touch", limits, controller.tiltStep, radius * gesture.camera.zoom) });
                 emit(false, "drag");
             }
         };

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

@@ -14,7 +14,8 @@ export interface ViewChangeDetail extends ViewState {
  * 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 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
+ * `layout` (`classic`, the default, `horizontal`, `vertical` or `compact`: where the controls sit; the horizontal, vertical and compact layouts have the zoom slider),
+ * `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), `object-size` (`w,h`: the object's size at Fit in pixels when it is smaller than the view, so a pan keeps a quarter of it in view), `grab-radius` (exact grab: the on-screen radius of the piece in pixels, or `fit`; a drag then keeps the touched point under the pointer), `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).
  */
 export declare class ViewControlsElement extends HTMLElement {
@@ -33,6 +34,8 @@ export declare class ViewControlsElement extends HTMLElement {
     play(): void;
     pause(): void;
     front(): void;
+    /** Put the object back in the middle at Fit and the default angle, with a brief move (at once for a reader who prefers reduced motion, or with `false`). */
+    centre(animate?: boolean): void;
     fit(): void;
     set(next: Partial<ViewState>): void;
     /** The point the zoom buttons and keys zoom about: `{ x, y }` in CSS pixels from the view's middle when it is at Fit, moving with the picture. `undefined` zooms about the view's middle. The `anchor` attribute (`"x,y"`) sets the same. */

package/dist/view-controls/element.js

@@ -6,11 +6,12 @@ import { localStore, remember } from "../shared/store.js";
 import { DEFAULT_KEYS, formatAddress, parseAddress, parseKeys } from "./address.js";
 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 { LEVEL_STORAGE_KEY, PACE_FACTOR, PACES, parseLayout, 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";
+import { SNAP_PX, zoomAtPosition, zoomMarks, zoomPosition, zoomSnap, zoomStep, zoomToMark } from "./zoomScale.js";
 export { EVENT, TAG };
 const icon = (path, cls = "") => `<svg viewBox="0 0 24 24" aria-hidden="true" class="${cls}"><path d="${path}"/></svg>`;
 const ICON = {
@@ -22,8 +23,12 @@ const ICON = {
     right: icon("M9 5l9 7-9 7z"),
     up: icon("M5 15l7-9 7 9z"),
     down: icon("M5 9l7 9 7-9z"),
+    centre: icon("M11 2h2v5h-2zM11 17h2v5h-2zM2 11h5v2H2zM17 11h5v2h-5zM12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 1 0 0-7z"),
     more: icon("M3 7h18v2H3zM3 15h18v2H3zM8 4a3 3 0 1 0 0 6 3 3 0 1 0 0-6zM16 12a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"),
 };
+/** The zoom slider's steps from end to end, and the width of its thumb in pixels (the styles draw it 28 wide). */
+const SLIDER_SPAN = 1000;
+const THUMB = 28;
 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>
@@ -36,7 +41,9 @@ const HTML = `
     <button type="button" data-b="fast" aria-pressed="false" part="button"><span data-w="fast"></span></button>
   </div>
   <button type="button" class="front adv" data-b="front" part="button"><span data-w="front"></span></button>
+  <button type="button" class="centre" data-b="centre" part="button" hidden>${ICON.centre}<span class="text" data-w="centre"></span></button>
   <div class="group zoom" role="group" data-g="zoom">
+    <div class="field zslide" part="field zoom-slider"><label data-w="zoom" for="zoom"></label><div class="zbox"><div class="ztrack" aria-hidden="true"><div class="zfill"></div></div><div class="zmarks" aria-hidden="true"></div><input id="zoom" type="range" min="0" max="1000" step="1" value="0" part="slider zoom-slider" /></div></div>
     <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>
@@ -61,11 +68,12 @@ const HTML = `
  * 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 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
+ * `layout` (`classic`, the default, `horizontal`, `vertical` or `compact`: where the controls sit; the horizontal, vertical and compact layouts have the zoom slider),
+ * `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), `object-size` (`w,h`: the object's size at Fit in pixels when it is smaller than the view, so a pan keeps a quarter of it in view), `grab-radius` (exact grab: the on-screen radius of the piece in pixels, or `fit`; a drag then keeps the touched point under the pointer), `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).
  */
 export class ViewControlsElement extends HTMLElement {
-    static observedAttributes = ["for", "lang", "yaw", "tilt", "zoom", "fit-scale", "ignore", "anchor", "key-tilt", "stop-turn", "tilt-step", "speed", "controls", "flat", "tilt-max", "zoom-min", "zoom-max", "address-keys"];
+    static observedAttributes = ["for", "lang", "yaw", "tilt", "zoom", "fit-scale", "ignore", "anchor", "key-tilt", "stop-turn", "tilt-step", "grab-radius", "object-size", "speed", "controls", "layout", "flat", "tilt-max", "zoom-min", "zoom-max", "address-keys"];
     #root;
     #controller;
     #view;
@@ -78,6 +86,11 @@ export class ViewControlsElement extends HTMLElement {
     #unwatch;
     #offPage = false;
     #level = "basic";
+    #layout = "classic";
+    #marks = [];
+    #marksFor = "";
+    /** The zoom the slider shows now; NaN until it has shown one, and again when the marks are redrawn for new limits. */
+    #zoomShown = Number.NaN;
     #pace = "medium";
     #labels = wordsFor("en");
     #said = "";
@@ -115,6 +128,10 @@ export class ViewControlsElement extends HTMLElement {
     front() {
         this.#ensure().front();
     }
+    /** Put the object back in the middle at Fit and the default angle, with a brief move (at once for a reader who prefers reduced motion, or with `false`). */
+    centre(animate = true) {
+        this.#ensure().centre(animate);
+    }
     fit() {
         this.#ensure().fit();
     }
@@ -143,6 +160,7 @@ export class ViewControlsElement extends HTMLElement {
         if (this.#root.querySelector(".bar") === null)
             this.#build();
         this.#keys = parseKeys(this.getAttribute("address-keys"));
+        this.#arrange();
         this.#limits();
         const start = {};
         for (const key of ["yaw", "tilt"]) {
@@ -157,7 +175,7 @@ export class ViewControlsElement extends HTMLElement {
         this.#pace = pace ?? "medium";
         this.#speed();
         c.ignore = this.getAttribute("ignore") ?? DEFAULT_IGNORE;
-        for (const name of ["key-tilt", "stop-turn", "tilt-step"])
+        for (const name of ["key-tilt", "stop-turn", "tilt-step", "grab-radius", "object-size"])
             this.#option(name);
         if (this.hasAttribute("anchor"))
             this.#option("anchor");
@@ -216,10 +234,14 @@ export class ViewControlsElement extends HTMLElement {
             c.setFitScale(Number(value));
         else if (name === "ignore")
             c.ignore = value ?? DEFAULT_IGNORE;
-        else if (name === "anchor" || name === "key-tilt" || name === "stop-turn" || name === "tilt-step")
+        else if (name === "anchor" || name === "key-tilt" || name === "stop-turn" || name === "tilt-step" || name === "grab-radius" || name === "object-size")
             this.#option(name);
         else if (name === "speed")
             this.#speed();
+        else if (name === "layout") {
+            this.#arrange();
+            this.#show();
+        }
         else if (name === "controls") {
             this.#level = parseLevel(value) ?? "basic";
             this.#show();
@@ -249,6 +271,12 @@ export class ViewControlsElement extends HTMLElement {
             c.stopTurn = value !== null;
         else if (name === "tilt-step")
             c.tiltStep = Number(value) > 0 && Number.isFinite(Number(value)) ? Number(value) : 0;
+        else if (name === "object-size") {
+            const [w, h] = (value ?? "").trim().split(/[\s,x]+/).map(Number);
+            c.objectSize = w !== undefined && w > 0 && Number.isFinite(w) ? { width: w, height: h !== undefined && h > 0 && Number.isFinite(h) ? h : w } : undefined;
+        }
+        else if (name === "grab-radius")
+            c.grabRadius = value?.trim() === "fit" ? "fit" : Number(value) > 0 && Number.isFinite(Number(value)) ? Number(value) : 0;
     }
     #startZoom() {
         const value = Number(this.getAttribute("zoom"));
@@ -301,12 +329,14 @@ export class ViewControlsElement extends HTMLElement {
         };
         slider("yaw");
         slider("tilt");
+        this.#zoomSlider(q("#zoom"), c);
         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("fit", () => c().fit());
+        on("centre", () => c().centre());
         on("level", () => c().fit());
         on("more", () => {
             this.#level = this.#level === "basic" ? "advanced" : "basic";
@@ -330,6 +360,76 @@ export class ViewControlsElement extends HTMLElement {
         on("move", () => c().setDrag("move"));
         on("turn", () => c().setDrag("turn"));
     }
+    /** The zoom slider: logarithmic, so a press of + or - moves it the same way anywhere; a drag that ends near a mark goes to it, and the keys step, jump between marks and go to the ends. */
+    #zoomSlider(input, c) {
+        const go = (final) => {
+            const { zoomMin: min, zoomMax: max } = c().limits;
+            const length = input.getBoundingClientRect().width - THUMB;
+            const zoom = zoomAtPosition(Number(input.value) / SLIDER_SPAN, min, max);
+            c().zoomAt(zoomSnap(zoom, this.#marks, min, max, length > 0 ? SNAP_PX / length : 0), undefined, final);
+        };
+        input.addEventListener("input", () => go(false));
+        input.addEventListener("change", () => go(true));
+        input.addEventListener("keydown", (event) => {
+            const { zoomMin: min, zoomMax: max } = c().limits;
+            const zoom = c().state.zoom;
+            const up = event.key === "ArrowRight" || event.key === "ArrowUp";
+            const down = event.key === "ArrowLeft" || event.key === "ArrowDown";
+            let next;
+            if (up || down)
+                next = zoomStep(zoom, this.#marks, up ? 1 : -1, min, max);
+            else if (event.key === "PageUp" || event.key === "PageDown")
+                next = zoomToMark(zoom, this.#marks, event.key === "PageUp" ? 1 : -1, min, max);
+            else if (event.key === "Home")
+                next = min;
+            else if (event.key === "End")
+                next = max;
+            if (next === undefined)
+                return;
+            event.preventDefault();
+            c().zoomAt(next);
+        });
+    }
+    /** The layout from the attribute, on the host as `data-layout` for the styles. */
+    #arrange() {
+        this.#layout = parseLayout(this.getAttribute("layout"));
+        if (this.dataset.layout !== this.#layout)
+            this.dataset.layout = this.#layout;
+    }
+    /** The slider's marks for the limits now: ticks on the track and their labels under it, made again only when the limits change. */
+    #drawMarks() {
+        const { zoomMin: min, zoomMax: max } = this.#ensure().limits;
+        const key = `${min} ${max}`;
+        if (key === this.#marksFor)
+            return;
+        this.#marksFor = key;
+        this.#marks = zoomMarks(min, max);
+        this.#zoomShown = Number.NaN;
+        const track = this.#root.querySelector(".ztrack");
+        const labels = this.#root.querySelector(".zmarks");
+        if (track === null || labels === null)
+            return;
+        for (const tick of track.querySelectorAll(".ztick"))
+            tick.remove();
+        labels.replaceChildren();
+        const doc = this.ownerDocument;
+        for (const mark of this.#marks) {
+            // Placed through the CSSOM, which a strict style-src allows, not a style attribute in markup.
+            const tick = doc.createElement("span");
+            tick.className = "ztick";
+            tick.style.setProperty("--at", String(mark.at));
+            track.append(tick);
+            const label = doc.createElement("span");
+            label.className = "zmark";
+            label.dataset.zoom = String(mark.zoom);
+            if (mark.end)
+                label.dataset.end = mark.at === 0 ? "start" : "end";
+            label.style.setProperty("--at", String(mark.at));
+            label.textContent = zoomText(mark.zoom);
+            labels.append(label);
+        }
+        this.#root.querySelector(".zslide")?.toggleAttribute("hidden", this.#marks.length === 0);
+    }
     #storageKey() {
         return this.getAttribute("storage") || LEVEL_STORAGE_KEY;
     }
@@ -359,6 +459,7 @@ export class ViewControlsElement extends HTMLElement {
             tilt.min = String(-c.limits.tiltMax);
             tilt.max = String(c.limits.tiltMax);
         }
+        this.#drawMarks();
     }
     #resolveView() {
         const id = this.getAttribute("for");
@@ -421,6 +522,8 @@ export class ViewControlsElement extends HTMLElement {
         q('[data-o="yaw"]').value = `${Math.round(s.yaw)}°`;
         q('[data-o="tilt"]').value = `${Math.round(s.tilt)}°`;
         q('[data-b="play"]').setAttribute("aria-pressed", String(s.turning));
+        // Centre comes in once the view has been zoomed or moved, which is when the object can be lost; it puts it back in the middle at Fit and the default angle.
+        q(".centre").hidden = s.zoom === 1 && s.panX === 0 && s.panY === 0;
         q('[data-b="out"]').disabled = s.zoom <= c.limits.zoomMin + 1e-6;
         q('[data-b="in"]').disabled = s.zoom >= c.limits.zoomMax - 1e-6;
         const advanced = this.#level === "advanced";
@@ -436,6 +539,18 @@ export class ViewControlsElement extends HTMLElement {
                 node.setAttribute("aria-label", label);
         };
         write(q('[data-o="zoom"]'), zoom);
+        // The slider always shows the true zoom, wherever it came from. A frame of the automatic turn leaves the zoom alone, so it costs one comparison here.
+        if (s.zoom !== this.#zoomShown) {
+            this.#zoomShown = s.zoom;
+            const slider = q("#zoom");
+            const at = zoomPosition(s.zoom, c.limits.zoomMin, c.limits.zoomMax);
+            const value = String(Math.round(at * SLIDER_SPAN));
+            if (slider.value !== value)
+                slider.value = value;
+            q(".zbox").style.setProperty("--pos", String(at));
+            if (slider.getAttribute("aria-valuetext") !== zoom)
+                slider.setAttribute("aria-valuetext", zoom);
+        }
         say(q('[data-b="level"]'), `${words.zoomLevel} ${zoom}, ${words.zoomReset}`);
         this.#sayZoom(`${words.zoomLevel} ${zoom}`);
         for (const pace of PACES)
@@ -459,6 +574,8 @@ export class ViewControlsElement extends HTMLElement {
         // 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);
+        if (this.hasAttribute("data-flat") !== flat)
+            this.toggleAttribute("data-flat", flat);
     }
     /** Tells a screen reader the zoom once it has settled for a moment (a pinch or a wheel makes many steps). */
     #sayZoom(text) {

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

@@ -1,7 +1,8 @@
 export { DEFAULT_KEYS, formatAddress, parseAddress, parseKeys, type AddressChoices, type AddressKeys, type DragMode } from "./address.ts";
 export { createViewController, DEFAULT_IGNORE, type ChangeInfo, type Clock, type ViewController, type ViewControllerOptions, type ViewState } from "./controller.ts";
-export { clamp, clampPan, DEFAULT_LIMITS, dragTurn, PAN_STEP, pinchTo, TILT_ACROSS, TURN_ACROSS, wheelZoomFactor, wrapYaw, ZOOM_STEP, ZOOMED, zoomAbout, type Camera, type Limits, type PinchStart, type Point, type Size } from "./math.ts";
+export { between, clamp, clampPan, DEFAULT_LIMITS, degreesPerPixel, dragTurn, PAN_STEP, pinchTo, TILT_ACROSS, TURN_ACROSS, wheelZoomFactor, wrapYaw, ZOOM_STEP, ZOOMED, zoomAbout, type Camera, type Limits, type PinchStart, type Point, type Size } from "./math.ts";
 export { languageOf, WORDS, wordsFor, type Language, type ViewWords } from "./words.ts";
 export declare const EVENT = "kazoku-viewchange";
 export declare const TAG = "kazoku-view-controls";
-export { LEVEL_STORAGE_KEY, PACE_FACTOR, PACES, parseLevel, parsePace, zoomText, type Level, type Pace } from "./levels.ts";
+export { LAYOUTS, LEVEL_STORAGE_KEY, PACE_FACTOR, PACES, parseLayout, parseLevel, parsePace, zoomText, type Layout, type Level, type Pace } from "./levels.ts";
+export { COMMON_ZOOMS, MARK_GAP, SLIDER_STEP, SNAP_PX, zoomAtPosition, zoomMarks, zoomPosition, zoomSnap, zoomStep, zoomToMark, type ZoomMark } from "./zoomScale.ts";

package/dist/view-controls/index.js

@@ -1,8 +1,9 @@
 // The view controls without the element: the controller, the arithmetic, the address and the labels. Nothing here touches the DOM until `bind` is called, so it imports on a server.
 export { DEFAULT_KEYS, formatAddress, parseAddress, parseKeys } from "./address.js";
 export { createViewController, DEFAULT_IGNORE } from "./controller.js";
-export { clamp, clampPan, DEFAULT_LIMITS, dragTurn, PAN_STEP, pinchTo, TILT_ACROSS, TURN_ACROSS, wheelZoomFactor, wrapYaw, ZOOM_STEP, ZOOMED, zoomAbout } from "./math.js";
+export { between, clamp, clampPan, DEFAULT_LIMITS, degreesPerPixel, dragTurn, PAN_STEP, pinchTo, TILT_ACROSS, TURN_ACROSS, wheelZoomFactor, wrapYaw, ZOOM_STEP, ZOOMED, zoomAbout } from "./math.js";
 export { languageOf, WORDS, wordsFor } from "./words.js";
 export const EVENT = "kazoku-viewchange";
 export const TAG = "kazoku-view-controls";
-export { LEVEL_STORAGE_KEY, PACE_FACTOR, PACES, parseLevel, parsePace, zoomText } from "./levels.js";
+export { LAYOUTS, LEVEL_STORAGE_KEY, PACE_FACTOR, PACES, parseLayout, parseLevel, parsePace, zoomText } from "./levels.js";
+export { COMMON_ZOOMS, MARK_GAP, SLIDER_STEP, SNAP_PX, zoomAtPosition, zoomMarks, zoomPosition, zoomSnap, zoomStep, zoomToMark } from "./zoomScale.js";

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

@@ -10,3 +10,12 @@ 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×`; below 1, two figures, so a small zoom never reads `0×`. */
 export declare const zoomText: (zoom: number) => string;
+/**
+ * How the controls are laid out, the `layout` attribute. `classic` is the default: the bar of 0.10 and before, unchanged. `horizontal` is a tidy bar under the view with the
+ * zoom slider; `vertical` a column beside the view; `compact` one short row for a card or a phone, with everything else one press of More away. The level (`controls`) still
+ * says what is shown; the layout says where.
+ */
+export type Layout = "classic" | "horizontal" | "vertical" | "compact";
+export declare const LAYOUTS: readonly Layout[];
+/** A layout is one of its words; anything else (or none) is `classic`. */
+export declare const parseLayout: (text: string | null | undefined) => Layout;

package/dist/view-controls/levels.js

@@ -7,3 +7,6 @@ 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×`; below 1, two figures, so a small zoom never reads `0×`. */
 export const zoomText = (zoom) => `${Number(zoom < 1 ? zoom.toPrecision(2) : zoom.toFixed(1))}×`;
+export const LAYOUTS = ["classic", "horizontal", "vertical", "compact"];
+/** A layout is one of its words; anything else (or none) is `classic`. */
+export const parseLayout = (text) => LAYOUTS.find((layout) => layout === text) ?? "classic";

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

@@ -34,8 +34,11 @@ export declare const clamp: (value: number, low: number, high: number) => number
 export declare const wrapYaw: (angle: number) => number;
 /** Zoom to `next` (held between the limits) keeping the point `at` (pixels from the view's middle) where it is. */
 export declare function zoomAbout(camera: Camera, next: number, at: Point, limits?: Limits): Camera;
-/** Hold the pan so the picture still covers the view: at zoom z the picture may move (z - 1) / 2 of the view's size either way. */
-export declare function clampPan(camera: Camera, size: Size | undefined): Camera;
+/**
+ * Hold the pan so the object cannot be lost. By default the object is the picture, which fills the view at Fit: at zoom z it may move (z - 1) / 2 of the view's size either way, so the picture still covers the view.
+ * A page whose object is smaller than the view gives its `object` (its size at Fit, in CSS pixels): it may then move until a quarter of it is still in view, in a view of any size, so it can never be dragged out.
+ */
+export declare function clampPan(camera: Camera, size: Size | undefined, object?: Size): Camera;
 /** What a pinch starts from: the distance between two fingers, their middle, and the camera at that moment. */
 export interface PinchStart {
     distance: number;
@@ -44,7 +47,14 @@ export interface PinchStart {
 }
 /** The camera for two fingers now at `a` and `b`: zoom by the change of distance about where the pinch began, and the middle of the fingers also drags the view. `centre` is the view's middle in client pixels. */
 export declare function pinchTo(start: PinchStart, a: Point, b: Point, centre: Point, limits?: Limits): Camera;
-/** A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). A `step` above 0 rounds the tilt to a multiple of it. */
-export declare function dragTurn(start: Camera, dx: number, dy: number, size: Size, tips: boolean, limits?: Limits, step?: number): Pick<Camera, "yaw" | "tilt">;
+/** Degrees of turn for one pixel of drag when the piece's on-screen radius is `radius` pixels: the pixel that a point at the middle of a sphere's face moves by, so the touched point stays under the pointer. */
+export declare const degreesPerPixel: (radius: number) => number;
+/**
+ * A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). A `step` above 0 rounds the tilt to a multiple of it.
+ * A `grabRadius` above 0 is the on-screen radius, in pixels, of a globe or any turnable piece: both axes then turn by the angle that carries a point at the middle of its face by the pixels dragged (`degreesPerPixel`), instead of a fixed angle across the view.
+ */
+export declare function dragTurn(start: Camera, dx: number, dy: number, size: Size, tips: boolean, limits?: Limits, step?: number, grabRadius?: number): Pick<Camera, "yaw" | "tilt">;
+/** The camera `fraction` of the way (0 to 1) from `from` to `to`, eased out: quick at first, slow at the end. */
+export declare function between(from: Camera, to: Camera, fraction: number): Camera;
 /** The factor a Ctrl or Command wheel turn zooms by (a trackpad's pinch arrives that way). `deltaMode` 1 is lines. */
 export declare const wheelZoomFactor: (deltaY: number, deltaMode: number) => number;

package/dist/view-controls/math.js

@@ -19,14 +19,17 @@ export function zoomAbout(camera, next, at, limits = DEFAULT_LIMITS) {
     const atOne = zoom <= 1;
     return { ...camera, zoom, panX: atOne ? 0 : at.x - (at.x - camera.panX) * k, panY: atOne ? 0 : at.y - (at.y - camera.panY) * k };
 }
-/** Hold the pan so the picture still covers the view: at zoom z the picture may move (z - 1) / 2 of the view's size either way. */
-export function clampPan(camera, size) {
+/**
+ * Hold the pan so the object cannot be lost. By default the object is the picture, which fills the view at Fit: at zoom z it may move (z - 1) / 2 of the view's size either way, so the picture still covers the view.
+ * A page whose object is smaller than the view gives its `object` (its size at Fit, in CSS pixels): it may then move until a quarter of it is still in view, in a view of any size, so it can never be dragged out.
+ */
+export function clampPan(camera, size, object) {
     if (camera.zoom <= 1)
         return { ...camera, panX: 0, panY: 0 };
     if (size === undefined)
         return camera;
-    const roomX = (size.width * (camera.zoom - 1)) / 2;
-    const roomY = (size.height * (camera.zoom - 1)) / 2;
+    const roomX = object === undefined ? (size.width * (camera.zoom - 1)) / 2 : size.width / 2 + (object.width * camera.zoom) / 4;
+    const roomY = object === undefined ? (size.height * (camera.zoom - 1)) / 2 : size.height / 2 + (object.height * camera.zoom) / 4;
     return { ...camera, panX: clamp(camera.panX, -roomX, roomX), panY: clamp(camera.panY, -roomY, roomY) };
 }
 /** The camera for two fingers now at `a` and `b`: zoom by the change of distance about where the pinch began, and the middle of the fingers also drags the view. `centre` is the view's middle in client pixels. */
@@ -38,12 +41,24 @@ export function pinchTo(start, a, b, centre, limits = DEFAULT_LIMITS) {
         return zoomed;
     return { ...zoomed, panX: zoomed.panX + (middle.x - start.middle.x), panY: zoomed.panY + (middle.y - start.middle.y) };
 }
-/** A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). A `step` above 0 rounds the tilt to a multiple of it. */
-export function dragTurn(start, dx, dy, size, tips, limits = DEFAULT_LIMITS, step = 0) {
-    const yaw = wrapYaw(start.yaw + (dx / (size.width || 360)) * TURN_ACROSS);
-    const raw = start.tilt - (dy / (size.height || 360)) * TILT_ACROSS;
+/** Degrees of turn for one pixel of drag when the piece's on-screen radius is `radius` pixels: the pixel that a point at the middle of a sphere's face moves by, so the touched point stays under the pointer. */
+export const degreesPerPixel = (radius) => (180 / Math.PI) / radius;
+/**
+ * A one-pointer drag that turns: `dx` and `dy` pixels from where it began, in a view of `size`. A finger does not tilt (the page's own scroll keeps the vertical drag). A `step` above 0 rounds the tilt to a multiple of it.
+ * A `grabRadius` above 0 is the on-screen radius, in pixels, of a globe or any turnable piece: both axes then turn by the angle that carries a point at the middle of its face by the pixels dragged (`degreesPerPixel`), instead of a fixed angle across the view.
+ */
+export function dragTurn(start, dx, dy, size, tips, limits = DEFAULT_LIMITS, step = 0, grabRadius = 0) {
+    const exact = grabRadius > 0 && Number.isFinite(grabRadius) ? degreesPerPixel(grabRadius) : 0;
+    const yaw = wrapYaw(start.yaw + (exact > 0 ? dx * exact : (dx / (size.width || 360)) * TURN_ACROSS));
+    const raw = start.tilt - (exact > 0 ? dy * exact : (dy / (size.height || 360)) * TILT_ACROSS);
     const tilt = tips ? clamp(step > 0 ? Math.round(raw / step) * step : raw, -limits.tiltMax, limits.tiltMax) : start.tilt;
     return { yaw, tilt };
 }
+/** The camera `fraction` of the way (0 to 1) from `from` to `to`, eased out: quick at first, slow at the end. */
+export function between(from, to, fraction) {
+    const t = 1 - (1 - clamp(fraction, 0, 1)) ** 3;
+    const mix = (a, b) => a + (b - a) * t;
+    return { yaw: mix(from.yaw, to.yaw), tilt: mix(from.tilt, to.tilt), zoom: mix(from.zoom, to.zoom), panX: mix(from.panX, to.panX), panY: mix(from.panY, to.panY) };
+}
 /** The factor a Ctrl or Command wheel turn zooms by (a trackpad's pinch arrives that way). `deltaMode` 1 is lines. */
 export const wheelZoomFactor = (deltaY, deltaMode) => Math.exp(-deltaY * (deltaMode === 1 ? 0.05 : 0.01));

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.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";
+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/* The classic 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  :host([data-layout=\"classic\"]) .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  :host([data-layout=\"classic\"]) .field.angle { grid-area: angle; }\n  :host([data-layout=\"classic\"]) .field.tilt { grid-area: tilt; }\n  :host([data-layout=\"classic\"]) .field label, :host([data-layout=\"classic\"]) .field output, :host([data-layout=\"classic\"]) .play .text, :host([data-layout=\"classic\"]) .more .text, :host([data-layout=\"classic\"]) .pace .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  :host([data-layout=\"classic\"]) .play, :host([data-layout=\"classic\"]) .more { padding: 0; }\n  :host([data-layout=\"classic\"]) .play { grid-area: play; }\n  :host([data-layout=\"classic\"]) .more { grid-area: more; }\n  :host([data-layout=\"classic\"]) .front { grid-area: front; padding: 0 12px; }\n  :host([data-layout=\"classic\"]) .pace { grid-area: pace; justify-self: end; flex-wrap: nowrap; }\n  :host([data-layout=\"classic\"]) .pace button { padding: 0 12px; }\n  :host([data-layout=\"classic\"]) .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }\n  :host([data-layout=\"classic\"]) .zoom button { padding: 0 8px; }\n  :host([data-layout=\"classic\"]) .zoom button.level { padding: 0 6px; }\n  /* In the free room left of the zoom buttons, so showing it adds no row. */\n  :host([data-layout=\"classic\"]) .pace-now { grid-area: zoom; justify-self: start; }\n  :host([data-layout=\"classic\"]) .pan { grid-area: pan; justify-content: center; }\n  :host([data-layout=\"classic\"]) .drag { margin-inline-start: 4px; }\n}\n\n/* The zoom slider (horizontal, vertical and compact): a logarithmic track with ticks at its marks, the labels under it, and the part from the least zoom to the zoom now filled. */\n.zslide { display: none; }\n:host([data-layout=\"horizontal\"]) .zslide, :host([data-layout=\"vertical\"]) .zslide, :host([data-layout=\"compact\"]) .zslide { display: flex; }\n.zbox { position: relative; flex: 1 1 auto; min-width: 96px; height: 52px; }\n.zbox input { position: absolute; inset: 0 0 auto; z-index: 1; min-width: 0; }\n.zbox input::-webkit-slider-runnable-track { background: transparent; }\n.zbox input::-moz-range-track { background: transparent; }\n.ztrack { position: absolute; inset-inline: 14px; top: 21px; height: 6px; border-radius: 3px; background: var(--_line); }\n.zfill { position: absolute; inset-block: 0; left: 0; width: calc(var(--pos, 0) * 100%); border-radius: 3px; background: var(--_accent); }\n.ztick { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 2px; height: 14px; border-radius: 1px; background: var(--_ink); opacity: 0.5; transform: translate(-50%, -50%); }\n.zmarks { position: absolute; inset-inline: 14px; top: 36px; height: 16px; pointer-events: none; }\n.zmark { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); font-size: 0.72rem; font-weight: 500; line-height: 16px; opacity: 0.85; white-space: nowrap; font-variant-numeric: tabular-nums; }\n.zmark[data-end=\"start\"] { transform: translateX(-35%); }\n.zmark[data-end=\"end\"] { transform: translateX(-65%); }\n\n/* Horizontal: a tidy bar under the view. Two rows (the turn, then the zoom with its slider); one row when its own width allows. More adds its rows between them. */\n:host([data-layout=\"horizontal\"]) { container-type: inline-size; }\n:host([data-layout=\"horizontal\"]) .bar, :host([data-layout=\"vertical\"]) .bar, :host([data-layout=\"compact\"]) .bar { display: grid; row-gap: 0; align-items: center; }\n:host([data-layout=\"horizontal\"]) .bar > *, :host([data-layout=\"vertical\"]) .bar > *, :host([data-layout=\"compact\"]) .zoom > * { margin-block: 2px; }\n:host([data-layout=\"horizontal\"]) .bar { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: \"angle speed play more\" \"tilt tilt front front\" \"pace pace pace pace\" \"zoom zoom zoom centre\" \"pan pan pan pan\"; column-gap: 8px; padding: 4px 8px; }\n:host([data-layout=\"horizontal\"][data-flat]) .bar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: \"zoom centre more\" \"pan pan pan\"; }\n:host([data-layout=\"horizontal\"]) .angle, :host([data-layout=\"vertical\"]) .angle, :host([data-layout=\"compact\"]) .angle { grid-area: angle; }\n:host([data-layout=\"horizontal\"]) .tilt, :host([data-layout=\"vertical\"]) .tilt, :host([data-layout=\"compact\"]) .tilt { grid-area: tilt; }\n:host([data-layout=\"horizontal\"]) .pace-now, :host([data-layout=\"vertical\"]) .pace-now { grid-area: speed; }\n:host([data-layout=\"horizontal\"]) .play, :host([data-layout=\"vertical\"]) .play, :host([data-layout=\"compact\"]) .play { grid-area: play; }\n:host([data-layout=\"horizontal\"]) .pace, :host([data-layout=\"vertical\"]) .pace, :host([data-layout=\"compact\"]) .pace { grid-area: pace; flex-wrap: nowrap; }\n:host([data-layout=\"horizontal\"]) .front, :host([data-layout=\"vertical\"]) .front, :host([data-layout=\"compact\"]) .front { grid-area: front; justify-self: start; }\n:host([data-layout=\"horizontal\"]) .zoom, :host([data-layout=\"vertical\"]) .zoom { grid-area: zoom; }\n:host([data-layout=\"horizontal\"]) .pan, :host([data-layout=\"vertical\"]) .pan, :host([data-layout=\"compact\"]) .pan { grid-area: pan; justify-self: start; }\n:host([data-layout=\"horizontal\"]) .more, :host([data-layout=\"vertical\"]) .more, :host([data-layout=\"compact\"]) .more { grid-area: more; margin-inline-start: 0; }\n/* Centre, shown once the view is zoomed or moved: beside the zoom, never in the turn's row, so Auto-turn and More stay where they are. */\n:host([data-layout=\"horizontal\"]) .centre, :host([data-layout=\"vertical\"]) .centre, :host([data-layout=\"compact\"]) .centre { grid-area: centre; justify-self: end; }\n/* In the two rows it shares More's column, so it is an icon (its name is read) and never widens that column, which would move Auto-turn. */\n@container (max-width: 899px) {\n  :host([data-layout=\"horizontal\"]) .centre .text { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  :host([data-layout=\"horizontal\"]) .centre { padding: 0; }\n}\n:host([data-layout=\"horizontal\"]) .zoom { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; }\n:host([data-layout=\"horizontal\"]) .zslide { flex: 1 1 auto; min-width: 0; }\n:host([data-layout=\"horizontal\"]) .zoom button, :host([data-layout=\"vertical\"]) .zoom button, :host([data-layout=\"compact\"]) .zoom button { padding: 0 10px; }\n:host([data-layout=\"horizontal\"]) .zoom button.level, :host([data-layout=\"vertical\"]) .zoom button.level, :host([data-layout=\"compact\"]) .zoom button.level { padding: 0 6px; }\n@container (max-width: 559px) {\n  :host([data-layout=\"horizontal\"]) .field label, :host([data-layout=\"horizontal\"]) .field output, :host([data-layout=\"horizontal\"]) .play .text, :host([data-layout=\"horizontal\"]) .more .text, :host([data-layout=\"horizontal\"]) .pace .lbl { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  :host([data-layout=\"horizontal\"]) .play, :host([data-layout=\"horizontal\"]) .more { padding: 0; }\n  :host([data-layout=\"horizontal\"]) .zbox { min-width: 72px; }\n  /* The readout is Fit here (its name says so), which leaves the slider the room for its marks. */\n  :host([data-layout=\"horizontal\"]) [data-b=\"fit\"] { display: none; }\n}\n@container (min-width: 900px) {\n  :host([data-layout=\"horizontal\"]) .bar { grid-template-columns: minmax(0, 1fr) auto auto auto auto auto; grid-template-areas: \"angle speed play zoom centre more\" \"tilt tilt tilt pace front front\" \"pan pan pan pan pan pan\"; column-gap: 12px; }\n  :host([data-layout=\"horizontal\"][data-flat]) .bar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: \"zoom centre more\" \"pan pan pan\"; }\n  :host([data-layout=\"horizontal\"]) .zslide { flex: 0 0 15rem; }\n  :host([data-layout=\"horizontal\"]) .pan { justify-self: end; }\n}\n\n/* Vertical: a column beside the view, its width --kazoku-column-width (16rem). Auto-turn and More at the top, so More stays put when it opens; then the turn, the zoom and its slider. */\n:host([data-layout=\"vertical\"]) { width: var(--kazoku-column-width, 16rem); max-width: 100%; }\n:host([data-layout=\"vertical\"]) .bar { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: \"play speed . more\" \"angle angle angle angle\" \"tilt tilt tilt tilt\" \"pace pace pace pace\" \"front front front front\" \"zoom zoom zoom zoom\" \"centre centre centre centre\" \"pan pan pan pan\"; column-gap: 8px; padding: 6px 8px; }\n:host([data-layout=\"vertical\"]) .field { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: \"label value\" \"slider slider\"; gap: 0 8px; }\n:host([data-layout=\"vertical\"]) .field label { grid-area: label; padding-top: 4px; }\n:host([data-layout=\"vertical\"]) .field output { grid-area: value; padding-top: 4px; }\n:host([data-layout=\"vertical\"]) .field input, :host([data-layout=\"vertical\"]) .zbox { grid-area: slider; }\n:host([data-layout=\"vertical\"]) .zoom { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: \"zs zs zs zs\" \"out level in fit\"; gap: 0 4px; }\n:host([data-layout=\"vertical\"]) .zslide { grid-area: zs; }\n:host([data-layout=\"vertical\"]) [data-b=\"out\"] { grid-area: out; }\n:host([data-layout=\"vertical\"]) [data-b=\"level\"] { grid-area: level; }\n:host([data-layout=\"vertical\"]) [data-b=\"in\"] { grid-area: in; }\n:host([data-layout=\"vertical\"]) [data-b=\"fit\"] { grid-area: fit; justify-self: start; }\n:host([data-layout=\"vertical\"]) .pace .lbl { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n:host([data-layout=\"vertical\"]) .pace button { padding: 0 10px; }\n:host([data-layout=\"vertical\"]) .pan { flex-wrap: wrap; }\n:host([data-layout=\"vertical\"]) .drag { margin-inline-start: 0; }\n\n/* Compact: one short row (Auto-turn, zoom out, the zoom now, zoom in, More) for a card or a phone. More opens the rest under it: the zoom slider and Fit, the angle, and the advanced controls. */\n:host([data-layout=\"compact\"]) { display: block; }\n:host([data-layout=\"compact\"][overlay]) { inset-inline: 8px auto; bottom: 8px; }\n/* Over a card, an open More never reaches past the card's top: the controls scroll inside themselves. */\n:host([data-layout=\"compact\"][overlay]) { display: flex; flex-direction: column; max-height: calc(100% - 16px); }\n:host([data-layout=\"compact\"][overlay]) .bar { min-height: 0; overflow-y: auto; }\n:host([data-layout=\"compact\"]) .bar { width: fit-content; max-width: 100%; grid-template-columns: repeat(5, auto); grid-template-areas: \"play out level in more\" \"zs zs zs zs fit\" \"centre centre centre centre centre\" \"angle angle angle angle angle\" \"tilt tilt tilt tilt tilt\" \"pace pace pace pace pace\" \"front front front front front\" \"pan pan pan pan pan\"; column-gap: 2px; padding: 2px 4px; border: 1px solid var(--_line); border-radius: 28px; background: var(--_surface); }\n:host([data-layout=\"compact\"][data-level=\"advanced\"]) .bar { border-radius: 20px; padding: 2px 8px 6px; column-gap: 4px; }\n:host([data-layout=\"compact\"][data-flat]) .bar { grid-template-areas: \"out level in more .\" \"zs zs zs fit fit\" \"centre centre centre centre centre\" \"pan pan pan pan pan\"; }\n:host([data-layout=\"compact\"]) .zoom { display: contents; }\n:host([data-layout=\"compact\"]) .zslide { grid-area: zs; }\n:host([data-layout=\"compact\"]) [data-b=\"out\"] { grid-area: out; }\n:host([data-layout=\"compact\"]) [data-b=\"level\"] { grid-area: level; }\n:host([data-layout=\"compact\"]) [data-b=\"in\"] { grid-area: in; }\n:host([data-layout=\"compact\"]) [data-b=\"fit\"] { grid-area: fit; }\n:host([data-layout=\"compact\"]) .play, :host([data-layout=\"compact\"]) .more, :host([data-layout=\"compact\"]) [data-b=\"out\"], :host([data-layout=\"compact\"]) [data-b=\"level\"], :host([data-layout=\"compact\"]) [data-b=\"in\"] { border-color: transparent; }\n:host([data-layout=\"compact\"]) .play:hover:not(:disabled), :host([data-layout=\"compact\"]) .more:hover:not(:disabled), :host([data-layout=\"compact\"]) .zoom button:hover:not(:disabled) { border-color: var(--_ink); }\n:host([data-layout=\"compact\"]) .play .text, :host([data-layout=\"compact\"]) .more .text { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n:host([data-layout=\"compact\"]) .play, :host([data-layout=\"compact\"]) .more { padding: 0; }\n:host([data-layout=\"compact\"]) .pace-now { display: none; }\n:host([data-layout=\"vertical\"]) .centre, :host([data-layout=\"compact\"]) .centre { justify-self: start; }\n/* The row stays one row: Centre is with Fit, one press of More away. */\n:host([data-layout=\"compact\"][data-level=\"basic\"]) .centre { display: none; }\n:host([data-layout=\"compact\"][data-level=\"basic\"]) .angle, :host([data-layout=\"compact\"][data-level=\"basic\"]) .zslide, :host([data-layout=\"compact\"][data-level=\"basic\"]) [data-b=\"fit\"] { display: none; }\n";

package/dist/view-controls/styles.js

@@ -1,5 +1,11 @@
 // The element's styles. Colours are custom properties on the host, so a page can set its own:
 // --kazoku-ink, --kazoku-surface, --kazoku-line, --kazoku-accent. Light and dark follow the page's colour scheme unless `theme="light"` or `theme="dark"` is set.
+const CLASSIC = ':host([data-layout="classic"])';
+const H = ':host([data-layout="horizontal"])';
+const V = ':host([data-layout="vertical"])';
+const C = ':host([data-layout="compact"])';
+/** Read by a screen reader, not shown. */
+const UNSEEN = "position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;";
 export const STYLES = `
 :host {
   --_ink: var(--kazoku-ink, #1b1b1f);
@@ -61,24 +67,122 @@ button[aria-pressed="true"] .i-play, button[aria-pressed="false"] .i-pause { dis
 :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. */
+/* The classic 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. */
 @media (max-width: 640px) {
-  .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; }
-  .field.angle { grid-area: angle; }
-  .field.tilt { grid-area: tilt; }
-  .field label, .field output, .play .text, .more .text, .pace .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-  .play, .more { padding: 0; }
-  .play { grid-area: play; }
-  .more { grid-area: more; }
-  .front { grid-area: front; padding: 0 12px; }
-  .pace { grid-area: pace; justify-self: end; flex-wrap: nowrap; }
-  .pace button { padding: 0 12px; }
-  .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }
-  .zoom button { padding: 0 8px; }
-  .zoom button.level { padding: 0 6px; }
+  ${CLASSIC} .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; }
+  ${CLASSIC} .field.angle { grid-area: angle; }
+  ${CLASSIC} .field.tilt { grid-area: tilt; }
+  ${CLASSIC} .field label, ${CLASSIC} .field output, ${CLASSIC} .play .text, ${CLASSIC} .more .text, ${CLASSIC} .pace .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  ${CLASSIC} .play, ${CLASSIC} .more { padding: 0; }
+  ${CLASSIC} .play { grid-area: play; }
+  ${CLASSIC} .more { grid-area: more; }
+  ${CLASSIC} .front { grid-area: front; padding: 0 12px; }
+  ${CLASSIC} .pace { grid-area: pace; justify-self: end; flex-wrap: nowrap; }
+  ${CLASSIC} .pace button { padding: 0 12px; }
+  ${CLASSIC} .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }
+  ${CLASSIC} .zoom button { padding: 0 8px; }
+  ${CLASSIC} .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; }
+  ${CLASSIC} .pace-now { grid-area: zoom; justify-self: start; }
+  ${CLASSIC} .pan { grid-area: pan; justify-content: center; }
+  ${CLASSIC} .drag { margin-inline-start: 4px; }
 }
+
+/* The zoom slider (horizontal, vertical and compact): a logarithmic track with ticks at its marks, the labels under it, and the part from the least zoom to the zoom now filled. */
+.zslide { display: none; }
+${H} .zslide, ${V} .zslide, ${C} .zslide { display: flex; }
+.zbox { position: relative; flex: 1 1 auto; min-width: 96px; height: 52px; }
+.zbox input { position: absolute; inset: 0 0 auto; z-index: 1; min-width: 0; }
+.zbox input::-webkit-slider-runnable-track { background: transparent; }
+.zbox input::-moz-range-track { background: transparent; }
+.ztrack { position: absolute; inset-inline: 14px; top: 21px; height: 6px; border-radius: 3px; background: var(--_line); }
+.zfill { position: absolute; inset-block: 0; left: 0; width: calc(var(--pos, 0) * 100%); border-radius: 3px; background: var(--_accent); }
+.ztick { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 2px; height: 14px; border-radius: 1px; background: var(--_ink); opacity: 0.5; transform: translate(-50%, -50%); }
+.zmarks { position: absolute; inset-inline: 14px; top: 36px; height: 16px; pointer-events: none; }
+.zmark { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); font-size: 0.72rem; font-weight: 500; line-height: 16px; opacity: 0.85; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.zmark[data-end="start"] { transform: translateX(-35%); }
+.zmark[data-end="end"] { transform: translateX(-65%); }
+
+/* Horizontal: a tidy bar under the view. Two rows (the turn, then the zoom with its slider); one row when its own width allows. More adds its rows between them. */
+${H} { container-type: inline-size; }
+${H} .bar, ${V} .bar, ${C} .bar { display: grid; row-gap: 0; align-items: center; }
+${H} .bar > *, ${V} .bar > *, ${C} .zoom > * { margin-block: 2px; }
+${H} .bar { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "angle speed play more" "tilt tilt front front" "pace pace pace pace" "zoom zoom zoom centre" "pan pan pan pan"; column-gap: 8px; padding: 4px 8px; }
+:host([data-layout="horizontal"][data-flat]) .bar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "zoom centre more" "pan pan pan"; }
+${H} .angle, ${V} .angle, ${C} .angle { grid-area: angle; }
+${H} .tilt, ${V} .tilt, ${C} .tilt { grid-area: tilt; }
+${H} .pace-now, ${V} .pace-now { grid-area: speed; }
+${H} .play, ${V} .play, ${C} .play { grid-area: play; }
+${H} .pace, ${V} .pace, ${C} .pace { grid-area: pace; flex-wrap: nowrap; }
+${H} .front, ${V} .front, ${C} .front { grid-area: front; justify-self: start; }
+${H} .zoom, ${V} .zoom { grid-area: zoom; }
+${H} .pan, ${V} .pan, ${C} .pan { grid-area: pan; justify-self: start; }
+${H} .more, ${V} .more, ${C} .more { grid-area: more; margin-inline-start: 0; }
+/* Centre, shown once the view is zoomed or moved: beside the zoom, never in the turn's row, so Auto-turn and More stay where they are. */
+${H} .centre, ${V} .centre, ${C} .centre { grid-area: centre; justify-self: end; }
+/* In the two rows it shares More's column, so it is an icon (its name is read) and never widens that column, which would move Auto-turn. */
+@container (max-width: 899px) {
+  ${H} .centre .text { ${UNSEEN} }
+  ${H} .centre { padding: 0; }
+}
+${H} .zoom { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; }
+${H} .zslide { flex: 1 1 auto; min-width: 0; }
+${H} .zoom button, ${V} .zoom button, ${C} .zoom button { padding: 0 10px; }
+${H} .zoom button.level, ${V} .zoom button.level, ${C} .zoom button.level { padding: 0 6px; }
+@container (max-width: 559px) {
+  ${H} .field label, ${H} .field output, ${H} .play .text, ${H} .more .text, ${H} .pace .lbl { ${UNSEEN} }
+  ${H} .play, ${H} .more { padding: 0; }
+  ${H} .zbox { min-width: 72px; }
+  /* The readout is Fit here (its name says so), which leaves the slider the room for its marks. */
+  ${H} [data-b="fit"] { display: none; }
+}
+@container (min-width: 900px) {
+  ${H} .bar { grid-template-columns: minmax(0, 1fr) auto auto auto auto auto; grid-template-areas: "angle speed play zoom centre more" "tilt tilt tilt pace front front" "pan pan pan pan pan pan"; column-gap: 12px; }
+  :host([data-layout="horizontal"][data-flat]) .bar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "zoom centre more" "pan pan pan"; }
+  ${H} .zslide { flex: 0 0 15rem; }
+  ${H} .pan { justify-self: end; }
+}
+
+/* Vertical: a column beside the view, its width --kazoku-column-width (16rem). Auto-turn and More at the top, so More stays put when it opens; then the turn, the zoom and its slider. */
+${V} { width: var(--kazoku-column-width, 16rem); max-width: 100%; }
+${V} .bar { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "play speed . more" "angle angle angle angle" "tilt tilt tilt tilt" "pace pace pace pace" "front front front front" "zoom zoom zoom zoom" "centre centre centre centre" "pan pan pan pan"; column-gap: 8px; padding: 6px 8px; }
+${V} .field { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "slider slider"; gap: 0 8px; }
+${V} .field label { grid-area: label; padding-top: 4px; }
+${V} .field output { grid-area: value; padding-top: 4px; }
+${V} .field input, ${V} .zbox { grid-area: slider; }
+${V} .zoom { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "zs zs zs zs" "out level in fit"; gap: 0 4px; }
+${V} .zslide { grid-area: zs; }
+${V} [data-b="out"] { grid-area: out; }
+${V} [data-b="level"] { grid-area: level; }
+${V} [data-b="in"] { grid-area: in; }
+${V} [data-b="fit"] { grid-area: fit; justify-self: start; }
+${V} .pace .lbl { ${UNSEEN} }
+${V} .pace button { padding: 0 10px; }
+${V} .pan { flex-wrap: wrap; }
+${V} .drag { margin-inline-start: 0; }
+
+/* Compact: one short row (Auto-turn, zoom out, the zoom now, zoom in, More) for a card or a phone. More opens the rest under it: the zoom slider and Fit, the angle, and the advanced controls. */
+${C} { display: block; }
+:host([data-layout="compact"][overlay]) { inset-inline: 8px auto; bottom: 8px; }
+/* Over a card, an open More never reaches past the card's top: the controls scroll inside themselves. */
+:host([data-layout="compact"][overlay]) { display: flex; flex-direction: column; max-height: calc(100% - 16px); }
+:host([data-layout="compact"][overlay]) .bar { min-height: 0; overflow-y: auto; }
+${C} .bar { width: fit-content; max-width: 100%; grid-template-columns: repeat(5, auto); grid-template-areas: "play out level in more" "zs zs zs zs fit" "centre centre centre centre centre" "angle angle angle angle angle" "tilt tilt tilt tilt tilt" "pace pace pace pace pace" "front front front front front" "pan pan pan pan pan"; column-gap: 2px; padding: 2px 4px; border: 1px solid var(--_line); border-radius: 28px; background: var(--_surface); }
+:host([data-layout="compact"][data-level="advanced"]) .bar { border-radius: 20px; padding: 2px 8px 6px; column-gap: 4px; }
+:host([data-layout="compact"][data-flat]) .bar { grid-template-areas: "out level in more ." "zs zs zs fit fit" "centre centre centre centre centre" "pan pan pan pan pan"; }
+${C} .zoom { display: contents; }
+${C} .zslide { grid-area: zs; }
+${C} [data-b="out"] { grid-area: out; }
+${C} [data-b="level"] { grid-area: level; }
+${C} [data-b="in"] { grid-area: in; }
+${C} [data-b="fit"] { grid-area: fit; }
+${C} .play, ${C} .more, ${C} [data-b="out"], ${C} [data-b="level"], ${C} [data-b="in"] { border-color: transparent; }
+${C} .play:hover:not(:disabled), ${C} .more:hover:not(:disabled), ${C} .zoom button:hover:not(:disabled) { border-color: var(--_ink); }
+${C} .play .text, ${C} .more .text { ${UNSEEN} }
+${C} .play, ${C} .more { padding: 0; }
+${C} .pace-now { display: none; }
+${V} .centre, ${C} .centre { justify-self: start; }
+/* The row stays one row: Centre is with Fit, one press of More away. */
+:host([data-layout="compact"][data-level="basic"]) .centre { display: none; }
+:host([data-layout="compact"][data-level="basic"]) .angle, :host([data-layout="compact"][data-level="basic"]) .zslide, :host([data-layout="compact"][data-level="basic"]) [data-b="fit"] { display: none; }
 `;

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

@@ -10,6 +10,7 @@ export interface ViewWords {
     zoomTwo: string;
     zoomIn: string;
     fit: string;
+    centre: string;
     pan: string;
     panLeft: string;
     panRight: string;

package/dist/view-controls/words.js

@@ -11,6 +11,7 @@ export const WORDS = {
         zoomTwo: "Zoom to 2 times",
         zoomIn: "Zoom in",
         fit: "Fit",
+        centre: "Centre",
         pan: "Move the view",
         panLeft: "Move left",
         panRight: "Move right",
@@ -38,6 +39,7 @@ export const WORDS = {
         zoomTwo: "2倍にする",
         zoomIn: "拡大",
         fit: "全体",
+        centre: "中央",
         pan: "表示を動かす",
         panLeft: "左へ",
         panRight: "右へ",

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

@@ -0,0 +1,26 @@
+/** The zooms a mark goes to, the most wanted first: when two are too close for both labels, the earlier one stays. */
+export declare const COMMON_ZOOMS: readonly number[];
+/** The least distance between two marks, as a share of the slider's length, so their labels never touch. */
+export declare const MARK_GAP = 0.18;
+/** One key press on the slider multiplies or divides the zoom by this: finer than a press of + or -. */
+export declare const SLIDER_STEP = 1.1;
+/** How near a mark a drag lets go to it, in pixels: a gentle pull, never a forced step. */
+export declare const SNAP_PX = 8;
+/** A mark of the slider: its zoom, where it sits from 0 (the least zoom) to 1 (the most), and whether it is an end. */
+export interface ZoomMark {
+    zoom: number;
+    at: number;
+    end: boolean;
+}
+/** Where a zoom sits on the slider, from 0 at `min` to 1 at `max`, held to that range. */
+export declare function zoomPosition(zoom: number, min: number, max: number): number;
+/** The zoom at a place on the slider, 0 to 1. */
+export declare function zoomAtPosition(at: number, min: number, max: number): number;
+/** The slider's marks for the range `min` to `max`, in order: both ends, then the common zooms inside that keep `gap` from every other mark. None when there is no range. */
+export declare function zoomMarks(min: number, max: number, gap?: number): ZoomMark[];
+/** Page Up and Page Down: the next mark above (`direction` 1) or below (-1) the zoom now, else the end. */
+export declare function zoomToMark(zoom: number, marks: readonly ZoomMark[], direction: 1 | -1, min: number, max: number): number;
+/** An arrow key: one `SLIDER_STEP` up or down, held to the range, stopping first on a mark it would pass, so 1.9× goes to 2× and the next press goes on past it. */
+export declare function zoomStep(zoom: number, marks: readonly ZoomMark[], direction: 1 | -1, min: number, max: number, factor?: number): number;
+/** A drag that ends near a mark goes to it: within `tolerance` of the slider's length (`SNAP_PX` over its length in pixels); anywhere else it stays where it is. */
+export declare function zoomSnap(zoom: number, marks: readonly ZoomMark[], min: number, max: number, tolerance: number): number;

package/dist/view-controls/zoomScale.js

@@ -0,0 +1,66 @@
+// The zoom slider's scale: pure, so a server or a test can use it. The slider is logarithmic, so one press of + or - moves it the same distance anywhere
+// along it, and its marks are the ends and the common zooms between them (1×, 2× and so on) that have room for a label.
+/** The zooms a mark goes to, the most wanted first: when two are too close for both labels, the earlier one stays. */
+export const COMMON_ZOOMS = [1, 2, 4, 0.5, 3, 10, 8, 5, 0.25, 6, 16, 20, 32, 50, 64, 100];
+/** The least distance between two marks, as a share of the slider's length, so their labels never touch. */
+export const MARK_GAP = 0.18;
+/** One key press on the slider multiplies or divides the zoom by this: finer than a press of + or -. */
+export const SLIDER_STEP = 1.1;
+/** How near a mark a drag lets go to it, in pixels: a gentle pull, never a forced step. */
+export const SNAP_PX = 8;
+const span = (min, max) => Math.log(max / min);
+/** Where a zoom sits on the slider, from 0 at `min` to 1 at `max`, held to that range. */
+export function zoomPosition(zoom, min, max) {
+    const whole = span(min, max);
+    if (!(whole > 0) || !(zoom > 0))
+        return 0;
+    return Math.min(1, Math.max(0, Math.log(zoom / min) / whole));
+}
+/** The zoom at a place on the slider, 0 to 1. */
+export function zoomAtPosition(at, min, max) {
+    const place = Math.min(1, Math.max(0, at));
+    if (place === 0)
+        return min;
+    if (place === 1)
+        return max;
+    return min * Math.exp(place * span(min, max));
+}
+/** The slider's marks for the range `min` to `max`, in order: both ends, then the common zooms inside that keep `gap` from every other mark. None when there is no range. */
+export function zoomMarks(min, max, gap = MARK_GAP) {
+    if (!(min > 0) || !(max > min * 1.0001))
+        return [];
+    const marks = [
+        { zoom: min, at: 0, end: true },
+        { zoom: max, at: 1, end: true },
+    ];
+    for (const zoom of COMMON_ZOOMS) {
+        if (zoom <= min || zoom >= max)
+            continue;
+        const at = zoomPosition(zoom, min, max);
+        if (marks.every((mark) => Math.abs(mark.at - at) >= gap - 1e-9))
+            marks.push({ zoom, at, end: false });
+    }
+    return marks.sort((a, b) => a.zoom - b.zoom);
+}
+const NEAR = 1e-6;
+/** Page Up and Page Down: the next mark above (`direction` 1) or below (-1) the zoom now, else the end. */
+export function zoomToMark(zoom, marks, direction, min, max) {
+    if (direction > 0)
+        return marks.find((mark) => mark.zoom > zoom * (1 + NEAR))?.zoom ?? max;
+    return [...marks].reverse().find((mark) => mark.zoom < zoom * (1 - NEAR))?.zoom ?? min;
+}
+/** An arrow key: one `SLIDER_STEP` up or down, held to the range, stopping first on a mark it would pass, so 1.9× goes to 2× and the next press goes on past it. */
+export function zoomStep(zoom, marks, direction, min, max, factor = SLIDER_STEP) {
+    const next = Math.min(max, Math.max(min, direction > 0 ? zoom * factor : zoom / factor));
+    const passed = direction > 0 ? marks.find((mark) => mark.zoom > zoom * (1 + NEAR) && mark.zoom < next * (1 - NEAR)) : [...marks].reverse().find((mark) => mark.zoom < zoom * (1 - NEAR) && mark.zoom > next * (1 + NEAR));
+    return passed?.zoom ?? next;
+}
+/** A drag that ends near a mark goes to it: within `tolerance` of the slider's length (`SNAP_PX` over its length in pixels); anywhere else it stays where it is. */
+export function zoomSnap(zoom, marks, min, max, tolerance) {
+    const at = zoomPosition(zoom, min, max);
+    let best;
+    for (const mark of marks)
+        if (Math.abs(mark.at - at) <= tolerance && (best === undefined || Math.abs(mark.at - at) < Math.abs(best.at - at)))
+            best = mark;
+    return best?.zoom ?? zoom;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kazoku-ui",
-  "version": "0.10.1",
+  "version": "0.12.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",