@ng-native/fabric 0.14.0 → 0.15.0

package/dist/engine.js

@@ -7,7 +7,7 @@
  * because a persistent parent holds references to specific child handles. That bubble is
  * inherent and is what React's own Fabric renderer does.
  */
-import { boundDeclaration, boundRelativeLength, CSS_SPACE, isNegativeLineHeight, faded, fills, inlineInherited, setsInherited, StyleResolver, usesActive, elementsAtEnd, hasAbove, placeReadElsewhere, siblingReach, } from "./css.js";
+import { boundDeclaration, boundRelativeLength, CSS_SPACE, isNegativeLineHeight, faded, fills, inlineInherited, setsInherited, StyleResolver, usesActive, elementsAtEnd, hasAbove, joinSubjects, placeReadElsewhere, siblingReach, } from "./css.js";
 import { applyAria } from "./aria-props.js";
 import { STYLED_ELEMENTS } from "./element-styles.js";
 import { aimsElsewhere, animationEvent, bezier, interpolate, readsInheritedColour, sample, step, steppedKeys, tracksOf, } from "./transition.js";
@@ -189,6 +189,13 @@ const VIEW_EVENT_OPT_IN_PROPS = {
         topError: 'shouldNotifyLoadEvents',
         topProgress: 'shouldNotifyLoadEvents',
     },
+    // `ReactTextInputManager` watches each of these only behind a prop of the handler's name,
+    // which `TextInput.js` sets by passing the handler through. iOS's field sends them unasked.
+    AndroidTextInput: {
+        topContentSizeChange: 'onContentSizeChange',
+        topScroll: 'onScroll',
+        topKeyPress: 'onKeyPress',
+    },
 };
 /**
  * Props the engine itself writes or reads off a node, so never a misspelling: the style, the
@@ -461,10 +468,14 @@ const blockEdge = (props, side, logical) => [
 /**
  * A multiline field's `rows` as its height, where it was given none: that many lines of its
  * line height at the system text size, inside its padding and border, as a browser sizes a `<textarea>`. A native field
- * is as tall as its text, which is one line before anything is typed.
+ * is as tall as its text, which is one line before anything is typed. Taken off the props once
+ * read: neither platform's native field has a prop of that name.
  */
-function rowsTall(props, fontScale) {
+function rowsTall(viewName, props, fontScale) {
+    if (!TEXT_INPUTS.has(viewName))
+        return;
     const rows = Number(props['rows']);
+    delete props['rows'];
     const line = props['lineHeight'];
     if (props['multiline'] !== true || !(rows > 0) || typeof line !== 'number')
         return;
@@ -837,6 +848,12 @@ function placeholderFaded(props) {
     else if (opacity <= 0)
         props['placeholderTextColor'] = 'rgba(0, 0, 0, 0)';
 }
+/**
+ * What a removed prop travels as: null, which native resets the prop on, except `pointerEvents`,
+ * which react-native-svg's Android root reads as a string and stops the app on a null. `auto` is
+ * what no value means.
+ */
+const cleared = (key) => (key === 'pointerEvents' ? 'auto' : null);
 /** The least alpha iOS sends a touch to a view at: under a hundredth it is passed over. */
 const TOUCHED_ALPHA = 0.011;
 /**
@@ -1779,6 +1796,8 @@ const EASED_COLOURS = new Set([
     'borderLeftColor',
 ]);
 const NATIVELY_EASED = new Set(['opacity', 'transform', ...EASED_COLOURS]);
+/** What a node that hands its background colour over has handed so far: nothing. */
+const UNREPORTED = Symbol('unreported');
 /** The style keys that are a view's background. */
 const PAINT_KEYS = [
     'backgroundColor',
@@ -1787,6 +1806,15 @@ const PAINT_KEYS = [
     'experimental_backgroundPosition',
     'experimental_backgroundRepeat',
 ];
+/** Note a prop written on a node that keeps `writes`: see there. */
+function noteWrite(node, key, value) {
+    if (!node.writes)
+        return;
+    if (value === undefined || value === null)
+        node.writes.delete(key);
+    else
+        node.writes.add(key);
+}
 /**
  * A node's own props onto what it commits with. No native prop has a hyphen: `data-*` and `aria-*`
  * attributes stay on the node for selectors to match, and an `aria-*` one is mapped to the prop
@@ -1953,9 +1981,14 @@ function reportHover(host) {
     hoverReported = true;
     console.warn('[angular-native] @defer (on hover) fires when a pointer enters the trigger, which takes a trackpad or a mouse (an iPad, or an Android device with one), or when the trigger takes focus. On a phone it waits for focus alone; add another trigger, such as on interaction or on viewport.');
 }
-/** A bound value kept as a declaration the cascade settles: a `var()` or a relative length. */
+/** A bound value the cascade works out from tokens: a `var()`, a `color-mix()`, a relative colour. */
+const BOUND_TOKEN = /^[ \t\n\r\f]*(?:var|color-mix)\(|^[ \t\n\r\f]*[a-z]+\([ \t\n\r\f]*from[ \t\n\r\f]/i;
+/**
+ * A bound value kept as a declaration the cascade settles: a `var()`, a colour made of tokens, or
+ * a relative length.
+ */
 function boundFrom(prop, text, on) {
-    return /^\s*var\(/i.test(text)
+    return BOUND_TOKEN.test(text)
         ? boundDeclaration(prop, tokenFromValue(text), on)
         : boundRelativeLength(prop, text, on);
 }
@@ -2344,6 +2377,26 @@ function applyIntrinsicSize(props, size) {
     }
 }
 const now = () => globalThis.performance?.now?.() ?? Date.now();
+/** How many boxes `node` is under. */
+/**
+ * How deep a node is, with the depth of every box on its way up kept in `known`: the boxes that
+ * changed beneath are a node and its ancestors, so each is counted once, not once a box.
+ */
+function depthOf(node, known) {
+    const path = [];
+    let depth = -1;
+    for (let up = node; up; up = up.parent) {
+        const found = known.get(up);
+        if (found !== undefined) {
+            depth = found;
+            break;
+        }
+        path.push(up);
+    }
+    for (let i = path.length - 1; i >= 0; i--)
+        known.set(path[i], ++depth);
+    return depth;
+}
 function sameHandles(a, b) {
     return a.length === b.length && a.every((handle, i) => handle === b[i]);
 }
@@ -2366,6 +2419,11 @@ function couldBe(compound, node) {
     return (compound.is ?? []).every((alternatives) => alternatives.some((option) => couldBe(option, node)));
 }
 const FRAME_BUDGET_MS = 8;
+/** A solid brush with no colour in it, which stops react-native-svg. */
+const emptyBrush = (value) => typeof value === 'object' &&
+    value !== null &&
+    value.type === 0 &&
+    value.payload == null;
 export class Engine {
     /** Scopes the CSS resolver's memo. Bumped once per commit. */
     styleEpoch = 0;
@@ -2819,7 +2877,7 @@ export class Engine {
         if (sheet === undefined || node.sheet === sheet)
             return;
         node.sheet = sheet;
-        this.styles.noteSheet(sheet);
+        this.styles.noteSheet(sheet, true);
         this.watchStructure(sheet);
         this.watchHas(sheet);
         this.watchActive(sheet);
@@ -2855,7 +2913,7 @@ export class Engine {
     createElement(name, sheet = null) {
         const node = new RetainedNode('element', name, this);
         node.sheet = sheet;
-        this.styles.noteSheet(sheet);
+        this.styles.noteSheet(sheet, true);
         const html = HTML_ELEMENTS.get(name);
         if (html !== undefined) {
             if (html.role)
@@ -2885,8 +2943,10 @@ export class Engine {
      * element matched again, and one named as what a rule's element is inside, `.animating .close`
      * or `.close:is(.animating *)`, the elements under the node that such rules are for. What is
      * under any of those is styled again from the rules it matched, for what it inherits: a `dark`
-     * class on the root finds no rule again for an element no `dark` rule is for. Any other class
-     * has the node and everything under it matched again, as any other change to it does.
+     * class on the root finds no rule again for an element no `dark` rule is for. One named in
+     * `:has()`, or answering a test of the class attribute there, has the boxes above the node
+     * asked again, and one named only in `:has(> )` the box right above it. Any other class has the node and everything under it matched again, as any
+     * other change to it does.
      *
      * A sheet that names a class later restyles what it is for as it arrives, and a node not yet
      * committed is styled when it is, with the class as it is then.
@@ -2905,6 +2965,11 @@ export class Engine {
             return;
         if (reach.own)
             node.ownDirty = true;
+        if (this.hasSheets && reach.beneath)
+            this.markBeneath(node.parent);
+        // `:has(> .on)`: only the box right above the node can answer it.
+        else if (this.hasSheets && reach.parentHas)
+            this.markBeneath(node.parent, node.parent?.parent);
         if (this.styles.reachesUnder(reach)) {
             this.classesAbove += 1;
             this.markUnder(node, reach);
@@ -2962,8 +3027,9 @@ export class Engine {
         if (node.hostSheet === sheet)
             return;
         node.hostSheet = sheet;
-        this.styles.noteSheet(sheet);
+        this.styles.noteSheet(sheet, true);
         this.watchStructure(sheet);
+        this.watchHas(sheet);
         this.watchActive(sheet);
         this.markProps(node);
     }
@@ -3253,6 +3319,7 @@ export class Engine {
     setProp(node, key, value) {
         if (!this.eases)
             this.noteEasingProp(key, value);
+        noteWrite(node, key, value);
         // A prop written again is a binding's, and is committed as any other is.
         if (node.attributeOnly?.delete(key))
             this.markProps(node, false);
@@ -3278,7 +3345,9 @@ export class Engine {
         // And only a prop some selector names: `aria-valuenow` on every tick of a progress bar, a
         // field's text on every key, match nothing they did not.
         const read = key === 'style' ? this.inlineReachesStyle(node) : this.styles.reads(key);
-        this.markProps(node, read || heirs);
+        // And restyles the elements after it only where a rule asks the prop of an element before
+        // another, `[data-on] ~ .x`: a point of a chart set as a finger moves leaves those after it.
+        this.markProps(node, read || heirs, this.styles.readsBeside(key));
         if (SIZES_A_RUN.has(key))
             this.markParagraph(node);
     }
@@ -3304,6 +3373,40 @@ export class Engine {
         this.markProps(node, false);
         this.markProps(child, false);
     }
+    /**
+     * Hand a node's background colour to `listener` instead of painting it: what its stylesheets,
+     * tokens and inline style resolve `background-color` to, or undefined for none. Called after
+     * each commit that changes it, the first one included. What a component needs whose colour is
+     * drawn by a native view the node is not, from a prop of that view's, as a bottom sheet's is.
+     * The function returned stops it, and the node paints its own background again.
+     */
+    takePaint(node, listener) {
+        node.paintTaker = listener;
+        node.paintTaken = UNREPORTED;
+        this.markProps(node, false);
+        return () => {
+            if (node.paintTaker !== listener)
+                return;
+            node.paintTaker = undefined;
+            this.paintReports.delete(node);
+            this.markProps(node, false);
+        };
+    }
+    /** Nodes whose background colour is to be handed over once the commit running ends. */
+    paintReports = new Set();
+    reportPaint() {
+        const nodes = [...this.paintReports];
+        this.paintReports.clear();
+        // One listener that throws stops neither the rest nor what the commit does after them.
+        for (const node of nodes) {
+            try {
+                node.paintTaker?.(node.paintTaken);
+            }
+            catch (error) {
+                this.reportEventError(error, 'paint');
+            }
+        }
+    }
     /**
      * Keep a prop the node already has as an attribute: on the node for a selector such as
      * `:host([variant='primary'])` to match, and left out of what is committed to the native view.
@@ -3372,7 +3475,9 @@ export class Engine {
         else
             byProp.delete(prop);
         node.boundStyle = byProp.size ? [...byProp.values()] : null;
-        this.markProps(node);
+        // Settled by the cascade as the node is styled, and asked about by no selector: nothing after
+        // the node matches otherwise for it.
+        this.markProps(node, true, false);
         return bound !== null || refused;
     }
     /** Whether a bound value is one CSS has none of, which is dropped with a warning. */
@@ -3436,7 +3541,7 @@ export class Engine {
         return () => set.delete(fn);
     }
     // --- dirty marking ----------------------------------------------------
-    markProps(node, affectsStyle = true) {
+    markProps(node, affectsStyle = true, beside = true) {
         node.propsDirty = true;
         // Classes, `nativeID` and anything else a selector can read live in props, so any of them
         // changing can change what this node matches, and through it what its whole subtree does.
@@ -3446,7 +3551,8 @@ export class Engine {
             node.styleDirty = true;
             // `.peer:focus ~ .label`: what a later sibling matches can hang on this node's classes and
             // state, though nothing about the sibling moved. Only sheets that ask about siblings pay.
-            if (this.structuralSheets)
+            // Not for a change `beside` says no rule asks of an element before another.
+            if (this.structuralSheets && beside)
                 this.markLaterSiblings(node);
             if (this.hasSheets)
                 this.markBeneath(node.parent);
@@ -3474,11 +3580,12 @@ export class Engine {
     }
     /**
      * Something at or beneath `from` changed: every node from there up may match a `:has()` rule
-     * it did not, or stop matching one. They are matched again rather than marked for restyling,
-     * which would restyle everything under them. Only sheets that use `:has()` pay.
+     * it did not, or stop matching one, up to `upTo` and not it. They are matched again rather than
+     * marked for restyling, which would restyle everything under them. Only sheets that use
+     * `:has()` pay.
      */
-    markBeneath(from) {
-        for (let node = from; node; node = node.parent) {
+    markBeneath(from, upTo = null) {
+        for (let node = from; node && node !== upTo; node = node.parent) {
             node.hasDirty = true;
             if (this.hasReaders.size)
                 this.changedBeneath.add(node);
@@ -3495,20 +3602,49 @@ export class Engine {
      * Have matched again what is under each box that changed beneath and that such a rule could
      * be asking: the nodes the rule is for, and no other. Once for a commit, however many changes
      * there were beneath the box: a table gains its rows one at a time.
+     *
+     * A rule asked of a box above is walked under the highest box that asks it, which reaches what
+     * is under the boxes beneath that one as well: a rule `:has()` asks of any box is asked by every
+     * box from the change up to the root, and walked once, from the root. The rules a box asks are
+     * walked together, the tree beneath it once.
      */
     markUnderHas() {
         if (!this.changedBeneath.size)
             return;
-        for (const node of this.changedBeneath) {
-            for (const readers of this.hasReaders.values()) {
-                for (const { classes, subjects } of readers) {
-                    if (classes.every((name) => node.classes?.has(name)))
-                        this.markUnder(node, subjects);
-                }
-            }
+        const readers = [...this.hasReaders.values()].flat();
+        const depths = new Map();
+        for (const node of this.changedBeneath)
+            depthOf(node, depths);
+        const boxes = [...this.changedBeneath].sort((a, b) => depths.get(a) - depths.get(b));
+        // By box walked, the rules walked under it and under every box above it.
+        const walked = new Map();
+        for (const node of boxes) {
+            let above;
+            for (let up = node.parent; up && !above; up = up.parent)
+                above = walked.get(up);
+            const all = this.markUnderBox(node, readers, above);
+            if (all)
+                walked.set(node, all);
         }
         this.changedBeneath.clear();
     }
+    /**
+     * `markUnderHas` for one box: the rules it asks that no box above it was walked for, walked
+     * together. What was walked under it and above it, which is `above` where it asks no more.
+     */
+    markUnderBox(node, readers, above) {
+        const asked = [];
+        for (const reader of readers) {
+            if (above?.has(reader) || !reader.classes.every((name) => node.classes?.has(name)))
+                continue;
+            asked.push(reader);
+        }
+        if (!asked.length)
+            return above;
+        const subjects = asked.map((reader) => reader.subjects);
+        this.markUnder(node, subjects.length === 1 ? subjects[0] : joinSubjects(subjects));
+        return new Set([...(above ?? []), ...asked]);
+    }
     /**
      * What `node` matches changed, which the elements after it can read: as many of them as a rule
      * steps along from one, every one for a `~`, and none where no sheet steps at all.
@@ -3694,6 +3830,7 @@ export class Engine {
                 this.stats.slowCommits++;
         }
         this.flushTransitionEvents();
+        this.reportPaint();
         this.playSized();
         this.scrollDriver?.afterCommit();
         // Read first: the commit that settles keyframes starts by clearing it.
@@ -3735,14 +3872,14 @@ export class Engine {
     /** The first commit whose new views have not been drawn yet, while `commitUnseen` runs. */
     unseen = Infinity;
     /**
-     * A commit for what changed in the same turn as earlier commits, before a frame was drawn.
-     * `since` is how many commits there had been before the first of them (`stats.commits`).
+     * A commit for what changed after earlier commits, before a frame has drawn them. `since` is
+     * how many commits there had been before the first of them (`stats.commits`).
      *
      * A view those commits created has not been seen in the style they gave it, so what this one
-     * gives it is where it starts, and no transition runs toward it. That is what a browser
-     * does with a class added to an element in the turn that inserted it, and what `animate.enter`
-     * is built on: Angular adds the enter class after the render pass that created the element, and
-     * takes it off a frame later, which is the one change the transition is for.
+     * gives it is where it starts, and no transition runs toward it. That is what a browser does
+     * with a class added to an element before the frame after it was inserted, and what
+     * `animate.enter` is built on: Angular adds the enter class after the render pass that created
+     * the element, and takes it off a frame later, which is the one change the transition is for.
      */
     commitUnseen(since) {
         this.unseen = since;
@@ -3902,7 +4039,6 @@ export class Engine {
         const resolved = props['pointerEvents'];
         writeOwnProps(node.props, props, node.attributeOnly);
         withTextContent(node, viewName, props);
-        renameFonts(viewName, props, this.postScriptName);
         truncatedAs(node, props);
         const cascaded = props['transform'];
         const inline = inlineOf(node);
@@ -3920,6 +4056,8 @@ export class Engine {
         flattenStyle(node.props[STYLE_OVERRIDE], style);
         this.fontFaces.apply(style);
         holdLoadingFamily(node, style);
+        // Once the face is matched: a family a view's own font names is the face its weight chose.
+        renameFonts(viewName, style, this.postScriptName);
         if (viewName === PARAGRAPH) {
             alignText(style, this.directionOf(node, style));
             this.wholeWords(node, style);
@@ -3928,7 +4066,7 @@ export class Engine {
         if (this.fontsRefreshed)
             this.capForFonts(node, style);
         alignMultiline(viewName, style);
-        rowsTall(style, this.fontScale);
+        rowsTall(viewName, style, this.fontScale);
         const merged = composeTransform(node, this.eased(node, style));
         // On iOS: Android's field says the baseline of the line it is sized and centred by.
         // Still under the row that marked it: a row taken away is not committed again to unmark it.
@@ -4055,6 +4193,11 @@ export class Engine {
      * its parent's: the cascade's, and over it the parent's inline style.
      */
     movePaint(node, merged) {
+        if (node.paintTaker) {
+            // Only the colour is handed over: a background image stays painted on the node.
+            this.takenPaint(node, merged['backgroundColor']);
+            delete merged['backgroundColor'];
+        }
         if (node.paintsOn)
             for (const key of PAINT_KEYS)
                 delete merged[key];
@@ -4066,6 +4209,13 @@ export class Engine {
             if (paint[key] !== undefined)
                 merged[key] = paint[key];
     }
+    /** Note the background colour a node that hands it over resolves to, where it changed. */
+    takenPaint(node, color) {
+        if (color === node.paintTaken)
+            return;
+        node.paintTaken = color;
+        this.paintReports.add(node);
+    }
     /**
      * A container whose direction or alignment changed since a child with a `fit-content` size
      * read it, or whose height stopped or started being one a percentage is taken of since a child
@@ -4890,13 +5040,13 @@ export class Engine {
     /**
      * Commit where it ends each transition of a size or a place that just started, for native to
      * move the view there: a layout animation, which the commit asks for once it is known that
-     * nothing else in it moves. One still on its way is committed where it ends too.
+     * nothing else in it moves. One still on its way is committed where it ends too. On a host
+     * with no layout animation they are eased from JavaScript, but for one sent on again and again.
      *
      * A width eased from JavaScript is a commit a frame, and a commit lays the whole screen out.
      */
     layEased(node, state, started, props, now) {
-        if (!this.fabric.configureNextLayoutAnimation)
-            return;
+        const native = this.fabric.configureNextLayoutAnimation !== undefined;
         for (const key of started) {
             const eased = state.get(key);
             if (!LAID_OUT.has(key) || eased.start > now || eased.duration <= 0)
@@ -4908,6 +5058,8 @@ export class Engine {
                 props[key] = eased.to;
                 continue;
             }
+            if (!native)
+                continue;
             eased.laid = true;
             this.laying.push({ node, key, eased });
         }
@@ -4920,10 +5072,11 @@ export class Engine {
     /**
      * Whether a transition of a size is one sent on again and again, each before the last had
      * ended: a progress bar that steps every 50ms and eases each step over 150. Native moves the
-     * view, and lays the screen out, every frame while a layout animation runs, so one started at
-     * every step is one that never stops. The first, and one sent back before it ends, are
-     * played; from the second sent on in a row, each is committed where it ends, and the steps
-     * are the motion. Played again once the size has been left alone for as long as it lasts.
+     * view, and lays the screen out, every frame while a layout animation runs, and JavaScript
+     * commits every frame while it eases one, so one started at every step is one that never
+     * stops. The first, and one sent back before it ends, are played; from the second sent on in
+     * a row, each is committed where it ends, and the steps are the motion. Played again once the
+     * size has been left alone for as long as it lasts.
      */
     sentOnAgain(node, key, eased, now) {
         const starts = this.laidStarts.get(node) ?? this.laidStarts.set(node, new Map()).get(node);
@@ -5323,15 +5476,21 @@ export class Engine {
         }
         return this.animating;
     }
-    /** The host's conversions, applied to a copy. A removed prop travels as null and stays null. */
-    processed(props) {
+    /**
+     * The host's conversions, applied to a copy. A removed prop travels as `cleared` says, null for
+     * nearly every one. On an update a colour dropped as unreadable is null too: JSI leaves out an
+     * undefined key, and Fabric keeps what a clone leaves out.
+     */
+    processed(props, update) {
         const out = {};
         for (const key of Object.keys(props)) {
             const value = props[key];
-            if (value === null || value === undefined)
+            if (value === null)
+                out[key] = cleared(key);
+            else if (value === undefined)
                 out[key] = value;
             else if (isColorProp(key))
-                out[key] = this.painted(key, value);
+                out[key] = this.colourProp(key, value, update);
             // A list of sources has already been resolved by whoever built it, as RN's resolver
             // also assumes: it passes any object through and only turns a number into one.
             else if (ASSET_PROPS.has(key) && !Array.isArray(value))
@@ -5493,7 +5652,7 @@ export class Engine {
         this.noteMoved(node, propsPayload, childHandles.length !== previous.childHandles.length, previous.props['text']);
         let handle = previous.handle;
         if (childrenChanged || propsPayload) {
-            handle = this.clone(previous.handle, propsPayload && this.processed(propsPayload), childrenChanged ? childHandles : null);
+            handle = this.clone(previous.handle, propsPayload && this.processed(propsPayload, true), childrenChanged ? childHandles : null);
             // A clone is the same view, so it keeps the tag it was created with, not the newest tag
             // handed out, which is some other node's.
             node.committed = { handle, tag: previous.tag, props, childHandles, viewName };
@@ -5838,7 +5997,7 @@ export class Engine {
                     ...STAND_INS[name],
                 };
                 const payload = diffProps(kept.committed.props, props);
-                const handle = this.clone(kept.committed.handle, payload && this.processed(payload), []);
+                const handle = this.clone(kept.committed.handle, payload && this.processed(payload, true), []);
                 kept.committed = { ...kept.committed, handle, props, childHandles: [] };
                 kept.node = null;
             }
@@ -5936,7 +6095,7 @@ export class Engine {
         const tag = nextTag();
         this.stats.createdNodes++;
         // instanceHandle is the retained node itself: it is what Fabric hands back on events.
-        const handle = this.fabric.createNode(tag, viewName, this.rootTag, this.processed(props), node);
+        const handle = this.fabric.createNode(tag, viewName, this.rootTag, this.processed(props, false), node);
         for (const child of childHandles)
             this.fabric.appendChild(handle, child);
         node.committed = { handle, tag, props, childHandles, viewName };
@@ -6228,17 +6387,29 @@ export class Engine {
     resolveAsset(value) {
         return this.resolveAssetSource(value);
     }
+    /** A colour prop as `processed` sends it: one dropped as unreadable is null on an update. */
+    colourProp(key, value, update) {
+        const painted = this.painted(key, value);
+        return painted === undefined && update ? null : painted;
+    }
     /**
      * A colour prop as native takes it. A shape's `fill` or `stroke` the cascade settled from a
-     * token is the solid brush react-native-svg takes, and `none` no paint at all.
+     * token is the solid brush react-native-svg takes, `none` no paint at all, and one the host
+     * reads no colour in no paint of the shape's own.
      */
     painted(key, value) {
         if (!BRUSH_PROPS.has(key))
             return this.color(value);
-        // Already a brush, as the icon wrote it: only one the cascade settled is still text.
+        // Already a brush, as the icon wrote it: only one the cascade settled is still text. An
+        // icon's solid brush holds whatever the host read, which is nothing for an unreadable colour.
         if (typeof value !== 'string')
-            return value;
-        return value === 'none' ? null : { type: 0, payload: this.color(value) };
+            return emptyBrush(value) ? undefined : value;
+        if (value === 'none')
+            return null;
+        // A colour the host cannot read is dropped, as a browser drops it: a solid brush with no
+        // colour in it stops the app.
+        const payload = this.color(value);
+        return payload == null ? undefined : { type: 0, payload };
     }
     /**
      * The host's `processColor`, and the one place a platform colour becomes one.