@johnmorrisdotca/kazoku-ui 0.0.0-stage → 0.2.0

package/dist/view-controls/element.js

@@ -0,0 +1,341 @@
+// <kazoku-view-controls>: the view controls as a framework-free custom element. It never draws the scene. It binds the pointer, pinch, wheel and keys
+// to the element named by `for`, and tells the page what the view is now with a `kazoku-viewchange` event; the page applies it to its canvas, WebGL, SVG or CSS 3D.
+import { DEFAULT_KEYS, formatAddress, parseAddress, parseKeys } from "./address.js";
+import { createViewController, DEFAULT_IGNORE } from "./controller.js";
+import { EVENT, TAG } from "./index.js";
+import { ZOOM_STEP, ZOOMED } from "./math.js";
+import { STYLES } from "./styles.js";
+import { languageOf, wordsFor } from "./words.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 = {
+    play: icon("M8 5v14l11-7z", "i-play"),
+    pause: icon("M7 5h4v14H7zM13 5h4v14h-4z", "i-pause"),
+    minus: icon("M5 11h14v2H5z"),
+    plus: icon("M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"),
+    left: icon("M15 5l-9 7 9 7z"),
+    right: icon("M9 5l9 7-9 7z"),
+    up: icon("M5 15l7-9 7 9z"),
+    down: icon("M5 9l7 9 7-9z"),
+};
+const HTML = `
+<div class="bar" part="bar" role="group">
+  <div class="field angle" part="field angle"><label data-w="angle" for="yaw"></label><input id="yaw" type="range" min="-180" max="180" step="1" value="0" part="slider" /><output for="yaw" data-o="yaw">0°</output></div>
+  <div class="field tilt" part="field tilt"><label data-w="tilt" for="tilt"></label><input id="tilt" type="range" min="-30" max="30" step="1" value="0" part="slider" /><output for="tilt" data-o="tilt">0°</output></div>
+  <button type="button" class="play" data-b="play" aria-pressed="false" part="button">${ICON.play}${ICON.pause}<span class="text" data-w="autoTurn"></span></button>
+  <button type="button" class="front" data-b="front" part="button"><span data-w="front"></span></button>
+  <div class="group zoom" role="group" data-g="zoom">
+    <button type="button" data-b="out" part="button">${ICON.minus}</button>
+    <button type="button" class="two" data-b="two" part="button">2×</button>
+    <button type="button" data-b="in" part="button">${ICON.plus}</button>
+    <button type="button" data-b="fit" part="button"><span data-w="fit"></span></button>
+  </div>
+  <div class="group pan" role="group" data-g="pan" hidden>
+    <button type="button" data-b="left" part="button">${ICON.left}</button>
+    <button type="button" data-b="up" part="button">${ICON.up}</button>
+    <button type="button" data-b="down" part="button">${ICON.down}</button>
+    <button type="button" data-b="right" part="button">${ICON.right}</button>
+    <div class="group drag" role="group" data-g="drag">
+      <button type="button" data-b="move" aria-pressed="true" part="button"><span data-w="dragMove"></span></button>
+      <button type="button" data-b="turn" aria-pressed="false" part="button"><span data-w="dragTurn"></span></button>
+    </div>
+  </div>
+</div>`;
+/**
+ * Attributes: `for` (the id of the view to bind), `lang` (en or ja; else the page's), `yaw`, `tilt` (the starting view), `zoom` (`fit`, the default, or a scale where 1
+ * is the scene's natural size), `fit-scale` (the page's scale at Fit: what zoom 1 means), `ignore` (a selector for what inside the view a pointer press leaves alone;
+ * buttons, links and form controls by default), `autoplay` (turn by itself from the start, unless the reader prefers reduced motion), `speed` (degrees a second),
+ * `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", "speed", "flat", "tilt-max", "zoom-min", "zoom-max", "address-keys"];
+    #root;
+    #controller;
+    #view;
+    #unbind;
+    #words = {};
+    #ready = false;
+    #sliderHeld = 0;
+    #saveTimer = 0;
+    #keys = DEFAULT_KEYS;
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+    }
+    /** The controller behind the element: the same methods and state a page that wants no element would use. */
+    get controller() {
+        return this.#ensure();
+    }
+    /** The view now (a copy). */
+    get state() {
+        return { ...this.#ensure().state };
+    }
+    get view() {
+        return this.#view;
+    }
+    /** The element the hands bind to, in place of `for`. */
+    set view(element) {
+        this.#bindTo(element);
+    }
+    /** Your own labels over the language's, for example `{ front: "Home" }`. */
+    set words(words) {
+        this.#words = words;
+        this.#label();
+    }
+    play() {
+        this.#ensure().play();
+    }
+    pause() {
+        this.#ensure().pause();
+    }
+    front() {
+        this.#ensure().front();
+    }
+    fit() {
+        this.#ensure().fit();
+    }
+    set(next) {
+        this.#ensure().set(next);
+    }
+    /** What zoom 1 means to the page: the scene is drawn at `state.zoom * fitScale`. */
+    get fitScale() {
+        return this.#ensure().fitScale;
+    }
+    setFitScale(scale) {
+        this.#ensure().setFitScale(scale);
+    }
+    connectedCallback() {
+        const c = this.#ensure();
+        if (this.#root.querySelector(".bar") === null)
+            this.#build();
+        this.#keys = parseKeys(this.getAttribute("address-keys"));
+        this.#limits();
+        const start = {};
+        for (const key of ["yaw", "tilt"]) {
+            const value = Number(this.getAttribute(key));
+            if (this.hasAttribute(key) && Number.isFinite(value))
+                start[key] = value;
+        }
+        if (this.hasAttribute("address"))
+            Object.assign(start, parseAddress(globalThis.location?.search ?? "", this.#keys, c.limits));
+        c.turnable = !this.hasAttribute("flat");
+        c.speed = Number(this.getAttribute("speed")) || 30;
+        c.ignore = this.getAttribute("ignore") ?? DEFAULT_IGNORE;
+        const fitScale = Number(this.getAttribute("fit-scale"));
+        if (this.hasAttribute("fit-scale"))
+            c.setFitScale(fitScale);
+        c.setStartZoom(this.#startZoom());
+        c.set(start, true, "init");
+        this.#label();
+        this.#resolveView();
+        if (this.#view === undefined && this.ownerDocument.readyState === "loading")
+            this.ownerDocument.addEventListener("DOMContentLoaded", () => this.#resolveView(), { once: true });
+        this.#ready = true;
+        this.#show();
+        // Said once the page has had its turn to listen; a page can also read `state` at any time.
+        queueMicrotask(() => {
+            if (!this.isConnected)
+                return;
+            this.#dispatch(c.state, { final: true, reason: "init" });
+            if (this.hasAttribute("autoplay") && !globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches)
+                c.play();
+        });
+    }
+    disconnectedCallback() {
+        this.#unbind?.();
+        this.#unbind = undefined;
+        this.#controller?.destroy();
+        this.#controller = undefined;
+        this.#view = undefined;
+        this.#ready = false;
+        if (this.#saveTimer !== 0)
+            globalThis.clearTimeout(this.#saveTimer);
+        this.#saveTimer = 0;
+    }
+    attributeChangedCallback(name, _old, value) {
+        if (!this.#ready)
+            return;
+        const c = this.#ensure();
+        if (name === "for")
+            this.#resolveView();
+        else if (name === "lang")
+            this.#label();
+        else if (name === "yaw" || name === "tilt") {
+            if (value !== null && Number.isFinite(Number(value)))
+                c.set({ [name]: Number(value) });
+        }
+        else if (name === "zoom")
+            c.setStartZoom(this.#startZoom());
+        else if (name === "fit-scale")
+            c.setFitScale(Number(value));
+        else if (name === "ignore")
+            c.ignore = value ?? DEFAULT_IGNORE;
+        else if (name === "speed")
+            c.speed = Number(value) || 30;
+        else if (name === "flat") {
+            c.turnable = value === null;
+            this.#show();
+        }
+        else if (name === "address-keys")
+            this.#keys = parseKeys(value);
+        else
+            this.#limits();
+    }
+    #startZoom() {
+        const value = Number(this.getAttribute("zoom"));
+        return this.hasAttribute("zoom") && Number.isFinite(value) && value > 0 ? value : "fit";
+    }
+    #ensure() {
+        if (this.#controller === undefined) {
+            this.#controller = createViewController({ onChange: (state, info) => this.#changed(state, info) });
+        }
+        return this.#controller;
+    }
+    #build() {
+        this.#root.innerHTML = `<style>${STYLES}</style>${HTML}`;
+        const q = (selector) => this.#root.querySelector(selector);
+        const c = this.#ensure();
+        const slider = (id) => {
+            const input = q(`#${id}`);
+            // A hand on the angle slider holds the automatic turn still while it is down; the turn then goes on from where the hand left it.
+            const hold = () => {
+                this.#sliderHeld += 1;
+                if (this.#sliderHeld === 1 && id === "yaw")
+                    c.holdTurn();
+            };
+            const free = () => {
+                if (this.#sliderHeld === 0)
+                    return;
+                this.#sliderHeld = 0;
+                if (id === "yaw")
+                    c.releaseTurn();
+            };
+            input.addEventListener("pointerdown", () => hold());
+            input.addEventListener("pointerup", free);
+            input.addEventListener("pointercancel", free);
+            input.addEventListener("input", () => c.set({ [id]: Number(input.value) }, false, "slider"));
+            input.addEventListener("change", () => c.set({ [id]: Number(input.value) }, true, "slider"));
+        };
+        slider("yaw");
+        slider("tilt");
+        const on = (b, run) => q(`[data-b="${b}"]`).addEventListener("click", run);
+        on("play", () => c.toggle());
+        on("front", () => c.front());
+        on("out", () => c.zoomBy(1 / ZOOM_STEP));
+        on("in", () => c.zoomBy(ZOOM_STEP));
+        on("two", () => c.zoomAt(2));
+        on("fit", () => c.fit());
+        on("left", () => c.panBy(-1, 0));
+        on("right", () => c.panBy(1, 0));
+        on("up", () => c.panBy(0, -1));
+        on("down", () => c.panBy(0, 1));
+        on("move", () => c.setDrag("move"));
+        on("turn", () => c.setDrag("turn"));
+    }
+    #limits() {
+        const c = this.#ensure();
+        const read = (name, fallback) => {
+            const value = Number(this.getAttribute(name));
+            return this.hasAttribute(name) && Number.isFinite(value) && value > 0 ? value : fallback;
+        };
+        c.limits.tiltMax = read("tilt-max", 30);
+        c.limits.zoomMin = Math.min(1, read("zoom-min", 1));
+        c.limits.zoomMax = Math.max(c.limits.zoomMin, read("zoom-max", 5));
+        const tilt = this.#root.querySelector("#tilt");
+        if (tilt !== null) {
+            tilt.min = String(-c.limits.tiltMax);
+            tilt.max = String(c.limits.tiltMax);
+        }
+    }
+    #resolveView() {
+        const id = this.getAttribute("for");
+        if (id === null)
+            return;
+        const root = this.getRootNode();
+        const found = root.getElementById?.(id) ?? this.ownerDocument.getElementById(id);
+        if (found !== null && found !== undefined)
+            this.#bindTo(found);
+    }
+    #bindTo(element) {
+        if (element === this.#view)
+            return;
+        this.#unbind?.();
+        this.#unbind = undefined;
+        this.#view = element;
+        if (element === undefined)
+            return;
+        // A view takes the keys only if it can be focused: a page that wants arrows and plus and minus on it gives it a tabindex.
+        this.#unbind = this.#ensure().bind(element);
+    }
+    #label() {
+        const language = languageOf(this.getAttribute("lang") ?? this.closest("[lang]")?.getAttribute("lang") ?? this.ownerDocument.documentElement.lang);
+        const words = wordsFor(language, this.#words);
+        for (const node of this.#root.querySelectorAll("[data-w]"))
+            node.textContent = words[node.dataset.w];
+        const set = (selector, label) => this.#root.querySelector(selector)?.setAttribute("aria-label", label);
+        set(".bar", words.group);
+        set('[data-b="play"]', words.autoTurn);
+        set('[data-b="out"]', words.zoomOut);
+        set('[data-b="two"]', words.zoomTwo);
+        set('[data-b="in"]', words.zoomIn);
+        set('[data-g="zoom"]', words.zoom);
+        set('[data-g="pan"]', words.pan);
+        set('[data-g="drag"]', words.drag);
+        set('[data-b="left"]', words.panLeft);
+        set('[data-b="right"]', words.panRight);
+        set('[data-b="up"]', words.panUp);
+        set('[data-b="down"]', words.panDown);
+        this.#root.querySelector(".bar")?.setAttribute("lang", language);
+    }
+    #show() {
+        const c = this.#ensure();
+        const s = c.state;
+        const q = (selector) => this.#root.querySelector(selector);
+        const yaw = q("#yaw");
+        const tilt = q("#tilt");
+        yaw.value = String(Math.round(s.yaw));
+        tilt.value = String(Math.round(s.tilt));
+        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));
+        q('[data-b="out"]').disabled = s.zoom <= c.limits.zoomMin + 1e-6;
+        q('[data-b="in"]').disabled = s.zoom >= c.limits.zoomMax - 1e-6;
+        q('[data-g="pan"]').hidden = s.zoom <= ZOOMED;
+        q('[data-b="move"]').setAttribute("aria-pressed", String(s.drag === "move"));
+        q('[data-b="turn"]').setAttribute("aria-pressed", String(s.drag === "turn"));
+        // A flat view cannot turn: the angle, tilt, auto-turn and front are not shown, and a drag only moves.
+        const flat = !c.turnable;
+        for (const selector of [".angle", ".tilt", ".play", ".front", '[data-g="drag"]'])
+            q(selector).hidden = flat;
+        this.toggleAttribute("data-turning", s.turning);
+    }
+    #changed(state, info) {
+        if (!this.#ready)
+            return;
+        this.#show();
+        this.#dispatch(state, info);
+        if (this.hasAttribute("address") && info.final)
+            this.#save();
+    }
+    #dispatch(state, info) {
+        this.dispatchEvent(new CustomEvent(EVENT, { detail: { ...state, ...info }, bubbles: true, composed: true }));
+    }
+    /** The address is written at most four times a second: Safari stops a page that changes its address more than a hundred times in thirty seconds. */
+    #save() {
+        if (this.#saveTimer !== 0)
+            return;
+        this.#saveTimer = globalThis.setTimeout(() => {
+            this.#saveTimer = 0;
+            try {
+                const s = this.#ensure().state;
+                const next = formatAddress(globalThis.location.search, s, this.#keys, s.turning, this.#ensure().startZoom);
+                if (next !== globalThis.location.search)
+                    globalThis.history.replaceState(globalThis.history.state, "", `${globalThis.location.pathname}${next}${globalThis.location.hash}`);
+            }
+            catch {
+                /* an address that cannot be changed (a sandboxed frame): the view still works */
+            }
+        }, 250);
+    }
+}

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

@@ -0,0 +1,6 @@
+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 { languageOf, WORDS, wordsFor, type Language, type ViewWords } from "./words.ts";
+export declare const EVENT = "kazoku-viewchange";
+export declare const TAG = "kazoku-view-controls";

package/dist/view-controls/index.js

@@ -0,0 +1,7 @@
+// 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 { languageOf, WORDS, wordsFor } from "./words.js";
+export const EVENT = "kazoku-viewchange";
+export const TAG = "kazoku-view-controls";

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

@@ -0,0 +1,50 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+/** What a gesture or a control changes. `panX` and `panY` are CSS pixels from the middle of the view. */
+export interface Camera {
+    yaw: number;
+    tilt: number;
+    zoom: number;
+    panX: number;
+    panY: number;
+}
+export interface Limits {
+    tiltMax: number;
+    zoomMin: number;
+    zoomMax: number;
+}
+export declare const DEFAULT_LIMITS: Limits;
+/** Degrees of turn across the view's whole width (a half turn), and of tilt across its whole height. */
+export declare const TURN_ACROSS = 180;
+export declare const TILT_ACROSS = 60;
+/** The arrow pad moves the view by this fraction of the view's size. */
+export declare const PAN_STEP = 0.25;
+/** A zoom button multiplies the zoom by this. */
+export declare const ZOOM_STEP = 1.4;
+/** At or below this zoom the view counts as not zoomed (a drag turns it, the pan pad is hidden). */
+export declare const ZOOMED = 1.05;
+export declare const clamp: (value: number, low: number, high: number) => number;
+/** An angle brought into [-180, 180). */
+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;
+/** What a pinch starts from: the distance between two fingers, their middle, and the camera at that moment. */
+export interface PinchStart {
+    distance: number;
+    middle: Point;
+    camera: Camera;
+}
+/** 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). */
+export declare function dragTurn(start: Camera, dx: number, dy: number, size: Size, tips: boolean, limits?: Limits): Pick<Camera, "yaw" | "tilt">;
+/** 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

@@ -0,0 +1,48 @@
+// The view's arithmetic: pure functions, no DOM, no clock. The controller and the tests both use them.
+export const DEFAULT_LIMITS = { tiltMax: 30, zoomMin: 1, zoomMax: 5 };
+/** Degrees of turn across the view's whole width (a half turn), and of tilt across its whole height. */
+export const TURN_ACROSS = 180;
+export const TILT_ACROSS = 60;
+/** The arrow pad moves the view by this fraction of the view's size. */
+export const PAN_STEP = 0.25;
+/** A zoom button multiplies the zoom by this. */
+export const ZOOM_STEP = 1.4;
+/** At or below this zoom the view counts as not zoomed (a drag turns it, the pan pad is hidden). */
+export const ZOOMED = 1.05;
+export const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+/** An angle brought into [-180, 180). */
+export const wrapYaw = (angle) => ((((angle + 180) % 360) + 360) % 360) - 180;
+/** Zoom to `next` (held between the limits) keeping the point `at` (pixels from the view's middle) where it is. */
+export function zoomAbout(camera, next, at, limits = DEFAULT_LIMITS) {
+    const zoom = clamp(next, limits.zoomMin, limits.zoomMax);
+    const k = zoom / camera.zoom;
+    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) {
+    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;
+    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. */
+export function pinchTo(start, a, b, centre, limits = DEFAULT_LIMITS) {
+    const distance = Math.hypot(a.x - b.x, a.y - b.y) || 1;
+    const middle = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+    const zoomed = zoomAbout(start.camera, start.camera.zoom * (distance / start.distance), { x: start.middle.x - centre.x, y: start.middle.y - centre.y }, limits);
+    if (zoomed.zoom <= 1)
+        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). */
+export function dragTurn(start, dx, dy, size, tips, limits = DEFAULT_LIMITS) {
+    const yaw = wrapYaw(start.yaw + (dx / (size.width || 360)) * TURN_ACROSS);
+    const tilt = tips ? clamp(start.tilt - (dy / (size.height || 360)) * TILT_ACROSS, -limits.tiltMax, limits.tiltMax) : start.tilt;
+    return { yaw, tilt };
+}
+/** 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

@@ -0,0 +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:disabled { opacity: 0.4; cursor: default; }\nsvg { width: 18px; height: 18px; fill: currentColor; flex: none; }\nbutton[aria-pressed=\"true\"] .i-play, button[aria-pressed=\"false\"] .i-pause { display: none; }\n.zoom button.two { min-width: 56px; }\n.drag { margin-inline-start: 8px; }\n/* A compact bar on a phone: three rows (angle, tilt and zoom, the pad when zoomed), labels read only by a screen reader. */\n@media (max-width: 640px) {\n  .bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px auto; grid-template-areas: \"angle play front\" \"tilt 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 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  .play { grid-area: play; padding: 0; }\n  .play .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  .front { grid-area: front; padding: 0 12px; }\n  .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }\n  .zoom button { padding: 0 8px; }\n  .pan { grid-area: pan; justify-content: center; }\n  .drag { margin-inline-start: 4px; }\n}\n";

package/dist/view-controls/styles.js

@@ -0,0 +1,70 @@
+// 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.
+export const STYLES = `
+:host {
+  --_ink: var(--kazoku-ink, #1b1b1f);
+  --_surface: var(--kazoku-surface, #ffffff);
+  --_line: var(--kazoku-line, #c9ccd3);
+  --_accent: var(--kazoku-accent, #2457d6);
+  display: block;
+  box-sizing: border-box;
+  color: var(--_ink);
+  font: 600 0.9rem/1.2 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
+  color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+  :host(:not([theme="light"])) {
+    --_ink: var(--kazoku-ink, #f1f2f6);
+    --_surface: var(--kazoku-surface, #1c1d22);
+    --_line: var(--kazoku-line, #4a4d58);
+    --_accent: var(--kazoku-accent, #8fb0ff);
+  }
+}
+:host([theme="dark"]) {
+  --_ink: var(--kazoku-ink, #f1f2f6);
+  --_surface: var(--kazoku-surface, #1c1d22);
+  --_line: var(--kazoku-line, #4a4d58);
+  --_accent: var(--kazoku-accent, #8fb0ff);
+  color-scheme: dark;
+}
+:host([theme="light"]) { color-scheme: light; }
+:host([overlay]) { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; }
+:host([overlay]) .bar { background: color-mix(in srgb, var(--_surface) 88%, transparent); }
+[hidden] { display: none !important; }
+.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 8px; box-sizing: border-box; }
+.field { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }
+.field.tilt { flex-basis: 150px; }
+.field label { flex: none; }
+.field output { flex: none; min-width: 3.2em; text-align: end; font-variant-numeric: tabular-nums; }
+.group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+input[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; }
+input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--_line); }
+input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--_line); }
+input[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); }
+input[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); }
+input[type="range"]:focus-visible { outline: 2px solid var(--_ink); outline-offset: -4px; border-radius: 8px; }
+button { -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; }
+button:hover:not(:disabled) { border-color: var(--_ink); }
+button:focus-visible { outline: 2px solid var(--_ink); outline-offset: 2px; }
+button[aria-pressed="true"] { background: var(--_ink); color: var(--_surface); border-color: var(--_ink); }
+button:disabled { opacity: 0.4; cursor: default; }
+svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
+button[aria-pressed="true"] .i-play, button[aria-pressed="false"] .i-pause { display: none; }
+.zoom button.two { min-width: 56px; }
+.drag { margin-inline-start: 8px; }
+/* A compact bar on a phone: three rows (angle, tilt and zoom, the pad when zoomed), labels read only by a screen reader. */
+@media (max-width: 640px) {
+  .bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px auto; grid-template-areas: "angle play front" "tilt 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 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .play { grid-area: play; padding: 0; }
+  .play .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .front { grid-area: front; padding: 0 12px; }
+  .zoom { grid-area: zoom; justify-self: end; flex-wrap: nowrap; }
+  .zoom button { padding: 0 8px; }
+  .pan { grid-area: pan; justify-content: center; }
+  .drag { margin-inline-start: 4px; }
+}
+`;

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

@@ -0,0 +1,26 @@
+export interface ViewWords {
+    group: string;
+    angle: string;
+    tilt: string;
+    autoTurn: string;
+    front: string;
+    zoom: string;
+    zoomOut: string;
+    zoomTwo: string;
+    zoomIn: string;
+    fit: string;
+    pan: string;
+    panLeft: string;
+    panRight: string;
+    panUp: string;
+    panDown: string;
+    drag: string;
+    dragMove: string;
+    dragTurn: string;
+}
+export type Language = "en" | "ja";
+export declare const WORDS: Record<Language, ViewWords>;
+/** The language to use for a `lang` value such as "ja", "ja-JP" or "en-CA": Japanese for ja, English for anything else. */
+export declare const languageOf: (lang: string | null | undefined) => Language;
+/** The words for a language, with any of your own over them. */
+export declare const wordsFor: (language: Language, overrides?: Partial<ViewWords>) => ViewWords;

package/dist/view-controls/words.js

@@ -0,0 +1,47 @@
+// The labels, in English and Japanese. Every key is in both; a test holds that. Add a language by giving `words` a complete set.
+export const WORDS = {
+    en: {
+        group: "View controls",
+        angle: "Angle",
+        tilt: "Tilt",
+        autoTurn: "Auto-turn",
+        front: "Front",
+        zoom: "Zoom",
+        zoomOut: "Zoom out",
+        zoomTwo: "Zoom to 2 times",
+        zoomIn: "Zoom in",
+        fit: "Fit",
+        pan: "Move the view",
+        panLeft: "Move left",
+        panRight: "Move right",
+        panUp: "Move up",
+        panDown: "Move down",
+        drag: "What a drag does",
+        dragMove: "Move",
+        dragTurn: "Turn",
+    },
+    ja: {
+        group: "表示の操作",
+        angle: "角度",
+        tilt: "傾き",
+        autoTurn: "自動回転",
+        front: "正面",
+        zoom: "ズーム",
+        zoomOut: "縮小",
+        zoomTwo: "2倍にする",
+        zoomIn: "拡大",
+        fit: "全体",
+        pan: "表示を動かす",
+        panLeft: "左へ",
+        panRight: "右へ",
+        panUp: "上へ",
+        panDown: "下へ",
+        drag: "ドラッグの動作",
+        dragMove: "移動",
+        dragTurn: "回転",
+    },
+};
+/** The language to use for a `lang` value such as "ja", "ja-JP" or "en-CA": Japanese for ja, English for anything else. */
+export const languageOf = (lang) => (/^ja\b/i.test(lang ?? "") ? "ja" : "en");
+/** The words for a language, with any of your own over them. */
+export const wordsFor = (language, overrides = {}) => ({ ...WORDS[language], ...overrides });