react-cheminfo 0.9.0 → 0.10.0

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

@@ -0,0 +1,75 @@
+import type { ReactElement } from 'react';
+import type { OverlayMarkShape } from '../core/overlayMarks.ts';
+import type { OverlayPlacement } from '../core/overlayPlacement.ts';
+/** One entry of an {@link OverlayLegend}. */
+export interface OverlayLegendEntry {
+    /** A stable id, used as the key and handed back by `onToggle`. */
+    id: string;
+    /** What the mark means, in the reader's own words. */
+    label: string;
+    /** The colour the mark carries on the figure. */
+    color: string;
+    /**
+     * Which mark it is. The shape channel is what lets one figure carry two
+     * meanings at once — filled dots for the samples, lines for the components.
+     * @default 'dot'
+     */
+    shape?: OverlayMarkShape;
+    /**
+     * How many samples it covers, written after the label.
+     * @default undefined — no count is written
+     */
+    count?: number;
+    /**
+     * Whether it is currently drawn faint on the figure, which is what a
+     * switched-off entry looks like.
+     * @default false
+     */
+    muted?: boolean;
+    /**
+     * One line saying why this entry is not drawn in full — a group with too few
+     * samples to outline, say.
+     * @default undefined
+     */
+    note?: string;
+}
+/** What {@link OverlayLegend} needs. */
+export interface OverlayLegendProps {
+    /**
+     * The sentence over the entries, naming what the colour means on this
+     * figure: `Colour = species`, `Colour = component`. It has no default on
+     * purpose — a legend that does not name its encoding is how a reader carries
+     * the wrong meaning from one tab to the next.
+     */
+    title: string;
+    /** The entries, in the order they are drawn. */
+    entries: readonly OverlayLegendEntry[];
+    /**
+     * Where it sits.
+     * @default 'bottom-left'
+     */
+    placement?: OverlayPlacement;
+    /**
+     * Called with an entry's id when it is pressed, which is what makes the
+     * legend a filter. Left out, the entries are text rather than buttons.
+     * @default undefined
+     */
+    onToggle?: (id: string) => void;
+    /**
+     * The most entries written before the rest fold into `+ 7 more`.
+     * @default 8
+     */
+    maxEntries?: number;
+    /**
+     * Value of the `data-testid` attribute of the card.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * The card that says what colour and shape mean on a figure.
+ * @param props - See {@link OverlayLegendProps}.
+ * @returns The legend.
+ */
+export declare function OverlayLegend(props: OverlayLegendProps): ReactElement;
+//# sourceMappingURL=OverlayLegend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLegend.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAWpE,6CAA6C;AAC7C,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAoCrE"}

package/lib/overlay/ui/OverlayLegend.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { OverlayLegendMark } from "./OverlayLegendMark.js";
+import { OVERLAY_LEGEND_ENTRY_STYLE, overlayLegendStyle, overlayLegendTitleStyle, } from "./overlayFigureStyles.js";
+import { overlayCardStyle, overlayGroundStyle } from "./overlayStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * The card that says what colour and shape mean on a figure.
+ * @param props - See {@link OverlayLegendProps}.
+ * @returns The legend.
+ */
+export function OverlayLegend(props) {
+    const { title, entries, placement = 'bottom-left', onToggle, maxEntries = 8, testId, } = props;
+    const { metrics, awake, busy } = useOverlaySurface();
+    const titleId = useId();
+    const room = Math.max(1, maxEntries);
+    const folded = entries.length > room ? entries.length - (room - 1) : 0;
+    const written = folded === 0 ? entries : entries.slice(0, room - 1);
+    return (_jsxs("div", { style: overlayCardStyle(placement, metrics), "data-testid": testId, children: [_jsx("div", { style: overlayGroundStyle(awake ? 1 : RESTING_OPACITY, busy) }), _jsxs("div", { role: "group", "aria-labelledby": titleId, style: overlayLegendStyle(metrics), children: [_jsx("div", { id: titleId, style: overlayLegendTitleStyle(metrics), children: title }), written.map((entry) => (_jsx(LegendEntry, { entry: entry, onToggle: onToggle }, entry.id))), folded === 0 ? null : (_jsx("span", { style: foldStyle(metrics), children: `+ ${folded} more` }))] })] }));
+}
+/**
+ * A legend with no `onToggle` is a key: making its entries buttons would put
+ * every one of them in the tab order on the way to nothing.
+ * @param props - The entry, and what pressing it does.
+ * @returns The entry.
+ */
+function LegendEntry(props) {
+    const { entry, onToggle } = props;
+    const muted = entry.muted ?? false;
+    const style = {
+        ...OVERLAY_LEGEND_ENTRY_STYLE,
+        alignItems: entry.note === undefined ? 'center' : 'flex-start',
+    };
+    const body = (_jsxs(_Fragment, { children: [_jsx(OverlayLegendMark, { color: entry.color, shape: entry.shape, muted: muted }), _jsxs("span", { style: TEXT_STYLE, children: [_jsx("span", { style: muted ? MUTED_LABEL_STYLE : LABEL_STYLE, children: entryLabel(entry) }), entry.note === undefined ? null : (_jsx("span", { style: NOTE_STYLE, children: entry.note }))] })] }));
+    if (onToggle === undefined)
+        return _jsx("span", { style: style, children: body });
+    return (_jsx("button", { type: "button", "aria-pressed": !muted, style: { ...style, cursor: 'pointer' }, onClick: () => {
+            onToggle(entry.id);
+        }, children: body }));
+}
+function entryLabel(entry) {
+    if (entry.count === undefined)
+        return entry.label;
+    return `${entry.label} (${entry.count.toLocaleString()})`;
+}
+function foldStyle(metrics) {
+    return {
+        color: 'var(--text-muted)',
+        paddingLeft: metrics.gap + 12,
+    };
+}
+/**
+ * Only the ground fades while nothing is pointing at the figure. A legend
+ * whose words fade with it stops being readable exactly when the reader is
+ * looking at the picture rather than at the chrome.
+ */
+const RESTING_OPACITY = 0.74;
+const TEXT_STYLE = {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    gap: 1,
+    minWidth: 0,
+};
+const LABEL_STYLE = {
+    color: 'var(--text)',
+};
+/**
+ * A switched-off entry has to be legible as switched off in a screenshot, in a
+ * greyscale print and to a reader who does not separate two of the colours, so
+ * the state is written into the shape of the words as well as into their
+ * strength.
+ */
+const MUTED_LABEL_STYLE = {
+    color: 'var(--text-faint)',
+    textDecoration: 'line-through',
+};
+const NOTE_STYLE = {
+    color: 'var(--text-faint)',
+    fontSize: '0.9em',
+};
+//# sourceMappingURL=OverlayLegend.js.map

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

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

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

@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react';
+import type { OverlayMarkShape } from '../core/overlayMarks.ts';
+/** What {@link OverlayLegendMark} draws. */
+export interface OverlayLegendMarkProps {
+    /** The colour the mark carries on the figure. */
+    color: string;
+    /**
+     * Which mark it is.
+     * @default 'dot'
+     */
+    shape?: OverlayMarkShape;
+    /**
+     * Side of the square the mark is drawn in, in pixels.
+     * @default 12
+     */
+    size?: number;
+    /**
+     * Whether it is drawn faint, which is what a switched-off entry looks like.
+     * @default false
+     */
+    muted?: boolean;
+}
+/**
+ * The small picture of a mark, in front of what the mark means.
+ *
+ * The strokes are heavier than the geometry would suggest: a hairline rule
+ * beside a filled dot of the same width reads as a paler colour rather than as
+ * a different shape, and a reader comparing the two then believes the series
+ * is drawn in two colours. It carries no label of its own — the entry beside it
+ * is the label — so a screen reader is told to skip it rather than to announce
+ * an image with no name.
+ * @param props - See {@link OverlayLegendMarkProps}.
+ * @returns The mark.
+ */
+export declare function OverlayLegendMark(props: OverlayLegendMarkProps): ReactElement;
+//# sourceMappingURL=OverlayLegendMark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLegendMark.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayLegendMark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,4CAA4C;AAC5C,MAAM,WAAW,sBAAsB;IACrC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA0B7E"}

package/lib/overlay/ui/OverlayLegendMark.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isFilledMark } from "../core/overlayMarks.js";
+/**
+ * The small picture of a mark, in front of what the mark means.
+ *
+ * The strokes are heavier than the geometry would suggest: a hairline rule
+ * beside a filled dot of the same width reads as a paler colour rather than as
+ * a different shape, and a reader comparing the two then believes the series
+ * is drawn in two colours. It carries no label of its own — the entry beside it
+ * is the label — so a screen reader is told to skip it rather than to announce
+ * an image with no name.
+ * @param props - See {@link OverlayLegendMarkProps}.
+ * @returns The mark.
+ */
+export function OverlayLegendMark(props) {
+    const { color, shape = 'dot', size = 12, muted = false } = props;
+    const filled = isFilledMark(shape);
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false", style: {
+            display: 'block',
+            flex: 'none',
+            opacity: muted ? MUTED_OPACITY : 1,
+        }, children: _jsx("g", { fill: filled ? color : 'none', stroke: filled ? 'none' : color, strokeLinecap: "round", children: MARK_GEOMETRY[shape] }) }));
+}
+/**
+ * Each mark once, at module level: the geometry never depends on the colour —
+ * the group above it carries that — so one element per shape is shared by every
+ * legend on the page rather than rebuilt per entry per render.
+ */
+const MARK_GEOMETRY = {
+    dot: _jsx("circle", { cx: "6", cy: "6", r: "4.2" }),
+    ring: _jsx("circle", { cx: "6", cy: "6", r: "3.4", strokeWidth: "2.2" }),
+    square: _jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1.5" }),
+    line: _jsx("line", { x1: "0.5", y1: "6", x2: "11.5", y2: "6", strokeWidth: "2.8" }),
+    dashed: (_jsx("line", { x1: "0.5", y1: "6", x2: "11.5", y2: "6", strokeWidth: "2.8", strokeDasharray: "3.4 2.6" })),
+    cross: _jsx("path", { d: "M2.2 2.2 L9.8 9.8 M9.8 2.2 L2.2 9.8", strokeWidth: "2.4" }),
+};
+/**
+ * Faint enough to read as switched off at a glance, dark enough that the
+ * colour is still identifiable — a reader turning a group back on has to
+ * recognise which one it was.
+ */
+const MUTED_OPACITY = 0.35;
+//# sourceMappingURL=OverlayLegendMark.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLegendMark.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayLegendMark.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAuBvD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACjE,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEnC,OAAO,CACL,cACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;SACnC,YAED,YACE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAC7B,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAC/B,aAAa,EAAC,OAAO,YAEpB,aAAa,CAAC,KAAK,CAAC,GACnB,GACA,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,aAAa,GAA2C;IAC5D,GAAG,EAAE,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,GAAG;IACrC,IAAI,EAAE,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,WAAW,EAAC,KAAK,GAAG;IACxD,MAAM,EAAE,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,GAAG;IAC1D,IAAI,EAAE,eAAM,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EAAC,WAAW,EAAC,KAAK,GAAG;IACjE,MAAM,EAAE,CACN,eACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,GAAG,EACN,WAAW,EAAC,KAAK,EACjB,eAAe,EAAC,SAAS,GACzB,CACH;IACD,KAAK,EAAE,eAAM,CAAC,EAAC,qCAAqC,EAAC,WAAW,EAAC,KAAK,GAAG;CAC1E,CAAC;AAEF;;;;GAIG;AACH,MAAM,aAAa,GAAG,IAAI,CAAC"}

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

@@ -0,0 +1,43 @@
+import type { ReactElement } from 'react';
+import type { OverlayControlProps } from './OverlayRow.tsx';
+/** What {@link OverlayNumber} needs. */
+export interface OverlayNumberProps extends OverlayControlProps {
+    /** The current value. */
+    value: number;
+    /** The smallest it may be. */
+    min: number;
+    /** The largest it may be. */
+    max: number;
+    /** Called with the new value, already held inside the range. */
+    onChange: (value: number) => void;
+    /**
+     * How much one press, or one arrow key, moves it.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Decimals the value is written with, so the control does not resize as the
+     * reader steps through it.
+     * @default 0
+     */
+    digits?: number;
+    /**
+     * Written after the value, e.g. `px`.
+     * @default '' — no unit is written
+     */
+    unit?: string;
+}
+/**
+ * A value the reader nudges up and down.
+ *
+ * It is two buttons around a number rather than a field, because over a figure
+ * the reader is not typing a value, they are hunting for the one that makes
+ * the picture read — and on a phone a text field raises a keyboard that covers
+ * the very picture the value is being chosen against. The end of the range is
+ * shown by the button going dead rather than by a value that refuses to move,
+ * so the reader can see where the limit is before pressing into it.
+ * @param props - See {@link OverlayNumberProps}.
+ * @returns The stepper.
+ */
+export declare function OverlayNumber(props: OverlayNumberProps): ReactElement;
+//# sourceMappingURL=OverlayNumber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayNumber.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayNumber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAS5D,wCAAwC;AACxC,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAkErE"}

package/lib/overlay/ui/OverlayNumber.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverlayRow } from "./OverlayRow.js";
+import { overlayNumberValueStyle, overlayStepperButtonStyle, overlayStepperStyle, } from "./overlayStepperStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * A value the reader nudges up and down.
+ *
+ * It is two buttons around a number rather than a field, because over a figure
+ * the reader is not typing a value, they are hunting for the one that makes
+ * the picture read — and on a phone a text field raises a keyboard that covers
+ * the very picture the value is being chosen against. The end of the range is
+ * shown by the button going dead rather than by a value that refuses to move,
+ * so the reader can see where the limit is before pressing into it.
+ * @param props - See {@link OverlayNumberProps}.
+ * @returns The stepper.
+ */
+export function OverlayNumber(props) {
+    const { value, min, max, onChange, label, help, hideLabel = false, disabled = false, testId, step = 1, digits = 0, unit = '', } = props;
+    const { metrics } = useOverlaySurface();
+    function move(steps) {
+        const next = clamp(value + steps * step, min, max);
+        if (next !== value)
+            onChange(next);
+    }
+    function onKeyDown(event) {
+        const steps = STEPS_BY_KEY.get(event.key);
+        if (steps === undefined || disabled)
+            return;
+        event.preventDefault();
+        move(steps);
+    }
+    return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsxs("span", { style: overlayStepperStyle(metrics), "data-testid": testId, children: [_jsx("button", { type: "button", style: overlayStepperButtonStyle(metrics, disabled || value <= min), disabled: disabled || value <= min, "aria-label": `Decrease ${label}`, onClick: () => move(-1), onKeyDown: onKeyDown, children: "\u2212" }), _jsx("span", { style: overlayNumberValueStyle(metrics, widestValue(props)), "aria-live": "polite", children: `${value.toFixed(digits)}${unit}` }), _jsx("button", { type: "button", style: overlayStepperButtonStyle(metrics, disabled || value >= max), disabled: disabled || value >= max, "aria-label": `Increase ${label}`, onClick: () => move(1), onKeyDown: onKeyDown, children: "+" })] }) }));
+}
+/**
+ * How long the longest value of a stepper is, in characters.
+ *
+ * Both ends of the range are measured rather than the value in hand: reserving
+ * room for what is currently written is reserving the wrong room the moment
+ * the reader presses a button.
+ * @param props - See {@link OverlayNumberProps}.
+ * @returns The character count.
+ */
+function widestValue(props) {
+    const { min, max, digits = 0, unit = '' } = props;
+    const ends = Math.max(min.toFixed(digits).length, max.toFixed(digits).length);
+    return ends + unit.length;
+}
+/**
+ * Where a step lands, held inside the range and rounded back onto the grid.
+ *
+ * Adding a fractional step to a float drifts — ten presses of `0.1` land on
+ * `0.9999999999999999` — and a value that arrives at the caller one part in a
+ * quadrillion off its own limit is a value the caller's own clamp rejects.
+ * @param value - Where the step landed.
+ * @param min - The smallest it may be.
+ * @param max - The largest it may be.
+ * @returns The value the caller is handed.
+ */
+function clamp(value, min, max) {
+    const rounded = Math.round(value * FLOAT_GRID) / FLOAT_GRID;
+    if (rounded < min)
+        return min;
+    if (rounded > max)
+        return max;
+    return rounded;
+}
+const FLOAT_GRID = 1e10;
+const STEPS_BY_KEY = new Map([
+    ['ArrowUp', 1],
+    ['ArrowRight', 1],
+    ['ArrowDown', -1],
+    ['ArrowLeft', -1],
+]);
+//# sourceMappingURL=OverlayNumber.js.map

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

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

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

@@ -0,0 +1,81 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+/** What {@link OverlayPanel} holds. */
+export interface OverlayPanelProps {
+    /**
+     * Which figure these settings belong to: `Map`, `What differs`. A viewer
+     * shows four figures behind one cog, and a panel that never names itself
+     * leaves the reader guessing which of them they are about to change.
+     */
+    title: string;
+    /** The rows and sections, each an {@link OverlayRow} or an {@link OverlayGroup}. */
+    children: ReactNode;
+    /**
+     * Called when the reader asks for the settings the figure came with. There
+     * has to be a way back from a configuration nobody understands any more.
+     * @default undefined — no way back is offered
+     */
+    onReset?: () => void;
+    /**
+     * What that way back reads.
+     * @default 'Reset'
+     */
+    resetLabel?: string;
+    /**
+     * What the whole figure is, in a sentence, behind a question mark beside the
+     * title. This is the one glyph the domain still allows, because the figure
+     * has no name of its own in the panel to hang its explanation off — every
+     * control below does, and none of them may have one.
+     * @default undefined
+     */
+    help?: HelpContent;
+    /**
+     * What the figure can be *told to do*, drawn at the foot under a hairline —
+     * `Clear selection`, `Zoom to selection`, each an {@link OverlayAction}.
+     *
+     * Commands are not settings and must never be given a row. A row says what
+     * the figure currently is; a command changes it once and leaves nothing
+     * behind, and a reader running down a column of settings takes anything in
+     * that column for one — which is how `Clear selection` gets pressed by
+     * somebody who was only reading.
+     * @default undefined — no footer is drawn
+     */
+    actions?: ReactNode;
+    /**
+     * The line at the foot of the body that teaches the convention. Nothing in
+     * the panel says that the dotted names are offering anything, so one
+     * sentence says it once. Pass `''` for a panel whose names carry no help at
+     * all, where the line would be a promise the panel does not keep.
+     * @default 'Hover a name for what it does.'
+     */
+    hint?: string;
+    /**
+     * Width of the name column, in pixels. Widen it here rather than per row,
+     * for a panel whose names are longer than eight characters.
+     * @default derived from the type size — 88 at the compact size
+     */
+    nameWidth?: number;
+    /**
+     * Value of the `data-testid` attribute of the panel.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * The settings behind a figure's cog.
+ *
+ * The four panels of a viewer cannot be allowed to drift apart, so the parts
+ * that are the same in all of them — the title, the way back, the grid the
+ * rows sit in, the sentence teaching the help convention, the commands kept
+ * out of the settings — are settled once here rather than assembled per
+ * figure. What a panel is handed is its rows; everything around them it draws
+ * itself.
+ *
+ * It brings its own padding, so it belongs in a popover or a card that has
+ * none. Nested inside a padded surface its header rule stops short of both
+ * edges, which reads as a mis-drawn line rather than as a header.
+ * @param props - See {@link OverlayPanelProps}.
+ * @returns The panel.
+ */
+export declare function OverlayPanel(props: OverlayPanelProps): ReactElement;
+//# sourceMappingURL=OverlayPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanel.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAiB9D,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAsDnE"}

package/lib/overlay/ui/OverlayPanel.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import { HelpIcon } from "../../help/ui/HelpIcon.js";
+import { OverlayPanelContext } from "./overlayPanelContext.js";
+import { overlayPanelBodyStyle, overlayPanelFooterStyle, overlayPanelHeaderStyle, overlayPanelHintStyle, overlayPanelResetStyle, overlayPanelSurfaceStyle, overlayPanelTitleStyle, } from "./overlayPanelStyles.js";
+import { overlayNameColumnWidth } from "./overlayRowStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * The settings behind a figure's cog.
+ *
+ * The four panels of a viewer cannot be allowed to drift apart, so the parts
+ * that are the same in all of them — the title, the way back, the grid the
+ * rows sit in, the sentence teaching the help convention, the commands kept
+ * out of the settings — are settled once here rather than assembled per
+ * figure. What a panel is handed is its rows; everything around them it draws
+ * itself.
+ *
+ * It brings its own padding, so it belongs in a popover or a card that has
+ * none. Nested inside a padded surface its header rule stops short of both
+ * edges, which reads as a mis-drawn line rather than as a header.
+ * @param props - See {@link OverlayPanelProps}.
+ * @returns The panel.
+ */
+export function OverlayPanel(props) {
+    const { title, children, onReset, resetLabel = 'Reset', help } = props;
+    const { actions, hint = DEFAULT_HINT, nameWidth, testId } = props;
+    const { metrics } = useOverlaySurface();
+    const titleId = useId();
+    const [resetHovered, setResetHovered] = useState(false);
+    const width = nameWidth ?? overlayNameColumnWidth(metrics);
+    const shape = useMemo(() => ({ nameWidth: width }), [width]);
+    return (_jsxs("div", { role: "group", "aria-labelledby": titleId, "data-testid": testId, style: overlayPanelSurfaceStyle(metrics), children: [_jsxs("div", { style: overlayPanelHeaderStyle(metrics), children: [_jsxs("span", { style: overlayPanelTitleStyle(metrics), children: [_jsx("span", { id: titleId, children: title }), help === undefined ? null : (_jsx(HelpIcon, { content: help, size: metrics.fontSize }))] }), onReset === undefined ? null : (_jsx("button", { type: "button", style: overlayPanelResetStyle(metrics, resetHovered), onClick: onReset, onPointerEnter: () => setResetHovered(true), onPointerLeave: () => setResetHovered(false), onFocus: () => setResetHovered(true), onBlur: () => setResetHovered(false), children: resetLabel }))] }), _jsxs("div", { style: overlayPanelBodyStyle(metrics), children: [_jsx(OverlayPanelContext.Provider, { value: shape, children: children }), hint === '' ? null : (_jsx("p", { style: overlayPanelHintStyle(metrics), children: hint }))] }), actions === undefined ? null : (_jsx("div", { style: overlayPanelFooterStyle(metrics), children: actions }))] }));
+}
+/**
+ * The sentence that teaches the convention.
+ *
+ * It names the gesture rather than the mark, because a reader who has noticed
+ * the dotted underlines has already asked this question and one who has not
+ * would not recognise a description of them.
+ */
+const DEFAULT_HINT = 'Hover a name for what it does.';
+//# sourceMappingURL=OverlayPanel.js.map

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

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

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

@@ -0,0 +1,73 @@
+import type { ReactElement } from 'react';
+import type { OverlayOption } from './OverlayRow.tsx';
+import type { OverlaySegmentedSize } from './overlayPillStyles.ts';
+/** One choice offered by an {@link OverlayPills}. */
+export interface OverlayPillOption<TValue extends string = string> extends OverlayOption<TValue> {
+    /**
+     * How many things this choice covers, written small after its label — the
+     * number of samples in a group, of components in a view.
+     * @default undefined — no count is written
+     */
+    count?: number;
+}
+/** What {@link OverlayPills} needs. */
+export interface OverlayPillsProps<TValue extends string = string> {
+    /** The current choice. */
+    value: TValue;
+    /** What may be chosen, in the order offered. */
+    options: ReadonlyArray<OverlayPillOption<TValue>>;
+    /** Called with the new choice. */
+    onChange: (value: TValue) => void;
+    /** What the group is called, for a reader arriving by keyboard. */
+    label: string;
+    /**
+     * What the group is: a strip moving between the views of one figure, or a
+     * set of choices for one setting. The look is the same either way — it is
+     * the announcement and the shape of the keyboard that differ.
+     * @default 'tablist'
+     */
+    role?: 'tablist' | 'radiogroup';
+    /**
+     * How big it is drawn: the figure's own tab bar, or one question inside a
+     * card, which is a little smaller.
+     * @default 'strip'
+     */
+    size?: OverlaySegmentedSize;
+    /**
+     * The `id` of the panel a tab strip drives, so a screen reader can walk from
+     * a tab to what it shows. One panel is normally shared, since only the tab
+     * in force is ever rendered.
+     * @default undefined
+     */
+    panelId?: string;
+    /**
+     * Stem of the `id` every tab carries, for a panel that names the tab it
+     * belongs to. Left out, one is generated.
+     * @default undefined — a generated id
+     */
+    baseId?: string;
+    /**
+     * Whether the whole group is greyed and unreachable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Value of the `data-testid` attribute of the group.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * A row of choices in a sunken track, the one in force lifted out of it.
+ *
+ * It is the package's one segmented control, used both as a figure's tab strip
+ * and as a setting inside a card, because a reader who has learned to press
+ * one of them has learned to press the other. Only one segment is in the tab
+ * order — the one in force — and the arrows move between them from there, so
+ * a strip of six views costs a reader walking the page one stop rather than
+ * six.
+ * @param props - See {@link OverlayPillsProps}.
+ * @returns The group.
+ */
+export declare function OverlayPills<TValue extends string = string>(props: OverlayPillsProps<TValue>): ReactElement;
+//# sourceMappingURL=OverlayPills.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPills.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayPills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAQnE,qDAAqD;AACrD,MAAM,WAAW,iBAAiB,CAChC,MAAM,SAAS,MAAM,GAAG,MAAM,CAC9B,SAAQ,aAAa,CAAC,MAAM,CAAC;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,uCAAuC;AACvC,MAAM,WAAW,iBAAiB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAC/D,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,aAAa,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAC/B,YAAY,CAqEd"}