@jbrowse/render-core 5.0.0-beta.13 → 5.0.0-beta.14

package/esm/OverlayCanvas.d.ts

@@ -21,9 +21,10 @@
  * `inset: 0` therefore drew everything at twice its x on a retina display and
  * dropped the right half off the edge, while looking entirely plausible.
  */
-export default function OverlayCanvas({ width, height, draw, 'data-testid': testId, }: {
+declare const OverlayCanvas: ({ width, height, draw, 'data-testid': testId, }: {
     width: number;
     height: number;
     draw: (ctx: CanvasRenderingContext2D) => void;
     'data-testid'?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default OverlayCanvas;

package/esm/OverlayCanvas.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
+import { observer } from 'mobx-react';
 import { getPreparedCanvas2D } from './canvas2dUtils.js';
 /**
  * An absolutely-positioned, non-interactive Canvas2D layer that composites over
@@ -24,7 +25,7 @@ import { getPreparedCanvas2D } from './canvas2dUtils.js';
  * `inset: 0` therefore drew everything at twice its x on a retina display and
  * dropped the right half off the edge, while looking entirely plausible.
  */
-export default function OverlayCanvas({ width, height, draw, 'data-testid': testId, }) {
+const OverlayCanvas = observer(function OverlayCanvas({ width, height, draw, 'data-testid': testId, }) {
     const canvasRef = useRef(null);
     useEffect(() => {
         const ctx = getPreparedCanvas2D(canvasRef.current, width, height);
@@ -40,4 +41,5 @@ export default function OverlayCanvas({ width, height, draw, 'data-testid': test
             height,
             pointerEvents: 'none',
         } }));
-}
+});
+export default OverlayCanvas;

package/esm/RenderCanvas.d.ts

@@ -42,7 +42,7 @@ export interface RenderCanvasHandle {
  * shared canvas repaints unconditionally, so `canvasDrawn` says nothing
  * (ADR-009's scope clause) — so `drawn` is passed at the call site.
  */
-export default function RenderCanvas({ handle, drawn, phase, ...canvasProps }: {
+declare const RenderCanvas: ({ handle, drawn, phase, ...canvasProps }: {
     handle: RenderCanvasHandle;
     /**
      * Whether this canvas holds finished content — each view's own `settled`, the
@@ -59,7 +59,7 @@ export default function RenderCanvas({ handle, drawn, phase, ...canvasProps }: {
     drawn: boolean;
     /**
      * The surface's own mutually-exclusive state, published as
-     * `data-display-phase` — the same attribute `DisplayStatusChrome` gives every
+     * `data-display-phase` — the same attribute `DisplayChrome` gives every
      * LGV display, and the same split of meaning: `drawn` above is FINISHED
      * CONTENT, this is still WORKING, and an error separates them.
      *
@@ -73,4 +73,5 @@ export default function RenderCanvas({ handle, drawn, phase, ...canvasProps }: {
      * display's phase; `comparativeSurfacePhase` is where that ranking lives.
      */
     phase: DisplayStatusPhase;
-} & Omit<ComponentPropsWithoutRef<'canvas'>, 'ref'>): import("react").JSX.Element;
+} & Omit<ComponentPropsWithoutRef<'canvas'>, 'ref'>) => import("react").JSX.Element;
+export default RenderCanvas;

package/esm/RenderCanvas.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 /**
  * The `<canvas>` for a rendering backend owned **outside** `DisplayChrome` — the
  * sanctioned drop-to-primitive path for the non-LGV views (dotplot, the synteny
@@ -33,6 +34,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * shared canvas repaints unconditionally, so `canvasDrawn` says nothing
  * (ADR-009's scope clause) — so `drawn` is passed at the call site.
  */
-export default function RenderCanvas({ handle, drawn, phase, ...canvasProps }) {
+const RenderCanvas = observer(function RenderCanvas({ handle, drawn, phase, ...canvasProps }) {
     return (_jsx("canvas", { "data-display-drawn": drawn, "data-display-phase": phase, ref: handle.canvasRef, ...canvasProps }, handle.canvasKey));
-}
+});
+export default RenderCanvas;

package/esm/ScrollLockedOverlay.d.ts

@@ -17,7 +17,7 @@ import React from 'react';
  * is none so mouse events fall through to the canvas; interactive children
  * re-enable `pointerEvents:auto`.
  */
-export declare function ScrollLockedOverlay({ scrollTop, viewportHeight, contentHeight, children, }: {
+export declare const ScrollLockedOverlay: ({ scrollTop, viewportHeight, contentHeight, children, }: {
     /** the model's scroll offset — the same value the GPU shader paints from */
     scrollTop: number;
     /** the visible viewport height (clips overflow) */
@@ -25,4 +25,4 @@ export declare function ScrollLockedOverlay({ scrollTop, viewportHeight, content
     /** the full scrollable content height (the children's coordinate space) */
     contentHeight: number;
     children: React.ReactNode;
-}): React.JSX.Element;
+}) => React.JSX.Element;

package/esm/ScrollLockedOverlay.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { observer } from 'mobx-react';
 /**
  * DOM overlay layer for a display that scrolls a fixed GPU canvas virtually (a
  * `VerticalScrollbar` overlay + `useVirtualScrollWheel`, everything positioned
@@ -18,7 +19,7 @@ import React from 'react';
  * is none so mouse events fall through to the canvas; interactive children
  * re-enable `pointerEvents:auto`.
  */
-export function ScrollLockedOverlay({ scrollTop, viewportHeight, contentHeight, children, }) {
+export const ScrollLockedOverlay = observer(function ScrollLockedOverlay({ scrollTop, viewportHeight, contentHeight, children, }) {
     return (_jsx("div", { style: {
             position: 'absolute',
             top: 0,
@@ -39,4 +40,4 @@ export function ScrollLockedOverlay({ scrollTop, viewportHeight, contentHeight,
                 height: contentHeight,
                 transform: `translateY(${-scrollTop}px)`,
             }, children: children }) }));
-}
+});

package/esm/blockClipUtils.d.ts

@@ -8,12 +8,12 @@ export interface BlockClipResult {
     pxW: number;
     pxH: number;
     /**
-     * The vertical scale the backing store ACTUALLY got — `hal.resize`'s answer,
-     * not `getDpr()`. Carried through so a renderer scissoring bands out of one
-     * canvas (`devicePxBand`) has the ratio the clip was built with rather than
-     * reconstructing it as `pxH / canvasHeight`, which is a division by a height
-     * that can be 0.
+     * The scale the backing store ACTUALLY got on each axis — `hal.resize`'s
+     * answer, not `getDpr()`, which a clamped or browser-shrunk canvas departs
+     * from. A renderer working in device px reads these rather than dividing
+     * `pxH` by a height that can be 0.
      */
+    scaleX: number;
     scaleY: number;
     bpStartHi: number;
     bpStartLo: number;

package/esm/blockClipUtils.js

@@ -43,9 +43,9 @@ export function writeBpRangeUniforms(uniformF32, offsetF32, clip, reversed) {
     uniformF32[offsetF32 + 2] = len;
 }
 export function clipBlock(block, canvasWidth, canvasHeight, 
-// The scale the backing store actually got, per axis (`hal.resize`), NOT
-// `getDpr()`: only one axis clamps at a time, so past `MAX_CANVAS_DIM_PX` a
-// canvas is 2x on one axis and less on the other.
+// The scale the backing store actually got, per axis (`hal.resize`). A
+// capped canvas or a browser-shrunk WebGL drawing buffer falls below
+// `getDpr()` on either axis, and the two axes can differ.
 scale) {
     const clamp = clampBlockScissor(block.screenStartPx, block.screenEndPx, canvasWidth);
     if (!clamp) {
@@ -90,6 +90,7 @@ scale) {
         pxX,
         pxW,
         pxH,
+        scaleX: scale.x,
         scaleY: scale.y,
         bpStartHi,
         bpStartLo,

package/esm/canvas2dUtils.d.ts

@@ -17,40 +17,34 @@ export declare const MAX_DPR = 2;
  * geometry at a different scale than the canvas it lands on.
  *
  * Two places legitimately want something other than this and should keep saying
- * so explicitly: `createSvgRasterCanvas` pins 2x because export goes to a file
- * rather than a screen, and the analytics / error-report paths read the raw
+ * so explicitly: `createSvgRasterCanvas` rasterizes at 2x because export goes
+ * to a file, and the analytics / error-report paths read the raw
  * global because they are reporting the device, not drawing on it.
  */
 export declare function getDpr(): number;
 export declare const MAX_CANVAS_DIM_PX = 8192;
 /**
  * The largest CSS-px extent a canvas may take on one axis before its backing
- * store (`× dpr`) crosses the ceiling above.
+ * store (`× dpr`) reaches {@link MAX_CANVAS_DIM_PX}.
  *
  * For displays that size a canvas to their **content** rather than to a
- * viewport — a row stack that grows with the row count, so nothing downstream
- * bounds it. Past this the backing store stops tracking the CSS size
- * (`syncCanvasSize` clamps it) while scissor/viewport rects are still derived
- * as `cssPx * dpr`, so WebGPU rejects an out-of-bounds rect and blanks the
- * frame, WebGL clamps and paints at the wrong scale, and the Canvas2D fallback
- * stretches its top slice over the whole track.
+ * viewport, a row stack that grows with the row count. Past it the canvas still
+ * draws, at a reduced resolution on that axis (`syncCanvasSize` reports the
+ * scale it got), so the cap is about keeping the rows legible: MAF scrolls its
+ * overflow into a viewport, and multi-row divides the cap across its rows.
  *
  * A function, not a constant: `getDpr()` follows the window, so a display
  * reading this into a computed re-derives it when the window moves to another
- * screen. Where the cap lands is the caller's — MAF scrolls its overflow into a
- * viewport, the multi-row painting divides the cap across its rows so they thin
- * out and all stay on screen.
+ * screen.
  */
 export declare function maxCanvasCssPx(): number;
 /**
  * The ratio a canvas's backing store ACTUALLY has to its CSS box, per axis.
  *
- * Equal to `getDpr()` on both axes until `backingPx` clamps, and below it after
- * — which is the whole point: every device-px rect a renderer hands the GPU has
- * to be derived from this rather than from the true dpr, or a clamped canvas
- * gets a viewport taller than the target it draws into and the frame is
- * rejected outright. See ARCHITECTURAL_LIMITS.md §"A canvas past
- * MAX_CANVAS_DIM_PX renders wrong, not smaller".
+ * `getDpr()` on both axes until `backingSize` caps the store, and below it
+ * after, so every device-px rect a renderer hands the GPU derives from this.
+ * See ARCHITECTURAL_LIMITS.md §"A canvas past
+ * the backing-store caps draws at reduced resolution".
  */
 export interface CanvasScale {
     x: number;
@@ -78,9 +72,9 @@ export declare function devicePxSpan(cssStart: number, cssEnd: number, dpr: numb
  * band clamped to zero height is the caller's cue to skip its passes.
  *
  * `dpr` is the scale the canvas ACTUALLY got (`hal.resize`'s return), not
- * `getDpr()`: the two part company once the backing store clamps at
- * `MAX_CANVAS_DIM_PX`, and past that a band built from the true ratio is taller
- * than the target.
+ * `getDpr()`: a backing store capped at `MAX_CANVAS_DIM_PX`, or a WebGL drawing
+ * buffer the browser shrank, falls below it, and a band built from the true
+ * ratio is then taller than the target.
  */
 export declare function devicePxBand(top: number, height: number, dpr: number, bufH: number): {
     top: number;

package/esm/canvas2dUtils.js

@@ -17,8 +17,8 @@ export const MAX_DPR = 2;
  * geometry at a different scale than the canvas it lands on.
  *
  * Two places legitimately want something other than this and should keep saying
- * so explicitly: `createSvgRasterCanvas` pins 2x because export goes to a file
- * rather than a screen, and the analytics / error-report paths read the raw
+ * so explicitly: `createSvgRasterCanvas` rasterizes at 2x because export goes
+ * to a file, and the analytics / error-report paths read the raw
  * global because they are reporting the device, not drawing on it.
  */
 export function getDpr() {
@@ -26,62 +26,36 @@ export function getDpr() {
         ? 1
         : Math.min(devicePixelRatio, MAX_DPR);
 }
-// Conservative ceiling (physical/backing px) for a single canvas dimension.
-// Browsers throw `InvalidStateError: Canvas exceeds max size` once the backing
-// store crosses their (browser/GPU-specific) limit — Firefox caps the area,
-// WebGL caps a texture at MAX_TEXTURE_SIZE (>= 8192 on essentially all real
-// hardware), Safari/Chrome cap the dimension. 8192 is under all of these, so a
-// canvas whose backing store stays within it on both axes can't throw. Callers
-// that can produce arbitrarily tall/wide content (e.g. the MAF rows canvas with
-// hundreds of species) bound their CSS size against `MAX_CANVAS_DIM_PX / dpr`.
+// Ceiling on one backing-store dimension. Browsers throw `InvalidStateError:
+// Canvas exceeds max size` past their own limit, and a WebGL implementation
+// caps a texture at MAX_TEXTURE_SIZE, at least 8192 on essentially all real
+// hardware. 8192 is under all of them.
 export const MAX_CANVAS_DIM_PX = 8192;
 /**
  * The largest CSS-px extent a canvas may take on one axis before its backing
- * store (`× dpr`) crosses the ceiling above.
+ * store (`× dpr`) reaches {@link MAX_CANVAS_DIM_PX}.
  *
  * For displays that size a canvas to their **content** rather than to a
- * viewport — a row stack that grows with the row count, so nothing downstream
- * bounds it. Past this the backing store stops tracking the CSS size
- * (`syncCanvasSize` clamps it) while scissor/viewport rects are still derived
- * as `cssPx * dpr`, so WebGPU rejects an out-of-bounds rect and blanks the
- * frame, WebGL clamps and paints at the wrong scale, and the Canvas2D fallback
- * stretches its top slice over the whole track.
+ * viewport, a row stack that grows with the row count. Past it the canvas still
+ * draws, at a reduced resolution on that axis (`syncCanvasSize` reports the
+ * scale it got), so the cap is about keeping the rows legible: MAF scrolls its
+ * overflow into a viewport, and multi-row divides the cap across its rows.
  *
  * A function, not a constant: `getDpr()` follows the window, so a display
  * reading this into a computed re-derives it when the window moves to another
- * screen. Where the cap lands is the caller's — MAF scrolls its overflow into a
- * viewport, the multi-row painting divides the cap across its rows so they thin
- * out and all stay on screen.
+ * screen.
  */
 export function maxCanvasCssPx() {
     return MAX_CANVAS_DIM_PX / getDpr();
 }
-let warnedCanvasClamp = false;
-// CSS px → backing-store px, clamped to the safe ceiling (warning once if the
-// clamp engages).
-//
-// This is a last-resort guard against `InvalidStateError: Canvas exceeds max
-// size`, NOT a graceful degradation: once clamped the backing store stops
-// tracking the CSS size, so the browser *stretches* the smaller image over the
-// larger element, and every GPU scissor/viewport rect — computed as
-// `cssPx * getDpr()` by `clipBlock` and friends, against the true dpr rather
-// than the effective one — can now exceed the backing store (WebGL clamps
-// silently, WebGPU rejects the rect and blanks the frame). So model-level
-// sizing must keep canvases within the limit on its own: any display sizing a
-// canvas to its *content* rather than its viewport bounds itself with
-// `maxCanvasCssPx()` above. Registered in
-// agent-docs/reference/ARCHITECTURAL_LIMITS.md with the effective-dpr fix that
-// retires it.
-function backingPx(cssSize, dpr, axis) {
-    const value = Math.round(cssSize * dpr);
-    if (value > MAX_CANVAS_DIM_PX) {
-        if (!warnedCanvasClamp) {
-            warnedCanvasClamp = true;
-            console.warn(`Canvas ${axis} ${value}px exceeds the safe limit ${MAX_CANVAS_DIM_PX}px and was clamped`);
-        }
-        return MAX_CANVAS_DIM_PX;
-    }
-    return value;
+// CSS px → backing-store px, each axis under MAX_CANVAS_DIM_PX. Every device-px
+// rect derives from the scale this leaves (`syncCanvasSize`, `prepareCanvas`),
+// so a capped canvas draws whole at a lower resolution on that axis.
+function backingSize(cssWidth, cssHeight, dpr) {
+    return {
+        width: Math.min(Math.round(cssWidth * dpr), MAX_CANVAS_DIM_PX),
+        height: Math.min(Math.round(cssHeight * dpr), MAX_CANVAS_DIM_PX),
+    };
 }
 function effectiveScale(cssPx, backing) {
     // A zero-width or zero-height canvas has no ratio to report; the true dpr is
@@ -93,9 +67,7 @@ function effectiveScale(cssPx, backing) {
 // ended up with — both HAL impls and any 2D-canvas backend use this so the dpr
 // math and style-vs-attribute logic live in one place.
 export function syncCanvasSize(canvas, width, height) {
-    const dpr = getDpr();
-    const pw = backingPx(width, dpr, 'width');
-    const ph = backingPx(height, dpr, 'height');
+    const { width: pw, height: ph } = backingSize(width, height, getDpr());
     const changed = canvas.width !== pw || canvas.height !== ph;
     if (changed) {
         canvas.width = pw;
@@ -120,9 +92,7 @@ export function syncCanvasSize(canvas, width, height) {
     };
 }
 export function prepareCanvas(canvas, ctx, canvasWidth, canvasHeight) {
-    const dpr = getDpr();
-    const bufW = backingPx(canvasWidth, dpr, 'width');
-    const bufH = backingPx(canvasHeight, dpr, 'height');
+    const { width: bufW, height: bufH } = backingSize(canvasWidth, canvasHeight, getDpr());
     if (canvas.width !== bufW || canvas.height !== bufH) {
         canvas.width = bufW;
         canvas.height = bufH;
@@ -175,9 +145,9 @@ export function devicePxSpan(cssStart, cssEnd, dpr) {
  * band clamped to zero height is the caller's cue to skip its passes.
  *
  * `dpr` is the scale the canvas ACTUALLY got (`hal.resize`'s return), not
- * `getDpr()`: the two part company once the backing store clamps at
- * `MAX_CANVAS_DIM_PX`, and past that a band built from the true ratio is taller
- * than the target.
+ * `getDpr()`: a backing store capped at `MAX_CANVAS_DIM_PX`, or a WebGL drawing
+ * buffer the browser shrank, falls below it, and a band built from the true
+ * ratio is then taller than the target.
  */
 export function devicePxBand(top, height, dpr, bufH) {
     const span = devicePxSpan(top, top + height, dpr);

package/esm/colorRampLut.d.ts

@@ -1,13 +1,13 @@
 import type { GpuHal } from './hal/index.ts';
 /**
- * Entries in a colour-ramp LUT, and so the width of the texture every ramp
+ * Entries in a color-ramp LUT, and so the width of the texture every ramp
  * consumer binds. Off the shader that samples it: `rampColor` divides by this
  * to land entry i on its own texel center, so a table built to a different
  * number is a half-shade of drift at every entry.
  */
 export declare const COLOR_RAMP_LUT_ENTRIES = 256;
 /**
- * Upload a 256-entry RGBA colour-ramp LUT as each named pass's 256×1 texture —
+ * Upload a 256-entry RGBA color-ramp LUT as each named pass's 256×1 texture —
  * the runtime half of the shared ramp mechanism whose shader half is
  * `shaders/colorRampLut.slang`. Called by `createMarkBackend` alone now, for
  * every mark declaring a `texture`: hic, LD's two shader variants and wiggle

package/esm/colorRampLut.js

@@ -1,13 +1,13 @@
 import { RAMP_LUT_ENTRIES } from './shaders/colorRampLut.generated.js';
 /**
- * Entries in a colour-ramp LUT, and so the width of the texture every ramp
+ * Entries in a color-ramp LUT, and so the width of the texture every ramp
  * consumer binds. Off the shader that samples it: `rampColor` divides by this
  * to land entry i on its own texel center, so a table built to a different
  * number is a half-shade of drift at every entry.
  */
 export const COLOR_RAMP_LUT_ENTRIES = RAMP_LUT_ENTRIES;
 /**
- * Upload a 256-entry RGBA colour-ramp LUT as each named pass's 256×1 texture —
+ * Upload a 256-entry RGBA color-ramp LUT as each named pass's 256×1 texture —
  * the runtime half of the shared ramp mechanism whose shader half is
  * `shaders/colorRampLut.slang`. Called by `createMarkBackend` alone now, for
  * every mark declaring a `texture`: hic, LD's two shader variants and wiggle

package/esm/coverageBand.d.ts

@@ -55,7 +55,6 @@ export declare const COVERAGE_CLIP_PASS: InstancePass<Pick<CoverageBandBuffers,
 export declare const COVERAGE_SNP_PASS: InstancePass<Pick<CoverageBandBuffers, 'snpPackedBuffer'>>;
 export declare const COVERAGE_MOD_PASS: InstancePass<CoverageBandModBuffer>;
 export declare const COVERAGE_INTERBASE_PASS: InstancePass<Pick<CoverageBandBuffers, 'interbasePackedBuffer'>>;
-export declare const COVERAGE_INDICATOR_PASS: InstancePass<Pick<CoverageBandBuffers, 'indicatorPackedBuffer'>>;
 /** Palette slots the band paints by name, each a packed ABGR u32. */
 export interface CoverageBandColors {
     coverage: number;

package/esm/coverageBand.js

@@ -1,6 +1,5 @@
 import * as coverageBarShader from './shaders/coverageBar.generated.js';
 import * as coverageClipShader from './shaders/coverageClip.generated.js';
-import * as coverageIndicatorShader from './shaders/coverageIndicator.generated.js';
 import * as coverageInterbaseShader from './shaders/coverageInterbase.generated.js';
 import * as coverageModShader from './shaders/coverageMod.generated.js';
 import * as coverageSnpShader from './shaders/coverageSnp.generated.js';
@@ -72,10 +71,6 @@ export const COVERAGE_INTERBASE_PASS = {
     ...slangPass({ id: 'interbase', mod: coverageInterbaseShader }),
     pack: data => data.interbasePackedBuffer,
 };
-export const COVERAGE_INDICATOR_PASS = {
-    ...slangPass({ id: 'indicator', mod: coverageIndicatorShader }),
-    pack: data => data.indicatorPackedBuffer,
-};
 /**
  * Fill the coverage band's uniform buffer. Total-write (the generated packer),
  * so a field left out is a compile error rather than last frame's value.

package/esm/coverageBandBuffers.d.ts

@@ -1,9 +1,10 @@
 /**
- * The four coverage-band buffers a producer packs per region, in the layouts
- * `coverageBand.slang`'s passes read. Every field is filled by
+ * The coverage-band buffers a producer packs per region: three in the layouts
+ * `coverageBand.slang`'s passes read, and the indicator triangles' positions
+ * and type codes, which the point mark reads. Every field is filled by
  * `@jbrowse/alignments-core` — `packCoverageBinsForGpu`, `computeSNPCoverage`
- * and `computeInterbaseCoverage` (which emits the last two) — so a display gets
- * these by running that pipeline, not by shaping them itself.
+ * and `computeInterbaseCoverage` (which emits the last three) — so a display
+ * gets these by running that pipeline, not by shaping them itself.
  *
  * Structural rather than nominal, and named after the layout rather than after
  * either display: the alignments worker's `CoverageUploadData` and the MAF
@@ -19,5 +20,7 @@ export interface CoverageBandBuffers {
     coveragePackedBuffer: ArrayBuffer;
     snpPackedBuffer: ArrayBuffer;
     interbasePackedBuffer: ArrayBuffer;
-    indicatorPackedBuffer: ArrayBuffer;
+    indicatorPositions: Uint32Array;
+    /** 1 insertion, 2 softclip, 3 hardclip: the most common event there. */
+    indicatorTypes: Float32Array;
 }

package/esm/createRenderingBackend.d.ts

@@ -14,7 +14,7 @@ export interface RenderingBackendOptions<TRenderingBackend> {
      * that leans on MSAA holds its display at 4. Passing it overrides the
      * derivation in either direction.
      *
-     * The cost is one colour attachment the size of the canvas — an empty 600px
+     * The cost is one color attachment the size of the canvas — an empty 600px
      * track pays what a full one does, and eight ordinary tracks on a retina
      * panel hold 109.7 MiB nothing counts (ARCHITECTURAL_LIMITS.md §"The MSAA
      * target is the largest per-display allocation"); 1 allocates none. Whether a

package/esm/displayPhase.d.ts

@@ -18,13 +18,9 @@
  */
 export type DisplayPhase = 'renderError' | DisplayStatusPhase;
 /**
- * The phases a display without a rendering backend can be in — every phase
- * except the one that reports a backend failure. Its own type because
- * `renderError` is the only phase whose UI needs something no model can supply
- * (the backend hook's `retry()`), which is exactly the line between the shared
- * status chrome and the GPU chrome wrapped around it: `DisplayStatusChrome`
- * takes this, `DisplayChrome` takes the wider union and peels off `renderError`
- * before delegating.
+ * Every phase except the one that reports a backend failure: what a surface
+ * with no rendering backend of its own publishes (the comparative views'
+ * shared canvas, the circular view's chords).
  */
 export type DisplayStatusPhase = 'tooLarge' | 'error' | DisplayActivityPhase;
 /**
@@ -127,8 +123,8 @@ export interface DisplayActivityInputs {
  */
 export declare function computeActivityPhase({ isMinimized, fetchInert, viewportEmpty, isLoading, fetchCanceled, awaitingDependentData, rendersCanvas, canvasDrawn, }: DisplayActivityInputs, viewportCurrent: () => boolean, hostMounted?: () => boolean): DisplayActivityPhase;
 /**
- * The same ranking minus `renderError`, for a display with no rendering backend
- * to fail (arc's main-thread SVG). `computeDisplayPhase` delegates here, so the
+ * The same ranking minus `renderError`, for a surface with no rendering backend
+ * of its own to fail. `computeDisplayPhase` delegates here, so the
  * order lives in one place.
  */
 export declare function computeDisplayStatusPhase({ regionTooLarge, error }: DisplayStatusPhaseInputs, activity: () => DisplayActivityPhase): DisplayStatusPhase;

package/esm/displayPhase.js

@@ -48,8 +48,8 @@ export function computeActivityPhase({ isMinimized, fetchInert, viewportEmpty, i
                 : 'ready';
 }
 /**
- * The same ranking minus `renderError`, for a display with no rendering backend
- * to fail (arc's main-thread SVG). `computeDisplayPhase` delegates here, so the
+ * The same ranking minus `renderError`, for a surface with no rendering backend
+ * of its own to fail. `computeDisplayPhase` delegates here, so the
  * order lives in one place.
  */
 export function computeDisplayStatusPhase({ regionTooLarge, error }, activity) {

package/esm/hal/mockHal.d.ts

@@ -1,4 +1,5 @@
 import { GpuHalBase } from './gpuHalBase.ts';
+import type { CanvasScale } from '../canvas2dUtils.ts';
 import type { GpuHal, PipelineDescriptor, ShaderSource, TextureBinding, TextureSource } from './types.ts';
 /** Text for a pass built only for a `MockHal`, which never loads it. */
 export declare const MOCK_SHADER_SOURCE: ShaderSource;
@@ -99,10 +100,8 @@ export declare class MockHal extends GpuHalBase<MockBuffer> implements GpuHal {
     private record;
     errorHandler: ((error: Error) => void) | null;
     setErrorHandler(handler: (error: Error) => void): void;
-    resize(width: number, height: number): {
-        x: number;
-        y: number;
-    };
+    resize(width: number, height: number): CanvasScale;
+    reportedScale: CanvasScale | undefined;
     releaseRenderTargets(): void;
     uploadBuffer(regionKey: number, passId: string, data: ArrayBuffer | ArrayBufferView, count: number): void;
     deleteBuffer(regionKey: number, passId: string): void;

package/esm/hal/mockHal.js

@@ -108,11 +108,12 @@ export class MockHal extends GpuHalBase {
         }
         this.record('resize', width, height);
         // The real HALs report the scale their backing store actually got, and
-        // every device-px rect a renderer builds comes from this — so a mock
-        // returning nothing is a renderer whose rects are all NaN. `getDpr()` is
-        // the unclamped answer, which is what a mock canvas of any size would get.
-        return { x: getDpr(), y: getDpr() };
+        // every device-px rect a renderer builds comes from this. `getDpr()` is the
+        // unclamped answer; `reportedScale` stands in for a clamped canvas or a
+        // drawing buffer the browser shrank.
+        return this.reportedScale ?? { x: getDpr(), y: getDpr() };
     }
+    reportedScale = undefined;
     releaseRenderTargets() {
         this.record('releaseRenderTargets');
     }

package/esm/hal/types.d.ts

@@ -20,7 +20,7 @@ export interface VertexAttributeLayout {
  * 4" — standard sample patterns are defined for no other count), so this is the
  * API's constraint rather than a policy of ours, and 2 is not an option to add.
  *
- * At 4 the HAL allocates a multisampled colour attachment the size of the
+ * At 4 the HAL allocates a multisampled color attachment the size of the
  * canvas and resolves it into the canvas texture; at 1 it allocates **nothing**
  * and draws straight into the canvas texture. The bytes are canvas area x dpr²
  * x samples x 4, unrelated to how much data the display holds, which is why
@@ -119,10 +119,10 @@ export interface GpuHal {
     readonly uniformByteSize: number;
     /**
      * Size the canvas, and report the scale its backing store actually got.
-     * Callers derive every device-px rect from THAT rather than from `getDpr()`:
-     * past `MAX_CANVAS_DIM_PX` the two differ, and a rect built from the true dpr
-     * exceeds the target it draws into (WebGPU rejects the whole pass and the
-     * track goes blank; WebGL2 clamps and paints at the wrong scale).
+     * Callers derive every device-px rect from that scale. It differs from
+     * `getDpr()` past the backing-store caps in `canvas2dUtils.ts` and where
+     * a browser shrinks a WebGL drawing buffer, and a rect built from the true
+     * dpr then lands outside the target.
      */
     resize(width: number, height: number): CanvasScale;
     /**

package/esm/hal/webgl2Hal.d.ts

@@ -37,7 +37,10 @@ export declare class WebGL2Hal extends GpuHalBase<RegionPassBuffer> implements G
     protected destroyBuffer(buf: RegionPassBuffer): void;
     private link;
     private getPass;
-    resize(width: number, height: number): import("./types.ts").CanvasScale;
+    resize(width: number, height: number): {
+        x: number;
+        y: number;
+    };
     /**
      * Nothing to give back. WebGL2 multisamples in the drawing buffer the context
      * owns (`antialias` above one sample), so this HAL holds no separate target —

package/esm/hal/webgl2Hal.js

@@ -304,7 +304,15 @@ export class WebGL2Hal extends GpuHalBase {
         if (this.disposed) {
             return { x: getDpr(), y: getDpr() };
         }
-        return syncCanvasSize(this.canvas, width, height).scale;
+        // Resized past 7680x4320 px of area, Chrome shrinks the drawing buffer and
+        // leaves canvas.width/height at the requested size, so the scale comes from
+        // the buffer. A lost context reads 0x0 and falls back to syncCanvasSize's.
+        const { scale } = syncCanvasSize(this.canvas, width, height);
+        const { drawingBufferWidth: bufferW, drawingBufferHeight: bufferH } = this.gl;
+        return {
+            x: width > 0 && bufferW > 0 ? bufferW / width : scale.x,
+            y: height > 0 && bufferH > 0 ? bufferH / height : scale.y,
+        };
     }
     /**
      * Nothing to give back. WebGL2 multisamples in the drawing buffer the context
@@ -354,23 +362,24 @@ export class WebGL2Hal extends GpuHalBase {
         const gl = this.gl;
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         gl.disable(gl.SCISSOR_TEST);
-        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
         gl.clearColor(clearR, clearG, clearB, clearA);
         gl.clear(gl.COLOR_BUFFER_BIT);
     }
     setScissor(x, y, w, h) {
         const gl = this.gl;
         gl.enable(gl.SCISSOR_TEST);
-        gl.scissor(x, this.canvas.height - y - h, w, h);
+        gl.scissor(x, gl.drawingBufferHeight - y - h, w, h);
     }
     clearScissor() {
         this.gl.disable(this.gl.SCISSOR_TEST);
     }
     setViewport(x, y, w, h) {
-        this.gl.viewport(x, this.canvas.height - y - h, w, h);
+        this.gl.viewport(x, this.gl.drawingBufferHeight - y - h, w, h);
     }
     clearViewport() {
-        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        const gl = this.gl;
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     }
     drawPass(passId, regionKey, bufferPassId, verticesPerInstance) {
         const gl = this.gl;
@@ -413,7 +422,7 @@ export class WebGL2Hal extends GpuHalBase {
     endFrame() {
         const gl = this.gl;
         gl.disable(gl.SCISSOR_TEST);
-        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     }
     releaseResources() {
         const gl = this.gl;