react-cheminfo 0.50.0 → 0.51.0

package/lib/color/ui/ColorScaleEditor.js

@@ -1,16 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, HTMLSelect } from '@blueprintjs/core';
-import { formatDecimal } from "../../format/core/numbers.js";
+import { useEffect, useRef, useState } from 'react';
 import { useChromeT } from "../../i18n/ui/useT.js";
+import { NumberInput } from "../../number/ui/NumberInput.js";
 import { normalizeHexColor } from "../core/hex.js";
-import { colorAt } from "../core/interpolate.js";
-import { MAXIMUM_CUSTOM_STOPS } from "../core/scaleText.js";
-import { ColorScaleBar } from "./ColorScaleBar.js";
-const MINIMUM_STOPS = 2;
+import { MINIMUM_CUSTOM_STOPS, moveColorStop, recolorColorStop, removeColorStop, } from "../core/stops.js";
+import { ColorScaleTone } from "./ColorScaleTone.js";
+import { ColorScaleTrack } from "./ColorScaleTrack.js";
 const POSITION_STEP = 0.01;
-const PREVIEW_HEIGHT = 16;
-const PREVIEW_SAMPLES = 48;
-const POSITION_DECIMALS = 2;
 // A `type="color"` input only takes six hex digits; an anchor that is not a
 // hex colour is shown as black until it is picked again.
 const UNREADABLE_COLOR = '#000000';
@@ -21,33 +18,67 @@ const INTERPOLATIONS = [
     'hsv-long',
 ];
 /**
- * A colour scale of the reader's own: the colours it passes through, where
- * each one sits, and the path it takes between them.
+ * A colour scale of the reader's own, edited on the strip it draws.
  *
- * A colour is anchored rather than typed into a list, so two anchors and the
- * HSV path already describe a whole rainbow, and an anchor never crosses its
- * neighbours — the scale it draws is always the one the strip above shows.
+ * A click on the strip adds an anchor in the colour already there, an anchor
+ * is dragged along it, and an anchor pointed at goes with Backspace. The
+ * anchor last touched shows its colour and position below, to set exactly.
  * @param props - See {@link ColorScaleEditorProps}.
- * @returns The preview, the anchors, and the picker of the path between them.
+ * @returns The strip, the selected anchor, and the picker of the path between anchors.
  */
 export function ColorScaleEditor(props) {
     const { className, value, onChange } = props;
     const t = useChromeT();
     const stops = value.stops;
+    const [picked, setPicked] = useState(0);
+    const [hovered, setHovered] = useState(null);
+    const colorInput = useRef(null);
+    const selected = Math.min(picked, stops.length - 1);
+    const stop = stops[selected];
+    const removable = stops.length > MINIMUM_CUSTOM_STOPS;
     function write(next) {
         onChange({ stops: next, interpolation: value.interpolation });
     }
-    return (_jsxs("div", { className: className, style: PANEL_STYLE, children: [_jsx(ColorScaleBar, { scale: value, height: PREVIEW_HEIGHT, samples: PREVIEW_SAMPLES, label: t('color.scaleBeingEdited') }), _jsx("div", { style: ROWS_STYLE, children: stops.map((stop, index) => (_jsxs("div", { style: ROW_STYLE, children: [_jsx("input", { type: "color", "aria-label": t('color.anchorColour', { index: index + 1 }), value: normalizeHexColor(stop.color) ?? UNREADABLE_COLOR, style: SWATCH_STYLE, onChange: (event) => {
-                                write(replace(stops, index, { color: event.target.value }));
-                            } }), _jsx("input", { type: "range", "aria-label": t('color.anchorPosition', { index: index + 1 }), min: 0, max: 1, step: POSITION_STEP, value: stop.position, style: SLIDER_STYLE, onChange: (event) => {
-                                write(replace(stops, index, {
-                                    position: hold(stops, index, event.target.valueAsNumber),
-                                }));
-                            } }), _jsx("span", { style: POSITION_STYLE, children: formatDecimal(stop.position, POSITION_DECIMALS) }), _jsx(Button, { icon: "cross", variant: "minimal", size: "small", "aria-label": t('color.removeAnchor', { index: index + 1 }), disabled: stops.length <= MINIMUM_STOPS, onClick: () => {
-                                write(stops.filter((_, at) => at !== index));
-                            } })] }, `${String(index)}-${stop.color}`))) }), _jsxs("div", { style: FOOTER_STYLE, children: [_jsx(Button, { icon: "plus", size: "small", text: t('color.addColour'), disabled: stops.length >= MAXIMUM_CUSTOM_STOPS, onClick: () => {
-                            write(withAddedStop(value));
-                        } }), _jsx(HTMLSelect, { "aria-label": t('color.path'), value: value.interpolation, options: INTERPOLATIONS.map((interpolation) => ({
+    function remove(index) {
+        if (!removable)
+            return;
+        write(removeColorStop(stops, index));
+        setHovered(null);
+        setPicked(Math.max(0, index - 1));
+    }
+    useEffect(() => {
+        if (hovered === null || !removable)
+            return;
+        const index = hovered;
+        function onKeyDown(event) {
+            if (event.key !== 'Backspace' && event.key !== 'Delete')
+                return;
+            if (isEditable(event.target))
+                return;
+            event.preventDefault();
+            onChange({
+                stops: removeColorStop(stops, index),
+                interpolation: value.interpolation,
+            });
+            setHovered(null);
+            setPicked(Math.max(0, index - 1));
+        }
+        globalThis.addEventListener('keydown', onKeyDown);
+        return () => {
+            globalThis.removeEventListener('keydown', onKeyDown);
+        };
+    }, [hovered, removable, stops, value.interpolation, onChange]);
+    return (_jsxs("div", { className: className, style: PANEL_STYLE, children: [_jsx(ColorScaleTrack, { scale: value, selected: selected, hovered: hovered, onSelect: setPicked, onHover: setHovered, onChange: write, onRemove: remove, onPick: () => {
+                    colorInput.current?.showPicker();
+                } }), _jsxs("div", { style: ROW_STYLE, children: [_jsx("input", { ref: colorInput, type: "color", "aria-label": t('color.anchorColour', { index: selected + 1 }), value: normalizeHexColor(stop?.color ?? '') ?? UNREADABLE_COLOR, style: SWATCH_STYLE, onChange: (event) => {
+                            write(recolorColorStop(stops, selected, event.target.value));
+                        } }), _jsx(NumberInput, { ariaLabel: t('color.anchorPosition', { index: selected + 1 }), value: stop?.position ?? 0, min: 0, max: 1, step: POSITION_STEP, size: "small", buttons: false, style: POSITION_STYLE, onChange: (position) => {
+                            const moved = moveColorStop(stops, selected, position);
+                            write(moved.stops);
+                            setPicked(moved.index);
+                        } }), _jsx(Button, { icon: "trash", variant: "minimal", size: "small", "aria-label": t('color.removeAnchor', { index: selected + 1 }), disabled: !removable, onClick: () => {
+                            remove(selected);
+                        } }), _jsx("span", { style: SPACER_STYLE }), _jsx(HTMLSelect, { "aria-label": t('color.path'), value: value.interpolation, options: INTERPOLATIONS.map((interpolation) => ({
                             value: interpolation,
                             label: t(`color.interpolation.${interpolation}`),
                         })), onChange: (event) => {
@@ -55,62 +86,27 @@ export function ColorScaleEditor(props) {
                                 stops,
                                 interpolation: event.currentTarget.value,
                             });
-                        } })] })] }));
-}
-function replace(stops, index, patch) {
-    return stops.map((stop, at) => (at === index ? { ...stop, ...patch } : stop));
+                        } })] }), _jsx(ColorScaleTone, { stops: stops, onChange: write }), _jsx("p", { style: HINT_STYLE, children: t('color.editorHint') })] }));
 }
-/**
- * A position an anchor may take: never past either of its neighbours, so the
- * rows never reorder under a dragging finger.
- * @param stops - The anchors as they stand.
- * @param index - Which of them is being moved.
- * @param position - Where it is being moved to.
- * @returns The position it is allowed to take.
- */
-function hold(stops, index, position) {
-    if (!Number.isFinite(position))
-        return stops[index]?.position ?? 0;
-    const low = stops[index - 1]?.position ?? 0;
-    const high = stops[index + 1]?.position ?? 1;
-    return Math.min(high, Math.max(low, position));
-}
-/**
- * The anchors with one more, dropped in the widest gap and taking the colour
- * the scale already has there — so adding one changes nothing until it is moved.
- * @param scale - The scale being edited.
- * @returns Its anchors, with the new one among them.
- */
-function withAddedStop(scale) {
-    const stops = [...scale.stops];
-    let widest = 0;
-    let at = 1;
-    for (let index = 1; index < stops.length; index++) {
-        const span = (stops[index]?.position ?? 0) - (stops[index - 1]?.position ?? 0);
-        if (span > widest) {
-            widest = span;
-            at = index;
-        }
-    }
-    const position = ((stops[at]?.position ?? 1) + (stops[at - 1]?.position ?? 0)) / 2;
-    stops.splice(at, 0, { position, color: colorAt(scale, position) });
-    return stops;
+function isEditable(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return (target.isContentEditable ||
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement);
 }
 const PANEL_STYLE = {
     display: 'flex',
     flexDirection: 'column',
     gap: 10,
     padding: 12,
-    minWidth: 280,
-};
-const ROWS_STYLE = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 4,
+    minWidth: 320,
 };
 const ROW_STYLE = {
     display: 'flex',
     alignItems: 'center',
+    flexWrap: 'wrap',
     gap: 8,
 };
 const SWATCH_STYLE = {
@@ -121,22 +117,16 @@ const SWATCH_STYLE = {
     background: 'none',
     cursor: 'pointer',
 };
-const SLIDER_STYLE = {
+const POSITION_STYLE = {
+    width: 64,
+};
+const SPACER_STYLE = {
     flex: '1 1 auto',
-    minWidth: 90,
-    accentColor: 'var(--accent, currentColor)',
 };
-const POSITION_STYLE = {
+const HINT_STYLE = {
+    margin: 0,
+    color: 'var(--text-muted)',
     fontSize: 12,
-    fontVariantNumeric: 'tabular-nums',
-    width: 30,
-    textAlign: 'right',
-};
-const FOOTER_STYLE = {
-    display: 'flex',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    gap: 8,
-    justifyContent: 'space-between',
+    lineHeight: 1.4,
 };
 //# sourceMappingURL=ColorScaleEditor.js.map

package/lib/color/ui/ColorScaleEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorScaleEditor.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorScaleEditor.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMnD,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AAExD,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,4EAA4E;AAC5E,yDAAyD;AACzD,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAEnC,yEAAyE;AACzE,MAAM,cAAc,GAAkC;IACpD,KAAK;IACL,KAAK;IACL,UAAU;CACX,CAAC;AAeF;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAC1B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACpD,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,oBAAoB,CAAC;IAEtD,SAAS,KAAK,CAAC,IAAiB;QAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,SAAS,MAAM,CAAC,KAAa;QAC3B,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,KAAK,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;QACrC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3C,MAAM,KAAK,GAAG,OAAO,CAAC;QACtB,SAAS,SAAS,CAAC,KAA+B;YAChD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;gBAAE,OAAO;YAChE,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC;gBAAE,OAAO;YACrC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,QAAQ,CAAC;gBACP,KAAK,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC;gBACpC,aAAa,EAAE,KAAK,CAAC,aAAa;aACnC,CAAC,CAAC;YACH,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;QACD,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/D,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,aAC3C,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,GAAG,EAAE;oBACX,UAAU,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;gBACnC,CAAC,GACD,EAEF,eAAK,KAAK,EAAE,SAAS,aACnB,gBACE,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,OAAO,gBACA,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,CAAC,EAC5D,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,IAAI,gBAAgB,EAC/D,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;wBAC/D,CAAC,GACD,EACF,KAAC,WAAW,IACV,SAAS,EAAE,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,CAAC,EAC7D,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,CAAC,EAC1B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;4BACrB,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;4BACvD,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;4BACnB,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;wBACzB,CAAC,GACD,EACF,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,gBACA,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,CAAC,EAC5D,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,CAAC,QAAQ,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,eAAM,KAAK,EAAE,YAAY,GAAI,EAC7B,KAAC,UAAU,kBACG,CAAC,CAAC,YAAY,CAAC,EAC3B,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;4BAC9C,KAAK,EAAE,aAAa;4BACpB,KAAK,EAAE,CAAC,CAAC,uBAAuB,aAAa,EAAE,CAAC;yBACjD,CAAC,CAAC,EACH,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,QAAQ,CAAC;gCACP,KAAK;gCACL,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,KAA2B;6BAC/D,CAAC,CAAC;wBACL,CAAC,GACD,IACE,EAEN,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAI,EAEjD,YAAG,KAAK,EAAE,UAAU,YAAG,CAAC,CAAC,kBAAkB,CAAC,GAAK,IAC7C,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,MAA0B;IAC5C,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC;QAAE,OAAO,KAAK,CAAC;IACnD,OAAO,CACL,MAAM,CAAC,iBAAiB;QACxB,MAAM,YAAY,gBAAgB;QAClC,MAAM,YAAY,mBAAmB;QACrC,MAAM,YAAY,iBAAiB,CACpC,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;IACP,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,GAAG;CACmB,CAAC;AAEnC,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,MAAM;IAChB,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,SAAS;CACe,CAAC;AAEnC,MAAM,cAAc,GAAG;IACrB,KAAK,EAAE,EAAE;CACuB,CAAC;AAEnC,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,UAAU;CACgB,CAAC;AAEnC,MAAM,UAAU,GAAG;IACjB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;CACiB,CAAC"}

package/lib/color/ui/ColorScaleSelect.d.ts

@@ -18,6 +18,22 @@ export interface ColorScaleSelectProps {
      * @default true
      */
     allowCustom?: boolean;
+    /**
+     * Whether the menu opens on one colour for every value, which a figure that
+     * needs no key — a plain table to print — is drawn with. Chosen, it writes
+     * {@link UNIFORM_COLOR_SCALE_ID}; its swatch picks the colour, written as
+     * `formatUniformColorScale` does.
+     * @default false
+     */
+    allowUniform?: boolean;
+    /**
+     * Whether it is a form field — a caption over a full-width button — or a
+     * setting on a figure's bar, writing its name and its scale on one compact
+     * line as `OverlayValueButton` does. The bar form needs an `OverlayLayer` or
+     * a `FigureBar` above it for its measurements.
+     * @default 'field'
+     */
+    appearance?: 'field' | 'bar';
     /**
      * Value of the `data-testid` attribute of the button, for the end-to-end tests.
      * @default undefined

package/lib/color/ui/ColorScaleSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorScaleSelect.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAczD,6CAA6C;AAC7C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAiH3E"}
+{"version":3,"file":"ColorScaleSelect.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AA2BzD,6CAA6C;AAC7C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAwL3E"}

package/lib/color/ui/ColorScaleSelect.js

@@ -2,13 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Button, Menu, MenuDivider, MenuItem, PopoverNext, } from '@blueprintjs/core';
 import { useState } from 'react';
 import { useChromeT } from "../../i18n/ui/useT.js";
+import { OverlayValueButton } from "../../overlay/ui/OverlayValueButton.js";
 import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { normalizeHexColor } from "../core/hex.js";
+import { sampleScale } from "../core/interpolate.js";
 import { formatColorScale, resolveColorScale } from "../core/scaleText.js";
 import { COLOR_SCALES } from "../core/scales.js";
+import { UNIFORM_COLOR_SCALE_ID, formatUniformColorScale, isUniformColorScale, uniformSwatch, } from "../core/uniform.js";
 import { ColorScaleBar } from "./ColorScaleBar.js";
 import { ColorScaleEditor } from "./ColorScaleEditor.js";
 import { ColorScaleEntry } from "./ColorScaleEntry.js";
 const BUTTON_BAR_WIDTH = 72;
+// Its two ends and its middle: the most dots `OverlaySwatchIcon` draws.
+const BAR_SWATCHES = 3;
+// A `type="color"` input only takes six hex digits.
+const UNREADABLE_COLOR = '#000000';
 /**
  * The picker a quantity's colours are chosen with: every scale drawn as itself,
  * and a way to build one.
@@ -20,10 +28,12 @@ const BUTTON_BAR_WIDTH = 72;
  * @returns The button, and the menu it opens.
  */
 export function ColorScaleSelect(props) {
-    const { className, value, onChange, label = '', allowCustom = true, testId, } = props;
+    const { className, value, onChange, label = '', allowCustom = true, allowUniform = false, appearance = 'field', testId, } = props;
     const t = useChromeT();
     const [isOpen, setOpen] = useState(false);
     const [isEditing, setEditing] = useState(false);
+    const uniform = allowUniform && isUniformColorScale(value);
+    const oneColor = uniformSwatch(uniform ? value : undefined).background;
     const resolved = resolveColorScale(value);
     const content = isEditing ? (_jsxs("div", { children: [_jsxs("div", { style: EDITOR_HEADER_STYLE, children: [_jsx(Button, { icon: "chevron-left", variant: "minimal", size: "small", text: t('color.scales'), onClick: () => {
                             setEditing(false);
@@ -32,24 +42,45 @@ export function ColorScaleSelect(props) {
                             setOpen(false);
                         } })] }), _jsx(ColorScaleEditor, { value: resolved.scale, onChange: (scale) => {
                     onChange(formatColorScale(scale));
-                } })] })) : (_jsxs(Menu, { style: MENU_STYLE, children: [COLOR_SCALES.map((entry, index) => (_jsx(ColorScaleEntry, { id: entry.id, label: entry.label, kind: entry.kind, description: entry.description, previous: COLOR_SCALES[index - 1]?.kind, selected: entry.id === resolved.id, onChange: onChange }, entry.id))), allowCustom ? (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuItem, { icon: "edit", text: t('color.customEllipsis'), label: resolved.id === null ? t('color.inUse') : undefined, shouldDismissPopover: false, onClick: () => {
+                } })] })) : (_jsxs(Menu, { style: MENU_STYLE, children: [allowUniform ? (_jsx(MenuItem, { roleStructure: "listoption", selected: uniform, htmlTitle: t('color.uniformDescription'), text: _jsxs("span", { style: UNIFORM_ITEM_STYLE, children: [_jsx("span", { children: t('color.uniform') }), _jsx("input", { type: "color", "aria-label": t('color.uniformColour'), title: t('color.uniformColour'), value: normalizeHexColor(oneColor) ?? UNREADABLE_COLOR, style: UNIFORM_INPUT_STYLE, 
+                            // The swatch picks the colour; the rest of the row chooses
+                            // one colour and closes the menu.
+                            onClick: (event) => {
+                                event.stopPropagation();
+                            }, onChange: (event) => {
+                                onChange(formatUniformColorScale(event.target.value));
+                            } })] }), onClick: () => {
+                    onChange(uniform ? value : UNIFORM_COLOR_SCALE_ID);
+                } })) : null, COLOR_SCALES.map((entry, index) => (_jsx(ColorScaleEntry, { id: entry.id, label: entry.label, kind: entry.kind, description: entry.description, previous: COLOR_SCALES[index - 1]?.kind, selected: !uniform && entry.id === resolved.id, onChange: onChange }, entry.id))), allowCustom ? (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuItem, { icon: "edit", text: t('color.customEllipsis'), label: resolved.id === null && !uniform ? t('color.inUse') : undefined, shouldDismissPopover: false, onClick: () => {
                             setEditing(true);
                         } })] })) : null] }));
-    return (_jsxs("label", { className: className, style: FIELD_STYLE, children: [label === '' ? null : _jsx("span", { style: CAPTION_STYLE, children: label }), _jsx(PopoverNext
-            // A fade, like the pickers a site puts beside this one: the default
-            // grows the panel from a third of its size over about a second, which
-            // reads as the row behaving differently control by control.
-            , { 
-                // A fade, like the pickers a site puts beside this one: the default
-                // grows the panel from a third of its size over about a second, which
-                // reads as the row behaving differently control by control.
-                animation: "minimal", arrow: false, placement: "bottom-start", isOpen: isOpen, content: content, onInteraction: (next) => {
-                    setOpen(next);
-                    if (!next)
-                        setEditing(false);
-                }, children: _jsx(Button, { alignText: "start", "aria-label": label === '' ? t('color.colourScale') : label, "data-testid": testId, endIcon: "caret-down", fill: true, text: _jsxs("span", { style: BUTTON_TEXT_STYLE, children: [_jsx("span", { children: resolved.id === null
-                                    ? t('color.custom')
-                                    : t.or(`color.scale.${resolved.id}.label`, resolved.label) }), _jsx(ColorScaleBar, { scale: resolved.scale, style: { width: BUTTON_BAR_WIDTH } })] }) }) })] }));
+    const scaleName = uniform
+        ? t('color.uniform')
+        : resolved.id === null
+            ? t('color.custom')
+            : t.or(`color.scale.${resolved.id}.label`, resolved.label);
+    const name = label === '' ? t('color.colourScale') : label;
+    const target = appearance === 'bar' ? (_jsx(OverlayValueButton, { label: name, value: scaleName, swatches: uniform ? [oneColor] : sampleScale(resolved.scale, BAR_SWATCHES), active: isOpen, opensMenu: true, testId: testId })) : (_jsx(Button, { alignText: "start", "aria-label": name, "data-testid": testId, endIcon: "caret-down", fill: true, text: _jsxs("span", { style: BUTTON_TEXT_STYLE, children: [_jsx("span", { children: scaleName }), uniform ? (_jsx("span", { style: {
+                        ...UNIFORM_BAR_STYLE,
+                        width: BUTTON_BAR_WIDTH,
+                        background: oneColor,
+                    } })) : (_jsx(ColorScaleBar, { scale: resolved.scale, style: { width: BUTTON_BAR_WIDTH } }))] }) }));
+    const popover = (_jsx(PopoverNext
+    // A fade, like the pickers a site puts beside this one: the default
+    // grows the panel from a third of its size over about a second, which
+    // reads as the row behaving differently control by control.
+    , { 
+        // A fade, like the pickers a site puts beside this one: the default
+        // grows the panel from a third of its size over about a second, which
+        // reads as the row behaving differently control by control.
+        animation: "minimal", arrow: false, placement: "bottom-start", isOpen: isOpen, content: content, onInteraction: (next) => {
+            setOpen(next);
+            if (!next)
+                setEditing(false);
+        }, children: target }));
+    if (appearance === 'bar')
+        return popover;
+    return (_jsxs("label", { className: className, style: FIELD_STYLE, children: [label === '' ? null : _jsx("span", { style: CAPTION_STYLE, children: label }), popover] }));
 }
 const FIELD_STYLE = {
     display: 'flex',
@@ -70,6 +101,27 @@ const BUTTON_TEXT_STYLE = {
     gap: 10,
     width: '100%',
 };
+// The lines of the menu, so one colour reads as one more choice among them.
+const UNIFORM_ITEM_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: '7rem 1fr',
+    alignItems: 'center',
+    gap: 10,
+    minWidth: 220,
+};
+const UNIFORM_BAR_STYLE = {
+    display: 'inline-block',
+    height: 12,
+    borderRadius: 2,
+};
+const UNIFORM_INPUT_STYLE = {
+    width: '100%',
+    height: 18,
+    padding: 0,
+    border: 0,
+    background: 'none',
+    cursor: 'pointer',
+};
 const MENU_STYLE = {
     maxHeight: '60vh',
     overflowY: 'auto',

package/lib/color/ui/ColorScaleSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorScaleSelect.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AAExD,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAiC5B;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,WAAW,GAAG,IAAI,EAClB,MAAM,GACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAC1B,0BACE,eAAK,KAAK,EAAE,mBAAmB,aAC7B,KAAC,MAAM,IACL,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC,EACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,UAAU,CAAC,KAAK,CAAC,CAAC;wBACpB,CAAC,GACD,EACF,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC,EACrB,OAAO,EAAE,GAAG,EAAE;4BACZ,UAAU,CAAC,KAAK,CAAC,CAAC;4BAClB,OAAO,CAAC,KAAK,CAAC,CAAC;wBACjB,CAAC,GACD,IACE,EACN,KAAC,gBAAgB,IACf,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;gBACpC,CAAC,GACD,IACE,CACP,CAAC,CAAC,CAAC,CACF,MAAC,IAAI,IAAC,KAAK,EAAE,UAAU,aACpB,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,KAAC,eAAe,IAEd,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,QAAQ,EAAE,YAAY,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACvC,QAAQ,EAAE,KAAK,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,EAClC,QAAQ,EAAE,QAAQ,IAPb,KAAK,CAAC,EAAE,CAQb,CACH,CAAC,EACD,WAAW,CAAC,CAAC,CAAC,CACb,8BACE,KAAC,WAAW,KAAG,EACf,KAAC,QAAQ,IACP,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAC/B,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,EAC1D,oBAAoB,EAAE,KAAK,EAC3B,OAAO,EAAE,GAAG,EAAE;4BACZ,UAAU,CAAC,IAAI,CAAC,CAAC;wBACnB,CAAC,GACD,IACD,CACJ,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;IAEF,OAAO,CACL,iBAAO,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,aAC5C,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,KAAK,EAAE,aAAa,YAAG,KAAK,GAAQ,EACjE,KAAC,WAAW;YACV,oEAAoE;YACpE,sEAAsE;YACtE,4DAA4D;;gBAF5D,oEAAoE;gBACpE,sEAAsE;gBACtE,4DAA4D;gBAC5D,SAAS,EAAC,SAAS,EACnB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,cAAc,EACxB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE;oBACtB,OAAO,CAAC,IAAI,CAAC,CAAC;oBACd,IAAI,CAAC,IAAI;wBAAE,UAAU,CAAC,KAAK,CAAC,CAAC;gBAC/B,CAAC,YAED,KAAC,MAAM,IACL,SAAS,EAAC,OAAO,gBACL,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,KAAK,iBAC5C,MAAM,EACnB,OAAO,EAAC,YAAY,EACpB,IAAI,QACJ,IAAI,EACF,gBAAM,KAAK,EAAE,iBAAiB,aAC5B,yBACG,QAAQ,CAAC,EAAE,KAAK,IAAI;oCACnB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;oCACnB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,GACvD,EACP,KAAC,aAAa,IACZ,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAClC,IACG,GAET,GACU,IACR,CACT,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,UAAU;IAChB,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;IACN,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,GAAG;CACmB,CAAC;AAEnC,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,iBAAiB,GAAG;IACxB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,MAAM;CACmB,CAAC;AAEnC,MAAM,UAAU,GAAG;IACjB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;CACe,CAAC;AAEnC,MAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,YAAY;CACW,CAAC"}
+{"version":3,"file":"ColorScaleSelect.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":"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"}

package/lib/color/ui/ColorScaleTone.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+import type { ColorStop } from '../core/interpolate.ts';
+/** What {@link ColorScaleTone} edits. */
+export interface ColorScaleToneProps {
+    /** The anchors of the scale being edited. */
+    stops: readonly ColorStop[];
+    /** Called with the recoloured anchors on every move of either slider. */
+    onChange: (stops: ColorStop[]) => void;
+}
+/**
+ * Two sliders setting the saturation and the brightness of every anchor at
+ * once, each anchor keeping its hue.
+ * @param props - See {@link ColorScaleToneProps}.
+ * @returns The two sliders, each with its value.
+ */
+export declare function ColorScaleTone(props: ColorScaleToneProps): ReactElement;
+//# sourceMappingURL=ColorScaleTone.d.ts.map

package/lib/color/ui/ColorScaleTone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScaleTone.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleTone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AASxD,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CACxC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAmDvE"}

package/lib/color/ui/ColorScaleTone.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider } from '@blueprintjs/core';
+import { useRef } from 'react';
+import { formatPercent } from "../../format/core/numbers.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { scaleTone, setScaleTone } from "../core/tone.js";
+const STEP = 0.01;
+// Above zero: a grey or a black anchor has no hue left to bring back.
+const MINIMUM_SATURATION = 0.1;
+const MINIMUM_VALUE = 0.2;
+/**
+ * Two sliders setting the saturation and the brightness of every anchor at
+ * once, each anchor keeping its hue.
+ * @param props - See {@link ColorScaleToneProps}.
+ * @returns The two sliders, each with its value.
+ */
+export function ColorScaleTone(props) {
+    const { stops, onChange } = props;
+    const t = useChromeT();
+    const tone = scaleTone(stops);
+    // The anchors as a drag found them, so their hues are read once per drag
+    // rather than off colours already rounded by the previous move.
+    const base = useRef(null);
+    function set(next) {
+        base.current ??= stops;
+        onChange(setScaleTone(base.current, next));
+    }
+    function release() {
+        base.current = null;
+    }
+    return (_jsxs("div", { style: GRID_STYLE, title: t('color.toneHelp'), children: [_jsx("span", { style: LABEL_STYLE, children: t('color.saturation') }), _jsx("span", { style: SLIDER_STYLE, children: _jsx(Slider, { min: MINIMUM_SATURATION, max: 1, stepSize: STEP, labelRenderer: false, value: Math.max(MINIMUM_SATURATION, tone.saturation), onChange: (saturation) => {
+                        set({ saturation });
+                    }, onRelease: release }) }), _jsx("span", { style: VALUE_STYLE, children: formatPercent(tone.saturation, 0) }), _jsx("span", { style: LABEL_STYLE, children: t('color.brightness') }), _jsx("span", { style: SLIDER_STYLE, children: _jsx(Slider, { min: MINIMUM_VALUE, max: 1, stepSize: STEP, labelRenderer: false, value: Math.max(MINIMUM_VALUE, tone.value), onChange: (value) => {
+                        set({ value });
+                    }, onRelease: release }) }), _jsx("span", { style: VALUE_STYLE, children: formatPercent(tone.value, 0) })] }));
+}
+const GRID_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: 'max-content minmax(0, 1fr) 3.5em',
+    alignItems: 'center',
+    columnGap: 10,
+    rowGap: 4,
+};
+const LABEL_STYLE = { fontSize: 12 };
+/** Room on both sides, so the handle is never clipped at either end. */
+const SLIDER_STYLE = {
+    display: 'block',
+    paddingInline: 8,
+};
+const VALUE_STYLE = {
+    fontSize: 12,
+    fontVariantNumeric: 'tabular-nums',
+    textAlign: 'right',
+};
+//# sourceMappingURL=ColorScaleTone.js.map

package/lib/color/ui/ColorScaleTone.js.map

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

package/lib/color/ui/ColorScaleTrack.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+import type { ColorScale, ColorStop } from '../core/interpolate.ts';
+/** What {@link ColorScaleTrack} draws and hands back. */
+export interface ColorScaleTrackProps {
+    /** The scale being edited. */
+    scale: ColorScale;
+    /** The anchor whose colour and position the editor shows. */
+    selected: number;
+    /** The anchor pointed at, which Backspace would remove. */
+    hovered: number | null;
+    /** Called when an anchor is clicked, focused, dragged or added. */
+    onSelect: (index: number) => void;
+    /** Called when an anchor is pointed at, and with `null` when it is left. */
+    onHover: (index: number | null) => void;
+    /** Called with the anchors after every add or move. */
+    onChange: (stops: ColorStop[]) => void;
+    /** Called when an anchor asks to be removed, from the keyboard. */
+    onRemove: (index: number) => void;
+    /** Called when an anchor is double-clicked, to recolour it. */
+    onPick: () => void;
+}
+/**
+ * The scale as one strip with its anchors on it: a click on the strip adds an
+ * anchor there, and an anchor is dragged along it.
+ * @param props - See {@link ColorScaleTrackProps}.
+ * @returns The strip and its anchors.
+ */
+export declare function ColorScaleTrack(props: ColorScaleTrackProps): ReactElement;
+//# sourceMappingURL=ColorScaleTrack.d.ts.map

package/lib/color/ui/ColorScaleTrack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScaleTrack.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAWpE,yDAAyD;AACzD,MAAM,WAAW,oBAAoB;IACnC,8BAA8B;IAC9B,KAAK,EAAE,UAAU,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4EAA4E;IAC5E,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACvC,mEAAmE;IACnE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,+DAA+D;IAC/D,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAiJzE"}