react-cheminfo 0.28.0 → 0.30.0

package/lib/download/ui/ExportImageDialog.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DEFAULT_IMAGE_RESOLUTION } from "../core/imageResolution.js";
+import { ExportDialogFrame } from "./ExportDialogFrame.js";
+import { ExportPictureSection } from "./ExportPictureSection.js";
+/**
+ * A drawing as a picture: PNG at a chosen resolution, or SVG.
+ *
+ * How big it comes out is asked rather than guessed, since only one size could
+ * be the default and neither a figure nor a thumbnail is it. SVG is the honest
+ * answer wherever it is accepted — it is drawn again at whatever size it is
+ * printed — so the resolution there is only the size the file opens at.
+ *
+ * The same dialog writes out a glycan, a molecule and a spectrum, because none
+ * of what it does depends on what is drawn: it is handed an SVG element that is
+ * already on the page, and asks it how big it is.
+ * @param props - Component props.
+ * @returns The dialog.
+ */
+export function ExportImageDialog(props) {
+    const { isOpen, getDrawing, filename = 'picture', label = 'Drawing', frame, onClose, } = props;
+    const [resolutionId, setResolutionId] = useState(DEFAULT_IMAGE_RESOLUTION.id);
+    return (_jsx(ExportDialogFrame, { isOpen: isOpen, title: "Export as an image", icon: "media", filename: filename, width: 460, mountWhileOpen: true, onClose: onClose, children: (onStatus) => (_jsx(ExportPictureSection, { getDrawing: getDrawing, resolutionId: resolutionId, onResolutionChange: setResolutionId, filename: filename, label: label, frame: frame, onStatus: onStatus })) }));
+}
+//# sourceMappingURL=ExportImageDialog.js.map

package/lib/download/ui/ExportImageDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportImageDialog.js","sourceRoot":"","sources":["../../../src/download/ui/ExportImageDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAGtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA4B,CAAC;AAiClE;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,GAAG,SAAS,EACpB,KAAK,GAAG,SAAS,EACjB,KAAK,EACL,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,wBAAwB,CAAC,EAAE,CAC5B,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,GAAG,EACV,cAAc,QACd,OAAO,EAAE,OAAO,YAEf,CAAC,QAAQ,EAAE,EAAE,CAAC,CACb,KAAC,oBAAoB,IACnB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,eAAe,EACnC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,GACiB,CACrB,CAAC;AACJ,CAAC"}

package/lib/download/ui/ExportNameField.d.ts

@@ -0,0 +1,29 @@
+export interface ExportNameFieldProps {
+    /** What is in the box, without an extension. */
+    name: string;
+    /**
+     * The extension the file is about to take, shown after what is typed.
+     * @default ''
+     */
+    extension?: string;
+    /** Called with what was typed. */
+    onChange: (name: string) => void;
+}
+/**
+ * What the file about to be written out is called.
+ *
+ * It sits at the right of the row of buttons, against the one that writes the
+ * file, because that is what it is about — copying takes no name, and puts
+ * itself at the other end of the row. The name the editor came in with is
+ * offered, since that is what a glycan is usually saved under, but a picture
+ * for a slide and a molfile for a docking run are rarely wanted under it.
+ *
+ * The box grows with what is typed, so the extension sits directly against the
+ * name and the two read as the one filename they are about to become. Held to a
+ * fixed width instead, the extension hangs at the far edge with the gap between
+ * them reading as part of neither.
+ * @param props - Component props.
+ * @returns The field.
+ */
+export declare function ExportNameField(props: ExportNameFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=ExportNameField.d.ts.map

package/lib/download/ui/ExportNameField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportNameField.d.ts","sourceRoot":"","sources":["../../../src/download/ui/ExportNameField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAmD1D"}

package/lib/download/ui/ExportNameField.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+/**
+ * What the file about to be written out is called.
+ *
+ * It sits at the right of the row of buttons, against the one that writes the
+ * file, because that is what it is about — copying takes no name, and puts
+ * itself at the other end of the row. The name the editor came in with is
+ * offered, since that is what a glycan is usually saved under, but a picture
+ * for a slide and a molfile for a docking run are rarely wanted under it.
+ *
+ * The box grows with what is typed, so the extension sits directly against the
+ * name and the two read as the one filename they are about to become. Held to a
+ * fixed width instead, the extension hangs at the far edge with the gap between
+ * them reading as part of neither.
+ * @param props - Component props.
+ * @returns The field.
+ */
+export function ExportNameField(props) {
+    const { name, extension = '', onChange } = props;
+    const input = useRef(null);
+    const mirror = useRef(null);
+    const ruler = useRef(null);
+    // Measured off a copy of the text in the same font rather than counted in
+    // characters, which only holds for a monospace one. The width is set on the
+    // element instead of kept in state: it is what the browser has just measured,
+    // so rendering again to store it would measure the same thing twice.
+    useLayoutEffect(() => {
+        if (!input.current || !mirror.current || !ruler.current)
+            return;
+        const measured = mirror.current.offsetWidth + CARET;
+        const floor = ruler.current.offsetWidth;
+        input.current.style.width = `${Math.min(Math.max(measured, floor), MAXIMUM)}px`;
+    });
+    return (_jsx("div", { style: fieldStyle, children: _jsxs("div", { className: "bp6-input", style: boxStyle, children: [_jsx("input", { ref: input, value: name, "aria-label": "File name", placeholder: PLACEHOLDER, spellCheck: false, autoComplete: "off", style: inputStyle, onChange: (event) => onChange(event.target.value), 
+                    // The name is in force as it is typed, so Enter has nothing left to
+                    // confirm — and is kept off the dialog, whose answer is to close.
+                    onKeyDown: (event) => {
+                        if (event.key === 'Enter')
+                            event.stopPropagation();
+                    } }), extension === '' ? null : (_jsx("span", { style: extensionStyle, children: extension })), _jsx("span", { ref: mirror, style: mirrorStyle, "aria-hidden": "true", children: name === '' ? PLACEHOLDER : name }), _jsx("span", { ref: ruler, style: mirrorStyle, "aria-hidden": "true", children: FLOOR_SAMPLE })] }) }));
+}
+/** What the box says when nothing has been typed into it. */
+const PLACEHOLDER = 'File name';
+/** Room for the caret past the last character, so it is never clipped. */
+const CARET = 2;
+/**
+ * Twenty characters, which the box is never narrower than.
+ *
+ * A name is typed into this box as often as it is read out of it, and a box cut
+ * to `glycan` leaves no room to do that in — so the floor is a name of the
+ * length one usually is, measured in the box's own font rather than counted at
+ * some assumed character width. `n` is about the average width of a lowercase
+ * letter, which is what a filename is mostly made of.
+ */
+const FLOOR_SAMPLE = 'n'.repeat(20);
+/** Past this a name scrolls inside the box rather than pushing the dialog. */
+const MAXIMUM = 260;
+// Held against the right of the row beside the button that writes the file, so
+// the space in the row falls between copying and saving rather than inside the
+// name.
+const fieldStyle = { marginLeft: 'auto', flexShrink: 0 };
+// Blueprint's own input chrome, worn by the box rather than by the field inside
+// it, so the name and the extension sit within one border. Positioned, so the
+// hidden copy the width is measured off can be taken out of the layout without
+// leaving the box it takes its font from.
+const boxStyle = {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    width: 'fit-content',
+};
+// The field itself brings nothing of its own: the box around it is what is
+// seen, and the text has to be in the font the width was measured in.
+const inputStyle = {
+    font: 'inherit',
+    border: 'none',
+    outline: 'none',
+    padding: 0,
+    margin: 0,
+    background: 'transparent',
+    color: 'inherit',
+};
+const extensionStyle = {
+    color: TOKEN.textMuted,
+    whiteSpace: 'pre',
+};
+// A copy of what is typed, in the same font, laid out but never painted.
+const mirrorStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    visibility: 'hidden',
+    pointerEvents: 'none',
+    whiteSpace: 'pre',
+    font: 'inherit',
+};
+//# sourceMappingURL=ExportNameField.js.map

package/lib/download/ui/ExportNameField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportNameField.js","sourceRoot":"","sources":["../../../src/download/ui/ExportNameField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAc1D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,KAAK,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAE5C,0EAA0E;IAC1E,4EAA4E;IAC5E,8EAA8E;IAC9E,qEAAqE;IACrE,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO;YAAE,OAAO;QAChE,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;QACpD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;QACxC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC;IAClF,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,KAAK,EAAE,UAAU,YACpB,eAAK,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,QAAQ,aACxC,gBACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAI,gBACA,WAAW,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;oBACjD,oEAAoE;oBACpE,kEAAkE;oBAClE,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;wBACnB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;4BAAE,KAAK,CAAC,eAAe,EAAE,CAAC;oBACrD,CAAC,GACD,EACD,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,eAAM,KAAK,EAAE,cAAc,YAAG,SAAS,GAAQ,CAChD,EAID,eAAM,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,iBAAc,MAAM,YACtD,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,GAC5B,EACP,eAAM,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,iBAAc,MAAM,YACrD,YAAY,GACR,IACH,GACF,CACP,CAAC;AACJ,CAAC;AAED,6DAA6D;AAC7D,MAAM,WAAW,GAAG,WAAW,CAAC;AAEhC,0EAA0E;AAC1E,MAAM,KAAK,GAAG,CAAC,CAAC;AAEhB;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAEpC,8EAA8E;AAC9E,MAAM,OAAO,GAAG,GAAG,CAAC;AAEpB,+EAA+E;AAC/E,+EAA+E;AAC/E,QAAQ;AACR,MAAM,UAAU,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,EAAW,CAAC;AAElE,gFAAgF;AAChF,8EAA8E;AAC9E,+EAA+E;AAC/E,0CAA0C;AAC1C,MAAM,QAAQ,GAAG;IACf,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,aAAa;CACZ,CAAC;AAEX,2EAA2E;AAC3E,sEAAsE;AACtE,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,aAAa;IACzB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,cAAc,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,UAAU,EAAE,KAAK;CACT,CAAC;AAEX,yEAAyE;AACzE,MAAM,WAAW,GAAG;IAClB,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,KAAK;IACjB,IAAI,EAAE,SAAS;CACP,CAAC"}

package/lib/download/ui/ExportPictureSection.d.ts

@@ -0,0 +1,38 @@
+import type { PictureFrame } from '../core/pictureExport.ts';
+export interface ExportPictureSectionProps {
+    /** The drawing a picture is taken of, as it is rendered. */
+    getDrawing: () => SVGSVGElement | null;
+    /** Which of the resolutions is picked. */
+    resolutionId: string;
+    /** Called with the resolution that was picked. */
+    onResolutionChange: (id: string) => void;
+    /**
+     * The name the name box opens on, and falls back to when it is cleared,
+     * without its extension.
+     */
+    filename: string;
+    /** What the picture is read out as in the file it is written to. */
+    label: string;
+    /**
+     * Whether the picture is the drawing inside the element or the element as it
+     * is laid out.
+     * @default 'content'
+     */
+    frame?: PictureFrame;
+    /** Called with what became of the last thing written out. */
+    onStatus: (status: string) => void;
+}
+/**
+ * The drawing as a picture: how big it comes out, and where it goes.
+ *
+ * The size the file will be is shown beside the resolution rather than after
+ * the fact, since that is the number the choice is made on — a figure for a
+ * paper and a thumbnail for a slide are the same drawing at very different
+ * sizes. What is measured is what the picture will be of and not whatever is on
+ * screen, so the answer does not change when the window is resized or the
+ * drawing panned.
+ * @param props - Component props.
+ * @returns The section.
+ */
+export declare function ExportPictureSection(props: ExportPictureSectionProps): import("react").JSX.Element;
+//# sourceMappingURL=ExportPictureSection.d.ts.map

package/lib/download/ui/ExportPictureSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportPictureSection.d.ts","sourceRoot":"","sources":["../../../src/download/ui/ExportPictureSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAW7D,MAAM,WAAW,yBAAyB;IACxC,4DAA4D;IAC5D,UAAU,EAAE,MAAM,aAAa,GAAG,IAAI,CAAC;IACvC,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,+BA2EpE"}

package/lib/download/ui/ExportPictureSection.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, HTMLSelect } from '@blueprintjs/core';
+import { useState } from 'react';
+import { exportButtonsStyle, exportNoteStyle, exportSectionStyle, } from "../core/exportStyles.js";
+import { IMAGE_RESOLUTIONS, formatImageSize, imageResolution, } from "../core/imageResolution.js";
+import { copyPicture, pictureSize, savePngPicture, saveSvgPicture, } from "../core/pictureExport.js";
+import { sanitizeFileName } from "../core/sanitizeFileName.js";
+import { ExportNameField } from "./ExportNameField.js";
+/**
+ * The drawing as a picture: how big it comes out, and where it goes.
+ *
+ * The size the file will be is shown beside the resolution rather than after
+ * the fact, since that is the number the choice is made on — a figure for a
+ * paper and a thumbnail for a slide are the same drawing at very different
+ * sizes. What is measured is what the picture will be of and not whatever is on
+ * screen, so the answer does not change when the window is resized or the
+ * drawing panned.
+ * @param props - Component props.
+ * @returns The section.
+ */
+export function ExportPictureSection(props) {
+    const { getDrawing, resolutionId, onResolutionChange, filename, label, frame, onStatus, } = props;
+    const [name, setName] = useState(filename);
+    const savedName = sanitizeFileName(name, filename);
+    const { scale } = imageResolution(resolutionId);
+    const size = pictureSize(getDrawing(), scale, { frame });
+    const options = { scale, filename: savedName, label, frame };
+    return (_jsxs("section", { style: exportSectionStyle, children: [_jsxs("div", { style: resolutionStyle, children: [_jsx(HTMLSelect, { value: resolutionId, "aria-label": "Resolution", onChange: (event) => onResolutionChange(event.currentTarget.value), children: IMAGE_RESOLUTIONS.map((resolution) => (_jsx("option", { value: resolution.id, children: resolution.label }, resolution.id))) }), _jsx("span", { style: exportNoteStyle, children: formatImageSize(size) })] }), _jsxs("div", { style: exportButtonsStyle, children: [_jsx(Button, { icon: "duplicate", disabled: size === null, text: "Copy PNG", onClick: () => {
+                            // The rasterization is started here rather than awaited: Safari
+                            // only allows a clipboard write the click itself started.
+                            void copyPicture(getDrawing(), options).then((copied) => onStatus(copied ? 'Picture copied.' : 'Nothing was copied.'), () => onStatus('Nothing was copied.'));
+                        } }), _jsx(ExportNameField, { name: name, onChange: setName }), _jsx(Button, { icon: "download", disabled: size === null, text: "Save PNG", title: `Save as ${savedName}.png`, onClick: () => {
+                            void savePngPicture(getDrawing(), options).then((saved) => {
+                                if (saved)
+                                    onStatus(`Saved as ${savedName}.png.`);
+                            });
+                        } }), _jsx(Button, { icon: "download", disabled: size === null, text: "Save SVG", title: `Save as ${savedName}.svg`, onClick: () => {
+                            if (saveSvgPicture(getDrawing(), options)) {
+                                onStatus(`Saved as ${savedName}.svg.`);
+                            }
+                        } })] })] }));
+}
+const resolutionStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+};
+//# sourceMappingURL=ExportPictureSection.js.map

package/lib/download/ui/ExportPictureSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportPictureSection.js","sourceRoot":"","sources":["../../../src/download/ui/ExportPictureSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,GAChB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,WAAW,EACX,WAAW,EACX,cAAc,EACd,cAAc,GACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AA0BxD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EACJ,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACnD,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,WAAW,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IAE7D,OAAO,CACL,mBAAS,KAAK,EAAE,kBAAkB,aAChC,eAAK,KAAK,EAAE,eAAe,aACzB,KAAC,UAAU,IACT,KAAK,EAAE,YAAY,gBACR,YAAY,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,YAEjE,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACrC,iBAA4B,KAAK,EAAE,UAAU,CAAC,EAAE,YAC7C,UAAU,CAAC,KAAK,IADN,UAAU,CAAC,EAAE,CAEjB,CACV,CAAC,GACS,EACb,eAAM,KAAK,EAAE,eAAe,YAAG,eAAe,CAAC,IAAI,CAAC,GAAQ,IACxD,EACN,eAAK,KAAK,EAAE,kBAAkB,aAC5B,KAAC,MAAM,IACL,IAAI,EAAC,WAAW,EAChB,QAAQ,EAAE,IAAI,KAAK,IAAI,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE;4BACZ,gEAAgE;4BAChE,0DAA0D;4BAC1D,KAAK,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,CAAC,CAAC,IAAI,CAC1C,CAAC,MAAM,EAAE,EAAE,CACT,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAC9D,GAAG,EAAE,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CACtC,CAAC;wBACJ,CAAC,GACD,EACF,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAI,EAClD,KAAC,MAAM,IACL,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,KAAK,IAAI,EACvB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,WAAW,SAAS,MAAM,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,cAAc,CAAC,UAAU,EAAE,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gCACxD,IAAI,KAAK;oCAAE,QAAQ,CAAC,YAAY,SAAS,OAAO,CAAC,CAAC;4BACpD,CAAC,CAAC,CAAC;wBACL,CAAC,GACD,EACF,KAAC,MAAM,IACL,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,KAAK,IAAI,EACvB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,WAAW,SAAS,MAAM,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,cAAc,CAAC,UAAU,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC;gCAC1C,QAAQ,CAAC,YAAY,SAAS,OAAO,CAAC,CAAC;4BACzC,CAAC;wBACH,CAAC,GACD,IACE,IACE,CACX,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACE,CAAC"}

package/lib/download/ui/index.d.ts

@@ -10,4 +10,14 @@ export type { FigureDownloadProps } from './FigureDownload.tsx';
 export { FigureDownload } from './FigureDownload.tsx';
 export type { FigureDownloadPanelProps } from './FigureDownloadPanel.tsx';
 export { FigureDownloadPanel } from './FigureDownloadPanel.tsx';
+export type { ExportDialogFrameProps } from './ExportDialogFrame.tsx';
+export { ExportDialogFrame } from './ExportDialogFrame.tsx';
+export type { ExportImageDialogProps } from './ExportImageDialog.tsx';
+export { ExportImageDialog } from './ExportImageDialog.tsx';
+export type { ExportNameFieldProps } from './ExportNameField.tsx';
+export { ExportNameField } from './ExportNameField.tsx';
+export type { ExportPictureSectionProps } from './ExportPictureSection.tsx';
+export { ExportPictureSection } from './ExportPictureSection.tsx';
+export type { DrawingBox } from './useDrawingBox.ts';
+export { useDrawingBox } from './useDrawingBox.ts';
 //# sourceMappingURL=index.d.ts.map

package/lib/download/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/download/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/download/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/download/ui/index.js

@@ -8,4 +8,9 @@
  */
 export { FigureDownload } from "./FigureDownload.js";
 export { FigureDownloadPanel } from "./FigureDownloadPanel.js";
+export { ExportDialogFrame } from "./ExportDialogFrame.js";
+export { ExportImageDialog } from "./ExportImageDialog.js";
+export { ExportNameField } from "./ExportNameField.js";
+export { ExportPictureSection } from "./ExportPictureSection.js";
+export { useDrawingBox } from "./useDrawingBox.js";
 //# sourceMappingURL=index.js.map

package/lib/download/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/download/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/download/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAGhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AAExD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA4B,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/download/ui/useDrawingBox.d.ts

@@ -0,0 +1,23 @@
+/** The box a picture is taken out of. */
+export interface DrawingBox {
+    /** Put on the box the drawing sits in, so it can be found again. */
+    attach: (element: HTMLElement | null) => void;
+    /**
+     * The drawing a picture is taken of, `null` when the box holds none — which
+     * is what an editor showing nothing yet, or one whose box has not been
+     * mounted, hands the export dialog.
+     */
+    getDrawing: () => SVGSVGElement | null;
+}
+/**
+ * Find the drawing a picture is to be taken of, when it is asked for.
+ *
+ * A drawing is laid out again on every resize, so the element itself is never
+ * held onto: what is kept is the box it sits in, and the drawing is read out of
+ * it at the moment a button is pressed. What counts as the drawing in there —
+ * the one element for an editor showing one, the panes composed for an editor
+ * showing a stack of charts — is `drawingIn`.
+ * @returns The box to attach, and the drawing inside it.
+ */
+export declare function useDrawingBox(): DrawingBox;
+//# sourceMappingURL=useDrawingBox.d.ts.map

package/lib/download/ui/useDrawingBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawingBox.d.ts","sourceRoot":"","sources":["../../../src/download/ui/useDrawingBox.ts"],"names":[],"mappings":"AAIA,yCAAyC;AACzC,MAAM,WAAW,UAAU;IACzB,oEAAoE;IACpE,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;;OAIG;IACH,UAAU,EAAE,MAAM,aAAa,GAAG,IAAI,CAAC;CACxC;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAU1C"}

package/lib/download/ui/useDrawingBox.js

@@ -0,0 +1,21 @@
+import { useCallback, useRef } from 'react';
+import { drawingIn } from "../core/stackedDrawing.js";
+/**
+ * Find the drawing a picture is to be taken of, when it is asked for.
+ *
+ * A drawing is laid out again on every resize, so the element itself is never
+ * held onto: what is kept is the box it sits in, and the drawing is read out of
+ * it at the moment a button is pressed. What counts as the drawing in there —
+ * the one element for an editor showing one, the panes composed for an editor
+ * showing a stack of charts — is `drawingIn`.
+ * @returns The box to attach, and the drawing inside it.
+ */
+export function useDrawingBox() {
+    const box = useRef(null);
+    const attach = useCallback((element) => {
+        box.current = element;
+    }, []);
+    const getDrawing = useCallback(() => drawingIn(box.current), []);
+    return { attach, getDrawing };
+}
+//# sourceMappingURL=useDrawingBox.js.map

package/lib/download/ui/useDrawingBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawingBox.js","sourceRoot":"","sources":["../../../src/download/ui/useDrawingBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AActD;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,GAAG,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAE7C,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QACzD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAEjE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;AAChC,CAAC"}

package/lib/error/core/describeSource.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Name the source of a failed read.
+ *
+ * A reader is met by a user exactly once — when it fails — so what it says
+ * then is the whole of its interface, and saying it in one voice across a site
+ * matters more than in most code.
+ *
+ * A message that opens with the file's own name tells whoever dropped eleven
+ * files which of them is the problem; one that opens with `The pasted text`
+ * tells them the message is about the box they just typed into.
+ * @param fileName - The file's name, absent for a paste.
+ * @returns A subject a sentence can start with.
+ * @example
+ * `${describeSource(fileName)} holds no readable peak list.`
+ */
+export declare function describeSource(fileName?: string): string;
+//# sourceMappingURL=describeSource.d.ts.map

package/lib/error/core/describeSource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"describeSource.d.ts","sourceRoot":"","sources":["../../../src/error/core/describeSource.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAExD"}

package/lib/error/core/describeSource.js

@@ -0,0 +1,19 @@
+/**
+ * Name the source of a failed read.
+ *
+ * A reader is met by a user exactly once — when it fails — so what it says
+ * then is the whole of its interface, and saying it in one voice across a site
+ * matters more than in most code.
+ *
+ * A message that opens with the file's own name tells whoever dropped eleven
+ * files which of them is the problem; one that opens with `The pasted text`
+ * tells them the message is about the box they just typed into.
+ * @param fileName - The file's name, absent for a paste.
+ * @returns A subject a sentence can start with.
+ * @example
+ * `${describeSource(fileName)} holds no readable peak list.`
+ */
+export function describeSource(fileName) {
+    return fileName === undefined ? 'The pasted text' : fileName;
+}
+//# sourceMappingURL=describeSource.js.map

package/lib/error/core/describeSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"describeSource.js","sourceRoot":"","sources":["../../../src/error/core/describeSource.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,cAAc,CAAC,QAAiB;IAC9C,OAAO,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC/D,CAAC"}

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

@@ -1,2 +1,3 @@
+export { describeSource } from './describeSource.ts';
 export { errorMessage, toError } from './toError.ts';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/error/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/error/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/lib/error/core/index.js

@@ -1,2 +1,3 @@
+export { describeSource } from "./describeSource.js";
 export { errorMessage, toError } from "./toError.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/error/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/error/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/lib/help/ui/HelpBody.d.ts

@@ -15,6 +15,14 @@ export interface HelpExample {
      */
     note?: string;
 }
+/**
+ * Help written as prose: one paragraph, or several.
+ *
+ * Several because an explanation worth reading is rarely one thought, and a
+ * dozen sentences run together into one block is a wall nobody reads to the
+ * end — which is the same as not having written it.
+ */
+export type HelpText = string | readonly string[];
 /** Everything a piece of help says, wherever it is shown. */
 export interface HelpContent {
     /**
@@ -23,7 +31,8 @@ export interface HelpContent {
      */
     title?: string;
     /**
-     * The explanation: one or two sentences, or any content of the site's own.
+     * The explanation: one or two sentences, any content of the site's own, or
+     * an array of strings, which is set as one paragraph each.
      * @default undefined
      */
     body?: ReactNode;

package/lib/help/ui/HelpBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBody.d.ts","sourceRoot":"","sources":["../../../src/help/ui/HelpBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,+EAA+E;AAC/E,MAAM,WAAW,WAAW;IAC1B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,6DAA6D;AAC7D,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,WAAW,EAAE,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mCAAmC;AACnC,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAqC3D"}
+{"version":3,"file":"HelpBody.d.ts","sourceRoot":"","sources":["../../../src/help/ui/HelpBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,+EAA+E;AAC/E,MAAM,WAAW,WAAW;IAC1B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;AAElD,6DAA6D;AAC7D,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,WAAW,EAAE,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mCAAmC;AACnC,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAuC3D"}

package/lib/help/ui/HelpBody.js

@@ -14,7 +14,28 @@ export function HelpBody(props) {
     const { className, content, width = DEFAULT_WIDTH } = props;
     const t = useChromeT();
     const { title, body, example, link } = content;
-    return (_jsxs("div", { className: joinClassNames('help-body', className), style: { ...BODY_STYLE, maxWidth: width }, children: [title === undefined ? null : _jsx("div", { style: TITLE_STYLE, children: title }), body === undefined ? null : _jsx("div", { style: TEXT_STYLE, children: body }), examplesOf(example).map((item) => (_jsxs("div", { style: EXAMPLE_STYLE, children: [_jsx("code", { style: CODE_STYLE, children: item.code }), item.input === undefined ? null : (_jsxs("div", { style: INPUT_STYLE, children: [t('help.on'), " ", _jsx("code", { style: CODE_STYLE, children: item.input })] })), item.note === undefined ? null : (_jsx("div", { style: NOTE_STYLE, children: item.note }))] }, exampleKey(item)))), link === undefined ? null : (_jsx("a", { href: link, target: "_blank", rel: "noopener noreferrer", style: LINK_STYLE, children: t('help.learnMore') }))] }));
+    return (_jsxs("div", { className: joinClassNames('help-body', className), style: { ...BODY_STYLE, maxWidth: width }, children: [title === undefined ? null : _jsx("div", { style: TITLE_STYLE, children: title }), body === undefined ? null : (_jsx("div", { style: TEXT_STYLE, children: paragraphsOf(body) })), examplesOf(example).map((item) => (_jsxs("div", { style: EXAMPLE_STYLE, children: [_jsx("code", { style: CODE_STYLE, children: item.code }), item.input === undefined ? null : (_jsxs("div", { style: INPUT_STYLE, children: [t('help.on'), " ", _jsx("code", { style: CODE_STYLE, children: item.input })] })), item.note === undefined ? null : (_jsx("div", { style: NOTE_STYLE, children: item.note }))] }, exampleKey(item)))), link === undefined ? null : (_jsx("a", { href: link, target: "_blank", rel: "noopener noreferrer", style: LINK_STYLE, children: t('help.learnMore') }))] }));
+}
+/**
+ * The body, with an array of strings set as paragraphs rather than run
+ * together.
+ *
+ * React renders `['one', 'two']` as `onetwo`, which is never what a caller who
+ * wrote two sentences meant. Anything else is handed back untouched: a body
+ * built of elements is the site's own and is laid out by whoever wrote it.
+ * @param body - The body, as the caller wrote it.
+ * @returns What to render.
+ */
+function paragraphsOf(body) {
+    if (!Array.isArray(body))
+        return body;
+    const paragraphs = [];
+    for (const piece of body) {
+        if (typeof piece !== 'string')
+            return body;
+        paragraphs.push(piece);
+    }
+    return paragraphs.map((paragraph) => (_jsx("p", { style: PARAGRAPH_STYLE, children: paragraph }, paragraph)));
 }
 // Two examples are only the same when all three of their parts are, and a help
 // that repeats one example has nothing to gain from drawing it twice.
@@ -37,6 +58,8 @@ function examplesOf(example) {
     }
     return unique;
 }
+/** The gap between paragraphs is the column's, so the margin is nobody's. */
+const PARAGRAPH_STYLE = { margin: 0 };
 /** How wide a piece of help is drawn when the caller does not say. */
 const DEFAULT_WIDTH = 280;
 const BODY_STYLE = {

package/lib/help/ui/HelpBody.js.map

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

package/lib/help/ui/index.d.ts

@@ -1,4 +1,4 @@
-export type { HelpBodyProps, HelpContent, HelpExample } from './HelpBody.tsx';
+export type { HelpBodyProps, HelpContent, HelpExample, HelpText, } from './HelpBody.tsx';
 export { HelpBody } from './HelpBody.tsx';
 export type { HelpIconProps } from './HelpIcon.tsx';
 export { HelpIcon } from './HelpIcon.tsx';

package/lib/help/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/help/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/help/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,GACT,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/help/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/help/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/help/ui/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC"}