@react-x11/components 0.10.0 → 0.11.0

package/src/html/paint.ts

@@ -30,13 +30,13 @@ import { alphaOf, inkColor, isTransparent, resolve } from './css/values.js';
 import { blend, borderShades } from './css/color.js';
 import type { Len } from './css/values.js';
 import type {
+  BackgroundClip,
   BackgroundRepeat,
   BoxShadow,
   ComputedStyle,
   ImageRepeat,
   LinearGradient,
   RepeatMode,
-  VisualBox,
 } from './css/style.js';
 import {
   CONTAIN_LAYOUT,
@@ -56,6 +56,7 @@ import {
   FADED_BLOCKS,
   PAINT_ORDER,
   INLINE_OFFSETS,
+  MOVED_OFF_LINES,
   SHADOWED_TEXT,
   SHIFTED_LINES,
   TEXT_RAISES,
@@ -401,7 +402,7 @@ export function paintDocument(
 ): void {
   if (!canFill(ctx)) return;
   ctx.save();
-  const canvas = canvasBackground(tree.root);
+  const canvas = canvasBackground(tree);
   if (canvas) paintCanvas(ctx, canvas, tree.root, options);
   paintBox(ctx, tree.root, {
     ...options,
@@ -411,27 +412,51 @@ export function paintDocument(
   ctx.restore();
 }
 
+/** What covers the canvas: a style's background, the box that would have
+ *  painted it and now paints none, and the box its image is placed by. */
+interface CanvasBackground {
+  style: ComputedStyle;
+  source: Box | null;
+  anchor: Box;
+}
+
 /**
  * Whose background covers the canvas (CSS 2.1 14.2): the root element's,
  * or — where `<html>` has neither a colour nor an image — the first
  * `<body>`'s, which then paints no background of its own. A document with
  * no `<html>` tag has the root box standing in for its root element, and a
  * `<body>` in it is still the body: mail often starts at `<body style>`.
- * `anchor` is the box the image is positioned against: the root element's,
- * whichever box it came from.
+ * With neither tag, the root box stands in for the body, and the `<html>`
+ * around it is implied: an `html { … }` or a `:root { … }` background, which
+ * a test's reference sets on a document with no tags at all, has no box
+ * but the canvas to be painted on. `anchor` is the box the image is
+ * positioned against: the root element's, whichever box it came from.
  */
-function canvasBackground(root: Box): { source: Box; anchor: Box } | null {
-  const has = (b: Box) =>
-    !isTransparent(b.style.backgroundColor) ||
-    !!b.style.backgroundImage ||
-    !!b.style.backgroundGradient ||
-    !!b.style.backgroundImages;
+function canvasBackground(tree: BoxTree): CanvasBackground | null {
+  const root = tree.root;
+  const has = (s: ComputedStyle) =>
+    !isTransparent(s.backgroundColor) ||
+    !!s.backgroundImage ||
+    !!s.backgroundGradient ||
+    !!s.backgroundImages;
+  const implied = tree.impliedHtml;
+  if (implied) {
+    // an `<html>` that is not displayed has no background to give
+    if (implied.display === 'none') return null;
+    if (has(implied)) return { style: implied, source: null, anchor: root };
+    // containment on either keeps the body's to the body (CSS Containment 2)
+    if (implied.contain || root.style.contain) return null;
+    return has(root.style)
+      ? { style: root.style, source: root, anchor: root }
+      : null;
+  }
   const top = childNamed(root, 'html') ?? root;
-  if (has(top)) return { source: top, anchor: top };
+  if (has(top.style)) return { style: top.style, source: top, anchor: top };
   const body = childNamed(top, 'body');
-  // containment on either keeps the body's to the body (CSS Containment 2)
   if (!body || top.style.contain || body.style.contain) return null;
-  return has(body) ? { source: body, anchor: top } : null;
+  return has(body.style)
+    ? { style: body.style, source: body, anchor: top }
+    : null;
 }
 
 /** A box's child element of that name, or one inside the anonymous boxes
@@ -450,7 +475,7 @@ function childNamed(box: Box, name: string): Box | null {
 
 function paintCanvas(
   ctx: PaintContext,
-  { source, anchor }: { source: Box; anchor: Box },
+  { style: source, anchor }: CanvasBackground,
   root: Box,
   options: PaintOptions,
 ): void {
@@ -468,8 +493,8 @@ function paintCanvas(
     Math.ceil(whole.height),
   );
   if (!area) return;
-  const layers = layersOf(source.style) ?? [source.style];
-  const visible = source.style.visibility === 'visible';
+  const layers = layersOf(source) ?? [source];
+  const visible = source.visibility === 'visible';
   for (let i = layers.length - 1; i >= 0; i -= 1) {
     const style = layers[i];
     if (!isTransparent(style.backgroundColor) && visible) {
@@ -568,20 +593,37 @@ function paintLayers(
   image?: (layer: ComputedStyle) => void,
 ): void {
   // a background painted through the text is painted with it
-  // (`paintClippedText`), and not as a box
-  if (box.style.backgroundClipText) return;
-  const layers = layersOf(box.style);
+  // (`paintClippedText`), and not as a box — but for what `border-area
+  // text` paints in the border as well
+  const style = box.style;
+  if (style.backgroundClipText && style.backgroundClip !== 'border-area') {
+    return;
+  }
+  const layers = layersOf(style);
   if (!layers) {
-    paintBackground(ctx, box, options, box.style);
-    if (image && box.style.backgroundImage) image(box.style);
+    paintLayer(ctx, box, options, style, image);
     return;
   }
   for (let i = layers.length - 1; i >= 0; i -= 1) {
-    paintBackground(ctx, box, options, layers[i]);
-    if (image && layers[i].backgroundImage) image(layers[i]);
+    paintLayer(ctx, box, options, layers[i], image);
   }
 }
 
+function paintLayer(
+  ctx: PaintContext,
+  box: Frame,
+  options: PaintOptions,
+  layer: ComputedStyle,
+  image?: (layer: ComputedStyle) => void,
+): void {
+  // painted over the border box, inside what the border paints
+  const area = layer.backgroundClip === 'border-area';
+  if (area && !pushBorderArea(ctx, box, options)) return;
+  paintBackground(ctx, box, options, layer);
+  if (image && layer.backgroundImage) image(layer);
+  if (area) ctx.restore();
+}
+
 /** A box's padding box in window coordinates. */
 function paddingBox(box: Box, options: PaintOptions): Rect {
   return {
@@ -837,22 +879,7 @@ function paintOwnBackground(
   const style = box.style;
   if (style.boxShadow) paintShadows(ctx, box, options, false);
   if (box !== options.canvasSource) {
-    paintLayers(ctx, box, options, (layer) => {
-      const painted = clipArea(box, options, layer, true);
-      const area =
-        painted &&
-        clampRect(options, painted.x, painted.y, painted.w, painted.h);
-      if (area) {
-        paintBackgroundImage(
-          ctx,
-          layer,
-          area,
-          originBox(box, options, layer),
-          options,
-          painted.corners,
-        );
-      }
-    });
+    paintLayers(ctx, box, options, frameImages(ctx, box, options));
   }
   if (style.boxShadow) paintShadows(ctx, box, options, true);
   if (!box.bordersCollapsed && !paintBorderImage(ctx, box, options)) {
@@ -861,6 +888,34 @@ function paintOwnBackground(
   if (box.kind === 'table') paintPartBackgrounds(ctx, box, options);
 }
 
+/**
+ * How `paintLayers` draws a frame's image layers: each in the area its
+ * `background-clip` names, from the box its `background-origin` names
+ * (CSS Backgrounds 3, 3.7 and 3.8) — a block's, or an inline box's
+ * fragment's, whose background is its images as much as its colour.
+ */
+function frameImages(
+  ctx: PaintContext,
+  frame: Frame,
+  options: PaintOptions,
+): (layer: ComputedStyle) => void {
+  return (layer) => {
+    const painted = clipArea(frame, options, layer, true);
+    const area =
+      painted && clampRect(options, painted.x, painted.y, painted.w, painted.h);
+    if (area) {
+      paintBackgroundImage(
+        ctx,
+        layer,
+        area,
+        originBox(frame, options, layer),
+        options,
+        painted.corners,
+      );
+    }
+  };
+}
+
 /** How far past its shape a shadow's blur shows: three standard deviations,
  *  the blur being two (CSS Backgrounds 3, 7.1.1). */
 function shadowReach(blur: number): number {
@@ -1634,12 +1689,13 @@ function spreadCorners(
 }
 
 /** How far in from a box's border box the box a `<visual-box>` names is:
- *  top, right, bottom and left. */
+ *  top, right, bottom and left — none for `border-area`, whose layer is
+ *  painted over the border box inside what the border paints. */
 function edgeInsets(
   box: Frame,
-  which: VisualBox,
+  which: BackgroundClip,
 ): readonly [number, number, number, number] {
-  if (which === 'border-box') return NO_INSETS;
+  if (which === 'border-box' || which === 'border-area') return NO_INSETS;
   const t = box.borderTop;
   const r = box.borderRight;
   const b = box.borderBottom;
@@ -3559,6 +3615,94 @@ function roundedRing(
   return true;
 }
 
+/**
+ * Clip to what a box's border paints, for a layer of `background-clip:
+ * border-area` (CSS Backgrounds 4, 2.1): each side's width and style, and
+ * not its colour — a transparent border still has an area, which is what
+ * the value is for. The shapes are the border painter's own, so that the
+ * background shows exactly where that border would: the ring `roundedRing`
+ * fills where a rounded border is solid, the ring the trapezoids of a 3D
+ * style make, and otherwise the rectangles `fillEdge` fills a side at a
+ * time — the dots, the dashes, the two lines of a double border. All of
+ * them run clockwise and a ring's inside the other way, so the clip is the
+ * union by the non-zero rule, the one every context's `clip` takes. False
+ * where the border paints nothing or the context cannot clip, and nothing
+ * is pushed.
+ */
+function pushBorderArea(
+  ctx: PaintContext,
+  box: Frame,
+  options: PaintOptions,
+): boolean {
+  const t = box.borderTop;
+  const r = box.borderRight;
+  const b = box.borderBottom;
+  const l = box.borderLeft;
+  if (!(t || r || b || l) || !ctx.beginPath || !ctx.rect || !ctx.clip) {
+    return false;
+  }
+  const s = box.style;
+  const left = box.x + options.originX;
+  const top = frameY(box) + options.originY;
+  const x = Math.round(left);
+  const y = Math.round(top);
+  const w = Math.round(left + box.width) - x;
+  const h = Math.round(top + frameHeight(box)) - y;
+  if (w <= 0 || h <= 0) return false;
+  const area = clampRect(options, x, y, w, h);
+  if (!area) return false;
+  const corners = cornersOf(s, w, h);
+  ctx.save();
+  ctx.beginPath();
+  if (corners && canCurve(ctx) && solidBorder(box)) {
+    roundedRect(ctx, area.x, area.y, area.w, area.h, corners, true);
+    const iw = area.w - l - r;
+    const ih = area.h - t - b;
+    if (iw > 0 && ih > 0) {
+      const inner = insetCorners(corners, t, r, b, l);
+      roundedRect(ctx, area.x + l, area.y + t, iw, ih, inner, true, true);
+    }
+  } else if (sculpted(s)) {
+    // a band a side, which the trapezoids cover between them
+    ctx.rect(area.x, area.y, area.w, t);
+    ctx.rect(area.x, area.y + area.h - b, area.w, b);
+    ctx.rect(area.x, area.y + t, l, area.h - t - b);
+    ctx.rect(area.x + area.w - r, area.y + t, r, area.h - t - b);
+  } else {
+    const path = { fillRect: ctx.rect.bind(ctx) };
+    const edge = (
+      ex: number,
+      ey: number,
+      ew: number,
+      eh: number,
+      style: ComputedStyle['borderTopStyle'],
+      horizontal: boolean,
+    ): void => {
+      const rect = clampRect(options, ex, ey, ew, eh);
+      if (rect) fillEdge(path, rect, horizontal ? ex : ey, style, horizontal);
+    };
+    const between = h - t - b;
+    if (t > 0) edge(x, y, w, t, s.borderTopStyle, true);
+    if (b > 0) edge(x, y + h - b, w, b, s.borderBottomStyle, true);
+    if (l > 0) edge(x, y + t, l, between, s.borderLeftStyle, false);
+    if (r > 0) edge(x + w - r, y + t, r, between, s.borderRightStyle, false);
+  }
+  ctx.clip();
+  return true;
+}
+
+/** Whether every side a box has a border on is solid, which a rounded box
+ *  draws as one ring (`roundedRing`). */
+function solidBorder(box: Frame): boolean {
+  const s = box.style;
+  return (
+    (!box.borderTop || s.borderTopStyle === 'solid') &&
+    (!box.borderRight || s.borderRightStyle === 'solid') &&
+    (!box.borderBottom || s.borderBottomStyle === 'solid') &&
+    (!box.borderLeft || s.borderLeftStyle === 'solid')
+  );
+}
+
 /** The border styles drawn in two shades, as though lit from the top left. */
 const SCULPTED = new Set(['groove', 'ridge', 'inset', 'outset']);
 
@@ -3757,7 +3901,7 @@ function paintCollapsedBorders(
 }
 
 function fillEdge(
-  ctx: PaintContext,
+  ctx: Pick<FillContext, 'fillRect'>,
   rect: { x: number; y: number; w: number; h: number },
   phaseOrigin: number,
   style: ComputedStyle['borderTopStyle'],
@@ -3994,6 +4138,17 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
       if (line.y >= bottom) break;
       if (line.y + line.height > top) visible.push(line);
     }
+    // and a line the damage misses whose text or inline-block `position:
+    // relative` moved into it: drawn by its line, it went undrawn with it
+    const moved = MOVED_OFF_LINES.get(lines);
+    if (moved && reachedOff(visible, moved, top, bottom)) {
+      const drawn = new Set(visible);
+      for (const line of moved) {
+        if (movedInto(line, top, bottom)) drawn.add(line);
+      }
+      visible.length = 0;
+      for (const line of lines) if (drawn.has(line)) visible.push(line);
+    }
   } else {
     visible.push(...lines);
   }
@@ -4060,6 +4215,39 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
   }
 }
 
+/** Whether any of the lines moved content was taken off, and the damage
+ *  does not already draw, has it within the damage's rows. */
+function reachedOff(
+  visible: readonly LineBox[],
+  moved: ReadonlySet<LineBox>,
+  top: number,
+  bottom: number,
+): boolean {
+  for (const line of moved) {
+    if (!visible.includes(line) && movedInto(line, top, bottom)) return true;
+  }
+  return false;
+}
+
+/** Whether what was moved off a line — its inline-blocks and images, where
+ *  their ink is, and its texts, where they are drawn — reaches the rows
+ *  between `top` and `bottom`. */
+function movedInto(line: LineBox, top: number, bottom: number): boolean {
+  for (const placed of line.atomics) {
+    const box = placed.box;
+    if (box.boundsY < bottom && box.boundsY + box.boundsHeight > top) {
+      return true;
+    }
+  }
+  for (const text of line.texts) {
+    const natural = text.layout.lines[text.layoutLine];
+    if (!natural) continue;
+    const y = text.drawY + natural.y;
+    if (y < bottom && y + natural.height > top) return true;
+  }
+  return false;
+}
+
 /** An inline box's fragment whose padding or border reaches up over the
  *  lines before its own, and where its own line starts. */
 interface Bleed {
@@ -4091,7 +4279,7 @@ function paintBleeds(
     ctx.beginPath();
     ctx.rect(left, top, Math.ceil(fragment.width) + 2, bottom - top);
     ctx.clip();
-    paintLayers(ctx, fragment, options);
+    paintLayers(ctx, fragment, options, frameImages(ctx, fragment, options));
     paintBorders(ctx, fragment, options);
     ctx.restore();
   }
@@ -4615,7 +4803,10 @@ function paintInlineBoxes(
       style,
     };
     if (fragment.width <= 0) continue;
-    paintLayers(ctx, fragment, options);
+    // its images from its own padding box, as its gradients are, each
+    // fragment alike: `slice` would lay them out as though the fragments
+    // were one box end to end, which a box on one line is
+    paintLayers(ctx, fragment, options, frameImages(ctx, fragment, options));
     paintBorders(ctx, fragment, options);
     if (box.style.outlineStyle !== 'none') paintOutline(ctx, fragment, options);
     if (bleeds && fragment.y < line.y - 0.5) {

package/src/html/svg.ts

@@ -83,24 +83,32 @@ export function svgSizeHint(value: string): string | null {
   return m[2] ? v : `${parseFloat(m[1])}px`;
 }
 
-/** A percentage length as a fraction, or 1 for anything else. */
-function percentOf(value: string | undefined): number {
-  const v = value?.trim();
-  if (!v?.endsWith('%')) return 1;
-  const n = parseFloat(v);
-  return Number.isFinite(n) && n >= 0 ? n / 100 : 1;
-}
-
-function viewBoxOf(el: Element): [number, number, number, number] | null {
+function viewBoxParts(el: Element): [number, number, number, number] | null {
   const parts = (svgAttr(el, 'viewBox') ?? '')
     .trim()
     .split(/[\s,]+/)
     .map(Number);
   if (parts.length !== 4 || !parts.every(Number.isFinite)) return null;
-  // a zero or negative extent is an error: as though there were none
-  return parts[2] > 0 && parts[3] > 0
-    ? [parts[0], parts[1], parts[2], parts[3]]
-    : null;
+  return [parts[0], parts[1], parts[2], parts[3]];
+}
+
+function viewBoxOf(el: Element): [number, number, number, number] | null {
+  const parts = viewBoxParts(el);
+  // a zero or negative extent: as though there were none (see `drawsNothing`)
+  return parts && parts[2] > 0 && parts[3] > 0 ? parts : null;
+}
+
+/** Whether a `viewBox` with a zero width or height disables the drawing,
+ *  as SVG has it: a negative one is an error and as though there were no
+ *  `viewBox`, but a zero one is a drawing of nothing. */
+function drawsNothing(el: Element): boolean {
+  const parts = viewBoxParts(el);
+  return (
+    parts !== null &&
+    parts[2] >= 0 &&
+    parts[3] >= 0 &&
+    (parts[2] === 0 || parts[3] === 0)
+  );
 }
 
 /**
@@ -210,6 +218,7 @@ export class SvgDrawing {
     // the mock backend has no path API, and SvgView draws paths
     if (!ctx.beginPath || !ctx.rect || !ctx.clip || !ctx.fill) return;
     const root = this._root;
+    if (drawsNothing(root)) return;
     if (this._standalone) {
       // the root's background is the canvas's, and an image's canvas is
       // all of the rectangle, wherever its viewport and `viewBox` put the
@@ -222,12 +231,14 @@ export class SvgDrawing {
         ctx.fillRect(x, y, w, h);
         ctx.restore();
       }
-      // an image's root is sized in the rectangle it is drawn into, which
-      // is its viewport: `width="40%"` is two fifths of it. An inline one's
-      // percentages are its box's, already (`svgSizeHint`).
-      w *= percentOf(svgAttr(root, 'width'));
-      h *= percentOf(svgAttr(root, 'height'));
-      if (!(w > 0 && h > 0)) return;
+      // An image's root fills the rectangle it is drawn into, whatever its
+      // own `width` and `height` say: they are what its intrinsic size was
+      // read from (`svgIntrinsics`), and the rectangle is the concrete size
+      // the image was then given — a background's tile, an `<img>`'s box.
+      // Blink sizes an SVG embedded as an image to its container the same
+      // way. Drawn as two fifths of it, `width="40%"` left the rest of a
+      // `background-size: contain` empty. An inline root's percentages are
+      // its box's, already (`svgSizeHint`).
     }
     const box = viewBoxOf(root);
     // the viewport in user units, which a percentage is of

package/src/internal/codelines.ts

@@ -0,0 +1,200 @@
+// Code drawn as a column of blocks of lines, under `<Code>` and
+// `<Markdown>`'s fences.
+//
+// One `<richtext>` for a whole block of code is laid out whole whenever any
+// of it changes, and a code block that streams — a model writing a fence a
+// token at a time, a log of source — changes at its end every time: 0.4 s
+// for a line appended to 5,000 in either component. As blocks, a change
+// lays out the blocks it touches. The runs are tokenized afresh on every
+// change, so a block is kept by what it holds rather than by identity: while
+// its runs are the same text in the same styles, its element is the one
+// already drawn.
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { Style } from 'react-x11/style';
+
+import { RICHTEXT_ELEMENT } from '../richtext/index.js';
+import type { RichTextProps, TextRun } from '../richtext/index.js';
+
+const h = React.createElement;
+
+/** Lines a block of code holds. */
+export const CODE_BLOCK_LINES = 256;
+
+/**
+ * Runs split into blocks of `lines` whole lines: the text cut at every
+ * `lines`th newline, that newline left out, so the blocks stacked are the
+ * text again. A newline that ends the whole text stays in its block, where
+ * it draws the empty last line it always drew.
+ */
+export function codeBlocks(
+  runs: readonly TextRun[],
+  lines = CODE_BLOCK_LINES,
+): TextRun[][] {
+  let last = runs.length - 1;
+  while (last >= 0 && runs[last]!.text === '') last--;
+  const blocks: TextRun[][] = [];
+  let block: TextRun[] = [];
+  let count = 0;
+  for (let r = 0; r < runs.length; r++) {
+    const run = runs[r]!;
+    let from = 0;
+    let search = 0;
+    for (;;) {
+      const nl = run.text.indexOf('\n', search);
+      if (nl < 0) break;
+      search = nl + 1;
+      if (++count < lines) continue;
+      // the text's own last newline is a line of its own, and stays
+      if (r === last && nl === run.text.length - 1) break;
+      if (nl > from) block.push(piece(run, from, nl));
+      blocks.push(block);
+      block = [];
+      count = 0;
+      from = nl + 1;
+    }
+    if (from < run.text.length) {
+      block.push(from === 0 ? run : piece(run, from, run.text.length));
+    }
+  }
+  blocks.push(block);
+  return blocks;
+}
+
+function piece(run: TextRun, from: number, to: number): TextRun {
+  return { ...run, text: run.text.slice(from, to) };
+}
+
+/** Whether two runs are the same text in the same style, field for field. */
+function sameRun(a: TextRun, b: TextRun): boolean {
+  if (a === b) return true;
+  const x = a as unknown as Record<string, unknown>;
+  const y = b as unknown as Record<string, unknown>;
+  for (const key in x) if (x[key] !== y[key]) return false;
+  for (const key in y) if (!(key in x) && y[key] !== undefined) return false;
+  return true;
+}
+
+function sameRuns(a: readonly TextRun[], b: readonly TextRun[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (!sameRun(a[i]!, b[i]!)) return false;
+  return true;
+}
+
+function sameStyle(a: Style, b: Style): boolean {
+  return sameRun(a as unknown as TextRun, b as unknown as TextRun);
+}
+
+export interface CodeLinesProps {
+  runs: readonly TextRun[];
+  /** Every block's style, compared by value: a style object built afresh
+   *  each render keeps the blocks. */
+  style: Style;
+  /** `false` lays each block out unwrapped, as `<richtext>` takes it. */
+  wrap?: boolean;
+}
+
+/** The blocks' elements from the last render, and what they were built of. */
+interface Kept {
+  style: Style;
+  wrap: boolean | undefined;
+  blocks: TextRun[][];
+  elements: ReactElement[];
+}
+
+/**
+ * The runs of a block of code, drawn as blocks of lines (`codeBlocks`),
+ * each a `<richtext>` kept while its runs are the same. A selection runs
+ * across the blocks and copies as one text, since core joins text elements
+ * stacked one above the other with a newline.
+ */
+export function CodeLines(props: CodeLinesProps): ReactElement {
+  const { style, wrap } = props;
+  const kept = React.useRef<Kept | null>(null);
+  const was =
+    kept.current &&
+    kept.current.wrap === wrap &&
+    sameStyle(kept.current.style, style)
+      ? kept.current
+      : null;
+  const blocks = codeBlocks(props.runs);
+  const elements = blocks.map((block, i) => {
+    const before = was?.blocks[i];
+    if (before && sameRuns(before, block)) {
+      blocks[i] = before;
+      return was.elements[i]!;
+    }
+    const blockProps: RichTextProps = { runs: block, style };
+    if (wrap === false) blockProps.wrap = false;
+    return h(RICHTEXT_ELEMENT, {
+      key: i,
+      ...blockProps,
+    } as Record<string, unknown>);
+  });
+  kept.current = { style, wrap, blocks, elements };
+  return h(React.Fragment, null, ...elements);
+}
+
+export interface CodeGutterProps {
+  /** Lines in the code beside it. */
+  lines: number;
+  /** How a number is set: the code's family and size, a dimmer colour. */
+  run: Omit<TextRun, 'text'>;
+  style: Style;
+}
+
+/**
+ * The line numbers beside `CodeLines`, blocked the same way so that the two
+ * stay in register a block at a time, and a number not rebuilt for a line
+ * appended far below it. Each number is followed by a newline, the last as
+ * well, as the gutter always was.
+ */
+export function CodeGutter(props: CodeGutterProps): ReactElement {
+  const { lines, run, style } = props;
+  const kept = React.useRef<{
+    run: Omit<TextRun, 'text'>;
+    style: Style;
+    byStart: Map<string, ReactElement>;
+  } | null>(null);
+  if (
+    !kept.current ||
+    !sameRun(kept.current.run as TextRun, run as TextRun) ||
+    !sameStyle(kept.current.style, style)
+  ) {
+    kept.current = { run, style, byStart: new Map() };
+  }
+  const byStart = kept.current.byStart;
+  const elements: ReactElement[] = [];
+  const used = new Set<string>();
+  for (let start = 0; start < lines || start === 0; start += CODE_BLOCK_LINES) {
+    const end = Math.min(start + CODE_BLOCK_LINES, lines);
+    const key = `${start}:${end}`;
+    used.add(key);
+    let element = byStart.get(key);
+    if (!element) {
+      const runs: TextRun[] = [];
+      for (let i = start; i < end; i++) {
+        runs.push({ ...run, text: `${i + 1}\n` } as TextRun);
+      }
+      // the newline that ends a block is the gap to the next one
+      if (end < lines && runs.length > 0) {
+        const tail = runs[runs.length - 1]!;
+        runs[runs.length - 1] = { ...tail, text: tail.text.slice(0, -1) };
+      }
+      element = h(RICHTEXT_ELEMENT, {
+        key: start,
+        // The numbering is chrome, not text: `selectable={false}` keeps it
+        // out of a drag and out of the copied text.
+        selectable: false,
+        runs,
+        wrap: false,
+        style,
+      } as Record<string, unknown>);
+      byStart.set(key, element);
+    }
+    elements.push(element);
+    if (lines === 0) break;
+  }
+  for (const key of byStart.keys()) if (!used.has(key)) byStart.delete(key);
+  return h(React.Fragment, null, ...elements);
+}