react-cheminfo 0.9.0 → 0.10.0

package/lib/overlay/ui/OverlaySwatchIcon.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * 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 function OverlaySwatchIcon(props) {
+    const { colors } = props;
+    const { metrics } = useOverlaySurface();
+    const shown = colors.length > OVERLAY_SWATCH_DOTS
+        ? OVERLAY_SWATCH_DOTS - 1
+        : colors.length;
+    const rest = colors.length - shown;
+    const size = dotSize(metrics);
+    const dots = [];
+    for (let index = 0; index < shown; index++) {
+        const color = colors[index];
+        if (color === undefined)
+            continue;
+        dots.push(_jsx("span", { style: overlaySwatchDotStyle(color, size) }, `${index}:${color}`));
+    }
+    return (_jsxs("span", { "aria-hidden": "true", style: OVERLAY_SWATCH_ROW_STYLE, children: [dots, rest > 0 ? (_jsx("span", { style: overlaySwatchRestStyle(metrics), children: `+${rest}` })) : null] }));
+}
+/** How many dots the glyph holds before the last one becomes a count. */
+const OVERLAY_SWATCH_DOTS = 4;
+/** The dots side by side, with the button's own ink for the count. */
+const OVERLAY_SWATCH_ROW_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 2,
+};
+/**
+ * One dot.
+ *
+ * Round rather than square, because these stand for the marks on a scatter
+ * rather than for the series of a bar chart.
+ *
+ * The hairline that keeps a pale group visible against the card is drawn only
+ * once the dot is wide enough to carry it: inside a four pixel dot a one pixel
+ * ring is half the dot, and the reader is then shown a grey ring with a speck
+ * of the group's colour in it — which is the one thing this glyph exists not
+ * to do.
+ * @param color - The colour of the group it stands for.
+ * @param size - How wide the dot is.
+ * @returns The dot's rules.
+ */
+function overlaySwatchDotStyle(color, size) {
+    return {
+        display: 'inline-block',
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: color,
+        boxShadow: size >= 6 ? 'inset 0 0 0 1px var(--border)' : undefined,
+    };
+}
+/**
+ * The count standing in for the colours that did not fit.
+ *
+ * It takes the button's own ink rather than a colour of its own, so it fades
+ * and lights with the button instead of reading as a fifth group.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The count's rules.
+ */
+function overlaySwatchRestStyle(metrics) {
+    return {
+        fontSize: Math.max(9, metrics.labelSize - 1),
+        fontVariantNumeric: 'tabular-nums',
+        fontWeight: 600,
+        lineHeight: 1,
+    };
+}
+/**
+ * How wide one dot is.
+ *
+ * A sixth of the button, so the row of four fills it the way a glyph would
+ * rather than sitting in the middle of it as four specks.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The dot's width in pixels.
+ */
+function dotSize(metrics) {
+    return Math.max(4, Math.round(metrics.buttonSize / 6));
+}
+//# sourceMappingURL=OverlaySwatchIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySwatchIcon.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySwatchIcon.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAYxD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAExC,MAAM,KAAK,GACT,MAAM,CAAC,MAAM,GAAG,mBAAmB;QACjC,CAAC,CAAC,mBAAmB,GAAG,CAAC;QACzB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;IACpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;IACnC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAmB,EAAE,CAAC;IAChC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC;QAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,KAAK,KAAK,SAAS;YAAE,SAAS;QAClC,IAAI,CAAC,IAAI,CACP,eAEE,KAAK,EAAE,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,IADpC,GAAG,KAAK,IAAI,KAAK,EAAE,CAExB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,+BAAkB,MAAM,EAAC,KAAK,EAAE,wBAAwB,aACrD,IAAI,EACJ,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CACV,eAAM,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,YAAG,IAAI,IAAI,EAAE,GAAQ,CAClE,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,sEAAsE;AACtE,MAAM,wBAAwB,GAAG;IAC/B,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC;;;;;;;;;;;;;;GAcG;AACH,SAAS,qBAAqB,CAAC,KAAa,EAAE,IAAY;IACxD,OAAO;QACL,OAAO,EAAE,cAAc;QACvB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,SAAS;KACnE,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,sBAAsB,CAAC,OAAuB;IACrD,OAAO;QACL,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;QAC5C,kBAAkB,EAAE,cAAc;QAClC,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,CAAC;KACd,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,OAAO,CAAC,OAAuB;IACtC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC"}

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

@@ -0,0 +1,56 @@
+import type { IconName } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import type { OverlayControlProps } from './OverlayRow.tsx';
+/** How a toggle is drawn. */
+export type OverlayToggleAppearance = 'button' | 'switch';
+/** What {@link OverlayToggle} needs. */
+export interface OverlayToggleProps extends OverlayControlProps {
+    /** Whether it is on. */
+    checked: boolean;
+    /** Called with the new state. */
+    onChange: (checked: boolean) => void;
+    /**
+     * How it is drawn: a pressed button carrying its own words, or a switch
+     * beside a name in a panel's control column.
+     * @default `'switch'` inside an {@link OverlayPanel}, `'button'` anywhere else
+     */
+    appearance?: OverlayToggleAppearance;
+    /**
+     * Colour of the square in front of the caption. Give it the series' own
+     * colour and a row of toggles becomes the figure's legend, each entry
+     * showing and hiding what it names. Drawn by the button appearance alone.
+     * @default undefined — no square is drawn
+     */
+    swatch?: string;
+    /**
+     * Blueprint glyph in front of the caption, for a toggle short of room. Drawn
+     * by the button appearance alone.
+     * @default undefined
+     */
+    icon?: IconName;
+}
+/**
+ * One thing on the figure turned on and off.
+ *
+ * On a bar it is a pressed button, because the same control has to work as a
+ * legend entry — a swatch and a series name that dim when the series is hidden
+ * — and a checkbox beside a colour square reads as two separate claims about
+ * one series. In a panel it is a switch, because a row of grey chips is a row
+ * whose state cannot be read: `One scale for all` drawn as a chip answers the
+ * reader's only question about it — is it on? — with nothing at all, and the
+ * reader has to click it to find out.
+ *
+ * It stays a real `button` reporting `aria-pressed` in both appearances rather
+ * than becoming a checkbox in one of them, since a control that reports its
+ * state one way on a bar and another in a panel is a control a reader who
+ * cannot see it has to learn twice. A native button is also operated by Space
+ * and by Enter for nothing, where a checkbox built out of a `div` has to
+ * reimplement both and usually gets one of them subtly wrong.
+ *
+ * A swatch takes the glyph's place when both are given, since the colour is
+ * what ties the entry to a mark on the chart.
+ * @param props - See {@link OverlayToggleProps}.
+ * @returns The toggle.
+ */
+export declare function OverlayToggle(props: OverlayToggleProps): ReactElement;
+//# sourceMappingURL=OverlayToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayToggle.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAY5D,6BAA6B;AAC7B,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE1D,wCAAwC;AACxC,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,wBAAwB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAkErE"}

package/lib/overlay/ui/OverlayToggle.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from 'react-science/ui';
+import { OverlayRow } from "./OverlayRow.js";
+import { overlaySwatchStyle } from "./overlayControlStyles.js";
+import { useOverlayPanelShape } from "./overlayPanelContext.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+import { overlaySwitchKnobStyle, overlaySwitchStyle, overlaySwitchTrack, overlaySwitchTrackStyle, } from "./overlaySwitchStyles.js";
+/**
+ * One thing on the figure turned on and off.
+ *
+ * On a bar it is a pressed button, because the same control has to work as a
+ * legend entry — a swatch and a series name that dim when the series is hidden
+ * — and a checkbox beside a colour square reads as two separate claims about
+ * one series. In a panel it is a switch, because a row of grey chips is a row
+ * whose state cannot be read: `One scale for all` drawn as a chip answers the
+ * reader's only question about it — is it on? — with nothing at all, and the
+ * reader has to click it to find out.
+ *
+ * It stays a real `button` reporting `aria-pressed` in both appearances rather
+ * than becoming a checkbox in one of them, since a control that reports its
+ * state one way on a bar and another in a panel is a control a reader who
+ * cannot see it has to learn twice. A native button is also operated by Space
+ * and by Enter for nothing, where a checkbox built out of a `div` has to
+ * reimplement both and usually gets one of them subtly wrong.
+ *
+ * A swatch takes the glyph's place when both are given, since the colour is
+ * what ties the entry to a mark on the chart.
+ * @param props - See {@link OverlayToggleProps}.
+ * @returns The toggle.
+ */
+export function OverlayToggle(props) {
+    const { checked, onChange, label, help, hideLabel = false, disabled = false, testId, swatch, icon, } = props;
+    const { metrics } = useOverlaySurface();
+    const panel = useOverlayPanelShape();
+    const appearance = props.appearance ?? (panel === undefined ? 'button' : 'switch');
+    if (appearance === 'switch') {
+        const track = overlaySwitchTrack(metrics);
+        return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx("button", { type: "button", "aria-pressed": checked, "aria-label": label, disabled: disabled, "data-testid": testId, style: overlaySwitchStyle(metrics, track, disabled), onClick: () => onChange(!checked), children: _jsx("span", { style: overlaySwitchTrackStyle(track, checked), children: _jsx("span", { style: overlaySwitchKnobStyle(track, checked) }) }) }) }));
+    }
+    return (_jsx(OverlayRow, { label: label, help: help, hideLabel: true, disabled: disabled, children: _jsx(Button, { variant: "minimal", size: metrics.blueprintSize, active: checked, disabled: disabled, "aria-pressed": checked, "aria-label": label, title: hideLabel ? label : undefined, icon: swatch === undefined ? (icon) : (_jsx("span", { style: overlaySwatchStyle(swatch) })), text: hideLabel ? undefined : label, "data-testid": testId, onClick: () => onChange(!checked) }) }));
+}
+//# sourceMappingURL=OverlayToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayToggle.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayToggle.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAgClC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,MAAM,EACN,IAAI,GACL,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,UAAU,GACd,KAAK,CAAC,UAAU,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAElE,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC1C,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,iBACE,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,KAAK,EAAE,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,EACnD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,YAEjC,eAAM,KAAK,EAAE,uBAAuB,CAAC,KAAK,EAAE,OAAO,CAAC,YAClD,eAAM,KAAK,EAAE,sBAAsB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAI,GAClD,GACA,GACE,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,QAAC,QAAQ,EAAE,QAAQ,YAChE,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,OAAO,CAAC,aAAa,EAC3B,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,QAAQ,kBACJ,OAAO,gBACT,KAAK,EACjB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACpC,IAAI,EACF,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,IAAI,CACL,CAAC,CAAC,CAAC,CACF,eAAM,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAI,CAC5C,EAEH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,iBACtB,MAAM,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,GACjC,GACS,CACd,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,80 @@
+import type { ReactElement } from 'react';
+/** What {@link OverlayValueButton} needs. */
+export interface OverlayValueButtonProps {
+    /**
+     * What the setting is called, in full and phrased as the question the reader
+     * already has: `Colour by`, `Group outlines`. It is never the thing written
+     * on the bar — it goes into `title` and `aria-label` with the value after
+     * it, so a button showing `Species` still announces `Colour by — Species`.
+     */
+    label: string;
+    /**
+     * What the setting is currently on, which is the thing actually written:
+     * `Species`, `95%`. Write the answer rather than the jargon.
+     */
+    value: string;
+    /**
+     * The one word written in front of the value on a roomy bar.
+     * @default the label, which is right wherever the name is already one word
+     */
+    keyWord?: string;
+    /**
+     * Whether that key word is written. This is the first thing a narrowing bar
+     * turns off: the name of a setting is read once and its value every time.
+     * @default true
+     */
+    showKey?: boolean;
+    /**
+     * The figure's own colours, drawn as a row of dots in front of the words. A
+     * reader who has just looked at four groups of dots recognises them without
+     * being taught anything, which is worth more than any paint-pot glyph.
+     * @default undefined — no dots are drawn
+     */
+    swatches?: readonly string[];
+    /**
+     * Whether the choices behind it are showing.
+     * @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 control that does not say why is worse than one that is missing.
+     * @default undefined — the pointer is still told the name and the value
+     */
+    disabledReason?: string;
+    /**
+     * Whether pressing it opens a menu, which is what tells a screen reader
+     * there is more behind the words than a press.
+     * @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;
+}
+/**
+ * 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 declare function OverlayValueButton(props: OverlayValueButtonProps): ReactElement;
+//# sourceMappingURL=OverlayValueButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayValueButton.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAY1C,6CAA6C;AAC7C,MAAM,WAAW,uBAAuB;IACtC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;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;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CA0Cd"}

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