@react-x11/components 0.13.0 → 0.14.1

package/dist/html/css/cascade.js

@@ -19,14 +19,14 @@ import { compile } from 'css-select';
 import * as DomUtils from 'domutils';
 import { Element as DomElement, isTag } from 'domhandler';
 import { attr, tagOf } from '../dom.js';
-import { svgSizeHint } from '../svg.js';
 import { asciiLower, escapeEnd, mediaMatches, readIdent, startsIdent, } from './parse.js';
-import { applyDeclaration, blockify, settleContentVisibility, settleOverflow, settleClamp, copyStyle, decorate, inherit, initialOne, initialStyle, isInherited, } from './style.js';
+import { applyDeclaration, blockify, settleButton, settleContentVisibility, settleOverflow, settleClamp, copyStyle, decorate, inherit, initialOne, initialStyle, isInherited, } from './style.js';
 import { parseDeclarations } from './parse.js';
 import { CounterStyles, counterStyleRule } from './counter-styles.js';
 import { PALETTE_CHROME } from './ua.js';
 import { viewportUnit } from './values.js';
 import { customProperties, substituteIn } from './vars.js';
+import { ROOT_BOX_PROPS, SHAPE_TAGS, isShapeProp, shapeValue, } from './shapes.js';
 /** Where a declaration came from. Higher wins before specificity is asked. */
 var Origin;
 (function (Origin) {
@@ -104,6 +104,10 @@ class RuleIndex {
     reaches(el) {
         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) {
         if (this.byId.size) {
             const id = attr(el, 'id');
             if (id && this.byId.has(id))
@@ -120,18 +124,19 @@ class RuleIndex {
         }
         return false;
     }
-    add(rule) {
+    add(rule, key = rightmostKey(rule.selector)) {
         this.size += 1;
         const indexed = {
             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);
@@ -476,11 +481,11 @@ const POINTER_PSEUDO = /:(?:hover|active)(?![\w-])/i;
  * `#box:has(a:hover) .m` answered what it did before the first move, for
  * good.
  */
-function compileSelector(selector, adapter) {
+function compileSelector(selector, adapter, pseudos = PSEUDOS) {
     return compile(noEmptyWords(selector), {
         adapter,
         xmlMode: false,
-        pseudos: PSEUDOS,
+        pseudos,
         cacheResults: !POINTER_PSEUDO.test(selector),
     });
 }
@@ -534,7 +539,10 @@ function rightmostKey(selector) {
             start = i + 1;
         }
     }
-    const compound = selector.slice(start);
+    return compoundKey(selector.slice(start));
+}
+/** A compound selector's most selective key (`rightmostKey`). */
+function compoundKey(compound) {
     let id = null;
     let cls = null;
     let tag = null;
@@ -577,6 +585,29 @@ function rightmostKey(selector) {
         return { kind: 'tag', name: tag };
     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) {
+    const keys = [];
+    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;
+}
 function balancedEnd(text, from, open, close) {
     let depth = 0;
     for (let i = from; i < text.length; i += 1) {
@@ -618,6 +649,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`). */
+    _shapes = new RuleIndex();
+    _shapeNeeds = null;
     _adapter;
     /** The compounds of the selectors that test the pointer, each without
      *  its `:hover` or `:active` (`pointerCompounds`), and their matchers,
@@ -681,7 +719,15 @@ 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. */
     _lh = false;
-    constructor(sheets, look, viewportWidth, viewportHeight, scale = 1, xHeight = null, zeroWidth = null, normalLine = null, families = null) {
+    /** The pseudo-classes css-select is handed, `:root` this cascade's. */
+    _pseudos;
+    constructor(sheets, look, viewportWidth, viewportHeight, scale = 1, xHeight = null, zeroWidth = null, normalLine = null, families = 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 = null) {
+        this._pseudos = documentElement
+            ? { ...PSEUDOS, root: (el) => el === documentElement }
+            : PSEUDOS;
         this._xHeightOf = xHeight;
         this._zeroWidthOf = zeroWidth;
         this._normalLineOf = normalLine;
@@ -712,8 +758,15 @@ export class Cascade {
                 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)
@@ -888,7 +941,7 @@ export class Cascade {
      *  it, as a rule it refuses drops out of the cascade. */
     _compile(selector) {
         try {
-            return compileSelector(selector, this._adapter);
+            return compileSelector(selector, this._adapter, this._pseudos);
         }
         catch {
             return null;
@@ -1065,7 +1118,7 @@ export class Cascade {
             let shared = this._sharedByMatch.get(key);
             if (shared === undefined) {
                 shared = {
-                    style: this._computeStyle(el, parentStyle, inFlexContainer, candidates),
+                    style: this._computeStyle(el, parentStyle, inFlexContainer, candidates, true),
                     key: this._nextShareKey++,
                 };
                 this._sharedByMatch.set(key, shared);
@@ -1113,7 +1166,7 @@ export class Cascade {
      * a style is computed only for the elements with none to share.
      */
     styleFor(el, parentStyle, inFlexContainer) {
-        return this._computeStyle(el, parentStyle, inFlexContainer, this._candidates(el));
+        return this._computeStyle(el, parentStyle, inFlexContainer, this._candidates(el), true);
     }
     /**
      * The style of an element's `::before` or `::after`, or null when it has
@@ -1305,7 +1358,10 @@ export class Cascade {
         return line;
     }
     /** `styleFor`, from the rules and hints already gathered for `el`. */
-    _computeStyle(el, parentStyle, inFlexContainer, candidates) {
+    _computeStyle(el, parentStyle, inFlexContainer, candidates, 
+    /** Whether the style is the element's own, and not that of one of its
+     *  pseudo-elements. */
+    own = false) {
         const style = inherit(parentStyle, this.initial);
         // custom properties first, in cascade order, so every `var()` in the
         // declarations below finds the one that wins
@@ -1317,10 +1373,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 = {
             em: parentStyle.fontSize,
             rem: rootStyle.fontSize,
             initial: this.initial,
+            fallbackFamily: () => (authored ? this.initial.fontFamily : null),
             vw: this.viewportWidth,
             vh: this.viewportHeight,
             scale: this.scale,
@@ -1339,6 +1399,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' ||
                     d.prop === 'font-weight' ||
@@ -1401,6 +1462,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);
@@ -1416,6 +1478,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;
@@ -1443,6 +1506,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
@@ -1513,6 +1580,187 @@ export class Cascade {
         // the root is still the initial containing block.
         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() {
+        return this._shapes.size > 0;
+    }
+    /** Whether a pointer move can change what a rule gives a shape in a
+     *  drawing. */
+    get shapesFollowPointer() {
+        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, style) {
+        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();
+        const asks = needs.classes.size > 0 || needs.ids.size > 0;
+        const note = (el) => {
+            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);
+                at = at.parent;
+            }
+        }
+        const live = (indexed) => {
+            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) => (indexed.root ??= declaresRootShape(indexed.rule.declarations)) &&
+            live(indexed);
+        let of = null;
+        let key = '';
+        let ctx = 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 = [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);
+                }
+            }
+            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 = [];
+            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 = 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`). */
+    _needsOfShapes() {
+        const index = this._shapes;
+        const needs = {
+            classes: new Set(),
+            ids: new Set(),
+            universal: false,
+            tags: new Set(),
+        };
+        const read = (bucket) => {
+            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
@@ -1550,7 +1798,9 @@ export class Cascade {
     }
     /** The rules of `index` that match `el`, pushed onto `out` as candidates,
      *  and their ids onto `matched` in the order they were tried. */
-    _matchInto(index, el, out, matched) {
+    _matchInto(index, el, out, matched, 
+    /** The rules to try, where some are known not to match without it. */
+    live) {
         // A media query's width is CSS pixels; the viewport is kept in device.
         const width = this.viewportWidth / this.scale;
         const height = this.viewportHeight / this.scale;
@@ -1558,6 +1808,8 @@ export class Cascade {
             if (!bucket)
                 return;
             for (const indexed of bucket) {
+                if (live !== undefined && !live(indexed))
+                    continue;
                 const rule = indexed.rule;
                 if (!mediaMatches(rule.media, width, this.look.colorScheme, height, this.scale)) {
                     continue;
@@ -1565,7 +1817,7 @@ 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
@@ -1844,6 +2096,49 @@ function setsContent(c) {
 }
 /** Whether a rule's declarations set a custom property, by the array. */
 const CUSTOM_IN = new WeakMap();
+/** Whether declarations set a property a shape in a drawing has. */
+function declaresShape(declarations) {
+    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) {
+    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, inline) {
+    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) {
     return c.only < 0 ? c.declarations : [c.declarations[c.only]];
 }
@@ -2058,6 +2353,14 @@ function presentationHints(el) {
         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') {
         const border = attr(el, 'border');
@@ -2230,6 +2533,23 @@ function lengthAttr(value) {
     const n = parseFloat(v);
     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) {
+    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) {
     let node = el.parent;
     while (node) {