react-cheminfo 0.8.0 → 0.10.0

package/lib/projection/ui/ProjectionSharesMarks.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBand, chartBandCenter } from "../../chart/core/chartBand.js";
+import { AXIS_CAPTION_STYLE, AXIS_LAYER_STYLE, AXIS_NAME_STYLE, SHARES_BOTTOM_ROOM, SHARES_CAPTION_OFFSET, SHARES_LEFT_ROOM, SHARES_NAME_OFFSET, SHARES_RIGHT_ROOM, TOTAL_LABEL_STYLE, WHOLE_SHARE, } from "./projectionTabStyles.js";
+/**
+ * The bars, the running total over them, and the target they are measured
+ * against.
+ *
+ * Every bar takes its own component's colour. The total is one grey line with
+ * a dot per component and its name at its right-hand end, so the reader is
+ * never sent to a key to find out which of the two things on the chart is
+ * which. The target is one dashed rule and a light band reaching the first
+ * component that meets it — one honest marker, where Kaiser's rule and an
+ * elbow would be two folk rules a novice reads as verdicts.
+ * @param props - See {@link SharesMarksProps}.
+ * @returns The marks.
+ */
+export function SharesMarks(props) {
+    const { shares, frame, band } = props;
+    const { components, target, reachesTargetAt } = shares;
+    const { plot, y } = frame;
+    const zero = y.offset;
+    const bars = [];
+    const dots = [];
+    let path = '';
+    let lastX = plot.left;
+    let lastY = zero;
+    for (let index = 0; index < components.length; index++) {
+        const component = components[index];
+        if (component === undefined)
+            continue;
+        const top = y.offset + component.share * WHOLE_SHARE * y.factor;
+        const middle = chartBandCenter(band, index);
+        bars.push(_jsx("rect", { "data-component": component.number, x: middle - band.bandWidth / 2, y: Math.min(top, zero), width: band.bandWidth, height: Math.abs(zero - top), fill: component.color, children: _jsx("title", { children: hoverCard(shares, index) }) }, component.number));
+        lastX = middle;
+        lastY = y.offset + component.cumulative * WHOLE_SHARE * y.factor;
+        path += `${index === 0 ? 'M' : 'L'}${round(middle)} ${round(lastY)}`;
+        dots.push(_jsx("circle", { cx: middle, cy: lastY, r: 2.5 }, component.number));
+    }
+    const total = components.at(-1)?.cumulative ?? 0;
+    return (_jsxs(_Fragment, { children: [target > 0 ? targetMark(target, reachesTargetAt, frame, band) : null, _jsx("g", { "data-shares": "bars", children: bars }), _jsx("path", { "data-shares": "total", d: path, fill: "none", stroke: "var(--text-muted)", strokeWidth: 1.5 }), _jsx("g", { "data-shares": "total-dots", fill: "var(--text-muted)", children: dots }), _jsx("text", { x: lastX - DOT_GAP, y: Math.max(plot.top + LABEL_ROOM, lastY - DOT_GAP), textAnchor: "end", style: TOTAL_LABEL_STYLE, children: `Running total ${(total * WHOLE_SHARE).toFixed(1)}%` })] }));
+}
+/**
+ * The component names under the bars, and what the axis measures under them.
+ *
+ * They are written in a layer of their own because a frame clips its children
+ * to the plot and these sit below it — the same reason the tracked line chart
+ * writes its slot names this way rather than as frame children.
+ * @param props - See {@link SharesAxisProps}.
+ * @returns The names.
+ */
+export function SharesAxis(props) {
+    const { shares, width, height, caption } = props;
+    const right = Math.max(SHARES_LEFT_ROOM, width - SHARES_RIGHT_ROOM);
+    const band = chartBand(shares.components.length, SHARES_LEFT_ROOM, right);
+    const baseline = height - SHARES_BOTTOM_ROOM;
+    return (_jsxs("svg", { width: "100%", height: "100%", style: AXIS_LAYER_STYLE, children: [shares.components.map((component, index) => (_jsx("text", { x: chartBandCenter(band, index), y: baseline + SHARES_NAME_OFFSET, textAnchor: "middle", style: AXIS_NAME_STYLE, children: component.label }, component.number))), _jsx("text", { x: (SHARES_LEFT_ROOM + right) / 2, y: baseline + SHARES_CAPTION_OFFSET, textAnchor: "middle", style: AXIS_CAPTION_STYLE, children: caption })] }));
+}
+/**
+ * The dashed rule at the target, and the light band over the components that
+ * reach it.
+ * @param target - The cumulative share the marker aims at.
+ * @param reachesTargetAt - The first component to meet it, counting from one.
+ * @param frame - The frame the marks are drawn in.
+ * @param band - The slots the bars stand on.
+ * @returns The marker.
+ */
+function targetMark(target, reachesTargetAt, frame, band) {
+    const { plot, y } = frame;
+    const at = y.offset + target * WHOLE_SHARE * y.factor;
+    const covered = reachesTargetAt === null
+        ? 0
+        : band.offset + band.step * reachesTargetAt - plot.left;
+    return (_jsxs("g", { "data-shares": "target", children: [covered > 0 ? (_jsx("rect", { x: plot.left, y: plot.top, width: covered, height: plot.bottom - plot.top, fill: TARGET_BAND })) : null, _jsx("line", { x1: plot.left, x2: plot.right, y1: at, y2: at, stroke: "var(--border-strong)", strokeWidth: 1, strokeDasharray: "4 3" })] }));
+}
+/**
+ * What the pointer is told about one bar: its own share, the running total up
+ * to it, and the variance of its scores as fine print for the one reader in
+ * fifty who wants it.
+ * @param shares - The bars.
+ * @param index - Which one, from 0.
+ * @returns The card's text.
+ */
+function hoverCard(shares, index) {
+    const component = shares.components[index];
+    if (component === undefined)
+        return '';
+    const own = (component.share * WHOLE_SHARE).toFixed(2);
+    const together = (component.cumulative * WHOLE_SHARE).toFixed(2);
+    const line = `${component.label} — ${own}% of the differences. The first ${component.number} together: ${together}%.`;
+    const { eigenvalue } = component;
+    return eigenvalue === undefined
+        ? line
+        : `${line}\nλ = ${Math.round(eigenvalue * ROUNDING) / ROUNDING}`;
+}
+/** The light wash over the components that reach the target. */
+const TARGET_BAND = 'color-mix(in srgb, var(--border-strong) 22%, transparent)';
+/**
+ * How far the total's name sits from its last dot, and how far it is kept
+ * below the top of the plot.
+ *
+ * A whole model's total is 100 %, which lands the last dot on the very top
+ * rule — and a name six pixels above that is six pixels outside the frame's
+ * clip, so it would simply not be drawn.
+ */
+const DOT_GAP = 6;
+const LABEL_ROOM = 12;
+/** Decimals the fine print rounds an eigenvalue to. */
+const ROUNDING = 1000;
+const round = (value) => Math.round(value * 100) / 100;
+//# sourceMappingURL=ProjectionSharesMarks.js.map

package/lib/projection/ui/ProjectionSharesMarks.js.map

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

package/lib/projection/ui/ProjectionSharesMore.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from 'react';
+import type { ProjectionSharesControlsProps } from './ProjectionSharesControls.tsx';
+/** What the shares panel behind the cog is drawn from. */
+export type ProjectionSharesMoreProps = Omit<ProjectionSharesControlsProps, 'tier'>;
+/**
+ * What the shares figure keeps behind the cog: the one target it has, named
+ * and explained, and the way back to the share the figure came with.
+ *
+ * The stepper is on the bar as well, and that is not an oversight. The bar
+ * writes the number because the number is the tab's whole question — how much
+ * of the differences am I asking to account for — while this is the only place
+ * it is called anything, the only place the sentence behind its name is
+ * offered, and the only place a reader who has stepped it somewhere odd can
+ * put it back.
+ * @param props - See {@link ProjectionSharesMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export declare function ProjectionSharesMore(props: ProjectionSharesMoreProps): ReactElement;
+//# sourceMappingURL=ProjectionSharesMore.d.ts.map

package/lib/projection/ui/ProjectionSharesMore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesMore.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAGpF,0DAA0D;AAC1D,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,6BAA6B,EAC7B,MAAM,CACP,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,yBAAyB,GAC/B,YAAY,CAqBd"}

package/lib/projection/ui/ProjectionSharesMore.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayNumber } from "../../overlay/ui/OverlayNumber.js";
+import { OverlayPanel } from "../../overlay/ui/OverlayPanel.js";
+import { PROJECTION_PANEL_NAME } from "../core/projectionStrings.js";
+import { PROJECTION_TAB_DEFAULTS } from "../core/projectionTabDefaults.js";
+import { PROJECTION_SHARE_STEP, WHOLE_SHARE } from "./projectionTabStyles.js";
+/**
+ * What the shares figure keeps behind the cog: the one target it has, named
+ * and explained, and the way back to the share the figure came with.
+ *
+ * The stepper is on the bar as well, and that is not an oversight. The bar
+ * writes the number because the number is the tab's whole question — how much
+ * of the differences am I asking to account for — while this is the only place
+ * it is called anything, the only place the sentence behind its name is
+ * offered, and the only place a reader who has stepped it somewhere odd can
+ * put it back.
+ * @param props - See {@link ProjectionSharesMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export function ProjectionSharesMore(props) {
+    const { options, onChange, copy } = props;
+    const { help, tab } = copy;
+    return (_jsx(OverlayPanel, { title: tab.shares, onReset: () => onChange(PROJECTION_TAB_DEFAULTS.shares), children: _jsx(OverlayNumber, { label: PROJECTION_PANEL_NAME.shareTarget, help: help.shareTarget, value: Math.round(options.shareTarget * WHOLE_SHARE), min: 0, max: WHOLE_SHARE, step: PROJECTION_SHARE_STEP, unit: "%", onChange: (target) => onChange({ shareTarget: target / WHOLE_SHARE }) }) }));
+}
+//# sourceMappingURL=ProjectionSharesMore.js.map

package/lib/projection/ui/ProjectionSharesMore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesMore.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesMore.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAmC,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAG3E,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAQ9E;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAgC;IAEhC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAE3B,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,GAAG,CAAC,MAAM,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,uBAAuB,CAAC,MAAM,CAAC,YAEvD,KAAC,aAAa,IACZ,KAAK,EAAE,qBAAqB,CAAC,WAAW,EACxC,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,EACpD,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,MAAM,GAAG,WAAW,EAAE,CAAC,GACrE,GACW,CAChB,CAAC;AACJ,CAAC"}

package/lib/projection/ui/ProjectionSharesTab.d.ts

@@ -0,0 +1,50 @@
+import type { ReactElement } from 'react';
+import type { ExplainedShares } from '../core/explainedShares.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+/** What {@link ProjectionSharesTab} needs. */
+export interface ProjectionSharesTabProps {
+    /** What the run produced; every axis must carry a share. */
+    result: ProjectionResult;
+    /** The bars, worked out once by the viewer and explained in its bar. */
+    shares: ExplainedShares;
+    /**
+     * The words the tab writes.
+     * @default PROJECTION_COPY
+     */
+    copy?: ProjectionCopy;
+    /**
+     * Width of the figure, in pixels, from the viewer's measurement.
+     * @default 0 — nothing is drawn until the figure has been measured
+     */
+    width?: number;
+    /**
+     * Height of the figure, in pixels.
+     * @default 420
+     */
+    height?: number;
+    /**
+     * Value of the `data-testid` attribute of the wrapper.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * One bar per component, each in its own component's colour, with the running
+ * total drawn over them.
+ *
+ * The colour is the whole point of this tab. On most charts of explained
+ * shares the bars are one colour, or a gradient, and a reader who asks what it
+ * means is right to ask, because it means nothing. Here every bar carries the
+ * colour its component carries on every other tab, so the reader learns one
+ * colour language rather than two.
+ *
+ * It is the one figure of the viewer with no key at all: every bar is named
+ * under itself in its own colour, and the running total writes its name at its
+ * right-hand end, so a key would be a second place to look for something both
+ * marks already say about themselves.
+ * @param props - See {@link ProjectionSharesTabProps}.
+ * @returns The figure.
+ */
+export declare function ProjectionSharesTab(props: ProjectionSharesTabProps): ReactElement;
+//# sourceMappingURL=ProjectionSharesTab.d.ts.map

package/lib/projection/ui/ProjectionSharesTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesTab.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AASpE,8CAA8C;AAC9C,MAAM,WAAW,wBAAwB;IACvC,4DAA4D;IAC5D,MAAM,EAAE,gBAAgB,CAAC;IACzB,wEAAwE;IACxE,MAAM,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAyCd"}

package/lib/projection/ui/ProjectionSharesTab.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { chartBand } from "../../chart/core/chartBand.js";
+import { ChartFrame } from "../../chart/ui/ChartFrame.js";
+import { PROJECTION_COPY } from "../core/projectionCopy.js";
+import { SharesAxis, SharesMarks } from "./ProjectionSharesMarks.js";
+import { PROJECTION_TAB_HEIGHT, SHARES_BOTTOM_ROOM, WHOLE_SHARE, } from "./projectionTabStyles.js";
+/**
+ * One bar per component, each in its own component's colour, with the running
+ * total drawn over them.
+ *
+ * The colour is the whole point of this tab. On most charts of explained
+ * shares the bars are one colour, or a gradient, and a reader who asks what it
+ * means is right to ask, because it means nothing. Here every bar carries the
+ * colour its component carries on every other tab, so the reader learns one
+ * colour language rather than two.
+ *
+ * It is the one figure of the viewer with no key at all: every bar is named
+ * under itself in its own colour, and the running total writes its name at its
+ * right-hand end, so a key would be a second place to look for something both
+ * marks already say about themselves.
+ * @param props - See {@link ProjectionSharesTabProps}.
+ * @returns The figure.
+ */
+export function ProjectionSharesTab(props) {
+    const { result, shares, copy = PROJECTION_COPY, testId } = props;
+    const { width = 0, height = PROJECTION_TAB_HEIGHT } = props;
+    const slots = shares.components.length;
+    return (_jsx("div", { "data-testid": testId, children: _jsx(ChartFrame, { width: width, height: height, margins: { bottom: SHARES_BOTTOM_ROOM }, x: {
+                domain: [0, slots],
+                showTicks: false,
+                showGrid: false,
+                nice: false,
+            }, y: { domain: [0, WHOLE_SHARE], label: VERTICAL_CAPTION, tickCount: 5 }, label: `${result.method}. ${copy.intro.shares}`, overlay: _jsx(SharesAxis, { shares: shares, width: width, height: height, caption: HORIZONTAL_CAPTION }), children: (frame) => (_jsx(SharesMarks, { shares: shares, frame: frame, band: chartBand(slots, frame.plot.left, frame.plot.right, {
+                    padding: BAR_GAP,
+                }) })) }) }));
+}
+/** Share of a slot left empty between two bars. */
+const BAR_GAP = 0.3;
+/**
+ * The two axis captions, in words the reader already has.
+ *
+ * They are constants rather than copy because {@link ProjectionCopy} carries
+ * no slot for an axis, and adding one for two strings would put a translation
+ * seam in the middle of a figure.
+ */
+const HORIZONTAL_CAPTION = 'Components, strongest first';
+const VERTICAL_CAPTION = 'Share of the differences explained';
+//# sourceMappingURL=ProjectionSharesTab.js.map

package/lib/projection/ui/ProjectionSharesTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesTab.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesTab.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA+B,CAAC;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,4BAA6B,CAAC;AACtE,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,WAAW,GACZ,MAAM,0BAA0B,CAAC;AA8BlC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAA+B;IAE/B,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,GAAG,eAAe,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,qBAAqB,EAAE,GAAG,KAAK,CAAC;IAE5D,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;IAEvC,OAAO,CACL,6BAAkB,MAAM,YACtB,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,EACvC,CAAC,EAAE;gBACD,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;gBAClB,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACZ,EACD,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,EAAE,EACtE,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAC/C,OAAO,EACL,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,kBAAkB,GAC3B,YAGH,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE;oBACxD,OAAO,EAAE,OAAO;iBACjB,CAAC,GACF,CACH,GACU,GACT,CACP,CAAC;AACJ,CAAC;AAED,mDAAmD;AACnD,MAAM,OAAO,GAAG,GAAG,CAAC;AAEpB;;;;;;GAMG;AACH,MAAM,kBAAkB,GAAG,6BAA6B,CAAC;AACzD,MAAM,gBAAgB,GAAG,oCAAoC,CAAC"}

package/lib/projection/ui/ProjectionSurface.d.ts

@@ -0,0 +1,33 @@
+import type { ReactElement, ReactNode } from 'react';
+/** What {@link ProjectionSurface} needs. */
+export interface ProjectionSurfaceProps {
+    /** The chrome drawn at the compact size: the settings bar, a floating key. */
+    children: ReactNode;
+    /**
+     * Width of the figure, in pixels, for the chrome that has to decide whether
+     * it still fits. Only the settings bar needs it — chrome inside a chart is
+     * already over a measured figure and inherits its width.
+     * @default undefined — whatever the surface above it was measured at
+     */
+    width?: number;
+}
+/**
+ * The compact measurements every piece of this viewer's chrome is drawn from.
+ *
+ * The viewer is meant to be embedded in somebody else's page, so its chrome
+ * takes the smallest measurements the overlay domain offers rather than the
+ * roomier ones a figure standing alone can afford. A finger still wins: the
+ * pointer is read here, and a coarse one is handed the largest set whatever
+ * the figure asked for.
+ *
+ * It is a surface of its own rather than an `OverlayLayer` because the
+ * settings bar is in the flow above the picture, and a layer is absolutely
+ * positioned over one — a bar inside a layer would float over the very data it
+ * introduces. Everything else about the surface it stands on is carried
+ * through, so a key nested inside a chart's own layer still fades with that
+ * chart and still knows it is repainting.
+ * @param props - See {@link ProjectionSurfaceProps}.
+ * @returns The chrome, drawn compact.
+ */
+export declare function ProjectionSurface(props: ProjectionSurfaceProps): ReactElement;
+//# sourceMappingURL=ProjectionSurface.d.ts.map

package/lib/projection/ui/ProjectionSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSurface.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWrD,4CAA4C;AAC5C,MAAM,WAAW,sBAAsB;IACrC,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAoB7E"}

package/lib/projection/ui/ProjectionSurface.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { overlayMetrics } from "../../overlay/core/overlayMetrics.js";
+import { OverlaySurfaceContext, useCoarsePointer, useOverlaySurface, } from "../../overlay/ui/overlaySurface.js";
+/**
+ * The compact measurements every piece of this viewer's chrome is drawn from.
+ *
+ * The viewer is meant to be embedded in somebody else's page, so its chrome
+ * takes the smallest measurements the overlay domain offers rather than the
+ * roomier ones a figure standing alone can afford. A finger still wins: the
+ * pointer is read here, and a coarse one is handed the largest set whatever
+ * the figure asked for.
+ *
+ * It is a surface of its own rather than an `OverlayLayer` because the
+ * settings bar is in the flow above the picture, and a layer is absolutely
+ * positioned over one — a bar inside a layer would float over the very data it
+ * introduces. Everything else about the surface it stands on is carried
+ * through, so a key nested inside a chart's own layer still fades with that
+ * chart and still knows it is repainting.
+ * @param props - See {@link ProjectionSurfaceProps}.
+ * @returns The chrome, drawn compact.
+ */
+export function ProjectionSurface(props) {
+    const { children, width } = props;
+    const above = useOverlaySurface();
+    const pointer = useCoarsePointer() ? 'coarse' : 'fine';
+    const surface = useMemo(() => ({
+        ...above,
+        metrics: overlayMetrics('compact', pointer),
+        pointer,
+        width: width ?? above.width,
+    }), [above, pointer, width]);
+    return (_jsx(OverlaySurfaceContext.Provider, { value: surface, children: children }));
+}
+//# sourceMappingURL=ProjectionSurface.js.map

package/lib/projection/ui/ProjectionSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSurface.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSurface.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAEtE,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,oCAAoC,CAAC;AAe5C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,iBAAiB,EAAE,CAAC;IAClC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAEvD,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,KAAK;QACR,OAAO,EAAE,cAAc,CAAC,SAAS,EAAE,OAAO,CAAC;QAC3C,OAAO;QACP,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK;KAC5B,CAAC,EACF,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAC3C,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC"}

package/lib/projection/ui/ProjectionTabStrip.d.ts

@@ -0,0 +1,74 @@
+import type { ReactElement } from 'react';
+import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
+import type { ProjectionTab } from '../core/projectionTabs.ts';
+/** What {@link ProjectionTabStrip} needs. */
+export interface ProjectionTabStripProps {
+    /** The tabs the result can fill, in reading order. */
+    tabs: readonly ProjectionTab[];
+    /** The one showing. */
+    tab: ProjectionTab;
+    /** Called with the tab the reader moved to. */
+    onTabChange: (tab: ProjectionTab) => void;
+    /** What each tab is called, from the viewer's copy. */
+    labels: Readonly<Record<ProjectionTab, string>>;
+    /**
+     * What each tab is called on a bar with no room for the long name. They are
+     * written out rather than truncated: "How much each explains" cut to the
+     * width that fits reads "How much each e…", which says less than the one
+     * word the tab is about.
+     */
+    shortLabels: Readonly<Record<ProjectionTab, string>>;
+    /**
+     * Stem of the `id` every button carries, so the panel below can name the tab
+     * it belongs to and a screen reader can walk between the two.
+     */
+    baseId: string;
+    /**
+     * The `id` of the panel the buttons drive. One panel is shared, because only
+     * the showing tab is ever rendered.
+     */
+    panelId: string;
+    /**
+     * How much of itself the bar is writing, which decides whether the names are
+     * written in full and whether the strip may scroll rather than shrink.
+     * @default 'full'
+     */
+    tier?: OverlayTier;
+    /**
+     * The most room the strip may take once it is scrolling, which is whatever
+     * the settings and the glyphs at the far end do not need. Without it the row
+     * would hand the strip and the settings a share of the shortfall each, and
+     * the settings — a chip beside a cog — have nothing to give.
+     * @default Number.POSITIVE_INFINITY — the strip takes what it needs
+     */
+    maxWidth?: number;
+    /**
+     * What the strip is called, for a reader arriving by tab.
+     * @default 'Views'
+     */
+    label?: string;
+}
+/**
+ * The connected pills that move between a projection's four views.
+ *
+ * They are the package's one segmented control rather than a strip of their
+ * own, so a reader who has pressed the choices inside a settings card has
+ * already learned to press these — and the pills sit at the start of the same
+ * bar those settings sit at the end of, which is what makes the two read as
+ * one piece of chrome instead of two rows stacked over the figure.
+ *
+ * What a narrowing figure takes from them is words and never views. First the
+ * long names give way to the short ones; then, on a figure too narrow to hold
+ * four names however short, the strip scrolls and the view in force is brought
+ * into sight — a reader who cannot see which view they are on, or cannot reach
+ * the others, is stuck rather than merely short of room.
+ *
+ * The shell draws none at all when the result can fill only one tab: a single
+ * pill says nothing about the data and still costs the reader a glance to rule
+ * out. The bar itself stays, because the settings and the explanation still
+ * belong somewhere.
+ * @param props - See {@link ProjectionTabStripProps}.
+ * @returns The strip.
+ */
+export declare function ProjectionTabStrip(props: ProjectionTabStripProps): ReactElement;
+//# sourceMappingURL=ProjectionTabStrip.d.ts.map

package/lib/projection/ui/ProjectionTabStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionTabStrip.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionTabStrip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAO/D,6CAA6C;AAC7C,MAAM,WAAW,uBAAuB;IACtC,sDAAsD;IACtD,IAAI,EAAE,SAAS,aAAa,EAAE,CAAC;IAC/B,uBAAuB;IACvB,GAAG,EAAE,aAAa,CAAC;IACnB,+CAA+C;IAC/C,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,uDAAuD;IACvD,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAChD;;;;;OAKG;IACH,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CAgCd"}

package/lib/projection/ui/ProjectionTabStrip.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { OverlayPills } from "../../overlay/ui/OverlayPills.js";
+import { projectionTabScroll, projectionTabTrackStyle, } from "./projectionBarStyles.js";
+/**
+ * The connected pills that move between a projection's four views.
+ *
+ * They are the package's one segmented control rather than a strip of their
+ * own, so a reader who has pressed the choices inside a settings card has
+ * already learned to press these — and the pills sit at the start of the same
+ * bar those settings sit at the end of, which is what makes the two read as
+ * one piece of chrome instead of two rows stacked over the figure.
+ *
+ * What a narrowing figure takes from them is words and never views. First the
+ * long names give way to the short ones; then, on a figure too narrow to hold
+ * four names however short, the strip scrolls and the view in force is brought
+ * into sight — a reader who cannot see which view they are on, or cannot reach
+ * the others, is stuck rather than merely short of room.
+ *
+ * The shell draws none at all when the result can fill only one tab: a single
+ * pill says nothing about the data and still costs the reader a glance to rule
+ * out. The bar itself stays, because the settings and the explanation still
+ * belong somewhere.
+ * @param props - See {@link ProjectionTabStripProps}.
+ * @returns The strip.
+ */
+export function ProjectionTabStrip(props) {
+    const { tabs, tab, onTabChange, labels, shortLabels } = props;
+    const { baseId, panelId, tier = 'full', label } = props;
+    const { maxWidth = Number.POSITIVE_INFINITY } = props;
+    const track = useRef(null);
+    const scrolls = tier === 'tiny';
+    const written = tier === 'full' || tier === 'condensed' ? labels : shortLabels;
+    const options = useMemo(() => tabs.map((entry) => ({ value: entry, label: written[entry] })), [tabs, written]);
+    useEffect(() => {
+        if (!scrolls)
+            return;
+        showSelected(track.current);
+    }, [scrolls, tab, options, maxWidth]);
+    return (_jsx("div", { ref: track, style: projectionTabTrackStyle(scrolls, maxWidth), children: _jsx(OverlayPills, { role: "tablist", label: label ?? 'Views', value: tab, options: options, baseId: baseId, panelId: panelId, onChange: onTabChange }) }));
+}
+/**
+ * Bring the view in force back into sight inside a scrolling strip.
+ *
+ * The box is scrolled by hand rather than through `scrollIntoView`, which asks
+ * every scrolling ancestor to move as well — so a figure halfway down somebody
+ * else's page would jump under the reader for a tab they can already see.
+ *
+ * Where the view sits is measured against the strip's own box rather than read
+ * off `offsetLeft`, which is relative to whichever ancestor happens to be
+ * positioned — here the card, several boxes further out.
+ * @param box - The scrolling box, when it has been laid out.
+ */
+function showSelected(box) {
+    if (box === null)
+        return;
+    const selected = box.querySelector('[aria-selected="true"]');
+    if (selected === null)
+        return;
+    const seen = selected.getBoundingClientRect();
+    const left = seen.left - box.getBoundingClientRect().left + box.scrollLeft;
+    box.scrollLeft = projectionTabScroll(left, left + seen.width, box.scrollLeft, box.clientWidth);
+}
+//# sourceMappingURL=ProjectionTabStrip.js.map

package/lib/projection/ui/ProjectionTabStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionTabStrip.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionTabStrip.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAmC,CAAC;AAGjE,OAAO,EACL,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAkDlC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAA8B;IAE9B,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,KAAK,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,IAAI,KAAK,MAAM,CAAC;IAChC,MAAM,OAAO,GACX,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;IACjE,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EACpE,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,cAAK,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,uBAAuB,CAAC,OAAO,EAAE,QAAQ,CAAC,YAChE,KAAC,YAAY,IACX,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,IAAI,OAAO,EACvB,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,WAAW,GACrB,GACE,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,SAAS,YAAY,CAAC,GAA0B;IAC9C,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO;IACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,CAAc,wBAAwB,CAAC,CAAC;IAC1E,IAAI,QAAQ,KAAK,IAAI;QAAE,OAAO;IAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;IAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC,UAAU,CAAC;IAC3E,GAAG,CAAC,UAAU,GAAG,mBAAmB,CAClC,IAAI,EACJ,IAAI,GAAG,IAAI,CAAC,KAAK,EACjB,GAAG,CAAC,UAAU,EACd,GAAG,CAAC,WAAW,CAChB,CAAC;AACJ,CAAC"}

package/lib/projection/ui/ProjectionVariablesControls.d.ts

@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionVariablesAvailability } from './projectionViewChoices.ts';
+/** What the "what differs" picker on the bar is drawn from. */
+export interface ProjectionVariablesControlsProps extends ProjectionVariablesAvailability {
+    /** Every option the panels are drawn from. */
+    options: ProjectionOptions;
+    /** The words the bar writes, already merged over the defaults. */
+    copy: ProjectionCopy;
+    /** Called with only the options that changed, for the viewer to merge. */
+    onChange: (patch: Partial<ProjectionOptions>) => void;
+    /**
+     * How much of itself the bar is writing.
+     * @default 'full'
+     */
+    tier?: OverlayTier;
+}
+/**
+ * The one control of the "what differs" tab that stays on the bar.
+ *
+ * "Show" is the only choice here that changes what the panels mean rather than
+ * how they are drawn, and it is the one a reader who has never met a loading
+ * needs first. A view whose data the run never reported is greyed rather than
+ * dropped, with the reason on the choice itself: a reader who cannot see that
+ * "Weights in your units" exists never learns to ask their colleague for a
+ * scaled model.
+ * @param props - See {@link ProjectionVariablesControlsProps}.
+ * @returns The picker.
+ */
+export declare function ProjectionVariablesControls(props: ProjectionVariablesControlsProps): ReactElement;
+//# sourceMappingURL=ProjectionVariablesControls.d.ts.map

package/lib/projection/ui/ProjectionVariablesControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionVariablesControls.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionVariablesControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AAGlF,+DAA+D;AAC/D,MAAM,WAAW,gCAAiC,SAAQ,+BAA+B;IACvF,8CAA8C;IAC9C,OAAO,EAAE,iBAAiB,CAAC;IAC3B,kEAAkE;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,GACtC,YAAY,CAmBd"}

package/lib/projection/ui/ProjectionVariablesControls.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayValueMenu } from "../../overlay/ui/OverlayValueMenu.js";
+import { projectionViewChoices } from "./projectionViewChoices.js";
+/**
+ * The one control of the "what differs" tab that stays on the bar.
+ *
+ * "Show" is the only choice here that changes what the panels mean rather than
+ * how they are drawn, and it is the one a reader who has never met a loading
+ * needs first. A view whose data the run never reported is greyed rather than
+ * dropped, with the reason on the choice itself: a reader who cannot see that
+ * "Weights in your units" exists never learns to ask their colleague for a
+ * scaled model.
+ * @param props - See {@link ProjectionVariablesControlsProps}.
+ * @returns The picker.
+ */
+export function ProjectionVariablesControls(props) {
+    const { options, copy, onChange, tier = 'full' } = props;
+    const { canShowEffect, canRescale, canPickSample } = props;
+    const { bar, help } = copy;
+    return (_jsx(OverlayValueMenu, { label: help.variablesView.title, keyWord: bar.key.variablesView, showKey: tier === 'full', value: options.variablesView, options: projectionViewChoices(copy, {
+            canShowEffect,
+            canRescale,
+            canPickSample,
+        }), onChange: (variablesView) => onChange({ variablesView }) }));
+}
+//# sourceMappingURL=ProjectionVariablesControls.js.map

package/lib/projection/ui/ProjectionVariablesControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionVariablesControls.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionVariablesControls.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAuC,CAAC;AAQzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAiBnE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,2BAA2B,CACzC,KAAuC;IAEvC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IACzD,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE3B,OAAO,CACL,KAAC,gBAAgB,IACf,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAC/B,OAAO,EAAE,GAAG,CAAC,GAAG,CAAC,aAAa,EAC9B,OAAO,EAAE,IAAI,KAAK,MAAM,EACxB,KAAK,EAAE,OAAO,CAAC,aAAa,EAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI,EAAE;YACnC,aAAa;YACb,UAAU;YACV,aAAa;SACd,CAAC,EACF,QAAQ,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC,GACxD,CACH,CAAC;AACJ,CAAC"}

package/lib/projection/ui/ProjectionVariablesMore.d.ts

@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionVariablesAvailability } from './projectionViewChoices.ts';
+/** What the panels keep behind the cog is drawn from. */
+export interface ProjectionVariablesMoreProps extends ProjectionVariablesAvailability {
+    /** Every option the panels are drawn from. */
+    options: ProjectionOptions;
+    /** The words the bar writes, already merged over the defaults. */
+    copy: ProjectionCopy;
+    /** How many components the run produced, which caps the panel count. */
+    axisCount: number;
+    /** Whether the measurements lie along a number line, which fixes their order. */
+    continuous: boolean;
+    /** Called with only the options that changed, for the viewer to merge. */
+    onChange: (patch: Partial<ProjectionOptions>) => void;
+}
+/**
+ * What the "what differs" tab keeps behind the cog: which view the panels
+ * draw, how many of them there are, what they are measured against, and how
+ * the marks along them are drawn.
+ *
+ * Six settings in one column is a list the eye slides off, so the two that
+ * decide what a panel *is* stand at the top under no heading at all, and the
+ * rest are filed under what they are about — the scale the panels are read
+ * against, then the marks drawn on them. The first two need no heading
+ * precisely because they are first: a caption over the top of a panel repeats
+ * the panel's own title.
+ * @param props - See {@link ProjectionVariablesMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export declare function ProjectionVariablesMore(props: ProjectionVariablesMoreProps): ReactElement;
+//# sourceMappingURL=ProjectionVariablesMore.d.ts.map

package/lib/projection/ui/ProjectionVariablesMore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionVariablesMore.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionVariablesMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,8BAA8B,CAAC;AAOtC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AAGlF,yDAAyD;AACzD,MAAM,WAAW,4BAA6B,SAAQ,+BAA+B;IACnF,8CAA8C;IAC9C,OAAO,EAAE,iBAAiB,CAAC;IAC3B,kEAAkE;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,wEAAwE;IACxE,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,UAAU,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,4BAA4B,GAClC,YAAY,CAkEd"}