react-cheminfo 0.8.0 → 0.10.0

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"}

package/lib/overlay/ui/OverlayPills.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { handleOverlayPillKey } from "./overlayPillKeys.js";
+import { overlayPillCountStyle, overlayPillGroupStyle, overlayPillStyle, } from "./overlayPillStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * 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 function OverlayPills(props) {
+    const { value, options, onChange, label, role = 'tablist' } = props;
+    const { panelId, baseId, size = 'strip', disabled = false, testId } = props;
+    const { metrics } = useOverlaySurface();
+    const generatedId = useId();
+    const pills = useRef([]);
+    const tabs = role === 'tablist';
+    const stem = baseId ?? generatedId;
+    let selectedIndex = -1;
+    for (let index = 0; index < options.length; index++) {
+        if (options[index]?.value === value)
+            selectedIndex = index;
+    }
+    return (_jsx("div", { role: role, "aria-label": label, "data-testid": testId, style: overlayPillGroupStyle(metrics, size), onKeyDown: (event) => {
+            handleOverlayPillKey(event, {
+                length: options.length,
+                selectedIndex,
+                onSelect: (index) => {
+                    const option = options[index];
+                    if (option === undefined || option.disabled === true)
+                        return;
+                    pills.current[index]?.focus();
+                    onChange(option.value);
+                },
+            });
+        }, children: options.map((option, index) => {
+            const selected = option.value === value;
+            const unreachable = disabled || option.disabled === true;
+            return (_jsxs("button", { ref: (element) => {
+                    pills.current[index] = element;
+                }, type: "button", role: tabs ? 'tab' : 'radio', id: tabs ? `${stem}-${option.value}` : undefined, "aria-selected": tabs ? selected : undefined, "aria-checked": tabs ? undefined : selected, "aria-controls": tabs ? panelId : undefined, title: option.title, disabled: unreachable, tabIndex: index === Math.max(selectedIndex, 0) ? 0 : -1, style: overlayPillStyle(metrics, {
+                    selected,
+                    disabled: unreachable,
+                    size,
+                }), onClick: () => onChange(option.value), children: [option.label, option.count === undefined ? null : (_jsx("span", { style: overlayPillCountStyle(metrics, selected), children: option.count }))] }, option.value));
+        }) }));
+}
+//# sourceMappingURL=OverlayPills.js.map

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

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

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

@@ -0,0 +1,63 @@
+import type { ReactElement } from 'react';
+/** One line of an {@link OverlayReadout}. */
+export interface OverlayReadoutRow {
+    /** What the value is. */
+    label: string;
+    /** The value, already written out — the readout never formats a number itself. */
+    value: string;
+    /**
+     * A colour chip before the label, for a row belonging to one series.
+     * @default undefined
+     */
+    color?: string;
+}
+/** What {@link OverlayReadout} shows, and where. */
+export interface OverlayReadoutProps {
+    /** Where the pointer is, in pixels from the figure's left. */
+    x: number;
+    /** Where the pointer is, in pixels from the figure's top. */
+    y: number;
+    /** Width of the figure, so the card can be flipped rather than clipped. */
+    boxWidth: number;
+    /** Height of the figure. */
+    boxHeight: number;
+    /** The first line, in bold — normally what the reader pointed at. */
+    title: string;
+    /** Everything the caller knows about it, in the caller's own order. */
+    rows: readonly OverlayReadoutRow[];
+    /**
+     * The most rows shown before a `+ 7 more — click to keep this open` footer.
+     * A card taller than the figure is a fault, not a feature.
+     * @default 12
+     */
+    maxRows?: number;
+    /**
+     * Whether the card stays until it is dismissed, in which case it scrolls its
+     * own rows and lets the reader select their text.
+     * @default false
+     */
+    pinned?: boolean;
+    /**
+     * Called when the reader dismisses a pinned card.
+     * @default undefined
+     */
+    onUnpin?: () => void;
+    /**
+     * Value of the `data-testid` attribute of the card.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * The card that follows the pointer and says everything known about the mark
+ * under it.
+ *
+ * It follows the pointer rather than anchoring to the mark, because a
+ * nearest-within-radius hit test changes which mark it names while the pointer
+ * keeps moving, and an anchored card would then teleport. Pinned, it stops
+ * following and becomes readable and selectable.
+ * @param props - See {@link OverlayReadoutProps}.
+ * @returns The card.
+ */
+export declare function OverlayReadout(props: OverlayReadoutProps): ReactElement;
+//# sourceMappingURL=OverlayReadout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayReadout.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayReadout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAWzD,6CAA6C;AAC7C,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oDAAoD;AACpD,MAAM,WAAW,mBAAmB;IAClC,8DAA8D;IAC9D,CAAC,EAAE,MAAM,CAAC;IACV,6DAA6D;IAC7D,CAAC,EAAE,MAAM,CAAC;IACV,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CA+DvE"}