react-cheminfo 0.8.0 → 0.10.0

package/lib/overlay/ui/overlaySurface.d.ts

@@ -0,0 +1,54 @@
+/**
+ * What the floating chrome over one figure agrees on.
+ *
+ * Two cards over the same scatter that disagree about how tightly to pack
+ * their controls, or about whether the figure is repainting, read as two
+ * pieces of software sitting on one picture. So the measurements are settled
+ * once by the layer, and every card reads them back from here rather than
+ * deciding for itself.
+ */
+import type { OverlayMetrics, OverlayPointerKind } from '../core/overlayMetrics.ts';
+/** What every control inside an {@link OverlayLayer} reads from it. */
+export interface OverlaySurface {
+    /** The measurements every card and control is drawn from. */
+    metrics: OverlayMetrics;
+    /** Whether the cards are at full strength rather than resting. */
+    awake: boolean;
+    /**
+     * Whether the figure is repainting. While it is, a card drops its backdrop
+     * blur for a flat fill, because a blur is recomputed every time the pixels
+     * behind it change — which during a lasso drag is every frame.
+     */
+    busy: boolean;
+    /** Width of the figure, in pixels; `0` before it has been measured. */
+    width: number;
+    /** What the reader is pointing with. */
+    pointer: OverlayPointerKind;
+}
+/**
+ * The surface a floating control is sitting on.
+ *
+ * A control rendered with no {@link OverlayLayer} above it gets a comfortable,
+ * awake, unmeasured surface, so every component in this domain is usable on
+ * its own and renders correctly to a string.
+ * @returns The surface.
+ */
+export declare function useOverlaySurface(): OverlaySurface;
+/**
+ * Whether the pointer on this page is a finger.
+ *
+ * Returns `false` where `matchMedia` is missing, which is what keeps the
+ * string-rendering tests working — the same guard `useResizeObserver` applies
+ * to a missing `ResizeObserver`.
+ * @returns Whether the pointer is coarse.
+ */
+export declare function useCoarsePointer(): boolean;
+/**
+ * The surface an {@link OverlayLayer} hands down to the cards inside it.
+ *
+ * Published for the layer alone. A control reaches it through
+ * {@link useOverlaySurface}, which is what leaves it with real measurements
+ * when nobody wrapped it in a layer at all.
+ */
+export declare const OverlaySurfaceContext: import("react").Context<OverlaySurface>;
+//# sourceMappingURL=overlaySurface.d.ts.map

package/lib/overlay/ui/overlaySurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlaySurface.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlaySurface.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AAGnC,uEAAuE;AACvE,MAAM,WAAW,cAAc;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,cAAc,CAAC;IACxB,kEAAkE;IAClE,KAAK,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,EAAE,kBAAkB,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,IAAI,cAAc,CAElD;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAM1C;AAiBD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,yCACgB,CAAC"}

package/lib/overlay/ui/overlaySurface.js

@@ -0,0 +1,85 @@
+/**
+ * What the floating chrome over one figure agrees on.
+ *
+ * Two cards over the same scatter that disagree about how tightly to pack
+ * their controls, or about whether the figure is repainting, read as two
+ * pieces of software sitting on one picture. So the measurements are settled
+ * once by the layer, and every card reads them back from here rather than
+ * deciding for itself.
+ */
+import { createContext, useContext, useSyncExternalStore } from 'react';
+import { overlayMetrics } from "../core/overlayMetrics.js";
+/**
+ * The surface a floating control is sitting on.
+ *
+ * A control rendered with no {@link OverlayLayer} above it gets a comfortable,
+ * awake, unmeasured surface, so every component in this domain is usable on
+ * its own and renders correctly to a string.
+ * @returns The surface.
+ */
+export function useOverlaySurface() {
+    return useContext(OverlaySurfaceContext);
+}
+/**
+ * Whether the pointer on this page is a finger.
+ *
+ * Returns `false` where `matchMedia` is missing, which is what keeps the
+ * string-rendering tests working — the same guard `useResizeObserver` applies
+ * to a missing `ResizeObserver`.
+ * @returns Whether the pointer is coarse.
+ */
+export function useCoarsePointer() {
+    return useSyncExternalStore(subscribeToPointerKind, readPointerKind, readFinePointer);
+}
+/**
+ * What a control gets when there is no layer above it.
+ *
+ * Awake rather than resting: a card with nobody watching the pointer on its
+ * behalf would otherwise sit at three-quarters strength for ever, with no way
+ * for the reader to bring it up.
+ */
+const UNWRAPPED_SURFACE = {
+    metrics: overlayMetrics('comfortable', 'fine'),
+    awake: true,
+    busy: false,
+    width: 0,
+    pointer: 'fine',
+};
+/**
+ * The surface an {@link OverlayLayer} hands down to the cards inside it.
+ *
+ * Published for the layer alone. A control reaches it through
+ * {@link useOverlaySurface}, which is what leaves it with real measurements
+ * when nobody wrapped it in a layer at all.
+ */
+export const OverlaySurfaceContext = createContext(UNWRAPPED_SURFACE);
+function subscribeToPointerKind(onChange) {
+    if (typeof globalThis.matchMedia !== 'function')
+        return doNothing;
+    const query = globalThis.matchMedia(COARSE_POINTER_QUERY);
+    query.addEventListener('change', onChange);
+    return () => {
+        query.removeEventListener('change', onChange);
+    };
+}
+function readPointerKind() {
+    if (typeof globalThis.matchMedia !== 'function')
+        return false;
+    return globalThis.matchMedia(COARSE_POINTER_QUERY).matches;
+}
+/**
+ * What a server render is told the pointer is.
+ *
+ * Nothing can be asked about the pointer while the markup is being written,
+ * and guessing a finger would hand the largest controls to every reader whose
+ * first paint comes from the server.
+ * @returns Always `false`.
+ */
+function readFinePointer() {
+    return false;
+}
+function doNothing() {
+    // Nothing was subscribed to, so there is nothing to unsubscribe from.
+}
+const COARSE_POINTER_QUERY = '(pointer: coarse)';
+//# sourceMappingURL=overlaySurface.js.map

package/lib/overlay/ui/overlaySurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlaySurface.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlaySurface.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAoB3D;;;;;;;GAOG;AACH,MAAM,UAAU,iBAAiB;IAC/B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,oBAAoB,CACzB,sBAAsB,EACtB,eAAe,EACf,eAAe,CAChB,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAmB;IACxC,OAAO,EAAE,cAAc,CAAC,aAAa,EAAE,MAAM,CAAC;IAC9C,KAAK,EAAE,IAAI;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAChC,aAAa,CAAiB,iBAAiB,CAAC,CAAC;AAEnD,SAAS,sBAAsB,CAAC,QAAoB;IAClD,IAAI,OAAO,UAAU,CAAC,UAAU,KAAK,UAAU;QAAE,OAAO,SAAS,CAAC;IAClE,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC1D,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,GAAG,EAAE;QACV,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChD,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IACtB,IAAI,OAAO,UAAU,CAAC,UAAU,KAAK,UAAU;QAAE,OAAO,KAAK,CAAC;IAC9D,OAAO,UAAU,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC;AAC7D,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,eAAe;IACtB,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,SAAS;IAChB,sEAAsE;AACxE,CAAC;AAED,MAAM,oBAAoB,GAAG,mBAAmB,CAAC"}

package/lib/overlay/ui/overlaySwitchStyles.d.ts

@@ -0,0 +1,70 @@
+/**
+ * The rules a switch is drawn with.
+ *
+ * A panel's booleans are the settings whose state has to be readable without
+ * touching them: `One scale for all` drawn as a grey chip answers the reader's
+ * only question about it — is it on? — with nothing at all. So on and off are
+ * said twice over, by the colour of the track and by which end the knob is at,
+ * and the target the reader aims at is kept larger than the switch they see.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/** Every measurement a switch is drawn from. */
+export interface OverlaySwitchTrack {
+    /** Width of the track, in pixels. */
+    width: number;
+    /** Height of the track, in pixels. */
+    height: number;
+    /** Side of the knob, in pixels. */
+    knob: number;
+    /** Room between the knob and the edge of the track, in pixels. */
+    inset: number;
+    /** How far the knob slides when it is turned on, in pixels. */
+    travel: number;
+}
+/**
+ * How big a switch is drawn.
+ *
+ * Three quarters of a control's height, held even so that the knob is centred
+ * on a whole pixel, and half again as wide as it is tall — thirty by eighteen
+ * at the compact size. It follows the control height rather than a constant,
+ * which is what makes it grow with everything else on a phone: a switch a
+ * finger cannot hit is a setting that cannot be changed.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The switch's measurements.
+ */
+export declare function overlaySwitchTrack(metrics: OverlayMetrics): OverlaySwitchTrack;
+/**
+ * The button a switch is, which is bigger than the switch drawn on it.
+ *
+ * The track is eighteen pixels tall and the target is the card's full control
+ * height, so the thing the reader aims at is forty pixels on a phone even
+ * though the thing they see never grows past thirty.
+ * @param metrics - The measurements the card is drawn from.
+ * @param track - The switch's measurements.
+ * @param disabled - Whether it cannot be pressed.
+ * @returns The button's rules.
+ */
+export declare function overlaySwitchStyle(metrics: OverlayMetrics, track: OverlaySwitchTrack, disabled: boolean): CSSProperties;
+/**
+ * The track a switch's knob sits in.
+ *
+ * On and off are told apart by the ground rather than by the position of the
+ * knob alone, because a fourteen-pixel dot twelve pixels to the left of where
+ * it was is not a difference anybody reads across a panel of six settings.
+ * @param track - The switch's measurements.
+ * @param checked - Whether it is on.
+ * @returns The track's rules.
+ */
+export declare function overlaySwitchTrackStyle(track: OverlaySwitchTrack, checked: boolean): CSSProperties;
+/**
+ * The knob a switch slides.
+ *
+ * It slides rather than jumping, so the reader who pressed it sees which of
+ * the two ends it went to instead of only finding the panel changed.
+ * @param track - The switch's measurements.
+ * @param checked - Whether it is on.
+ * @returns The knob's rules.
+ */
+export declare function overlaySwitchKnobStyle(track: OverlaySwitchTrack, checked: boolean): CSSProperties;
+//# sourceMappingURL=overlaySwitchStyles.d.ts.map

package/lib/overlay/ui/overlaySwitchStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlaySwitchStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlaySwitchStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,gDAAgD;AAChD,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,cAAc,GACtB,kBAAkB,CAMpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,OAAO,GAChB,aAAa,CAYf;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,OAAO,GACf,aAAa,CAUf;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,OAAO,GACf,aAAa,CAYf"}

package/lib/overlay/ui/overlaySwitchStyles.js

@@ -0,0 +1,102 @@
+/**
+ * The rules a switch is drawn with.
+ *
+ * A panel's booleans are the settings whose state has to be readable without
+ * touching them: `One scale for all` drawn as a grey chip answers the reader's
+ * only question about it — is it on? — with nothing at all. So on and off are
+ * said twice over, by the colour of the track and by which end the knob is at,
+ * and the target the reader aims at is kept larger than the switch they see.
+ */
+/**
+ * How big a switch is drawn.
+ *
+ * Three quarters of a control's height, held even so that the knob is centred
+ * on a whole pixel, and half again as wide as it is tall — thirty by eighteen
+ * at the compact size. It follows the control height rather than a constant,
+ * which is what makes it grow with everything else on a phone: a switch a
+ * finger cannot hit is a setting that cannot be changed.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The switch's measurements.
+ */
+export function overlaySwitchTrack(metrics) {
+    const height = Math.round((metrics.controlHeight * 0.75) / 2) * 2;
+    const width = Math.round((height * 5) / 3);
+    const inset = 2;
+    const knob = height - inset * 2;
+    return { width, height, knob, inset, travel: width - knob - inset * 2 };
+}
+/**
+ * The button a switch is, which is bigger than the switch drawn on it.
+ *
+ * The track is eighteen pixels tall and the target is the card's full control
+ * height, so the thing the reader aims at is forty pixels on a phone even
+ * though the thing they see never grows past thirty.
+ * @param metrics - The measurements the card is drawn from.
+ * @param track - The switch's measurements.
+ * @param disabled - Whether it cannot be pressed.
+ * @returns The button's rules.
+ */
+export function overlaySwitchStyle(metrics, track, disabled) {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        minWidth: track.width,
+        height: metrics.controlHeight,
+        padding: 0,
+        border: 'none',
+        background: 'transparent',
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+    };
+}
+/**
+ * The track a switch's knob sits in.
+ *
+ * On and off are told apart by the ground rather than by the position of the
+ * knob alone, because a fourteen-pixel dot twelve pixels to the left of where
+ * it was is not a difference anybody reads across a panel of six settings.
+ * @param track - The switch's measurements.
+ * @param checked - Whether it is on.
+ * @returns The track's rules.
+ */
+export function overlaySwitchTrackStyle(track, checked) {
+    return {
+        position: 'relative',
+        display: 'inline-block',
+        width: track.width,
+        height: track.height,
+        borderRadius: 999,
+        background: checked ? 'var(--accent)' : 'var(--border-strong)',
+        transition: `background ${OVERLAY_SWITCH_TRANSITION}ms ease`,
+    };
+}
+/**
+ * The knob a switch slides.
+ *
+ * It slides rather than jumping, so the reader who pressed it sees which of
+ * the two ends it went to instead of only finding the panel changed.
+ * @param track - The switch's measurements.
+ * @param checked - Whether it is on.
+ * @returns The knob's rules.
+ */
+export function overlaySwitchKnobStyle(track, checked) {
+    return {
+        position: 'absolute',
+        top: track.inset,
+        left: checked ? track.inset + track.travel : track.inset,
+        width: track.knob,
+        height: track.knob,
+        borderRadius: '50%',
+        background: 'var(--surface)',
+        boxShadow: 'var(--shadow-sm)',
+        transition: `left ${OVERLAY_SWITCH_TRANSITION}ms ease`,
+    };
+}
+/**
+ * How long the knob takes to cross.
+ *
+ * Long enough to be seen as a movement and short enough that a reader turning
+ * three settings on in a row never waits for the animation.
+ */
+const OVERLAY_SWITCH_TRANSITION = 150;
+//# sourceMappingURL=overlaySwitchStyles.js.map

package/lib/overlay/ui/overlaySwitchStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlaySwitchStyles.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlaySwitchStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAoBH;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAuB;IAEvB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAG,CAAC,CAAC;IAChB,MAAM,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;IAChC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;AAC1E,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAuB,EACvB,KAAyB,EACzB,QAAiB;IAEjB,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,KAAK,CAAC,KAAK;QACrB,MAAM,EAAE,OAAO,CAAC,aAAa;QAC7B,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,uBAAuB,CACrC,KAAyB,EACzB,OAAgB;IAEhB,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,cAAc;QACvB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,YAAY,EAAE,GAAG;QACjB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,sBAAsB;QAC9D,UAAU,EAAE,cAAc,yBAAyB,SAAS;KAC7D,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAyB,EACzB,OAAgB;IAEhB,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK,CAAC,KAAK;QAChB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;QACxD,KAAK,EAAE,KAAK,CAAC,IAAI;QACjB,MAAM,EAAE,KAAK,CAAC,IAAI;QAClB,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,gBAAgB;QAC5B,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,QAAQ,yBAAyB,SAAS;KACvD,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,yBAAyB,GAAG,GAAG,CAAC"}

package/lib/overlay/ui/overlayValueStyles.d.ts

@@ -0,0 +1,101 @@
+/**
+ * The rules a control that writes its own value is drawn with.
+ *
+ * A bar over a figure used to name its settings and hide their answers: a
+ * caption reading `Colour by` beside a box the reader had to open to learn it
+ * said `Species`. The name of a setting is read once, on the first visit; its
+ * value is read every time the figure is looked at. So these controls write
+ * the value and leave the name to the pointer, the screen reader and the menu
+ * they open.
+ *
+ * None of them carries an outline or a fill at rest. The bar already has one
+ * container edge in the sunken track the tabs sit in, and a second and third
+ * box beside it turn the chrome into the loudest thing on a page whose point
+ * is the picture underneath. What stands in for the box is the ink — the value
+ * at full strength, its key word in the caption's grey — and a ground that
+ * only appears under the pointer.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/** How a value-bearing control stands. */
+export interface OverlayValueLook {
+    /**
+     * Whether the pointer is over it.
+     * @default false
+     */
+    hovered?: boolean;
+    /**
+     * Whether the keyboard is on it. Drawn as a ring rather than as the hover
+     * ground, because a reader tabbing through a bar has to be able to tell
+     * where the focus is from a control the pointer happens to be resting on.
+     * @default false
+     */
+    focused?: boolean;
+    /**
+     * Whether the choices behind it are showing.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether it cannot be pressed.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * A setting written as its value.
+ *
+ * Its height is a control's, so it stands level with the tab track beside it,
+ * and its width floors at the button size — which is what keeps a setting
+ * reading `95%` at forty pixels under a fingertip instead of shrinking to the
+ * width of three characters.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param look - See {@link OverlayValueLook}.
+ * @returns The button's rules.
+ */
+export declare function overlayValueButtonStyle(metrics: OverlayMetrics, look: OverlayValueLook): CSSProperties;
+/**
+ * Several settings gathered into one control.
+ *
+ * It takes the sunken ground the tab track has rather than an outline of its
+ * own, so the two things on the bar that hold more than they show are told
+ * apart from the bare glyphs by the same device. Fully rounded, because that
+ * is what says a chip holds a reading rather than that it is one more button.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param look - See {@link OverlayValueLook}.
+ * @returns The chip's rules.
+ */
+export declare function overlayChipStyle(metrics: OverlayMetrics, look: OverlayValueLook): CSSProperties;
+/**
+ * The value itself, which is what the reader is scanning for.
+ * @returns The value's rules.
+ */
+export declare function overlayValueTextStyle(): CSSProperties;
+/**
+ * The key word in front of a value.
+ *
+ * The caption's grey at the caption's weight, so a reader scanning the bar for
+ * how the figure is drawn reads `Species` and steps over `Colour` — and the
+ * pair still reads as one control rather than as a label and a button.
+ * @returns The key word's rules.
+ */
+export declare function overlayValueKeyStyle(): CSSProperties;
+/**
+ * The hairline between two settings inside a chip.
+ *
+ * Short of the chip's full height, so it separates the two readings without
+ * cutting the chip in half.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The separator's rules.
+ */
+export declare function overlayChipSeparatorStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The caret saying there is more behind the words.
+ *
+ * Faint, because it is the one part of these controls the reader never needs
+ * to read — it says that the value can be changed, and the value is what they
+ * came to see.
+ * @returns The caret's rules.
+ */
+export declare function overlayCaretStyle(): CSSProperties;
+//# sourceMappingURL=overlayValueStyles.d.ts.map

package/lib/overlay/ui/overlayValueStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayValueStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayValueStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,gBAAgB,GACrB,aAAa,CAwBf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,gBAAgB,GACrB,aAAa,CAyBf;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,IAAI,aAAa,CAKrD;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,IAAI,aAAa,CAKpD;AAED;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,GACtB,aAAa,CAOf;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,IAAI,aAAa,CAKjD"}

package/lib/overlay/ui/overlayValueStyles.js

@@ -0,0 +1,166 @@
+/**
+ * The rules a control that writes its own value is drawn with.
+ *
+ * A bar over a figure used to name its settings and hide their answers: a
+ * caption reading `Colour by` beside a box the reader had to open to learn it
+ * said `Species`. The name of a setting is read once, on the first visit; its
+ * value is read every time the figure is looked at. So these controls write
+ * the value and leave the name to the pointer, the screen reader and the menu
+ * they open.
+ *
+ * None of them carries an outline or a fill at rest. The bar already has one
+ * container edge in the sunken track the tabs sit in, and a second and third
+ * box beside it turn the chrome into the loudest thing on a page whose point
+ * is the picture underneath. What stands in for the box is the ink — the value
+ * at full strength, its key word in the caption's grey — and a ground that
+ * only appears under the pointer.
+ */
+/**
+ * A setting written as its value.
+ *
+ * Its height is a control's, so it stands level with the tab track beside it,
+ * and its width floors at the button size — which is what keeps a setting
+ * reading `95%` at forty pixels under a fingertip instead of shrinking to the
+ * width of three characters.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param look - See {@link OverlayValueLook}.
+ * @returns The button's rules.
+ */
+export function overlayValueButtonStyle(metrics, look) {
+    const { hovered = false, focused = false, active = false } = look;
+    const { disabled = false } = look;
+    const lit = !disabled && (hovered || active);
+    return {
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: OVERLAY_VALUE_GAP,
+        minWidth: metrics.buttonSize,
+        height: metrics.controlHeight,
+        padding: `0 ${metrics.paddingX}px`,
+        border: 'none',
+        borderRadius: metrics.controlRadius + 1,
+        background: lit ? 'var(--surface-sunken)' : 'transparent',
+        color: 'var(--text)',
+        font: 'inherit',
+        fontSize: metrics.fontSize,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+        ...focusRing(focused && !disabled),
+    };
+}
+/**
+ * Several settings gathered into one control.
+ *
+ * It takes the sunken ground the tab track has rather than an outline of its
+ * own, so the two things on the bar that hold more than they show are told
+ * apart from the bare glyphs by the same device. Fully rounded, because that
+ * is what says a chip holds a reading rather than that it is one more button.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param look - See {@link OverlayValueLook}.
+ * @returns The chip's rules.
+ */
+export function overlayChipStyle(metrics, look) {
+    const { hovered = false, focused = false, active = false } = look;
+    const { disabled = false } = look;
+    const lit = !disabled && (hovered || active);
+    return {
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: OVERLAY_VALUE_GAP,
+        minWidth: metrics.buttonSize,
+        height: metrics.controlHeight,
+        padding: `0 ${metrics.paddingX + 2}px`,
+        border: 'none',
+        borderRadius: metrics.controlHeight / 2,
+        background: 'var(--surface-sunken)',
+        color: 'var(--text)',
+        boxShadow: lit ? 'inset 0 0 0 1px var(--border)' : undefined,
+        font: 'inherit',
+        fontSize: metrics.fontSize,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+        ...focusRing(focused && !disabled),
+    };
+}
+/**
+ * The value itself, which is what the reader is scanning for.
+ * @returns The value's rules.
+ */
+export function overlayValueTextStyle() {
+    return {
+        color: 'var(--text)',
+        fontWeight: 600,
+    };
+}
+/**
+ * The key word in front of a value.
+ *
+ * The caption's grey at the caption's weight, so a reader scanning the bar for
+ * how the figure is drawn reads `Species` and steps over `Colour` — and the
+ * pair still reads as one control rather than as a label and a button.
+ * @returns The key word's rules.
+ */
+export function overlayValueKeyStyle() {
+    return {
+        color: 'var(--text-muted)',
+        fontWeight: 500,
+    };
+}
+/**
+ * The hairline between two settings inside a chip.
+ *
+ * Short of the chip's full height, so it separates the two readings without
+ * cutting the chip in half.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The separator's rules.
+ */
+export function overlayChipSeparatorStyle(metrics) {
+    return {
+        width: 1,
+        height: Math.max(10, metrics.controlHeight - 14),
+        background: 'var(--border)',
+        margin: `0 ${OVERLAY_VALUE_GAP}px`,
+    };
+}
+/**
+ * The caret saying there is more behind the words.
+ *
+ * Faint, because it is the one part of these controls the reader never needs
+ * to read — it says that the value can be changed, and the value is what they
+ * came to see.
+ * @returns The caret's rules.
+ */
+export function overlayCaretStyle() {
+    return {
+        display: 'inline-flex',
+        color: 'var(--text-faint)',
+    };
+}
+/** What is left between the swatches, the words and the caret. */
+const OVERLAY_VALUE_GAP = 4;
+/**
+ * The ring around the control the keyboard is on.
+ *
+ * Offset by a pixel so it reads as a ring around the control rather than as
+ * the outline these controls spend the rest of their life not having. It falls
+ * back to the text colour on a page that never declared an accent, since a
+ * focus ring nobody can see is the one accessibility fault a keyboard reader
+ * cannot work around.
+ * @param focused - Whether the keyboard is on it.
+ * @returns The outline rules, or nothing.
+ */
+function focusRing(focused) {
+    if (!focused)
+        return {};
+    return {
+        outline: '2px solid var(--accent, var(--text))',
+        outlineOffset: 1,
+    };
+}
+//# sourceMappingURL=overlayValueStyles.js.map

package/lib/overlay/ui/overlayValueStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayValueStyles.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayValueStyles.ts"],"names":[],"mappings":"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"}

package/lib/pedagogy/ui/ExerciseProgressHeader.js

@@ -36,7 +36,7 @@ const ROW_STYLE = {
 };
 const COUNT_STYLE = { fontWeight: 600 };
 const PERCENT_STYLE = {
-    color: '#5b6875',
+    color: 'var(--text-muted, #5b6875)',
     flex: '1 1 auto',
     fontSize: 12,
 };

package/lib/pedagogy/ui/ExerciseProgressHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExerciseProgressHeader.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseProgressHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAmCjC;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EACJ,OAAO,EACP,UAAU,EACV,UAAU,GAAG,mBAAmB,EAChC,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,KAAK,EACrB,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC;IAEvE,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,aAC1C,eAAK,KAAK,EAAE,SAAS,aACnB,eAAM,KAAK,EAAE,WAAW,YACrB,GAAG,OAAO,CAAC,MAAM,MAAM,OAAO,CAAC,KAAK,SAAS,GACzC,EACP,eACE,KAAK,EAAE,aAAa,YACpB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAQ,EAC9C,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,SAAS,EACjB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,aAAa,CAAC,IAAI,CAAC,CAAC;wBACtB,CAAC,GACD,CACH,IACG,EAEN,KAAC,WAAW,IACV,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,KAAK,EAAE,OAAO,CAAC,KAAK,GACpB,EAED,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,KAAK,IACJ,MAAM,EAAE,UAAU,EAClB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,gBAAgB,EAAC,iBAAiB,EAClC,iBAAiB,EAAC,kBAAkB,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;oBACd,UAAU,EAAE,CAAC;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,YAEA,YAAY,GACP,CACT,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GACnB,8GAA8G,CAAC;AAEjH,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,WAAW,GAAkB,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,aAAa,GAAkB;IACnC,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,EAAE;CACb,CAAC"}
+{"version":3,"file":"ExerciseProgressHeader.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseProgressHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAmCjC;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EACJ,OAAO,EACP,UAAU,EACV,UAAU,GAAG,mBAAmB,EAChC,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,KAAK,EACrB,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC;IAEvE,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,aAC1C,eAAK,KAAK,EAAE,SAAS,aACnB,eAAM,KAAK,EAAE,WAAW,YACrB,GAAG,OAAO,CAAC,MAAM,MAAM,OAAO,CAAC,KAAK,SAAS,GACzC,EACP,eACE,KAAK,EAAE,aAAa,YACpB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAQ,EAC9C,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,SAAS,EACjB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,aAAa,CAAC,IAAI,CAAC,CAAC;wBACtB,CAAC,GACD,CACH,IACG,EAEN,KAAC,WAAW,IACV,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,KAAK,EAAE,OAAO,CAAC,KAAK,GACpB,EAED,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,KAAK,IACJ,MAAM,EAAE,UAAU,EAClB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,gBAAgB,EAAC,iBAAiB,EAClC,iBAAiB,EAAC,kBAAkB,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;oBACd,UAAU,EAAE,CAAC;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,YAEA,YAAY,GACP,CACT,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GACnB,8GAA8G,CAAC;AAEjH,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,WAAW,GAAkB,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,aAAa,GAAkB;IACnC,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,EAAE;CACb,CAAC"}

package/lib/pedagogy/ui/GlossaryText.js

@@ -58,7 +58,7 @@ const TITLE_STYLE = { fontWeight: 600, fontSize: 13 };
 const SUMMARY_STYLE = {
     fontSize: 12,
     lineHeight: 1.45,
-    color: '#d3d8de',
+    color: 'var(--border, #d3d8de)',
 };
 const LIST_STYLE = {
     display: 'flex',
@@ -74,6 +74,6 @@ const CODE_STYLE = {
     fontWeight: 600,
     color: '#8abbff',
 };
-const INPUT_STYLE = { color: '#f6f7f9' };
+const INPUT_STYLE = { color: 'var(--surface-sunken, #f6f7f9)' };
 const NOTE_STYLE = { fontStyle: 'italic', color: '#abb3bf' };
 //# sourceMappingURL=GlossaryText.js.map