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

package/esm/marks/markPlan.d.ts

@@ -18,8 +18,9 @@ export interface MarkPlan<TRegion, TState extends MarkFrame> {
 }
 /**
  * Resolve which marks draw this frame. Throws for an enabled mark the plan
- * form cannot carry — one with a `band` or a `paintsBlock` — since a plan
- * neither scissors nor asks the block anything, and without the throw the GPU
- * would draw what Canvas2D declines.
+ * form cannot carry — one with a `band`, a `paintsBlock` or a per-draw
+ * `verticesPerInstance` — since a plan neither scissors, asks the block
+ * anything nor sizes a draw, and without the throw the GPU would draw what
+ * Canvas2D declines, or a chevron a line.
  */
 export declare function planMarks<TRegion, TState extends MarkFrame>(marks: readonly Mark<TRegion, TState>[], state: TState): MarkPlan<TRegion, TState>;

package/esm/marks/markPlan.js

@@ -1,8 +1,9 @@
 /**
  * Resolve which marks draw this frame. Throws for an enabled mark the plan
- * form cannot carry — one with a `band` or a `paintsBlock` — since a plan
- * neither scissors nor asks the block anything, and without the throw the GPU
- * would draw what Canvas2D declines.
+ * form cannot carry — one with a `band`, a `paintsBlock` or a per-draw
+ * `verticesPerInstance` — since a plan neither scissors, asks the block
+ * anything nor sizes a draw, and without the throw the GPU would draw what
+ * Canvas2D declines, or a chevron a line.
  */
 export function planMarks(marks, state) {
     const enabled = [];
@@ -10,7 +11,7 @@ export function planMarks(marks, state) {
     for (const mark of marks) {
         if (!mark.enabled || mark.enabled(state)) {
             if (!mark.planned) {
-                throw new Error(`mark ${mark.pass.id} declares a band or a block gate, which a frame plan does not carry; draw it through drawMarks`);
+                throw new Error(`mark ${mark.pass.id} declares a band, a block gate or a per-draw vertex count, which a frame plan does not carry; draw it through drawMarks`);
             }
             enabled.push(mark);
             passes.push(mark.planned);

package/esm/marks/markRamp.d.ts

@@ -1,9 +1,9 @@
 import type { MarkColorScale, MarkThreshold } from './types.ts';
 /**
- * A colour channel as a shape reads it: `color`, the packed ABGR the worker
+ * A color channel as a shape reads it: `color`, the packed ABGR the worker
  * resolved — one per instance, or one number for all of them — or
  * `colorValue`, the raw values a frame's {@link MarkColorScale} turns into
- * colours here. A shape reading a scale declares both optional and asks
+ * colors here. A shape reading a scale declares both optional and asks
  * {@link colorBits} for the GPU and {@link paintColors} for Canvas2D.
  */
 export interface ColorChannel {
@@ -19,13 +19,13 @@ interface RampBake {
     scale: MarkColorScale;
     colors: Uint32Array;
 }
-/** Whether a colour scale is a threshold rather than a ramp. */
+/** Whether a color scale is a threshold rather than a ramp. */
 export declare function isThreshold(scale: MarkColorScale): scale is MarkThreshold;
 type Rgba = [number, number, number, number];
 type Bands = [Rgba, Rgba, Rgba, Rgba, Rgba, Rgba, Rgba, Rgba, Rgba];
 /**
- * `markColor.slang`'s uniforms for a frame's colour scale, or for none: the
- * mode, a ramp's domain and middle, and a threshold's cuts and band colours.
+ * `markColor.slang`'s uniforms for a frame's color scale, or for none: the
+ * mode, a ramp's domain and middle, and a threshold's cuts and band colors.
  * Every valued shape's uniform block carries the set.
  */
 export declare function rampUniforms(scale: MarkColorScale | undefined): {
@@ -40,8 +40,8 @@ export declare function rampUniforms(scale: MarkColorScale | undefined): {
 /**
  * The 4-byte instance lane, for the packer. Under a scale it is the value's
  * float32 bits viewed as the `uint` the attribute declares — the reinterpret
- * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative colour
- * adds no lane. A constant colour fills a lane for the pack alone, which the
+ * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative color
+ * adds no lane. A constant color fills a lane for the pack alone, which the
  * payload never holds.
  */
 export declare function colorBits(c: ColorChannel, count: number): ArrayLike<number>;
@@ -63,12 +63,12 @@ export declare function keepRampValues(values: Float32Array, keep: (value: numbe
  */
 export declare function thresholdBandOf(value: number, cuts: readonly number[]): number;
 /**
- * The packed colours a painter fills with. Under a scale the values are baked
+ * The packed colors a painter fills with. Under a scale the values are baked
  * against it once and kept on the payload, so a repaint at an unchanged scale
  * — every pan and every hover — walks no values and the painters' fill
- * batching still sees runs of one colour. The bake reruns when the domain, the
- * scale type, the ramp's bytes or a threshold's cuts or colours move. A
- * constant colour expands once and is kept the same way.
+ * batching still sees runs of one color. The bake reruns when the domain, the
+ * scale type, the ramp's bytes or a threshold's cuts or colors move. A
+ * constant color expands once and is kept the same way.
  */
 export declare function paintColors(c: ColorChannel, count: number, scale: MarkColorScale | undefined): ArrayLike<number>;
 export {};

package/esm/marks/markRamp.js

@@ -3,7 +3,7 @@ import { rampMidT } from '../shaders/colorRampLut.js.generated.js';
 import { MAX_COLOR_BANDS, MAX_COLOR_CUTS, RAMP_LINEAR, RAMP_LOG, RAMP_NONE, RAMP_NOT_A_NUMBER_COLOR, RAMP_NO_VALUE_BITS, RAMP_NO_VALUE_COLOR, RAMP_THRESHOLD, } from '../shaders/markColor.generated.js';
 import { normalizeScore } from '../shaders/scoreScale.js.generated.js';
 const NO_COLORS = new Uint32Array(0);
-/** Whether a colour scale is a threshold rather than a ramp. */
+/** Whether a color scale is a threshold rather than a ramp. */
 export function isThreshold(scale) {
     return 'cuts' in scale;
 }
@@ -31,8 +31,8 @@ function quad(values, from) {
     ];
 }
 /**
- * `markColor.slang`'s uniforms for a frame's colour scale, or for none: the
- * mode, a ramp's domain and middle, and a threshold's cuts and band colours.
+ * `markColor.slang`'s uniforms for a frame's color scale, or for none: the
+ * mode, a ramp's domain and middle, and a threshold's cuts and band colors.
  * Every valued shape's uniform block carries the set.
  */
 export function rampUniforms(scale) {
@@ -69,8 +69,8 @@ export function rampUniforms(scale) {
 /**
  * The 4-byte instance lane, for the packer. Under a scale it is the value's
  * float32 bits viewed as the `uint` the attribute declares — the reinterpret
- * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative colour
- * adds no lane. A constant colour fills a lane for the pack alone, which the
+ * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative color
+ * adds no lane. A constant color fills a lane for the pack alone, which the
  * payload never holds.
  */
 export function colorBits(c, count) {
@@ -129,12 +129,12 @@ function sameScale(a, b) {
         midNormOf(a) === midNormOf(b));
 }
 /**
- * The packed colours a painter fills with. Under a scale the values are baked
+ * The packed colors a painter fills with. Under a scale the values are baked
  * against it once and kept on the payload, so a repaint at an unchanged scale
  * — every pan and every hover — walks no values and the painters' fill
- * batching still sees runs of one colour. The bake reruns when the domain, the
- * scale type, the ramp's bytes or a threshold's cuts or colours move. A
- * constant colour expands once and is kept the same way.
+ * batching still sees runs of one color. The bake reruns when the domain, the
+ * scale type, the ramp's bytes or a threshold's cuts or colors move. A
+ * constant color expands once and is kept the same way.
  */
 export function paintColors(c, count, scale) {
     const { colorValue, color } = c;

package/esm/marks/pointMark.d.ts

@@ -6,18 +6,21 @@ import type { MarkFrame, MarkColorScale, MarkShape } from './types.ts';
 import type { MarkValueScale } from './valueScale.ts';
 /**
  * The `point` shape's channels: a glyph per instance at the centre of
- * `x`..`x2`, on the `y` scale.
+ * `x`..`x2`, on the `y` scale, at 0 where `y` is absent. `glyph` is one per
+ * instance or one for all of them, as `color` is.
  */
 export interface PointChannels extends ColorChannel, RowChannel {
     x: Uint32Array;
     x2: Uint32Array;
-    y: Float32Array;
-    glyph: Uint8Array;
+    y?: Float32Array;
+    glyph: Uint8Array | number;
     count: number;
 }
-/** What the point and rule shapes share: a value scale, rows and a colour scale. */
+/** The channels cut down to instance `i`, for its own painter to trace alone. */
+export declare function pointInstance(c: PointChannels, i: number): PointChannels;
+/** What the point and rule shapes share: a value scale, rows and a color scale. */
 export interface ValuedMarkParams extends RowParams, MarkValueScale {
-    /** The quantitative colour scale, for a mark whose colour is a ramp or a threshold. */
+    /** The quantitative color scale, for a mark whose color is a ramp or a threshold. */
     colorScale?: MarkColorScale;
     /**
      * How far inside the plot the value range ends, so a mark at a domain
@@ -29,6 +32,8 @@ export interface ValuedMarkParams extends RowParams, MarkValueScale {
 export interface PointParams extends ValuedMarkParams {
     /** Glyph diameter in CSS px. */
     diameterPx: number;
+    /** The triangle's height in CSS px, where it is not `diameterPx`. */
+    triangleHeightPx?: number;
 }
 /**
  * The point shader's uniforms, which the rule shape draws through too:
@@ -36,6 +41,7 @@ export interface PointParams extends ValuedMarkParams {
  */
 export declare function writePointUniforms(scratch: ArrayBuffer, clip: BlockClipResult, block: RenderBlock, frame: MarkFrame, params: ValuedMarkParams, shape: {
     radiusPx: number;
+    triangleRadiusYPx: number;
     rule: boolean;
     minWidthPx: number;
 }): void;

package/esm/marks/pointMark.js

@@ -7,10 +7,24 @@ import { slangPass } from '../slangPass.js';
 import { abgrToCssRgba } from './colorFill.js';
 import { appendGlyph, glyphBox } from './glyphPaint.js';
 import { inkAtPoint, nearestInk } from './markHit.js';
-import { colorBits, paintColors, rampUniforms } from './markRamp.js';
+import { colorBits, instanceColor, paintColors, rampUniforms, } from './markRamp.js';
 import { valueWindow } from './nearestMarkHit.js';
 import { bandHeightPx, rowColor, rowLane, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
 import { valueScaleUniforms } from './valueScale.js';
+const NO_VALUES = new Float32Array(0);
+/** The channels cut down to instance `i`, for its own painter to trace alone. */
+export function pointInstance(c, i) {
+    const { glyph } = c;
+    return {
+        x: c.x.subarray(i, i + 1),
+        x2: c.x2.subarray(i, i + 1),
+        y: c.y?.subarray(i, i + 1),
+        glyph: typeof glyph === 'number' ? glyph : glyph.subarray(i, i + 1),
+        row: c.row?.subarray(i, i + 1),
+        color: instanceColor(c.color, i),
+        count: 1,
+    };
+}
 /**
  * The point shader's uniforms, which the rule shape draws through too:
  * `radiusPx` is half a glyph or half a rule's thickness.
@@ -29,6 +43,7 @@ export function writePointUniforms(scratch, clip, block, frame, params, shape) {
         // stretched ellipses on hi-DPI.
         viewportWidth: clip.scissorW,
         radiusPx: shape.radiusPx,
+        triangleRadiusYPx: shape.triangleRadiusYPx,
         rowHeight: bandHeightPx(params, frame.canvasHeight),
         rowOffsetPx: params.rowOffsetPx ?? 0,
         reverse: params.reverse ? 1 : 0,
@@ -43,11 +58,21 @@ export const pointMark = {
     id: 'point',
     pass: {
         ...slangPass({ id: 'point', mod: shader }),
-        pack: c => shader.packInstances({ ...c, color: colorBits(c, c.count), row: rowLane(c.row, c.count) }, c.count),
+        pack: c => shader.packInstances({
+            x: c.x,
+            x2: c.x2,
+            y: c.y ?? (c.count === 0 ? NO_VALUES : new Float32Array(c.count)),
+            glyph: typeof c.glyph === 'number'
+                ? new Uint8Array(c.count).fill(c.glyph)
+                : c.glyph,
+            color: colorBits(c, c.count),
+            row: rowLane(c.row, c.count),
+        }, c.count),
     },
     writeUniforms(scratch, clip, block, frame, params) {
         writePointUniforms(scratch, clip, block, frame, params, {
             radiusPx: params.diameterPx / 2,
+            triangleRadiusYPx: (params.triangleHeightPx ?? params.diameterPx) / 2,
             rule: false,
             minWidthPx: 0,
         });
@@ -59,7 +84,7 @@ export const pointMark = {
             return;
         }
         const color = paintColors(channels, count, params.colorScale);
-        const { diameterPx, domain, insetPx = 0, rowOffsetPx: top = 0, rowTable: table, } = params;
+        const { diameterPx, triangleHeightPx = diameterPx, domain, insetPx = 0, rowOffsetPx: top = 0, rowTable: table, } = params;
         const reverse = params.reverse ? 1 : 0;
         const band = bandHeightPx(params, frame.canvasHeight);
         const domainMin = domain[0];
@@ -81,8 +106,8 @@ export const pointMark = {
                 ctx.fillStyle = abgrToCssRgba(abgr);
             }
             path.add();
-            const yPx = pointRowYPx(rowBandTopPx(top, band, slot), band, reverse, pointYPx(y[i], domainMin, domainMax, band, st, insetPx, c));
-            appendGlyph(ctx, glyph[i], (bpToPx(x[i]) + bpToPx(x2[i])) / 2, yPx, diameterPx);
+            const yPx = pointRowYPx(rowBandTopPx(top, band, slot), band, reverse, pointYPx(y ? y[i] : 0, domainMin, domainMax, band, st, insetPx, c));
+            appendGlyph(ctx, typeof glyph === 'number' ? glyph : glyph[i], (bpToPx(x[i]) + bpToPx(x2[i])) / 2, yPx, diameterPx, triangleHeightPx);
         }
         path.flush();
     },
@@ -93,12 +118,12 @@ export const pointMark = {
         if (slot === undefined) {
             return undefined;
         }
-        const { diameterPx, domain, insetPx = 0 } = params;
+        const { diameterPx, triangleHeightPx, domain, insetPx = 0 } = params;
         const bpToPx = makeBpMapper(block);
         const band = bandHeightPx(params, frame.canvasHeight);
         const { valueScaleType: st, valueSymlogConstant: c } = valueScaleUniforms(params);
-        const cy = pointRowYPx(rowBandTopPx(params.rowOffsetPx ?? 0, band, slot), band, params.reverse ? 1 : 0, pointYPx(y[i], domain[0], domain[1], band, st, insetPx, c));
-        return glyphBox(glyph[i], (bpToPx(x[i]) + bpToPx(x2[i])) / 2, cy, diameterPx);
+        const cy = pointRowYPx(rowBandTopPx(params.rowOffsetPx ?? 0, band, slot), band, params.reverse ? 1 : 0, pointYPx(y ? y[i] : 0, domain[0], domain[1], band, st, insetPx, c));
+        return glyphBox(typeof glyph === 'number' ? glyph : glyph[i], (bpToPx(x[i]) + bpToPx(x2[i])) / 2, cy, diameterPx, triangleHeightPx);
     },
     // Its own rather than the one `ink` implies: a dense plot stacks glyphs
     // whose boxes all contain the cursor at distance 0, and the one under the
@@ -117,7 +142,7 @@ export const pointMark = {
             if (slot === undefined) {
                 return undefined;
             }
-            const cy = pointRowYPx(rowBandTopPx(top, band, slot), band, reverse, pointYPx(y[i], domainMin, domainMax, band, st, insetPx, c));
+            const cy = pointRowYPx(rowBandTopPx(top, band, slot), band, reverse, pointYPx(y ? y[i] : 0, domainMin, domainMax, band, st, insetPx, c));
             return inkAtPoint(xPx, yPx, (bpToPx(x[i]) + bpToPx(x2[i])) / 2, cy);
         });
     },

package/esm/marks/rowLane.d.ts

@@ -15,7 +15,7 @@ export interface RowParams {
     rowOffsetPx?: number;
     /**
      * The table `row` is read through as a key: its drawn slot, hidden, or a
-     * colour override. Absent, `row` is the slot.
+     * color override. Absent, `row` is the slot.
      */
     rowTable?: RowTable;
 }
@@ -35,5 +35,7 @@ export declare function bandHeightPx(params: RowParams, canvasHeight: number): n
 export declare function keySlot(key: number, table: RowTable | undefined): number | undefined;
 /** The slot instance `i` is drawn on, undefined where the table hides its key. */
 export declare function rowSlot(row: Uint32Array | undefined, i: number, table: RowTable | undefined): number | undefined;
-/** The colour instance `i` is drawn in: its key's override, else `color`. */
+/** Instance `i`'s key's color override, undefined where it keeps its own. */
+export declare function rowColorOverride(row: Uint32Array | undefined, i: number, table: RowTable | undefined): number | undefined;
+/** The color instance `i` is drawn in: its key's override, else `color`. */
 export declare function rowColor(color: number, row: Uint32Array | undefined, i: number, table: RowTable | undefined): number;

package/esm/marks/rowLane.js

@@ -33,9 +33,13 @@ export function keySlot(key, table) {
 export function rowSlot(row, i, table) {
     return keySlot(rowKey(row, i), table);
 }
-/** The colour instance `i` is drawn in: its key's override, else `color`. */
-export function rowColor(color, row, i, table) {
+/** Instance `i`'s key's color override, undefined where it keeps its own. */
+export function rowColorOverride(row, i, table) {
     const key = rowKey(row, i);
     const override = table && key < table.keys ? table.color[key] : NO_ROW_COLOR;
-    return override >>> 24 === 0 ? color : override;
+    return override >>> 24 === 0 ? undefined : override;
+}
+/** The color instance `i` is drawn in: its key's override, else `color`. */
+export function rowColor(color, row, i, table) {
+    return rowColorOverride(row, i, table) ?? color;
 }

package/esm/marks/rowTable.d.ts

@@ -1,15 +1,15 @@
 import type { MarkTexels } from './types.ts';
 /** The `slot` a hidden key holds. */
 export declare const HIDDEN_ROW = 4294967295;
-/** The `color` a key with no override holds: alpha 0, the instance's own colour. */
+/** The `color` a key with no override holds: alpha 0, the instance's own color. */
 export declare const NO_ROW_COLOR = 0;
 /**
  * The row axis as a pass reads it: each key's drawn slot or `HIDDEN_ROW`, its
- * packed ABGR colour override or `NO_ROW_COLOR`, and the RGBA8 texture the
+ * packed ABGR color override or `NO_ROW_COLOR`, and the RGBA8 texture the
  * vertex stage samples for the same answers (`shaders/rowTable.slang` has the
  * layout). One object, so the shader, the painter, the ink and the hit test
  * cannot place a key differently. Immutable: a reorder, focus, hide or
- * recolour builds a new one, and the backend uploads on identity.
+ * recolor builds a new one, and the backend uploads on identity.
  */
 export interface RowTable {
     readonly keys: number;
@@ -20,7 +20,7 @@ export interface RowTable {
 /**
  * The table for `slot[key]` and `color[key]`, both indexed by key: `slot` is
  * `HIDDEN_ROW` where the key draws nothing, `color` is `NO_ROW_COLOR` where the
- * instance keeps its own colour, an override alpha 0 being none. Both arrays
+ * instance keeps its own color, an override alpha 0 being none. Both arrays
  * are held, not copied. Each key's texel sits where the shader's own twins
  * put it.
  */
@@ -29,7 +29,7 @@ export declare function buildRowTable(slot: Uint32Array, color?: Uint32Array): R
  * The keys a display's rows carry across every region: a name's key is
  * assigned the first time it is asked for and never moves, so a region encoded
  * against the registry stays valid as later regions add names and the table
- * alone follows the reader's order, focus and colours. Grows only.
+ * alone follows the reader's order, focus and colors. Grows only.
  */
 export declare class RowKeys {
     private readonly index;

package/esm/marks/rowTable.js

@@ -1,20 +1,20 @@
 import { rowTablePlaneHeight, rowTableTexelX, rowTableTexelY, rowTableWidth, } from '../shaders/rowTable.js.generated.js';
 /** The `slot` a hidden key holds. */
 export const HIDDEN_ROW = 0xffffffff;
-/** The `color` a key with no override holds: alpha 0, the instance's own colour. */
+/** The `color` a key with no override holds: alpha 0, the instance's own color. */
 export const NO_ROW_COLOR = 0;
 const MAX_SLOT = 0xffffff;
 /**
  * The table for `slot[key]` and `color[key]`, both indexed by key: `slot` is
  * `HIDDEN_ROW` where the key draws nothing, `color` is `NO_ROW_COLOR` where the
- * instance keeps its own colour, an override alpha 0 being none. Both arrays
+ * instance keeps its own color, an override alpha 0 being none. Both arrays
  * are held, not copied. Each key's texel sits where the shader's own twins
  * put it.
  */
 export function buildRowTable(slot, color = new Uint32Array(slot.length)) {
     const keys = slot.length;
     if (color.length !== keys) {
-        throw new Error(`buildRowTable: ${keys} slots but ${color.length} colours; both are per key`);
+        throw new Error(`buildRowTable: ${keys} slots but ${color.length} colors; both are per key`);
     }
     const width = rowTableWidth(keys);
     const plane = rowTablePlaneHeight(keys);
@@ -51,7 +51,7 @@ export function buildRowTable(slot, color = new Uint32Array(slot.length)) {
  * The keys a display's rows carry across every region: a name's key is
  * assigned the first time it is asked for and never moves, so a region encoded
  * against the registry stays valid as later regions add names and the table
- * alone follows the reader's order, focus and colours. Grows only.
+ * alone follows the reader's order, focus and colors. Grows only.
  */
 export class RowKeys {
     index = new Map();

package/esm/marks/ruleMark.js

@@ -59,6 +59,7 @@ export const ruleMark = {
     writeUniforms(scratch, clip, block, frame, params) {
         writePointUniforms(scratch, clip, block, frame, params, {
             radiusPx: params.sizePx / 2,
+            triangleRadiusYPx: params.sizePx / 2,
             rule: true,
             minWidthPx: params.minWidthPx,
         });

package/esm/marks/spanMark.d.ts

@@ -2,8 +2,8 @@ import type { ColorChannel } from './markRamp.ts';
 import type { RowTable } from './rowTable.ts';
 import type { MarkColorScale, MarkShape } from './types.ts';
 /**
- * The `span` shape's channels: a coloured rectangle from `x` to `x2` on the
- * band belonging to `row`, its colour packed or, under a colour scale, the
+ * The `span` shape's channels: a colored rectangle from `x` to `x2` on the
+ * band belonging to `row`, its color packed or, under a color scale, the
  * value it resolves from.
  */
 export interface SpanChannels extends ColorChannel {
@@ -14,7 +14,7 @@ export interface SpanChannels extends ColorChannel {
     count: number;
 }
 export interface SpanParams {
-    /** The quantitative colour scale, for a span whose colour is a ramp or a threshold. */
+    /** The quantitative color scale, for a span whose color is a ramp or a threshold. */
     colorScale?: MarkColorScale;
     /** CSS px per row. */
     rowHeight: number;
@@ -26,16 +26,17 @@ export interface SpanParams {
      */
     minWidthPx: number;
     /**
-     * CSS px the **painter alone** adds to each span's right edge, closing the
-     * hairline two antialiased `fillRect`s leave where tiling runs meet on a
-     * fractional pixel. The GPU pass needs none, and the ink excludes it.
+     * CSS px the **painter alone** adds to each span's edge facing the next span
+     * painted — the left edge on a reversed block — closing the hairline two
+     * antialiased `fillRect`s leave where tiling runs meet on a fractional pixel.
+     * The GPU pass needs none, and the ink excludes it.
      */
     seamPx: number;
     /** Rows-area scroll offset in CSS px; 0 for a canvas sized to its content. */
     scrollTop: number;
     /**
      * The table `row` is read through as a key: its drawn slot, hidden, or a
-     * colour override. Absent, `row` is the slot.
+     * color override. Absent, `row` is the slot.
      */
     rowTable?: RowTable;
 }

package/esm/marks/spanMark.js

@@ -25,7 +25,7 @@ function spanFrame(block, params) {
         height: drawnRowHeightPx(rowHeight, rowProportion),
     };
 }
-function placeSpan(c, g, i) {
+function placeSpan(c, g, i, seamPx = 0) {
     const slot = rowSlot(c.row, i, g.table);
     if (slot === undefined) {
         return false;
@@ -33,7 +33,7 @@ function placeSpan(c, g, i) {
     const xa = projectBp(g, c.x[i]);
     const xb = projectBp(g, c.x2[i]);
     const width = Math.max(g.minWidthPx, Math.abs(xb - xa));
-    g.left = spanLeft(xa, xb, width);
+    g.left = spanLeft(xa, xb, width + seamPx);
     g.top = g.bandOffsetPx + g.rowHeight * slot - g.scrollTop;
     g.width = width;
     return true;
@@ -66,7 +66,7 @@ export const spanMark = {
         const g = spanFrame(block, params);
         const setFill = makeAbgrFill(ctx);
         for (let i = 0; i < count; i++) {
-            if (placeSpan(channels, g, i)) {
+            if (placeSpan(channels, g, i, seamPx)) {
                 setFill(rowColor(color[i], row, i, g.table));
                 ctx.fillRect(g.left, g.top, g.width + seamPx, g.height);
             }

package/esm/marks/types.d.ts

@@ -32,7 +32,7 @@ export interface MarkContext2D extends ClipContext2D {
     drawImage?(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
 }
 /**
- * A canvas a mark's pass samples in place of a colour ramp. Hand a fresh object
+ * A canvas a mark's pass samples in place of a color ramp. Hand a fresh object
  * per repaint: the backend uploads on identity.
  */
 export interface MarkImage {
@@ -60,7 +60,7 @@ export type MarkTextures = Readonly<Record<string, MarkTexture | undefined>>;
 export type MarkFrame = FrameDimensions;
 export type MarkValueScaleType = 'linear' | 'log' | 'symlog';
 /**
- * The colour scale a ramp channel's raw `colorValue`s resolve through each
+ * The color scale a ramp channel's raw `colorValue`s resolve through each
  * frame, with the 256-entry RGBA LUT the pass's sampler binds: straight, its
  * middle stop at the middle, and `mid`, where a diverging ramp puts that stop,
  * read through a uniform.
@@ -76,13 +76,13 @@ export interface MarkRamp {
  * A threshold a value channel's raw `colorValue`s resolve through each frame:
  * the ascending cut points, at most `MAX_COLOR_CUTS` of them, and one packed
  * ABGR per interval between them, `cuts.length + 1` in all. The cuts and
- * colours ride uniforms, so an edit moves them and uploads no instance bytes.
+ * colors ride uniforms, so an edit moves them and uploads no instance bytes.
  */
 export interface MarkThreshold {
     cuts: readonly number[];
     colors: Uint32Array;
 }
-/** The scale a quantitative colour channel resolves through: a ramp or a threshold. */
+/** The scale a quantitative color channel resolves through: a ramp or a threshold. */
 export type MarkColorScale = MarkRamp | MarkThreshold;
 /** A horizontal strip of the canvas, in CSS px down from its top edge. */
 export interface MarkBand {
@@ -220,7 +220,10 @@ export interface Mark<TRegion, TState extends MarkFrame> {
      * frame and every other consumer per block, before any lens.
      */
     readonly enabled?: (state: TState) => boolean;
-    /** The pass a frame plan draws; undefined with a `band` or `paintsBlock`. */
+    /**
+     * The pass a frame plan draws; undefined with a `band`, a `paintsBlock` or
+     * a per-draw `verticesPerInstance`, none of which a plan carries.
+     */
     readonly planned?: PlannedPass;
     drawRegion(hal: GpuHal, scratch: ArrayBuffer, block: RenderBlock, clip: BlockClipResult, region: TRegion, state: TState, regionKey: number, staged?: StagedUniforms, textures?: TextureBinder): void;
     paintBlock(ctx: MarkContext2D, region: TRegion, block: RenderBlock, state: TState): void;

package/esm/marks/types.js

@@ -37,7 +37,9 @@ export function defineMark(spec) {
         throw new Error(`mark ${shape.id} draws off ${lender.id}'s buffer but declares a different instance struct`);
     }
     const bufferOf = lender?.id;
-    const planned = band || shape.paintsBlock ? undefined : { id: shape.pass.id, bufferOf };
+    const planned = band || shape.paintsBlock || shape.verticesPerInstance
+        ? undefined
+        : { id: shape.pass.id, bufferOf };
     // `channels` gates `params`: a union payload's params lens may only read its
     // own kind of region.
     function resolve(region, block, state) {
@@ -104,6 +106,11 @@ export function defineMark(spec) {
                 hal.setScissor(clip.pxX, scissor.top, clip.pxW, scissor.height);
             }
             if (staged?.writer !== shape.writeUniforms || staged.params !== params) {
+                // A generated packer drops whatever lands past the end of a short
+                // buffer, which draws the pass from zeros with nothing said.
+                if (scratch.byteLength < shape.pass.uniformByteSize) {
+                    throw new Error(`${shape.pass.id} writes ${shape.pass.uniformByteSize} bytes of uniforms into a ${scratch.byteLength}-byte scratch`);
+                }
                 shape.writeUniforms(scratch, clip, block, state, p);
                 hal.writeUniforms(scratch);
                 if (staged) {

package/esm/perRegionRenderingBackend.d.ts

@@ -66,7 +66,7 @@ export declare abstract class Canvas2DPerRegionRenderingBackend<UploadData, Rend
      * `prepareCanvas`'s `clearRect` as the whole of it, which is transparent.
      * Synteny is the one display that overrides: its indel wedges pre-blend
      * against a KNOWN ground and only agree with the base ribbon beside them over
-     * a destination that really is that colour.
+     * a destination that really is that color.
      */
     protected clearColor(_state: RenderState): ClearColor | undefined;
     /**

package/esm/perRegionRenderingBackend.js

@@ -37,7 +37,7 @@ export class Canvas2DPerRegionRenderingBackend extends Canvas2DRenderingBackendB
      * `prepareCanvas`'s `clearRect` as the whole of it, which is transparent.
      * Synteny is the one display that overrides: its indel wedges pre-blend
      * against a KNOWN ground and only agree with the base ribbon beside them over
-     * a destination that really is that colour.
+     * a destination that really is that color.
      */
     clearColor(_state) {
         return undefined;

package/esm/regionDataMap.d.ts

@@ -7,8 +7,8 @@ export declare function isCheckedAtTheStore(map: ReadonlyMap<unknown, unknown>):
  * ADR-060.
  *
  * **Shallow, and that follows from an invariant the codebase already states**:
- * per-region values are freshly constructed and never mutated (agent-docs
- * CLAUDE.md; backends diff by reference identity). Nothing inside an entry can
+ * per-region values are freshly constructed and never mutated (ADR-060;
+ * backends diff by reference identity). Nothing inside an entry can
  * therefore change, so the deep enhancer's field-level atoms can never fire —
  * they are unreachable reactivity, not a safety margin. What they do cost is
  * paid on every insert and every read:

package/esm/regionDataMap.js

@@ -17,8 +17,8 @@ export function isCheckedAtTheStore(map) {
  * ADR-060.
  *
  * **Shallow, and that follows from an invariant the codebase already states**:
- * per-region values are freshly constructed and never mutated (agent-docs
- * CLAUDE.md; backends diff by reference identity). Nothing inside an entry can
+ * per-region values are freshly constructed and never mutated (ADR-060;
+ * backends diff by reference identity). Nothing inside an entry can
  * therefore change, so the deep enhancer's field-level atoms can never fire —
  * they are unreachable reactivity, not a safety margin. What they do cost is
  * paid on every insert and every read: