react-cheminfo 0.9.0 → 0.10.0

package/lib/overlay/ui/OverlayChip.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, PopoverNext } from '@blueprintjs/core';
+import { Fragment, useId, useState } from 'react';
+import { OverlaySwatchIcon } from "./OverlaySwatchIcon.js";
+import { overlayGroupTitleStyle } from "./overlayControlStyles.js";
+import { overlayPanelStyle } from "./overlayStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+import { overlayCaretStyle, overlayChipSeparatorStyle, overlayChipStyle, overlayValueTextStyle, } from "./overlayValueStyles.js";
+/**
+ * Several settings gathered into one rounded chip that still reads them out.
+ *
+ * This is what a narrow bar folds its settings into, and the whole argument
+ * for it is that it is not a cog. A cog says only that there are settings; a
+ * reader looking at a scatter of coloured dots on a phone wants to know what
+ * the colours mean and how wide the outlines are drawn, and `Species · 95%`
+ * answers both without being opened. What the fold actually buys is one
+ * button's padding and one caret per setting swallowed — which is why the
+ * words survive it and only the boxes around them go.
+ * @param props - See {@link OverlayChipProps}.
+ * @returns The chip and its panel.
+ */
+export function OverlayChip(props) {
+    const { label, settings, children, disabled = false } = props;
+    const { placement = 'bottom-end', testId } = props;
+    const { metrics } = useOverlaySurface();
+    const headingId = useId();
+    const [open, setOpen] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const swatches = leadingSwatches(settings);
+    const name = announce(settings);
+    return (_jsx(PopoverNext, { isOpen: open, disabled: disabled, placement: placement, onInteraction: (next) => setOpen(next), content: _jsxs("div", { role: "group", "aria-labelledby": headingId, style: overlayPanelStyle(metrics), children: [_jsx("span", { id: headingId, style: overlayGroupTitleStyle(metrics), children: label }), children] }), children: _jsxs("button", { type: "button", title: name, "aria-label": name, "aria-haspopup": "menu", "aria-expanded": open, disabled: disabled, "data-testid": testId, style: overlayChipStyle(metrics, {
+                hovered,
+                focused,
+                active: open,
+                disabled,
+            }), onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: [swatches === undefined ? null : (_jsx(OverlaySwatchIcon, { colors: swatches })), settings.map((setting, index) => (_jsxs(Fragment, { children: [index === 0 ? null : (_jsx("span", { "aria-hidden": "true", style: overlayChipSeparatorStyle(metrics) })), _jsx("span", { style: overlayValueTextStyle(), children: setting.value })] }, setting.label))), _jsx("span", { "aria-hidden": "true", style: overlayCaretStyle(), children: _jsx(Icon, { icon: "caret-down", size: metrics.fontSize + 2 }) })] }) }));
+}
+/**
+ * What the chip is called, which is every setting spelled out in full.
+ *
+ * The chip writes bare values, so a reader who cannot see it would otherwise
+ * be told `Species · 95%` and left to guess which question each answers.
+ * @param settings - The settings it reads out.
+ * @returns The name.
+ */
+function announce(settings) {
+    let name = '';
+    for (const setting of settings) {
+        if (name !== '')
+            name += ', ';
+        name += `${setting.label} — ${setting.value}`;
+    }
+    return name;
+}
+/**
+ * The colours drawn at the head of the chip.
+ *
+ * The first setting that has any, and only that one: two rows of dots inside
+ * one chip read as one palette of eight colours, which is the one thing this
+ * glyph exists not to say.
+ * @param settings - The settings it reads out.
+ * @returns The colours, or nothing.
+ */
+function leadingSwatches(settings) {
+    for (const setting of settings) {
+        const { swatches } = setting;
+        if (swatches !== undefined && swatches.length > 0)
+            return swatches;
+    }
+    return undefined;
+}
+//# sourceMappingURL=OverlayChip.js.map

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

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

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

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+/**
+ * A hairline between two clusters of controls.
+ *
+ * It is a real separator rather than a decorative line, so a reader moving
+ * through the card with a screen reader is told where one group of controls
+ * ends — which is the whole reason the line is there for everyone else.
+ * @returns The rule.
+ */
+export declare function OverlayDivider(): ReactElement;
+//# sourceMappingURL=OverlayDivider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayDivider.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C;;;;;;;GAOG;AACH,wBAAgB,cAAc,IAAI,YAAY,CAU7C"}

package/lib/overlay/ui/OverlayDivider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { overlayDividerStyle } from "./overlayControlStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * A hairline between two clusters of controls.
+ *
+ * It is a real separator rather than a decorative line, so a reader moving
+ * through the card with a screen reader is told where one group of controls
+ * ends — which is the whole reason the line is there for everyone else.
+ * @returns The rule.
+ */
+export function OverlayDivider() {
+    const { metrics } = useOverlaySurface();
+    return (_jsx("span", { role: "separator", "aria-orientation": "vertical", style: overlayDividerStyle(metrics) }));
+}
+//# sourceMappingURL=OverlayDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayDivider.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayDivider.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAExC,OAAO,CACL,eACE,IAAI,EAAC,WAAW,sBACC,UAAU,EAC3B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,GACnC,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,53 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+/** What {@link OverlayGroup} needs. */
+export interface OverlayGroupProps {
+    /** The controls it holds. */
+    children: ReactNode;
+    /**
+     * What the cluster is about, written over it in small capitals. In a panel
+     * this is the section heading, and it is worth reaching for only past about
+     * four rows: three settings under two headings is a panel that has been
+     * filed rather than laid out. Nothing enforces that — a panel is allowed to
+     * be wrong about its own length — but it is the line to hold.
+     * @default undefined — the controls are drawn with no heading
+     */
+    label?: string;
+    /**
+     * What the cluster is for, in a sentence. Like a control's own help it hangs
+     * off the heading, which is underlined with dots to say so.
+     * @default undefined
+     */
+    help?: HelpContent;
+    /**
+     * Whether a hairline is drawn above the heading. Turn it off on the first
+     * section of a panel: a rule immediately under the panel header's own rule
+     * reads as a doubled line rather than as a division. Only consulted in a
+     * panel.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * How the controls inside are stacked. A row wraps as one unit, so a cluster
+     * never breaks across two lines of the card mid-thought. Only consulted on a
+     * bar; a section of a panel is always a column.
+     * @default 'row'
+     */
+    direction?: 'row' | 'column';
+}
+/**
+ * Controls that answer one question, kept together.
+ *
+ * On a bar, two controls that only make sense read together — a mode and the
+ * number it takes — have to move together as the card reflows, or the reader
+ * meets the number on a line of its own with nothing saying what it counts.
+ *
+ * In a panel it is a section instead: a small-capitals heading over a hairline
+ * that gives the eye somewhere to rest on the way down a long list. A heading
+ * is worth adding once the cluster's idea has a name the names inside it do
+ * not already spell out.
+ * @param props - See {@link OverlayGroupProps}.
+ * @returns The cluster.
+ */
+export declare function OverlayGroup(props: OverlayGroupProps): ReactElement;
+//# sourceMappingURL=OverlayGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayGroup.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAkB9D,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAkEnE"}

package/lib/overlay/ui/OverlayGroup.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { HelpTooltip } from "../../help/ui/HelpTooltip.js";
+import { overlayGroupStyle, overlayGroupTitleStyle, } from "./overlayControlStyles.js";
+import { useOverlayPanelShape } from "./overlayPanelContext.js";
+import { overlaySectionHeadingStyle, overlaySectionStyle, } from "./overlayPanelStyles.js";
+import { OVERLAY_HELP_NAME_STYLE, overlayStackedRowStyle, } from "./overlayRowStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * Controls that answer one question, kept together.
+ *
+ * On a bar, two controls that only make sense read together — a mode and the
+ * number it takes — have to move together as the card reflows, or the reader
+ * meets the number on a line of its own with nothing saying what it counts.
+ *
+ * In a panel it is a section instead: a small-capitals heading over a hairline
+ * that gives the eye somewhere to rest on the way down a long list. A heading
+ * is worth adding once the cluster's idea has a name the names inside it do
+ * not already spell out.
+ * @param props - See {@link OverlayGroupProps}.
+ * @returns The cluster.
+ */
+export function OverlayGroup(props) {
+    const { children, label, help, divider = true, direction = 'row' } = props;
+    const { metrics } = useOverlaySurface();
+    const panel = useOverlayPanelShape();
+    const headingId = useId();
+    if (panel !== undefined) {
+        if (label === undefined) {
+            return _jsx("div", { style: overlaySectionStyle(metrics), children: children });
+        }
+        return (_jsxs("div", { role: "group", "aria-labelledby": headingId, style: overlaySectionStyle(metrics), children: [_jsx(Explained, { help: help, children: _jsx("span", { id: headingId, className: help === undefined ? undefined : 'help-name', tabIndex: help === undefined ? undefined : 0, style: overlaySectionHeadingStyle(metrics, {
+                            divider,
+                            help: help !== undefined,
+                        }), children: label }) }), children] }));
+    }
+    const controls = (_jsx("div", { style: overlayGroupStyle(metrics, direction), children: children }));
+    if (label === undefined)
+        return controls;
+    return (_jsxs("div", { role: "group", "aria-labelledby": headingId, style: overlayStackedRowStyle(metrics), children: [_jsx(Explained, { help: help, children: _jsx("span", { id: headingId, className: help === undefined ? undefined : 'help-name', tabIndex: help === undefined ? undefined : 0, style: help === undefined
+                        ? overlayGroupTitleStyle(metrics)
+                        : {
+                            ...overlayGroupTitleStyle(metrics),
+                            ...OVERLAY_HELP_NAME_STYLE,
+                        }, children: label }) }), controls] }));
+}
+/**
+ * A heading, with its explanation behind it when it has one.
+ *
+ * The two shapes a group takes both need this, and writing the conditional
+ * twice is how one of them quietly loses its help.
+ * @param props - The heading and what it explains.
+ * @param props.help - The explanation, or nothing.
+ * @param props.children - The heading.
+ * @returns The heading.
+ */
+function Explained(props) {
+    const { help, children } = props;
+    if (help === undefined)
+        return _jsx(_Fragment, { children: children });
+    return _jsx(HelpTooltip, { content: help, children: children });
+}
+//# sourceMappingURL=OverlayGroup.js.map

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

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

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

@@ -0,0 +1,75 @@
+import type { IconName } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+/** What {@link OverlayIconButton} needs. */
+export interface OverlayIconButtonProps {
+    /**
+     * The glyph: a Blueprint icon name, or an element of the caller's own — an
+     * inline `<svg>` drawing the very mark the figure draws, which is the one
+     * kind of icon a reader does not have to learn.
+     */
+    icon: IconName | ReactElement;
+    /**
+     * What the setting is called, phrased as the question the reader already
+     * has: `Colour by`, `Group outlines`. It is written into both `title` and
+     * `aria-label`, because a glyph says nothing until it is named — that is the
+     * price of an icon-only bar, and it is paid here rather than left to each
+     * caller to remember.
+     */
+    label: string;
+    /**
+     * What the setting is currently on, written after the name as
+     * `label — value`. Give it wherever there is one: `Colour by — species`
+     * answers the reader's actual question, where `Colour by` alone only tells
+     * them which question the button asks.
+     * @default undefined — the name alone
+     */
+    value?: string;
+    /**
+     * 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;
+    /**
+     * Why it cannot be pressed, which the pointer is told in place of the name.
+     * A greyed glyph that does not say why is the one thing worse than a glyph.
+     * @default undefined — the pointer is still told the name
+     */
+    disabledReason?: string;
+    /**
+     * Whether pressing it opens a menu. Its state is then announced as a menu
+     * that is open or shut rather than as a button that is pressed, which is
+     * what tells a screen reader there is more behind it.
+     * @default false
+     */
+    opensMenu?: boolean;
+    /**
+     * Called when it is pressed. Leave it out inside a popover, which listens on
+     * the wrapper it puts around the button and would otherwise be told twice.
+     * @default undefined — nothing of its own happens
+     */
+    onClick?: () => void;
+    /**
+     * Value of the `data-testid` attribute.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * 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 declare function OverlayIconButton(props: OverlayIconButtonProps): ReactElement;
+//# sourceMappingURL=OverlayIconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayIconButton.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,4CAA4C;AAC5C,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAqC7E"}

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