react-cheminfo 0.28.0 → 0.29.0

package/lib/ir/ui/useIrZoom.js

@@ -0,0 +1,46 @@
+/**
+ * The generic zoom, told what an infrared window is fitted to and how its value
+ * axis behaves.
+ *
+ * Every gesture is `useChartZoom` in the shared chart and none of it is
+ * written here. What is about infrared is the three things handed in: the fit,
+ * which has to refit when the mode changes because the value axis is replaced
+ * rather than nudged; the y axis rules, which are where percent transmittance
+ * says that its baseline is 100 and not zero; and which gestures the mode
+ * answers at all, which is where it says that a rectangle is the only drag worth
+ * making on it and that the wheel belongs to the page.
+ */
+import { useMemo } from 'react';
+import { useChartZoom } from "../../chart/ui/useChartZoom.js";
+import { fittedTo, fullDomain } from "../core/irDomain.js";
+import { yAxisRules, zoomGestures } from "../core/irMode.js";
+/**
+ * Zoom an infrared chart by dragging it, and — reading absorbance — by the wheel.
+ *
+ * A double click always fits everything again, in either mode: it is the way
+ * back from a zoom, and a chart that offers a gesture has to offer the way out
+ * of it.
+ * @param options - The chart, what it holds and which axis it is read in.
+ * @returns The window and the gestures that move it.
+ */
+export function useIrZoom(options) {
+    const { spectra, mode, svgRef, plot, domain = null, drag = 'xAxis', } = options;
+    const fitted = useMemo(() => fullDomain(spectra, mode), [spectra, mode]);
+    const fitKey = useMemo(() => fittedTo(spectra, mode), [spectra, mode]);
+    const yAxis = useMemo(() => yAxisRules(mode), [mode]);
+    const gestures = useMemo(() => zoomGestures(mode, drag), [mode, drag]);
+    // `reverseX` is not decoration: the hook measures every gesture by inverting a
+    // pixel through the scale it builds, so it has to build the same reversed one
+    // the chart draws with.
+    return useChartZoom({
+        fitted,
+        fitKey,
+        svgRef,
+        plot,
+        yAxis,
+        domain,
+        gestures,
+        reverseX: true,
+    });
+}
+//# sourceMappingURL=useIrZoom.js.map

package/lib/ir/ui/useIrZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIrZoom.js","sourceRoot":"","sources":["../../../src/ir/ui/useIrZoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA2B7D;;;;;;;;GAQG;AACH,MAAM,UAAU,SAAS,CAAC,OAAsB;IAC9C,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,IAAI,GAAG,OAAO,GACf,GAAG,OAAO,CAAC;IAEZ,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEvE,+EAA+E;IAC/E,8EAA8E;IAC9E,wBAAwB;IACxB,OAAO,YAAY,CAAC;QAClB,MAAM;QACN,MAAM;QACN,MAAM;QACN,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ;QACR,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;AACL,CAAC"}

package/lib/ir.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Displaying and assigning infrared spectra: the chart, the band table and the
+ * whole editor.
+ *
+ * A door of its own, and not part of `react-cheminfo/core` or
+ * `react-cheminfo/ui`, because reading a spectrum drags the formats it may
+ * arrive in — `ir-spectrum` for the band correlations, `convert-to-jcamp` for
+ * writing them back out, and a JCAMP or SPC reader fetched only once the bytes
+ * turn out to need it. A site with no spectra to look at installs none of it.
+ */
+export * from './ir/core/index.ts';
+export * from './ir/ui/index.ts';
+//# sourceMappingURL=ir.d.ts.map

package/lib/ir.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ir.d.ts","sourceRoot":"","sources":["../src/ir.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/lib/ir.js

@@ -0,0 +1,13 @@
+/**
+ * Displaying and assigning infrared spectra: the chart, the band table and the
+ * whole editor.
+ *
+ * A door of its own, and not part of `react-cheminfo/core` or
+ * `react-cheminfo/ui`, because reading a spectrum drags the formats it may
+ * arrive in — `ir-spectrum` for the band correlations, `convert-to-jcamp` for
+ * writing them back out, and a JCAMP or SPC reader fetched only once the bytes
+ * turn out to need it. A site with no spectra to look at installs none of it.
+ */
+export * from "./ir/core/index.js";
+export * from "./ir/ui/index.js";
+//# sourceMappingURL=ir.js.map

package/lib/ir.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ir.js","sourceRoot":"","sources":["../src/ir.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/lib/panel/core/dialogStyles.d.ts

@@ -0,0 +1,13 @@
+/** What a paragraph inside a dialog section looks like. */
+export declare const paragraphStyle: {
+    readonly margin: 0;
+};
+/** What a list of things a panel holds looks like. */
+export declare const listStyle: {
+    readonly margin: 0;
+    readonly paddingLeft: 18;
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: 4;
+};
+//# sourceMappingURL=dialogStyles.d.ts.map

package/lib/panel/core/dialogStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogStyles.d.ts","sourceRoot":"","sources":["../../../src/panel/core/dialogStyles.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,eAAO,MAAM,cAAc;;CAAyB,CAAC;AAErD,sDAAsD;AACtD,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC"}

package/lib/panel/core/dialogStyles.js

@@ -0,0 +1,11 @@
+/** What a paragraph inside a dialog section looks like. */
+export const paragraphStyle = { margin: 0 };
+/** What a list of things a panel holds looks like. */
+export const listStyle = {
+    margin: 0,
+    paddingLeft: 18,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+};
+//# sourceMappingURL=dialogStyles.js.map

package/lib/panel/core/dialogStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogStyles.js","sourceRoot":"","sources":["../../../src/panel/core/dialogStyles.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW,CAAC;AAErD,sDAAsD;AACtD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,EAAE;IACf,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACE,CAAC"}

package/lib/panel/core/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The chrome an editor is laid out with, below the components that wear it.
+ *
+ * A panel, a status bar and a dialog look the same in every editor of the
+ * family, and they have to: a reader who has learnt one editor has learnt the
+ * others, and that only holds while the parts are literally the same parts.
+ * What is here is the half that draws nothing — the style objects each part is
+ * built from, the questions the DOM is asked before a shortcut fires, and the
+ * sentences a reader is given when a file goes wrong.
+ */
+export { listStyle, paragraphStyle } from './dialogStyles.ts';
+export { isEditingField } from './isEditingField.ts';
+export { inlineLabelStyle, labelRowStyle, labelStyle, panelBodyStyle, panelCapsuleGroupStyle, panelCapsuleRowStyle, panelCapsulesStyle, panelCellStyle, panelColumnButtonStyle, panelEmptyStyle, panelHeaderCellStyle, panelHeadingStyle, panelNumberCellStyle, panelScrollAreaStyle, panelStickyHeaderStyle, panelStyle, panelTableStyle, panelToolbarCountStyle, panelToolbarStyle, shortPanelStyle, smallCapsuleStyle, } from './panelStyles.ts';
+export type { RowPlacement, RowSpacers } from './rowSpacers.ts';
+export { rowSpacers } from './rowSpacers.ts';
+export { countLabel, statusBarStyle, statusItemStyle, statusMutedStyle, statusSpacerStyle, } from './statusBar.ts';
+export { filterNeedle, matchesNeedle } from './textFilter.ts';
+export { yieldToPainting } from './yieldToPainting.ts';
+//# sourceMappingURL=index.d.ts.map

package/lib/panel/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panel/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,UAAU,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/panel/core/index.js

@@ -0,0 +1,18 @@
+/**
+ * The chrome an editor is laid out with, below the components that wear it.
+ *
+ * A panel, a status bar and a dialog look the same in every editor of the
+ * family, and they have to: a reader who has learnt one editor has learnt the
+ * others, and that only holds while the parts are literally the same parts.
+ * What is here is the half that draws nothing — the style objects each part is
+ * built from, the questions the DOM is asked before a shortcut fires, and the
+ * sentences a reader is given when a file goes wrong.
+ */
+export { listStyle, paragraphStyle } from "./dialogStyles.js";
+export { isEditingField } from "./isEditingField.js";
+export { inlineLabelStyle, labelRowStyle, labelStyle, panelBodyStyle, panelCapsuleGroupStyle, panelCapsuleRowStyle, panelCapsulesStyle, panelCellStyle, panelColumnButtonStyle, panelEmptyStyle, panelHeaderCellStyle, panelHeadingStyle, panelNumberCellStyle, panelScrollAreaStyle, panelStickyHeaderStyle, panelStyle, panelTableStyle, panelToolbarCountStyle, panelToolbarStyle, shortPanelStyle, smallCapsuleStyle, } from "./panelStyles.js";
+export { rowSpacers } from "./rowSpacers.js";
+export { countLabel, statusBarStyle, statusItemStyle, statusMutedStyle, statusSpacerStyle, } from "./statusBar.js";
+export { filterNeedle, matchesNeedle } from "./textFilter.js";
+export { yieldToPainting } from "./yieldToPainting.js";
+//# sourceMappingURL=index.js.map

package/lib/panel/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/panel/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,UAAU,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/panel/core/isEditingField.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Whether an event belongs to something the user is typing in.
+ *
+ * An editor listens on the document for shortcuts and for pastes, so both have
+ * to keep their hands off every field on the page: an `f` typed into a mass box,
+ * a row filter or a sequence field is part of what is being written, not a chart
+ * being fitted or a glycan being drawn.
+ *
+ * `isContentEditable` is asked as well as the tag, because a rich text box is a
+ * `div` and swallowing its keys is the same mistake made less visibly. Two of
+ * the three copies this replaces had lost that line — one of them while keeping
+ * the sentence claiming it.
+ * @param target - What the event was delivered to.
+ * @returns Whether it should be left alone.
+ */
+export declare function isEditingField(target: EventTarget | null): boolean;
+//# sourceMappingURL=isEditingField.d.ts.map

package/lib/panel/core/isEditingField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isEditingField.d.ts","sourceRoot":"","sources":["../../../src/panel/core/isEditingField.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAIlE"}

package/lib/panel/core/isEditingField.js

@@ -0,0 +1,25 @@
+/**
+ * Whether an event belongs to something the user is typing in.
+ *
+ * An editor listens on the document for shortcuts and for pastes, so both have
+ * to keep their hands off every field on the page: an `f` typed into a mass box,
+ * a row filter or a sequence field is part of what is being written, not a chart
+ * being fitted or a glycan being drawn.
+ *
+ * `isContentEditable` is asked as well as the tag, because a rich text box is a
+ * `div` and swallowing its keys is the same mistake made less visibly. Two of
+ * the three copies this replaces had lost that line — one of them while keeping
+ * the sentence claiming it.
+ * @param target - What the event was delivered to.
+ * @returns Whether it should be left alone.
+ */
+export function isEditingField(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return EDITING_TAGS.has(target.tagName);
+}
+/** Elements an event belongs to rather than to the editor around them. */
+const EDITING_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+//# sourceMappingURL=isEditingField.js.map

package/lib/panel/core/isEditingField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isEditingField.js","sourceRoot":"","sources":["../../../src/panel/core/isEditingField.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,cAAc,CAAC,MAA0B;IACvD,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC;QAAE,OAAO,KAAK,CAAC;IACnD,IAAI,MAAM,CAAC,iBAAiB;QAAE,OAAO,IAAI,CAAC;IAC1C,OAAO,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC1C,CAAC;AAED,0EAA0E;AAC1E,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC"}

package/lib/panel/core/panelStyles.d.ts

@@ -0,0 +1,242 @@
+/**
+ * What every side panel is built out of, in every editor.
+ *
+ * A panel is the same three parts each time — the box it fills, a toolbar of
+ * its own actions under the header, and the body that scrolls — and the reason
+ * one file holds the measurements rather than each package holding its own is
+ * that a page shows the editors together: a glycan drawn beside its spectrum
+ * stacks panels from two packages in one accordion, and a panel that padded
+ * itself differently reads as a step in the column.
+ *
+ * Three copies of this file had already drifted — one had renamed half of it,
+ * one had lost a border, and their toolbars stood at two different heights — so
+ * the divergence is not hypothetical.
+ */
+/** The box a panel fills: it takes the height it is given and never overflows it. */
+export declare const panelStyle: {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly flex: "1 1 1px";
+    readonly minHeight: 0;
+};
+/**
+ * A panel that only holds what it holds, and is as tall as that.
+ *
+ * The stack gives it the height its content asks for rather than a share of the
+ * side, which is what a panel of a few rows wants.
+ */
+export declare const shortPanelStyle: {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: 6;
+    readonly padding: 8;
+};
+/**
+ * The row of a panel's own actions, directly under its header.
+ *
+ * The header carries shell chrome only, so what a panel switches on and off
+ * travels with the panel instead. No padding of its own: what sits in it is a
+ * `Toolbar`, which spaces its own items, and a row that padded them again stood
+ * taller than the same row in the editor next door.
+ */
+export declare const panelToolbarStyle: {
+    readonly display: "flex";
+    readonly borderBottom: "1px solid rgb(217 223 230)";
+};
+/**
+ * How much of a list is left, at the far end of the panel's toolbar row.
+ *
+ * What a filter left is read while reaching for the filter rather than while
+ * reading the rows, so it belongs beside the actions; and at the end of the row,
+ * where it stays put as actions are added beside them.
+ */
+export declare const panelToolbarCountStyle: {
+    readonly marginLeft: "auto";
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly padding: "0 8px";
+    readonly fontSize: 11;
+    readonly opacity: 0.7;
+};
+/** What is under the toolbar: the panel's content, scrolling within its share. */
+export declare const panelBodyStyle: {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: 6;
+    readonly padding: 8;
+    readonly flex: "1 1 1px";
+    readonly minHeight: 0;
+    readonly overflow: "auto";
+};
+/**
+ * A list inside a panel body that scrolls on its own.
+ *
+ * A table with a sticky header cannot share the body's scroll, because a scroll
+ * container's padding is inside what it clips: the rows leaving the top show in
+ * the eight pixels above a header pinned to `top: 0`, so the list appears to run
+ * behind its own header instead of stopping at it. Scrolling the rows in a
+ * region with no padding of its own pins the header to the top of what is
+ * actually moving, and leaves whatever the panel wrote above the table — the
+ * count, the filter box — where it can still be read at the thousandth row.
+ */
+export declare const panelScrollAreaStyle: {
+    readonly flex: "1 1 1px";
+    readonly minHeight: 0;
+    readonly overflow: "auto";
+};
+/** A table of rows filling the width of the panel it is read in. */
+export declare const panelTableStyle: {
+    readonly width: "100%";
+    readonly borderCollapse: "collapse";
+    readonly fontSize: 11;
+    readonly fontVariantNumeric: "tabular-nums";
+};
+/**
+ * A heading cell that stays put while the rows scroll under it.
+ *
+ * It pads nothing, because what it holds is a button that pads itself: a
+ * heading that sorts has to be clickable across the whole cell, and padding the
+ * cell instead would leave a dead border around the target.
+ */
+export declare const panelStickyHeaderStyle: {
+    readonly position: "sticky";
+    readonly top: 0;
+    readonly zIndex: 1;
+    readonly background: "rgb(255 255 255)";
+    readonly textAlign: "left";
+    readonly padding: 0;
+    readonly borderBottom: "1px solid rgb(217 223 230)";
+};
+/** The same heading when it is plain text, which has to pad itself. */
+export declare const panelHeaderCellStyle: {
+    readonly padding: "2px 6px";
+    readonly whiteSpace: "nowrap";
+    readonly position: "sticky";
+    readonly top: 0;
+    readonly zIndex: 1;
+    readonly background: "rgb(255 255 255)";
+    readonly textAlign: "left";
+    readonly borderBottom: "1px solid rgb(217 223 230)";
+};
+/**
+ * A column heading, which is also how the table is reordered.
+ *
+ * The headers sort rather than a select box above the table, because which order
+ * a table is read in changes with every question asked of it, and a select costs
+ * two clicks and a menu for what a column heading answers in one.
+ */
+export declare const panelColumnButtonStyle: {
+    readonly all: "unset";
+    readonly display: "block";
+    readonly width: "100%";
+    readonly padding: "3px 4px";
+    readonly cursor: "pointer";
+    readonly fontSize: 10;
+    readonly fontWeight: 600;
+    readonly textTransform: "uppercase";
+    readonly letterSpacing: "0.04em";
+    readonly opacity: 0.6;
+};
+/** An ordinary cell of such a table. */
+export declare const panelCellStyle: {
+    readonly padding: "1px 6px";
+    readonly borderBottom: "1px solid rgb(238 241 245)";
+    readonly whiteSpace: "nowrap";
+};
+/** A cell holding a number, read down the column against its neighbours. */
+export declare const panelNumberCellStyle: {
+    readonly textAlign: "right";
+    readonly padding: "1px 6px";
+    readonly borderBottom: "1px solid rgb(238 241 245)";
+    readonly whiteSpace: "nowrap";
+};
+/** What a value is, written small and quiet above it. */
+export declare const labelStyle: {
+    readonly fontSize: 11;
+    readonly fontWeight: 600;
+    readonly textTransform: "uppercase";
+    readonly letterSpacing: "0.04em";
+    readonly opacity: 0.6;
+};
+/** A label with whatever acts on the value it names pushed to the far end. */
+export declare const labelRowStyle: {
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "space-between";
+    readonly gap: 4;
+};
+/** A row of capsules under such a label, wrapping when it runs out of width. */
+export declare const panelCapsulesStyle: {
+    readonly display: "flex";
+    readonly flexWrap: "wrap";
+    readonly alignItems: "center";
+    readonly gap: 4;
+    readonly marginTop: 4;
+};
+/**
+ * The same label written beside what it names rather than above it.
+ *
+ * A label costs a whole line of the panel where it stands on its own, and a
+ * choice of two or three capsules does not fill the line it is then given. Set
+ * beside them the label reads as the question the capsules answer, and two such
+ * questions fit in the height one used to take.
+ */
+export declare const inlineLabelStyle: {
+    readonly fontSize: 10;
+    readonly flex: "0 0 auto";
+    readonly fontWeight: 600;
+    readonly textTransform: "uppercase";
+    readonly letterSpacing: "0.04em";
+    readonly opacity: 0.6;
+};
+/** One inline label and the capsules that answer it, kept on one line. */
+export declare const panelCapsuleGroupStyle: {
+    readonly display: "flex";
+    readonly flexWrap: "wrap";
+    readonly alignItems: "center";
+    readonly gap: 4;
+};
+/**
+ * Several such groups on one line, wrapping group by group.
+ *
+ * The wider gap between groups than within one is what keeps them legible as
+ * separate questions once they share a line: capsules four pixels apart belong
+ * to the label on their left, and the group after it starts a hand's width
+ * further along.
+ */
+export declare const panelCapsuleRowStyle: {
+    readonly display: "flex";
+    readonly flexWrap: "wrap";
+    readonly alignItems: "center";
+    readonly gap: "4px 12px";
+};
+/**
+ * A capsule sized for such a row.
+ *
+ * Blueprint's tag has no size below its medium one, so the smaller capsule is
+ * asked for here rather than through a prop. Written as a style so a capsule
+ * carrying a colour of its own can spread it over this one.
+ */
+export declare const smallCapsuleStyle: {
+    readonly minHeight: 0;
+    readonly minWidth: 0;
+    readonly padding: "1px 5px";
+    readonly fontSize: 10;
+    readonly lineHeight: "14px";
+};
+/** The name of one group of a list, with the room a group needs above it. */
+export declare const panelHeadingStyle: {
+    readonly padding: "6px 4px 2px";
+    readonly fontSize: 11;
+    readonly fontWeight: 600;
+    readonly textTransform: "uppercase";
+    readonly letterSpacing: "0.04em";
+    readonly opacity: 0.6;
+};
+/** What a panel says instead of a list, when it has nothing to list. */
+export declare const panelEmptyStyle: {
+    readonly padding: 8;
+    readonly fontSize: 12;
+    readonly opacity: 0.7;
+};
+//# sourceMappingURL=panelStyles.d.ts.map

package/lib/panel/core/panelStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelStyles.d.ts","sourceRoot":"","sources":["../../../src/panel/core/panelStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,qFAAqF;AACrF,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB;;;CAGpB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB;;;;;;;CAOzB,CAAC;AAEX,kFAAkF;AAClF,eAAO,MAAM,cAAc;;;;;;;;CAQjB,CAAC;AAEX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,oEAAoE;AACpE,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;CAQzB,CAAC;AAEX,uEAAuE;AACvE,eAAO,MAAM,oBAAoB;;;;;;;;;CAIvB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;CAWzB,CAAC;AAEX,wCAAwC;AACxC,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX,4EAA4E;AAC5E,eAAO,MAAM,oBAAoB;;;;;CAGvB,CAAC;AAEX,yDAAyD;AACzD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,8EAA8E;AAC9E,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,gFAAgF;AAChF,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB;;;;;;;CAInB,CAAC;AAEX,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB;;;;;CAKzB,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB;;;;;;CAMpB,CAAC;AAEX,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB;;;;;;;CAGpB,CAAC;AAEX,wEAAwE;AACxE,eAAO,MAAM,eAAe;;;;CAIlB,CAAC"}