@react-x11/components 0.14.0 → 0.14.1

package/dist/html/css/cascade.d.ts

@@ -3,6 +3,7 @@ import type { Stylesheet } from './parse.js';
 import type { ComputedStyle, RootLook } from './style.js';
 import type { FontFamilies } from '../fonts.js';
 import { CounterStyles } from './counter-styles.js';
+import type { ShapeStyles } from './shapes.js';
 /** A style handed to every element with the same sharing key, and the key
  *  that element's children share under (`Cascade.sharedStyleFor`). */
 export interface SharedStyle {
@@ -121,6 +122,13 @@ export declare class Cascade {
     /** The rules for pseudo-elements, kept apart: they never style the
      *  element itself, and a document with none of them asks nothing. */
     private _pseudo;
+    /** 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;
+    private _shapeNeeds;
     private _adapter;
     /** The compounds of the selectors that test the pointer, each without
      *  its `:hover` or `:active` (`pointerCompounds`), and their matchers,
@@ -184,7 +192,12 @@ export declare 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;
-    constructor(sheets: Stylesheet[], look: RootLook, viewportWidth: number, viewportHeight: number, scale?: number, xHeight?: FaceMetric | null, zeroWidth?: FaceMetric | null, normalLine?: FaceMetric | null, families?: FontFamilies | null);
+    /** The pseudo-classes css-select is handed, `:root` this cascade's. */
+    private _pseudos;
+    constructor(sheets: Stylesheet[], look: RootLook, viewportWidth: number, viewportHeight: number, scale?: number, xHeight?: FaceMetric | null, zeroWidth?: FaceMetric | null, normalLine?: FaceMetric | null, families?: FontFamilies | 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);
     /** Whether declarations read the viewport's width or height (`vw`,
      *  `vh`, `vmin`, `vmax`), noted on the cascade. */
     private _noteViewportUnits;
@@ -403,6 +416,34 @@ export declare class Cascade {
         style: ComputedStyle;
         html: ComputedStyle | null;
     };
+    /** Whether any rule could style a shape in a drawing: a document with
+     *  none asks nothing of its drawings (`shapeStyles`). */
+    get stylesShapes(): boolean;
+    /** Whether a pointer move can change what a rule gives a shape in a
+     *  drawing. */
+    get shapesFollowPointer(): boolean;
+    /**
+     * 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;
+    /** `ShapeNeeds`, and each such rule's own (`IndexedRule.needs`). */
+    private _needsOfShapes;
     /**
      * Whether the pointer's move from `was` to where it is changed which
      * rules match `el`, or its `::before`, `::after` or another of its

package/dist/html/css/cascade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cascade.d.ts","sourceRoot":"","sources":["../../../src/html/css/cascade.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cascade.d.ts","sourceRoot":"","sources":["../../../src/html/css/cascade.ts"],"names":[],"mappings":"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"}

package/dist/html/css/cascade.js

@@ -19,7 +19,6 @@ 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, settleButton, settleContentVisibility, settleOverflow, settleClamp, copyStyle, decorate, inherit, initialOne, initialStyle, isInherited, } from './style.js';
 import { parseDeclarations } from './parse.js';
@@ -27,6 +26,7 @@ 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;
@@ -1527,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
@@ -1564,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;
@@ -1572,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;
@@ -1579,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
@@ -1858,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]];
 }
@@ -2252,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) {