react-cheminfo 0.9.0 → 0.11.0

package/lib/overlay/ui/OverlayValueButton.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@blueprintjs/core';
+import { useState } from 'react';
+import { OverlaySwatchIcon } from "./OverlaySwatchIcon.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+import { overlayCaretStyle, overlayValueButtonStyle, overlayValueKeyStyle, overlayValueTextStyle, } from "./overlayValueStyles.js";
+/**
+ * A setting written as its own value, with a caret saying it can be changed.
+ *
+ * It replaces the two idioms a bar used to hold for the same job — a caption
+ * beside an outlined segmented control, and a caption beside a native select —
+ * with one that costs no box at all. The reader scans the bar and reads
+ * `Species` and `95%`, which is how the figure is drawn; the names of the two
+ * settings are one press away and in every announcement.
+ * @param props - See {@link OverlayValueButtonProps}.
+ * @returns The button.
+ */
+export function OverlayValueButton(props) {
+    const { label, value, keyWord = label, showKey = true, swatches } = props;
+    const { active = false, disabled = false, disabledReason } = props;
+    const { opensMenu = false, onClick, testId } = props;
+    const { metrics } = useOverlaySurface();
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const name = `${label} — ${value}`;
+    const told = disabled && disabledReason !== undefined ? disabledReason : name;
+    return (_jsxs("button", { type: "button", title: told, "aria-label": name, "aria-haspopup": opensMenu ? 'menu' : undefined, "aria-expanded": opensMenu ? active : undefined, disabled: disabled, "data-testid": testId, style: overlayValueButtonStyle(metrics, {
+            hovered,
+            focused,
+            active,
+            disabled,
+        }), onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: [swatches === undefined || swatches.length === 0 ? null : (_jsx(OverlaySwatchIcon, { colors: swatches })), showKey ? _jsx("span", { style: overlayValueKeyStyle(), children: keyWord }) : null, _jsx("span", { style: overlayValueTextStyle(), children: value }), _jsx("span", { "aria-hidden": "true", style: overlayCaretStyle(), children: _jsx(Icon, { icon: "caret-down", size: caretSize(metrics.fontSize) }) })] }));
+}
+/**
+ * How big the caret is drawn.
+ *
+ * A little larger than the type it follows, because Blueprint's caret is a
+ * small triangle inside its box and one drawn at the font size reads as a
+ * speck rather than as an invitation to press.
+ * @param fontSize - The size of the words it follows.
+ * @returns The caret's size in pixels.
+ */
+function caretSize(fontSize) {
+    return fontSize + 2;
+}
+//# sourceMappingURL=OverlayValueButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayValueButton.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAqEjC;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAA8B;IAE9B,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACrD,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,IAAI,GAAG,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;IACnC,MAAM,IAAI,GAAG,QAAQ,IAAI,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9E,OAAO,CACL,kBACE,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,EAC7C,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,KAAK,EAAE,uBAAuB,CAAC,OAAO,EAAE;YACtC,OAAO;YACP,OAAO;YACP,MAAM;YACN,QAAQ;SACT,CAAC,EACF,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EACtC,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,aAE9B,QAAQ,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxD,KAAC,iBAAiB,IAAC,MAAM,EAAE,QAAQ,GAAI,CACxC,EACA,OAAO,CAAC,CAAC,CAAC,eAAM,KAAK,EAAE,oBAAoB,EAAE,YAAG,OAAO,GAAQ,CAAC,CAAC,CAAC,IAAI,EACvE,eAAM,KAAK,EAAE,qBAAqB,EAAE,YAAG,KAAK,GAAQ,EACpD,8BAAkB,MAAM,EAAC,KAAK,EAAE,iBAAiB,EAAE,YACjD,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAI,GACxD,IACA,CACV,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,SAAS,CAAC,QAAgB;IACjC,OAAO,QAAQ,GAAG,CAAC,CAAC;AACtB,CAAC"}

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

@@ -0,0 +1,68 @@
+import type { PopoverNextPlacement } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import type { OverlayOption } from './OverlayRow.tsx';
+/** What {@link OverlayValueMenu} needs. */
+export interface OverlayValueMenuProps<TValue extends string = string> {
+    /**
+     * What the setting is called, in full: `Colour by`, `Group outlines`. It
+     * names the button for the pointer and the screen reader, and it is written
+     * over the menu as its heading — so a reader who opened it on a guess is
+     * told what they have opened before they choose.
+     */
+    label: string;
+    /** The current choice, whose own label is what the button writes. */
+    value: TValue;
+    /** What may be chosen, in the order offered. */
+    options: ReadonlyArray<OverlayOption<TValue>>;
+    /** Called with the new choice. */
+    onChange: (value: TValue) => void;
+    /**
+     * The one word written in front of the value on a roomy bar.
+     * @default the label
+     */
+    keyWord?: string;
+    /**
+     * Whether that key word is written.
+     * @default true
+     */
+    showKey?: boolean;
+    /**
+     * The figure's own colours, drawn as a row of dots in front of the words.
+     * @default undefined — no dots are drawn
+     */
+    swatches?: readonly string[];
+    /**
+     * Whether the setting cannot be reached at all.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Why it cannot be reached, which the pointer is told in place of the name.
+     * @default undefined — the pointer is still told the name and the value
+     */
+    disabledReason?: string;
+    /**
+     * Which way the menu opens. Away from the nearest edge of the figure, so the
+     * choices are not the thing that pushes the reader off the picture.
+     * @default 'bottom-end'
+     */
+    placement?: PopoverNextPlacement;
+    /**
+     * Value of the `data-testid` attribute of the button.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * A setting written as its value, whose choices are a menu behind it.
+ *
+ * It is what a picker becomes on a bar with no room for captions: the same
+ * choices, in the same order, with the one in force ticked. It takes the very
+ * options the picker takes, so a bar swaps one for the other without reshaping
+ * anything it holds — and unlike the picker it answers the reader's question
+ * before it is opened, because the answer is what is written on it.
+ * @param props - See {@link OverlayValueMenuProps}.
+ * @returns The button and its menu.
+ */
+export declare function OverlayValueMenu<TValue extends string = string>(props: OverlayValueMenuProps<TValue>): ReactElement;
+//# sourceMappingURL=OverlayValueMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayValueMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAItD,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IACnE;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,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;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAC7D,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,GACnC,YAAY,CAuDd"}

package/lib/overlay/ui/OverlayValueMenu.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuDivider, MenuItem, PopoverNext } from '@blueprintjs/core';
+import { useId, useState } from 'react';
+import { OverlayValueButton } from "./OverlayValueButton.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * A setting written as its value, whose choices are a menu behind it.
+ *
+ * It is what a picker becomes on a bar with no room for captions: the same
+ * choices, in the same order, with the one in force ticked. It takes the very
+ * options the picker takes, so a bar swaps one for the other without reshaping
+ * anything it holds — and unlike the picker it answers the reader's question
+ * before it is opened, because the answer is what is written on it.
+ * @param props - See {@link OverlayValueMenuProps}.
+ * @returns The button and its menu.
+ */
+export function OverlayValueMenu(props) {
+    const { label, value, options, onChange, keyWord, showKey } = props;
+    const { swatches, disabled = false, disabledReason } = props;
+    const { placement = 'bottom-end', testId } = props;
+    const { metrics } = useOverlaySurface();
+    const headingId = useId();
+    const [open, setOpen] = useState(false);
+    let written = value;
+    for (const option of options) {
+        if (option.value === value)
+            written = option.label;
+    }
+    return (_jsx(PopoverNext, { isOpen: open, disabled: disabled, placement: placement, onInteraction: (next) => setOpen(next), content: _jsxs(Menu, { role: "listbox", "aria-labelledby": headingId, size: metrics.blueprintSize, style: OVERLAY_VALUE_MENU_STYLE, children: [_jsx(MenuDivider, { title: label, titleId: headingId }), options.map((option) => (_jsx(MenuItem, { roleStructure: "listoption", selected: option.value === value, text: option.label, htmlTitle: option.title, disabled: option.disabled, onClick: () => onChange(option.value) }, option.value)))] }), children: _jsx(OverlayValueButton, { label: label, value: written, keyWord: keyWord, showKey: showKey, swatches: swatches, active: open, disabled: disabled, disabledReason: disabledReason, testId: testId, opensMenu: true }) }));
+}
+/**
+ * The menu the value opens.
+ *
+ * It has a floor width rather than hugging its longest choice, because a menu
+ * of three short words opens as a sliver the reader has to aim at.
+ */
+const OVERLAY_VALUE_MENU_STYLE = {
+    minWidth: 168,
+};
+//# sourceMappingURL=OverlayValueMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayValueMenu.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAuDxD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAoC;IAEpC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,IAAI,OAAO,GAAW,KAAK,CAAC;IAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK;YAAE,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;IACrD,CAAC;IAED,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACtC,OAAO,EACL,MAAC,IAAI,IACH,IAAI,EAAC,SAAS,qBACG,SAAS,EAC1B,IAAI,EAAE,OAAO,CAAC,aAAa,EAC3B,KAAK,EAAE,wBAAwB,aAE/B,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,GAAI,EAChD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,QAAQ,IAEP,aAAa,EAAC,YAAY,EAC1B,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,KAAK,EAChC,IAAI,EAAE,MAAM,CAAC,KAAK,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IANhC,MAAM,CAAC,KAAK,CAOjB,CACH,CAAC,IACG,YAGT,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,SACT,GACU,CACf,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,wBAAwB,GAAkB;IAC9C,QAAQ,EAAE,GAAG;CACd,CAAC"}

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

@@ -0,0 +1,55 @@
+/**
+ * The chrome that floats over a figure: a small card of controls, the plain
+ * sentence under it, the key naming what its colours mean, and the card that
+ * follows the pointer.
+ *
+ * It is a domain of its own rather than part of any chart, because a scatter,
+ * a spectrum and a map all want the same card in the same corner, and because
+ * the rules for one are the reason two figures in this package look like they
+ * belong to the same tool.
+ */
+export type { OverlayActionProps } from './OverlayAction.tsx';
+export { OverlayAction } from './OverlayAction.tsx';
+export type { OverlayBarProps } from './OverlayBar.tsx';
+export { OverlayBar } from './OverlayBar.tsx';
+export type { OverlayCaptionProps } from './OverlayCaption.tsx';
+export { OverlayCaption } from './OverlayCaption.tsx';
+export type { OverlayChipProps, OverlayChipSetting } from './OverlayChip.tsx';
+export { OverlayChip } from './OverlayChip.tsx';
+export { OverlayDivider } from './OverlayDivider.tsx';
+export type { OverlayGroupProps } from './OverlayGroup.tsx';
+export { OverlayGroup } from './OverlayGroup.tsx';
+export type { OverlayInfoProps } from './OverlayInfo.tsx';
+export { OverlayInfo } from './OverlayInfo.tsx';
+export type { OverlayLayerProps } from './OverlayLayer.tsx';
+export { OverlayLayer } from './OverlayLayer.tsx';
+export type { OverlayLegendEntry, OverlayLegendProps, } from './OverlayLegend.tsx';
+export { OverlayLegend } from './OverlayLegend.tsx';
+export type { OverlayLegendMarkProps } from './OverlayLegendMark.tsx';
+export { OverlayLegendMark } from './OverlayLegendMark.tsx';
+export type { OverlayNumberProps } from './OverlayNumber.tsx';
+export { OverlayNumber } from './OverlayNumber.tsx';
+export type { OverlayPanelProps } from './OverlayPanel.tsx';
+export { OverlayPanel } from './OverlayPanel.tsx';
+export type { OverlayPillOption, OverlayPillsProps } from './OverlayPills.tsx';
+export { OverlayPills } from './OverlayPills.tsx';
+export type { OverlaySegmentedSize } from './overlayPillStyles.ts';
+export type { OverlayReadoutProps, OverlayReadoutRow, } from './OverlayReadout.tsx';
+export { OverlayReadout } from './OverlayReadout.tsx';
+export type { OverlayControlProps, OverlayOption, OverlayRowLayout, OverlayRowProps, } from './OverlayRow.tsx';
+export { OverlayRow } from './OverlayRow.tsx';
+export type { OverlaySegmentedProps } from './OverlaySegmented.tsx';
+export { OverlaySegmented } from './OverlaySegmented.tsx';
+export type { OverlaySelectAppearance, OverlaySelectProps, } from './OverlaySelect.tsx';
+export { OverlaySelect } from './OverlaySelect.tsx';
+export type { OverlaySwatchIconProps } from './OverlaySwatchIcon.tsx';
+export { OverlaySwatchIcon } from './OverlaySwatchIcon.tsx';
+export type { OverlayToggleAppearance, OverlayToggleProps, } from './OverlayToggle.tsx';
+export { OverlayToggle } from './OverlayToggle.tsx';
+export type { OverlayValueButtonProps } from './OverlayValueButton.tsx';
+export { OverlayValueButton } from './OverlayValueButton.tsx';
+export type { OverlayValueMenuProps } from './OverlayValueMenu.tsx';
+export { OverlayValueMenu } from './OverlayValueMenu.tsx';
+export type { OverlaySurface } from './overlaySurface.ts';
+export { useCoarsePointer, useOverlaySurface } from './overlaySurface.ts';
+//# sourceMappingURL=index.d.ts.map

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

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

package/lib/overlay/ui/index.js

@@ -0,0 +1,33 @@
+/**
+ * The chrome that floats over a figure: a small card of controls, the plain
+ * sentence under it, the key naming what its colours mean, and the card that
+ * follows the pointer.
+ *
+ * It is a domain of its own rather than part of any chart, because a scatter,
+ * a spectrum and a map all want the same card in the same corner, and because
+ * the rules for one are the reason two figures in this package look like they
+ * belong to the same tool.
+ */
+export { OverlayAction } from "./OverlayAction.js";
+export { OverlayBar } from "./OverlayBar.js";
+export { OverlayCaption } from "./OverlayCaption.js";
+export { OverlayChip } from "./OverlayChip.js";
+export { OverlayDivider } from "./OverlayDivider.js";
+export { OverlayGroup } from "./OverlayGroup.js";
+export { OverlayInfo } from "./OverlayInfo.js";
+export { OverlayLayer } from "./OverlayLayer.js";
+export { OverlayLegend } from "./OverlayLegend.js";
+export { OverlayLegendMark } from "./OverlayLegendMark.js";
+export { OverlayNumber } from "./OverlayNumber.js";
+export { OverlayPanel } from "./OverlayPanel.js";
+export { OverlayPills } from "./OverlayPills.js";
+export { OverlayReadout } from "./OverlayReadout.js";
+export { OverlayRow } from "./OverlayRow.js";
+export { OverlaySegmented } from "./OverlaySegmented.js";
+export { OverlaySelect } from "./OverlaySelect.js";
+export { OverlaySwatchIcon } from "./OverlaySwatchIcon.js";
+export { OverlayToggle } from "./OverlayToggle.js";
+export { OverlayValueButton } from "./OverlayValueButton.js";
+export { OverlayValueMenu } from "./OverlayValueMenu.js";
+export { useCoarsePointer, useOverlaySurface } from "./overlaySurface.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAKlD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAMlD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAOtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAK1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAK5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,85 @@
+/**
+ * Whether a bar of controls is folded, and what either shape of it is handed.
+ *
+ * A bar has two shapes that share almost everything and agree on nothing about
+ * how they sit — a card floating in a corner of the figure, and a strip
+ * spanning the width above it — so what they have in common is written here
+ * once and each of them is left free to lay itself out.
+ */
+import type { IconName } from '@blueprintjs/core';
+import type { ReactNode } from 'react';
+import type { OverlayPlacement } from '../core/overlayPlacement.ts';
+/** What both shapes of a bar are drawn from, with every default resolved. */
+export interface OverlayBarShapeProps {
+    /** The controls at the start of the row. */
+    children: ReactNode;
+    /**
+     * What sits at the far end of the row.
+     * @default undefined — the end holds only the glyphs
+     */
+    end?: ReactNode;
+    /**
+     * The glyph-sized tools that act on the figure rather than change it.
+     * @default undefined — the bar carries no tools
+     */
+    tools?: ReactNode;
+    /**
+     * The one control that never folds.
+     * @default undefined — the bar carries no glyph
+     */
+    info?: ReactNode;
+    /**
+     * What waits behind the button.
+     * @default undefined — nothing but whatever has folded away
+     */
+    more?: ReactNode;
+    /** Where the bar sits. */
+    placement: OverlayPlacement;
+    /** What the group of controls is called. */
+    label: string;
+    /** Glyph of the button that opens the rest. */
+    moreIcon: IconName;
+    /** Whether that button's panel is drawn with the card's own padding. */
+    morePadded: boolean;
+    /** Whether the bar has folded its controls away behind that button. */
+    folded: boolean;
+    /**
+     * Value of the `data-testid` attribute of the bar.
+     * @default undefined
+     */
+    testId?: string;
+}
+/** What decides whether a bar is folded. */
+export interface OverlayBarFoldOptions {
+    /** What the caller asked for, when it is holding the fold itself. */
+    collapsed: boolean | undefined;
+    /** Whether the bar was asked to start folded. */
+    startedFolded: boolean;
+    /** Width of the figure, in pixels; `0` before it has been measured. */
+    width: number;
+    /** The width under which the bar folds on its own. */
+    collapseBelow: number;
+}
+/**
+ * Whether the bar is folded.
+ *
+ * A caller holding `collapsed` is obeyed outright, so a bar driven from
+ * outside never argues with the figure's width; every other bar folds itself
+ * once the figure is too narrow, or because it was asked to start that way.
+ * @param options - See {@link OverlayBarFoldOptions}.
+ * @returns Whether it is folded.
+ */
+export declare function overlayBarFolded(options: OverlayBarFoldOptions): boolean;
+/**
+ * Tell the caller the bar folded itself.
+ *
+ * A caller holding `collapsed` already knows what it asked for; what it cannot
+ * see is the figure crossing the breakpoint under a bar left to decide, so
+ * that is the only thing reported. Whom to tell is read through a ref, so an
+ * inline arrow may be passed on every render without the report firing again
+ * for a fold that has not changed.
+ * @param folded - Whether the bar is folded now.
+ * @param onCollapsedChange - Who to tell, when there is anybody to tell.
+ */
+export declare function useFoldReport(folded: boolean, onCollapsedChange: ((collapsed: boolean) => void) | undefined): void;
+//# sourceMappingURL=overlayBarShape.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayBarShape.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayBarShape.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,WAAW,oBAAoB;IACnC,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,QAAQ,EAAE,QAAQ,CAAC;IACnB,wEAAwE;IACxE,UAAU,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,4CAA4C;AAC5C,MAAM,WAAW,qBAAqB;IACpC,qEAAqE;IACrE,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,iDAAiD;IACjD,aAAa,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAKxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,OAAO,EACf,iBAAiB,EAAE,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,GAC5D,IAAI,CAaN"}

package/lib/overlay/ui/overlayBarShape.js

@@ -0,0 +1,48 @@
+/**
+ * Whether a bar of controls is folded, and what either shape of it is handed.
+ *
+ * A bar has two shapes that share almost everything and agree on nothing about
+ * how they sit — a card floating in a corner of the figure, and a strip
+ * spanning the width above it — so what they have in common is written here
+ * once and each of them is left free to lay itself out.
+ */
+import { useEffect, useRef } from 'react';
+import { shouldCollapseOverlay } from "../core/overlayCollapse.js";
+/**
+ * Whether the bar is folded.
+ *
+ * A caller holding `collapsed` is obeyed outright, so a bar driven from
+ * outside never argues with the figure's width; every other bar folds itself
+ * once the figure is too narrow, or because it was asked to start that way.
+ * @param options - See {@link OverlayBarFoldOptions}.
+ * @returns Whether it is folded.
+ */
+export function overlayBarFolded(options) {
+    const { collapsed, startedFolded, width, collapseBelow } = options;
+    return (collapsed ?? (startedFolded || shouldCollapseOverlay(width, collapseBelow)));
+}
+/**
+ * Tell the caller the bar folded itself.
+ *
+ * A caller holding `collapsed` already knows what it asked for; what it cannot
+ * see is the figure crossing the breakpoint under a bar left to decide, so
+ * that is the only thing reported. Whom to tell is read through a ref, so an
+ * inline arrow may be passed on every render without the report firing again
+ * for a fold that has not changed.
+ * @param folded - Whether the bar is folded now.
+ * @param onCollapsedChange - Who to tell, when there is anybody to tell.
+ */
+export function useFoldReport(folded, onCollapsedChange) {
+    const tell = useRef(onCollapsedChange);
+    const told = useRef(folded);
+    useEffect(() => {
+        tell.current = onCollapsedChange;
+    });
+    useEffect(() => {
+        if (told.current === folded)
+            return;
+        told.current = folded;
+        tell.current?.(folded);
+    }, [folded]);
+}
+//# sourceMappingURL=overlayBarShape.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayBarShape.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayBarShape.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAwDnE;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAA8B;IAC7D,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC;IACnE,OAAO,CACL,SAAS,IAAI,CAAC,aAAa,IAAI,qBAAqB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAC5E,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,aAAa,CAC3B,MAAe,EACf,iBAA6D;IAE7D,MAAM,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO;QACpC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC"}

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

@@ -0,0 +1,82 @@
+/**
+ * The rules one control inside a floating card is drawn with.
+ *
+ * They are apart from the card's own rules because a control is the part a
+ * future chart will reuse without the card: a legend swatch, a glyph standing
+ * for one setting, a titled cluster in a settings panel. Every one of them
+ * takes the card's measurements, so a control looks the same wherever it is
+ * put.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/**
+ * The hairline between two clusters of controls.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The divider's rules.
+ */
+export declare function overlayDividerStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The square in front of a toggle's caption.
+ *
+ * This is the one rule here that draws a colour it was handed rather than a
+ * family token: given a series' own colour, a row of toggles becomes the
+ * figure's legend, and a swatch that did not match the mark on the chart would
+ * be worse than no swatch at all. The inset hairline is what keeps a pale
+ * series visible against the card.
+ * @param color - The colour the swatch stands for.
+ * @returns The swatch's rules.
+ */
+export declare function overlaySwatchStyle(color: string): CSSProperties;
+/**
+ * A cluster of controls that answer one question together.
+ *
+ * It never wraps inside itself, so a cluster moves to the next line of the
+ * card whole rather than breaking across two lines mid-thought.
+ * @param metrics - The measurements the card is drawn from.
+ * @param direction - Whether the controls sit side by side or stacked.
+ * @returns The cluster's rules.
+ */
+export declare function overlayGroupStyle(metrics: OverlayMetrics, direction: 'row' | 'column'): CSSProperties;
+/**
+ * The title over a cluster of controls.
+ *
+ * Small capitals rather than a heavier weight: the title has to read as a
+ * label *on* the cluster, and anything that looks like the captions inside it
+ * is taken for one more control.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The title's rules.
+ */
+export declare function overlayGroupTitleStyle(metrics: OverlayMetrics): CSSProperties;
+/** How an icon button stands. */
+export interface OverlayIconLook {
+    /**
+     * Whether the pointer is over it or the keyboard is on it.
+     * @default false
+     */
+    hovered?: boolean;
+    /**
+     * Whether the choices behind it are showing, or the thing it turns on is on.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether it cannot be pressed.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * A setting reduced to its glyph.
+ *
+ * It carries no outline and no ground until it is pointed at, because a bar of
+ * six settings each in its own box is six boxes competing with the figure
+ * underneath, and the reader is looking for a setting rather than for a
+ * button. What answers for the missing box is the ink: faint at rest, the
+ * caption's grey under the pointer, full strength while the choices are open,
+ * so the button tells the reader what it is doing without ever growing an edge.
+ * @param metrics - The measurements the card is drawn from.
+ * @param look - See {@link OverlayIconLook}.
+ * @returns The button's rules.
+ */
+export declare function overlayIconButtonStyle(metrics: OverlayMetrics, look: OverlayIconLook): CSSProperties;
+//# sourceMappingURL=overlayControlStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayControlStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayControlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAQ1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAS/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,KAAK,GAAG,QAAQ,GAC1B,aAAa,CAQf;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAY7E;AAED,iCAAiC;AACjC,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,eAAe,GACpB,aAAa,CAuBf"}

package/lib/overlay/ui/overlayControlStyles.js

@@ -0,0 +1,142 @@
+/**
+ * The rules one control inside a floating card is drawn with.
+ *
+ * They are apart from the card's own rules because a control is the part a
+ * future chart will reuse without the card: a legend swatch, a glyph standing
+ * for one setting, a titled cluster in a settings panel. Every one of them
+ * takes the card's measurements, so a control looks the same wherever it is
+ * put.
+ */
+/**
+ * The hairline between two clusters of controls.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The divider's rules.
+ */
+export function overlayDividerStyle(metrics) {
+    return {
+        width: 1,
+        alignSelf: 'stretch',
+        minHeight: metrics.controlHeight - 8,
+        background: 'var(--border)',
+        margin: `0 ${Math.max(2, metrics.gap - 4)}px`,
+    };
+}
+/**
+ * The square in front of a toggle's caption.
+ *
+ * This is the one rule here that draws a colour it was handed rather than a
+ * family token: given a series' own colour, a row of toggles becomes the
+ * figure's legend, and a swatch that did not match the mark on the chart would
+ * be worse than no swatch at all. The inset hairline is what keeps a pale
+ * series visible against the card.
+ * @param color - The colour the swatch stands for.
+ * @returns The swatch's rules.
+ */
+export function overlaySwatchStyle(color) {
+    return {
+        display: 'inline-block',
+        width: 10,
+        height: 10,
+        borderRadius: 2,
+        background: color,
+        boxShadow: 'inset 0 0 0 1px var(--border)',
+    };
+}
+/**
+ * A cluster of controls that answer one question together.
+ *
+ * It never wraps inside itself, so a cluster moves to the next line of the
+ * card whole rather than breaking across two lines mid-thought.
+ * @param metrics - The measurements the card is drawn from.
+ * @param direction - Whether the controls sit side by side or stacked.
+ * @returns The cluster's rules.
+ */
+export function overlayGroupStyle(metrics, direction) {
+    return {
+        display: 'inline-flex',
+        flexDirection: direction,
+        flexWrap: 'nowrap',
+        alignItems: direction === 'row' ? 'center' : 'flex-start',
+        gap: metrics.gap,
+    };
+}
+/**
+ * The title over a cluster of controls.
+ *
+ * Small capitals rather than a heavier weight: the title has to read as a
+ * label *on* the cluster, and anything that looks like the captions inside it
+ * is taken for one more control.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The title's rules.
+ */
+export function overlayGroupTitleStyle(metrics) {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        color: 'var(--text-faint)',
+        fontSize: Math.max(9, metrics.labelSize - 2),
+        fontWeight: 600,
+        letterSpacing: '0.06em',
+        textTransform: 'uppercase',
+        whiteSpace: 'nowrap',
+    };
+}
+/**
+ * A setting reduced to its glyph.
+ *
+ * It carries no outline and no ground until it is pointed at, because a bar of
+ * six settings each in its own box is six boxes competing with the figure
+ * underneath, and the reader is looking for a setting rather than for a
+ * button. What answers for the missing box is the ink: faint at rest, the
+ * caption's grey under the pointer, full strength while the choices are open,
+ * so the button tells the reader what it is doing without ever growing an edge.
+ * @param metrics - The measurements the card is drawn from.
+ * @param look - See {@link OverlayIconLook}.
+ * @returns The button's rules.
+ */
+export function overlayIconButtonStyle(metrics, look) {
+    const { hovered = false, active = false, disabled = false } = look;
+    const lit = !disabled && (hovered || active);
+    return {
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+        minWidth: metrics.buttonSize,
+        height: metrics.buttonSize,
+        padding: `0 ${OVERLAY_ICON_PADDING}px`,
+        border: 'none',
+        borderRadius: metrics.controlRadius + 1,
+        background: lit ? 'var(--surface-sunken)' : 'transparent',
+        color: iconInk(active && !disabled, lit),
+        font: 'inherit',
+        fontSize: metrics.fontSize,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+    };
+}
+/**
+ * The room each side of a glyph.
+ *
+ * Two pixels, which is what lets a palette of four dots sit in a button that
+ * is otherwise square: the button keeps its width as a floor rather than as a
+ * size, so the one control whose glyph is wider than it is tall grows instead
+ * of cropping the dots that are the whole point of it.
+ */
+const OVERLAY_ICON_PADDING = 2;
+/**
+ * What an icon button is drawn in.
+ * @param active - Whether its choices are showing.
+ * @param lit - Whether it is pointed at or active.
+ * @returns The ink.
+ */
+function iconInk(active, lit) {
+    if (active)
+        return 'var(--text)';
+    return lit ? 'var(--text-muted)' : 'var(--text-faint)';
+}
+//# sourceMappingURL=overlayControlStyles.js.map