react-cheminfo 0.9.0 → 0.10.0

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

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

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

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

@@ -0,0 +1,52 @@
+/**
+ * The rules the chrome that explains a figure is drawn with: the plain-English
+ * band under it, the key naming what its colours mean, and the card that
+ * follows the pointer.
+ *
+ * This is the half of the domain that answers "what am I looking at", and it
+ * is separated from the controls because a figure can need all of it while
+ * offering nothing to change.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/**
+ * The plain-English band under a figure.
+ *
+ * `strong` is for a sentence the reader is meant to act on — what a drag is
+ * about to do — and is the one place the chrome raises its voice.
+ * @param metrics - The measurements the card is drawn from.
+ * @param tone - How loudly it speaks.
+ * @returns The caption band's rules.
+ */
+export declare function overlayCaptionStyle(metrics: OverlayMetrics, tone: 'quiet' | 'strong'): CSSProperties;
+/**
+ * The stack of entries naming what a colour or a shape means.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The legend's rules.
+ */
+export declare function overlayLegendStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The sentence over a legend's entries, which names the encoding.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The title's rules.
+ */
+export declare function overlayLegendTitleStyle(metrics: OverlayMetrics): CSSProperties;
+/** One entry of a legend: its mark, then what the mark means. */
+export declare const OVERLAY_LEGEND_ENTRY_STYLE: {
+    readonly display: "inline-flex";
+    readonly alignItems: "center";
+    readonly gap: 6;
+    readonly border: "none";
+    readonly background: "none";
+    readonly color: "inherit";
+    readonly font: "inherit";
+    readonly padding: 0;
+    readonly textAlign: "left";
+};
+/**
+ * The card that follows the pointer, holding everything known about one point.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The readout's rules.
+ */
+export declare function overlayReadoutStyle(metrics: OverlayMetrics): CSSProperties;
+//# sourceMappingURL=overlayFigureStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayFigureStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayFigureStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,OAAO,GAAG,QAAQ,GACvB,aAAa,CAWf;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAWzE;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,cAAc,GACtB,aAAa,CAQf;AAED,iEAAiE;AACjE,eAAO,MAAM,0BAA0B;;;;;;;;;;CAUL,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAkB1E"}

package/lib/overlay/ui/overlayFigureStyles.js

@@ -0,0 +1,98 @@
+/**
+ * The rules the chrome that explains a figure is drawn with: the plain-English
+ * band under it, the key naming what its colours mean, and the card that
+ * follows the pointer.
+ *
+ * This is the half of the domain that answers "what am I looking at", and it
+ * is separated from the controls because a figure can need all of it while
+ * offering nothing to change.
+ */
+/**
+ * The plain-English band under a figure.
+ *
+ * `strong` is for a sentence the reader is meant to act on — what a drag is
+ * about to do — and is the one place the chrome raises its voice.
+ * @param metrics - The measurements the card is drawn from.
+ * @param tone - How loudly it speaks.
+ * @returns The caption band's rules.
+ */
+export function overlayCaptionStyle(metrics, tone) {
+    return {
+        display: 'block',
+        maxWidth: '100%',
+        padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+        color: tone === 'strong' ? 'var(--text)' : 'var(--text-muted)',
+        fontSize: metrics.labelSize,
+        fontWeight: tone === 'strong' ? 600 : 400,
+        lineHeight: 1.35,
+        textWrap: 'pretty',
+    };
+}
+/**
+ * The stack of entries naming what a colour or a shape means.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The legend's rules.
+ */
+export function overlayLegendStyle(metrics) {
+    return {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: Math.max(2, metrics.gap - 4),
+        padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+        color: 'var(--text)',
+        fontSize: metrics.labelSize,
+        lineHeight: 1.3,
+    };
+}
+/**
+ * The sentence over a legend's entries, which names the encoding.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The title's rules.
+ */
+export function overlayLegendTitleStyle(metrics) {
+    return {
+        marginBottom: 2,
+        color: 'var(--text-muted)',
+        fontSize: metrics.labelSize,
+        fontWeight: 600,
+        whiteSpace: 'nowrap',
+    };
+}
+/** One entry of a legend: its mark, then what the mark means. */
+export const OVERLAY_LEGEND_ENTRY_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+    border: 'none',
+    background: 'none',
+    color: 'inherit',
+    font: 'inherit',
+    padding: 0,
+    textAlign: 'left',
+};
+/**
+ * The card that follows the pointer, holding everything known about one point.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The readout's rules.
+ */
+export function overlayReadoutStyle(metrics) {
+    return {
+        position: 'absolute',
+        zIndex: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        maxWidth: 280,
+        padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+        borderRadius: 'var(--radius)',
+        border: '1px solid var(--border)',
+        background: 'var(--surface)',
+        boxShadow: 'var(--shadow-md)',
+        color: 'var(--text)',
+        fontSize: metrics.labelSize,
+        lineHeight: 1.35,
+        pointerEvents: 'none',
+    };
+}
+//# sourceMappingURL=overlayFigureStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayFigureStyles.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayFigureStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CACjC,OAAuB,EACvB,IAAwB;IAExB,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,GAAG,OAAO,CAAC,QAAQ,MAAM,OAAO,CAAC,QAAQ,IAAI;QACtD,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,mBAAmB;QAC9D,QAAQ,EAAE,OAAO,CAAC,SAAS;QAC3B,UAAU,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;QACzC,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,OAAuB;IACxD,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;QACjC,OAAO,EAAE,GAAG,OAAO,CAAC,QAAQ,MAAM,OAAO,CAAC,QAAQ,IAAI;QACtD,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,OAAO,CAAC,SAAS;QAC3B,UAAU,EAAE,GAAG;KAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAuB;IAEvB,OAAO;QACL,YAAY,EAAE,CAAC;QACf,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,OAAO,CAAC,SAAS;QAC3B,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,QAAQ;KACrB,CAAC;AACJ,CAAC;AAED,iEAAiE;AACjE,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,MAAM;CACe,CAAC;AAEnC;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAuB;IACzD,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,GAAG;QACb,OAAO,EAAE,GAAG,OAAO,CAAC,QAAQ,MAAM,OAAO,CAAC,QAAQ,IAAI;QACtD,YAAY,EAAE,eAAe;QAC7B,MAAM,EAAE,yBAAyB;QACjC,UAAU,EAAE,gBAAgB;QAC5B,SAAS,EAAE,kBAAkB;QAC7B,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,OAAO,CAAC,SAAS;QAC3B,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,MAAM;KACtB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,34 @@
+/**
+ * What the rows of one settings panel agree on.
+ *
+ * A panel is handed its controls as opaque children, so it cannot reach into
+ * them and set a prop; and every row deciding for itself whether it is a line
+ * on a bar or a cell in a grid is exactly how a panel ends up with three row
+ * shapes in it. So the panel says once, here, that its rows are cells and how
+ * wide the name column is, and every row reads it back.
+ */
+/** What every row inside an {@link OverlayPanel} reads from it. */
+export interface OverlayPanelShape {
+    /**
+     * Width of the name column, in pixels. Settled by the panel rather than by
+     * each row, because a column whose width is decided per row is not a column.
+     */
+    nameWidth: number;
+}
+/**
+ * The panel a control is sitting in, if it is sitting in one.
+ *
+ * A control rendered on a bar, or on its own, gets `undefined` — which is what
+ * leaves every existing caller of {@link OverlayRow} laid out as the line it
+ * has always been.
+ * @returns The panel, or `undefined` outside one.
+ */
+export declare function useOverlayPanelShape(): OverlayPanelShape | undefined;
+/**
+ * The shape an {@link OverlayPanel} hands down to the controls inside it.
+ *
+ * Published for the panel alone. A control reaches it through
+ * {@link useOverlayPanelShape}.
+ */
+export declare const OverlayPanelContext: import("react").Context<OverlayPanelShape | undefined>;
+//# sourceMappingURL=overlayPanelContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelContext.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayPanelContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,mEAAmE;AACnE,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,SAAS,CAEpE;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,wDAE/B,CAAC"}

package/lib/overlay/ui/overlayPanelContext.js

@@ -0,0 +1,29 @@
+/**
+ * What the rows of one settings panel agree on.
+ *
+ * A panel is handed its controls as opaque children, so it cannot reach into
+ * them and set a prop; and every row deciding for itself whether it is a line
+ * on a bar or a cell in a grid is exactly how a panel ends up with three row
+ * shapes in it. So the panel says once, here, that its rows are cells and how
+ * wide the name column is, and every row reads it back.
+ */
+import { createContext, useContext } from 'react';
+/**
+ * The panel a control is sitting in, if it is sitting in one.
+ *
+ * A control rendered on a bar, or on its own, gets `undefined` — which is what
+ * leaves every existing caller of {@link OverlayRow} laid out as the line it
+ * has always been.
+ * @returns The panel, or `undefined` outside one.
+ */
+export function useOverlayPanelShape() {
+    return useContext(OverlayPanelContext);
+}
+/**
+ * The shape an {@link OverlayPanel} hands down to the controls inside it.
+ *
+ * Published for the panel alone. A control reaches it through
+ * {@link useOverlayPanelShape}.
+ */
+export const OverlayPanelContext = createContext(undefined);
+//# sourceMappingURL=overlayPanelContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelContext.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayPanelContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWlD;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO,UAAU,CAAC,mBAAmB,CAAC,CAAC;AACzC,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAC9C,SAAS,CACV,CAAC"}