react-cheminfo 0.10.0 → 0.12.0

package/lib/clipboard/core/clipboardItem.js

@@ -0,0 +1,26 @@
+/**
+ * Put one item on the clipboard through the async Clipboard API, without ever
+ * throwing.
+ *
+ * The item is built and the write started before anything is awaited: Safari
+ * only accepts a clipboard write that the click itself started, so a value
+ * still being produced — a figure being rasterized — has to go in as a promise
+ * the clipboard awaits, never be awaited first.
+ * @param items - The item's representations, keyed by MIME type.
+ * @returns Whether the clipboard took the item; `false` where the API or `ClipboardItem` is missing, or the write was refused.
+ */
+export async function writeClipboardItem(items) {
+    const clipboard = globalThis.navigator?.clipboard;
+    if (typeof clipboard?.write !== 'function' ||
+        typeof ClipboardItem === 'undefined') {
+        return false;
+    }
+    try {
+        await clipboard.write([new ClipboardItem(items)]);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+//# sourceMappingURL=clipboardItem.js.map

package/lib/clipboard/core/clipboardItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboardItem.js","sourceRoot":"","sources":["../../../src/clipboard/core/clipboardItem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,KAAK,UAAU,kBAAkB,CACtC,KAA2C;IAE3C,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC;IAClD,IACE,OAAO,SAAS,EAAE,KAAK,KAAK,UAAU;QACtC,OAAO,aAAa,KAAK,WAAW,EACpC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,CAAC;QACH,MAAM,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC"}

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

@@ -1,2 +1,5 @@
+export type { WriteBlobToClipboardOptions } from './writeBlobToClipboard.ts';
+export { writeBlobToClipboard } from './writeBlobToClipboard.ts';
+export type { ClipboardContent, ClipboardText } from './writeToClipboard.ts';
 export { writeToClipboard } from './writeToClipboard.ts';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/clipboard/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/clipboard/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/clipboard/core/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/clipboard/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/clipboard/core/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/clipboard/core/writeBlobToClipboard.d.ts

@@ -0,0 +1,23 @@
+/** How {@link writeBlobToClipboard} labels what it writes. */
+export interface WriteBlobToClipboardOptions {
+    /**
+     * The MIME type the clipboard is told the data has. Browsers accept
+     * `image/png` everywhere; other image types only in some of them.
+     * @default the blob's own type, or 'image/png' when it has none or is still a promise
+     */
+    type?: string;
+}
+/**
+ * Put an image — a figure, a rendered formula — on the clipboard, without ever
+ * throwing at the caller.
+ *
+ * Hand over the promise of the image rather than awaiting it first, e.g.
+ * `writeBlobToClipboard(renderPng(figure))` straight from the click handler:
+ * Safari only accepts a clipboard write the click itself started, and awaiting
+ * a rasterization first is enough to lose that.
+ * @param blob - The image, or the promise of it.
+ * @param options - See {@link WriteBlobToClipboardOptions}.
+ * @returns Whether the clipboard took it; `false` outside a secure context, in a browser whose clipboard takes text only, or when the image could not be produced.
+ */
+export declare function writeBlobToClipboard(blob: Blob | Promise<Blob>, options?: WriteBlobToClipboardOptions): Promise<boolean>;
+//# sourceMappingURL=writeBlobToClipboard.d.ts.map

package/lib/clipboard/core/writeBlobToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"writeBlobToClipboard.d.ts","sourceRoot":"","sources":["../../../src/clipboard/core/writeBlobToClipboard.ts"],"names":[],"mappings":"AAIA,8DAA8D;AAC9D,MAAM,WAAW,2BAA2B;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAC1B,OAAO,GAAE,2BAAgC,GACxC,OAAO,CAAC,OAAO,CAAC,CAQlB"}

package/lib/clipboard/core/writeBlobToClipboard.js

@@ -0,0 +1,29 @@
+import { writeClipboardItem } from "./clipboardItem.js";
+const DEFAULT_TYPE = 'image/png';
+/**
+ * Put an image — a figure, a rendered formula — on the clipboard, without ever
+ * throwing at the caller.
+ *
+ * Hand over the promise of the image rather than awaiting it first, e.g.
+ * `writeBlobToClipboard(renderPng(figure))` straight from the click handler:
+ * Safari only accepts a clipboard write the click itself started, and awaiting
+ * a rasterization first is enough to lose that.
+ * @param blob - The image, or the promise of it.
+ * @param options - See {@link WriteBlobToClipboardOptions}.
+ * @returns Whether the clipboard took it; `false` outside a secure context, in a browser whose clipboard takes text only, or when the image could not be produced.
+ */
+export function writeBlobToClipboard(blob, options = {}) {
+    if (blob instanceof Promise) {
+        // The clipboard reports a failed image as `false`; the promise itself must
+        // not also surface as an unhandled rejection.
+        blob.catch(() => undefined);
+    }
+    const type = options.type ?? ownType(blob) ?? DEFAULT_TYPE;
+    return writeClipboardItem({ [type]: blob });
+}
+function ownType(blob) {
+    if (blob instanceof Promise || blob.type === '')
+        return undefined;
+    return blob.type;
+}
+//# sourceMappingURL=writeBlobToClipboard.js.map

package/lib/clipboard/core/writeBlobToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"writeBlobToClipboard.js","sourceRoot":"","sources":["../../../src/clipboard/core/writeBlobToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,YAAY,GAAG,WAAW,CAAC;AAYjC;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,oBAAoB,CAClC,IAA0B,EAC1B,UAAuC,EAAE;IAEzC,IAAI,IAAI,YAAY,OAAO,EAAE,CAAC;QAC5B,2EAA2E;QAC3E,8CAA8C;QAC9C,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC;IACD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC;IAC3D,OAAO,kBAAkB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9C,CAAC;AAED,SAAS,OAAO,CAAC,IAA0B;IACzC,IAAI,IAAI,YAAY,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;QAAE,OAAO,SAAS,CAAC;IAClE,OAAO,IAAI,CAAC,IAAI,CAAC;AACnB,CAAC"}

package/lib/clipboard/core/writeToClipboard.d.ts

@@ -1,12 +1,27 @@
+/** Text for the clipboard, with a rich rendering of it beside. */
+export interface ClipboardText {
+    /** The plain text, which every place it is pasted into can read. */
+    text: string;
+    /**
+     * The same content as HTML, which a word processor pastes with its
+     * emphasis and links; a plain text editor still receives `text`.
+     * @default undefined — only the text is written
+     */
+    html?: string;
+}
+/** What {@link writeToClipboard} puts on the clipboard: text, or text with its HTML. */
+export type ClipboardContent = string | ClipboardText;
 /**
  * Put a piece of text on the clipboard, without ever throwing at the caller.
  *
- * The async Clipboard API is tried first and a hidden textarea is the fallback,
- * which is what a page served over plain HTTP, an older Safari, or a browser
- * that refused the permission is left with. A refusal is an outcome the caller
- * shows rather than an error it has to catch, so both paths resolve.
- * @param text - What to put on the clipboard.
- * @returns Whether the clipboard now holds the text.
+ * With `html`, both renderings go on as one item, so a paste into Word or
+ * Google Docs keeps the formatting. Where that is refused, or for plain text,
+ * the async Clipboard API is tried and a hidden textarea is the fallback, which
+ * is what a page served over plain HTTP, an older Safari, or a browser that
+ * refused the permission is left with. A refusal is an outcome the caller
+ * shows rather than an error it has to catch, so every path resolves.
+ * @param content - The text, or the text and its HTML.
+ * @returns Whether the clipboard now holds the content — at least as text.
  */
-export declare function writeToClipboard(text: string): Promise<boolean>;
+export declare function writeToClipboard(content: ClipboardContent): Promise<boolean>;
 //# sourceMappingURL=writeToClipboard.d.ts.map

package/lib/clipboard/core/writeToClipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"writeToClipboard.d.ts","sourceRoot":"","sources":["../../../src/clipboard/core/writeToClipboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAYrE"}
+{"version":3,"file":"writeToClipboard.d.ts","sourceRoot":"","sources":["../../../src/clipboard/core/writeToClipboard.ts"],"names":[],"mappings":"AAEA,kEAAkE;AAClE,MAAM,WAAW,aAAa;IAC5B,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wFAAwF;AACxF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,aAAa,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,OAAO,CAAC,CAuBlB"}

package/lib/clipboard/core/writeToClipboard.js

@@ -1,14 +1,27 @@
+import { writeClipboardItem } from "./clipboardItem.js";
 /**
  * Put a piece of text on the clipboard, without ever throwing at the caller.
  *
- * The async Clipboard API is tried first and a hidden textarea is the fallback,
- * which is what a page served over plain HTTP, an older Safari, or a browser
- * that refused the permission is left with. A refusal is an outcome the caller
- * shows rather than an error it has to catch, so both paths resolve.
- * @param text - What to put on the clipboard.
- * @returns Whether the clipboard now holds the text.
+ * With `html`, both renderings go on as one item, so a paste into Word or
+ * Google Docs keeps the formatting. Where that is refused, or for plain text,
+ * the async Clipboard API is tried and a hidden textarea is the fallback, which
+ * is what a page served over plain HTTP, an older Safari, or a browser that
+ * refused the permission is left with. A refusal is an outcome the caller
+ * shows rather than an error it has to catch, so every path resolves.
+ * @param content - The text, or the text and its HTML.
+ * @returns Whether the clipboard now holds the content — at least as text.
  */
-export async function writeToClipboard(text) {
+export async function writeToClipboard(content) {
+    const text = typeof content === 'string' ? content : content.text;
+    const html = typeof content === 'string' ? undefined : content.html;
+    if (html !== undefined && typeof Blob !== 'undefined') {
+        const written = await writeClipboardItem({
+            'text/html': new Blob([html], { type: 'text/html' }),
+            'text/plain': new Blob([text], { type: 'text/plain' }),
+        });
+        if (written)
+            return true;
+    }
     const clipboard = globalThis.navigator?.clipboard;
     if (clipboard) {
         try {

package/lib/clipboard/core/writeToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"writeToClipboard.js","sourceRoot":"","sources":["../../../src/clipboard/core/writeToClipboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,IAAY;IACjD,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC;IAClD,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO,IAAI,CAAC;QACd,CAAC;QAAC,MAAM,CAAC;YACP,yEAAyE;YACzE,qEAAqE;QACvE,CAAC;IACH,CAAC;IACD,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;AACjC,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;IAElD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IACtC,uEAAuE;IACvE,gEAAgE;IAChE,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,CAAC;IAElB,IAAI,CAAC;QACH,8GAA8G;QAC9G,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;YAAS,CAAC;QACT,QAAQ,CAAC,MAAM,EAAE,CAAC;IACpB,CAAC;AACH,CAAC"}
+{"version":3,"file":"writeToClipboard.js","sourceRoot":"","sources":["../../../src/clipboard/core/writeToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAiBxD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,KAAK,UAAU,gBAAgB,CACpC,OAAyB;IAEzB,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;IAClE,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;IAEpE,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,IAAI,KAAK,WAAW,EAAE,CAAC;QACtD,MAAM,OAAO,GAAG,MAAM,kBAAkB,CAAC;YACvC,WAAW,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;YACpD,YAAY,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;SACvD,CAAC,CAAC;QACH,IAAI,OAAO;YAAE,OAAO,IAAI,CAAC;IAC3B,CAAC;IAED,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC;IAClD,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO,IAAI,CAAC;QACd,CAAC;QAAC,MAAM,CAAC;YACP,yEAAyE;YACzE,qEAAqE;QACvE,CAAC;IACH,CAAC;IACD,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;AACjC,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,KAAK,CAAC;IAElD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IACtC,uEAAuE;IACvE,gEAAgE;IAChE,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,CAAC;IAElB,IAAI,CAAC;QACH,8GAA8G;QAC9G,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;YAAS,CAAC;QACT,QAAQ,CAAC,MAAM,EAAE,CAAC;IACpB,CAAC;AACH,CAAC"}

package/lib/clipboard/ui/CodeBlock.d.ts

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 /** How a code block sits on the page it is shown in. */
 export type CodeBlockTone = 'default' | 'muted' | 'dark';
+/** What {@link CodeBlock} shows, how it is painted, and whether it copies. */
 export interface CodeBlockProps {
     /** The text shown, and what the copy button hands over. */
     code: string;

package/lib/clipboard/ui/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpE,wDAAwD;AACxD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AA2BzD,MAAM,WAAW,cAAc;IAC7B,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAoB7D"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpE,wDAAwD;AACxD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AA2BzD,8EAA8E;AAC9E,MAAM,WAAW,cAAc;IAC7B,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CA2B7D"}

package/lib/clipboard/ui/CodeBlock.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinClassNames } from "../../shared/ui/joinClassNames.js";
+import { TOKEN } from "../../tokens/core/familyTokens.js";
 import { CopyButton } from "./CopyButton.js";
 const HOLDER_STYLE = { position: 'relative' };
 const COPY_STYLE = { position: 'absolute', top: 4, right: 4 };
@@ -13,8 +15,8 @@ const BASE_PRE_STYLE = {
 const TONE_STYLE = {
     default: {},
     muted: {
-        background: 'var(--surface-sunken, #f6f7f9)',
-        border: '1px solid var(--border, #d3d8de)',
+        background: TOKEN.surfaceSunken,
+        border: `1px solid ${TOKEN.border}`,
     },
     dark: {
         background: '#1e293b',
@@ -30,15 +32,7 @@ const TONE_STYLE = {
  */
 export function CodeBlock(props) {
     const { code, children, tone = 'default', copyable = false, maxHeight, className, } = props;
-    return (_jsxs("div", { className: holderClassName(tone, className), style: HOLDER_STYLE, children: [_jsx("pre", { style: preStyle(tone, copyable, maxHeight), children: children ?? code }), copyable ? (_jsx("span", { style: COPY_STYLE, children: _jsx(CopyButton, { content: code, minimal: true, small: true }) })) : null] }));
-}
-function holderClassName(tone, className) {
-    const names = ['code-block'];
-    if (tone !== 'default')
-        names.push(`code-block--${tone}`);
-    if (className !== undefined)
-        names.push(className);
-    return names.join(' ');
+    return (_jsxs("div", { className: joinClassNames('code-block', tone !== 'default' && `code-block--${tone}`, className), style: HOLDER_STYLE, children: [_jsx("pre", { style: preStyle(tone, copyable, maxHeight), children: children ?? code }), copyable ? (_jsx("span", { style: COPY_STYLE, children: _jsx(CopyButton, { content: code, minimal: true, small: true }) })) : null] }));
 }
 function preStyle(tone, copyable, maxHeight) {
     return {

package/lib/clipboard/ui/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/clipboard/ui/CodeBlock.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAK9C,MAAM,YAAY,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AAC7D,MAAM,UAAU,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAE7E,MAAM,cAAc,GAAkB;IACpC,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,UAAU;CACzB,CAAC;AAEF,MAAM,UAAU,GAAyC;IACvD,OAAO,EAAE,EAAE;IACX,KAAK,EAAE;QACL,UAAU,EAAE,gCAAgC;QAC5C,MAAM,EAAE,kCAAkC;KAC3C;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAmCF;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,eAAK,SAAS,EAAE,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,aACnE,cAAK,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,YAAG,QAAQ,IAAI,IAAI,GAAO,EACxE,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,KAAK,EAAE,UAAU,YACrB,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,QAAC,KAAK,SAAG,GACtC,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,IAAmB,EAAE,SAAkB;IAC9D,MAAM,KAAK,GAAG,CAAC,YAAY,CAAC,CAAC;IAC7B,IAAI,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC;IAC1D,IAAI,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACnD,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,CAAC;AAED,SAAS,QAAQ,CACf,IAAmB,EACnB,QAAiB,EACjB,SAAsC;IAEtC,OAAO;QACL,GAAG,cAAc;QACjB,GAAG,UAAU,CAAC,IAAI,CAAC;QACnB,kEAAkE;QAClE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,GAAG,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;KACrE,CAAC;AACJ,CAAC"}
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/clipboard/ui/CodeBlock.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAK9C,MAAM,YAAY,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AAC7D,MAAM,UAAU,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAE7E,MAAM,cAAc,GAAkB;IACpC,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,UAAU;CACzB,CAAC;AAEF,MAAM,UAAU,GAAyC;IACvD,OAAO,EAAE,EAAE;IACX,KAAK,EAAE;QACL,UAAU,EAAE,KAAK,CAAC,aAAa;QAC/B,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,EAAE;KACpC;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAoCF;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,eACE,SAAS,EAAE,cAAc,CACvB,YAAY,EACZ,IAAI,KAAK,SAAS,IAAI,eAAe,IAAI,EAAE,EAC3C,SAAS,CACV,EACD,KAAK,EAAE,YAAY,aAEnB,cAAK,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,YAAG,QAAQ,IAAI,IAAI,GAAO,EACxE,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,KAAK,EAAE,UAAU,YACrB,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,QAAC,KAAK,SAAG,GACtC,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CACf,IAAmB,EACnB,QAAiB,EACjB,SAAsC;IAEtC,OAAO;QACL,GAAG,cAAc;QACjB,GAAG,UAAU,CAAC,IAAI,CAAC;QACnB,kEAAkE;QAClE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,GAAG,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;KACrE,CAAC;AACJ,CAAC"}

package/lib/clipboard/ui/CopyButton.d.ts

@@ -1,5 +1,6 @@
 import type { IconName } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
+/** What {@link CopyButton} copies, and how it reads. */
 export interface CopyButtonProps {
     /**
      * What to copy. A function is called when the button is pressed, which is
@@ -19,6 +20,11 @@ export interface CopyButtonProps {
      * @default 'Copied'
      */
     copiedLabel?: string;
+    /**
+     * Text shown while a refused copy is being reported, when there is a label.
+     * @default 'Copy failed'
+     */
+    failedLabel?: string;
     /**
      * Whether the button drops its background, for a toolbar or a code block.
      * @default false
@@ -56,7 +62,8 @@ export interface CopyButtonProps {
     className?: string;
 }
 /**
- * A button that puts a piece of text on the clipboard and says so.
+ * A button that puts a piece of text on the clipboard and says so — with a
+ * tick when it worked, and a cross when the browser refused it.
  * @param props - What to copy, what the button reads, and how it looks.
  * @returns The copy button.
  */

package/lib/clipboard/ui/CopyButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA+B/D"}
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAU,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,wDAAwD;AACxD,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAwC/D"}

package/lib/clipboard/ui/CopyButton.js

@@ -2,20 +2,43 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@blueprintjs/core';
 import { DEFAULT_COPY_RESET_AFTER, useCopyToClipboard, } from "./useCopyToClipboard.js";
 /**
- * A button that puts a piece of text on the clipboard and says so.
+ * A button that puts a piece of text on the clipboard and says so — with a
+ * tick when it worked, and a cross when the browser refused it.
  * @param props - What to copy, what the button reads, and how it looks.
  * @returns The copy button.
  */
 export function CopyButton(props) {
-    const { content, label, copiedLabel = 'Copied', minimal = false, small = false, icon = 'duplicate', disabled = false, resetAfter = DEFAULT_COPY_RESET_AFTER, title = 'Copy to clipboard', className, } = props;
-    const { copied, copy } = useCopyToClipboard(resetAfter);
-    return (_jsx(Button, { className: className, variant: minimal ? 'minimal' : 'solid', size: small ? 'small' : 'medium', icon: copied ? 'tick' : icon, intent: copied ? 'success' : 'none', text: buttonText(label, copiedLabel, copied), disabled: disabled, title: title, "aria-label": label ?? title, onClick: () => {
+    const { content, label, copiedLabel = 'Copied', failedLabel = 'Copy failed', minimal = false, small = false, icon = 'duplicate', disabled = false, resetAfter = DEFAULT_COPY_RESET_AFTER, title = 'Copy to clipboard', className, } = props;
+    const { copied, failed, copy } = useCopyToClipboard(resetAfter);
+    const look = buttonLook({
+        copied,
+        failed,
+        icon,
+        label,
+        copiedLabel,
+        failedLabel,
+    });
+    return (_jsx(Button, { className: className, variant: minimal ? 'minimal' : 'solid', size: small ? 'small' : 'medium', icon: look.icon, intent: look.intent, text: look.text, disabled: disabled, title: title, "aria-label": label ?? title, onClick: () => {
             void copy(typeof content === 'function' ? content() : content);
         } }));
 }
-function buttonText(label, copiedLabel, copied) {
-    if (label === undefined)
-        return undefined;
-    return copied ? copiedLabel : label;
+function buttonLook(input) {
+    const { copied, failed, icon, label, copiedLabel, failedLabel } = input;
+    const hasLabel = label !== undefined;
+    if (copied) {
+        return {
+            icon: 'tick',
+            intent: 'success',
+            text: hasLabel ? copiedLabel : undefined,
+        };
+    }
+    if (failed) {
+        return {
+            icon: 'cross',
+            intent: 'danger',
+            text: hasLabel ? failedLabel : undefined,
+        };
+    }
+    return { icon, intent: 'none', text: label };
 }
 //# sourceMappingURL=CopyButton.js.map

package/lib/clipboard/ui/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EACL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AA0DjC;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,OAAO,EACP,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,WAAW,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,wBAAwB,EACrC,KAAK,GAAG,mBAAmB,EAC3B,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAExD,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAChC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5B,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EACnC,IAAI,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,CAAC,EAC5C,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,gBACA,KAAK,IAAI,KAAK,EAC1B,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,IAAI,CAAC,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACjE,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CACjB,KAAyB,EACzB,WAAmB,EACnB,MAAe;IAEf,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAC1C,OAAO,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC;AACtC,CAAC"}
+{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EACL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AAgEjC;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,OAAO,EACP,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,WAAW,GAAG,aAAa,EAC3B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,WAAW,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,wBAAwB,EACrC,KAAK,GAAG,mBAAmB,EAC3B,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,UAAU,CAAC;QACtB,MAAM;QACN,MAAM;QACN,IAAI;QACJ,KAAK;QACL,WAAW;QACX,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,gBACA,KAAK,IAAI,KAAK,EAC1B,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,IAAI,CAAC,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACjE,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAWD,SAAS,UAAU,CAAC,KAAsB;IAKxC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IACxE,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC;IACrC,IAAI,MAAM,EAAE,CAAC;QACX,OAAO;YACL,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,SAAS;YACjB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;SACzC,CAAC;IACJ,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,OAAO;YACL,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,QAAQ;YAChB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;SACzC,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC/C,CAAC"}

package/lib/clipboard/ui/CopyableValue.d.ts

@@ -0,0 +1,51 @@
+import type { ReactElement, ReactNode } from 'react';
+/** What {@link CopyableValue} names, shows and copies. */
+export interface CopyableValueProps {
+    /** What the value is, written above it, e.g. `InChIKey`. */
+    label: string;
+    /** The value itself, which is also what the button copies. */
+    value: string;
+    /**
+     * A longer explanation of the label, shown on hover.
+     * @default undefined — the label carries no hover text
+     */
+    hint?: string;
+    /**
+     * Whether the value keeps its line breaks and scrolls past `maxHeight`, for
+     * a molfile or any other multi-line notation.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Height past which a block value scrolls on its own.
+     * @default 160
+     */
+    maxHeight?: number | string;
+    /**
+     * What the pointer and a screen reader are told the button does.
+     * @default `Copy the ${label}`
+     */
+    copyTitle?: string;
+    /**
+     * What goes under the value: the links an identifier leads to, a note on it.
+     * @default undefined
+     */
+    children?: ReactNode;
+    /**
+     * Class the row carries, in addition to `copyable-value`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * One read-only value, named, with the button that copies it.
+ *
+ * A derived notation — a SMILES, an InChIKey, an accession — is only useful
+ * somewhere else, so it is shown with the single click that puts it on the
+ * clipboard, and selecting the value by hand takes all of it at once. An empty
+ * value reads as the missing marker and offers nothing to copy.
+ * @param props - See {@link CopyableValueProps}.
+ * @returns The labelled value and its copy button.
+ */
+export declare function CopyableValue(props: CopyableValueProps): ReactElement;
+//# sourceMappingURL=CopyableValue.d.ts.map

package/lib/clipboard/ui/CopyableValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableValue.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyableValue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,0DAA0D;AAC1D,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA8CrE"}

package/lib/clipboard/ui/CopyableValue.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MISSING_VALUE } from "../../format/core/missing.js";
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { CopyButton } from "./CopyButton.js";
+const DEFAULT_BLOCK_HEIGHT = 160;
+/**
+ * One read-only value, named, with the button that copies it.
+ *
+ * A derived notation — a SMILES, an InChIKey, an accession — is only useful
+ * somewhere else, so it is shown with the single click that puts it on the
+ * clipboard, and selecting the value by hand takes all of it at once. An empty
+ * value reads as the missing marker and offers nothing to copy.
+ * @param props - See {@link CopyableValueProps}.
+ * @returns The labelled value and its copy button.
+ */
+export function CopyableValue(props) {
+    const { label, value, hint, block = false, maxHeight = DEFAULT_BLOCK_HEIGHT, copyTitle = `Copy the ${label}`, children, className, } = props;
+    const isEmpty = value === '';
+    return (_jsxs("div", { className: className === undefined
+            ? 'copyable-value'
+            : `copyable-value ${className}`, children: [_jsxs("div", { style: HEADER_STYLE, children: [_jsx("span", { className: "copyable-value__label", style: hint === undefined ? LABEL_STYLE : HINTED_LABEL_STYLE, title: hint, children: label }), _jsx(CopyButton, { content: value, title: copyTitle, disabled: isEmpty, minimal: true, small: true })] }), _jsx("code", { className: "copyable-value__value", style: block ? { ...BLOCK_VALUE_STYLE, maxHeight } : VALUE_STYLE, children: isEmpty ? MISSING_VALUE : value }), children] }));
+}
+const HEADER_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+};
+const LABEL_STYLE = {
+    color: TOKEN.textMuted,
+    fontSize: 12,
+    fontWeight: 600,
+};
+const HINTED_LABEL_STYLE = {
+    ...LABEL_STYLE,
+    cursor: 'help',
+};
+const VALUE_STYLE = {
+    display: 'block',
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    fontSize: 12,
+    overflowWrap: 'anywhere',
+    userSelect: 'all',
+};
+const BLOCK_VALUE_STYLE = {
+    ...VALUE_STYLE,
+    whiteSpace: 'pre',
+    overflowWrap: 'normal',
+    overflow: 'auto',
+};
+//# sourceMappingURL=CopyableValue.js.map

package/lib/clipboard/ui/CopyableValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableValue.js","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyableValue.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAyCjC;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,oBAAoB,EAChC,SAAS,GAAG,YAAY,KAAK,EAAE,EAC/B,QAAQ,EACR,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,KAAK,KAAK,EAAE,CAAC;IAE7B,OAAO,CACL,eACE,SAAS,EACP,SAAS,KAAK,SAAS;YACrB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,kBAAkB,SAAS,EAAE,aAGnC,eAAK,KAAK,EAAE,YAAY,aACtB,eACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,EAC5D,KAAK,EAAE,IAAI,YAEV,KAAK,GACD,EACP,KAAC,UAAU,IACT,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,OAAO,EACjB,OAAO,QACP,KAAK,SACL,IACE,EACN,eACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,iBAAiB,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,YAE/D,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,GAC3B,EACN,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,kBAAkB,GAAG;IACzB,GAAG,WAAW;IACd,MAAM,EAAE,MAAM;CACkB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,gDAAgD;IAC5D,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,KAAK;CACe,CAAC;AAEnC,MAAM,iBAAiB,GAAG;IACxB,GAAG,WAAW;IACd,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,QAAQ;IACtB,QAAQ,EAAE,MAAM;CACgB,CAAC"}

package/lib/clipboard/ui/copyFeedback.d.ts

@@ -0,0 +1,38 @@
+/** How the last copy went: taken by the clipboard, or refused. */
+type CopyOutcome = 'copied' | 'failed';
+/** What a copy leaves on screen for a moment. */
+export interface CopyFeedbackState {
+    /** How the last copy went, or `undefined` once its moment has passed. */
+    outcome: CopyOutcome | undefined;
+    /** The key the last copy was made under, so one entry of several shows it. */
+    key: string | undefined;
+}
+/** The state before anything was copied, and after the confirmation fades. */
+export declare const IDLE_COPY_FEEDBACK: CopyFeedbackState;
+/** The timer behind a copy confirmation. */
+export interface CopyFeedback {
+    /**
+     * Show how a copy went, replacing whatever was shown, for `resetAfter`.
+     * @param written - Whether the clipboard took it.
+     * @param key - Which of several copy actions it was.
+     */
+    announce: (written: boolean, key?: string) => void;
+    /**
+     * Stop the timer for good and clear an outcome still shown; later
+     * announcements show nothing.
+     */
+    dispose: () => void;
+}
+/**
+ * The confirmation a copy leaves behind, and the one timer that clears it.
+ *
+ * Kept apart from React so every copy action of the family — a button, a
+ * citation menu entry, a row of notations — confirms for the same time and
+ * leaves no timer behind once its component is gone.
+ * @param resetAfter - How long an outcome is shown, in milliseconds.
+ * @param onChange - Called with each new state.
+ * @returns The controller.
+ */
+export declare function createCopyFeedback(resetAfter: number, onChange: (state: CopyFeedbackState) => void): CopyFeedback;
+export {};
+//# sourceMappingURL=copyFeedback.d.ts.map

package/lib/clipboard/ui/copyFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyFeedback.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/copyFeedback.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,KAAK,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,iBAAiB;IAChC,yEAAyE;IACzE,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,8EAA8E;IAC9E,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CACzB;AAED,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,EAAE,iBAGhC,CAAC;AAEF,4CAA4C;AAC5C,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,GAC3C,YAAY,CAsBd"}

package/lib/clipboard/ui/copyFeedback.js

@@ -0,0 +1,40 @@
+/** The state before anything was copied, and after the confirmation fades. */
+export const IDLE_COPY_FEEDBACK = {
+    outcome: undefined,
+    key: undefined,
+};
+/**
+ * The confirmation a copy leaves behind, and the one timer that clears it.
+ *
+ * Kept apart from React so every copy action of the family — a button, a
+ * citation menu entry, a row of notations — confirms for the same time and
+ * leaves no timer behind once its component is gone.
+ * @param resetAfter - How long an outcome is shown, in milliseconds.
+ * @param onChange - Called with each new state.
+ * @returns The controller.
+ */
+export function createCopyFeedback(resetAfter, onChange) {
+    let timer;
+    let disposed = false;
+    return {
+        announce: (written, key) => {
+            if (disposed)
+                return;
+            clearTimeout(timer);
+            onChange({ outcome: written ? 'copied' : 'failed', key });
+            timer = setTimeout(() => {
+                timer = undefined;
+                onChange(IDLE_COPY_FEEDBACK);
+            }, resetAfter);
+        },
+        dispose: () => {
+            disposed = true;
+            if (timer === undefined)
+                return;
+            clearTimeout(timer);
+            timer = undefined;
+            onChange(IDLE_COPY_FEEDBACK);
+        },
+    };
+}
+//# sourceMappingURL=copyFeedback.js.map

package/lib/clipboard/ui/copyFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyFeedback.js","sourceRoot":"","sources":["../../../src/clipboard/ui/copyFeedback.ts"],"names":[],"mappings":"AAWA,8EAA8E;AAC9E,MAAM,CAAC,MAAM,kBAAkB,GAAsB;IACnD,OAAO,EAAE,SAAS;IAClB,GAAG,EAAE,SAAS;CACf,CAAC;AAiBF;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAChC,UAAkB,EAClB,QAA4C;IAE5C,IAAI,KAAgD,CAAC;IACrD,IAAI,QAAQ,GAAG,KAAK,CAAC;IAErB,OAAO;QACL,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;YACzB,IAAI,QAAQ;gBAAE,OAAO;YACrB,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;YAC1D,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBACtB,KAAK,GAAG,SAAS,CAAC;gBAClB,QAAQ,CAAC,kBAAkB,CAAC,CAAC;YAC/B,CAAC,EAAE,UAAU,CAAC,CAAC;QACjB,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,GAAG,IAAI,CAAC;YAChB,IAAI,KAAK,KAAK,SAAS;gBAAE,OAAO;YAChC,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,KAAK,GAAG,SAAS,CAAC;YAClB,QAAQ,CAAC,kBAAkB,CAAC,CAAC;QAC/B,CAAC;KACF,CAAC;AACJ,CAAC"}

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

@@ -1,7 +1,9 @@
 export type { CodeBlockProps, CodeBlockTone } from './CodeBlock.tsx';
 export { CodeBlock } from './CodeBlock.tsx';
+export type { CopyableValueProps } from './CopyableValue.tsx';
+export { CopyableValue } from './CopyableValue.tsx';
 export type { CopyButtonProps } from './CopyButton.tsx';
 export { CopyButton } from './CopyButton.tsx';
-export type { CopyToClipboard } from './useCopyToClipboard.ts';
+export type { CopyContent, CopyToClipboard } from './useCopyToClipboard.ts';
 export { DEFAULT_COPY_RESET_AFTER, useCopyToClipboard, } from './useCopyToClipboard.ts';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EACL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EACL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC"}

package/lib/clipboard/ui/index.js

@@ -1,4 +1,5 @@
 export { CodeBlock } from "./CodeBlock.js";
+export { CopyableValue } from "./CopyableValue.js";
 export { CopyButton } from "./CopyButton.js";
 export { DEFAULT_COPY_RESET_AFTER, useCopyToClipboard, } from "./useCopyToClipboard.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/clipboard/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EACL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/clipboard/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EACL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC"}