react-cheminfo 0.34.0 → 0.35.0

package/src/locales/de.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Was Sie hier tun können",
   "about.builtOn": "Aufgebaut auf",
   "about.howToCite": "Wie zu zitieren",
-  "about.licenceAndSource": "Lizenz und Quelltext",
-  "about.licence": "{license}, © cheminfo. Nutzen Sie es in einem Kurs, forken Sie es, oder übernehmen Sie einen Teil davon anderswo. Der Quelltext liegt auf {sources}.",
-  "about.foundAProblem": "Ein Problem gefunden?",
-  "about.reportIt": "Sagen Sie es uns: ein Bericht, der nennt, was Sie eingegeben haben und was zurückkam, ist die schnellste Korrektur, die es gibt. {tracker}.",
   "about.citeWork": "{what} zitieren",
   "about.built": "Erstellt {builtAt}.",
   "about.builtFromCommit": "Erstellt {builtAt} aus Commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Ein SVG, das ein Bild von {pixels} enthält: eine 3D-Szene hat keine Vektorform.",
   "download.hintSvg": "Öffnet sich mit {pixels} und bleibt in jeder Größe scharf.",
   "download.hintPng": "Gespeichert {pixels}.",
+  "download.hintCopied": "In die Zwischenablage kopiert: PNG mit {pixels}.",
+  "download.copyUnsupported": "Dieser Browser kann kein Bild in die Zwischenablage legen. Speichern Sie es stattdessen.",
   "download.size": "Größe",
   "download.sizeHelp": "Die Form, in der die Abbildung für die Datei gezeichnet wird. Sie wird neu gesetzt, sodass Achsen und Beschriftungen in diese Form passen, statt hineingedehnt zu werden. Eine Zeitschriftenspalte ist 8,5 cm breit, und ihr Text wird in der Größe gedruckt, in der er auf dem Bildschirm steht.",
   "download.sizeScreen": "Wie angezeigt",

package/src/locales/en.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "What you can do here",
   "about.builtOn": "Built on",
   "about.howToCite": "How to cite",
-  "about.licenceAndSource": "Licence and source",
-  "about.licence": "{license}, © cheminfo. Use it in a course, fork it, or lift a piece of it into something else. The sources are at {sources}.",
-  "about.foundAProblem": "Found a problem?",
-  "about.reportIt": "Tell us: a report naming what you typed and what came back is the fastest fix there is. {tracker}.",
   "about.citeWork": "Cite {what}",
   "about.built": "Built {builtAt}.",
   "about.builtFromCommit": "Built {builtAt} from commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "An SVG holding a picture of {pixels}: a 3D scene has no vector form.",
   "download.hintSvg": "Opens at {pixels}, and stays sharp at any size.",
   "download.hintPng": "Saved {pixels}.",
+  "download.hintCopied": "Copied {pixels} to the clipboard, as a PNG.",
+  "download.copyUnsupported": "This browser cannot put a picture on the clipboard. Save it instead.",
   "download.size": "Size",
   "download.sizeHelp": "The shape the figure is drawn at for the file. It is laid out again, so the axes and labels fit that shape instead of being stretched into it. A journal column is 8.5 cm wide, and its text prints at the size it reads on screen.",
   "download.sizeScreen": "As shown",

package/src/locales/es.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Lo que puede hacer aquí",
   "about.builtOn": "Construido sobre",
   "about.howToCite": "Cómo citar",
-  "about.licenceAndSource": "Licencia y código fuente",
-  "about.licence": "{license}, © cheminfo. Úselo en un curso, bifúrquelo, o llévese un trozo a otra parte. El código está en {sources}.",
-  "about.foundAProblem": "¿Ha encontrado un problema?",
-  "about.reportIt": "Díganoslo: un informe que indique lo que escribió y lo que obtuvo es la corrección más rápida que existe. {tracker}.",
   "about.citeWork": "Citar {what}",
   "about.built": "Compilado {builtAt}.",
   "about.builtFromCommit": "Compilado {builtAt} desde el commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG que contiene una imagen de {pixels}: una escena 3D no tiene forma vectorial.",
   "download.hintSvg": "Se abre a {pixels}, y se mantiene nítido a cualquier tamaño.",
   "download.hintPng": "Guardado {pixels}.",
+  "download.hintCopied": "Copiado al portapapeles: PNG de {pixels}.",
+  "download.copyUnsupported": "Este navegador no puede poner una imagen en el portapapeles. Guárdala en su lugar.",
   "download.size": "Tamaño",
   "download.sizeHelp": "La forma con la que se dibuja la figura para el archivo. Se vuelve a maquetar, de modo que los ejes y las etiquetas se ajustan a esa forma en lugar de estirarse. Una columna de revista mide 8,5 cm, y su texto se imprime al tamaño con que se lee en pantalla.",
   "download.sizeScreen": "Como se muestra",

package/src/locales/fr.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Ce que vous pouvez faire ici",
   "about.builtOn": "Construit sur",
   "about.howToCite": "Comment citer",
-  "about.licenceAndSource": "Licence et sources",
-  "about.licence": "{license}, © cheminfo. Utilisez-le dans un cours, forkez-le, ou reprenez-en un morceau ailleurs. Les sources sont sur {sources}.",
-  "about.foundAProblem": "Un problème ?",
-  "about.reportIt": "Dites-le-nous : un rapport indiquant ce que vous avez saisi et ce qui est revenu est la correction la plus rapide qui soit. {tracker}.",
   "about.citeWork": "Citer {what}",
   "about.built": "Compilé {builtAt}.",
   "about.builtFromCommit": "Compilé {builtAt} depuis le commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG contenant une image de {pixels} : une scène 3D n'a pas de forme vectorielle.",
   "download.hintSvg": "S'ouvre à {pixels}, et reste net à toute taille.",
   "download.hintPng": "Enregistré {pixels}.",
+  "download.hintCopied": "Copié dans le presse-papiers : PNG de {pixels}.",
+  "download.copyUnsupported": "Ce navigateur ne peut pas copier une image dans le presse-papiers. Enregistrez-la plutôt.",
   "download.size": "Taille",
   "download.sizeHelp": "La forme à laquelle la figure est dessinée pour le fichier. Elle est remise en page, si bien que les axes et les étiquettes s'ajustent à cette forme au lieu d'y être étirés. Une colonne de revue mesure 8,5 cm, et son texte s'imprime à la taille où il se lit à l'écran.",
   "download.sizeScreen": "Comme affichée",

package/src/locales/it.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Cosa si può fare qui",
   "about.builtOn": "Costruito su",
   "about.howToCite": "Come citare",
-  "about.licenceAndSource": "Licenza e codice sorgente",
-  "about.licence": "{license}, © cheminfo. Si può usare in un corso, farne un fork, o riprenderne un pezzo per altro. Il codice è su {sources}.",
-  "about.foundAProblem": "Ha trovato un problema?",
-  "about.reportIt": "Ce lo dica: una segnalazione che indichi cosa ha scritto e cosa ha ottenuto è la correzione più rapida che esista. {tracker}.",
   "about.citeWork": "Citare {what}",
   "about.built": "Compilato {builtAt}.",
   "about.builtFromCommit": "Compilato {builtAt} dal commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG che contiene un'immagine di {pixels}: una scena 3D non ha forma vettoriale.",
   "download.hintSvg": "Si apre a {pixels}, e resta nitido a qualsiasi dimensione.",
   "download.hintPng": "Salvato {pixels}.",
+  "download.hintCopied": "Copiato negli appunti: PNG di {pixels}.",
+  "download.copyUnsupported": "Questo browser non può mettere un'immagine negli appunti. Salvala invece.",
   "download.size": "Dimensione",
   "download.sizeHelp": "La forma con cui la figura viene disegnata per il file. Viene ricomposta, così gli assi e le etichette si adattano a quella forma invece di essere stirati. Una colonna di rivista è larga 8,5 cm, e il suo testo si stampa alla dimensione con cui si legge sullo schermo.",
   "download.sizeScreen": "Come mostrata",

package/src/overlay/ui/OverlayPanel.tsx

@@ -78,6 +78,12 @@ export interface OverlayPanelProps {
    * @default derived from the type size — 88 at the compact size
    */
   nameWidth?: number;
+  /**
+   * Fixed width of the panel, for one whose hint changes with its choices:
+   * left to its content, it would resize under the pointer at every pick.
+   * @default undefined — as wide as its content
+   */
+  width?: number | string;
   /**
    * Value of the `data-testid` attribute of the panel.
    * @default undefined
@@ -104,7 +110,7 @@ export interface OverlayPanelProps {
 export function OverlayPanel(props: OverlayPanelProps): ReactElement {
   const { title, children, onReset, resetLabel, help } = props;
   const t = useChromeT();
-  const { actions, hint, nameWidth, testId } = props;
+  const { actions, hint, nameWidth, width: panelWidth, testId } = props;
   const { metrics } = useOverlaySurface();
   const titleId = useId();
   const reset = useOverlayInteraction();
@@ -120,7 +126,7 @@ export function OverlayPanel(props: OverlayPanelProps): ReactElement {
       role="group"
       aria-labelledby={titleId}
       data-testid={testId}
-      style={overlayPanelSurfaceStyle(metrics)}
+      style={overlayPanelSurfaceStyle(metrics, panelWidth)}
     >
       <div style={overlayPanelHeaderStyle(metrics)}>
         <span style={overlayPanelTitleStyle(metrics)}>

package/src/overlay/ui/overlayPanelStyles.ts

@@ -26,14 +26,17 @@ import { overlayFocusRing } from './overlayValueStyles.ts';
  * The panel itself: a header, a body, and whatever the figure can be told to
  * do at the foot.
  * @param metrics - The measurements the card is drawn from.
+ * @param width - A fixed width, or `undefined` for as wide as its content.
  * @returns The panel's rules.
  */
 export function overlayPanelSurfaceStyle(
   metrics: OverlayMetrics,
+  width?: number | string,
 ): CSSProperties {
   return {
     display: 'flex',
     flexDirection: 'column',
+    width,
     minWidth: OVERLAY_PANEL_MIN_WIDTH,
     color: 'var(--text)',
     fontSize: metrics.fontSize,

package/src/periodic/ui/ElementCell.tsx

@@ -37,12 +37,6 @@ export interface ElementCellProps {
    * @default '' — nothing is written
    */
   detail?: string;
-  /**
-   * Whether the table this cell belongs to writes a third line at all. A table
-   * that writes none gives the room to the symbol, and its rows are shorter.
-   * @default whether this cell has one
-   */
-  writesDetail?: boolean;
   /**
    * Whether the cell is the one the tools are pointed at.
    * @default false
@@ -82,7 +76,6 @@ export function ElementCell(props: ElementCellProps): ReactElement {
     row,
     onSelect,
     detail = '',
-    writesDetail = detail !== '',
     isSelected = false,
     isIncluded = true,
     onHover,
@@ -137,7 +130,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       <span
         style={{
           ...symbolStyle,
-          fontSize: symbolFontSize(symbol, writesDetail),
+          fontSize: symbolFontSize(symbol),
         }}
       >
         {symbol}
@@ -158,12 +151,10 @@ export function ElementCell(props: ElementCellProps): ReactElement {
  * ones whose second letter is an `m` — which are written a tenth smaller
  * rather than run into the edges of their cell.
  * @param symbol - The chemical symbol.
- * @param writesDetail - Whether the table writes a third line under it.
  * @returns A CSS length.
  */
-function symbolFontSize(symbol: string, writesDetail: boolean): string {
-  const cap = writesDetail ? SYMBOL_CQW : SYMBOL_ALONE_CQW;
-  return fitted(symbolWidthInEm(symbol), cap, '0.5rem');
+function symbolFontSize(symbol: string): string {
+  return fitted(symbolWidthInEm(symbol), SYMBOL_CQW, '0.5rem');
 }
 
 /**
@@ -233,17 +224,24 @@ const TABULAR_EM = 0.6;
 /** The size the symbol is written at wherever it fits, as a share of the table. */
 const SYMBOL_CQW = '2.4cqw';
 
-/** The same, in a table that writes nothing under the symbol. */
-const SYMBOL_ALONE_CQW = '2.8cqw';
-
 /**
  * The tallest the third line is ever written, as a share of the table.
  *
- * Close to three quarters of the symbol: the symbol is how a cell is found,
- * but the value is what the table is being read for, and a value half the size
- * of the symbol is the one thing on the cell a class cannot make out.
+ * Close to two thirds of the symbol: the symbol is how a cell is found, but
+ * the value is what the table is being read for, and a value half the size of
+ * the symbol is the one thing on the cell a class cannot make out.
+ */
+const DETAIL_CQW = '1.6cqw';
+
+/**
+ * The band at each end of a cell: the atomic number at the top, whatever the
+ * tool writes at the bottom.
+ *
+ * They are one length, not two, and that is what makes the symbol between them
+ * sit at the centre of the cell rather than near it — a bottom band wider than
+ * the top one by a third lifted every symbol in the table two pixels.
  */
-const DETAIL_CQW = '1.75cqw';
+const EDGE_BAND = '1.8cqw';
 
 /** How wide one column is, as a share of the table's width. */
 const CELL_CQW = '4.85cqw';
@@ -251,49 +249,48 @@ const CELL_CQW = '4.85cqw';
 /** What the border and the padding of a cell take off that width. */
 const CELL_CHROME = '4px';
 
+/**
+ * A cell is three bands of its own, and every cell has all three.
+ *
+ * The atomic number is in the top band, against its left edge; the symbol is
+ * centred in the middle one; whatever the tool writes is centred in the
+ * bottom one. The bands keep their height whether or not anything is written
+ * in the last of them, so a number sits at one height across the whole table
+ * and a symbol at one other — before this, both rode on a stack the cell
+ * centred and moved whenever a neighbour's value was written smaller.
+ */
 const cellStyle = {
-  alignItems: 'center',
   border: '1px solid rgb(255 255 255 / 0.55)',
   borderRadius: 3,
   cursor: 'pointer',
-  display: 'flex',
-  flexDirection: 'column',
+  display: 'grid',
   font: 'inherit',
-  justifyContent: 'center',
+  gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
+  justifyItems: 'center',
   minWidth: 0,
   overflow: 'hidden',
   padding: '1px',
-  // The corner the atomic number is pinned into.
-  position: 'relative',
   transition: 'opacity 120ms ease, filter 120ms ease',
 } as const satisfies CSSProperties;
 
-/**
- * The atomic number sits out of the flow, in the corner.
- *
- * In the flow it rode on top of a stack the cell centres, so it moved down
- * whenever what is written under the symbol was written smaller — the numbers
- * of a row then sat at as many heights as the row had word lengths. Out of it,
- * the number is in the same corner of every cell, and the symbol is centred in
- * the cell rather than in what is left of it.
- */
 const numberStyle = {
+  alignSelf: 'start',
   fontSize: 'max(0.33rem, 1.1cqw)',
   fontVariantNumeric: 'tabular-nums',
-  left: 'max(1px, 0.14cqw)',
+  justifySelf: 'start',
   lineHeight: 1,
   opacity: 0.8,
-  position: 'absolute',
-  top: 'max(1px, 0.14cqw)',
 } as const satisfies CSSProperties;
 
 const symbolStyle = {
+  alignSelf: 'center',
   fontWeight: 700,
   letterSpacing: '-0.02em',
   lineHeight: 1.02,
 } as const satisfies CSSProperties;
 
 const detailStyle = {
+  alignSelf: 'center',
   fontVariantNumeric: 'tabular-nums',
   lineHeight: 1,
   maxWidth: '100%',

package/src/periodic/ui/PeriodicTable.tsx

@@ -147,7 +147,6 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   } = props;
 
   const t = useChromeT();
-  const writesDetail = detailOf !== undefined;
   const gridRef = useRef<HTMLDivElement>(null);
   const cameFromKeyRef = useRef(false);
   const offset = headers ? 1 : 0;
@@ -178,7 +177,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
         role="grid"
         aria-label={t('periodic.table')}
         data-testid="periodic-table"
-        style={gridStyle(headers, writesDetail)}
+        style={gridStyle(headers)}
         onKeyDown={handleKeyDown}
       >
         {headers ? <HeaderStrips onSelectRange={onSelectRange} /> : null}
@@ -193,7 +192,6 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
             symbol={element.symbol}
             name={nameOf(element)}
             detail={detailOf?.(element)}
-            writesDetail={writesDetail}
             swatch={swatchOf(element)}
             isSelected={element.symbol === selected}
             isIncluded={isIncluded?.(element)}
@@ -218,8 +216,9 @@ function insetStyle(offset: number): CSSProperties {
   return {
     alignItems: 'center',
     display: 'flex',
-    // Narrower than the block so the writing never touches the cells beside it.
-    padding: '0 1cqw',
+    // A column of air on each side, so the writing reads as sitting in the
+    // block rather than as running into the cells beside it.
+    padding: '0 2.4cqw',
     gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
     gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
     // A share of the table, with a floor, exactly as a cell sizes its symbol:
@@ -251,14 +250,13 @@ const MIN_WIDTH = 280;
 /**
  * How tall one row of elements is, as a share of the table's width.
  *
- * A column is about 5.4% of that width, so a cell is a seventh taller than it
- * is wide — the proportion of a wall chart, and the room the three lines of a
- * cell need to be written at a size a class can read.
+ * A column is about 5.2% of that width, so a cell is a third taller than it is
+ * wide — the proportion of a wall chart, and the room the three bands of a
+ * cell need to be read from the back of a room. It is the same height in every
+ * table: a cell keeps the band it writes a value in whether or not that table
+ * writes one.
  */
-const ROW_HEIGHT = '6.1cqw';
-
-/** The same, in a table that writes nothing under the symbol. */
-const ROW_HEIGHT_ALONE = '4.9cqw';
+const ROW_HEIGHT = '6.8cqw';
 
 /** The band the two inner-transition series were lifted out across. */
 const SERIES_GAP = 'max(6px, 1.1cqw)';
@@ -285,14 +283,11 @@ const baseGridStyle = {
  * The grid the cells are placed on.
  * @param headers - Whether a leading column and row hold the period and group
  * numbers.
- * @param writesDetail - Whether a cell writes a third line, which is what a
- * row is tall enough for.
  * @returns The style of the grid.
  */
-function gridStyle(headers: boolean, writesDetail: boolean): CSSProperties {
-  const row = writesDetail ? ROW_HEIGHT : ROW_HEIGHT_ALONE;
+function gridStyle(headers: boolean): CSSProperties {
   // The eighth row is the gap the inner-transition series are lifted out into.
-  const rows = `repeat(7, ${row}) ${SERIES_GAP} repeat(2, ${row})`;
+  const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
   if (!headers) {
     return {
       ...baseGridStyle,

package/lib/about/core/repository.d.ts

@@ -1,14 +0,0 @@
-/**
- * What can be linked to inside a repository, and when.
- *
- * Only GitHub has the addresses the About page builds — a release tag, a
- * commit — and only a repository a visitor can open is worth pointing them at.
- */
-/**
- * The sources as a base a release or a commit can be appended to.
- * @param repository - Where the sources live.
- * @returns The address without its trailing slash, or `undefined` when it is
- * not a GitHub repository and nothing inside it can be addressed.
- */
-export declare function githubSources(repository: string): string | undefined;
-//# sourceMappingURL=repository.d.ts.map

package/lib/about/core/repository.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"repository.d.ts","sourceRoot":"","sources":["../../../src/about/core/repository.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKpE"}

package/lib/about/core/repository.js

@@ -1,21 +0,0 @@
-/**
- * What can be linked to inside a repository, and when.
- *
- * Only GitHub has the addresses the About page builds — a release tag, a
- * commit — and only a repository a visitor can open is worth pointing them at.
- */
-/** Where our repositories live, and the only host whose paths we know. */
-const GITHUB = 'https://github.com/';
-/**
- * The sources as a base a release or a commit can be appended to.
- * @param repository - Where the sources live.
- * @returns The address without its trailing slash, or `undefined` when it is
- * not a GitHub repository and nothing inside it can be addressed.
- */
-export function githubSources(repository) {
-    const sources = repository.endsWith('/')
-        ? repository.slice(0, -1)
-        : repository;
-    return sources.startsWith(GITHUB) ? sources : undefined;
-}
-//# sourceMappingURL=repository.js.map

package/lib/about/core/repository.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"repository.js","sourceRoot":"","sources":["../../../src/about/core/repository.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,0EAA0E;AAC1E,MAAM,MAAM,GAAG,qBAAqB,CAAC;AAErC;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,UAAkB;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC;QACtC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,OAAO,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AAC1D,CAAC"}

package/lib/download/core/exportStyles.d.ts

@@ -1,22 +0,0 @@
-/**
- * A row of buttons with the name box among them, wrapping when the dialog is
- * too narrow for them.
- */
-export declare const exportButtonsStyle: {
-    readonly display: "flex";
-    readonly flexWrap: "wrap";
-    readonly alignItems: "center";
-    readonly gap: 6;
-};
-/** One group of an export dialog: what it offers, in a column. */
-export declare const exportSectionStyle: {
-    readonly display: "flex";
-    readonly flexDirection: "column";
-    readonly gap: 8;
-};
-/** Text that says something about a control rather than being one. */
-export declare const exportNoteStyle: {
-    readonly fontSize: 12;
-    readonly opacity: 0.7;
-};
-//# sourceMappingURL=exportStyles.d.ts.map

package/lib/download/core/exportStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"exportStyles.d.ts","sourceRoot":"","sources":["../../../src/download/core/exportStyles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,kEAAkE;AAClE,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,eAAe;;;CAA0C,CAAC"}

package/lib/download/core/exportStyles.js

@@ -1,19 +0,0 @@
-/**
- * A row of buttons with the name box among them, wrapping when the dialog is
- * too narrow for them.
- */
-export const exportButtonsStyle = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    gap: 6,
-};
-/** One group of an export dialog: what it offers, in a column. */
-export const exportSectionStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 8,
-};
-/** Text that says something about a control rather than being one. */
-export const exportNoteStyle = { fontSize: 12, opacity: 0.7 };
-//# sourceMappingURL=exportStyles.js.map

package/lib/download/core/exportStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"exportStyles.js","sourceRoot":"","sources":["../../../src/download/core/exportStyles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACE,CAAC;AAEX,kEAAkE;AAClE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACE,CAAC;AAEX,sEAAsE;AACtE,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAW,CAAC"}

package/lib/download/core/imageResolution.d.ts

@@ -1,88 +0,0 @@
-/** How big a picture is written out, as a multiple of the size it is drawn at. */
-export interface ImageResolution {
-    /** Identifies the resolution in a picker. */
-    id: string;
-    /** What the option reads. */
-    label: string;
-    /** How many pixels each drawing unit becomes. */
-    scale: number;
-}
-/**
- * The sizes a picture leaves the editor at.
- *
- * A drawing unit is about a screen pixel, so the multipliers read as what the
- * picture is for rather than as numbers: what is on screen, the same again on a
- * retina display, and the two steps up a figure needs to survive being printed
- * or thrown on a wall.
- */
-export declare const IMAGE_RESOLUTIONS: readonly [{
-    readonly id: "screen";
-    readonly label: "Screen (1×)";
-    readonly scale: 1;
-}, {
-    readonly id: "retina";
-    readonly label: "Retina (2×)";
-    readonly scale: 2;
-}, {
-    readonly id: "print";
-    readonly label: "Print (4×)";
-    readonly scale: 4;
-}, {
-    readonly id: "poster";
-    readonly label: "Poster (8×)";
-    readonly scale: 8;
-}];
-/** One of the resolutions offered. */
-export type ImageResolutionId = (typeof IMAGE_RESOLUTIONS)[number]['id'];
-/**
- * The resolution a picture is written out at unless another is picked: what is
- * on screen, doubled, which is what a picture pasted into a document wants.
- */
-export declare const DEFAULT_IMAGE_RESOLUTION: {
-    readonly id: "retina";
-    readonly label: "Retina (2×)";
-    readonly scale: 2;
-};
-/** How big a picture comes out, in pixels. */
-export interface ImageSize {
-    /** Width of the picture, in pixels. */
-    width: number;
-    /** Height of the picture, in pixels. */
-    height: number;
-    /**
-     * What each drawing unit was actually worth. Below the resolution that was
-     * asked for when it would have made a picture too big to rasterize.
-     */
-    scale: number;
-}
-/**
- * How big a rectangle of the drawing comes out at a given resolution.
- *
- * The resolution is a wish rather than an instruction: a wide glycan asked for
- * at 8× would run past what a browser can rasterize and come back blank, so the
- * scale is brought down until the picture fits instead. The scale it settled on
- * comes back with the size, so what will actually be written can be shown
- * before it is.
- * @param box - The rectangle being written out.
- * @param box.width - How wide it is, in drawing units.
- * @param box.height - How tall it is, in drawing units.
- * @param scale - How many pixels each drawing unit should become.
- * @returns The size, and the scale it was reached at.
- */
-export declare function imageSize(box: {
-    width: number;
-    height: number;
-}, scale: number): ImageSize;
-/**
- * The resolution an identifier stands for.
- * @param id - What was picked.
- * @returns The resolution, falling back to the default one.
- */
-export declare function imageResolution(id: string): ImageResolution;
-/**
- * A size, written the way it is shown next to the resolution it comes from.
- * @param size - The size to write, `null` when nothing is drawn.
- * @returns The text, e.g. `1440 × 620 px`.
- */
-export declare function formatImageSize(size: ImageSize | null): string;
-//# sourceMappingURL=imageResolution.d.ts.map

package/lib/download/core/imageResolution.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"imageResolution.d.ts","sourceRoot":"","sources":["../../../src/download/core/imageResolution.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;EAKiB,CAAC;AAEhD,sCAAsC;AACtC,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEzE;;;GAGG;AACH,eAAO,MAAM,wBAAwB;;;;CAAuB,CAAC;AAa7D,8CAA8C;AAC9C,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EACtC,KAAK,EAAE,MAAM,GACZ,SAAS,CAoBX;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,eAAe,CAK3D;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,CAG9D"}

package/lib/download/core/imageResolution.js

@@ -1,77 +0,0 @@
-/**
- * The sizes a picture leaves the editor at.
- *
- * A drawing unit is about a screen pixel, so the multipliers read as what the
- * picture is for rather than as numbers: what is on screen, the same again on a
- * retina display, and the two steps up a figure needs to survive being printed
- * or thrown on a wall.
- */
-export const IMAGE_RESOLUTIONS = [
-    { id: 'screen', label: 'Screen (1×)', scale: 1 },
-    { id: 'retina', label: 'Retina (2×)', scale: 2 },
-    { id: 'print', label: 'Print (4×)', scale: 4 },
-    { id: 'poster', label: 'Poster (8×)', scale: 8 },
-];
-/**
- * The resolution a picture is written out at unless another is picked: what is
- * on screen, doubled, which is what a picture pasted into a document wants.
- */
-export const DEFAULT_IMAGE_RESOLUTION = IMAGE_RESOLUTIONS[1];
-/**
- * Longest side a browser rasterizes reliably.
- *
- * Above roughly this, Safari and Chrome quietly hand back an empty canvas
- * instead of refusing, so the picture would be saved blank.
- */
-const MAXIMUM_SIDE = 8192;
-/** Most pixels a rasterized picture is allowed to hold. */
-const MAXIMUM_PIXELS = 32 * 1024 * 1024;
-/**
- * How big a rectangle of the drawing comes out at a given resolution.
- *
- * The resolution is a wish rather than an instruction: a wide glycan asked for
- * at 8× would run past what a browser can rasterize and come back blank, so the
- * scale is brought down until the picture fits instead. The scale it settled on
- * comes back with the size, so what will actually be written can be shown
- * before it is.
- * @param box - The rectangle being written out.
- * @param box.width - How wide it is, in drawing units.
- * @param box.height - How tall it is, in drawing units.
- * @param scale - How many pixels each drawing unit should become.
- * @returns The size, and the scale it was reached at.
- */
-export function imageSize(box, scale) {
-    const wanted = Number.isFinite(scale) && scale > 0 ? scale : 1;
-    const width = Math.max(box.width, 1);
-    const height = Math.max(box.height, 1);
-    const limit = Math.min(MAXIMUM_SIDE / width, MAXIMUM_SIDE / height, Math.sqrt(MAXIMUM_PIXELS / (width * height)));
-    const used = Math.min(wanted, limit);
-    // A picture held back by the limit is rounded down rather than to the nearest
-    // pixel, so rounding cannot put it back over what it was held to.
-    const toPixels = used < wanted ? Math.floor : Math.round;
-    return {
-        width: Math.max(1, toPixels(width * used)),
-        height: Math.max(1, toPixels(height * used)),
-        scale: used,
-    };
-}
-/**
- * The resolution an identifier stands for.
- * @param id - What was picked.
- * @returns The resolution, falling back to the default one.
- */
-export function imageResolution(id) {
-    return (IMAGE_RESOLUTIONS.find((resolution) => resolution.id === id) ??
-        DEFAULT_IMAGE_RESOLUTION);
-}
-/**
- * A size, written the way it is shown next to the resolution it comes from.
- * @param size - The size to write, `null` when nothing is drawn.
- * @returns The text, e.g. `1440 × 620 px`.
- */
-export function formatImageSize(size) {
-    if (!size)
-        return 'nothing to export';
-    return `${size.width} × ${size.height} px`;
-}
-//# sourceMappingURL=imageResolution.js.map

package/lib/download/core/imageResolution.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"imageResolution.js","sourceRoot":"","sources":["../../../src/download/core/imageResolution.ts"],"names":[],"mappings":"AAUA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE;IAChD,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE;IAChD,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,EAAE;IAC9C,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE;CACH,CAAC;AAKhD;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAE7D;;;;;GAKG;AACH,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B,2DAA2D;AAC3D,MAAM,cAAc,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;AAexC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,SAAS,CACvB,GAAsC,EACtC,KAAa;IAEb,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAEvC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CACpB,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,MAAM,EACrB,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAC7C,CAAC;IACF,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACrC,8EAA8E;IAC9E,kEAAkE;IAClE,MAAM,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAEzD,OAAO;QACL,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QAC1C,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;QAC5C,KAAK,EAAE,IAAI;KACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAAU;IACxC,OAAO,CACL,iBAAiB,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC;QAC5D,wBAAwB,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,IAAsB;IACpD,IAAI,CAAC,IAAI;QAAE,OAAO,mBAAmB,CAAC;IACtC,OAAO,GAAG,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,MAAM,KAAK,CAAC;AAC7C,CAAC"}