@react-x11/components 0.9.0 → 0.10.0

package/src/maps/tiles.ts

@@ -33,8 +33,8 @@
 import type { PreparedStyle } from './paint.js';
 import type { VectorTile } from './mvt.js';
 import { parseTile } from './mvt.js';
-import { tileKey } from './proj.js';
-import type { TileId } from './proj.js';
+import { BELOW, FILL_DEPTH, fillFromBelow, tileKey } from './proj.js';
+import type { TileCell, TileId } from './proj.js';
 import { pyramidOf } from './sources.js';
 import type { MapSource, TileData } from './sources.js';
 
@@ -247,6 +247,10 @@ export class TileCache {
   /** Bumped by a style change, which retires every surface without
    *  touching the data behind it. */
   private _generation = 0;
+  /** The key of every tile with a picture, and of its ancestors up to
+   *  `FILL_DEPTH` levels above it — see {@link descendantsWithSurface}.
+   *  Built when first asked, and dropped whenever a picture comes or goes. */
+  private _below: Set<string> | null = null;
 
   constructor(options: TileCacheOptions = {}) {
     this._options = options;
@@ -492,7 +496,8 @@ export class TileCache {
   }
 
   /**
-   * The finished **descendants** of a tile, and where each sits inside it.
+   * The finished **descendants** of a tile, where each sits inside it, and
+   * the gaps they leave.
    *
    * The mirror of {@link ancestorWithSurface}, and the half a map needs
    * when it zooms *out*: the tiles already in hand are then the target's
@@ -501,42 +506,64 @@ export class TileCache {
    * over it, which is exactly as odd as it sounds — until the coarser tile
    * has been fetched, rasterized and composited.
    *
-   * `depth` is how many levels down to look, and it is small on purpose: a
-   * level down is 4 tiles, two is 16, and beyond that the pieces are too
-   * small to be worth the composites.
+   * Each quarter of the square is taken from the nearest level that has it,
+   * down to `FILL_DEPTH` — see `fillFromBelow`. The first cut took one
+   * level for the whole square, the nearest with anything in it, and looked
+   * two down. Both left the view blank where a zoom out needs it most: the
+   * edges, where the level the map came from covers only part of a coarser
+   * tile and the rest is one level further down or nowhere; and a zoom out
+   * of more than two levels, which a flick of the wheel is.
+   *
+   * The search goes only where {@link _heldBelow} says there is something,
+   * so a hole with nothing under it — every tile of a zoom *in* — costs four
+   * lookups rather than three hundred.
    *
    * `generation` as for {@link ancestorWithSurface}.
    */
   descendantsWithSurface(
     source: MapSource,
     tile: TileId,
-    depth = 2,
     generation?: number,
-  ): { entry: CachedTile; x: number; y: number; span: number }[] {
-    for (let down = 1; down <= depth; down++) {
-      const span = 1 << down;
-      const found: { entry: CachedTile; x: number; y: number; span: number }[] =
-        [];
-      for (let dy = 0; dy < span; dy++) {
-        for (let dx = 0; dx < span; dx++) {
-          const entry = this._entries.get(
-            this.key(source, {
-              z: tile.z + down,
-              x: (tile.x << down) + dx,
-              y: (tile.y << down) + dy,
-            }),
-          );
-          if (entry?.shown && drawnFor(entry.shown, generation)) {
-            entry.lastUsed = this._frame;
-            found.push({ entry, x: dx, y: dy, span });
-          }
-        }
+  ): {
+    pieces: (TileCell & { tile: TileId; value: CachedTile })[];
+    gaps: TileCell[];
+  } {
+    const below = this._heldBelow();
+    const { pieces, gaps } = fillFromBelow(tile, FILL_DEPTH, (under) => {
+      const key = this.key(source, under);
+      if (!below.has(key)) return undefined;
+      const entry = this._entries.get(key);
+      if (entry?.shown && drawnFor(entry.shown, generation)) {
+        // Stamped, for the reason `ancestorWithSurface` gives.
+        entry.lastUsed = this._frame;
+        return entry;
+      }
+      return BELOW;
+    });
+    return { pieces, gaps };
+  }
+
+  /** The keys of every tile with a picture and of its ancestors up to
+   *  `FILL_DEPTH` levels above — so a search under a hole can tell where
+   *  there is nothing without asking for each tile there. A superset where
+   *  a picture is of another generation, which only costs the search a
+   *  level. */
+  private _heldBelow(): Set<string> {
+    if (this._below) return this._below;
+    const below = new Set<string>();
+    for (const entry of this._entries.values()) {
+      if (!entry.shown) continue;
+      below.add(entry.key);
+      let { z, x, y } = entry.tile;
+      for (let up = 1; up <= FILL_DEPTH && z > 0; up++) {
+        z--;
+        x >>= 1;
+        y >>= 1;
+        below.add(this.key(entry.data.source, { z, x, y }));
       }
-      // The nearest level that has anything wins: one level down is both
-      // the sharpest and the fewest composites.
-      if (found.length > 0) return found;
     }
-    return [];
+    this._below = below;
+    return below;
   }
 
   /**
@@ -612,6 +639,7 @@ export class TileCache {
     if (entry.shown) this._release(entry.shown);
     entry.shown = entry.drawing;
     entry.drawing = null;
+    this._below = null;
     return true;
   }
 
@@ -629,6 +657,7 @@ export class TileCache {
    * composited again, and otherwise kept until eviction got round to it.
    */
   swap(): void {
+    this._below = null;
     for (const entry of this._entries.values()) {
       if (entry.drawing && !drawnFor(entry.drawing, this._generation)) {
         this._release(entry.drawing);
@@ -746,7 +775,10 @@ export class TileCache {
   }
 
   private _dropSurface(entry: CachedTile): void {
-    if (entry.shown) this._release(entry.shown);
+    if (entry.shown) {
+      this._release(entry.shown);
+      this._below = null;
+    }
     if (entry.drawing) this._release(entry.drawing);
     entry.shown = null;
     entry.drawing = null;
@@ -780,6 +812,7 @@ export class TileCache {
     for (const data of this._data.values()) data.abort?.();
     this._data.clear();
     this._surfaceBytes = 0;
+    this._below = null;
   }
 
   /** Every entry — for a test, and for the `onTiles` diagnostic. */

package/src/maps/types.ts

@@ -26,6 +26,7 @@ export type {
   SymbolLayer,
   Zoomed,
 } from './style.js';
+export type { MapIcon } from './icons.js';
 
 /** Which renderer draws a map — see `<Map renderer>`. */
 export type MapRenderer = 'gl' | 'retained';
@@ -94,7 +95,9 @@ export interface MapFrameStats {
    *  What covers a hole while zooming *in*. */
   fromAncestor: number;
   /** …and how many from their finer descendants, scaled down. What covers
-   *  a hole while zooming *out*, where there is no ancestor to borrow. */
+   *  a hole while zooming *out*, where there is no ancestor to borrow.
+   *  Descendants cover what they can and an ancestor the gaps between them,
+   *  so a hole covered partly from each counts in both. */
   fromDescendant: number;
   /** Tiles still to rasterize (retained) or to build (GL) — non-zero means
    *  the map is still sharpening and another frame is already scheduled. */
@@ -369,11 +372,32 @@ export interface MapGlProps {
    */
   levelFade?: number;
   /**
-   * Trade detail for frame rate while the camera moves. `true` holds each
-   * moving frame to 12 ms; `{ budgetMs }` to another budget. When the camera
-   * settles the next frame draws everything again.
+   * Trade detail for frame rate while the camera moves. **On by default**,
+   * holding each moving frame to 12 ms; `{ budgetMs }` picks another budget
+   * and `false` turns it off. When the camera settles the next frame draws
+   * everything again.
+   *
+   * It is on by default because the alternative is a renderer that can take
+   * the whole thread: unbudgeted, a fly across ten zoom levels left the
+   * event loop unable to run a `setTimeout` for a second at a time, with
+   * nothing individually slow inside it. An app embedding a map should not
+   * have to know that to keep its own clock running.
    */
   adaptive?: boolean | { budgetMs?: number };
+  /**
+   * Place labels in every frame while the camera moves, and set a new
+   * name's text in the frame it is placed in, so the names always match
+   * the zoom on screen. Off by default: new names then wait until the zoom
+   * has been still for 120 ms, and arrive a readback later.
+   *
+   * What it costs: a zoom crosses several label sets, so names arrive and
+   * leave at every step of it (each fading, over 220 ms), and each new name
+   * is set on this thread in the frame that needs it — up to 8 ms a frame,
+   * the rest the frame after. Needs a text engine that sets a string
+   * synchronously (react-x11 2.21's layout coverage); on one that cannot,
+   * names still arrive a readback later, but are placed every frame.
+   */
+  labelsWhileMoving?: boolean;
   /** Build tiles' geometry on this many worker threads, so no frame pays
    *  for a tile arriving. `0` (the default) builds on this thread, a few
    *  milliseconds a frame. */

package/src/markdown/index.ts

@@ -77,6 +77,7 @@ import { runsOf, plainTextOf } from './spans.js';
 import type { InlineStyles } from './spans.js';
 import { useLinkClicks } from '../richtext/index.js';
 import { hx } from './hx.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
 
 export type {
   AttributeValue,
@@ -365,7 +366,12 @@ function renderBlocks(blocks: BlockNode[], ctx: RenderCtx): ReactNode[] {
   return blocks.map((b, i) => renderBlock(b, ctx, i));
 }
 
-function renderBlock(block: BlockNode, ctx: RenderCtx, key: number): ReactNode {
+function renderBlock(
+  block: BlockNode,
+  ctx: RenderCtx,
+  key: number,
+  first = key === 0,
+): ReactNode {
   const look = ctx.look;
   switch (block.type) {
     case 'paragraph':
@@ -378,7 +384,7 @@ function renderBlock(block: BlockNode, ctx: RenderCtx, key: number): ReactNode {
         weight: 700,
       });
       return richtext(key, runsOf(block.children, s), {
-        marginTop: key === 0 ? 0 : Math.round(look.blockGap * 0.6),
+        marginTop: first ? 0 : Math.round(look.blockGap * 0.6),
       });
     }
 
@@ -510,7 +516,7 @@ function renderCode(
         flexDirection: 'column',
       },
     },
-    richtext('code', runs, codeTextStyle(code), false),
+    richtext('code', runs, codeTextStyle(code, false), false),
   );
 }
 
@@ -553,38 +559,46 @@ function renderList(list: ListBlock, ctx: RenderCtx, key: number): ReactNode {
         ),
       );
     } else {
+      // the text itself, sized as the column the box around it used to be:
+      // a list is a few boxes per item, and at 600 KB there were 1,582 of
+      // these for yoga to lay out and absolutize on every width change
       marker = hx(
-        'box',
-        { selectable: false, style: markerStyle },
-        hx(
-          'text',
-          {
-            style: {
-              color: look.dim,
-              fontSize: look.inline.size,
-              fontFamily: look.inline.family,
-            },
+        'text',
+        {
+          selectable: false,
+          style: {
+            flexShrink: 0,
+            width: markerWidth,
+            color: look.dim,
+            fontSize: look.inline.size,
+            fontFamily: look.inline.family,
           },
-          list.ordered ? `${list.start + i}.` : '•',
-        ),
+        },
+        list.ordered ? `${list.start + i}.` : '•',
       );
     }
+    const only = item.children.length === 1 ? item.children[0] : undefined;
     return hx(
       'box',
       { key: i, style: STYLES.itemRow },
       marker,
-      hx(
-        'box',
-        {
-          style: {
-            ...STYLES.column,
-            gap: Math.round(look.blockGap * 0.4),
-            flexGrow: 1,
-            flexShrink: 1,
-          },
-        },
-        ...renderBlocks(item.children, ctx),
-      ),
+      // An item that is one paragraph — nearly every item — is the
+      // paragraph, taking the rest of the row; the column is for an item of
+      // several blocks, which needs the gap between them.
+      only?.type === 'paragraph'
+        ? richtext(0, runsOf(only.children, look.inline), STYLES.itemText)
+        : hx(
+            'box',
+            {
+              style: {
+                ...STYLES.column,
+                gap: Math.round(look.blockGap * 0.4),
+                flexGrow: 1,
+                flexShrink: 1,
+              },
+            },
+            ...renderBlocks(item.children, ctx),
+          ),
     );
   });
   return hx('box', { key, style: { ...STYLES.column, gap } }, ...items);
@@ -598,6 +612,7 @@ function renderTable(
   const look = ctx.look;
   const size = look.inline.size;
   const padX = Math.round(size * 0.6);
+  const padY = Math.round(size * 0.35);
   const cols = table.align.length;
 
   // Column widths: max-content per column, measured through the app's font
@@ -645,24 +660,19 @@ function renderTable(
           borderTopColor: divided ? look.border : undefined,
         },
       },
+      // A cell is its text. The padding it needs is a margin: the cell has
+      // no background or border of its own — the row paints both — so the
+      // space around the text looks the same either way, and there is no
+      // box per cell for yoga to lay out.
       ...cells.map((cell, c) =>
-        h(
-          'box',
-          {
-            key: c,
-            style: {
-              width: widths[c],
-              paddingLeft: padX,
-              paddingRight: padX,
-              paddingTop: Math.round(size * 0.35),
-              paddingBottom: Math.round(size * 0.35),
-            },
-          },
-          richtext('c', runsOf(cell, s), {
-            textAlign: table.align[c] ?? undefined,
-            flexGrow: 1,
-          }),
-        ),
+        richtext(c, runsOf(cell, s), {
+          textAlign: table.align[c] ?? undefined,
+          width: widths[c] - padX * 2,
+          marginLeft: padX,
+          marginRight: padX,
+          marginTop: padY,
+          marginBottom: padY,
+        }),
       ),
     );
 
@@ -696,14 +706,26 @@ function renderTable(
 const STYLES = {
   column: { flexDirection: 'column' },
   itemRow: { flexDirection: 'row' },
+  itemText: { flexGrow: 1, flexShrink: 1 },
   markerBox: { flexDirection: 'row', flexShrink: 0 },
 } as const satisfies Record<string, Style>;
 
 // --- the component ---------------------------------------------------------
 
+/** What the last render made for one top-level block. */
+interface RenderedBlock {
+  raw: string;
+  live: boolean;
+  first: boolean;
+  key: number;
+  element: ReactNode;
+}
+
 interface BlockCache {
   epoch: string;
-  map: Map<string, ReactNode>;
+  blocks: RenderedBlock[];
+  /** a key no block has had */
+  next: number;
 }
 
 /**
@@ -725,6 +747,14 @@ export function Markdown(props: MarkdownProps): ReactElement {
   // same widening `hx.ts` documents for the `theme` prop.
   const theme = useTheme() as unknown as Record<string, unknown>;
   const app = useApp() as { fonts?: FontsMeasureLike } | null;
+  // a document with code in it sets that code in the mono family, and its
+  // render is the head start (a fence or a code span needs a backtick or a
+  // tilde fence; an indented block is rare enough to find its own way)
+  useFontPrewarm(
+    source.includes('`') || source.includes('~~~')
+      ? (props.monoFamily ?? 'monospace')
+      : null,
+  );
 
   const links = useLinkClicks(onLink);
   const menu = useSelectionMenu(selectable);
@@ -760,12 +790,19 @@ export function Markdown(props: MarkdownProps): ReactElement {
     [scope],
   );
 
+  // The last parse, which the next one resumes from: an edit or a streamed
+  // chunk reads the blocks around the change, and a 600 KB document is not
+  // read again whole for one paragraph (ParseOptions.previous). Only ever a
+  // hint — a parse resumed from it answers what a parse from scratch would.
+  const lastParse = React.useRef<Document | null>(null);
   const doc: Document = React.useMemo(() => {
     const parsed = parse(source, {
       partial,
       ...(isComponent ? { isComponent } : null),
       ...(evaluate ? { expressions: true } : null),
+      ...(lastParse.current ? { previous: lastParse.current } : null),
     });
+    lastParse.current = parsed;
     // Expressions resolve to text here rather than during the render, so
     // every `runsOf` caller downstream keeps seeing an inline tree it
     // already understands. `raws` is carried through, so the block cache
@@ -774,10 +811,18 @@ export function Markdown(props: MarkdownProps): ReactElement {
     return evaluate ? resolveExpressions(parsed, evaluate) : parsed;
   }, [source, partial, isComponent, evaluate]);
 
-  // Per-block element cache, keyed on the block's raw source (+ whether it
-  // is the live tail). Streaming appends re-render only the block that
-  // changed; everything else is the same ReactElement, so React bails out
-  // and the retained nodes keep their layout caches.
+  // Per-block element cache: a block whose raw source is what it was (and
+  // is still the live tail, or not, and still first, or not) is the same
+  // ReactElement, so React bails out and the retained nodes keep their
+  // layout caches. Streaming appends re-render only the block that changed.
+  //
+  // Each block keeps its React key from one render to the next, found by
+  // lining the blocks up with the last render's from both ends: those the
+  // change left alone keep theirs, and the changed ones in the middle take
+  // the keys of the ones they replace, in order, so an edited paragraph is
+  // updated where it stands. Keyed by index, a paragraph inserted mid-way
+  // moved every block after it onto another block's key, and all of them
+  // were rendered and laid out again: a second, in a 600 KB document.
   const cacheRef = React.useRef<BlockCache | null>(null);
   const fonts = app?.fonts ?? null;
   // Neither the fences map nor `resolveLanguage` can be part of a string
@@ -812,13 +857,35 @@ export function Markdown(props: MarkdownProps): ReactElement {
   }
   const epoch = `${look.key}|${fonts ? 'f' : '-'}|${seamsRef.current.gen}`;
   if (!cacheRef.current || cacheRef.current.epoch !== epoch) {
-    cacheRef.current = { epoch, map: new Map() };
+    // the keys carry over, so a new epoch updates each block in place
+    cacheRef.current = {
+      epoch,
+      blocks: (cacheRef.current?.blocks ?? []).map((b) => ({
+        ...b,
+        element: undefined,
+      })),
+      next: cacheRef.current?.next ?? 0,
+    };
   }
   const cache = cacheRef.current;
 
   const children: ReactNode[] = [];
   {
-    const nextMap = new Map<string, ReactNode>();
+    const was = cache.blocks;
+    const n = doc.blocks.length;
+    let head = 0;
+    while (head < n && head < was.length && was[head].raw === doc.raws[head]) {
+      head += 1;
+    }
+    let tail = 0;
+    while (
+      tail < n - head &&
+      tail < was.length - head &&
+      was[was.length - 1 - tail].raw === doc.raws[n - 1 - tail]
+    ) {
+      tail += 1;
+    }
+    const kept: RenderedBlock[] = [];
     const ctx: RenderCtx = {
       look,
       fonts,
@@ -827,24 +894,39 @@ export function Markdown(props: MarkdownProps): ReactElement {
       components: props.components,
       ...(evaluate ? { evaluate } : null),
     };
-    for (let i = 0; i < doc.blocks.length; i += 1) {
-      const live = partial && i === doc.blocks.length - 1;
-      const cacheKey = `${i}|${live ? 'L' : '.'}|${doc.raws[i]}`;
-      const hit = cache.map.get(cacheKey) ?? nextMap.get(cacheKey);
-      if (hit !== undefined) {
-        children.push(hit);
-        nextMap.set(cacheKey, hit);
-        continue;
-      }
-      const element = renderBlock(
-        doc.blocks[i],
-        live ? { ...ctx, live } : ctx,
-        i,
-      );
+    for (let i = 0; i < n; i += 1) {
+      const raw = doc.raws[i];
+      const live = partial && i === n - 1;
+      const first = i === 0;
+      // the block this one stands for in the last render, if any
+      const before =
+        i < head
+          ? was[i]
+          : i >= n - tail
+            ? was[was.length - n + i]
+            : i < was.length - tail
+              ? was[i]
+              : undefined;
+      const key = before ? before.key : cache.next++;
+      const element =
+        before &&
+        before.element !== undefined &&
+        before.raw === raw &&
+        before.live === live &&
+        before.first === first
+          ? before.element
+          : renderBlock(
+              doc.blocks[i],
+              live ? { ...ctx, live } : ctx,
+              key,
+              first,
+            );
       children.push(element);
-      nextMap.set(cacheKey, element);
+      kept.push({ raw, live, first, key, element });
     }
-    cache.map = nextMap; // old entries fall away with the text that made them
+    // what the next render lines up against; the rest falls away with the
+    // text that made it
+    cache.blocks = kept;
   }
 
   const rootStyle: Style = {

package/src/markdown/spans.ts

@@ -88,6 +88,11 @@ function pushRun(
   out: TextRun[],
 ): void {
   if (text.length === 0) return;
+  // A tab in running text reads as a space, as HTML sets it, and each text
+  // engine draws U+0009 as whatever its font has for it: a box in ntk's
+  // fonts, CoreText's own stops 28 points apart. It is laid out as the
+  // space it reads as, the same length, so every offset holds.
+  if (text.includes('\t')) text = text.replace(/\t/g, ' ');
   const inLink = st.href !== undefined;
   const color = st.code ? s.codeColor : inLink ? s.linkColor : s.color;
   const run: TextRun = {

package/src/qml/containers.tsx

@@ -25,6 +25,7 @@ import {
 } from './view-utils.js';
 import { delegateExtras, resolveModel } from './models.js';
 import { warn } from './globals.js';
+import { scaleOf } from '../internal/units.js';
 
 // --- positioners -----------------------------------------------------------
 
@@ -126,7 +127,11 @@ function FlickableView({ inst }: { inst: QmlInstance }): ReactElement {
   useEffect(() => {
     const node = hostNode(inst) as ScrollableNode | null;
     if (!node || typeof node.scrollTo !== 'function') return;
-    if (node.scrollX !== cx || node.scrollY !== cy)
+    // The node's offsets are device pixels; `contentX`/`contentY`,
+    // `scrollTo` and `onScroll`'s payload are logical. Compared raw, every
+    // scroll the pane made came back to it as a `scrollTo` to where it was.
+    const s = scaleOf(node);
+    if (node.scrollX / s !== cx || node.scrollY / s !== cy)
       node.scrollTo({ x: cx, y: cy });
   }, [inst, cx, cy]);
   return (

package/src/qml/interaction.tsx

@@ -29,6 +29,7 @@ import {
   qmlColor,
   str,
 } from './view-utils.js';
+import { scaleOf } from '../internal/units.js';
 
 // --- Keys + focus ----------------------------------------------------------
 
@@ -56,6 +57,7 @@ interface PointerEventLike {
 interface WheelEventLike extends PointerEventLike {
   deltaX?: number;
   deltaY?: number;
+  smooth?: boolean;
 }
 
 // Qt's modifier flags, so `mouse.modifiers & Qt.ShiftModifier` reads as
@@ -130,6 +132,20 @@ export function keyFocusProps(inst: QmlInstance): Record<string, unknown> {
 
 // --- MouseArea -------------------------------------------------------------
 
+// The wheel, from react-x11's units into Qt's. react-x11 hands a handler
+// logical pixels, 48 to a notch (its `WheelEvent` declaration), positive
+// where the content advances: down, and right. Qt's `angleDelta` is eighths
+// of a degree, 120 to a notch, positive where the wheel turns away from the
+// user: up, and *left* — xcb's plugin maps button 6 to +120, and
+// `QWheelEvent::inverted` and `QAbstractSlider` both say a scroll to the
+// right is negative. (The QML WheelEvent page says "up/right"; every
+// platform plugin disagrees.) So both axes flip, and a notch down is -120.
+const ANGLE_PER_PX = 120 / 48;
+
+/** One axis of Qt's wheel from react-x11's: flipped, times `per`. */
+const qtWheelAxis = (px: number | undefined, per = 1): number =>
+  px ? -px * per : 0; // an axis that did not move is 0, not -0
+
 function MouseAreaView({ inst }: { inst: QmlInstance }): ReactElement {
   const enabled = inst.slot('enabled').peek() !== false;
   const hoverEnabled = inst.slot('hoverEnabled').peek() === true;
@@ -137,10 +153,16 @@ function MouseAreaView({ inst }: { inst: QmlInstance }): ReactElement {
   applyMotion(inst, style);
 
   const mouse = (e: PointerEventLike) => {
-    const abs = hostNode(inst)?.abs;
+    // `e.x` is logical and `abs` device (react-x11's docs/scale.md), so the
+    // area's origin is divided into the event's unit first. Not
+    // `getClientRects()`, the same box already divided: it answers nothing
+    // for a box with no area, and a 0×0 MouseArea still hears a click on a
+    // child that hangs outside it.
+    const node = hostNode(inst);
+    const s = scaleOf(node);
     return {
-      x: e.x - (abs?.x ?? 0),
-      y: e.y - (abs?.y ?? 0),
+      x: e.x - (node?.abs.x ?? 0) / s,
+      y: e.y - (node?.abs.y ?? 0) / s,
       button: e.button,
       modifiers: modifiersOf(e),
       accepted: true,
@@ -170,7 +192,18 @@ function MouseAreaView({ inst }: { inst: QmlInstance }): ReactElement {
     handlers.onWheel = (e: WheelEventLike) => {
       inst.emit('wheel', {
         ...mouse(e),
-        angleDelta: { x: e.deltaX ?? 0, y: e.deltaY ?? 0 },
+        angleDelta: {
+          x: qtWheelAxis(e.deltaX, ANGLE_PER_PX),
+          y: qtWheelAxis(e.deltaY, ANGLE_PER_PX),
+        },
+        // Pixels only where a device measured them — a touchpad, a
+        // high-resolution wheel: react-x11's `smooth`. A notch's 48 are a
+        // toolkit's choice rather than a measurement, so a notched wheel
+        // leaves (0, 0), as Qt's X11 plugin does, and a handler falls back
+        // to angleDelta the way Qt's docs tell it to.
+        pixelDelta: e.smooth
+          ? { x: qtWheelAxis(e.deltaX), y: qtWheelAxis(e.deltaY) }
+          : { x: 0, y: 0 },
       });
     };
     if (hoverEnabled) {
@@ -229,7 +262,11 @@ function useImplicitLineHeight(inst: QmlInstance, text: string): void {
         text || 'Mg',
         node.resolvedTextStyle(),
       );
-      inst.slots.get('implicitHeight')?.assign(Math.ceil(probe.height) + 8);
+      // Laid out at the resolved size, which is the device one (TextView,
+      // in qtquick.tsx), so the height is divided back into logical pixels.
+      inst.slots
+        .get('implicitHeight')
+        ?.assign(Math.ceil(probe.height / scaleOf(node)) + 8);
     } catch {
       // No fonts loaded (headless without the fonts option): leave 0.
     }