react-cheminfo 0.9.0 → 0.11.0

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

@@ -0,0 +1,78 @@
+/**
+ * The rules the package's one segmented control is drawn with.
+ *
+ * A sunken track with the choice in force lifted out of it: the same device
+ * whether it is moving between a figure's views or picking one setting inside
+ * a card, and it is written here rather than in either component so the two
+ * cannot drift into looking like two different controls.
+ *
+ * Nothing here is filled with the site's accent. The strongest colour on the
+ * page belongs to the data, and a saturated block of it in the chrome above a
+ * scatter pulls the eye off the picture the reader came for — so the choice in
+ * force is told apart by being *raised* rather than by being coloured.
+ *
+ * The raising is said three ways at once — a lighter ground, darker ink, a
+ * heavier weight, and only then a shadow — because a reader who has asked the
+ * operating system for high contrast is shown no shadow at all, and a control
+ * whose one signal was the shadow then says nothing about which choice is in
+ * force.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/**
+ * How big a segmented group is drawn.
+ *
+ * `strip` is the figure's own tab bar, at the full height of a control.
+ * `setting` is one question inside a card, a little smaller so it reads as
+ * something the figure is set with rather than as a second tab bar.
+ */
+export type OverlaySegmentedSize = 'strip' | 'setting';
+/** How one segment stands among the others. */
+export interface OverlayPillLook {
+    /** Whether it is the choice in force. */
+    selected: boolean;
+    /**
+     * Whether it cannot be picked.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Which of the two sizes the group is drawn at.
+     * @default 'strip'
+     */
+    size?: OverlaySegmentedSize;
+}
+/**
+ * The sunken track the segments sit in.
+ *
+ * It carries no outline. A hairline around a group that is already a shade
+ * darker than the card is a fourth container edge in a bar that has room for
+ * one, and the sinking alone is what tells the reader the segments belong
+ * together.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param size - Which of the two sizes it is drawn at.
+ * @returns The track's rules.
+ */
+export declare function overlayPillGroupStyle(metrics: OverlayMetrics, size?: OverlaySegmentedSize): CSSProperties;
+/**
+ * One segment.
+ *
+ * Its height is the track's less the band of track left showing above and
+ * below it, so the choice in force reads as a tile lying *in* the track rather
+ * than as a block that has covered it over.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param look - See {@link OverlayPillLook}.
+ * @returns The segment's rules.
+ */
+export declare function overlayPillStyle(metrics: OverlayMetrics, look: OverlayPillLook): CSSProperties;
+/**
+ * The count after a segment's label.
+ *
+ * The digits are tabular, so a row of counts does not shuffle the labels
+ * sideways as the numbers behind them change.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param selected - Whether it is on the choice in force.
+ * @returns The count's rules.
+ */
+export declare function overlayPillCountStyle(metrics: OverlayMetrics, selected: boolean): CSSProperties;
+//# sourceMappingURL=overlayPillStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPillStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayPillStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvD,+CAA+C;AAC/C,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,cAAc,EACvB,IAAI,GAAE,oBAA8B,GACnC,aAAa,CAWf;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,eAAe,GACpB,aAAa,CAuBf;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,OAAO,GAChB,aAAa,CAOf"}

package/lib/overlay/ui/overlayPillStyles.js

@@ -0,0 +1,140 @@
+/**
+ * The rules the package's one segmented control is drawn with.
+ *
+ * A sunken track with the choice in force lifted out of it: the same device
+ * whether it is moving between a figure's views or picking one setting inside
+ * a card, and it is written here rather than in either component so the two
+ * cannot drift into looking like two different controls.
+ *
+ * Nothing here is filled with the site's accent. The strongest colour on the
+ * page belongs to the data, and a saturated block of it in the chrome above a
+ * scatter pulls the eye off the picture the reader came for — so the choice in
+ * force is told apart by being *raised* rather than by being coloured.
+ *
+ * The raising is said three ways at once — a lighter ground, darker ink, a
+ * heavier weight, and only then a shadow — because a reader who has asked the
+ * operating system for high contrast is shown no shadow at all, and a control
+ * whose one signal was the shadow then says nothing about which choice is in
+ * force.
+ */
+/**
+ * The sunken track the segments sit in.
+ *
+ * It carries no outline. A hairline around a group that is already a shade
+ * darker than the card is a fourth container edge in a bar that has room for
+ * one, and the sinking alone is what tells the reader the segments belong
+ * together.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param size - Which of the two sizes it is drawn at.
+ * @returns The track's rules.
+ */
+export function overlayPillGroupStyle(metrics, size = 'strip') {
+    return {
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: OVERLAY_TRACK_GAP,
+        height: trackHeight(metrics, size),
+        padding: OVERLAY_TRACK_PADDING,
+        borderRadius: trackRadius(metrics),
+        background: 'var(--surface-sunken)',
+    };
+}
+/**
+ * One segment.
+ *
+ * Its height is the track's less the band of track left showing above and
+ * below it, so the choice in force reads as a tile lying *in* the track rather
+ * than as a block that has covered it over.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param look - See {@link OverlayPillLook}.
+ * @returns The segment's rules.
+ */
+export function overlayPillStyle(metrics, look) {
+    const { selected, disabled = false, size = 'strip' } = look;
+    return {
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        height: trackHeight(metrics, size) - OVERLAY_TRACK_PADDING * 2,
+        padding: `0 ${segmentPaddingX(metrics, size)}px`,
+        border: 'none',
+        borderRadius: trackRadius(metrics) - OVERLAY_TRACK_PADDING,
+        background: selected ? 'var(--surface)' : 'transparent',
+        color: selected ? 'var(--text)' : 'var(--text-muted)',
+        boxShadow: selected ? 'var(--shadow-sm)' : undefined,
+        font: 'inherit',
+        fontSize: metrics.fontSize,
+        fontWeight: selected ? 600 : 500,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        cursor: disabled ? 'default' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+    };
+}
+/**
+ * The count after a segment's label.
+ *
+ * The digits are tabular, so a row of counts does not shuffle the labels
+ * sideways as the numbers behind them change.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param selected - Whether it is on the choice in force.
+ * @returns The count's rules.
+ */
+export function overlayPillCountStyle(metrics, selected) {
+    return {
+        fontSize: Math.max(9, metrics.labelSize - 1),
+        fontVariantNumeric: 'tabular-nums',
+        fontWeight: 500,
+        opacity: selected ? 0.85 : 0.75,
+    };
+}
+/**
+ * The band of track showing around a segment, on every side.
+ *
+ * Two pixels: enough that the lifted tile is read as sitting inside something,
+ * and little enough that the group still stands as tall as the controls beside
+ * it.
+ */
+const OVERLAY_TRACK_PADDING = 2;
+/** What is left between two segments, which is the track showing through. */
+const OVERLAY_TRACK_GAP = 2;
+/**
+ * How tall the track stands.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param size - Which of the two sizes it is drawn at.
+ * @returns The height in pixels.
+ */
+function trackHeight(metrics, size) {
+    if (size === 'strip')
+        return metrics.controlHeight;
+    return Math.max(20, metrics.controlHeight - 4);
+}
+/**
+ * The track's corner.
+ *
+ * Two pixels rounder than a control of the same height, because the segment
+ * inside it takes that pair back and a tile with a square corner in a rounded
+ * track reads as a misfit rather than as a lift.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The radius in pixels.
+ */
+function trackRadius(metrics) {
+    return metrics.controlRadius + 2;
+}
+/**
+ * The room each side of a segment's label.
+ *
+ * The type does not shrink with the smaller size — a control that is quieter
+ * should take less room, not become harder to read — so only the room around
+ * the words goes.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @param size - Which of the two sizes it is drawn at.
+ * @returns The padding in pixels.
+ */
+function segmentPaddingX(metrics, size) {
+    return size === 'strip' ? metrics.paddingX + 2 : metrics.paddingX;
+}
+//# sourceMappingURL=overlayPillStyles.js.map

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

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

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

@@ -0,0 +1,113 @@
+/**
+ * The rules one caption-and-control pair is drawn with.
+ *
+ * A row is the unit both a bar and a settings panel are built from, and the
+ * two want different geometry out of it. On a bar the caption sits against its
+ * control and the pair hugs its own width, because the bar is a line of
+ * separate things. In a panel every control has to start at the same x, or the
+ * reader has no column to run their eye down and the panel has to be read
+ * rather than scanned. Both shapes are written here so that a row cannot end
+ * up half one and half the other.
+ *
+ * The name is also where a row's help lives. A panel that hangs a question
+ * mark off every control stacks a column of glyphs down its left edge, and the
+ * eye reads that column before it reads any of the words; a dotted underline
+ * on the name says the same thing with no ink of its own, and leaves the words
+ * the widest thing in the panel.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/**
+ * One caption-and-control pair on a bar.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The row's rules.
+ */
+export declare function overlayRowStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * One caption-and-control pair in a settings panel.
+ *
+ * Two columns of fixed width rather than a flexible line: the whole complaint
+ * a panel of ragged rows draws is that every control starts at a different x,
+ * and a name column that is only as wide as the words in it is a column that
+ * moves from panel to panel.
+ * @param metrics - The measurements the card is drawn from.
+ * @param nameWidth - Width of the name column, in pixels.
+ * @returns The row's rules.
+ */
+export declare function overlayGridRowStyle(metrics: OverlayMetrics, nameWidth: number): CSSProperties;
+/**
+ * How wide the name column is.
+ *
+ * Eight characters of the caption's own type plus the room a descender needs:
+ * enough for `Bar order` and `Averages` without wrapping, and derived from the
+ * type size rather than fixed, so a panel a reader has asked for at a larger
+ * size widens its column with its words instead of breaking them.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The width, in pixels.
+ */
+export declare function overlayNameColumnWidth(metrics: OverlayMetrics): number;
+/** The control's own cell of a panel row. */
+export declare const OVERLAY_GRID_CELL_STYLE: {
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly minWidth: 0;
+};
+/** How a row's name stands. */
+export interface OverlayNameLook {
+    /**
+     * Whether the name carries the control's explanation.
+     * @default false
+     */
+    help?: boolean;
+    /**
+     * Whether the control it names cannot be reached.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * The name of a control.
+ *
+ * It never wraps: a name breaking over two lines makes the row taller than the
+ * control it names, which reads as a fault in the layout rather than as a long
+ * word. When it carries help it is underlined with dots and takes the help
+ * cursor, which is the one convention that lets every question mark leave the
+ * panel — and it fades with its control, because a name at full strength over
+ * a greyed control reads as half broken rather than as unavailable.
+ * @param metrics - The measurements the card is drawn from.
+ * @param look - See {@link OverlayNameLook}.
+ * @returns The name's rules.
+ */
+export declare function overlayNameStyle(metrics: OverlayMetrics, look: OverlayNameLook): CSSProperties;
+/**
+ * What any name gains when it is the thing carrying the explanation.
+ *
+ * Written apart from {@link overlayNameStyle} because a section heading is a
+ * name too, and the reader has to be taught the convention once rather than
+ * per kind of label.
+ */
+export declare const OVERLAY_HELP_NAME_STYLE: {
+    readonly textDecoration: "underline dotted var(--border-strong)";
+    readonly textUnderlineOffset: 3;
+    readonly cursor: "help";
+};
+/**
+ * What a name gains when its control cannot be reached.
+ *
+ * A control that does not apply is greyed rather than removed, because one
+ * that vanishes teaches the reader nothing about why it went.
+ */
+export declare const OVERLAY_FADED_NAME_STYLE: {
+    readonly opacity: 0.6;
+};
+/**
+ * One caption-and-control pair whose caption sits above the control.
+ *
+ * Reached once the captions are long enough that writing them in front of
+ * their controls would push the card past a third of the figure — at which
+ * point the chrome is hiding more of the picture than the captions are worth.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The stacked row's rules.
+ */
+export declare function overlayStackedRowStyle(metrics: OverlayMetrics): CSSProperties;
+//# sourceMappingURL=overlayRowStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayRowStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayRowStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAOtE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,MAAM,GAChB,aAAa,CASf;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,cAAc,GAAG,MAAM,CAEtE;AAED,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB;;;;CAIF,CAAC;AAEnC,+BAA+B;AAC/B,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,eAAe,GACpB,aAAa,CAWf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB;;;;CAIF,CAAC;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB;;CAEH,CAAC;AAEnC;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAQ7E"}

package/lib/overlay/ui/overlayRowStyles.js

@@ -0,0 +1,135 @@
+/**
+ * The rules one caption-and-control pair is drawn with.
+ *
+ * A row is the unit both a bar and a settings panel are built from, and the
+ * two want different geometry out of it. On a bar the caption sits against its
+ * control and the pair hugs its own width, because the bar is a line of
+ * separate things. In a panel every control has to start at the same x, or the
+ * reader has no column to run their eye down and the panel has to be read
+ * rather than scanned. Both shapes are written here so that a row cannot end
+ * up half one and half the other.
+ *
+ * The name is also where a row's help lives. A panel that hangs a question
+ * mark off every control stacks a column of glyphs down its left edge, and the
+ * eye reads that column before it reads any of the words; a dotted underline
+ * on the name says the same thing with no ink of its own, and leaves the words
+ * the widest thing in the panel.
+ */
+/**
+ * One caption-and-control pair on a bar.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The row's rules.
+ */
+export function overlayRowStyle(metrics) {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: Math.max(4, metrics.gap - 2),
+        minHeight: metrics.controlHeight,
+    };
+}
+/**
+ * One caption-and-control pair in a settings panel.
+ *
+ * Two columns of fixed width rather than a flexible line: the whole complaint
+ * a panel of ragged rows draws is that every control starts at a different x,
+ * and a name column that is only as wide as the words in it is a column that
+ * moves from panel to panel.
+ * @param metrics - The measurements the card is drawn from.
+ * @param nameWidth - Width of the name column, in pixels.
+ * @returns The row's rules.
+ */
+export function overlayGridRowStyle(metrics, nameWidth) {
+    return {
+        display: 'grid',
+        gridTemplateColumns: `${nameWidth}px minmax(0, 1fr)`,
+        alignItems: 'center',
+        columnGap: Math.max(10, metrics.gap + 2),
+        minHeight: metrics.controlHeight,
+        width: '100%',
+    };
+}
+/**
+ * How wide the name column is.
+ *
+ * Eight characters of the caption's own type plus the room a descender needs:
+ * enough for `Bar order` and `Averages` without wrapping, and derived from the
+ * type size rather than fixed, so a panel a reader has asked for at a larger
+ * size widens its column with its words instead of breaking them.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The width, in pixels.
+ */
+export function overlayNameColumnWidth(metrics) {
+    return metrics.labelSize * 8 + 8;
+}
+/** The control's own cell of a panel row. */
+export const OVERLAY_GRID_CELL_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+};
+/**
+ * The name of a control.
+ *
+ * It never wraps: a name breaking over two lines makes the row taller than the
+ * control it names, which reads as a fault in the layout rather than as a long
+ * word. When it carries help it is underlined with dots and takes the help
+ * cursor, which is the one convention that lets every question mark leave the
+ * panel — and it fades with its control, because a name at full strength over
+ * a greyed control reads as half broken rather than as unavailable.
+ * @param metrics - The measurements the card is drawn from.
+ * @param look - See {@link OverlayNameLook}.
+ * @returns The name's rules.
+ */
+export function overlayNameStyle(metrics, look) {
+    const { help = false, disabled = false } = look;
+    return {
+        color: 'var(--text-muted)',
+        fontSize: metrics.labelSize,
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+        userSelect: 'none',
+        ...(help ? OVERLAY_HELP_NAME_STYLE : undefined),
+        ...(disabled ? OVERLAY_FADED_NAME_STYLE : undefined),
+    };
+}
+/**
+ * What any name gains when it is the thing carrying the explanation.
+ *
+ * Written apart from {@link overlayNameStyle} because a section heading is a
+ * name too, and the reader has to be taught the convention once rather than
+ * per kind of label.
+ */
+export const OVERLAY_HELP_NAME_STYLE = {
+    textDecoration: 'underline dotted var(--border-strong)',
+    textUnderlineOffset: 3,
+    cursor: 'help',
+};
+/**
+ * What a name gains when its control cannot be reached.
+ *
+ * A control that does not apply is greyed rather than removed, because one
+ * that vanishes teaches the reader nothing about why it went.
+ */
+export const OVERLAY_FADED_NAME_STYLE = {
+    opacity: 0.6,
+};
+/**
+ * One caption-and-control pair whose caption sits above the control.
+ *
+ * Reached once the captions are long enough that writing them in front of
+ * their controls would push the card past a third of the figure — at which
+ * point the chrome is hiding more of the picture than the captions are worth.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The stacked row's rules.
+ */
+export function overlayStackedRowStyle(metrics) {
+    return {
+        display: 'inline-flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 2,
+        minHeight: metrics.controlHeight,
+    };
+}
+//# sourceMappingURL=overlayRowStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayRowStyles.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayRowStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAMH;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,OAAuB;IACrD,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;QACjC,SAAS,EAAE,OAAO,CAAC,aAAa;KACjC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,mBAAmB,CACjC,OAAuB,EACvB,SAAiB;IAEjB,OAAO;QACL,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,GAAG,SAAS,mBAAmB;QACpD,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;QACxC,SAAS,EAAE,OAAO,CAAC,aAAa;QAChC,KAAK,EAAE,MAAM;KACd,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAuB;IAC5D,OAAO,OAAO,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AACnC,CAAC;AAED,6CAA6C;AAC7C,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,CAAC;CACqB,CAAC;AAgBnC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAAuB,EACvB,IAAqB;IAErB,MAAM,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;IAChD,OAAO;QACL,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,OAAO,CAAC,SAAS;QAC3B,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,MAAM;QAClB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/C,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,CAAC;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,cAAc,EAAE,uCAAuC;IACvD,mBAAmB,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM;CACkB,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,OAAO,EAAE,GAAG;CACoB,CAAC;AAEnC;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAuB;IAC5D,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,YAAY;QACxB,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,OAAO,CAAC,aAAa;KACjC,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,51 @@
+/**
+ * What a stepper is drawn with: one sunken track holding two square buttons
+ * and the value between them.
+ *
+ * They are their own module because the three rules are read together — the
+ * track's padding, the button's side and the value's width have to add up to
+ * the control height the rest of the card is built on, and a change to one of
+ * them that is not a change to the others is a bug.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../core/overlayMetrics.ts';
+/**
+ * The two buttons of a stepper and the value between them.
+ *
+ * They are packed tighter than the card's own gap so the three read as one
+ * control rather than as two buttons that happen to sit beside a number.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The stepper's rules.
+ */
+export declare function overlayStepperStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * One of a stepper's two buttons.
+ *
+ * Square and unpadded, because a stepper's job is to be pressed repeatedly and
+ * the two buttons should sit within a thumb's width of each other. Blueprint's
+ * own button carries the padding of a button that holds a word, which is what
+ * made `− 2 +` measure ninety-six pixels for a single digit.
+ *
+ * At the end of its range the button fades and stops offering the pointer a
+ * hand. A `disabled` attribute alone stops the click but says nothing before
+ * it: the reader presses `+` on a four-component model, nothing happens, and
+ * the only reading available to them is that the control is broken.
+ * @param metrics - The measurements the card is drawn from.
+ * @param spent - Whether the range has no more room in this direction.
+ * @returns The button's rules.
+ */
+export declare function overlayStepperButtonStyle(metrics: OverlayMetrics, spent: boolean): CSSProperties;
+/**
+ * The value a stepper is showing.
+ *
+ * The digits are tabular and the box is held at the width of the longest value
+ * the range can produce, because a value that changes width as the reader
+ * steps through it drags the buttons out from under the pointer that is
+ * pressing them — and stepping from 9 to 10 is exactly when the reader is
+ * pressing the same button repeatedly.
+ * @param metrics - The measurements the card is drawn from.
+ * @param widest - How many characters the longest value writes.
+ * @returns The value's rules.
+ */
+export declare function overlayNumberValueStyle(metrics: OverlayMetrics, widest: number): CSSProperties;
+//# sourceMappingURL=overlayStepperStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayStepperStyles.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/overlayStepperStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAU1E;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,OAAO,GACb,aAAa,CAmBf;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,MAAM,GACb,aAAa,CAaf"}

package/lib/overlay/ui/overlayStepperStyles.js

@@ -0,0 +1,96 @@
+/**
+ * What a stepper is drawn with: one sunken track holding two square buttons
+ * and the value between them.
+ *
+ * They are their own module because the three rules are read together — the
+ * track's padding, the button's side and the value's width have to add up to
+ * the control height the rest of the card is built on, and a change to one of
+ * them that is not a change to the others is a bug.
+ */
+/**
+ * The two buttons of a stepper and the value between them.
+ *
+ * They are packed tighter than the card's own gap so the three read as one
+ * control rather than as two buttons that happen to sit beside a number.
+ * @param metrics - The measurements the card is drawn from.
+ * @returns The stepper's rules.
+ */
+export function overlayStepperStyle(metrics) {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0,
+        height: metrics.controlHeight,
+        padding: 2,
+        borderRadius: metrics.controlRadius,
+        background: 'var(--surface-sunken)',
+    };
+}
+/**
+ * One of a stepper's two buttons.
+ *
+ * Square and unpadded, because a stepper's job is to be pressed repeatedly and
+ * the two buttons should sit within a thumb's width of each other. Blueprint's
+ * own button carries the padding of a button that holds a word, which is what
+ * made `− 2 +` measure ninety-six pixels for a single digit.
+ *
+ * At the end of its range the button fades and stops offering the pointer a
+ * hand. A `disabled` attribute alone stops the click but says nothing before
+ * it: the reader presses `+` on a four-component model, nothing happens, and
+ * the only reading available to them is that the control is broken.
+ * @param metrics - The measurements the card is drawn from.
+ * @param spent - Whether the range has no more room in this direction.
+ * @returns The button's rules.
+ */
+export function overlayStepperButtonStyle(metrics, spent) {
+    const side = metrics.controlHeight - 4;
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: side,
+        height: side,
+        padding: 0,
+        border: 'none',
+        borderRadius: Math.max(3, metrics.controlRadius - 2),
+        background: 'transparent',
+        color: spent ? 'var(--text-faint)' : 'var(--text-muted)',
+        font: 'inherit',
+        fontSize: metrics.fontSize + 1,
+        lineHeight: 1,
+        cursor: spent ? 'default' : 'pointer',
+        opacity: spent ? 0.45 : 1,
+    };
+}
+/**
+ * The value a stepper is showing.
+ *
+ * The digits are tabular and the box is held at the width of the longest value
+ * the range can produce, because a value that changes width as the reader
+ * steps through it drags the buttons out from under the pointer that is
+ * pressing them — and stepping from 9 to 10 is exactly when the reader is
+ * pressing the same button repeatedly.
+ * @param metrics - The measurements the card is drawn from.
+ * @param widest - How many characters the longest value writes.
+ * @returns The value's rules.
+ */
+export function overlayNumberValueStyle(metrics, widest) {
+    return {
+        minWidth: Math.max(metrics.fontSize, Math.ceil(widest * metrics.fontSize * CHARACTER_WIDTH)),
+        padding: '0 3px',
+        color: 'var(--text)',
+        fontSize: metrics.fontSize,
+        fontVariantNumeric: 'tabular-nums',
+        textAlign: 'center',
+        userSelect: 'none',
+    };
+}
+/**
+ * How wide one tabular digit is, as a fraction of the type size.
+ *
+ * Six tenths of an em is what the interface faces of every platform the family
+ * runs on set their figures at; a unit written in letters is narrower than
+ * that, so the reserved width errs wide and the buttons never move.
+ */
+const CHARACTER_WIDTH = 0.6;
+//# sourceMappingURL=overlayStepperStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayStepperStyles.js","sourceRoot":"","sources":["../../../src/overlay/ui/overlayStepperStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;;;;;;GAOG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAuB;IACzD,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,OAAO,CAAC,aAAa;QAC7B,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,OAAO,CAAC,aAAa;QACnC,UAAU,EAAE,uBAAuB;KACpC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,yBAAyB,CACvC,OAAuB,EACvB,KAAc;IAEd,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC;IACvC,OAAO;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC;QACpD,UAAU,EAAE,aAAa;QACzB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB;QACxD,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAG,CAAC;QAC9B,UAAU,EAAE,CAAC;QACb,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACrC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KAC1B,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAuB,EACvB,MAAc;IAEd,OAAO;QACL,QAAQ,EAAE,IAAI,CAAC,GAAG,CAChB,OAAO,CAAC,QAAQ,EAChB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,QAAQ,GAAG,eAAe,CAAC,CACvD;QACD,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,kBAAkB,EAAE,cAAc;QAClC,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,MAAM;KACnB,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,eAAe,GAAG,GAAG,CAAC"}