react-cheminfo 0.27.0 → 0.29.0

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

package/lib/panel/core/panelStyles.js

@@ -0,0 +1,228 @@
+/**
+ * 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 const panelStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 1px',
+    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 const shortPanelStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    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 const panelToolbarStyle = {
+    display: 'flex',
+    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 const panelToolbarCountStyle = {
+    marginLeft: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 8px',
+    fontSize: 11,
+    opacity: 0.7,
+};
+/** What is under the toolbar: the panel's content, scrolling within its share. */
+export const panelBodyStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    padding: 8,
+    flex: '1 1 1px',
+    minHeight: 0,
+    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 const panelScrollAreaStyle = {
+    flex: '1 1 1px',
+    minHeight: 0,
+    overflow: 'auto',
+};
+/** A table of rows filling the width of the panel it is read in. */
+export const panelTableStyle = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: 11,
+    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 const panelStickyHeaderStyle = {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+    background: 'rgb(255 255 255)',
+    textAlign: 'left',
+    padding: 0,
+    borderBottom: '1px solid rgb(217 223 230)',
+};
+/** The same heading when it is plain text, which has to pad itself. */
+export const panelHeaderCellStyle = {
+    ...panelStickyHeaderStyle,
+    padding: '2px 6px',
+    whiteSpace: 'nowrap',
+};
+/**
+ * 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 const panelColumnButtonStyle = {
+    all: 'unset',
+    display: 'block',
+    width: '100%',
+    padding: '3px 4px',
+    cursor: 'pointer',
+    fontSize: 10,
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.04em',
+    opacity: 0.6,
+};
+/** An ordinary cell of such a table. */
+export const panelCellStyle = {
+    padding: '1px 6px',
+    borderBottom: '1px solid rgb(238 241 245)',
+    whiteSpace: 'nowrap',
+};
+/** A cell holding a number, read down the column against its neighbours. */
+export const panelNumberCellStyle = {
+    ...panelCellStyle,
+    textAlign: 'right',
+};
+/** What a value is, written small and quiet above it. */
+export const labelStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.04em',
+    opacity: 0.6,
+};
+/** A label with whatever acts on the value it names pushed to the far end. */
+export const labelRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 4,
+};
+/** A row of capsules under such a label, wrapping when it runs out of width. */
+export const panelCapsulesStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 4,
+    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 const inlineLabelStyle = {
+    ...labelStyle,
+    fontSize: 10,
+    flex: '0 0 auto',
+};
+/** One inline label and the capsules that answer it, kept on one line. */
+export const panelCapsuleGroupStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    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 const panelCapsuleRowStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    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 const smallCapsuleStyle = {
+    minHeight: 0,
+    minWidth: 0,
+    padding: '1px 5px',
+    fontSize: 10,
+    lineHeight: '14px',
+};
+/** The name of one group of a list, with the room a group needs above it. */
+export const panelHeadingStyle = {
+    ...labelStyle,
+    padding: '6px 4px 2px',
+};
+/** What a panel says instead of a list, when it has nothing to list. */
+export const panelEmptyStyle = {
+    padding: 8,
+    fontSize: 12,
+    opacity: 0.7,
+};
+//# sourceMappingURL=panelStyles.js.map

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * The empty room a virtualised table leaves around the rows it actually drew.
+ *
+ * A table that draws twenty of five thousand rows must still be five thousand
+ * rows tall, or the scrollbar would say the list is a screenful long and the
+ * rows would jump under the thumb. Two empty rows carry that height — one above
+ * the drawn ones, one below — which keeps every cell in the column layout the
+ * browser computes for a real table, where absolutely positioning the rows
+ * would not.
+ */
+/** Where one drawn row sits in the list, in pixels from the top of it. */
+export interface RowPlacement {
+    /** Its top edge. */
+    start: number;
+    /** Its bottom edge. */
+    end: number;
+}
+/** The two empty rows standing in for everything that was not drawn. */
+export interface RowSpacers {
+    /** How tall the one above the drawn rows is, in pixels. */
+    before: number;
+    /** How tall the one below them is. */
+    after: number;
+}
+/**
+ * The height of the empty row above the drawn rows and of the one below.
+ *
+ * With nothing drawn — the first render, before the scroll region has been
+ * measured, and every render of an empty table — the whole list becomes the
+ * lower spacer. That is what gives the region a scrollbar of the right length
+ * on the render before it knows which rows are in view, instead of a table that
+ * measures nothing because it is showing nothing.
+ * @param drawn - The rows being drawn, in order.
+ * @param total - How tall the whole list is, in pixels.
+ * @returns The height of each spacer.
+ */
+export declare function rowSpacers(drawn: readonly RowPlacement[], total: number): RowSpacers;
+//# sourceMappingURL=rowSpacers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rowSpacers.d.ts","sourceRoot":"","sources":["../../../src/panel/core/rowSpacers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,MAAM,WAAW,YAAY;IAC3B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wEAAwE;AACxE,MAAM,WAAW,UAAU;IACzB,2DAA2D;IAC3D,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,YAAY,EAAE,EAC9B,KAAK,EAAE,MAAM,GACZ,UAAU,CAOZ"}

package/lib/panel/core/rowSpacers.js

@@ -0,0 +1,31 @@
+/**
+ * The empty room a virtualised table leaves around the rows it actually drew.
+ *
+ * A table that draws twenty of five thousand rows must still be five thousand
+ * rows tall, or the scrollbar would say the list is a screenful long and the
+ * rows would jump under the thumb. Two empty rows carry that height — one above
+ * the drawn ones, one below — which keeps every cell in the column layout the
+ * browser computes for a real table, where absolutely positioning the rows
+ * would not.
+ */
+/**
+ * The height of the empty row above the drawn rows and of the one below.
+ *
+ * With nothing drawn — the first render, before the scroll region has been
+ * measured, and every render of an empty table — the whole list becomes the
+ * lower spacer. That is what gives the region a scrollbar of the right length
+ * on the render before it knows which rows are in view, instead of a table that
+ * measures nothing because it is showing nothing.
+ * @param drawn - The rows being drawn, in order.
+ * @param total - How tall the whole list is, in pixels.
+ * @returns The height of each spacer.
+ */
+export function rowSpacers(drawn, total) {
+    const first = drawn[0];
+    const last = drawn.at(-1);
+    if (first === undefined || last === undefined) {
+        return { before: 0, after: Math.max(0, total) };
+    }
+    return { before: first.start, after: Math.max(0, total - last.end) };
+}
+//# sourceMappingURL=rowSpacers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rowSpacers.js","sourceRoot":"","sources":["../../../src/panel/core/rowSpacers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAkBH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CACxB,KAA8B,EAC9B,KAAa;IAEb,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACvB,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QAC9C,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAClD,CAAC;IACD,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACvE,CAAC"}

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

@@ -0,0 +1,44 @@
+/**
+ * The strip along the foot of an editor, which every one of them writes alike.
+ *
+ * A status bar says what is open and what is under the pointer, in one line of
+ * small type over a rule. The geometry is the same in every viewer — that is
+ * what makes it read as one application rather than three — so it lives here,
+ * and each viewer adds only the items it has to write and whatever colour one
+ * of them needs.
+ */
+/** The strip itself: one row, a rule above it, nothing wrapping. */
+export declare const statusBarStyle: {
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly gap: 16;
+    readonly padding: "4px 10px";
+    readonly minHeight: 30;
+    readonly borderTop: "1px solid rgb(217 223 230)";
+    readonly fontSize: 13;
+    readonly whiteSpace: "nowrap";
+};
+/** One thing the bar says, icon and text on one line. */
+export declare const statusItemStyle: {
+    readonly display: "inline-flex";
+    readonly alignItems: "center";
+};
+/** An item that is context rather than an answer. */
+export declare const statusMutedStyle: {
+    readonly opacity: 0.6;
+    readonly display: "inline-flex";
+    readonly alignItems: "center";
+};
+/** What pushes the items after it to the far end of the bar. */
+export declare const statusSpacerStyle: {
+    readonly flex: 1;
+};
+/**
+ * A count with the noun it counts, singular where it has to be.
+ * @param count - How many.
+ * @param singular - What one of them is called.
+ * @param plural - What several are called.
+ * @returns The phrase, e.g. `1 peak` or `412 peaks`.
+ */
+export declare function countLabel(count: number, singular: string, plural: string): string;
+//# sourceMappingURL=statusBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"statusBar.d.ts","sourceRoot":"","sources":["../../../src/panel/core/statusBar.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,oEAAoE;AACpE,eAAO,MAAM,cAAc;;;;;;;;;CASjB,CAAC;AAEX,yDAAyD;AACzD,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,qDAAqD;AACrD,eAAO,MAAM,gBAAgB;;;;CAAgD,CAAC;AAE9E,gEAAgE;AAChE,eAAO,MAAM,iBAAiB;;CAAuB,CAAC;AAEtD;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,GACb,MAAM,CAER"}

package/lib/panel/core/statusBar.js

@@ -0,0 +1,40 @@
+/**
+ * The strip along the foot of an editor, which every one of them writes alike.
+ *
+ * A status bar says what is open and what is under the pointer, in one line of
+ * small type over a rule. The geometry is the same in every viewer — that is
+ * what makes it read as one application rather than three — so it lives here,
+ * and each viewer adds only the items it has to write and whatever colour one
+ * of them needs.
+ */
+/** The strip itself: one row, a rule above it, nothing wrapping. */
+export const statusBarStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 16,
+    padding: '4px 10px',
+    minHeight: 30,
+    borderTop: '1px solid rgb(217 223 230)',
+    fontSize: 13,
+    whiteSpace: 'nowrap',
+};
+/** One thing the bar says, icon and text on one line. */
+export const statusItemStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+};
+/** An item that is context rather than an answer. */
+export const statusMutedStyle = { ...statusItemStyle, opacity: 0.6 };
+/** What pushes the items after it to the far end of the bar. */
+export const statusSpacerStyle = { flex: 1 };
+/**
+ * A count with the noun it counts, singular where it has to be.
+ * @param count - How many.
+ * @param singular - What one of them is called.
+ * @param plural - What several are called.
+ * @returns The phrase, e.g. `1 peak` or `412 peaks`.
+ */
+export function countLabel(count, singular, plural) {
+    return `${count} ${count === 1 ? singular : plural}`;
+}
+//# sourceMappingURL=statusBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"statusBar.js","sourceRoot":"","sources":["../../../src/panel/core/statusBar.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,oEAAoE;AACpE,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,EAAE;IACP,OAAO,EAAE,UAAU;IACnB,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,4BAA4B;IACvC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,QAAQ;CACZ,CAAC;AAEX,yDAAyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;CACZ,CAAC;AAEX,qDAAqD;AACrD,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,GAAG,eAAe,EAAE,OAAO,EAAE,GAAG,EAAW,CAAC;AAE9E,gEAAgE;AAChE,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,IAAI,EAAE,CAAC,EAAW,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CACxB,KAAa,EACb,QAAgB,EAChB,MAAc;IAEd,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;AACvD,CAAC"}

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

@@ -0,0 +1,22 @@
+/**
+ * Read what the user typed into a filter box.
+ * @param filter - What was typed.
+ * @returns It trimmed and lowercased, which is what a match is made against.
+ * @example
+ * filterNeedle('  GlcNAc '); // 'glcnac'
+ */
+export declare function filterNeedle(filter: string): string;
+/**
+ * Whether any of the things an entry is known by carries what was typed.
+ *
+ * Every list the editor filters is filtered the same way — case-insensitively,
+ * on a substring, across the few fields an entry is recognised by — so a
+ * residue, a template and a symbol all answer to the same test.
+ * @param needle - The filter, already through `filterNeedle`.
+ * @param values - What the entry is known by; an absent one never matches.
+ * @returns Whether the entry is worth showing, always true for an empty filter.
+ * @example
+ * matchesNeedle('nac', 'GlcNAc', 'N-acetylglucosamine'); // true
+ */
+export declare function matchesNeedle(needle: string, ...values: ReadonlyArray<string | undefined>): boolean;
+//# sourceMappingURL=textFilter.d.ts.map