@jbrowse/core 5.0.0-beta.8 → 5.0.0-beta.9

package/esm/ui/index.js

@@ -1,4 +1,4 @@
-export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorNeutralRead, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, createJBrowseBaseTheme, createJBrowseTheme, createJBrowseThemeFromArgs, defaultThemes, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './theme.js';
+export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, createJBrowseBaseTheme, createJBrowseTheme, createJBrowseThemeFromArgs, defaultThemes, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './theme.js';
 export { default as BaseExportSvgDialog } from './BaseExportSvgDialog.js';
 export { default as ExportSvgDialog } from './ExportSvgDialog.js';
 export { useExportSvgPreference } from './useExportSvgPreference.js';
@@ -6,7 +6,8 @@ export { LogoFull, Logomark } from './Logo.js';
 export { default as AssemblySelector } from './AssemblySelector.js';
 export { useAssemblySelection } from './useAssemblySelection.js';
 export { useRecentLocations } from './useRecentLocations.js';
-export { RefNameAutocompleteEndAdornment, adornmentReservePx, getInputWidth, default as RefNameAutocomplete, } from './RefNameAutocomplete/index.js';
+export { RefNameAutocompleteEndAdornment, default as RefNameAutocomplete, } from './RefNameAutocomplete/index.js';
+export { adornmentReservePx, getInputWidth, } from './RefNameAutocomplete/util.js';
 export { default as CascadingMenu } from './CascadingMenu.js';
 export { default as CascadingMenuButton } from './CascadingMenuButton.js';
 export { default as ContextMenu } from './ContextMenu.js';
@@ -56,10 +57,11 @@ export { default as SettingsChangesTable } from './SettingsChangesTable.js';
 export { default as ActionLink } from './ActionLink.js';
 export { default as ExternalLink } from './ExternalLink.js';
 export { default as SanitizedHTML } from './SanitizedHTML.js';
-// BaseTooltip is deliberately NOT re-exported here: it reaches @floating-ui
-// (~266KB), and this barrel is imported by eager plugin entries, so the
-// re-export alone held that dependency on the startup path. Every consumer
-// deep-imports '@jbrowse/core/ui/BaseTooltip' instead.
+// The eager BaseTooltip reaches @floating-ui (~266KB), and this barrel is
+// imported by eager plugin entries, so the barrel serves the lazy wrapper:
+// published apollo reads `BaseTooltip` off the served ui namespace. In-tree
+// consumers deep-import '@jbrowse/core/ui/BaseTooltip'.
+export { default as BaseTooltip } from './LazyBaseTooltip.js';
 export { default as PluggableComponent } from './PluggableComponent.js';
 export { default as PluggableComponents } from './PluggableComponents.js';
 export { default as PluggableElements } from './PluggableElements.js';
@@ -72,7 +74,7 @@ export { launchTargetsMenuItem } from './launchTargetsMenuItem.js';
 export { default as Crosshairs } from './Crosshairs.js';
 export { hoverBoxStyle } from './hoverBoxStyle.js';
 export { useMouseState, useMouseTracking } from './useMouseTracking.js';
-export const VIEW_HEADER_HEIGHT = 28;
+export { VIEW_HEADER_HEIGHT } from './viewHeaderHeight.js';
 export { LEGEND_ROW_HEIGHT, LEGEND_SVG_GUTTER_WIDTH, LEGEND_SWATCH, default as SvgColorLegend, } from './SvgColorLegend.js';
 export { measureLegendText } from './measureLegendText.js';
 export { LegendSwatchGlyph } from './LegendSwatchGlyph.js';

package/esm/ui/launchViewMenu.js

@@ -34,9 +34,9 @@ export function pushIntoSubMenu(items, label, item) {
 // `rubberBandLaunchMenuItems()` on the linear genome view — because there the
 // grouping is the model's, not each contributor's, to do.
 //
-// Keeps its name while the label loses a word: this one is pinned by
-// `abiBaseline.json`, so a published plugin bundle reads it off the host at
-// module scope and a rename is `undefined` inside an already-shipped UMD.
+// Keeps its name while the label loses a word: `@jbrowse/core/ui` serves it, so
+// a published plugin bundle reads it off the host at module scope and a rename
+// is `undefined` inside an already-shipped UMD.
 export function pushLaunchViewMenuItem(items, item) {
     pushIntoSubMenu(items, LAUNCH_LABEL, item);
 }

package/esm/ui/legendSpec.d.ts

@@ -29,7 +29,9 @@ export declare function legendSwatches(item: LegendItem): LegendSwatch[];
 export interface LegendSection {
     id: string;
     title?: string;
+    note?: string;
     items: LegendItem[];
+    focusesRows?: boolean;
 }
 export interface LegendSpec {
     title?: string;

package/esm/ui/legendSpec.js

@@ -25,6 +25,9 @@ export function legendEntries(spec) {
             ...(titled && section.title !== undefined
                 ? [{ key: `${section.id}-title`, label: section.title }]
                 : []),
+            ...(section.note === undefined
+                ? []
+                : [{ key: `${section.id}-note`, label: section.note }]),
             ...section.items.map((item, idx) => ({
                 key: `${section.id}-${idx}`,
                 label: item.label,

package/esm/ui/palette.d.ts

@@ -126,7 +126,6 @@ export declare const colorPairRL = "#0099bb";
 export declare const colorPairLL = "#4d9a4d";
 /** #color alignments-pair-orientation | RR (← ←) | Both mates on the reverse strand */
 export declare const colorPairRR = "#5555bb";
-export declare const colorNeutralRead = "#c8c8c8";
 /**
  * #color alignments-pair-orientation | Inter-chromosomal | Mate on another chromosome
  * #color alignments-insert-size | Inter-chromosomal | Mate on another chromosome

package/esm/ui/palette.js

@@ -242,30 +242,6 @@ export const colorPairRL = '#0099bb';
 export const colorPairLL = '#4d9a4d';
 /** #color alignments-pair-orientation | RR (← ←) | Both mates on the reverse strand */
 export const colorPairRR = '#5555bb';
-// Was `colorNostrand`, which named the one thing it essentially never paints. A
-// SAM record's strand is DEFINED from the reverse flag inside the adapter's
-// feature class (`SamRecordFeature.strand`), so it is always +1 or -1, and a
-// PAF/synteny block carries a real strand too — `strandCategory`'s `noStrand`
-// branch is the defensive third case of a `-1 | 0 | 1` return, not a category
-// an alignments track produces. The name survived because the two places that
-// DO reach 0 are strand questions of a different kind: a sashimi junction whose
-// spliced reads carry no XS/TS/ts tag (ordinary unstranded RNA-seq), and a
-// strand-valued read tag that a read simply lacks.
-//
-// What it actually paints, in volume, is neither — `nonSplit` ("Unsplit read",
-// the majority of a pileup under the split-read scheme) and `mapqUnavailable`
-// (MAPQ 255). What unites all five is that the scheme's question has no
-// informative answer for this read, so the value is the neutral it falls back
-// to rather than a statement about strand.
-//
-// It is NOT the only such neutral: `colorPairLR` #d3d3d3 is the baseline for
-// `normalInsert`, `noTagValue` and `plain`, and the two sit dE 3.95 apart —
-// close enough that `readTagColors.ts` moved its untagged-read case off this one
-// and onto that one, because only that one darkens under the dark theme. Whether
-// two neutrals are wanted at all is the open question here; this rename does not
-// settle it, and the dark-mode half is
-// `agent-docs/ideas/dark-theme-palette-gaps.md`.
-export const colorNeutralRead = '#c8c8c8';
 /**
  * #color alignments-pair-orientation | Inter-chromosomal | Mate on another chromosome
  * #color alignments-insert-size | Inter-chromosomal | Mate on another chromosome
@@ -497,9 +473,9 @@ const skip = '#009a8a';
  * which is the same lie louder — on a foldback the arms are opposite-strand
  * red and blue, and darkening whichever drew last reads as extra-inverted.
  *
- * So the value has one job: read as NEITHER segment. Every categorized grey in
- * the alignments vocabulary is light (`colorPairLR` #d3d3d3, `colorNeutralRead`
- * #c8c8c8, and `colorPairLRDark` #8a8a8a on the dark theme), so this sits past
+ * So the value has one job: read as NEITHER segment. The alignments vocabulary's
+ * one neutral grey is light (`colorPairLR` #d3d3d3, and `colorPairLRDark`
+ * #8a8a8a on the dark theme), so this sits past
  * the dark end of them in light mode and past the light end in dark mode,
  * which is also why it inverts rather than dimming: on a dark track background
  * a charcoal span is the background showing through, i.e. a gap where the mark

package/esm/ui/replaceViewAction.d.ts

@@ -6,7 +6,7 @@ import type { SubmitFormProps } from './SubmitForm.tsx';
  * the launching view occupies.
  *
  * Every launcher anchored on what a view is already showing — the synteny
- * launches, "read vs ref", the derivative reconstruction — wants exactly this
+ * launches, "read vs ref" — wants exactly this
  * pair, and each had written the same four lines around
  * {@link ReplaceCurrentViewButton}: the guard, the button, its disabled state,
  * and the renaming of Submit that only makes sense once there are two buttons.

package/esm/ui/replaceViewAction.js

@@ -7,7 +7,7 @@ import ReplaceCurrentViewButton from './ReplaceCurrentViewButton.js';
  * the launching view occupies.
  *
  * Every launcher anchored on what a view is already showing — the synteny
- * launches, "read vs ref", the derivative reconstruction — wants exactly this
+ * launches, "read vs ref" — wants exactly this
  * pair, and each had written the same four lines around
  * {@link ReplaceCurrentViewButton}: the guard, the button, its disabled state,
  * and the renaming of Submit that only makes sense once there are two buttons.

package/esm/ui/theme.d.ts

@@ -58,7 +58,7 @@ declare module '@mui/material/styles' {
         alignmentFill?: Partial<AlignmentFill>;
     }
 }
-export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorNeutralRead, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.ts';
+export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.ts';
 export type { JBrowsePalette } from './palette.ts';
 /**
  * The structurally-serializable inputs that fully describe a session's active

package/esm/ui/theme.js

@@ -1,4 +1,4 @@
-import { createTheme } from '@mui/material';
+import { createTheme } from '@mui/material/styles';
 import { deepMerge } from '../util/deepMerge.js';
 import { palettePresets, resolvePalette } from './palette.js';
 import { DEFAULT_FONT_SIZE, DEFAULT_SPACING } from './styleTheme.js';
@@ -9,7 +9,7 @@ import { DEFAULT_FONT_SIZE, DEFAULT_SPACING } from './styleTheme.js';
 // Static domain colors and the theme presets are re-exported from palette.ts so
 // existing `@jbrowse/core/ui` imports are unaffected. Import them from
 // `@jbrowse/core/ui/palette` to get them without pulling in Material UI.
-export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorNeutralRead, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.js';
+export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.js';
 // The display names and MUI component overrides layered on top of each palette
 // preset. The colors come from palette.ts, so a preset's palette is stated once
 // and this map is the Material UI half of it.
@@ -68,6 +68,10 @@ const baseThemeOptions = {
         fontSize: DEFAULT_FONT_SIZE,
     },
     spacing: DEFAULT_SPACING,
+    // an animation makes every popover, dialog and hover trail the input
+    motion: {
+        reducedMotion: 'always',
+    },
     components: {
         MuiTooltip: {
             styleOverrides: {
@@ -90,7 +94,6 @@ const baseThemeOptions = {
                 disableGutters: true,
                 slotProps: {
                     transition: {
-                        timeout: 150,
                         unmountOnExit: true,
                     },
                 },
@@ -166,16 +169,6 @@ const baseThemeOptions = {
                 size: 'small',
             },
         },
-        MuiPopover: {
-            defaultProps: {
-                transitionDuration: 0,
-            },
-        },
-        MuiMenu: {
-            defaultProps: {
-                transitionDuration: 0,
-            },
-        },
         MuiMenuItem: {
             defaultProps: {
                 dense: true,
@@ -229,33 +222,6 @@ const baseThemeOptions = {
                 size: 'small',
             },
         },
-        // Speed up ripple animations for snappier feel (default is 550ms)
-        // See https://mui.com/material-ui/api/button-base/
-        // and https://github.com/mui/material-ui/blob/master/packages/mui-material/src/ButtonBase/TouchRipple.js
-        //
-        // The click ripple only: a *focus* ripple is a different animation on the
-        // same two elements — childPulsate, which runs `infinite` — so a blanket
-        // 50ms turns MUI's 2500ms breath into a 20Hz strobe that never stops. It
-        // shows up on any focus-visible button, and Chrome hands one out unasked:
-        // it re-evaluates :focus-visible on the already-focused element after any
-        // keystroke, and the focus event that a browser-tab switch fires on the way
-        // back is what makes MUI act on it. So these select the enter and leaving
-        // keyframes by name and let the pulsate keep its own duration.
-        //
-        // Both selectors also outrank TouchRipple's own rules on specificity, which
-        // is what `!important` was here for.
-        MuiButtonBase: {
-            styleOverrides: {
-                root: {
-                    '& .MuiTouchRipple-ripple.MuiTouchRipple-rippleVisible:not(.MuiTouchRipple-ripplePulsate)': {
-                        animationDuration: '50ms',
-                    },
-                    '& .MuiTouchRipple-child.MuiTouchRipple-childLeaving': {
-                        animationDuration: '50ms',
-                    },
-                },
-            },
-        },
     },
 };
 export function createJBrowseBaseTheme(theme = {}) {

package/esm/ui/viewHeaderHeight.d.ts

@@ -0,0 +1 @@
+export declare const VIEW_HEADER_HEIGHT = 28;

package/esm/ui/viewHeaderHeight.js

@@ -0,0 +1 @@
+export const VIEW_HEADER_HEIGHT = 28;

package/esm/util/Base1DUtils.d.ts

@@ -43,7 +43,7 @@ export interface ViewLayout {
 export declare function moveTo(self: MoveSnap & {
     zoomTo: (arg: number) => number;
     scrollTo: (arg: number) => void;
-}, start?: BpOffset, end?: BpOffset): void;
+}, start?: BpOffset, end?: BpOffset, minBpPerPx?: number): void;
 /**
  * Pure version of moveTo: returns the {bpPerPx, offsetPx} that moveTo would
  * apply, without mutating any model. Assumes no bpPerPx clamping (i.e.

package/esm/util/Base1DUtils.js

@@ -28,10 +28,10 @@ function computeScrollPos(self, start, bpPerPx, extraBp) {
     return Math.round((cumulativeBp(self.displayedRegions, start.index, start.offset) - extraBp) /
         bpPerPx);
 }
-export function moveTo(self, start, end) {
+export function moveTo(self, start, end, minBpPerPx = 0) {
     if (start && end) {
         const targetBpPerPx = computeTargetBpPerPx(self, start, end);
-        const newBpPerPx = self.zoomTo(targetBpPerPx);
+        const newBpPerPx = self.zoomTo(Math.max(targetBpPerPx, minBpPerPx));
         const extraBp = targetBpPerPx < newBpPerPx
             ? ((newBpPerPx - targetBpPerPx) * self.width) / 2
             : 0;

package/esm/util/SvgCanvas.d.ts

@@ -1,19 +1,21 @@
 /**
- * Restart clip-id numbering for a new export document.
+ * Run `render` as one document's clip-id numbering run, starting at 0, then put
+ * the counter back.
  *
- * Without it the counter runs for the lifetime of the process, so an export is
- * numbered from wherever the previous one stopped and the same view exported
- * twice differs in every clip id. That is the churn `svgNodeId` was written to
- * get rid of, arriving by a second route: diffing two saved SVGs shows changes
- * that aren't real, and `jest -t` on any export test but the first fails its
- * checked-in snapshot with a diff that is nothing but renumbering.
+ * Starting at 0 is what makes the same view export to the same bytes: a counter
+ * left running numbers each export from wherever the previous one stopped, so
+ * diffing two saved SVGs shows changes that aren't real and `jest -t` on any
+ * export test but the first fails its snapshot on renumbering alone.
  *
- * Called by `wrapSvgExport`, and safe there and only there: the
- * `renderToStaticMarkup` it wraps is synchronous, so every `PaintLayer` in the
- * document draws before any other export can begin. Anything that resets on a
- * boundary an `await` can cross would let two exports share a numbering run.
+ * Putting it back is what keeps a file export from renumbering the page: live
+ * figures (`useViewSvgFigure`) mint from the same counter into one DOM, where
+ * ids must not repeat, so a reset that stuck would let the next figure reuse an
+ * id another figure still points at.
+ *
+ * `render` must be synchronous — an `await` inside it would let two documents
+ * share a numbering run.
  */
-export declare function resetSvgClipIds(): void;
+export declare function withFreshSvgClipIds<T>(render: () => T): T;
 export declare class SvgCanvas {
     private parts;
     private pathData;
@@ -36,6 +38,7 @@ export declare class SvgCanvas {
     private e;
     private f;
     private get axisAligned();
+    private get lengthScale();
     private transformPoint;
     private transformSize;
     private originMatrixAttr;
@@ -72,7 +75,6 @@ export declare class SvgCanvas {
     fillText(text: string, x: number, y: number): void;
     strokeText(text: string, x: number, y: number): void;
     drawImage(..._args: unknown[]): void;
-    putImageData(..._args: unknown[]): void;
     clip(..._args: unknown[]): void;
     measureText(text: string): {
         width: number;

package/esm/util/SvgCanvas.js

@@ -1,4 +1,5 @@
 import { measureText as measureTextWidth } from './measureText.js';
+import { splitPaintAlpha } from './svgColorProps.js';
 const XML_ESCAPES = {
     '&': '&',
     '<': '&lt;',
@@ -29,14 +30,16 @@ function parseFont(font) {
 // SVG-compatible attributes. The default sans-serif family is left off so
 // feature labels match the raw-JSX <text> elements (ruler, scalebar, etc.),
 // which set no family either; an explicitly-set family is still emitted.
-function fontAttrs(font) {
+function fontAttrs(font, scale) {
     const { prefix, size, family } = parseFont(font);
     const tokens = prefix.split(/\s+/).filter(Boolean);
     const weight = tokens.find(t => fontWeightTokens.has(t) || /^\d{1,4}$/.test(t));
     const style = tokens.find(t => fontStyleTokens.has(t));
     return [
-        ` font-size="${size}"`,
-        family === '' || family === 'sans-serif' ? '' : ` font-family="${family}"`,
+        ` font-size="${Number(size) * scale}"`,
+        family === '' || family === 'sans-serif'
+            ? ''
+            : ` font-family="${escapeXml(family)}"`,
         weight ? ` font-weight="${weight}"` : '',
         style ? ` font-style="${style}"` : '',
     ].join('');
@@ -47,25 +50,34 @@ function fontAttrs(font) {
 // mint `svgcanvas-clip-0`, whereupon `url(#svgcanvas-clip-0)` resolves to the
 // first and every later layer is clipped to some other layer's rect.
 //
-// Document-global, not process-global: `resetSvgClipIds` below.
+// Document-global, not process-global: `withFreshSvgClipIds` below.
 let clipIdCounter = 0;
 /**
- * Restart clip-id numbering for a new export document.
+ * Run `render` as one document's clip-id numbering run, starting at 0, then put
+ * the counter back.
  *
- * Without it the counter runs for the lifetime of the process, so an export is
- * numbered from wherever the previous one stopped and the same view exported
- * twice differs in every clip id. That is the churn `svgNodeId` was written to
- * get rid of, arriving by a second route: diffing two saved SVGs shows changes
- * that aren't real, and `jest -t` on any export test but the first fails its
- * checked-in snapshot with a diff that is nothing but renumbering.
+ * Starting at 0 is what makes the same view export to the same bytes: a counter
+ * left running numbers each export from wherever the previous one stopped, so
+ * diffing two saved SVGs shows changes that aren't real and `jest -t` on any
+ * export test but the first fails its snapshot on renumbering alone.
  *
- * Called by `wrapSvgExport`, and safe there and only there: the
- * `renderToStaticMarkup` it wraps is synchronous, so every `PaintLayer` in the
- * document draws before any other export can begin. Anything that resets on a
- * boundary an `await` can cross would let two exports share a numbering run.
+ * Putting it back is what keeps a file export from renumbering the page: live
+ * figures (`useViewSvgFigure`) mint from the same counter into one DOM, where
+ * ids must not repeat, so a reset that stuck would let the next figure reuse an
+ * id another figure still points at.
+ *
+ * `render` must be synchronous — an `await` inside it would let two documents
+ * share a numbering run.
  */
-export function resetSvgClipIds() {
+export function withFreshSvgClipIds(render) {
+    const saved = clipIdCounter;
     clipIdCounter = 0;
+    try {
+        return render();
+    }
+    finally {
+        clipIdCounter = saved;
+    }
 }
 export class SvgCanvas {
     parts = [];
@@ -115,6 +127,13 @@ export class SvgCanvas {
     get axisAligned() {
         return this.b === 0 && this.c === 0;
     }
+    // How much the CTM scales a length, for what SVG draws at a size of its own
+    // rather than through transformed coordinates: stroke widths, dashes and
+    // font sizes. Exact for a uniform scale; the geometric mean otherwise, where
+    // a Canvas2D pen would draw an ellipse no stroke-width can state.
+    get lengthScale() {
+        return Math.sqrt(Math.abs(this.a * this.d - this.b * this.c));
+    }
     transformPoint(x, y) {
         return [this.a * x + this.c * y + this.e, this.b * x + this.d * y + this.f];
     }
@@ -170,23 +189,20 @@ export class SvgCanvas {
                 ? 'end'
                 : 'start';
     }
-    // Split rgba(r,g,b,a) into separate color + opacity SVG attributes for
-    // compatibility with SVG 1.1 consumers like Inkscape that don't honor the
-    // alpha component of CSS3 rgba() fill/stroke values. Whitespace-tolerant so
-    // spaced forms (MUI alpha(), colord toRgbString → "rgba(255, 177, 29, 0.12)")
-    // are separated too, not just the compact "rgba(255,177,29,0.12)".
     paintAttr(name, style) {
         const s = `${style}`;
-        const m = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/.exec(s);
-        if (m) {
-            const a = Number.parseFloat(m[4]);
-            const base = `${name}="rgb(${m[1]},${m[2]},${m[3]})"`;
-            return a < 1 ? `${base} ${name}-opacity="${a}"` : base;
+        const split = splitPaintAlpha(s);
+        if (!split) {
+            return `${name}="${s}"`;
         }
-        return `${name}="${s}"`;
+        const base = `${name}="${split.color}"`;
+        return split.opacity < 1
+            ? `${base} ${name}-opacity="${split.opacity}"`
+            : base;
     }
     strokeAttrs() {
-        let attrs = ` ${this.paintAttr('stroke', this.strokeStyle)} stroke-width="${this.lineWidth}"`;
+        const scale = this.lengthScale;
+        let attrs = ` ${this.paintAttr('stroke', this.strokeStyle)} stroke-width="${this.lineWidth * scale}"`;
         if (this.lineCap !== 'butt') {
             attrs += ` stroke-linecap="${this.lineCap}"`;
         }
@@ -194,7 +210,7 @@ export class SvgCanvas {
             attrs += ` stroke-linejoin="${this.lineJoin}"`;
         }
         if (this.lineDash.length > 0) {
-            attrs += ` stroke-dasharray="${this.lineDash.join(',')}"`;
+            attrs += ` stroke-dasharray="${this.lineDash.map(d => d * scale).join(',')}"`;
         }
         return attrs;
     }
@@ -358,34 +374,40 @@ export class SvgCanvas {
         this.ellipse(x, y, radius, radius, 0, startAngle, endAngle, counterclockwise);
     }
     ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = false) {
-        const [cx, cy] = this.transformPoint(x, y);
         const [rx, ry] = this.transformSize(radiusX, radiusY);
-        const sweep = counterclockwise ? 0 : 1;
-        const diff = endAngle - startAngle;
-        const deg = (rotation * 180) / Math.PI;
+        // A mirrored CTM turns a clockwise sweep counterclockwise on the page, and
+        // its rotation the other way.
+        const mirrored = this.a * this.d < 0;
+        const sweep = counterclockwise === mirrored ? 1 : 0;
+        const deg = ((mirrored ? -rotation : rotation) * 180) / Math.PI;
         // Canvas measures the angle on the UNROTATED ellipse and then spins the
         // whole thing, so the endpoint is the parametric point rotated — not the
-        // point at (angle + rotation).
+        // point at (angle + rotation) — and then placed by the CTM.
         const at = (angle) => {
-            const px = rx * Math.cos(angle);
-            const py = ry * Math.sin(angle);
-            return [
-                cx + px * Math.cos(rotation) - py * Math.sin(rotation),
-                cy + px * Math.sin(rotation) + py * Math.cos(rotation),
-            ];
+            const px = radiusX * Math.cos(angle);
+            const py = radiusY * Math.sin(angle);
+            return this.transformPoint(x + px * Math.cos(rotation) - py * Math.sin(rotation), y + px * Math.sin(rotation) + py * Math.cos(rotation));
         };
-        if (Math.abs(diff) >= 2 * Math.PI) {
+        // The angle actually swept, as Canvas2D resolves it: in the stated
+        // direction, a whole turn once it reaches 2π, and otherwise wrapped into
+        // [0, 2π) — so a clockwise sweep from 0.5π back to 0 goes the long way.
+        const TAU = 2 * Math.PI;
+        const signed = counterclockwise
+            ? startAngle - endAngle
+            : endAngle - startAngle;
+        const swept = signed >= TAU ? TAU : ((signed % TAU) + TAU) % TAU;
+        const [sx, sy] = at(startAngle);
+        if (swept === TAU) {
             // A closed ellipse has coincident endpoints, which an SVG arc command
-            // degenerates on — so go round in two halves.
-            const [mx, my] = at(startAngle);
-            const [halfX, halfY] = at(startAngle + Math.PI);
-            this.pathData += `M${mx},${my}A${rx},${ry} ${deg} 1 ${sweep} ${halfX},${halfY}A${rx},${ry} ${deg} 1 ${sweep} ${mx},${my}`;
+            // degenerates on — so go round in two halves, as a subpath of its own.
+            const half = counterclockwise ? -Math.PI : Math.PI;
+            const [hx, hy] = at(startAngle + half);
+            this.pathData += `M${sx},${sy}A${rx},${ry} ${deg} 1 ${sweep} ${hx},${hy}A${rx},${ry} ${deg} 1 ${sweep} ${sx},${sy}`;
             return;
         }
-        const [sx, sy2] = at(startAngle);
         const [ex, ey] = at(endAngle);
-        const largeArc = Math.abs(diff) > Math.PI ? 1 : 0;
-        this.pathData += !this.pathData ? `M${sx},${sy2}` : `L${sx},${sy2}`;
+        const largeArc = swept > Math.PI ? 1 : 0;
+        this.pathData += !this.pathData ? `M${sx},${sy}` : `L${sx},${sy}`;
         this.pathData += `A${rx},${ry} ${deg} ${largeArc} ${sweep} ${ex},${ey}`;
     }
     bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
@@ -441,19 +463,16 @@ export class SvgCanvas {
     fillText(text, x, y) {
         const [tx, ty] = this.transformPoint(x, y);
         const escaped = escapeXml(text);
-        this.emit(`<text x="${tx}" y="${ty}" ${this.paintAttr('fill', this.fillStyle)}${fontAttrs(this.font)} text-anchor="${this.textAnchor()}" dominant-baseline="${this.dominantBaseline()}">${escaped}</text>`);
+        this.emit(`<text x="${tx}" y="${ty}" ${this.paintAttr('fill', this.fillStyle)}${fontAttrs(this.font, this.lengthScale)} text-anchor="${this.textAnchor()}" dominant-baseline="${this.dominantBaseline()}">${escaped}</text>`);
     }
     strokeText(text, x, y) {
         const [tx, ty] = this.transformPoint(x, y);
         const escaped = escapeXml(text);
-        this.emit(`<text x="${tx}" y="${ty}" fill="none"${this.strokeAttrs()}${fontAttrs(this.font)} text-anchor="${this.textAnchor()}" dominant-baseline="${this.dominantBaseline()}">${escaped}</text>`);
+        this.emit(`<text x="${tx}" y="${ty}" fill="none"${this.strokeAttrs()}${fontAttrs(this.font, this.lengthScale)} text-anchor="${this.textAnchor()}" dominant-baseline="${this.dominantBaseline()}">${escaped}</text>`);
     }
     drawImage(..._args) {
         // no-op: raster images can't be meaningfully serialized to SVG paths
     }
-    putImageData(..._args) {
-        // no-op
-    }
     clip(..._args) {
         // Use the current path as a clipPath, then open a `<g clip-path>`
         // group that subsequent draws will land inside. The group is closed by

package/esm/util/aborting.d.ts

@@ -20,4 +20,43 @@ export declare function handleFetchError(exception: unknown, isCurrent: () => bo
  * @param exception -
  */
 export declare function isAbortException(exception: unknown): boolean;
+/**
+ * Throw an AbortError if `signal` has aborted. A `signal.aborted` read, so it
+ * is cheap enough for the body of a loop; place it after any await and in any
+ * per-item callback a reader hands you.
+ */
+export declare function checkAbortSignal(signal?: AbortSignal): void;
+/**
+ * Run an awaited stage under `signal`: checked before it starts, and again
+ * once it settles. The check after is the one that gets left out when the two
+ * are placed by hand — a stop landing during a long await otherwise goes
+ * unseen until the next stage.
+ */
+export declare function withAbortCheck<T>(signal: AbortSignal | undefined, fn: () => T | Promise<T>): Promise<T>;
+export interface AbortBreakpoint {
+    /** True once every ~50 ms of wall time, otherwise a counter bump. */
+    due(): boolean;
+    /** Yield a task so a posted abort can land, then throw if it did. */
+    yield(): Promise<void>;
+}
+/**
+ * Cancellation for a loop that can run for seconds without awaiting — a
+ * whole-genome projection, a matrix fill. A `signal.aborted` read inside such a
+ * loop never changes, because the abort is a posted message; the loop has to
+ * give the event loop a turn now and then. A loop bounded by the byte gate or
+ * one region's features finishes before this would matter and only checks.
+ *
+ *     const breakpoint = createAbortBreakpoint(signal)
+ *     for (const row of rows) {
+ *       if (breakpoint.due()) {
+ *         await breakpoint.yield()
+ *       }
+ *       …
+ *     }
+ *
+ * Two calls rather than one because an `await` on a non-promise still costs a
+ * microtask, about 60 ns against 2 ns for the `due()` read, and a loop over
+ * every read in a pileup notices the difference.
+ */
+export declare function createAbortBreakpoint(signal?: AbortSignal): AbortBreakpoint;
 export {};