react-cheminfo 0.9.0 → 0.11.0

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

package/lib/overlay/ui/overlayPanelStyles.js

@@ -0,0 +1,193 @@
+/**
+ * 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 { OVERLAY_HELP_NAME_STYLE } from "./overlayRowStyles.js";
+/**
+ * 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 function overlayPanelSurfaceStyle(metrics) {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: OVERLAY_PANEL_MIN_WIDTH,
+        color: 'var(--text)',
+        fontSize: metrics.fontSize,
+        lineHeight: 1.2,
+    };
+}
+/**
+ * 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 function overlayPanelHeaderStyle(metrics) {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: metrics.gap,
+        padding: `${metrics.gap + 5}px ${metrics.gap + 8}px ${metrics.gap + 4}px`,
+        borderBottom: '1px solid var(--border)',
+    };
+}
+/**
+ * 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 function overlayPanelTitleStyle(metrics) {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        minWidth: 0,
+        color: 'var(--text)',
+        fontSize: metrics.fontSize,
+        fontWeight: 600,
+        whiteSpace: 'nowrap',
+    };
+}
+/**
+ * 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 function overlayPanelResetStyle(metrics, hovered) {
+    return {
+        flex: 'none',
+        padding: 0,
+        border: 'none',
+        background: 'transparent',
+        color: hovered ? 'var(--accent)' : 'var(--text-faint)',
+        font: 'inherit',
+        fontSize: Math.max(10, metrics.labelSize + 1),
+        lineHeight: 1,
+        textDecoration: hovered ? 'underline' : 'none',
+        cursor: 'pointer',
+    };
+}
+/**
+ * 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 function overlayPanelBodyStyle(metrics) {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: metrics.gap + 3,
+        padding: `${metrics.gap + 4}px ${metrics.gap + 8}px ${metrics.gap + 7}px`,
+    };
+}
+/**
+ * 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 function overlayPanelHintStyle(metrics) {
+    return {
+        margin: 0,
+        paddingTop: metrics.paddingY,
+        color: 'var(--text-faint)',
+        fontSize: Math.max(10, metrics.labelSize),
+        lineHeight: 1.45,
+    };
+}
+/**
+ * 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 function overlayPanelFooterStyle(metrics) {
+    return {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: metrics.gap,
+        padding: `${metrics.gap + 4}px ${metrics.gap + 8}px ${metrics.gap + 5}px`,
+        borderTop: '1px solid var(--border)',
+    };
+}
+/**
+ * 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 function overlaySectionStyle(metrics) {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: metrics.gap + 3,
+    };
+}
+/**
+ * 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 function overlaySectionHeadingStyle(metrics, look) {
+    const { divider = true, help = false } = look;
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        marginTop: divider ? metrics.paddingY : 0,
+        paddingTop: divider ? metrics.gap + 5 : 0,
+        borderTop: divider ? '1px solid var(--border)' : undefined,
+        color: 'var(--text-faint)',
+        fontSize: Math.max(10, metrics.labelSize - 1),
+        fontWeight: 700,
+        letterSpacing: '0.07em',
+        textTransform: 'uppercase',
+        whiteSpace: 'nowrap',
+        ...(help ? OVERLAY_HELP_NAME_STYLE : undefined),
+    };
+}
+/**
+ * How narrow a panel is allowed to get.
+ *
+ * The name column and a segmented pair beside it, which is the widest row a
+ * panel routinely holds; below this the segments wrap and the grid stops being
+ * a grid.
+ */
+const OVERLAY_PANEL_MIN_WIDTH = 208;
+//# sourceMappingURL=overlayPanelStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelStyles.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayPanelStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAMH,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB,CACtC,OAAuB;IAEvB,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,uBAAuB;QACjC,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,UAAU,EAAE,GAAG;KAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAuB;IAEvB,OAAO;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,GAAG,EAAE,OAAO,CAAC,GAAG;QAChB,OAAO,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,IAAI;QACzE,YAAY,EAAE,yBAAyB;KACxC,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAuB;IAC5D,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,QAAQ;KACrB,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,sBAAsB,CACpC,OAAuB,EACvB,OAAgB;IAEhB,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,aAAa;QACzB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB;QACtD,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;QAC7C,UAAU,EAAE,CAAC;QACb,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;QAC9C,MAAM,EAAE,SAAS;KAClB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAuB;IAC3D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC;QACvB,OAAO,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,IAAI;KAC1E,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAuB;IAC3D,OAAO;QACL,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,OAAO,CAAC,QAAQ;QAC5B,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,SAAS,CAAC;QACzC,UAAU,EAAE,IAAI;KACjB,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAuB;IAEvB,OAAO;QACL,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,OAAO,CAAC,GAAG;QAChB,OAAO,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,IAAI;QACzE,SAAS,EAAE,yBAAyB;KACrC,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAuB;IACzD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC;KACxB,CAAC;AACJ,CAAC;AAkBD;;;;;;;;;GASG;AACH,MAAM,UAAU,0BAA0B,CACxC,OAAuB,EACvB,IAAwB;IAExB,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;IAC9C,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS;QAC1D,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;QAC7C,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,QAAQ;QACvB,aAAa,EAAE,WAAW;QAC1B,UAAU,EAAE,QAAQ;QACpB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS,CAAC;KAChD,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,uBAAuB,GAAG,GAAG,CAAC"}

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

@@ -0,0 +1,19 @@
+/**
+ * How a keyboard moves along a row of pills.
+ *
+ * A pill group is a list laid out sideways, so the arrows that mean something
+ * to the reader are the horizontal ones — and the shared list navigation is
+ * written for a column. Rather than a second key handler that would drift from
+ * it, the two horizontal keys are read as the vertical ones and everything
+ * else is handed straight over: `Home` and `End` reach the two ends, the
+ * selection is clamped at both, and a key the list has no use for is left to
+ * the page.
+ */
+import type { ListNavigationHandlerOptions, ListNavigationKeyEvent } from '../../hooks/ui/listNavigation.ts';
+/**
+ * Move a pill group's selection from a keyboard event.
+ * @param event - The keyboard event, synthetic or native.
+ * @param options - See {@link ListNavigationHandlerOptions}.
+ */
+export declare function handleOverlayPillKey(event: ListNavigationKeyEvent, options: ListNavigationHandlerOptions): void;
+//# sourceMappingURL=overlayPillKeys.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPillKeys.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayPillKeys.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EACV,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,kCAAkC,CAAC;AAG1C;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,sBAAsB,EAC7B,OAAO,EAAE,4BAA4B,GACpC,IAAI,CAYN"}

package/lib/overlay/ui/overlayPillKeys.js

@@ -0,0 +1,33 @@
+/**
+ * How a keyboard moves along a row of pills.
+ *
+ * A pill group is a list laid out sideways, so the arrows that mean something
+ * to the reader are the horizontal ones — and the shared list navigation is
+ * written for a column. Rather than a second key handler that would drift from
+ * it, the two horizontal keys are read as the vertical ones and everything
+ * else is handed straight over: `Home` and `End` reach the two ends, the
+ * selection is clamped at both, and a key the list has no use for is left to
+ * the page.
+ */
+import { handleListNavigationKey } from "../../hooks/ui/listNavigation.js";
+/**
+ * Move a pill group's selection from a keyboard event.
+ * @param event - The keyboard event, synthetic or native.
+ * @param options - See {@link ListNavigationHandlerOptions}.
+ */
+export function handleOverlayPillKey(event, options) {
+    handleListNavigationKey({
+        key: SIDEWAYS_KEYS[event.key] ?? event.key,
+        target: event.target,
+        // Written out rather than spread from the event: `preventDefault` lives
+        // on the event's prototype, and a copy made by spreading arrives without
+        // it — at which point the page scrolls under every arrow key.
+        preventDefault: () => event.preventDefault(),
+    }, options);
+}
+/** The keys a sideways list is walked with, in the terms a column is. */
+const SIDEWAYS_KEYS = {
+    ArrowLeft: 'ArrowUp',
+    ArrowRight: 'ArrowDown',
+};
+//# sourceMappingURL=overlayPillKeys.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPillKeys.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayPillKeys.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3E;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAA6B,EAC7B,OAAqC;IAErC,uBAAuB,CACrB;QACE,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG;QAC1C,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,wEAAwE;QACxE,yEAAyE;QACzE,8DAA8D;QAC9D,cAAc,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;KAC7C,EACD,OAAO,CACR,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,aAAa,GAAqC;IACtD,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,WAAW;CACxB,CAAC"}