@react-x11/components 0.8.0 → 0.10.0

package/src/markdown/index.ts

@@ -10,8 +10,10 @@
 // pipeline is remark → rehype → DOM with Tailwind classes — an HTML pass
 // and a DOM renderer, neither of which exists here. What was worth taking
 // was taken: its `remend` package's unterminated-markdown behaviour is
-// implemented natively by `parse.ts`, as parser tolerance rather than a
-// repair pre-pass (one pass instead of repair-then-reparse).
+// implemented natively by `src/internal/markdown/parse.ts`, as parser
+// tolerance rather than a repair pre-pass (one pass instead of
+// repair-then-reparse). The parser is shared with `<RichTextEditor>`, which
+// reads and writes the same markdown this renders.
 //
 // So: `parse.ts` → AST → this file renders `<box>` structure with one
 // `<richtext>` per run of inline text, inside one `selectable` root. During
@@ -51,7 +53,7 @@ import type {
   InlineNode,
   ListBlock,
   TableBlock,
-} from './ast.js';
+} from '../internal/markdown/ast.js';
 import {
   registerRichText,
   RICHTEXT_ELEMENT,
@@ -67,14 +69,15 @@ import {
 import type { CodeBlockLook } from '../codeblock/index.js';
 import type { Language } from '../code-language/index.js';
 
-import { parse } from './parse.js';
+import { parse } from '../internal/markdown/parse.js';
 import { evaluator, resolveExpressions } from './expressions.js';
 import type { Evaluate } from './expressions.js';
-import { SPREAD_PREFIX } from './ast.js';
+import { SPREAD_PREFIX } from '../internal/markdown/ast.js';
 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,
@@ -85,11 +88,11 @@ export type {
   InlineNode,
   Document as MarkdownDocument,
   ParseOptions,
-} from './ast.js';
-export { SPREAD_PREFIX } from './ast.js';
-export { scanTag } from './tags.js';
-export type { ScannedTag, ScanResult } from './tags.js';
-export { parse, parseInline } from './parse.js';
+} from '../internal/markdown/ast.js';
+export { SPREAD_PREFIX } from '../internal/markdown/ast.js';
+export { scanTag } from '../internal/markdown/tags.js';
+export type { ScannedTag, ScanResult } from '../internal/markdown/tags.js';
+export { parse, parseInline } from '../internal/markdown/parse.js';
 
 const h = React.createElement;
 
@@ -190,7 +193,8 @@ export interface MarkdownProps {
    * usual case.
    *
    * Block position only: a tag on its own line(s) is a component, and one in
-   * the middle of a sentence is still text. See `ComponentInline` in ast.ts.
+   * the middle of a sentence is still text. See `ComponentInline` in
+   * src/internal/markdown/ast.ts.
    *
    * Give the map a stable identity — a new object per render defeats the
    * block cache, the same way a new `fences` map does.
@@ -362,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':
@@ -375,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),
       });
     }
 
@@ -507,7 +516,7 @@ function renderCode(
         flexDirection: 'column',
       },
     },
-    richtext('code', runs, codeTextStyle(code), false),
+    richtext('code', runs, codeTextStyle(code, false), false),
   );
 }
 
@@ -550,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);
@@ -595,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
@@ -642,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,
+        }),
       ),
     );
 
@@ -693,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;
 }
 
 /**
@@ -722,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);
@@ -757,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
@@ -771,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
@@ -809,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,
@@ -824,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

@@ -1,7 +1,7 @@
 // Inline AST → the styled runs `<richtext>` renders. Pure: all the colour
 // and font decisions arrive in `InlineStyles`, which `index.ts` derives
 // from the theme once per render.
-import type { InlineNode } from './ast.js';
+import type { InlineNode } from '../internal/markdown/ast.js';
 import type { TextRun } from '../richtext/node.js';
 
 /** The resolved look of inline text, for one block. */
@@ -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/media-player/index.ts

@@ -32,12 +32,13 @@ import React, {
   useState,
 } from 'react';
 import type { ReactElement, ReactNode, Ref } from 'react';
-import { useTheme } from 'react-x11';
+import { useApp, useTheme } from 'react-x11';
 import type { ForeignProps } from 'react-x11';
 import type { Style } from 'react-x11/style';
 
 import {
   BackendUnavailableError,
+  canHostXEmbed,
   resolveBackend,
   useEmbeddedClient,
 } from '../embed/index.js';
@@ -129,10 +130,13 @@ export interface MediaPlayerProps {
   onPlayingChange?: (playing: boolean) => void;
   /** The player process ended. */
   onExit?: (info: ExitInfo) => void;
-  /** Spawn failures, control-channel failures, and the
-   *  `BackendUnavailableError` for a machine with neither player installed. */
+  /** Spawn failures, control-channel failures, the `BackendUnavailableError`
+   *  for a machine with neither player installed, and the
+   *  `EmbedUnsupportedError` for a react-x11 backend that cannot embed a
+   *  player's window at all. */
   onError?: (err: Error) => void;
-  /** Rendered instead of the surface when no backend is installed. */
+  /** Rendered instead of the surface when no player is available — none
+   *  installed, or none can be embedded on this react-x11 backend. */
   fallback?: ReactNode;
   /** False holds off spawning entirely. */
   enabled?: boolean;
@@ -164,6 +168,11 @@ export interface MediaPlayerProps {
  *
  * The player's window stacks above everything drawn in this one, so nothing 2D
  * can overlap it — see "Controls" at the top of this file.
+ *
+ * **X11 only.** Both players are embedded by window id, which is XEmbed's
+ * mechanism; on a react-x11 backend with none — the native macOS one — the
+ * player is `'unavailable'` from the first render and `fallback` shows,
+ * rather than a player spawned at a window id that does not exist.
  */
 export function MediaPlayer(props: MediaPlayerProps): ReactElement {
   const {
@@ -174,6 +183,7 @@ export function MediaPlayer(props: MediaPlayerProps): ReactElement {
     stopSignal,
   } = props;
   const theme = useTheme() as unknown as Record<string, unknown>;
+  const embeddable = canHostXEmbed(useApp());
 
   const control = useRef<PlayerControl | null>(null);
   // Bumped when a control channel opens or closes. The prop-syncing effects
@@ -358,6 +368,10 @@ export function MediaPlayer(props: MediaPlayerProps): ReactElement {
   if (client.status === 'unavailable' && props.fallback !== undefined) {
     return h(React.Fragment, null, props.fallback);
   }
+  // No XEmbed on this app, and no `fallback`: an empty box holds the layout
+  // rather than a `<foreign>` with no socket to be — see the same branch in
+  // `../terminal/index.ts`.
+  if (!embeddable) return hx('box', { style: styles });
 
   const foreign: ForeignElementProps = {
     onReady: client.handleReady,

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.
     }

package/src/qml/layouts.tsx

@@ -35,23 +35,38 @@ import {
   cancelAfterLayout,
   type LayoutTick,
 } from '../internal/timers.js';
+import { scaleOf } from '../internal/units.js';
 
 function isRow(inst: QmlInstance): boolean {
   return inst.typeInfo.name === 'RowLayout';
 }
 
-/** Reflect yoga's answers into the managed children's geometry slots. */
+/**
+ * Reflect yoga's answers into the managed children's geometry slots.
+ *
+ * `abs` is device pixels and the slots are the logical ones the document is
+ * written in (react-x11's docs/scale.md), and this is not only read-back:
+ * an author `width:` is the item's size hint and the slot this writes, so a
+ * device number here came back as a hint twice the size and the row drew
+ * it that way. Divided once, after the subtraction: `(a - b) / s` rounds
+ * once where `a / s - b / s` rounds three times, and at a scale of 1.25
+ * half the positions would read like 78.39999999999999 rather than 78.4.
+ * And from `abs` rather than `getClientRects()`, which answers nothing for
+ * a box with no area: a 0×0 item in a row still has an `x`.
+ */
 function feedbackLayout(inst: QmlInstance): void {
   if (inst.destroyed) return;
-  const containerAbs = hostNode(inst)?.abs;
+  const container = hostNode(inst);
+  const containerAbs = container?.abs;
   if (!containerAbs) return;
+  const s = scaleOf(container);
   for (const child of inst.visualChildren()) {
     const abs = hostNode(child)?.abs;
     if (!abs) continue; // a custom view without captureNode: skip quietly
-    child.slots.get('x')?.reflect(abs.x - containerAbs.x);
-    child.slots.get('y')?.reflect(abs.y - containerAbs.y);
-    child.slots.get('width')?.reflect(abs.width);
-    child.slots.get('height')?.reflect(abs.height);
+    child.slots.get('x')?.reflect((abs.x - containerAbs.x) / s);
+    child.slots.get('y')?.reflect((abs.y - containerAbs.y) / s);
+    child.slots.get('width')?.reflect(abs.width / s);
+    child.slots.get('height')?.reflect(abs.height / s);
   }
 }
 

package/src/qml/qtquick.tsx

@@ -40,6 +40,7 @@ import { layoutTypes } from './layouts.js';
 import { modelTypes } from './models.js';
 import { stateTypes } from './states.js';
 import { cancel, schedule, warn } from './globals.js';
+import { scaleOf } from '../internal/units.js';
 
 // Qt namespace constants used from expressions (`Qt.LeftButton`,
 // `mouse.modifiers & Qt.ShiftModifier`, `Qt.AlignHCenter`).
@@ -120,8 +121,14 @@ function TextView({ inst }: { inst: QmlInstance }): ReactElement {
     if (!node?.app?.fonts || !node.resolvedTextStyle) return;
     try {
       const layout = node.app.fonts.layout(text, node.resolvedTextStyle());
-      inst.slots.get('implicitWidth')?.assign(Math.ceil(layout.width));
-      inst.slots.get('implicitHeight')?.assign(Math.ceil(layout.height));
+      // The resolved size is the device one — the cascade resolves a
+      // theme's size once, at the root, in device pixels — so at scale 2 a
+      // `font.pixelSize: 20` is laid out at 40 and measured in device
+      // pixels. Divided back into the logical ones an implicit size is read
+      // in, or every binding on it reads double.
+      const s = scaleOf(node);
+      inst.slots.get('implicitWidth')?.assign(Math.ceil(layout.width / s));
+      inst.slots.get('implicitHeight')?.assign(Math.ceil(layout.height / s));
     } catch {
       // No fonts loaded (headless without the fonts option): leave 0.
     }