react-cheminfo 0.58.0 → 0.60.0

package/styles/chrome.css

@@ -354,6 +354,144 @@ button {
   font-size: 0.75rem;
 }
 
+/* ── Where a molecule comes from ─────────────────────────────────────────── */
+
+/* A source's own colour, softened: a pale tint behind the name and the hue
+   darkened for the text, so a row of badges stays calm whatever colours the
+   sources chose. The colour is set inline from what molecules publishes. */
+.source-badge {
+  --source: var(--brand);
+
+  display: inline-flex;
+  align-items: baseline;
+  padding: calc(0.1rem - 1px) calc(0.55rem - 1px);
+  border: 1px solid color-mix(in oklab, var(--source) 28%, white);
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--source) 12%, white);
+  color: color-mix(in oklab, var(--source) 55%, var(--text));
+  /* Never lighter than an ink, so a pale colour a source chose stays readable. */
+  color: oklch(from var(--source) min(l, 0.45) c h);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  gap: 0.35rem;
+  line-height: 1.5;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* A source with no look of its own. */
+.source-badge--neutral {
+  --source: var(--text-muted);
+}
+
+a.source-badge:hover {
+  background: color-mix(in oklab, var(--source) 20%, white);
+  text-decoration: none;
+}
+
+/* The logo sits on a white chip of its own, so it reads on any badge colour. */
+.source-badge__logo {
+  display: inline-flex;
+  width: 1.1rem;
+  height: 1.1rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  border-radius: 50%;
+  margin-left: -0.35rem;
+  background: var(--surface);
+}
+
+.source-badge__logo img {
+  display: block;
+  max-width: 0.8rem;
+  max-height: 0.8rem;
+}
+
+.source-badge__id {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-weight: 500;
+  opacity: 0.9;
+}
+
+.source-badge__count {
+  font-weight: 500;
+  opacity: 0.75;
+}
+
+.source-badge--compact {
+  padding: 0 calc(0.45rem - 1px);
+  font-size: 0.6875rem;
+}
+
+.source-badge--compact .source-badge__logo {
+  width: 0.95rem;
+  height: 0.95rem;
+  margin-left: -0.3rem;
+}
+
+.source-badge--compact .source-badge__logo img {
+  max-width: 0.7rem;
+  max-height: 0.7rem;
+}
+
+/* What a release's badge leaves to its hover: a header, then the commit and the
+   instant as a label/value grid. The values are what a report quotes, so they
+   never wrap and their digits line up. */
+.build-tooltip .bp6-popover-content {
+  width: auto;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.build-tooltip__header {
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.build-tooltip__rows {
+  display: grid;
+  margin: 0;
+  column-gap: 16px;
+  grid-template-columns: auto auto;
+}
+
+.build-tooltip__rows dt {
+  color: var(--text-muted);
+}
+
+.build-tooltip__rows dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: right;
+}
+
+/* Signing in starts on the About, under the build badge: quiet at rest, in the
+   type of the badge beside it, and a link only to whoever looks for one. */
+.about-sign-in {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.about-sign-in:hover,
+.about-sign-in:focus-visible {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
 /* The share dialog: the ready-made links above, the options and the page they
    write side by side, and the three things one does with the link in the
    footer, never scrolled away. */
@@ -737,6 +875,62 @@ button {
   }
 }
 
+/* ── Tokens for molecules.cheminfo.org ─────────────────────────────────────── */
+
+/* The heading, when the tokens were checked, and the button asking again, on
+   one line that wraps on a phone. */
+.molecules-tokens__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 0.4rem;
+  gap: 0.25rem 0.75rem;
+}
+
+.molecules-tokens__title {
+  font-weight: 600;
+}
+
+.molecules-tokens__muted {
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+/* A phone scrolls the table within its box, never the page sideways. */
+.molecules-tokens__scroll {
+  overflow-x: auto;
+}
+
+.molecules-tokens__table {
+  width: 100%;
+}
+
+/* A variable name breaks nowhere: it is copied into a .env as it reads. */
+.molecules-tokens__table code {
+  white-space: nowrap;
+}
+
+.molecules-tokens__fix {
+  margin-bottom: 0.75rem;
+}
+
+.molecules-tokens__fix ol {
+  padding-left: 1.25rem;
+  margin: 0.25rem 0 0;
+}
+
+.molecules-tokens__fix li + li {
+  margin-top: 0.6rem;
+}
+
+.molecules-tokens__fix p {
+  margin: 0 0 0.25rem;
+}
+
+.molecules-tokens__fix p + p {
+  margin-top: 0.4rem;
+}
+
 /* ── A narrow bar ────────────────────────────────────────────────────────── */
 
 /* The menu the pages fold into, drawn only once they no longer fit. */

package/lib/about/ui/AboutBuild.d.ts

@@ -1,18 +0,0 @@
-import type { ReactElement } from 'react';
-import type { BuildInfo } from '../../build/core/buildInfo.ts';
-export interface AboutBuildProps {
-    /** What the build published about itself. */
-    build: BuildInfo;
-}
-/**
- * The one line that says when the build a visitor has open was made.
- *
- * A report of something going wrong is worth answering only when we know what
- * was running. The version itself is in the hero, where a reader is asked to
- * quote it from; this line carries the rest, so a report can name the exact
- * build the problem was seen on.
- * @param props - See {@link AboutBuildProps}.
- * @returns The line.
- */
-export declare function AboutBuild(props: AboutBuildProps): ReactElement;
-//# sourceMappingURL=AboutBuild.d.ts.map

package/lib/about/ui/AboutBuild.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutBuild.d.ts","sourceRoot":"","sources":["../../../src/about/ui/AboutBuild.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAI/D,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAqB/D"}

package/lib/about/ui/AboutBuild.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatBuiltAt, shortCommit } from "../../build/core/buildInfo.js";
-import { useChromeT } from "../../i18n/ui/useT.js";
-/**
- * The one line that says when the build a visitor has open was made.
- *
- * A report of something going wrong is worth answering only when we know what
- * was running. The version itself is in the hero, where a reader is asked to
- * quote it from; this line carries the rest, so a report can name the exact
- * build the problem was seen on.
- * @param props - See {@link AboutBuildProps}.
- * @returns The line.
- */
-export function AboutBuild(props) {
-    const { build } = props;
-    const t = useChromeT();
-    const builtAt = formatBuiltAt(build.builtAt);
-    if (build.commit === undefined) {
-        return _jsx("p", { style: PARAGRAPH_STYLE, children: t('about.built', { builtAt }) });
-    }
-    // The commit sits inside a sentence whose word order is the translator's,
-    // so the message names where it goes and is split there.
-    const [before = '', after = ''] = t('about.builtFromCommit', {
-        builtAt,
-    }).split('{commit}');
-    return (_jsxs("p", { style: PARAGRAPH_STYLE, children: [before, _jsx("code", { style: CODE_STYLE, children: shortCommit(build.commit) }), after] }));
-}
-const PARAGRAPH_STYLE = {
-    margin: 0,
-    color: 'var(--text-muted)',
-    fontSize: 13,
-};
-const CODE_STYLE = {
-    fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-    fontSize: 13,
-};
-//# sourceMappingURL=AboutBuild.js.map

package/lib/about/ui/AboutBuild.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutBuild.js","sourceRoot":"","sources":["../../../src/about/ui/AboutBuild.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOnD;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO,YAAG,KAAK,EAAE,eAAe,YAAG,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,GAAK,CAAC;IACxE,CAAC;IAED,0EAA0E;IAC1E,yDAAyD;IACzD,MAAM,CAAC,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,uBAAuB,EAAE;QAC3D,OAAO;KACR,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAErB,OAAO,CACL,aAAG,KAAK,EAAE,eAAe,aACtB,MAAM,EACP,eAAM,KAAK,EAAE,UAAU,YAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,GAAQ,EAC1D,KAAK,IACJ,CACL,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG;IACtB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,EAAE;CACoB,CAAC;AAEnC,MAAM,UAAU,GAAG;IACjB,UAAU,EAAE,2CAA2C;IACvD,QAAQ,EAAE,EAAE;CACoB,CAAC"}

package/src/about/ui/AboutBuild.tsx

@@ -1,54 +0,0 @@
-import type { CSSProperties, ReactElement } from 'react';
-
-import type { BuildInfo } from '../../build/core/buildInfo.ts';
-import { formatBuiltAt, shortCommit } from '../../build/core/buildInfo.ts';
-import { useChromeT } from '../../i18n/ui/useT.ts';
-
-export interface AboutBuildProps {
-  /** What the build published about itself. */
-  build: BuildInfo;
-}
-
-/**
- * The one line that says when the build a visitor has open was made.
- *
- * A report of something going wrong is worth answering only when we know what
- * was running. The version itself is in the hero, where a reader is asked to
- * quote it from; this line carries the rest, so a report can name the exact
- * build the problem was seen on.
- * @param props - See {@link AboutBuildProps}.
- * @returns The line.
- */
-export function AboutBuild(props: AboutBuildProps): ReactElement {
-  const { build } = props;
-  const t = useChromeT();
-  const builtAt = formatBuiltAt(build.builtAt);
-  if (build.commit === undefined) {
-    return <p style={PARAGRAPH_STYLE}>{t('about.built', { builtAt })}</p>;
-  }
-
-  // The commit sits inside a sentence whose word order is the translator's,
-  // so the message names where it goes and is split there.
-  const [before = '', after = ''] = t('about.builtFromCommit', {
-    builtAt,
-  }).split('{commit}');
-
-  return (
-    <p style={PARAGRAPH_STYLE}>
-      {before}
-      <code style={CODE_STYLE}>{shortCommit(build.commit)}</code>
-      {after}
-    </p>
-  );
-}
-
-const PARAGRAPH_STYLE = {
-  margin: 0,
-  color: 'var(--text-muted)',
-  fontSize: 13,
-} as const satisfies CSSProperties;
-
-const CODE_STYLE = {
-  fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-  fontSize: 13,
-} as const satisfies CSSProperties;