@react-x11/components 0.13.0 → 0.14.1

package/src/html/css/cascade.ts

@@ -21,7 +21,6 @@ import { Element as DomElement, isTag } from 'domhandler';
 import type { Element } from 'domhandler';
 
 import { attr, tagOf } from '../dom.js';
-import { svgSizeHint } from '../svg.js';
 import {
   asciiLower,
   escapeEnd,
@@ -33,6 +32,7 @@ import type { Declaration, StyleRule, Stylesheet } from './parse.js';
 import {
   applyDeclaration,
   blockify,
+  settleButton,
   settleContentVisibility,
   settleOverflow,
   settleClamp,
@@ -53,6 +53,13 @@ import type { UnitContext } from './values.js';
 import { viewportUnit } from './values.js';
 import { customProperties, substituteIn } from './vars.js';
 import type { CustomProps } from './vars.js';
+import {
+  ROOT_BOX_PROPS,
+  SHAPE_TAGS,
+  isShapeProp,
+  shapeValue,
+} from './shapes.js';
+import type { ShapeContext, ShapeStyle, ShapeStyles } from './shapes.js';
 
 /** Where a declaration came from. Higher wins before specificity is asked. */
 const enum Origin {
@@ -138,6 +145,14 @@ interface IndexedRule {
   compiled: boolean;
   /** Which rule this is, in a sharing key (`Cascade.sharedStyleFor`). */
   id: number;
+  /** For a rule asked of the elements in a drawing by their type, or of
+   *  them all (`Cascade.shapeStyles`): the ids and classes it asks of its
+   *  subject's ancestors (`ancestorKeys`). Null until a drawing asks, and
+   *  in every other rule. */
+  needs: readonly string[] | null;
+  /** For a rule kept for drawings: whether it declares something a
+   *  drawing's root does not have from its box's style. Null until asked. */
+  root: boolean | null;
 }
 
 /**
@@ -193,6 +208,11 @@ class RuleIndex {
    */
   reaches(el: Element): boolean {
     if (this.universal.length || this.byTag.has(tagOf(el))) return true;
+    return this.names(el);
+  }
+
+  /** Whether a bucket here is for `el`'s id, or for a class of its. */
+  names(el: Element): boolean {
     if (this.byId.size) {
       const id = attr(el, 'id');
       if (id && this.byId.has(id)) return true;
@@ -208,18 +228,19 @@ class RuleIndex {
     return false;
   }
 
-  add(rule: StyleRule): void {
+  add(rule: StyleRule, key = rightmostKey(rule.selector)): void {
     this.size += 1;
     const indexed: IndexedRule = {
       rule,
       match: null,
       compiled: false,
       id: this._nextId++,
+      needs: null,
+      root: null,
     };
     if (rule.selector.includes(':hover') || rule.selector.includes(':active')) {
       this.hoverSensitive = true;
     }
-    const key = rightmostKey(rule.selector);
     if (UNSHAREABLE.test(rule.selector)) {
       if (key.kind === 'id') this.ownStyleIds.add(key.name);
       else if (key.kind === 'class') this.ownStyleClasses.add(key.name);
@@ -575,11 +596,12 @@ const POINTER_PSEUDO = /:(?:hover|active)(?![\w-])/i;
 function compileSelector(
   selector: string,
   adapter: CssSelectAdapter,
+  pseudos: typeof PSEUDOS = PSEUDOS,
 ): (el: Element) => boolean {
   return compile(noEmptyWords(selector), {
     adapter,
     xmlMode: false,
-    pseudos: PSEUDOS,
+    pseudos,
     cacheResults: !POINTER_PSEUDO.test(selector),
   } as unknown as Parameters<typeof compile>[1]) as unknown as (
     node: Element,
@@ -640,7 +662,14 @@ function rightmostKey(selector: string): {
       start = i + 1;
     }
   }
-  const compound = selector.slice(start);
+  return compoundKey(selector.slice(start));
+}
+
+/** A compound selector's most selective key (`rightmostKey`). */
+function compoundKey(compound: string): {
+  kind: 'id' | 'class' | 'tag' | 'any';
+  name: string;
+} {
   let id: string | null = null;
   let cls: string | null = null;
   let tag: string | null = null;
@@ -674,6 +703,39 @@ function rightmostKey(selector: string): {
   return { kind: 'any', name: '' };
 }
 
+/**
+ * The ids and classes a selector asks of its subject's ancestors: for each
+ * compound a descendant or a child combinator follows, its id, or else its
+ * first class, as `#name` or `.name`. Such a compound is an ancestor of
+ * the subject — one a sibling combinator follows is a sibling of one — so
+ * an element with no ancestor of some such name is not the rule's, which
+ * is known without matching it. A compound with neither asks nothing.
+ */
+function ancestorKeys(selector: string): string[] {
+  const keys: string[] = [];
+  const compounds = compoundsOf(selector);
+  for (let i = 0; i < compounds.length - 1; i += 1) {
+    const { text, next } = compounds[i];
+    if (next !== ' ' && next !== '>') continue;
+    const key = compoundKey(text);
+    if (key.kind === 'id') keys.push(`#${key.name}`);
+    else if (key.kind === 'class') keys.push(`.${key.name}`);
+  }
+  return keys;
+}
+
+/** What the rules asked of every element of a drawing, or of every one of
+ *  a type, ask of its ancestors (`Cascade.shapeStyles`). */
+interface ShapeNeeds {
+  /** The classes and the ids some such rule names in an ancestor. */
+  classes: Set<string>;
+  ids: Set<string>;
+  /** Whether a rule asked of every element asks nothing of its ancestors,
+   *  and the types with such a rule. */
+  universal: boolean;
+  tags: Set<string>;
+}
+
 function balancedEnd(
   text: string,
   from: number,
@@ -762,6 +824,13 @@ export class Cascade {
     marker: new RuleIndex(),
     selection: new RuleIndex(),
   };
+  /** The author's rules that could style a shape in a drawing: the ones
+   *  that declare a property a shape has (`shapes.ts`) and whose subject
+   *  is no element of HTML's alone. They are in `_index` too, for the
+   *  elements that have boxes; these are asked of the ones in an inline
+   *  `<svg>`, which have none (`shapeStyles`). */
+  private _shapes = new RuleIndex();
+  private _shapeNeeds: ShapeNeeds | null = null;
   private _adapter: CssSelectAdapter;
   /** The compounds of the selectors that test the pointer, each without
    *  its `:hover` or `:active` (`pointerCompounds`), and their matchers,
@@ -836,6 +905,8 @@ export class Cascade {
   /** Whether any declaration has a length in `lh` or `rlh`: only then is
    *  the line height settled ahead of the declarations that read it. */
   private _lh = false;
+  /** The pseudo-classes css-select is handed, `:root` this cascade's. */
+  private _pseudos: typeof PSEUDOS;
 
   constructor(
     sheets: Stylesheet[],
@@ -847,7 +918,13 @@ export class Cascade {
     zeroWidth: FaceMetric | null = null,
     normalLine: FaceMetric | null = null,
     families: FontFamilies | null = null,
+    /** The document's element where it is not an `<html>`: an SVG image's
+     *  `<svg>`, which is `:root` there (Selectors 4, 14.1). */
+    documentElement: Element | null = null,
   ) {
+    this._pseudos = documentElement
+      ? { ...PSEUDOS, root: (el: Element) => el === documentElement }
+      : PSEUDOS;
     this._xHeightOf = xHeight;
     this._zeroWidthOf = zeroWidth;
     this._normalLineOf = normalLine;
@@ -874,7 +951,17 @@ export class Cascade {
         if (!this._lh && usesLh(rule.declarations)) this._lh = true;
         const pseudo = splitPseudoElement(rule);
         if (pseudo) this._pseudo[pseudo.which].add(pseudo.rule);
-        else this._index.add(rule);
+        else {
+          const key = rightmostKey(rule.selector);
+          this._index.add(rule, key);
+          if (
+            rule.order >= 0 &&
+            (key.kind !== 'tag' || SHAPE_TAGS.has(key.name)) &&
+            declaresShape(rule.declarations)
+          ) {
+            this._shapes.add(rule, key);
+          }
+        }
         this._noteHover((pseudo?.rule ?? rule).selector);
       }
       for (const bp of sheet.breakpoints) breakpoints.add(bp);
@@ -1051,7 +1138,7 @@ export class Cascade {
    *  it, as a rule it refuses drops out of the cascade. */
   private _compile(selector: string): ((el: Element) => boolean) | null {
     try {
-      return compileSelector(selector, this._adapter);
+      return compileSelector(selector, this._adapter, this._pseudos);
     } catch {
       return null;
     }
@@ -1237,6 +1324,7 @@ export class Cascade {
             parentStyle,
             inFlexContainer,
             candidates,
+            true,
           ),
           key: this._nextShareKey++,
         };
@@ -1293,6 +1381,7 @@ export class Cascade {
       parentStyle,
       inFlexContainer,
       this._candidates(el),
+      true,
     );
   }
 
@@ -1509,6 +1598,9 @@ export class Cascade {
     parentStyle: ComputedStyle,
     inFlexContainer: boolean,
     candidates: Candidate[],
+    /** Whether the style is the element's own, and not that of one of its
+     *  pseudo-elements. */
+    own = false,
   ): ComputedStyle {
     const style = inherit(parentStyle, this.initial);
     // custom properties first, in cascade order, so every `var()` in the
@@ -1521,10 +1613,14 @@ export class Cascade {
     // em-relative length in the same rule resolves against this element's.
     const root = isRootElement(el);
     const rootStyle = root ? this.initial : (this._root ?? this.initial);
+    // whose declaration is being applied: the UA sheet's families are the
+    // host's own faces, and its lists end where they end
+    let authored = true;
     const ctxParent: UnitContext = {
       em: parentStyle.fontSize,
       rem: rootStyle.fontSize,
       initial: this.initial,
+      fallbackFamily: () => (authored ? this.initial.fontFamily : null),
       vw: this.viewportWidth,
       vh: this.viewportHeight,
       scale: this.scale,
@@ -1543,6 +1639,7 @@ export class Cascade {
     let sized = false;
     let keyword = false;
     for (const c of candidates) {
+      authored = c.origin !== Origin.UserAgent;
       for (const d of pick(c)) {
         if (
           d.prop === 'font-family' ||
@@ -1606,6 +1703,7 @@ export class Cascade {
     // them. A `font` sets the size as well, which the first pass settled.
     if (this._lh) {
       for (const c of candidates) {
+        authored = c.origin !== Origin.UserAgent;
         for (const d of pick(c)) {
           if (d.prop === 'line-height' || d.prop === 'font') {
             this._apply(style, parentStyle, d, ctx);
@@ -1621,6 +1719,7 @@ export class Cascade {
     }
     const settled = style.fontSize;
     for (const c of candidates) {
+      authored = c.origin !== Origin.UserAgent;
       for (const d of pick(c)) {
         if (d.prop === 'font-size' || d.custom) continue;
         this._apply(style, parentStyle, d, ctx);
@@ -1648,6 +1747,10 @@ export class Cascade {
     settleOverflow(style);
     settleContentVisibility(style);
     blockify(style, inFlexContainer);
+    // a button is laid out as one, whatever `display` it was given
+    if (own && el.name.length === 6 && tagOf(el) === 'button') {
+      settleButton(style);
+    }
     decorate(style);
     // which faces of the document's own families this family, weight and
     // slant ask for — known only now, with all three computed
@@ -1726,6 +1829,185 @@ export class Cascade {
     return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
   }
 
+  /** Whether any rule could style a shape in a drawing: a document with
+   *  none asks nothing of its drawings (`shapeStyles`). */
+  get stylesShapes(): boolean {
+    return this._shapes.size > 0;
+  }
+
+  /** Whether a pointer move can change what a rule gives a shape in a
+   *  drawing. */
+  get shapesFollowPointer(): boolean {
+    return this._shapes.hoverSensitive;
+  }
+
+  /**
+   * What the rules give the elements of an inline drawing, `root` and what
+   * is in it, or null where none reaches one: the narrow cascade of
+   * `shapes.ts`. `style` is the root's computed style — its `color`, its
+   * custom properties and its font size are what a value in the drawing is
+   * read against, as though every element in it had inherited them, which
+   * all but one a rule gives its own has.
+   *
+   * An element's rules and its `style` attribute are put in cascade order,
+   * and each property is the last valid declaration's. The presentation
+   * attributes are below them all (SVG 2, 6.2), and `SvgView` reads those
+   * itself. The root's box has its paint, its opacity and whether it is
+   * shown from its computed style, so those are left out for it.
+   *
+   * Asked as a drawing is first painted (`BoxTree.shapeStyler`), of the
+   * rules in `_shapes` alone: a page of hundreds of icons pays for the ones
+   * it shows, a look in the buckets for each of their elements where no
+   * rule reaches them, and a document with no such rule nothing.
+   */
+  shapeStyles(root: Element, style: ComputedStyle): ShapeStyles | null {
+    const index = this._shapes;
+    if (!index.size) return null;
+    // The rules kept by a class or an id are asked of the elements with
+    // that name. The rest — `.dark .logo path`, `.menu [aria-hidden]` — are
+    // asked of every `<path>`, or of every element, and nearly all of them
+    // are for some other part of the page: each says so by the class or the
+    // id it asks of an ancestor, which is looked for once for the drawing,
+    // around it and in it, where matching the rule would look for it from
+    // each of its elements. On a page with none of them around a drawing,
+    // nothing is matched at all.
+    const needs = (this._shapeNeeds ??= this._needsOfShapes());
+    const found = new Set<string>();
+    const asks = needs.classes.size > 0 || needs.ids.size > 0;
+    const note = (el: Element): void => {
+      if (needs.ids.size) {
+        const id = attr(el, 'id');
+        if (id && needs.ids.has(id)) found.add(`#${id}`);
+      }
+      if (needs.classes.size) {
+        const className = attr(el, 'class');
+        if (className) {
+          for (const name of className.split(/\s+/)) {
+            if (needs.classes.has(name)) found.add(`.${name}`);
+          }
+        }
+      }
+    };
+    if (asks) {
+      let at = root.parent;
+      while (at && at.type === 'tag') {
+        note(at as Element);
+        at = at.parent;
+      }
+    }
+    const live = (indexed: IndexedRule): boolean => {
+      const keys = indexed.needs;
+      if (keys) for (const key of keys) if (!found.has(key)) return false;
+      return true;
+    };
+    // The root's box has its paint from its computed style, so most of the
+    // rules that name a drawing by its class — an icon set's — have
+    // nothing else to say of it.
+    const liveForRoot = (indexed: IndexedRule): boolean =>
+      (indexed.root ??= declaresRootShape(indexed.rule.declarations)) &&
+      live(indexed);
+
+    let of: Map<Element, ShapeStyle> | null = null;
+    let key = '';
+    let ctx: ShapeContext | null = null;
+    // in document order, the root first: an element's place in it is what
+    // the key names it by, and its ancestors in the drawing are noted
+    // before it is asked of
+    const stack: Element[] = [root];
+    let place = -1;
+    while (stack.length) {
+      const el = stack.pop()!;
+      place += 1;
+      // what is in a `<foreignObject>` is not the drawing's to draw
+      if (el.name !== 'foreignobject' && el.name !== 'foreignObject') {
+        const children = el.children;
+        for (let i = children.length - 1; i >= 0; i -= 1) {
+          const child = children[i];
+          if (child.type === 'tag') stack.push(child as Element);
+        }
+      }
+      if (asks) note(el);
+      const tag = tagOf(el);
+      const asked = found.size
+        ? index.universal.length > 0 || index.byTag.has(tag)
+        : needs.universal || needs.tags.has(tag);
+      if (!asked && !index.names(el)) continue;
+      const candidates: Candidate[] = [];
+      this._matchInto(
+        index,
+        el,
+        candidates,
+        undefined,
+        el === root ? liveForRoot : live,
+      );
+      if (!candidates.length) continue;
+      const inline = attr(el, 'style');
+      if (inline) pushInlineShapes(candidates, inline);
+      candidates.sort(byCascade);
+      ctx ??= {
+        color: style.color,
+        scheme: style.colorScheme,
+        units: {
+          em: style.fontSize,
+          rem: (this._root ?? this.initial).fontSize,
+          vw: this.viewportWidth,
+          vh: this.viewportHeight,
+          scale: this.scale,
+          initial: this.initial,
+        },
+      };
+      let own: Record<string, string> | null = null;
+      for (const c of candidates) {
+        for (const d of pick(c)) {
+          if (!isShapeProp(d.prop)) continue;
+          if (el === root && ROOT_BOX_PROPS.has(d.prop)) continue;
+          // a `var()` with nothing to stand for it is invalid at
+          // computed-value time, and the property as though `unset`
+          const value = shapeValue(
+            d.prop,
+            d.vars ? (substituteIn(d.value, style.custom) ?? 'unset') : d.value,
+            ctx,
+          );
+          if (value !== null) (own ??= {})[d.prop] = value;
+        }
+      }
+      if (!own) continue;
+      (of ??= new Map()).set(el, own);
+      key += `${place}{`;
+      for (const prop in own) key += `${prop}:${own[prop]};`;
+      key += '}';
+    }
+    return of ? { of, key } : null;
+  }
+
+  /** `ShapeNeeds`, and each such rule's own (`IndexedRule.needs`). */
+  private _needsOfShapes(): ShapeNeeds {
+    const index = this._shapes;
+    const needs: ShapeNeeds = {
+      classes: new Set(),
+      ids: new Set(),
+      universal: false,
+      tags: new Set(),
+    };
+    const read = (bucket: IndexedRule[]): boolean => {
+      let free = false;
+      for (const indexed of bucket) {
+        const keys = ancestorKeys(indexed.rule.selector);
+        indexed.needs = keys;
+        if (!keys.length) free = true;
+        for (const key of keys) {
+          (key[0] === '#' ? needs.ids : needs.classes).add(key.slice(1));
+        }
+      }
+      return free;
+    };
+    needs.universal = read(index.universal);
+    for (const [tag, bucket] of index.byTag) {
+      if (read(bucket)) needs.tags.add(tag);
+    }
+    return needs;
+  }
+
   /**
    * Whether the pointer's move from `was` to where it is changed which
    * rules match `el`, or its `::before`, `::after` or another of its
@@ -1768,6 +2050,8 @@ export class Cascade {
     el: Element,
     out: Candidate[] | null,
     matched?: number[],
+    /** The rules to try, where some are known not to match without it. */
+    live?: (indexed: IndexedRule) => boolean,
   ): void {
     // A media query's width is CSS pixels; the viewport is kept in device.
     const width = this.viewportWidth / this.scale;
@@ -1776,6 +2060,7 @@ export class Cascade {
     const consider = (bucket: IndexedRule[] | undefined): void => {
       if (!bucket) return;
       for (const indexed of bucket) {
+        if (live !== undefined && !live(indexed)) continue;
         const rule = indexed.rule;
         if (
           !mediaMatches(
@@ -1791,7 +2076,11 @@ export class Cascade {
         if (!indexed.compiled) {
           indexed.compiled = true;
           try {
-            indexed.match = compileSelector(rule.selector, this._adapter);
+            indexed.match = compileSelector(
+              rule.selector,
+              this._adapter,
+              this._pseudos,
+            );
           } catch {
             // A selector this matcher does not know (`::-moz-…`, a CSS4 form
             // it has not learnt) drops out of the cascade rather than out of
@@ -2071,6 +2360,51 @@ function setsContent(c: Candidate): boolean {
 /** Whether a rule's declarations set a custom property, by the array. */
 const CUSTOM_IN = new WeakMap<Declaration[], boolean>();
 
+/** Whether declarations set a property a shape in a drawing has. */
+function declaresShape(declarations: readonly Declaration[]): boolean {
+  for (const d of declarations) if (isShapeProp(d.prop)) return true;
+  return false;
+}
+
+/** Whether declarations set one a drawing's root does not have from its
+ *  box's style (`ROOT_BOX_PROPS`). */
+function declaresRootShape(declarations: readonly Declaration[]): boolean {
+  for (const d of declarations) {
+    if (isShapeProp(d.prop) && !ROOT_BOX_PROPS.has(d.prop)) return true;
+  }
+  return false;
+}
+
+/** A `style` attribute's declarations of a shape's properties, as
+ *  candidates: over every rule, and its `!important` ones over theirs. */
+function pushInlineShapes(out: Candidate[], inline: string): void {
+  const declarations = parseDeclarations(inline).filter((d) =>
+    isShapeProp(d.prop),
+  );
+  const normal = declarations.filter((d) => !d.important);
+  const important = declarations.filter((d) => d.important);
+  if (normal.length) {
+    out.push({
+      origin: Origin.Inline,
+      layer: null,
+      specificity: 0,
+      order: 0,
+      declarations: normal,
+      only: -1,
+    });
+  }
+  if (important.length) {
+    out.push({
+      origin: Origin.InlineImportant,
+      layer: null,
+      specificity: 0,
+      order: 0,
+      declarations: important,
+      only: -1,
+    });
+  }
+}
+
 function pick(c: Candidate): Declaration[] {
   return c.only < 0 ? c.declarations : [c.declarations[c.only]];
 }
@@ -2275,6 +2609,12 @@ function presentationHints(el: Element): Declaration[] {
     const height = attr(el, 'height');
     const h = height ? svgSizeHint(height) : null;
     if (h) push('height', h);
+    // and its paint is its `fill` and `stroke` properties' (13.2), which a
+    // rule of the document's then sets over the attribute
+    const fill = attr(el, 'fill');
+    if (fill) push('fill', fill);
+    const stroke = attr(el, 'stroke');
+    if (stroke) push('stroke', stroke);
   }
 
   if (tag === 'table') {
@@ -2450,6 +2790,24 @@ function lengthAttr(value: string): string {
   return Number.isFinite(n) ? `${n}px` : v;
 }
 
+/** A number and a unit, as an SVG's `width` and `height` are written. */
+const SVG_LENGTH =
+  /^\s*([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*([a-z]*)\s*$/i;
+
+/**
+ * The `width`/`height` of an inline `<svg>` as CSS: they are presentation
+ * attributes for the properties of the same names (SVG 2, 5.1.1), so
+ * `height="50%"` is a percentage of the containing block like a style's.
+ * A bare number is pixels; null for what CSS would not parse.
+ */
+function svgSizeHint(value: string): string | null {
+  const v = value.trim();
+  if (/^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?%$/i.test(v)) return v;
+  const m = SVG_LENGTH.exec(v);
+  if (!m) return null;
+  return m[2] ? v : `${parseFloat(m[1])}px`;
+}
+
 function closestTable(el: Element): Element | null {
   let node = el.parent;
   while (node) {

package/src/html/css/color.ts

@@ -773,6 +773,24 @@ export function lightDark(
   value: string,
   scheme: 'light' | 'dark',
 ): string | null {
+  // kept by the value: the UA sheet's link colour is one, so every link of
+  // every document asks, and a theme's are a few asked by every element
+  const kept = PICKED[scheme];
+  let picked = kept.get(value);
+  if (picked === undefined) {
+    picked = pickScheme(value, scheme);
+    if (kept.size >= 512) kept.clear();
+    kept.set(value, picked);
+  }
+  return picked;
+}
+
+const PICKED = {
+  light: new Map<string, string | null>(),
+  dark: new Map<string, string | null>(),
+};
+
+function pickScheme(value: string, scheme: 'light' | 'dark'): string | null {
   let out = value;
   // a branch can hold another, which the next round replaces
   for (let round = 0; round < 32; round += 1) {
@@ -827,6 +845,17 @@ export function usedColorScheme(
   return first ?? preferred;
 }
 
+/**
+ * A browser's own colours in each scheme — the system colours `Canvas`,
+ * `CanvasText` and `LinkText` (CSS Color 4, 6.2), as Chrome has them: what
+ * a document is drawn in where its root's scheme is not the palette's,
+ * which has the colours of its own scheme and of no other.
+ */
+export const SCHEME_COLORS = {
+  light: { canvas: '#ffffff', text: '#000000', link: '#0000ee' },
+  dark: { canvas: '#121212', text: '#ffffff', link: '#9e9eff' },
+} as const;
+
 const SCHEME_IDENT = /^-?(?:[a-z_]|--)[\w-]*$/;
 /** What a scheme's name cannot be: the keywords the grammar has, and the
  *  CSS-wide ones, which reach here only in a list. */