@react-x11/components 0.9.0 → 0.11.0

package/src/markdown/index.ts

@@ -62,7 +62,7 @@ import {
 import type { RichTextProps, TextRun } from '../richtext/index.js';
 import {
   codeBlockLook,
-  codeBlockRuns,
+  CodeBlockRunCache,
   codeBlockStyle,
   codeTextStyle,
 } from '../codeblock/index.js';
@@ -77,6 +77,8 @@ import { runsOf, plainTextOf } from './spans.js';
 import type { InlineStyles } from './spans.js';
 import { useLinkClicks } from '../richtext/index.js';
 import { hx } from './hx.js';
+import { CodeLines } from '../internal/codelines.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
 
 export type {
   AttributeValue,
@@ -365,7 +367,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 +385,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),
       });
     }
 
@@ -493,24 +500,57 @@ function renderCode(
       custom({ lang, text, partial: ctx.live === true }),
     );
   }
-  const code = ctx.look.code;
-  const runs = codeBlockRuns(text, code, {
+  return h(CodeFence, {
+    key,
+    text,
     lang,
+    look: ctx.look.code,
     highlight: ctx.look.highlight,
-    ...(ctx.resolveLanguage ? { resolveLanguage: ctx.resolveLanguage } : null),
+    resolveLanguage: ctx.resolveLanguage,
+  });
+}
+
+interface CodeFenceProps {
+  text: string;
+  lang: string;
+  look: CodeBlockLook;
+  highlight: boolean;
+  resolveLanguage?: MarkdownProps['resolveLanguage'];
+}
+
+/**
+ * A fenced block of code. A component rather than a render function so
+ * that it keeps a tokenizer between renders (`CodeBlockRunCache`): a fence
+ * being streamed is tokenized again from the line that changed, where it
+ * was tokenized whole for every token a model wrote.
+ */
+function CodeFence(props: CodeFenceProps): ReactElement {
+  const { text, lang, look, highlight, resolveLanguage } = props;
+  const cache = React.useRef<CodeBlockRunCache | null>(null);
+  cache.current ??= new CodeBlockRunCache();
+  React.useEffect(() => () => cache.current?.dispose(), []);
+  const runs = cache.current.runs(text, look, {
+    lang,
+    highlight,
+    ...(resolveLanguage ? { resolveLanguage } : null),
   });
   // The block scrolls horizontally rather than wrapping — code is code.
   return hx(
     'box',
     {
-      key,
       style: {
-        ...codeBlockStyle(code),
+        ...codeBlockStyle(look),
         overflow: 'scroll',
         flexDirection: 'column',
       },
     },
-    richtext('code', runs, codeTextStyle(code), false),
+    // in blocks of lines, so a fence that streams lays out the block its
+    // new lines land in (`../internal/codelines.ts`)
+    h(CodeLines, {
+      runs,
+      style: codeTextStyle(look, false),
+      wrap: false,
+    }),
   );
 }
 
@@ -553,38 +593,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);
@@ -595,34 +643,100 @@ function renderTable(
   ctx: RenderCtx,
   key: number,
 ): ReactNode {
-  const look = ctx.look;
+  return h(MarkdownTable, { key, table, look: ctx.look, fonts: ctx.fonts });
+}
+
+interface MarkdownTableProps {
+  table: TableBlock;
+  look: Look;
+  fonts: FontsMeasureLike | null;
+}
+
+/** What a table keeps between renders. */
+interface TableKept {
+  look: Look;
+  fonts: FontsMeasureLike | null;
+  /** Each cell's measured width, by what the cell holds. */
+  widthOf: Map<string, number>;
+  /** The column widths the rows were built at. */
+  widths: string;
+  /** Each row's element, by where it is and what it holds. */
+  rows: Map<string, ReactElement>;
+}
+
+/**
+ * A table. A component rather than a render function so that it keeps its
+ * rows between renders: a table that streams is a block whose source
+ * changes with every row, and it was measured cell by cell and rebuilt row
+ * by row for each — 115 ms a row at 800 rows, laying every row out again.
+ * Now a cell is measured once for what it holds, and a row keeps its
+ * element while it holds the same cells at the same column widths.
+ */
+function MarkdownTable(props: MarkdownTableProps): ReactElement {
+  const { table, look, fonts } = props;
   const size = look.inline.size;
   const padX = Math.round(size * 0.6);
+  const padY = Math.round(size * 0.35);
   const cols = table.align.length;
 
+  const keptRef = React.useRef<TableKept | null>(null);
+  if (
+    !keptRef.current ||
+    keptRef.current.look !== look ||
+    keptRef.current.fonts !== fonts
+  ) {
+    keptRef.current = {
+      look,
+      fonts,
+      widthOf: new Map(),
+      widths: '',
+      rows: new Map(),
+    };
+  }
+  const kept = keptRef.current;
+
   // Column widths: max-content per column, measured through the app's font
   // manager, capped so one long cell cannot starve the rest. Without a
   // font manager (the mock backend) an even fallback keeps the shape.
   const widths: number[] = new Array<number>(cols).fill(0);
-  const headStyles = inlineStyles(ctx, { weight: 700 });
-  const measure = (cells: InlineNode[][], s: InlineStyles): void => {
+  const headStyles: InlineStyles = { ...look.inline, weight: 700 };
+  const widthOf = new Map<string, number>();
+  const measure = (
+    cells: InlineNode[][],
+    s: InlineStyles,
+    head: boolean,
+  ): string[] => {
+    const keys: string[] = [];
     for (let c = 0; c < cols; c += 1) {
-      let w: number;
-      if (ctx.fonts) {
-        w = ctx.fonts.layout(runsOf(cells[c], s), {
-          family: s.family,
-          size: s.size,
-        }).width;
-      } else {
-        w = plainTextOf(cells[c]).length * size * 0.55;
+      const cellKey = `${head ? 'h' : 'b'}${JSON.stringify(cells[c])}`;
+      keys.push(cellKey);
+      let w = widthOf.get(cellKey) ?? kept.widthOf.get(cellKey);
+      if (w === undefined) {
+        if (fonts) {
+          w = fonts.layout(runsOf(cells[c], s), {
+            family: s.family,
+            size: s.size,
+          }).width;
+        } else {
+          w = plainTextOf(cells[c]).length * size * 0.55;
+        }
       }
+      widthOf.set(cellKey, w);
       widths[c] = Math.max(widths[c], Math.min(Math.ceil(w), size * 26));
     }
+    return keys;
   };
-  measure(table.header, headStyles);
-  for (const row of table.rows) measure(row, look.inline);
+  const headKeys = measure(table.header, headStyles, true);
+  const rowKeys = table.rows.map((row) => measure(row, look.inline, false));
+  kept.widthOf = widthOf;
   for (let c = 0; c < cols; c += 1)
     widths[c] = Math.max(widths[c] + padX * 2 + 2, size * 2.5);
+  // a column that grew is every row laid out again
+  const widthsKey = `${widths.join(',')}|${table.align.join(',')}`;
+  if (widthsKey !== kept.widths) {
+    kept.widths = widthsKey;
+    kept.rows = new Map();
+  }
 
   // Nothing here says "these are cells and those are rows": a copy reads the
   // boxes below, where two cells share a band of pixels and the next row
@@ -633,7 +747,7 @@ function renderTable(
     rowKey: string | number,
     bg?: string,
     divided?: boolean,
-  ): ReactNode =>
+  ): ReactElement =>
     hx(
       'box',
       {
@@ -645,38 +759,53 @@ 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,
+        }),
       ),
     );
 
-  const children: ReactNode[] = [];
-  children.push(renderRow(table.header, headStyles, 'h', look.headerBg));
-  table.rows.forEach((row, r) => {
-    children.push(renderRow(row, look.inline, r, undefined, true));
+  const rows = new Map<string, ReactElement>();
+  const row = (
+    id: string,
+    cellKeys: string[],
+    make: () => ReactElement,
+  ): ReactElement => {
+    const rowKey = `${id}|${cellKeys.join('|')}`;
+    const element = kept.rows.get(rowKey) ?? make();
+    rows.set(rowKey, element);
+    return element;
+  };
+  const children: ReactElement[] = [];
+  children.push(
+    row('h', headKeys, () =>
+      renderRow(table.header, headStyles, 'h', look.headerBg),
+    ),
+  );
+  table.rows.forEach((cells, r) => {
+    children.push(
+      row(String(r), rowKeys[r]!, () =>
+        renderRow(cells, look.inline, r, undefined, true),
+      ),
+    );
   });
+  kept.rows = rows;
 
   // A wide table scrolls inside its own viewport instead of forcing the
   // document wider (the root stays vertical-only).
   return hx(
     'box',
-    { key, style: { overflow: 'scroll', flexDirection: 'column' } },
+    { style: { overflow: 'scroll', flexDirection: 'column' } },
     hx(
       'box',
       {
@@ -696,14 +825,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 +866,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 +909,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 +930,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 +976,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 +1013,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.
     }