react-cheminfo 0.10.0 → 0.12.0

package/src/projection/ui/projectionMapChrome.ts

@@ -8,10 +8,11 @@
  * honest as the controls around it change.
  */
 
+import { formatInteger } from '../../format/core/numbers.ts';
 import type { OverlayLegendEntry } from '../../overlay/ui/OverlayLegend.tsx';
 import type { EllipseSize } from '../../scatter/core/confidenceEllipse.ts';
+import { fillCopy } from '../core/fillCopy.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
-import { fillCopy } from '../core/projectionCopy.ts';
 import type { ProjectionMarker } from '../core/projectionResult.ts';
 import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
 
@@ -19,7 +20,7 @@ import { ellipseCoverageText } from './projectionEllipse.ts';
 import { UNGROUPED_INK } from './projectionMapModel.ts';
 
 /** What the map's chrome is built from. */
-export interface ProjectionMapChromeInput {
+interface ProjectionMapChromeInput {
   /** The words the map writes, already merged over the defaults. */
   copy: ProjectionCopy;
   /** The groups as the map colours them. */
@@ -38,6 +39,14 @@ export interface ProjectionMapChromeInput {
   fittedCount: number;
   /** How many rows there are in all. */
   total: number;
+  /**
+   * Which figure the chrome is for. The cloud says the same things about
+   * itself, in its own words and about its own geometry: a share is a wider
+   * shape in three dimensions than in two, so the sentence promising one has
+   * to be built from the dimension it will be read in.
+   * @default 'map'
+   */
+  figure?: 'map' | 'space';
 }
 
 /** The legend and the standing caption of one map. */
@@ -73,7 +82,7 @@ export function projectionMapChrome(
   input: ProjectionMapChromeInput,
 ): ProjectionMapChrome {
   const { copy, groups, colored, ellipse, showGroupMeans, markers } = input;
-  const { minimumPoints, fittedCount, total } = input;
+  const { minimumPoints, fittedCount, total, figure = 'map' } = input;
   const entries: OverlayLegendEntry[] = [];
   const skipped: string[] = [];
 
@@ -87,7 +96,7 @@ export function projectionMapChrome(
         color: entry.color,
         shape: 'dot',
         count: entry.count,
-        note: thin ? NOT_OUTLINED_NOTE : undefined,
+        note: thin ? copy.legend.notOutlined : undefined,
       });
     }
     if (showGroupMeans) {
@@ -105,7 +114,7 @@ export function projectionMapChrome(
   if (hollow) {
     entries.push({
       id: 'projected',
-      label: HOLLOW_LEGEND_LABEL,
+      label: copy.legend.projected,
       color: 'var(--text-muted)',
       shape: 'ring',
     });
@@ -114,7 +123,15 @@ export function projectionMapChrome(
   return {
     title: legendTitle(copy, groups, colored),
     entries,
-    caption: captionFor(copy, groups, colored, ellipse, skipped, hollow),
+    caption: captionFor(
+      copy,
+      groups,
+      colored,
+      ellipse,
+      skipped,
+      hollow,
+      figure,
+    ),
   };
 }
 
@@ -132,31 +149,28 @@ export function projectionSelectionSentence(
 ): string {
   if (count === 0) return copy.sentence.selectionNone;
   return fillCopy(copy.sentence.selection, {
-    count: count.toLocaleString(),
-    total: total.toLocaleString(),
+    count: formatInteger(count),
+    total: formatInteger(total),
   });
 }
 
-const NOT_OUTLINED_NOTE = 'Not outlined: too few samples.';
-const HOLLOW_LEGEND_LABEL = 'Hollow = added after the map was built';
-const HOLLOW_SENTENCE =
-  'The hollow dots were placed on the finished map afterwards, so one of them landing far out is a finding rather than a fault.';
-
 /**
- * What the legend says when colour stands for nothing.
+ * The sentence over the legend.
  *
- * The entries left are all shape, so the title names the shape channel: a
- * legend naming no encoding at all is the one fault this title exists to
- * prevent, and it is not fixed by leaving the title out.
+ * When colour stands for nothing the entries left are all shape, so the title
+ * names the shape channel: a legend naming no encoding at all is the one fault
+ * this title exists to prevent, and it is not fixed by leaving the title out.
+ * @param copy - The words the map writes.
+ * @param groups - The groups as the map colours them.
+ * @param colored - Whether colour stands for the group at all.
+ * @returns The title.
  */
-const SHAPE_LEGEND_TITLE = 'Shape = what each mark is.';
-
 function legendTitle(
   copy: ProjectionCopy,
   groups: ResolvedProjectionGroups,
   colored: boolean,
 ): string {
-  if (!colored || groups.entries.length === 0) return SHAPE_LEGEND_TITLE;
+  if (!colored || groups.entries.length === 0) return copy.legend.shapes;
   return fillCopy(copy.legend.mapNoEllipse, {
     groups: groups.label.toLowerCase(),
   });
@@ -169,22 +183,24 @@ function captionFor(
   ellipse: EllipseSize | null,
   skipped: readonly string[],
   hollow: boolean,
+  figure: 'map' | 'space',
 ): string {
-  let sentence = copy.intro.map;
+  const solid = figure === 'space';
+  let sentence = solid ? copy.intro.space : copy.intro.map;
   // What an outline actually holds is the one claim the figure makes that the
   // reader cannot check by looking, so it is said in full here rather than
   // squeezed onto the key floating over the dots.
   if (colored && ellipse !== null) {
-    sentence += ` ${fillCopy(copy.legend.map, {
+    sentence += ` ${fillCopy(solid ? copy.legend.space : copy.legend.map, {
       groups: groups.label.toLowerCase(),
-      coverage: ellipseCoverageText(ellipse),
+      coverage: ellipseCoverageText(ellipse, figure),
     })}`;
   }
   if (skipped.length > 0) {
     const names = skipped.join(', ');
     sentence += ` ${fillCopy(copy.sentence.skippedGroups, { names })}`;
   }
-  if (hollow) sentence += ` ${HOLLOW_SENTENCE}`;
+  if (hollow) sentence += ` ${copy.sentence.projected}`;
   return sentence;
 }
 

package/src/projection/ui/projectionMapModel.ts

@@ -16,10 +16,8 @@ import type { ChartViewport } from '../../chart/core/chartViewport.ts';
 import type { MatrixLike } from '../../chart/core/matrix.ts';
 import { emptiestCorner } from '../../overlay/core/emptiestCorner.ts';
 import type { OverlayCorner } from '../../overlay/core/overlayPlacement.ts';
-import type {
-  ScatterGroup,
-  ScatterMarker,
-} from '../../scatter/ui/ScatterPlot.tsx';
+import type { ScatterGroup } from '../../scatter/ui/scatterFigureProps.ts';
+import type { ScatterMarker } from '../../scatter/ui/scatterPlotProps.ts';
 import type {
   ProjectionMarker,
   ProjectionResult,

package/src/projection/ui/projectionMapView.ts

@@ -14,6 +14,8 @@ import { useCallback, useMemo, useState } from 'react';
 import type { ChartViewport } from '../../chart/core/chartViewport.ts';
 import { chartClampViewport } from '../../chart/core/chartViewport.ts';
 import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
+import type { OrbitCamera } from '../../scatter3d/core/orbitCamera.ts';
+import { DEFAULT_ORBIT_CAMERA } from '../../scatter3d/core/orbitCamera.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
 import type {
@@ -33,9 +35,10 @@ import {
   projectionMapDomain,
   projectionMapViewport,
 } from './projectionMapModel.ts';
+import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
 
 /** What {@link useProjectionMapView} needs. */
-export interface ProjectionMapViewInput {
+interface ProjectionMapViewInput {
   /** What the run produced, whatever produced it. */
   result: ProjectionResult;
   /** The words the viewer writes, already merged over the defaults. */
@@ -54,6 +57,18 @@ export interface ProjectionMapViewInput {
 export interface ProjectionMapView {
   /** The key's title, the key's entries, and the paragraph behind the `?`. */
   chrome: ProjectionMapChrome;
+  /** The same three for the cloud, which promises a different share. */
+  spaceChrome: ProjectionMapChrome;
+  /** Where the reader is standing in the cloud. */
+  camera: OrbitCamera;
+  /** Turn the box. */
+  setCamera: (camera: OrbitCamera) => void;
+  /** How far in the cloud is zoomed. */
+  zoom: number;
+  /** Zoom the box. */
+  setZoom: (zoom: number) => void;
+  /** Put the box back where it was first seen, at the size it was first drawn. */
+  resetSpaceView: () => void;
   /** The frame the map is drawn in, or `null` when it is drawn around every sample. */
   viewport: ChartViewport | null;
   /** Draw the map in another frame, which is what the wheel does. */
@@ -84,6 +99,8 @@ export function useProjectionMapView(
 
   const [zoom, setZoom] = useState<AxisFrame | null>(null);
   const [report, setReport] = useState<SelectionReport | null>(null);
+  const [camera, setCamera] = useState<OrbitCamera>(DEFAULT_ORBIT_CAMERA);
+  const [cloudZoom, setCloudZoom] = useState(1);
 
   // A frame belongs to the pair of axes it was drawn on. Carrying it onto
   // another pair would show the reader a corner of a picture they never
@@ -117,6 +134,11 @@ export function useProjectionMapView(
     setViewport(null);
   }, [setViewport]);
 
+  const resetSpaceView = useCallback(() => {
+    setCamera(DEFAULT_ORBIT_CAMERA);
+    setCloudZoom(1);
+  }, []);
+
   const colored = colorBy === 'group' && groups.entries.length > 0;
   const chrome = useMemo(
     () =>
@@ -143,6 +165,23 @@ export function useProjectionMapView(
     ],
   );
 
+  const spaceChrome = useMemo(
+    () =>
+      projectionMapChrome({
+        copy,
+        groups,
+        colored,
+        ellipse: colored ? ellipse : null,
+        minimumPoints: MINIMUM_SHELL_POINTS,
+        showGroupMeans: false,
+        markers: NO_MARKERS,
+        fittedCount: fittedCount ?? scores.rows,
+        total: scores.rows,
+        figure: 'space',
+      }),
+    [copy, groups, colored, ellipse, fittedCount, scores],
+  );
+
   const settle = useCallback(
     (change: SelectionChange) => {
       setReport((previous) => ({
@@ -164,8 +203,14 @@ export function useProjectionMapView(
 
   return {
     chrome,
+    spaceChrome,
     viewport,
     setViewport,
+    camera,
+    setCamera,
+    zoom: cloudZoom,
+    setZoom: setCloudZoom,
+    resetSpaceView,
     report,
     settle,
     zoomToSelection,

package/src/projection/ui/projectionPairsCeiling.ts

@@ -14,7 +14,7 @@ import {
 } from '../../scatter/ui/scatterMatrixLayout.ts';
 
 /** How few and how many components the grid may be asked to lay out. */
-export interface ProjectionPairsCeiling {
+interface ProjectionPairsCeiling {
   /** The fewest, which is the smallest grid worth drawing. */
   min: number;
   /** The most, once the run and the width have both had their say. */

package/src/projection/ui/projectionSpaceModel.ts

@@ -0,0 +1,14 @@
+/**
+ * The one number the cloud sets differently from the map.
+ */
+
+/**
+ * How many samples a group needs before it is given a shell.
+ *
+ * One more than the map asks for, and for the same reason the map asks for
+ * three: a shape fitted to the fewest points that can define it describes those
+ * points and not the group they came from. Three samples lie on a plane
+ * however they are arranged, so three is the number at which a shell is
+ * arithmetic rather than a finding.
+ */
+export const MINIMUM_SHELL_POINTS = 4;

package/src/projection/ui/projectionTabInfo.ts

@@ -2,19 +2,18 @@
  * What each tab answers when the reader presses the question mark.
  *
  * The viewer is meant to be embedded in somebody else's page, so the paragraph
- * that used to stand under every figure now waits behind one glyph in the bar:
- * a reader who wants it opens it, and everybody else pays no vertical space
- * for it. Not one word of it was dropped in the move — the sentences are the
- * reason a reader who has never met a component can read the figure at all —
- * so they are built here, where what a tab claims about its own numbers can be
- * checked without rendering a chart.
+ * that explains each figure waits behind one glyph in the bar: a reader who
+ * wants it opens it, and everybody else pays no vertical space for it. It is
+ * written in full — the sentences are the reason a reader who has never met a
+ * component can read the figure at all — and built here, where what a tab
+ * claims about its own numbers can be checked without rendering a chart.
  */
 
 import { chartShare } from '../../chart/core/chartLabels.ts';
 import type { ExplainedShares } from '../core/explainedShares.ts';
+import { fillCopy } from '../core/fillCopy.ts';
 import type { LoadingProfiles } from '../core/loadingProfiles.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
-import { fillCopy } from '../core/projectionCopy.ts';
 
 import { legendTitle, variablesCaption } from './projectionVariablesWords.ts';
 
@@ -88,7 +87,7 @@ export function projectionSharesInfo(
  * @param copy - The words the viewer writes.
  * @returns The sentence.
  */
-export function projectionSharesSentence(
+function projectionSharesSentence(
   shares: ExplainedShares,
   copy: ProjectionCopy,
 ): string {

package/src/projection/ui/projectionTabModels.ts

@@ -16,16 +16,19 @@ import type { ExplainedShares } from '../core/explainedShares.ts';
 import { explainedShares } from '../core/explainedShares.ts';
 import type { LoadingProfiles } from '../core/loadingProfiles.ts';
 import { loadingProfiles } from '../core/loadingProfiles.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
 import type { ProjectionSamples } from '../core/projectionSamples.ts';
 
 /** What {@link useProjectionModels} needs. */
-export interface ProjectionModelsInput {
+interface ProjectionModelsInput {
   /** What the run produced, whatever produced it. */
   result: ProjectionResult;
   /** Who the rows are, for naming the sample a panel rebuilds. */
   samples: ProjectionSamples;
+  /** The words the viewer writes, whose weight label the weights panels read. */
+  copy: ProjectionCopy;
   /** Every option, already made safe against the result. */
   options: ProjectionOptions;
   /** The selected rows, as indices into the score matrix. */
@@ -57,7 +60,8 @@ export interface ProjectionModels {
 export function useProjectionModels(
   input: ProjectionModelsInput,
 ): ProjectionModels {
-  const { result, samples, options, selected } = input;
+  const { result, samples, copy, options, selected } = input;
+  const weightLabel = copy.words.weight;
   const { loadings, axes, scores } = result;
 
   const one = selected.length === 1 ? (selected[0] ?? -1) : -1;
@@ -72,10 +76,11 @@ export function useProjectionModels(
       spread: options.spread,
       sharedScale: options.sharedScale,
       order: options.variableOrder,
+      weightLabel,
       sampleScores:
         one < 0 ? undefined : rowScores(scores, one, options.variablesCount),
     });
-  }, [loadings, axes, scores, options, one]);
+  }, [loadings, axes, scores, options, one, weightLabel]);
 
   const shares = useMemo(
     () => explainedShares(axes, { target: options.shareTarget }),

package/src/projection/ui/projectionVariablesModel.ts

@@ -7,7 +7,8 @@
  */
 
 import type { ChartSeries } from '../../chart/ui/TrackedLineChart.tsx';
-import type { ChartStickSeries } from '../../chart/ui/TrackedStickChart.tsx';
+import type { ChartStickSeries } from '../../chart/ui/stickChartModel.ts';
+import { formatTrimmed } from '../../format/core/numbers.ts';
 import type {
   LoadingProfile,
   LoadingProfiles,
@@ -30,14 +31,14 @@ export interface ProjectionVariableTrack {
   series: ReadonlyArray<{
     /** Which component, from 0. */
     axis: number;
-    /** What it is called, e.g. `PC 2`. */
+    /** What it is called, e.g. `PC2`. */
     name: string;
     /** The colour it carries on every tab. */
     color: string;
     /** Its value at this measurement, in whatever the current view draws. */
     value: number;
   }>;
-  /** The line the tab writes, e.g. `1650 cm⁻¹ · PC 2 weight +0.081`. */
+  /** The line the tab writes, e.g. `1650 cm⁻¹ · PC2 weight +0.081`. */
   readout: string;
 }
 
@@ -204,7 +205,7 @@ export function ticksOfSlots(built: LoadingProfiles | null): string[] {
  */
 export function writeValue(value: number): string {
   if (!Number.isFinite(value)) return '';
-  return String(Math.round(value * DECIMALS) / DECIMALS);
+  return formatTrimmed(value, READOUT_DECIMALS);
 }
 
 function slotLabels(
@@ -228,4 +229,4 @@ function signed(value: number, format: (value: number) => string): string {
   return `${sign}${format(Math.abs(value))}`;
 }
 
-const DECIMALS = 1000;
+const READOUT_DECIMALS = 3;

package/src/projection/ui/projectionVariablesWords.ts

@@ -9,9 +9,9 @@
  */
 
 import type { OverlayLegendEntry } from '../../overlay/ui/OverlayLegend.tsx';
+import { fillCopy } from '../core/fillCopy.ts';
 import type { LoadingProfiles } from '../core/loadingProfiles.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
-import { fillCopy } from '../core/projectionCopy.ts';
 import type { VariableAxis } from '../core/variableAxis.ts';
 
 /**

package/src/projection/ui/projectionViewChoices.ts

@@ -36,23 +36,24 @@ export function projectionViewChoices(
 ): ReadonlyArray<OverlayOption<ProjectionVariablesView>> {
   const { canShowEffect, canRescale, canPickSample } = available;
   const { view } = copy.bar;
+  const { reason } = copy;
 
   return [
     {
       value: 'effect',
       label: view.effect,
-      ...whenOff(canShowEffect, NO_AVERAGE),
+      ...whenOff(canShowEffect, reason.noAverage),
     },
     { value: 'weights', label: view.weights },
     {
       value: 'rescaled',
       label: view.rescaled,
-      ...whenOff(canRescale, NO_SCALES),
+      ...whenOff(canRescale, reason.noScales),
     },
     {
       value: 'sample',
       label: view.sample,
-      ...whenOff(canPickSample, NO_SAMPLE),
+      ...whenOff(canPickSample, reason.noSample),
     },
   ];
 }
@@ -69,9 +70,3 @@ function whenOff(
 ): { disabled?: true; title?: string } {
   return available ? {} : { disabled: true, title: reason };
 }
-
-/** Why a view is greyed, written as the thing the reader would have to change. */
-const NO_AVERAGE =
-  'Only when the run reported an average sample to push along the component.';
-const NO_SCALES = 'Only when the model divided each measurement by its spread.';
-const NO_SAMPLE = 'Select exactly one sample on the map first.';

package/src/projection/ui/projectionViewerProps.ts

@@ -13,8 +13,28 @@ import type { ProjectionResult } from '../core/projectionResult.ts';
 import type { ProjectionSamples } from '../core/projectionSamples.ts';
 import type { ProjectionTab } from '../core/projectionTabs.ts';
 
-import type { ProjectionVariableTrack } from './ProjectionVariablesTab.tsx';
+import type { ProjectionViewer } from './ProjectionViewer.tsx';
 import type { ProjectionSelection } from './projectionSelection.ts';
+import type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
+
+/** A sample the reader opened, and where they opened it. */
+export interface ProjectionSampleOpen {
+  /** Its name, from `samples.ids` — the currency every other callback uses. */
+  id: string;
+  /** Its row in the score matrix, for a caller that would rather index. */
+  index: number;
+  /** Where the reader clicked, in pixels from the figure's left edge. */
+  x: number;
+  /** Where they clicked, in pixels from its top edge. */
+  y: number;
+  /**
+   * Where they clicked in the window, which is what an editor floating over
+   * the page is anchored to.
+   */
+  clientX: number;
+  /** Where they clicked in the window. */
+  clientY: number;
+}
 
 /** What {@link ProjectionViewer} needs. */
 export interface ProjectionViewerProps {
@@ -88,6 +108,22 @@ export interface ProjectionViewerProps {
    * @default undefined
    */
   onHoverSample?: (id: string | null) => void;
+  /**
+   * Called when the reader double-clicks a sample, on the map or in the cloud.
+   *
+   * The viewer says what a sample *is*; this is the door to what the page
+   * around it can do with one — open its record, edit the class it was given,
+   * show the spectrum behind the dot. The viewer does nothing itself, so a
+   * page that does not pass it has a double click that only ever resets the
+   * frame.
+   *
+   * The sample is selected first, because a double click is also two clicks.
+   * Holding every single click for the double-click interval to avoid that
+   * would make the commonest gesture in the figure feel slow, which is a worse
+   * trade than a redundant selection on the rarest one.
+   * @default undefined
+   */
+  onSampleDoubleClick?: (sample: ProjectionSampleOpen) => void;
   /**
    * What the figure is showing. Present, the caller owns every option, which
    * is how a site persists them or writes them into a share link.

package/src/projection/ui/projectionWordChoices.ts

@@ -0,0 +1,66 @@
+/**
+ * The settings whose choices are a few words, built from the copy.
+ *
+ * One list per setting, read by the value menu on the bar and by the control
+ * in the panel behind the cog, so the two can never offer different words for
+ * the same thing and a site overriding one word sees it in both places.
+ */
+
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
+import type { CloudGesture } from '../../scatter3d/core/cloudGesture.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+
+/**
+ * What a plain drag does to the selection.
+ * @param copy - The words the viewer writes.
+ * @returns The three choices, in the order they are offered.
+ */
+export function projectionSelectModeChoices(
+  copy: ProjectionCopy,
+): ReadonlyArray<OverlayOption<ScatterSelectionMode>> {
+  return wordChoices(copy.choice.selectMode, SELECT_MODES);
+}
+
+/**
+ * What a plain drag over the cloud does.
+ * @param copy - The words the viewer writes.
+ * @returns The two choices, in the order they are offered.
+ */
+export function projectionCloudGestureChoices(
+  copy: ProjectionCopy,
+): ReadonlyArray<OverlayOption<CloudGesture>> {
+  return wordChoices(copy.choice.cloudGesture, CLOUD_GESTURES);
+}
+
+/**
+ * The orders the bars of a "what differs" panel can be drawn in.
+ * @param copy - The words the viewer writes.
+ * @returns The two choices, in the order they are offered.
+ */
+export function projectionVariableOrderChoices(
+  copy: ProjectionCopy,
+): ReadonlyArray<OverlayOption<ProjectionOptions['variableOrder']>> {
+  return wordChoices(copy.choice.variableOrder, VARIABLE_ORDERS);
+}
+
+function wordChoices<TValue extends string>(
+  words: Readonly<Record<TValue, string>>,
+  order: readonly TValue[],
+): Array<OverlayOption<TValue>> {
+  const choices: Array<OverlayOption<TValue>> = [];
+  for (const value of order) choices.push({ value, label: words[value] });
+  return choices;
+}
+
+const SELECT_MODES: readonly ScatterSelectionMode[] = [
+  'replace',
+  'add',
+  'remove',
+];
+const CLOUD_GESTURES: readonly CloudGesture[] = ['turn', 'select'];
+const VARIABLE_ORDERS: ReadonlyArray<ProjectionOptions['variableOrder']> = [
+  'original',
+  'strongest',
+];

package/src/projection/ui/useProjectionState.ts

@@ -3,11 +3,11 @@ import { useCallback, useMemo, useState } from 'react';
 import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
 import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
-import { resolveProjectionOptions } from '../core/projectionOptions.ts';
 import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
 import { resolveProjectionGroups } from '../core/projectionSamples.ts';
 import type { ProjectionTab } from '../core/projectionTabs.ts';
 import { projectionTabs } from '../core/projectionTabs.ts';
+import { resolveProjectionOptions } from '../core/resolveProjectionOptions.ts';
 
 import type { ProjectionSelection } from './projectionSelection.ts';
 import {
@@ -25,7 +25,7 @@ import type { ProjectionViewerProps } from './projectionViewerProps.ts';
  * eleven fields, so a default documented on the component is the default the
  * hook actually applies and the two cannot drift apart.
  */
-export type ProjectionStateOptions = Pick<
+type ProjectionStateOptions = Pick<
   ProjectionViewerProps,
   | 'result'
   | 'samples'

package/src/router/core/address.ts

@@ -1,5 +1,5 @@
 /** An address cut into the three parts a router reads separately. */
-export interface AddressParts {
+interface AddressParts {
   /** Path of the address, `/` when it carries none. */
   path: string;
   /** Query string, without its leading `?`. */
@@ -47,14 +47,26 @@ export function splitPath(path: string): string[] {
 }
 
 /**
- * A path in the one shape the lookups compare: a leading slash, no trailing
- * one, its segments decoded, and neither query nor fragment.
- * @param path - Path of an address.
- * @returns The same address, normalized.
+ * Drop the trailing slashes, so `/about/` and `/about` are one page and an
+ * origin written `https://host/surge//` composes one address rather than one
+ * with an empty segment in it.
+ * @param value - A path or an origin.
+ * @returns It, without the trailing slashes `/` itself keeps.
  */
-export function normalizePath(path: string): string {
-  const segments = splitPath(splitAddress(path).path);
-  return segments.length === 0 ? '/' : `/${segments.join('/')}`;
+export function trimTrailingSlash(value: string): string {
+  const trimmed = value.replace(TRAILING_SLASHES, '');
+  return trimmed === '' && value !== '' ? '/' : trimmed;
+}
+
+/**
+ * An address cut at its first `?` or `#`, for a lookup or a canonical link that
+ * must not depend on the configuration a link carries.
+ * @param address - A path or an absolute address.
+ * @returns Everything before the query string and the fragment.
+ */
+export function withoutQueryOrFragment(address: string): string {
+  const cut = address.search(QUERY_OR_FRAGMENT);
+  return cut === -1 ? address : address.slice(0, cut);
 }
 
 /**
@@ -72,3 +84,7 @@ export function safeDecode(value: string): string {
     return value;
   }
 }
+
+const TRAILING_SLASHES = /\/+$/;
+
+const QUERY_OR_FRAGMENT = /[?#]/;