@react-x11/components 0.4.0 → 0.5.0

package/src/html/controls.ts

@@ -35,7 +35,10 @@ export interface ControlChrome {
   borderColor: string;
 }
 
-/** Where a control goes, in the element's own coordinate space. */
+/** Where a control goes, in the element's own coordinate space. Inside the
+ *  engine (`controlRectsOf`) these are device pixels like every box; what
+ *  `onControls` reports is the same rect in logical pixels, because it
+ *  becomes the style of a widget. */
 export interface ControlRect {
   element: Element;
   kind: ReplacedKind;

package/src/html/css/cascade.ts

@@ -219,10 +219,15 @@ export class Cascade {
   private _pointer: PointerState = NO_POINTER;
   readonly initial: ComputedStyle;
   readonly look: RootLook;
-  /** Viewport width the media queries were evaluated at. */
+  /** Viewport width the media queries were evaluated at, in device pixels
+   *  like every other length here. */
   viewportWidth: number;
   viewportHeight: number;
-  /** Every width at which some `@media` rule changes its mind. */
+  /** Device pixels per CSS pixel. Every computed length is device; a
+   *  `@media` width is the one CSS-pixel comparison left, and it divides. */
+  readonly scale: number;
+  /** Every width at which some `@media` rule changes its mind, in CSS
+   *  pixels — the unit the author wrote them in. */
   readonly breakpoints: number[];
 
   constructor(
@@ -230,11 +235,13 @@ export class Cascade {
     look: RootLook,
     viewportWidth: number,
     viewportHeight: number,
+    scale = 1,
   ) {
     this.look = look;
     this.initial = initialStyle(look);
     this.viewportWidth = viewportWidth;
     this.viewportHeight = viewportHeight;
+    this.scale = scale;
     const breakpoints = new Set<number>();
     for (const sheet of sheets) {
       for (const rule of sheet.rules) this._index.add(rule);
@@ -266,12 +273,14 @@ export class Cascade {
     this._pointer = pointer;
   }
 
-  /** Which media band a width falls in. Two widths in the same band produce
-   *  identical styles, which is what lets a resize skip restyling. */
+  /** Which media band a device-pixel width falls in. Two widths in the same
+   *  band produce identical styles, which is what lets a resize skip
+   *  restyling. */
   mediaBand(width: number): number {
+    const cssWidth = width / this.scale;
     let band = 0;
     for (const bp of this.breakpoints) {
-      if (width >= bp) band += 1;
+      if (cssWidth >= bp) band += 1;
       else break;
     }
     return band;
@@ -299,6 +308,7 @@ export class Cascade {
       rem: this.initial.fontSize,
       vw: this.viewportWidth,
       vh: this.viewportHeight,
+      scale: this.scale,
     };
     for (const c of candidates) {
       for (const d of pick(c)) {
@@ -345,13 +355,14 @@ export class Cascade {
 
   private _candidates(el: Element): Candidate[] {
     const out: Candidate[] = [];
-    const width = this.viewportWidth;
+    // A media query's width is CSS pixels; the viewport is kept in device.
+    const width = this.viewportWidth / this.scale;
 
     const consider = (bucket: IndexedRule[] | undefined): void => {
       if (!bucket) return;
       for (const indexed of bucket) {
         const rule = indexed.rule;
-        if (!mediaMatches(rule.media, width)) continue;
+        if (!mediaMatches(rule.media, width, this.look.colorScheme)) continue;
         if (!indexed.compiled) {
           indexed.compiled = true;
           try {

package/src/html/css/parse.ts

@@ -51,13 +51,17 @@ export interface Stylesheet {
   breakpoints: number[];
 }
 
-/** The width tests this evaluates. Anything else — `prefers-color-scheme`,
- *  `orientation`, `print` — is decided once, at parse time, by `staticPass`. */
+/** The tests this evaluates live: a width, a colour scheme, or both.
+ *  Anything else — `orientation`, `print`, `prefers-reduced-motion` — is
+ *  decided once, at parse time, by `staticPass`. */
 export interface MediaCondition {
   min?: number;
   max?: number;
-  /** Set when the query could not be evaluated as a width test: `true` keeps
-   *  the rule, `false` drops it, and neither depends on the viewport. */
+  /** `prefers-color-scheme`, answered from the palette in force. */
+  scheme?: 'light' | 'dark';
+  /** Set when the query could not be evaluated as a width or scheme test:
+   *  `true` keeps the rule, `false` drops it, and neither depends on the
+   *  viewport or the theme. */
   staticPass?: boolean;
 }
 
@@ -403,10 +407,10 @@ function importUrl(prelude: string): string | null {
 }
 
 /**
- * A `@media` prelude, reduced to the width tests this can honour. Each comma
- * group is one condition and they are OR-ed; within a group, `and` means the
- * tests intersect, so a group with a feature this does not understand is
- * decided statically by that feature alone.
+ * A `@media` prelude, reduced to the width and colour-scheme tests this can
+ * honour. Each comma group is one condition and they are OR-ed; within a
+ * group, `and` means the tests intersect, so a group with a feature this
+ * does not understand is decided statically by that feature alone.
  */
 export function parseMediaQuery(prelude: string): MediaCondition[] {
   const out: MediaCondition[] = [];
@@ -432,14 +436,23 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
         } else if (key === 'max-width' && px !== null) {
           condition.max = Math.min(condition.max ?? Infinity, px);
           sawWidth = true;
-        } else if (
-          key === 'prefers-color-scheme' ||
-          key === 'prefers-reduced-motion'
-        ) {
-          // The host decides the palette, so a document's own preference
-          // query is not this renderer's to answer: the light branch is the
-          // one whose declarations are least likely to fight the theme.
-          pass = feature[2].trim().toLowerCase() === 'light';
+        } else if (key === 'prefers-color-scheme') {
+          // Answered live, from the palette in force: a document dropped
+          // into a dark application takes its dark branch, and follows the
+          // desktop when that changes. The two schemes are the whole
+          // vocabulary; anything else never matches.
+          const scheme = feature[2].trim().toLowerCase();
+          if (scheme === 'light' || scheme === 'dark') {
+            if (condition.scheme && condition.scheme !== scheme) pass = false;
+            condition.scheme = scheme;
+          } else {
+            pass = false;
+          }
+        } else if (key === 'prefers-reduced-motion') {
+          // Nothing here moves, so there is nothing to reduce: the branch an
+          // animated page keeps for this preference is not one this
+          // renderer needs.
+          pass = false;
         } else if (key === 'orientation') {
           pass = feature[2].trim().toLowerCase() === 'landscape';
         }
@@ -450,8 +463,13 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
       if (type === 'print' || type === 'speech') pass = false;
     }
     if (negated) {
-      // `not` over a width range is not expressible as one range; the honest
-      // reduction is to decide it statically rather than invert it wrongly.
+      // `not` over a scheme is the other scheme. `not` over a width range
+      // is not expressible as one range; the honest reduction is to decide
+      // it statically rather than invert it wrongly.
+      if (!sawWidth && pass && condition.scheme) {
+        out.push({ scheme: condition.scheme === 'dark' ? 'light' : 'dark' });
+        continue;
+      }
       out.push({ staticPass: !sawWidth && pass ? false : !pass });
       continue;
     }
@@ -461,6 +479,7 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
     }
     if (
       !sawWidth &&
+      condition.scheme === undefined &&
       condition.min === undefined &&
       condition.max === undefined
     ) {
@@ -472,12 +491,17 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
   return out.length ? out : [{ staticPass: true }];
 }
 
-const ZERO_UNITS = { em: 16, rem: 16, vw: 0, vh: 0 };
+/** A `@media` width is compared with the viewport in CSS pixels — the
+ *  cascade divides the device width by the scale before asking — so the
+ *  thresholds parse at scale 1 whatever panel the document lands on. */
+const ZERO_UNITS = { em: 16, rem: 16, vw: 0, vh: 0, scale: 1 };
 
-/** Whether a rule's `@media` blocks all hold at this viewport width. */
+/** Whether a rule's `@media` blocks all hold at this viewport width, under
+ *  this colour scheme. */
 export function mediaMatches(
   media: MediaCondition[][] | null,
   width: number,
+  scheme: 'light' | 'dark' = 'light',
 ): boolean {
   if (!media) return true;
   for (const block of media) {
@@ -489,7 +513,8 @@ export function mediaMatches(
       }
       if (
         (c.min === undefined || width >= c.min) &&
-        (c.max === undefined || width <= c.max)
+        (c.max === undefined || width <= c.max) &&
+        (c.scheme === undefined || c.scheme === scheme)
       ) {
         any = true;
       }

package/src/html/css/style.ts

@@ -214,6 +214,9 @@ export interface RootLook {
   borderColor: string;
   mutedColor: string;
   background: string;
+  /** Which scheme the palette is — what `@media (prefers-color-scheme)`
+   *  is answered from. */
+  colorScheme: 'light' | 'dark';
   /**
    * The palette's own control chrome, carried here because the **box in the
    * flow has to be the size the widget will be** and layout runs long before
@@ -1063,7 +1066,9 @@ function alignKeyword(value: string): string | null {
 
 function borderWidth(value: string, ctx: UnitContext): number | null {
   const kw = BORDER_WIDTH_KEYWORDS[value.trim().toLowerCase()];
-  if (kw !== undefined) return kw;
+  // The keywords are CSS pixels that never pass through `parseLength`, so
+  // they take the display scale here.
+  if (kw !== undefined) return kw * ctx.scale;
   const len = parseLength(value, ctx);
   return typeof len === 'number' ? Math.max(0, len) : null;
 }

package/src/html/css/values.ts

@@ -54,7 +54,18 @@ export function resolveOrNull(len: Len, base: number): number | null {
   return Number.isFinite(base) ? (len.pct / 100) * base : null;
 }
 
-/** The font-relative context a length parses against. */
+/**
+ * The context a length parses against.
+ *
+ * Every length that comes out of `parseLength` is in **device pixels** —
+ * the unit the box tree, the paint and the hit tests all share. `em`, `rem`,
+ * `vw` and `vh` are already device (the root font size and the viewport are
+ * handed over that way); the absolute units are CSS pixels the author wrote,
+ * and `scale` is how many device pixels one of those is (core's
+ * `docs/scale.md`). At 1x it is the identity, which is how a renderer that
+ * never multiplied passed every test and drew a `16px` heading eight logical
+ * pixels tall on a retina panel.
+ */
 export interface UnitContext {
   /** The element's own `font-size`, already computed. */
   em: number;
@@ -63,6 +74,8 @@ export interface UnitContext {
   /** Viewport, for `vw`/`vh`/`vmin`/`vmax`. */
   vw: number;
   vh: number;
+  /** Device pixels per CSS pixel — the display scale. */
+  scale: number;
 }
 
 const LENGTH_RE =
@@ -89,31 +102,34 @@ export function parseLength(
   if (!m) return null;
   const n = Number(m[1]);
   const unit = m[2];
-  if (!unit) return bareIsPx ? n : null;
+  if (!unit) return bareIsPx ? n * ctx.scale : null;
   if (unit === '%') return { pct: n };
   return n * unitScale(unit, ctx);
 }
 
+/** Device pixels per one of `unit`. The absolute units are CSS pixels and
+ *  multiples of them, so they carry the display scale; the relative ones
+ *  resolve against values that are device already. */
 function unitScale(unit: string, ctx: UnitContext): number {
   switch (unit) {
     case 'px':
-      return 1;
+      return ctx.scale;
     case 'em':
       return ctx.em;
     case 'rem':
       return ctx.rem;
     case 'pt':
-      return 96 / 72;
+      return (96 / 72) * ctx.scale;
     case 'pc':
-      return 16;
+      return 16 * ctx.scale;
     case 'in':
-      return 96;
+      return 96 * ctx.scale;
     case 'cm':
-      return 96 / 2.54;
+      return (96 / 2.54) * ctx.scale;
     case 'mm':
-      return 96 / 25.4;
+      return (96 / 25.4) * ctx.scale;
     case 'q':
-      return 96 / 101.6;
+      return (96 / 101.6) * ctx.scale;
     // Approximations rather than font queries: both are within a few percent
     // for every text face, and asking the font manager here would make the
     // cascade depend on font loading.

package/src/html/index.ts

@@ -181,6 +181,7 @@ function deriveLook(
     borderColor: String(theme.border ?? '#b2bec3'),
     mutedColor: String(theme.textMuted ?? '#7f8c8d'),
     background: String(theme.background ?? 'white'),
+    colorScheme: theme.scheme === 'dark' ? 'dark' : 'light',
     surface: String(theme.surface ?? theme.background ?? 'white'),
     controlPadY: Number(theme.paddingY ?? 6),
     controlBorder: Number(theme.borderWidth ?? 1),

package/src/html/layout/boxes.ts

@@ -124,9 +124,11 @@ export interface TextLayoutLike {
       end: number;
       /** The span as handed in — a richtext `TextRun`, which is how the
        *  decoration a `<span>` carried reaches the paint pass on the same
-       *  object the glyphs did. */
-      span: TextRun;
-      run: {
+       *  object the glyphs did. Optional, with `run`, for the reason
+       *  `src/richtext/runs.ts` gives: react-x11's Cocoa engine hands back
+       *  a run's geometry and nothing else. */
+      span?: TextRun;
+      run?: {
         font: { metrics(size: number): { ascent: number; descent: number } };
         size: number;
         direction?: 'ltr' | 'rtl';
@@ -339,8 +341,13 @@ export interface BoxTree {
 
 export interface BuildOptions {
   cascade: Cascade;
-  /** Intrinsic size for an image the host has already loaded. `null` when it
-   *  has not: the box takes the attribute size, or a placeholder. */
+  /** Device pixels per CSS pixel. An image's pixels and a `width="600"`
+   *  attribute are CSS pixels; every box is device, so both are multiplied
+   *  on the way in. Default 1. */
+  scale?: number;
+  /** Intrinsic size for an image the host has already loaded, in the
+   *  image's own pixels. `null` when it has not: the box takes the attribute
+   *  size, or a placeholder. */
   imageSize(el: Element): { width: number; height: number } | null;
   /** The size a real widget wants, so the box in the flow is the size the
    *  control will be drawn at. */
@@ -495,17 +502,20 @@ class Builder {
     else if (style.float !== 'none') box.isFloat = true;
 
     if (replaced === 'image') {
+      // Both sources are CSS pixels — an image pixel is one, and so is an
+      // attribute — and the box is device.
+      const scale = this._options.scale ?? 1;
       const loaded = this._options.imageSize(el);
       if (loaded) {
-        box.intrinsicWidth = loaded.width;
-        box.intrinsicHeight = loaded.height;
+        box.intrinsicWidth = loaded.width * scale;
+        box.intrinsicHeight = loaded.height * scale;
       } else {
         // An image that has not arrived still needs a box, or the document
         // reflows under the reader when it does. The attributes are the
         // author telling us the size in advance; without them the box is a
         // small placeholder rather than nothing.
-        box.intrinsicWidth = numberAttr(el, 'width') ?? 0;
-        box.intrinsicHeight = numberAttr(el, 'height') ?? 0;
+        box.intrinsicWidth = (numberAttr(el, 'width') ?? 0) * scale;
+        box.intrinsicHeight = (numberAttr(el, 'height') ?? 0) * scale;
       }
       // The alt text joins the document text, so a document read with the
       // images blocked still copies as prose.

package/src/html/layout/inline.ts

@@ -317,7 +317,14 @@ export function layoutInline(block: Box, options: InlineOptions): InlineResult {
     open.x += first.width;
     open.left = band.left;
 
-    if (!fragment.truncated) {
+    // Did the segment wrap? ntk answers with `truncated`. A layout that does
+    // not carry the flag — react-x11's Cocoa engine reports none — is asked
+    // the same of its line ends instead: it wrapped if anything but
+    // whitespace follows the first line. Read as "fitted", a cut fragment
+    // advanced past the whole segment, and a paragraph beside a float lost
+    // every line after its first.
+    const wrapped = fragment.truncated ?? inkBeyond(segment.runs, first.end);
+    if (!wrapped) {
       // It fitted: the cursor stays on this line for whatever comes next.
       //
       // With one correction first. ntk strips a line's trailing whitespace —
@@ -805,6 +812,21 @@ function spaceAdvance(fonts: FontsLike, run: TextRun): number {
   return advance;
 }
 
+/** Whether anything but whitespace lies past a code-unit offset into the
+ *  runs' joined text — "did `maxLines` drop content", for a layout that
+ *  does not say. */
+function inkBeyond(runs: TextRun[], offset: number): boolean {
+  let at = 0;
+  for (const run of runs) {
+    const next = at + run.text.length;
+    if (next > offset && /\S/.test(run.text.slice(Math.max(0, offset - at)))) {
+      return true;
+    }
+    at = next;
+  }
+  return false;
+}
+
 // --- style questions --------------------------------------------------------
 
 function wraps(style: ComputedStyle): boolean {

package/src/html/node.ts

@@ -101,7 +101,8 @@ export interface HtmlViewProps {
     request: ResourceRequest,
   ) => Promise<ResourceResult | null> | ResourceResult | null;
   onScript?: (script: ScriptRequest) => void;
-  /** Where the real widgets go, in the element's own coordinates. */
+  /** Where the real widgets go, in the element's own coordinates and in
+   *  logical pixels — the unit the style that mounts each one is in. */
   onControls?: (rects: ControlRect[]) => void;
   /** The parsed document, once per parse — the DOM handle. */
   onDocument?: (document: Document) => void;
@@ -168,6 +169,70 @@ export class HtmlViewNode extends Node {
     return this.props as unknown as HtmlViewProps;
   }
 
+  // --- units ----------------------------------------------------------------
+  //
+  // The whole pipeline — the cascade's lengths, the box tree, the paint, the
+  // walks the accessors run — works in **device pixels**, the unit `abs`,
+  // `contentBox()`, the paint context and `paintDamage()` arrive in (core's
+  // `docs/scale.md`). Three things cross into that unit and each converts
+  // once, here:
+  //
+  //  - a CSS pixel: every `px` the author wrote, the UA sheet's, an image's
+  //    own pixels, a `width="600"` attribute, the theme's font size and
+  //    control chrome in `look`. `UnitContext.scale` and `_deviceLook()`
+  //    multiply them on the way in;
+  //  - a synthetic event's `x`/`y`, and so the public point queries
+  //    (`elementAtPoint`, `hrefAtPoint`, `setHover`): logical, multiplied in
+  //    `_toDocument`. The selection seam (`textIndexAt` and the two rect
+  //    accessors) is core's device-pixel contract and stays device;
+  //  - a control rect on its way out to `onControls`: divided, because it
+  //    becomes a style.
+  //
+  // At 1x every conversion is the identity, which is how a view that
+  // compared `ev.x` with `abs` and laid `16px` out as sixteen device pixels
+  // passed every test and then hovered the wrong element and drew the
+  // document at half size on a retina panel.
+
+  /** Device pixels per logical pixel — the display scale this element's
+   *  window resolved to, constant for the node's life. */
+  private get _scale(): number {
+    return this.scale > 0 ? this.scale : 1;
+  }
+
+  private _deviceLookFor: RootLook | null = null;
+  private _deviceLookAt = 0;
+  private _deviceLookValue: RootLook | null = null;
+
+  /** The look with its lengths on the device grid: the theme's font size and
+   *  the control chrome are logical pixels, and the cascade's initial style
+   *  and `measureControl` want device ones. Memoized on the look's identity
+   *  so the cascade and the control measurer see one object. */
+  private _deviceLook(): RootLook {
+    const look = this._props().look;
+    const s = this._scale;
+    if (
+      this._deviceLookValue &&
+      this._deviceLookFor === look &&
+      this._deviceLookAt === s
+    ) {
+      return this._deviceLookValue;
+    }
+    const scaled =
+      s === 1
+        ? look
+        : {
+            ...look,
+            fontSize: look.fontSize * s,
+            controlPadY: look.controlPadY * s,
+            controlBorder: look.controlBorder * s,
+            controlRadius: look.controlRadius * s,
+          };
+    this._deviceLookFor = look;
+    this._deviceLookAt = s;
+    this._deviceLookValue = scaled;
+    return scaled;
+  }
+
   // --- the pipeline ---------------------------------------------------------
 
   private _invalidate(stale: Stale): void {
@@ -232,7 +297,8 @@ export class HtmlViewNode extends Node {
   /** Rebuild the cascade — the document's sheets plus the host's. */
   private _restyle(width: number): void {
     const props = this._props();
-    const sheets: Stylesheet[] = [uaStylesheet(props.look)];
+    const look = this._deviceLook();
+    const sheets: Stylesheet[] = [uaStylesheet(look)];
     let order = 0;
     for (const ref of this._source.facts().sheets) {
       const text =
@@ -267,9 +333,10 @@ export class HtmlViewNode extends Node {
     }
     this._cascade = new Cascade(
       sheets,
-      props.look,
+      look,
       width,
       this._viewportHeight(),
+      this._scale,
     );
     this._cascade.setPointer({
       hovered: new Set(this._hovered),
@@ -321,12 +388,13 @@ export class HtmlViewNode extends Node {
     cascade.viewportHeight = this._viewportHeight();
 
     if (this._stale >= Stale.Boxes || !this._tree) {
-      const props = this._props();
+      const look = this._deviceLook();
       this._tree = buildBoxes(this._source.document, {
         cascade,
+        scale: this._scale,
         imageSize: (el) => this._resources.imageSize(attr(el, 'src') ?? ''),
         controlSize: (el, kind, style) =>
-          measureControl(el, kind, style, this._fonts(), props.look),
+          measureControl(el, kind, style, this._fonts(), look),
       });
       this._textPoints = null;
       this._pointsAreUnits = null;
@@ -355,7 +423,20 @@ export class HtmlViewNode extends Node {
     const tree = this._tree;
     const report = this._props().onControls;
     if (!tree || !report) return;
-    const rects = controlRectsOf(tree);
+    // The boxes are device pixels; each rect becomes the style of a widget
+    // mounted beside this element, and a style is logical.
+    const s = this._scale;
+    const rects = controlRectsOf(tree).map((r) =>
+      s === 1
+        ? r
+        : {
+            ...r,
+            x: r.x / s,
+            y: r.y / s,
+            width: r.width / s,
+            height: r.height / s,
+          },
+    );
     if (sameRects(rects, this._controls)) return;
     this._controls = rects;
     report(rects);
@@ -463,7 +544,9 @@ export class HtmlViewNode extends Node {
   override textIndexAt(x: number, y: number): number {
     const tree = this._tree;
     if (!tree) return 0;
-    const local = this._toDocument(x, y);
+    // Core's contract: a device-pixel point, the same space the two rect
+    // accessors below answer in.
+    const local = { x: x - this.abs.x, y: y - this.abs.y };
     const hit = nearestText(tree.root, local.x, local.y);
     if (!hit) return 0;
     return this._toPoints(hit);
@@ -495,10 +578,15 @@ export class HtmlViewNode extends Node {
   }
 
   // --- pointer --------------------------------------------------------------
-
-  /** The link under a point, if any. Not part of the selection seam: core
-   *  deliberately left hover and `cursorAt` out of #291, so following a link
-   *  stays this package's. */
+  //
+  // The three point queries take **logical** window pixels — what a synthetic
+  // event's `x`/`y` carry and what `useLinkClicks` and an application's
+  // handler hand over — and are the one place the two units meet on the way
+  // in. `_toDocument` multiplies.
+
+  /** The link under a logical window point, if any. Not part of the
+   *  selection seam: core deliberately left hover and `cursorAt` out of
+   *  #291, so following a link stays this package's. */
   hrefAtPoint(x: number, y: number): string | null {
     const el = this.elementAtPoint(x, y);
     let node: Element | null = el;
@@ -510,7 +598,7 @@ export class HtmlViewNode extends Node {
     return null;
   }
 
-  /** The deepest element whose box contains a window-space point. */
+  /** The deepest element whose box contains a logical window point. */
   elementAtPoint(x: number, y: number): Element | null {
     const tree = this._tree;
     if (!tree) return null;
@@ -519,9 +607,10 @@ export class HtmlViewNode extends Node {
   }
 
   /**
-   * The pointer moved. Returns true when the cascade's answer could have
-   * changed, so the caller knows whether to invalidate — which it only ever
-   * does for a document that actually contains a `:hover` rule.
+   * The pointer moved, to a logical window point. Returns true when the
+   * cascade's answer could have changed, so the caller knows whether to
+   * invalidate — which it only ever does for a document that actually
+   * contains a `:hover` rule.
    */
   setHover(x: number, y: number): boolean {
     const cascade = this._cascade;
@@ -570,8 +659,10 @@ export class HtmlViewNode extends Node {
     return this._source.facts().title;
   }
 
+  /** A logical window point in document (device) coordinates. */
   private _toDocument(x: number, y: number): { x: number; y: number } {
-    return { x: x - this.abs.x, y: y - this.abs.y };
+    const s = this._scale;
+    return { x: x * s - this.abs.x, y: y * s - this.abs.y };
   }
 
   // --- pointer defaults -----------------------------------------------------
@@ -618,6 +709,7 @@ export class HtmlViewNode extends Node {
     paintDocument(ctx as PaintContext, tree, {
       originX: this.abs.x,
       originY: this.abs.y,
+      scale: this._scale,
       damage,
       selection: range
         ? { start: this._toUnits(range.start), end: this._toUnits(range.end) }
@@ -951,7 +1043,8 @@ function deepestAt(box: Box, x: number, y: number): Element | null {
             for (const run of natural.runs) {
               const left = text.drawX + natural.x + run.x;
               if (x >= left && x < left + run.width) {
-                const owner = (run.span as { element?: Element }).element;
+                const owner = (run.span as { element?: Element } | undefined)
+                  ?.element;
                 if (owner) found = owner;
               }
             }