react-cheminfo 0.75.0 → 0.77.0

package/lib/osiris/ui/usePredictions.d.ts

@@ -0,0 +1,81 @@
+/**
+ * The prediction pool, handed to a page.
+ *
+ * The only React in the domain. Results arrive one at a time and are kept in a
+ * map the page reads by row key, so a table draws every row immediately and
+ * fills each one in as its worker answers — nothing waits for the set.
+ *
+ * The two maps are created once and mutated, and a counter beside them changes
+ * to say so. Building a new map per answer would copy a growing map once per
+ * molecule, which on a set of two thousand costs more than the predictions do.
+ */
+import type { WorkerLike } from '../../worker/core/messages.ts';
+import type { PredictionInput, PredictionProgress } from '../core/poolTypes.ts';
+import type { ResourceSource } from '../core/predictors.ts';
+import type { OsirisProperties, RiskDetail, RiskType } from '../core/types.ts';
+/** What a page gives the hook. */
+export interface UsePredictionsOptions {
+    /**
+     * The molecules to predict. One already answered is never asked for again,
+     * so a page may pass its whole set on every render — though memoising it
+     * saves the filtering pass.
+     */
+    molecules: readonly PredictionInput[];
+    /**
+     * The keys of the rows the reader can see, most wanted first. They are
+     * answered before the rest.
+     * @default undefined — the reading order is kept
+     */
+    visibleKeys?: readonly string[];
+    /**
+     * Whether to predict at all. Off while a file is still being read, so the
+     * pool is not asked for half a set.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Where the workers register OpenChemLib's resources from: the absolute URL
+     * of the site's own `openchemlib-resources.json`, resolved on the main thread
+     * — a worker has no `document` to read the deployment's mount path off, and
+     * a relative address would resolve against its hashed chunk.
+     */
+    resources: ResourceSource;
+    /**
+     * Makes one prediction worker: a module worker of the site's own, serving
+     * `runPredictionJob` for the requests `isPredictRequest` accepts. It may be
+     * a new function on every render — it is read only when a worker is made.
+     */
+    createWorker: () => WorkerLike;
+    /**
+     * How many workers to run.
+     * @default one fewer than the machine's cores, clamped to 1 to 8
+     */
+    size?: number;
+}
+/** What the hook gives a page back. */
+export interface UsePredictionsResult {
+    /** What each answered row was predicted to be, by row key. */
+    results: ReadonlyMap<string, OsirisProperties>;
+    /** Why each refused row was refused, by row key. */
+    failures: ReadonlyMap<string, string>;
+    /** How far the pool has got. */
+    progress: PredictionProgress;
+    /** Why no prediction can be made at all, or `null`. */
+    error: string | null;
+    /** Drop everything still queued. */
+    cancel: () => void;
+    /**
+     * Why one risk came back as it did.
+     * @param idCode - The molecule, coordinates included or not.
+     * @param risk - Which of the four risks to explain.
+     * @returns The findings, with the matched atoms and bonds of every fragment.
+     */
+    riskDetail: (idCode: string, risk: RiskType) => Promise<RiskDetail>;
+}
+/**
+ * Predict a set of molecules on a pool of workers, streaming the answers back.
+ * @param options - See {@link UsePredictionsOptions}.
+ * @returns The answers so far, the progress, and the controls.
+ */
+export declare function usePredictions(options: UsePredictionsOptions): UsePredictionsResult;
+//# sourceMappingURL=usePredictions.d.ts.map

package/lib/osiris/ui/usePredictions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePredictions.d.ts","sourceRoot":"","sources":["../../../src/osiris/ui/usePredictions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,KAAK,EACV,eAAe,EAEf,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE/E,kCAAkC;AAClC,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,SAAS,EAAE,SAAS,eAAe,EAAE,CAAC;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,SAAS,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,YAAY,EAAE,MAAM,UAAU,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,uCAAuC;AACvC,MAAM,WAAW,oBAAoB;IACnC,8DAA8D;IAC9D,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC/C,oDAAoD;IACpD,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,gCAAgC;IAChC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,uDAAuD;IACvD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,oCAAoC;IACpC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;;;;OAKG;IACH,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;CACrE;AAoBD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,qBAAqB,GAC7B,oBAAoB,CAmFtB"}

package/lib/osiris/ui/usePredictions.js

@@ -0,0 +1,102 @@
+/**
+ * The prediction pool, handed to a page.
+ *
+ * The only React in the domain. Results arrive one at a time and are kept in a
+ * map the page reads by row key, so a table draws every row immediately and
+ * fills each one in as its worker answers — nothing waits for the set.
+ *
+ * The two maps are created once and mutated, and a counter beside them changes
+ * to say so. Building a new map per answer would copy a growing map once per
+ * molecule, which on a set of two thousand costs more than the predictions do.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPredictionPool } from "../core/predictionPool.js";
+const IDLE = {
+    done: 0,
+    total: 0,
+    pending: 0,
+    running: false,
+};
+/**
+ * Predict a set of molecules on a pool of workers, streaming the answers back.
+ * @param options - See {@link UsePredictionsOptions}.
+ * @returns The answers so far, the progress, and the controls.
+ */
+export function usePredictions(options) {
+    const { molecules, visibleKeys, enabled = true, size } = options;
+    const { resources, createWorker } = options;
+    // Read when the pool and its workers are made rather than listed as a
+    // dependency: a factory written inline is a new function on every render,
+    // and the progress the pool reports causes one.
+    const source = useRef({ resources, createWorker });
+    useEffect(() => {
+        source.current = { resources, createWorker };
+    }, [resources, createWorker]);
+    const [answered] = useState(() => ({
+        results: new Map(),
+        failures: new Map(),
+    }));
+    const [view, setView] = useState({
+        progress: IDLE,
+        error: null,
+        answers: 0,
+    });
+    const pool = useRef(null);
+    const open = useCallback(() => {
+        pool.current ??= createPredictionPool({
+            resources: source.current.resources,
+            createWorker: () => source.current.createWorker(),
+            ...(size === undefined ? {} : { size }),
+            onResult(outcome) {
+                if (outcome.ok)
+                    answered.results.set(outcome.key, outcome.properties);
+                else
+                    answered.failures.set(outcome.key, outcome.message);
+                setView((previous) => ({ ...previous, answers: previous.answers + 1 }));
+            },
+            onProgress(progress) {
+                setView((previous) => ({ ...previous, progress }));
+            },
+            onUnavailable(message) {
+                setView((previous) => ({ ...previous, error: message }));
+            },
+        });
+        return pool.current;
+    }, [answered, size]);
+    const unavailable = view.error;
+    useEffect(() => {
+        if (!enabled || unavailable !== null)
+            return;
+        const waiting = [];
+        for (const molecule of molecules) {
+            if (answered.results.has(molecule.key))
+                continue;
+            if (answered.failures.has(molecule.key))
+                continue;
+            waiting.push(molecule);
+        }
+        if (waiting.length > 0)
+            open().submit(waiting);
+    }, [answered, molecules, enabled, open, unavailable]);
+    useEffect(() => {
+        if (visibleKeys !== undefined)
+            pool.current?.prioritize(visibleKeys);
+    }, [visibleKeys]);
+    useEffect(() => () => {
+        pool.current?.terminate();
+        pool.current = null;
+    }, []);
+    const cancel = useCallback(() => {
+        pool.current?.cancel();
+    }, []);
+    const riskDetail = useCallback((idCode, risk) => open().riskDetail(idCode, risk), [open]);
+    return {
+        results: answered.results,
+        failures: answered.failures,
+        progress: view.progress,
+        error: view.error,
+        cancel,
+        riskDetail,
+    };
+}
+//# sourceMappingURL=usePredictions.js.map

package/lib/osiris/ui/usePredictions.js.map

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

package/lib/osiris-ui.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The OSIRIS property panel — the four risk squares, the ten bars and the
+ * explanation a square opens — and `usePredictions`, which drives a pool of
+ * prediction workers from a page.
+ *
+ * Kept apart from `react-cheminfo/osiris` so the worker that predicts loads no
+ * React and no Blueprint; everything the panel draws from is imported from
+ * there. The stylesheet is `react-cheminfo/styles/osiris.css`.
+ */
+export * from './osiris/ui/index.ts';
+//# sourceMappingURL=osiris-ui.d.ts.map

package/lib/osiris-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"osiris-ui.d.ts","sourceRoot":"","sources":["../src/osiris-ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,sBAAsB,CAAC"}

package/lib/osiris-ui.js

@@ -0,0 +1,11 @@
+/**
+ * The OSIRIS property panel — the four risk squares, the ten bars and the
+ * explanation a square opens — and `usePredictions`, which drives a pool of
+ * prediction workers from a page.
+ *
+ * Kept apart from `react-cheminfo/osiris` so the worker that predicts loads no
+ * React and no Blueprint; everything the panel draws from is imported from
+ * there. The stylesheet is `react-cheminfo/styles/osiris.css`.
+ */
+export * from "./osiris/ui/index.js";
+//# sourceMappingURL=osiris-ui.js.map

package/lib/osiris-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"osiris-ui.js","sourceRoot":"","sources":["../src/osiris-ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,sBAAsB,CAAC"}

package/lib/osiris.d.ts

@@ -0,0 +1,17 @@
+/**
+ * What OSIRIS predicts about a molecule — the four toxicity risks, cLogP,
+ * solubility, drug-likeness and the drug score — and the pool of workers that
+ * predicts a whole set of them.
+ *
+ * Framework-free on purpose, and its own door for two reasons. A prediction
+ * worker imports `runPredictionJob` and `isPredictRequest` from here, and a dev
+ * server hands a worker its dependencies unbundled, so anything React-shaped
+ * behind this door would be evaluated in every worker. And a server answering
+ * predictions over an API loads it in Node, where nothing is tree-shaken.
+ * `openchemlib` is imported on the first prediction, never on import.
+ *
+ * The panel that draws the answer, and the hook that drives the pool from a
+ * page, are `react-cheminfo/osiris-ui`.
+ */
+export * from './osiris/core/index.ts';
+//# sourceMappingURL=osiris.d.ts.map

package/lib/osiris.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"osiris.d.ts","sourceRoot":"","sources":["../src/osiris.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,wBAAwB,CAAC"}

package/lib/osiris.js

@@ -0,0 +1,17 @@
+/**
+ * What OSIRIS predicts about a molecule — the four toxicity risks, cLogP,
+ * solubility, drug-likeness and the drug score — and the pool of workers that
+ * predicts a whole set of them.
+ *
+ * Framework-free on purpose, and its own door for two reasons. A prediction
+ * worker imports `runPredictionJob` and `isPredictRequest` from here, and a dev
+ * server hands a worker its dependencies unbundled, so anything React-shaped
+ * behind this door would be evaluated in every worker. And a server answering
+ * predictions over an API loads it in Node, where nothing is tree-shaken.
+ * `openchemlib` is imported on the first prediction, never on import.
+ *
+ * The panel that draws the answer, and the hook that drives the pool from a
+ * page, are `react-cheminfo/osiris-ui`.
+ */
+export * from "./osiris/core/index.js";
+//# sourceMappingURL=osiris.js.map

package/lib/osiris.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"osiris.js","sourceRoot":"","sources":["../src/osiris.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,wBAAwB,CAAC"}

package/lib/panel/ui/FilterInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInput.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/FilterInput.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAyBlD"}
+{"version":3,"file":"FilterInput.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/FilterInput.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA0BlD"}

package/lib/panel/ui/FilterInput.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InputGroup } from '@blueprintjs/core';
+import { useChromeT } from "../../i18n/ui/useT.js";
 import { ClearButton } from "./ClearButton.js";
 /**
  * The box a list is filtered through, with a cross to empty it again.
@@ -18,6 +19,7 @@ import { ClearButton } from "./ClearButton.js";
  */
 export function FilterInput(props) {
     const { value, onValueChange, placeholder, autoFocus = false } = props;
-    return (_jsx(InputGroup, { autoFocus: autoFocus, leftIcon: "search", size: "small", value: value, placeholder: placeholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", autoComplete: "off", rightElement: value.length > 0 ? (_jsx(ClearButton, { label: "Clear the filter", onClick: () => onValueChange('') })) : undefined, onValueChange: onValueChange }));
+    const t = useChromeT();
+    return (_jsx(InputGroup, { autoFocus: autoFocus, leftIcon: "search", size: "small", value: value, placeholder: placeholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", autoComplete: "off", rightElement: value.length > 0 ? (_jsx(ClearButton, { label: t('panel.clearFilter'), onClick: () => onValueChange('') })) : undefined, onValueChange: onValueChange }));
 }
 //# sourceMappingURL=FilterInput.js.map

package/lib/panel/ui/FilterInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInput.js","sourceRoot":"","sources":["../../../src/panel/ui/FilterInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAiBhD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEvE,OAAO,CACL,KAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAC,QAAQ,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,KAAK,EACjB,cAAc,EAAC,KAAK,EACpB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,KAAK,EAClB,YAAY,EACV,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,KAAC,WAAW,IACV,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,GAChC,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"FilterInput.js","sourceRoot":"","sources":["../../../src/panel/ui/FilterInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAiBhD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACvE,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAC,QAAQ,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,KAAK,EACjB,cAAc,EAAC,KAAK,EACpB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,KAAK,EAClB,YAAY,EACV,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,GAChC,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC"}

package/lib/panel/ui/SidePanelItem.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+/** Props of {@link SidePanelItem}. */
+export interface SidePanelItemProps {
+    /** Identity of the panel in the stack. */
+    id: string;
+    /** What the header says. */
+    title: string;
+    /** Whether the panel shows its body. */
+    isOpen: boolean;
+    /**
+     * Called when the chevron, the header or a shift-click on another header
+     * folds or unfolds the panel.
+     * @param isOpen - Whether it shows its body.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * Whether the panel is the one in focus, and the toggle; `undefined` while it
+     * is alone in the stack, where there is nothing to fold.
+     */
+    focus: {
+        active: boolean;
+        toggle: () => void;
+    } | undefined;
+    /** Called when the close cross is pressed. */
+    onClose: () => void;
+    /** The body. */
+    children: ReactNode;
+}
+/**
+ * One panel of the stack: the header with the shell's gestures, and the body,
+ * which is also the box that fills the screen.
+ *
+ * The header is not part of what fills the screen, so a body that does carries
+ * a bar of its own with the title and the way back.
+ * @param props - See {@link SidePanelItemProps}.
+ * @returns The accordion item.
+ */
+export declare function SidePanelItem(props: SidePanelItemProps): import("react").JSX.Element;
+//# sourceMappingURL=SidePanelItem.d.ts.map

package/lib/panel/ui/SidePanelItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelItem.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYtD,sCAAsC;AACtC,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,SAAS,CAAC;IAC3D,8CAA8C;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAwFtD"}

package/lib/panel/ui/SidePanelItem.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { Accordion, Button } from 'react-science/ui';
+import { useLanguage } from "../../i18n/ui/useLanguage.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { FullscreenStage } from "../../shared/ui/FullscreenStage.js";
+import { canFillScreen } from "../../shared/ui/canFillScreen.js";
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { panelStyle, panelToolbarStyle } from "../core/panelStyles.js";
+/**
+ * One panel of the stack: the header with the shell's gestures, and the body,
+ * which is also the box that fills the screen.
+ *
+ * The header is not part of what fills the screen, so a body that does carries
+ * a bar of its own with the title and the way back.
+ * @param props - See {@link SidePanelItemProps}.
+ * @returns The accordion item.
+ */
+export function SidePanelItem(props) {
+    const { id, title, isOpen, onOpenChange, focus, onClose, children } = props;
+    const t = useChromeT();
+    const panel = inSentence(title, useLanguage());
+    const [canFill] = useState(canFillScreen);
+    const body = useRef(null);
+    const onStage = useCallback((element) => {
+        body.current = element;
+    }, []);
+    function fillScreen() {
+        if (!isOpen)
+            onOpenChange(true);
+        void body.current?.requestFullscreen().catch(() => undefined);
+    }
+    return (_jsx(Accordion.Item, { id: id, title: title, open: isOpen, onOpenChange: onOpenChange, renderToolbar: () => (_jsxs(_Fragment, { children: [focus !== undefined && (_jsx(Button, { variant: "minimal", icon: focus.active ? 'expand-all' : 'collapse-all', "aria-pressed": focus.active, "aria-label": t('panel.focus', { panel }), tooltipProps: {
+                        content: focus.active
+                            ? t('panel.unfocusTooltip')
+                            : t('panel.focusTooltip'),
+                    }, onClick: focus.toggle })), canFill && (_jsx(Button, { variant: "minimal", icon: "fullscreen", "aria-label": t('panel.fillScreen', { panel }), tooltipProps: { content: t('panel.fillScreenTooltip') }, onClick: fillScreen })), _jsx(Button, { variant: "minimal", icon: isOpen ? 'chevron-down' : 'chevron-right', "data-panel-open": isOpen, "aria-expanded": isOpen, "aria-label": t(isOpen ? 'panel.fold' : 'panel.unfold', { panel }), tooltipProps: {
+                        content: t(isOpen ? 'panel.foldTooltip' : 'panel.unfoldTooltip'),
+                    }, onClick: () => onOpenChange(!isOpen) }), _jsx(Button, { variant: "minimal", icon: "cross", tooltipProps: { content: t('panel.closeTooltip') }, "aria-label": t('panel.close', { panel }), onClick: onClose })] })), children: _jsx(FullscreenStage, { style: bodyStyle, onStage: onStage, children: (fullscreen) => (_jsxs(_Fragment, { children: [fullscreen?.active === true && (_jsxs("div", { style: fullscreenBarStyle, children: [_jsx("span", { style: fullscreenTitleStyle, children: title }), _jsx(Button, { variant: "minimal", icon: "minimize", "aria-label": t('panel.leaveFullScreen'), tooltipProps: { content: t('panel.leaveFullScreenTooltip') }, onClick: fullscreen.toggle })] })), children] })) }) }));
+}
+/**
+ * The title as it reads inside a sentence: lowercased, except in German, where
+ * every noun keeps its capital.
+ * @param title - The panel's title.
+ * @param language - The language of the sentence.
+ * @returns The title to write into it.
+ */
+function inSentence(title, language) {
+    return language === 'de' ? title : title.toLocaleLowerCase(language);
+}
+/** A box filling the screen shows the backdrop through it unless painted. */
+const filledStyle = { ...panelStyle, background: TOKEN.surface };
+function bodyStyle(fillsScreen) {
+    return fillsScreen ? filledStyle : panelStyle;
+}
+const fullscreenBarStyle = {
+    ...panelToolbarStyle,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingLeft: 12,
+};
+const fullscreenTitleStyle = { fontWeight: 'bold' };
+//# sourceMappingURL=SidePanelItem.js.map

package/lib/panel/ui/SidePanelItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelItem.js","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelItem.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAqC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AA2BvE;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC5E,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,OAA8B,EAAE,EAAE;QAC7D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,UAAU;QACjB,IAAI,CAAC,MAAM;YAAE,YAAY,CAAC,IAAI,CAAC,CAAC;QAChC,KAAK,IAAI,CAAC,OAAO,EAAE,iBAAiB,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAChE,CAAC;IAED,OAAO,CACL,KAAC,SAAS,CAAC,IAAI,IACb,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,GAAG,EAAE,CAAC,CACnB,8BACG,KAAK,KAAK,SAAS,IAAI,CACtB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,kBACpC,KAAK,CAAC,MAAM,gBACd,CAAC,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EACvC,YAAY,EAAE;wBACZ,OAAO,EAAE,KAAK,CAAC,MAAM;4BACnB,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC;4BAC3B,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC;qBAC5B,EACD,OAAO,EAAE,KAAK,CAAC,MAAM,GACrB,CACH,EACA,OAAO,IAAI,CACV,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,YAAY,gBACL,CAAC,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,CAAC,EAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,yBAAyB,CAAC,EAAE,EACvD,OAAO,EAAE,UAAU,GACnB,CACH,EACD,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,qBAC9B,MAAM,mBACR,MAAM,gBACT,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,CAAC,EAChE,YAAY,EAAE;wBACZ,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC;qBACjE,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,GACpC,EACF,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAAE,gBACtC,CAAC,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EACvC,OAAO,EAAE,OAAO,GAChB,IACD,CACJ,YAED,KAAC,eAAe,IAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,YAChD,CAAC,UAAU,EAAE,EAAE,CAAC,CACf,8BACG,UAAU,EAAE,MAAM,KAAK,IAAI,IAAI,CAC9B,eAAK,KAAK,EAAE,kBAAkB,aAC5B,eAAM,KAAK,EAAE,oBAAoB,YAAG,KAAK,GAAQ,EACjD,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,UAAU,gBACH,CAAC,CAAC,uBAAuB,CAAC,EACtC,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,EAAE,EAC5D,OAAO,EAAE,UAAU,CAAC,MAAM,GAC1B,IACE,CACP,EACA,QAAQ,IACR,CACJ,GACe,GACH,CAClB,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAS,UAAU,CAAC,KAAa,EAAE,QAAkB;IACnD,OAAO,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvE,CAAC;AAED,6EAA6E;AAC7E,MAAM,WAAW,GAAkB,EAAE,GAAG,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAEhF,SAAS,SAAS,CAAC,WAAoB;IACrC,OAAO,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;AAChD,CAAC;AAED,MAAM,kBAAkB,GAAkB;IACxC,GAAG,iBAAiB;IACpB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,oBAAoB,GAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC"}

package/lib/panel/ui/SidePanelStack.d.ts

@@ -40,21 +40,22 @@ export interface SidePanelStackProps<TPanel extends PanelDescriptor> {
  * They are drawn in the order the rail stacks their icons rather than the order
  * they were switched on, so a panel always comes back where it was.
  *
- * The header carries the shell's own two gestures and nothing about what the
- * panel holds: the chevron that folds it away and the cross that closes it.
- * What a panel switches on and off is a toolbar at the top of its own body, so
- * it travels with the panel when it is folded, reordered or lent to another
- * editor, and every header in every editor reads the same — which is the reason
- * this is one component rather than one per editor.
+ * The header carries the shell's own gestures and nothing about what the panel
+ * holds: focus, which folds every other panel away and unfolds them again;
+ * filling the screen with the panel, where the browser can; the chevron that
+ * folds it away; and the cross that closes it. What a panel switches on and off
+ * is a toolbar at the top of its own body, so it travels with the panel when it
+ * is folded, reordered or lent to another editor, and every header in every
+ * editor reads the same — which is the reason this is one component rather
+ * than one per editor.
  *
  * The chevron is there because nothing else says which panels are folded. The
  * accordion draws every header identically and hides only the body, so a side
  * of four closed panels and a side of four open ones differ by white space, and
  * a reader looking for a panel that is already open reaches for its icon and
- * closes it. It is a real button rather than a glyph because the header's own
- * click never reaches the toolbar — clicks there are stopped so the close cross
- * does not also fold the panel — so a chevron that did nothing when pressed
- * would be an affordance that lies.
+ * closes it. Focus is a button as well as a shift-click because a modifier on a
+ * header is a gesture nobody finds, and it undoes itself, which a shift-click
+ * does not.
  * @param props - Component props.
  * @returns The stack.
  */

package/lib/panel/ui/SidePanelStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelStack.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7D,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,eAAe;IACjE,kEAAkE;IAClE,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,0EAA0E;IAC1E,YAAY,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,MAAM,SAAS,eAAe,EAC3D,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,+BA2CnC"}
+{"version":3,"file":"SidePanelStack.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAM7D,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,eAAe;IACjE,kEAAkE;IAClE,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,0EAA0E;IAC1E,YAAY,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,cAAc,CAAC,MAAM,SAAS,eAAe,EAC3D,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,+BAgCnC"}

package/lib/panel/ui/SidePanelStack.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion, AccordionProvider, Button } from 'react-science/ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion, AccordionProvider } from 'react-science/ui';
+import { SidePanelItem } from "./SidePanelItem.js";
+import { usePanelFolds } from "./usePanelFolds.js";
 /**
  * The panels that are open, stacked one under the other down the side.
  *
@@ -12,29 +14,34 @@ import { Accordion, AccordionProvider, Button } from 'react-science/ui';
  * They are drawn in the order the rail stacks their icons rather than the order
  * they were switched on, so a panel always comes back where it was.
  *
- * The header carries the shell's own two gestures and nothing about what the
- * panel holds: the chevron that folds it away and the cross that closes it.
- * What a panel switches on and off is a toolbar at the top of its own body, so
- * it travels with the panel when it is folded, reordered or lent to another
- * editor, and every header in every editor reads the same — which is the reason
- * this is one component rather than one per editor.
+ * The header carries the shell's own gestures and nothing about what the panel
+ * holds: focus, which folds every other panel away and unfolds them again;
+ * filling the screen with the panel, where the browser can; the chevron that
+ * folds it away; and the cross that closes it. What a panel switches on and off
+ * is a toolbar at the top of its own body, so it travels with the panel when it
+ * is folded, reordered or lent to another editor, and every header in every
+ * editor reads the same — which is the reason this is one component rather
+ * than one per editor.
  *
  * The chevron is there because nothing else says which panels are folded. The
  * accordion draws every header identically and hides only the body, so a side
  * of four closed panels and a side of four open ones differ by white space, and
  * a reader looking for a panel that is already open reaches for its icon and
- * closes it. It is a real button rather than a glyph because the header's own
- * click never reaches the toolbar — clicks there are stopped so the close cross
- * does not also fold the panel — so a chevron that did nothing when pressed
- * would be an affordance that lies.
+ * closes it. Focus is a button as well as a shift-click because a modifier on a
+ * header is a gesture nobody finds, and it undoes itself, which a shift-click
+ * does not.
  * @param props - Component props.
  * @returns The stack.
  */
 export function SidePanelStack(props) {
     const { panels, openPanelIds, onClose, children } = props;
     const open = panels.filter((panel) => openPanelIds.includes(panel.id));
-    return (_jsx(AccordionProvider, { children: _jsx(Accordion, { children: open.map((panel) => (_jsx(Accordion.Item, { id: panel.id, title: panel.title, defaultOpen: true, renderToolbar: ({ isOpen, controls }) => (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "minimal", icon: isOpen ? 'chevron-down' : 'chevron-right', "data-panel-open": isOpen, "aria-expanded": isOpen, "aria-label": `${isOpen ? 'Fold' : 'Unfold'} the ${panel.title.toLowerCase()} panel`, tooltipProps: {
-                                content: isOpen ? 'Fold this panel away' : 'Unfold it',
-                            }, onClick: () => controls.toggle() }), _jsx(Button, { variant: "minimal", icon: "cross", tooltipProps: { content: 'Close this panel' }, "aria-label": `Close the ${panel.title.toLowerCase()} panel`, onClick: () => onClose(panel.id) })] })), children: children(panel) }, panel.id))) }) }));
+    const folds = usePanelFolds(open.map((panel) => panel.id));
+    return (_jsx(AccordionProvider, { children: _jsx(Accordion, { children: open.map((panel) => (_jsx(SidePanelItem, { id: panel.id, title: panel.title, isOpen: folds.isOpen(panel.id), onOpenChange: (isOpen) => folds.setOpen(panel.id, isOpen), focus: open.length > 1
+                    ? {
+                        active: folds.focused === panel.id,
+                        toggle: () => folds.toggleFocus(panel.id),
+                    }
+                    : undefined, onClose: () => onClose(panel.id), children: children(panel) }, panel.id))) }) }));
 }
 //# sourceMappingURL=SidePanelStack.js.map

package/lib/panel/ui/SidePanelStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelStack.js","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelStack.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAgCxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAkC;IAElC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEvE,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,SAAS,cACP,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnB,KAAC,SAAS,CAAC,IAAI,IAEb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,QACX,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACvC,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,qBAC9B,MAAM,mBACR,MAAM,gBACT,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,QAAQ,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAClF,YAAY,EAAE;gCACZ,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,WAAW;6BACvD,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,GAChC,EACF,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,YAAY,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,gBACjC,aAAa,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAC1D,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAChC,IACD,CACJ,YAEA,QAAQ,CAAC,KAAK,CAAC,IA3BX,KAAK,CAAC,EAAE,CA4BE,CAClB,CAAC,GACQ,GACM,CACrB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SidePanelStack.js","sourceRoot":"","sources":["../../../src/panel/ui/SidePanelStack.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAgCnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAkC;IAElC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IACvE,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,SAAS,cACP,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnB,KAAC,aAAa,IAEZ,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,EAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,MAAM,CAAC,EACzD,KAAK,EACH,IAAI,CAAC,MAAM,GAAG,CAAC;oBACb,CAAC,CAAC;wBACE,MAAM,EAAE,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,EAAE;wBAClC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;qBAC1C;oBACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,YAE/B,QAAQ,CAAC,KAAK,CAAC,IAfX,KAAK,CAAC,EAAE,CAgBC,CACjB,CAAC,GACQ,GACM,CACrB,CAAC;AACJ,CAAC"}

package/lib/panel/ui/SpectrumColorSwatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpectrumColorSwatch.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/SpectrumColorSwatch.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,+BA8ClE"}
+{"version":3,"file":"SpectrumColorSwatch.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/SpectrumColorSwatch.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,wBAAwB;IACvC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,+BA+ClE"}

package/lib/panel/ui/SpectrumColorSwatch.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PopoverNext } from '@blueprintjs/core';
 import { useState } from 'react';
 import { EXTRA_SPECTRUM_COLORS, SPECTRUM_COLORS, } from "../../chart/core/spectrumColor.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
 /**
  * The chip that says what colour a spectrum is drawn in, and changes it.
  *
@@ -28,8 +29,9 @@ import { EXTRA_SPECTRUM_COLORS, SPECTRUM_COLORS, } from "../../chart/core/spectr
 export function SpectrumColorSwatch(props) {
     const { color, name, onPick } = props;
     const [isOpen, setIsOpen] = useState(false);
+    const t = useChromeT();
     function offer(offered) {
-        return (_jsx("button", { type: "button", title: offered, "aria-label": `Draw ${name} in ${offered}`, style: {
+        return (_jsx("button", { type: "button", title: offered, "aria-label": t('panel.drawIn', { name, color: offered }), style: {
                 ...(offered === color ? activeSwatchStyle : swatchStyle),
                 background: offered,
             }, onClick: () => {
@@ -43,7 +45,7 @@ export function SpectrumColorSwatch(props) {
     , { 
         // A handful of chips need no arrow pointing back at a chip of the same
         // size.
-        arrow: false, isOpen: isOpen, placement: "bottom-start", onInteraction: setIsOpen, content: _jsxs("div", { style: paletteStyle, children: [_jsx("div", { style: paletteRowStyle, children: SPECTRUM_COLORS.map(offer) }), _jsx("div", { style: paletteRowStyle, children: EXTRA_SPECTRUM_COLORS.map(offer) })] }), children: _jsx("button", { type: "button", title: "Draw this spectrum in another colour", "aria-label": `Colour of ${name}`, style: { ...swatchStyle, background: color } }) }));
+        arrow: false, isOpen: isOpen, placement: "bottom-start", onInteraction: setIsOpen, content: _jsxs("div", { style: paletteStyle, children: [_jsx("div", { style: paletteRowStyle, children: SPECTRUM_COLORS.map(offer) }), _jsx("div", { style: paletteRowStyle, children: EXTRA_SPECTRUM_COLORS.map(offer) })] }), children: _jsx("button", { type: "button", title: t('panel.changeColour'), "aria-label": t('panel.colourOf', { name }), style: { ...swatchStyle, background: color } }) }));
 }
 /**
  * A round chip rather than a square one: it is the mark the chart's own

package/lib/panel/ui/SpectrumColorSwatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpectrumColorSwatch.js","sourceRoot":"","sources":["../../../src/panel/ui/SpectrumColorSwatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,qBAAqB,EACrB,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAW3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,KAAK,CAAC,OAAe;QAC5B,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,gBACF,QAAQ,IAAI,OAAO,OAAO,EAAE,EACxC,KAAK,EAAE;gBACL,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC;gBACxD,UAAU,EAAE,OAAO;aACpB,EACD,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,OAAO,CAAC,CAAC;gBAChB,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC,IAXI,OAAO,CAYZ,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,WAAW;IACV,uEAAuE;IACvE,QAAQ;;QADR,uEAAuE;QACvE,QAAQ;QACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,cAAc,EACxB,aAAa,EAAE,SAAS,EACxB,OAAO,EACL,eAAK,KAAK,EAAE,YAAY,aACtB,cAAK,KAAK,EAAE,eAAe,YAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,GAAO,EAC/D,cAAK,KAAK,EAAE,eAAe,YAAG,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,GAAO,IACjE,YAGR,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sCAAsC,gBAChC,aAAa,IAAI,EAAE,EAC/B,KAAK,EAAE,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAC5C,GACU,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,CAAC;IACV,YAAY,EAAE,KAAK;IACnB,MAAM,EAAE,iCAAiC;IACzC,MAAM,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,iBAAiB,GAAG;IACxB,GAAG,WAAW;IACd,MAAM,EAAE,yBAAyB;CACzB,CAAC;AAEX,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,CAAC;CACF,CAAC;AAEX,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,CAAC;CACE,CAAC"}
+{"version":3,"file":"SpectrumColorSwatch.js","sourceRoot":"","sources":["../../../src/panel/ui/SpectrumColorSwatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,qBAAqB,EACrB,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAWnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,SAAS,KAAK,CAAC,OAAe;QAC5B,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,gBACF,CAAC,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EACvD,KAAK,EAAE;gBACL,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC;gBACxD,UAAU,EAAE,OAAO;aACpB,EACD,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,OAAO,CAAC,CAAC;gBAChB,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC,IAXI,OAAO,CAYZ,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,WAAW;IACV,uEAAuE;IACvE,QAAQ;;QADR,uEAAuE;QACvE,QAAQ;QACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,cAAc,EACxB,aAAa,EAAE,SAAS,EACxB,OAAO,EACL,eAAK,KAAK,EAAE,YAAY,aACtB,cAAK,KAAK,EAAE,eAAe,YAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,GAAO,EAC/D,cAAK,KAAK,EAAE,eAAe,YAAG,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,GAAO,IACjE,YAGR,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC,gBAClB,CAAC,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,CAAC,EACzC,KAAK,EAAE,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAC5C,GACU,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,CAAC;IACV,YAAY,EAAE,KAAK;IACnB,MAAM,EAAE,iCAAiC;IACzC,MAAM,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,iBAAiB,GAAG;IACxB,GAAG,WAAW;IACd,MAAM,EAAE,yBAAyB;CACzB,CAAC;AAEX,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,CAAC;CACF,CAAC;AAEX,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,CAAC;CACE,CAAC"}