react-cheminfo 0.9.0 → 0.10.0

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

package/lib/overlay/ui/OverlayReadout.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button } from 'react-science/ui';
+import { useContainerSize } from "../../hooks/ui/useContainerSize.js";
+import { placeOverlayCard } from "../core/placeOverlayCard.js";
+import { overlayReadoutStyle } from "./overlayFigureStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * 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 function OverlayReadout(props) {
+    const { x, y, boxWidth, boxHeight, title, rows, maxRows = 12, pinned = false, onUnpin, testId, } = props;
+    const { metrics } = useOverlaySurface();
+    const card = useRef(null);
+    const measured = useContainerSize(card);
+    const room = Math.max(1, maxRows);
+    const hidden = pinned ? 0 : Math.max(0, rows.length - room);
+    const written = hidden === 0 ? rows : rows.slice(0, room);
+    const lines = written.length + (hidden === 0 ? 1 : 2);
+    const place = placeOverlayCard({
+        pointerX: x,
+        pointerY: y,
+        cardWidth: measured.width > 0 ? measured.width : ESTIMATED_WIDTH,
+        cardHeight: measured.height > 0 ? measured.height : estimatedHeight(lines),
+        boxWidth,
+        boxHeight,
+    });
+    return (_jsxs("div", { ref: card, "data-testid": testId, role: pinned ? 'group' : 'tooltip', "aria-label": pinned ? title : undefined, style: {
+            ...overlayReadoutStyle(metrics),
+            left: place.left,
+            top: place.top,
+            ...(pinned ? pinnedStyle(boxHeight, metrics) : null),
+        }, children: [_jsxs("div", { style: TITLE_STYLE, children: [_jsx("span", { children: title }), pinned && onUnpin !== undefined ? (_jsx(Button, { variant: "minimal", size: "small", icon: "cross", "aria-label": "Dismiss", onClick: onUnpin })) : null] }), readoutLines(written), hidden === 0 ? null : (_jsx("div", { style: FOOTER_STYLE, children: `+ ${hidden} more — click to keep this open` }))] }));
+}
+/**
+ * The rows, each keyed by what it says rather than by where it sits, so a card
+ * that gains a line above an existing one leaves the lines below it alone.
+ *
+ * A label can legitimately repeat — the same axis drawn on both sides of a map
+ * writes its name twice — so a repeat is counted and carries that count.
+ * @param rows - The lines to write, in the caller's order.
+ * @returns One element per row.
+ */
+function readoutLines(rows) {
+    const lines = [];
+    const seen = new Map();
+    for (const row of rows) {
+        const repeat = seen.get(row.label) ?? 0;
+        seen.set(row.label, repeat + 1);
+        lines.push(_jsxs("div", { style: ROW_STYLE, children: [row.color === undefined ? null : (_jsx("span", { style: { ...CHIP_STYLE, background: row.color } })), _jsx("span", { style: LABEL_STYLE, children: row.label }), _jsx("span", { style: VALUE_STYLE, children: row.value })] }, repeat === 0 ? row.label : `${row.label} ${String(repeat)}`));
+    }
+    return lines;
+}
+/**
+ * The card is placed from an estimate until it has been measured once, and the
+ * estimate errs wide on purpose: a card that flips a few pixels early is still
+ * read where the reader is looking, while one that flips late is cut off by
+ * the edge of the figure.
+ * @param lines - How many lines the card is about to hold, its title included.
+ * @returns Its likely height in pixels.
+ */
+function estimatedHeight(lines) {
+    return ESTIMATED_PADDING + lines * ESTIMATED_LINE_HEIGHT;
+}
+/**
+ * A pinned card takes the pointer back, so its rows can be selected and its
+ * dismiss button pressed, and it never grows past the figure it belongs to.
+ * @param boxHeight - Height of the figure.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns What pinning changes.
+ */
+function pinnedStyle(boxHeight, metrics) {
+    return {
+        pointerEvents: 'auto',
+        userSelect: 'text',
+        maxHeight: Math.max(MINIMUM_PINNED_HEIGHT, boxHeight - metrics.inset * 2),
+        overflowY: 'auto',
+    };
+}
+const ESTIMATED_WIDTH = 220;
+const ESTIMATED_LINE_HEIGHT = 18;
+const ESTIMATED_PADDING = 16;
+const MINIMUM_PINNED_HEIGHT = 80;
+const TITLE_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    fontWeight: 600,
+};
+const ROW_STYLE = {
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: 6,
+};
+const LABEL_STYLE = {
+    color: 'var(--text-muted)',
+};
+/**
+ * The values line up on their own column and share one digit width, so a
+ * column of numbers can be compared down the card rather than read one by one.
+ */
+const VALUE_STYLE = {
+    marginLeft: 'auto',
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+};
+const CHIP_STYLE = {
+    alignSelf: 'center',
+    flex: 'none',
+    width: 8,
+    height: 8,
+    borderRadius: 2,
+};
+const FOOTER_STYLE = {
+    marginTop: 2,
+    paddingTop: 2,
+    borderTop: '1px solid var(--border)',
+    color: 'var(--text-faint)',
+};
+//# sourceMappingURL=OverlayReadout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayReadout.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayReadout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAqDxD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EACJ,CAAC,EACD,CAAC,EACD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,MAAM,GAAG,KAAK,EACd,OAAO,EACP,MAAM,GACP,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,IAAI,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAExC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAClC,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC1D,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,gBAAgB,CAAC;QAC7B,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe;QAChE,UAAU,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC;QAC1E,QAAQ;QACR,SAAS;KACV,CAAC,CAAC;IAEH,OAAO,CACL,eACE,GAAG,EAAE,IAAI,iBACI,MAAM,EACnB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,gBACtB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE;YACL,GAAG,mBAAmB,CAAC,OAAO,CAAC;YAC/B,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,GAAG,EAAE,KAAK,CAAC,GAAG;YACd,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;SACrD,aAED,eAAK,KAAK,EAAE,WAAW,aACrB,yBAAO,KAAK,GAAQ,EACnB,MAAM,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,gBACD,SAAS,EACpB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,YAAY,CAAC,OAAO,CAAC,EACrB,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACrB,cAAK,KAAK,EAAE,YAAY,YACrB,KAAK,MAAM,iCAAiC,GACzC,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,YAAY,CAAC,IAAkC;IACtD,MAAM,KAAK,GAAmB,EAAE,CAAC;IACjC,MAAM,IAAI,GAAG,IAAI,GAAG,EAAkB,CAAC;IACvC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;QAChC,KAAK,CAAC,IAAI,CACR,eAEE,KAAK,EAAE,SAAS,aAEf,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,eAAM,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,UAAU,EAAE,GAAG,CAAC,KAAK,EAAE,GAAI,CAC1D,EACD,eAAM,KAAK,EAAE,WAAW,YAAG,GAAG,CAAC,KAAK,GAAQ,EAC5C,eAAM,KAAK,EAAE,WAAW,YAAG,GAAG,CAAC,KAAK,GAAQ,KAPvC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE,CAQ5D,CACP,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,eAAe,CAAC,KAAa;IACpC,OAAO,iBAAiB,GAAG,KAAK,GAAG,qBAAqB,CAAC;AAC3D,CAAC;AAED;;;;;;GAMG;AACH,SAAS,WAAW,CAClB,SAAiB,EACjB,OAAuB;IAEvB,OAAO;QACL,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;QACzE,SAAS,EAAE,MAAM;KAClB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,GAAG,CAAC;AAC5B,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,CAAC;IACN,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,UAAU;IACtB,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,mBAAmB;CACM,CAAC;AAEnC;;;GAGG;AACH,MAAM,WAAW,GAAG;IAClB,UAAU,EAAE,MAAM;IAClB,kBAAkB,EAAE,cAAc;IAClC,UAAU,EAAE,QAAQ;CACY,CAAC;AAEnC,MAAM,UAAU,GAAG;IACjB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,YAAY,EAAE,CAAC;CACiB,CAAC;AAEnC,MAAM,YAAY,GAAG;IACnB,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,CAAC;IACb,SAAS,EAAE,yBAAyB;IACpC,KAAK,EAAE,mBAAmB;CACM,CAAC"}

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

@@ -0,0 +1,111 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+/** One choice offered by an {@link OverlaySelect} or an {@link OverlaySegmented}. */
+export interface OverlayOption<TValue extends string = string> {
+    /** What picking it means. */
+    value: TValue;
+    /**
+     * What it reads. Write the answer rather than the jargon — `95% of samples`,
+     * never `2 SD`, because the second is meaningless to a reader who has not
+     * met it and is misread as 95% by everyone who has.
+     */
+    label: string;
+    /**
+     * What the pointer is told about this one choice, when the control's own
+     * help does not cover a surprising consequence.
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * Whether it can be picked. A choice that does not apply is greyed rather
+     * than removed, so the control keeps its shape and the reader learns that
+     * the option exists at all.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** How a row arranges its name and its control. */
+export type OverlayRowLayout = 'row' | 'grid';
+/** What every control inside an {@link OverlayBar} carries. */
+export interface OverlayControlProps {
+    /**
+     * The words in front of the control, phrased as the question the reader
+     * already has: `Colour by`, `Group outlines`, `Dot size`.
+     *
+     * Required, and deliberately so. A row with no name is a row whose only
+     * identification is the help glyph beside it, which is how a panel ends up
+     * with a column of question marks standing in for its words — and it is the
+     * name that a screen reader is given, that the help hangs off, and that
+     * fills the panel's left column.
+     */
+    label: string;
+    /**
+     * What the control does, in a sentence. It hangs off the name, which is
+     * underlined with dots to say so — never off a glyph of its own. A control
+     * floating over a figure has no room to explain itself, and a reader who has
+     * to guess what it does picks nothing at all, so every control should carry
+     * one.
+     * @default undefined — the name is written plainly
+     */
+    help?: HelpContent;
+    /**
+     * Whether the name is written or only announced. Hide it for a control whose
+     * own words already say what it is — a button that reads `Zoom to selection`
+     * — and never for one whose choices are bare numbers. It is honoured on a
+     * bar alone: in a panel the name is the left column, and an empty cell there
+     * is the ragged panel the grid exists to prevent.
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Whether the control is greyed and unreachable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Value of the `data-testid` attribute of the control.
+     * @default undefined
+     */
+    testId?: string;
+}
+/** What {@link OverlayRow} lays out. Exported so a caller's own control gets the same name, help and geometry as the built-in ones. */
+export interface OverlayRowProps extends OverlayControlProps {
+    /** The control itself. */
+    children: ReactNode;
+    /**
+     * Whether the name sits in front of the control or above it. Above once the
+     * names are long enough to push the card past a third of the figure. Only
+     * consulted on a bar; a panel row is always two columns.
+     * @default 'inline'
+     */
+    labelPlacement?: 'inline' | 'above';
+    /**
+     * Whether the row is a line on a bar or a cell in a panel's grid.
+     * @default `'grid'` inside an {@link OverlayPanel}, `'row'` anywhere else
+     */
+    layout?: OverlayRowLayout;
+}
+/**
+ * A name, its help, and the control they belong to.
+ *
+ * Every control of this domain is one of these, which is the whole reason a
+ * picker and a stepper standing side by side in a card line up on the same
+ * baseline and answer to the same measurements. A caller writing a control
+ * this package does not have reaches for it too, rather than approximating the
+ * geometry and landing half a pixel out.
+ *
+ * The help hangs off the name rather than off a question mark beside it. Five
+ * controls each with a glyph put five question marks in a column down the left
+ * edge of a panel, and the eye reads that column before it reads a single
+ * word; a dotted underline says the same thing and costs nothing. The name is
+ * reachable by tab for the same reason the glyph was, so the explanation is
+ * not reserved to whoever is holding a pointer, and it carries the class
+ * `help-name` — the counterpart of the glyph's `help-icon` — so that whatever
+ * used to look for the glyph has something to look for. In a panel the name
+ * also names its row out loud, since a name a whole column away from its
+ * control is not associated with it by proximity alone.
+ * @param props - See {@link OverlayRowProps}.
+ * @returns The row.
+ */
+export declare function OverlayRow(props: OverlayRowProps): ReactElement;
+//# sourceMappingURL=OverlayRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayRow.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAc9D,qFAAqF;AACrF,MAAM,WAAW,aAAa,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAC3D,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,mDAAmD;AACnD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,CAAC;AAE9C,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC;;;;;;;;;OASG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,uIAAuI;AACvI,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAuE/D"}

package/lib/overlay/ui/OverlayRow.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { HelpTooltip } from "../../help/ui/HelpTooltip.js";
+import { useOverlayPanelShape } from "./overlayPanelContext.js";
+import { OVERLAY_GRID_CELL_STYLE, overlayGridRowStyle, overlayNameColumnWidth, overlayNameStyle, overlayRowStyle, overlayStackedRowStyle, } from "./overlayRowStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * A name, its help, and the control they belong to.
+ *
+ * Every control of this domain is one of these, which is the whole reason a
+ * picker and a stepper standing side by side in a card line up on the same
+ * baseline and answer to the same measurements. A caller writing a control
+ * this package does not have reaches for it too, rather than approximating the
+ * geometry and landing half a pixel out.
+ *
+ * The help hangs off the name rather than off a question mark beside it. Five
+ * controls each with a glyph put five question marks in a column down the left
+ * edge of a panel, and the eye reads that column before it reads a single
+ * word; a dotted underline says the same thing and costs nothing. The name is
+ * reachable by tab for the same reason the glyph was, so the explanation is
+ * not reserved to whoever is holding a pointer, and it carries the class
+ * `help-name` — the counterpart of the glyph's `help-icon` — so that whatever
+ * used to look for the glyph has something to look for. In a panel the name
+ * also names its row out loud, since a name a whole column away from its
+ * control is not associated with it by proximity alone.
+ * @param props - See {@link OverlayRowProps}.
+ * @returns The row.
+ */
+export function OverlayRow(props) {
+    const { children, label, help, hideLabel = false, disabled = false, testId, labelPlacement = 'inline', } = props;
+    const { metrics } = useOverlaySurface();
+    const panel = useOverlayPanelShape();
+    const layout = props.layout ?? (panel === undefined ? 'row' : 'grid');
+    const nameId = useId();
+    const written = layout === 'grid' || !hideLabel;
+    const name = written ? (_jsx("span", { id: layout === 'grid' ? nameId : undefined, className: help === undefined ? undefined : 'help-name', tabIndex: help === undefined ? undefined : 0, style: overlayNameStyle(metrics, { help: help !== undefined, disabled }), children: label })) : null;
+    const explained = help === undefined ? (name) : (_jsx(HelpTooltip, { content: help, children: name }));
+    // A control whose name is not written keeps the help on its own words, so
+    // that dropping the name never quietly drops the explanation with it.
+    const control = help === undefined || written ? (children) : (_jsx(HelpTooltip, { content: help, children: children }));
+    if (layout === 'grid') {
+        const width = panel?.nameWidth ?? overlayNameColumnWidth(metrics);
+        return (_jsxs("div", { role: "group", "aria-labelledby": nameId, "data-testid": testId, style: overlayGridRowStyle(metrics, width), children: [explained, _jsx("span", { style: OVERLAY_GRID_CELL_STYLE, children: control })] }));
+    }
+    if (labelPlacement === 'above') {
+        return (_jsxs("div", { "data-testid": testId, style: overlayStackedRowStyle(metrics), children: [explained, control] }));
+    }
+    return (_jsxs("div", { "data-testid": testId, style: overlayRowStyle(metrics), children: [explained, control] }));
+}
+//# sourceMappingURL=OverlayRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayRow.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayRow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAG9B,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAC;AAE5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA2FxD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,cAAc,GAAG,QAAQ,GAC1B,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACtE,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,MAAM,OAAO,GAAG,MAAM,KAAK,MAAM,IAAI,CAAC,SAAS,CAAC;IAChD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CACrB,eACE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,SAAS,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EACvD,QAAQ,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAC5C,KAAK,EAAE,gBAAgB,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,KAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,YAEvE,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;IACT,MAAM,SAAS,GACb,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACnB,IAAI,CACL,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,OAAO,EAAE,IAAI,YAAG,IAAI,GAAe,CACjD,CAAC;IACJ,0EAA0E;IAC1E,sEAAsE;IACtE,MAAM,OAAO,GACX,IAAI,KAAK,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,CAC9B,QAAQ,CACT,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAe,CACrD,CAAC;IAEJ,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,KAAK,EAAE,SAAS,IAAI,sBAAsB,CAAC,OAAO,CAAC,CAAC;QAClE,OAAO,CACL,eACE,IAAI,EAAC,OAAO,qBACK,MAAM,iBACV,MAAM,EACnB,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,aAEzC,SAAS,EACV,eAAM,KAAK,EAAE,uBAAuB,YAAG,OAAO,GAAQ,IAClD,CACP,CAAC;IACJ,CAAC;IAED,IAAI,cAAc,KAAK,OAAO,EAAE,CAAC;QAC/B,OAAO,CACL,8BAAkB,MAAM,EAAE,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,aAC7D,SAAS,EACT,OAAO,IACJ,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAkB,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,aACtD,SAAS,EACT,OAAO,IACJ,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import type { OverlayControlProps, OverlayOption } from './OverlayRow.tsx';
+/** What {@link OverlaySegmented} needs. Use it for two to four choices. */
+export interface OverlaySegmentedProps<TValue extends string = string> extends OverlayControlProps {
+    /** The current choice. */
+    value: TValue;
+    /** What may be chosen, in the order offered. */
+    options: ReadonlyArray<OverlayOption<TValue>>;
+    /** Called with the new choice. */
+    onChange: (value: TValue) => void;
+}
+/**
+ * The row of segments a card uses while every choice still fits on one line.
+ *
+ * Its choices are readable without being opened, which is worth the width up
+ * to about four of them: a reader who can see that a second view exists asks
+ * for it, and a reader looking at a closed picker does not.
+ *
+ * It is the same sunken track a figure's tab strip is made of, one size down,
+ * so a reader meets one device in a viewer rather than two that happen to both
+ * be rows of choices. The segments carry the caption's own name, because a
+ * bare row of buttons over a figure is announced as nothing at all to a reader
+ * arriving by keyboard.
+ * @param props - See {@link OverlaySegmentedProps}.
+ * @returns The caption, its help, and the segments.
+ */
+export declare function OverlaySegmented<TValue extends string = string>(props: OverlaySegmentedProps<TValue>): ReactElement;
+//# sourceMappingURL=OverlaySegmented.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySegmented.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySegmented.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG3E,2EAA2E;AAC3E,MAAM,WAAW,qBAAqB,CACpC,MAAM,SAAS,MAAM,GAAG,MAAM,CAC9B,SAAQ,mBAAmB;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAC7D,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,GACnC,YAAY,CA+Bd"}

package/lib/overlay/ui/OverlaySegmented.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayPills } from "./OverlayPills.js";
+import { OverlayRow } from "./OverlayRow.js";
+/**
+ * The row of segments a card uses while every choice still fits on one line.
+ *
+ * Its choices are readable without being opened, which is worth the width up
+ * to about four of them: a reader who can see that a second view exists asks
+ * for it, and a reader looking at a closed picker does not.
+ *
+ * It is the same sunken track a figure's tab strip is made of, one size down,
+ * so a reader meets one device in a viewer rather than two that happen to both
+ * be rows of choices. The segments carry the caption's own name, because a
+ * bare row of buttons over a figure is announced as nothing at all to a reader
+ * arriving by keyboard.
+ * @param props - See {@link OverlaySegmentedProps}.
+ * @returns The caption, its help, and the segments.
+ */
+export function OverlaySegmented(props) {
+    const { value, options, onChange, label, help, hideLabel = false, disabled = false, testId, } = props;
+    return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx(OverlayPills, { role: "radiogroup", size: "setting", label: label, value: value, options: options, disabled: disabled, testId: testId, onChange: onChange }) }));
+}
+//# sourceMappingURL=OverlaySegmented.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySegmented.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySegmented.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAc9C;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAoC;IAEpC,MAAM,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,KAAC,YAAY,IACX,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,GACS,CACd,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,35 @@
+import type { ReactElement } from 'react';
+import type { OverlayControlProps, OverlayOption } from './OverlayRow.tsx';
+/** How a picker is drawn. */
+export type OverlaySelectAppearance = 'field' | 'quiet';
+/** What {@link OverlaySelect} needs. Use it past four choices. */
+export interface OverlaySelectProps<TValue extends string = string> extends OverlayControlProps {
+    /** The current choice. */
+    value: TValue;
+    /** What may be chosen, in the order offered. */
+    options: ReadonlyArray<OverlayOption<TValue>>;
+    /** Called with the new choice. */
+    onChange: (value: TValue) => void;
+    /**
+     * Whether the picker is drawn as a form field or as a quiet button showing
+     * only its value.
+     *
+     * A settings panel gets `quiet` on its own, because a bordered field beside
+     * borderless switches and steppers is the one shape in the panel that draws
+     * the eye, and it draws it to whichever setting happens to be a list.
+     * @default 'quiet' inside an OverlayPanel, 'field' anywhere else
+     */
+    appearance?: OverlaySelectAppearance;
+}
+/**
+ * The picker a card reaches for once the choices stop fitting side by side.
+ *
+ * The options are written out rather than handed to Blueprint's shorthand,
+ * because a choice that does not apply has to keep its place in the list and
+ * say why the pointer cannot take it — and the shorthand has nowhere to put
+ * that sentence.
+ * @param props - See {@link OverlaySelectProps}.
+ * @returns The caption, its help, and the picker.
+ */
+export declare function OverlaySelect<TValue extends string = string>(props: OverlaySelectProps<TValue>): ReactElement;
+//# sourceMappingURL=OverlaySelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySelect.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAM3E,6BAA6B;AAC7B,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,OAAO,CAAC;AAExD,kEAAkE;AAClE,MAAM,WAAW,kBAAkB,CACjC,MAAM,SAAS,MAAM,GAAG,MAAM,CAC9B,SAAQ,mBAAmB;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;CACtC;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAC1D,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAChC,YAAY,CAmEd"}

package/lib/overlay/ui/OverlaySelect.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HTMLSelect } from '@blueprintjs/core';
+import { OverlayRow } from "./OverlayRow.js";
+import { OverlayValueMenu } from "./OverlayValueMenu.js";
+import { useOverlayPanelShape } from "./overlayPanelContext.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * The picker a card reaches for once the choices stop fitting side by side.
+ *
+ * The options are written out rather than handed to Blueprint's shorthand,
+ * because a choice that does not apply has to keep its place in the list and
+ * say why the pointer cannot take it — and the shorthand has nowhere to put
+ * that sentence.
+ * @param props - See {@link OverlaySelectProps}.
+ * @returns The caption, its help, and the picker.
+ */
+export function OverlaySelect(props) {
+    const { value, options, onChange, label, help, hideLabel = false, disabled = false, testId, } = props;
+    const { metrics } = useOverlaySurface();
+    const panel = useOverlayPanelShape();
+    const { appearance = panel === undefined ? 'field' : 'quiet' } = props;
+    if (appearance === 'quiet') {
+        // The menu goes INSIDE the row rather than replacing it: the row is what
+        // holds the name column and hangs the help off it, and a panel whose rows
+        // do not all have that column is not a grid.
+        return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx(OverlayValueMenu, { label: label, value: value, options: options, onChange: onChange, showKey: false, disabled: disabled, testId: testId }) }));
+    }
+    return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx(HTMLSelect, { value: value, disabled: disabled, large: metrics.blueprintSize === 'large', "aria-label": label, "data-testid": testId, onChange: (event) => onChange(event.currentTarget.value), children: options.map((option) => (_jsx("option", { value: option.value, title: option.title, disabled: option.disabled, children: option.label }, option.value))) }) }));
+}
+//# sourceMappingURL=OverlaySelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySelect.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA2BxD;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAiC;IAEjC,MAAM,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,GACP,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,EAAE,UAAU,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvE,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;QAC3B,yEAAyE;QACzE,0EAA0E;QAC1E,6CAA6C;QAC7C,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,GACS,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,OAAO,CAAC,aAAa,KAAK,OAAO,gBAC5B,KAAK,iBACJ,MAAM,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAe,CAAC,YAEjE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAEE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,YAExB,MAAM,CAAC,KAAK,IALR,MAAM,CAAC,KAAK,CAMV,CACV,CAAC,GACS,GACF,CACd,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+/** What {@link OverlaySwatchIcon} draws. */
+export interface OverlaySwatchIconProps {
+    /**
+     * The colours the figure is drawn in, in the order it draws them. Hand it
+     * the very colours on the chart: the whole point of this glyph is that a
+     * reader recognises the plot in it without being taught anything.
+     */
+    colors: readonly string[];
+}
+/**
+ * The colours of a figure, as the glyph of the control that changes them.
+ *
+ * Every other icon on a bar has to be learned before it means anything. This
+ * one does not: a reader who has just looked at four groups of dots knows what
+ * a row of those four colours opens, which is why the control that picks what
+ * the figure is coloured by wears its palette rather than a paint-pot.
+ *
+ * Past four colours it becomes three and a count. Eight dots inside a
+ * twenty-four pixel button is a smear, and a smear says less about the figure
+ * than three honest colours and the news that there are more.
+ * @param props - See {@link OverlaySwatchIconProps}.
+ * @returns The row of dots.
+ */
+export declare function OverlaySwatchIcon(props: OverlaySwatchIconProps): ReactElement;
+//# sourceMappingURL=OverlaySwatchIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySwatchIcon.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySwatchIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAMzD,4CAA4C;AAC5C,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA8B7E"}