react-cheminfo 0.28.0 → 0.30.0

package/lib/chart/ui/useChartZoom.d.ts

@@ -0,0 +1,88 @@
+/**
+ * The gestures that move the window a chart is showing.
+ *
+ * A drag zooms the x axis, because that is the axis a chemist reads: the
+ * question is nearly always "what is between 366 and 372", never "what is
+ * between forty and sixty percent". The y axis comes along only when the drag is
+ * released past the baseline, a gesture that cannot be made by accident and one
+ * the preview rectangle announces before the button is let go. The wheel scales
+ * the y axis on its own, bringing up the small features being asked about far
+ * more often than any box around them, and a double click puts the window back.
+ *
+ * Which of them a chart answers is `ZoomGestures`, and a viewer is free to offer
+ * fewer: a drag can be the rectangle it sweeps out, and the wheel can be left to
+ * the page. Neither is a preference to be toggled — it is what the measurement
+ * makes worth doing, and `chartDomain.ts` says why.
+ *
+ * Not every gesture moves the window. A drag can be asked to report the range it
+ * swept out, a press that went nowhere is a click, and a host can refuse a press
+ * outright so that a handle drawn on the chart keeps the gesture aimed at it;
+ * `chartGestures.ts` holds all three, and `zoomDomain.ts` holds what a gesture
+ * does to a window. Neither knows anything of React, which is what lets the
+ * answer to a gesture be read without a chart on screen.
+ *
+ * What the window is fitted *to* is handed in rather than worked out here, and
+ * that is what makes one hook serve every kind of spectrum: fitting reads the
+ * traces, and a mass spectrum's are two per spectrum where an infrared
+ * spectrum's are one in either of two units. `useChartWindow` then holds the
+ * answer each viewer hands over.
+ */
+import type { RefObject } from 'react';
+import type { ChartDomain, YAxisRules, ZoomGestures } from '../core/chartDomain.ts';
+import type { ChartScale } from '../core/chartScale.ts';
+import type { ZoomSelection } from '../core/zoomDomain.ts';
+import type { ChartGestureReports, ChartZoomHandlers } from './chartGestures.ts';
+import type { ChartWindowOptions } from './useChartWindow.ts';
+/** The chart, what it is fitted to, and which gestures it answers. */
+export interface ChartZoomOptions extends ChartWindowOptions, ChartGestureReports {
+    /** The SVG the gestures are made on, as it was handed to its `ref`. */
+    svgRef: RefObject<SVGSVGElement | null>;
+    /**
+     * How the y axis behaves under a gesture — where its baseline is, and whether
+     * that baseline is held in the window.
+     * @default a stick spectrum's: a baseline of zero, always kept
+     */
+    yAxis?: YAxisRules;
+    /**
+     * Which gestures the chart answers: what a drag asks for, and whether the
+     * wheel scales the value axis at all.
+     *
+     * Both together rather than one at a time, because they are one decision. A
+     * viewer that reads its data in more than one way — an infrared spectrum is
+     * read as absorbance or as percent transmittance — settles the whole set from
+     * whatever it is currently reading, and hands it over as it stands.
+     * @default every gesture: a drag along the horizontal axis, and the wheel
+     */
+    gestures?: ZoomGestures;
+}
+/** The window, the drag being made in it, and how to work both. */
+export interface ChartZoom {
+    /** What the chart is showing. */
+    domain: ChartDomain;
+    /**
+     * The horizontal axis, as every gesture was measured against it: **draw with
+     * this rather than building one**, since a second scale beside it is a second
+     * chance to get a reversed axis the wrong way round.
+     */
+    xScale: ChartScale;
+    /** The vertical axis, likewise. */
+    yScale: ChartScale;
+    /** The drag being made, `null` when none is. */
+    selection: ZoomSelection | null;
+    /** Put the window back to everything that is drawn. */
+    reset: () => void;
+    /** Put on the SVG. */
+    handlers: ChartZoomHandlers;
+}
+/**
+ * Zoom a chart by dragging it, by the wheel and by double clicking it.
+ *
+ * Which window is on screen — the fit, the one a gesture arrived at, or the one
+ * a host imposes — is `useChartWindow`. What is here is what a gesture *is*: the
+ * drag as it is made, the rules it is read under, and the answer it comes to.
+ * @param options - The chart, the fit and how its y axis behaves.
+ * @returns The window and the gestures that move it.
+ */
+export declare function useChartZoom(options: ChartZoomOptions): ChartZoom;
+export { type ChartZoomHandlers } from './chartGestures.ts';
+//# sourceMappingURL=useChartZoom.d.ts.map

package/lib/chart/ui/useChartZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartZoom.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/useChartZoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KAAK,EAAqC,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,YAAY,EAEb,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAElB,MAAM,oBAAoB,CAAC;AAO5B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAI9D,sEAAsE;AACtE,MAAM,WAAW,gBACf,SAAQ,kBAAkB,EAAE,mBAAmB;IAC/C,uEAAuE;IACvE,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAED,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,iCAAiC;IACjC,MAAM,EAAE,WAAW,CAAC;IACpB;;;;OAIG;IACH,MAAM,EAAE,UAAU,CAAC;IACnB,mCAAmC;IACnC,MAAM,EAAE,UAAU,CAAC;IACnB,gDAAgD;IAChD,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,uDAAuD;IACvD,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,sBAAsB;IACtB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,GAAG,SAAS,CA2IjE;AAED,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/chart/ui/useChartZoom.js

@@ -0,0 +1,142 @@
+/**
+ * The gestures that move the window a chart is showing.
+ *
+ * A drag zooms the x axis, because that is the axis a chemist reads: the
+ * question is nearly always "what is between 366 and 372", never "what is
+ * between forty and sixty percent". The y axis comes along only when the drag is
+ * released past the baseline, a gesture that cannot be made by accident and one
+ * the preview rectangle announces before the button is let go. The wheel scales
+ * the y axis on its own, bringing up the small features being asked about far
+ * more often than any box around them, and a double click puts the window back.
+ *
+ * Which of them a chart answers is `ZoomGestures`, and a viewer is free to offer
+ * fewer: a drag can be the rectangle it sweeps out, and the wheel can be left to
+ * the page. Neither is a preference to be toggled — it is what the measurement
+ * makes worth doing, and `chartDomain.ts` says why.
+ *
+ * Not every gesture moves the window. A drag can be asked to report the range it
+ * swept out, a press that went nowhere is a click, and a host can refuse a press
+ * outright so that a handle drawn on the chart keeps the gesture aimed at it;
+ * `chartGestures.ts` holds all three, and `zoomDomain.ts` holds what a gesture
+ * does to a window. Neither knows anything of React, which is what lets the
+ * answer to a gesture be read without a chart on screen.
+ *
+ * What the window is fitted *to* is handed in rather than worked out here, and
+ * that is what makes one hook serve every kind of spectrum: fitting reads the
+ * traces, and a mass spectrum's are two per spectrum where an infrared
+ * spectrum's are one in either of two units. `useChartWindow` then holds the
+ * answer each viewer hands over.
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { DEFAULT_ZOOM_GESTURES } from "../core/chartDomain.js";
+import { chartWheelFactor } from "../core/chartViewport.js";
+import { scaledYAxis, zoomSelection } from "../core/zoomDomain.js";
+import { answeredRelease, draggedTo, releaseDrag, startedDrag, } from "./chartGestures.js";
+import { useChartWindow } from "./useChartWindow.js";
+import { useWheelListener } from "./useWheelListener.js";
+/**
+ * Zoom a chart by dragging it, by the wheel and by double clicking it.
+ *
+ * Which window is on screen — the fit, the one a gesture arrived at, or the one
+ * a host imposes — is `useChartWindow`. What is here is what a gesture *is*: the
+ * drag as it is made, the rules it is read under, and the answer it comes to.
+ * @param options - The chart, the fit and how its y axis behaves.
+ * @returns The window and the gestures that move it.
+ */
+export function useChartZoom(options) {
+    const { fitted, fitKey, yFitKey, svgRef, plot, yAxis, gestures, reverseX = false, domain: imposed = null, onSelectRange, onClick, shouldStartDrag, } = options;
+    const { domain, xScale, yScale, show, reset } = useChartWindow({
+        fitted,
+        fitKey,
+        ...(yFitKey === undefined ? {} : { yFitKey }),
+        plot,
+        domain: imposed,
+        reverseX,
+    });
+    // Taken apart field by field rather than depending on the object, so a viewer
+    // rebuilding an equal `yAxis` or `gestures` on every render does not rebuild
+    // the rules and every callback hanging off them. Every field has to be listed
+    // here: one left out silently falls back to its default, which is how a
+    // transmittance chart came to answer a mass spectrum's question about its own
+    // baseline.
+    const baseline = yAxis?.baseline;
+    const keepBaseline = yAxis?.keepBaseline;
+    const pointsDown = yAxis?.pointsDown;
+    const dragMode = gestures?.drag ?? DEFAULT_ZOOM_GESTURES.drag;
+    const wheel = gestures?.wheel ?? DEFAULT_ZOOM_GESTURES.wheel;
+    const rules = useMemo(() => ({ baseline, keepBaseline, pointsDown, drag: dragMode }), [baseline, keepBaseline, pointsDown, dragMode]);
+    const [drag, setDrag] = useState(null);
+    const onWheel = useCallback((event) => {
+        // Refused before the event is touched, so a chart that does not answer the
+        // wheel scrolls the page under the pointer exactly as the rest of it does.
+        // Swallowing the gesture and doing nothing with it would be the one
+        // outcome nobody asked for.
+        if (!wheel)
+            return;
+        const factor = chartWheelFactor(event.deltaY, event.deltaMode);
+        if (factor === 1)
+            return;
+        // Heard non-passively for exactly this: without the refusal the chart
+        // zooms and the page scrolls out from under it at the same time.
+        event.preventDefault();
+        show(scaledYAxis(domain, factor, rules.baseline));
+    }, [domain, rules.baseline, wheel, show]);
+    useWheelListener(svgRef, onWheel);
+    const onPointerDown = useCallback((event) => {
+        const started = startedDrag(event, svgRef.current, shouldStartDrag);
+        if (started !== null)
+            setDrag(started);
+    }, [svgRef, shouldStartDrag]);
+    const onPointerMove = useCallback((event) => {
+        const moved = draggedTo(drag, event, svgRef.current);
+        if (moved !== null)
+            setDrag(moved);
+    }, [drag, svgRef]);
+    const onPointerUp = useCallback((event) => {
+        if (drag?.pointerId !== event.pointerId)
+            return;
+        releaseDrag(event);
+        setDrag(null);
+        const released = draggedTo(drag, event, svgRef.current) ?? drag;
+        const next = answeredRelease(domain, released, plot, xScale, yScale, rules, { onSelectRange, onClick }, 
+        // Read off the release rather than off the press, because that is where
+        // the reader was looking and what `reportClick` already inverts.
+        { shift: event.shiftKey, alt: event.altKey });
+        if (next !== null)
+            show(next);
+    }, [
+        drag,
+        domain,
+        plot,
+        xScale,
+        yScale,
+        svgRef,
+        rules,
+        onSelectRange,
+        onClick,
+        show,
+    ]);
+    const onPointerCancel = useCallback((event) => {
+        if (drag?.pointerId !== event.pointerId)
+            return;
+        releaseDrag(event);
+        setDrag(null);
+    }, [drag]);
+    const selection = useMemo(() => zoomSelection(drag, yScale, rules), [drag, yScale, rules]);
+    return {
+        domain,
+        xScale,
+        yScale,
+        selection,
+        reset,
+        handlers: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel,
+            onDoubleClick: reset,
+        },
+    };
+}
+export {} from "./chartGestures.js";
+//# sourceMappingURL=useChartZoom.js.map

package/lib/chart/ui/useChartZoom.js.map

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

package/lib/chart/ui/useWheelListener.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The wheel over an element, heard loudly enough to refuse the page its
+ * scroll.
+ *
+ * React's `onWheel` is registered passively — the browser is told in advance
+ * that the page may scroll before the handler has had its say — so calling
+ * `preventDefault` inside it does nothing at all: the chart zooms and the page
+ * scrolls out from under it at the same time. The only way to be heard is to
+ * register the listener on the element directly with `{ passive: false }`,
+ * which is what this hook exists to do; nothing else about the gesture belongs
+ * here.
+ *
+ * The listener is attached once and reads the handler through a ref refreshed
+ * on every commit. Both halves are needed: attaching once is what keeps a
+ * pointer resting over the chart from re-registering a listener sixty times a
+ * second, and reading the handler live is what stops that one listener from
+ * zooming the window as it stood when the chart was mounted.
+ */
+import type { RefObject } from 'react';
+/**
+ * Hear the wheel over an element.
+ * @param ref - The element, as it was handed to its `ref`.
+ * @param handler - What to do with the wheel; free to be an inline arrow, since
+ * it is read at the moment the wheel turns rather than closed over when the
+ * listener is attached. It is the handler's own business to call
+ * `preventDefault` — the listener is registered so that the call is honoured,
+ * not so that it is made.
+ */
+export declare function useWheelListener<T extends Element>(ref: RefObject<T | null>, handler: (event: WheelEvent) => void): void;
+//# sourceMappingURL=useWheelListener.d.ts.map

package/lib/chart/ui/useWheelListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWheelListener.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/useWheelListener.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,EAChD,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EACxB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,GACnC,IAAI,CAmBN"}

package/lib/chart/ui/useWheelListener.js

@@ -0,0 +1,57 @@
+/**
+ * The wheel over an element, heard loudly enough to refuse the page its
+ * scroll.
+ *
+ * React's `onWheel` is registered passively — the browser is told in advance
+ * that the page may scroll before the handler has had its say — so calling
+ * `preventDefault` inside it does nothing at all: the chart zooms and the page
+ * scrolls out from under it at the same time. The only way to be heard is to
+ * register the listener on the element directly with `{ passive: false }`,
+ * which is what this hook exists to do; nothing else about the gesture belongs
+ * here.
+ *
+ * The listener is attached once and reads the handler through a ref refreshed
+ * on every commit. Both halves are needed: attaching once is what keeps a
+ * pointer resting over the chart from re-registering a listener sixty times a
+ * second, and reading the handler live is what stops that one listener from
+ * zooming the window as it stood when the chart was mounted.
+ */
+import { useEffect, useLayoutEffect, useRef } from 'react';
+/**
+ * Hear the wheel over an element.
+ * @param ref - The element, as it was handed to its `ref`.
+ * @param handler - What to do with the wheel; free to be an inline arrow, since
+ * it is read at the moment the wheel turns rather than closed over when the
+ * listener is attached. It is the handler's own business to call
+ * `preventDefault` — the listener is registered so that the call is honoured,
+ * not so that it is made.
+ */
+export function useWheelListener(ref, handler) {
+    const latest = useRef(handler);
+    useLayoutEffect(() => {
+        latest.current = handler;
+    });
+    useEffect(() => {
+        const element = ref.current;
+        if (element === null)
+            return;
+        // Typed as the plain `Event` the element's own listener map hands it: an
+        // `Element` is not known to carry a wheel, so the narrowing is done here.
+        function onWheel(event) {
+            if (event instanceof WheelEvent)
+                latest.current(event);
+        }
+        element.addEventListener('wheel', onWheel, WHEEL_LISTENER);
+        return () => {
+            element.removeEventListener('wheel', onWheel);
+        };
+    }, [ref]);
+}
+/**
+ * Registered non-passively, which is the whole reason this hook exists. Nothing
+ * is passed back on removal: a listener is matched on its type, its function
+ * and its capture flag alone, and passing the options object there is a type
+ * error rather than a courtesy.
+ */
+const WHEEL_LISTENER = { passive: false };
+//# sourceMappingURL=useWheelListener.js.map

package/lib/chart/ui/useWheelListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWheelListener.js","sourceRoot":"","sources":["../../../src/chart/ui/useWheelListener.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3D;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAC9B,GAAwB,EACxB,OAAoC;IAEpC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,yEAAyE;QACzE,0EAA0E;QAC1E,SAAS,OAAO,CAAC,KAAY;YAC3B,IAAI,KAAK,YAAY,UAAU;gBAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACzD,CAAC;QACD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAChD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC;AAED;;;;;GAKG;AACH,MAAM,cAAc,GAAG,EAAE,OAAO,EAAE,KAAK,EAAW,CAAC"}

package/lib/chrome/ui/AccountButton.d.ts

@@ -0,0 +1,76 @@
+import type { ReactElement } from 'react';
+import type { NavItem } from './navItem.ts';
+/** Who the site is answering to. */
+export interface AccountIdentity {
+    /** What the person is called on screen. */
+    name: string;
+    /**
+     * What tells the account apart under that name — the address it is held at,
+     * the handle it was opened with.
+     * @default undefined
+     */
+    detail?: string;
+    /**
+     * The letters the mark is drawn with.
+     * @default the first letter of each of the first two words of `name`
+     */
+    initials?: string;
+}
+export interface AccountButtonProps {
+    /** Who is signed in, or `null` when nobody is. */
+    identity: AccountIdentity | null;
+    /**
+     * Whether the site has not heard back yet. Neither state is drawn until it
+     * has: a bar that offers to sign in and then turns into a name has told the
+     * visitor something false, and it is the state they act on first.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The address signing in happens at, for a site with a page of its own for
+     * it. Writing it keeps the entry a real link, so a middle click opens a tab.
+     * @default undefined
+     */
+    signInHref?: string;
+    /**
+     * What the site does when the invitation is picked — route to that page, or
+     * open a credentials dialog for a site that has no page.
+     * @default undefined
+     */
+    onSignIn?: () => void;
+    /**
+     * What the site does when Sign out is picked.
+     * @default undefined
+     */
+    onSignOut?: () => void;
+    /**
+     * What the invitation reads, for a site whose accounts are for one kind of
+     * person — "Teacher sign in". Two words: it is written out in the bar rather
+     * than folded into a glyph.
+     * @default the chrome's own word for it, in the language of the page
+     */
+    signInLabel?: string;
+    /**
+     * The account's own pages, listed above Sign out — a profile, a settings
+     * page.
+     * @default undefined
+     */
+    items?: readonly NavItem[];
+}
+/**
+ * The one utility of the bar that says who the site is answering to: an
+ * invitation when nobody is signed in, and the account's mark when somebody is.
+ *
+ * The two states are told apart by whether an identity is on screen, never by
+ * the direction of an arrow. Blueprint's `log-in` and `log-out` are the same
+ * arrow either side of the same door, and at 14 px among four other monochrome
+ * glyphs nobody reads which side it is on — a site drawing one reports the
+ * visitor as signed in while they are signed out. So the invitation is the
+ * words `Sign in`, which no mark can be mistaken for, and being signed in is
+ * the person's own initials.
+ * @param props - Who is signed in, what signing in and out do, and the pages
+ * the account's menu lists.
+ * @returns The entry, or nothing while the site is still asking.
+ */
+export declare function AccountButton(props: AccountButtonProps): ReactElement | null;
+//# sourceMappingURL=AccountButton.d.ts.map

package/lib/chrome/ui/AccountButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountButton.d.ts","sourceRoot":"","sources":["../../../src/chrome/ui/AccountButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,oCAAoC;AACpC,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,OAAO,EAAE,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAgF5E"}

package/lib/chrome/ui/AccountButton.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuDivider, MenuItem, PopoverNext } from '@blueprintjs/core';
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { NavLink } from "./NavLink.js";
+import { isModifiedClick } from "./navItem.js";
+/**
+ * The one utility of the bar that says who the site is answering to: an
+ * invitation when nobody is signed in, and the account's mark when somebody is.
+ *
+ * The two states are told apart by whether an identity is on screen, never by
+ * the direction of an arrow. Blueprint's `log-in` and `log-out` are the same
+ * arrow either side of the same door, and at 14 px among four other monochrome
+ * glyphs nobody reads which side it is on — a site drawing one reports the
+ * visitor as signed in while they are signed out. So the invitation is the
+ * words `Sign in`, which no mark can be mistaken for, and being signed in is
+ * the person's own initials.
+ * @param props - Who is signed in, what signing in and out do, and the pages
+ * the account's menu lists.
+ * @returns The entry, or nothing while the site is still asking.
+ */
+export function AccountButton(props) {
+    const { identity, loading = false, signInHref, onSignIn, onSignOut, signInLabel, items = [], } = props;
+    const t = useChromeT();
+    if (loading) {
+        // The width of the mark, so the bar does not jump when the answer lands.
+        return _jsx("span", { className: "account-button__pending", "aria-hidden": "true" });
+    }
+    if (identity === null) {
+        return (_jsx(NavLink, { className: "account-button account-button--out", item: {
+                id: 'account',
+                label: signInLabel ?? t('account.signIn'),
+                href: signInHref,
+                onSelect: onSignIn,
+            } }));
+    }
+    const { name, detail, initials = initialsOf(name) } = identity;
+    return (_jsx(PopoverNext, { placement: "bottom-end", content: _jsxs(Menu, { className: "nav-menu account-menu", children: [_jsxs("li", { className: "account-menu__identity", children: [_jsx("span", { className: "account-menu__name", children: name }), detail === undefined ? null : (_jsx("span", { className: "account-menu__detail", children: detail }))] }), _jsx(MenuDivider, {}), items.map((item) => (_jsx(MenuItem, { icon: item.icon, text: item.label, href: item.href, target: item.external ? '_blank' : undefined, onClick: (event) => {
+                        if (item.onSelect === undefined || isModifiedClick(event)) {
+                            return;
+                        }
+                        event.preventDefault();
+                        item.onSelect();
+                    } }, item.id))), items.length === 0 ? null : _jsx(MenuDivider, {}), _jsx(MenuItem, { icon: "log-out", text: t('account.signOut'), onClick: onSignOut })] }), children: _jsx("button", { type: "button", className: "nav-link nav-link--icon account-button account-button--in", title: t('account.signedInAs', { name }), "aria-label": t('account.signedInAs', { name }), children: _jsx("span", { className: "account-mark", children: initials }) }) }));
+}
+/**
+ * The letters a name is marked with: the first of each of its first two words,
+ * or the first two letters of a name written as one word.
+ * @param name - What the person is called.
+ * @returns One or two letters, in capitals.
+ */
+function initialsOf(name) {
+    const [first, second] = name.split(/\s+/).filter((word) => word !== '');
+    if (first === undefined)
+        return '?';
+    if (second === undefined)
+        return firstWordInitials(first);
+    return `${first.charAt(0)}${second.charAt(0)}`.toUpperCase();
+}
+// A single word is usually a handle or an address, where the two letters say
+// more than one does — but never the part after the `@`, which every account
+// on the same domain would share.
+function firstWordInitials(word) {
+    const [local = ''] = word.split('@');
+    return (local === '' ? word : local).slice(0, 2).toUpperCase();
+}
+//# sourceMappingURL=AccountButton.js.map

package/lib/chrome/ui/AccountButton.js.map

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

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

@@ -1,3 +1,5 @@
+export type { AccountButtonProps, AccountIdentity } from './AccountButton.tsx';
+export { AccountButton } from './AccountButton.tsx';
 export type { HeaderToggleOption, HeaderToggleProps } from './HeaderToggle.tsx';
 export { HeaderToggle } from './HeaderToggle.tsx';
 export type { NavItem } from './navItem.ts';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chrome/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,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,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chrome/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,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,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/chrome/ui/index.js

@@ -1,3 +1,4 @@
+export { AccountButton } from "./AccountButton.js";
 export { HeaderToggle } from "./HeaderToggle.js";
 // A site drawing its own link needs the same reading of a click the shared nav
 // items use: a middle click or a modified one belongs to the browser.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/chrome/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAElD,+EAA+E;AAC/E,sEAAsE;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAe,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/chrome/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAElD,+EAA+E;AAC/E,sEAAsE;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAe,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,13 @@
+/**
+ * Put a PNG on the clipboard.
+ *
+ * The image is handed over as a promise rather than as a blob on purpose:
+ * Safari only allows a clipboard write that the click itself started, so the
+ * item has to be built while the handler is still running and the
+ * rasterization awaited by the clipboard rather than before it.
+ * @param png - The image being rasterized.
+ * @returns Whether it was copied. `false` outside a secure context, and in a
+ *   browser whose clipboard takes text only.
+ */
+export declare function writeImageToClipboard(png: Promise<Blob>): Promise<boolean>;
+//# sourceMappingURL=copyPng.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copyPng.d.ts","sourceRoot":"","sources":["../../../src/clipboard/core/copyPng.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,GACjB,OAAO,CAAC,OAAO,CAAC,CAMlB"}

package/lib/clipboard/core/copyPng.js

@@ -0,0 +1,19 @@
+/**
+ * Put a PNG on the clipboard.
+ *
+ * The image is handed over as a promise rather than as a blob on purpose:
+ * Safari only allows a clipboard write that the click itself started, so the
+ * item has to be built while the handler is still running and the
+ * rasterization awaited by the clipboard rather than before it.
+ * @param png - The image being rasterized.
+ * @returns Whether it was copied. `false` outside a secure context, and in a
+ *   browser whose clipboard takes text only.
+ */
+export async function writeImageToClipboard(png) {
+    if (typeof ClipboardItem === 'undefined' || !navigator.clipboard?.write) {
+        return false;
+    }
+    await navigator.clipboard.write([new ClipboardItem({ 'image/png': png })]);
+    return true;
+}
+//# sourceMappingURL=copyPng.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copyPng.js","sourceRoot":"","sources":["../../../src/clipboard/core/copyPng.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,KAAK,UAAU,qBAAqB,CACzC,GAAkB;IAElB,IAAI,OAAO,aAAa,KAAK,WAAW,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;QACxE,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3E,OAAO,IAAI,CAAC;AACd,CAAC"}

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

@@ -1,3 +1,4 @@
+export { writeImageToClipboard } from './copyPng.ts';
 export type { WriteBlobToClipboardOptions } from './writeBlobToClipboard.ts';
 export { writeBlobToClipboard } from './writeBlobToClipboard.ts';
 export type { ClipboardContent, ClipboardText } from './writeToClipboard.ts';

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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/clipboard/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACrD,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,3 +1,4 @@
+export { writeImageToClipboard } from "./copyPng.js";
 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":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/clipboard/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -53,6 +53,12 @@ export interface ClickToCopyProps {
      * @default undefined
      */
     style?: CSSProperties;
+    /**
+     * `data-testid` the element carries, so an end-to-end suite can select the
+     * value without depending on the text inside it.
+     * @default undefined
+     */
+    testId?: string;
 }
 /**
  * A value that is copied by clicking it.

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

@@ -1 +1 @@
-{"version":3,"file":"ClickToCopy.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/ClickToCopy.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EAGb,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAKpE,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvE,yDAAyD;AACzD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,CAAC,CAAC;IACnD,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,kBAAkB,CAAC;IACxB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAYD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAyEjE"}
+{"version":3,"file":"ClickToCopy.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/ClickToCopy.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EAGb,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAKpE,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvE,yDAAyD;AACzD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,CAAC,CAAC;IACnD,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,kBAAkB,CAAC;IACxB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAYD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA2EjE"}