react-cheminfo 0.8.0 → 0.10.0

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

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

@@ -0,0 +1,112 @@
+/**
+ * The rules a settings panel is drawn with.
+ *
+ * A panel is the one surface in this domain the reader stops and reads rather
+ * than glances at, and everything here follows from that. It says at the top
+ * which figure it belongs to, because a panel that opens behind a cog and
+ * never names itself leaves the reader guessing which of four pictures they
+ * are about to change. It offers a way back, because a configuration nobody
+ * understands any more is worse than the default it replaced. And it keeps its
+ * commands at the foot rather than among its rows, since a button that clears
+ * a selection is not a setting and reading as one costs the reader a mistake.
+ *
+ * The panel brings its own padding, so it belongs in a popover or a card that
+ * has none: nested inside a padded surface, its header rule stops short of
+ * both edges and reads as a mis-drawn line rather than as a header.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/**
+ * The panel itself: a header, a body, and whatever the figure can be told to
+ * do at the foot.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The panel's rules.
+ */
+export declare function overlayPanelSurfaceStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The band across the top holding the title and the way back.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The header's rules.
+ */
+export declare function overlayPanelHeaderStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * What the panel is called.
+ *
+ * Full strength and half a step heavier than the rows under it, which is the
+ * least that separates a title from one more caption.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The title's rules.
+ */
+export declare function overlayPanelTitleStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The way back to the settings the figure came with.
+ *
+ * Plain text rather than a button: it is the one thing in the header that is
+ * not the title, and drawing an outline around it would make it compete with
+ * the settings it undoes. It is faint until pointed at, then the accent, so a
+ * reader who is not looking for it never sees it and one who is finds it where
+ * every other panel keeps it.
+ * @param metrics - The measurements the card is drawn from.
+ * @param hovered - Whether the pointer is over it or the keyboard is on it.
+ * @returns The button's rules.
+ */
+export declare function overlayPanelResetStyle(metrics: OverlayMetrics, hovered: boolean): CSSProperties;
+/**
+ * The rows themselves, and the sections they are gathered into.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The body's rules.
+ */
+export declare function overlayPanelBodyStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The one line at the foot that teaches the convention.
+ *
+ * Every name in the panel carries its own explanation and nothing says so; one
+ * sentence, once, is what turns a column of dotted underlines from a rendering
+ * oddity into an offer.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The line's rules.
+ */
+export declare function overlayPanelHintStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * What the figure can be told to do, under a hairline.
+ *
+ * Below the rows and separated from them, because a command among the settings
+ * is a command the reader takes for a setting — and `Clear selection` read as
+ * a setting is a click nobody meant to make.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The footer's rules.
+ */
+export declare function overlayPanelFooterStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * One section of a panel: its heading and the rows under it.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The section's rules.
+ */
+export declare function overlaySectionStyle(metrics: OverlayMetrics): CSSProperties;
+/** How a section heading stands. */
+export interface OverlaySectionLook {
+    /**
+     * Whether a hairline is drawn above it. The first heading of a panel takes
+     * none: a rule immediately under the header's own rule reads as a doubled
+     * line rather than as a division.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Whether the heading carries the section's explanation.
+     * @default false
+     */
+    help?: boolean;
+}
+/**
+ * What a section of a panel is called.
+ *
+ * Small capitals in the faintest ink the family has, over a hairline: the
+ * heading has to give the eye somewhere to rest without being read as one more
+ * setting, and anything that looks like the names under it is taken for one.
+ * @param metrics - The measurements the card is drawn from.
+ * @param look - See {@link OverlaySectionLook}.
+ * @returns The heading's rules.
+ */
+export declare function overlaySectionHeadingStyle(metrics: OverlayMetrics, look: OverlaySectionLook): CSSProperties;
+//# sourceMappingURL=overlayPanelStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayPanelStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAIhE;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,cAAc,GACtB,aAAa,CASf;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,cAAc,GACtB,aAAa,CASf;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAW7E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,GACf,aAAa,CAaf;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAO5E;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAQ5E;AAED;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,cAAc,GACtB,aAAa,CASf;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAM1E;AAED,oCAAoC;AACpC,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,kBAAkB,GACvB,aAAa,CAiBf"}