react-cheminfo 0.9.0 → 0.11.0

package/lib/overlay/ui/OverlayIconButton.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@blueprintjs/core';
+import { useState } from 'react';
+import { overlayIconButtonStyle } from "./overlayControlStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * One setting reduced to its glyph.
+ *
+ * A bar of named controls over an embedded figure spends more of the picture
+ * on its own words than the figure spends on the data, so on the bar a setting
+ * is a glyph and its name is what the pointer and the screen reader are told.
+ * That trade is only honest while the name is always there, which is why the
+ * label is required rather than optional and why it carries the current value
+ * with it: an icon nobody can name is a control nobody presses.
+ * @param props - See {@link OverlayIconButtonProps}.
+ * @returns The button.
+ */
+export function OverlayIconButton(props) {
+    const { icon, label, value, active = false, disabled = false } = props;
+    const { disabledReason, opensMenu = false, onClick, testId } = props;
+    const { metrics } = useOverlaySurface();
+    const [lit, setLit] = useState(false);
+    const name = value === undefined ? label : `${label} — ${value}`;
+    const told = disabled && disabledReason !== undefined ? disabledReason : name;
+    return (_jsx("button", { type: "button", title: told, "aria-label": name, "aria-haspopup": opensMenu ? 'menu' : undefined, "aria-expanded": opensMenu ? active : undefined, "aria-pressed": opensMenu ? undefined : active, disabled: disabled, "data-testid": testId, style: overlayIconButtonStyle(metrics, {
+            hovered: lit,
+            active,
+            disabled,
+        }), onClick: onClick, onPointerEnter: () => setLit(true), onPointerLeave: () => setLit(false), onFocus: () => setLit(true), onBlur: () => setLit(false), children: typeof icon === 'string' ? (_jsx(Icon, { icon: icon, size: glyphSize(metrics.buttonSize) })) : (icon) }));
+}
+/**
+ * How big the glyph is drawn inside the button.
+ *
+ * A little over half the button, which leaves the ring of empty space that
+ * makes a bare glyph read as something pressable rather than as a mark printed
+ * on the bar.
+ * @param buttonSize - The side of the button.
+ * @returns The glyph's size in pixels.
+ */
+function glyphSize(buttonSize) {
+    return Math.max(12, Math.round(buttonSize * 0.55));
+}
+//# sourceMappingURL=OverlayIconButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayIconButton.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayIconButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA8DxD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACvE,MAAM,EAAE,cAAc,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACrE,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;IACjE,MAAM,IAAI,GAAG,QAAQ,IAAI,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9E,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,gBACC,IAAI,mBACD,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC9B,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBAC/B,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAC5C,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,KAAK,EAAE,sBAAsB,CAAC,OAAO,EAAE;YACrC,OAAO,EAAE,GAAG;YACZ,MAAM;YACN,QAAQ;SACT,CAAC,EACF,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,YAE1B,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,IAAI,CACL,GACM,CACV,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,SAAS,CAAC,UAAkB;IACnC,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC;AACrD,CAAC"}

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

@@ -0,0 +1,43 @@
+import type { PopoverNextProps } from '@blueprintjs/core';
+import type { ReactElement, ReactNode } from 'react';
+/** What {@link OverlayInfo} holds. */
+export interface OverlayInfoProps {
+    /**
+     * The explanation, in the reader's own words: what a mark is before what an
+     * axis is, one short paragraph rather than a manual.
+     */
+    children: ReactNode;
+    /**
+     * What the glyph is called, for the pointer and for a screen reader. Phrase
+     * it as the question the reader has, not as the name of a feature.
+     * @default 'What am I looking at?'
+     */
+    label?: string;
+    /**
+     * Which side the explanation opens on.
+     * @default 'bottom-end'
+     */
+    placement?: PopoverNextProps['placement'];
+    /**
+     * Value of the `data-testid` attribute of the glyph.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * The question mark that hands the figure's own explanation back on request.
+ *
+ * A figure embedded in somebody else's page cannot spend three lines of that
+ * page standing a paragraph under itself, and a paragraph deleted for room is
+ * a reader left to guess what they are looking at. So the sentence is kept and
+ * the vertical space is not: it waits behind one glyph in the bar, where a
+ * reader who wants it can open it and everybody else never pays for it.
+ *
+ * The glyph is the domain's own icon button, the same one the cog beside it
+ * is, so the two read as a pair of marks on the bar rather than as two
+ * buttons from different families that happen to sit next to each other.
+ * @param props - See {@link OverlayInfoProps}.
+ * @returns The glyph and its explanation.
+ */
+export declare function OverlayInfo(props: OverlayInfoProps): ReactElement;
+//# sourceMappingURL=OverlayInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayInfo.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpE,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAqBjE"}

package/lib/overlay/ui/OverlayInfo.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PopoverNext } from '@blueprintjs/core';
+import { useState } from 'react';
+import { OverlayIconButton } from "./OverlayIconButton.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * The question mark that hands the figure's own explanation back on request.
+ *
+ * A figure embedded in somebody else's page cannot spend three lines of that
+ * page standing a paragraph under itself, and a paragraph deleted for room is
+ * a reader left to guess what they are looking at. So the sentence is kept and
+ * the vertical space is not: it waits behind one glyph in the bar, where a
+ * reader who wants it can open it and everybody else never pays for it.
+ *
+ * The glyph is the domain's own icon button, the same one the cog beside it
+ * is, so the two read as a pair of marks on the bar rather than as two
+ * buttons from different families that happen to sit next to each other.
+ * @param props - See {@link OverlayInfoProps}.
+ * @returns The glyph and its explanation.
+ */
+export function OverlayInfo(props) {
+    const { children, label = 'What am I looking at?' } = props;
+    const { placement = 'bottom-end', testId } = props;
+    const { metrics } = useOverlaySurface();
+    const [open, setOpen] = useState(false);
+    return (_jsx(PopoverNext, { placement: placement, onInteraction: (next) => setOpen(next), content: _jsx("div", { style: explanationStyle(metrics), children: children }), children: _jsx(OverlayIconButton, { icon: "help", label: label, active: open, testId: testId, opensMenu: true }) }));
+}
+/**
+ * The paragraph the glyph opens.
+ *
+ * It is capped short of the figure's own width, because a sentence that runs
+ * the full width of a wide chart is a sentence the eye loses the start of on
+ * the way back from the end of each line.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The explanation's rules.
+ */
+function explanationStyle(metrics) {
+    return {
+        maxWidth: 320,
+        padding: `${metrics.paddingY + 4}px ${metrics.paddingX + 4}px`,
+        color: 'var(--text)',
+        fontSize: metrics.labelSize + 1,
+        lineHeight: 1.4,
+        textWrap: 'pretty',
+    };
+}
+//# sourceMappingURL=OverlayInfo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayInfo.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayInfo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA2BxD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,QAAQ,EAAE,KAAK,GAAG,uBAAuB,EAAE,GAAG,KAAK,CAAC;IAC5D,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,KAAC,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACtC,OAAO,EAAE,cAAK,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,YAAG,QAAQ,GAAO,YAEhE,KAAC,iBAAiB,IAChB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,SACT,GACU,CACf,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,gBAAgB,CAAC,OAAuB;IAC/C,OAAO;QACL,QAAQ,EAAE,GAAG;QACb,OAAO,EAAE,GAAG,OAAO,CAAC,QAAQ,GAAG,CAAC,MAAM,OAAO,CAAC,QAAQ,GAAG,CAAC,IAAI;QAC9D,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAG,CAAC;QAC/B,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,54 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { OverlayDensity } from '../core/overlayMetrics.ts';
+/** What {@link OverlayLayer} needs. */
+export interface OverlayLayerProps {
+    /** The cards, legends and readouts that float over the figure. */
+    children: ReactNode;
+    /**
+     * How tightly every card inside packs its controls. A coarse pointer wins
+     * over this, whatever it says.
+     * @default 'comfortable'
+     */
+    density?: OverlayDensity;
+    /**
+     * Width of the figure, in pixels, normally from `useContainerSize`. It is
+     * what decides whether a card folds; zero keeps every card expanded.
+     * @default 0
+     */
+    width?: number;
+    /**
+     * Whether the figure is repainting — a lasso being dragged, a canvas
+     * animating.
+     * @default false
+     */
+    busy?: boolean;
+    /**
+     * Whether the cards are awake. Left out, the layer wakes them while the
+     * pointer is anywhere over the figure or a control inside holds the focus,
+     * which is what lets a card rest without becoming a puzzle.
+     * @default undefined — the layer watches the pointer and the focus itself
+     */
+    awake?: boolean;
+    /**
+     * Class the layer carries, in addition to `overlay-layer`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * The inert layer a figure's floating chrome lives in.
+ *
+ * It covers the figure and lets every pointer event through, so a lasso
+ * started under a card still starts; only the cards themselves take the
+ * pointer back. Everything they share — the measurements, whether they are
+ * awake, whether the figure is repainting — is settled here once, so two cards
+ * over the same figure cannot disagree.
+ *
+ * It is marked as chrome, so that saving the figure saves the picture and not
+ * the cog sitting in its corner: the glyph of a control is an `<svg>` like any
+ * chart, and nothing else on the page could tell the two apart.
+ * @param props - See {@link OverlayLayerProps}.
+ * @returns The layer.
+ */
+export declare function OverlayLayer(props: OverlayLayerProps): ReactElement;
+//# sourceMappingURL=OverlayLayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayer.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAOhE,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAwDnE"}

package/lib/overlay/ui/OverlayLayer.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { overlayMetrics } from "../core/overlayMetrics.js";
+import { OVERLAY_LAYER_STYLE } from "./overlayStyles.js";
+import { OverlaySurfaceContext, useCoarsePointer } from "./overlaySurface.js";
+/**
+ * The inert layer a figure's floating chrome lives in.
+ *
+ * It covers the figure and lets every pointer event through, so a lasso
+ * started under a card still starts; only the cards themselves take the
+ * pointer back. Everything they share — the measurements, whether they are
+ * awake, whether the figure is repainting — is settled here once, so two cards
+ * over the same figure cannot disagree.
+ *
+ * It is marked as chrome, so that saving the figure saves the picture and not
+ * the cog sitting in its corner: the glyph of a control is an `<svg>` like any
+ * chart, and nothing else on the page could tell the two apart.
+ * @param props - See {@link OverlayLayerProps}.
+ * @returns The layer.
+ */
+export function OverlayLayer(props) {
+    const { children, density = 'comfortable', width = 0, busy = false, awake, className, } = props;
+    const layer = useRef(null);
+    const [pointerOverFigure, setPointerOverFigure] = useState(false);
+    const [focusInside, setFocusInside] = useState(false);
+    const pointer = useCoarsePointer() ? 'coarse' : 'fine';
+    const watchingPointer = awake === undefined;
+    useEffect(() => {
+        const figure = layer.current?.parentElement;
+        if (!watchingPointer || figure === null || figure === undefined)
+            return;
+        const enter = () => setPointerOverFigure(true);
+        const leave = () => setPointerOverFigure(false);
+        figure.addEventListener('pointerenter', enter);
+        figure.addEventListener('pointerleave', leave);
+        return () => {
+            figure.removeEventListener('pointerenter', enter);
+            figure.removeEventListener('pointerleave', leave);
+        };
+    }, [watchingPointer]);
+    const surface = useMemo(() => ({
+        metrics: overlayMetrics(density, pointer),
+        awake: awake ?? (pointerOverFigure || focusInside),
+        busy,
+        width,
+        pointer,
+    }), [density, pointer, awake, pointerOverFigure, focusInside, busy, width]);
+    return (_jsx("div", { ref: layer, className: className === undefined ? 'overlay-layer' : `overlay-layer ${className}`, style: OVERLAY_LAYER_STYLE, "data-figure": "chrome", onFocus: () => setFocusInside(true), onBlur: () => setFocusInside(false), children: _jsx(OverlaySurfaceContext.Provider, { value: surface, children: children }) }));
+}
+//# sourceMappingURL=OverlayLayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayer.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayLayer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAsC9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,QAAQ,EACR,OAAO,GAAG,aAAa,EACvB,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,KAAK,EACZ,KAAK,EACL,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IACvD,MAAM,eAAe,GAAG,KAAK,KAAK,SAAS,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,EAAE,aAAa,CAAC;QAC5C,IAAI,CAAC,eAAe,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS;YAAE,OAAO;QACxE,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAChD,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QAC/C,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;YAClD,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC;QACzC,KAAK,EAAE,KAAK,IAAI,CAAC,iBAAiB,IAAI,WAAW,CAAC;QAClD,IAAI;QACJ,KAAK;QACL,OAAO;KACR,CAAC,EACF,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CACvE,CAAC;IAEF,OAAO,CACL,cACE,GAAG,EAAE,KAAK,EACV,SAAS,EACP,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,SAAS,EAAE,EAE1E,KAAK,EAAE,mBAAmB,iBACd,QAAQ,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,YAEnC,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAC3C,QAAQ,GACsB,GAC7B,CACP,CAAC;AACJ,CAAC"}

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

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-figure": "legend", "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"}