@react-x11/components 0.11.0 → 0.13.0

package/src/html/layout/boxes.ts

@@ -28,7 +28,12 @@ import {
   NON_RENDERED,
   tagOf,
 } from '../dom.js';
-import type { Cascade, FirstLetterRules } from '../css/cascade.js';
+import type {
+  Cascade,
+  FirstLetterRules,
+  KeptStyles,
+  SelectionStyle,
+} from '../css/cascade.js';
 import type { CollapsedTable } from './collapse.js';
 import { quoteAt } from '../css/content.js';
 import type { CounterStyles } from '../css/counter-styles.js';
@@ -36,6 +41,7 @@ import type { ContentItem } from '../css/content.js';
 import {
   CONTAIN_STYLE,
   FIRST_LINE_INHERITED,
+  NO_MASK,
   copyStyle,
   firstLineParent,
   inherit,
@@ -187,6 +193,15 @@ export interface LineText {
    *  spacer: a unit of the layout that is no text of the document's
    *  (`documentOffsetOf`, `layoutOffsetOf`). */
   gaps?: number[];
+  /**
+   * The spaces `pre-wrap` keeps that this fragment's line ends on, which an
+   * engine strips from a line's end as though CSS removed them there: each
+   * one's offset in the layout's text and where it is, from the layout's
+   * origin, beside the line's end in logical order (`hangPreserved`). They
+   * are their inline box's, whose background and border cover them, and
+   * the ones before a forced break that fit take room on the line.
+   */
+  hung?: { at: number; x: number; width: number }[];
   /** Any offset in the layout's own text as a document index — how a run
    *  under the pointer finds the element whose text it is. Per pass: the
    *  layout may be one an earlier pass made (`TextLayoutCache`), and the
@@ -233,6 +248,10 @@ export interface TextLayoutLike {
     height: number;
     baseline: number;
     width: number;
+    /** Its width with the white space it ends on kept, in the item it
+     *  ends: how far it moves the pen where text goes on after it on the
+     *  same line. ntk's, from 8.17.0; an engine without it leaves it out. */
+    advance?: number;
     ascent: number;
     descent: number;
     start: number;
@@ -542,6 +561,10 @@ export type FirstLineStyler = (
   parent: ComputedStyle,
 ) => ComputedStyle;
 
+/** The `::selection` of the element a box's text is in, or null for the
+ *  palette's highlight (`Cascade.selectionStyle`). */
+export type SelectionStyler = (box: Box | null) => SelectionStyle | null;
+
 /** The url of an image generated content put in a pseudo-element: it has
  *  no element of its own to name it (`imageUrlOf`). */
 export const CONTENT_IMAGES = new WeakMap<Box, string>();
@@ -581,6 +604,12 @@ export const BOX_RAISES = new WeakMap<Box, number>();
  *  background, drawn from its baseline, is put there by line. */
 export const LINE_BOX_RAISES = new WeakMap<LineBox, Map<Box, number>>();
 
+/** The face of an inline box with padding above or below its text and
+ *  nothing to paint behind it, which has no `decoration`: its fragments
+ *  still reach past its lines by the padding, and count in the scrollable
+ *  overflow of the block they are in (`computePaintBounds`). */
+export const PADDED_FACES = new WeakMap<Box, InlineDecoration>();
+
 /** The table cells wholly in columns `visibility: collapse` took out of
  *  their table (CSS 2.1 17.5.5), which the paint pass leaves out: a cell is
  *  no descendant of its column and inherits nothing from it, so its own
@@ -615,11 +644,23 @@ export const GRID_TRACKS = new WeakMap<Box, GridTracks>();
  *  `order` moves any: an absolutely positioned child's is 0. */
 export const PAINT_ORDER = new WeakMap<Box, Box[]>();
 
-/** The blocks that broke a relatively positioned inline box in pieces,
- *  under its first piece: its offset moves them too (CSS 2.1 9.2.1.1),
- *  though they stand outside it (`breakAround`). */
+/** The blocks that broke an inline box in pieces, under its first piece
+ *  (`breakAround`): a relative offset of the box moves them too (CSS 2.1
+ *  9.2.1.1), though they stand outside it, and its rect takes them in, as
+ *  a browser's does (`elementRect`). */
 export const CUT_BLOCKS = new WeakMap<Box, Box[]>();
 
+/** Where a block that clearance moved below the floats would have stood
+ *  without it, its border edge's top (CSS 2.1 9.5.2): a browser's
+ *  fragment of an inline box around such a block starts there, and takes
+ *  the clearance in (`elementRect`). Only the blocks that had clearance. */
+export const CLEARED_FROM = new WeakMap<Box, number>();
+
+/** The element a pseudo-element's box is generated from, which has no
+ *  element of its own (`Box.pseudo`): whose the images its styles name are,
+ *  when the host is asked for them. */
+export const GENERATED_FROM = new WeakMap<Box, Element>();
+
 /** The blocks that broke an inline box under full opacity in pieces, and
  *  the opacity they take from it — from each such inline box around them,
  *  multiplied. They stand outside it (CSS 2.1 9.2.1.1) and are still its
@@ -647,9 +688,14 @@ export interface BoxTree {
   controls: Box[];
   /** Every box carrying an `href`, for click and hover. */
   links: Box[];
-  /** Every element's box with a `background-image` or a border image,
-   *  for the host to be asked for: a document has a handful, and finding
-   *  them was a walk over every box after every build. */
+  /** The style of an anonymous box under a parent's (`anonymousStyles`):
+   *  the one the fix-up gave each it made, and what such a box takes when
+   *  its parent's style changes where it is (`HtmlViewNode._hoverInPlace`). */
+  anonymous: AnonymousStyle;
+  /** Every box with a `background-image`, a border image or a mask image,
+   *  an element's or a pseudo-element's, for the host to be asked for: a
+   *  document has a handful, and finding them was a walk over every box
+   *  after every build. */
   backgrounds: Box[];
   /** Every image generated content names, the element whose
    *  pseudo-element names it, for the host to be asked for, and whether its
@@ -667,6 +713,10 @@ export interface BoxTree {
   /** Each box's style on a first line (`FirstLineStyler`), where any
    *  block has a `::first-line`. */
   firstLineStyler: FirstLineStyler | null;
+  /** Each box's `::selection` (`SelectionStyler`), where any rule styles
+   *  one: worked out as a selection is first painted over it, not as the
+   *  tree is built, since most builds are never selected in. */
+  selectionStyler: SelectionStyler | null;
   /** Whether a float or an out-of-flow box sits in an inline box: where
    *  none does, layout looks for them among a block's own children and
    *  goes through no inline box to find them. */
@@ -687,6 +737,9 @@ export interface BoxTree {
 
 export interface BuildOptions {
   cascade: Cascade;
+  /** The styles of the tree this one replaces, where only some elements'
+   *  can have changed since (`Cascade.beginSharing`). */
+  kept?: KeptStyles | null;
   /** 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. */
@@ -786,7 +839,7 @@ class Builder {
 
   run(root: Element): BoxTree {
     const cascade = this._options.cascade;
-    cascade.beginSharing();
+    cascade.beginSharing(this._options.kept ?? null);
     const { style: rootStyle, html: impliedHtml } = cascade.rootStyle(
       hasBody(root),
       hasHtml(root),
@@ -805,10 +858,13 @@ class Builder {
     // it carries no margins of its own and cannot collapse with anything.
     this._children(root, rootBox, rootStyle, false, null, ROOT_SHARE_KEY);
     this._endLine();
-    fixUp(rootBox, anonymousStyles(cascade.initial));
+    cascade.endSharing();
+    const anonymous = anonymousStyles(cascade.initial);
+    fixUp(rootBox, anonymous);
     assignSubtreeRanges(rootBox);
     return {
       root: rootBox,
+      anonymous,
       text: this._chunks.join(''),
       textBoxes: this._textBoxes,
       textStyles: this._textStyles,
@@ -821,6 +877,7 @@ class Builder {
       negative: this._negative,
       firstLine: this._firstLine,
       firstLineStyler: this._firstLine ? this._firstLineStyler() : null,
+      selectionStyler: cascade.hasSelection ? this._selectionStyler() : null,
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
@@ -828,6 +885,30 @@ class Builder {
     };
   }
 
+  /** `BoxTree.selectionStyler`, over this build's cascade: an element's
+   *  over its parent's, each once. A box with no element of its own — text,
+   *  an anonymous box — is its nearest element's. */
+  private _selectionStyler(): SelectionStyler {
+    const cascade = this._options.cascade;
+    const styles = this._styles;
+    const known = new Map<Element, SelectionStyle | null>();
+    const of = (el: Element): SelectionStyle | null => {
+      let found = known.get(el);
+      if (found !== undefined) return found;
+      // the parser keeps a document to 256 elements deep (`dom.ts`)
+      const parent = isElement(el.parent) ? of(el.parent) : null;
+      const own = styles.get(el)?.style;
+      found = own ? cascade.selectionStyle(el, own, parent) : parent;
+      known.set(el, found);
+      return found;
+    };
+    return (box) => {
+      let at = box;
+      while (at && !at.el) at = at.parent;
+      return at?.el ? of(at.el) : null;
+    };
+  }
+
   /** `BoxTree.firstLineStyler`, over this build's cascade. */
   private _firstLineStyler(): FirstLineStyler {
     const cascade = this._options.cascade;
@@ -997,7 +1078,9 @@ class Builder {
     }
 
     // an `<object>` is its image once it has one, and its content until;
-    // an `<embed>` its image, and a `<video>` its poster, or a frame
+    // an `<embed>` its image, and a `<video>` its poster, or a frame; an
+    // image button its image, and a button saying what it is for until it
+    // has one, so it can be pressed either way
     const replaced =
       tag === 'object'
         ? this._options.imageSize(el)
@@ -1005,7 +1088,11 @@ class Builder {
           : 'none'
         : (tag === 'embed' || tag === 'video') && this._options.imageSize(el)
           ? 'image'
-          : replacedKind(el, tag);
+          : isImageButton(el, tag)
+            ? this._options.imageSize(el)
+              ? 'image'
+              : 'button'
+            : replacedKind(el, tag);
     if (replaced !== 'none') {
       this._replaced(el, tag, replaced, style, into);
       return;
@@ -1025,13 +1112,7 @@ class Builder {
         this._firstLine = true;
       }
     }
-    if (
-      style.backgroundImage ||
-      style.backgroundImages ||
-      typeof style.borderImage.source === 'string'
-    ) {
-      this._backgrounds.push(box);
-    }
+    if (namesImages(style)) this._backgrounds.push(box);
     if (style.position === 'absolute' || style.position === 'fixed')
       box.outOfFlow = true;
     else if (style.float !== 'none') box.isFloat = true;
@@ -1158,13 +1239,7 @@ class Builder {
     const box = new Box('replaced', el, style);
     box.replaced = replaced;
     into.append(box);
-    if (
-      style.backgroundImage ||
-      style.backgroundImages ||
-      typeof style.borderImage.source === 'string'
-    ) {
-      this._backgrounds.push(box);
-    }
+    if (namesImages(style)) this._backgrounds.push(box);
     if (style.position === 'absolute' || style.position === 'fixed')
       box.outOfFlow = true;
     else if (style.float !== 'none') box.isFloat = true;
@@ -1295,6 +1370,10 @@ class Builder {
     const box = new Box(boxKindFor(style.display), null, style);
     box.pseudo = which;
     into.append(box);
+    // its images are its element's to ask for: a `::after` with no content
+    // but a background, which designs hang a picture on, drew nothing
+    GENERATED_FROM.set(box, el);
+    if (namesImages(style)) this._backgrounds.push(box);
     // a list item it generates has a marker as an element's has, of the
     // `list-item` counter it has just counted (CSS 2.1 12.5): outside it,
     // or at the start of its content
@@ -1714,6 +1793,10 @@ class Builder {
     const letterStyle = cascade.firstLetterStyle(search.rules, style);
     const box = new Box(boxKindFor(letterStyle.display), null, letterStyle);
     box.pseudo = 'first-letter';
+    if (owner) {
+      GENERATED_FROM.set(box, owner);
+      if (namesImages(letterStyle)) this._backgrounds.push(box);
+    }
     if (letterStyle.float !== 'none') {
       box.isFloat = true;
       if (into.kind === 'inline') this._nestedOutOfLine = true;
@@ -2336,6 +2419,13 @@ function setIntrinsics(box: Box, size: IntrinsicSize, scale: number): void {
   };
 }
 
+/** An `<input type=image>`: a picture that submits its form. */
+function isImageButton(el: Element, tag: string): boolean {
+  return (
+    tag === 'input' && (attr(el, 'type') ?? '').trim().toLowerCase() === 'image'
+  );
+}
+
 function replacedKind(el: Element, tag: string): ReplacedKind {
   switch (tag) {
     case 'img':
@@ -2608,7 +2698,7 @@ function breakAround(inline: Box): Box[] | null {
   for (let i = 0; i < pieces.length; i += 1) {
     pieces[i].cut = (i > 0 ? 1 : 0) | (i < pieces.length - 1 ? 2 : 0);
   }
-  if (isRelative(inline.style)) CUT_BLOCKS.set(pieces[0], blocks);
+  CUT_BLOCKS.set(pieces[0], blocks);
   const fade = inline.style.opacity;
   if (fade < 1) {
     for (const block of blocks) {
@@ -2618,6 +2708,17 @@ function breakAround(inline: Box): Box[] | null {
   return out;
 }
 
+/** Whether a style names an image for its box to be drawn with: a
+ *  background's, a border's, or a mask's. */
+function namesImages(style: ComputedStyle): boolean {
+  return (
+    !!style.backgroundImage ||
+    !!style.backgroundImages ||
+    typeof style.borderImage.source === 'string' ||
+    style.mask !== NO_MASK
+  );
+}
+
 /**
  * The style of an anonymous box inside a parent: what the parent passes on
  * by inheritance, and every other property at its initial value, as CSS 2.1
@@ -2628,24 +2729,24 @@ function breakAround(inline: Box): Box[] | null {
  * paragraph after it the height of the div further down. One per parent
  * style, which the cascade already shares between elements.
  */
-type AnonymousStyle = (
-  parent: Box,
+export type AnonymousStyle = (
+  parent: ComputedStyle,
   display: ComputedStyle['display'],
 ) => ComputedStyle;
 
 function anonymousStyles(initial: ComputedStyle): AnonymousStyle {
   const made = new WeakMap<ComputedStyle, Map<string, ComputedStyle>>();
   return (parent, display) => {
-    let byDisplay = made.get(parent.style);
+    let byDisplay = made.get(parent);
     if (!byDisplay) {
       byDisplay = new Map();
-      made.set(parent.style, byDisplay);
+      made.set(parent, byDisplay);
     }
     let style = byDisplay.get(display);
     if (!style) {
       // `display` is the one property it does not start from: it is the
       // box the fix-up made, and layout asks the style what a box is
-      style = inherit(parent.style, initial);
+      style = inherit(parent, initial);
       style.display = display;
       byDisplay.set(display, style);
     }
@@ -2753,7 +2854,7 @@ function anonymousOf(
   anonymous: AnonymousStyle,
   display: ComputedStyle['display'] = kind as ComputedStyle['display'],
 ): Box {
-  const box = new Box(kind, null, anonymous(parent, display));
+  const box = new Box(kind, null, anonymous(parent.style, display));
   box.parent = parent;
   for (const child of run) {
     child.parent = box;

package/src/html/layout/cache.ts

@@ -190,6 +190,7 @@ export const RUN_FIELDS = [
   'features',
   'nowrap',
   'shapeApart',
+  'kernAcross',
 ] as const satisfies readonly (keyof TextRun)[];
 
 /** A field of `TextRun` missing from `RUN_FIELDS` names itself here. */
@@ -223,7 +224,8 @@ function sameRun(a: TextRun, b: TextRun): boolean {
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&
-    a.shapeApart === b.shapeApart
+    a.shapeApart === b.shapeApart &&
+    a.kernAcross === b.kernAcross
   );
 }
 
@@ -250,7 +252,8 @@ function sameStyle(
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&
-    a.shapeApart === b.shapeApart
+    a.shapeApart === b.shapeApart &&
+    a.kernAcross === b.kernAcross
   );
 }
 
@@ -265,6 +268,7 @@ export const OPTION_FIELDS = [
   'overflow',
   'overflowWrap',
   'wrap',
+  'fit',
 ] as const satisfies readonly (keyof Options)[];
 
 /** An option missing from `OPTION_FIELDS` names itself here. */
@@ -284,6 +288,7 @@ function sameOptions(a: Options, b: Options): boolean {
     a.maxLines === b.maxLines &&
     a.overflow === b.overflow &&
     a.overflowWrap === b.overflowWrap &&
-    a.wrap === b.wrap
+    a.wrap === b.wrap &&
+    a.fit === b.fit
   );
 }

package/src/html/layout/flex.ts

@@ -478,7 +478,10 @@ function placeItems(
       definite,
       !row,
     );
-    bottom = Math.max(bottom, top + child.height);
+    // to the end of its margin box, as Yoga measured the box: a negative
+    // margin takes the item's end back in, which Codex's search field
+    // hangs a pixel over its form's border with, top and bottom
+    bottom = Math.max(bottom, top + child.height + child.marginBottom);
   }
   return bottom;
 }

package/src/html/layout/floats.ts

@@ -153,6 +153,30 @@ export class FloatContext {
     return lowest;
   }
 
+  /** Move the floats placed since `mark` down by `dy`, with the block they
+   *  were placed in: a list item's first block goes lower to make room
+   *  for its marker once it is laid out (`layoutChildren`). */
+  moveSince(mark: number, dy: number): void {
+    if (!dy || mark >= this._boxes.length) return;
+    for (let i = mark; i < this._boxes.length; i += 1) {
+      const float = this._boxes[i];
+      this._boxes[i] = {
+        ...float,
+        top: float.top + dy,
+        bottom: float.bottom + dy,
+      };
+    }
+    this._lowestLeft = -Infinity;
+    this._lowestRight = -Infinity;
+    this._lastTop = -Infinity;
+    for (const float of this._boxes) {
+      if (float.top > this._lastTop) this._lastTop = float.top;
+      if (float.side === 'left')
+        this._lowestLeft = Math.max(this._lowestLeft, float.bottom);
+      else this._lowestRight = Math.max(this._lowestRight, float.bottom);
+    }
+  }
+
   /** How far down the floats reach — what a container that establishes a
    *  BFC has to grow to, so it does not end above its own floats. */
   get bottom(): number {