react-cheminfo 0.9.0 → 0.11.0

package/lib/projection/ui/projectionBarModel.js

@@ -0,0 +1,141 @@
+/**
+ * How much of itself the settings bar writes at the width the figure has.
+ *
+ * The bar never wraps: a second row would change the figure's height as the
+ * host page resized, and an embedded figure that moves somebody else's layout
+ * while it is being read is worse than one whose settings have been written
+ * shorter. So what a narrowing figure loses is words, one rung at a time —
+ * the key word in front of each value, then the long form of the tab names,
+ * then the boxes around the settings, which gather into one chip that still
+ * reads the configuration. No rung ever takes a control away.
+ *
+ * Nothing here is a magic number. The thresholds come out of the content: a
+ * viewer with two tabs stays roomy far longer than one with six, and a site
+ * that has translated the tab names has changed exactly these widths. The
+ * ladder itself lives in the overlay domain; what this adds is the room a
+ * projection's own controls need that the ladder cannot see, because a stepper
+ * is two buttons around a number rather than words on a button.
+ */
+import { overlayChipRoom, overlaySettingsWidth, overlayTailWidth, } from "../../overlay/core/overlayTierRoom.js";
+import { overlayTier, overlayTierWidths, } from "../../overlay/core/overlayTiers.js";
+import { projectionUnwrittenRoom } from "./projectionBarReadings.js";
+/**
+ * How many bare glyphs the bar carries at its end on this tab.
+ *
+ * The save glyph rides every tab, because every tab draws a figure somebody may
+ * want to keep. The question mark and the cog ride all but the shares one,
+ * whose figure needs no explanation its own axes do not already give. The map
+ * carries two more: the switches that write the names onto the picture. They
+ * are glyphs because a switch has no value to write — it is thrown or it is not
+ * — so a word beside one would be a caption rather than a reading, and being
+ * already as small as a control can be drawn, they are the one thing on the bar
+ * that never folds.
+ * @param tab - The tab showing.
+ * @returns How many button-sized glyphs the far end must keep room for.
+ */
+export function projectionBarGlyphs(tab) {
+    if (tab === 'shares')
+        return SAVE_GLYPHS + 1;
+    const named = tab === 'map' || tab === 'space';
+    return SAVE_GLYPHS + (named ? MAP_BAR_GLYPHS : BAR_GLYPHS);
+}
+/** The one that takes the figure off the page, on every tab. */
+const SAVE_GLYPHS = 1;
+/** The question mark and the cog, which almost every tab carries. */
+const BAR_GLYPHS = 2;
+/** Those two, and the pair of name switches the map and the cloud both carry. */
+const MAP_BAR_GLYPHS = 4;
+/**
+ * How much of itself the bar writes at this width.
+ *
+ * The width is the figure's own, never the page's: an embedded figure has no
+ * idea how wide the page around it is, and the same viewer four hundred pixels
+ * wide in a wide page and filling a phone is the same problem. An unmeasured
+ * figure is given the roomiest rung, so a bar never opens folded and springs
+ * open a frame later on every page that embeds it.
+ * @param width - Width of the figure, in pixels.
+ * @param room - See {@link ProjectionBarRoom}.
+ * @param metrics - The measurements the bar is drawn from.
+ * @returns The rung.
+ */
+export function projectionBarTier(width, room, metrics) {
+    if (!Number.isFinite(width) || width <= 0)
+        return 'full';
+    const unwritten = projectionUnwrittenRoom(room.readings, metrics);
+    const written = Math.max(1, width - unwritten);
+    return overlayTier(written, tierRoom(room), metrics);
+}
+/**
+ * The figure width each rung needs, for this content at these measurements.
+ *
+ * Published so the ladder can be read and pinned rather than guessed at: the
+ * numbers a four-tab principal component viewer folds at are an answer, not a
+ * decision anybody made.
+ * @param room - See {@link ProjectionBarRoom}.
+ * @param metrics - The measurements the bar is drawn from.
+ * @returns The four widths, in pixels.
+ */
+export function projectionBarTierWidths(room, metrics) {
+    const unwritten = projectionUnwrittenRoom(room.readings, metrics);
+    const widths = overlayTierWidths(tierRoom(room), metrics);
+    return {
+        full: widths.full + unwritten,
+        condensed: widths.condensed + unwritten,
+        short: widths.short + unwritten,
+        chip: widths.chip + unwritten,
+    };
+}
+/**
+ * How much of the figure's width the far end of the bar is about to take.
+ *
+ * The row is one flex line whose two ends are told they may both shrink, and a
+ * chip beside a cog cannot shrink — it would simply hang off the edge, taking
+ * the cog with it. So the strip of views is given a ceiling instead: whatever
+ * the settings and the glyphs do not need. The estimate is the ladder's own,
+ * and it errs high, which costs the reader a few pixels of scroll rather than
+ * a control they cannot reach.
+ * @param room - See {@link ProjectionBarRoom}.
+ * @param metrics - The measurements the bar is drawn from.
+ * @param tier - The rung the bar is on, which decides how much it writes.
+ * @returns The width in pixels, the bar's own padding included.
+ */
+export function projectionBarEndRoom(room, metrics, tier) {
+    const { settings } = tierRoom(room);
+    const gathered = tier === 'chip' || tier === 'tiny';
+    const written = gathered
+        ? overlayChipRoom(settings, metrics)
+        : overlaySettingsWidth(settings, tier === 'full', metrics);
+    // The question mark has folded into the cog by the last rung, so only one
+    // glyph is left to leave room for.
+    const glyphs = tier === 'tiny' ? 1 : (room.glyphs ?? 2);
+    return (written +
+        overlayTailWidth(glyphs, metrics) +
+        projectionUnwrittenRoom(room.readings, metrics) +
+        // Written type is always a little wider than an estimate read off the
+        // characters, and every gap the chip sets between its parts is missed
+        // outright. A control's height of slack is what keeps the last glyph
+        // inside the figure's own padding rather than flush against its edge.
+        metrics.controlHeight);
+}
+/**
+ * The bar's content in the shape the ladder reads.
+ * @param room - See {@link ProjectionBarRoom}.
+ * @returns The ladder's own description of the same bar.
+ */
+function tierRoom(room) {
+    const settings = [];
+    for (const reading of room.readings) {
+        settings.push({
+            key: reading.key,
+            value: reading.value,
+            swatches: reading.swatches !== undefined && reading.swatches.length > 0,
+        });
+    }
+    return {
+        tabs: room.tabLabels,
+        shortTabs: room.shortTabLabels,
+        settings,
+        glyphs: room.glyphs ?? 2,
+    };
+}
+//# sourceMappingURL=projectionBarModel.js.map

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

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

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

@@ -0,0 +1,65 @@
+/**
+ * What the settings at the far end of the bar currently read.
+ *
+ * The same four or five words are needed twice and must agree both times: once
+ * to work out how much room the bar needs before anything is drawn, and once
+ * to write them on the chip a narrow bar gathers them into. Building them here
+ * is what stops the estimate from measuring `Species` while the chip writes
+ * `Colour by species` and folding the bar at the wrong width.
+ */
+import type { OverlayMetrics } from '../../overlay/core/overlayMetrics.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+import type { ProjectionTab } from '../core/projectionTabs.ts';
+/** One setting on the bar, as the reader sees it right now. */
+export interface ProjectionReading {
+    /** The one word written in front of the value where there is room. */
+    key: string;
+    /** What the setting is called in full, which is what it announces. */
+    label: string;
+    /** What it currently reads: `Species`, `95%`, `4`. */
+    value: string;
+    /**
+     * The figure's own colours, for the setting that decides them.
+     * @default undefined — no dots are drawn
+     */
+    swatches?: readonly string[];
+    /**
+     * Whether it is a stepper rather than words. A number is the one setting a
+     * value button cannot improve, so it keeps its two buttons — which the
+     * ladder cannot see, because they are not written.
+     * @default false
+     */
+    stepper?: boolean;
+}
+/** What the readings of the tab showing are built from. */
+export interface ProjectionReadingsInput {
+    /** The tab showing, whose own settings sit at the far end of the bar. */
+    tab: ProjectionTab;
+    /** The words the viewer writes, already merged over the defaults. */
+    copy: ProjectionCopy;
+    /** What the figure is showing, already made safe against the result. */
+    options: ProjectionOptions;
+    /** The groups as every figure draws them, whose colours the map writes. */
+    groups: ResolvedProjectionGroups;
+}
+/**
+ * What the tab showing writes at the far end of the bar.
+ * @param input - See {@link ProjectionReadingsInput}.
+ * @returns The readings, in the order they are written.
+ */
+export declare function projectionBarReadings(input: ProjectionReadingsInput): readonly ProjectionReading[];
+/**
+ * How much room the readings need beyond the words on them.
+ *
+ * A stepper is two buttons around a number, and the ladder measures a setting
+ * from what is written on it — so without this a bar holding one would be
+ * given about a third of the room the stepper actually takes and would run its
+ * controls off the edge of the figure rather than folding.
+ * @param readings - What the tab showing writes.
+ * @param metrics - The measurements the bar is drawn from.
+ * @returns The extra width, in pixels.
+ */
+export declare function projectionUnwrittenRoom(readings: readonly ProjectionReading[], metrics: OverlayMetrics): number;
+//# sourceMappingURL=projectionBarReadings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionBarReadings.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionBarReadings.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAM/D,+DAA+D;AAC/D,MAAM,WAAW,iBAAiB;IAChC,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,2DAA2D;AAC3D,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,GAAG,EAAE,aAAa,CAAC;IACnB,qEAAqE;IACrE,IAAI,EAAE,cAAc,CAAC;IACrB,wEAAwE;IACxE,OAAO,EAAE,iBAAiB,CAAC;IAC3B,2EAA2E;IAC3E,MAAM,EAAE,wBAAwB,CAAC;CAClC;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,uBAAuB,GAC7B,SAAS,iBAAiB,EAAE,CAmD9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,SAAS,iBAAiB,EAAE,EACtC,OAAO,EAAE,cAAc,GACtB,MAAM,CAQR"}

package/lib/projection/ui/projectionBarReadings.js

@@ -0,0 +1,138 @@
+/**
+ * What the settings at the far end of the bar currently read.
+ *
+ * The same four or five words are needed twice and must agree both times: once
+ * to work out how much room the bar needs before anything is drawn, and once
+ * to write them on the chip a narrow bar gathers them into. Building them here
+ * is what stops the estimate from measuring `Species` while the chip writes
+ * `Colour by species` and folding the bar at the wrong width.
+ */
+import { ellipseCoverageText } from "./projectionEllipse.js";
+import { ellipsoidCoverageText } from "./projectionEllipsoid.js";
+import { WHOLE_SHARE } from "./projectionTabStyles.js";
+/**
+ * What the tab showing writes at the far end of the bar.
+ * @param input - See {@link ProjectionReadingsInput}.
+ * @returns The readings, in the order they are written.
+ */
+export function projectionBarReadings(input) {
+    const { tab, copy, options, groups } = input;
+    const { bar, help } = copy;
+    if (tab === 'pairs') {
+        return [
+            {
+                key: bar.key.pairCount,
+                label: help.pairCount.title,
+                value: String(options.pairCount),
+                stepper: true,
+            },
+        ];
+    }
+    if (tab === 'variables') {
+        return [
+            {
+                key: bar.key.variablesView,
+                label: help.variablesView.title,
+                value: bar.view[options.variablesView],
+            },
+        ];
+    }
+    if (tab === 'space') {
+        return [
+            {
+                key: bar.key.cloudGesture,
+                label: help.cloudGesture.title,
+                value: options.cloudGesture === 'turn' ? 'Turn' : 'Select',
+            },
+            {
+                key: bar.key.ellipse,
+                label: help.ellipse.title,
+                value: options.colorBy === 'group' && groups.entries.length > 0
+                    ? ellipsoidCoverageText(options.ellipse)
+                    : bar.noOutlines,
+            },
+        ];
+    }
+    if (tab === 'shares') {
+        return [
+            {
+                key: bar.key.shareTarget,
+                label: help.shareTarget.title,
+                value: `${Math.round(options.shareTarget * WHOLE_SHARE)}%`,
+                stepper: true,
+            },
+        ];
+    }
+    return mapReadings(copy, options, groups);
+}
+/**
+ * How much room the readings need beyond the words on them.
+ *
+ * A stepper is two buttons around a number, and the ladder measures a setting
+ * from what is written on it — so without this a bar holding one would be
+ * given about a third of the room the stepper actually takes and would run its
+ * controls off the edge of the figure rather than folding.
+ * @param readings - What the tab showing writes.
+ * @param metrics - The measurements the bar is drawn from.
+ * @returns The extra width, in pixels.
+ */
+export function projectionUnwrittenRoom(readings, metrics) {
+    let extra = 0;
+    for (const reading of readings) {
+        if (reading.stepper === true) {
+            extra += 2 * metrics.buttonSize + 2 * metrics.gap;
+        }
+    }
+    return extra;
+}
+/**
+ * The colours the map is painting the groups in, for the swatch glyph.
+ *
+ * Empty while the colour stands for nothing, so a bar that says `Nothing`
+ * does not carry a row of dots contradicting it.
+ * @param options - What the figure is showing.
+ * @param groups - The groups as every figure draws them.
+ * @returns The colours, in the order the figure draws them.
+ */
+function projectionGroupColors(options, groups) {
+    if (options.colorBy !== 'group')
+        return NO_COLORS;
+    const colors = [];
+    for (const entry of groups.entries)
+        colors.push(entry.color);
+    return colors;
+}
+/**
+ * What the map writes: what the colour stands for, and how wide the outlines
+ * are drawn.
+ *
+ * The two switches that write names on the picture are not here. A switch has
+ * no value to read out — it is thrown or it is not — so it rides the bar as a
+ * glyph, like the question mark and the cog, and is counted in the room the
+ * bar keeps for those rather than in the words it writes.
+ * @param copy - The words the viewer writes.
+ * @param options - What the figure is showing.
+ * @param groups - The groups as every figure draws them.
+ * @returns The two readings.
+ */
+function mapReadings(copy, options, groups) {
+    const { bar, help } = copy;
+    const colored = options.colorBy === 'group';
+    const coverage = ellipseCoverageText(options.ellipse);
+    return [
+        {
+            key: bar.key.colorBy,
+            label: help.colorBy.title,
+            value: colored ? groups.label : bar.uncoloured,
+            swatches: projectionGroupColors(options, groups),
+        },
+        {
+            key: bar.key.ellipse,
+            label: help.ellipse.title,
+            value: coverage === '' ? bar.noOutlines : coverage,
+        },
+    ];
+}
+/** No colours at all, which is what an uncoloured map paints. */
+const NO_COLORS = [];
+//# sourceMappingURL=projectionBarReadings.js.map

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

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

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

@@ -0,0 +1,59 @@
+import type { ReactNode } 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 { ProjectionResult } from '../core/projectionResult.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+import type { ProjectionTab } from '../core/projectionTabs.ts';
+import type { ProjectionReading } from './projectionBarReadings.ts';
+import type { ProjectionMapView } from './projectionMapView.ts';
+import type { ProjectionModels } from './projectionTabModels.ts';
+/** The three things one tab puts in the bar. */
+export interface ProjectionBarSlots {
+    /** The settings of the tab showing, written to the rung the bar is on. */
+    end: ReactNode;
+    /** What waits behind the cog; nothing at all draws no cog. */
+    more: ReactNode;
+    /** What the question mark hands back; empty draws no question mark. */
+    info: string;
+}
+/** What the tab showing is asked for, to fill the bar with. */
+export interface ProjectionBarSlotsInput {
+    /** The tab showing. */
+    tab: ProjectionTab;
+    /** What the run produced. */
+    result: ProjectionResult;
+    /** The words the viewer writes. */
+    copy: ProjectionCopy;
+    /** The two figures the bar explains. */
+    models: ProjectionModels;
+    /** The map's frame and the buttons that change it. */
+    map: ProjectionMapView;
+    /** Every option, already made safe against the result. */
+    options: ProjectionOptions;
+    /** The groups as every figure draws them. */
+    groups: ResolvedProjectionGroups;
+    /** The selected rows, as indices. */
+    selected: readonly number[];
+    /** Width of the viewer, in pixels. */
+    width: number;
+    /** What the settings of the tab showing currently read. */
+    readings: readonly ProjectionReading[];
+    /** How much of itself the bar is writing at this width. */
+    tier: OverlayTier;
+    /** Called with only the options that changed. */
+    onChange: (patch: Partial<ProjectionOptions>) => void;
+}
+/**
+ * The controls and the explanation of the tab showing.
+ *
+ * Each tab writes on the bar the one or two settings a reader of that tab
+ * actually looks at, and hands its whole panel of settings to the cog. What
+ * the rung decides is how much of the bar's settings is written — never which
+ * of them the reader is offered, because a control that has disappeared is a
+ * control the reader concludes the figure does not have.
+ * @param input - See {@link ProjectionBarSlotsInput}.
+ * @returns See {@link ProjectionBarSlots}.
+ */
+export declare function projectionBarSlots(input: ProjectionBarSlotsInput): ProjectionBarSlots;
+//# sourceMappingURL=projectionBarSlots.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionBarSlots.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionBarSlots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAY/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAMhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,gDAAgD;AAChD,MAAM,WAAW,kBAAkB;IACjC,0EAA0E;IAC1E,GAAG,EAAE,SAAS,CAAC;IACf,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;CACd;AAED,+DAA+D;AAC/D,MAAM,WAAW,uBAAuB;IACtC,uBAAuB;IACvB,GAAG,EAAE,aAAa,CAAC;IACnB,6BAA6B;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,mCAAmC;IACnC,IAAI,EAAE,cAAc,CAAC;IACrB,wCAAwC;IACxC,MAAM,EAAE,gBAAgB,CAAC;IACzB,sDAAsD;IACtD,GAAG,EAAE,iBAAiB,CAAC;IACvB,0DAA0D;IAC1D,OAAO,EAAE,iBAAiB,CAAC;IAC3B,6CAA6C;IAC7C,MAAM,EAAE,wBAAwB,CAAC;IACjC,qCAAqC;IACrC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACvC,2DAA2D;IAC3D,IAAI,EAAE,WAAW,CAAC;IAClB,iDAAiD;IACjD,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,kBAAkB,CA8EpB"}

package/lib/projection/ui/projectionBarSlots.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProjectionMapControls } from "./ProjectionMapControls.js";
+import { ProjectionMapMore } from "./ProjectionMapMore.js";
+import { ProjectionPairsControls } from "./ProjectionPairsControls.js";
+import { ProjectionPairsMore } from "./ProjectionPairsMore.js";
+import { ProjectionSharesControls } from "./ProjectionSharesControls.js";
+import { ProjectionSharesMore } from "./ProjectionSharesMore.js";
+import { ProjectionSpaceControls } from "./ProjectionSpaceControls.js";
+import { ProjectionSpaceMore } from "./ProjectionSpaceMore.js";
+import { ProjectionVariablesControls } from "./ProjectionVariablesControls.js";
+import { ProjectionVariablesMore } from "./ProjectionVariablesMore.js";
+import { projectionPairsInfo, projectionSharesInfo, projectionVariablesInfo, } from "./projectionTabInfo.js";
+/**
+ * The controls and the explanation of the tab showing.
+ *
+ * Each tab writes on the bar the one or two settings a reader of that tab
+ * actually looks at, and hands its whole panel of settings to the cog. What
+ * the rung decides is how much of the bar's settings is written — never which
+ * of them the reader is offered, because a control that has disappeared is a
+ * control the reader concludes the figure does not have.
+ * @param input - See {@link ProjectionBarSlotsInput}.
+ * @returns See {@link ProjectionBarSlots}.
+ */
+export function projectionBarSlots(input) {
+    const { tab, result, copy, models, map, readings, tier } = input;
+    const { options, groups, selected, width, onChange } = input;
+    const hasGroups = groups.entries.length > 0;
+    const colored = options.colorBy === 'group' && hasGroups;
+    const shared = { options, onChange, copy, groupLabel: groups.label };
+    if (tab === 'pairs') {
+        const pairs = {
+            ...shared,
+            hasGroups,
+            axisCount: result.axes.length,
+            width,
+        };
+        return {
+            end: _jsx(ProjectionPairsControls, { ...pairs, tier: tier }),
+            more: _jsx(ProjectionPairsMore, { ...pairs }),
+            info: projectionPairsInfo(copy, groups.label, colored),
+        };
+    }
+    if (tab === 'space') {
+        const space = {
+            ...shared,
+            result,
+            hasGroups,
+            selectedCount: selected.length,
+            onResetView: map.resetSpaceView,
+            onClearSelection: map.clearSelection,
+        };
+        return {
+            end: (_jsx(ProjectionSpaceControls, { ...space, readings: readings, tier: tier })),
+            more: _jsx(ProjectionSpaceMore, { ...space }),
+            info: map.spaceChrome.caption,
+        };
+    }
+    if (tab === 'variables') {
+        const variables = {
+            options,
+            copy,
+            onChange,
+            axisCount: result.axes.length,
+            canShowEffect: result.loadings?.mean !== undefined,
+            canRescale: result.loadings?.scales !== undefined,
+            canPickSample: selected.length === 1,
+            continuous: models.profiles?.axis.kind === 'continuous',
+        };
+        return {
+            end: _jsx(ProjectionVariablesControls, { ...variables, tier: tier }),
+            more: _jsx(ProjectionVariablesMore, { ...variables }),
+            info: projectionVariablesInfo(models.profiles, copy, models.sampleName),
+        };
+    }
+    if (tab === 'shares') {
+        const shares = { options, copy, onChange };
+        return {
+            end: _jsx(ProjectionSharesControls, { ...shares, tier: tier }),
+            more: _jsx(ProjectionSharesMore, { ...shares }),
+            info: projectionSharesInfo(models.shares, copy),
+        };
+    }
+    const forMap = {
+        ...shared,
+        result,
+        hasGroups,
+        selectedCount: selected.length,
+        onZoomToSelection: map.zoomToSelection,
+        onResetView: map.resetView,
+        onClearSelection: map.clearSelection,
+    };
+    return {
+        end: _jsx(ProjectionMapControls, { ...forMap, readings: readings, tier: tier }),
+        more: _jsx(ProjectionMapMore, { ...forMap }),
+        info: map.chrome.caption,
+    };
+}
+//# sourceMappingURL=projectionBarSlots.js.map

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

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

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

@@ -0,0 +1,102 @@
+/**
+ * Every rule the settings bar over the figure is drawn with.
+ *
+ * They sit apart from the rules the tabs themselves are drawn with because the
+ * bar is the viewer's own chrome rather than part of any figure: it is one row
+ * whatever the tab, and what changes with the figure's width is how much of
+ * itself it writes rather than what it holds. Every colour is a family token,
+ * so the bar on any site of the family is that site's own grey.
+ */
+import type { CSSProperties } from 'react';
+import type { OverlayMetrics } from '../../overlay/core/overlayMetrics.ts';
+/**
+ * The row the settings bar is laid into, which is one height for every tab.
+ *
+ * Two of the four tabs put a picker on the bar and two put a stepper, and a
+ * picker is the taller of the two whatever size the surface asks it for.
+ * Without a floor the bar would be six pixels shorter on the pair grid than on
+ * the map, and the whole figure under it would jump every time the reader
+ * moved between them — which is the one thing an embedded figure must never do
+ * to the page hosting it.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The row's rules.
+ */
+export declare function projectionBarRowStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The box the strip of views sits in.
+ *
+ * On every width but the narrowest it refuses to shrink, so a bar whose
+ * estimate was a few pixels out clips nothing and the views keep their words.
+ * At the last rung it becomes a scroller instead: a figure three hundred
+ * pixels wide cannot hold four names however short they are written, and a
+ * strip that scrolls is one the reader can still reach every view from, where
+ * a strip squeezed further is a row of initials nobody can read.
+ *
+ * Two things make that scroller read as deliberate rather than as a fault. Its
+ * ceiling is set by the caller from what the settings and the glyphs need, so
+ * the row can never push the cog off the edge of the figure; and its trailing
+ * edge fades, so a name cut in half says there is more to the right instead of
+ * looking clipped. The scrollbar itself is hidden — inside a thirty pixel bar
+ * it would take a fifth of the height and say nothing the fade does not.
+ * @param scrolls - Whether the strip is at the rung that lets it scroll.
+ * @param maxWidth - The most it may take, in pixels.
+ * @returns The box's rules.
+ */
+export declare function projectionTabTrackStyle(scrolls: boolean, maxWidth: number): CSSProperties;
+/**
+ * Where a scrolling strip has to sit for the view in force to be read.
+ *
+ * A view wider than the strip itself is shown from its start rather than its
+ * end: on the narrowest figures the name in force does not fit at all, and a
+ * reader shown its last three letters cannot tell which view they are on.
+ * @param left - The view's left edge inside the strip.
+ * @param right - Its right edge.
+ * @param scrollLeft - Where the strip is scrolled to now.
+ * @param clientWidth - How much of the strip is in sight.
+ * @returns Where it should be scrolled to; unchanged when the view is in sight.
+ */
+export declare function projectionTabScroll(left: number, right: number, scrollLeft: number, clientWidth: number): number;
+/**
+ * The settings at the far end of the bar.
+ *
+ * They never shrink. A flex row hands its shrinkage out in proportion to what
+ * each side asked for, which would take pixels off a chip that is already the
+ * shortest honest way to write the configuration — so the strip of views is
+ * the one thing that gives, and it gives by scrolling rather than by clipping.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The end's rules.
+ */
+export declare function projectionBarEndStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The figure's own explanation, once it has folded in behind the cog.
+ *
+ * On the narrowest figures the question mark is the glyph that goes, because
+ * the reader still has to be able to reach the settings and the second tier —
+ * so the paragraph it used to open is written at the head of the panel the cog
+ * opens instead. Not one word of it is dropped in the move.
+ *
+ * It brings its own room and its own hairline, because the panel under it
+ * brings both of those and the popover holding the two brings neither: a
+ * paragraph flush against the edge of a card reads as a rendering fault, and
+ * one running straight into a panel header reads as part of the header.
+ *
+ * The band and the measure are two rules rather than one. Capping the band
+ * itself would stop its hairline short of both edges of a panel wider than the
+ * cap, which reads as a mis-drawn line rather than as a division — so the band
+ * takes the panel's width and the sentence inside it is what is held to a
+ * readable measure.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The band's rules.
+ */
+export declare function projectionFoldedCaptionStyle(metrics: OverlayMetrics): CSSProperties;
+/**
+ * The sentence inside that band.
+ *
+ * Capped short of a wide panel, because a line running the full width of one
+ * is a line the eye loses the start of on the way back from the end of it.
+ */
+export declare const PROJECTION_CAPTION_TEXT_STYLE: {
+    readonly margin: 0;
+    readonly maxWidth: 280;
+};
+//# sourceMappingURL=projectionBarStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionBarStyles.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionBarStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAO5E;AAKD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,GACf,aAAa,CAaf;AAaD;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,MAAM,CAKR;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAO5E;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,cAAc,GACtB,aAAa,CASf;AAED;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B;;;CAGR,CAAC"}